/* ============ CHECKOUT — TRONC COMMUN ============
 * Lot 2 (2026-05-08) — feat/checkout-v1
 * Tronc commun UI/CSS du tunnel : container, formulaires (inputs/selects/
 * textareas/labels/erreurs), boutons primary/outline/link, custom radio &
 * checkbox, alertes/notifications, focus visible global.
 * Loaded at priority 62 (after alter-checkout=60, before alter-cms=65).
 * Référence DS : DOM live page panier (cf docs/checkout-dev/AUDIT_AND_PLAN.md).
 */

/* ---------- Hairline token owned by the theme for the tunnel ----------
 * The 21 var(--as-hairline) usages across the 8 checkout sheets carry NO
 * fallback, so the token MUST resolve inside the checkout cascade. The theme
 * tokens file (alter-tokens.css) never declares it; until now it only resolved
 * because alterglobalreviews-front-v2.css happens to define it at :root on the
 * order controller. Disable that unrelated module sheet and every tunnel border
 * collapses (var() invalid at computed-value time → border-style:none). Declare
 * it here, scoped to the checkout body so the value never leaks to other pages
 * (other modules keep their own --as-hairline), at the theme's existing
 * light-border value (--as-grey-200 = #DDE1E3, byte-identical to today's render).
 */
body#checkout {
    --as-hairline: var(--as-grey-200, #dde1e3);
}

/* ---------- Container tunnel : fond doux pour faire ressortir les cards ---------- */
body#checkout {
    background-color: var(--as-grey-100);
}

body#checkout #content-wrapper,
body#checkout main,
body#checkout #content {
    background-color: transparent;
}

body#checkout .container,
body#checkout .info-order {
    background-color: transparent;
}

/* Cards tunnel — alignées panier (radius 8, fond blanc, hairline subtile, no shadow) */
body#checkout section.checkout-step,
body#checkout .info-order,
body#checkout .cart-summary,
body#checkout .card {
    background-color: var(--as-white, #ffffff);
    border: 1px solid var(--as-hairline);
    border-radius: 8px;
}

body#checkout section.checkout-step + section.checkout-step {
    margin-top: 16px;
}

body#checkout .info-order > section.checkout-step:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* ---------- Formulaires : inputs / selects / textareas ---------- */
body#checkout input[type="text"],
body#checkout input[type="email"],
body#checkout input[type="password"],
body#checkout input[type="tel"],
body#checkout input[type="number"],
body#checkout input[type="search"],
body#checkout input[type="url"],
body#checkout select,
body#checkout textarea,
body#checkout .form-control,
#authentication input[type="text"],
#authentication input[type="email"],
#authentication input[type="password"],
#authentication select {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    background-color: var(--as-white, #ffffff);
    color: var(--as-grey-900);
    font-family: var(--as-font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--as-hairline) !important;
    border-radius: 8px !important;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
    -webkit-appearance: none;
}

/* Specificity boost — overrides PS classic input resets */
body#checkout .form-control,
body#checkout input.form-control[type="text"],
body#checkout input.form-control[type="email"],
body#checkout input.form-control[type="password"],
body#checkout input.form-control[type="tel"],
body#checkout select.form-control,
body#checkout textarea.form-control {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #dde1e3 !important;
    background-color: #ffffff !important;
}

body#checkout textarea,
#authentication textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.5;
}

body#checkout select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%230F0F0F' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    padding-right: 44px;
}

/* Placeholder */
body#checkout input::placeholder,
body#checkout textarea::placeholder {
    color: var(--as-grey-300);
    opacity: 1;
}

/* Hover */
body#checkout input:hover:not(:disabled):not(:focus),
body#checkout select:hover:not(:disabled):not(:focus),
body#checkout textarea:hover:not(:disabled):not(:focus) {
    border-color: var(--as-grey-300);
}

/* Focus — ring amaranth */
body#checkout input:focus,
body#checkout select:focus,
body#checkout textarea:focus,
body#checkout .form-control:focus {
    outline: none;
    border-color: var(--as-amaranth);
    box-shadow: 0 0 0 3px rgba(230, 34, 73, 0.18);
}

/* Disabled / readonly */
body#checkout input:disabled,
body#checkout select:disabled,
body#checkout textarea:disabled,
body#checkout input[readonly] {
    background-color: var(--as-grey-100);
    color: var(--as-grey-300);
    cursor: not-allowed;
}

