/*
 * Sign-in, register and reset-password pages (layout Magento_Customer/layout/sr_customer_auth.xml, body.sr-auth).
 * Desktop and Tablet landscape: 50/50 split, the video card (CMS block customer-auth-media) left, the form panel
 * right (title, return button, form). Mobile and Tablet portrait: stacked, card on top.
 * Inputs 56px, radius 12, pill buttons (orange primary, white secondary); fields and buttons with the floating header
 * pill's thin grey ring and soft shadow,
 * the video card itself is the shared component (web/css/satrunner-video-card.css). Rules start at .sr-auth / .sr-auth .column.main so they outrank
 * Luma's styles-l.css, which loads after this file. Behaviour: web/js/satrunner-auth.js. Docs: docs/customer-auth.html
 * The form and button rules are shared with the Customer Dashboard's forms (body.sr-cd: Kontoinformationen, address
 * form; this file and the script load there too, see docs/customer-dashboard.html). :is(.sr-auth, .sr-cd) weighs the
 * same as .sr-auth, so the sign-in pages are unchanged.
 */

/* ---------- Page: two columns ---------- */
body.sr-auth .page-wrapper .page-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 72px;
}

.sr-auth .page-main > a:first-child {
    position: absolute;
}

/* ---------- Left: video card ----------
   Sticky: where the form is taller than the card (the register page), the card stays in view while the form
   scrolls past it, and the page scrolls on to the footer once the form ends. 24px from the top: on Desktop the
   header scrolls away with the page. */
.sr-auth .sr-auth__media {
    position: sticky;
    top: 24px;
    align-self: start;
    min-width: 0;
}

/* ---------- Right: form panel ---------- */
.sr-auth .sr-auth__panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    min-width: 0;
    justify-self: center;
}

.sr-auth .sr-auth__panel .page-title-wrapper {
    margin: 0;
}

.sr-auth .sr-auth__panel .page-title-wrapper .page-title {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    color: #1f2328;
    font-family: 'Barlow', sans-serif;
    font-size: clamp(3.2rem, 3.4vw, 4.8rem);
    font-weight: 600;
    line-height: 1.1;
    text-wrap: balance;
}

/* Orange rule under the title */
.sr-auth .sr-auth__panel .page-title-wrapper .page-title::after {
    content: '';
    display: block;
    width: 88px;
    height: 4px;
    background: #f26a21;
}

.sr-auth .sr-auth-return {
    display: flex;
}

