/*--------------------------------------------------------------
# Checkout UX Enhancements
# Progress indicator, trust signals, mobile summary, attendee
# card polish, and button loading states.
#
# @package TicketSystemTango
--------------------------------------------------------------*/


/* ==========================================================================
   §1  PROGRESS INDICATOR
   Three-step horizontal bar: Entradas → Datos → Pago
   ========================================================================== */

.ts-checkout-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 28px 20px 36px;
    margin-bottom: 8px;
}

.ts-checkout-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    min-width: 70px;
}

.ts-checkout-progress__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-body);
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.60);
    background-color: transparent;
    transition: all 0.3s ease;
}

.ts-checkout-progress__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.60);
    font-family: var(--font-body);
    transition: color 0.3s ease;
}

/* Connector line between steps */
.ts-checkout-progress__connector {
    flex: 1;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0 8px;
    margin-bottom: 28px; /* align with icon center */
    max-width: 80px;
    transition: background-color 0.3s ease;
}

.ts-checkout-progress__connector--active {
    background: linear-gradient(90deg, var(--ts-gold, #c9a96e), rgba(201, 169, 110, 0.4));
}

/* Completed step */
.ts-checkout-progress__step--completed .ts-checkout-progress__icon {
    background-color: var(--ts-gold, #c9a96e);
    border-color: var(--ts-gold, #c9a96e);
    color: #111;
}

.ts-checkout-progress__step--completed .ts-checkout-progress__label {
    color: var(--ts-gold, #c9a96e);
}

/* Active step */
.ts-checkout-progress__step--active .ts-checkout-progress__icon {
    border-color: var(--ts-gold, #c9a96e);
    color: var(--ts-gold, #c9a96e);
    box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.15);
}

.ts-checkout-progress__step--active .ts-checkout-progress__label {
    color: #fff;
}


/* ==========================================================================
   §2  TRUST SIGNALS STRIP
   Lock icon + shield + checkmark below the Place Order button
   ========================================================================== */

.ts-trust-signals {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    row-gap: 12px;
    padding: 20px 0 8px;
    margin-top: 4px;
}

/* Provider + arrepentimiento line under the marks (Checkout artboard) */
.ts-trust-signals__note {
    flex: 1 1 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: left;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.ts-trust-signals__note svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--ts-gold, #c9a96e);
}

.ts-trust-signals__note a {
    color: var(--ts-gold, #c9a96e);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ts-trust-signals__note a:hover,
.ts-trust-signals__note a:focus-visible {
    color: #fff;
}

.ts-trust-signals__item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.ts-trust-signals__item svg {
    opacity: 0.5;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.ts-trust-signals__item:hover {
    color: rgba(255, 255, 255, 0.7);
}

.ts-trust-signals__item:hover svg {
    opacity: 0.8;
}

@media (max-width: 480px) {
    /* MOE-1-117: 2 + 1 wrap left "Entradas oficiales" orphaned — three equal
       columns; 0.75rem keeps the 12px floor. */
    .ts-trust-signals {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        justify-items: center;
    }

    .ts-trust-signals__item {
        font-size: 0.75rem;
        text-align: center;
        flex-direction: column;
        gap: 4px;
    }

    /* anything else inside the row (the provider / arrepentimiento note)
       spans all three columns instead of being squeezed into the first */
    .ts-trust-signals > :not(.ts-trust-signals__item) {
        grid-column: 1 / -1;
        justify-self: stretch;
        text-align: left;
    }
}

/* MOE-1-123: the trust row and provider note were ~45% white */
.ts-trust-signals__item {
    color: rgba(255, 255, 255, 0.68);
}

.ts-trust-signals__item svg {
    opacity: 0.75;
}

/* MOE-1-115/119 (MOE-2-010): Términos / Política in the consent line looked
   like plain text */
.wc-block-checkout__terms a,
.wc-block-components-checkout-policies a,
.wc-block-components-checkout-step__description a {
    color: var(--ts-gold, #c9a96e);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* MOE-1-014/034/117(G): "Cambiar a USD" inherited the theme's solid gold
   button and competed with IR A PAGAR — it is a secondary text action. */
.ts-payment-currency-hint__change,
button.ts-payment-currency-hint__change {
    background: transparent;
    color: var(--ts-gold, #c9a96e);
    border: 1px solid rgba(201, 169, 110, 0.45);
    border-radius: 999px;
    padding: 6px 14px;
    min-height: 44px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    box-shadow: none;
    transform: none;
}

.ts-payment-currency-hint__change:hover,
.ts-payment-currency-hint__change:focus-visible {
    background: rgba(201, 169, 110, 0.12);
    border-color: var(--ts-gold, #c9a96e);
}


/* ==========================================================================
   §3  MOBILE ORDER SUMMARY (Fixed Bottom Bar)
   Shows ticket count + total at the bottom of mobile checkout
   ========================================================================== */

/* Carrito / Checkout artboards (S5c W4): one bar anatomy on both pages —
   "2 entradas · $ 85.000" + "Costos de servicio incluidos" left, the ONE
   filled-gold action right (FINALIZAR COMPRA / IR A PAGAR). The action hides
   while the real button is on screen; the bar hides with the empty cart. */
.ts-mobile-summary {
    display: none; /* Hidden on desktop */
}

.ts-mobile-summary[hidden] {
    display: none; /* keep: state */
}

/* V2V-142: the cart observer sets this only after checking full visibility
   and focus. The separate checkout/payment summary is not affected. */
.ts-mobile-summary--cart.ts-mobile-summary--inline-visible {
    display: none;
}

/* MOE-12-022/024/025/026/027/009: the bar (and the paddings that make room
   for it) belong to phones only. From 784px the real sidebar is visible and
   sticky, so the bar would duplicate the total and cover the form. 783 =
   the last viewport where WooCommerce still stacks the block (container
   <700px with Storefront's 2.62em gutters); see checkout.css §6. */
@media (max-width: 783px) {
    .ts-mobile-summary {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--ts-z-bar, 9999);
        /* MOE-1-012 (regression): the 0.95 alpha + blur let the footer wordmark
           and field labels ghost through behind the amount. Solid surface. */
        background-color: #161616;
        border-top: 1px solid var(--ts-border-color);
        box-shadow: var(--ts-shadow-bar);
        padding: var(--ts-space-3) var(--ts-space-5);
    }

    .ts-mobile-summary__content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--ts-space-3);
        max-width: 700px;
        margin: 0 auto;
    }

    .ts-mobile-summary__text {
        display: flex;
        flex: 1 1 170px;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        font-family: var(--font-body);
    }

    .ts-mobile-summary__line {
        display: flex;
        align-items: baseline;
        gap: 4px;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--ts-on-surface);
        font-size: var(--ts-fs-sm);
    }

    .ts-mobile-summary__items {
        color: var(--ts-on-surface);
    }

    .ts-mobile-summary__sep {
        color: var(--ts-on-surface-muted);
    }

    .ts-mobile-summary__total {
        font-weight: var(--ts-fw-bold);
        color: var(--ts-on-surface);
        font-variant-numeric: tabular-nums;
    }

    .ts-mobile-summary__note {
        color: var(--ts-mediumgrey-text);
        font-size: var(--ts-fs-xs);
        white-space: normal;
    }

    .ts-mobile-summary__cta {
        flex: 1 0 auto;
        max-width: 100%;
        white-space: normal;
        min-height: 48px;
        font-size: var(--ts-fs-sm);
    }

    .ts-mobile-summary--cta-hidden .ts-mobile-summary__cta {
        display: none;
    }

    /* Prevent content from hiding behind the fixed bar */
    .woocommerce-checkout .entry-content,
    .woocommerce-checkout .wp-block-woocommerce-checkout,
    .woocommerce-cart .wp-block-woocommerce-cart {
        padding-bottom: 84px;
    }

    /* MOE-1-126: the copyright line scrolled under the bar */
    .woocommerce-checkout .site-footer,
    .woocommerce-cart .site-footer {
        padding-bottom: 96px;
    }

    /* MOE-1-035: ~345px of stacked bottom paddings/margins (block 60 +
       content 70 + main 42 + article 68) read as a dead viewport between the
       trust note and the footer. Keep the bar clearance only.
       keep: inline — Blocks JS writes padding-bottom: 60px as a style
       attribute on phones (cascade-why), so only priority reaches past it. */
    .woocommerce-checkout .wp-block-woocommerce-checkout {
        padding-bottom: 0 !important;
    }

    .woocommerce-checkout .site-main,
    .woocommerce-checkout .site-main > article {
        margin-bottom: 0;
    }
}

/* MOE-1-080: on desktop the order summary scrolled away, leaving the right
   column empty exactly where the buyer confirms the total. From 784px
   (tablets included since MOE-12-024). Sticky only while WooCommerce lays
   the block out in two columns (@container ≥700px on the block itself: a
   narrow window with a scrollbar can still stack it) and only on viewports
   tall enough for the card + header (landscape phones scroll normally). */
@media (min-width: 784px) {
    @container (min-width: 700px) {
        .wp-block-woocommerce-checkout .wc-block-components-sidebar {
            position: sticky;
            top: calc(var(--ts-header-h, 72px) + 16px);
            align-self: flex-start;
        }
    }

    /* WooCommerce adds .is-sticky from its own height test and its
       `.wc-block-checkout__sidebar.is-sticky{position:sticky}` is (0,2,0) and
       prints after this sheet, so the override needs the (0,3,0) form too and
       must drop the theme offset (review pass 2). */
    @media (max-height: 599px) {
        .wp-block-woocommerce-checkout .wc-block-components-sidebar,
        .wp-block-woocommerce-checkout .wc-block-checkout__sidebar.is-sticky {
            position: static;
            top: auto;
        }
    }

    /* Round 13: the injected progress bar is the form's first flex item; in the
       two-column regime it shrank to its content and sat flush left under the
       centred title. Own full-width row, steps centred as on phones. */
    .wc-block-checkout > .ts-checkout-progress {
        flex: 1 1 100%;
        width: 100%;
    }

    /* MOE-6-015 (regressed in round 12 at 1920/1440/Safari, MOE-12-1582/1491/
       1653): at the end of the scroll the sticky card slid under the header
       because ~240px of stacked bottom paddings/margins (block 60 + content 70
       + main 42 + article 68 — the phone-side MOE-1-035 list) sat between the
       checkout block and the footer, so the sticky range ended one viewport
       too early. Same trimming as the phone block; one 40px breath before the
       footer. On a 900px-tall viewport the card + header + footer still do not
       fit at the very last scroll pixel; the slide is now ≤ 40px instead of
       ~240px. */
    .woocommerce-checkout .site-main,
    .woocommerce-checkout .site-main > article {
        margin-bottom: 0;
    }

    .woocommerce-checkout .entry-content {
        padding-bottom: 0;
    }

    .woocommerce-checkout .wp-block-woocommerce-checkout {
        padding-bottom: 40px;
    }
}


/* Round 13 (new problems on the restored 820px summary, MOE-12-024/025/026/
   027/009): WooCommerce's 35% column on a 736px container left ~60px for the
   line item's text ("QA / Ticket / General", "septiembr / e"). Tablets get a
   44/56 split, the sidebar's own padding drops to 8px and the description's
   left padding to 12px; words wrap at spaces only (WooCommerce's
   word-break:break-word split "septiembre"). (0,3,0) beats WooCommerce's
   (0,2,0) container-query rules. */
@media (min-width: 784px) and (max-width: 1023px) {
    @container (min-width: 700px) {
        .wc-block-components-sidebar-layout.wc-block-checkout .wc-block-checkout__main {
            width: 56%;
            padding-right: 3%;
        }

        .wc-block-components-sidebar-layout.wc-block-checkout .wc-block-checkout__sidebar {
            width: 44%;
            padding: 8px;
        }
    }

    .wc-block-checkout__sidebar .wc-block-components-order-summary-item__description {
        padding-left: 12px;
        word-break: normal;
        overflow-wrap: break-word;
    }
}

/* Edit tickets where buyers review them, using the cart's quantity controls. */
.ts-order-summary-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.ts-order-summary-actions .ts-order-summary-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 44px;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--ts-border-focus);
    border-radius: var(--ts-radius-pill);
    background: var(--ts-gold-soft);
    color: var(--ts-gold);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.ts-order-summary-edit svg {
    flex-shrink: 0;
}

.ts-order-summary-actions .ts-order-summary-edit:hover,
.ts-order-summary-actions .ts-order-summary-edit:focus-visible {
    border-color: var(--ts-gold-hover);
    color: var(--ts-gold-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 1;
}

.ts-order-summary-actions .ts-order-summary-edit:focus-visible {
    outline: 2px solid var(--ts-gold);
    outline-offset: 3px;
}


/* ==========================================================================
   §4  ATTENDEE CARD POLISH
   Numbered badges, gold accent border, and better card hierarchy
   ========================================================================== */

/* Gold left accent on attendee cards */
.owner-info-wrap,
.tac-block-owner-info-wrap {
    border-left: 3px solid var(--ts-gold, #c9a96e);
    position: relative;
}

/* Attendee number badge */
.ts-attendee-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--ts-gold, #c9a96e);
    color: #111;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 8px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* When copy toggle is ON, visually dim non-first attendee cards */
.tac-attendee-copy-toggle__checkbox:checked ~ .owner-info-wrap:not(:first-of-type),
.owner-info-wrap.ts-copy-dimmed {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Attendee heading alignment */
.owner-info-wrap h3,
.owner-info-wrap h4,
.owner-info-wrap h5,
.tac-block-owner-info-wrap h3,
.tac-block-owner-info-wrap h4,
.tac-block-owner-info-wrap h5 {
    display: flex;
    align-items: center;
}


/* ==========================================================================
   §5  BUTTON LOADING STATE
   Spinner animation on "Ir a pagar" when clicked
   ========================================================================== */

.wc-block-components-checkout-place-order-button.ts-loading {
    pointer-events: none;
    opacity: 0.85;
    cursor: wait;
}

/* MOE-12-001: the totals are still skeleton bars (Store API pending) — the
   button must not look ready to pay. theme-checkout.php toggles the class and
   aria-disabled from the sidebar's skeleton state; the gold comes back with
   the Total. */
.wc-block-components-checkout-place-order-button.ts-totals-pending,
.wc-block-components-checkout-place-order-button.ts-totals-pending:hover {
    pointer-events: none;
    opacity: 0.55;
    cursor: wait;
    box-shadow: none;
    transform: none;
}


.ts-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(17, 17, 17, 0.3);
    border-top-color: #111;
    border-radius: 50%;
    animation: ts-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes ts-spin {
    to { transform: rotate(360deg); }
}


/* ==========================================================================
   §6  CHECKOUT SECTION STEP NUMBERS
   Add visual step number accents to checkout form sections
   ========================================================================== */

/* Counter system for checkout steps */
.wc-block-checkout__main {
    counter-reset: checkout-step;
}

.wc-block-checkout__main > .wc-block-components-checkout-step {
    counter-increment: checkout-step;
    position: relative;
    padding-left: 48px;
}

.wc-block-checkout__main > .wc-block-components-checkout-step::before {
    content: counter(checkout-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 110, 0.3);
    color: var(--ts-gold, #c9a96e);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

/* Gold left connector line between steps */
.wc-block-checkout__main > .wc-block-components-checkout-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 40px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(201, 169, 110, 0.3), transparent);
}

/* On mobile, reduce left padding */
@media (max-width: 480px) {
    .wc-block-checkout__main > .wc-block-components-checkout-step {
        padding-left: 40px;
    }

    .wc-block-checkout__main > .wc-block-components-checkout-step::before {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .wc-block-checkout__main > .wc-block-components-checkout-step:not(:last-child)::after {
        left: 13px;
        top: 36px;
    }
}


/* ==========================================================================
   §7  CHECKOUT PAGE TITLE OVERRIDE
   Replace generic page title with branded checkout heading
   ========================================================================== */

/* Hide the raw "Checkout" / "Finalizar compra" page title —
   the progress bar replaces it as the visual landmark */
.woocommerce-checkout .entry-title,
.woocommerce-checkout .page-title,
.woocommerce-checkout .wp-block-post-title {
    font-family: var(--font-headings);
    color: #fff;
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 0;
    padding-bottom: 0;
}


/* ==========================================================================
   §8  ENHANCED CART BUTTON
   Style "Finalizar compra" on the cart page as a prominent gold CTA
   ========================================================================== */

.wc-block-cart .wc-block-cart__submit-button,
.wc-block-cart .wc-block-cart__submit-button a,
.wc-block-cart .wp-block-woocommerce-proceed-to-checkout-block a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--ts-gold, #c9a96e);
    color: #111;
    font-weight: 700;
    padding: 18px 24px;
    border-radius: 6px;
    border: none;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(201, 169, 110, 0.25);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

/* MOE-1-079/220: the `.wc-block-cart` ancestor is not in the rendered DOM, so
   the rules above never matched — address the button directly (G-2-059/074). */
a.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--ts-gold, #c9a96e);
    color: #111;
    border-radius: 6px;
    padding: 18px 24px;
}

a.wc-block-cart__submit-button .wc-block-components-button__text,
.wp-block-woocommerce-proceed-to-checkout-block a .wc-block-components-button__text {
    text-decoration: none;
}

/* (kept) the label span inside the gold block */
.wc-block-cart .wc-block-cart__submit-button span,
.wc-block-cart .wc-block-cart__submit-button a span,
.wc-block-cart .wp-block-woocommerce-proceed-to-checkout-block a span,
.wc-block-cart .wc-block-cart__submit-button .wc-block-components-button__text {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wc-block-cart .wc-block-cart__submit-button:hover,
.wc-block-cart .wc-block-cart__submit-button a:hover,
.wc-block-cart .wp-block-woocommerce-proceed-to-checkout-block a:hover {
    background-color: #d4b87a;
    box-shadow: 0 6px 20px rgba(201, 169, 110, 0.35);
    transform: translateY(-1px);
    color: #111;
    text-decoration: none;
}

.wc-block-cart .wc-block-cart__submit-button:active,
.wc-block-cart .wc-block-cart__submit-button a:active,
.wc-block-cart .wp-block-woocommerce-proceed-to-checkout-block a:active {
    transform: scale(0.99);
    box-shadow: 0 2px 8px rgba(201, 169, 110, 0.2);
}


/* ==========================================================================
   §9  INPUT FIELD ANIMATION POLISH
   Subtle transitions for form interactions
   ========================================================================== */

/* Smooth slide for validation errors */
.wc-block-components-validation-error {
    animation: ts-slide-down 0.25s ease-out;
}

@keyframes ts-slide-down {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cart and checkout both load this sheet; checkout.css is checkout-only. */
body.woocommerce-cart .wc-block-cart .wc-block-components-text-input {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-text-input label,
body.woocommerce-cart .wc-block-cart .wc-block-components-text-input input:-webkit-autofill + label {
    order: -1;
    position: static;
    inset: auto;
    display: block;
    width: auto;
    max-width: none;
    margin: 0 0 8px;
    padding: 0;
    transform: none;
    overflow: visible;
    white-space: normal;
    color: #ded8cf;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
    transition: none;
    pointer-events: auto;
    cursor: pointer;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-text-input input[type],
body.woocommerce-cart .wc-block-cart .wc-block-components-text-input input[type]:focus {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 52px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #827869;
    background: var(--ts-surface-2, #211e1a);
    color: #fff;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-text-input input[type]:focus {
    border-color: var(--ts-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.25);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-text-input.has-error input[type] {
    border-color: #f18c8c;
}

/* Coupon fields share the persistent-label layout in cart and checkout. */
body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-totals-coupon__form {
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-totals-coupon__input {
    flex: 1 1 10rem;
    margin: 0;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-totals-coupon__form > button.wc-block-components-totals-coupon__button {
    align-self: flex-end;
    flex: 1 0 auto;
    min-height: 52px;
    margin-top: 0;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-totals-coupon .wc-block-components-validation-error > p {
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-validation-error > p > span {
    color: #f18c8c;
}


/* ==========================================================================
   §X  44PX TARGETS (round 12)
   ========================================================================== */

/* MOE-12-570: the saved-address card's "Editar" was plain 38×20px body text.
   Gold underlined link with a 44px hit area (negative margins keep the row
   height; WooCommerce's own rule is (0,1,0) with margin:0 0 0 auto). */
.wc-block-checkout .wc-block-components-address-card__edit {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 8px;
    margin: -8px -8px -8px auto;
    color: var(--ts-gold, #c9a96e);
    font-weight: var(--ts-fw-semibold, 600);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.wc-block-checkout .wc-block-components-address-card__edit:hover,
.wc-block-checkout .wc-block-components-address-card__edit:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

/* MOE-12-575: the coupon chip's × was a 16px target in the cart and checkout
   totals. Round 13: the remove BUTTON itself is now the 44×44 box (a pseudo-
   element hit area is invisible to the tap-target lint and to screenshots);
   the visible 16px grey circle moves onto the icon, so the glyph is unchanged.
   The chip row is 44px tall and keeps a 4px gap when chips wrap. (0,3,0)
   beats WooCommerce's `.wc-block-components-chip .…__remove` (0,2,0). */
.wc-block-cart .wc-block-components-chip,
.wc-block-checkout .wc-block-components-chip {
    min-height: 44px;
    margin-top: 0;
    margin-bottom: 4px;
}

.wc-block-cart .wc-block-components-chip .wc-block-components-chip__remove,
.wc-block-checkout .wc-block-components-chip .wc-block-components-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 50%;
    /* round-14 sweep: the theme's generic button shadow painted the transparent 44px
       circle as a dark disc that overhung the pill (with the old -8px margin) */
    box-shadow: none;
}

.wc-block-cart .wc-block-components-chip .wc-block-components-chip__remove-icon,
.wc-block-checkout .wc-block-components-chip .wc-block-components-chip__remove-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e0e0e0;
}

/* MOE-12-572: the thank-you login wall (WooCommerce's global/form-login.php,
   body.woocommerce-order-received) uses p.lost_password, and account.css is
   not enqueued there — this sheet is. */
.woocommerce-order-received .woocommerce-form-login .lost_password a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    text-underline-offset: .2em;
}