/*
 Theme Name:   BeachBus Functions
 Theme URI:    https://beachbus.ph
 Description:  GeneratePress child theme with WooCommerce & Dokan enhancements
 Author:       Bhenks
 Author URI:   https://onlinecreativesolutions.com
 Template:     generatepress
 Version:      2.0.0
 Text Domain:  beachbus-functions
*/

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1. CSS Variables (Design Tokens)
   2. Reset & Base Styles
   3. Affiliate Shortcode Styles
   4. Partner Vendor Styles
   5. WooCommerce Layout Fixes
   6. Checkout Page Modernization
   7. Product Page Improvements
   8. Cart Page Enhancements
   9. Payment Method Styling
   10. Mobile Responsiveness
   11. Accessibility Improvements
   12. Print Styles
   ========================================================================== */

/* ==========================================================================
   1. CSS VARIABLES (DESIGN TOKENS)
   ========================================================================== */

:root {
    /* Primary Colors */
    --bb-primary: #0f172a;
    --bb-primary-hover: #334155;
    --bb-primary-light: #475569;
    
    /* Accent Colors */
    --bb-accent: #f97316;
    --bb-accent-hover: #ea580c;
    --bb-accent-light: #fff7ed;
    
    /* Semantic Colors */
    --bb-success: #16a34a;
    --bb-success-light: #dcfce7;
    --bb-error: #dc2626;
    --bb-error-light: #fee2e2;
    --bb-warning: #ca8a04;
    --bb-warning-light: #fef9c3;
    
    /* Neutral Colors */
    --bb-background: #f8fafc;
    --bb-surface: #ffffff;
    --bb-surface-hover: #f1f5f9;
    --bb-border: #e2e8f0;
    --bb-border-light: #f1f5f9;
    --bb-text: #1e293b;
    --bb-text-secondary: #475569;
    --bb-text-muted: #64748b;
    --bb-text-light: #94a3b8;
    
    /* Spacing Scale */
    --bb-space-xs: 0.25rem;   /* 4px */
    --bb-space-sm: 0.5rem;    /* 8px */
    --bb-space-md: 1rem;      /* 16px */
    --bb-space-lg: 1.5rem;    /* 24px */
    --bb-space-xl: 2rem;      /* 32px */
    --bb-space-2xl: 3rem;     /* 48px */
    --bb-space-3xl: 4rem;     /* 64px */
    
    /* Border Radius */
    --bb-radius-sm: 4px;
    --bb-radius-md: 8px;
    --bb-radius-lg: 12px;
    --bb-radius-xl: 16px;
    --bb-radius-full: 9999px;
    
    /* Shadows */
    --bb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
    --bb-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
    --bb-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
    
    /* Transitions */
    --bb-transition-fast: 0.15s ease;
    --bb-transition: 0.2s ease;
    --bb-transition-slow: 0.3s ease;
    
    /* Typography */
    --bb-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bb-font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    
    /* Layout */
    --bb-container-max: 1200px;
    --bb-content-width: 720px;
}

/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus visible styles */
:focus-visible {
    outline: 2px solid var(--bb-accent);
    outline-offset: 2px;
}

/* Selection color */
::selection {
    background-color: var(--bb-accent-light);
    color: var(--bb-accent-hover);
}

/* ==========================================================================
   3. AFFILIATE SHORTCODE STYLES
   ========================================================================== */

.bb-affiliate-container {
    max-width: var(--bb-container-max);
    margin: 0 auto;
    padding: var(--bb-space-lg) 0;
}

/* Search Input */
.bb-affiliate-search {
    width: 100%;
    max-width: 500px;
    padding: var(--bb-space-md) var(--bb-space-xl);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-full);
    background: var(--bb-surface);
    font-size: 1rem;
    color: var(--bb-text);
    transition: all var(--bb-transition);
    margin-bottom: var(--bb-space-xl);
}

.bb-affiliate-search:focus {
    outline: none;
    border-color: var(--bb-accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.bb-affiliate-search::placeholder {
    color: var(--bb-text-light);
}

/* Affiliate Grid */
.bb-affiliate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--bb-space-lg);
}

/* Affiliate Card */
.bb-affiliate-card {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    padding: var(--bb-space-xl);
    text-align: center;
    transition: all var(--bb-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 280px;
    box-shadow: var(--bb-shadow-sm);
}

.bb-affiliate-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bb-shadow-lg);
    border-color: var(--bb-border);
}

.bb-affiliate-card:focus-within {
    box-shadow: 0 0 0 2px var(--bb-accent), var(--bb-shadow-lg);
}

