/* ==========================================================================
   PakPay demo: extra bits for the auth / status pages
   (login, password reset, verification, banned, maintenance, profile)
   Loaded after style.css
   ========================================================================== */

/* ---------- toned card heading: icon · coloured word · underline ---------- */
.auth-head.tone .auth-ic {
    background: radial-gradient(circle at 30% 25%, var(--c2), var(--c) 62%, var(--cd, var(--c)));
    box-shadow: 0 0 0 9px rgba(233, 243, 249, 0.3), 0 0 0 10px color-mix(in srgb, var(--c) 16%, rgba(233, 243, 249, 0.3)), 0 18px 28px -14px var(--c);
}

.auth-head.tone .auth-ic .plus { color: var(--c); border-color: var(--c); }
.auth-head.tone h1 b { color: var(--c); }
.auth-head.tone p::after { background: linear-gradient(90deg, var(--c), var(--c2)); }
.auth-head p strong { font-weight: 600; color: #FFFFFF; overflow-wrap: anywhere; }

/* ---------- remember me + forgot link ---------- */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 6px;
    font-size: clamp(12.5px, 3.6vw, 14px);
}

.auth-row > a { font-weight: 600; color: var(--orange); }

.check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #B5D0ED;
    cursor: pointer;
}

.check input { position: absolute; opacity: 0; pointer-events: none; }

.check .box {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 7px;
    font-size: 11px;
    color: transparent;
    background: rgba(140, 179, 224, 0.16);
    border: 1.5px solid rgba(181, 208, 237, 0.35);
    transition: background .2s ease, border-color .2s ease;
}

.check input:checked + .box {
    color: #FFFFFF;
    border-color: transparent;
    background: linear-gradient(140deg, #8CB3E0, var(--blue));
}

.check input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(103, 155, 219, 0.18); }

/* ---------- link card (WhatsApp channel, support) ---------- */
.link-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 12px 12px 14px;
    border-radius: 22px;
    background: linear-gradient(100deg, rgba(140, 179, 224, 0.16) 45%, color-mix(in srgb, var(--c) 10%, rgba(140, 179, 224, 0.16)));
    border: 1px solid color-mix(in srgb, var(--c) 18%, rgba(181, 208, 237, 0.35));
    box-shadow: 0 14px 26px -22px var(--c);
}

.link-card .lc-ic {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 24px;
    color: #FFFFFF;
    background: radial-gradient(circle at 30% 25%, var(--c2), var(--c) 65%);
    box-shadow: 0 10px 18px -10px var(--c);
}

.link-card small {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c);
}

.link-card b { display: block; font-size: clamp(13.5px, 4vw, 15.5px); font-weight: 600; color: #FFFFFF; }
.link-card .go { width: 40px; height: 40px; background: rgba(140, 179, 224, 0.16); }
.link-card.flush { margin-top: 0; }

/* ---------- 6 digit code boxes ---------- */
.code-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    font-size: clamp(13.5px, 4vw, 15.5px);
    font-weight: 600;
    color: #FFFFFF;
}

.code-label small { font-size: 11.5px; font-weight: 500; color: var(--muted); }

.code-boxes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(6px, 2.2vw, 10px);
}

