/*
Theme Name: Herbal Thought
Theme URI: https://herbalthought.com
Author: Herbal Thought
Author URI: https://herbalthought.com
Description: A premium herbal e-commerce theme built with Tailwind CSS and WooCommerce integration. Features customizable colors, fonts, and WhatsApp integration.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: herbal-thought
Tags: e-commerce, woocommerce, custom-logo, custom-colors, custom-menu

Herbal Thought Theme - Natural wellness e-commerce.
*/

/* Fix horizontal overflow on mobile */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Ensure main content doesn't cause overflow */
main,
.woocommerce,
.woocommerce-page {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Checkout page container fix */
.woocommerce-checkout .woocommerce {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
}

/* Fix all woocommerce forms */
.woocommerce form,
.woocommerce-checkout form.checkout {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ===== SINGLE PRODUCT MOBILE STYLES ===== */
@media (max-width: 768px) {

    /* Product info container */
    .single-product .product-info {
        padding: 0 !important;
    }

    /* Product title */
    .single-product .product-title,
    .woocommerce div.product .product_title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
    }

    /* Product description - prevent overflow */
    .single-product .product-description,
    .woocommerce div.product .woocommerce-product-details__short-description {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    /* Add to Cart form - stack on mobile */
    .single-product form.cart,
    form.cart {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }

    /* Quantity and buttons row */
    .single-product .add-to-cart-row,
    form.cart>div:first-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        justify-content: center !important;
    }

    /* Add to Cart button - full width on mobile */
    .single-product #ajax-add-to-cart,
    .single-product .single_add_to_cart_button {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
    }

    /* Buy Now button - full width on mobile */
    .single-product #buy-now-btn {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        padding: 1rem !important;
    }

    /* Quantity selector */
    .single-product .quantity-selector,
    form.cart .quantity {
        flex: 0 0 auto !important;
    }

    /* Wishlist button */
    .single-product .wishlist-btn {
        flex: 0 0 auto !important;
        width: 48px !important;
        height: 48px !important;
    }

    /* Product gallery thumbnails */
    .single-product #productGallery {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Product tabs */
    .single-product .product-tabs {
        flex-direction: column !important;
    }

    /* Related products grid */
    .single-product .related-products .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {

    /* Even smaller title */
    .single-product .product-title,
    .woocommerce div.product .product_title {
        font-size: 1.25rem !important;
    }

    /* Price */
    .single-product .product-price {
        font-size: 1.25rem !important;
    }

    /* Smaller buttons */
    .single-product #ajax-add-to-cart,
    .single-product #buy-now-btn {
        padding: 0.875rem !important;
        font-size: 0.9rem !important;
    }

    /* Related products - single column on very small */
    .single-product .related-products .grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== CHECKOUT MOBILE STYLES ===== */
/* Reorder checkout sections on mobile: Billing first, Order summary second */
@media (max-width: 768px) {

    /* Make the checkout form a flex container */
    .woocommerce-checkout .woocommerce,
    form.woocommerce-checkout,
    .woocommerce form.checkout {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Coupon toggle and form - show first */
    .woocommerce-form-coupon-toggle,
    .checkout_coupon,
    .woocommerce-info {
        order: 0 !important;
    }

    /* Billing details - show second on mobile */
    .woocommerce-checkout #customer_details,
    .woocommerce-checkout .col2-set,
    #customer_details {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 1.5rem !important;
    }

    /* Order review heading - show third */
    .woocommerce-checkout #order_review_heading,
    #order_review_heading {
        order: 2 !important;
        margin-top: 1rem !important;
    }

    /* Order review/summary - show fourth on mobile */
    .woocommerce-checkout #order_review,
    #order_review,
    .woocommerce-checkout-review-order {
        order: 3 !important;
        width: 100% !important;
    }

    /* Ensure full width columns */
    .woocommerce-checkout .col-1,
    .woocommerce-checkout .col-2,
    #customer_details .col-1,
    #customer_details .col-2 {
        width: 100% !important;
        float: none !important;
        margin-bottom: 1rem !important;
    }

    /* Fix coupon form layout */
    .woocommerce-checkout .coupon {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
}

/* ===== THANK YOU / ORDER RECEIVED PAGE STYLES ===== */
.woocommerce-order-received .woocommerce {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Thank you message - already styled nicely */
.woocommerce-order-received .woocommerce-thankyou-order-received,
.woocommerce-order-received .woocommerce-notice--success {
    background: linear-gradient(135deg, #2D5A3D 0%, #1E3D2A 100%);
    color: white !important;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    text-align: center;
    font-size: 1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Order details overview boxes */
.woocommerce-order-received .woocommerce-order-overview {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    list-style: none !important;
    padding-left: 1.5rem !important;
}

.woocommerce-order-received .woocommerce-order-overview li {
    flex: 1 1 200px;
    text-align: center;
    padding: 1.25rem 1rem;
    background: #FAF6F1;
    border-radius: 0.75rem;
    border: 1px solid #e5e0d8;
}

.woocommerce-order-received .woocommerce-order-overview li:before {
    display: none !important;
}

.woocommerce-order-received .woocommerce-order-overview li strong {
    display: block;
    color: #2D5A3D;
    font-size: 1.1rem;
    margin-top: 0.5rem;
    font-weight: 700;
}

/* Section titles */
.woocommerce-order-received section.woocommerce-order-details,
.woocommerce-order-received section.woocommerce-customer-details {
    margin-bottom: 2rem;
}

.woocommerce-order-received h2.woocommerce-order-details__title,
.woocommerce-order-received h2.woocommerce-column__title {
    color: #2D5A3D;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #2D5A3D;
    display: inline-block;
}

/* Order details table */
.woocommerce-order-received .woocommerce-table--order-details {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.woocommerce-order-received .woocommerce-table--order-details th,
.woocommerce-order-received .woocommerce-table--order-details td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
}

.woocommerce-order-received .woocommerce-table--order-details thead th {
    background: #2D5A3D;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.woocommerce-order-received .woocommerce-table--order-details tbody tr:hover {
    background: #fafafa;
}

.woocommerce-order-received .woocommerce-table--order-details tfoot th,
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
    background: #FAF6F1;
    font-weight: 600;
    color: #333;
}

.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
    background: #2D5A3D;
    color: white;
    font-size: 1.1rem;
}

/* Billing and Shipping address sections */
.woocommerce-order-received .woocommerce-customer-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e0d8;
}

.woocommerce-order-received .woocommerce-customer-details address {
    font-style: normal;
    line-height: 1.8;
    color: #555;
}

.woocommerce-order-received .woocommerce-customer-details address p {
    margin: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .woocommerce-order-received .woocommerce-order-overview {
        flex-direction: column;
    }

    .woocommerce-order-received .woocommerce-order-overview li {
        flex: 1 1 100%;
    }

    .woocommerce-order-received .woocommerce-thankyou-order-received {
        font-size: 0.9rem;
        padding: 1.25rem;
    }

    .woocommerce-order-received .woocommerce-customer-details {
        grid-template-columns: 1fr;
    }

    .woocommerce-order-received .woocommerce-table--order-details th,
    .woocommerce-order-received .woocommerce-table--order-details td {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}