/* DK GADGET'S HUB — shared storefront styles moved out of the Blade partials (speed pass, 2026-10-28).
   Order = document order: header, layout (app.blade.php), footer, exit popup, leave-offer popup.
   Edit the Blade files for anything dynamic (palette, admin colours); edit this file for the rest. */

/* ===== header.blade.php: header + mobile header styles ===== */
/* :root moved to frontend/partials/head.blade.php (single source of truth) */

/* =====================================================
   ANIMATIONS
   ===================================================== */
@keyframes slideDownFade {
    from { opacity: 0; transform: translateY(-15px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}
@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes ringShake {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(-15deg); }
    40%      { transform: rotate(15deg); }
    60%      { transform: rotate(-10deg); }
    80%      { transform: rotate(10deg); }
}

.desktop-header-wrap, .strides-mobile-header {
    animation: slideDownFade .5s ease;
}

/* =====================================================
   TOP NOTICE BAR
   ===================================================== */
.topbar-strides {
    background: var(--theme-peach);
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 600;
    color: #111111; /* BLACK TEXT */
    border-bottom: 1px solid var(--theme-border);
    display: flex;
    align-items: center;
}
.topbar-strides marquee { margin: 0; padding: 0; color: #111111; }
.topbar-strides .topbar-mq { flex: 1; min-width: 0; overflow: hidden; }
.topbar-reseller-cta {
    flex: 0 0 auto; margin-left: 14px; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg,#ff4d4f,#c81e1e); color: #fff !important;
    font-weight: 700; font-size: 12px; line-height: 1; padding: 5px 14px;
    border-radius: 999px; text-decoration: none; box-shadow: 0 3px 10px rgba(200,30,30,.3);
    transition: filter .16s ease, transform .16s ease;
}
.topbar-reseller-cta:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff !important; }
.topbar-reseller-cta .rc-new { background:#fde047; color:#7c2d12; font-size:10px; font-weight:800; padding:1px 6px; border-radius:5px; }

/* =====================================================
   DESKTOP HEADER
   ===================================================== */
.desktop-header-wrap { position: relative; z-index: 999; }

/* 1. Main Row */
.strides-main-row {
    background: var(--brand-gradient);
    padding: 20px 30px;
    position: relative;
    overflow: hidden;
}
.strides-main-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    background-size: 200% 100%;
    animation: shimmer 8s linear infinite;
    pointer-events: none;
}
.strides-main-inner {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.desk-logo img {
    max-height: 55px;
    object-fit: contain;
    transition: transform .4s ease;
}
.desk-logo:hover img { transform: scale(1.05) rotate(-1deg); }

/* Search Box */
.desk-search {
    flex: 1;
    max-width: 600px;
    margin: 0 auto;
}
.desk-search form { margin: 0; }
.desk-sbox {
    display: flex;
    align-items: center;
    height: 48px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    overflow: hidden;
    padding: 0 8px 0 22px;
    transition: all .35s ease;
    backdrop-filter: blur(8px);
}
.desk-sbox:hover { background: rgba(255, 255, 255, 0.22); }
.desk-sbox:focus-within {
    background: rgba(255, 255, 255, 0.28);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}
.desk-sbox i.fa-search {
    color: var(--brand-text);
    font-size: 15px;
    margin-right: 12px;
}
.desk-sbox input {
    flex: 1;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--brand-text);
    font-weight: 500;
}
.desk-sbox input::placeholder { color: var(--brand-text); opacity: 0.75; }
.desk-sbox .sbtn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: var(--theme-white);
    color: var(--brand-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all .3s ease;
}
.desk-sbox .sbtn:hover { transform: rotate(90deg) scale(1.05); }

/* Right Premium Icons */
.desk-right-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}
.desk-pico {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--brand-text) !important;
    text-decoration: none !important;
    transition: all .35s ease;
    min-height: 50px;
}
.desk-pico:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.desk-pico .pico-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--brand-text);
    transition: all .3s ease;
    flex-shrink: 0;
}
.desk-pico:hover .pico-ico { animation: iconBounce .6s ease; background: rgba(255,255,255,0.3); }
.desk-pico .pico-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.desk-pico .pico-txt small {
    font-size: 10.5px;
    opacity: 0.85;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.desk-pico .pico-txt strong {
    font-size: 13px;
    font-weight: 700;
}

.desk-pico.is-call .pico-ico { animation: ringShake 2.5s ease infinite; }
.desk-pico.is-call:hover .pico-ico { animation: ringShake .6s ease; }

.desk-pico .cart-count {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    min-width: 22px;
    height: 22px;
    background: var(--theme-white) !important;
    color: var(--theme-text-dark) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
    animation: pulseGlow 2s infinite;
    padding: 0 4px;
}

/* 2. Menu Row - FIXED HEIGHT TO REMOVE GAP */
.strides-menu-row {
    background: var(--theme-white);
    border-bottom: 1px solid var(--theme-border);
    position: sticky;
    top: 0;
    z-index: 998;
    transition: box-shadow .3s ease, background .3s ease;
    height: 54px; 
}
.strides-menu-row.is-stuck {
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.97);
}
.strides-menu-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 30px;
    display: block; 
    height: 54px; 
    position: relative; 
}

/* =====================================================
   UPDATED DESKTOP NAVIGATION (Horizontal Swipe)
   ===================================================== */
.desk-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap; 
    overflow-x: auto; 
    overflow-y: hidden;
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch;
    width: 100%;
    
    /* CSS Trick to prevent absolute dropdowns from being clipped vertically */
    padding-bottom: 400px; 
    margin-bottom: -400px; 
    pointer-events: none; 
}
.desk-nav::-webkit-scrollbar {
    display: none; 
}
.desk-nav > li {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-shrink: 0; 
    pointer-events: auto; 
}
.desk-nav > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    color: var(--theme-text-dark) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    transition: all .3s ease;
    white-space: nowrap; 
    position: relative;
    height: 54px;
}
.desk-nav > li > a::after {
    content:"";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 0;
    height: 2.5px;
    background: var(--brand-gradient);
    border-radius: 999px;
    transform: translateX(-50%);
    transition: width .35s ease;
}
.desk-nav > li:hover > a::after { width: 30px; }
.desk-nav > li:hover > a { color: var(--theme-text-dark) !important; }
.desk-nav > li.has-sub > a::before {
    content:"\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    margin-right: 4px;
    order: 1;
    opacity: 0.7;
    transition: transform .35s ease;
}
.desk-nav > li.has-sub:hover > a::before { transform: rotate(180deg); }

/* Desktop Submenu */
.desk-sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--theme-white);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all .35s ease;
    z-index: 99999;
    border-top: 3px solid var(--brand-solid);
}
.desk-nav > li.has-sub:hover > .desk-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.desk-sub li a {
    display: block;
    padding: 11px 22px;
    font-size: 13.5px;
    color: var(--theme-text-dark) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: all .25s ease;
    border-left: 3px solid transparent;
}
.desk-sub li a:hover {
    background: var(--theme-peach);
    color: var(--theme-text-dark) !important;
    border-left-color: var(--brand-solid);
    padding-left: 28px;
}

/* =====================================================
   MOBILE HEADER
   ===================================================== */
.strides-mobile-header {
    position: sticky;
    top: 0;
    z-index: 998;
    background: var(--brand-gradient);
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}
.mob-header-inner { padding: 14px 15px; }

.mob-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 45px;
}
.mob-btn {
    background: transparent;
    border: none;
    color: var(--brand-text) !important;
    font-size: 24px;
    padding: 0;
    display: flex; align-items: center; justify-content: flex-start;
    width: 45px; height: 100%;
    z-index: 2;
    transition: transform .3s ease;
}
.mob-btn:active { transform: scale(0.9); }
.mob-cart {
    position: relative;
    color: var(--brand-text) !important;
    font-size: 24px;
    text-decoration: none !important;
    display: flex; align-items: center; justify-content: flex-end;
    width: 45px; height: 100%;
    z-index: 2;
}
.mob-cart .cart-count {
    position: absolute !important;
    top: -2px !important;
    right: -5px !important;
    min-width: 18px; height: 18px;
    background: var(--theme-white) !important;
    color: var(--theme-text-dark) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    animation: pulseGlow 2s infinite;
}

.mob-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
    width: calc(100% - 100px);
}
.mob-logo img { max-height: 40px; object-fit: contain; }

.mob-search-wrap { margin-top: 15px; }
.mob-search-wrap form { margin: 0; }

/* Mobile Search */
.mob-sbox {
    display: flex; align-items: center;
    height: 45px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    overflow: hidden;
    padding: 4px 4px 4px 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all .3s ease;
}
.mob-sbox:focus-within { 
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15); 
}
.mob-sbox input {
    flex: 1; height: 100%;
    border: 0; outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--brand-text);
    padding-left: 0;
}
.mob-sbox input::placeholder { color: var(--brand-text); opacity: 0.75; }
.mob-sbox button {
    width: 38px; height: 38px;
    border: 0; border-radius: 30px;
    background: var(--theme-white);
    color: var(--brand-solid);
    display: flex align-items: center; justify-content: center;
    font-size: 14px;
    transition: transform .3s ease;
}
.mob-sbox button:hover { transform: scale(1.05); }

