/*!
 * Login / register screen — split brand panel + form card.
 *
 * Presentation only. The form itself, its ids, names, reCAPTCHA, language
 * selector and register links are untouched; this only re-lays out the shell
 * that wraps them.
 */

.auth-split {
    --auth-deep:   #2A0A4A;
    --auth-deep-2: #3B1063;
    --auth-violet: #7C3AED;
    --auth-ink:    #1B1230;
    --auth-line:   #E8E4EF;

    display: flex;
    min-height: 100vh;
    background: #F3F1F6;
}

/* ------------------------------------------------------------------
   Left: brand panel
   ------------------------------------------------------------------ */
.auth-brand {
    flex: 0 0 46%;
    max-width: 640px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 48px 56px;
    color: #EDE6F7;
    background:
        radial-gradient(120% 90% at 12% 8%, rgba(124, 58, 237, .45) 0%, transparent 58%),
        linear-gradient(150deg, var(--auth-deep-2) 0%, var(--auth-deep) 62%, #1B0733 100%);
    overflow: hidden;
}

/* Soft geometric wash, drawn not imported */
.auth-brand::after {
    content: "";
    position: absolute;
    right: -18%;
    bottom: -22%;
    width: 68%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, .20) 0%, transparent 68%);
    pointer-events: none;
}

.auth-brand__inner { position: relative; z-index: 1; max-width: 460px; }

/* Business name heads the brand panel; the mark itself now sits above the
   form card on the right.
   Hind Siliguri is listed first because it carries Bengali — Days One and
   DM Sans do not, so a Bengali business name would otherwise drop to the
   plain Windows UI face. */
.auth-brand__name {
    font-family: 'Hind Siliguri', 'Nirmala UI', 'Days One', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    line-height: 1.2;
    color: #fff;
    text-align: center;
    letter-spacing: -.005em;
    margin: 0 0 42px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}

.auth-brand__eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    font-weight: 700;
    color: #C4A2F8;
    margin: 0 0 14px;
}
.auth-brand__title {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1.16;
    color: #fff;
    margin: 0 0 16px;
    text-wrap: balance;
}
.auth-brand__lead {
    font-size: 15px;
    line-height: 1.65;
    color: #C6B6DE;
    margin: 0 0 38px;
    max-width: 42ch;
}

.auth-brand__features { list-style: none; padding: 0; margin: 0 0 44px; }
.auth-brand__features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.auth-brand__ico {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #C4A2F8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.auth-brand__features strong {
    display: block;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 2px;
}
.auth-brand__features small {
    display: block;
    color: #B3A1CD;
    font-size: 12.5px;
    line-height: 1.45;
}

.auth-brand__foot {
    font-size: 12px;
    color: #A392C0;   /* #8C7BA8 sat at 4.21:1 on the panel */
    margin: 0;
}

/* The stock submit button ships an indigo→blue gradient; align it with the
   brand violet so the page reads as one system. */
