/* ============================================================
   Blaze Theme (v27) — Inner Page Overrides
   Applied on top of newthemechangeui.css for product/cart pages
   ============================================================ */

/* --blaze-notice-h: height of the fixed "Verification Pending" notice bar (set by
   top-bar-inner-page.php when the bar is present; 0 otherwise). Every offset that
   anchors to the fixed header must add it, or the bar covers the nav. */

/* --blaze-inner-clear: the inner header's height AND the content clearance below it.
   The header is a solid dark bar tall enough to CONTAIN the enlarged logo (104px desktop
   / 64px phone). Because header height == content clearance, there is no transparent gap
   under the header, so scrolling items and the sticky filter bars can't show through. */
body.blaze-body.newtheme_inner_page { --blaze-inner-clear: 112px; }
@media (max-width: 575.98px) {
    body.blaze-body.newtheme_inner_page { --blaze-inner-clear: 88px; }
}

/* Content clears the header */
body.blaze-body.newtheme_inner_page .topSpace {
    padding-top: calc(var(--blaze-inner-clear) + var(--blaze-notice-h, 0px)) !important;
}

/* Pages that use .pageTitle directly (cart, checkout, etc.) without a .topSpace wrapper */
body.blaze-body.newtheme_inner_page .pageTitle {
    padding-top: calc(var(--blaze-inner-clear) + var(--blaze-notice-h, 0px));
}

/* When .pageTitle is inside .topSpace, the .topSpace already handles the 64px header offset.
   Keep a small amount of breathing room padding instead of the full 64px (which causes double-spacing). */
body.blaze-body.newtheme_inner_page .topSpace .pageTitle {
    padding-top: 10px;
}

/* Products page: clear fixed header for content that uses .menuPageContent */
body.blaze-body.newtheme_inner_page .menuPageContent {
    padding-top: calc(var(--blaze-inner-clear) + var(--blaze-notice-h, 0px));
}

/* Flash alert — position:fixed top:85px by default; override to sit flush under 64px header */
body.blaze-body.newtheme_inner_page .floating-alert-top {
    top: calc(var(--blaze-inner-clear) + var(--blaze-notice-h, 0px));
    margin-top: 0;
}

/* Subcategory/tabs bar — sticks just below the header. Needs a solid background so
   product items scrolling underneath don't show through it. */
body.blaze-body.newtheme_inner_page .fixedCenterScroll .menuSection {
    top: calc(var(--blaze-inner-clear) + var(--blaze-notice-h, 0px));
    background: #fff;
}
body.blaze-body.newtheme_inner_page .menuPageContent .sidebarright .nwCartMain .nwCartTitle {
    top: calc(var(--blaze-inner-clear) + var(--blaze-notice-h, 0px));
}

/* Spice level (MILD) dropdown — compact size on mobile */
@media (max-width: 767px) {
    body.blaze-body .addChilli .form-select,
    body.blaze-body .addChilli select {
        font-size: 11px;
        padding: 3px 18px 3px 6px;
        height: auto;
        width: auto;
        min-width: 58px;
        background-size: 8px 6px;
        line-height: 1.4;
    }
}

/* Chilli select uses Bootstrap-5 `.form-select` markup but newthemechangeui.css only
   styles the old `.custom-select`, so it falls back to BS5's oversized default.
   Give it the compact theme size on all screens. */
body.blaze-body.newtheme_inner_page .addChilli .form-select,
body.blaze-body.newtheme_inner_page .addChilli select {
    padding: 3px 20px 3px 8px;
    height: auto;
    width: auto;
    min-width: 60px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 6px;
    background-size: 10px;
}

/* Mobile (≤1199px): category bar (topLinksSwiper) is sticky by default so it floats too low
   at page-top before any scrolling. Fix to position:fixed so it's always flush under the header.
   Also compensate its lost flow height (~40px) by adding it to the content padding-top. */
@media (max-width: 1199px) {
    body.blaze-body.newtheme_inner_page .topLinksSwiper {
        position: fixed;
        top: calc(var(--blaze-inner-clear) + var(--blaze-notice-h, 0px));
        z-index: 8;
        left: 0;
        right: 0;
        margin-left: 0;
        padding-left: 20px;
        background: #fff;   /* opaque so items don't show through the fixed category bar */
    }
    body.blaze-body.newtheme_inner_page .menuPageContent .fixedCenterScroll .menuSection {
        top: calc(var(--blaze-inner-clear) + 40px + var(--blaze-notice-h, 0px));
    }
    body.blaze-body.newtheme_inner_page .menuPageContent .fixedCenterScroll {
        padding-top: 90px;
    }
}