.sr-auth .sr-auth__panel .columns,
.sr-auth .sr-auth__panel .column.main {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ---------- Buttons: pills, orange primary, outlined secondary ----------
   Fields and buttons take the floating header pill's edge (satrunner-header.css): a thin grey ring and a soft shadow */
.sr-auth,
.sr-cd {
    --sr-auth-edge: rgba(13, 13, 13, 0.08);
    --sr-auth-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

:is(.sr-auth, .sr-cd) .sr-auth-btn,
:is(.sr-auth, .sr-cd) .column.main .sr-auth-btn,
:is(.sr-auth, .sr-cd) .column.main .actions-toolbar .sr-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 52px;
    margin: 0;
    padding: 0 24px;
    border: 1px solid var(--sr-auth-edge);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: var(--sr-auth-shadow);
    color: #1f2328;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

:is(.sr-auth, .sr-cd) .sr-auth-btn svg {
    flex: none;
    width: 16px;
    height: 16px;
}

:is(.sr-auth, .sr-cd) .sr-auth-btn--secondary:hover,
:is(.sr-auth, .sr-cd) .sr-auth-btn--secondary:focus,
:is(.sr-auth, .sr-cd) .column.main .sr-auth-btn--secondary:hover,
:is(.sr-auth, .sr-cd) .column.main .sr-auth-btn--secondary:focus {
    border-color: rgba(13, 13, 13, 0.24);
    background: #ffffff;
    color: #1f2328;
    text-decoration: none;
}

:is(.sr-auth, .sr-cd) .column.main .sr-auth-btn.sr-auth-btn--primary,
:is(.sr-auth, .sr-cd) .column.main .actions-toolbar .sr-auth-btn.sr-auth-btn--primary {
    border-color: #f26a21;
    background: #f26a21;
    color: #ffffff;
}

:is(.sr-auth, .sr-cd) .column.main .sr-auth-btn.sr-auth-btn--primary:hover,
:is(.sr-auth, .sr-cd) .column.main .sr-auth-btn.sr-auth-btn--primary:focus,
:is(.sr-auth, .sr-cd) .column.main .actions-toolbar .sr-auth-btn.sr-auth-btn--primary:hover {
    border-color: #d95b17;
    background: #d95b17;
    color: #ffffff;
}

:is(.sr-auth, .sr-cd) .sr-auth-btn:focus-visible {
    outline: 3px solid rgba(242, 106, 33, 0.4);
    outline-offset: 2px;
}

/* ---------- Forms ---------- */
:is(.sr-auth, .sr-cd) .column.main .login-container {
    display: flex;
    flex-direction: column;
    margin: 0;
}

:is(.sr-auth, .sr-cd) .column.main .login-container .block {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

:is(.sr-auth, .sr-cd) .column.main .login-container .block-customer-login .block-title {
    display: none;
}

:is(.sr-auth, .sr-cd) .column.main .login-container .block-new-customer {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #e5e5e5;
}

:is(.sr-auth, .sr-cd) .column.main .block-new-customer .block-title {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

:is(.sr-auth, .sr-cd) .column.main .block-new-customer .block-title strong {
    color: #1f2328;
    font-family: 'Barlow', sans-serif;
    font-size: 2.4rem;
    font-weight: 600;
}

:is(.sr-auth, .sr-cd) .column.main .block-new-customer .block-content p {
    margin: 0 0 20px;
    color: #6e6e73;
    font-size: 1.6rem;
    line-height: 1.6;
}

:is(.sr-auth, .sr-cd) .column.main .form.create.account,
:is(.sr-auth, .sr-cd) .column.main .form.password.forget,
:is(.sr-auth, .sr-cd) .column.main .form.password.reset,
:is(.sr-auth, .sr-cd) .column.main .form.form-login {
    width: 100%;
    min-width: 0;
    margin: 0;
}

/* Fieldsets add no space of their own: every field is 12px from the next, also across Magento's two groups on the
   register page (name / sign-in details) */
:is(.sr-auth, .sr-cd) .column.main .fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

/* "* Pflichtfelder" note and the fieldset headings (Persönliche Informationen …) */
:is(.sr-auth, .sr-cd) .column.main .fieldset::after,
:is(.sr-auth, .sr-cd) .column.main .login-container .fieldset::after {
    display: none;
    content: none;
}

:is(.sr-auth, .sr-cd) .column.main .fieldset > .legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

:is(.sr-auth, .sr-cd) .column.main .fieldset > .legend + br {
    display: none;
}

:is(.sr-auth, .sr-cd) .column.main .fieldset > .field,
:is(.sr-auth, .sr-cd) .column.main .fieldset > .fields > .field {
    margin: 0 0 12px;
}

:is(.sr-auth, .sr-cd) .column.main .field.sr-auth-field > .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

:is(.sr-auth, .sr-cd) .column.main .fieldset > .field > .control,
:is(.sr-auth, .sr-cd) .column.main .field .control {
    float: none;
    width: 100%;
}

/* Note under the title of the reset page ("Bitte geben Sie Ihre E-Mail-Adresse …") */
:is(.sr-auth, .sr-cd) .column.main .fieldset > .field.note {
    margin: 0 0 16px;
    color: #6e6e73;
    font-size: 1.6rem;
    line-height: 1.6;
}

:is(.sr-auth, .sr-cd) .column.main input[type="text"],
:is(.sr-auth, .sr-cd) .column.main input[type="email"],
:is(.sr-auth, .sr-cd) .column.main input[type="tel"],
:is(.sr-auth, .sr-cd) .column.main input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    padding: 0 20px;
    border: 1px solid var(--sr-auth-edge);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--sr-auth-shadow);
    color: #1f2328;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
}

:is(.sr-auth, .sr-cd) .column.main input::placeholder {
    color: #86868b;
    opacity: 1;
}

:is(.sr-auth, .sr-cd) .column.main input[type="text"]:focus,
:is(.sr-auth, .sr-cd) .column.main input[type="email"]:focus,
:is(.sr-auth, .sr-cd) .column.main input[type="tel"]:focus,
:is(.sr-auth, .sr-cd) .column.main input[type="password"]:focus {
    border-color: #f26a21;
    outline: 0;
    box-shadow: var(--sr-auth-shadow), 0 0 0 1px #f26a21;
}

/* Selects (country, region on the address form): the fields' look, with an Iconsax arrow-down */
:is(.sr-auth, .sr-cd) .column.main select {
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    padding: 0 48px 0 20px;
    border: 1px solid var(--sr-auth-edge);
    border-radius: 12px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95'/%3E%3C/svg%3E") no-repeat right 16px center / 16px;
    box-shadow: var(--sr-auth-shadow);
    color: #1f2328;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    -webkit-appearance: none;
    appearance: none;
}

:is(.sr-auth, .sr-cd) .column.main select:focus {
    border-color: #f26a21;
    outline: 0;
    box-shadow: var(--sr-auth-shadow), 0 0 0 1px #f26a21;
}

:is(.sr-auth, .sr-cd) .column.main input.mage-error {
    border-color: #b30000;
}

:is(.sr-auth, .sr-cd) .column.main div.mage-error {
    margin-top: 4px;
    color: #b30000;
    font-size: 1.2rem;
}

/* Password: the input sits in a bordered box with the eye button beside it */
:is(.sr-auth, .sr-cd) .column.main .sr-auth-pw {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 56px;
    border: 1px solid var(--sr-auth-edge);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--sr-auth-shadow);
}

:is(.sr-auth, .sr-cd) .column.main .sr-auth-pw:focus-within {
    border-color: #f26a21;
    box-shadow: var(--sr-auth-shadow), 0 0 0 1px #f26a21;
}

:is(.sr-auth, .sr-cd) .column.main .sr-auth-pw input[type="password"],
:is(.sr-auth, .sr-cd) .column.main .sr-auth-pw input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

:is(.sr-auth, .sr-cd) .column.main .sr-auth-pw input:focus {
    box-shadow: none;
}

:is(.sr-auth, .sr-cd) .column.main button.sr-auth-pw__eye {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    color: #86868b;
    cursor: pointer;
}

:is(.sr-auth, .sr-cd) .column.main button.sr-auth-pw__eye:hover,
:is(.sr-auth, .sr-cd) .column.main button.sr-auth-pw__eye:focus {
    border: 0;
    background: none;
    color: #f26a21;
}

:is(.sr-auth, .sr-cd) .column.main button.sr-auth-pw__eye svg {
    width: 20px;
    height: 20px;
}

/* Magento's own "Passwort anzeigen" checkbox: the eye replaces it (it presses the hidden checkbox), on every width.
   :not(.sr-checkbox) matches the checkbox row rule below, which otherwise wins on source order and shows it again. */
:is(.sr-auth, .sr-cd) .column.main .field.choice:not(.sr-checkbox)[data-bind*="showPassword"] {
    display: none;
}

/* Password strength under the field. Magento paints the coloured fill as a ::before layer (z-index -1); isolation
   keeps that layer inside the box and overflow clips it, so the fill gets the same rounded corners as the fields. */
:is(.sr-auth, .sr-cd) .column.main .password-strength-meter {
    margin-top: 4px;
    padding: 4px 12px;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    font-size: 1.2rem;
}

:is(.sr-auth, .sr-cd) .column.main .password-strength-meter::before {
    border-radius: inherit;
}

/* Checkboxes (newsletter, remote shopping assistance); the theme's checkbox card (.sr-checkbox,
   satrunner-layout.css) has its own look */
:is(.sr-auth, .sr-cd) .column.main .field.choice:not(.sr-checkbox) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
    color: #1f2328;
    font-size: 1.6rem;
}

