/* cv_auth.css — cloaking v2 page-specific styles (reuses auth_v2 base).
   Left panel = green gradient + city map + woman photo + floating
   "Геопозиция найдена" bubbles + a foreground card.
   Login card = "Локация найдена"; Register card = live "Поиск локации"
   search animation (progress 0→100% + Страна/Город/Улица/Дом rows). */

/* ============================================================
   Shared cloaking left panel
   ============================================================ */
.cv-auth__left {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: 0;
    background: linear-gradient(0deg, #0A4724 0%, #16803D 100%);
}

/* woman-on-phone photo (already on a green gradient) fills the panel */
.cv-auth__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 2;
    pointer-events: none;
}

/* ============================================================
   No-phone entry (CTA-переход без номера): левая панель = медиа
   как на пейволе, без анимации поиска локации. Переиспользует
   контейнер .cv-auth__left для сайзинга split-panel.
   ============================================================ */
.cv-auth__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 2;
    pointer-events: none;
}

/* Мобильная картинка (аналог .cv2-paywall__mphoto на пейволе) — скрыта на десктопе */
.cv-auth__mphoto { display: none; }

/* ≤768px: раскладка 1:1 как на клоачном пейволе — картинка-фон сверху
   (position:absolute, на всю ширину), белая карточка формы сдвинута вниз
   (margin-top:28vh) и перекрывает её; фон обёртки — зелёный градиент.
   Скоуп .cv-auth--media (только переход без телефона) — телефонную и белую
   регистрацию не задевает. */
@media (max-width: 768px) {
    .auth-v2__wrap.cv-auth--media {
        background: linear-gradient(135deg, #0a5c2e 0%, #16a34a 60%, #2bb673 100%);
    }

    /* левая панель не занимает поток и не создаёт контекст позиционирования —
       чтобы absolute-картинка тянулась на всю ширину, как mphoto на пейволе */
    .cv-auth--media .cv-auth__left--media {
        position: static;
        min-height: 0;
    }
    .cv-auth--media .cv-auth__media { display: none; }   /* десктопный кавер выкл. */
    .cv-auth--media .cv-auth__mphoto {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        z-index: 0;
    }

    /* форма сдвинута вниз и поверх картинки — те же отступы, что на пейволе */
    .cv-auth--media .auth-v2__right {
        position: relative;
        z-index: 3;
        margin-top: 28vh;
    }
}

/* faint city map overlaid above the photo */
.cv-auth__map {
    position: absolute;
    inset: 0;
    background: url("/offers/smspoisk/images/v2/map-illust.png") no-repeat center center;
    background-size: cover;
    opacity: .14;
    z-index: 3;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* brand logo top-left */
.cv-auth__logo {
    position: absolute;
    left: 40px;
    top: 36px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #FFF;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
}
.cv-auth__logo img { max-width: 30px; }

/* floating geoposition bubbles */
.cv-auth__bubble {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 12px;
    padding: 6px 12px 6px 7px;
    box-shadow: 1.6px 1.6px 1.4px rgba(0, 0, 0, .18);
}
.cv-auth__bubble-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 7px;
    background:
        #D6EEDC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316A34A'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-9 2.2-9 5.5V22h18v-2.5c0-3.3-4.6-5.5-9-5.5Z'/%3E%3C/svg%3E")
        no-repeat center / 22px 22px;
}
.cv-auth__bubble b {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #0F1710;
    line-height: 1.2;
}
.cv-auth__bubble span {
    display: block;
    font-size: 10px;
    color: #444C50;
    line-height: 1.2;
}
.cv-auth__bubble--anna   { top: 28px;  right: 40px; opacity: .9; }
.cv-auth__bubble--alexey { top: 46%;   right: 64px; opacity: .55; }
.cv-auth__bubble--gleb   { top: 22%;   left: 0;     opacity: .9; }

/* foreground white card (shared by login + register) */
.cv-auth__card {
    position: absolute;
    left: 77px;
    bottom: 40px;
    z-index: 9;
    right: 77px;
    max-width: calc(100% - 64px);
    box-sizing: border-box;
    border-radius: 28px;
    background: linear-gradient(0deg, #0A4724 0%, #16803D 100%), linear-gradient(0deg, #0A2412 0%, #174724 100%);
    padding: 40px 64px;
    box-shadow: 5px 5px 5.5px rgba(0, 0, 0, .31);
}
.cv-auth__card-title {
    margin: 0 0 31px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: #16A34A;
}
.cv-auth__numinfo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}
.cv-auth__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #0F1710;
}
.cv-auth__phone svg { width: 22px; height: 22px; flex-shrink: 0; }
.cv-auth__date {
    font-size: 12px;
    font-weight: 500;
    color: #0F1710;
    white-space: nowrap;
}