/* Affiliate Header */
.bb-affiliate-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bb-affiliate-avatar {
    margin-bottom: var(--bb-space-md);
}

.bb-affiliate-avatar img {
    width: 90px;
    height: 90px;
    border-radius: var(--bb-radius-full);
    object-fit: cover;
    border: 4px solid var(--bb-surface);
    box-shadow: var(--bb-shadow-md);
    background: var(--bb-surface);
}

.bb-affiliate-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bb-text);
    margin: 0 0 var(--bb-space-xs) 0;
    line-height: 1.3;
}

.bb-affiliate-badge {
    display: inline-block;
    background: var(--bb-accent-light);
    color: var(--bb-accent-hover);
    padding: var(--bb-space-xs) var(--bb-space-sm);
    border-radius: var(--bb-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Affiliate Actions */
.bb-affiliate-actions {
    width: 100%;
    margin-top: var(--bb-space-lg);
}

.bb-affiliate-link-input {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.bb-affiliate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bb-space-sm);
    width: 100%;
    padding: var(--bb-space-sm) var(--bb-space-md);
    background: var(--bb-primary);
    color: var(--bb-surface);
    border: none;
    border-radius: var(--bb-radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--bb-transition);
}

.bb-affiliate-btn:hover {
    background: var(--bb-primary-hover);
}

.bb-affiliate-btn:focus-visible {
    outline: 2px solid var(--bb-accent);
    outline-offset: 2px;
}

.bb-affiliate-btn.bb-copied {
    background: var(--bb-success);
}

.bb-affiliate-btn.bb-error {
    background: var(--bb-error);
}

.bb-affiliate-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.bb-affiliate-no-link {
    color: var(--bb-text-light);
    font-size: 0.875rem;
    margin: var(--bb-space-md) 0 0 0;
}

/* No Results */
.bb-no-results {
    text-align: center;
    padding: var(--bb-space-2xl);
    color: var(--bb-text-muted);
    font-size: 1rem;
    grid-column: 1 / -1;
}

/* ==========================================================================
   4. PARTNER VENDOR STYLES
   ========================================================================== */

.bb-partner-container {
    max-width: var(--bb-container-max);
    margin: 0 auto;
    padding: var(--bb-space-lg) 0;
}

.bb-partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--bb-space-xl);
}

/* Partner Card */
.bb-partner-card {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    overflow: hidden;
    transition: all var(--bb-transition);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: var(--bb-shadow-sm);
}

.bb-partner-card:hover {
    box-shadow: var(--bb-shadow-lg);
    border-color: var(--bb-border);
    transform: translateY(-2px);
}

/* Partner Banner */
.bb-partner-banner {
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: var(--bb-background);
    position: relative;
}

.bb-partner-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.3));
}

/* Partner Avatar */
.bb-partner-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--bb-radius-full);
    border: 4px solid var(--bb-surface);
    box-shadow: var(--bb-shadow-md);
    overflow: hidden;
    position: absolute;
    top: 80px;
    left: var(--bb-space-lg);
    z-index: 2;
    background: var(--bb-surface);
}

.bb-partner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Partner Body */
.bb-partner-body {
    padding: var(--bb-space-xl);
    padding-top: 50px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.bb-partner-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 var(--bb-space-xs) 0;
    line-height: 1.3;
}

.bb-partner-title a {
    text-decoration: none;
    color: var(--bb-text);
    transition: color var(--bb-transition);
}

.bb-partner-title a:hover {
    color: var(--bb-accent);
}

.bb-partner-label {
    display: inline-block;
    background: var(--bb-accent-light);
    color: var(--bb-accent-hover);
    font-size: 0.75rem;
    font-weight: 600;
    padding: var(--bb-space-xs) var(--bb-space-sm);
    border-radius: var(--bb-radius-sm);
    margin-bottom: var(--bb-space-lg);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Partner Actions */
.bb-partner-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-sm);
}

.bb-btn-store {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bb-space-xs);
    padding: var(--bb-space-sm) var(--bb-space-md);
    background: var(--bb-surface);
    color: var(--bb-text);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all var(--bb-transition);
}

.bb-btn-store:hover {
    background: var(--bb-surface-hover);
    border-color: var(--bb-text-light);
}

.bb-btn-store .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.bb-btn-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bb-space-xs);
    padding: var(--bb-space-sm) var(--bb-space-md);
    background: var(--bb-accent);
    color: var(--bb-surface);
    border: none;
    border-radius: var(--bb-radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--bb-transition);
}

.bb-btn-partner:hover {
    background: var(--bb-accent-hover);
}

.bb-btn-partner.bb-copied {
    background: var(--bb-success);
}