/* Erreur */
body#checkout .form-control.is-invalid,
body#checkout .has-error input,
body#checkout .has-error select,
body#checkout .has-error textarea,
body#checkout [aria-invalid="true"] {
    border-color: var(--as-amaranth);
    background-color: rgba(230, 34, 73, 0.04);
}

body#checkout .form-control.is-invalid:focus,
body#checkout [aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(230, 34, 73, 0.22);
}

/* ---------- Labels & form groups ---------- */
body#checkout label,
body#checkout .form-control-label,
body#checkout .form-label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--as-font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--as-grey-700);
    line-height: 1.4;
}

body#checkout .form-group,
body#checkout .form-fields > .form-group,
#authentication .form-group {
    margin-bottom: 20px;
}

/* Required asterisk */
body#checkout label .required,
body#checkout label.required::after,
body#checkout .form-control-label .required {
    color: var(--as-amaranth);
    font-weight: 600;
    margin-left: 2px;
}

/* Help text / form hint */
body#checkout .form-control-comment,
body#checkout small.form-text,
body#checkout .form-text {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--as-grey-500);
}

/* Error message inline */
body#checkout .form-control-valid,
body#checkout .form-control-invalid,
body#checkout .invalid-feedback,
body#checkout .has-error .help-block,
body#checkout li.error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--as-amaranth);
    line-height: 1.4;
}

body#checkout .form-control-valid {
    color: var(--as-success);
}

/* ---------- Alertes ---------- */
body#checkout .alert,
#authentication .alert,
#cart .alert,
body#identity .alert,
body#registration .alert {
    padding: 14px 18px;
    border-radius: 8px;
    border: none;
    border-left: 4px solid var(--as-grey-300);
    background-color: var(--as-grey-100);
    color: var(--as-grey-900);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: 16px;
}

body#checkout .alert-danger,
#authentication .alert-danger,
body#registration .alert-danger {
    background-color: rgba(230, 34, 73, 0.08);
    border-left-color: var(--as-amaranth);
    color: var(--as-grey-900);
}

body#checkout .alert-success,
#authentication .alert-success {
    background-color: rgba(15, 138, 58, 0.10);
    border-left-color: var(--as-success);
}

body#checkout .alert-warning {
    background-color: rgba(242, 182, 62, 0.14);
    border-left-color: var(--as-warning);
}

body#checkout .alert-info {
    background-color: var(--as-grey-100);
    border-left-color: var(--as-grey-500);
}

body#checkout .alert ul {
    margin: 0;
    padding-left: 18px;
}

body#checkout .alert a {
    color: var(--as-grey-900);
    text-decoration: underline;
    text-decoration-color: var(--as-amaranth);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Notifications top tunnel */
body#checkout #notifications {
    margin-top: 16px;
    margin-bottom: 16px;
}

/* ---------- Boutons : primary, outline, link ---------- */
/* Primary — alignée DS panier (amaranth, radius 8, min-h 50, fw 500, fs 16) */
body#checkout .btn-primary,
#authentication .btn-primary,
body#registration .btn-primary,
body#identity .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 28px;
    background-color: var(--as-amaranth);
    color: #ffffff;
    font-family: var(--as-font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease, transform .08s ease,
                box-shadow .15s ease;
}

body#checkout .btn-primary:hover,
#authentication .btn-primary:hover,
body#registration .btn-primary:hover {
    background-color: #c91e3f;
    color: #ffffff;
}

body#checkout .btn-primary:active {
    transform: scale(0.98);
}

body#checkout .btn-primary:disabled,
body#checkout .btn-primary.disabled {
    background-color: var(--as-grey-300);
    color: var(--as-grey-100);
    cursor: not-allowed;
    transform: none;
}

/* Outline — bord amaranth, fond transparent, hover fill */
body#checkout .btn-outline-primary,
body#checkout .btn-secondary,
#authentication .btn-outline-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 12px 24px;
    background-color: transparent;
    color: var(--as-grey-900);
    font-family: var(--as-font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    border: 1.5px solid var(--as-amaranth);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

body#checkout .btn-outline-primary:hover,
body#checkout .btn-secondary:hover {
    background-color: var(--as-amaranth);
    color: #ffffff;
}

/* Link — pattern signature soulignement amaranth */
body#checkout .btn-link,
body#checkout a.btn-link,
body#checkout .add-address a,
body#checkout .edit-address,
body#checkout .delete-address,
#authentication a.forgot-password-link,
#authentication a.guest-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    color: var(--as-grey-900);
    font-family: var(--as-font-family);
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--as-amaranth);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    cursor: pointer;
    transition: text-decoration-thickness .15s ease;
}

