/* Figma inspired light account screens. Keep the existing form and auth flow. */
body.marketing { background: #fff; color: #19223a; }
.auth-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-aside { background: radial-gradient(circle at 15% 10%, #dbe7ff 0, transparent 42%), linear-gradient(145deg, #eff5ff 0%, #dbeaff 100%); border-right: 0; padding: clamp(38px, 5vw, 78px); }
.auth-aside-inner { max-width: 540px; margin-inline: auto; }
.auth-aside .mk-orb { display: none; }
.auth-aside .mk-brand, .auth-card .mk-brand { color: #171c39; font-size: 25px; font-weight: 800; text-decoration: none; }
.auth-aside .brand-mark, .auth-card .brand-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; background: linear-gradient(140deg, #1159ea, #6545e9); color: white; border-radius: 12px; font-size: 25px; font-weight: 800; box-shadow: 0 8px 20px #254dda30; }
.auth-aside h2 { color: #152048; font-size: clamp(36px, 4vw, 61px); font-weight: 800; line-height: 1.12; letter-spacing: -.045em; }
.auth-aside p { color: #56637f; font-size: 17px; }
.auth-points li { color: #2c3c59; font-size: 15px; font-weight: 600; }
.auth-points svg { color: #0f61db; }
.auth-quote { background: #fff9; border: 1px solid #d5e3ff; border-radius: 18px; box-shadow: 0 16px 40px #3867bd14; }
.auth-quote p { color: #3d4a69; }
.auth-main { background: #fff; }
.auth-card { max-width: 450px; }
.auth-head h1 { color: #182243; font-size: clamp(32px, 3vw, 44px); font-weight: 800; }
.auth-head p, .auth-alt { color: #68738c; }
.auth-form label { color: #26314b; font-weight: 600; }
.auth-form input:not([type="checkbox"]):not([type="radio"]), .auth-form select { background: #fff; color: #17223b; border: 1px solid #dbe2ef; border-radius: 9px; min-height: 48px; box-shadow: none; }
.auth-form input:not([type="checkbox"]):not([type="radio"]):focus, .auth-form select:focus { outline: 2px solid #3971e9; outline-offset: 1px; border-color: #3971e9; }
.auth-form input[type="checkbox"] { width: 16px; height: 16px; min-height: 16px; max-height: 16px; margin: 0; border: 1.5px solid #dbe2ef; border-radius: 4px; accent-color: #1159e8; cursor: pointer; flex-shrink: 0; }
.auth-form input[type="checkbox"]:focus { outline: 2px solid #3971e9; outline-offset: 2px; }
.auth-form .remember-me { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #5a6580; cursor: pointer; user-select: none; white-space: nowrap; }
.auth-form .btn-primary { min-height: 50px; border-radius: 9px; background: #1159e8; color: #fff; font-weight: 700; box-shadow: 0 9px 20px #155be62b; }
.auth-form .btn-primary:hover { background: #084acb; }
.auth-meta, .auth-meta label { color: #5a6580 !important; }
.auth-alt { border-top-color: #e8edf6; }
.auth-alt a, .auth-meta a { color: #155eea; }
@media (max-width: 900px) { .auth-shell { display: block; } .auth-main { min-height: 100vh; } .auth-card .mk-brand { display: inline-flex; } }

/* Site header on the auth and checkout pages (auth_base.html). The marketing
   pages get these resets from body.cb-public; here they are scoped to the
   header so the auth forms below keep their own styles. */
.marketing .cbp-header, .marketing .cbp-header * { box-sizing: border-box; }
.marketing .cbp-header a { text-decoration: none; }
/* The split layout fills the screen *under* the header, not behind it. */
.marketing .cbp-header ~ .auth-shell { min-height: calc(100vh - 97px); }
@media (max-width: 900px) { .marketing .cbp-header ~ .auth-shell { min-height: 0; } }

/* Country code + phone number as one control (partials/phone_field.html).
   One bordered box: a narrow code picker, a divider, then the number. The
   inner controls drop their own border and focus ring; the box carries both. */
.auth-form .phone-field { display: flex; align-items: stretch; min-height: 48px; background: #fff; border: 1px solid #dbe2ef; border-radius: 9px; transition: border-color .15s, box-shadow .15s; }
.auth-form .phone-field:hover { border-color: #b9c4d8; }
.auth-form .phone-field:focus-within { border-color: #3971e9; outline: 2px solid #3971e9; outline-offset: 1px; }
.auth-form .phone-field-country { position: relative; flex: none; width: 100px; border-right: 1px solid #dbe2ef; }
.auth-form .phone-field select,
.auth-form .phone-field input { min-height: 46px; margin: 0; border: 0; box-shadow: none; background-color: transparent; }
.auth-form .phone-field select { width: 100%; height: 100%; padding: 0 28px 0 14px; border-radius: 9px 0 0 9px; appearance: none; -webkit-appearance: none; cursor: pointer; color: #17223b; font-weight: 600; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368738c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; text-overflow: ellipsis; }
.auth-form .phone-field input { flex: 1; min-width: 0; padding: 0 14px; border-radius: 0 9px 9px 0; }
.auth-form .phone-field select:focus,
.auth-form .phone-field input:focus { outline: none; border: 0; box-shadow: none; background-color: transparent; }
.auth-form .phone-field select option { color: #17223b; background: #fff; font-weight: 400; }
/* Enhanced: the closed picker reads "IN +91"; the open list keeps full names. */
.auth-form .phone-field.is-enhanced select { color: transparent; }
.auth-form .phone-field-code { display: none; }
.auth-form .phone-field.is-enhanced .phone-field-code { position: absolute; inset: 0 28px 0 14px; display: flex; align-items: center; overflow: hidden; color: #17223b; font-weight: 600; white-space: nowrap; pointer-events: none; }
.auth-form .phone-field-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.auth-form .phone-group .form-error + .form-error { margin-top: 4px; }