/* ─────────────────────────────────────────────────────────────
   CrackersShop – Customer Frontend Styles
   All brand colors come from CSS variables (set by admin Theme):
     --shop-primary    → buttons, prices, badges, links
     --shop-secondary  → hero gradient, dark accents
     --shop-accent     → Shop Now button, highlights
     --shop-navbar     → top navigation bar background
     --shop-footer     → footer background
     --shop-background → page background
     --shop-text       → body text color
     --shop-font       → font family
───────────────────────────────────────────────────────────── */

/* ── Base ──────────────────────────────────────────────────── */

/* Prevent any element from causing horizontal scroll */
html {
    overflow-x: hidden;
}
body {
    font-family: var(--shop-font, 'Poppins', sans-serif);
    background: var(--shop-background, #f8f9fa);
    color: var(--shop-text, #1a1a1a);
    overflow-x: hidden;
    max-width: 100vw;
}

/* All images responsive by default */
img { max-width: 100%; height: auto; }

/* Bootstrap row negative-margin overflow fix */
.row { --bs-gutter-x: 1.5rem; max-width: 100%; }
@media (max-width: 575.98px) {
    .row { --bs-gutter-x: 0.75rem; }
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
}

/* Any element with a fixed width should not exceed viewport */
* { min-width: 0; }

/* ── Navbar ─────────────────────────────────────────────────── */
.shop-navbar {
    background: var(--shop-navbar, #C62828);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
    z-index: 1030;
}

.shop-navbar .navbar-brand {
    color: #fff !important;
    min-width: 0;        /* allow shrinking */
    flex-shrink: 1;
    overflow: hidden;
}
.shop-navbar .navbar-brand .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    display: inline-block;
    vertical-align: middle;
}
.shop-navbar .nav-link { color: rgba(255,255,255,.85) !important; }
.shop-navbar .nav-link:hover { color: #fff !important; }

/* Tighten navbar gap on small screens */
@media (max-width: 575.98px) {
    .shop-navbar .container { gap: 8px !important; padding-left: 10px; padding-right: 10px; }
    .shop-navbar .navbar-brand .brand-name { display: none !important; }  /* show logo only on xs */
    .shop-navbar .btn { padding: 4px 8px; font-size: .8rem; }
    .shop-navbar .btn-sm { padding: 4px 8px; }
    .customer-name-text { display: none !important; } /* hide name, keep icon */
}
@media (max-width: 767.98px) {
    .shop-navbar .navbar-brand .brand-name { max-width: 100px; }
}

/* ── Stats bar ──────────────────────────────────────────────── */
.stats-bar {
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
}

/* ── Hero Section ───────────────────────────────────────────── */
.hero-section { position: relative; }
.hero-banner-img {
    height: 420px;
    object-fit: cover;
}
@media (max-width: 576px) {
    .hero-banner-img { height: 220px; }
}

.hero-default {
    background: linear-gradient(135deg, var(--shop-navbar, #C62828) 0%, var(--shop-primary, #E53935) 60%, var(--shop-secondary, #FF8F00) 100%);
    min-height: 320px;
    display: flex;
    align-items: center;
}
.hero-emoji {
    font-size: 4rem;
    animation: bounce 1.5s infinite alternate;
}
@keyframes bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-12px); }
}

/* ── Section titles ─────────────────────────────────────────── */
.section-title {
    font-weight: 700;
    position: relative;
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 50px; height: 3px;
    background: var(--shop-primary, #E53935);
    border-radius: 2px;
}

/* ── Category cards ─────────────────────────────────────────── */
.category-card {
    background: #fff;
    border: 2px solid transparent;
    border-radius: var(--shop-card-radius, 12px);
    transition: all .2s ease;
    cursor: pointer;
}
.category-card:hover {
    border-color: var(--shop-primary, #E53935);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    color: var(--shop-primary, #E53935) !important;
}
.category-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.category-icon-wrap {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Product card ────────────────────────────────────────────── */
.product-card {
    border-radius: var(--shop-card-radius, 12px);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.product-img-wrap {
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
}
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.product-card:hover .product-img { transform: scale(1.05); }

.product-img-placeholder {
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
}

.discount-badge {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--shop-primary, #E53935);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: var(--shop-btn-radius, 6px);
    line-height: 1.2;
    text-align: center;
}

.out-of-stock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .05em;
}

.product-name {
    font-weight: 600;
    font-size: .9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.selling-price {
    color: var(--shop-primary, #E53935);
    font-size: 1.1rem;
}

/* ── Category pills (mobile) ─────────────────────────────────── */
.cat-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.cat-pills::-webkit-scrollbar { display: none; }

.cat-pill {
    flex-shrink: 0;
    padding: 5px 14px;
    border-radius: 20px;
    background: #fff;
    border: 1.5px solid #dee2e6;
    color: #495057;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all .15s;
}
.cat-pill.active,
.cat-pill:hover {
    background: var(--shop-primary, #E53935);
    border-color: var(--shop-primary, #E53935);
    color: #fff;
}

/* brand pills use secondary colour when active */
.cat-pill-brand.active,
.cat-pill-brand:hover {
    background: var(--shop-secondary, #FF8F00);
    border-color: var(--shop-secondary, #FF8F00);
    color: #fff;
}

/* ── Sidebar category links ──────────────────────────────────── */
.sidebar-cat-link {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #495057;
    font-size: .9rem;
    transition: all .15s;
}
.sidebar-cat-link:hover {
    background: color-mix(in srgb, var(--shop-primary, #E53935) 8%, transparent);
    color: var(--shop-primary, #E53935);
}
.sidebar-cat-link.active {
    background: var(--shop-primary, #E53935);
    color: #fff;
    font-weight: 600;
}
.sidebar-cat-link .badge { font-size: .7rem; }

/* ── Product detail page ─────────────────────────────────────── */
.detail-main-img {
    height: 380px;
    object-fit: contain;
    background: #f8f9fa;
}
.detail-img-placeholder {
    height: 380px;
    background: #f8f9fa;
    border-radius: var(--shop-card-radius, 12px);
}
.thumb-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s;
}
.thumb-img:hover { opacity: 1; border-color: var(--shop-primary, #E53935) !important; }

.price-box { border-left: 4px solid var(--shop-primary, #E53935); }
.selling-price-lg {
    color: var(--shop-primary, #E53935);
    font-size: 2rem;
}

.qty-control { background: #fff; }
.qty-input {
    width: 50px;
    font-weight: 700;
}

/* ── Cart page ───────────────────────────────────────────────── */
.cart-row:last-child { border-bottom: none !important; }
.cart-item-img img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

/* ── Checkout page ───────────────────────────────────────────── */
.payment-option { cursor: pointer; transition: border-color .15s; }
.payment-option:has(input:checked) {
    border-color: var(--shop-primary, #E53935) !important;
    background: color-mix(in srgb, var(--shop-primary, #E53935) 5%, transparent);
}

/* ── Order confirmation ──────────────────────────────────────── */
.success-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #43A047;
    color: #fff;
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    animation: pop .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* ── Footer ──────────────────────────────────────────────────── */
.shop-footer {
    background: var(--shop-footer, #1a1a2e);
    color: #fff;
}

/* ── WhatsApp float button ───────────────────────────────────── */
.wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 54px;
    height: 54px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 16px rgba(37,211,102,.45);
    z-index: 1050;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.wa-float:hover {
    transform: scale(1.1);
    color: #fff;
    box-shadow: 0 6px 20px rgba(37,211,102,.55);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
    background: var(--shop-primary, #E53935);
    border-color: var(--shop-primary, #E53935);
    border-radius: var(--shop-btn-radius, 6px);
}
.btn-primary:hover {
    background: color-mix(in srgb, var(--shop-primary, #E53935) 85%, #000);
    border-color: color-mix(in srgb, var(--shop-primary, #E53935) 85%, #000);
}
.btn-outline-primary {
    color: var(--shop-primary, #E53935);
    border-color: var(--shop-primary, #E53935);
    border-radius: var(--shop-btn-radius, 6px);
}
.btn-outline-primary:hover {
    background: var(--shop-primary, #E53935);
    border-color: var(--shop-primary, #E53935);
}
.btn-outline-light { border-radius: var(--shop-btn-radius, 6px); }
.btn-warning       { border-radius: var(--shop-btn-radius, 6px); }

/* ── WhatsApp CTA section ────────────────────────────────────── */
.whatsapp-cta {
    background: #f0faf0;
    border-top: 1px solid #d4edda;
    border-bottom: 1px solid #d4edda;
}

/* ── Pagination ──────────────────────────────────────────────── */
.page-link {
    color: var(--shop-primary, #E53935);
    border-radius: var(--shop-btn-radius, 6px) !important;
}
.page-item.active .page-link {
    background: var(--shop-primary, #E53935);
    border-color: var(--shop-primary, #E53935);
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb-item a {
    color: var(--shop-primary, #E53935);
    text-decoration: none;
}

/* ── Scrollbar thin ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* ── Quick Order filter chips ────────────────────────────────── */
.qo-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 14px;
    border: 1.5px solid #dee2e6;
    background: #fff;
    color: #495057;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    user-select: none;
    line-height: 1.6;
}
.qo-chip.active {
    background: var(--shop-primary, #E53935);
    border-color: var(--shop-primary, #E53935);
    color: #fff;
}

/* ── Hide number input spinners (qty inputs) ─────────────────── */
input[type=number].qty-spin::-webkit-outer-spin-button,
input[type=number].qty-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number].qty-spin { -moz-appearance: textfield; }

/* ── Global mobile responsiveness ────────────────────────────── */

/* Wrap tables that may overflow */
.table { width: 100%; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Fixed-width carousel / scroll cards: cap on mobile */
@media (max-width: 575.98px) {
    /* Any inline scroll row card */
    [style*="width: 260px"],
    [style*="width:260px"] { width: min(260px, 70vw) !important; }
    [style*="width: 180px"],
    [style*="width:180px"] { width: min(180px, 55vw) !important; }
    [style*="width: 200px"],
    [style*="width:200px"] { width: min(200px, 60vw) !important; }

    /* Hero: reduce font sizes */
    .hero-default h1, .hero-default .display-5 { font-size: 1.4rem !important; }
    .hero-default p  { font-size: .9rem !important; }
    .hero-emoji      { font-size: 2.5rem; }

    /* Section titles */
    .section-title   { font-size: 1.1rem; }

    /* Product detail image */
    .detail-main-img,
    .detail-img-placeholder { height: 240px !important; }

    /* FABs — bring in from edge */
    .fab-stack { bottom: 16px; right: 12px; gap: 8px; }
    .fab-btn   { width: 46px; height: 46px; font-size: 1.2rem; }
}

@media (max-width: 767.98px) {
    /* Checkout / Cart: stack summary below form */
    .order-summary-col { order: -1; }   /* show summary first on mobile */

    /* Footer columns: reduce padding */
    .shop-footer .col-sm-6 { padding-bottom: .5rem; }

    /* Bank info box: smaller text */
    .bank-row { font-size: .78rem; }
    .bank-label { min-width: 50px; font-size: .68rem; }
}

/* Horizontal scroll containers (carousels) should not break layout */
.scroll-row-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Prevent any absolutely positioned badge/overlay from leaking */
.position-relative { overflow: visible; }  /* badges need visible, not hidden */