/*
Theme Name: Mercomax Motors Theme
Theme URI: https://mercomaxmotors.pe
Author: EduardoDev & Nouquit
Description: Tema personalizado para Mercomax Motors - E-commerce.
Version: 1.0
Text Domain: mercomax-motors
*/

/* Base Styles & Variables */
:root {
    --primary: #EE8722;
    --primary-dark: #d67610;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix for WordPress Header overlap when admin bar is active */
.admin-bar #main-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar #main-header {
        top: 46px !important;
    }
}

/* Utilities: no-scrollbar — written as plain CSS (Tailwind CDN does not process @layer) */
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
}

.no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Specific component overrides for WordPress hierarchy */
#main-header a {
    text-decoration: none;
}

/* Custom logo size */
.custom-logo-link img {
    height: 2.5rem;
    width: auto;
}

@media (min-width: 768px) {
    .custom-logo-link img {
        height: 3.5rem;
    }
}

/* Product Card Title Clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Force Montserrat headings, strong tags, and heavy weight classes to have weight 700 globally */
.font-montserrat,
.font-black,
.font-extrabold,
strong,
b,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700 !important;
}

/* WooCommerce Premium Notices overrides */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    margin: 1.5rem auto !important;
    padding: 1rem 1.5rem 1rem 3.5rem !important;
    border-radius: 5px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    list-style: none !important;
    display: block !important;
    position: relative !important;
    max-width: 80rem !important;
    /* matches max-w-7xl */
    width: 100% !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid transparent !important;
    font-family: 'Montserrat', sans-serif !important;
}

@media (min-width: 768px) {

    .woocommerce-error,
    .woocommerce-message,
    .woocommerce-info {
        padding: 1rem 1.5rem 1rem 4rem !important;
    }
}

.woocommerce-error {
    background-color: #FEF2F2 !important;
    border-color: #FCA5A5 !important;
    color: #991B1B !important;
    border-left: 5px solid #EF4444 !important;
}

.woocommerce-message {
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
    color: #065F46 !important;
    border-left: 5px solid #10B981 !important;
}

.woocommerce-info {
    background-color: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: #1E40AF !important;
    border-left: 5px solid #3B82F6 !important;
}

/* Remove default WooCommerce list styling inside error notices */
.woocommerce-error li {
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
}

.woocommerce-error li:last-child {
    margin-bottom: 0 !important;
}

.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    /* Required for FA Solid, DO NOT CHANGE */
    font-size: 1.25rem !important;
    position: absolute !important;
    left: 1.25rem !important;
    top: 1rem !important;
    display: block !important;
}

.cart-empty.woocommerce-info {
    display: none !important;
}

.woocommerce-error::before {
    content: "\f057" !important;
    /* fa-circle-xmark */
    color: #EF4444 !important;
}

.woocommerce-message::before {
    content: "\f058" !important;
    /* fa-circle-check */
    color: #10B981 !important;
}

.woocommerce-info::before {
    content: "\f05a" !important;
    /* fa-circle-info */
    color: #3B82F6 !important;
}

/* Clean up standard WooCommerce notice buttons */
.woocommerce-error a.button,
.woocommerce-message a.button,
.woocommerce-info a.button {
    background-color: transparent !important;
    color: inherit !important;
    border: 2px solid currentColor !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 5px !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    margin-left: auto !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    position: absolute !important;
    right: 1.5rem !important;
    top: 0.75rem !important;
}

/* WooCommerce Shipping Radio Buttons Alignment */
.woocommerce-shipping-methods li {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.woocommerce-shipping-methods input[type="radio"] {
    margin: 0 !important;
    vertical-align: middle !important;
    transform: translateY(-1px) !important;
}

.woocommerce-error a.button:hover,
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
    background-color: currentColor !important;
    color: #fff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Hide standard WooCommerce "added_to_cart" link automatically appended next to add-to-cart buttons */
.added_to_cart.wc-forward {
    display: none !important;
}

/* ==========================================================================
   Catalog Grid / List View Custom Responsive Styling
   ========================================================================== */

/* 1. Grid View Defaults */
#mercomax-catalog-wrapper.grid-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 768px) {
    #mercomax-catalog-wrapper.grid-view {
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    #mercomax-catalog-wrapper.grid-view {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 2. List View Layouts */
#mercomax-catalog-wrapper.list-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#mercomax-catalog-wrapper.list-view .mercomax-product-card {
    flex-direction: row !important;
    align-items: center !important;
}

#mercomax-catalog-wrapper.list-view .mercomax-product-card-img {
    width: 35% !important;
    aspect-ratio: 1 / 1 !important;
    border-bottom: 0px !important;
    border-right: 1px solid #f3f4f6 !important;
    padding: 1rem !important;
    flex-shrink: 0 !important;
}

@media (min-width: 768px) {
    #mercomax-catalog-wrapper.list-view .mercomax-product-card-img {
        width: 25% !important;
    }
}

@media (min-width: 1024px) {
    #mercomax-catalog-wrapper.list-view .mercomax-product-card-img {
        width: 20% !important;
    }
}

#mercomax-catalog-wrapper.list-view .mercomax-product-card-content {
    flex-direction: column !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
    width: 65% !important;
    padding: 1.25rem !important;
    min-height: 100% !important;
}

