/*
 * WhatImpact — sign-in / sign-up / password pages (addon/whatimpact/resources/views/components/wi-auth.blade.php).
 * Plain CSS, no build step. Uses logical properties (inline-start/end), so it is correct in Arabic (RTL)
 * and English (LTR) without a separate RTL file. Brand colours are the variables at the top.
 */

/* Tokens on the whole page (not only .wi-auth) so the vendor cookie bar below it is on-brand too. */
:root:has(.wi-auth) {
    /* Brand palette */
    --wi-navy: #253980;
    --wi-navy-deep: #131D45;
    --wi-navy-ink: #111735;
    --wi-coral: #EA5F4B;
    --wi-line: #E4E7F1;
    --wi-soft: #F5F6FB;
    --wi-muted: #6E7591;

    /* Recolour the vendor form (Tailwind v4 tokens) inside these pages only. */
    --color-wa-deep: #253980;
    --color-wa-teal: #1C2C66;
    --color-wa-green: #4C63B6;
    --color-wa-mint: #E9ECF7;
    --color-wa-bubble: #F1F3FA;
    --color-paper-0: #FFFFFF;
    --color-paper-50: #F5F6FB;
    --color-paper-100: #ECEEF6;
    --color-paper-200: #E4E7F1;
    --color-paper-300: #D3D8E8;
    --color-ink-400: #9AA0B7;
    --color-ink-500: #6E7591;
    --color-ink-600: #4A5274;
    --color-ink-700: #2A3465;
    --color-ink-800: #1A2350;
    --color-ink-900: #111735;
    --color-ink-950: #0A0F24;
    --color-accent-coral: #EA5F4B;
}
:root:has(.wi-auth), :root:has(.wi-auth) body { background: #fff; }

.wi-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: #fff;
    color: var(--wi-navy-ink);
}

@media (min-width: 1024px) {
    .wi-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
}

/* ── Form side ─────────────────────────────────────────────── */
.wi-auth__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px 20px 20px;
}
@media (min-width: 640px) { .wi-auth__main { padding: 28px 40px 24px; } }

.wi-auth__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.wi-auth__logo img { display: block; height: 40px; width: auto; max-width: 190px; object-fit: contain; }
.wi-auth__logo span { font-weight: 700; font-size: 20px; color: var(--wi-navy); }

.wi-auth__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--wi-line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--wi-navy-ink);
    transition: border-color .15s, color .15s;
}
.wi-auth__back:hover { border-color: var(--wi-navy); color: var(--wi-navy); }
.wi-auth__back-ic { width: 15px; height: 15px; }
[dir="ltr"] .wi-auth__back-ic { transform: scaleX(-1); }

.wi-auth__form {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
    padding-block: 36px 28px;
}

.wi-auth__legal {
    text-align: center;
    font-size: 12px;
    color: var(--wi-muted);
}

/* The vendor form, refined. */
.wi-auth__form h2 {
    font-family: var(--wi-font-head, inherit);
    font-size: 32px !important;
    font-weight: 700;
    line-height: 1.3 !important;
    color: var(--wi-navy-ink);
}
.wi-auth__form h2 .italic { color: var(--wi-coral) !important; }
.wi-auth__form > div:first-child {             /* small label above the title ("Sign in") */
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 12px !important;
    padding: 5px 12px;
    border-radius: 999px;
    background: #FDEFEC;
    color: var(--wi-coral) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600;
    text-transform: none !important;
}
.wi-auth__form h2 + p { font-size: 14.5px !important; line-height: 1.7; color: var(--wi-muted) !important; }
.wi-auth__form form { margin-top: 24px; }

