/*
Theme Name: Meraki eSIM
Theme URI: https://meraki.esim
Author: Meraki Team
Description: Custom Tailwind CSS theme for Meraki eSIM with WooCommerce support.
Version: 1.3
Text Domain: meraki-esim
*/

/* =========================================
   1. COLOR PALETTE (Source of Truth)
   ========================================= */
:root {
    --navy-900: #0F172A;
    --turquoise-100: #CCFBF1;
    --turquoise-200: #99F6E4;
    --turquoise-400: #2DD4BF;
    --turquoise-500: #14B8A6;
    --turquoise-600: #0D9488;
    --gray-50: #F8F9FB;
    --gray-200: #E5E7EB;
    --gray-500: #6B7280;
    
    --font-primary: 'Manrope', sans-serif;
}

body {
    font-family: var(--font-primary);
    color: var(--navy-900);
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   2. UTILITY OVERRIDES 
   ========================================= */
.bg-navy-900 { background-color: var(--navy-900) !important; }
.bg-turquoise-500 { background-color: var(--turquoise-500) !important; }
.bg-turquoise-400 { background-color: var(--turquoise-400) !important; }
.bg-turquoise-100 { background-color: var(--turquoise-100) !important; }
.bg-white { background-color: #ffffff !important; }
.bg-light-50 { background-color: var(--gray-50) !important; }

.text-navy-900 { color: var(--navy-900) !important; }
.text-turquoise-600 { color: var(--turquoise-600) !important; }
.text-turquoise-500 { color: var(--turquoise-500) !important; }
.text-turquoise-400 { color: var(--turquoise-400) !important; }
.text-gray-500 { color: var(--gray-500) !important; }
.text-white { color: #ffffff !important; }

.border-turquoise-400 { border-color: var(--turquoise-400) !important; }
.border-turquoise-200 { border-color: var(--turquoise-200) !important; }
.border-navy-900 { border-color: var(--navy-900) !important; }
.border-gray-200 { border-color: var(--gray-200) !important; }

/* WP Admin Fix */
body.admin-bar nav#navbar { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar nav#navbar { top: 46px; } }

/* Menu Fix */
#navbar ul li a {
    font-size: 0.875rem; 
    font-weight: 600;
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.2s;
}
#navbar ul li a:hover { color: var(--navy-900); }

/* Footer Lists */
.widget ul, .footer-menu ul { list-style: none; margin: 0; padding: 0; }
.widget ul li, .footer-menu ul li { margin-bottom: 0.75rem; }
.widget ul li a, .footer-menu ul li a { color: var(--gray-500); text-decoration: none; font-size: 0.875rem; }
.widget ul li a:hover, .footer-menu ul li a:hover { color: var(--turquoise-500); }

/* Default WP Widget Fixes */
.widget h2, .widget h3, .widget h4, .widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy-900);
    margin-bottom: 1.5rem;
}

.widget select {
    padding: 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    width: 100%;
    color: var(--gray-500);
}

/* Calendar Widget */
.widget_calendar table { width: 100%; }
.widget_calendar th, .widget_calendar td { text-align: center; padding: 0.25rem; font-size: 0.875rem; color: var(--gray-500); }

/* Search Widget */
.widget_search .search-form label { display: block; width: 100%; }
.widget_search .search-field {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 9999px;
    font-size: 0.875rem;
}
.widget_search .search-submit {
    display: none; /* Hide default submit button for cleaner look, or style it */
}

/* =========================================
   6. PRICING CARD FEATURES
   ========================================= */
.pricing-features ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.pricing-features li { 
    position: relative; 
    padding-left: 1.5rem; 
    margin-bottom: 0.75rem; 
    line-height: 1.4;
}
.pricing-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314B8A6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
    border-radius: 0;
}
.pricing-features p { 
    margin-bottom: 0.75rem; 
    line-height: 1.5;
}
.pricing-features strong {
    color: var(--navy-900);
}
   ========================================= */
.woocommerce a { color: var(--turquoise-600); }
.woocommerce a:hover { color: var(--navy-900); }

/* Buttons */
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: var(--navy-900) !important;
    color: white !important;
    border-radius: 9999px !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.woocommerce #respond input#submit:hover, 