@media (min-width: 768px) {
    #mercomax-catalog-wrapper.list-view .mercomax-product-card-content {
        flex-direction: row !important;
        align-items: center !important;
        width: 75% !important;
        gap: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    #mercomax-catalog-wrapper.list-view .mercomax-product-card-content {
        width: 80% !important;
        gap: 2.5rem !important;
    }
}

/* 3. Inside content split in list-view */
#mercomax-catalog-wrapper.list-view .mercomax-card-details {
    flex-grow: 1 !important;
}

#mercomax-catalog-wrapper.list-view .mercomax-card-details a {
    font-size: 1.125rem !important;
    line-height: 1.35 !important;
}

@media (max-width: 767px) {
    #mercomax-catalog-wrapper.list-view .mercomax-card-details a {
        font-size: 0.95rem !important;
    }
}

#mercomax-catalog-wrapper.list-view .mercomax-card-buy-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    border-top: 1px dashed #f3f4f6 !important;
    padding-top: 0.75rem !important;
    margin-top: 0.5rem !important;
}

@media (min-width: 768px) {
    #mercomax-catalog-wrapper.list-view .mercomax-card-buy-section {
        width: 220px !important;
        border-top: 0 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        align-items: stretch !important;
    }
}

#mercomax-catalog-wrapper.list-view .mercomax-product-card-price {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

@media (min-width: 768px) {
    #mercomax-catalog-wrapper.list-view .mercomax-product-card-price {
        justify-content: flex-end !important;
        margin-top: 1.5rem !important;
    }
}

#mercomax-catalog-wrapper.list-view .mercomax-product-card-actions {
    width: 100% !important;
}

#mercomax-catalog-wrapper.list-view .mercomax-product-card-actions .button,
#mercomax-catalog-wrapper.list-view .mercomax-product-card-actions a.button,
#mercomax-catalog-wrapper.list-view .mercomax-product-card-actions a.add_to_cart_button {
    font-size: 0.75rem !important;
    padding: 0.65rem 1rem !important;
}

/* ==========================================================================
   Cart Page Premium Custom Styling (React Style)
   ========================================================================== */

/* WooCommerce Checkout Button Premium Overrides */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 3.5rem !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 5px !important;
    box-shadow: 0 10px 15px -3px rgba(238, 135, 34, 0.2), 0 4px 6px -2px rgba(238, 135, 34, 0.1) !important;
    transition: all 0.2s ease-in-out !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    border: 0 !important;
    margin-top: 1rem !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--primary-dark) !important;
    box-shadow: 0 20px 25px -5px rgba(238, 135, 34, 0.3), 0 10px 10px -5px rgba(238, 135, 34, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* Radio inputs customization in Shipping */
ul#shipping_method {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

ul#shipping_method li {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    cursor: pointer !important;
    position: relative !important;
}

/* Custom radio indicator circles — pure CSS approach for reliability */
/* The sr-only input is visually hidden but functional */
ul#shipping_method li input.shipping_method.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* Outer circle — default state */
ul#shipping_method .mercomax-radio-outer {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 3px !important;
    transition: border-color 0.2s ease !important;
}

/* Inner dot — default state (hidden) */
ul#shipping_method .mercomax-radio-inner {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: var(--primary) !important;
    transform: scale(0) !important;
    transition: transform 0.2s ease !important;
}

/* Checked state — outer border turns primary */
ul#shipping_method li input.shipping_method:checked~label .mercomax-radio-outer {
    border-color: var(--primary) !important;
}

/* Checked state — inner dot scales in */
ul#shipping_method li input.shipping_method:checked~label .mercomax-radio-inner {
    transform: scale(1) !important;
}

/* Label text styling */
ul#shipping_method li label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    cursor: pointer !important;
    flex: 1 !important;
    font-family: 'Montserrat', sans-serif !important;
    text-indent: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul#shipping_method li label .mercomax-shipping-label-text {
    font-size: 0.8125rem !important;
    /* matches standard text-xs/sm size */
    font-weight: 500 !important;
    color: #475569 !important;
    transition: color 0.2s ease !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
}

ul#shipping_method li:hover label .mercomax-shipping-label-text {
    color: #0f172a !important;
}

ul#shipping_method li input.shipping_method:checked~label .mercomax-shipping-label-text {
    color: #0f172a !important;
    font-weight: 600 !important;
}

ul#shipping_method li label .mercomax-shipping-label-cost {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    /* Prevent cost from wrapping */
    margin-left: 1.5rem !important;
    /* Separation space */
}

/* Content wrapper — text on left, cost on right */
ul#shipping_method li label .mercomax-shipping-label-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex: 1 !important;
}

/* Hide the native WooCommerce shipping calculator on cart */
.woocommerce-shipping-calculator {
    display: none !important;
}

/* Cart Item Layout, Titles, and miniatures */
.woocommerce-cart-form__cart-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
}

.woocommerce-cart-form__cart-item dl.variation {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-top: 0.25rem !important;
    font-size: 0.75rem !important;
    color: #64748b !important;
    /* text-slate-500 */
    border-left: 0 !important;
    padding-left: 0 !important;
}

.woocommerce-cart-form__cart-item dl.variation dt {
    font-weight: 500 !important;
    margin: 0 !important;
}

