/* =============================================================================
   Jibu Kenya — Customer Ordering Web App
   Production stylesheet (replaces the page's inline <style>)
   Fonts (Poppins + Inter) and Font Awesome are linked in the HTML <head>.
   Mobile-first, responsive, accessible.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN SYSTEM — TOKEN LAYER
   --------------------------------------------------------------------------- */
:root {
    /* Brand */
    --jibu-primary:      #1660B0;   /* core Jibu blue            */
    --jibu-primary-rgb:  22, 96, 176;
    --jibu-deep:         #0D4280;   /* deep navy / hover         */
    --jibu-deep-rgb:     13, 66, 128;
    --jibu-accent:       #4DAEE3;   /* bright water accent       */
    --jibu-accent-rgb:   77, 174, 227;

    /* Surfaces */
    --jibu-page-bg:      #eef6fb;   /* soft water-tint page bg   */
    --surface:           #ffffff;
    --surface-muted:     #f8fafc;
    --surface-tint:      #f4fafe;

    /* Status */
    --success:           #1aa85d;
    --success-rgb:       26, 168, 93;
    --success-dark:      #15924f;
    --warning:           #f0ad4e;
    --warning-bg:        #fff3cd;
    --warning-fg:        #856404;
    --danger:            #e74c3c;
    --whatsapp-green:    #25D366;

    /* Neutral gray ramp */
    --gray-50:   #f8fafc;
    --gray-100:  #eef2f6;
    --gray-200:  #dce6ee;
    --gray-300:  #cbd5e1;
    --gray-400:  #94a3b8;
    --gray-500:  #64748b;
    --gray-600:  #475569;
    --gray-700:  #334155;
    --gray-800:  #1e293b;
    --gray-900:  #0f172a;
    --ink:       #142e44;   /* primary text on light surfaces */

    /* Spacing scale */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;

    /* Radius scale */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-pill: 999px;

    /* Shadow scale */
    --shadow-xs: 0 1px 2px rgba(var(--jibu-deep-rgb), .06);
    --shadow-sm: 0 2px 8px rgba(var(--jibu-deep-rgb), .07);
    --shadow-md: 0 4px 14px rgba(var(--jibu-deep-rgb), .10);
    --shadow-lg: 0 10px 24px rgba(var(--jibu-deep-rgb), .14);
    --shadow-xl: 0 18px 40px rgba(var(--jibu-deep-rgb), .20);

    /* Typography */
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Poppins', 'Inter', system-ui, sans-serif;

    /* Motion */
    --transition: all .25s ease;
    --transition-fast: all .18s ease;

    /* Layout */
    --container-max:    1100px;
    --container-max-xl: 1280px;
    --tap-target:       44px;

    /* ----- Backward-compatible aliases (legacy markup) ----- */
    --primary:        var(--jibu-primary);
    --primary-dark:   var(--jibu-deep);
    --secondary:      var(--success);
    --secondary-dark: var(--success-dark);
    --accent:         var(--jibu-accent);
    --dark:           var(--ink);
    --gray:           var(--gray-500);
    --light:          var(--surface-muted);
    --light-gray:     var(--gray-200);
    --bg-light-blue:  var(--jibu-page-bg);
    --whatsapp:       var(--whatsapp-green);
    --card-shadow:    var(--shadow-md);
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--jibu-page-bg);
    color: var(--ink);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: 78px; /* room for fixed bottom nav */
}

h1, h2, h3,
.product-name,
.jibu-hero-title {
    font-family: var(--font-display);
    line-height: 1.25;
}

img { max-width: 100%; display: block; }

a { color: var(--jibu-primary); }

button { font-family: inherit; }

.hidden { display: none !important; }

.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }

/* App shell */
.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: var(--surface);
    min-height: 100vh;
}

/* -----------------------------------------------------------------------------
   3. ACCESSIBILITY — global focus
   --------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid rgba(var(--jibu-accent-rgb), .65);
    outline-offset: 2px;
}

button,
.price-option,
.delivery-option,
.payment-option,
.nav-btn,
.customer-type-btn,
.star {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.price-option:focus-visible,
.delivery-option:focus-visible,
.payment-option:focus-visible {
    outline: 3px solid rgba(var(--jibu-accent-rgb), .65);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   4. CUSTOMER TYPE SELECTION SCREEN
   --------------------------------------------------------------------------- */
.customer-type-selection {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, rgba(var(--jibu-deep-rgb), .92), rgba(var(--jibu-primary-rgb), .9));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    padding: var(--space-4);
}

.selection-container {
    background: var(--surface);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
    text-align: center;
    max-width: 420px;
    width: 100%;
    box-shadow: var(--shadow-xl);
    animation: jibu-pop .3s ease;
}

.selection-container h2 {
    color: var(--jibu-primary);
    margin-bottom: var(--space-6);
    font-size: 1.4rem;
}

