/*
 * menu/assets/css/theme-boutique.css
 * ============================================================================
 * BotOrders Web Menu — Boutique Theme
 * Archetype: warm cream surfaces, earthy terracotta accent, soft warm
 * shadows, slightly generous radii. (Sense/Expression energy.)
 *
 * Fully standalone — does not reference or modify theme-default.css.
 * See theme-default.css for full section documentation.
 * ============================================================================
 */


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 1 — THEME VARIABLES
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand ─────────────────────────────────────────────────── */
    --primary:           #B5622A;
    --primary-dark:      #8F4C1E;
    --primary-light:     #FBEEE4;
    --primary-text:      #FFFFFF;

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

    /* ── Text ──────────────────────────────────────────────────── */
    --text:              #2E2A25;
    --text-muted:        #8A8175;
    --text-price:        #2E2A25;
    --text-price-old:    #C4BBAE;

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

    /* ── Status ────────────────────────────────────────────────── */
    --success:           #5B8C5A;
    --danger:            #B5622A;

    /* ── Sizing ────────────────────────────────────────────────── */
    --header-h:          92px;
    --cat-h:             52px;
    --search-bar-h:      48px;
    --radius:            14px;
    --radius-sm:         10px;
    --radius-xs:         6px;

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

    /* ── Bootstrap overrides ───────────────────────────────────── */
    --bs-primary:        var(--primary);
    --bs-primary-rgb:    181, 98, 42;
    --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 1b — BOUTIQUE-SPECIFIC WARMTH
   Warm-toned shadows (not pure black) to match the cream/terracotta palette.
   ════════════════════════════════════════════════════════════════════════════ */

.product-card {
    box-shadow: 0 2px 10px rgba(120, 85, 50, .10) !important;
}
.product-card:hover {
    box-shadow: 0 6px 20px rgba(120, 85, 50, .16) !important;
}

#cart-footer { box-shadow: 0 -3px 12px rgba(120, 85, 50, .10); }

.product-img-wrap,
.product-img-placeholder,
.modal-product-img { background: #F5EEE5 !important; }


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

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

[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
   ════════════════════════════════════════════════════════════════════════════ */

.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;
}

.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;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow:   0 0 0 0.2rem rgba(181, 98, 42, 0.18) !important;
    outline:      none !important;
}

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


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 4 — PAGE LOADER
   ════════════════════════════════════════════════════════════════════════════ */

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

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

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


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 5 — HEADER
   ════════════════════════════════════════════════════════════════════════════ */

#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;
    box-shadow: 0 1px 8px rgba(120,85,50,.06);
}

.header-logo-img {
    height:        48px;
    width:         auto;
    border-radius: var(--radius-sm);
    object-fit:    contain;
    flex-shrink:   0;
}

.header-name {
    flex:        1;
    font-weight: 700;
    font-size:   1rem;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.header-status {
    font-size:  0.68rem;
    padding:    3px 8px;
    flex-shrink: 0;
}

#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-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;
}

[dir="rtl"] #cart-count {
    right: auto;
    left:  -4px;
}

.cart-btn-flash { animation: cartFlash .35s ease; }
@keyframes cartFlash {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.35); }
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 6 — CATEGORY NAV
   ════════════════════════════════════════════════════════════════════════════ */

#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;
}

#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;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#cat-nav-inner::-webkit-scrollbar { display: none; }

#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: #F3ECE3;
    border-radius: 99px;
    height:     34px;
    padding:    0 0.75rem;
    gap:        0.4rem;
    transition: background .15s;
}
.search-bar-inner:focus-within {
    background: #ECE2D5;
    box-shadow: 0 0 0 2px rgba(181,98,42,.18);
}

.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); }
.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 {
    padding:     1rem 1rem 0.5rem;
    font-size:   0.85rem;
    color:       var(--text-muted);
}
.search-results-query {
    font-weight: 600;
    color:       var(--text);
}

.cat-pill {
    white-space:   nowrap;
    border-radius: 99px;
    font-size:     0.8rem;
    padding:       0.25rem 1rem;
    background:    #F3ECE3;
    border:        1.5px solid transparent;
    color:         #6B6357;
    transition:    all .15s;
    flex-shrink:   0;
    font-weight:   500;
}
.cat-pill:hover { background: #ECE2D5; color: #2E2A25; }
.cat-pill.active {
    background:   var(--primary);
    border-color: var(--primary);
    color:        var(--primary-text);
    font-weight:  600;
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 7 — VIEW MANAGEMENT
   ════════════════════════════════════════════════════════════════════════════ */

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

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


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 7b — PAGINATION
   ════════════════════════════════════════════════════════════════════════════ */

.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
   ════════════════════════════════════════════════════════════════════════════ */

.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 {
    border:        none !important;
    border-radius: var(--radius) !important;
    cursor:        pointer;
    transition:    transform .15s, box-shadow .15s;
    overflow:      hidden;
}
.product-card:hover {
    transform:  translateY(-2px);
}

.product-img-wrap {
    aspect-ratio: 4 / 3;
    overflow:     hidden;
    border-bottom: 1px solid var(--border);
}
.product-img {
    width:        100%;
    height:       100%;
    object-fit:   contain;
    padding:      4px;
    display:      block;
}

.product-img-placeholder {
    aspect-ratio: 4 / 3;
    font-size:    2.5rem;
}

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

.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)
   ════════════════════════════════════════════════════════════════════════════ */

.modal-product-img {
    aspect-ratio: 4 / 3;
    object-fit:   contain;
    display:      block;
    width:        100%;
    border-radius: var(--radius) var(--radius) 0 0;
}

.modal-img-close {
    position: absolute;
    top:      0.5rem;
    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-chip {
    border-radius: 99px !important;
    font-size:     0.82rem;
    border:        1.5px solid #E5DACB !important;
    background:    #fff !important;
    color:         #6B6357 !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-chip {
    border-radius: var(--radius-sm) !important;
}

.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
   ════════════════════════════════════════════════════════════════════════════ */

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

[dir="rtl"] .offcanvas-end {
    right: auto;
    left:  0;
    border-radius: 0 var(--radius) var(--radius) 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 11 — CHECKOUT FORM
   ════════════════════════════════════════════════════════════════════════════ */

.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
   ════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 576px) {
    .modal-dialog { max-width: 500px; }
}

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

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