.bb-partner-link-input {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.bb-partner-no-link {
    color: var(--bb-text-light);
    font-size: 0.875rem;
    text-align: center;
    margin: var(--bb-space-sm) 0 0 0;
}

/* ==========================================================================
   5. WOOCOMMERCE LAYOUT FIXES
   ========================================================================== */

/* Classic Checkout Two-Column Layout */
.woocommerce-checkout .col2-set {
    width: 55%;
    float: left;
    margin-right: 5%;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    width: 40%;
    float: right;
    clear: right;
}

/* Clear floats */
.woocommerce-checkout::after {
    content: '';
    display: table;
    clear: both;
}

/* Billing Details Section */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .woocommerce-billing-fields {
    background-color: var(--bb-surface);
    padding: var(--bb-space-xl);
    border-radius: var(--bb-radius-lg);
    border: 1px solid var(--bb-border);
    margin-bottom: var(--bb-space-xl);
}

/* Additional Information Section */
.woocommerce-checkout .woocommerce-additional-fields {
    background-color: var(--bb-surface);
    padding: var(--bb-space-xl);
    border-radius: var(--bb-radius-lg);
    border: 1px solid var(--bb-border);
    margin-top: var(--bb-space-xl);
}

/* Order Review Section - Combined Container */
.woocommerce-checkout #order_review_heading {
    display: none; /* Hide the separate heading */
}

/* Order Review Box with integrated heading */
.bb-order-review-wrapper,
.woocommerce-checkout #order_review {
    background-color: var(--bb-surface);
    padding: var(--bb-space-xl);
    border-radius: var(--bb-radius-lg);
    border: 1px solid var(--bb-border);
}

/* Add "Your order" heading inside the order review box */
.woocommerce-checkout #order_review::before {
    content: 'Your order';
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bb-text);
    margin-bottom: var(--bb-space-lg);
    padding-bottom: var(--bb-space-md);
    border-bottom: 1px solid var(--bb-border);
}

/* Style the order review table heading row */
.woocommerce-checkout-review-order-table thead {
    background-color: var(--bb-background);
}

.woocommerce-checkout-review-order-table thead th {
    padding: var(--bb-space-md);
    font-weight: 600;
    color: var(--bb-text);
    border-bottom: 1px solid var(--bb-border);
}

/* Fix spacing between billing and order sections */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
    margin-top: 0;
    margin-bottom: var(--bb-space-lg);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bb-text);
}

/* Payment Methods Container */
#payment {
    margin-top: var(--bb-space-xl);
}

#payment .payment_methods {
    padding: 0;
    margin: 0;
    list-style: none;
    border: none;
}

#payment .payment_methods li {
    background-color: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    margin-bottom: var(--bb-space-sm);
    padding: var(--bb-space-md);
    list-style: none;
    transition: all var(--bb-transition);
}

#payment .payment_methods li:hover {
    border-color: var(--bb-border);
    background-color: var(--bb-surface-hover);
}

#payment .payment_methods li input[type="radio"] {
    margin-right: var(--bb-space-sm);
}

#payment .payment_methods li label {
    font-weight: 500;
    cursor: pointer;
}

/* ==========================================================================
   6. CHECKOUT PAGE MODERNIZATION
   ========================================================================== */

/* Checkout Page Body Class */
.bb-checkout-page {
    /* Custom checkout styles */
}

/* Form Row Enhancements */
.woocommerce-checkout .form-row {
    margin-bottom: var(--bb-space-md);
    position: relative;
}

.woocommerce-checkout .form-row label {
    display: block;
    margin-bottom: var(--bb-space-xs);
    font-weight: 500;
    color: var(--bb-text);
    font-size: 0.9375rem;
}