:is(.sr-auth, .sr-cd) .column.main .field.choice:not(.sr-checkbox) input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #f26a21;
}

:is(.sr-auth, .sr-cd) .column.main .field.choice:not(.sr-checkbox) .label {
    padding: 0;
}

:is(.sr-auth, .sr-cd) .column.main .field-tooltip {
    display: none;
}

/* Register: first and last name side by side */
.sr-auth.customer-account-create .column.main .fieldset.create.info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 8px;
}

.sr-auth.customer-account-create .column.main .fieldset.create.info > * {
    grid-column: 1 / -1;
}

.sr-auth.customer-account-create .column.main .fieldset.create.info > .field-name-firstname {
    grid-column: 1;
}

.sr-auth.customer-account-create .column.main .fieldset.create.info > .field-name-lastname {
    grid-column: 2;
}

/* Captcha: code field and image side by side, Magento's own reload button hidden (the proxy sits in the toolbar) */
:is(.sr-auth, .sr-cd) .column.main .sr-auth-captcha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin: 0 0 12px;
}

:is(.sr-auth, .sr-cd) .column.main .sr-auth-captcha > .field {
    margin: 0;
}

:is(.sr-auth, .sr-cd) .column.main .sr-auth-captcha .control.captcha-image {
    display: block;
    margin: 0;
}

