/*
 * menu/assets/css/theme-default.css
 * ============================================================================
 * BotOrders Web Menu — Default Theme (Bootstrap 5 base)
 *
 * Bootstrap handles: grid, buttons, forms, modal, offcanvas, cards,
 *   badges, typography utilities, spacing utilities, flex utilities.
 *
 * This file handles:
 *   · CSS variables (change these to create a new theme)
 *   · Bootstrap color overrides (--bs-primary wired to our brand color)
 *   · Custom components Bootstrap doesn't cover:
 *       page loader, header, category nav, product image, option chips,
 *       cart footer, add button, RTL tweaks
 *
 * HOW TO CREATE A NEW THEME
 * ─────────────────────────
 * Copy this file → theme-{name}.css
 * Override only the :root variables in Section 1.
 * Everything else adapts automatically.
 * ============================================================================
 */


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 1 — THEME VARIABLES
   All colors, radii, sizes, and fonts live here.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand ─────────────────────────────────────────────────── */
    --primary:           #E63946;
    --primary-dark:      #C1121F;
    --primary-light:     #FFF0F1;
    --primary-text:      #FFFFFF;      /* text ON primary background */

    /* ── Surfaces ──────────────────────────────────────────────── */
    --bg:                #F4F4F4;
    --card:              #FFFFFF;
    --header-bg:         #FFFFFF;
    --cat-bar-bg:        #FFFFFF;

    /* ── Text ──────────────────────────────────────────────────── */
    --text:              #1A1A1A;
    --text-muted:        #888888;
    --text-price:        #1A1A1A;
    --text-price-old:    #BBBBBB;

    /* ── Borders ───────────────────────────────────────────────── */
    --border:            #EBEBEB;

    /* ── Status ────────────────────────────────────────────────── */
    --success:           #2D9D5C;
    --danger:            #E63946;

    /* ── Sizing ────────────────────────────────────────────────── */
    --header-h:          92px;
    --cat-h:             52px;
    --search-bar-h:      48px;
    --radius:            12px;
    --radius-sm:         8px;
    --radius-xs:         4px;

    /* ── Fonts ─────────────────────────────────────────────────── */
    --font-ar:           'Cairo', sans-serif;

    /* ── Bootstrap overrides ───────────────────────────────────── */
    /* Wire Bootstrap's primary system to our brand color */
    --bs-primary:        var(--primary);
    --bs-primary-rgb:    230, 57, 70;
    --bs-link-color:     var(--primary);
    --bs-link-hover-color: var(--primary-dark);
    --bs-border-radius:  var(--radius-sm);
    --bs-body-bg:        var(--bg);
    --bs-body-color:     var(--text);
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 2 — BASE / GLOBAL
   ════════════════════════════════════════════════════════════════════════════ */

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Push content below the fixed header + cat-nav (pills + search bar) */
    padding-top: calc(var(--header-h) + var(--cat-h) + var(--search-bar-h));
    padding-bottom: 2rem;
    min-height: 100vh;
}

/* Arabic font applied via dir attribute — no class needed */
[dir="rtl"] body,
[dir="rtl"] .form-control,
[dir="rtl"] .form-select,
[dir="rtl"] .form-check-label,
[dir="rtl"] .btn,
[dir="rtl"] .offcanvas,
[dir="rtl"] .modal {
    font-family: var(--font-ar), -apple-system, BlinkMacSystemFont, sans-serif;
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 3 — BOOTSTRAP COLOR OVERRIDES
   Force Bootstrap components to use our primary brand color.
   ════════════════════════════════════════════════════════════════════════════ */

/* Primary buttons */
.btn-primary {
    background-color: var(--primary) !important;
    border-color:     var(--primary) !important;
    color:            var(--primary-text) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-dark) !important;
    border-color:     var(--primary-dark) !important;
}

/* Outline primary buttons */
.btn-outline-primary {
    color:        var(--primary) !important;
    border-color: var(--primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--primary) !important;
    color:            var(--primary-text) !important;
}

/* Focus ring */
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow:   0 0 0 0.2rem rgba(230, 57, 70, 0.2) !important;
    outline:      none !important;
}

/* Utility overrides */
.text-primary  { color:            var(--primary) !important; }
.bg-primary    { background-color: var(--primary) !important; }
.border-primary{ border-color:     var(--primary) !important; }


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 4 — PAGE LOADER
   Covers the screen until init() removes it from the DOM.
   ════════════════════════════════════════════════════════════════════════════ */

#page-loader {
    position:        fixed;
    inset:           0;
    background:      #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         9999;
}

.loader-spinner {
    width:        44px;
    height:       44px;
    border:       4px solid #eee;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation:    spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 5 — HEADER
   Fixed to viewport top. Contains logo, shop name, status badge, cart btn.
   ════════════════════════════════════════════════════════════════════════════ */

#site-header {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    height:     var(--header-h);
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    display:    flex;
    align-items: center;
    padding:    0 1rem;
    gap:        0.6rem;
    z-index:    1020; /* above Bootstrap offcanvas (1045) — Bootstrap modal (1055) */
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

/* Logo image (injected by JS when shop has a logo) */
.header-logo-img {
    height:        48px;
    width:         auto;
    border-radius: var(--radius-sm);
    object-fit:    contain;
    flex-shrink:   0;
}

/* Shop name — stretches to fill remaining space */
.header-name {
    flex:        1;
    font-weight: 700;
    font-size:   1rem;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* Open / Closed badge */
.header-status {
    font-size:  0.68rem;
    padding:    3px 8px;
    flex-shrink: 0;
}

/* Cart button */
#cart-btn {
    position:   relative;
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    0.3rem;
    color:      var(--text);
    display:    flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .15s;
}
#cart-btn:hover { transform: scale(1.1); }

#cart-btn svg {
    width:  26px;
    height: 26px;
}

/* Cart item count bubble */
#cart-count {
    position:   absolute;
    top:        -4px;
    right:      -4px;
    background: var(--primary);
    color:      #fff;
    border-radius: 99px;
    font-size:  0.62rem;
    font-weight: 700;
    min-width:  18px;
    height:     18px;
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    0 4px;
}

/* RTL: bubble moves to left side */
[dir="rtl"] #cart-count {
    right: auto;
    left:  -4px;
}

/* Flash animation when item is added */
.cart-btn-flash { animation: cartFlash .35s ease; }
@keyframes cartFlash {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.35); }
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 6 — CATEGORY NAV
   Horizontal scrollable pill nav, fixed below the header.
   ════════════════════════════════════════════════════════════════════════════ */

#cat-nav {
    position:       fixed;
    top:            var(--header-h);
    left:           0;
    right:          0;
    background:     var(--cat-bar-bg);
    border-bottom:  1px solid var(--border);
    z-index:        1010;
    display:        flex;
    flex-direction: column;
}

/* Pills row */
#cat-nav-inner {
    display:    flex;
    gap:        0.45rem;
    overflow-x: auto;
    padding:    0 1rem;
    width:      100%;
    height:     var(--cat-h);
    align-items: center;
    flex-shrink: 0;
    /* Hide scrollbar cross-browser */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#cat-nav-inner::-webkit-scrollbar { display: none; }

/* Search bar row — appended by renderSearchBar() */
#search-bar-wrap {
    padding:    0 1rem 0.5rem;
    height:     var(--search-bar-h);
    display:    flex;
    align-items: center;
}

.search-bar-inner {
    position:   relative;
    display:    flex;
    align-items: center;
    width:      100%;
    background: #f0f0f0;
    border-radius: 99px;
    height:     34px;
    padding:    0 0.75rem;
    gap:        0.4rem;
    transition: background .15s;
}
.search-bar-inner:focus-within {
    background: #e8e8e8;
    box-shadow: 0 0 0 2px rgba(230,57,70,.2);
}

.search-icon {
    color:       var(--text-muted);
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}

.search-input {
    flex:        1;
    border:      none;
    background:  transparent;
    outline:     none;
    font-size:   0.85rem;
    color:       var(--text);
    min-width:   0;
    padding:     0;
}
.search-input::placeholder { color: var(--text-muted); }
/* Hide browser's native clear button — we have our own */
.search-input::-webkit-search-cancel-button { display: none; }

.search-clear {
    background:  none;
    border:      none;
    padding:     0;
    cursor:      pointer;
    color:       var(--text-muted);
    font-size:   0.75rem;
    line-height: 1;
    flex-shrink: 0;
}
.search-clear:hover { color: var(--text); }

.search-spinner {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}

/* Search results header */
.search-results-header {
    padding:     1rem 1rem 0.5rem;
    font-size:   0.85rem;
    color:       var(--text-muted);
}
.search-results-query {
    font-weight: 600;
    color:       var(--text);
}

/* Category pill buttons */
.cat-pill {
    white-space:   nowrap;
    border-radius: 99px;
    font-size:     0.8rem;
    padding:       0.25rem 1rem;
    background:    #f0f0f0;
    border:        1.5px solid transparent;
    color:         #555;
    transition:    all .15s;
    flex-shrink:   0;
    font-weight:   500;
}
.cat-pill:hover { background: #e3e3e3; color: #222; }
.cat-pill.active {
    background:   var(--primary);
    border-color: var(--primary);
    color:        var(--primary-text);
    font-weight:  600;
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 7 — VIEW MANAGEMENT
   Only the .active view is visible. showView() in JS toggles this class.
   ════════════════════════════════════════════════════════════════════════════ */

#main-content {
    max-width: 900px;
    margin:    0 auto;
    padding:   1rem;
}

.view          { display: none; }
.view.active   { display: block; }


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 7b — PAGINATION
   Prev / Next bar rendered below each product grid by pagination_inc.js
   ════════════════════════════════════════════════════════════════════════════ */

.pagination-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.75rem 0.25rem 1.25rem;
    gap:             0.5rem;
}

.pagination-bar .pag-btn {
    display:     flex;
    align-items: center;
    gap:         0.3rem;
    font-size:   0.8rem;
    padding:     0.3rem 0.9rem;
    border-radius: 99px;
    min-width:   90px;
    justify-content: center;
}
.pagination-bar .pag-btn:disabled {
    opacity: 0.35;
    cursor:  not-allowed;
}

.pag-label {
    font-size:   0.78rem;
    color:       var(--text-muted);
    white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 8 — MENU / PRODUCT GRID
   ════════════════════════════════════════════════════════════════════════════ */

/* Category section heading with brand underline */
.cat-section-title {
    margin-top:    1.5rem;
    margin-bottom: 0.75rem;
    font-weight:   700;
    padding-bottom: 0.4rem;
    border-bottom: 2.5px solid var(--primary);
    display:       inline-block;
}
.cat-section-title:first-child { margin-top: 0.25rem; }

/* Product card */
.product-card {
    border:        none !important;
    border-radius: var(--radius) !important;
    box-shadow:    0 1px 6px rgba(0,0,0,.07);
    cursor:        pointer;
    transition:    transform .15s, box-shadow .15s;
    overflow:      hidden;
}
.product-card:hover {
    transform:  translateY(-2px);
    box-shadow: 0 5px 16px rgba(0,0,0,.12);
}

/* Product image — 4:3 ratio, contain (not cropped) */
.product-img-wrap {
    aspect-ratio: 4 / 3;
    background:   #fafafa;
    overflow:     hidden;
    border-bottom: 1px solid var(--border);
}
.product-img {
    width:        100%;
    height:       100%;
    object-fit:   contain;  /* never crops — shows full image */
    padding:      4px;
    display:      block;
}

/* Placeholder when product has no image */
.product-img-placeholder {
    aspect-ratio: 4 / 3;
    background:   #f5f5f5;
    font-size:    2.5rem;
}

/* Product name — 2-line clamp */
.product-name {
    line-height:        1.3;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* Round add / configure button on each card */
.add-btn {
    width:        32px !important;
    height:       32px !important;
    padding:      0 !important;
    line-height:  1 !important;
    font-size:    1.2rem !important;
    border-radius: 50% !important;
    background:   var(--primary) !important;
    border-color: var(--primary) !important;
    color:        #fff !important;
    flex-shrink:  0;
    display:      flex !important;
    align-items:  center;
    justify-content: center;
    transition:   transform .12s;
}
.add-btn:hover { transform: scale(1.1); }


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 9 — PRODUCT MODAL (configurator)
   Bootstrap renders the modal chrome. We style the inner content.
   ════════════════════════════════════════════════════════════════════════════ */

/* Product hero image at the top of the modal */
.modal-product-img {
    aspect-ratio: 4 / 3;
    object-fit:   contain;
    background:   #fafafa;
    display:      block;
    width:        100%;
    border-radius: var(--radius) var(--radius) 0 0;
}

/* Close button overlay on the image */
.modal-img-close {
    position: absolute;
    top:      0.5rem;
    /* moves to start-edge so it works in both LTR and RTL */
    inset-inline-end: 0.5rem;
    background: rgba(255,255,255,0.85);
    border-radius: 50%;
    width:     32px;
    height:    32px;
    display:   flex;
    align-items: center;
    justify-content: center;
    border:    none;
    cursor:    pointer;
    font-size: 1rem;
    line-height: 1;
}

/* Option group chips (base options: size, flavor, etc.) */
.option-chip {
    border-radius: 99px !important;
    font-size:     0.82rem;
    border:        1.5px solid #ddd !important;
    background:    #fff !important;
    color:         #444 !important;
    padding:       0.3rem 0.9rem !important;
    transition:    all .12s;
    font-weight:   500;
}
.option-chip:hover:not(.active) {
    border-color: var(--primary) !important;
    color:        var(--primary) !important;
}
.option-chip.active {
    background:   var(--primary) !important;
    border-color: var(--primary) !important;
    color:        #fff !important;
    font-weight:  600;
}

/* Extra chips get a slightly different shape to distinguish from base */
.extra-chip {
    border-radius: var(--radius-sm) !important;
}

/* Quantity stepper in modal footer */
.modal-qty-btn {
    width:        32px !important;
    height:       32px !important;
    padding:      0 !important;
    line-height:  1 !important;
    font-size:    1.1rem !important;
    border-radius: var(--radius-xs) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 10 — CART OFFCANVAS
   Bootstrap renders the offcanvas chrome. We style the inner content.
   ════════════════════════════════════════════════════════════════════════════ */

/* Cart item thumbnail */
.cart-item-img {
    width:        64px;
    height:       64px;
    object-fit:   contain;
    background:   #fafafa;
    flex-shrink:  0;
    border:       1px solid var(--border);
    border-radius: var(--radius-xs);
}

/* Sticky footer inside the offcanvas */
#cart-footer {
    padding:    1rem;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -3px 10px rgba(0,0,0,.07);
}

/* RTL: offcanvas slides in from the LEFT (Bootstrap flips this with .rtl CSS,
   but we keep it explicit for custom domain shops loaded via LTR Bootstrap) */
[dir="rtl"] .offcanvas-end {
    right: auto;
    left:  0;
    border-radius: 0 var(--radius) var(--radius) 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 11 — CHECKOUT FORM
   No custom overrides needed — Bootstrap form classes handle everything.
   This section left intentionally light; add overrides here as needed.
   ════════════════════════════════════════════════════════════════════════════ */

/* Order summary card inside checkout */
.order-summary-card {
    background:    var(--card);
    border-radius: var(--radius);
    border:        1px solid var(--border);
    padding:       1rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 12 — ORDER CONFIRMATION
   ════════════════════════════════════════════════════════════════════════════ */

.order-success-icon {
    font-size:   4rem;
    line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 13 — RESPONSIVE TWEAKS
   ════════════════════════════════════════════════════════════════════════════ */

/* Wider modal on large screens */
@media (min-width: 576px) {
    .modal-dialog { max-width: 500px; }
}

/* 3-column product grid on medium+ screens */
@media (min-width: 576px) {
    #main-content { padding: 1.25rem; }
}

@media (min-width: 768px) {
    #main-content { padding: 1.5rem; }
}