.woocommerce-checkout .form-row .required {
    color: var(--bb-error);
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    width: 100%;
    padding: var(--bb-space-sm) var(--bb-space-md);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    font-size: 1rem;
    background: var(--bb-surface);
    transition: all var(--bb-transition);
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    outline: none;
    border-color: var(--bb-accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

/* Country/Region Dropdown Styling */
.woocommerce-checkout .form-row select,
.select2-container--default .select2-selection--single {
    width: 100%;
    padding: var(--bb-space-sm) var(--bb-space-md);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    font-size: 1rem;
    background-color: var(--bb-surface);
    color: var(--bb-text);
    height: auto;
    min-height: 44px;
    line-height: 1.5;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Select2 Dropdown Styling */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bb-text);
    line-height: 44px;
    padding-left: var(--bb-space-md);
    padding-right: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--bb-accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.select2-dropdown {
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    box-shadow: var(--bb-shadow-lg);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    padding: var(--bb-space-sm);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--bb-accent);
    color: var(--bb-surface);
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true] {
    background-color: var(--bb-accent-light);
    color: var(--bb-accent-hover);
}

/* Focus and filled states (JS-enhanced) */
.woocommerce-checkout .form-row.is-focused input,
.woocommerce-checkout .form-row.is-focused select,
.woocommerce-checkout .form-row.is-focused textarea {
    border-color: var(--bb-accent);
}

/* Fee Row Styling */
.woocommerce-checkout-review-order-table .fee th,
.cart-discount.fee th {
    font-weight: 500;
    color: var(--bb-text-secondary);
}

.woocommerce-checkout-review-order-table .fee td,
.cart-discount.fee td {
    font-weight: 600;
    color: var(--bb-error);
}

/* Order Total */
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bb-text);
    padding-top: var(--bb-space-md);
    border-top: 2px solid var(--bb-border);
}

/* Place Order Button */
#place_order {
    width: 100%;
    padding: var(--bb-space-md) var(--bb-space-xl);
    background: var(--bb-accent);
    color: var(--bb-surface);
    border: none;
    border-radius: var(--bb-radius-md);
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--bb-transition);
    margin-top: var(--bb-space-lg);
}

#place_order:hover {
    background: var(--bb-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--bb-shadow-md);
}

#place_order:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 2px;
}

/* Terms and Conditions Styling */
.woocommerce-terms-and-conditions-wrapper {
    margin: var(--bb-space-lg) 0;
}

/* Hide the embedded terms content - shown in modal instead */
.woocommerce-terms-and-conditions {
    display: none !important;
}

/* Terms and conditions checkbox wrapper */
.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--bb-space-sm);
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Checkbox styling - align to top */
.woocommerce-form__label-for-checkbox input[type="checkbox"] {
    margin: 0;
    margin-top: 2px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    cursor: pointer;
    accent-color: var(--bb-accent);
}

/* Terms and conditions link - highlighted */
.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-form__label-for-checkbox a,
.woocommerce-checkout-review-order a[href*="terms"],
.woocommerce-checkout-review-order a[href*="conditions"] {
    color: var(--bb-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: all var(--bb-transition);
    cursor: pointer;
}

.woocommerce-terms-and-conditions-wrapper a:hover,
.woocommerce-form__label-for-checkbox a:hover,
.woocommerce-checkout-review-order a[href*="terms"]:hover,
.woocommerce-checkout-review-order a[href*="conditions"]:hover {
    color: var(--bb-accent-hover);
}

/* Required asterisk styling */
.woocommerce-form__label-for-checkbox .required {
    color: var(--bb-error);
    margin-left: var(--bb-space-xs);
}

/* Terms Modal Styles */
.bb-terms-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: var(--bb-space-md);
}

.bb-terms-modal-overlay.active {
    display: flex;
}

.bb-terms-modal {
    background: var(--bb-surface);
    border-radius: var(--bb-radius-lg);
    max-width: 700px;
    width: 100%;
    max-height: 85vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    animation: bb-modal-in 0.3s ease;
}

@keyframes bb-modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.bb-terms-modal-header {
    padding: var(--bb-space-lg) var(--bb-space-xl);
    border-bottom: 2px solid var(--bb-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--bb-primary) 0%, var(--bb-secondary) 100%);
    border-radius: var(--bb-radius-lg) var(--bb-radius-lg) 0 0;
}

.bb-terms-modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bb-surface);
    margin: 0;
}

.bb-terms-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    font-size: 1.75rem;
    color: var(--bb-surface);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bb-radius-md);
    transition: all var(--bb-transition);
}

.bb-terms-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.bb-terms-modal-content {
    padding: var(--bb-space-xl);
    overflow-y: auto;
    max-height: 55vh;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--bb-text);
}

.bb-terms-modal-content h1,
.bb-terms-modal-content h2,
.bb-terms-modal-content h3 {
    color: var(--bb-primary);
    margin-top: var(--bb-space-lg);
    margin-bottom: var(--bb-space-sm);
    font-weight: 600;
}

.bb-terms-modal-content p {
    margin-bottom: var(--bb-space-md);
}

.bb-terms-modal-content ul,
.bb-terms-modal-content ol {
    margin-bottom: var(--bb-space-md);
    padding-left: var(--bb-space-lg);
}

.bb-terms-modal-content li {
    margin-bottom: var(--bb-space-xs);
}

