/**
 * STYLE UPDATES FOR FULL AHEAD SLOW
 * Version: 7.1.1
 * 
 * Updates include:
 * 1. Form fields: Muted brown initially, gold on hover/focus
 * 2. Buttons: Standardized using landing page pattern
 * 3. Checkout layout improvements
 * 4. Order table customizations
 */

/* ============================================================================
   GLOBAL FORM FIELD UPDATES
   All inputs start with muted brown, transition to gold on hover/focus
   ============================================================================ */

/* Update all input types with consistent borders */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
select {
    border: 1px solid var(--color-accent-muted) !important; /* Muted brown initially */
}

/* Textareas also get muted brown */
textarea {
    border: 1px solid var(--color-accent-muted) !important; /* Muted brown initially */
}

/* All form elements get gold on focus */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-accent-gold) !important; /* Gold on focus */
}

/* All form elements get gold on hover */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover {
    border-color: var(--color-accent-gold) !important; /* Gold on hover */
}

/* Checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-accent-muted);
    border: 1px solid var(--color-accent-muted);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked,
input[type="checkbox"]:hover,
input[type="radio"]:hover {
    accent-color: var(--color-accent-gold);
}

/* Select2 dropdowns (WooCommerce country/state selects) */
.select2-container .select2-selection--single {
    border: 1px solid var(--color-accent-muted) !important;
}

.select2-container:hover .select2-selection--single,
.select2-container--focus .select2-selection--single,
.select2-container--open .select2-selection--single {
    border-color: var(--color-accent-gold) !important;
}

/* ============================================================================
   BUTTON STANDARDIZATION
   Based on landing page pattern: muted brown bg, dark text, line-height: 1
   ============================================================================ */

/* Standard button pattern from landing page */
button,
input[type="submit"],
input[type="button"],
.button {
    padding: 10px var(--space-md) 14px var(--space-md); /* Specific padding from landing */
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 900;
    background: var(--color-accent-gold) !important; /* Gold background */
    color: var(--color-text-dark) !important; /* Dark text */
    border: 1px solid var(--color-accent-muted) !important; /* Muted brown border */
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: opacity var(--transition-fast);
    min-height: 44px; /* Maintain touch target */
    line-height: 1 !important; /* Critical from landing page */
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover {
    opacity: 0.9 !important; /* Subtle transparency on hover */
    transform: none !important; /* Remove the translateY */
}

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Specific button overrides 
.show-billing-btn,
#show-billing-btn {
    color: var(--color-text-dark) !important;  Dark text 
    border: 1px solid var(--color-accent-muted) !important;
    padding: 10px var(--space-md) 14px var(--space-md);
    line-height: 1 !important;
}

.show-billing-btn:hover,
#show-billing-btn:hover {
    background: var(--color-accent-gold) !important;  Gold on hover 
    border-color: var(--color-accent-gold) !important;
}

 Place order button - matches pattern 
#place_order {
    background: var(--color-accent-gold) !important;
    color: var(--color-text-dark) !important;
    border: 1px solid var(--color-accent-muted) !important;
    padding: 10px var(--space-md) 14px var(--space-md);
    line-height: 1 !important;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 900;
    width: 100%;
    min-height: 44px;
    transition: opacity var(--transition-fast);
}

#place_order:hover {
    opacity: 0.9 !important;
    transform: none !important;
}*/

/* ============================================================================
   CHECKOUT LAYOUT IMPROVEMENTS
   ============================================================================ */

/* Billing fields container with payment inside */
.woocommerce-billing-fields {
    background: var(--color-bg-light);
    padding: var(--space-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-md);
}

/* Section headings */
.woocommerce-billing-fields h3 {
    font-size: var(--font-size-medium);
    color: var(--color-text-dark);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-accent-muted);
}

/* Payment section inside billing container */
#payment.woocommerce-checkout-payment {
    background: transparent !important; /* Remove white background */
    padding: var(--space-md) 0 0 0 !important; /* Only top padding */
    margin: var(--space-md) 0 0 0 !important; /* Only top margin */
    border-radius: 0 !important;
}

