/* ================================================
   AIMARTVA — AUTH (შესვლა / რეგისტრაცია / პაროლის აღდგენა)
   შექმნილი: 2026-08-04 (გ. ყურუა: „сейчас очень сильно перегружен,
   надо под стать всему сайту, в таком же дизайне")

   რა იყო:
   - login.php — ორნაწილიანი ეკრანი მუქ ფონზე (#0a0a1a), მცურავი ნიშნები,
     პულსირებული რგოლები Mia-ს ავატარზე, 4 ცალკე ანიმაცია, გრადიენტული ტექსტი;
   - register.php — მუქი გრადიენტი + „შუშის" ბარათი (backdrop-filter: blur(20px));
   - ორივე **მხოლოდ ქართულად**, ორივე თემის იგნორით (ყოველთვის მუქი).

   რა გახდა: იგივე ენა, რაც დანარჩენ პროდუქტს — tokens.css, ბრტყელი ზედაპირი,
   1px ბორდერი, კობალტის აქცენტი, ღია/მუქი თემა ავტომატურად.
   ⚠️ ფერები მხოლოდ ცვლადებიდან — ლიტერალური ჰექსი აქ არ დაამატო.
================================================ */

.auth-page{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
}

.auth-card{
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: var(--bd);
    border-radius: var(--r-lg);
    padding: 28px 26px;
}
/* რეგისტრაციას ორსვეტიანი რიგი აქვს (სახელი/გვარი) — ოდნავ განიერი */
.auth-card.wide{ max-width: 480px; }

/* ── ბრენდი ── */
.auth-brand{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text);
    margin-bottom: 18px;
}
.auth-brand img{ width: 24px; height: 24px; border-radius: var(--r-xs); object-fit: contain; }
.auth-brand span{ font-size: var(--t-lg); font-weight: 600; letter-spacing: var(--track-tight); }
.auth-brand span b{ color: var(--accent); font-weight: 600; }

.auth-title{ font-size: 20px; font-weight: 700; letter-spacing: var(--track-tight); margin-bottom: 3px; }
.auth-subtitle{ font-size: var(--t-sm); color: var(--text-muted); margin-bottom: 20px; }

/* ── ფორმა ── */
.auth-form{ display: flex; flex-direction: column; gap: 13px; }
.auth-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media(max-width: 420px){ .auth-row{ grid-template-columns: 1fr; } }

.auth-field{ display: flex; flex-direction: column; gap: 6px; }
.auth-label{ font-size: var(--t-sm); font-weight: 500; color: var(--text-secondary); }

.auth-input{
    width: 100%;
    height: 44px;                 /* touch ≥44px */
    padding: 0 13px;
    border: var(--bd);
    border-radius: var(--r-sm);
    background: var(--bg-secondary);
    color: var(--text);
    font-family: inherit;
    font-size: var(--t-md);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease);
}
.auth-input::placeholder{ color: var(--text-muted); }
.auth-input:focus{ border-color: var(--accent); }
.auth-input:disabled{ opacity: .6; }

/* პაროლის ჩვენება/დამალვა */
.auth-pass-wrap{ position: relative; display: flex; }
.auth-pass-wrap .auth-input{ padding-right: 42px; }
.auth-pass-toggle{
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; padding: 0;
    color: var(--text-muted); cursor: pointer; border-radius: var(--r-xs);
}
.auth-pass-toggle:hover{ color: var(--text); }
.auth-pass-toggle .eye-off{ display: none; }
.auth-pass-toggle.on .eye-on{ display: none; }
.auth-pass-toggle.on .eye-off{ display: block; }