.bb-terms-modal-footer {
    padding: var(--bb-space-lg) var(--bb-space-xl);
    border-top: 1px solid var(--bb-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--bb-space-md);
    background: var(--bb-background);
    border-radius: 0 0 var(--bb-radius-lg) var(--bb-radius-lg);
}

.bb-terms-modal-btn {
    padding: var(--bb-space-sm) var(--bb-space-xl);
    border: none;
    border-radius: var(--bb-radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--bb-transition);
}

.bb-terms-modal-btn-secondary {
    background: var(--bb-surface);
    color: var(--bb-text);
    border: 2px solid var(--bb-border);
}

.bb-terms-modal-btn-secondary:hover {
    background: var(--bb-border);
}

.bb-terms-modal-btn-primary {
    background: var(--bb-accent);
    color: var(--bb-surface);
}

.bb-terms-modal-btn-primary:hover {
    background: var(--bb-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--bb-shadow-md);
}

/* Mobile adjustments for modal */
@media (max-width: 768px) {
    .bb-terms-modal-overlay {
        padding: var(--bb-space-sm);
    }
    
    .bb-terms-modal {
        max-height: 90vh;
    }
    
    .bb-terms-modal-content {
        max-height: 60vh;
        padding: var(--bb-space-lg);
    }
    
    .bb-terms-modal-header,
    .bb-terms-modal-footer {
        padding: var(--bb-space-md) var(--bb-space-lg);
    }
}

/* Force "Proceed to Payment" button text */
#place_order {
    font-size: 0 !important;
    color: transparent !important;
}

#place_order::after {
    content: 'Proceed to Payment';
    font-size: 1.0625rem;
    color: var(--bb-surface);
    font-weight: 600;
}

/* ==========================================================================
   7. SHOP & PRODUCT CATALOG STYLES
   ========================================================================== */

/* Shop Page Container */
.bb-shop-page .woocommerce-products-header {
    margin-bottom: var(--bb-space-xl);
}

/* Ensure shop page container is full width */
.bb-shop-page .site-content,
.bb-shop-page .content-area,
.bb-shop-page .woocommerce,
.archive .site-content,
.archive .content-area {
    width: 100%;
    max-width: 100%;
}

.bb-shop-page .woocommerce-result-count,
.bb-shop-page .woocommerce-ordering {
    margin-bottom: var(--bb-space-lg);
}

/* Product Grid - Modern Card Layout */
.bb-shop-page ul.products,
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--bb-space-xl);
    list-style: none;
    padding: 0;
    margin: 0;
}

.bb-shop-page ul.products::before,
.bb-shop-page ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

/* Product Card */
.bb-shop-page ul.products li.product,
.woocommerce ul.products li.product {
    float: none;
    width: 100%;
    margin: 0;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    overflow: hidden;
    transition: all var(--bb-transition);
    box-shadow: var(--bb-shadow-sm);
    display: flex;
    flex-direction: column;
}

.bb-shop-page ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--bb-shadow-lg);
    border-color: var(--bb-border);
}

/* Product Image */
.bb-shop-page ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block;
    text-decoration: none;
}

.bb-shop-page ul.products li.product img,
.woocommerce ul.products li.product img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
    display: block;
}

/* Product Content */
.bb-shop-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bb-text);
    padding: var(--bb-space-md) var(--bb-space-lg) 0;
    margin: 0;
    line-height: 1.4;
}

/* Price */
.bb-shop-page ul.products li.product .price,
.woocommerce ul.products li.product .price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bb-accent);
    padding: var(--bb-space-sm) var(--bb-space-lg);
    margin: 0;
}

.bb-shop-page ul.products li.product .price del,
.woocommerce ul.products li.product .price del {
    color: var(--bb-text-light);
    font-weight: 400;
    font-size: 1rem;
    margin-right: var(--bb-space-sm);
}

.bb-shop-page ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
}

/* Sale Badge */
.bb-shop-page ul.products li.product .onsale,
.woocommerce ul.products li.product .onsale {
    position: absolute;
    top: var(--bb-space-md);
    left: var(--bb-space-md);
    background: var(--bb-accent);
    color: var(--bb-surface);
    padding: var(--bb-space-xs) var(--bb-space-sm);
    border-radius: var(--bb-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    z-index: 1;
}

/* Add to Cart Button in Product Card */
.bb-shop-page ul.products li.product .button,
.woocommerce ul.products li.product .button {
    display: block;
    width: calc(100% - var(--bb-space-lg) * 2);
    margin: auto var(--bb-space-lg) var(--bb-space-lg);
    padding: var(--bb-space-sm) var(--bb-space-md);
    background: var(--bb-primary);
    color: var(--bb-surface);
    border: none;
    border-radius: var(--bb-radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--bb-transition);
}

.bb-shop-page ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
    background: var(--bb-primary-hover);
}

