/* ==========================================================================
   VIP Entrance — split login shell.   public/assets/css/auth-split.css

   Linked from resources/views/auth/login.blade.php and login_en.blade.php
   only (never from layouts.guest — that layout is shared with otp, legal and
   explore views, which must keep the site header, the footer and their own
   centred cards).

   THE PHONE LAYOUT IS SIGNED OFF AND MUST NOT MOVE. Every rule that changes
   anything therefore sits inside @media (min-width: 1024px); the rules above
   it only hide desktop-only furniture that has no phone counterpart. The one
   exceptions are the two blocks marked "phone view, on request": the
   .ve-split__mark logo the card shows above its heading (hidden again on
   desktop, where the left panel already carries the mark) and the heading's
   own bottom gap.

   Plain CSS with literal hex on purpose: the purple ground comes from
   docs/BGGUIDE.md and none of it goes through Tailwind, so this file needs no
   `npm run build` to take effect.
   ========================================================================== */

/* Desktop-only furniture — inert on phones. */
.ve-split__panel,
.ve-split__corner,
.ve-lbl { display: none; }

/* The card's own mark. The phone has no left panel, so the brand sits above
   the heading inside the card; the desktop block below hides it again. */
.ve-split__mark {
    display: block;
    width: 210px;
    height: auto;
    margin: -46px auto -6px;
}

/* From 640px the card draws its border and shadow (the `sm:` utilities), so
   there the mark keeps a smaller pull and stays inside that edge. */
@media (min-width: 640px) {
    .ve-split__mark { margin-top: -20px; }
}

/* Phone view, on request: the heading sits higher on the screen. The stack is
   vertically centred, so a wider gap under the head is what lifts it; capped
   below the split's breakpoint so the desktop value keeps its own rule. */
@media (max-width: 1023.98px) {
    .ve-split .ve-split__head { margin-bottom: 44px; }

    /* And the submit stands off the field group, as it does on the split. */
    .ve-split form button[type="submit"] { margin-top: 18px; }

    /* The terms line moved out of the card to the column's foot; on the
       phone it reads as a page footer under the centred card. */
    .ve-split .ve-split__fine { padding: 0 16px 24px; }
}