.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover {
    background-color: var(--turquoise-500) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

/* Secondary Buttons */
.woocommerce a.button.alt,
.woocommerce button.button[name="apply_coupon"] {
    background-color: var(--turquoise-500) !important;
}

/* Inputs */
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea,
.woocommerce .quantity .qty {
    padding: 14px 16px !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--navy-900);
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* =========================================
   4. WOOCOMMERCE - SHOP GRID FIXES
   ========================================= */
/* Reset list styles for products to prevent default WP bullet points */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

@media (min-width: 768px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.woocommerce ul.products li.product {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 1.5rem;
    padding: 2rem !important;
    text-align: center;
    transition: all 0.3s ease;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box;
}

.woocommerce ul.products li.product:hover {
    border-color: var(--turquoise-200);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--navy-900) !important;
    padding: 1rem 0 0.5rem 0;
}

.woocommerce ul.products li.product .price {
    color: var(--navy-900) !important;
    font-size: 1.25rem !important;
    font-weight: 700;
    display: block;
    margin-bottom: 1.5rem;
}

/* Fix "Select Options" or "Add to cart" sticking to bottom */
.woocommerce ul.products li.product .button {
    width: 100%;
    margin-top: 1rem !important;
    display: block;
}

/* Hide star ratings on grid to keep it clean (optional) */
.woocommerce ul.products li.product .star-rating {
    margin: 0 auto 0.5rem auto;
}

/* =========================================
   5. WOOCOMMERCE - CART & CHECKOUT
   ========================================= */
.woocommerce table.shop_table {
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 1rem;
    border-radius: 0;
}
.woocommerce table.shop_table th {
    font-family: var(--font-primary);
    font-weight: 800;
    color: var(--navy-900);
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 1rem;
    border: none !important;
}
.woocommerce table.shop_table td {
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200) !important;
    border-bottom: 1px solid var(--gray-200) !important;
    padding: 1.5rem 1rem !important;
}
.woocommerce table.shop_table td:first-child { 
    border-left: 1px solid var(--gray-200); 
    border-top-left-radius: 1rem; 
    border-bottom-left-radius: 1rem;
}
.woocommerce table.shop_table td:last-child { 
    border-right: 1px solid var(--gray-200); 
    border-top-right-radius: 1rem; 
    border-bottom-right-radius: 1rem;
}

/* --- WOOCOMMERCE BLOCKS CHECKOUT SUPPORT (v1.5) --- */
/* This targets the new Gutenberg-based Checkout Block shown in your screenshot */

.wp-block-woocommerce-checkout {
    font-family: var(--font-primary);
}

/* Layout - Columns */
@media (min-width: 1024px) {
    .wc-block-checkout__main {
        padding-right: 2rem;
    }
    .wc-block-checkout__sidebar {
        padding-left: 2rem;
        border-left: 1px solid var(--gray-200);
    }
}

/* Input Fields (Floating Labels Style) */
.wc-block-components-text-input {
    border-radius: 0.75rem !important;
    border: 1px solid var(--gray-200) !important;
    background-color: #fff !important;
    transition: all 0.2s ease;
    overflow: hidden; /* Keeps the rounded corners */
}

.wc-block-components-text-input:focus-within {
    border-color: var(--turquoise-500) !important;
    box-shadow: 0 0 0 4px var(--turquoise-100) !important;
}

.wc-block-components-text-input input {
    font-size: 1rem !important;
    color: var(--navy-900) !important;
}

.wc-block-components-text-input label {
    color: var(--gray-500) !important;
    font-size: 0.85rem !important;
}

/* Buttons (Place Order) */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button {
    background-color: var(--navy-900) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 1rem 2rem !important;
    font-weight: 800 !important;
    font-size: 1.125rem !important;
    border: none !important;
    transition: all 0.3s ease !important;
    width: 100%;
    display: block;
    text-align: center;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:hover {
    background-color: var(--turquoise-500) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(20, 184, 166, 0.4);
}

/* Order Summary / Sidebar */
.wc-block-checkout__sidebar {
    background-color: var(--gray-50);
    border-radius: 1.5rem;
    padding: 2rem !important;
}

.wc-block-components-totals-item {
    border-color: var(--gray-200) !important;
}

.wc-block-components-totals-item__label {
    font-weight: 600;
    color: var(--gray-500);
}

.wc-block-components-totals-item__value {
    font-weight: 700;
    color: var(--navy-900);
}

.wc-block-components-totals-footer {
    border-top: 2px solid var(--navy-900) !important;
    padding-top: 1.5rem !important;
}

.wc-block-components-totals-footer .wc-block-components-totals-item__value {
    font-size: 1.5rem;
    font-weight: 800;
}

/* Payment Methods */
.wc-block-components-radio-control__input::before {
    background-color: var(--navy-900) !important;
}

.wc-block-components-radio-control__label {
    font-weight: 600;
    color: var(--navy-900);
}

/* Express Checkout Buttons (Stripe/GPay) */
.wc-block-components-express-payment {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--gray-200);
}

/* 1. Main Layout Container */
body .woocommerce-checkout .col2-set {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    body .woocommerce-checkout form.checkout {
        display: grid !important;
        grid-template-columns: 1.5fr 1fr !important;
        gap: 3rem !important;
        align-items: start !important;
    }

    body .woocommerce-checkout .col2-set {
        grid-column: 1;
        display: block !important;
    }

    body .woocommerce-checkout #order_review_heading,
    body .woocommerce-checkout #order_review {
        grid-column: 2;
        width: 100% !important;
        float: none !important;
        clear: none !important;
    }
    
    body .woocommerce-checkout #order_review_heading {
        margin-top: 0 !important;
    }
}