/* Star Rating */
.bb-shop-page ul.products li.product .star-rating,
.woocommerce ul.products li.product .star-rating {
    margin: var(--bb-space-xs) var(--bb-space-lg);
}

/* ==========================================================================
   8. PRODUCT PAGE IMPROVEMENTS
   ========================================================================== */

/* Product Page Body Class */
.bb-product-page {
    /* Custom product page styles */
}

/* Product Images */
.woocommerce-product-gallery {
    border-radius: var(--bb-radius-lg);
    overflow: hidden;
}

.woocommerce-product-gallery__image {
    border-radius: var(--bb-radius-md);
    overflow: hidden;
}

/* Product Title */
.product .product_title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bb-text);
    margin-bottom: var(--bb-space-sm);
    line-height: 1.2;
}

/* Product Price */
.product .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bb-accent);
    margin-bottom: var(--bb-space-lg);
}

.product .price del {
    color: var(--bb-text-light);
    font-weight: 400;
    font-size: 1.125rem;
    margin-right: var(--bb-space-sm);
}

.product .price ins {
    text-decoration: none;
}

/* Add to Cart Button */
.single_add_to_cart_button {
    padding: var(--bb-space-md) var(--bb-space-xl);
    background: var(--bb-accent);
    color: var(--bb-surface);
    border: none;
    border-radius: var(--bb-radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--bb-transition);
}

.single_add_to_cart_button:hover {
    background: var(--bb-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--bb-shadow-md);
}

/* Quantity Input */
.quantity .qty {
    width: 70px;
    padding: var(--bb-space-sm);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    text-align: center;
    font-size: 1rem;
}

/* Add to Cart Form - Fix spacing between quantity and button */
form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--bb-space-md);
    margin-top: var(--bb-space-lg);
}

form.cart .quantity {
    margin: 0;
    display: flex;
}

form.cart .quantity .qty {
    height: 48px;
    min-height: 48px;
}

form.cart .single_add_to_cart_button {
    margin: 0;
    height: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Grouped product and variable product forms */
form.cart .variations_button,
form.cart .woocommerce-grouped-product-list-item__quantity {
    display: flex;
    align-items: center;
    gap: var(--bb-space-md);
}

/* Product Meta */
.product_meta {
    margin-top: var(--bb-space-xl);
    padding-top: var(--bb-space-lg);
    border-top: 1px solid var(--bb-border);
    font-size: 0.875rem;
    color: var(--bb-text-muted);
}

.product_meta a {
    color: var(--bb-text-secondary);
    text-decoration: none;
}

.product_meta a:hover {
    color: var(--bb-accent);
}

/* Product Tabs */
.woocommerce-tabs {
    margin-top: var(--bb-space-2xl);
}

.woocommerce-tabs .tabs {
    display: flex;
    gap: var(--bb-space-xs);
    border-bottom: 2px solid var(--bb-border);
    margin-bottom: var(--bb-space-lg);
}

.woocommerce-tabs .tabs li {
    margin: 0;
}

.woocommerce-tabs .tabs li a {
    display: block;
    padding: var(--bb-space-sm) var(--bb-space-md);
    color: var(--bb-text-muted);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--bb-transition);
}

.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs .tabs li a:hover {
    color: var(--bb-accent);
    border-bottom-color: var(--bb-accent);
}

/* Related Products */
.related.products {
    margin-top: var(--bb-space-3xl);
}

.related.products > h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--bb-space-lg);
    color: var(--bb-text);
}

/* ==========================================================================
   8. CART PAGE ENHANCEMENTS
   ========================================================================== */

/* Cart Page Body Class */
.bb-cart-page {
    /* Custom cart page styles */
}

/* Cart Table */
.woocommerce-cart-form table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--bb-radius-lg);
    overflow: hidden;
    border: 1px solid var(--bb-border);
}

.woocommerce-cart-form thead {
    background: var(--bb-background);
}

.woocommerce-cart-form th {
    padding: var(--bb-space-md);
    font-weight: 600;
    color: var(--bb-text);
    text-align: left;
    border-bottom: 1px solid var(--bb-border);
}

.woocommerce-cart-form td {
    padding: var(--bb-space-md);
    border-bottom: 1px solid var(--bb-border);
    vertical-align: middle;
}

.woocommerce-cart-form tr:last-child td {
    border-bottom: none;
}

/* Product Name in Cart */
.woocommerce-cart-form .product-name a {
    color: var(--bb-text);
    font-weight: 500;
    text-decoration: none;
}

