/* ==========================================================================
   Supreme Meds Checkout — Light Modern Theme
   ========================================================================== */

/* ─── Hide address fields by default (curbside). JS shows them for delivery. ─── */

#billing_country_field,
#billing_address_1_field,
#billing_address_2_field,
#billing_city_field,
#billing_state_field,
#billing_postcode_field {
    display: none;
}

/* ==========================================================================
   Two-Column Grid Layout
   ========================================================================== */

form.checkout.woocommerce-checkout {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    column-gap: 28px !important;
    row-gap: 0 !important;
    align-items: start !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Left column by default */
form.checkout.woocommerce-checkout > * {
    grid-column: 1 !important;
}

/* Order review heading — hide (rendered via ::before inside card) */
body.woocommerce-checkout #order_review_heading {
    display: none !important;
}

/* Order review — right column, sticky */
body.woocommerce-checkout #order_review {
    grid-column: 2 !important;
    grid-row: 1 / span 20 !important;
    position: sticky !important;
    top: 24px !important;
    align-self: start !important;
}

/* ==========================================================================
   Fulfillment Section
   ========================================================================== */

#smc-fulfillment-section {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both;
    margin-bottom: 20px;
    padding: 24px 24px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

#smc-fulfillment-section h3 {
    color: #2e7d32;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px;
}

#smc-fulfillment-section h3:not(:first-child) {
    margin-top: 22px;
}

/* ─── Toggle Buttons (Curbside / Delivery) ─── */

.smc-toggle-group {
    display: flex;
    gap: 10px;
}

.smc-toggle-btn {
    flex: 1;
    padding: 13px 20px;
    border: 2px solid #ddd;
    background: #fff;
    color: #444;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.smc-toggle-btn:hover {
    border-color: #66bb6a;
    background: #f1f8e9;
}

.smc-toggle-btn.active {
    border-color: #2e7d32;
    background: #2e7d32;
    color: #fff;
}

/* ─── Date Buttons ─── */

.smc-date-group {
    display: flex;
    gap: 10px;
}

.smc-date-btn {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #ddd;
    background: #fff;
    color: #444;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.smc-date-btn:hover {
    border-color: #66bb6a;
    background: #f1f8e9;
}

.smc-date-btn.active {
    border-color: #2e7d32;
    background: #2e7d32;
    color: #fff;
}

/* ─── Time Slot Grid ─── */

.smc-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.smc-time-btn {
    padding: 11px 10px;
    border: 2px solid #ddd;
    background: #fff;
    color: #444;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.smc-time-btn:hover {
    border-color: #66bb6a;
    background: #f1f8e9;
}

.smc-time-btn.active {
    border-color: #2e7d32;
    background: #2e7d32;
    color: #fff;
}

.smc-time-btn.smc-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    text-decoration: line-through;
    background: #f9f9f9;
    border-color: #e8e8e8;
    color: #aaa;
}

.smc-time-btn.smc-disabled:hover {
    background: #f9f9f9;
    border-color: #e8e8e8;
}

/* ==========================================================================
   Billing Details
   ========================================================================== */

body.woocommerce-checkout #customer_details {
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    padding: 24px 24px !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}

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

body.woocommerce-checkout .woocommerce-billing-fields {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

body.woocommerce-checkout .woocommerce-billing-fields h3 {
    color: #2e7d32 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 20px !important;
}

/* ─── Form Rows ─── */

body.woocommerce-checkout .form-row {
    width: 100% !important;
    float: none !important;
    clear: both;
    margin-bottom: 16px !important;
    padding: 0 !important;
}

body.woocommerce-checkout .form-row label {
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* ─── Inputs ─── */

body.woocommerce-checkout .form-row input[type="text"],
body.woocommerce-checkout .form-row input[type="email"],
body.woocommerce-checkout .form-row input[type="tel"],
body.woocommerce-checkout .form-row input[type="number"],
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    padding: 13px 14px !important;
    font-size: 15px !important;
    color: #222 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    opacity: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

body.woocommerce-checkout .form-row input[type="text"]:focus,
body.woocommerce-checkout .form-row input[type="email"]:focus,
body.woocommerce-checkout .form-row input[type="tel"]:focus,
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .form-row textarea:focus {
    border-color: #2e7d32 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12) !important;
}

/* Native select dropdown arrow (appearance:none removes it) */
body.woocommerce-checkout .form-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
    cursor: pointer !important;
}

/* Force native select for state field — hide selectWoo overlay, show real <select> */
#billing_state_field .select2-container {
    display: none !important;
}

#billing_state_field select.select2-hidden-accessible {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 13px 36px 13px 14px !important;
    border: 1px solid #ccc !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* Select2 dropdown overrides (country field etc.) */
body.woocommerce-checkout .select2-container {
    width: 100% !important;
}

body.woocommerce-checkout .select2-container .select2-selection--single {
    height: auto !important;
    min-height: 48px !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
}

body.woocommerce-checkout .select2-container .select2-selection__rendered {
    padding: 13px 14px !important;
    line-height: 1.3 !important;
    color: #222 !important;
}

/* ==========================================================================
   Order Review Card (Right Column)
   ========================================================================== */

