/*--------------------------------------------------------------
# TicketSystem Tango Noir — Checkout Page Styles
# Targets WooCommerce Checkout Blocks (.wc-block-*) primarily,
# with classic (.form-row) fallbacks where relevant.
--------------------------------------------------------------*/


/* ==========================================================================
   §1  SELECT / COMBOBOX DARK MODE
   WooCommerce Blocks renders country & state selects with white backgrounds.
   ========================================================================== */

/* Select containers (country, state/province) */
.wc-blocks-components-select__container,
.wc-block-components-combobox .wc-blocks-components-select__container {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
}

/* The <select> element itself */
.wc-blocks-components-select__select,
.wc-block-components-combobox select,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 16px !important;
    font-family: var(--font-body);
    font-size: 1rem;
    -webkit-appearance: none;
    appearance: none;
}

/* Select focus state */
.wc-blocks-components-select__container:focus-within {
    border-color: #c9a96e !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2) !important;
}

/* Select label */
.wc-blocks-components-select__label {
    color: var(--ts-mediumgrey-text) !important;
}

/* Select chevron/arrow icon */
.wc-blocks-components-select__expand {
    fill: #888888 !important;
    color: #888888 !important;
}

/* Fix <option> elements for native dropdowns (browser-rendered) */
.wc-blocks-components-select__select option {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

/* Order summary quantity badge (was white) */
.wc-block-components-order-summary-item__quantity {
    background-color: var(--ts-gold, #c9a96e) !important;
    color: #111111 !important;
    border-color: var(--ts-gold, #c9a96e) !important;
}


/* ==========================================================================
   §2  INPUT AFFORDANCE & VISIBILITY
   Ensure all checkout inputs are clearly visible against the dark theme.
   ========================================================================== */

/* Blocks checkout inputs */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea,
.wc-block-checkout .wc-block-components-combobox .components-combobox-control input,
.wc-block-checkout select,
.wc-block-checkout .wc-block-components-select-input select,
.wc-block-checkout .wc-block-components-country-input input,
.wc-block-checkout .wc-block-components-state-input input {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Tickera inputs inside checkout */
.wc-block-checkout .tc-wb-block-component input,
.wc-block-checkout .owner-info-wrap input,
.wc-block-checkout .tac-block-owner-info-wrap input {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Focus state — Gold highlight */
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-text-input textarea:focus,
.wc-block-checkout .wc-block-components-combobox .components-combobox-control input:focus,
.wc-block-checkout select:focus,
.wc-block-checkout .tc-wb-block-component input:focus,
.wc-block-checkout .owner-info-wrap input:focus,
.wc-block-checkout .tac-block-owner-info-wrap input:focus {
    border-color: #c9a96e !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    outline: none !important;
}

/* Labels inside Blocks text inputs (animated floating labels) */
.wc-block-checkout .wc-block-components-text-input label {
    color: var(--ts-mediumgrey-text) !important;
}

.wc-block-checkout .wc-block-components-text-input.is-active label {
    color: #c9a96e !important;
}

/* Fix 1: Float labels when input has a value (not just on :focus) */
.wc-block-checkout .wc-block-components-text-input:not(.is-active) input:not(:placeholder-shown)+label {
    transform: translateY(-50%) scale(0.8) !important;
    color: var(--ts-mediumgrey-text) !important;
    pointer-events: none;
}

/* Float label for combobox/select containers that have a value */
.wc-block-checkout .wc-block-components-combobox.is-active label,
.wc-block-checkout .wc-block-components-combobox.has-value label,
.wc-block-checkout .wc-blocks-components-select__container.has-value .wc-blocks-components-select__label {
    transform: translateY(-50%) scale(0.8) !important;
    pointer-events: none;
}

/* Classic checkout fallback */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row select {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: #c9a96e !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2) !important;
    outline: none !important;
}


/* ==========================================================================
   §3  FIX GLUED SIDE-BY-SIDE FIELDS
   Ensure proper spacing between side-by-side fields like Nombre / Apellido.
   ========================================================================== */

/* Blocks address form uses internal flex — add gap */
.wc-block-components-address-form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.wc-block-components-address-form>* {
    margin-bottom: 0 !important;
    /* gap handles spacing */
}

/* Half-width fields should use calc to account for the gap */
.wc-block-components-address-form .wc-block-components-address-form__first_name,
.wc-block-components-address-form .wc-block-components-address-form__last_name {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 140px;
}

/* Tickera attendee form rows */
.owner-info-wrap .wc-block-components-text-input,
.tac-block-owner-info-wrap .wc-block-components-text-input,
.owner-info-wrap .tc-wb-block-component,
.tac-block-owner-info-wrap .tc-wb-block-component {
    margin-bottom: 20px;
}

/* Classic checkout fallback */
.woocommerce-checkout .form-row {
    margin-bottom: 20px;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: calc(50% - 8px) !important;
}

.woocommerce-checkout .form-row-first {
    margin-right: 15px !important;
}


/* ==========================================================================
   §4  TICKERA ATTENDEE UI POLISH
   Wrap each participant block in a distinct card with subtle gold accent.
   ========================================================================== */

/* Participant cards */
.owner-info-wrap,
.tac-block-owner-info-wrap,
.tc-attendee-info,
.tc-owner-info {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(201, 169, 110, 0.3) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}

/* Participant heading inside card */
.owner-info-wrap h3,
.owner-info-wrap h4,
.tac-block-owner-info-wrap h3,
.tac-block-owner-info-wrap h4,
.tc-attendee-info h3,
.tc-owner-info h3 {
    color: #ffffff;
    font-family: var(--font-headings);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(201, 169, 110, 0.15);
}

/* "Usar los datos del primer participante para el resto" checkbox alignment */
.owner-info-wrap label:has(input[type="checkbox"]),
.tac-block-owner-info-wrap label:has(input[type="checkbox"]),
[class*="tc-"] label:has(input[type="checkbox"]),
.wc-block-checkout label:has(input[type="checkbox"]) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #c9a96e !important;
    cursor: pointer;
}

.owner-info-wrap input[type="checkbox"],
.tac-block-owner-info-wrap input[type="checkbox"],
[class*="tc-"] input[type="checkbox"] {
    margin: 0 !important;
    width: 18px;
    height: 18px;
    accent-color: #c9a96e;
    flex-shrink: 0;
}

/* If the checkbox and label are siblings (not nested) */
.owner-info-wrap>input[type="checkbox"],
.tac-block-owner-info-wrap>input[type="checkbox"] {
    margin: 0 !important;
}

.owner-info-wrap>input[type="checkbox"]+label,
.tac-block-owner-info-wrap>input[type="checkbox"]+label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #c9a96e !important;
    cursor: pointer;
}

/* Fix 4B: Prevent distortion on the attendee copy toggle label */
.tac-attendee-copy-toggle__heading {
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 500;
    color: #c9a96e !important;
    line-height: 1.4;
}

.tac-attendee-copy-toggle__label {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   §5  MERCADO PAGO DARK MODE OVERRIDE
   Force the MP payment container into dark mode to match theme.
   ========================================================================== */

/* Blocks checkout — payment method content area */
.wc-block-checkout .wc-block-components-radio-control__option-content,
.wc-block-checkout .wc-block-components-payment-method-icons,
.wc-block-checkout .wc-block-components-radio-control-accordion-content {
    background-color: #1a1a1a !important;
    color: #cccccc !important;
    border-color: #333333 !important;
}

/* Target MP-specific containers aggressively */
.payment_method_mercado_pago,
.mp-checkout-container,
.mp-checkout-custom-container,
[class*="mercado-pago"],
[class*="mercadopago"],
.cho-container {
    background-color: #1a1a1a !important;
    color: #cccccc !important;
}

.payment_method_mercado_pago *,
.mp-checkout-container *,
.mp-checkout-custom-container *,
[class*="mercado-pago"] *,
[class*="mercadopago"] * {
    color: #cccccc !important;
    border-color: #333333 !important;
}

/* Fix iframes and embedded MP containers */
.payment_method_mercado_pago input,
.mp-checkout-container input,
.mp-checkout-custom-container input,
[class*="mercadopago"] input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
}

/* Classic checkout payment box (fallback) */
#payment div.payment_box {
    background-color: #1a1a1a !important;
    color: #cccccc !important;
}

/* Triangle pointer fix (classic) */
#payment div.payment_box::before {
    border-bottom-color: #1a1a1a !important;
    border-color: transparent transparent #1a1a1a transparent !important;
}

/* Blocks radio option layout — ensure no white leaks */
.wc-block-checkout .wc-block-components-radio-control__option {
    background-color: transparent !important;
    border-color: #333333 !important;
}

.wc-block-checkout .wc-block-components-radio-control__option:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Radio button styling */
.wc-block-checkout .wc-block-components-radio-control__input {
    accent-color: #c9a96e;
}

/* ── Mercado Pago Checkout Pro specific containers ── */
/* These are the exact classes from the live DOM that cause the white box */
.mp-checkout-pro-container,
.mp-checkout-pro-content {
    background-color: #1a1a1a !important;
    color: #cccccc !important;
    border: 1px solid #333333 !important;
    border-radius: 6px !important;
}

.mp-checkout-pro-content * {
    color: #cccccc !important;
}

.mp-checkout-pro-content h3,
.mp-checkout-pro-content h4,
.mp-checkout-pro-content p,
.mp-checkout-pro-content span,
.mp-checkout-pro-content div {
    color: #cccccc !important;
    background-color: transparent !important;
}

/* MP heading "Descubre la practicidad de Mercado Pago" */
.mp-checkout-pro-content .mp-checkout-pro-header,
.mp-checkout-pro-content .mp-checkout-pro-title,
.mp-checkout-pro-content [class*="title"],
.mp-checkout-pro-content [class*="header"] {
    color: var(--ts-mediumgrey-text) !important;
    background-color: transparent !important;
}

/* MP payment icons row */
.mp-checkout-pro-content .mp-checkout-pro-payment-methods,
.mp-checkout-pro-content [class*="payment-method"],
.mp-checkout-pro-content [class*="icon"] {
    background-color: transparent !important;
}

/* MP feature items / benefits */
.mp-checkout-pro-content .mp-checkout-pro-feature,
.mp-checkout-pro-content [class*="feature"],
.mp-checkout-pro-content [class*="benefit"] {
    background-color: transparent !important;
    color: #aaaaaa !important;
}

/* Fix 6: MP list item alignment — icons stay left, text wraps beside them */
.mp-checkout-pro-content li,
.mp-checkout-pro-content .mp-checkout-pro-feature,
.mp-checkout-pro-content [class*="feature"],
.mp-checkout-pro-content [class*="benefit"] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.mp-checkout-pro-content li svg,
.mp-checkout-pro-content li img,
.mp-checkout-pro-content [class*="feature"] svg,
.mp-checkout-pro-content [class*="feature"] img,
.mp-checkout-pro-content [class*="benefit"] svg,
.mp-checkout-pro-content [class*="benefit"] img {
    flex-shrink: 0 !important;
    width: 24px;
    height: 24px;
}


/* ==========================================================================
   §6  MOBILE CLEANUP
   Hide redundant expanded order table on mobile; keep total + CTA visible.
   Fix 2: Hide the duplicate bottom totals block entirely on ≤1024px.
   ========================================================================== */

@media (max-width: 1024px) {

    /* Fix 2: Hide entire sidebar on mobile/tablet — the accordion already shows the summary */
    .wc-block-checkout__sidebar {
        display: none !important;
    }

    /* Classic checkout fallback */
    .woocommerce-checkout-review-order-table {
        display: none !important;
    }

    /* Full width layout for checkout on mobile/tablet */
    .wc-block-checkout__main {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Make columns stack */
    .wc-block-checkout {
        flex-direction: column !important;
    }
}

/* Hide WhatsApp FAB on checkout — overlaps form inputs */
.woocommerce-checkout #ht-ctc-chat,
.woocommerce-checkout .joinchat,
.woocommerce-checkout .wa-chat-widget,
.woocommerce-checkout [id*="whatsapp"],
.woocommerce-checkout [class*="whatsapp"],
.woocommerce-checkout .floating-wpp,
.woocommerce-checkout #nta-wa-chat-button,
.woocommerce-checkout .nta-wa-btn,
body.woocommerce-checkout #ht-ctc-chat,
body.woocommerce-checkout .joinchat,
body.woocommerce-checkout [id*="whatsapp"],
body.woocommerce-checkout [class*="whatsapp"] {
    display: none !important;
}

/* Remove dead space in order summary sidebar */
.wc-block-checkout__sidebar {
    padding: 16px !important;
}

.wc-block-checkout__sidebar .wc-block-components-panel {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Billing fields — more breathing room */
.wc-block-components-address-form>* {
    margin-bottom: 4px !important;
}

/* ── FIX 2: Stack name fields vertically on narrow mobile ── */
@media (max-width: 480px) {

    /* Billing & shipping Nombre / Apellido → full-width stack */
    .wc-block-components-address-form .wc-block-components-address-form__first_name,
    .wc-block-components-address-form .wc-block-components-address-form__last_name {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* Tickera participant Nombre / Apellido → full-width stack */
    .owner-info-wrap .wc-block-components-text-input,
    .tac-block-owner-info-wrap .wc-block-components-text-input,
    .owner-info-wrap .tc-wb-block-component,
    .tac-block-owner-info-wrap .tc-wb-block-component {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Billing city / region / postal code — full-width stack */
    .wc-block-components-address-form .wc-block-components-address-form__city,
    .wc-block-components-address-form .wc-block-components-address-form__state,
    .wc-block-components-address-form .wc-block-components-address-form__postcode,
    .wc-block-components-address-form .wc-block-components-address-form__phone {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
}

/* ── FIX 3: Prevent dropdown text truncation ── */
.wc-block-components-combobox .components-combobox-control input,
.wc-block-components-combobox .wc-blocks-components-select__container,
.wc-block-components-state-input .wc-blocks-components-select__container {
    min-width: 0 !important;
    width: 100% !important;
}

.wc-blocks-components-select__select {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding-right: 32px !important;
}


/* ==========================================================================
   §7  PLACE ORDER CTA — "REALIZAR EL PEDIDO" / "IR A PAGAR"
   Full-width gold button with premium dark text.
   ========================================================================== */

/* Blocks Place Order button */
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button.wc-block-components-button {
    width: 100% !important;
    background-color: #c9a96e !important;
    color: #111111 !important;
    font-weight: 700 !important;
    padding: 18px 0 !important;
    border-radius: 6px !important;
    border: none !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-top: 24px !important;
    box-shadow: 0 4px 12px rgba(201, 169, 110, 0.25) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease !important;
}

.wc-block-components-checkout-place-order-button:hover {
    background-color: #d4b87a !important;
    box-shadow: 0 6px 20px rgba(201, 169, 110, 0.35) !important;
    transform: translateY(-1px) !important;
}

.wc-block-components-checkout-place-order-button:active {
    transform: scale(0.99) !important;
    box-shadow: 0 2px 8px rgba(201, 169, 110, 0.2) !important;
}

/* Classic checkout Place Order button */
#place_order {
    width: 100% !important;
    background-color: #c9a96e !important;
    color: #111111 !important;
    font-weight: 700 !important;
    padding: 18px 0 !important;
    border-radius: 6px !important;
    border: none !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    margin-top: 24px !important;
    box-shadow: 0 4px 12px rgba(201, 169, 110, 0.25) !important;
}

/* "Editar entradas" link — visible gold outline secondary action
   Matched vertical padding (18px) to "Realizar el Pedido" CTA */
.wc-block-components-checkout-return-to-cart-button,
a.wc-block-components-checkout-return-to-cart-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    color: #c9a96e !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    margin-top: 14px !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(201, 169, 110, 0.4) !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease !important;
}

.wc-block-components-checkout-return-to-cart-button:hover {
    color: #ffffff !important;
    border-color: #c9a96e !important;
    background-color: rgba(201, 169, 110, 0.1) !important;
    text-decoration: none !important;
}

/* Center the actions row (Place Order + Return to Cart) */
.wc-block-checkout__actions_row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

.wc-block-checkout__actions {
    width: 100% !important;
}


/* ==========================================================================
   §8  PAYMENT SECTION VISUAL REORDER (Desktop)
   On wide screens, reorder payment visually so it sits under order summary.
   ========================================================================== */

@media (min-width: 769px) {
    .wc-block-checkout {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .wc-block-checkout__main {
        order: 1 !important;
    }

    .wc-block-checkout__sidebar {
        order: 2 !important;
    }

    /* Push the payment method step visually to appear last in left column */
    .wp-block-woocommerce-checkout-payment-block {
        order: 99 !important;
    }
}


/* ==========================================================================
   §9  GENERAL CHECKOUT POLISH
   Misc tweaks for overall feel and consistency.
   ========================================================================== */

/* Section headings inside checkout */
.wc-block-checkout .wc-block-components-checkout-step__heading {
    color: #ffffff !important;
    font-family: var(--font-headings);
    font-weight: 600;
}

/* Step container cards */
.wc-block-checkout .wc-block-components-checkout-step {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.wc-block-checkout .wc-block-components-checkout-step:last-child {
    border-bottom: none;
}

/* Order summary sidebar card */
.wc-block-checkout__sidebar {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 24px;
}

/* Totals in sidebar */
.wc-block-components-totals-wrapper {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.wc-block-components-totals-item__value {
    color: var(--ts-gold) !important;
    font-weight: 700;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.25rem !important;
}

/* Radio control labels (payment methods) */
.wc-block-components-radio-control__label {
    color: #ffffff !important;
}

.wc-block-components-radio-control__secondary-label {
    color: var(--ts-mediumgrey-text) !important;
}

/* Error messages styling */
.wc-block-components-validation-error {
    color: var(--ts-danger) !important;
    font-size: 0.85rem;
    margin-top: 4px;
}


/* ==========================================================================
   §10  TEXT OVERFLOW ELLIPSIS (Fix 5)
   Long values truncate gracefully with an ellipsis instead of hard-clipping.
   ========================================================================== */

.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout select,
.wc-block-checkout .wc-block-components-combobox .components-combobox-control input,
.wc-block-checkout .wc-block-components-select-input select,
.wc-block-checkout .wc-block-components-country-input input,
.wc-block-checkout .wc-block-components-state-input input {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}