.woocommerce-cart-form .product-name a:hover {
    color: var(--bb-accent);
}

/* Product Thumbnail */
.woocommerce-cart-form .product-thumbnail img {
    width: 80px;
    height: auto;
    border-radius: var(--bb-radius-md);
    border: 1px solid var(--bb-border);
}

/* Remove Button */
.woocommerce-cart-form .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--bb-error-light);
    color: var(--bb-error);
    border-radius: var(--bb-radius-full);
    text-decoration: none;
    font-size: 1.125rem;
    line-height: 1;
    transition: all var(--bb-transition);
}

.woocommerce-cart-form .remove:hover {
    background: var(--bb-error);
    color: var(--bb-surface);
}

/* Coupon Section */
.coupon {
    display: flex;
    gap: var(--bb-space-sm);
    margin-bottom: var(--bb-space-md);
}

.coupon input[type="text"] {
    flex: 1;
    padding: var(--bb-space-sm) var(--bb-space-md);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    font-size: 1rem;
}

.coupon button {
    padding: var(--bb-space-sm) var(--bb-space-lg);
    background: var(--bb-primary);
    color: var(--bb-surface);
    border: none;
    border-radius: var(--bb-radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--bb-transition);
    white-space: nowrap;
}

.coupon button:hover {
    background: var(--bb-primary-hover);
}

/* Cart Totals */
.cart_totals {
    background: var(--bb-background);
    padding: var(--bb-space-xl);
    border-radius: var(--bb-radius-lg);
    border: 1px solid var(--bb-border);
}

.cart_totals h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--bb-space-lg);
    color: var(--bb-text);
}

.cart_totals table {
    width: 100%;
}

.cart_totals th,
.cart_totals td {
    padding: var(--bb-space-sm) 0;
}

.cart_totals th {
    text-align: left;
    font-weight: 500;
}

.cart_totals td {
    text-align: right;
}

/* Proceed to Checkout Button */
.wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    padding: var(--bb-space-md) var(--bb-space-xl);
    background: var(--bb-accent);
    color: var(--bb-surface);
    border: none;
    border-radius: var(--bb-radius-md);
    font-size: 1.0625rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--bb-transition);
}

.wc-proceed-to-checkout .checkout-button:hover {
    background: var(--bb-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--bb-shadow-md);
}

/* ==========================================================================
   9. PAYMENT METHOD STYLING
   ========================================================================== */

/* Payment Method Icons */
.payment_method img {
    max-height: 32px;
    margin-left: var(--bb-space-sm);
    vertical-align: middle;
}

/* PayMongo Specific Styling */
.payment_method_paymongo,
.payment_method_paymongo_gcash,
.payment_method_paymongo_grab_pay,
.payment_method_paymongo_maya {
    /* PayMongo payment methods */
}

/* PayPal Specific Styling */
.payment_method_paypal,
.payment_method_ppcp-gateway {
    /* PayPal payment methods */
}

/* Payment Box */
.payment_box {
    background: var(--bb-surface-hover);
    padding: var(--bb-space-md);
    border-radius: var(--bb-radius-md);
    margin-top: var(--bb-space-sm);
    font-size: 0.9375rem;
}

.payment_box p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   10. MOBILE RESPONSIVENESS
   ========================================================================== */

