/* Clean responsive stylesheet for login page */
:root { --bg:#f5f6fa; --card:#fff; --border:#e3e7ee; --navy:#1a3b6d; --magenta:#e43f7b; --orange:#ff7a00; --muted:#a0a4ad; --cyan:#06b6d4; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); }
.page, .page * , .page *::before, .page *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.page { display:flex; min-height:100vh; min-height:100dvh; min-height:100svh; background:var(--bg); color:#2a2a2a; font-family:'Segoe UI', Arial, sans-serif; position:relative; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.page::before, .page::after { content:""; position:absolute; pointer-events:none; z-index:0; width:140%; height:55%; left:-20%; right:-20%; background:linear-gradient(135deg, rgba(255,122,0,0) 0%, rgba(255,122,0,0) 52%, rgba(255,122,0,0.18) 58%, rgba(255,122,0,0) 63%, rgba(255,122,0,0.22) 68%, rgba(255,122,0,0) 74%, rgba(255,122,0,0.14) 79%, rgba(255,122,0,0) 84% ); filter:blur(.5px); }
.page::before { top:-8%; transform:rotate(4deg); }
.page::after { bottom:-8%; transform:rotate(-6deg); }
.page .column { flex:1 1 50%; display:flex; flex-direction:column; position:relative; z-index:1; }
.page .left { padding:40px 0; display:flex; flex-direction:column; align-items:center; }
.page .right { align-items:center; justify-content:center; padding:40px 0; display:flex; }
.page .brand { display:flex; align-items:center; gap:16px; margin-left:60px; align-self:flex-start; }
.page .logo { width:340px; max-width:100%; height:auto; }
.page .card { background:var(--card); border-radius:16px; box-shadow:0 6px 24px rgba(0,0,0,.08); }
.page .login { width:320px; max-width:calc(100% - 120px); margin:28px auto 0; padding:16px; }
.page .payment { width:320px; max-width:calc(100% - 120px); margin:16px auto 0; padding:12px; }
.page .payment .form { gap:10px; }
.page .payment .row { display:flex; gap:8px; }
.page .payment .row .field { flex:1 1 50%; }
.card.payment { display: none; opacity:0; transform: translateY(8px); transition: opacity .24s ease, transform .24s ease; }
.card.payment:not(.hidden) { display: block; }
.card.payment.show { opacity:1; transform:none; }

/* Payment error banner */
.card.payment .pay-error { display:block; border:1.5px solid #fecaca; background:#fef2f2; color:#7f1d1d; border-radius:10px; padding:8px 10px; margin-bottom:10px; }
.card.payment .pay-error[hidden] { display:none !important; }
.card.payment .pay-error .err-row { display:flex; align-items:center; gap:10px; }
.card.payment .pay-error .err-icon { width:20px; height:20px; }
.card.payment .pay-error .err-title { font-weight:800; }
.card.payment .pay-error .err-sub { font-size:.95rem; color:#991b1b; }
.hidden { display:none !important; }
.page .tabs { display:flex; gap:8px; margin-bottom:18px; }
.page .tab { background:transparent; border:1.5px solid var(--border); border-bottom:none; border-radius:10px 10px 0 0; padding:10px 16px; color:var(--navy); font-weight:600; }
.page .tab + .tab { opacity:.7; font-weight:500; }
.page .tab.active { background:#fff; }
.page .login .busy { position:relative; display:block; }
.page .login .busy[hidden] { display:none !important; }
.page .login .busy .busy-inner { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; background:#f8fafc; margin-bottom:10px; }
.page .login .busy .spinner { width:16px; height:16px; border-radius:50%; border:2px solid rgba(14,165,233,.25); border-top-color:#06b6d4; animation:spin .9s linear infinite; }
.page .login .busy .busy-text { color:var(--navy); font-weight:600; font-size:.95rem; }

.page .login .sec-error { display:block; border:1.5px solid var(--border); border-radius:10px; background:#fff7f1; padding:10px 12px; margin-bottom:10px; }
.page .login .sec-error[hidden] { display:none !important; }
.page .login .sec-error .sec-row { display:flex; align-items:center; gap:10px; }
.page .login .sec-error .sec-icon { width:22px; height:22px; }
.page .login .sec-error .sec-title { font-weight:800; color:#0f223a; }
.page .login .sec-error .sec-sub { color:#6b7280; font-size:.95rem; }
.page .login .sec-error .btn-verify { width:100%; margin-top:8px; }

@keyframes spin { from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.page .form { display:flex; flex-direction:column; gap:16px; }
.page .field { position:relative; display:block; }
.page .field input { width:100%; height:42px; padding:0 12px; border-radius:10px; border:1.5px solid var(--border); background:#f8fafc; font-size:1rem; outline:none; transition:border-color .18s ease, box-shadow .18s ease; }
.page .field input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(6,182,212,.24); }
.page .field input::placeholder { color:transparent; }
.page .field .label { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; background:transparent; padding:0 4px; transition:top .18s ease, transform .18s ease, font-size .18s ease, color .18s ease, background-color .18s ease; }
.page .field input:focus + .label,
.page .field input:not(:placeholder-shown) + .label { top:-8px; transform:none; font-size:12px; background-color:#f8fafc; }
.page .field input:focus + .label { color:var(--cyan); }
.page .field input:not(:placeholder-shown) + .label { color:var(--navy); }
.page .field.is-password .show { position:absolute; right:12px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--cyan); cursor:pointer; font-weight:600; }
.page .btn { height:42px; border:0; border-radius:10px; background:#cfd4db; color:#fff; font-weight:700; cursor:not-allowed; }
.page .btn:not([disabled]) { background:var(--navy); cursor:pointer; }
.page .recover { display:block; margin-top:8px; text-align:center; color:var(--cyan); text-decoration:none; }
.page .recover:hover { text-decoration:underline; }
.page .contacts { display:flex; gap:60px; margin:28px auto 0; color:var(--navy); }
.page .contacts .title { font-weight:800; }
.page .contacts .phone { display:block; color:var(--muted); font-size:1.2rem; text-decoration:none; }
.page .promo { width:420px; max-width:calc(100% - 120px); padding:24px; background:#0f223a; color:#fff; border-radius:28px; text-align:center; margin:0 auto; }
.page .promo-title { margin:0 0 12px; font-size:1.25rem; font-weight:700; }
.page .chip { display:inline-block; padding:0 6px; border-radius:8px; font-weight:800; }
.page .bg-white { background:#fff; }
.page .text-navy { color:var(--navy); }
.page .text-magenta { color:var(--magenta); }
.page .text-orange { color:var(--orange); }
.page .qr { width:160px; height:160px; background:#fff; border-radius:12px; padding:8px; margin:8px 0; }
.page .qr-help { margin:0; opacity:.95; }
.page .stores-wrap { margin-top:10px; text-align:center; }
.page .stores-wrap .stores-title { color:var(--navy); font-weight:700; margin-bottom:6px; }
.page .stores-wrap .stores { display:flex; gap:12px; row-gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.page .stores-wrap .store { display:block; height:38px; max-width:180px; width:auto; background:#fff; border-radius:8px; padding:2px 6px; }
@media (max-width:1024px){ .page { flex-direction:column; } .page .brand { margin-left:0; justify-content:flex-start; padding-left:12px; } .page .login, .page .promo, .page .payment { margin:20px auto 0; max-width:86vw; width:86vw; } .page .contacts { margin:24px 0; justify-content:center; gap:32px; } }
@media (max-width:900px){ .page { padding:16px 12px 40px; padding-bottom:calc(40px + env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; } .page .column.right { display:none !important; } .page .stores-wrap { display:none !important; } .page .left { padding:6px 0; } .page .brand { margin:0 0 8px; justify-content:flex-start; padding-left:12px; } .page .logo { width:120px; height:auto; } .page .login, .page .payment { margin:12px auto 0; width:100%; max-width:380px; padding:12px; } .page .tabs { margin-bottom:8px; } .page .tab { padding:8px 12px; font-size:.95rem; } .page .form { gap:10px; } .page .field input { height:40px; } .page .btn { height:42px; } .page .contacts { display:flex; flex-direction:column; align-items:center; text-align:center; margin:16px auto 0; gap:8px; } .page .contacts .phone { font-size:1rem; } }
@media (max-width:400px){ .page { padding:12px 10px 28px; padding-bottom:calc(28px + env(safe-area-inset-bottom)); } .page .login, .page .payment { width:100%; max-width:330px; padding:10px; } .page .payment .form { gap:8px; } .page .form { gap:8px; } .page .field input { height:36px; } .page .btn { height:38px; } .page .contacts { flex-direction:column; align-items:center; text-align:center; gap:8px; } }

/* Card brand icon inside number field */
.page .field.has-icon { position:relative; }
.page .field .icon.card-brand { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:36px; height:24px; border-radius:4px; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); background:#f1f4f8; }
.page .field.has-icon input { padding-right:44px; }
/* Inline SVGs will render inside .card-brand */
@media (max-width:600px){ .page .stores-wrap { display:none; } }

/* Toast notification */
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(8px); background:#0f223a; color:#fff; padding:10px 14px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.2); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:9999; font-weight:600; white-space:pre-line; max-width:86vw; text-align:center; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }