/* AUTH-2026-20260827 — вход / регистрация / забравена парола.
   Собствен, префиксиран слой (.a-*), за да не се бори с глобалния style.css.
   Мобилно първо: една колона; брандовият панел се появява чак от 900px нагоре. */

.a-wrap {
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 14px 56px;
    background:
        linear-gradient(180deg, #F3F4FA 0%, #F7F7FB 340px);
}

.a-shell {
    width: 100%;
    max-width: 980px;
    background: #fff;
    border-radius: 26px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    box-shadow: 0 30px 80px -26px rgba(58, 45, 140, .34), 0 2px 10px rgba(30, 20, 80, .06);
}

.a-shell--solo { max-width: 520px; }

@media (min-width: 900px) {
    .a-shell { grid-template-columns: .9fr 1fr; }
    .a-shell--solo { grid-template-columns: 1fr; }
}

/* ─────────────── брандов панел (само десктоп) ─────────────── */

.a-brand { display: none; }

@media (min-width: 900px) {
    .a-brand {
        display: flex;
        flex-direction: column;
        position: relative;
        isolation: isolate;
        padding: 46px 40px;
        color: #fff;
        background: linear-gradient(168deg, #3D3796 0%, #2C2769 100%);
    }
    .a-brand::before,
    .a-brand::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        z-index: -1;
        filter: blur(2px);
    }
    .a-brand::before {
        width: 320px; height: 320px; top: -120px; right: -110px;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .13), transparent 70%);
    }
    .a-brand::after {
        width: 260px; height: 260px; bottom: -100px; left: -90px;
        background: radial-gradient(circle at 60% 40%, rgba(255, 255, 255, .09), transparent 70%);
    }
}

.a-brand__logo {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em;
    color: #fff; text-decoration: none; margin-bottom: auto;
}
.a-brand__logo span {
    width: 30px; height: 30px; border-radius: 9px;
    background: rgba(255, 255, 255, .22);
    display: grid; place-items: center; font-size: .82rem;
    backdrop-filter: blur(4px);
}
.a-brand h2 {
    font-size: 1.62rem; line-height: 1.28; font-weight: 800;
    margin: 32px 0 14px; letter-spacing: -.02em; color: #fff;
}
.a-brand p.a-brand__lead { font-size: .95rem; line-height: 1.6; opacity: .93; margin: 0 0 26px; }

.a-brand__list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 11px; }
.a-brand__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; opacity: .96; }
.a-brand__list i { margin-top: 3px; font-size: .78rem; opacity: .9; }

.a-brand__stats { display: flex; gap: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .24); }
.a-brand__stats b { display: block; font-size: 1.42rem; font-weight: 800; line-height: 1.1; }
.a-brand__stats small { font-size: .77rem; opacity: .85; }

.a-faces { display: flex; margin-top: 20px; }
.a-faces img,
.a-faces span.a-face {
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    object-fit: cover; margin-left: -10px;
    background: rgba(255, 255, 255, .25);
    display: grid; place-items: center;
    font-size: .72rem; font-weight: 700; color: #fff;
}
.a-faces > :first-child { margin-left: 0; }

/* ─────────────── мобилна лента вместо панела ─────────────── */

.a-brandbar {
    display: flex; align-items: center; gap: 10px;
    padding: 15px 22px; color: #fff; font-weight: 700; font-size: .95rem;
    background: #3D3796;
    text-decoration: none;
}
.a-brandbar small { display: block; font-weight: 500; font-size: .76rem; opacity: .9; }
@media (min-width: 900px) { .a-brandbar { display: none; } }

/* ─────────────── формата ─────────────── */

.a-main { padding: 30px 22px 28px; }
@media (min-width: 900px) { .a-main { padding: 44px 46px; } }