.woocommerce-cart-form__cart-item dl.variation dd {
    font-weight: 600 !important;
    color: #334155 !important;
    /* text-slate-700 */
    margin: 0 0.5rem 0 0 !important;
    padding: 0 !important;
}

/* Hide default shop table on cart page to use custom visual layout */
.woocommerce-cart table.shop_table {
    display: none !important;
}

/* Success and Error notices adjustment */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error {
    margin-bottom: 2rem !important;
}

/* Custom grid classes for WooCommerce Cart Shortcode page to bypass Tailwind limits */
@media (min-width: 768px) {
    .md\:hidden {
        display: none !important;
    }

    .md\:block {
        display: block !important;
    }

    /* Clean remove button styling to prevent WooCommerce style overrides */
    .woocommerce-cart-form__cart-item a.remove {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        color: #94a3b8 !important;
        /* slate-400 */
        font-size: 0 !important;
        text-decoration: none !important;
        border: 0 !important;
        transition: color 0.2s ease-in-out !important;
    }

    .woocommerce-cart-form__cart-item a.remove:hover {
        color: #ef4444 !important;
        /* red-500 */
    }

    .woocommerce-cart-form__cart-item a.remove svg {
        width: 20px !important;
        height: 20px !important;
        display: block !important;
    }
}

/* Strip default WooCommerce styles from cart totals container to eliminate double border/card look */
.cart_totals {
    float: none !important;
    width: 100% !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.woocommerce-cart .cart-collaterals {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    float: none !important;
}

/* Hide WooCommerce cross-sells in the cart collaterals */
.woocommerce-cart .cross-sells {
    display: none !important;
}

/* Ensure the Totales box matches React: bg-gray-50/50, border-2 border-slate-100, rounded-xl */
.woocommerce-cart .cart_totals>div {
    background-color: rgba(249, 250, 251, 0.5) !important;
    /* bg-gray-50/50 */
    border: 2px solid #f1f5f9 !important;
    /* border-slate-100 */
    border-radius: 12px !important;
    /* rounded-xl */
    padding: 1.5rem !important;
    /* p-6 */
    box-shadow: none !important;
}

@media (min-width: 768px) {
    .woocommerce-cart .cart_totals>div {
        padding: 2rem !important;
        /* md:p-8 */
    }
}

/* Cart totals headings */
.woocommerce-cart .cart_totals h2 {
    font-size: 1.25rem !important;
    /* text-xl */
    font-weight: 700 !important;
    /* font-bold */
    color: #0f172a !important;
    /* text-slate-900 */
    margin-bottom: 1.5rem !important;
    /* mb-6 */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    /* tracking-wide */
    border-bottom: 2px solid #e2e8f0 !important;
    /* border-b-2 border-slate-200 */
    padding-bottom: 1rem !important;
    /* pb-4 */
}

/* Subtotal row */
.woocommerce-cart .cart_totals .cart-subtotal,
.woocommerce-cart .cart_totals .order-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border: 0 !important;
}

/* Amount text inside totals */
.woocommerce-cart .cart_totals .woocommerce-Price-amount {
    font-family: 'Montserrat', sans-serif !important;
}

/* Shipping section within totals - hide default WooCommerce table structure */
.woocommerce-cart .cart_totals table {
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.woocommerce-cart .cart_totals table tr {
    display: block !important;
    border: 0 !important;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.woocommerce-cart .cart_totals table tbody,
.woocommerce-cart .cart_totals table thead,
.woocommerce-cart .cart_totals table tfoot {
    display: block !important;
}

/* Checkout button — override WooCommerce defaults to ensure only our custom button styles apply */
.woocommerce-cart .wc-proceed-to-checkout {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

.woocommerce-cart .wc-proceed-to-checkout a {
    text-decoration: none !important;
}

/* ==========================================================================
   WOOCOMMERCE CHECKOUT STYLES
   ========================================================================== */
/* ==========================================================================
   WOOCOMMERCE CHECKOUT STYLES (PREMIUM OVERRIDES)
   ========================================================================== */

/* Modern Grid Layout for Billing & Shipping Fields */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
}

@media (min-width: 768px) {

    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .woocommerce-billing-fields__field-wrapper .form-row-wide,
    .woocommerce-shipping-fields__field-wrapper .form-row-wide {
        grid-column: span 2 !important;
    }
}

.woocommerce-checkout .form-row {
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
}

.woocommerce-checkout .form-row label {
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.8125rem !important;
    /* matches text-xs/sm */
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.woocommerce-checkout .form-row label .required {
    color: #ef4444 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

/* Premium Inputs, Selects and Textareas (Identical to React) */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-selection--single {
    width: 100% !important;
    height: 48px !important;
    padding: 0 1rem !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
    outline: none !important;
}

.woocommerce-checkout textarea {
    height: 120px !important;
    padding: 0.75rem 1rem !important;
}

.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout input[type="password"]:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout .select2-container--open .select2-selection--single {
    border-color: var(--primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(238, 135, 34, 0.1) !important;
}

/* Fix for Select2 wrappers in WooCommerce */
.woocommerce-checkout .select2-container {
    width: 100% !important;
}

.woocommerce-checkout .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
    padding-left: 0 !important;
    color: #0f172a !important;
    font-weight: 500 !important;
}

.woocommerce-checkout .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
    right: 8px !important;
}

/* Premium Card-based Payment Methods (React Style) */
.woocommerce-checkout #payment {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 0 !important;
    padding: 0 !important;
    margin: 0 0 1.5rem 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    padding: 1.25rem !important;
    transition: all 0.2s ease-in-out !important;
    margin-bottom: 0 !important;
}

/* checked state styles (card highlight) using :has() for premium look */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input[type="radio"]:checked) {
    border-color: var(--primary) !important;
    background-color: rgba(238, 135, 34, 0.03) !important;
}

/* Custom premium radio button */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 50% !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    margin: 0 0.75rem 0 0 !important;
    float: none !important;
    vertical-align: middle !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"]:checked {
    border-color: var(--primary) !important;
    background-color: #ffffff !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"]:checked::before {
    content: "" !important;
    width: 0.625rem !important;
    height: 0.625rem !important;
    background-color: var(--primary) !important;
    border-radius: 50% !important;
    display: block !important;
}

