/* ========== BASE STYLES ========== */
body.woocommerce-checkout {
    font-family: 'Montserrat', sans-serif !important;
    background: #151515 !important;
    color: #f0f0f0 !important;
    min-height: 100vh !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Background tire overlay - matching other pages */
body.woocommerce-checkout::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('/images/tire-1757696909765-Photoroom.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    opacity: 0.1 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* ========== TOP BAR - Logo and Red Banner ========== */
body.woocommerce-checkout .top-bar {
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: fixed !important;
    top: 0 !important;
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-bottom: none !important;
    z-index: 1000 !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    left: 0 !important;
}

body.woocommerce-checkout .top-bar.scrolled {
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.woocommerce-checkout .logo-banner {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: #dc0000 !important;
    background-image: url('/images/red bar.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-bottom: none !important;
    overflow: visible !important;
    height: 55px !important;
    min-height: 55px !important;
    z-index: 0 !important;
}

/* ========== EJS COMPATIBILITY LAYER (WooCommerce template mapping) ========== */
body.woocommerce-checkout .checkout-section.woocommerce {
    background: transparent !important;
}

body.woocommerce-checkout .checkout-col-1,
body.woocommerce-checkout .checkout-col-2 {
    min-width: 0 !important;
}

/* Order table visuals used by copied Woo checkout templates */
body.woocommerce-checkout .woocommerce table.shop_table,
body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
    border: none !important;
    margin-bottom: 22px !important;
}

body.woocommerce-checkout .woocommerce table.shop_table th,
body.woocommerce-checkout .woocommerce table.shop_table td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 14px 0 !important;
    border-bottom: 1px solid #333 !important;
    color: #fff !important;
    vertical-align: middle !important;
    text-align: left !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item:last-child td {
    border-bottom: 1px solid #333 !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail {
    width: 72px !important;
    padding-right: 12px !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total {
    text-align: right !important;
    white-space: nowrap !important;
    color: #FFFF00 !important;
    font-weight: 700 !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total .woocommerce-Price-amount {
    color: #FFFF00 !important;
}

/* Totals rows used by review-order.php markup */
body.woocommerce-checkout .order-totals-wrapper,
body.woocommerce-checkout .order-totals {
    display: block !important;
    margin-top: 12px !important;
}

body.woocommerce-checkout .order-totals-separator {
    height: 1px !important;
    background: #333 !important;
    margin: 6px 0 !important;
}

body.woocommerce-checkout .order-totals-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #333 !important;
    color: #f0f0f0 !important;
    gap: 16px !important;
}

body.woocommerce-checkout .order-totals-row .order-totals-label {
    color: #f0f0f0 !important;
    font-weight: 500 !important;
}

body.woocommerce-checkout .order-totals-row .order-totals-value {
    color: #fff !important;
    font-weight: 600 !important;
    text-align: right !important;
}

body.woocommerce-checkout .order-total-row {
    border-bottom: none !important;
    padding-top: 18px !important;
    padding-bottom: 10px !important;
}

body.woocommerce-checkout .order-total-row .order-totals-label,
body.woocommerce-checkout .order-total-row .order-totals-value {
    font-size: 24px !important;
    font-weight: 900 !important;
}

body.woocommerce-checkout .order-total-row .order-totals-label {
    color: #fff !important;
}

body.woocommerce-checkout .order-total-row .order-totals-value {
    color: #FFFF00 !important;
}

/* Payment heading block used by copied form-checkout.php structure */
body.woocommerce-checkout .payment-options-heading {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.woocommerce-checkout .payment-options-heading i {
    color: #FFFF00 !important;
}

body.woocommerce-checkout .payment-methods-wrapper {
    margin-top: 0 !important;
}

body.woocommerce-checkout .payment-methods-wrapper .wc_payment_methods {
    margin-bottom: 15px !important;
}

@media (max-width: 768px) {
    body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail {
        width: 60px !important;
        padding-right: 10px !important;
    }

    body.woocommerce-checkout .order-totals-row {
        padding: 10px 0 !important;
    }

    body.woocommerce-checkout .order-total-row .order-totals-label,
    body.woocommerce-checkout .order-total-row .order-totals-value {
        font-size: 20px !important;
    }
}

body.woocommerce-checkout .logo-banner img,
body.woocommerce-checkout .logo-banner .header-logo {
    max-height: 55px !important;
    max-width: 90% !important;
    height: 55px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease-in-out !important;
}

body.woocommerce-checkout .logo-banner .header-logo {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Active logo is visible (set by JavaScript rotation) */
body.woocommerce-checkout .logo-banner .header-logo.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fallback: first logo visible if no active class yet */
body.woocommerce-checkout .logo-banner .header-logo:first-child,
body.woocommerce-checkout .logo-banner #header-logo-1 {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ========== MAIN NAV - Sticky below top-bar ========== */
body.woocommerce-checkout .main-nav {
    padding: 15px 0 !important;
    position: sticky !important;
    top: 55px !important;
    z-index: 999 !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: rgba(21, 21, 21, 0.4) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 0 !important;
    width: 100% !important;
}

body.woocommerce-checkout .main-nav.scrolled {
    background: rgba(21, 21, 21, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
    padding: 10px 0 !important;
    top: 0 !important;
}

body.woocommerce-checkout .main-nav .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 1170px !important;
    max-width: 100% !important;
    padding: 0 30px !important;
    margin: 0 auto !important;
    position: relative !important;
    height: 60px !important;
}

body.woocommerce-checkout .main-nav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 40px !important;
    align-items: center !important;
}

body.woocommerce-checkout .main-nav li {
    margin: 0 !important;
}

body.woocommerce-checkout .main-nav a {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 10px 0 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    display: block !important;
}

body.woocommerce-checkout .main-nav a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 5px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #FFFF00 !important;
    transition: width 0.3s ease !important;
}

body.woocommerce-checkout .main-nav a:hover::after,
body.woocommerce-checkout .main-nav a.active::after {
    width: 100% !important;
}

body.woocommerce-checkout .main-nav a.active,
body.woocommerce-checkout .main-nav a:hover {
    color: #FFFF00 !important;
}

/* ========== SEARCH BAR - Expandable (Mobile) ========== */
body.woocommerce-checkout .search-bar,
body.woocommerce-checkout #mobile-search-bar {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    overflow: visible !important;
}

body.woocommerce-checkout .search-bar input,
body.woocommerce-checkout #mobile-search-input,
body.woocommerce-checkout .main-nav .search-bar input,
body.woocommerce-checkout .header-right .search-bar input,
body.woocommerce-checkout #mobile-search-bar input {
    position: absolute !important;
    right: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(17, 17, 17, 0.95) !important;
    border: 2px solid #FFFF00 !important;
    border-right: none !important;
    color: #fff !important;
    padding: 0 12px !important;
    border-radius: 10px 0 0 10px !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                visibility 0.3s ease !important;
    outline: none !important;
    height: 40px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

body.woocommerce-checkout .search-bar input.expanded,
body.woocommerce-checkout #mobile-search-input.expanded,
body.woocommerce-checkout .main-nav .search-bar input.expanded,
body.woocommerce-checkout .header-right .search-bar input.expanded,
body.woocommerce-checkout #mobile-search-bar input.expanded {
    width: 180px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 100 !important;
}

body.woocommerce-checkout .search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.woocommerce-checkout .search-bar button,
body.woocommerce-checkout #mobile-search-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    background: #FFFF00 !important;
    border: 2px solid #FFFF00 !important;
    border-radius: 10px !important;
    transition: border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.2s ease,
                transform 0.2s ease !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.woocommerce-checkout .search-bar input.expanded + button,
body.woocommerce-checkout #mobile-search-input.expanded + button {
    border-radius: 0 10px 10px 0 !important;
}

body.woocommerce-checkout .search-bar button:hover {
    background: #FFD700 !important;
}

body.woocommerce-checkout .search-bar button i {
    color: #111 !important;
    font-size: 16px !important;
}

/* Override any theme container styles */
.woocommerce-checkout .container,
body.woocommerce-checkout .container {
    max-width: 1170px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure checkout page wrapper doesn't constrain */
.woocommerce-checkout .site-content,
.woocommerce-checkout main,
.woocommerce-checkout .content-area {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ========== PROGRESS BAR - Matching Shop Page ========== */
body.woocommerce-checkout .checkout-progress {
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.95) 0%, rgba(26, 26, 26, 0.95) 100%) !important;
    border-radius: 12px !important;
    padding: 20px 25px !important;
    margin: 20px auto !important;
    border: 2px solid #333 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    max-width: 1170px !important;
    width: calc(100% - 40px) !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout .checkout-progress .container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce-checkout .checkout-progress .progress-steps {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

body.woocommerce-checkout .checkout-progress .progress-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 2 !important;
}

body.woocommerce-checkout .checkout-progress .step-circle {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #1a1a1a !important;
    border: 2px solid #333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    color: #666 !important;
    transition: all 0.3s ease !important;
}

body.woocommerce-checkout .checkout-progress .progress-step.completed .step-circle {
    background: #4CAF50 !important;
    border-color: #4CAF50 !important;
    color: #fff !important;
}

body.woocommerce-checkout .checkout-progress .progress-step.active .step-circle {
    background: linear-gradient(135deg, #FFFF00 0%, #ffd700 100%) !important;
    border-color: #FFFF00 !important;
    color: #000 !important;
    box-shadow: 0 0 30px rgba(255, 255, 0, 0.6) !important;
    animation: dw-checkout-progress-pulse 2s ease-in-out infinite !important;
}

@keyframes dw-checkout-progress-pulse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255, 255, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 50px rgba(255, 255, 0, 0.9);
    }
}

body.woocommerce-checkout .checkout-progress .step-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    text-align: center !important;
}

body.woocommerce-checkout .checkout-progress .step-number {
    color: #FFFF00 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body.woocommerce-checkout .checkout-progress .step-text {
    color: #ccc !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

body.woocommerce-checkout .checkout-progress .progress-step.active .step-text {
    color: #FFFF00 !important;
    font-weight: 700 !important;
}

body.woocommerce-checkout .checkout-progress .progress-step.completed .step-text {
    color: #4CAF50 !important;
}

body.woocommerce-checkout .checkout-progress .progress-line {
    flex: 1 !important;
    height: 2px !important;
    background: #333 !important;
    margin: 0 10px !important;
    position: relative !important;
    margin-bottom: 30px !important;
}

body.woocommerce-checkout .checkout-progress .progress-line.completed {
    background: #4CAF50 !important;
}

body.woocommerce-checkout .checkout-progress .progress-line.active {
    background: linear-gradient(90deg, #4CAF50 0%, #FFFF00 100%) !important;
}

/* ========== SECURE CHECKOUT HEADER ========== */
.secure-checkout-header {
    text-align: center !important;
    padding: 40px 20px 30px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 1170px !important;
    width: 100% !important;
    margin: 0 auto 30px !important;
    box-sizing: border-box !important;
}

.secure-checkout-header .lock-icon {
    color: #FFFF00 !important;
    font-size: 50px !important;
    margin-bottom: 20px !important;
    text-shadow: 0 0 20px rgba(255, 255, 0, 0.3) !important;
}

.secure-checkout-header h1 {
    font-size: 42px !important;
    font-weight: 900 !important;
    color: #FFFF00 !important;
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
    margin-bottom: 15px !important;
    text-shadow: 0 2px 10px rgba(255, 255, 0, 0.2) !important;
}

.secure-checkout-header p {
    color: #ccc !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

/* ========== CHECKOUT LAYOUT ========== */
.checkout-layout {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    gap: 30px !important;
    padding: 0 20px 60px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Override WooCommerce form container */
.woocommerce-checkout form.checkout {
    display: contents !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Break WooCommerce's col2-set structure */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
    display: contents !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* ========== FORM SECTIONS ========== */
.checkout-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
}

.form-section,
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.contact-information-section,
.billing-address-section {
    background: rgba(28, 28, 28, 0.95) !important;
    border-radius: 12px !important;
    padding: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.form-section h2,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
.contact-information-section h3,
.billing-address-section h3 {
    color: #FFFF00 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.form-section h2 i {
    font-size: 20px !important;
}

/* Form Row Layout */
.woocommerce-billing-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: end !important;
}

/* Full width rows */
p.form-row.form-row-wide {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/* First/Last fields side by side - align to bottom */
p.form-row.form-row-first,
p.form-row.form-row-last {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure labels have consistent styling */
p.form-row label,
#billing_last_name_field label,
#billing_state_field label,
.woocommerce-billing-fields label,
.woocommerce-checkout .form-row label {
    min-height: 20px !important;
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ccc !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* Force specific fields to match others exactly */
#billing_last_name_field,
#billing_state_field {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

#billing_last_name,
#billing_state,
.woocommerce-checkout #billing_last_name,
.woocommerce-checkout #billing_state,
body.woocommerce-checkout #billing_last_name,
body.woocommerce-checkout #billing_state {
    height: 40px !important;
    max-height: 40px !important;
    min-height: 40px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Override any uppercase/bold on these specific labels */
body.woocommerce-checkout #billing_last_name_field label,
body.woocommerce-checkout #billing_state_field label,
.woocommerce-checkout p#billing_last_name_field label,
.woocommerce-checkout p#billing_state_field label {
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: normal !important;
    color: #ccc !important;
}

.form-group, .woocommerce-input-wrapper {
    margin-bottom: 0 !important;
    width: 100% !important;
    display: block !important;
}

p.form-row {
    margin: 0 !important;
}

.form-group label, .woocommerce-checkout label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #ccc !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
}

/* Force ALL inputs to match preview styling */
.form-group input,
.form-group select,
.form-group textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="date"],
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-billing-fields input,
.woocommerce-billing-fields select,
.woocommerce-billing-fields textarea,
.woocommerce-shipping-fields input,
.woocommerce-shipping-fields select,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper select,
.form-row input,
.form-row select,
.form-row textarea,
#billing_first_name,
#billing_last_name,
#billing_email,
#billing_phone,
#billing_address_1,
#billing_address_2,
#billing_city,
#billing_state,
#billing_postcode,
#billing_country {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    background: #2a2a2a !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-family: 'Montserrat', sans-serif !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Textarea / Order Notes styling */
.woocommerce-checkout textarea,
#order_comments,
textarea#order_comments {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 15px !important;
    height: auto !important;
    min-height: 120px !important;
    max-height: none !important;
    background: #2a2a2a !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-family: 'Montserrat', sans-serif !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    resize: vertical !important;
    display: block !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    outline: none !important;
    border-color: #FFFF00 !important;
    background: #333 !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: #666 !important;
}

.form-group select,
.woocommerce-checkout select {
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23FFFF00' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    padding-right: 45px !important;
}

/* Select2 Dropdown Styling - Province field fix */
.select2-container,
.select2-container--default,
body.woocommerce-checkout .select2-container,
body.woocommerce-checkout .select2-container--default,
#billing_state_field .select2-container,
#billing_state_field .select2-container--default {
    height: 40px !important;
    max-height: 40px !important;
    min-height: 40px !important;
}

.select2-container--default .select2-selection--single,
body.woocommerce-checkout .select2-container--default .select2-selection--single,
body.woocommerce-checkout .select2-container .select2-selection--single,
#billing_state_field .select2-container--default .select2-selection--single,
#billing_state_field .select2-selection--single {
    background: #2a2a2a !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    height: 40px !important;
    max-height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
#billing_state_field .select2-selection__rendered {
    color: #fff !important;
    line-height: 36px !important;
    padding: 0 !important;
    font-size: 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow,
#billing_state_field .select2-selection__arrow {
    height: 40px !important;
    right: 10px !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.select2-dropdown {
    background: #2a2a2a !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
}

.select2-container--default .select2-results__option {
    color: #fff !important;
    padding: 10px 15px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #FFFF00 !important;
    color: #111 !important;
}

/* ========== FITMENT OPTIONS ========== */
.fitment-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.fitment-option {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 18px 20px !important;
    background: rgba(40, 40, 40, 0.5) !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.fitment-option:hover {
    background: rgba(50, 50, 50, 0.7) !important;
    border-color: rgba(255, 255, 0, 0.5) !important;
}

.fitment-option:has(input[type="radio"]:checked) {
    border-color: #FFFF00 !important;
    background: linear-gradient(135deg, rgba(255,255,0,0.12) 0%, rgba(255,255,0,0.04) 100%) !important;
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.1) !important;
}

.fitment-option input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    accent-color: #FFFF00 !important;
    margin: 0 !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.fitment-option label {
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
    flex: 1 !important;
}

.fitment-option .option-title {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.fitment-option .option-title i {
    color: #FFFF00 !important;
    font-size: 18px !important;
}

.fitment-option .option-desc {
    font-size: 13px !important;
    color: #999 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* Delivery Notice - hidden by default, shown via JS */
.delivery-notice {
    display: none;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-top: 15px !important;
    padding: 15px 18px !important;
    background: rgba(255, 255, 0, 0.08) !important;
    border: 1px solid rgba(255, 255, 0, 0.25) !important;
    border-radius: 8px !important;
    color: #f0f0f0 !important;
}

.delivery-notice i {
    color: #FFFF00 !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.delivery-notice p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #ccc !important;
}


/* Appointment Inline Section - under Collection */
.appointment-inline {
    background: rgba(255, 255, 0, 0.06) !important;
    border: 1px solid rgba(255, 255, 0, 0.25) !important;
    border-radius: 10px !important;
    padding: 20px 22px !important;
    margin: 15px 0 !important;
}

.appointment-inline h3 {
    color: #FFFF00 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 18px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.appointment-inline h3 i {
    margin-right: 10px !important;
}

.appointment-fields-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

.appointment-inline .form-group {
    margin-bottom: 0 !important;
}

.appointment-inline .form-group label {
    display: block !important;
    color: #aaa !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.appointment-inline .form-group input,
.appointment-inline .form-group select {
    width: 100% !important;
    padding: 12px 14px !important;
    background: rgba(30, 30, 30, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 14px !important;
}

.appointment-inline .form-group input:focus,
.appointment-inline .form-group select:focus {
    border-color: #FFFF00 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 0, 0.15) !important;
}

@media (max-width: 600px) {
    .appointment-fields-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* Legacy Fitment Toggle (keep for backwards compatibility) */
.fitment-toggle-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px 20px !important;
    background: rgba(255, 255, 0, 0.05) !important;
    border: 1px solid rgba(255, 255, 0, 0.2) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.fitment-toggle-checkbox:hover {
    background: rgba(255, 255, 0, 0.1) !important;
    border-color: #FFFF00 !important;
}

.fitment-toggle-checkbox input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: #FFFF00 !important;
    padding: 0 !important;
}

.fitment-toggle-checkbox label {
    cursor: pointer !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #f0f0f0 !important;
    margin: 0 !important;
}

.fitment-toggle-checkbox i {
    color: #FFFF00 !important;
}

/* ========== ORDER SUMMARY ========== */
.order-summary {
    background: rgba(28, 28, 28, 0.95) !important;
    border-radius: 12px !important;
    padding: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    position: sticky !important;
    top: 80px !important;
    height: fit-content !important;
}

.order-summary > h2 {
    color: #FFFF00 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #FFFF00 !important;
    background: transparent !important;
}

/* ========== WHEEL ALIGNMENT DISPLAY ROW - ORDER TOTALS ========== */
.summary-row.wheel-alignment-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #333 !important;
}

.summary-row.wheel-alignment-row span:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ccc !important;
}

.summary-row.wheel-alignment-row span:first-child i {
    color: #FFFF00 !important;
    font-size: 14px !important;
}

.summary-row.wheel-alignment-row .alignment-amount {
    font-weight: 600 !important;
}

/* When alignment is selected - green highlight */
.summary-row.wheel-alignment-row.has-alignment {
    background: rgba(76, 175, 80, 0.1) !important;
    margin: 0 -15px !important;
    padding: 12px 15px !important;
    border-radius: 6px !important;
    border-bottom: none !important;
}

.summary-row.wheel-alignment-row.has-alignment .alignment-amount {
    color: #4CAF50 !important;
}

/* When no alignment - grey */
.summary-row.wheel-alignment-row.no-alignment .alignment-amount {
    color: #666 !important;
}

/* ========== WHEEL ALIGNMENT SELECTION - CHECKOUT PAGE ========== */
.checkout-alignment-section {
    background: rgba(40, 40, 40, 0.5) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 25px !important;
    border: 1px solid #333 !important;
}

.alignment-header-checkout {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
    color: #FFFF00 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
}

.alignment-header-checkout i {
    font-size: 16px !important;
    color: #FFFF00 !important;
}

.alignment-options-checkout {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.alignment-option-checkout {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 15px !important;
    background: rgba(30, 30, 30, 0.6) !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.alignment-option-checkout:hover {
    border-color: rgba(255, 255, 0, 0.4) !important;
    background: rgba(40, 40, 40, 0.8) !important;
}

.alignment-option-checkout.selected {
    border-color: #FFFF00 !important;
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.1) 0%, rgba(255, 255, 0, 0.03) 100%) !important;
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.1) !important;
}

.alignment-option-checkout input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #FFFF00 !important;
    margin: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.alignment-option-checkout .option-check {
    display: none !important;
}

.alignment-option-checkout .option-label {
    flex: 1 !important;
    color: #e0e0e0 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.alignment-option-checkout .option-amount {
    color: #FFFF00 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.alignment-option-checkout.selected .option-label {
    color: #fff !important;
}

.alignment-option-checkout.no-align .option-amount {
    color: #888 !important;
}

.alignment-option-checkout.no-align.selected .option-amount {
    color: #FFFF00 !important;
}

/* Mobile responsive for checkout alignment */
@media (max-width: 768px) {
    .checkout-alignment-section {
        padding: 15px !important;
        margin-bottom: 20px !important;
    }

    .alignment-header-checkout {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    .alignment-option-checkout {
        padding: 10px 12px !important;
    }

    .alignment-option-checkout .option-label,
    .alignment-option-checkout .option-amount {
        font-size: 13px !important;
    }

    /* Wheel alignment row - Mobile */
    .summary-row.wheel-alignment-row {
        padding: 10px 0 !important;
    }

    .summary-row.wheel-alignment-row span:first-child {
        font-size: 13px !important;
        gap: 6px !important;
    }

    .summary-row.wheel-alignment-row span:first-child i {
        font-size: 12px !important;
    }

    .summary-row.wheel-alignment-row .alignment-amount {
        font-size: 14px !important;
    }

    .summary-row.wheel-alignment-row.has-alignment {
        margin: 0 -10px !important;
        padding: 10px !important;
    }
}

/* Order Review */
#order_review,
.woocommerce-checkout-review-order {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Order Items List */
.order-items {
    margin-bottom: 25px !important;
}

.order-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #333 !important;
}

.order-item:last-child {
    border-bottom: none !important;
}

.order-item-image {
    flex-shrink: 0 !important;
}

.order-item-image img,
.order-item img,
.checkout-product-img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    background: #333 !important;
}

.order-item-details {
    flex: 1 !important;
}

.order-item-name {
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 5px !important;
}

.order-item-qty {
    color: #888 !important;
    font-size: 14px !important;
}

.order-item-price {
    color: #FFFF00 !important;
    font-weight: 700 !important;
}

.order-item-price .woocommerce-Price-amount {
    color: #FFFF00 !important;
}

/* Order Totals */
.order-totals {
    margin-top: 20px !important;
}

.summary-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #333 !important;
    color: #f0f0f0 !important;
}

.summary-row:last-child {
    border-bottom: none !important;
}

.summary-row.total {
    border-bottom: none !important;
    padding-top: 20px !important;
    padding-bottom: 15px !important;
    margin-bottom: 0 !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    display: flex !important;
    justify-content: space-between !important;
    position: relative !important;
    clear: both !important;
}

.summary-row.total span:first-child {
    color: #fff !important;
}

.summary-row.total span:last-child {
    color: #FFFF00 !important;
}

/* Wheel Alignment Fee Row - Highlighted Style */
.woocommerce-checkout-review-order-table tr.fee th,
.woocommerce-checkout-review-order-table tr.fee td,
.order-totals .fee {
    color: #4CAF50 !important;
}

.woocommerce-checkout-review-order-table tr.fee td .woocommerce-Price-amount {
    color: #4CAF50 !important;
}

/* Style the fee row to stand out */
.woocommerce-checkout-review-order-table tr.fee {
    background: rgba(76, 175, 80, 0.1) !important;
}

.woocommerce-checkout-review-order-table tr.fee th::before {
    content: "\f013" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: #4CAF50 !important;
}

/* Ensure order totals section has proper layout */
.order-totals {
    display: block !important;
    position: relative !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ========== PAYMENT METHODS ========== */
.payment-methods {
    margin: 25px 0 0 0 !important;
    padding-top: 25px !important;
    background: transparent !important;
    border-top: 1px solid #333 !important;
    clear: both !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    float: none !important;
}

.payment-methods h3 {
    color: #FFFF00 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
    clear: both !important;
    float: none !important;
}

#payment {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
}

.wc_payment_methods {
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    list-style: none !important;
    display: block !important;
}

/* Payment logos - below payment methods */
.payment-methods .payment-logos {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Place order section */
#payment .place-order {
    display: block !important;
    margin-top: 20px !important;
}

/* Payment method items - Pill shaped design - EXACT MATCH */
.wc_payment_methods li,
.wc_payment_methods .wc_payment_method,
#payment .wc_payment_methods li,
#payment .wc_payment_methods .wc_payment_method,
html body.woocommerce-checkout .wc_payment_methods li,
html body.woocommerce-checkout .wc_payment_methods .wc_payment_method {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 14px 20px !important;
    background: rgba(40, 40, 40, 0.5) !important;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    list-style: none !important;
    box-shadow: none !important;
}

/* Hover state */
.wc_payment_methods li:hover,
#payment .wc_payment_methods li:hover,
html body.woocommerce-checkout .wc_payment_methods li:hover {
    border-color: rgba(255, 255, 0, 0.5) !important;
    background: rgba(50, 50, 50, 0.7) !important;
}

/* Selected payment method - yellow border and highlight - EXACT MATCH */
.wc_payment_methods li:has(input[type="radio"]:checked),
.wc_payment_methods .wc_payment_method:has(input:checked),
#payment .wc_payment_methods li:has(input[type="radio"]:checked),
html body.woocommerce-checkout .wc_payment_methods li:has(input[type="radio"]:checked),
html body.woocommerce-checkout .wc_payment_methods .wc_payment_method:has(input:checked) {
    border-color: #FFFF00 !important;
    background: linear-gradient(135deg, rgba(255,255,0,0.15) 0%, rgba(255,255,0,0.05) 100%) !important;
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.15) !important;
}

.wc_payment_methods li.wc_payment_method input[type="radio"]:checked + label,
.wc_payment_methods li input[type="radio"]:checked ~ label {
    color: #fff !important;
}

/* Custom radio button styling - Yellow filled when selected */
.wc_payment_methods li input[type="radio"],
#payment .wc_payment_methods li input[type="radio"],
html body.woocommerce-checkout .wc_payment_methods li input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    accent-color: #FFFF00 !important;
    margin: 0 12px 0 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 2px solid #666 !important;
    border-radius: 50% !important;
    background: transparent !important;
    position: relative !important;
}

/* Radio button checked state - yellow fill */
.wc_payment_methods li input[type="radio"]:checked,
#payment .wc_payment_methods li input[type="radio"]:checked,
html body.woocommerce-checkout .wc_payment_methods li input[type="radio"]:checked {
    border-color: #FFFF00 !important;
    background: #FFFF00 !important;
}

/* Inner dot for checked radio */
.wc_payment_methods li input[type="radio"]:checked::after,
#payment .wc_payment_methods li input[type="radio"]:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 8px !important;
    height: 8px !important;
    background: #111 !important;
    border-radius: 50% !important;
}

/* Payment method label with icon */
.wc_payment_methods li label,
#payment .wc_payment_methods li label,
html body.woocommerce-checkout .wc_payment_methods li label {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: #e0e0e0 !important;
    font-size: 15px !important;
    background: transparent !important;
}

/* Yellow icon before payment method text */
.wc_payment_methods li label::before,
#payment .wc_payment_methods li label::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    font-weight: 900 !important;
    color: #FFFF00 !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

/* Payment name and desc wrapper */
.wc_payment_methods li label span,
#payment .wc_payment_methods li label span {
    display: inline !important;
}

/* PayFast - lightning bolt icon + descriptive text */
.wc_payment_method.payment_method_payfast label::before,
.wc_payment_methods li.payment_method_payfast label::before {
    content: "\f0e7" !important;
}

/* Hide PayFast logo, show custom text instead */
.wc_payment_method.payment_method_payfast label img,
.wc_payment_methods li.payment_method_payfast label img,
#payment .wc_payment_methods li.payment_method_payfast label img {
    display: none !important;
}

/* PayFast descriptive text - handled via JavaScript */
.wc_payment_method.payment_method_payfast label .payment-desc,
.wc_payment_methods li.payment_method_payfast label .payment-desc,
#payment .wc_payment_methods li.payment_method_payfast label .payment-desc {
    color: #999 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    margin-left: 5px !important;
    display: inline !important;
}

/* PayFast payment name */
.wc_payment_method.payment_method_payfast label .payment-name,
.wc_payment_methods li.payment_method_payfast label .payment-name,
#payment .wc_payment_methods li.payment_method_payfast label .payment-name {
    color: #e0e0e0 !important;
    font-weight: 600 !important;
}

/* Payflex descriptive text */
.wc_payment_method.payment_method_payflex label .payment-desc,
.wc_payment_methods li.payment_method_payflex label .payment-desc,
#payment .wc_payment_methods li.payment_method_payflex label .payment-desc {
    color: #666 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    margin-left: 5px !important;
    display: inline !important;
}

/* Payflex payment name */
.wc_payment_method.payment_method_payflex label .payment-name,
.wc_payment_methods li.payment_method_payflex label .payment-name,
#payment .wc_payment_methods li.payment_method_payflex label .payment-name {
    color: #777 !important;
    font-weight: 600 !important;
}

/* Bank Transfer - bank icon */
.wc_payment_method.payment_method_bacs label::before,
.wc_payment_methods li.payment_method_bacs label::before {
    content: "\f19c" !important;
}

/* PayFlex - bank/payment icon */
.wc_payment_method.payment_method_payflex label::before,
.wc_payment_methods li.payment_method_payflex label::before {
    content: "\f19c" !important;
}

/* Hide PayFlex logo */
.wc_payment_method.payment_method_payflex label img,
.wc_payment_methods li.payment_method_payflex label img,
#payment .wc_payment_methods li.payment_method_payflex label img {
    display: none !important;
}

/* PayFlex - Greyed out / Coming Soon styling */
.wc_payment_method.payment_method_payflex,
.wc_payment_methods li.payment_method_payflex,
#payment .wc_payment_methods li.payment_method_payflex {
    opacity: 1 !important;
    cursor: not-allowed !important;
    background: rgba(30, 30, 30, 0.5) !important;
    border-color: #333 !important;
}

/* Disable hover effect on Payflex */
.wc_payment_method.payment_method_payflex:hover,
.wc_payment_methods li.payment_method_payflex:hover,
#payment .wc_payment_methods li.payment_method_payflex:hover {
    border-color: #333 !important;
    background: rgba(30, 30, 30, 0.5) !important;
    box-shadow: none !important;
}

/* Grey out Payflex radio button */
.wc_payment_method.payment_method_payflex input[type="radio"],
.wc_payment_methods li.payment_method_payflex input[type="radio"],
#payment .wc_payment_methods li.payment_method_payflex input[type="radio"] {
    pointer-events: none !important;
    border-color: #555 !important;
    background: #333 !important;
    opacity: 0.6 !important;
}

/* Grey out Payflex label and icon */
.wc_payment_method.payment_method_payflex label,
.wc_payment_methods li.payment_method_payflex label,
#payment .wc_payment_methods li.payment_method_payflex label {
    color: #777 !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
}

/* Grey out Payflex icon */
.wc_payment_method.payment_method_payflex label::before,
.wc_payment_methods li.payment_method_payflex label::before,
#payment .wc_payment_methods li.payment_method_payflex label::before {
    color: #666 !important;
}

/* Payment gateway logos in labels (for other payment methods) */
.wc_payment_methods li label img,
#payment .wc_payment_methods li label img {
    max-height: 26px !important;
    width: auto !important;
    filter: brightness(0.95) !important;
}

/* Payment box (description/form below selected method) */
.wc_payment_methods li .payment_box,
#payment .wc_payment_methods li .payment_box {
    display: none !important;
    color: #999 !important;
    font-size: 13px !important;
    padding: 12px 0 0 34px !important;
    width: 100% !important;
    background: transparent !important;
    flex-basis: 100% !important;
    line-height: 1.5 !important;
}

.wc_payment_methods li .payment_box p {
    margin: 0 !important;
    color: #999 !important;
}

.wc_payment_methods li.wc_payment_method input[type="radio"]:checked ~ .payment_box,
.wc_payment_methods li input:checked ~ .payment_box,
#payment .wc_payment_methods li input[type="radio"]:checked ~ .payment_box {
    display: block !important;
}

/* Payment Logos - Below payment options */
.payment-logos,
.payment-methods .payment-logos,
.payment-methods > .payment-logos {
    display: flex !important;
    gap: 20px !important;
    margin: 20px 0 !important;
    padding: 15px 0 !important;
    background: transparent !important;
    border: none !important;
    justify-content: center !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    clear: both !important;
}

.payment-logos img,
.payment-methods .payment-logos img {
    height: 32px !important;
    width: auto !important;
    filter: brightness(1) !important;
    transition: transform 0.3s, filter 0.3s !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.payment-logos img:hover {
    transform: scale(1.05) !important;
    filter: brightness(1.1) !important;
}

/* Coming Soon badge for Payflex - Yellowish-green pill style */
.wc_payment_method.payment_method_payflex label::after,
.wc_payment_methods li[class*="payflex"] label::after,
#payment .wc_payment_methods li.payment_method_payflex label::after {
    content: "COMING SOON" !important;
    display: inline-block !important;
    margin-left: auto !important;
    padding: 6px 14px !important;
    background: linear-gradient(135deg, #9ACD32 0%, #6B8E23 100%) !important;
    color: #111 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 15px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* Privacy Policy text with yellow left border */
.woocommerce-privacy-policy-text,
#payment .woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text {
    border-left: 3px solid #FFFF00 !important;
    padding-left: 15px !important;
    margin: 20px 0 !important;
    color: #999 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    background: transparent !important;
}

.woocommerce-privacy-policy-text p {
    margin: 0 !important;
    color: #999 !important;
}

.woocommerce-privacy-policy-text a {
    color: #FFFF00 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.woocommerce-privacy-policy-text a:hover {
    text-decoration: underline !important;
}

/* Terms Checkbox */
.terms-checkbox,
.woocommerce-terms-and-conditions-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 15px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.woocommerce-terms-and-conditions-wrapper .form-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.terms-checkbox input[type="checkbox"],
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #FFFF00 !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

.terms-checkbox label,
.woocommerce-terms-and-conditions-wrapper label {
    font-size: 14px !important;
    color: #aaa !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.terms-checkbox a,
.woocommerce-terms-and-conditions-wrapper a {
    color: #FFFF00 !important;
    text-decoration: none !important;
}

.terms-checkbox a:hover,
.woocommerce-terms-and-conditions-wrapper a:hover {
    text-decoration: underline !important;
}

/* Place Order Button */
.place-order-btn,
#place_order,
button#place_order {
    width: 100% !important;
    padding: 18px 30px !important;
    background: linear-gradient(135deg, #FFFF00 0%, #e6e600 50%, #FFD700 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #111 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 25px rgba(255, 255, 0, 0.35) !important;
    margin-top: 25px !important;
}

.place-order-btn:hover,
#place_order:hover,
button#place_order:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 35px rgba(255, 255, 0, 0.5) !important;
    background: linear-gradient(135deg, #ffff33 0%, #FFFF00 50%, #ffe600 100%) !important;
}

.place-order-btn:active,
#place_order:active {
    transform: translateY(-1px) !important;
}

.place-order-btn i {
    font-size: 16px !important;
}

/* Add lock icon before Place Order text via CSS */
#place_order::before {
    content: "\f023" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    margin-right: 8px !important;
}

/* Hide coupon toggle */
.woocommerce-form-coupon-toggle {
    display: none !important;
}

/* Hide "Returning customer?" link */
.woocommerce-form-login-toggle {
    display: none !important;
}

/* Required asterisk color */
.woocommerce-checkout .required,
abbr.required {
    color: #FFFF00 !important;
    text-decoration: none !important;
}

/* Validation states */
.woocommerce-invalid input,
.woocommerce-invalid select {
    border-color: #dc3545 !important;
}

.woocommerce-validated input,
.woocommerce-validated select {
    border-color: #28a745 !important;
}

/* Notices - Full width above checkout layout */
.woocommerce-NoticeGroup,
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    background: rgba(28, 28, 28, 0.95) !important;
    border-radius: 8px !important;
    border: 1px solid #333 !important;
    color: #f0f0f0 !important;
    padding: 15px 20px !important;
    margin: 0 auto 20px !important;
    max-width: 1100px !important;
    width: calc(100% - 40px) !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Ensure notices inside checkout-layout span full width */
.checkout-layout .woocommerce-NoticeGroup,
.checkout-layout .woocommerce-error,
.checkout-layout .woocommerce-message,
.checkout-layout .woocommerce-info,
.checkout-form .woocommerce-NoticeGroup,
.checkout-form .woocommerce-error,
.checkout-form .woocommerce-message,
.checkout-form .woocommerce-info {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.woocommerce-error {
    border-color: #dc3545 !important;
    border-left: 4px solid #dc3545 !important;
}

.woocommerce-error li {
    list-style: none !important;
    margin: 0 !important;
    padding: 5px 0 !important;
}

.woocommerce-error::before {
    content: none !important;
}

.woocommerce-message {
    border-color: #28a745 !important;
    border-left: 4px solid #28a745 !important;
}

.woocommerce-info {
    border-color: #FFFF00 !important;
    border-left: 4px solid #FFFF00 !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
    .checkout-layout {
        grid-template-columns: 1fr !important;
    }

    .order-summary {
        position: static !important;
    }

    .progress-steps {
        flex-wrap: wrap !important;
        gap: 15px !important;
    }

    .progress-line {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Progress Indicator - Mobile */
    body.woocommerce-checkout .checkout-progress {
        padding: 15px 10px !important;
        margin: 15px auto 20px !important;
        border-radius: 12px !important;
    }
    body.woocommerce-checkout .checkout-progress .container {
        padding: 0 !important;
    }
    body.woocommerce-checkout .checkout-progress .progress-steps {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        justify-items: center !important;
        max-width: 100% !important;
    }
    body.woocommerce-checkout .checkout-progress .progress-step {
        min-width: auto !important;
    }
    body.woocommerce-checkout .checkout-progress .progress-line {
        display: none !important;
    }
    body.woocommerce-checkout .checkout-progress .step-circle {
        width: 45px !important;
        height: 45px !important;
    }
    body.woocommerce-checkout .checkout-progress .step-circle i {
        font-size: 18px !important;
    }
    body.woocommerce-checkout .checkout-progress .step-number {
        font-size: 9px !important;
    }
    body.woocommerce-checkout .checkout-progress .step-text {
        font-size: 11px !important;
    }

    /* Secure Checkout Header - Mobile */
    .secure-checkout-header {
        padding: 25px 15px 20px !important;
        margin-bottom: 20px !important;
    }
    .secure-checkout-header .lock-icon {
        font-size: 36px !important;
        margin-bottom: 15px !important;
    }
    .secure-checkout-header h1 {
        font-size: 22px !important;
        letter-spacing: 1px !important;
        margin-bottom: 10px !important;
    }
    .secure-checkout-header p {
        font-size: 13px !important;
    }

    /* Form Fields - Mobile */
    .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr !important;
    }

    .form-section,
    .woocommerce-billing-fields,
    .contact-information-section,
    .billing-address-section {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }

    .form-section h2,
    .woocommerce-billing-fields h3 {
        font-size: 16px !important;
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
    }

    .form-section h2 i {
        font-size: 16px !important;
    }

    /* Fitment Options - Mobile */
    .fitment-option {
        padding: 14px 15px !important;
    }
    .fitment-option .option-title {
        font-size: 14px !important;
    }
    .fitment-option .option-desc {
        font-size: 12px !important;
    }

    /* Order Summary - Mobile */
    .order-summary {
        padding: 15px !important;
        position: relative !important;
        top: 0 !important;
    }
    .order-summary > h2 {
        font-size: 18px !important;
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
    }
    .summary-row {
        padding: 10px 0 !important;
        font-size: 14px !important;
    }
    .summary-row.total {
        font-size: 20px !important;
        padding-top: 15px !important;
    }

    /* Payment Methods - Mobile */
    .wc_payment_methods li,
    #payment .wc_payment_methods li {
        padding: 12px 15px !important;
        border-radius: 20px !important;
        margin-bottom: 10px !important;
    }
    .wc_payment_methods li label {
        font-size: 13px !important;
    }
    .payment-logos img {
        height: 24px !important;
    }

    /* Place Order Button - Mobile */
    #place_order,
    button#place_order {
        padding: 15px 20px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        margin-top: 15px !important;
    }
}

/* ========== CRITICAL OVERRIDES - Province/Select2 Fix ========== */
/* These must be at the end to override all other styles */
html body.woocommerce-checkout #billing_state_field .select2-container,
html body.woocommerce-checkout #billing_state_field .select2-container--default,
html body.woocommerce-checkout p#billing_state_field .select2-container {
    height: 40px !important;
    max-height: 40px !important;
    min-height: 40px !important;
    width: 100% !important;
}

html body.woocommerce-checkout #billing_state_field .select2-container .select2-selection--single,
html body.woocommerce-checkout #billing_state_field .select2-container--default .select2-selection--single,
html body.woocommerce-checkout p#billing_state_field .select2-selection--single {
    height: 40px !important;
    max-height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    background: #2a2a2a !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

html body.woocommerce-checkout #billing_state_field .select2-selection__rendered {
    line-height: 36px !important;
    font-size: 14px !important;
    color: #fff !important;
    padding: 0 !important;
}

html body.woocommerce-checkout #billing_state_field .select2-selection__arrow {
    height: 40px !important;
    top: 0 !important;
    right: 10px !important;
}

/* Hide Additional Information section but keep Order Notes visible */
.woocommerce-additional-fields {
    display: none !important;
}

/* Order Notes field wrapper and textarea - ensure visible */
#order_comments_field {
    display: block !important;
    width: 100% !important;
}

#order_comments_field .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
}

html body.woocommerce-checkout #order_comments,
html body.woocommerce-checkout textarea#order_comments {
    height: auto !important;
    min-height: 120px !important;
    max-height: none !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========== CRITICAL - Payment Logos Visibility ========== */
/* Ensure payment logos stay visible after AJAX updates */
html body.woocommerce-checkout .payment-methods .payment-logos,
html body.woocommerce-checkout .payment-logos {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 20px !important;
    margin: 20px 0 !important;
    padding: 15px 0 !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    position: relative !important;
    clear: both !important;
}

html body.woocommerce-checkout .payment-logos img {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 32px !important;
    width: auto !important;
}

/* ========== CRITICAL - Fix Total/Payment Method Overlap ========== */
/* Use BLOCK layout for order-summary to prevent flex/sticky conflicts */
html body.woocommerce-checkout .order-summary,
body.woocommerce-checkout .order-summary,
.woocommerce-checkout .order-summary {
    display: block !important;
    position: sticky !important;
    top: 80px !important;
}

html body.woocommerce-checkout .order-summary > *,
body.woocommerce-checkout .order-summary > * {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    float: none !important;
}

html body.woocommerce-checkout #order_review,
html body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout #order_review,
#order_review {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    float: none !important;
}

html body.woocommerce-checkout .order-totals,
body.woocommerce-checkout .order-totals,
.order-totals {
    display: block !important;
    position: relative !important;
    clear: both !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 0 !important;
}

html body.woocommerce-checkout .summary-row.total,
body.woocommerce-checkout .summary-row.total,
.summary-row.total {
    display: flex !important;
    justify-content: space-between !important;
    position: relative !important;
    clear: both !important;
    padding: 20px 0 15px 0 !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 0 !important;
}

/* CRITICAL: Payment methods must be a NEW BLOCK below order totals */
html body.woocommerce-checkout .payment-methods,
body.woocommerce-checkout .payment-methods,
.order-summary .payment-methods,
.payment-methods {
    display: block !important;
    position: relative !important;
    clear: both !important;
    margin-top: 25px !important;
    padding-top: 25px !important;
    width: 100% !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    border-top: 1px solid #333 !important;
    z-index: 1 !important;
}

html body.woocommerce-checkout .payment-methods h3,
body.woocommerce-checkout .payment-methods h3,
.payment-methods h3 {
    display: block !important;
    position: relative !important;
    clear: both !important;
    width: 100% !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

html body.woocommerce-checkout #payment,
body.woocommerce-checkout #payment,
#payment {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
}