/* Payment heading */
#payment h3 {
    font-size: var(--font-size-medium);
    color: var(--color-text-dark);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-accent-muted);
}

/* ============================================================================
   ORDER TABLE CUSTOMIZATION
   ============================================================================ */

/* Order review table structure */
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md);
}

/* Remove ALL default borders */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: var(--space-sm);
    border: none !important; /* Remove all borders initially */
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 900;
    color: var(--color-text-dark) !important;
}

/* Header row - add border below */
.woocommerce-checkout-review-order-table thead tr {
    border-bottom: 1px solid var(--color-accent-muted);
}

/* Product name column - centered */
.woocommerce-checkout-review-order-table .product-name {
    text-align: center !important;
}

/* Subtotal row - add border above in last column only */
.woocommerce-checkout-review-order-table .cart-subtotal td:last-child {
    border-top: 1px solid var(--color-accent-muted);
    padding-top: var(--space-md);
}

/* Total row - add border above in last column only */
.woocommerce-checkout-review-order-table .order-total td:last-child {
    border-top: 2px solid var(--color-accent-muted);
    padding-top: var(--space-md);
}

/* Hide "Quality: Lo-fi" etc from product column */
.woocommerce-checkout-review-order-table .product-name .product-quality {
    display: none !important;
}

/* Format shipping as £0 */
.woocommerce-checkout-review-order-table .shipping td .amount {
    /* Will be handled via PHP/filter */
}

/* Quantity column styling */
.woocommerce-checkout-review-order-table .product-quantity {
    text-align: center;
    color: var(--color-text-dark);
    font-weight: 900;
    width: 60px;
}

/* ============================================================================
   ADDITIONAL CHECKOUT REFINEMENTS
   ============================================================================ */

/* Remove extra spacing between sections */
.woocommerce-checkout #customer_details {
    margin-bottom: 0 !important;
}

/* Shipping checkbox label styling */
.shipping-fields-in-billing h3 label {
    font-size: var(--font-size-base);
    font-weight: 900;
    color: var(--color-text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: 0;
}

/* Order notes section styling */
.order-notes-in-billing {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-accent-muted);
}

/* Payment section inside billing */
.payment-in-billing {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-accent-muted);
}

/* Remove duplicate borders/lines */
.woocommerce table.shop_table {
    border: none !important;
}

.woocommerce table.shop_table tbody {
    border: none !important;
}

.woocommerce table.shop_table tfoot tr:first-child {
    border-top: none !important;
}

/**
 * CHECKOUT FORM FIXES
 * Add this to your style-updates.css or create a new file
 * 
 * Fixes:
 * 1. Country dropdown height inconsistency (Select2)
 * 2. Checkbox border styling
 */

/* ============================================================================
   FIX 1: COUNTRY DROPDOWN HEIGHT (Select2)
   ============================================================================ */

/* Target Select2 containers specifically */
.woocommerce-checkout .select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
    height: 40px !important; /* Match other inputs */
    line-height: 1 !important; /* Account for border */
}

/* The rendered text inside Select2 */
.woocommerce-checkout .select2-container .select2-selection__rendered,
.select2-container--default .select2-selection__rendered {
    line-height: 38px !important;
    padding: 0 var(--space-sm) !important;
    font-size: var(--font-size-base) !important;
    font-family: var(--font-family) !important;
    font-weight: 900 !important;
}

/* The arrow container */
.woocommerce-checkout .select2-container .select2-selection__arrow,
.select2-container--default .select2-selection__arrow {
    height: 38px !important;
    top: 0 !important;
}

/* Ensure consistent border styling */
.woocommerce-checkout .select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
    border: 1px solid var(--color-accent-muted) !important;
    border-radius: var(--border-radius) !important;
    background: var(--color-bg-light) !important;
}

