/*
 Theme Name:   Research Peptides Lab (Premium)
 Theme URI:    https://researchpeptideslab.com
 Description:  GeneratePress Child Theme - Definitive Amino Club Style.
 Author:       Antigravity
 Template:     generatepress
 Version:      1.2.1
*/

/* -------------------------------------------------------------------------- */
/* DESIGN TOKENS
/* -------------------------------------------------------------------------- */

:root {
    --primary-navy: #3A8AD7;
    --accent-red: #dc2626;
    --bg-light-blue: #eff6ff;
    --bg-gray: #F9FAFB;
    --text-dark: #1A1A1A;
    --text-gray: #666666;
    --border-color: #E5E7EB;
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* -------------------------------------------------------------------------- */
/* LAYOUT PRECISION (The "No-Glitches" Reset)
/* -------------------------------------------------------------------------- */

/* Prevent GeneratePress from box-restricting our design */
.grid-container { max-width: 100% !important; padding: 0 !important; }
.site-content { display: block !important; }
.content-area { width: 100% !important; margin: 0 !important; }
body { background: #fff !important; margin: 0; padding: 0; font-family: 'Inter', sans-serif !important; }

/* The Definitive Container for Amino Club Style */
.boutique-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* Typography Scale */
h1, h2, h3, h4, h5, h6 { 
    font-family: 'Inter', sans-serif !important; 
    font-weight: 800 !important; 
    color: var(--primary-navy); 
    line-height: 1.1;
    margin: 0;
}

h1 { font-size: 64px; letter-spacing: -2px; }
h2 { font-size: 40px; letter-spacing: -1px; }

p { color: var(--text-gray); line-height: 1.6; }

a { transition: color 0.2s ease; }
a:hover { color: var(--primary-navy) !important; }

/* -------------------------------------------------------------------------- */
/* COMPONENTS
/* -------------------------------------------------------------------------- */

/* Premium Liquid Glass Buttons */
.button, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button {
    background: linear-gradient(135deg, rgba(58, 138, 215, 0.85), rgba(30, 90, 160, 0.9)) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 16px 36px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    backdrop-filter: blur(12px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
    box-shadow: 
        0 4px 16px rgba(58, 138, 215, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Glass shine overlay */
.button::before,
.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce input.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    transition: left 0.5s ease !important;
}

.button:hover::before,
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before,
.woocommerce input.button:hover::before {
    left: 100% !important;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: linear-gradient(135deg, rgba(30, 90, 160, 0.95), rgba(20, 60, 120, 0.95)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        0 8px 32px rgba(58, 138, 215, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.button:active,
.woocommerce a.button:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 
        0 2px 8px rgba(58, 138, 215, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Product Cards */
.woocommerce ul.products li.product {
    background: #fff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 30px !important;
    transition: all 0.3s ease !important;
    text-align: left !important;
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-5px);
    border-color: var(--primary-navy) !important;
}

.woocommerce ul.products li.product h2 { font-size: 24px !important; margin-bottom: 8px !important; }
.woocommerce ul.products li.product .price { font-size: 28px !important; color: var(--text-dark) !important; font-weight: 800 !important; }

/* Metrics */
.progress-bg { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.progress-fill { height: 100%; background: var(--primary-navy); }

/* -------------------------------------------------------------------------- */
/* AMINO SHOP GRID (PRECISION)
/* -------------------------------------------------------------------------- */

.amino-products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
}

@media (max-width: 1024px) {
    .amino-products-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
    .amino-products-grid { grid-template-columns: 1fr !important; }
}

/* Hide WooCommerce Defaults on Amino Page */
.shop-archive-amino .woocommerce-result-count,
.shop-archive-amino .woocommerce-ordering:not(.visible) {
    display: none;
}

/* -------------------------------------------------------------------------- */
/* HEADER & FOOTER REFINEMENT
/* -------------------------------------------------------------------------- */

.site-header ul#primary-menu li a {
    color: var(--text-dark) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.site-header ul#primary-menu li a:hover {
    color: var(--primary-navy) !important;
}

.site-footer a:hover {
    color: var(--primary-navy) !important;
}

/* Mobile Adjustments for 1400px Centering */
@media (max-width: 1400px) {
    .boutique-container {
        padding: 0 20px;
    }
}

/* ── TABLET BREAKPOINT ── */
@media (max-width: 768px) {
    h1 { font-size: 32px !important; letter-spacing: -1px !important; }
    h2 { font-size: 24px !important; letter-spacing: -0.5px !important; }
    p { font-size: 15px !important; }

    .boutique-container { padding: 0 16px !important; }
    .section-padding { padding: 40px 0 !important; }

    /* Buttons - smaller on mobile */
    .button, 
    .woocommerce a.button, 
    .woocommerce button.button, 
    .woocommerce input.button {
        padding: 12px 24px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }

    /* Product grid - 2 columns on tablet */
    .amino-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Product cards */
    /* Product cards - fix overflow */
    .amino-product-card { border-radius: 12px !important; overflow: hidden !important; }
    .amino-product-card h3 { font-size: 15px !important; }
    .amino-product-card > div[style*="padding"] {
        padding: 14px 14px 18px !important;
    }
    .amino-product-card div[style*="align-items: baseline"] span[style*="font-size: 20px"] {
        font-size: 17px !important;
    }
    .amino-product-card div[style*="align-items: baseline"] span[style*="font-size: 14px"] {
        font-size: 12px !important;
    }
    .amino-product-card div[style*="align-items: baseline"] span[style*="font-size: 13px"] {
        font-size: 11px !important;
    }
    .amino-product-card a[style*="aspect-ratio"] {
        padding: 20px 12px !important;
        aspect-ratio: 3/4 !important;
    }
    .amino-product-card .amino-view-btn { padding: 10px !important; font-size: 13px !important; }
}

/* ── PHONE BREAKPOINT ── */
@media (max-width: 480px) {
    h1 { font-size: 28px !important; }
    h2 { font-size: 22px !important; }

    .boutique-container { padding: 0 12px !important; }

    /* Product grid - still 2 columns but tighter */
    .amino-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Product cards - even tighter on small phones */
    .amino-product-card > div[style*="padding"] {
        padding: 10px 10px 14px !important;
    }
    .amino-product-card h3 { font-size: 13px !important; margin-bottom: 4px !important; }
    .amino-product-card div[style*="align-items: baseline"] {
        flex-wrap: wrap !important;
        gap: 2px !important;
        margin-bottom: 8px !important;
    }
    .amino-product-card div[style*="align-items: baseline"] span[style*="font-size: 20px"] {
        font-size: 15px !important;
    }
    .amino-product-card div[style*="margin-bottom: 18px"] {
        margin-bottom: 10px !important;
    }
    .amino-product-card div[style*="margin-bottom: 18px"] span {
        font-size: 11px !important;
    }
    .amino-product-card a[style*="aspect-ratio"] {
        padding: 14px 8px !important;
    }
    .amino-product-card .amino-view-btn { padding: 8px !important; font-size: 12px !important; border-radius: 12px !important; }

    /* Buttons */
    .button, 
    .woocommerce a.button, 
    .woocommerce button.button, 
    .woocommerce input.button {
        padding: 12px 20px !important;
        font-size: 13px !important;
        width: 100% !important;
    }
}

/* -------------------------------------------------------------------------- */
/* AMINO CHECKOUT & PAYMENTS (Clinical Precision)
/* -------------------------------------------------------------------------- */

.woocommerce-checkout { background: #f8fafc !important; }

/* The Standard Single Column Checkout Wrap */
.woocommerce-checkout .col2-set { width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce-checkout #customer_details { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

@media (max-width: 900px) {
    .woocommerce-checkout #customer_details { grid-template-columns: 1fr; }
}

/* Form Fields */
.woocommerce-checkout input.input-text, 
.woocommerce-checkout textarea, 
.woocommerce-checkout select {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    color: var(--text-dark) !important;
}

.woocommerce-checkout label { font-weight: 700 !important; font-size: 13px !important; color: #64748b !important; margin-bottom: 8px !important; text-transform: uppercase; letter-spacing: 0.5px; }

/* Payment Methods Area */
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

#payment ul.payment_methods li {
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    margin-bottom: 10px !important;
    padding: 15px !important;
    background: #fff;
    transition: all 0.2s ease;
}

#payment ul.payment_methods li:hover { border-color: var(--primary-navy); }

#payment ul.payment_methods li input[type=radio] { margin-right: 15px !important; }

#payment ul.payment_methods li label { color: var(--primary-navy) !important; font-weight: 800 !important; font-size: 16px !important; margin: 0 !important; text-transform: none !important; letter-spacing: normal !important; }

/* Order Review (Right Side/Bottom) */
#order_review_heading { font-size: 24px !important; margin-top: 40px !important; border-top: 1px solid #eee; padding-top: 40px; }
.woocommerce-checkout-review-order-table { border: none !important; background: transparent !important; }
.woocommerce-checkout-review-order-table th, 
.woocommerce-checkout-review-order-table td { border-bottom: 1px solid #f1f5f9 !important; padding: 15px 0 !important; }

/* Zelle Custom Styling */
.payment_box.payment_method_bacs {
    background: var(--bg-light-blue) !important;
    border-radius: 12px !important;
    color: var(--primary-navy) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 20px !important;
}

.payment_box.payment_method_bacs::before {
    content: "ZELLE VERIFICATION";
    display: block;
    font-weight: 800;
    font-size: 11px;
    margin-bottom: 10px;
    color: var(--primary-navy);
    opacity: 0.6;
}

/* Sticky Order Summary on Desktop */
@media (min-width: 1024px) {
    #order_review { position: sticky; top: 120px; }
}
/* ==========================================================================
   CheckoutWC Custom CSS (v5.2 - Live DOM Mobile Route Fix)
   ========================================================================== */

/* 1. Typography & Global Resets */
:root {
    --rpl-blue: #0066FF;
    --rpl-blue-hover: #1E3A8A;
    --rpl-black: #1A1A1A;
    --rpl-gray-text: #6B6B6B;
    --rpl-border: #E5E7EB;
    --rpl-bg: #FFFFFF;
    --rpl-bg-secondary: #F9FAFB;
    --rpl-success: #10B981;
    --rpl-radius-input: 12px;
    --rpl-radius-button: 9999px;
}

body.checkout-wc {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    background-color: var(--rpl-bg) !important;
    -webkit-font-smoothing: antialiased !important;
}

/* 2. Layout & Columns */
.cfw-wrapper, .cfw-column-left {
    background-color: var(--rpl-bg) !important;
}
.cfw-column-right {
    background-color: var(--rpl-bg-secondary) !important;
    border-left: 1px solid var(--rpl-border) !important;
}

/* 3. The "Next Level" Header: True Secure Badge */
.cfw-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid var(--rpl-border) !important;
    margin-bottom: 32px !important;
}
.cfw-header::after {
    content: "🔒 Secure SSL Checkout";
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--rpl-success);
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: var(--rpl-radius-button) !important;
    display: flex;
    align-items: center;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
@media (max-width: 600px) {
    .cfw-header { flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; }
}

/* 4. Elevate Step Breadcrumbs to a Genuine Progress UI */
.cfw-breadcrumbs {
    border-bottom: 1px solid var(--rpl-border) !important;
    padding-bottom: 1.5rem !important;
    margin-bottom: 2rem !important;
    display: flex !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: visible !important;
}
.cfw-breadcrumb-item {
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--rpl-gray-text) !important;
    position: relative !important;
}
.cfw-breadcrumb-item.active {
    color: var(--rpl-blue) !important;
    font-weight: 700 !important;
}
.cfw-breadcrumb-item.active::after {
    content: '';
    position: absolute !important;
    bottom: -1.6rem !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background-color: var(--rpl-blue) !important;
    border-radius: 3px !important;
    z-index: 10 !important;
}

/* 5. Inputs (Ultra-clean Floating Labels) */
.cfw-input-wrap input[type="text"], 
.cfw-input-wrap input[type="email"], 
.cfw-input-wrap input[type="tel"],
.cfw-input-wrap select,
.cfw-input-wrap textarea,
.select2-container--default .select2-selection--single {
    border: 1px solid var(--rpl-border) !important;
    border-radius: var(--rpl-radius-input) !important;
    background-color: var(--rpl-bg) !important;
    color: var(--rpl-black) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.cfw-input-wrap input:focus, 
.cfw-input-wrap select:focus, 
.cfw-input-wrap textarea:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--rpl-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1) !important;
}
.cfw-label {
    color: var(--rpl-gray-text) !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}
/* Float label up when field has value or is focused */
.cfw-input-wrap.cfw-input-filled .cfw-label,
.cfw-input-wrap input:focus ~ .cfw-label,
.cfw-input-wrap select:focus ~ .cfw-label,
.cfw-input-wrap textarea:focus ~ .cfw-label,
.cfw-input-wrap input:not(:placeholder-shown) ~ .cfw-label,
.cfw-input-wrap .garlic-auto-save ~ .cfw-label,
.cfw-input-wrap .has-value ~ .cfw-label {
    font-size: 11px !important;
    transform: translateY(-10px) !important;
    opacity: 0.7 !important;
}
/* Add padding-top to inputs so text doesn't overlap floated label */
.cfw-input-wrap input[type="text"],
.cfw-input-wrap input[type="email"],
.cfw-input-wrap input[type="tel"],
.cfw-input-wrap select,
.cfw-input-wrap textarea {
    padding-top: 22px !important;
    padding-bottom: 8px !important;
}

/* 6. Premium Buttons (Deep Shadows & Micro-animations) */
.cfw-primary-btn, 
#place_order, 
.checkout-button,
.cfw-next-tab-btn {
    background-color: var(--rpl-blue) !important;
    color: #FFFFFF !important;
    border-radius: var(--rpl-radius-button) !important; 
    font-weight: 600 !important;
    font-size: 16px !important;
    text-transform: none !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.cfw-primary-btn:hover, 
#place_order:hover, 
.cfw-next-tab-btn:hover {
    background-color: var(--rpl-blue-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(0, 102, 255, 0.35) !important;
}

/* 7. NEW: Trust Badges under the "Continue" Button */
.cfw-bottom-controls {
    position: relative !important;
    margin-bottom: 40px !important;
}
.cfw-bottom-controls::after {
    content: "\2713  Secure Encryption  \00B7  \2713  Fast Shipping  \00B7  \2713  Easy Returns";
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--rpl-gray-text);
    margin-top: 16px;
    letter-spacing: 0.5px;
}

/* 8. Interactive Shipping/Payment Boxes (Depth on hover) */
.cfw-radio-label {
    border: 1px solid var(--rpl-border) !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    background-color: var(--rpl-bg) !important;
}
.cfw-radio-label.selected, 
.cfw-payment-method.validation-success {
    border-color: var(--rpl-blue) !important;
    background-color: rgba(0, 102, 255, 0.02) !important;
    box-shadow: 0 0 0 1px var(--rpl-blue) !important;
}
input[type=checkbox]:checked, input[type=radio]:checked {
    background-color: var(--rpl-blue) !important;
    border-color: var(--rpl-blue) !important;
}

/* 9. Order Summary Finish */
.cfw-order-summary {
    background-color: transparent !important;
}
.cfw-discount-form-wrap {
    display: flex !important;
    gap: 8px !important;
}
.cfw-discount-form-wrap input[type="text"] {
    height: 52px !important;
    border-radius: 12px !important;
    background-color: #FFFFFF !important;
    margin-bottom: 0 !important;
}
.cfw-discount-form-wrap button {
    height: 52px !important;
    border-radius: 12px !important;
    background-color: var(--rpl-black) !important; 
    color: white !important;
    font-weight: 600 !important;
    padding: 0 24px !important;
    margin-top: 0 !important;
    transition: all 0.2s ease !important;
}
.cfw-cart-item-discount, .cfw-discount-total td {
    color: var(--rpl-success) !important;
    font-weight: 600 !important;
}

/* 10. Trust Guarantee Box */
.cfw-totals-list::after {
    content: "Lab-Verified Purity Guarantee\A We stand behind our research compounds. If your shipment is compromised or fails quality standards, we offer a hassle-free replacement.";
    white-space: pre-wrap; 
    display: block;
    margin-top: 1.5rem;
    padding: 1.25rem;
    background-color: #F8FAFC;
    border: 1px solid var(--rpl-border);
    border-radius: 12px;
    font-size: 13px;
    color: var(--rpl-gray-text);
    line-height: 1.6;
    text-align: center;
}

/* ==========================================================
   11. MOBILE FIX: Force Route Widget Visibility (verified DOM)
   ========================================================== */
@media (max-width: 900px) {
    .cfw-column-right {
        border-left: none !important;
        border-top: 1px solid var(--rpl-border) !important;
    }
    
    /* 1. Force the summary content to allow the Route widget to drop down */
    #cfw-cart-summary-content {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    /* 2. Hide everything else in the summary when collapsed, EXCEPT Route */
    #cfw-expand-cart:not(.active) ~ #cfw-cart-summary-content > *:not(.route-div):not(#RouteWidget):not(route-protect-widget) {
        display: none !important;
    }

    /* 3. Route widget — compact and visible on mobile */
    .route-div, 
    #RouteWidget, 
    route-protect-widget {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 8px 0 !important;
        clear: both !important;
        width: 100% !important;
        max-height: 50px !important;
        overflow: hidden !important;
        transform: scale(0.90) !important;
        transform-origin: left center !important;
    }
}