/* Tablet and below */
@media (max-width: 992px) {
    :root {
        --bb-space-xl: 1.5rem;
        --bb-space-2xl: 2rem;
        --bb-space-3xl: 3rem;
    }
    
    /* Shop Page - 2 columns on tablet */
    .bb-shop-page ul.products,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--bb-space-lg);
    }
    
    /* Affiliate grid */
    .bb-affiliate-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    
    /* Partner grid */
    .bb-partner-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Shop Page - Single Column Layout */
    .bb-shop-page ul.products,
    .woocommerce ul.products {
        display: flex;
        flex-direction: column;
        gap: var(--bb-space-lg);
        width: 100%;
        max-width: 100%;
    }
    
    .bb-shop-page ul.products li.product,
    .woocommerce ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        float: none !important;
        clear: both !important;
    }
    
    .bb-shop-page ul.products li.product .woocommerce-loop-product__link,
    .woocommerce ul.products li.product .woocommerce-loop-product__link {
        display: block;
        width: 100%;
    }
    
    .bb-shop-page ul.products li.product img,
    .woocommerce ul.products li.product img {
        width: 100% !important;
        height: auto !important;
        max-height: 250px;
        object-fit: contain;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Ensure product content is visible */
    .bb-shop-page ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .bb-shop-page ul.products li.product .price,
    .woocommerce ul.products li.product .price,
    .bb-shop-page ul.products li.product .button,
    .woocommerce ul.products li.product .button {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Checkout layout - single column */
    .woocommerce-checkout .col2-set,
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        width: 100%;
        float: none;
        margin-right: 0;
    }
    
    .woocommerce-checkout #order_review {
        margin-top: var(--bb-space-xl);
    }
    
    /* Mobile billing section adjustments */
    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .woocommerce-billing-fields,
    .woocommerce-checkout .woocommerce-additional-fields {
        padding: var(--bb-space-md);
        margin-bottom: var(--bb-space-lg);
    }
    
    .woocommerce-checkout #order_review {
        padding: var(--bb-space-md);
    }
    
    .woocommerce-checkout #order_review::before {
        font-size: 1.125rem;
        margin-bottom: var(--bb-space-md);
        padding-bottom: var(--bb-space-sm);
    }
    
    /* Affiliate grid - 2 columns on mobile */
    .bb-affiliate-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--bb-space-md);
    }
    
    .bb-affiliate-card {
        padding: var(--bb-space-md);
        min-height: auto;
    }
    
    .bb-affiliate-avatar img {
        width: 60px;
        height: 60px;
    }
    
    .bb-affiliate-name {
        font-size: 0.9375rem;
    }
    
    /* Partner grid - single column */
    .bb-partner-grid {
        grid-template-columns: 1fr;
    }
    
    /* Cart table - mobile friendly */
    .woocommerce-cart-form table,
    .woocommerce-cart-form thead,
    .woocommerce-cart-form tbody,
    .woocommerce-cart-form th,
    .woocommerce-cart-form td,
    .woocommerce-cart-form tr {
        display: block;
    }
    
    .woocommerce-cart-form thead {
        display: none;
    }
    
    .woocommerce-cart-form tr {
        margin-bottom: var(--bb-space-md);
        border: 1px solid var(--bb-border);
        border-radius: var(--bb-radius-md);
        padding: var(--bb-space-md);
    }
    
    .woocommerce-cart-form td {
        border: none;
        padding: var(--bb-space-xs) 0;
        position: relative;
    }
    
    .woocommerce-cart-form td::before {
        content: attr(data-title) ": ";
        font-weight: 600;
    }
    
    .woocommerce-cart-form .product-thumbnail::before,
    .woocommerce-cart-form .product-remove::before {
        content: none;
    }
    
    /* Coupon section - stack on mobile */
    .coupon {
        flex-direction: column;
    }
    
    .coupon button {
        width: 100%;
    }
    
    /* Touch-friendly button sizes */
    button,
    .button,
    input[type="submit"],
    .single_add_to_cart_button,
    #place_order {
        min-height: 44px;
    }
    
    /* Product page adjustments */
    .product .product_title {
        font-size: 1.5rem;
    }
    
    .product .price {
        font-size: 1.25rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    /* Affiliate grid - single column */
    .bb-affiliate-grid {
        grid-template-columns: 1fr;
    }
    
    /* Reduced padding */
    .bb-affiliate-card,
    .bb-partner-card,
    .woocommerce-checkout #order_review,
    .cart_totals {
        padding: var(--bb-space-md);
    }
    
    /* Smaller search input */
    .bb-affiliate-search {
        padding: var(--bb-space-sm) var(--bb-space-md);
        font-size: 0.9375rem;
    }
}

/* ==========================================================================
   11. ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

/* Screen reader only text */
.screen-reader-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--bb-primary);
    color: var(--bb-surface);
    padding: var(--bb-space-sm) var(--bb-space-md);
    text-decoration: none;
    z-index: 100000;
}

.skip-link:focus {
    top: 0;
}

/* Focus styles for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--bb-accent);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --bb-border: #000000;
        --bb-text: #000000;
        --bb-text-muted: #333333;
    }
    
    .bb-affiliate-card,
    .bb-partner-card {
        border-width: 2px;
    }
}

/* ==========================================================================
   12. PRINT STYLES
   ========================================================================== */

@media print {
    /* Hide interactive elements */
    .bb-affiliate-btn,
    .bb-btn-partner,
    .bb-affiliate-search,
    #payment,
    .wc-proceed-to-checkout,
    .coupon {
        display: none !important;
    }
    
    /* Ensure good contrast */
    body {
        color: #000;
        background: #fff;
    }
    
    /* Remove shadows */
    .bb-affiliate-card,
    .bb-partner-card,
    .woocommerce-checkout #order_review {
        box-shadow: none;
        border: 1px solid #000;
    }
    
    /* Ensure links are visible */
    a {
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}