@media (min-width: 1024px) {

    /* ── Full-bleed split ───────────────────────────────────────────────────
       The site header and footer step aside so the two columns can own the
       viewport. Gated on the body class, which only the login views set. */
    body.ve-auth-page .site-chrome { display: none; }

    .ve-split {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* ── Purple ground panel (docs/BGGUIDE.md) ─────────────────────────────
       Panel first in the DOM, so it lands on the start side: right in Arabic,
       left in English. */
    .ve-split__panel {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 44px;
        overflow: hidden;                 /* clips the photo and the scrim */
        padding: 44px 48px 48px;
        color: #e9e9ed;

        /* The purple ground stays underneath the photo: it is what shows if
           the image 404s or has not decoded yet. */
        background: linear-gradient(200deg, #6a3c96 0%, #3d2357 52%, #1e1730 100%);
    }

    /* ::before is the lounge photo, ::after the scrim over it, and the content
       rides above both on z-index 1 — three layers, in paint order.

       Never fetched on a phone: the panel is display:none there, and a
       background-image on a non-rendered element is not loaded. */
    .ve-split__panel::before {
        content: '';
        position: absolute;
        inset: 0;
        /* Declared twice so browsers without image-set() keep the PNG. */
        background-image: url("../../images/login_bg.png");
        background-image: image-set(url("../../images/login_bg.webp") type("image/webp"),
                                    url("../../images/login_bg.png")  type("image/png"));
        background-repeat: no-repeat;
        background-size: cover;
        /* The photo's calm, near-flat wall is on its own right, and the copy
           sits on the panel's start edge — so anchor right and, in English,
           mirror the photo instead of re-anchoring it. Re-anchoring would put
           the palm and both lamps under the headline. */
        background-position: right center;
        pointer-events: none;
    }
    [dir="ltr"] .ve-split__panel::before { transform: scaleX(-1); }

    /* Scrim — heaviest at the start edge under the copy, thinning toward the
       divider so the lounge stays visible. It replaces the drifting glow of
       docs/BGGUIDE.md: the photograph now carries that depth for real. The
       lavender radial is the one accent light kept from the purple ground. */
    .ve-split__panel::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(420px 340px at 20% 100%, rgba(189, 151, 226, 0.18), transparent 70%),
            linear-gradient(to left,
                rgba(24, 18, 40, 0.93) 0%,
                rgba(40, 25, 62, 0.78) 42%,
                rgba(30, 23, 48, 0.46) 100%);
        pointer-events: none;
    }
    [dir="ltr"] .ve-split__panel::after {
        background:
            radial-gradient(420px 340px at 80% 100%, rgba(189, 151, 226, 0.18), transparent 70%),
            linear-gradient(to right,
                rgba(24, 18, 40, 0.93) 0%,
                rgba(40, 25, 62, 0.78) 42%,
                rgba(30, 23, 48, 0.46) 100%);
    }

    /* ::after is a later sibling in paint order, so the content has to be
       lifted clear of it or the small glow washes over the copy. */
    .ve-split__panel > * { position: relative; z-index: 1; }

    /* Cross axis of a column flex box follows the writing direction, so this
       single value hugs the outer edge in both languages. */
    .ve-split__logo     { align-self: flex-start; }
    .ve-split__logo img { display: block; height: 50px; width: auto; }

    .ve-split__mid { max-width: 30rem; }

    .ve-split__eyebrow {
        display: block;
        margin-bottom: 18px;
        color: #d9c1f0;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }
    /* Arabic letters join — tracking breaks words into pieces. */
    [dir="rtl"] .ve-split__eyebrow { letter-spacing: 0; }

    /* Weight 500 is the ceiling on this ground: the gradient carries the
       emphasis, not the type. */
    .ve-split__headline {
        margin: 0;
        color: #e9e9ed;
        font-size: 2.3rem;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.28;
    }

    .ve-split__lede {
        margin: 20px 0 0;
        max-width: 26rem;
        color: rgba(233, 233, 237, 0.62);
        font-size: 0.95rem;
        line-height: 1.85;
    }

    /* Feature list + copyright, kept in one box so the panel's space-between
       still distributes three children, not four. */
    .ve-split__foot {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .ve-split__copy {
        margin: 0;
        font-size: 11.5px;
        color: rgba(233, 233, 237, 0.38);
    }

    .ve-split__feats {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .ve-split__feats li {
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(233, 233, 237, 0.62);
        font-size: 0.82rem;
        line-height: 1.5;
    }
    .ve-split__feats svg {
        width: 17px;
        height: 17px;
        flex: none;
        color: #d9c1f0;
    }

    /* ── Form column ───────────────────────────────────────────────────────
       body carries sm:bg-gray-50, so the column paints its own white. */
    .ve-split__col {
        display: flex;
        flex-direction: column;
        background: #ffffff;
    }

    /* The utility corner replaces the hidden site header: the two things it
       actually carried on this page were the services menu and the language
       switch. */
    .ve-split__corner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 24px 40px 0;
    }
    .ve-split__corner-start { display: flex; align-items: center; gap: 10px; }

    .ve-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border: 1px solid #e3dcec;
        border-radius: 7px;
        background: #ffffff;
        color: oklch(0.47 0.06 297.66);
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
        transition: border-color 0.2s, color 0.2s;
    }
    .ve-pill:hover { border-color: #d9c1f0; color: oklch(0.19 0.1 297.97); }
    .ve-pill svg   { width: 13px; height: 13px; flex: none; transition: transform 0.2s; }
    .ve-pill svg.is-open { transform: rotate(180deg); }
    /* Leading icons carry a glyph, not a chevron, so they need the extra pixel.
       Two classes deep to out-specify `.ve-pill svg` above. */
    .ve-pill .ve-pill__ico { width: 14px; height: 14px; }

    .ve-split__lang {
        padding: 7px 4px;
        color: oklch(0.47 0.06 297.66);
        font-size: 0.82rem;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.2s;
    }
    .ve-split__lang:hover { color: oklch(0.19 0.1 297.97); }

    .ve-split__support {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: oklch(0.19 0.1 297.97);
        font-size: 0.78rem;
        text-decoration: none;
        transition: color 0.2s;
    }
    .ve-split__support:hover { color: oklch(0.26 0.1 297.97); }
    /* 16px, a hair over the text: the headphones are a filled mark, so they
       read smaller than a stroked glyph of the same box. */
    .ve-split__support svg   { width: 16px; height: 16px; flex: none; }

    /* ── The card, un-carded ───────────────────────────────────────────────
       Same markup as the phone view; on the split it is just a column of
       fields on white, so the frame comes off. Two-class selectors, so the
       sm: utilities they undo lose on specificity, not on order. */
    .ve-split .ve-split__main {
        flex: 1;
        min-height: 0;
        padding: 28px 40px 48px;
    }
    .ve-split .ve-split__card {
        width: 100%;
        max-width: 25rem;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Heading is centred over the column, and the stack below it breathes:
       with the frame off there is no card edge to hold the rhythm, so the
       gaps carry it instead. */
    /* The panel carries the logo on desktop, so the card's copy is redundant. */
    .ve-split .ve-split__mark    { display: none; }
    .ve-split .ve-split__head    { margin-bottom: 54px; text-align: center; }
    .ve-split .ve-split__head h1 { font-size: 1.8rem; line-height: 1.3; }

    /* Field labels, phone-hidden. */
    .ve-lbl {
        display: block;
        margin-bottom: 9px;
        color: oklch(0.19 0.1 297.97);
        font-size: 0.8rem;
        font-weight: 500;
        text-align: start;
    }

    /* ── Segmented tab control ─────────────────────────────────────────────
       The phone view keeps its underline tabs; here the same two buttons
       become a segmented pill. `is-active` is set by the same Alpine
       expression that sets the underline classes, which those shorthands
       below then out-specify. */
    .ve-split .ve-tabs {
        gap: 6px;
        margin-bottom: 30px;
        padding: 5px;
        border: 1px solid #ece7f3;
        border-bottom: 1px solid #ece7f3;
        border-radius: 14px;
        background: #faf8fd;
    }
    .ve-split .ve-tabs__btn {
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: 10px;
        color: oklch(0.47 0.06 297.66);
        transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .ve-split .ve-tabs__btn:hover { background: #f4eefb; }
    .ve-split .ve-tabs__btn.is-active {
        border-color: #d9c1f0;
        background: #f6f0fc;
        color: oklch(0.19 0.1 297.97);
        font-weight: 600;
        box-shadow: 0 1px 2px rgba(44, 26, 61, 0.06);
    }
    .ve-split .ve-tabs__sep { display: none; }

    /* The corner carries the language switch on this width, so the in-form
       "or / English" pair would be a second copy of it. */
    .ve-split__langswitch { display: none; }

    /* The field group and the submit read as two steps, not one block. */
    .ve-split form button[type="submit"] { margin-top: 18px; }

    .ve-split .ve-split__signup { margin-top: 26px; text-align: center; }

    /* Terms line is the column's footer, mirroring the panel's copyright:
       it is a sibling of main, so the flex column pins it to the bottom. */
    .ve-split .ve-split__fine {
        margin: 0;
        padding: 0 40px 24px;
        text-align: center;
    }
}

/* Nothing on this page animates any more — the lounge photo replaced the
   drifting glow — so there is no prefers-reduced-motion guard to carry. */

/* Narrow desktop: at exactly 1024px the panel is only ~524px wide. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    /* A narrower panel is a tighter crop, so the copy lands over the lamp and
       the screen instead of the flat wall — the scrim takes more of the load
       here, and only here. */
    .ve-split__panel::after {
        background:
            radial-gradient(420px 340px at 20% 100%, rgba(189, 151, 226, 0.16), transparent 70%),
            linear-gradient(to left,
                rgba(24, 18, 40, 0.96) 0%,
                rgba(40, 25, 62, 0.88) 50%,
                rgba(30, 23, 48, 0.60) 100%);
    }
    [dir="ltr"] .ve-split__panel::after {
        background:
            radial-gradient(420px 340px at 80% 100%, rgba(189, 151, 226, 0.16), transparent 70%),
            linear-gradient(to right,
                rgba(24, 18, 40, 0.96) 0%,
                rgba(40, 25, 62, 0.88) 50%,
                rgba(30, 23, 48, 0.60) 100%);
    }

    .ve-split__panel     { padding: 36px; gap: 32px; }
    /* Smaller padding here, so the mark comes down with it. */
    .ve-split__logo img  { height: 44px; }
    .ve-split__headline  { font-size: 1.85rem; }
    .ve-split__lede      { font-size: 0.9rem; }
    .ve-split__corner    { padding-inline: 28px; }
    .ve-split .ve-split__main { padding-inline: 28px; }
    .ve-split .ve-split__fine { padding-inline: 28px; }
}

/* Short desktop viewports: the panel is overflow:hidden and space-between, so
   below ~680px of height the lede is what gives, not the headline. */
@media (min-width: 1024px) and (max-height: 680px) {
    .ve-split__panel    { padding-block: 32px; gap: 24px; }
    .ve-split__headline { font-size: 1.7rem; }
    .ve-split__lede     { display: none; }
}