:is(.sr-auth, .sr-cd) .column.main .control.captcha-image .captcha-img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    margin: 0;
    object-fit: cover;
    border: 1px solid var(--sr-auth-edge);
    border-radius: 12px;
    box-shadow: var(--sr-auth-shadow);
}

:is(.sr-auth, .sr-cd) .column.main .control.captcha-image .captcha-reload {
    display: none;
}

/* Action rows: two equal buttons (calc, not flex 1 1 0: Chrome adds padding and borders to a 0 basis) */
:is(.sr-auth, .sr-cd) .column.main .actions-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
}

:is(.sr-auth, .sr-cd) .column.main .actions-toolbar::before,
:is(.sr-auth, .sr-cd) .column.main .actions-toolbar::after {
    display: none;
    content: none;
}

:is(.sr-auth, .sr-cd) .column.main .actions-toolbar > .primary,
:is(.sr-auth, .sr-cd) .column.main .actions-toolbar > .secondary {
    display: flex;
    flex: 0 0 calc(50% - 4px);
    float: none;
    margin: 0;
    padding: 0;
}

:is(.sr-auth, .sr-cd) .column.main .actions-toolbar > .secondary:empty {
    display: none;
}

:is(.sr-auth, .sr-cd) .column.main .actions-toolbar .sr-auth-btn {
    width: 100%;
}

/* Register and reset: the return button above replaces Magento's "Zurück" link */
:is(.sr-auth, .sr-cd) .column.main .actions-toolbar .action.back {
    display: none;
}

:is(.sr-auth, .sr-cd) .column.main .sr-auth-reload svg {
    width: 16px;
    height: 16px;
}

/* Privacy notice under the register form (CMS block customer-register-privacy) */
:is(.sr-auth, .sr-cd) .column.main .sr-auth-privacy {
    margin: 20px 0 0;
    color: #6e6e73;
    font-size: 1.2rem;
    line-height: 1.6;
}

/* Underlined at rest; the colour is set because the site-wide link effect (satrunner-links.css) clips the text fill,
   which would leave a currentColor underline invisible. On hover that effect's orange line takes over. */
:is(.sr-auth, .sr-cd) .column.main .sr-auth-privacy a,
:is(.sr-auth, .sr-cd) .column.main .sr-auth-privacy a:visited {
    color: #1f2328;
    text-decoration: underline;
    text-decoration-color: #1f2328;
    text-underline-offset: 3px;
}

:is(.sr-auth, .sr-cd) .column.main .sr-auth-privacy a:hover {
    color: #f26a21;
}

/* ---------- Mobile and Tablet portrait: stacked, card on top ---------- */
@media (max-width: 448px), (max-width: 1023px) and (orientation: portrait) {
    body.sr-auth .page-wrapper .page-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        align-items: start;
        padding-top: 16px;
        padding-bottom: 56px;
    }

    .sr-auth .sr-auth__media {
        position: static;
    }

    .sr-auth .sr-video-card {
        aspect-ratio: 4 / 3;
    }

    .sr-auth .sr-auth__panel {
        max-width: none;
    }
}

@media (max-width: 448px) {
    .sr-auth .sr-video-card {
        aspect-ratio: 1 / 1;
    }

    :is(.sr-auth, .sr-cd) .column.main .actions-toolbar > .primary,
    :is(.sr-auth, .sr-cd) .column.main .actions-toolbar > .secondary {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.sr-auth, .sr-cd) .sr-auth-btn {
        transition: none;
    }
}