.customer-type-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.customer-type-btn {
    padding: var(--space-4);
    min-height: var(--tap-target);
    border: none;
    border-radius: var(--radius-md);
    background: var(--jibu-primary);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.customer-type-btn:hover {
    background: var(--jibu-deep);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

#reseller-code-section { margin-top: var(--space-5); }

#reseller-code-input,
#discount-code-input {
    padding: var(--space-3);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    width: 100%;
    margin-bottom: var(--space-4);
    font-size: 1rem;
    background: var(--surface-muted);
    transition: var(--transition);
}

#reseller-code-input:focus,
#discount-code-input:focus {
    outline: none;
    border-color: var(--jibu-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--jibu-primary-rgb), .18);
}

#verify-reseller-code,
#apply-discount-code {
    padding: var(--space-3) var(--space-5);
    min-height: var(--tap-target);
    border: none;
    border-radius: var(--radius-md);
    background: var(--jibu-primary);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

#verify-reseller-code:hover,
#apply-discount-code:hover { background: var(--jibu-deep); }

.error-message,
.discount-code-error,
.reseller-code-error {
    color: var(--danger);
    margin-top: var(--space-2);
    font-size: .9rem;
}
.discount-code-error { font-size: .8rem; }

/* -----------------------------------------------------------------------------
   5. BRANDED HERO
   --------------------------------------------------------------------------- */
.jibu-hero {
    position: relative;
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--jibu-deep) center/cover no-repeat;
    color: #fff;
    overflow: hidden;
}

.jibu-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--jibu-deep-rgb), .80), rgba(var(--jibu-primary-rgb), .85));
}

.jibu-hero-content {
    position: relative;
    z-index: 2;
    padding: var(--space-6) var(--space-5) var(--space-5);
    width: 100%;
}

.jibu-logo {
    height: 42px;
    width: auto;
    margin-bottom: var(--space-3);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28));
}

.jibu-hero-title {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0 0 var(--space-1);
    color: #fff;
}

.jibu-hero-tag {
    font-size: .95rem;
    opacity: .95;
    margin: 0 0 var(--space-4);
    font-weight: 400;
}

/* -----------------------------------------------------------------------------
   6. PRICE PILLS  (.price-list-toggle / .price-option)
   --------------------------------------------------------------------------- */
.price-list-toggle {
    display: inline-flex;
    gap: var(--space-2);
    background: rgba(255, 255, 255, .15);
    padding: 5px;
    border-radius: var(--radius-pill);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.price-option {
    padding: 9px 18px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
}

.price-option:hover { color: #fff; background: rgba(255, 255, 255, .18); }

.price-option.active {
    background: #fff;
    color: var(--jibu-deep);
    box-shadow: var(--shadow-sm);
}

/* -----------------------------------------------------------------------------
   7. SEARCH
   --------------------------------------------------------------------------- */
.search-container {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface);
    padding: var(--space-3) var(--space-4) var(--space-2);
    box-shadow: var(--shadow-sm);
}

.search-box {
    width: 100%;
    min-height: var(--tap-target);
    padding: 12px 18px 12px 46px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-pill);
    font-size: .95rem;
    background: var(--surface-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 16px center;
    background-size: 18px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}

.search-box:focus {
    outline: none;
    border-color: var(--jibu-primary);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(var(--jibu-primary-rgb), .18);
}

/* -----------------------------------------------------------------------------
   8. PRODUCT GRID & CARDS
   --------------------------------------------------------------------------- */
.product-section { padding: var(--space-4); }

.product-grid,
#products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.product-card {
    background: var(--surface);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.product-card:hover,
.product-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.product-image-container {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--surface-tint), #eaf4fb);
    padding: var(--space-3);
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .3s ease;
}

.product-card:hover .product-image { transform: scale(1.05); }

.product-details { padding: var(--space-3); }