/* White search bar (owner request, Oct 2026): the pill was a translucent
   white over the dark header, so it read as black. Now a solid white field
   with dark text; the submit button takes the accent so it stays visible.
   !important is needed: theme-neon.css sets .mob-sbox colours with !important. */
.mob-sbox { background: #fff !important; border: 1px solid rgba(0, 0, 0, .08) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .08) !important; }
.mob-sbox:focus-within { background: #fff !important; box-shadow: 0 0 0 3px rgba(255, 90, 31, .18), 0 6px 15px rgba(0, 0, 0, .12) !important; }
.mob-sbox input { color: #111827 !important; -webkit-text-fill-color: #111827; }
.mob-sbox input::placeholder { color: #6b7280 !important; opacity: 1 !important; }
.mob-sbox button { background: var(--theme-orange, #ff5a1f) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.tnh-actions .tnh-search input { background: #fff !important; color: #111827 !important; border-color: rgba(0, 0, 0, .12) !important; }
.tnh-actions .tnh-search input::placeholder { color: #6b7280 !important; }
.tnh-actions .tnh-search svg { color: #6b7280 !important; }

/* Mobile Quick Action Strip */
.mob-quick {
    display: flex;
    gap: 8px;
    padding: 10px 14px 4px;
    background: var(--theme-peach);
}
.mob-quick a {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px;
    background: var(--theme-white);
    border-radius: 10px;
    color: var(--theme-text-dark) !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--theme-border);
    transition: all .3s ease;
}
.mob-quick a:hover { background: var(--brand-gradient); color: var(--brand-text) !important; transform: translateY(-2px); }
.mob-quick a i { font-size: 13px; }

.mob-chips {
    background: var(--theme-white);
    padding: 10px 14px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--theme-border);
}
.mob-chips::-webkit-scrollbar { display: none; }
.mob-chips a {
    flex-shrink: 0;
    padding: 7px 14px;
    background: var(--theme-peach);
    border-radius: 999px;
    color: var(--theme-text-dark) !important;
    text-decoration: none !important;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid rgba(0,0,0,0.03);
    transition: all .3s ease;
}
.mob-chips a:hover, .mob-chips a.active {
    background: var(--brand-gradient);
    color: var(--brand-text) !important;
    transform: translateY(-2px);
}

@media (max-width: 991px) {
    .desktop-header-wrap { display: none !important; }
}
@media (min-width: 992px) {
    .strides-mobile-header { display: none !important; }
}

@media (max-width: 1199px) {
    .desk-pico .pico-txt { display: none; }
    .desk-pico { padding: 6px; }
}

/* =====================================================
   OFFCANVAS MENU
   ===================================================== */
.offcanvas-pmm {
    width: 320px !important;
    border: 0 !important;
    box-shadow: 10px 0 50px rgba(0,0,0,0.15) !important;
}
.pmm-header {
    background: var(--theme-peach);
    padding: 20px 15px;
    border-bottom: 1px solid var(--theme-border);
}
.pmm-header-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 15px;
}
.pmm-logo img { max-height: 35px; }
.pmm-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--theme-white);
    color: var(--brand-solid);
    border: 1px solid var(--theme-border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform .3s ease;
}
.pmm-close:hover { transform: rotate(90deg); }

.pmm-user-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--theme-white);
    padding: 10px;
    border-radius: 12px;
    text-decoration: none !important;
    border: 1px solid var(--theme-border);
    transition: all .3s ease;
}
.pmm-user-card:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.05); }
.pmm-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: var(--theme-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800;
}
.pmm-uinfo small { display: block; font-size: 11px; color: #777; }
.pmm-uinfo strong { display: block; font-size: 14px; color: var(--theme-dark); }

.pmm-body {
    background: var(--theme-white);
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}
.pmm-cats { list-style: none; margin: 0; padding: 0; }
.pmm-cat-item {
    margin-bottom: 8px;
    background: var(--theme-peach);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .25s ease;
}
.pmm-cat-item:hover { transform: translateX(3px); }
.pmm-cat-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.pmm-cat-ico {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--theme-white);
    color: var(--brand-solid);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.pmm-cat-name {
    flex: 1;
    color: var(--theme-text-dark) !important;
    font-size: 14px; font-weight: 600;
    text-decoration: none !important;
}
.pmm-cat-arrow {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--theme-white);
    color: var(--brand-solid);
    border: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; cursor: pointer;
    transition: all .3s ease;
}
.pmm-cat-arrow:not(.collapsed) {
    background: var(--brand-gradient);
    color: var(--theme-white);
    transform: rotate(180deg);
}
.pmm-subs { list-style: none; margin: 0; padding: 5px 15px 10px 50px; }
.pmm-subs a {
    display: block; padding: 6px 0;
    color: var(--theme-text-dark) !important; text-decoration: none !important;
    font-size: 13.5px; font-weight: 500;
    transition: padding .25s ease;
}
.pmm-subs a:hover { padding-left: 5px; color: var(--theme-text-dark) !important; }

.pmm-call-btn {
    display: flex !important; align-items: center; justify-content: center; gap: 10px;
    background: var(--brand-gradient);
    color: var(--theme-white) !important;
    padding: 12px; border-radius: 10px;
    text-decoration: none !important; font-weight: 600;
    margin-top: 20px;
    transition: transform .3s ease;
}
.pmm-call-btn:hover { transform: translateY(-2px); }
.pmm-call-btn i { animation: ringShake 2.5s ease infinite; }

/* =====================================================
   Z-INDEX FIX FOR CART OPEN STATE
   ===================================================== */
body.hide-header .desktop-header-wrap,
body.hide-header .strides-menu-row,
body.hide-header .strides-mobile-header {
    z-index: 99 !important;
}

.cart-dropdown,
#cart-dropdown,
#cart_section,
.cart-content-wrap,
.cart-overlay {
    z-index: 999999 !important;
}