/* Prevent any absolute/fixed positioning on these elements */
.order-summary .order-totals,
.order-summary .payment-methods,
.order-summary #order_review,
.order-summary .summary-row.total {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ========== MOBILE HEADER - CHECKOUT PAGE - EXACT MATCH TO SHOP PAGE ========== */
@media (max-width: 900px) {
    /* Top Bar and Logo Banner - Fixed at top */
    body.woocommerce-checkout .top-bar,
    body.woocommerce-checkout header.top-bar,
    body.woocommerce-checkout #top-bar-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 55px !important;
        z-index: 999999 !important;
        background: #dc0000 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
    }

    body.woocommerce-checkout .logo-banner {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 55px !important;
        z-index: 999999 !important;
        background: #dc0000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Main Navigation Bar - Below red bar */
    body.woocommerce-checkout .main-nav,
    body.woocommerce-checkout nav.main-nav,
    body.woocommerce-checkout #main-navigation {
        position: fixed !important;
        top: 55px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 55px !important;
        z-index: 999998 !important;
        background: rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        transform: translateZ(0) !important;
    }

    body.woocommerce-checkout .main-nav .container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 55px !important;
        padding: 0 12px !important;
        background: transparent !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Mobile Menu Toggle Button - LEFT side */
    body.woocommerce-checkout .mobile-menu-toggle,
    body.woocommerce-checkout #mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        color: #fff !important;
        font-size: 22px !important;
        cursor: pointer !important;
        z-index: 1003 !important;
        order: 1 !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Header Right Icons - RIGHT side */
    body.woocommerce-checkout .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        order: 2 !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }

    body.woocommerce-checkout .header-right .contact-info,
    body.woocommerce-checkout .header-right .cart,
    body.woocommerce-checkout .header-right a.contact-info,
    body.woocommerce-checkout .header-right a.cart {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        position: relative !important;
        text-decoration: none !important;
    }

    body.woocommerce-checkout .header-right .contact-info:hover,
    body.woocommerce-checkout .header-right .cart:hover {
        background: rgba(255, 255, 0, 0.15) !important;
        border-color: #FFFF00 !important;
    }

    body.woocommerce-checkout .header-right .contact-info span,
    body.woocommerce-checkout .header-right .cart span,
    body.woocommerce-checkout .header-right .cart #cart-count {
        display: none !important;
    }

    body.woocommerce-checkout .header-right .contact-info i,
    body.woocommerce-checkout .header-right .cart i {
        font-size: 18px !important;
        color: #FFFF00 !important;
    }

    /* Cart Badge */
    body.woocommerce-checkout .cart-badge,
    body.woocommerce-checkout #cart-badge {
        position: absolute !important;
        top: -5px !important;
        right: -5px !important;
        background: #FFFF00 !important;
        color: #000 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        min-width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 4px !important;
    }

    body.woocommerce-checkout .cart-badge:empty,
    body.woocommerce-checkout #cart-badge:empty {
        display: none !important;
    }

    /* Search Bar - Expandable */
    body.woocommerce-checkout .search-bar,
    body.woocommerce-checkout #mobile-search-bar {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        overflow: visible !important;
    }

    body.woocommerce-checkout .search-bar input,
    body.woocommerce-checkout #mobile-search-input {
        position: absolute !important;
        right: 40px !important;
        top: 0 !important;
        background: rgba(17, 17, 17, 0.95) !important;
        border: 2px solid #FFFF00 !important;
        border-right: none !important;
        color: #fff !important;
        padding: 0 12px !important;
        border-radius: 10px 0 0 10px !important;
        width: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease,
                    visibility 0.3s ease !important;
        height: 40px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        outline: none !important;
    }

    body.woocommerce-checkout .search-bar input.expanded,
    body.woocommerce-checkout #mobile-search-input.expanded {
        width: 160px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.woocommerce-checkout .search-bar button,
    body.woocommerce-checkout #mobile-search-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        background: #FFFF00 !important;
        border: 2px solid #FFFF00 !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.woocommerce-checkout .search-bar input.expanded + button {
        border-radius: 0 10px 10px 0 !important;
    }

    body.woocommerce-checkout .search-bar button i,
    body.woocommerce-checkout #mobile-search-btn i {
        color: #111 !important;
        font-size: 16px !important;
    }

    /* Mobile Nav Menu - Floating Dropdown */
    body.woocommerce-checkout .main-nav ul,
    body.woocommerce-checkout .main-nav .nav-menu,
    body.woocommerce-checkout #nav-menu {
        display: flex !important;
        position: fixed !important;
        top: 130px !important;
        left: 20px !important;
        right: 20px !important;
        width: auto !important;
        background: rgba(20, 20, 20, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px !important;
        margin: 0 !important;
        gap: 5px !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 0, 0.2) !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        z-index: 9999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-20px) scale(0.95) !important;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.3s ease,
                    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        list-style: none !important;
    }

    body.woocommerce-checkout .main-nav ul.active,
    body.woocommerce-checkout .main-nav .nav-menu.active,
    body.woocommerce-checkout #nav-menu.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
    }

    body.woocommerce-checkout .main-nav ul li a,
    body.woocommerce-checkout #nav-menu li a {
        display: block !important;
        padding: 16px 20px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #fff !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        text-align: center !important;
        border-radius: 12px !important;
        background: transparent !important;
        text-decoration: none !important;
    }

    body.woocommerce-checkout .main-nav ul li a::after {
        display: none !important;
    }

    body.woocommerce-checkout .main-nav ul li a:hover {
        background: rgba(255, 255, 0, 0.15) !important;
        color: #FFFF00 !important;
    }

    body.woocommerce-checkout .main-nav ul li a.active {
        background: rgba(255, 255, 0, 0.25) !important;
        color: #FFFF00 !important;
        border-left: 4px solid #FFFF00 !important;
        padding-left: 16px !important;
    }

    /* Checkout Page Content - Account for fixed headers */
    body.woocommerce-checkout .checkout-page,
    body.woocommerce-checkout .checkout-wrapper,
    body.woocommerce-checkout .woocommerce-checkout {
        margin-top: 110px !important;
        padding-top: 20px !important;
    }

    body.woocommerce-checkout .checkout-header h1 {
        font-size: 24px !important;
    }

    body.woocommerce-checkout .checkout-progress {
        padding: 20px 15px !important;
    }

    body.woocommerce-checkout .woocommerce-billing-fields,
    body.woocommerce-checkout .woocommerce-additional-fields,
    body.woocommerce-checkout .order-summary {
        padding: 20px !important;
    }

    /* Header spacer */
    body.woocommerce-checkout .header-spacer {
        height: 110px !important;
    }
}