/* app-header-theme.css Global header design system — mirrors the reference
   component #offcanvasProductView / .pvh-bar from main.html. */

/* 1. DESIGN TOKENS All header colors, sizes, and shadows in one place.
   Change a token here and every header updates automatically. */
:root {
    /* Header surface — orange-to-white gradient (from pvh-bar reference) */
    --app-hdr-bg:      linear-gradient(180deg, rgba(249, 125, 9, .281) 0%, rgba(255, 255, 255, 1) 100%);
    --app-hdr-border:  1px solid #f1f5f9;
    --app-hdr-shadow:  0 1px 6px rgba(0, 0, 0, .04);
    --app-hdr-padding: 11px 14px;
    --app-hdr-gap:     10px;

    /* Back / action button */
    --app-btn-size:       36px;
    --app-btn-min-touch:  44px;   /* WCAG 2.5.8 touch target */
    --app-btn-color:      #0f172a;
    --app-btn-icon-size:  1rem;
    --app-btn-hover-bg:   rgba(249, 125, 9, .09);

    /* Title */
    --app-title-size:    0.92rem;
    --app-title-weight:  800;
    --app-title-color:   #0f172a;
    --app-title-spacing: -0.2px;
}

/* 2. UTILITY CLASSES Drop these onto any new overlay/sheet header element. */

/* Container — mirrors pvh-bar exactly */
.app-sheet-header {
    display: flex;
    align-items: center;
    gap: var(--app-hdr-gap);
    padding: var(--app-hdr-padding);
    background: var(--app-hdr-bg);
    border-bottom: var(--app-hdr-border);
    box-shadow: var(--app-hdr-shadow);
    flex-shrink: 0;
    z-index: 10;
}

/* Back / dismiss button */
.app-sheet-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-btn-size);
    height: var(--app-btn-size);
    min-width: var(--app-btn-min-touch);
    min-height: var(--app-btn-min-touch);
    color: var(--app-btn-color);
    font-size: var(--app-btn-icon-size);
    text-decoration: none;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .18s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}


.app-sheet-back-btn:active { transform: scale(.9); }


/* Title — centred between back and action buttons */
.app-sheet-title {
    flex: 1;
    font-size: var(--app-title-size);
    font-weight: var(--app-title-weight);
    color: var(--app-title-color);
    letter-spacing: var(--app-title-spacing);
    text-align: center;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

/* Right-side action button (search, filter, share…) */
.app-sheet-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-btn-size);
    height: var(--app-btn-size);
    min-width: var(--app-btn-min-touch);
    min-height: var(--app-btn-min-touch);
    color: var(--app-btn-color);
    font-size: var(--app-btn-icon-size);
    text-decoration: none;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .18s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.app-sheet-action-btn:hover  { background: var(--app-btn-hover-bg); color: var(--app-btn-color); }
.app-sheet-action-btn:active { transform: scale(.9); }
.app-sheet-action-btn:focus-visible {
    outline: 2.5px solid var(--app-btn-focus-ring);
    outline-offset: 2px;
}

/* 3. EXISTING COMPONENT OVERRIDES Target-specific class names used across
   the project, overriding only the background, border, and button shape so
   they match the reference header treatment. */

/* ── 3a. Reviews overlay (.rv-header) — main.html ── */
.rv-header {
    /* background: var(--app-hdr-bg); */
    border-bottom: var(--app-hdr-border);
    box-shadow: var(--app-hdr-shadow);
}

/* Close button becomes a transparent circle (matching pvh-back) */
.rv-close {
    background: transparent;
    border: 0;
    color: var(--app-btn-color);
    border-radius: 50%;
    transition: background .18s ease, transform .12s ease;
}
.rv-close:hover  { background: var(--app-btn-hover-bg) !important; }
.rv-close:active { transform: scale(.9); }
.rv-close:focus-visible {
    outline: 2.5px solid var(--app-btn-focus-ring);
    outline-offset: 2px;
}

/* ── 3b. Payment overlay (.pm-header) — main.html ── */
/* .pm-header: existing border-bottom (orange tint) already themed — no overrides needed */

/* pm-close: already themed orange, just normalise shape */
.pm-close {
    border-radius: 50%;
    transition: background .18s ease, transform .12s ease;
}
.pm-close:active { transform: scale(.9); }
.pm-close:focus-visible {
    outline: 2.5px solid var(--app-btn-focus-ring);
    outline-offset: 2px;
}

/* ── 3c. Food checkout overlay (.fp-co-header) — food.html ── */
.food-page .fp-co-header {
    box-shadow: var(--app-hdr-shadow);
}

.food-page .fp-co-close {
    background: transparent;
    border: 0;
    color: var(--app-btn-color);
    border-radius: 50%;
    transition: background .18s ease, transform .12s ease;
}
.food-page .fp-co-close:hover  { background: var(--app-btn-hover-bg); }
.food-page .fp-co-close:active { transform: scale(.9); }

