/**
 * My Account — forms.
 *
 * Login / register (myaccount/form-login.php, the theme's), and WooCommerce's
 * own lost-password, reset-password, account-details and address forms, which
 * the theme does not override: their fields are generated one by one
 * (woocommerce_form_field) and hooked by plugins, so they are styled here,
 * not copied. Loaded only on the account views that print a form.
 *
 * Fields follow the COD form's field: 1px #e5e7eb border, the master radius,
 * a brand border on focus, 16px text on phones (anything smaller makes iOS
 * zoom the page when a field takes focus).
 */

.casablanca-account-entry {
    --acc-field-border: #e5e7eb;
    --acc-field-focus: 0 0 0 3px color-mix(in srgb, var(--casablanca-brand) 15%, transparent);
}

/* ── Rows and labels ──────────────────────────────────────────────── */

.casablanca-account-entry form .form-row {
    margin: 0 0 14px;
    padding: 0;
}

.casablanca-account-entry form .form-row > label:not(.woocommerce-form__label-for-checkbox),
.casablanca-account-entry form .form-row > .woocommerce-input-wrapper > label {
    display: block;
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--casablanca-text-primary);
}

.casablanca-account-entry form .required {
    border: 0;
    color: var(--acc-danger);
    font-weight: 700;
    text-decoration: none;
}

.casablanca-account-entry form .optional {
    color: var(--acc-muted);
    font-weight: 400;
}

/* Field help: the display-name note, WooCommerce's field descriptions and
   the password hint. */
.casablanca-account-entry form #account_display_name_description,
.casablanca-account-entry form .form-row .description,
.casablanca-account-entry form .woocommerce-password-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
    color: var(--acc-muted);
}

.casablanca-account-entry form #account_display_name_description em {
    font-style: normal;
}

/* ── Fields ───────────────────────────────────────────────────────── */

.casablanca-account-entry form :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], select, textarea) {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--acc-field-border);
    border-radius: var(--casablanca-radius);
    background-color: var(--casablanca-bg-primary);
    color: var(--casablanca-text-primary);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    box-shadow: none;
}

.casablanca-account-entry form textarea {
    min-height: 110px;
    resize: vertical;
}

.casablanca-account-entry form select {
    appearance: none;
    padding-inline-end: 38px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
}

.casablanca-account-entry form :is(input, select, textarea)::placeholder {
    color: #9ca3af;
}

.casablanca-account-entry form :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], select, textarea):focus {
    border-color: var(--casablanca-brand);
    box-shadow: var(--acc-field-focus);
    outline: none;
}

.casablanca-account-entry form :is(input, select, textarea)[aria-invalid="true"],
.casablanca-account-entry form .woocommerce-invalid :is(input.input-text, select, textarea) {
    border-color: var(--acc-danger);
}

.casablanca-account-entry form :is(input[type="checkbox"], input[type="radio"]) {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--casablanca-brand);
}

.casablanca-account-entry form .woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

@media (min-width: 783px) {
    .casablanca-account-entry form :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], select, textarea) {
        font-size: 14px;
    }
}

/* ── Password show / hide ─────────────────────────────────────────────
   woocommerce.js wraps each password field in .password-input and appends
   a <button class="show-password-input"> with its own aria-label; it toggles
   .display-password. The eye is drawn with a mask so it takes currentColor. */

.casablanca-account-entry .password-input {
    position: relative;
    display: block;
}

.casablanca-account-entry form .password-input input {
    padding-inline-end: 48px;
}

.casablanca-account-entry .show-password-input {
    position: absolute;
    top: 50%;
    inset-inline-end: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--casablanca-radius);
    background: transparent;
    color: var(--acc-muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.casablanca-account-entry .show-password-input::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2.25 12S5.75 5.25 12 5.25 21.75 12 21.75 12 18.25 18.75 12 18.75 2.25 12 2.25 12Z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2.25 12S5.75 5.25 12 5.25 21.75 12 21.75 12 18.25 18.75 12 18.75 2.25 12 2.25 12Z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;
}

.casablanca-account-entry .show-password-input.display-password::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3l18 18'/><path d='M10.6 5.35A10.9 10.9 0 0 1 12 5.25c6.25 0 9.75 6.75 9.75 6.75a17 17 0 0 1-3.1 3.95M6.6 6.6C3.9 8.3 2.25 12 2.25 12S5.75 18.75 12 18.75c1.9 0 3.5-.6 4.9-1.45'/><path d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3l18 18'/><path d='M10.6 5.35A10.9 10.9 0 0 1 12 5.25c6.25 0 9.75 6.75 9.75 6.75a17 17 0 0 1-3.1 3.95M6.6 6.6C3.9 8.3 2.25 12 2.25 12S5.75 18.75 12 18.75c1.9 0 3.5-.6 4.9-1.45'/><path d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/></svg>");
}