.a-main h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; text-align: left; }
.a-main .a-sub { color: #77778F; font-size: .92rem; margin: 0 0 24px; }

.a-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    padding: 4px; background: #F1F1F8; border-radius: 14px; margin-bottom: 24px;
}
.a-tabs a {
    text-align: center; padding: 11px 6px; border-radius: 11px;
    font-weight: 600; font-size: .93rem; color: #6E6E88; text-decoration: none;
    transition: background .18s, color .18s, box-shadow .18s;
}
.a-tabs a:hover { color: #4A4A63; }
.a-tabs a.is-on { background: #fff; color: #2B2B43; box-shadow: 0 2px 8px rgba(40, 30, 90, .12); }

.a-field { margin-bottom: 16px; }
.a-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.a-label { display: block; font-size: .855rem; font-weight: 600; color: #46465E; margin-bottom: 7px; }
.a-field__head .a-label { margin-bottom: 0; }
.a-field__head a { font-size: .82rem; color: #6C63FF; text-decoration: none; font-weight: 600; }
.a-field__head a:hover { text-decoration: underline; }
.a-req { color: #C64B4F; }

.a-ctl { position: relative; }
.a-input {
    width: 100%; height: 52px;
    border: 1.5px solid #E4E4F0; border-radius: 14px; background: #FAFAFF;
    padding: 0 14px 0 44px; font-size: 16px; color: #22223B; font-family: inherit;
    transition: border-color .16s, box-shadow .16s, background .16s;
    -webkit-appearance: none; appearance: none;
}
.a-input::placeholder { color: #ABABC2; }
.a-input:focus { outline: none; border-color: #6C63FF; background: #fff; box-shadow: 0 0 0 4px rgba(108, 99, 255, .14); }
.a-input.is-bad { border-color: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, .12); }
.a-input.is-good { border-color: #2E9E63; }
.a-input--pw { padding-right: 52px; }

.a-ico {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: #ABABC2; pointer-events: none; font-size: .93rem; transition: color .16s;
}
.a-input:focus ~ .a-ico { color: #6C63FF; }

.a-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px;
    color: #8A8AA8; cursor: pointer; display: grid; place-items: center; transition: background .16s, color .16s;
}
.a-eye:hover { background: #F0F0F8; color: #6C63FF; }
.a-eye:focus-visible { outline: 2px solid #6C63FF; outline-offset: 1px; }

.a-hint { font-size: .78rem; color: #8A8AA8; margin: 7px 0 0; }
.a-caps { font-size: .78rem; color: #B45309; margin: 7px 0 0; display: flex; gap: 6px; align-items: center; }
.a-mismatch { font-size: .78rem; color: #E5484D; margin: 7px 0 0; }

/* сила на паролата */
.a-meter { margin-top: 11px; }
.a-meter__row { display: flex; align-items: center; gap: 10px; }
.a-meter__track { flex: 1; height: 6px; background: #ECECF4; border-radius: 99px; overflow: hidden; }
.a-meter__fill { height: 100%; width: 0; border-radius: 99px; background: #E5484D; transition: width .25s ease, background .25s ease; }
.a-meter__fill[data-level="2"] { background: #F5A524; }
.a-meter__fill[data-level="3"] { background: #3E9AE8; }
.a-meter__fill[data-level="4"] { background: #2E9E63; }
.a-meter__label { font-size: .76rem; font-weight: 600; color: #77778F; min-width: 46px; text-align: right; }
.a-rules { list-style: none; padding: 0; margin: 9px 0 0; display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: .77rem; color: #9494AC; }
.a-rules li::before { content: '\25CB'; margin-right: 5px; }
.a-rules li.is-ok { color: #2E9E63; }
.a-rules li.is-ok::before { content: '\2713'; }

/* избор с радио-бутони (пол) */
.a-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.a-chips label {
    flex: 1; min-width: 88px; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 10px; border: 1.5px solid #E4E4F0; border-radius: 13px; cursor: pointer;
    font-size: .9rem; background: #FAFAFF; transition: border-color .16s, background .16s, color .16s;
}
.a-chips label:hover { border-color: #C9C5FF; }
.a-chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.a-chips input:checked + span { color: #4A41E0; font-weight: 700; }
.a-chips label:has(input:checked) { border-color: #6C63FF; background: #F2F1FF; }
.a-chips label:focus-within { box-shadow: 0 0 0 4px rgba(108, 99, 255, .14); }

/* съгласие */
.a-agree { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; line-height: 1.5; color: #5A5A72; margin: 4px 0 20px; cursor: pointer; }
.a-agree input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: #6C63FF; }
.a-agree a { color: #6C63FF; }

/* бутон */
.a-btn {
    position: relative; width: 100%; min-height: 54px; border: 0; border-radius: 14px; cursor: pointer;
    font-size: 1rem; font-weight: 700; color: #fff; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: #5B54E0;
    box-shadow: 0 8px 20px -10px rgba(61, 55, 150, .7);
    transition: background .18s ease, transform .12s ease, box-shadow .22s ease;
}
.a-btn:hover { background: #4A43D4; box-shadow: 0 12px 26px -10px rgba(61, 55, 150, .8); }
.a-btn:active { transform: translateY(1px); }
.a-btn:focus-visible { outline: 3px solid rgba(108, 99, 255, .45); outline-offset: 2px; }
.a-btn.is-loading { pointer-events: none; color: transparent; }
.a-btn.is-loading > * { visibility: hidden; }
.a-btn.is-loading::after {
    content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px;
    border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
    animation: a-spin .7s linear infinite;
}
@keyframes a-spin { to { transform: rotate(360deg); } }

/* съобщения */
.a-alert { display: flex; gap: 10px; padding: 13px 15px; border-radius: 13px; font-size: .88rem; line-height: 1.5; margin-bottom: 18px; }
.a-alert i { margin-top: 2px; flex-shrink: 0; }
.a-alert ul { margin: 0; padding-left: 16px; }
.a-alert li + li { margin-top: 3px; }
.a-alert--err { background: #FEF2F2; border: 1px solid #F5CFD1; color: #9F2A2E; }
.a-alert--ok { background: #EDF9F1; border: 1px solid #BFE6CD; color: #1C7A45; }
.a-alert--info { background: #F1F0FF; border: 1px solid #D6D2FF; color: #4A41E0; }

.a-foot { text-align: center; margin: 22px 0 0; font-size: .89rem; color: #77778F; }
.a-foot a { color: #6C63FF; font-weight: 600; text-decoration: none; }
.a-foot a:hover { text-decoration: underline; }

.a-back { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: #8A8AA8; text-decoration: none; margin-bottom: 16px; }
.a-back:hover { color: #6C63FF; }

/* избор на тип акаунт */
.a-pick { display: grid; gap: 13px; }
.a-pick > a {
    position: relative; display: flex; gap: 14px; align-items: flex-start;
    padding: 19px 18px; border: 1.5px solid #E4E4F0; border-radius: 18px;
    text-decoration: none; color: inherit; background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.a-pick > a:hover { transform: translateY(-2px); border-color: transparent; box-shadow: 0 18px 34px -18px rgba(70, 50, 160, .5); }
.a-pick > a::before {
    content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1.5px; opacity: 0;
    background: #5B54E0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude; transition: opacity .2s ease; pointer-events: none;
}
.a-pick > a:hover::before { opacity: 1; }
.a-pick__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 1.05rem; flex-shrink: 0; }
.a-pick__ico--c, .a-pick__ico--b { background: #EDECFA; color: #4A43D4; }
.a-pick h3 { font-size: 1.03rem; font-weight: 700; margin: 0 0 4px; }
.a-pick p { font-size: .85rem; line-height: 1.5; color: #77778F; margin: 0; }
.a-pick__go { margin-left: auto; align-self: center; color: #C4C4D8; flex-shrink: 0; }
.a-pick > a:hover .a-pick__go { color: #6C63FF; }

.a-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px;
    font-size: .78rem; font-weight: 700; margin-bottom: 16px;
    background: #FFF3E4; color: #9A5B12; border: 1px solid #F5DCBC;
}

/* капанът за ботове — извън екрана, но НЕ display:none (някои ботове го засичат) */
.bg-trap { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 899px) {
    .a-wrap { padding: 78px 12px 40px; }
    .a-shell { border-radius: 20px; }
    .a-main h1 { font-size: 1.38rem; }
}

@media (prefers-reduced-motion: reduce) {
    .a-btn, .a-pick > a, .a-input, .a-meter__fill { transition: none !important; }
    .a-btn.is-loading::after { animation-duration: 2s; }
}

/* [hidden] трябва да бие display:flex по-горе — иначе предупреждението за Caps Lock
   стои видимо още от зареждането (точно това се случи при първата снимка). */
.a-caps[hidden], .a-meter[hidden], .a-mismatch[hidden] { display: none !important; }

/* При дългата форма за регистрация панелът е висок: логото остава горе, числата
   се залепват долу — иначе целият текст падаше в долния край. */
.a-brand__logo { margin-bottom: 0; }
.a-brand__stats { margin-top: auto; }
.a-back { display: flex; width: max-content; }

/* ─────────── по-спокойно и по-подредено (по бележка на Ивайло 27.08) ───────────
   Проблемът не беше в един цвят, а в ДВЕ ярки гами едновременно — лилаво и розово.
   Сега цветът е един, а водещото е текстът: по-тъмно заглавие, по-ясни карти. */

.a-shell { box-shadow: 0 22px 60px -30px rgba(30, 26, 80, .30), 0 1px 3px rgba(30, 20, 80, .05); }
.a-main h1 { font-size: 1.6rem; color: #1B1B33; }
.a-main .a-sub { color: #6E6E88; }

.a-brand h2 { font-size: 1.5rem; line-height: 1.32; }
.a-brand p.a-brand__lead { opacity: .82; }
.a-brand__list li { opacity: .88; }
.a-brand__list i { opacity: .55; }

.a-pick > a { background: #FCFCFE; border-color: #E8E8F2; }
.a-pick > a:hover { background: #fff; }
.a-pick h3 { font-size: 1.06rem; color: #1B1B33; }
.a-pick p { color: #6E6E88; }
.a-pick__ico { border-radius: 13px; }

/* COOKIEBAR-OVERLAP-20260828 — банерът за бисквитки е fixed на дъното и на телефон
   е ~200px. Оставяме място под картата, за да не ляга банерът върху бутона „Вход".
   Стойността я подава main.php при показване/скриване на банера. */
.a-wrap { padding-bottom: calc(56px + var(--ugcbg-cookiebar, 0px)); }
@media (max-width: 899px) {
    .a-wrap { padding-bottom: calc(40px + var(--ugcbg-cookiebar, 0px)); }
}

/* На нисък екран (стари Android-и, 640–700px) картата беше 643px — по-висока от
   самия екран. Свиваме я, за да се вижда бутонът без скролване. */
@media (max-height: 730px) and (max-width: 899px) {
    .a-wrap { padding-top: 62px; }
    .a-brandbar { padding: 9px 16px; font-size: .88rem; }
    .a-brandbar small { font-size: .72rem; }
    .a-main { padding: 16px 18px 18px; }
    .a-main h1 { font-size: 1.22rem; }
    .a-main .a-sub { font-size: .84rem; margin-bottom: 14px; }
    .a-tabs { margin-bottom: 14px; padding: 3px; }
    .a-tabs a { padding: 9px 6px; font-size: .88rem; }
    .a-field { margin-bottom: 12px; }
    .a-input { height: 46px; }
    .a-btn { min-height: 48px; }
    .a-foot { margin-top: 14px; }
}

/* Банерът за бисквитки: 214px на 360px екран е една трета от телефона. Текстът
   се реже до два реда, бутоните лягат на един ред. */
@media (max-width: 700px) {
    #cookieBanner p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    #cookieBanner .container > div:last-child { width: 100%; display: flex; gap: 7px; }
    #cookieBanner .container > div:last-child button { flex: 1 1 0; white-space: nowrap; }
}
@media (max-height: 730px) and (max-width: 899px) {
    /* На нисък екран подзаглавието е чиста украса — то е разликата между
       „бутонът се вижда" и „бутонът е под банера за бисквитки". */
    .a-main .a-sub { display: none; }
    .a-main h1 { margin-bottom: 14px; }
    .a-field { margin-bottom: 10px; }
    .a-input { height: 44px; }
}