.product-name {
    font-weight: 600;
    font-size: .98rem;
    color: var(--ink);
    margin-bottom: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.product-price {
    color: var(--jibu-primary);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: var(--space-3);
    display: inline-block;
}

/* Quantity control */
.qty-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.qty-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: var(--jibu-primary);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.qty-btn:hover { background: var(--jibu-deep); }
.qty-btn:active { transform: scale(.92); }

.qty-input {
    width: 46px;
    text-align: center;
    padding: var(--space-2);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    font-size: .95rem;
}

.qty-input:focus {
    outline: none;
    border-color: var(--jibu-primary);
    box-shadow: 0 0 0 2px rgba(var(--jibu-primary-rgb), .2);
}

/* -----------------------------------------------------------------------------
   9. CART SUMMARY (fixed bar)
   --------------------------------------------------------------------------- */
.cart-summary {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    background: var(--surface);
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 -2px 14px rgba(var(--jibu-deep-rgb), .12);
    z-index: 40;
    display: flex;
    flex-direction: column;
}

.cart-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.cart-items { font-weight: 600; color: var(--ink); font-size: .95rem; }
.cart-total { color: var(--success); font-weight: 700; font-size: 1.05rem; }

.discount-section {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.discount-label { font-weight: 600; color: var(--ink); font-size: .9rem; margin-right: var(--space-2); }

.discount-input {
    width: 64px;
    padding: var(--space-2);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: .9rem;
}

.discount-btn {
    background: var(--jibu-primary);
    color: #fff;
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: var(--space-2);
    transition: var(--transition);
}
.discount-btn:hover { background: var(--jibu-deep); }

.discount-note {
    font-size: .72rem;
    color: var(--gray-500);
    font-style: italic;
    flex: 1;
    min-width: 100%;
    margin-top: var(--space-1);
}

.delivery-options {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.delivery-option {
    flex: 1;
    min-width: 84px;
    min-height: var(--tap-target);
    padding: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: .85rem;
    cursor: pointer;
    transition: var(--transition);
}

.delivery-option:hover { border-color: var(--jibu-accent); }

.delivery-option.active {
    border-color: var(--jibu-primary);
    background: rgba(var(--jibu-primary-rgb), .08);
    color: var(--jibu-deep);
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   10. BUTTONS (generic + checkout)
   --------------------------------------------------------------------------- */
.btn {
    padding: var(--space-3) var(--space-4);
    min-height: var(--tap-target);
    border-radius: var(--radius-sm);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.btn-primary { background: var(--jibu-primary); color: #fff; }
.btn-primary:hover { background: var(--jibu-deep); }
.btn-secondary { background: var(--gray-500); color: #fff; }
.btn-secondary:hover { background: var(--gray-600); }

.checkout-btn,
#checkout-button {
    background: var(--jibu-primary);
    color: #fff;
    border: none;
    padding: var(--space-3) var(--space-5);
    min-height: var(--tap-target);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.checkout-btn:hover,
#checkout-button:hover { background: var(--jibu-deep); }

.checkout-btn:disabled,
#checkout-button:disabled {
    background: var(--gray-400);
    cursor: not-allowed;
    opacity: .8;
}

.submit-btn {
    background: var(--success);
    color: #fff;
    border: none;
    padding: var(--space-4);
    min-height: var(--tap-target);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: var(--space-5);
    transition: var(--transition);
}
.submit-btn:hover { background: var(--success-dark); }

.location-btn,
.feedback-btn {
    background: var(--jibu-primary);
    color: #fff;
    border: none;
    padding: var(--space-3) var(--space-4);
    min-height: var(--tap-target);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.location-btn:hover,
.feedback-btn:hover { background: var(--jibu-deep); }

.new-order-btn,
.view-orders-btn {
    border: none;
    padding: var(--space-3) var(--space-5);
    min-height: var(--tap-target);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    flex: 1;
    color: #fff;
    transition: var(--transition);
}
.new-order-btn { background: var(--jibu-primary); }
.new-order-btn:hover { background: var(--jibu-deep); }
.view-orders-btn { background: var(--success); }
.view-orders-btn:hover { background: var(--success-dark); }

/* -----------------------------------------------------------------------------
   11. MODALS (overlay/container + .modal/.modal-content aliases)
   --------------------------------------------------------------------------- */
.modal-overlay,
.modal {
    position: fixed;
    inset: 0;
    background: rgba(var(--jibu-deep-rgb), .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.modal-overlay.active,
.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-container,
.modal-content {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    transform: translateY(20px);
    transition: transform .3s ease;
}

.modal-overlay.active .modal-container,
.modal.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 5;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-title { font-size: 1.2rem; font-weight: 600; color: var(--ink); }

.modal-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--gray-500);
    transition: var(--transition);
}
.modal-close:hover { color: var(--ink); background: var(--gray-100); }

.modal-body { padding: var(--space-5); }

/* -----------------------------------------------------------------------------
   12. FORM ELEMENTS
   --------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--space-4); }

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--ink);
    font-size: .9rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-3);
    min-height: var(--tap-target);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: var(--surface-muted);
    transition: var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--jibu-primary);
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--jibu-primary-rgb), .18);
}

.form-textarea { resize: vertical; min-height: 80px; }

.phone-input-container { position: relative; }

.phone-prefix {
    position: absolute;
    left: 12px;
    top: 13px;
    color: var(--gray-500);
    font-weight: 500;
    z-index: 1;
}

.phone-input { padding-left: 55px !important; }

.phone-hint,
.optional-note {
    font-size: .8rem;
    color: var(--gray-500);
    margin-top: var(--space-1);
}
.optional-note { font-style: italic; margin-bottom: var(--space-2); }

.location-methods {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.location-methods select { flex: 1; min-width: 150px; }

.location-warning {
    background-color: var(--warning-bg);
    color: var(--warning-fg);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    margin-top: var(--space-3);
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.location-warning svg { width: 18px; height: 18px; flex-shrink: 0; }

.location-suggestions {
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: none;
}
.location-suggestion {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
}
.location-suggestion:hover { background: var(--surface-muted); }

/* Discount / optional payment blocks */
.discount-code-section { margin: var(--space-3) 0; }

.optional-payment-section {
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-top: var(--space-3);
    border: 1px dashed var(--gray-200);
}
.optional-payment-title {
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.toggle-optional-payment {
    background: none;
    border: none;
    color: var(--jibu-primary);
    cursor: pointer;
    font-size: .9rem;
}
.optional-payment-content { display: none; }
.optional-payment-content.active { display: block; }

/* -----------------------------------------------------------------------------
   13. MAPS
   --------------------------------------------------------------------------- */
.map-container,
.delivery-map-container {
    margin: var(--space-5) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.map-container { border: 3px solid var(--jibu-primary); }
.delivery-map-container { border: 3px solid var(--success); margin-top: var(--space-4); }

.map-container::before,
.delivery-map-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40px;
    z-index: 1;
    pointer-events: none;
}
.map-container::before { background: linear-gradient(to bottom, rgba(var(--jibu-primary-rgb), .9), rgba(var(--jibu-primary-rgb), .7)); }
.delivery-map-container::before { background: linear-gradient(to bottom, rgba(var(--success-rgb), .9), rgba(var(--success-rgb), .7)); }

.map-title,
.delivery-map-title {
    position: absolute;
    top: 9px;
    left: 15px;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

#map,
#delivery-map {
    height: 300px;
    width: 100%;
    border-radius: 9px;
    margin-top: 40px;
}

.map-controls,
.delivery-map-controls {
    position: absolute;
    top: 50px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.map-control-btn,
.delivery-map-control-btn {
    width: 38px;
    height: 38px;
    background: var(--surface);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
}
.map-control-btn { color: var(--jibu-primary); }
.delivery-map-control-btn { color: var(--success); }
.map-control-btn:hover { background: var(--jibu-primary); color: #fff; transform: scale(1.1); }
.delivery-map-control-btn:hover { background: var(--success); color: #fff; transform: scale(1.1); }

.address-display {
    background: var(--surface-muted);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: .9rem;
    border-left: 4px solid var(--jibu-primary);
}
.address-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.franchise-info {
    background: linear-gradient(135deg, #ebf8ff, #d4ecfb);
    padding: var(--space-3);
    border-left: 4px solid var(--jibu-primary);
    font-weight: 600;
    color: var(--jibu-deep);
    margin: var(--space-3) 0;
    border-radius: var(--radius-md);
    font-size: .9rem;
}

/* -----------------------------------------------------------------------------
   14. ORDER SUMMARY / PAYMENT
   --------------------------------------------------------------------------- */
.order-summary,
.order-details {
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-4) 0;
}
.order-details { text-align: left; }

.summary-item,
.order-detail-item {
    display: flex;
    justify-content: space-between;
    margin: var(--space-2) 0;
    font-size: .95rem;
}

.summary-total,
.order-detail-total {
    border-top: 1px solid var(--gray-200);
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    font-weight: 700;
    font-size: 1.1em;
    color: var(--success);
}
.order-detail-total { border-top-width: 2px; }

.payment-section {
    margin-top: var(--space-5);
    border-top: 1px solid var(--gray-100);
    padding-top: var(--space-5);
}
.payment-options {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.payment-option {
    flex: 1;
    min-width: 100px;
    min-height: var(--tap-target);
    text-align: center;
    padding: var(--space-3);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}
.payment-option:hover { border-color: var(--jibu-accent); }
.payment-option.active {
    border-color: var(--jibu-primary);
    background: rgba(var(--jibu-primary-rgb), .06);
}
.payment-option i {
    font-size: 1.5rem;
    margin-bottom: var(--space-1);
    display: block;
    color: var(--jibu-primary);
}
.payment-details { margin-top: var(--space-4); display: none; }
.payment-details.active { display: block; }

/* -----------------------------------------------------------------------------
   15. BOTTOM NAVIGATION
   --------------------------------------------------------------------------- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    display: flex;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 14px rgba(var(--jibu-deep-rgb), .10);
    z-index: 50;
}
.nav-btn {
    flex: 1;
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-3);
    text-align: center;
    border: none;
    background: none;
    font-size: .82rem;
    color: var(--gray-500);
    position: relative;
    cursor: pointer;
    transition: var(--transition);
}
.nav-btn i { display: block; font-size: 1.15rem; margin-bottom: 3px; }
.nav-btn:hover { color: var(--jibu-primary); }
.nav-btn.active { color: var(--jibu-primary); font-weight: 600; }
.nav-btn.active i { color: var(--jibu-primary); }
.nav-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    right: 25%;
    height: 3px;
    background: var(--jibu-primary);
    border-radius: 3px;
}

/* -----------------------------------------------------------------------------
   16. ORDER HISTORY / ACCOUNT SECTIONS
   --------------------------------------------------------------------------- */
.order-history,
.delivery-tracking,
.account-section { padding: var(--space-4); display: none; }

.order-item,
.delivery-person-info,
.customer-info,
.jibu-info,
.feedback-section {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-md);
}

.customer-info h3,
.jibu-info h3,
.feedback-section h3 { margin-bottom: var(--space-3); color: var(--jibu-primary); }
.jibu-info p { margin-bottom: var(--space-1); }

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.order-id { font-weight: 700; color: var(--ink); }
.order-status {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: .8rem;
    font-weight: 600;
}
.status-delivered { background: #d4edda; color: #155724; }
.status-pending   { background: var(--warning-bg); color: var(--warning-fg); }
.order-total { font-weight: 700; color: var(--success); margin-top: var(--space-1); }

#feedback-text {
    width: 100%;
    min-height: 100px;
    padding: var(--space-3);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    resize: vertical;
    margin-bottom: var(--space-3);
    font-family: inherit;
}
#feedback-text:focus {
    outline: none;
    border-color: var(--jibu-primary);
    box-shadow: 0 0 0 3px rgba(var(--jibu-primary-rgb), .18);
}

/* -----------------------------------------------------------------------------
   17. DELIVERY TRACKING
   --------------------------------------------------------------------------- */
.delivery-status {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: var(--space-5) 0 var(--space-10);
}
.delivery-progress {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gray-200);
    z-index: 1;
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: var(--success);
    width: 0%;
    transition: width .5s ease;
}
.status-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}
.status-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: var(--space-2);
}
.status-step.completed .status-icon { background: var(--success); color: #fff; }
.status-label { font-size: .8rem; text-align: center; color: var(--gray-500); }
.status-step.completed .status-label { color: var(--ink); font-weight: 600; }

.delivery-times {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.time-card {
    background: var(--surface-muted);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.time-label { font-size: .8rem; color: var(--gray-500); margin-bottom: var(--space-1); }
.time-value { font-weight: 600; color: var(--ink); }
.delivery-duration { grid-column: span 2; }

/* Order status visualization */
.order-status-visualization {
    margin: var(--space-4) 0;
    padding: var(--space-3);
    background: var(--surface-muted);
    border-radius: var(--radius-md);
}
.status-progress-bar {
    height: 10px;
    background: var(--gray-100);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: var(--space-3);
}
.status-progress-fill {
    height: 100%;
    transition: width .5s ease;
    background: var(--success);
}
.status-to-deliver .status-progress-fill { background: var(--jibu-accent); width: 33% !important; }
.status-in-transit .status-progress-fill { background: var(--warning); width: 66% !important; }
.status-delivered .status-progress-fill { background: var(--success); width: 100% !important; }
.status-cancelled .status-progress-fill { background: var(--danger); width: 100% !important; }

.status-labels {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: var(--gray-500);
}
.status-labels .status-label { text-align: center; flex: 1; }
.status-labels .status-label.active { color: var(--gray-800); font-weight: 600; }

.order-timestamps { margin-top: var(--space-3); font-size: .8rem; }
.timestamp { display: flex; justify-content: space-between; margin-bottom: var(--space-1); }
.timestamp-label { font-weight: 500; }

/* -----------------------------------------------------------------------------
   18. SPINNER / LOADING (skeleton-friendly)
   --------------------------------------------------------------------------- */
.spinner {
    border: 4px solid rgba(var(--jibu-primary-rgb), .15);
    border-top-color: var(--jibu-primary);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    animation: jibu-spin 1s linear infinite;
    margin: 0 auto;
}
@keyframes jibu-spin {
    to { transform: rotate(360deg); }
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.loading-text { margin-top: var(--space-3); font-weight: 600; color: var(--ink); }

.location-loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: jibu-spin 1s linear infinite;
}

/* Skeleton placeholder helper */
.skeleton {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
    background-size: 400% 100%;
    animation: jibu-shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
}
@keyframes jibu-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* -----------------------------------------------------------------------------
   19. SUCCESS MODAL
   --------------------------------------------------------------------------- */
.order-success { text-align: center; padding: var(--space-8) var(--space-5); }
.success-icon {
    font-size: 3rem;
    color: var(--success);
    margin-bottom: var(--space-4);
    animation: jibu-pop .4s ease;
}
.order-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

@keyframes jibu-pop {
    0%   { transform: scale(.85); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* -----------------------------------------------------------------------------
   20. WHATSAPP MODAL
   --------------------------------------------------------------------------- */
.whatsapp-modal {
    position: fixed;
    inset: 0;
    background: rgba(var(--jibu-deep-rgb), .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--space-4);
}
.whatsapp-modal-content {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 400px;
    padding: var(--space-5);
    text-align: center;
    box-shadow: var(--shadow-xl);
}
.whatsapp-buttons {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
    justify-content: center;
    flex-wrap: wrap;
}
.whatsapp-btn {
    padding: var(--space-3) var(--space-4);
    min-height: var(--tap-target);
    border-radius: var(--radius-sm);
    border: none;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    min-width: 100px;
    color: #fff;
    transition: var(--transition);
}
.whatsapp-yes { background: var(--whatsapp-green); }
.whatsapp-yes:hover { filter: brightness(.95); }
.whatsapp-no { background: var(--gray-500); }
.whatsapp-no:hover { background: var(--gray-600); }

/* -----------------------------------------------------------------------------
   21. STAR RATING / FEEDBACK
   --------------------------------------------------------------------------- */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-bottom: var(--space-4);
}
.star {
    font-size: 2rem;
    color: var(--gray-300);
    cursor: pointer;
    padding: 2px;
    transition: color .2s ease, transform .15s ease;
}
.star:hover,
.star:hover ~ .star { color: #f5b301; transform: scale(1.08); }
.star.active { color: #f5b301; }

/* -----------------------------------------------------------------------------
   22. MISC
   --------------------------------------------------------------------------- */
.debug-info {
    background: var(--surface-muted);
    border-left: 4px solid var(--jibu-primary);
    padding: var(--space-3);
    margin: var(--space-3) 0;
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    color: var(--ink);
    max-height: 150px;
    overflow-y: auto;
}

/* -----------------------------------------------------------------------------
   23. RESPONSIVE LAYOUT
   --------------------------------------------------------------------------- */

/* Phones — tighten grid spacing on very small screens */
@media (max-width: 360px) {
    .product-grid,
    #products-grid { gap: var(--space-3); }
}

/* Small tablets */
@media (min-width: 480px) {
    .product-grid,
    #products-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .product-grid,
    #products-grid { grid-template-columns: repeat(4, 1fr); }
    .jibu-hero-title { font-size: 1.7rem; }
}

/* Desktop — centered container, auto-fill product grid */
@media (min-width: 992px) {
    .container {
        max-width: var(--container-max);
        box-shadow: 0 0 40px rgba(var(--jibu-deep-rgb), .08);
    }
    .cart-summary {
        max-width: var(--container-max);
        margin: 0 auto;
    }
    .product-grid,
    #products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
    }
    .product-card { margin: 0 !important; }
    .product-image-container { height: 170px; }

    .jibu-hero { min-height: 260px; }
    .jibu-hero-title { font-size: 2rem; }
    .jibu-logo { height: 52px; }
}

/* Wide desktop */
@media (min-width: 1400px) {
    .container { max-width: var(--container-max-xl); }
    .cart-summary { max-width: var(--container-max-xl); }
}

/* -----------------------------------------------------------------------------
   24. MOTION PREFERENCES
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   REDESIGN THEME — "Water & Sun: your neighbourhood station"  (v=test2)
   Appended override layer. Equal/raised specificity → wins via cascade order.
   Grounded in Jibu's world: clean water (cool depth) + a better life (warm sun).
   Spends its boldness on ONE signature: the hero "water line" pour.
   ============================================================================= */
:root {
    /* Water & Sun palette */
    --water-deep:   #06324F;   /* deep clean water — hero ink            */
    --water:        #0E6BA8;   /* true Jibu blue — primary structure     */
    --water-rgb:    14, 107, 168;
    --water-bright: #36C5E0;   /* fresh spring cyan — the "fill" accent   */
    --sun:          #F4A92C;   /* warm amber — forward actions / optimism */
    --sun-deep:     #E08A12;
    --sun-rgb:      244, 169, 44;
    --paper:        #EAF4F6;   /* cool water-tint page                    */
    --ink:          #082A40;

    /* Re-point the legacy brand tokens so existing rules inherit the new mood */
    --jibu-primary:     #0E6BA8;
    --jibu-primary-rgb: 14, 107, 168;
    --jibu-deep:        #06324F;
    --jibu-accent:      #36C5E0;
    --jibu-page-bg:     #EAF4F6;
    --ink:              #082A40;

    --font-display: 'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
}

body { background: var(--paper); color: var(--ink); font-family: var(--font-body); }

/* ---- Display type: characterful, tighter, confident ---------------------- */
.jibu-hero-title, .order-success h2, .modal-body h3, .account-section h3,
.product-name, .summary-total, h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: -.02em;
}

/* -----------------------------------------------------------------------------
   SIGNATURE — the hero pours into the page over a water line
   --------------------------------------------------------------------------- */
.jibu-hero {
    background:
        radial-gradient(120% 90% at 80% -10%, rgba(54,197,224,.55) 0%, rgba(54,197,224,0) 55%),
        linear-gradient(160deg, var(--water) 0%, var(--water-deep) 100%) !important;
    position: relative;
    padding-bottom: 56px;     /* room for the wave */
    overflow: hidden;
}
/* faint caustic shimmer — ambient, slow, reduced-motion-safe */
.jibu-hero::before {
    content: "";
    position: absolute; inset: -40% -10% auto -10%; height: 140%;
    background: radial-gradient(60% 40% at 30% 20%, rgba(255,255,255,.12), transparent 60%);
    pointer-events: none;
}
/* the water line: a wave the page colour rises into */
.jibu-hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 46px;
    background: var(--paper);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 L0 22 C 180 2 300 2 480 18 C 680 36 760 40 960 22 C 1080 11 1140 11 1200 18 L1200 46 Z'/%3E%3C/svg%3E") bottom/100% 46px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 L0 22 C 180 2 300 2 480 18 C 680 36 760 40 960 22 C 1080 11 1140 11 1200 18 L1200 46 Z'/%3E%3C/svg%3E") bottom/100% 46px no-repeat;
}
.jibu-hero-content { position: relative; z-index: 2; }
.jibu-hero-overlay { background: transparent !important; }
.jibu-hero-title { font-size: 2rem; font-weight: 800; line-height: 1.05; }
.jibu-hero-tag   { opacity: .92; }

/* eyebrow that states the locality thesis, injected before the title via CSS */
.jibu-hero-title::before {
    content: "Your neighbourhood water station";
    display: block;
    font-family: var(--font-body);
    font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--water-bright);
    margin-bottom: 8px;
}

/* -----------------------------------------------------------------------------
   Forward actions wear the sun — ordering is an inviting, warm act
   --------------------------------------------------------------------------- */
body .checkout-btn, body .btn-primary, body .new-order-btn,
body .add-to-cart-btn, body .feedback-btn {
    background: linear-gradient(160deg, var(--sun) 0%, var(--sun-deep) 100%) !important;
    color: #3a2400 !important;
    box-shadow: 0 6px 16px rgba(var(--sun-rgb), .34) !important;
    font-family: var(--font-display); font-weight: 700;
}
body .checkout-btn:hover, body .btn-primary:hover,
body .new-order-btn:hover, body .feedback-btn:hover {
    background: var(--sun-deep) !important; transform: translateY(-1px);
}
/* final confirm stays "go" green; structure buttons stay water-blue */
body .submit-btn { background: linear-gradient(160deg,#1aa85d,#15924f) !important; color:#fff !important; font-family: var(--font-display); }

/* -----------------------------------------------------------------------------
   Cards: clean, tactile, water-tint lift
   --------------------------------------------------------------------------- */
.product-card {
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(8,42,64,.05);
    transition: transform .12s, box-shadow .15s, border-color .15s;
}
.product-card:hover, .product-card:focus-within {
    border-color: var(--water-bright);
    box-shadow: 0 10px 26px rgba(var(--water-rgb), .16);
    transform: translateY(-3px);
}
.product-price, .summary-total, .time-value { color: var(--water-deep); font-family: var(--font-display); font-weight: 700; }

/* -----------------------------------------------------------------------------
   Bottom nav: the active tab is marked by a sun line (accent echo)
   --------------------------------------------------------------------------- */
.nav-btn.active { color: var(--water-deep); }
.nav-btn.active i { color: var(--water); }
.nav-btn.active::after { background: var(--sun) !important; height: 3px; border-radius: 3px; }

/* price pills: active reads as a clear, bright water chip */
.price-option.active { background: rgba(255,255,255,.96); color: var(--water-deep); }

/* gentle section rhythm — a faint water-line divider, not a hard rule */
.product-section + .product-section { border-top: 1px dashed var(--gray-200); }

@media (prefers-reduced-motion: reduce) {
    .jibu-hero::before { animation: none; }
    body .checkout-btn:hover, body .btn-primary:hover { transform: none; }
}

/* =============================================================================
   APP-VIBES LAYER (v=test3) — native-feeling checkout, fields, controls.
   Appended last → wins on shared external rules; body-prefixed where it must
   beat the page's inline <style> (nav). Mobile-first; sheet scoped to phones.
   ============================================================================= */

/* ---- App-style form fields: taller, filled, calm, thumb-friendly ---------- */
.form-group { margin-bottom: 18px; }
.form-label {
    font-size: .78rem; font-weight: 600; letter-spacing: .01em;
    color: var(--gray-600); margin-bottom: 7px; text-transform: none;
}
.form-input, .form-select, .form-textarea {
    min-height: 54px; padding: 15px 16px;
    border: 1.5px solid var(--gray-200); border-radius: 14px;
    background: var(--surface-muted); font-size: 1rem;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--water); background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--water-rgb), .14);
}
.phone-prefix { top: 17px; font-weight: 600; color: var(--water-deep); }

/* ---- Segmented control: the price toggle reads as a native segmented bar --- */
.price-list-toggle {
    display: inline-flex; gap: 4px; padding: 4px;
    background: rgba(255,255,255,.22); border-radius: 999px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.price-option {
    flex: 1; text-align: center; padding: 9px 18px; border-radius: 999px;
    font-weight: 600; font-size: .85rem; color: #fff; transition: all .18s;
}
.price-option.active {
    background: #fff; color: var(--water-deep);
    box-shadow: 0 2px 8px rgba(6,50,79,.18);
}

/* ---- Checkout becomes a bottom sheet (phones) with a drag handle ----------- */
@media (max-width: 640px) {
    .modal-overlay, .modal { align-items: flex-end; padding: 0; }
    .modal-container, .modal-content {
        max-width: 100%; width: 100%; max-height: 94vh;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
        padding-top: 10px;
    }
    .modal-overlay.active .modal-container,
    .modal.active .modal-content { transform: translateY(0); }
    /* grab handle */
    .modal-container::before, .modal-content::before {
        content: ""; display: block; width: 40px; height: 4px; margin: 2px auto 8px;
        background: var(--gray-300); border-radius: 999px;
    }
    .modal-header { border-radius: 24px 24px 0 0; }
}

/* ---- Sticky "Place Order" bar at the foot of the sheet -------------------- */
.modal-body { padding-bottom: 92px; }   /* clear the sticky bar */
body .submit-btn {
    position: sticky; bottom: 0; z-index: 6;
    width: 100%; min-height: 56px; margin-top: 8px;
    border-radius: 16px; font-size: 1.05rem; font-weight: 700;
    box-shadow: 0 -8px 18px rgba(255,255,255,.9), 0 8px 20px rgba(26,168,93,.28);
}
/* a soft fade so content scrolls "under" the sticky bar */
.modal-body form { position: relative; }

/* ---- Cart checkout CTA: big, confident, amber (the inviting action) -------- */
body #checkout-button { min-height: 56px; border-radius: 16px; font-size: 1.05rem; }

/* ---- Bottom nav: taller, calmer, safe-area aware -------------------------- */
body .bottom-nav {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 var(--gray-200), 0 -6px 20px rgba(6,50,79,.06);
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body .nav-btn { min-height: 58px; font-size: .68rem; letter-spacing: .01em; }
body .nav-btn i { font-size: 1.25rem; margin-bottom: 4px; }

/* ---- A touch more rhythm in the product grid ----------------------------- */
.product-grid { gap: 14px; }
.product-card { padding: 14px; }

/* ---- Generic primary buttons: rounder, larger hit area ------------------- */
.btn { min-height: 50px; border-radius: 14px; }

/* =============================================================================
   BRAND REALIGN (v=test4) — Jibu's main colour is BLUE. Drop amber entirely;
   forward actions wear brand blue. Display face back to Poppins (brand-safe).
   Keeps the modern app layout (bottom sheet, segmented control, spacing).
   ============================================================================= */
:root {
    --font-display: 'Poppins', system-ui, sans-serif;
    /* repoint the warm tokens to brand blue → every amber usage becomes blue */
    --sun:      #1660B0;
    --sun-deep: #0D4280;
    --sun-rgb:  22, 96, 176;
}

/* forward CTAs: brand blue, white text (override the old amber dark text) */
body .checkout-btn, body .btn-primary, body .new-order-btn,
body .add-to-cart-btn, body .feedback-btn, body #checkout-button {
    background: linear-gradient(160deg, #1660B0 0%, #0D4280 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(22, 96, 176, .30) !important;
}
body .checkout-btn:hover, body .btn-primary:hover,
body .new-order-btn:hover, body .feedback-btn:hover { background: #0D4280 !important; }

/* active bottom-nav marker → bright water cyan (blue family, not amber) */
.nav-btn.active::after { background: var(--water-bright) !important; }

/* -----------------------------------------------------------------------------
   Pricing selector — labelled + tidy, so it reads as a clear pricing context
   --------------------------------------------------------------------------- */
.price-list-label {
    margin: 14px 0 7px;
    font-family: var(--font-body);
    font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.82); text-align: center;
}
.price-list-toggle { width: 100%; }
.price-option { font-size: .8rem; padding: 9px 8px; }
.price-option.active { color: #0D4280; }

/* =============================================================================
   COMPACT HEADER (v=test5) — this is an ordering app, not a landing page.
   Drop the marketing headline/tagline so the pricing selector + products sit
   near the top and the first tap is the order, not a read. Reversible.
   ============================================================================= */
.jibu-hero { padding-top: 14px; padding-bottom: 50px; }
.jibu-hero-title, .jibu-hero-tag { display: none; }   /* removes headline + eyebrow + tagline */
.jibu-logo { height: 34px; margin-bottom: 2px; }
.price-list-label { margin-top: 12px; }

/* =============================================================================
   PHONE-FIRST CHECKOUT (v=test6) — returning-customer greeting + name reveal.
   ============================================================================= */
.customer-greeting {
    margin-top: 10px; padding: 11px 14px; border-radius: 12px;
    background: rgba(22, 96, 176, .09); color: var(--water-deep);
    font-weight: 600; font-size: .92rem; line-height: 1.3;
}
#name-group { animation: jibuFade .18s ease; }
@keyframes jibuFade { from { opacity: .35; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #name-group { animation: none; } }
