/*
    Partner self-registration pages only — the log-in/sign-up card and the partner variant of
    confirm-registration (the last section below).
    PRD: Partner Self-Registration, Task 1 / Design Requirements #1.
    Figma "Admin panel - Accounts platform" (EoUxFnjqwqlGZKXPu4Z4nl):
    log-in card 4560:144420, sign-up card 4560:144454, sign-up/error card 4560:144488,
    confirm-registration card 4560:144527.

    The page reuses the end-user auth page's markup and auth.css, but the partner design
    differs from that page in vertical rhythm, type weight and button fill. Every rule below
    is therefore scoped to .partner-auth — a class only the partner card carries — so the
    end-user auth page, which shares the very same selectors, keeps its current look.

    The design cards are 20px-gap auto-layout stacks with a 40px padding, so most of what is
    here restates that 20px rhythm on markup whose margins were tuned for the other page.
*/

/*
    The design cards are content-sized (sign-up 507px, log-in 572px); auth.css's 575px
    min-height would leave dead space under the sign-up social row.
*/
.out-wrapper.partner-auth {
    min-height: auto;
    box-shadow: 0 4px 13px rgba(36, 62, 86, 0.1);
}

/*============ Tabs: Lato Black 16, 4px active underline ===============*/
.partner-auth #auth-tabs .nav-link,
.partner-auth #auth-tabs .nav-link.active,
.partner-auth #auth-tabs a:hover {
    font-weight:         900;
    border-bottom-width: 4px;
}
/*
    The active tab's label is teal in the design, not indigo: auth.css paints the underline with
    --url-color but leaves the text --indigo. Reusing --url-color keeps this brand-aware — it is
    the design's #25bcb6 for keepgo — instead of hard-coding the teal.
*/
.partner-auth #auth-tabs .nav-link.active {color: var(--url-color);}

/*============ Title / subtitle ===============*/
/*
    Design gap between the title and its subtitle is 10px (they are one 10px-gap group);
    auth.css stacks a 20px title margin on a 10px subtitle margin, giving 30px. Only the
    sign-up card has a subtitle, so the margin is dropped there alone — zeroing it for the
    whole page would leave the log-in title touching its Email label.
*/
.partner-auth .auth-title-txt {font-weight: 900;}
.partner-auth #sign-up .auth-title-txt {margin-bottom: 0;}
.partner-auth .auth-sub-title-txt {
    color:         var(--indigo);
    line-height:   21px;
    margin-top:    10px;
    margin-bottom: 20px;
}
.partner-auth .auth-label {font-weight: 900;}

/*============ Inputs ===============*/
/* Typed text is indigo and the placeholder gray-600; auth.css uses gray-600 / gray-300. */
.partner-auth .form-control {
    color:        var(--indigo);
    padding-left: 20px;
}
.partner-auth input::placeholder {color: var(--gray-600) !important;}

/*
    Validation text sits 10px under its input and only takes space when there is an error —
    auth.css reserves a 20px min-height plus 5px margins after every field, which would push
    the whole card 30px out of rhythm.
*/
.partner-auth .text-danger {
    font-size:     14px;
    line-height:   1.4;
    min-height:    0;
    margin-top:    10px;
    margin-bottom: 0;
}
.partner-auth .text-danger:empty {display: none;}

/*============ 20px rhythm between the card's blocks ===============*/
.partner-auth form > .position-relative {margin-bottom: 20px;}
.partner-auth #sign-up .label-is-active,
.partner-auth #sign-in .remember-me-label {
    padding-bottom: 20px;
    line-height:    18px;
}

/*============ Consent line: links are Lato Black in the body colour, not teal ===============*/
.partner-auth #sign-up .label-is-active a {
    color:       inherit;
    font-weight: 900;
}
.partner-auth #sign-in .forgot-password-url {font-weight: 900;}