/* ===== header.blade.php: reseller button in the mobile menu ===== */
                .pmm-reseller-btn{ display:flex; align-items:center; gap:12px; margin:2px 0 16px; padding:13px 15px; border-radius:14px; background:linear-gradient(135deg,#ff4d4f,#c81e1e); color:#fff!important; text-decoration:none; box-shadow:0 8px 20px rgba(200,30,30,.28); }
                .pmm-reseller-btn:active{ transform:scale(.99); }
                .pmm-res-ic{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex:0 0 auto; }
                .pmm-res-txt{ flex:1; font-weight:800; font-size:1rem; line-height:1.25; }
                .pmm-res-txt small{ display:block; font-weight:500; font-size:.72rem; opacity:.92; margin-top:1px; }
                .pmm-res-new{ background:#fde047; color:#7c2d12; font-size:.6rem; font-weight:800; padding:3px 7px; border-radius:6px; flex:0 0 auto; letter-spacing:.3px; }

/* ===== header.blade.php: live search dropdown ===== */
[data-sg-host] { position: relative; }
.sg-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1500; background: #fff; color: #111827; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.18); max-height: 380px; overflow: auto; display: none; text-align: left; }
.sg-drop.is-on { display: block; }
[data-sg-align="right"] .sg-drop { left: auto; right: 0; width: 340px; }
.sg-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-decoration: none !important; color: #111827 !important; border-top: 1px solid #f1f2f6; cursor: pointer; }
.sg-item:first-child { border-top: 0; }
.sg-item:hover, .sg-item.is-hi { background: #f3f4f6; }
.sg-item img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid #e5e7eb; flex: none; background: #fafafa; }
.sg-item .n { font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-item .p { margin-left: auto; white-space: nowrap; font-weight: 800; font-size: 13.5px; color: var(--theme-orange, #ff5a1f); text-align: right; }
.sg-item .p s { display: block; color: #9ca3af; font-weight: 500; font-size: 11.5px; }
.sg-more { display: block; padding: 10px 12px; font-size: 13px; font-weight: 700; text-align: center; color: var(--theme-orange, #ff5a1f) !important; border-top: 1px solid #f1f2f6; text-decoration: none !important; }
.sg-empty { padding: 14px 12px; font-size: 13px; color: #6b7280; text-align: center; }
/* The mobile header's dropdown would run under the site's fixed chat/cart
   bubbles (.premium-float-stack, right edge, z-index 999998 — above the sticky
   header's stacking context), so its rows keep their right side clear. */
.mob-search-wrap .sg-item, .mob-search-wrap .sg-more, .mob-search-wrap .sg-empty { padding-right: 48px; }

/* ===== app.blade.php: quick view modal + layout ===== */
    #quick-view-modal{ z-index:20000 !important; }
    .modal-backdrop{ z-index:19990 !important; }

    #quickViewBody{
        padding: 12px !important;
        max-height: calc(100vh - 160px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--theme-bg-1);
    }

    #quickViewBody *{ max-width: 100%; box-sizing: border-box; }
    #quickViewBody img{ height:auto !important; max-width:100% !important; }
    #quickViewBody table{
        width:100% !important;
        display:block;
        overflow-x:auto;
    }

    .scroll-top, #scroll-top, .back-to-top, .custom-back-top, .custom-floating-wa { display: none !important; }

    .premium-float-stack {
        position: fixed;
        right: 22px;
        bottom: 28px;
        z-index: 999998;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        pointer-events: none;
    }

    .premium-fab {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        overflow: visible;
        background: var(--scroller-gradient);
        color: var(--scroller-text) !important;
        box-shadow: 0 8px 22px rgba(0,0,0,.25);
        pointer-events: auto;
        transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, opacity .4s ease, visibility .4s ease;
    }

    .premium-fab::before {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        background: var(--scroller-gradient);
        z-index: -1;
        opacity: .5;
        animation: pfabPulse 2.2s ease-out infinite;
    }

    .premium-fab::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 55%);
        pointer-events: none;
        opacity: .85;
    }

    @keyframes pfabPulse {
        0%   { transform: scale(.95); opacity: .55; }
        70%  { transform: scale(1.4); opacity: 0; }
        100% { transform: scale(1.4); opacity: 0; }
    }

    .premium-fab .pfab-ring {
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        border: 1.5px dashed rgba(255,255,255,.45);
        animation: pfabSpin 8s linear infinite;
        pointer-events: none;
        z-index: 1;
    }

    @keyframes pfabSpin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }

    .premium-fab .pfab-icon {
        position: relative;
        z-index: 2;
        font-size: 17px;
        line-height: 1;
        transition: transform .35s cubic-bezier(.34,1.56,.64,1);
        animation: pfabFloat 2.4s ease-in-out infinite;
    }

    @keyframes pfabFloat {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-3px); }
    }

    .premium-fab:hover {
        transform: translateY(-5px) scale(1.07);
        box-shadow: 0 14px 32px rgba(0,0,0,.32);
    }
    .premium-fab:hover::before { animation-duration: 1.6s; }
    .premium-fab:hover .pfab-icon { transform: translateY(-2px) scale(1.15); }
    .premium-fab:active {
        transform: translateY(-2px) scale(.95);
        transition-duration: .15s;
    }

    .premium-fab-wa {
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px) scale(.85);
        animation: pfabIntro .7s cubic-bezier(.34,1.56,.64,1) .4s forwards;
    }
    .premium-fab-wa .pfab-icon { font-size: 22px; }
    .premium-fab-wa:hover .pfab-icon { transform: scale(1.15) rotate(-8deg); }

    @keyframes pfabIntro {
        to { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
    }

    .premium-scroll-top {
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px) scale(.85);
    }

    .premium-scroll-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .premium-scroll-top .pst-progress {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        transform: rotate(-90deg);
    }
    .premium-scroll-top .pst-progress circle {
        fill: none;
        stroke-width: 3;
        stroke-linecap: round;
    }
    .premium-scroll-top .pst-progress .pst-track {
        stroke: rgba(255,255,255,.18);
    }
    .premium-scroll-top .pst-progress .pst-bar {
        stroke: rgba(255,255,255,.95);
        stroke-dasharray: 138;
        stroke-dashoffset: 138;
        transition: stroke-dashoffset .15s linear;
        filter: drop-shadow(0 0 4px rgba(255,255,255,.5));
    }

    .premium-scroll-top.is-clicked .pfab-icon {
        animation: pstLaunch .6s ease forwards;
    }

    @keyframes pstLaunch {
        0%   { transform: translateY(0); opacity: 1; }
        50%  { transform: translateY(-22px); opacity: 0; }
        51%  { transform: translateY(22px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }

    @media (max-width: 991px) {
        .premium-float-stack {
            right: 14px;
            bottom: 100px; /* 30px move up */
            gap: 10px;
        }
        .premium-fab {
            width: 50px; /* Icon size smaller */
            height: 50px; /* Icon size smaller */
        }
        .premium-fab .pfab-icon { font-size: 16px; }
        .premium-fab-wa .pfab-icon { font-size: 20px; }
    }

    /* On a phone the stack is fixed over a two-column product grid, so at 50px
       it covered the right card's buttons. Pull it tighter to the edge and
       shrink it enough to clear them. */
    @media (max-width: 767px) {
        .premium-float-stack {
            right: 8px;
            bottom: 78px;
            gap: 8px;
        }
        .premium-fab {
            width: 42px;
            height: 42px;
        }
        .premium-fab .pfab-icon { font-size: 14px; }
        .premium-fab-wa .pfab-icon { font-size: 17px; }
    }

    body.hide-header .premium-float-stack { display: none !important; }

/* ===== app.blade.php: floating actions ===== */
    /* Floating actions, redone per the owner: one accent toggle that is always
       visible; the actions fan out above it on tap. White circles with a 1px
       border and each brand in its own colour (Font Awesome's brand glyphs are
       the official logos), instead of the gradient/pulse style above. */
    .premium-float-stack.pfab-menu { gap: 0; align-items: center; }
    .pfab-menu .pfab-items { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 12px; pointer-events: none; }
    .pfab-menu .premium-fab { background: #fff !important; color: #111 !important; border: 1px solid rgba(0, 0, 0, .14); box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .28); }
    .pfab-menu .premium-fab::before, .pfab-menu .premium-fab::after { content: none; animation: none !important; }
    .pfab-menu .premium-fab .pfab-icon { animation: none !important; font-size: 20px; }
    .pfab-menu .premium-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .32); }
    .pfab-menu .premium-fab:hover .pfab-icon { transform: none; }
    .pfab-menu .premium-fab-msg .pfab-icon { background: linear-gradient(135deg, #0099FF, #A033FF 60%, #FF5280); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
    .pfab-menu .premium-fab-wa .pfab-icon { color: #25D366 !important; font-size: 23px; }

    /* collapsed by default; .is-open fans the items out with a small stagger */
    .pfab-menu .pfab-item { animation: none !important; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.6); pointer-events: none; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease, visibility .25s; transition-delay: calc(var(--i, 0) * 40ms); }
    .pfab-menu.is-open .pfab-item { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }

    .pfab-menu .pfab-toggle { background: linear-gradient(135deg, var(--theme-orange, #ff5a1f), var(--theme-red, #ff2f4e)) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 10px 26px -8px rgba(255, 0, 0, .45); pointer-events: auto; }
    .pfab-menu .pfab-toggle .pfab-icon { color: #fff !important; font-size: 21px; }
    .pfab-menu .pfab-toggle .pfab-ico-close { display: none; }
    .pfab-menu.is-open .pfab-toggle .pfab-ico-open { display: none; }
    .pfab-menu.is-open .pfab-toggle .pfab-ico-close { display: inline-flex; }
    .pfab-menu .pfab-toggle::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(255, 60, 60, .45); animation: pfabPulseSoft 2.4s ease-out infinite !important; }
    .pfab-menu.is-open .pfab-toggle::before { content: none; }
    @keyframes pfabPulseSoft { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }

/* ===== app.blade.php: mobile animation kill-switch ===== */
@media (max-width: 991.98px) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
    }
    /* functional loading spinners must keep spinning */
    .fa-spin          { animation: fa-spin 2s linear infinite !important; }
    .spinner-border   { animation: spinner-border .75s linear infinite !important; }
    .spinner-grow     { animation: spinner-grow .75s linear infinite !important; }

    /* backdrop blur re-renders on every scroll frame on fixed/sticky elements */
    *, *::before, *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .footer-copy-row { background: rgba(0,0,0,.55) !important; }

    /* hero slider ken-burns zoom repaints a full-width image continuously */
    .main-swiper .swiper-slide-active img { animation: none !important; }

    /* scroll-top progress ring: drop-shadow made every scroll frame repaint */
    .premium-scroll-top .pst-progress .pst-bar { filter: none !important; }
}

/* ===== footer.blade.php: footer + mobile nav ===== */

    /* ============================================================
       FOOTER
       ============================================================ */
    .footer-modern{
        position: relative;
        overflow: hidden;
        padding: 0 0 0 !important;
        background:
            radial-gradient(800px 480px at 5% 5%, color-mix(in srgb, var(--footer-grad1) 16%, transparent), transparent 60%),
            radial-gradient(700px 520px at 95% 95%, color-mix(in srgb, var(--footer-grad2) 18%, transparent), transparent 60%),
            linear-gradient(180deg, var(--footer-bg1) 0%, var(--footer-bg2) 60%, var(--footer-bg3) 100%) !important;
        color: var(--footer-text);
        font-family: 'Hind Siliguri', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        isolation: isolate;
    }

    .footer-modern::before{
        content:""; position:absolute; left:0; right:0; top:0; height:4px;
        background: linear-gradient(90deg, var(--footer-grad1), var(--footer-grad2), var(--footer-grad1));
        background-size: 200% 100%;
        animation: borderShimmer 6s linear infinite;
        z-index: 3;
    }
    @keyframes borderShimmer {
        from { background-position: 0% 0%; }
        to   { background-position: 200% 0%; }
    }

    /* লোগোর উপরের মাঝখানের বারটি (.footer-modern::after) রিমুভ করা হয়েছে */

    .footer-main-area{
        padding: 50px 0 8px;
        position: relative;
        z-index: 2;
    }

    .footer-modern a{
        color: var(--footer-text);
        text-decoration: none;
        transition: color .25s ease, transform .25s ease;
        display: inline-block;
    }
    .footer-modern a:hover{ color: var(--footer-hover); }

    .footer-col-title{
        font-size: 1rem;
        font-weight: 800;
        color: var(--footer-text);
        letter-spacing: .04em;
        text-transform: uppercase;
        margin-bottom: 22px !important;
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 12px;
    }
    .footer-col-title::before{
        content:"";
        width: 4px; height: 18px;
        border-radius: 2px;
        background: linear-gradient(180deg, var(--footer-grad1), var(--footer-grad2));
        flex-shrink: 0;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--footer-grad1) 35%, transparent);
    }
    .footer-col-title::after{
        content:"";
        position: absolute; left: 0; bottom: 0;
        width: 40px; height: 2px;
        background: linear-gradient(90deg, var(--footer-grad1), transparent);
        border-radius: 2px;
        transition: width .4s var(--ease-out);
    }
    .footer-col:hover .footer-col-title::after{ width: 80px; }

    .footer-brand-block .footer-contact-list{
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .footer-brand-block .footer-contact-list li{
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 14px;
        font-size: 13.5px;
        color: var(--footer-text);
        transition: transform .25s ease;
        line-height: 1.5;
    }
    .footer-brand-block .footer-contact-list li:hover{ transform: translateX(3px); }
    .footer-brand-block .footer-contact-list li .ic{
        width: 32px; height: 32px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 13px;
        color: var(--footer-grad1);
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 10px;
        flex-shrink: 0;
        line-height: 1;
        transition: background .3s ease, transform .3s var(--ease-bounce), border-color .3s ease, color .3s ease;
    }
    .footer-brand-block .footer-contact-list li:hover .ic{
        background: linear-gradient(135deg, var(--footer-grad1), var(--footer-grad2));
        border-color: transparent;
        color: #fff;
        transform: rotate(-6deg) scale(1.08);
        box-shadow: 0 6px 14px color-mix(in srgb, var(--footer-grad1) 35%, transparent);
    }
    .footer-brand-block .footer-contact-list li a,
    .footer-brand-block .footer-contact-list li span.txt{
        color: var(--footer-text);
        font-size: 13.5px;
        line-height: 1.5;
        word-break: break-word;
    }

    .footer-logo-wrap{
        display: inline-flex;
        align-items: center;
        padding: 8px 14px;
        border-radius: 14px;
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.10);
        margin-bottom: 18px;
        transition: transform .35s var(--ease-out), background .3s ease;
        position: relative;
        overflow: hidden;
    }
    .footer-logo-wrap::before{
        content:"";
        position: absolute;
        top:0; left: -100%;
        width: 60%; height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,.20), transparent);
        transform: skewX(-20deg);
        transition: left .8s var(--ease-out);
    }
    .footer-logo-wrap:hover{
        transform: translateY(-2px);
        background: rgba(255,255,255,.08);
    }
    .footer-logo-wrap:hover::before{ left: 130%; }
    .footer-logo-wrap img{
        max-height: 44px; width: auto; object-fit: contain;
        filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
        position: relative;
        z-index: 1;
    }

    .footer-link-list{
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .footer-link-list li{ margin-bottom: 11px; }
    .footer-link-list li a{
        font-size: 13.5px;
        color: var(--footer-text);
        font-weight: 500;
        position: relative;
        opacity: .85;
        display: inline-flex;
        align-items: center;
        gap: 0;
        transition: all .25s ease;
    }
    .footer-link-list li a::before{
        content: "\f105";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 10px;
        opacity: 0;
        max-width: 0;
        margin-right: 0;
        color: var(--footer-grad1);
        transition: opacity .25s ease, max-width .25s ease, margin-right .25s ease;
        overflow: hidden;
    }
    .footer-link-list li a:hover{
        color: var(--footer-hover);
        opacity: 1;
        transform: translateX(4px);
    }
    .footer-link-list li a:hover::before{
        opacity: 1;
        max-width: 12px;
        margin-right: 6px;
    }

    .stay-connected-block .sc-tagline{
        font-size: 13px;
        color: var(--footer-subtitle);
        opacity: .9;
        line-height: 1.6;
        margin-bottom: 18px;
    }

    .footer-wa-cta{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 11px 18px;
        border-radius: 14px;
        background: linear-gradient(135deg, #25D366, #128C7E);
        color: #ffffff !important;
        font-weight: 700;
        font-size: 13px;
        text-decoration: none !important;
        box-shadow: 0 8px 20px rgba(37, 211, 102, 0.32);
        transition: transform .3s var(--ease-bounce), box-shadow .3s ease;
        margin-top: 4px;
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;
    }
    .footer-wa-cta::before{
        content:""; position:absolute; top:0; left:-130%;
        width: 60%; height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,.30), transparent);
        transform: skewX(-20deg);
        transition: left .8s var(--ease-out);
    }
    .footer-wa-cta:hover{
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 14px 26px rgba(37, 211, 102, 0.45);
        color: #ffffff !important;
    }
    .footer-wa-cta:hover::before{ left: 130%; }
    .footer-wa-cta i{ font-size: 18px; line-height: 1; }

    .footer-social-title{
        font-size: .76rem;
        text-transform: uppercase;
        letter-spacing: .16em;
        font-weight: 700;
        margin-bottom: 14px;
        color: var(--footer-text);
        opacity: .8;
        display: block;
    }
    .footer-social-list{
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .footer-social-icon{
        position: relative;
        width: 42px; height: 42px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.10);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        line-height: 1;
        background: rgba(255,255,255,.04);
        color: var(--footer-text) !important;
        overflow: hidden;
        isolation: isolate;
        text-decoration: none !important;
        padding: 0;
        transition: transform .35s var(--ease-bounce), border-color .3s ease, color .3s ease, box-shadow .35s ease;
    }
    .footer-social-icon::before{
        content:""; position:absolute; inset:0; border-radius: 12px;
        background: linear-gradient(135deg, var(--footer-grad1), var(--footer-grad2));
        opacity: 0;
        transition: opacity .35s ease;
        z-index: 0;
    }
    .footer-social-icon i,
    .footer-social-icon span{
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        line-height: 1;
        text-align: center;
        transition: transform .35s var(--ease-bounce);
    }
    .footer-social-icon:hover{
        transform: translateY(-4px) rotate(-4deg);
        border-color: transparent;
        color: #fff !important;
        box-shadow: 0 12px 24px color-mix(in srgb, var(--footer-grad1) 35%, transparent);
    }
    .footer-social-icon:hover::before{ opacity: 1; }
    .footer-social-icon:hover i,
    .footer-social-icon:hover span{ transform: scale(1.18); }

    .footer-ssl-row{
        margin-top: 30px;
        display: flex;
        justify-content: center;
    }
    .premium-payment-box {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        background: #ffffff;
        padding: 10px 22px;
        border-radius: 16px;
        box-shadow:
            0 14px 28px rgba(0, 0, 0, 0.30),
            0 0 0 1px rgba(255,255,255,.06);
        position: relative;
        overflow: hidden;
        isolation: isolate;
        max-width: 95%;
        transition: transform .35s var(--ease-out), box-shadow .35s ease;
    }
    .premium-payment-box::before{
        content:""; position:absolute; inset:0;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--footer-grad1) 25%, transparent),
            color-mix(in srgb, var(--footer-grad2) 25%, transparent));
        opacity: 0;
        transition: opacity .35s ease;
        z-index: -1;
        border-radius: 16px;
    }
    .premium-payment-box::after{
        content:""; position: absolute; top:0; left:-130%;
        width: 60%; height: 100%;
        background: linear-gradient(120deg, transparent, rgba(13,110,253,.20), transparent);
        transform: skewX(-20deg);
        transition: left 1s var(--ease-out);
    }
    .premium-payment-box:hover{
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 20px 36px rgba(0,0,0,.40);
    }
    .premium-payment-box:hover::after{ left: 130%; }
    .premium-payment-box img {
        display: block;
        max-width: 100%; height: auto;
        max-height: 44px;
        position: relative;
        z-index: 1;
    }

    /* ============ COPYRIGHT ROW ============ */
    .footer-copy-row{
        margin-top: 28px;
        padding: 18px 0 18px;
        position: relative;
        background: rgba(0,0,0,.30);
        backdrop-filter: blur(8px);
        border-top: 1px solid rgba(255,255,255,.08);
    }
    .footer-copy-row::before{
        content:""; position: absolute; top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--footer-grad1), var(--footer-grad2), transparent);
        opacity: .6;
    }
    .footer-copy-inner{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
    }
    .footer-copy-text{
        display: block;
        font-size: 13.5px;
        color: var(--footer-text);
        opacity: .92;
        margin: 0;
        line-height: 1.5;
        text-align: center;
        width: 100%;
    }
    .footer-copy-text:last-child{ opacity: .82; font-size: 12.5px; }
    
    /* Biz Care IT White Brand CSS */
    .footer-copy-text .brand-strong{
        color: #ffffff !important;
        font-weight: 700;
    }

    .footer-copy-text a{
        color: var(--footer-text);
        text-decoration: none;
        position: relative;
        transition: color .25s ease;
    }
    .footer-copy-text a::after{
        content:""; position: absolute; left: 0; right: 0; bottom: -2px;
        height: 1.5px;
        background: linear-gradient(90deg, var(--footer-grad1), var(--footer-grad2));
        transform: scaleX(0); transform-origin: left;
        transition: transform .35s ease;
    }
    .footer-copy-text a:hover{ color: var(--footer-hover); }
    .footer-copy-text a:hover::after{ transform: scaleX(1); }

    .back-to-top{
        position: fixed;
        right: 18px;
        bottom: 92px;
        width: 44px; height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--footer-grad1), var(--footer-grad2));
        border: 2px solid rgba(255,255,255,.20);
        color: #fff;
        display: none;
        align-items: center; justify-content: center;
        font-size: 15px;
        cursor: pointer;
        z-index: 9998;
        box-shadow: 0 10px 22px color-mix(in srgb, var(--footer-grad1) 35%, transparent);
        transition: transform .3s var(--ease-bounce), box-shadow .3s ease;
    }
    .back-to-top.show{ display: flex; }
    .back-to-top:hover{
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 14px 28px color-mix(in srgb, var(--footer-grad1) 45%, transparent);
    }
    .back-to-top:active{ transform: scale(.92); }

    .footer-reveal{
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    }
    .footer-reveal.in-view{ opacity: 1; transform: translateY(0); }
    .footer-reveal.delay-1{ transition-delay: .05s; }
    .footer-reveal.delay-2{ transition-delay: .12s; }
    .footer-reveal.delay-3{ transition-delay: .19s; }
    .footer-reveal.delay-4{ transition-delay: .26s; }
    .footer-reveal.delay-5{ transition-delay: .33s; }

    @media (max-width: 991.98px){
        .footer-main-area{ padding: 36px 0 6px; }
        .footer-col-title{ font-size: .95rem; margin-bottom: 18px !important; }
        .footer-brand-block .footer-contact-list li{ margin-bottom: 12px; font-size: 12.5px; }
        .footer-brand-block .footer-contact-list li .ic{ width: 30px; height: 30px; font-size: 12px; }
        .footer-link-list li{ margin-bottom: 10px; }
        .footer-link-list li a{ font-size: 12.5px; }
        .stay-connected-block .sc-tagline{ font-size: 12.5px; margin-bottom: 14px; }
        .footer-wa-cta{ font-size: 12.5px; padding: 10px 16px; }
        .footer-wa-cta i{ font-size: 16px; }
        .footer-social-icon{ width: 40px; height: 40px; font-size: 14px; }
        .premium-payment-box img{ max-height: 40px; }
        .footer-copy-row{ margin-top: 22px; padding: 14px 0 16px; }
    }

    @media (max-width: 767.98px){
        .footer-main-area{ padding: 28px 0 4px; }
        .footer-col{ margin-bottom: 4px; }
        .footer-col-title{ font-size: .85rem; margin-bottom: 14px !important; padding-bottom: 10px; }
        .footer-col-title::before{ height: 14px; }
        .footer-brand-block .footer-contact-list li{ font-size: 12px; margin-bottom: 10px; gap: 10px; }
        .footer-brand-block .footer-contact-list li .ic{ width: 28px; height: 28px; font-size: 11px; border-radius: 9px; }
        .footer-link-list li{ margin-bottom: 9px; }
        .footer-link-list li a{ font-size: 12px; }
        .footer-logo-wrap{ padding: 7px 12px; }
        .footer-logo-wrap img{ max-height: 38px; }
        .stay-connected-block .sc-tagline{ font-size: 12px; }
        .footer-wa-cta{ font-size: 12px; padding: 9px 14px; gap: 8px; }
        .footer-wa-cta i{ font-size: 15px; }
        .footer-social-icon{ width: 38px; height: 38px; font-size: 13.5px; border-radius: 10px; }
        .footer-ssl-row{ margin-top: 22px; }
        .premium-payment-box{ padding: 8px 16px; }
        .premium-payment-box img{ max-height: 36px; }
        .footer-copy-text{ font-size: 12.5px; }
        .footer-copy-text:last-child{ font-size: 11.5px; }
        .back-to-top{ right: 14px; bottom: 90px; width: 40px; height: 40px; font-size: 13px; }
    }

    @media (max-width: 575.98px){
        .footer-main-area{ padding: 22px 0 0; }
        .footer-col{ margin-bottom: 2px; }
        .footer-col-title{ font-size: .78rem; margin-bottom: 12px !important; padding-bottom: 8px; }
        .footer-col-title::before{ width: 3px; height: 12px; }
        .footer-col-title::after{ width: 30px; }
        .footer-brand-block .footer-contact-list li{ font-size: 11.5px; margin-bottom: 9px; gap: 8px; }
        .footer-brand-block .footer-contact-list li .ic{ width: 26px; height: 26px; font-size: 10.5px; border-radius: 8px; }
        .footer-link-list li{ margin-bottom: 8px; }
        .footer-link-list li a{ font-size: 11.5px; }
        .footer-logo-wrap{ padding: 6px 10px; margin-bottom: 12px; border-radius: 12px; }
        .footer-logo-wrap img{ max-height: 34px; }
        .stay-connected-block .sc-tagline{ font-size: 11.5px; margin-bottom: 12px; }
        .footer-wa-cta{ font-size: 11.5px; padding: 8px 13px; margin-bottom: 14px; border-radius: 12px; }
        .footer-wa-cta i{ font-size: 14px; }
        .footer-social-title{ font-size: .72rem; margin-bottom: 10px; }
        .footer-social-list{ gap: 7px; }
        .footer-social-icon{ width: 36px; height: 36px; font-size: 12.5px; border-radius: 10px; }
        .footer-ssl-row{ margin-top: 18px; }
        .premium-payment-box{ padding: 7px 14px; border-radius: 12px; gap: 10px; }
        .premium-payment-box img{ max-height: 30px; }
        .footer-copy-row{ margin-top: 18px; padding: 12px 0 14px; }
        .footer-copy-text{ font-size: 11.5px; line-height: 1.55; }
        .footer-copy-text:last-child{ font-size: 10.5px; }
        .back-to-top{ right: 12px; bottom: 90px; width: 38px; height: 38px; font-size: 12px; }
    }

    @media (max-width: 380px){
        .footer-col-title{ font-size: .72rem; }
        .footer-brand-block .footer-contact-list li{ font-size: 10.5px; }
        .footer-brand-block .footer-contact-list li .ic{ width: 24px; height: 24px; font-size: 10px; }
        .footer-link-list li a{ font-size: 10.5px; }
        .footer-wa-cta{ font-size: 10.5px; }
        .footer-social-icon{ width: 34px; height: 34px; font-size: 12px; }
        .premium-payment-box img{ max-height: 26px; }
        .footer-copy-text{ font-size: 10.5px; }
        .footer-copy-text:last-child{ font-size: 10px; }
    }

    /* ============================================================
       MOBILE BOTTOM NAV — DOCK + HOME FAB CENTER
       ============================================================ */
    .footer-nav{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 72px;
        background: var(--mnav-bg);
        z-index: 99999;
        display: none;
        box-shadow: 0 -8px 28px rgba(15,23,42,.18);
        animation: dockSlide .55s var(--ease-bounce) both;
    }
    @keyframes dockSlide{
        from { opacity: 0; transform: translateY(80px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .footer-nav::before{
        content:"";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--footer-grad1), var(--footer-grad2), var(--footer-grad1), transparent);
        background-size: 200% 100%;
        animation: borderShimmer 5s linear infinite;
    }

    .footer-nav-bg{
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }
    .footer-nav-bg svg{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }
    .footer-nav-bg svg path{
        fill: var(--mnav-bg);
        filter: drop-shadow(0 -4px 14px rgba(15,23,42,.15));
    }

    .m-nav-main{
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr 1fr 90px 1fr 1fr;
        align-items: center;
        height: 100%;
        padding: 0 6px;
    }

    .footerBtn{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        padding: 4px 6px;
        transition: transform .3s var(--ease-bounce);
        height: 100%;
    }

    .footerBtn .icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px; height: 32px;
        border-radius: 10px;
        background: transparent;
        transition: background .35s ease, transform .35s var(--ease-bounce);
    }
    .footerBtn i{
        font-size: 16px;
        color: var(--mnav-icon);
        opacity: .65;
        line-height: 1;
        transition: all .3s ease;
    }
    .footerBtn span{
        font-size: 10px;
        font-weight: 700;
        color: var(--mnav-icon);
        opacity: .70;
        line-height: 1.1;
        text-transform: uppercase;
        letter-spacing: .3px;
        transition: all .3s ease;
    }

    .footerBtn:hover .icon-wrap,
    .footerBtn.active-nav .icon-wrap{
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--footer-grad1) 15%, transparent),
            color-mix(in srgb, var(--footer-grad2) 15%, transparent));
        transform: translateY(-2px) scale(1.06);
    }
    .footerBtn:hover i,
    .footerBtn.active-nav i{
        color: var(--footer-grad1);
        opacity: 1;
    }
    .footerBtn:hover span,
    .footerBtn.active-nav span{
        color: var(--footer-grad2);
        opacity: 1;
        font-weight: 800;
    }
    .footerBtn:active{ transform: scale(.92); }

    .footerBtn::after{
        content:"";
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%) scale(0);
        width: 18px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--footer-grad1), var(--footer-grad2));
        transition: transform .3s var(--ease-bounce);
    }
    .footerBtn.active-nav::after{ transform: translateX(-50%) scale(1); }

    /* ELEVATED CENTER FAB (HOME) - Changed colors based on variables */
    .footer-nav-fab{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .fab-btn{
        position: absolute;
        bottom: 28px;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--mnav-home-bg);
        color: var(--mnav-icon) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        text-decoration: none !important;
        border: 4px solid var(--mnav-home-border);
        box-shadow:
            0 10px 24px color-mix(in srgb, var(--footer-grad1) 40%, transparent),
            0 4px 10px rgba(0,0,0,.18);
        transition: transform .35s var(--ease-bounce), box-shadow .35s ease;
        z-index: 5;
        animation: fabPulse 2.6s ease-in-out infinite;
    }
    @keyframes fabPulse{
        0%, 100% { box-shadow: 0 10px 24px color-mix(in srgb, var(--footer-grad1) 40%, transparent), 0 0 0 0 color-mix(in srgb, var(--footer-grad1) 30%, transparent); }
        50%      { box-shadow: 0 10px 24px color-mix(in srgb, var(--footer-grad1) 40%, transparent), 0 0 0 10px color-mix(in srgb, var(--footer-grad1) 0%, transparent); }
    }
    .fab-btn:hover{
        transform: translateY(-3px) rotate(-6deg) scale(1.05);
    }
    .fab-btn:active{ transform: scale(.92); }

    .fab-btn i{
        position: relative;
        z-index: 2;
        color: var(--mnav-icon);
        transition: transform .35s var(--ease-bounce), color .3s ease;
    }
    .fab-btn:hover i{ 
        transform: scale(1.12) rotate(6deg); 
        color: var(--footer-grad1);
    }

    .fab-label{
        position: absolute;
        bottom: 6px;
        font-size: 9.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .4px;
        background: linear-gradient(90deg, var(--footer-grad1), var(--footer-grad2));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        z-index: 3;
    }

    @media (max-width: 380px){
        .footer-nav{ height: 68px; }
        .m-nav-main{ grid-template-columns: 1fr 1fr 80px 1fr 1fr; }
        .footerBtn .icon-wrap{ width: 30px; height: 30px; }
        .footerBtn i{ font-size: 15px; }
        .footerBtn span{ font-size: 9.5px; }
        .fab-btn{ width: 58px; height: 58px; font-size: 20px; bottom: 26px; border-width: 3px; }
        .fab-label{ font-size: 9px; bottom: 5px; }
    }

    @media (prefers-reduced-motion: reduce){
        *, *::before, *::after {
            animation-duration: .001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .001ms !important;
        }
    }

