/* ridmi — SHARED smsauth (auth form) styles. Universal source for BOTH /login and /buy.
   Scoped to #smsauth (ID) so it works in any context; self-contained vars + dark mode.
   Edit here to change the auth form everywhere. */
/* ===== RIDMI auth card (smsauth) — one card holds every step + social login ===== */
#smsauth{
  --rc:#009EE3; --main-color:#009EE3;            /* resolves the plugin's var(--main-color) → cyan (fixes the invisible "Далі") */
  width:min(404px,92vw); margin:40px auto 64px; box-sizing:border-box; float:none; display:block;
  background:#fff; border-radius:20px; padding:34px 28px 30px;
  box-shadow:0 20px 54px rgba(80,101,140,.16);
  font:15px/1.5 'Inter',-apple-system,Segoe UI,Roboto,sans-serif; color:#3A4358; text-align:center;
}
#smsauth form{ margin:0 0 18px; }
#smsauth .title{ font-size:21px; font-weight:800; color:#1B2330; line-height:1.25; margin:0 0 4px; }
#smsauth .s-text{ font-size:13.5px; line-height:1.55; color:#5b6678; margin:9px 0; text-align:center; }
#smsauth .field{ position:relative; margin:18px 0 4px; max-width:none; }
#smsauth .field input{ box-sizing:border-box; width:100%; height:52px; border:1.5px solid #E4E9F2; border-radius:13px;
  padding:0 16px; font:500 16px/1 'Inter',sans-serif; color:#1B2330; background:#fff; background-image:none;
  text-align:center; letter-spacing:.4px; transition:border-color .18s ease, box-shadow .18s ease; outline:none; }
#smsauth .field input::placeholder{ color:#9AA6B8; font-weight:400; letter-spacing:normal; }
#smsauth .field input:focus{ border-color:var(--rc); box-shadow:0 0 0 4px rgba(0,158,227,.14); }
#smsauth .field label{ display:none; }                 /* use the placeholder, drop the floating label */
#smsauth .field input:required + label::after{ content:none; }
#smsauth .s-submit{ margin-top:14px; }
#smsauth .s-button{ box-sizing:border-box; width:100%; height:52px; border:none; border-radius:13px;
  background:var(--rc); color:#fff; font:700 16px/1 'Inter',sans-serif; cursor:pointer;
  transition:filter .15s ease, transform .08s ease; }
#smsauth .s-button:hover{ filter:brightness(.95); }
#smsauth .s-button:active{ transform:scale(.99); }
#smsauth form.loading-animation .s-button{ opacity:.65; pointer-events:none; }
#smsauth .s-error{ color:#E85C7A; font-weight:600; font-size:13px; margin:10px 0; }
#smsauth .button-link{ background:none; border:none; color:var(--rc); font-weight:600; font-size:13px; cursor:pointer; padding:0; font-family:inherit; }
#smsauth .button-link:hover{ text-decoration:underline; }
#smsauth .countdown{ color:#8590A6; font-weight:600; margin-left:5px; }
#smsauth pre{ display:inline; font-family:inherit; font-weight:800; color:#1B2330; white-space:nowrap; }
/* fallback chips (Telegram Bot / Signal / Viber) — neutralise the inline white bg, keep brand colours */
#smsauth .s-text a{ background:#EEF3FA !important; border:none !important; border-radius:8px !important;
  padding:2px 9px !important; font-weight:700; text-decoration:none; white-space:nowrap; }
/* social login block */
#smsauth br{ display:none; }
#smsauth .social_login_title{ font-weight:700 !important; color:#1B2330; font-size:12px; text-transform:uppercase; letter-spacing:.7px; margin:0; }
#smsauth .social_login_title::before{ content:""; display:block; height:1px; background:#ECEFF4; margin:6px -28px 18px; }
#smsauth .wa-auth-adapters.flex{ width:100%; margin:14px auto 0 !important; gap:12px; }
#smsauth .wa-auth-adapters.flex > a{ height:52px; border-radius:13px; font-size:15px; font-weight:600; }

/* ===== DARK ===== */
html.rd-dark #smsauth{ background:#1B2330; color:#AEB6C6; box-shadow:0 22px 60px rgba(0,0,0,.5); }
html.rd-dark #smsauth .title{ color:#E7ECF4; }
html.rd-dark #smsauth .s-text{ color:#97A1B2; }
html.rd-dark #smsauth pre{ color:#E7ECF4; }
html.rd-dark #smsauth .field input{ background:#232C3B; border-color:rgba(255,255,255,.10); color:#E7ECF4; }
html.rd-dark #smsauth .field input::placeholder{ color:#7D8AA3; }
html.rd-dark #smsauth .field input:focus{ border-color:var(--rc); box-shadow:0 0 0 4px rgba(0,158,227,.22); }
html.rd-dark #smsauth .s-text a{ background:#2A3445 !important; }
html.rd-dark #smsauth .social_login_title{ color:#E7ECF4; }
html.rd-dark #smsauth .social_login_title::before{ background:rgba(255,255,255,.09); }
html.rd-dark #smsauth .wa-auth-adapter-google{ background:#232C3B; color:#E7ECF4; border-color:rgba(255,255,255,.12); }

/* buy-base has .field input:invalid{border-color:red!important} → auth input goes red on load.
   Neutralise it (higher-specificity #smsauth) so /buy matches /login — no premature red. */
#smsauth .field input:invalid{ border-color:#E4E9F2 !important; box-shadow:none !important; }
#smsauth .field input:focus{ border-color:var(--rc) !important; box-shadow:0 0 0 4px rgba(0,158,227,.14) !important; }
html.rd-dark #smsauth .field input:invalid{ border-color:rgba(255,255,255,.10) !important; }
html.rd-dark #smsauth .field input:focus{ border-color:var(--rc) !important; box-shadow:0 0 0 4px rgba(0,158,227,.22) !important; }

/* layering fix (2026-07-02): smsauth AJAX step-transition nests a DUPLICATE #smsauth inside the
   outer wrapper (both get the #smsauth card style → two stacked cards). Kill the inner card. */
#smsauth #smsauth{ background:transparent !important; box-shadow:none !important; border:none !important; border-radius:0 !important; padding:0 !important; margin:0 !important; width:auto !important; max-width:none !important; }