body#checkout .btn-link:hover,
body#checkout .add-address a:hover,
#authentication a.forgot-password-link:hover {
    text-decoration-thickness: 3px;
    color: var(--as-grey-900);
}

/* ---------- Custom radio & checkbox ---------- */
body#checkout .custom-radio,
body#checkout .custom-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    margin-right: 10px;
    cursor: pointer;
    vertical-align: middle;
}

body#checkout .custom-radio input[type="radio"],
body#checkout .custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

body#checkout .custom-radio > span,
body#checkout .custom-checkbox > span:not(.condition-label) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: #ffffff;
    border: 1.5px solid var(--as-grey-300);
    transition: border-color .15s ease, background-color .15s ease;
}

body#checkout .custom-radio > span {
    border-radius: 50%;
}

body#checkout .custom-checkbox > span:not(.condition-label) {
    border-radius: 4px;
}

body#checkout .custom-radio > span::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--as-amaranth);
    transform: scale(0);
    transition: transform .12s ease;
}

body#checkout .custom-radio input[type="radio"]:checked ~ span,
body#checkout .custom-radio input[type="radio"]:checked + span {
    border-color: var(--as-amaranth);
}

body#checkout .custom-radio input[type="radio"]:checked ~ span::after,
body#checkout .custom-radio input[type="radio"]:checked + span::after {
    transform: scale(1);
}

body#checkout .custom-checkbox input[type="checkbox"]:checked ~ span,
body#checkout .custom-checkbox input[type="checkbox"]:checked + span {
    background-color: var(--as-amaranth);
    border-color: var(--as-amaranth);
}

body#checkout .custom-checkbox .checkbox-checked {
    display: none;
    color: #ffffff;
    font-size: 16px;
}

body#checkout .custom-checkbox input[type="checkbox"]:checked ~ span .checkbox-checked,
body#checkout .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
    display: inline-block;
}

/* Hover radio/checkbox */
body#checkout .custom-radio:hover > span,
body#checkout .custom-checkbox:hover > span:not(.condition-label) {
    border-color: var(--as-grey-700);
}

/* ---------- Focus visible global tunnel ---------- */
body#checkout *:focus {
    outline: none;
}

body#checkout a:focus-visible,
body#checkout button:focus-visible,
body#checkout [role="button"]:focus-visible,
body#checkout .custom-radio input:focus-visible ~ span,
body#checkout .custom-radio input:focus-visible + span,
body#checkout .custom-checkbox input:focus-visible ~ span,
body#checkout .custom-checkbox input:focus-visible + span,
body#checkout summary:focus-visible {
    outline: 2px solid var(--as-amaranth);
    outline-offset: 2px;
    border-radius: 6px;
}

body#checkout .btn-primary:focus-visible,
body#checkout .btn-outline-primary:focus-visible,
body#checkout .btn-secondary:focus-visible {
    outline: 2px solid var(--as-amaranth);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(230, 34, 73, 0.18);
}

/* ---------- Liens d'action — pattern signature ---------- */
body#checkout a:not(.btn):not(.address):not(.delivery-option-2):not(.logo) {
    color: var(--as-grey-900);
    text-decoration: underline;
    text-decoration-color: var(--as-amaranth);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-thickness .15s ease;
}

body#checkout a:not(.btn):not(.address):not(.delivery-option-2):not(.logo):hover {
    text-decoration-thickness: 2px;
    color: var(--as-grey-900);
}

/* ---------- Mobile (≤ 575px) ---------- */
@media (max-width: 575.98px) {
    body#checkout input,
    body#checkout select,
    body#checkout textarea,
    body#checkout .form-control,
    #authentication input,
    #authentication select {
        font-size: 16px; /* anti-zoom iOS */
    }

    body#checkout .btn-primary,
    body#checkout .btn-outline-primary,
    body#checkout .btn-secondary,
    #authentication .btn-primary {
        width: 100%;
        max-width: 100%;
    }

    body#checkout section.checkout-step + section.checkout-step {
        margin-top: 12px;
    }
}

/* ---------- Tablet (576-991px) — petits ajustements ---------- */
@media (min-width: 576px) and (max-width: 991.98px) {
    body#checkout .btn-primary,
    body#checkout .btn-outline-primary {
        min-width: 240px;
    }
}