/* ── დამატებითი ხაზი: „დამიმახსოვრე" + „დაგავიწყდა?" ── */
.auth-extras{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* ── ვინ ხარ: მოსწავლე თუ მასწავლებელი (2026-08-13) ────────────────────
   ⚠️ ორივე ვარიანტი **ერთნაირად ჩანს** — არჩევანი პირველი კითხვაა და არა
      „დამატებითი" გადამრთველი. რადიოა (და არა ღილაკები), რომ კლავიატურითაც
      და სქრინრიდერითაც იმუშაოს. */
.role-pick{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-opt{ position: relative; cursor: pointer; }
.role-opt input{ position: absolute; opacity: 0; width: 0; height: 0; }
.role-box{
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
    height: 100%;
}
.role-box b{ font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.role-box small{ font-size: var(--t-xs); color: var(--text-muted); line-height: 1.4; }
.role-opt:hover .role-box{ border-color: var(--border-strong); }
.role-opt input:checked + .role-box{ border-color: var(--accent); background: var(--accent-glow); }
.role-opt input:focus-visible + .role-box{ outline: 3px solid var(--ac-600); outline-offset: 2px; }
@media(max-width:420px){ .role-pick{ grid-template-columns: 1fr; } }

.auth-check{ display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: var(--t-sm); color: var(--text-secondary); line-height: 1.5; }
.auth-check input{ position: absolute; opacity: 0; width: 0; height: 0; }
.auth-check-box{
    width: 18px; height: 18px; min-width: 18px; margin-top: 1px;
    border: 2px solid var(--bd-color-strong);
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.auth-check-box svg{ opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
/* ორივე გზა განზრახ — იხ. payment.php-ის იგივე კომენტარი */
.auth-check input:checked + .auth-check-box,
.auth-check-box.on{ background: var(--accent); border-color: var(--accent); }
.auth-check input:checked + .auth-check-box svg,
.auth-check-box.on svg{ opacity: 1; }
.auth-check a{ color: var(--accent); text-decoration: underline; }

.auth-link{ font-size: var(--t-sm); color: var(--accent); text-decoration: none; font-weight: 500; white-space: nowrap; }
.auth-link:hover{ text-decoration: underline; }

/* ── ღილაკი ── */
.auth-btn{
    height: 46px;
    border: 1px solid var(--ac-600);
    border-radius: var(--r-sm);
    background: var(--ac-600);
    color: var(--btn-primary-fg);   /* ⚠️ არა #fff — მუქ თემაზე --ac-600 თეთრდება */
    font-family: inherit;
    font-size: var(--t-lg);
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--dur-fast) var(--ease);
}
.auth-btn:hover{ opacity: .9; }
.auth-btn:disabled{ opacity: .5; cursor: not-allowed; }

/* ── გამყოფი ── */
.auth-divider{
    display: flex; align-items: center; gap: 12px;
    color: var(--text-muted); font-size: var(--t-sm);
    margin: 4px 0;
}
.auth-divider::before, .auth-divider::after{
    content: ''; flex: 1; height: 1px; background: var(--bd-color);
}

/* ── სოციალური ღილაკები ── */
.auth-social{ display: flex; gap: 10px; }
@media(max-width: 420px){ .auth-social{ flex-direction: column; } }
.auth-social a{
    flex: 1;
    height: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: var(--bd);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--t-md);
    font-weight: 500;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.auth-social a:hover{ background: var(--surface-hover); border-color: var(--bd-color-strong); color: var(--text); }
.auth-social svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* ── ქვედა ბმული ── */
.auth-foot{ margin-top: 18px; text-align: center; font-size: var(--t-sm); color: var(--text-muted); }
.auth-foot a{ color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-foot a:hover{ text-decoration: underline; }

/* ── შეტყობინებები ── */
.auth-msg{
    padding: 11px 13px;
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    line-height: 1.5;
    margin-bottom: 14px;
}
.auth-msg.error{ background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.25); color: #DC2626; }
.auth-msg.ok{ background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.25); color: #16A34A; }

/* ── ენის გადამრთველი (ზედა მარჯვენა კუთხე) ── */
.auth-lang{
    position: fixed; top: 14px; right: 14px;
    height: 34px; padding: 0 8px;
    border: var(--bd); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text-secondary);
    font-family: inherit; font-size: var(--t-sm); cursor: pointer;
}