/**
 * OG8 Med Custom Styles
 */

/* WooCommerce Product Grid */
.woocommerce ul.products li.product {
    text-align: center;
}
.woocommerce ul.products li.product a img {
    margin: 0 auto;
}
.woocommerce ul.products li.product .price {
    color: var(--og8-primary);
}

/* ============================================
   Checkout Page - Full Width + 2 Column Layout
   ============================================ */

/* Force full width on all containers */
body.woocommerce-checkout,
body.woocommerce-checkout #og8-main,
body.woocommerce-checkout #og8-wrapper,
body.woocommerce-checkout .og8-wrapper,
.og8-checkout-full {
    max-width: 100% !important;
    width: 100% !important;
}

/* Main container */
.og8-checkout-full .og8-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 2rem !important;
    width: 100% !important;
}

/* ============================================
   CHECKOUT FORM - 2 COLUMN GRID (KEY FIX)
   ============================================ */

/* Reset form.checkout children - this is the key fix */
form.checkout > * {
    grid-column: auto !important;
    grid-row: auto !important;
}

/* Force customer details to LEFT column */
form.checkout #customer_details {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
}

/* Force order review to RIGHT column */
form.checkout #order_review {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 100px !important;
    width: 100% !important;
}

/* Grid container */
form.checkout {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
}

/* Hide any extra elements that might be in wrong position */
form.checkout .col2-set {
    grid-column: 1 !important;
}

form.checkout #order_review_heading {
    grid-column: 2 !important;
}

/* ============================================
   Field Styling
   ============================================ */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    background: #fff !important;
    padding: 2rem !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(30, 58, 95, 0.08) !important;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
    font-size: 1.25rem !important;
    color: #1e3a5f !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 2px solid #1e3a5f !important;
    font-weight: 700 !important;
}

.woocommerce-checkout .form-row {
    margin-bottom: 1.25rem !important;
    width: 100% !important;
}

.woocommerce-checkout .form-row label {
    font-weight: 600 !important;
    color: #1e3a5f !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    padding: 0.875rem 1rem !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    width: 100% !important;
    background: #fff !important;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: #1e3a5f !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1) !important;
}

/* First/Last name side by side */
#billing_first_field,
#billing_last_field,
#shipping_first_field,
#shipping_last_field {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
}

/* ============================================
   Order Review Section
   ============================================ */
#order_review {
    background: #fff !important;
    padding: 2rem !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 24px rgba(30, 58, 95, 0.12) !important;
    width: 100% !important;
    max-width: 400px !important;
}

#order_review_heading {
    font-size: 1.25rem !important;
    color: #1e3a5f !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 2px solid #1e3a5f !important;
    font-weight: 700 !important;
}

/* ============================================
   Payment Methods
   ============================================ */
#payment {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 1.5rem 0 0 !important;
    width: 100% !important;
}

#payment .wc_payment_methods {
    border: none !important;
    padding: 0 !important;
}

#payment .wc_payment_method {
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
    background: #f8f9fa !important;
}

#payment .wc_payment_method:hover,
#payment .wc_payment_method.active {
    border-color: #1e3a5f !important;
    background: #fff !important;
}

#payment .wc_payment_method label {
    font-weight: 600 !important;
    color: #1e3a5f !important;
    cursor: pointer !important;
}

#payment .payment_box {
    background: #fff !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    margin-top: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
}

/* ============================================
   Place Order Button
   ============================================ */
#place_order {
    width: 100% !important;
    background: linear-gradient(135deg, #1e3a5f, #2d4a6f) !important;
    color: #fff !important;
    padding: 1.25rem 2rem !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 1rem !important;
}

#place_order:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(30, 58, 95, 0.25) !important;
}

/* ============================================
   Order Table
   ============================================ */
.woocommerce-checkout .shop_table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.woocommerce-checkout .shop_table th {
    color: #4a5568 !important;
    font-weight: 500 !important;
}

.woocommerce-checkout .shop_table td {
    text-align: right !important;
    color: #1e3a5f !important;
    font-weight: 600 !important;
}

.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td {
    border-top: 2px solid #1e3a5f !important;
    padding-top: 1rem !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
    form.checkout {
        grid-template-columns: 1fr !important;
    }
    
    #customer_details {
        grid-column: 1 !important;
    }
    
    #order_review {
        grid-column: 1 !important;
        position: static !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .og8-checkout-full .og8-container {
        padding: 1.5rem 1rem !important;
    }
    
    #billing_first_field,
    #billing_last_field,
    #shipping_first_field,
    #shipping_last_field {
        grid-template-columns: 1fr !important;
    }
    
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        padding: 1.5rem !important;
    }
}