.casablanca-account-entry .show-password-input:focus-visible {
    color: var(--casablanca-text-primary);
}

.casablanca-account-entry .show-password-input:focus-visible {
    outline: 2px solid var(--casablanca-brand);
    outline-offset: -2px;
}

/* WooCommerce's password strength meter (registration, reset, and account
   details when a new password is typed). */
.casablanca-account-entry .woocommerce-password-strength {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: var(--casablanca-radius);
    background: color-mix(in srgb, var(--acc-danger) 8%, #fff);
    color: var(--acc-danger);
    font-size: 12px;
    font-weight: 600;
}

.casablanca-account-entry .woocommerce-password-strength.good {
    background: color-mix(in srgb, var(--acc-warning) 8%, #fff);
    color: var(--acc-warning);
}

.casablanca-account-entry .woocommerce-password-strength.strong {
    background: color-mix(in srgb, var(--acc-success) 8%, #fff);
    color: var(--acc-success);
}

/* ── Country / state selects (selectWoo) ─────────────────────────────
   Only the closed box: the open dropdown is appended to <body> and keeps
   select2's own styles. */

.casablanca-account-entry .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: 44px;
    border: 1px solid var(--acc-field-border);
    border-radius: var(--casablanca-radius);
}

.casablanca-account-entry .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-inline: 12px 36px;
    color: var(--casablanca-text-primary);
    font-size: 16px;
    line-height: 42px;
}

@media (min-width: 783px) {
    .casablanca-account-entry .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 14px;
    }
}

.casablanca-account-entry .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 1px;
    height: 42px;
}

.casablanca-account-entry .select2-container--default.select2-container--focus .select2-selection--single,
.casablanca-account-entry .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--casablanca-brand);
}

/* ── Account details and address forms ────────────────────────────────
   Two columns from 600px: WooCommerce's form-row-first / -last pair up,
   everything else spans the row. A grid rather than core's floats, so the
   `.clear` divs between rows need no clearing to do. */

@media (min-width: 600px) {
    .casablanca-account-entry .woocommerce-EditAccountForm,
    .casablanca-account-entry .woocommerce-address-fields__field-wrapper {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
    }

    .casablanca-account-entry :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > * {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .casablanca-account-entry :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > .form-row-first {
        grid-column: 1;
    }

    .casablanca-account-entry :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > .form-row-last {
        grid-column: 2;
    }
}

.casablanca-account-entry .woocommerce-EditAccountForm .clear {
    display: none;
}

/* "Password change": its own panel inside the form. */
.casablanca-account-entry form fieldset {
    min-width: 0;
    margin: 8px 0 16px;
    padding: 14px 14px 0;
    border: 1px solid var(--acc-line);
    border-radius: var(--casablanca-radius);
    background: var(--acc-surface);
}

.casablanca-account-entry form fieldset legend {
    margin-inline-start: -6px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--acc-muted);
}

/* The address form's own heading ("Billing address") under the page's h1. */
.casablanca-account__content form > h2,
.casablanca-account__content form > h3 {
    margin: 0 0 14px;
    font-family: var(--casablanca-font-secondary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

/* Submit buttons: full width on phones, natural width from 600px. */
.casablanca-account__content form button[type="submit"].button {
    width: 100%;
    margin-top: 4px;
}

@media (min-width: 600px) {
    .casablanca-account__content form button[type="submit"].button {
        width: auto;
        min-width: 180px;
    }
}

/* ── Login / register ─────────────────────────────────────────────────
   One panel at a time, the other a link (form-login.php): no hidden
   duplicate form, nothing to tab into, no JavaScript. */

.casablanca-account-auth {
    max-width: 460px;
    margin: 0 auto;
}

/* Segmented control: the current state is a <span>, the other an <a>. */
.casablanca-account-auth__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0 0 16px;
    padding: 4px;
    border: 1px solid var(--acc-line);
    border-radius: var(--casablanca-radius);
    background: var(--acc-surface);
}

.casablanca-account-auth__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: var(--casablanca-radius);
    color: var(--acc-muted);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.casablanca-account-auth__tab.is-active {
    background: var(--casablanca-bg-primary);
    color: var(--casablanca-text-primary);
    box-shadow: 0 0 0 1px var(--acc-line);
}

a.casablanca-account-auth__tab:focus-visible {
    color: var(--casablanca-text-primary);
    outline: 2px solid color-mix(in srgb, var(--casablanca-brand) 50%, transparent);
    outline-offset: 2px;
}

.casablanca-account-auth__card {
    min-width: 0;
    padding: 20px 16px;
    border: 1px solid var(--acc-line);
    border-radius: var(--casablanca-radius);
    background: var(--casablanca-bg-primary);
}

.casablanca-account-auth__head {
    margin: 0 0 18px;
}

.casablanca-account-auth__title {
    margin: 0;
    font-family: var(--casablanca-font-secondary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.casablanca-account-auth__intro,
.casablanca-account-auth__note {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--acc-muted);
}

.casablanca-account-auth__note {
    margin: 0 0 14px;
}

.casablanca-account-auth__hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--acc-muted);
}