/* Branding support for specific Peru payment methods: Yape & Plin */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_yape:has(input[type="radio"]:checked) {
    border-color: #742284 !important;
    background-color: rgba(116, 34, 132, 0.03) !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_yape input[type="radio"]:checked {
    border-color: #742284 !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_yape input[type="radio"]:checked::before {
    background-color: #742284 !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_plin:has(input[type="radio"]:checked) {
    border-color: #00D8CC !important;
    background-color: rgba(0, 216, 204, 0.03) !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_plin input[type="radio"]:checked {
    border-color: #00D8CC !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_plin input[type="radio"]:checked::before {
    background-color: #00D8CC !important;
}

/* Label alignment inside payment methods */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method>label {
    display: inline-flex !important;
    align-items: center !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    color: #0f172a !important;
    cursor: pointer !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method img {
    margin-left: 0.5rem !important;
    max-height: 24px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Payment box details description */
.woocommerce-checkout #payment div.payment_box {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
    color: #475569 !important;
    margin-top: 0.75rem !important;
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none !important;
}

/* Review order table in checkout */
.woocommerce-checkout table.shop_table {
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    background-color: transparent !important;
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
    display: block !important;
}

.woocommerce-checkout table.shop_table thead,
.woocommerce-checkout table.shop_table tbody,
.woocommerce-checkout table.shop_table tfoot {
    display: block !important;
    width: 100% !important;
}

.woocommerce-checkout table.shop_table tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #f1f5f9 !important;
    /* Unified border on row container */
}

.woocommerce-checkout table.shop_table tr th,
.woocommerce-checkout table.shop_table tr td {
    border: none !important;
    /* Remove individual cell borders to prevent misalignments */
    color: #475569 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.875rem !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* For non-shipping rows, keep standard cells behaving as block elements in flex container */
.woocommerce-checkout table.shop_table tr:not(.shipping) th,
.woocommerce-checkout table.shop_table tr:not(.shipping) td {
    display: block !important;
    padding: 1.5rem 0 !important;
    /* Generous vertical spacing */
    box-sizing: border-box !important;
}

/* First child of any standard row (label/name) */
.woocommerce-checkout table.shop_table tr:not(.shipping)>*:first-child {
    text-align: left !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    padding-right: 1.5rem !important;
    /* Elegant space to prevent collision with value/price */
}

/* Last child of any standard row (price/value) */
.woocommerce-checkout table.shop_table tr:not(.shipping)>*:last-child {
    text-align: right !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    /* Prevent price wrapping */
}

.woocommerce-checkout table.shop_table thead th {
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    /* text-xs */
    font-weight: 700 !important;
    color: #64748b !important;
    /* slate-500 */
    letter-spacing: 0.05em !important;
    padding-bottom: 1rem !important;
}

.woocommerce-checkout table.shop_table .product-name {
    font-weight: 500 !important;
    color: #1e293b !important;
    vertical-align: middle !important;
    text-align: left !important;
}

.woocommerce-checkout table.shop_table .mercomax-product-title {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.6 !important;
}

.woocommerce-checkout table.shop_table .mercomax-product-meta {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    /* slate-500 */
    margin-top: 0.35rem !important;
}

.woocommerce-checkout table.shop_table .product-total {
    font-weight: 700 !important;
    color: #0f172a !important;
    text-align: right !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9375rem !important;
}

.woocommerce-checkout table.shop_table .cart-subtotal th {
    font-weight: 600 !important;
    color: #334155 !important;
    font-family: 'Manrope', sans-serif !important;
}

.woocommerce-checkout table.shop_table .cart-subtotal td {
    font-weight: 700 !important;
    color: #0f172a !important;
    text-align: right !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9375rem !important;
}

/* Shipping row premium block layout to prevent squishing and ensure perfect column distribution */
.woocommerce-checkout table.shop_table tr.shipping {
    display: block !important;
    /* Stack vertically for beautiful card-like alignment */
    padding: 1.5rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout table.shop_table tr.shipping th {
    display: block !important;
    border-bottom: none !important;
    padding: 0 0 1rem 0 !important;
    width: 100% !important;
    font-weight: 600 !important;
    color: #334155 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: left !important;
}

.woocommerce-checkout table.shop_table tr.shipping td {
    display: block !important;
    border-bottom: none !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: left !important;
}

.woocommerce-checkout table.shop_table tr.shipping td ul#shipping_method {
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.875rem !important;
    /* Elegant spacing between shipping options */
}

/* Premium shipping option items */
.woocommerce-checkout table.shop_table tr.shipping td ul#shipping_method li {
    display: flex !important;
    align-items: center !important;
    padding: 0.875rem 1rem !important;
    background-color: #f8fafc !important;
    /* Soft card background */
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
}

.woocommerce-checkout table.shop_table tr.shipping td ul#shipping_method li:hover {
    border-color: var(--primary) !important;
    background-color: rgba(238, 135, 34, 0.02) !important;
}

.woocommerce-checkout table.shop_table tr.shipping td ul#shipping_method li:has(input[type="radio"]:checked) {
    border-color: var(--primary) !important;
    background-color: rgba(238, 135, 34, 0.04) !important;
}

/* Premium custom radio buttons for shipping methods */
.woocommerce-checkout table.shop_table tr.shipping td ul#shipping_method li input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 50% !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    margin: 0 0.875rem 0 0 !important;
    flex-shrink: 0 !important;
    background-color: #ffffff !important;
}

.woocommerce-checkout table.shop_table tr.shipping td ul#shipping_method li input[type="radio"]:checked {
    border-color: var(--primary) !important;
    background-color: #ffffff !important;
}

.woocommerce-checkout table.shop_table tr.shipping td ul#shipping_method li input[type="radio"]:checked::before {
    content: "" !important;
    width: 0.625rem !important;
    height: 0.625rem !important;
    background-color: var(--primary) !important;
    border-radius: 50% !important;
    display: block !important;
}

/* Shipping labels flex grid structure: stretches title to the left, price to the right */
.woocommerce-checkout table.shop_table tr.shipping td ul#shipping_method li label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    color: #334155 !important;
    cursor: pointer !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.woocommerce-checkout table.shop_table tr.shipping td ul#shipping_method li label .amount {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-left: auto !important;
    font-size: 0.875rem !important;
}

.woocommerce-checkout table.shop_table tfoot th,
.woocommerce-checkout table.shop_table tfoot td {
    padding: 1.5rem 0 !important;
}

/* The thick line/divider separating subtotals/shipping from final Total */
.woocommerce-checkout table.shop_table tr.order-total {
    border-top: 2px solid #e2e8f0 !important;
    border-bottom: none !important;
    /* Total has no bottom border since it is the last item */
}

.woocommerce-checkout table.shop_table .order-total th {
    color: #0f172a !important;
    font-size: 1.125rem !important;
    /* text-lg */
    font-weight: 700 !important;
    vertical-align: middle !important;
    padding-top: 1.75rem !important;
}

.woocommerce-checkout table.shop_table .order-total td {
    color: var(--primary) !important;
    /* Premium orange */
    font-size: 2rem !important;
    /* text-3xl+ */
    font-weight: 700 !important;
    text-align: right !important;
    font-family: 'Montserrat', sans-serif !important;
    vertical-align: middle !important;
    padding-top: 1.75rem !important;
}

/* ==========================================================================
   PREMIUM PLACE ORDER BUTTON OVERRIDES & ANIMATIONS
   ========================================================================== */

#place_order {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important;
    /* Slightly taller for premium feel */
    background-color: var(--primary, #EE8722) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    /* Softer, modern roundness */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    /* Slightly larger text */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 6px -1px rgba(238, 135, 34, 0.1), 0 2px 4px -1px rgba(238, 135, 34, 0.06) !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    margin-top: 1rem !important;
}

#place_order:hover {
    background-color: var(--primary-dark, #d67610) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px -5px rgba(238, 135, 34, 0.4) !important;
    /* Warm brand-orange glow */
}

#place_order:active {
    transform: translateY(1px) !important;
    box-shadow: 0 4px 6px -1px rgba(238, 135, 34, 0.2) !important;
}

/* Subtle loading/processing overlay when WooCommerce submits the order */
#place_order.processing,
#place_order:disabled {
    opacity: 0.7 !important;
    background-color: #cbd5e1 !important;
    color: #64748b !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* Checkout terms and conditions spacing fix */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* ==========================================================================
   MERCOMAX CHECKOUT PREMIUM LOOK & FEEL ENHANCEMENTS
   ========================================================================== */

/* 1. Coupon Toggle & Alignment Fixes */
.woocommerce-form-coupon-toggle {
    margin-top: -1.25rem !important;
    margin-bottom: 2.5rem !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--primary, #EE8722) !important;
    padding: 1rem 1.25rem !important;
    border-radius: 8px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.875rem !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
    position: relative !important;
}