/* info rows + status pills */
.cv-auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 29px;
}
.cv-auth__row + .cv-auth__row { margin-top: 20px; }
.cv-auth__row-label {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #0F1710;
}
.cv-auth__persona {
    z-index: 7;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 424px;
}
.cv-auth__card_login {
    padding: 24px 32px;
    border-radius: 28px;
    background: #FFF;
    right: auto;
    width: 431px;
    box-shadow: 5px 5px 11px 0 rgba(0, 0, 0, 0.31);
}

.cv-auth__card_login .cv-auth__numinfo {
    display: flex;
    margin-top: 14px;
    margin-bottom: 25px;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}
.cv-auth__card-title {
    font-size: 24px;
    margin-bottom: 14px;
}

.cv-auth__persona_login {
    bottom: 0;
    display: flex;
    align-items: flex-end;
    transform: translateX(-50%);
    top: 0;
    text-align: right;
    width: calc(100% - 109px);
}

.cv-auth__persona_login img {
    max-width: 100%!important;
    width: 584px;
    max-height: 90vh;
    object-fit: contain;
}
.cv-auth__persona img {
    max-width: 303px;
}
.cauth-label-email {
    text-align: center;
    color: #0F1710;
    font-size: 16px;
    font-style: normal;
    margin-bottom: 12px;
    font-weight: 500;
    line-height: normal;
}
.cv-auth__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 32px;
    background: #21B257;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