.auth-card-wrap button[type="submit"],
.auth-card-wrap .btn-primary,
.auth-card-wrap input[type="submit"] {
    background-image: linear-gradient(to right, var(--auth-violet), #A855F7) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.auth-card-wrap button[type="submit"]:hover,
.auth-card-wrap .btn-primary:hover {
    background-image: linear-gradient(to right, #6D28D9, #9333EA) !important;
}

/* ------------------------------------------------------------------
   Right: form panel
   ------------------------------------------------------------------ */
.auth-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 22px 24px 40px;
}
.auth-main .right-col {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    float: none;
}

.auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    min-height: 44px;
}
.auth-topbar__left,
.auth-topbar__right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.auth-topbar__left { margin-inline-end: auto; }

/* Language picker hidden on the auth screens. It is the only <details> in this
   row. Markup and its change_lang handler are untouched — delete this rule to
   bring the switcher back. */
.auth-topbar__right > details.tw-dw-dropdown {
    display: none;
}

/* The topbar sits on a light ground now, so its links cannot stay white */
.auth-topbar a,
.auth-topbar .dropdown > a {
    color: var(--auth-violet) !important;
    font-weight: 600;
}
.auth-topbar a:hover { color: #5B21B6 !important; }
.auth-topbar .tw-border-white {
    border-color: var(--auth-violet) !important;
    border-radius: 999px;
}

/* Logo above the form card, centred over it */
/* Flex rather than text-align: a global rule makes images display:block,
   which text-align cannot centre. */
.auth-main__logo {
    display: flex;
    justify-content: center;
    margin: 4px 0 18px;
}
.auth-main__logo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 4px 16px -6px rgba(27, 18, 48, .28);
}

.auth-card-wrap {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
/* The form's own Bootstrap grid keeps working, just centred and capped */
.auth-card-wrap > .row {
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
}
.auth-card-wrap > .row > [class*="col-"] {
    width: 100%;
    float: none;
    padding: 0;
    /* Offsets have to go with the widths.

       The row above is capped at 470px and centred, and this rule makes the
       column fill it whatever col-md-* it was given. A col-md-offset-* class
       also sets margin-left as a percentage, and that was left standing: the
       Two-Step Verification card is col-md-4 col-md-offset-4, so it kept a
       33% left margin on a row that no longer had twelve columns to offset
       within, and sat pushed off to the right. Business registration does the
       same thing with col-md-offset-2.

       Neutralised here rather than by editing the offset out of each view,
       because the reason those classes stop meaning anything is this rule. */
    margin-left: 0;
    margin-right: 0;
}

/* ------------------------------------------------------------------
   Responsive — brand panel becomes a slim header, then hides
   ------------------------------------------------------------------ */
@media (max-width: 1100px) {
    .auth-brand { flex-basis: 40%; padding: 40px 36px; }
    .auth-brand__features { margin-bottom: 28px; }
}

@media (max-width: 900px) {
    .auth-split { flex-direction: column; min-height: 100vh; }
    .auth-brand {
        flex: none;
        max-width: none;
        padding: 26px 24px;
        align-items: flex-start;
    }
    .auth-brand__inner { max-width: none; }
    .auth-brand__name { margin-bottom: 14px; font-size: 1.5rem; }
    .auth-brand__title { font-size: 1.5rem; margin-bottom: 8px; }
    .auth-brand__lead { margin-bottom: 0; font-size: 14px; }
    .auth-brand__features,
    .auth-brand__foot,
    .auth-brand__eyebrow { display: none; }
    .auth-main { padding: 18px 16px 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-brand::after { display: none; }
}

/* ------------------------------------------------------------------
   Phones
   ------------------------------------------------------------------
   The 900px block above already turns the two columns into a banner
   above a form. What it left behind was empty space: on a 390x844
   phone the card did not start until 377px down, and the top half of
   that was nothing at all.

   Most of it was the top bar. It carries the Register and pricing
   links, the repair-status link and the language picker, and on a shop
   that has registration switched off -- which is every shop running its
   own install -- all of them are absent and the row is empty. It still
   reserved 44px of height and 24px of margin under it, 68px of blank
   ground between the banner and the logo, on the screen with the least
   room to spare.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .auth-brand {
        padding: 20px 20px 22px;
    }
    .auth-brand__name {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }
    .auth-brand__title {
        font-size: 1.35rem;
        line-height: 1.2;
    }
    .auth-brand__lead {
        font-size: 13.5px;
        line-height: 1.55;
    }

    /* Nothing reserved for a row that is usually empty. It sizes to its
       links when a shop has any, and disappears when it has none. */
    .auth-topbar {
        min-height: 0;
        margin-bottom: 0;
        gap: 10px;
    }
    /* The gap comes back only when there is something in the row to be
       separated from what follows. The language picker does not count:
       it is hidden on these screens by the rule further up, but its
       markup is still there and a bare :has(a) matched the links inside
       it, so the row went on reserving space for something nobody can
       see. Browsers without :has() simply keep the tighter spacing,
       which is the direction this is going anyway. */
    .auth-topbar:has(a:not(details a)) {
        margin-bottom: 16px;
    }

    .auth-main {
        padding: 14px 16px 24px;
    }

    /* The mark sits on the card's top edge rather than floating between
       the banner and the card with a gap on either side of it. Raised
       above the card because the card is painted after it. */
    .auth-main__logo {
        position: relative;
        z-index: 2;
        margin: 12px 0 -28px;
    }

    /* The mark and the card are one object now, so they are centred in
       the space under the banner together rather than the card being
       centred on its own and leaving the mark behind.

       Auto margins do it, and they are the safe way to do it: on a
       screen too short for the card -- a keyboard takes half the
       viewport -- there is no free space to hand out, an auto margin
       resolves to zero, and nothing is pushed above the top edge where
       it could not be scrolled back to. */
    .auth-main .right-col .auth-main__logo {
        margin-top: auto;
    }
    .auth-card-wrap {
        flex: 0 0 auto;
        margin-bottom: auto;
    }
    .auth-main__logo img {
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }
    .auth-card-wrap .tw-rounded-2xl {
        padding-top: 40px;
    }
}

/* Small phones: the card's own padding is the last thing with room to
   give, and the field labels sit closer to what they label. */
@media (max-width: 400px) {
    .auth-card-wrap .tw-rounded-2xl {
        padding: 16px;
    }
}