/* ── 3d. Food filter sheet (.fp-sheet-header) — food.html ── */
.food-page .fp-sheet-header {
    background: var(--app-hdr-bg);
    border-bottom: var(--app-hdr-border);
    box-shadow: var(--app-hdr-shadow);
}

/* ── 3e. Account offcanvas (Bootstrap .offcanvas-header) — main.html ── */
.offcanvas-My-account .offcanvas-header {
    background: var(--app-hdr-bg) !important;
    border-bottom: 3px solid #F97D09 !important;
    box-shadow: var(--app-hdr-shadow);
    padding: 14px 16px !important;
}

/* Normalise the Bootstrap btn-link back button */
.offcanvas-My-account .offcanvas-header > [data-bs-dismiss="offcanvas"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-btn-size);
    height: var(--app-btn-size);
    min-width: var(--app-btn-min-touch);
    min-height: var(--app-btn-min-touch);
    color: var(--app-btn-color);
    font-size: var(--app-btn-icon-size);
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    margin: 0;          /* remove Bootstrap me-3 visual gap via override */
    flex-shrink: 0;
}

.offcanvas-My-account .offcanvas-header > [data-bs-dismiss="offcanvas"]:hover  {
    background: var(--app-btn-hover-bg);
    color: var(--app-btn-color);
}
.offcanvas-My-account .offcanvas-header > [data-bs-dismiss="offcanvas"]:active {
    transform: scale(.9);
}
.offcanvas-My-account .offcanvas-header > [data-bs-dismiss="offcanvas"]:focus-visible {
    outline: 2.5px solid var(--app-btn-focus-ring);
    outline-offset: 2px;
}

/* Title in account offcanvas (h6 with Bootstrap classes) */
.offcanvas-My-account .offcanvas-header h6 {
    font-size: var(--app-title-size);
    font-weight: var(--app-title-weight);
    color: var(--app-title-color);
    letter-spacing: var(--app-title-spacing);
}

/* ── 3f. Recipe offcanvas list (.oc-header) — recipe-blog.html ── */
.oc-header {
    background: var(--app-hdr-bg) !important;
    border-bottom: var(--app-hdr-border) !important;
    box-shadow: var(--app-hdr-shadow) !important;
}

/* .oc-back: circular transparent, matching pvh-back */
.oc-back {
    background: transparent !important;
    border: 0 !important;
    color: var(--app-btn-color) !important;
    width: var(--app-btn-size) !important;
    height: var(--app-btn-size) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background .18s ease, transform .12s ease !important;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0 !important;
    font-size: var(--app-btn-icon-size) !important;
    padding: 0 !important;
}
.oc-back:hover  { background: var(--app-btn-hover-bg) !important; }
.oc-back:active { transform: scale(.9) !important; }
.oc-back:focus-visible {
    outline: 2.5px solid var(--app-btn-focus-ring) !important;
    outline-offset: 2px !important;
}

.oc-title {
    font-size: var(--app-title-size);
    font-weight: var(--app-title-weight);
    color: var(--app-title-color);
    letter-spacing: var(--app-title-spacing);
    flex: 1;
    text-align: center;
}

/* ── 3g. Cart back button refinement (.fp-cart-back) — food.html ──
   The cart header already has the gradient.  Only normalise the
   back button pill shape → circle to match pvh-back. ── */
.food-page .fp-cart-back {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-btn-size);
    height: var(--app-btn-size);
    min-width: var(--app-btn-min-touch);
    min-height: var(--app-btn-min-touch);
    color: var(--app-btn-color);
    font-size: var(--app-btn-icon-size);
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .18s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}
.food-page .fp-cart-back:hover  { background: var(--app-btn-hover-bg); color: var(--app-btn-color); }
.food-page .fp-cart-back:active { transform: scale(.9); box-shadow: none; }
.food-page .fp-cart-back:focus-visible {
    outline: 2.5px solid var(--app-btn-focus-ring);
    outline-offset: 2px;
}

/* ── 3h. Categories sidebar close button (.sc-close-btn) ──
   Currently: square 8px radius, RED hover — not matching reference.
   Fix: circular, transparent bg, orange hover. ── */
.offcanvas-side-categorys .sc-close-btn {
    width: var(--app-btn-size);
    height: var(--app-btn-size);
    min-width: var(--app-btn-min-touch);
    min-height: var(--app-btn-min-touch);
    border-radius: 50%;
    background: transparent;
    color: var(--app-btn-color);
    transition: background .18s ease, transform .12s ease;
}
.offcanvas-side-categorys .sc-close-btn:hover {
    background: var(--app-btn-hover-bg);
    color: var(--app-btn-color);
}
.offcanvas-side-categorys .sc-close-btn:active { transform: scale(.9); }
.offcanvas-side-categorys .sc-close-btn:focus-visible {
    outline: 2.5px solid var(--app-btn-focus-ring);
    outline-offset: 2px;
}