/* Remove WC default absolute placement of the info icon */
.woocommerce-form-coupon-toggle .woocommerce-info::before {
    content: "\f05a" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: var(--primary, #EE8722) !important;
    font-size: 1.125rem !important;
    position: static !important;
    float: none !important;
    display: inline-block !important;
    line-height: 1 !important;
    margin-right: 0 !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
    color: var(--primary, #EE8722) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon:hover {
    color: #d67610 !important;
}

/* 2. Coupon Form Styling Customization */
form.checkout_coupon {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    gap: 1rem !important;
}

/* Toggle visibility safely without overriding WooCommerce inline display: none */
form.checkout_coupon:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    flex-direction: column !important;
}

@media (min-width: 640px) {
    form.checkout_coupon:not([style*="display: none"]):not([style*="display:none"]) {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }
}

form.checkout_coupon p {
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    form.checkout_coupon p.form-row-first {
        width: auto !important;
        flex: 1 1 250px !important;
        max-width: 300px !important;
    }

    form.checkout_coupon p.form-row-last {
        width: auto !important;
        flex: 0 0 auto !important;
    }
}

form.checkout_coupon p:first-child {
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.875rem !important;
    color: #475569 !important;
    margin-bottom: 0.25rem !important;
}

form.checkout_coupon input#coupon_code {
    width: 100% !important;
    height: 48px !important;
    padding: 0 1rem !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
}

form.checkout_coupon input#coupon_code:focus {
    border-color: var(--primary, #EE8722) !important;
    box-shadow: 0 0 0 3px rgba(238, 135, 34, 0.1) !important;
}

form.checkout_coupon button[name="apply_coupon"] {
    height: 48px !important;
    padding: 0 2rem !important;
    background-color: var(--primary, #EE8722) !important;
    border: none !important;
    border-radius: 5px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

form.checkout_coupon button[name="apply_coupon"]:hover {
    background-color: #d67610 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(238, 135, 34, 0.2) !important;
}

/* 3. Native & Select2 Centered Vertical Options Alignment */
.woocommerce-checkout select {
    line-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
}

.woocommerce-checkout .select2-selection--single {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.woocommerce-checkout .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    display: block !important;
    vertical-align: middle !important;
}

.woocommerce-checkout .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
}

/* 4. Custom Premium Checkboxes & Radios (React Aesthetics) */
.woocommerce-checkout input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    outline: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
    vertical-align: middle !important;
    margin: -2px 8px 0 0 !important;
    position: relative !important;
}