body.woocommerce-checkout #order_review {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    padding: 24px 20px !important;
    margin-bottom: 20px !important;
}

/* Heading inside the card */
body.woocommerce-checkout #order_review::before {
    content: "Your Order";
    display: block;
    color: #2e7d32;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* ─── Review Table ─── */

body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 0 !important;
    border: none !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
    background: transparent !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 0 0 10px !important;
    border: none !important;
    border-bottom: 1px solid #eee !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td {
    padding: 14px 0 !important;
    border: none !important;
    border-bottom: 1px solid #f3f3f3 !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    color: #333 !important;
    background: transparent !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr:last-child td {
    border-bottom: none !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    padding: 8px 0 !important;
    border: none !important;
    font-size: 14px !important;
    color: #555 !important;
    background: transparent !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:first-child th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:first-child td {
    padding-top: 14px !important;
    border-top: 1px solid #eee !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2e7d32 !important;
    border-bottom: none !important;
    padding-top: 14px !important;
    border-top: 2px solid #2e7d32 !important;
}

/* Product thumbnails */
.smc-order-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.smc-order-item .smc-order-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eee;
    flex-shrink: 0;
}

.smc-order-item .smc-order-item-name {
    font-size: 14px;
    font-weight: 500;
    color: #222;
    line-height: 1.4;
}

/* ==========================================================================
   Payment Method
   ========================================================================== */

body.woocommerce-checkout #payment {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
    margin-top: 14px !important;
}

body.woocommerce-checkout #payment ul.payment_methods {
    padding: 0 !important;
    margin: 0 0 12px !important;
    border: none !important;
    background: none !important;
}

body.woocommerce-checkout #payment .payment_method_smc_pay_on_pickup label {
    font-weight: 600 !important;
    color: #2e7d32 !important;
    font-size: 14px !important;
}

body.woocommerce-checkout #payment li {
    background: transparent !important;
}

body.woocommerce-checkout #payment div.payment_box {
    background: #f5f8f5 !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    color: #555 !important;
    margin-top: 8px !important;
    border: 1px solid #e4ede4 !important;
    font-size: 13px !important;
}

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

/* ─── Place Order Button ─── */

body.woocommerce-checkout #place_order {
    background: #2e7d32 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 40px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    width: 100% !important;
    text-transform: uppercase !important;
    margin-top: 4px !important;
}

body.woocommerce-checkout #place_order:hover {
    background: #1b5e20 !important;
}

/* ─── Privacy Policy Text ─── */

body.woocommerce-checkout .woocommerce-privacy-policy-text {
    font-size: 12px !important;
    color: #888 !important;
    margin-bottom: 12px !important;
}

body.woocommerce-checkout .woocommerce-privacy-policy-text a {
    color: #2e7d32 !important;
}

/* ==========================================================================
   Coupon
   ========================================================================== */

body.woocommerce-checkout .woocommerce-form-coupon-toggle {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    padding: 14px 20px !important;
    margin-bottom: 20px !important;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    color: #555 !important;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none !important;
}

body.woocommerce-checkout .checkout_coupon {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    padding: 20px 24px !important;
    border: none !important;
    margin-bottom: 20px !important;
}

/* Hide "Additional information" heading */
.woocommerce-additional-fields:empty,
.woocommerce-additional-fields > h3:only-child {
    display: none;
}

/* ==========================================================================
   Thank-You / Order Confirmation Page
   ========================================================================== */

.smc-thankyou-page .woocommerce-order-overview,
.smc-thankyou-page .woocommerce-order-details,
.smc-thankyou-page .woocommerce-customer-details,
.smc-thankyou-page .woocommerce-order > p:not(.smc-thankyou-schedule):not(.smc-thankyou-subtext),
.smc-thankyou-page .order-again {
    display: none !important;
}

.smc-thankyou-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 50px 40px;
    margin: 0 auto 32px;
    max-width: 680px;
    text-align: center;
}

.smc-thankyou-heading {
    font-size: 36px;
    font-weight: 800;
    color: #1a2332;
    margin: 0 0 24px;
    line-height: 1.2;
}

.smc-thankyou-schedule {
    font-size: 19px;
    color: #444;
    line-height: 1.6;
    margin: 0 0 20px;
}

.smc-thankyou-schedule strong {
    color: #1a2332;
}

.smc-thankyou-subtext {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   Responsive — Stack on Mobile
   ========================================================================== */

@media (max-width: 820px) {
    form.checkout.woocommerce-checkout {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }

    body.woocommerce-checkout #order_review {
        grid-column: 1 !important;
        grid-row: auto !important;
        position: static !important;
    }

    .smc-toggle-group,
    .smc-date-group {
        flex-direction: column;
    }

    .smc-time-grid {
        grid-template-columns: 1fr 1fr;
    }

    #smc-fulfillment-section,
    body.woocommerce-checkout #customer_details,
    body.woocommerce-checkout #order_review {
        padding: 18px 16px !important;
    }

    .smc-thankyou-card {
        padding: 36px 22px;
    }

    .smc-thankyou-heading {
        font-size: 26px;
    }

    .smc-thankyou-schedule {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .smc-time-grid {
        grid-template-columns: 1fr;
    }
}