/* ── 3i. Main category browser back link (.mcb-back) ── */
.mcb-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-btn-size);
    height: var(--app-btn-size);
    min-width: var(--app-btn-min-touch);
    min-height: var(--app-btn-min-touch);
    border-radius: 50%;
    background: transparent;
    color: var(--app-btn-color);
    text-decoration: none;
    flex-shrink: 0;
    transition: background .18s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.mcb-back:hover  { background: var(--app-btn-hover-bg); color: var(--app-btn-color); }
.mcb-back:active { transform: scale(.9); }
.mcb-back:focus-visible {
    outline: 2.5px solid var(--app-btn-focus-ring);
    outline-offset: 2px;
}

/* ── 3j. Search-header and app-header back dismiss links ── Used in:
   offcanvasPageCat, offcanvasPageBrand, SearchAllProdPage,
   offcanvassearchallprod, offcanvassearchOffersprod. */
.search-header [data-bs-dismiss="offcanvas"],
.app-header    [data-bs-dismiss="offcanvas"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-btn-size);
    height: var(--app-btn-size);
    min-width: var(--app-btn-min-touch);
    min-height: var(--app-btn-min-touch);
    border-radius: 50%;
    background: transparent;
    color: var(--app-btn-color);
    text-decoration: none;
    flex-shrink: 0;
    transition: background .18s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.search-header [data-bs-dismiss="offcanvas"]:hover,
.app-header    [data-bs-dismiss="offcanvas"]:hover {
    background: var(--app-btn-hover-bg);
    color: var(--app-btn-color);
}
.search-header [data-bs-dismiss="offcanvas"]:active,
.app-header    [data-bs-dismiss="offcanvas"]:active  { transform: scale(.9); }
.search-header [data-bs-dismiss="offcanvas"]:focus-visible,
.app-header    [data-bs-dismiss="offcanvas"]:focus-visible {
    outline: 2.5px solid var(--app-btn-focus-ring);
    outline-offset: 2px;
}

/* ── 3k. Self-Billing back dismiss link (.page-header) ── */
.offcanvas-Self-Billing .page-header [data-bs-dismiss="offcanvas"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-btn-size);
    height: var(--app-btn-size);
    min-width: var(--app-btn-min-touch);
    min-height: var(--app-btn-min-touch);
    border-radius: 50%;
    background: transparent;
    color: var(--app-btn-color);
    text-decoration: none;
    flex-shrink: 0;
    transition: background .18s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.offcanvas-Self-Billing .page-header [data-bs-dismiss="offcanvas"]:hover {
    background: var(--app-btn-hover-bg);
    color: var(--app-btn-color);
}
.offcanvas-Self-Billing .page-header [data-bs-dismiss="offcanvas"]:active { transform: scale(.9); }

/* ── 3l. Touch-target fixes for cc-back-btn and po-back-btn ──
   Both are 34 px visually — add 44 px min-touch for WCAG 2.5.8. ── */
.offcanvas-checkout-section .cc-back-btn {
    min-width: var(--app-btn-min-touch);
    min-height: var(--app-btn-min-touch);
}
.offcanvas-Payment-Order .po-back-btn {
    min-width: var(--app-btn-min-touch);
    min-height: var(--app-btn-min-touch);
}

/* ── 3m. Recipe-blog filter button (.oc-filter-btn) ──
   Normalise to match action-button style (transparent, orange hover). ── */
.oc-filter-btn {
    background: transparent !important;
    border: 0 !important;
    color: var(--app-btn-color) !important;
    border-radius: 50% !important;
    transition: background .18s ease, transform .12s ease !important;
}
.oc-filter-btn:hover  { background: var(--app-btn-hover-bg) !important; }
.oc-filter-btn:active { transform: scale(.9) !important; }
.oc-filter-btn:focus-visible {
    outline: 2.5px solid var(--app-btn-focus-ring) !important;
    outline-offset: 2px !important;
}

/* 4. RESPONSIVE GUARD Touch targets are already enforced via
   min-width/height. No additional breakpoints needed — the gradient and
   button styles are fluid by nature. */

@media (prefers-reduced-motion: reduce) {
    .app-sheet-back-btn,
    .app-sheet-action-btn,
    .rv-close,
    .pm-close,
    .oc-back,
    .oc-filter-btn,
    .mcb-back,
    .food-page .fp-cart-back,
    .food-page .fp-co-close,
    .offcanvas-side-categorys .sc-close-btn,
    .search-header [data-bs-dismiss="offcanvas"],
    .app-header    [data-bs-dismiss="offcanvas"],
    .offcanvas-Self-Billing .page-header [data-bs-dismiss="offcanvas"] {
        transition: none;
    }
}