/* ===== footer.blade.php: readability override ===== */
    .footer-modern, .footer-modern p, .footer-modern li, .footer-modern .sc-tagline,
    .footer-modern .footer-link-list a, .footer-modern .footer-contact-list li,
    .footer-modern .footer-contact-list a, .footer-modern .footer-link-list li a { color: rgba(255, 255, 255, .9) !important; }
    .footer-modern .footer-link-list a:hover, .footer-modern .footer-contact-list a:hover { color: #fff !important; }
    .footer-modern .footer-col-title, .footer-modern .footer-social-title, .footer-modern h4, .footer-modern h5,
    .footer-modern .brand-strong { color: #fff !important; opacity: 1 !important; }

    .footer-modern .footer-social-icon { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .32) !important; color: #fff !important; border-radius: 12px !important; }
    .footer-modern .footer-social-icon::before { display: none !important; }
    .footer-modern .footer-social-icon:hover { background: #fff !important; color: #111 !important; border-color: #fff !important; transform: translateY(-3px); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .55); }
    .footer-modern .footer-social-icon:hover i, .footer-modern .footer-social-icon:hover span { color: #111 !important; transform: scale(1.08); }

    .footer-modern .footer-copy-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin: 0; opacity: 1 !important; color: rgba(255, 255, 255, .9) !important; }
    .footer-modern .footer-copy-text a, .footer-modern .footer-copy-text .brand-strong { color: #fff !important; }
    .footer-modern .footer-contact-list li span.txt, .footer-modern .footer-contact-list li .txt { color: rgba(255, 255, 255, .9) !important; }
    .footer-modern .footer-copy-inner { flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; }
    .footer-modern .footer-copy-text { width: auto !important; display: inline-block; }
    .footer-modern .footer-copy-text + .footer-copy-text::before { content: "•"; margin-right: 14px; opacity: .55; }
    @media (max-width: 767.98px) {
        /* Owner: copyright + credit on ONE row on phones too. The script below shrinks the row's font
           (min 8.5px) until both texts fit beside each other; the "•" separator stays. */
        .footer-modern .footer-copy-inner { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0 6px; text-align: center; width: 100%; }
        .footer-modern .footer-copy-text { font-size: var(--fcs, 10px) !important; line-height: 1.5; white-space: nowrap; overflow: visible; text-overflow: clip; flex: 0 0 auto; max-width: none; }
        .footer-modern .footer-copy-text + .footer-copy-text::before { content: "•"; margin-right: 6px; opacity: .55; }
        /* 54px clears the bottom dock; the rest lifts the row above the chat button, its hint bubble and the
           contact FAB, which float just above the dock on the right and covered the row end. */
        .footer-modern .footer-copy-row { padding-bottom: 134px !important; }
    }

/* ===== exit_popup.blade.php: exit popup ===== */
    .exit-popup-overlay {
        /* admin-set brand colors — popup follows the shop theme automatically */
        position: fixed; inset: 0; z-index: 999999;
        background: rgba(10, 15, 30, .72);
        display: flex; align-items: center; justify-content: center;
        padding: 16px;
        opacity: 0; visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }
    .exit-popup-overlay.is-open { opacity: 1; visibility: visible; }

    .exit-popup-card {
        width: min(92vw, 380px);
        max-height: 92vh; overflow-y: auto;
        background: #ffffff; border-radius: 24px;
        position: relative;
        box-shadow: 0 30px 80px rgba(0,0,0,.45);
        transform: translateY(28px) scale(.94);
        transition: transform .35s cubic-bezier(.34,1.4,.64,1);
        font-family: 'Hind Siliguri', 'Inter', sans-serif;
        -webkit-overflow-scrolling: touch;
    }
    .exit-popup-overlay.is-open .exit-popup-card { transform: translateY(0) scale(1); }

    /* ---- top: gradient hero ---- */
    .ep-top {
        position: relative; overflow: hidden;
        background: var(--ep-grad);
        border-radius: 24px 24px 0 0;
        text-align: center;
        padding: 30px 22px 46px;
    }
    .ep-top::before, .ep-top::after {
        content: ""; position: absolute; border-radius: 50%;
        background: rgba(255,255,255,.09); pointer-events: none;
    }
    .ep-top::before { width: 150px; height: 150px; top: -55px; left: -45px; }
    .ep-top::after  { width: 110px; height: 110px; bottom: -45px; right: -35px; }
    .ep-gift {
        width: 68px; height: 68px; margin: 0 auto 12px;
        background: rgba(255,255,255,.16);
        border: 2px solid rgba(255,255,255,.45);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 32px; line-height: 1;
        box-shadow: 0 8px 24px rgba(0,0,0,.18);
        position: relative; z-index: 1;
    }
    .ep-top h3 {
        margin: 0 0 6px; position: relative; z-index: 1;
        font-size: clamp(18px, 5.5vw, 21px); font-weight: 800; color: var(--ep-text); line-height: 1.35;
    }
    .ep-top p {
        margin: 0; position: relative; z-index: 1;
        font-size: clamp(12.5px, 3.8vw, 14px); color: var(--ep-text); opacity: .88; line-height: 1.6;
    }

    /* ---- middle: coupon ticket ---- */
    .ep-ticket {
        position: relative;
        margin: -26px 18px 0;
        background: #ffffff;
        border: 1.5px solid #e2e8f0;
        border-radius: 18px;
        box-shadow: 0 12px 30px rgba(15,23,42,.10);
        padding: 18px 16px 16px;
        text-align: center;
        z-index: 2;
    }
    .ep-off-badge {
        display: inline-block;
        background: var(--ep-grad);
        color: var(--ep-text); font-size: clamp(20px, 6.5vw, 26px); font-weight: 800;
        padding: 8px 22px; border-radius: 999px;
        box-shadow: 0 8px 20px rgba(15,23,42,.25);
        margin-bottom: 4px; white-space: nowrap;
    }
    .ep-min { font-size: 12px; color: #94a3b8; font-weight: 600; margin-bottom: 12px; }
    .ep-cut {
        display: flex; align-items: center; gap: 8px; margin: 0 4px 12px;
        color: #cbd5e1; font-size: 13px;
    }
    .ep-cut::before, .ep-cut::after { content: ""; flex: 1; border-top: 2px dashed #e2e8f0; }
    /* code + COPY: one joined row (input-group style) */
    .ep-code-box {
        display: flex; align-items: stretch;
        border: 2px dashed var(--ep-solid);
        border-radius: 14px;
        background: #f8fafc;
        overflow: hidden;
    }
    .ep-code {
        flex: 1; display: flex; align-items: center; justify-content: center;
        font-size: clamp(16px, 5vw, 20px); font-weight: 800;
        letter-spacing: 2px; color: var(--ep-solid);
        padding: 13px 10px; min-width: 0; word-break: break-all;
    }
    .ep-copy-btn {
        /* width/height must be pinned — the theme's global button CSS
           (width:100%) otherwise swallows the whole row */
        width: auto !important; min-width: 86px; max-width: 40%;
        height: auto !important;
        flex: 0 0 auto;
        border: none; cursor: pointer;
        background: var(--ep-grad);
        color: var(--ep-text); font-weight: 800; font-size: 13px; letter-spacing: .8px;
        padding: 0 18px; margin: 4px; border-radius: 10px;
        display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px;
        transition: transform .15s ease, background .2s ease;
        white-space: nowrap;
    }
    .ep-copy-btn:active { transform: scale(.94); }
    .ep-copy-btn i { font-size: 14px; }
    .ep-copy-btn.copied { background: linear-gradient(135deg, #059669, #10b981); color: #fff; }

    /* ---- bottom ---- */
    .ep-bottom { padding: 16px 18px 18px; text-align: center; }
    .ep-shop-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        width: 100%; text-decoration: none !important;
        border: none; cursor: pointer;
        background: var(--ep-grad);
        color: var(--ep-text) !important; font-size: clamp(14.5px, 4.5vw, 16px); font-weight: 800;
        padding: 14px; border-radius: 14px;
        box-shadow: 0 10px 24px rgba(15,23,42,.28);
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .ep-shop-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,23,42,.36); }
    .ep-later {
        display: inline-block; margin-top: 10px;
        border: none; background: none; cursor: pointer;
        font-size: 12.5px; color: #94a3b8; font-weight: 600;
        text-decoration: underline; text-underline-offset: 3px;
    }
    .ep-close {
        position: absolute; top: 12px; right: 12px; z-index: 3;
        width: 34px; height: 34px; border: none; cursor: pointer;
        background: rgba(255,255,255,.2); color: #fff;
        backdrop-filter: none;
        border-radius: 50%; font-size: 17px; line-height: 1;
        display: flex; align-items: center; justify-content: center;
        transition: background .2s ease, transform .15s ease;
    }
    .ep-close:hover { background: rgba(255,255,255,.35); }
    .ep-close:active { transform: scale(.9); }

    @media (max-width: 359.98px) {
        .ep-top { padding: 24px 16px 42px; }
        .ep-ticket { margin: -24px 12px 0; padding: 14px 12px 12px; }
        .ep-bottom { padding: 14px 14px 16px; }
        .ep-gift { width: 58px; height: 58px; font-size: 26px; }
    }

/* ===== leave_offer.blade.php: leave-page offer popup ===== */
    .dp-leave{ position:fixed; inset:0; z-index:2147483002; /* above the BizChat widget (2147483001) and the contact FAB */ display:flex; align-items:center; justify-content:center; padding:16px; font-family:'Hind Siliguri', sans-serif; }
    .dp-leave[hidden]{ display:none; }
    .dp-leave-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s; }
    .dp-leave-card{ position:relative; width:100%; max-width:420px; background:#fff; color:#111; border-radius:20px; padding:30px 26px 22px; text-align:center; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); transform:translateY(16px) scale(.97); opacity:0; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .25s; }
    .dp-leave.is-in .dp-leave-backdrop{ opacity:1; }
    .dp-leave.is-in .dp-leave-card{ transform:none; opacity:1; }
    .dp-leave-x{ position:absolute; top:10px; right:10px; width:34px !important; height:34px !important; padding:0; border-radius:50%; border:0; background:rgba(0,0,0,.06); color:#111; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .dp-leave-x:hover{ background:rgba(0,0,0,.1); }
    .dp-leave-icon{ width:64px; height:64px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:32px; background:linear-gradient(135deg, rgba(245,185,63,.22), rgba(255,90,31,.12)); }
    .dp-leave.is-incomplete .dp-leave-icon{ background:linear-gradient(135deg, rgba(239,68,68,.16), rgba(245,158,11,.14)); }
    .dp-leave-title{ font-size:20px; font-weight:800; line-height:1.35; margin:0 0 6px; color:#111; }
    .dp-leave-title b{ color:#d9822b; white-space:nowrap; }   /* no "Card!" orphan on the next line */
    .dp-leave-sub{ font-size:13.5px; color:#5d5e65; font-weight:600; margin:0 0 14px; line-height:1.6; }
    .dp-leave-ok{ color:#16a34a; font-weight:800; display:block; margin-top:4px; }   /* the ✓ line never breaks mid-phrase */
    .dp-leave-saved{ display:none; margin:0 0 14px; padding:9px 12px; border-radius:10px; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); font-size:13px; font-weight:700; color:#065f46; }
    .dp-leave.is-incomplete .dp-leave-saved{ display:block; }
    .dp-leave-coupon{ margin:4px 0 14px; padding:12px 14px; border-radius:14px; background:#f7f8fa; border:1px dashed rgba(0,0,0,.18); }
    .dp-leave-coupon-label{ font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#5d5e65; margin-bottom:6px; }
    .dp-leave-coupon-row{ display:flex; align-items:center; justify-content:center; gap:8px; }
    .dp-leave-code{ font-family:Inter, Rajdhani, monospace; font-size:20px; font-weight:800; letter-spacing:.08em; color:#111; background:#fff; border:1px solid rgba(0,0,0,.12); padding:7px 12px; border-radius:10px; }
    .dp-leave-copy{ width:auto !important; height:auto !important; border:0; border-radius:10px; padding:9px 12px; font-weight:800; font-size:13px; background:#111; color:#fff; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
    .dp-leave-coupon-note{ font-size:12px; color:#5d5e65; margin-top:8px; font-weight:600; }
    .dp-leave-cta{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:auto !important; border:0; border-radius:12px; padding:14px 18px; font-size:16px; font-weight:800; background:var(--order-btn-bg, #f50000); color:var(--order-btn-text, #fff); cursor:pointer; text-decoration:none !important; }
    .dp-leave-later{ display:block; width:100%; height:auto !important; margin-top:8px; padding:10px; border:0; background:none; color:#5d5e65; font-weight:700; font-size:13px; text-decoration:underline; cursor:pointer; }
    .dp-leave-later:hover{ color:#111; }
    .dp-pulse{ animation:dpPulse 1.6s ease-out; }
    @keyframes dpPulse{ 0%{ box-shadow:0 0 0 0 rgba(245,0,0,.55); } 100%{ box-shadow:0 0 0 18px rgba(245,0,0,0); } }
    @media (max-width: 575.98px){ .dp-leave{ padding:14px; } .dp-leave-card{ padding:26px 18px 18px; } .dp-leave-title{ font-size:19px; } .dp-leave-sub{ font-size:13px; } }
    /* Floating widgets (BizChat bubble + hint, contact FAB) sit above everything; hide them while the offer is open. */
    body.dp-leave-open #bz-btn, body.dp-leave-open #bz-hint, body.dp-leave-open #bz-panel, body.dp-leave-open #pfabMenu{ visibility:hidden !important; }
    /* Owner: hovering the popup turned text red — the theme's global a:hover / button:hover colour rules reached
       inside. Pin every text colour in the card on hover too. */
    .dp-leave-card, .dp-leave-card:hover, .dp-leave-card *:hover{ color:inherit; }
    .dp-leave-title, .dp-leave-title:hover{ color:#111 !important; }
    .dp-leave-title b, .dp-leave-title b:hover{ color:#d9822b !important; }
    .dp-leave-sub, .dp-leave-sub:hover, .dp-leave-coupon-note, .dp-leave-coupon-note:hover, .dp-leave-coupon-label, .dp-leave-coupon-label:hover{ color:#5d5e65 !important; }
    .dp-leave-ok, .dp-leave-ok:hover{ color:#16a34a !important; }
    .dp-leave-saved, .dp-leave-saved:hover{ color:#065f46 !important; }
    .dp-leave-code, .dp-leave-code:hover{ color:#111 !important; }
    .dp-leave-cta, .dp-leave-cta:hover, .dp-leave-cta:focus, .dp-leave-cta:active{ color:var(--order-btn-text, #fff) !important; background:var(--order-btn-bg, #f50000) !important; opacity:1; filter:brightness(1.04); }
    .dp-leave-cta:not(:hover){ filter:none; }
    .dp-leave-copy, .dp-leave-copy:hover{ color:#fff !important; background:#111 !important; }
    .dp-leave-later{ color:#5d5e65 !important; }
    .dp-leave-later:hover{ color:#111 !important; }
    .dp-leave-x, .dp-leave-x:hover{ color:#111 !important; }

/* ===== app.blade.php: BizChat bubble vs floating stack ===== */
    /* Keep the chat bubble clear of the site's own floating stack by lifting the
       stack above it. On phones also: drop the scroll-to-top (a bottom dock
       already exists), shrink the chat bubble to the same 42px as the other
       buttons, and line it up as the bottom of that same right-hand column. */
    .premium-float-stack { bottom: 96px !important; }
    @media (max-width: 768px) {
        .premium-float-stack { bottom: 136px !important; }
        .premium-scroll-top  { display: none !important; }
        #bz-btn { width: 42px !important; height: 42px !important; }
        #bz-btn svg, #bz-btn img { width: 22px !important; height: 22px !important; }
    }

    /* A small "can I help?" nudge so visitors realise the bubble is a live chat. */
    #bz-hint {
        position: fixed; z-index: 2147482999;
        right: 90px; bottom: 30px;
        background: #fff; color: #0c2d48;
        font-family: "Hind Siliguri","Segoe UI",system-ui,sans-serif;
        font-size: 13.5px; font-weight: 600; line-height: 1;
        padding: 10px 15px; border-radius: 22px;
        box-shadow: 0 10px 26px rgba(0,0,0,.18); border: 1px solid #eef0f6;
        cursor: pointer; white-space: nowrap;
        opacity: 0; pointer-events: none; transition: opacity .35s ease;
    }
    #bz-hint.show { opacity: 1; pointer-events: auto; animation: bzHintBob 2.4s ease-in-out infinite; }
    @keyframes bzHintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    @media (max-width: 768px) {
        #bz-hint { right: 56px; bottom: 90px; font-size: 12.5px; padding: 8px 13px; }
    }

    /* Chat panel header: the widget's close button renders ~212px wide, which
       squeezes the title into ~85px and wraps "DK Gadget's Hub" onto two lines.
       Pin the × to a small 28px box (it still sits on the right via its own
       margin-left:auto) so the shop name shows on one clean line. */
    #bz-head #bz-close { flex: 0 0 auto !important; width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; padding: 0 !important; }
    #bz-head .bz-name { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    #bz-head .bz-status { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

/* ===== Owner (2026-10-28 night): on phones the footer shows Categories | Support | Get In Touch as THREE columns
   in one row (Get In Touch used to drop below as a full-width block), so the footer takes far less height. ===== */
@media (max-width: 575.98px){
    .footer-modern .footer-col.col-6,
    .footer-modern .footer-col.stay-connected-block{ padding-left: 6px; padding-right: 6px; }
    .footer-modern .footer-col.col-6{ flex: 0 0 28%; max-width: 28%; }
    .footer-modern .footer-col.stay-connected-block{ flex: 0 0 44%; max-width: 44%; margin-top: 0; }
    .footer-modern .footer-link-list li{ margin-bottom: 7px; }
    .footer-modern .footer-link-list li a{ font-size: 11.5px; line-height: 1.35; display: inline-block; }
    .footer-modern .stay-connected-block .footer-contact-list{ list-style: none; margin: 0 0 10px; padding: 0; }
    .footer-modern .stay-connected-block .footer-contact-list li{ display: flex; align-items: flex-start; gap: 6px; margin: 0 0 7px; font-size: 11px; line-height: 1.4; }
    .footer-modern .stay-connected-block .footer-contact-list li .ic{ flex: 0 0 auto; width: auto; height: auto; font-size: 10.5px; margin-top: 2px; background: none; }
    .footer-modern .stay-connected-block .footer-contact-list li a,
    .footer-modern .stay-connected-block .footer-contact-list li .txt{ font-size: 11px; overflow-wrap: anywhere; word-break: break-word; }
    .footer-modern .stay-connected-block .footer-wa-cta{ display: flex; width: 100%; justify-content: center; align-items: center; gap: 5px; padding: 7px 6px; font-size: 11px; border-radius: 8px; margin: 0 0 10px; white-space: nowrap; }
    .footer-modern .stay-connected-block .footer-pay-row{ display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
    .footer-modern .stay-connected-block .footer-pay-chip{ font-size: 9.5px; padding: 3px 6px; line-height: 1.3; }
}
@media (max-width: 575.98px){
    /* the three phone columns start on the same line */
    .footer-modern .footer-col.col-6,
    .footer-modern .footer-col.stay-connected-block{ margin-top: 0; padding-top: 0; margin-bottom: 0; }
    .footer-modern .footer-col.stay-connected-block .footer-col-title,
    .footer-modern .footer-col.col-6 .footer-col-title{ margin-top: 0; }
}

/* ===== Owner (2026-10-28 night): the copyright row no longer leaves a big empty band above the bottom nav.
   On phones the contact FAB now sits BESIDE the chat bubble (same height) instead of above it, the chat hint
   pill moves above the bubble (and hides near the footer, see site.js), so the copyright only has to clear
   one row of buttons: nav 78px + bubble row ~64px. ===== */
@media (max-width: 575.98px){
    /* owner (later the same night): the headset FAB stays ABOVE the chat bubble on phones (theme rule: bottom 136px),
       so the copyright row clears FAB + bubble: 136 + 42 + 8 - 78 (body padding for the nav) = 108px */
    .footer-modern .footer-copy-row{ padding-bottom: 108px !important; }
}

/* ===== Owner (2026-10-28 night): on phones/small tablets the brand block is full width, so the logo,
   the tagline and the social icons sit centred instead of hugging the left edge. ===== */
@media (max-width: 767.98px){
    .footer-modern .footer-brand-block{ text-align: center; }
    .footer-modern .footer-brand-block .footer-logo-wrap{ display: inline-flex; margin-left: auto; margin-right: auto; }
    .footer-modern .footer-brand-block .sc-tagline{ text-align: center; margin-left: auto; margin-right: auto; }
    .footer-modern .footer-brand-block .footer-social-list{ display: flex; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 767.98px){
    /* owner: breathing room above and below the social icons on phones */
    .footer-modern .footer-brand-block .sc-tagline{ margin-bottom: 14px; }
    .footer-modern .footer-brand-block .footer-social-list{ margin: 14px auto 24px; }
    .footer-modern .footer-brand-block{ margin-bottom: 6px; }
}

/* ===== Owner (2026-10-28, late): product cards on phones were narrow with big side gaps and the two cards'
   buttons sat at different heights. Wider cards, smaller gutters, body stretches so the Add / Buy Now row is
   bottom-aligned and equal in every card. ===== */
@media (max-width: 575.98px){
    .tn-flash{ padding-left: 8px !important; padding-right: 8px !important; }
    .tn-container .tn-grid{ gap: 8px !important; }
    .tn-card{ display: flex; flex-direction: column; height: 100%; }
    .tn-card-body{ display: flex; flex-direction: column; flex: 1 1 auto; padding: 10px 9px 11px !important; }
    .tn-card-actions{ margin-top: auto !important; padding-top: 10px !important; gap: 6px !important; }
    .tn-card-actions .tn-btn{ flex: 1 1 0 !important; min-width: 0; justify-content: center; padding: 10px 4px !important; font-size: 11.5px !important; }
}

/* ===== Home page popup (Admin → Home Popup; owner 2026-10-28). Only the home page renders #dkHomePopup. ===== */
.dk-hp{ position:fixed; inset:0; z-index:2147483002; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(10,12,18,.62); opacity:0; transition:opacity .25s ease; }
.dk-hp[hidden]{ display:none !important; }
.dk-hp.is-open{ opacity:1; }
.dk-hp-card{ position:relative; width:100%; max-width:420px; max-height:calc(100vh - 32px); overflow-y:auto; background:#fff; color:#111; border-radius:18px; box-shadow:0 24px 60px -12px rgba(0,0,0,.45); transform:translateY(14px) scale(.98); transition:transform .25s ease; }
.dk-hp.is-open .dk-hp-card{ transform:none; }
.dk-hp-x, .dk-hp-x:hover, .dk-hp-x:focus{ position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.94); color:#111 !important; font-size:22px; line-height:34px; text-align:center; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.2); }
.dk-hp-img{ display:block; }
.dk-hp-img img{ display:block; width:100%; height:auto; max-height:62vh; object-fit:contain; background:#f3f4f6; }
.dk-hp-body{ padding:16px 18px 18px; text-align:center; }
.dk-hp-noimg .dk-hp-body{ padding-top:48px; }
.dk-hp-body h3{ margin:0 0 6px; font-size:19px; font-weight:800; line-height:1.3; color:#111; }
.dk-hp-body p{ margin:0 0 14px; font-size:14px; line-height:1.55; color:#4b5563; }
.dk-hp-actions{ display:flex; flex-direction:column; gap:8px; }
.dk-hp-btn{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border-radius:12px; font-size:14.5px; font-weight:700; text-decoration:none !important; }
.dk-hp-go, .dk-hp-go:hover, .dk-hp-go:focus{ background:var(--order-btn-bg, #e11d2e); color:var(--order-btn-text, #fff) !important; }
.dk-hp-wa, .dk-hp-wa:hover, .dk-hp-wa:focus{ background:#25D366; color:#fff !important; }
.dk-hp-wa i{ font-size:18px; }
body.dk-hp-open #bz-btn, body.dk-hp-open #bz-hint, body.dk-hp-open #bz-panel, body.dk-hp-open #pfabMenu{ visibility:hidden !important; }
@media (max-width: 575.98px){
    .dk-hp-card{ max-width:340px; border-radius:16px; }
    .dk-hp-body h3{ font-size:17px; }
    .dk-hp-body p{ font-size:13.5px; }
}