/* Hover state for Select2 */
.woocommerce-checkout .select2-container:hover .select2-selection--single,
.select2-container--default:hover .select2-selection--single {
    border-color: var(--color-accent-gold) !important;
}

/* Focus state for Select2 */
.woocommerce-checkout .select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--color-accent-gold) !important;
    outline: none !important;
}

/* ============================================================================
   FIX 2: CHECKBOX STYLING (Override Twenty Twenty-One)
   ============================================================================ */

/* Reset Twenty Twenty-One checkbox styles */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout .input-checkbox,
.woocommerce-form__input-checkbox,
input#mailpoet_woocommerce_checkout_optin {
    /* Reset appearance */
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    
    /* Size and spacing */
    width: 20px !important;
    height: 20px !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    
    /* Border styling - using outline instead of border for native checkboxes */
    outline: 1px solid var(--color-accent-muted) !important;
    outline-offset: -1px !important;
    border-radius: 3px !important;
    
    /* Ensure it's clickable */
    cursor: pointer !important;
    vertical-align: middle !important;
    
    /* Remove any background from parent theme */
    background: var(--color-bg-light) !important;
}

/* Hover state for checkboxes */
.woocommerce-checkout input[type="checkbox"]:hover,
.woocommerce-checkout .input-checkbox:hover,
input#mailpoet_woocommerce_checkout_optin:hover {
    outline-color: var(--color-accent-gold) !important;
}

/* Focus state for checkboxes */
.woocommerce-checkout input[type="checkbox"]:focus,
.woocommerce-checkout .input-checkbox:focus,
input#mailpoet_woocommerce_checkout_optin:focus {
    outline: 2px solid var(--color-accent-gold) !important;
    outline-offset: 0 !important;
}

/* Checked state */
.woocommerce-checkout input[type="checkbox"]:checked,
.woocommerce-checkout .input-checkbox:checked,
input#mailpoet_woocommerce_checkout_optin:checked {
    accent-color: var(--color-accent-gold) !important;
    background: var(--color-bg-light) !important;
}

/* Alternative approach using custom checkbox styling */
.woocommerce-checkout input[type="checkbox"].custom-styled {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    width: 20px !important;
    height: 20px !important;
    border: 1px solid var(--color-accent-muted) !important;
    border-radius: 3px !important;
    background: var(--color-bg-light) !important;
    position: relative !important;
    cursor: pointer !important;
}

.woocommerce-checkout input[type="checkbox"].custom-styled:hover {
    border-color: var(--color-accent-gold) !important;
}

.woocommerce-checkout input[type="checkbox"].custom-styled:checked {
    background: var(--color-accent-gold) !important;
    border-color: var(--color-accent-gold) !important;
}

.woocommerce-checkout input[type="checkbox"].custom-styled:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-text-dark);
    /*font-size: 14px;*/
    font-weight: 900;
}

/* Labels next to checkboxes */
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: var(--font-size-base) !important;
    font-family: var(--font-family) !important;
    font-weight: 900 !important;
}

/* ============================================================================
   NUCLEAR OPTION: Override Twenty Twenty-One with more specificity
   ============================================================================ */

/* If the above doesn't work, use this more aggressive override */
body.woocommerce-checkout input[type="checkbox"],
body.woocommerce-checkout .woocommerce-form__input.woocommerce-form__input-checkbox,
body #mailpoet_woocommerce_checkout_optin {
    border: 1px solid var(--color-accent-muted) !important;
    outline: none !important;
}

body.woocommerce-checkout input[type="checkbox"]:hover,
body.woocommerce-checkout .woocommerce-form__input.woocommerce-form__input-checkbox:hover,
body #mailpoet_woocommerce_checkout_optin:hover {
    border-color: var(--color-accent-gold) !important;
}

/* Remove any box-shadow from Twenty Twenty-One */
.woocommerce-checkout input[type="checkbox"],
#mailpoet_woocommerce_checkout_optin {
    box-shadow: none !important;
}

.woocommerce-terms-and-coditions-wrapper {
    background:var(--color-bg-dark);
}