/* Register: green search card (matches Figma 4171-18891) */
.cv-auth__card--green {
    background: linear-gradient(150deg, #16803D 0%, #0A4724 100%);
    box-shadow: 0 18px 40px rgba(10, 71, 36, .35);
}
.cv-auth__card--green .cv-auth__card-title { color: #fff; }
.cv-auth__card--green .cv-auth__phone,
.cv-auth__card--green .cv-auth__date,
.cv-auth__card--green .cv-auth__row-label { color: #fff; }
.cv-auth__card--green .cv-auth__phone svg { fill: #fff; }
.cv-auth__card--green .cv-search__progress { background: #E6EEF2; }
.cv-auth__card--green .cv-search__bar { background: #16A34A; }
.cv-auth__card--green .cv-search__pct { color: #fff; }
.cv-auth__card--green .cv-auth__pill { background: #21B257; color: #fff; }

/* desktop shows animated "Поиск локации" card; mobile shows static "Телефон найден" */
.cv-auth__card--mobile { display: none; }

/* ============================================================
   Register: search animation
   ============================================================ */
.cv-search__progress {
    position: relative;
    height: 16px;
    border-radius: 32px;
    background: rgba(16, 128, 61, .12);
    overflow: hidden;
    margin-bottom: 36px;
}
.cv-search__bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 32px;
    background: linear-gradient(90deg, #16A34A 0%, #21B257 100%);
    transition: width .15s linear;
}
.cv-search__pct {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 600;
    color: #fff;
}

/* spinner shown until a row is "Определено" */
.cv-search__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(16, 128, 61, .2);
    border-top-color: #16A34A;
    border-radius: 50%;
    animation: cv-spin .7s linear infinite;
}
@keyframes cv-spin { to { transform: rotate(360deg); } }

/* row toggles its spinner / pill via data-done */
.cv-search__row .cv-auth__pill { display: none; }
.cv-search__row[data-done="1"] .cv-search__spinner { display: none; }
.cv-search__row[data-done="1"] .cv-auth__pill { display: inline-flex; }

/* ============================================================
   Tablet (769–1024)
   ============================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
    .cv-auth__card { width: auto; right: 32px; }
    .cv-auth__card-title { font-size: 22px; }
    .cv-auth__row-label { font-size: 15px; }
}

/* ============================================================
   Mobile (≤768) — left panel collapses to a green top band
   with logo + concentric circles + the status card; form below.
   ============================================================ */
@media (max-width: 768px) {
    .auth-v2__wrap {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background: linear-gradient(160deg, #16803D 0%, #0A4724 100%);
    }

    .cv-auth__left {
        min-height: auto;
        padding: 0;
        background: transparent;
        overflow: visible;
    }

    /* hide desktop-only decorations on mobile */
    .cv-auth__photo,
    .cv-auth__bubble { display: none; }

    .cv-auth__map {
        opacity: .12;
        background-size: 200% auto;
        background-position: center -40px;
    }

    /* concentric "radar" circles behind the logo */
    .cv-auth__rings {
        position: relative;
        z-index: 3;
        display: none;
        height: 150px;
        align-items: center;
        justify-content: center;
    }
    .cv-auth__map {
        display: none;
    }
    .cv-auth__rings::before,
    .cv-auth__rings::after {
        content: "";
        position: absolute;
        border: 1.5px solid rgba(255, 255, 255, .22);
        border-radius: 50%;
    }
    .cv-auth__rings::before { width: 120px; height: 120px; }
    .cv-auth__rings::after  { width: 220px; height: 220px; }
    .auth-v2__wrap {
        background: url('/offers/smspoisk/images/v2/cv/mobauth.jpg') no-repeat center top;
        background-size: cover;
    }
    .cv-auth__mlogo {
        margin-bottom: 109px;
    }
    .cv2-cb-mobile .auth-v2__checkbox {
        font-size: 8px;
        color: #758194;
    }
    .cv-auth__logo {
        position: static;
        z-index: 4;
        justify-content: center;
        padding-top: 28px;
    }

    /* card flows in document (centred near top of green band) */
    .cv-auth__card {
        position: relative;
        left: auto;
        bottom: auto;
        z-index: 4;
        width: auto;
        max-width: none;
        margin: 18px 20px 0;
        padding: 20px;
        border-radius: 24px;
    }
    .cv-auth__card-title { font-size: 20px; }
    .cv-auth__row-label { font-size: 15px; }

    /* swap animated card → static "Телефон найден" card on mobile */
    .cv-auth__card--desktop { display: none; }
    .cv-auth__card--mobile { display: block; }

    /* white form panel below */
    .auth-v2__right {
        margin: 24px 20px 32px;
        border-radius: 28px;
        padding: 28px 20px 32px;
        justify-content: flex-start;
    }
    .auth-v2__form { max-width: 100%; }
    .auth-v2__title { font-size: 24px; }
}

/* ── Responsive consent checkboxes (cloaking register) ──────────────────
   Desktop: white-style single consent checkbox (.cv2-cb-desktop).
   Mobile: cloaking long pre-checked consent (.cv2-cb-mobile).
   Inputs in the hidden block are :disabled via Alpine so they are excluded
   from form submission/validation. */
.cv2-cb-mobile { display: none; }
@media (max-width: 768px) {
    .cv2-cb-desktop { display: none; }
    .cv2-cb-mobile { display: block; }
}

/* ── "Примите условия" error on disabled submit click (cloaking register) ── */
.auth-v2__submit-wrap { width: 100%; }
.cv2-terms-error {
    margin-top: 10px;
    font-size: 13px;
    color: #dc2626;
    line-height: 1.3;
    text-align: center;
}
[x-cloak] { display: none !important; }

/* ============================================================
   МОБИЛЬНАЯ КЛОАКА — варианты шапки (login / register / confirm).
   Только ≤768px. Десктоп не затрагивается.
   ============================================================ */

/* мобильный логотип (login/register) — на десктопе скрыт по умолчанию */
.cv-auth__mlogo { display: none; }
/* мобильная анимированная карточка поиска (2 строки) — на десктопе скрыта */
.cv-auth__card--m-search { display: none; }

@media (max-width: 768px) {
    /* ---------- ВАРИАНТ «ЛОГО + ФОРМА» (login, confirm, register без номера) ---------- */
    .cv-m-logo .cv-auth__photo,
    .cv-m-logo .cv-auth__persona,
    .cv-m-logo .cv-auth__bubble,
    .cv-m-logo .cv-auth__card,
    .cv-m-logo .cv-auth__card--m-search { display: none !important; }

    .cv-m-logo .cv-auth__mlogo,
    .cv-m-logo .cv-auth__logo {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: static;
        width: 100%;
        padding-top: 28px;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        text-decoration: none;
    }
    .cv-m-logo .cv-auth__mlogo img,
    .cv-m-logo .cv-auth__logo img { height: 34px; width: auto; }

    /* ---------- ВАРИАНТ «ПОИСК + ФОРМА» (register с введённым номером) ---------- */
    .cv-m-search .cv-auth__photo,
    .cv-m-search .cv-auth__persona,
    .cv-m-search .cv-auth__bubble,
    .cv-m-search .cv-auth__mlogo,
    .cv-m-search .cv-auth__logo,
    .cv-m-search .cv-auth__rings,
    .cv-m-search .cv-auth__card--mobile,
    .cv-m-search .cv-auth__card--desktop { display: none !important; }

    .cv-m-search .cv-auth__card--m-search {
        display: block !important;
        position: relative;
        width: auto;
        max-width: none;
        margin: 24px 20px 0;
        right: auto;
        padding: 20px;
        border-radius: 24px;
    }
    .cv-search__progress {
        display: none;
    }
    .cv-auth__numinfo {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* Красный бордер чекбокса согласия при сабмите без галочки (клоак-регистрация) */
.auth-v2__checkbox input[type="checkbox"].is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}