.code-boxes input {
    width: 100%;
    min-width: 0;
    aspect-ratio: 5 / 6;
    padding: 0;
    border: 1.5px solid rgba(181, 208, 237, 0.35);
    border-radius: 16px;
    outline: 0;
    text-align: center;
    font-family: var(--head);
    font-size: clamp(20px, 6.4vw, 28px);
    font-weight: 800;
    color: #FFFFFF;
    background: linear-gradient(180deg, rgba(140, 179, 224, 0.16) 55%, color-mix(in srgb, var(--c, #4B6E9D) 7%, rgba(140, 179, 224, 0.16)));
    box-shadow: 0 12px 22px -20px var(--c, rgba(103, 155, 219, 1));
    caret-color: var(--c, #8CB3E0);
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.code-boxes input:focus {
    border-color: var(--c, #4C7DC1);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, rgba(103, 155, 219, 1)) 14%, transparent);
    transform: translateY(-2px);
}

.code-boxes input.filled {
    border-color: color-mix(in srgb, var(--c, #4C7DC1) 50%, rgba(181, 208, 237, 0.35));
    background: color-mix(in srgb, var(--c, #4B6E9D) 9%, rgba(140, 179, 224, 0.16));
}

/* resend line under the code boxes */
.resend {
    margin: 0;
    text-align: center;
    font-size: clamp(12.5px, 3.6vw, 14px);
    color: #B5D0ED;
}

.resend b { font-family: var(--head); color: var(--orange); }
.resend a { font-weight: 700; color: var(--blue); }
.resend [hidden] { display: none; }

/* small centred text under a card (wraps, unlike .auth-foot) */
.auth-sub {
    margin-top: 14px;
    text-align: center;
    font-size: clamp(12.5px, 3.6vw, 14px);
    color: #B5D0ED;
}

.auth-sub a { font-weight: 700; color: var(--blue); }

/* ---------- secondary button inside a card ---------- */
.auth-alt {
    width: 100%;
    padding: 16px 22px;
    font-size: clamp(15px, 4.4vw, 17px);
}

.auth-alt i { color: var(--red); }

/* the .submit button used as a link */
a.submit { text-decoration: none; }

/* ---------- status pages (banned, maintenance, registration off) ---------- */
.status-box {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.reason {
    padding: 14px 16px;
    border-radius: 20px;
    background: linear-gradient(120deg, rgba(140, 179, 224, 0.16) 30%, color-mix(in srgb, var(--c) 9%, rgba(140, 179, 224, 0.16)));
    border: 1px solid color-mix(in srgb, var(--c) 22%, rgba(181, 208, 237, 0.35));
}

.reason .cap { color: var(--c); }
.reason p { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }

.kv.card-kv {
    padding: 4px 16px;
    border-radius: 20px;
    background: rgba(140, 179, 224, 0.16);
    border: 1px solid rgba(181, 208, 237, 0.35);
}

.steps-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #B5D0ED;
}

.steps-list li > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 14px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, rgba(140, 179, 224, 0.16));
}

.steps-list b { display: block; font-size: 13.5px; font-weight: 600; color: #FFFFFF; }

.status-art {
    display: grid;
    place-items: center;
    margin: 4px auto 0;
}

.status-art .ring-art { width: 110px; }

/* ---------- password strength ---------- */
.strength { display: grid; gap: 6px; padding: 0 6px; }
.strength .progress { height: 7px; }
.strength .progress > span { width: 0; transition: width .25s ease, background .25s ease; }
.strength small { font-size: 11.5px; color: var(--muted); }
.strength small b { color: var(--c, var(--muted)); }

.rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    margin: 0;
    padding: 0 6px;
    list-style: none;
    font-size: 11.5px;
    color: var(--muted);
}

.rules li { display: flex; align-items: center; gap: 6px; }
.rules li i { font-size: 10px; color: #B5D0ED; }
.rules li.ok { color: var(--green); }
.rules li.ok i { color: var(--green); }

/* ---------- complete profile ---------- */
.form-sec {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 4px 0;
    font-family: var(--head);
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
}

.form-sec::after { content: ""; flex: 1; height: 1px; background: rgba(140, 179, 224, 0.2); }
.form-sec i { color: var(--c, var(--orange)); }

.field select {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    font-size: clamp(13px, 3.8vw, 15.5px);
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.field .dial {
    display: flex;
    align-items: center;
    gap: 6px;
}

.field .dial em {
    flex-shrink: 0;
    font-style: normal;
    font-weight: 700;
    font-size: clamp(13px, 3.8vw, 15.5px);
    color: var(--c);
}

.field-hint { margin-top: -6px; padding: 0 18px; font-size: 11.5px; color: var(--muted); }

.field label em { font-style: normal; color: var(--red); }

.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.welcome-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: 20px;
    background: linear-gradient(100deg, var(--mint), rgba(140, 179, 224, 0.16));
    border: 1px solid rgba(181, 208, 237, 0.35);
}

.welcome-strip > i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #FFFFFF;
    background: radial-gradient(circle at 30% 25%, #5FE0BD, var(--green) 65%);
}

.welcome-strip b { display: block; font-size: 14px; color: #FFFFFF; }
.welcome-strip small { font-size: 12px; color: #B5D0ED; }

/* tighter submit on narrow phones */
@media (max-width: 380px) {
    .submit { padding: 18px 64px; }
    .auth-row { padding: 0 2px; }
}

/* ==========================================================================
   Login page, a size smaller than register (client request)
   ========================================================================== */
body.login-page .auth-wrap { padding-top: 10px; }
body.login-page .logo svg { width: clamp(76px, 22vw, 104px); }
body.login-page .logo b { font-size: clamp(20px, 6vw, 28px); }
body.login-page .auth-card { margin-top: 14px; padding: 16px 12px 12px; }
body.login-page .auth-head { gap: 12px; }
body.login-page .auth-ic { width: clamp(50px, 14vw, 64px); font-size: clamp(20px, 6vw, 26px); }
body.login-page .auth-head h1 { font-size: clamp(19px, 5.8vw, 26px); white-space: nowrap; }
body.login-page .auth-head p { font-size: clamp(11px, 3.2vw, 13px); }
body.login-page .auth-head p::after { margin-top: 7px; height: 3px; }
body.login-page .auth-form { gap: 9px; margin-top: 14px; }
body.login-page .field { padding: 6px 7px 6px 8px; gap: 10px; }
body.login-page .field .f-ic { width: 38px; font-size: 15px; }
body.login-page .field label { font-size: 13.5px; }
body.login-page .field input { font-size: 12.5px; }
body.login-page .field .go { width: 32px; height: 32px; font-size: 12px; }
body.login-page .auth-row { font-size: 12px; }
body.login-page .submit { margin-top: 4px; padding: 12px 52px 12px 20px; font-size: clamp(15px, 4.4vw, 18px); }
body.login-page .submit .arrow { width: 38px; height: 38px; font-size: 14px; }
body.login-page .link-card { margin-top: 12px; padding: 9px 10px; gap: 10px; }
body.login-page .link-card .lc-ic { width: 40px; height: 40px; font-size: 19px; }
body.login-page .link-card small { font-size: 9.5px; }
body.login-page .link-card b { font-size: 13px; }
body.login-page .link-card .go { width: 32px; height: 32px; font-size: 12px; }
body.login-page .auth-foot { margin-top: 12px; font-size: 12px; }