/* ── Blaze footer (same on inner pages as homepage) ── */
.blaze-footer {
    background: #080808;
    border-top: 1px solid var(--blaze-border, #1e1e1e);
    padding: 4rem 0 0;
    color: #666;
    font-size: 13px;
}
.blaze-footer-brand { padding-right: 2rem; }
.blaze-footer-logo { height: 44px; width: auto; margin-bottom: 1rem; filter: brightness(.9); }
.blaze-footer-logo-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px; font-weight: 900; letter-spacing: 3px;
    color: var(--blaze-primary, #FFD449);
    margin-bottom: 1rem;
}
.blaze-footer-tagline { color: #777; line-height: 1.65; margin-bottom: 1.25rem; }
.blaze-footer-social { display: flex; gap: 8px; }
.blaze-social-btn {
    width: 34px; height: 34px;
    border: 1px solid var(--blaze-border, #1e1e1e);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: #777;
    transition: border-color .2s, color .2s;
    text-decoration: none;
}
.blaze-social-btn:hover { border-color: var(--blaze-primary, #FFD449); color: var(--blaze-primary, #FFD449); }
.blaze-footer-heading {
    font-size: 10px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: #666; margin-bottom: 1rem;
}
.blaze-footer-links { list-style: none; padding: 0; margin: 0; }
.blaze-footer-links li { margin-bottom: .625rem; }
.blaze-footer-links a { color: #666; text-decoration: none; transition: color .2s; }
.blaze-footer-links a:hover { color: var(--blaze-primary, #FFD449); }
.blaze-footer-contact li { display: flex; align-items: flex-start; gap: 7px; }
.blaze-footer-contact svg { flex-shrink: 0; margin-top: 2px; color: #333; }
.blaze-footer-hours { color: #666; }
.blaze-footer-hours ul { list-style: none; padding: 0; margin: 0; }
.blaze-footer-hours li {
    display: flex; justify-content: space-between;
    padding: .25rem 0; border-bottom: 1px solid #111; font-size: 12px;
}
.blaze-footer-hours span { color: #333; }
.blaze-footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem;
    border-top: 1px solid #111;
    padding: 1.25rem 0; margin-top: 3rem;
    font-size: 11px; color: #2a2a2a;
}
.blaze-powered { margin: 0; }
.blaze-orderart-link { color: #333; transition: color .2s; text-decoration: none; }
.blaze-orderart-link:hover { color: var(--blaze-primary, #FFD449); }
@media (max-width: 767.98px) {
    .blaze-footer-brand { padding-right: 0; }
    .blaze-footer-bottom { justify-content: center; text-align: center; }
}

/* ── Horizontal nav (desktop) — centered in the header via flex so it reserves its
      own space and can never overlap the logo or the right-side actions ── */
.blaze-inner-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.blaze-inner-nav-link {
    display: block;
    padding: .375rem .875rem;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #aaa;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s, background .2s;
}
.blaze-inner-nav-link:hover,
.blaze-inner-nav-link.active { color: #fff; }
.blaze-inner-nav-link.active {
    color: var(--blaze-primary, #FFD449);
    background: rgba(255, 212, 73, .08);
}
@media (max-width: 991.98px) {
    .blaze-inner-nav-links { display: none; }
}

/* ============================================================
   MODALS — v27 dark theme (inner pages)
   Matches homepage style.css dark overrides
   ============================================================ */

/* Dark modal shell */
.modalNewstyle .modal-content {
    background: #141414;
    border: 1px solid var(--blaze-border, #1e1e1e);
    border-radius: 6px;
    color: var(--blaze-text, #f0f0f0);
}
.modalNewstyle .modal-header {
    padding: 1.5rem 2rem 1rem;
    border-bottom: none;
}
.modalNewstyle .modal-body {
    padding: 0.5rem 2rem 2rem;
}
.modalNewstyle .modal-title,
.modalNewstyle .mdTitle {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}
.modalNewstyle .btn-close {
    filter: invert(1) brightness(.5);
    opacity: 0.7;
}
.modalNewstyle .btn-close:hover { opacity: 1; }

/* Modal form wrapper */
.modalForm { max-width: 480px; margin: 0 auto; }

/* Social / outline buttons (Facebook, Google) */
.btnDarkOutline {
    background: transparent;
    border: 1px solid var(--blaze-border2, #2a2a2a);
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 16px;
    border-radius: 4px;
    transition: background .2s, border-color .2s;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: block;
    width: 100%;
}
.btnDarkOutline:hover {
    background: rgba(255,212,73,.1);
    border-color: var(--blaze-primary, #FFD449);
    color: var(--blaze-primary, #FFD449);
}

/* Primary button */
.btn.btnPrimary {
    background: var(--blaze-primary, #FFD449);
    border-color: var(--blaze-primary, #FFD449);
    color: #0d0d0d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 12px 20px;
    border-radius: 4px;
    transition: background .25s;
}
.btn.btnPrimary:hover { background: #ffe066; border-color: #ffe066; color: #0d0d0d; }

/* OR divider */
.sideLinesDivider { overflow: hidden; text-align: center; position: relative; }
.sideLinesDivider .dividerText {
    display: inline-block;
    position: relative;
    padding: 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}
.sideLinesDivider .dividerText::before,
.sideLinesDivider .dividerText::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 100vw;
    margin-top: -1px;
    border-top: 1px solid var(--blaze-border, #1e1e1e);
}
.sideLinesDivider .dividerText::before { right: 100%; }
.sideLinesDivider .dividerText::after  { left: 100%; }

/* Input field with right-side icon */
.rightIconFld { position: relative; }
.rightIconFld .form-control { padding-right: 44px; }
.inputFieldIcon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
}
.fieldIcon { width: 18px; height: 18px; display: block; opacity: 0.45; fill: currentColor; }

/* Dark form controls inside modal */
.modalNewstyle .form-control,
.modalNewstyle .form-select {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--blaze-border2, #2a2a2a);
    color: rgba(255,255,255,.85);
    border-radius: 4px;
}
.modalNewstyle .form-control::placeholder { color: rgba(255,255,255,.35); }
.modalNewstyle .form-control:focus,
.modalNewstyle .form-select:focus {
    background: rgba(255,255,255,.09);
    border-color: var(--blaze-primary, #FFD449);
    box-shadow: 0 0 0 2px rgba(255,212,73,.15);
    color: rgba(255,255,255,.9);
    outline: none;
}

/* Links */
.simpleLink { color: var(--blaze-primary, #FFD449); text-decoration: none; font-size: 13px; transition: color .2s; }
.simpleLink:hover { color: #ffe066; text-decoration: underline; }
.linkStyle2 { color: var(--blaze-primary, #FFD449); font-size: 12px; font-weight: 600; text-decoration: none; transition: color .2s; }
.linkStyle2:hover { color: #ffe066; }
.textPrimary { color: var(--blaze-primary, #FFD449) !important; }

/* Error / OTP */
.errorMsg { color: #e55; font-size: 12px; min-height: 1.2em; }
#timer { font-size: 13px; color: rgba(255,255,255,.55); }

/* Checkboxes in dark modal */
.modalNewstyle .form-check-label { color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.5; }
.modalNewstyle .form-check-input { border-color: rgba(255,212,73,.4); }
.modalNewstyle .form-check-input:checked {
    background-color: var(--blaze-primary, #FFD449);
    border-color: var(--blaze-primary, #FFD449);
}

/* ── Login / Register text links (guest state) ── */
.blaze-auth-link {
    font-size: 12px;
    color: #888;
    transition: color .2s;
    white-space: nowrap;
    text-decoration: none;
}
.blaze-auth-link:hover { color: #fff; }
.blaze-auth-sep { color: #2a2a2a; font-size: 11px; }

/* ── Blaze inner-page header — matches the homepage header exactly, EXCEPT the
      background stays dark at all times (inner pages have a white body, so we never
      make it transparent). Uses headerMainCol for position:fixed from newthemechangeui. ── */
header.blaze-inner-header {
    background: rgba(10, 10, 10, .97) !important;
    border-bottom: 1px solid #1e1e1e;
    height: auto;
    min-height: var(--blaze-inner-clear);
    top: var(--blaze-notice-h, 0px);
}
.blaze-inner-nav-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    min-height: var(--blaze-inner-clear);
    padding: 0 2rem;
    max-width: 100%;
    gap: 1.5rem;
    position: relative;   /* centering anchor for .blaze-inner-nav-links */
}
/* Logo — enlarged but CONTAINED within the dark bar (no spill). On content pages the
   header must be a solid opaque bar that fully covers the scroll area, otherwise items
   and the sticky filter bars show through behind it. (The homepage can spill because it
   overhangs the decorative hero; content pages cannot.) */
.blaze-inner-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}
.blaze-inner-logo img {
    height: 104px;
    width: auto;
    object-fit: contain;
}
@media (max-width: 575.98px) {
    .blaze-inner-logo img { height: 64px; }
}
.blaze-inner-logo-text {
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 2px;
}
.blaze-inner-actions {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-left: auto;
}

/* User dropdown */
.blaze-inner-user { position: relative; }
.blaze-inner-user-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #ccc;
    font-size: 13px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: 4px;
    transition: color .2s;
    text-decoration: none;
}
.blaze-inner-user-btn:hover { color: #fff; }
.blaze-inner-drop {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    min-width: 180px;
    z-index: 200;
    padding: .4rem 0;
}
.blaze-inner-drop.open { display: block; }
.blaze-inner-drop a {
    display: block;
    padding: .5rem 1rem;
    color: #ccc;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.blaze-inner-drop a:hover { background: #2a2a2a; color: #fff; }

/* Login icon */
.blaze-inner-login {
    color: #ccc;
    align-items: center;
    text-decoration: none;
    transition: color .2s;
}
.blaze-inner-login:hover { color: var(--blaze-primary, #FFD449); }

/* Cart */
.blaze-inner-cart {
    position: relative;
    color: #ccc;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: color .2s;
}
.blaze-inner-cart:hover { color: var(--blaze-primary, #FFD449); }
.blaze-inner-cart-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 16px;
    height: 16px;
    background: var(--blaze-primary, #FFD449);
    color: #0d0d0d;
    font-size: 9px;
    font-weight: 700;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* Order Now btn */
.blaze-inner-order {
    display: inline-flex;
    align-items: center;
    background: var(--blaze-primary, #FFD449);
    color: #0d0d0d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 3px;
    white-space: nowrap;
    text-decoration: none;
    transition: background .2s, transform .15s;
}
.blaze-inner-order:hover {
    background: #ffe066;
    color: #0d0d0d;
    transform: translateY(-1px);
}

/* Hamburger toggler */
.blaze-inner-toggler {
    background: transparent;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.blaze-inner-toggler span {
    display: block;
    width: 20px;
    height: 2px;
    background: #aaa;
    border-radius: 1px;
    transition: background .2s;
}
.blaze-inner-toggler:hover span { background: var(--blaze-primary, #FFD449); }

/* Sidebar */
.blaze-inner-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 1001;
}
.blaze-inner-backdrop.open { display: block; }
.blaze-inner-sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100%;
    background: #111;
    z-index: 1002;
    padding: 1.5rem 1.25rem;
    transition: left .3s ease;
    overflow-y: auto;
}
.blaze-inner-sidebar.open { left: 0; }
.blaze-inner-sidebar-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.75rem;
    cursor: pointer;
    float: right;
    line-height: 1;
    padding: 0;
}
.blaze-inner-sidebar-close:hover { color: #fff; }
.blaze-inner-sidebar-logo {
    display: block;
    margin: 2.5rem 0 1.5rem;
    clear: both;
}
.blaze-inner-sidebar-logo img { max-height: 48px; width: auto; }
.blaze-inner-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: .5rem;
}
.blaze-inner-sidebar-nav a {
    display: block;
    padding: .6rem .75rem;
    color: #ccc;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.blaze-inner-sidebar-nav a:hover,
.blaze-inner-sidebar-nav a.active {
    background: rgba(255,212,73,.1);
    color: var(--blaze-primary, #FFD449);
}
.customFixBar.editviewPage {
    margin-top: 50px;
}
@media (max-width: 767px) {
    .customFixBar.editviewPage .backToMenu {
        top: 60px !important;
    }
}
.sideLinesDivider {
    padding: 0px;
}
/* ── Gallery page (v27 override): clean 3-column CSS grid ── */
.blaze-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-bottom: 2.5rem;
}
.blaze-gallery-cell {
    border-radius: 10px;
    overflow: hidden;
    background: var(--blaze-bg2, #111);
    border: 1px solid var(--blaze-border, #1e1e1e);
    aspect-ratio: 4 / 3;
}
.blaze-gallery-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.blaze-gallery-cell:hover img { transform: scale(1.05); }
@media (max-width: 991px) {
    .blaze-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .blaze-gallery-grid { grid-template-columns: 1fr; }
}