.casablanca-account-entry form .casablanca-account-auth__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
}

.casablanca-account-entry .lost_password a {
    color: var(--casablanca-brand);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.casablanca-account-entry form .casablanca-account-auth__submit {
    margin: 18px 0 0;
}

.casablanca-account-auth__submit .button {
    width: 100%;
}

/* "Vous n'avez pas encore de compte ?" — the same switch as the tabs, where
   someone who has read the form is looking. */
.casablanca-account-auth__alt {
    margin: 16px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--acc-muted);
    text-align: center;
}

.casablanca-account-auth__alt a {
    color: var(--casablanca-brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (min-width: 600px) {
    .casablanca-account-auth__card {
        padding: 26px 24px;
    }
}

/* Notices line up with the card. */
.casablanca-account-entry > .woocommerce > .woocommerce-notices-wrapper {
    max-width: 460px;
    margin-inline: auto;
}

/* ── Lost / reset password (WooCommerce's own templates) ──────────────
   The same card as the login form. The confirmation view is a notice and a
   paragraph, direct children of the shortcode's wrapper. */

.casablanca-account-entry .woocommerce-ResetPassword {
    max-width: 460px;
    margin: 0 auto;
    padding: 20px 16px;
    border: 1px solid var(--acc-line);
    border-radius: var(--casablanca-radius);
}

.casablanca-account-entry .woocommerce-ResetPassword > p:first-child {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--acc-muted);
}

.casablanca-account-entry .woocommerce-ResetPassword .clear {
    display: none;
}

.casablanca-account-entry .woocommerce-ResetPassword .button {
    width: 100%;
    margin-top: 4px;
}

.casablanca-account-entry > .woocommerce > :is(p, .woocommerce-message, .woocommerce-info) {
    max-width: 460px;
    margin-inline: auto;
}

.casablanca-account-entry > .woocommerce > p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--acc-muted);
    text-align: center;
}

@media (min-width: 600px) {
    .casablanca-account-entry .woocommerce-ResetPassword {
        padding: 26px 24px;
    }
}

/* ── Cloudflare Turnstile ─────────────────────────────────────────────
 * The widget on the login, registration and lost-password forms
 * (inc/woocommerce/account/turnstile.php). The markup is the theme's one
 * placeholder, casablanca_turnstile_field(); everything inside the mount is
 * Cloudflare's own iframe and is not styled here.
 *
 * NO LAYOUT SHIFT. The mount is empty until Cloudflare's script has loaded and
 * rendered into it, so the box reserves the widget's height up front: 65px for
 * the `flexible` size, 140px for `compact`, which is what Cloudflare renders
 * below 300px of room.
 *
 * The query is a CONTAINER query, not a media query, and 300px is the same
 * number assets/js/modules/turnstile.js compares `mount.clientWidth` against.
 * That is the point: both halves measure the same box against the same
 * threshold, so the height reserved is always the height used. A viewport
 * breakpoint cannot do that — the mount's width is the viewport minus the
 * page gutter minus the card's padding, which differs between the login card
 * and the lost-password card, so any single viewport width would reserve 65px
 * for a compact widget somewhere and shift the submit button down by 75px.
 *
 * Where container queries are not supported the rule is skipped and 65px is
 * reserved, which is correct at every width except the narrowest phones.
 */

.casablanca-account-entry .casablanca-turnstile {
    margin: 0 0 14px;
}

.casablanca-turnstile {
    container-type: inline-size;
}

.casablanca-turnstile-widget {
    min-height: 65px;
}

.casablanca-turnstile-widget iframe {
    display: block;
    max-width: 100%;
}

@container (max-width: 299px) {
    .casablanca-turnstile-widget {
        min-height: 140px;
    }
}

/* Live region: empty and `hidden` until the script has something to say, so it
   takes no space and is announced only when it changes. Same treatment as the
   field errors above it. */
.casablanca-turnstile-error {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--acc-danger);
}

.casablanca-turnstile-error[hidden] {
    display: none;
}