/*============ Primary button: filled, not outlined ===============*/
.partner-auth #sign-up .register-button,
.partner-auth #sign-in .login-button {
    background-color: var(--primary);
    border:           none;
    color:            var(--white);
    font-weight:      900;
    margin-bottom:    20px;
}
.partner-auth #sign-up .register-button:hover,
.partner-auth #sign-in .login-button:hover {
    background-color: var(--primary);
    color:            var(--white);
}
/* enableButton() in auth.js toggles .disabled — the design's grey idle state. */
.partner-auth #sign-up .register-button.disabled,
.partner-auth #sign-in .login-button.disabled,
.partner-auth #sign-up .register-button.disabled:hover,
.partner-auth #sign-in .login-button.disabled:hover {
    background-color: var(--gray-300);
    color:            var(--white);
    opacity:          1;
}

/*============ Social block ===============*/
.partner-auth .interrupted-line {
    font-size:     12px;
    margin-bottom: 20px;
}
.partner-auth .social-network-icons-button-wrapper {
    height:     50px;
    padding:    0 10px;
    box-shadow: 0 2.46px 3.08px rgba(0, 0, 0, 0.08);
}
.partner-auth .social-network-icons-button-wrapper h3 {
    font-weight: 900;
    color:       var(--indigo);
}

/*============ Page chrome: logo gap, language switcher ===============*/
/*
    Unlike everything above, these three elements sit OUTSIDE .partner-auth — the logo is in a
    preceding sibling of the card and the language switcher is outside .container entirely (see
    auth/app.blade.php) — so a descendant selector cannot reach them. body:has(.partner-auth) is
    the only hook that does not require touching the shared auth layout. Where :has() is
    unsupported the whole rule is dropped and the page keeps its current look, so there is no
    broken state to fall back from.

    The scope deliberately covers every partner page carrying .partner-auth, the
    confirm-registration one included: the page chrome is identical in all six frames of the
    design canvas (4560:144413), only the card differs.

    Spacing is guarded to >576px. The design frame is desktop, while auth.css (mobile logo
    margin 16px) and language_content.blade.php (top/right 15px) ship their own mobile values —
    these selectors outrank both, so without the guard they would leak into the mobile layout.
*/
@media only screen and (min-width: 577px) {
    /* Design stacks logo and card 40px apart; auth.css ships 60px. */
    body:has(.partner-auth) .logo-image-block {margin-bottom: 40px;}

    /*
        The design shows a bare "EN" label — no white pill behind it — 30px from the top and 48px
        from the side. #language-wrapper is styled by an inline <style> in
        auth/language_content.blade.php, which is why these selectors carry its id.
    */
    body:has(.partner-auth) #language-wrapper {
        top:              30px;
        background-color: transparent;
        border-radius:    0;
    }
    [dir=ltr] body:has(.partner-auth) #language-wrapper {right: 48px;}
    [dir=rtl] body:has(.partner-auth) #language-wrapper {left: 48px;}
}

/*
    Not overridden here: the design's page background is #eff0f5, three values off the --gray-100
    (#ECECF5) that auth.css paints. The difference is invisible, and the only selector that could
    carry it — body.default-bg — covers eTraveler and InterSim as well as keepgo
    (WhiteLabelDetails::getClassBackgroundName), so a hard-coded value would override their own
    grey. Left on the brand token deliberately.
*/

/*============ Partner confirm-registration card (Figma 4560:144527 / 4560:144558) ===============*/
/*
    Same card as the log-in/sign-up ones: 480px wide, 40px padding, 20px between blocks and a
    full-width button. auth/confirm_registration.blade.php keeps its own inline <style>, which
    reserves a fixed 17px error line after every field and sizes the button to its label for the
    end-user flow — hence the page id here, without which these rules would lose to it.
*/
#confirm-registration-page.partner-auth .text-danger {
    height:      auto;
    min-height:  0;
    font-size:   14px;
    line-height: 1.4;
    margin:      10px 0 0;
}
#confirm-registration-page.partner-auth .text-danger:empty {display: none;}
#confirm-registration-page.partner-auth form > .position-relative {margin-bottom: 20px;}
#confirm-registration-page.partner-auth .pass-explain {
    line-height: 18px;
    margin-top:  20px;
}
#confirm-registration-page.partner-auth .confirm {width: 100%;}