/* 2. Billing Details Section */
body .woocommerce-checkout .col2-set .col-1,
body .woocommerce-checkout .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 2rem;
}

body .woocommerce-checkout .woocommerce-billing-fields {
    background: #fff;
    padding: 0; 
}

body .woocommerce-checkout .woocommerce-billing-fields h3 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: var(--navy-900) !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-50);
}

/* 3. Form Fields Styling */
body .woocommerce form .form-row {
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
}

body .woocommerce form .form-row label {
    display: block;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: var(--navy-900) !important;
    margin-bottom: 0.5rem !important;
}

body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea,
body .woocommerce form .form-row select {
    width: 100%;
    padding: 1rem 1.25rem !important;
    border: 2px solid var(--gray-200) !important;
    border-radius: 0.75rem !important;
    background-color: #fff !important;
    font-size: 1rem !important;
    color: var(--navy-900) !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.5 !important;
}

body .woocommerce form .form-row input.input-text:focus,
body .woocommerce form .form-row textarea:focus,
body .woocommerce form .form-row select:focus {
    border-color: var(--turquoise-500) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px var(--turquoise-100) !important;
}

/* 4. Order Review & Payment */
body .woocommerce-checkout #order_review {
    background-color: #fff !important;
    padding: 2.5rem !important;
    border-radius: 1.5rem !important;
    border: 1px solid var(--gray-200) !important;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.05) !important;
}

body .woocommerce-checkout #order_review_heading {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500) !important;
    margin-bottom: 1rem !important;
}

/* Product Table */
body .woocommerce-checkout table.shop_table {
    border: none !important;
    margin-bottom: 2rem !important;
}

body .woocommerce-checkout table.shop_table th,
body .woocommerce-checkout table.shop_table td {
    border: none !important;
    border-bottom: 1px solid var(--gray-100) !important;
    padding: 1.25rem 0 !important;
    background: transparent !important;
}

body .woocommerce-checkout table.shop_table .product-name {
    font-weight: 600 !important;
    color: var(--navy-900) !important;
}

body .woocommerce-checkout table.shop_table .product-total {
    font-weight: 700 !important;
    text-align: right !important;
}

body .woocommerce-checkout table.shop_table tfoot tr.order-total th,
body .woocommerce-checkout table.shop_table tfoot tr.order-total td {
    border-top: 2px solid var(--navy-900) !important;
    border-bottom: none !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--navy-900) !important;
    padding-top: 1.5rem !important;
}

/* 5. Payment Methods - Card Style */
body #payment {
    background: transparent !important;
    border-radius: 0 !important;
}

body #payment ul.payment_methods {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 2rem !important;
}

body #payment ul.payment_methods li {
    background: #fff !important;
    border: 2px solid var(--gray-200) !important;
    border-radius: 1rem !important;
    margin-bottom: 1rem !important;
    padding: 1.25rem !important;
    list-style: none !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 0.75rem !important;
}

body #payment ul.payment_methods li:hover {
    border-color: var(--turquoise-400) !important;
    background-color: var(--turquoise-100) !important;
}

body #payment ul.payment_methods li input[type="radio"] {
    margin: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    accent-color: var(--navy-900) !important;
}

body #payment ul.payment_methods li label {
    margin: 0 !important;
    font-weight: 700 !important;
    color: var(--navy-900) !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    flex-grow: 1;
}

/* Payment Box Info */
body #payment div.payment_box {
    background-color: var(--gray-50) !important;
    color: var(--gray-500) !important;
    padding: 1rem !important;
    margin: 1rem 0 0 0 !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    border: 1px solid var(--gray-200) !important;
    position: relative !important;
    width: 100%;
    flex-basis: 100%;
}
body #payment div.payment_box::before {
    display: none !important;
}

/* 6. Place Order Button */
body #payment #place_order {
    width: 100% !important;
    background-color: var(--navy-900) !important;
    color: #fff !important;
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    padding: 1.25rem !important;
    border-radius: 9999px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.3) !important;
    float: none !important;
    margin-top: 1rem !important;
}

body #payment #place_order:hover {
    background-color: var(--turquoise-500) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px -5px rgba(20, 184, 166, 0.4) !important;
}

/* =========================================
   6. PRICING CARD FEATURES
   ========================================= */
.pricing-features ul { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
}
.pricing-features li, 
.pricing-features p { 
    position: relative; 
    padding-left: 2rem; 
    margin-bottom: 0.75rem; 
    line-height: 1.4;
    list-style: none !important;
}
.pricing-features li::before,
.pricing-features p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 20px;
    height: 20px;
    /* Updated SVG: Turquoise Checkmark */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232DD4BF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.pricing-features strong {
    color: var(--navy-900);
}