.wi-auth__form label { font-size: 13px !important; }
.wi-auth__form input:is([type="email"], [type="text"], [type="password"], [type="tel"]) {
    padding-block: 12px !important;
    border-radius: 12px !important;
    border-color: var(--wi-line) !important;
    background: #FAFBFD !important;
    font-size: 14px !important;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.wi-auth__form input:is([type="email"], [type="text"], [type="password"], [type="tel"]):focus {
    border-color: var(--wi-navy) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(37, 57, 128, .12) !important;
}
.wi-auth__form input[type="checkbox"] { accent-color: var(--wi-navy); }
.wi-auth__form .wa-iti-wrap, .wi-auth__form .wa-iti-wrap .iti { display: block; width: 100%; }
.wi-auth__form .wa-iti-wrap input[type="tel"] { width: 100%; }
/* The vendor already draws a show-password button; hide Edge's built-in one next to it. */
.wi-auth__form #pw-toggle { display: none; }
/* Placeholders in the monospace fields: Arabic in the text font, without the wide mono spacing. */
[dir="rtl"] .wi-auth__form input::placeholder { font-family: var(--wi-font-body, inherit); text-transform: none; }

.wi-auth__form button[type="submit"] {
    min-height: 50px;
    border-radius: 12px !important;
    background: var(--wi-navy) !important;
    font-size: 15px !important;
    box-shadow: 0 10px 24px -12px rgba(37, 57, 128, .7);
    transition: background .15s, transform .15s, box-shadow .15s;
}
.wi-auth__form button[type="submit"]:hover {
    background: var(--wi-coral) !important;
    box-shadow: 0 12px 26px -12px rgba(234, 95, 75, .75);
}
.wi-auth__form button[type="submit"]:active { transform: translateY(1px); }
[dir="rtl"] .wi-auth__form button[type="submit"] svg { transform: scaleX(-1); }

.wi-auth__form a { color: var(--wi-navy); }
.wi-auth__form a:hover { color: var(--wi-coral); }

/* Arabic: no letter-spacing (it breaks joined letters), roomier line height. */
[dir="rtl"] .wi-auth, [dir="rtl"] .wi-auth * { letter-spacing: 0 !important; }
[dir="rtl"] .wi-auth__form p, [dir="rtl"] .wi-auth__form span { line-height: 1.7; }

/* ── Brand side ────────────────────────────────────────────── */
.wi-auth__brand { display: none; }

@media (min-width: 1024px) {
    .wi-auth__brand {
        position: sticky;
        top: 12px;
        display: flex;
        height: calc(100vh - 24px);
        height: calc(100dvh - 24px);
        margin: 12px;
        margin-inline-start: 0;
        overflow: hidden;
        border-radius: 28px;
        color: #fff;
        background:
            radial-gradient(120% 80% at 100% 0%, rgba(234, 95, 75, .30) 0%, rgba(234, 95, 75, 0) 55%),
            radial-gradient(90% 70% at 0% 100%, rgba(76, 99, 182, .55) 0%, rgba(76, 99, 182, 0) 60%),
            linear-gradient(160deg, #2B428F 0%, #253980 40%, #131D45 100%);
    }
}

.wi-auth__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wi-auth__media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 29, 69, .55), rgba(19, 29, 69, .85)); }

.wi-auth__rings { position: absolute; inset-inline-end: -180px; bottom: -180px; width: 560px; height: 560px; pointer-events: none; }
.wi-auth__rings span { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .10); border-radius: 50%; }
.wi-auth__rings span:nth-child(2) { inset: 70px; border-color: rgba(255, 255, 255, .08); }
.wi-auth__rings span:nth-child(3) { inset: 140px; border-color: rgba(234, 95, 75, .35); }

.wi-auth__brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 34px;
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding: 48px;
}
.wi-auth__brand-logo { height: 44px; width: auto; max-width: 200px; object-fit: contain; align-self: flex-start; }

.wi-auth__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: 13px;
    font-weight: 500;
}
.wi-auth__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--wi-coral); box-shadow: 0 0 0 4px rgba(234, 95, 75, .25); }

.wi-auth__title {
    margin-top: 18px;
    font-family: var(--wi-font-head, inherit);
    font-size: clamp(30px, 2.7vw, 42px);
    font-weight: 700;
    line-height: 1.3;
}
.wi-auth__accent { color: #FF8A78; }
.wi-auth__lead { margin-top: 14px; font-size: 15.5px; line-height: 1.8; color: rgba(255, 255, 255, .78); max-width: 470px; }

.wi-auth__features { display: grid; gap: 16px; }
.wi-auth__features li { display: flex; align-items: flex-start; gap: 14px; }
.wi-auth__f-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #FFB4A8;
}
.wi-auth__features strong { display: block; font-size: 15px; font-weight: 600; }
.wi-auth__features span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, .68); }

/* Illustrative conversation card */
.wi-auth__chat {
    display: grid;
    gap: 10px;
    max-width: 400px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
}
.wi-auth__chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.wi-auth__chat-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wi-coral); font-weight: 700; }
.wi-auth__chat-head b { display: block; font-size: 14px; }
.wi-auth__chat-head small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, .65); }
.wi-auth__chat-head small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; }
.wi-auth__bubble { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.6; animation: wiBubble .5s ease both; }
.wi-auth__bubble--in { justify-self: start; background: rgba(255, 255, 255, .14); border-start-start-radius: 4px; }
.wi-auth__bubble--out { justify-self: end; background: #fff; color: var(--wi-navy-ink); border-start-end-radius: 4px; animation-delay: .5s; }
.wi-auth__bubble em { margin-inline-start: 8px; font-style: normal; font-size: 11px; color: #4C9AFF; }
@keyframes wiBubble { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wi-auth__bubble { animation: none; } }

/* Short screens: drop the illustration before anything gets cramped. */
@media (min-width: 1024px) and (max-height: 760px) {
    .wi-auth__chat { display: none; }
    .wi-auth__brand-inner { gap: 26px; padding-block: 36px; }
}