.woocommerce-checkout input[type="checkbox"]:checked {
    border-color: var(--primary, #EE8722) !important;
    background-color: var(--primary, #EE8722) !important;
}

.woocommerce-checkout input[type="checkbox"]:checked::before {
    content: "\f00c" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    font-size: 0.6875rem !important;
    display: block !important;
}

.woocommerce-checkout input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(238, 135, 34, 0.1) !important;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .form-row.terms label {
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-transform: none !important;
    font-size: 0.875rem !important;
    letter-spacing: normal !important;
}

/* Premium Styling for Generic Checkout Radios */
.woocommerce-checkout input[type="radio"]:not(.shipping_method) {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    outline: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
    vertical-align: middle !important;
    margin: -2px 8px 0 0 !important;
    position: relative !important;
}

.woocommerce-checkout input[type="radio"]:not(.shipping_method):checked {
    border-color: var(--primary, #EE8722) !important;
    background-color: #ffffff !important;
}

.woocommerce-checkout input[type="radio"]:not(.shipping_method):checked::before {
    content: "" !important;
    width: 0.5rem !important;
    height: 0.5rem !important;
    background-color: var(--primary, #EE8722) !important;
    border-radius: 50% !important;
    display: block !important;
}

/* 5. Scroll Bug Remedy — use overflow-x:clip on html (does NOT trigger vertical scrollbar
   compensation unlike overflow-x:hidden) + ensure checkout containers are properly contained */
html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

#main-header {
    overflow: visible !important;
    /* Ensure the mega-menu dropdown can exceed the header bounds */
}

/* Prevent the checkout form columns from overflowing their container.
   min-w-0 is essential on flex children to allow them to shrink below content size. */
.woocommerce-checkout.flex-col,
.woocommerce-checkout.flex {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout.flex-col>div,
.woocommerce-checkout.flex>div {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout .checkout-page {
    max-width: 100% !important;
    overflow-x: clip !important;
}

/* WooCommerce internal column structure override */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.woocommerce-checkout {
    max-width: 100% !important;
    overflow: visible !important;
}

/* Fix WooCommerce checkout notices from breaking flex column layout */
.woocommerce-NoticeGroup-checkout,
.woocommerce-NoticeGroup-updateOrderReview {
    width: 100% !important;
    flex: 0 0 100% !important;
}

/* ==========================================================================
   MERCOMAX UBIGEO DROPDOWNS (Provincia + Distrito — creados dinámicamente por JS)
   ========================================================================== */

/* Provincia and Distrito selects created/replaced by mercomax-checkout.js */
.mercomax-ubigeo-select {
    width: 100% !important;
    height: 48px !important;
    padding: 0 2.5rem 0 1rem !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
    outline: none !important;
    /* Single clean chevron — suppress native arrow first, then add custom SVG */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    cursor: pointer !important;
}

.mercomax-ubigeo-select:focus {
    border-color: var(--primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(238, 135, 34, 0.1) !important;
}

/* Estado disabled — comunica visualmente que el campo espera una selección del padre */
.mercomax-ubigeo-select:disabled,
select.mercomax-select-disabled,
#billing_provincia:disabled,
#shipping_provincia:disabled,
#billing_city:disabled,
#shipping_city:disabled {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* Text input fallback para países fuera de Perú (restaurado por JS) */
.mercomax-ubigeo-input {
    width: 100% !important;
    height: 48px !important;
    padding: 0 1rem !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
    outline: none !important;
}

.mercomax-ubigeo-input:focus {
    border-color: var(--primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(238, 135, 34, 0.1) !important;
}

/* Asegurar que los campos de Provincia y Distrito hereden el grid del checkout */
#billing_provincia_field,
#shipping_provincia_field,
#billing_city_field,
#shipping_city_field {
    width: 100% !important;
    min-width: 0 !important;
}

#billing_provincia_field select,
#shipping_provincia_field select,
#billing_city_field select,
#shipping_city_field select {
    width: 100% !important;
    height: 48px !important;
    padding: 0 2.5rem 0 1rem !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
    outline: none !important;
    /* Suppress native arrow to avoid double arrows */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    cursor: pointer !important;
}

#billing_provincia_field select:focus,
#shipping_provincia_field select:focus,
#billing_city_field select:focus,
#shipping_city_field select:focus {
    border-color: var(--primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(238, 135, 34, 0.1) !important;
}

/* ==========================================================================
   WOOCOMMERCE THANK YOU PAGE (ORDER RECEIVED) PREMIUM STYLES
   ========================================================================== */

/* Premium styling for order details table */
.woocommerce-table--order-details {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 2rem !important;
    border: none !important;
}

.woocommerce-table--order-details thead th {
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    /* text-xs */
    font-weight: 700 !important;
    color: #64748b !important;
    /* slate-500 */
    letter-spacing: 0.05em !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-family: 'Montserrat', sans-serif !important;
}

.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details tfoot th {
    padding: 1.25rem 0 !important;
    border-top: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.875rem !important;
    color: #475569 !important;
    vertical-align: middle !important;
}

.woocommerce-table--order-details tbody td.woocommerce-table__product-name {
    color: #1e293b !important;
    font-weight: 600 !important;
    text-align: left !important;
}

.woocommerce-table--order-details tbody td.woocommerce-table__product-name a {
    color: #1e293b !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.woocommerce-table--order-details tbody td.woocommerce-table__product-name a:hover {
    color: #EE8722 !important;
}

.woocommerce-table--order-details tbody td.woocommerce-table__product-total,
.woocommerce-table--order-details tfoot td {
    font-weight: 700 !important;
    color: #1e293b !important;
    text-align: right !important;
    font-family: 'Montserrat', sans-serif !important;
}

.woocommerce-table--order-details tfoot th {
    font-weight: 600 !important;
    color: #1e293b !important;
    text-align: left !important;
}

/* Defensive: Reset all intermediate footer rows to standard size */
.woocommerce-table--order-details tfoot tr:not(.order_total) th,
.woocommerce-table--order-details tfoot tr:not(.order_total) td {
    font-size: 0.875rem !important;
    color: #475569 !important;
    border-top: none !important;
}

.woocommerce-table--order-details tfoot tr:not(.order_total) td {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

/* Specific Payment Method Row Style */
.woocommerce-table--order-details tfoot tr.payment_method th,
.woocommerce-table--order-details tfoot tr.payment_method td {
    font-size: 0.875rem !important;
}

.woocommerce-table--order-details tfoot tr.payment_method td {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

/* Total row styling in order details table */
.woocommerce-table--order-details tfoot tr.order_total th {
    font-size: 1.125rem !important;
    /* text-lg */
    font-weight: 700 !important;
    color: #0f172a !important;
}

.woocommerce-table--order-details tfoot tr.order_total td {
    font-size: 1.75rem !important;
    /* text-2xl */
    font-weight: 700 !important;
    color: #EE8722 !important;
}

/* Product metadata (variations) on thank you page */
.woocommerce-table--order-details ul.wc-item-meta {
    list-style: none !important;
    padding: 0 !important;
    margin: 0.35rem 0 0 0 !important;
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
    /* slate-400 */
}

.woocommerce-table--order-details ul.wc-item-meta li {
    display: inline-block !important;
    margin-right: 0.75rem !important;
}

.woocommerce-table--order-details ul.wc-item-meta li strong {
    font-weight: 600 !important;
    color: #64748b !important;
}

/* Billing & Shipping Address Dashboard Cards */
.woocommerce-customer-details {
    margin-top: 2.5rem !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 2rem !important;
}

.woocommerce-customer-details .woocommerce-columns--addresses {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

@media (min-width: 768px) {
    .woocommerce-customer-details .woocommerce-columns--addresses {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
    background-color: #f8fafc !important;
    /* bg-slate-50 */
    border: 1px solid #e2e8f0 !important;
    /* border-slate-200 */
    border-radius: 12px !important;
    padding: 1.75rem !important;
    text-align: left !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce-column--billing-address:hover,
.woocommerce-column--shipping-address:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.02), 0 4px 6px -2px rgba(0, 0, 0, 0.01) !important;
}

.woocommerce-column__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.875rem !important;
    /* text-sm */
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 1rem 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding-bottom: 0.75rem !important;
}

.woocommerce-customer-details address {
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    font-style: normal !important;
    margin: 0 !important;
}

/* Hide WooCommerce native icon font pseudo-elements to prevent double icons */
.woocommerce-customer-details--phone::before,
.woocommerce-customer-details--email::before {
    display: none !important;
    content: none !important;
}

/* Prevent text overflow on mobile screens for long email/phone entries and remove native padding */
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Align WooCommerce thankyou hooks and additional blocks */
.woocommerce-thankyou-hooks {
    width: 100% !important;
    margin-top: 2rem !important;
    text-align: left !important;
}

.woocommerce-order-details {
    margin-top: 2.5rem !important;
}

.woocommerce-order-details__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.25rem !important;
    /* text-xl */
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 1.25rem 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding-bottom: 0.75rem !important;
}

/* Small Viewport Table Enhancements (Responsive Layout Optimization) */
@media (max-width: 639px) {
    .woocommerce-table--order-details thead {
        display: none !important;
        /* Convert columns to cards */
    }

    .woocommerce-table--order-details,
    .woocommerce-table--order-details tbody,
    .woocommerce-table--order-details tfoot,
    .woocommerce-table--order-details th {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Flex layout for product rows */
    .woocommerce-table--order-details tbody tr {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 1rem !important;
        border-bottom: 1px solid #f1f5f9 !important;
        padding: 1.25rem 0 !important;
    }

    .woocommerce-table--order-details tbody td {
        display: block !important;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Hide WooCommerce default mobile data-title labels */
    .woocommerce-table--order-details tbody td::before {
        display: none !important;
        content: none !important;
    }

    .woocommerce-table--order-details tbody td.woocommerce-table__product-name {
        flex: 1 !important;
        font-size: 0.9375rem !important;
        padding-bottom: 0 !important;
        text-align: left !important;
    }

    .woocommerce-table--order-details tbody td.woocommerce-table__product-total {
        flex-shrink: 0 !important;
        text-align: right !important;
        font-size: 0.9375rem !important;
        color: #EE8722 !important;
        /* Orange price on mobile to stand out */
        padding-top: 0 !important;
    }

    .woocommerce-table--order-details tfoot tr {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.75rem 0 !important;
        border-bottom: 1px dashed #f1f5f9 !important;
    }

    .woocommerce-table--order-details tfoot tr.order_total {
        border-top: 2px solid #e2e8f0 !important;
        border-bottom: none !important;
        padding-top: 1.25rem !important;
    }

    .woocommerce-table--order-details tfoot tr th,
    .woocommerce-table--order-details tfoot tr td {
        display: inline-block !important;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
    }
}

/* ==========================================================================
   WOOCOMMERCE MY ACCOUNT PREMIUM STYLES (React Match)
   ========================================================================== */

.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account textarea,
.woocommerce-account select {
    width: 100% !important;
    height: 48px !important;
    padding: 0 1rem !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
    outline: none !important;
}

.woocommerce-account input[type="text"]:focus,
.woocommerce-account input[type="email"]:focus,
.woocommerce-account input[type="tel"]:focus,
.woocommerce-account input[type="password"]:focus,
.woocommerce-account textarea:focus,
.woocommerce-account select:focus {
    border-color: var(--primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(238, 135, 34, 0.1) !important;
}

.woocommerce-account input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    outline: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
    vertical-align: middle !important;
    position: relative !important;
}

.woocommerce-account input[type="checkbox"]:checked {
    border-color: var(--primary, #EE8722) !important;
    background-color: var(--primary, #EE8722) !important;
}

.woocommerce-account input[type="checkbox"]:checked::before {
    content: "\f00c" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    font-size: 0.6875rem !important;
    display: block !important;
}

.woocommerce-account input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(238, 135, 34, 0.1) !important;
}

.woocommerce-account label {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
}

.woocommerce-account label .required {
    color: #ef4444 !important;
    text-decoration: none !important;
}

.woocommerce-account nav a {
    text-decoration: none !important;
}

.woocommerce form.login,
.woocommerce form.register {
    border: 0px !important;
    padding: 0px !important;
}

/* ==========================================================================
   CHECKOUT PRIVACY POLICY TEXT (React Match)
   ========================================================================== */

.woocommerce-privacy-policy-text p {
    font-size: 0.8125rem !important;
    color: #64748b !important;
    line-height: 1.625 !important;
    margin: 0 0 1rem 0 !important;
}

.woocommerce-privacy-policy-text a {
    color: var(--primary, #EE8722) !important;
    text-decoration: underline !important;
}

.woocommerce-privacy-policy-text a:hover {
    color: #d97706 !important;
}

/* ==========================================================================
   PREDICTIVE SEARCH DROPDOWN PREMIUM STYLES
   ========================================================================== */
.mercomax-search-dropdown {
    border-color: #f1f5f9 !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    border-radius: 6px !important;
}

.mercomax-dropdown-price .price {
    font-size: 0.8125rem !important;
    font-weight: 800 !important;
    color: #EE8722 !important;
}

.mercomax-dropdown-price del {
    font-size: 0.6875rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    margin-right: 0.25rem !important;
    display: inline-block !important;
}

.mercomax-dropdown-price ins {
    text-decoration: none !important;
    display: inline-block !important;
}

.mercomax-dropdown-price ins .amount {
    color: #EE8722 !important;
}