/* ===================== Colourful shop theme ===================== */
:root {
    --c-blue: #2874f0;
    --c-purple: #7b2ff7;
    --c-pink: #f107a3;
    --c-orange: #ff6b00;
    --c-yellow: #ffd60a;
    --c-green: #00a65a;
    --c-text: #1d1d2c;
    --c-muted: #8a8aa0;
    --c-bg: #f4f2fb;
    --radius: 18px;
    --grad-main: linear-gradient(120deg, #2874f0 0%, #7b2ff7 55%, #f107a3 100%);
    --grad-buy: linear-gradient(135deg, #ff9a00 0%, #ff3d00 100%);
    --grad-cart: linear-gradient(135deg, #2874f0 0%, #7b2ff7 100%);
}
body {
    background: var(--c-bg);
    background-image: radial-gradient(circle at 10% 0%, #e9e2ff 0, transparent 40%), radial-gradient(circle at 90% 20%, #ffe3f3 0, transparent 35%);
    background-attachment: fixed;
    color: var(--c-text);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { text-decoration: none; }

/* ---------------- Header ---------------- */
.fk-header { position: sticky; top: 0; z-index: 1020; background: var(--grad-main); box-shadow: 0 6px 24px rgba(123, 47, 247, .25); }
.fk-top { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.fk-brand {
    background: var(--c-yellow); color: #2a1a6e; font-weight: 800; font-size: 1.2rem;
    padding: 9px 18px; border-radius: 14px; white-space: nowrap;
    box-shadow: 0 4px 0 #e0b800, 0 8px 18px rgba(0,0,0,.18); transition: transform .15s;
}
.fk-brand:hover { transform: translateY(-2px); color: #2a1a6e; }
.fk-search {
    flex: 1; display: flex; align-items: center; gap: 10px; background: #fff;
    border-radius: 14px; padding: 0 16px; height: 46px; box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.fk-search i { color: var(--c-purple); font-size: 1.1rem; }
.fk-search input { border: 0; outline: 0; width: 100%; font-size: .95rem; background: transparent; }
.fk-actions { display: flex; align-items: center; gap: 6px; }
.fk-act { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; padding: 8px 12px; border-radius: 12px; position: relative; white-space: nowrap; }
.fk-act:hover { background: rgba(255,255,255,.18); color: #fff; }
.fk-act i { font-size: 1.3rem; }
.fk-cart-badge { position: absolute; top: 0; left: 24px; background: var(--c-yellow); color: #2a1a6e; font-size: .68rem; font-weight: 800; border-radius: 10px; padding: 1px 6px; }

/* Category strip — colourful round icons */
.fk-cats-wrap { background: #fff; border-bottom: 1px solid #ece8f7; }
.fk-cats { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 12px 0 10px; }
.fk-cats::-webkit-scrollbar { display: none; }
.fk-cat { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 76px; color: var(--c-text); font-size: .82rem; font-weight: 600; }
.fk-cat .ico {
    width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.45rem; box-shadow: 0 6px 14px rgba(0,0,0,.15); transition: transform .2s;
}
.fk-cat:hover .ico { transform: translateY(-3px) scale(1.06); }
.fk-cat.active { color: var(--c-purple); }
.fk-cat.active .ico { outline: 3px solid #fff; box-shadow: 0 0 0 5px var(--c-purple), 0 6px 14px rgba(0,0,0,.2); }
.g0 { background: linear-gradient(135deg, #ff9a00, #ff3d00); }
.g1 { background: linear-gradient(135deg, #2874f0, #00c6ff); }
.g2 { background: linear-gradient(135deg, #f107a3, #7b2ff7); }
.g3 { background: linear-gradient(135deg, #00b09b, #96c93d); }
.g4 { background: linear-gradient(135deg, #ff5f6d, #ffc371); }
.g5 { background: linear-gradient(135deg, #8e2de2, #4a00e0); }
.g6 { background: linear-gradient(135deg, #11998e, #38ef7d); }
.g7 { background: linear-gradient(135deg, #fc466b, #3f5efb); }

@media (max-width: 767px) {
    .fk-top { flex-wrap: wrap; gap: 8px; }
    .fk-search { order: 3; flex-basis: 100%; height: 42px; }
    .fk-act span { display: none; }
    .fk-brand { font-size: 1rem; padding: 7px 12px; }
    .fk-cat { min-width: 64px; } .fk-cat .ico { width: 46px; height: 46px; font-size: 1.2rem; }
}

/* ---------------- Banner carousel ---------------- */
.fk-banner { border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 30px rgba(123,47,247,.18); }
.fk-banner img { width: 100%; height: 300px; object-fit: cover; }
@media (max-width: 767px) { .fk-banner img { height: 160px; } }
.fk-banner .carousel-indicators [data-bs-target] { width: 9px; height: 9px; border-radius: 50%; }

/* Fallback promo hero (jab banner upload na ho) */
.hero { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.hero > div { border-radius: var(--radius); color: #fff; padding: 26px; position: relative; overflow: hidden; min-height: 210px; box-shadow: 0 12px 28px rgba(0,0,0,.15); }
.hero > div::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.15); }
.hero .main { background: linear-gradient(120deg, #7b2ff7 0%, #f107a3 100%); }
.hero .t2 { background: linear-gradient(135deg, #ff9a00, #ff3d00); }
.hero .t3 { background: linear-gradient(135deg, #00b09b, #2874f0); }
.hero .tag { display: inline-block; background: var(--c-yellow); color: #2a1a6e; font-weight: 800; font-size: .72rem; padding: 4px 10px; border-radius: 20px; letter-spacing: .5px; }
.hero h2 { font-weight: 900; font-size: 2.3rem; line-height: 1.05; margin: 12px 0 6px; }
.hero h4 { font-weight: 800; margin: 10px 0 4px; }
.hero p { opacity: .92; margin: 0 0 14px; }
.hero .cta { background: #fff; color: var(--c-purple); font-weight: 700; border-radius: 30px; padding: 8px 20px; display: inline-block; position: relative; z-index: 1; }
.hero .big-ico { position: absolute; right: 22px; top: 22px; font-size: 3.6rem; opacity: .35; }
@media (max-width: 991px) { .hero { grid-template-columns: 1fr 1fr; } .hero .main { grid-column: 1 / -1; } }
@media (max-width: 575px) { .hero h2 { font-size: 1.7rem; } .hero > div { min-height: 160px; padding: 20px; } }

/* ---------------- Sections ---------------- */
.fk-section { background: #fff; border-radius: var(--radius); padding: 0 0 16px; margin-top: 20px; overflow: hidden; box-shadow: 0 8px 26px rgba(40, 20, 120, .08); }
.fk-section-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; color: #fff; margin-bottom: 16px; }
.fk-section-head h5 { margin: 0; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.fk-section-head a { font-size: .85rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.22); padding: 6px 14px; border-radius: 20px; }
.fk-section-head a:hover { background: rgba(255,255,255,.35); }
.sh0 { background: linear-gradient(90deg, #7b2ff7, #f107a3); }
.sh1 { background: linear-gradient(90deg, #ff6b00, #ffb300); }
.sh2 { background: linear-gradient(90deg, #2874f0, #00c6ff); }
.sh3 { background: linear-gradient(90deg, #00a65a, #8bd346); }
.sh4 { background: linear-gradient(90deg, #fc466b, #3f5efb); }
.fk-row, .fk-grid { padding: 0 20px; }
.fk-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.fk-row::-webkit-scrollbar { height: 6px; }
.fk-row::-webkit-scrollbar-thumb { background: #d6ccf5; border-radius: 6px; }
.fk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

/* ---------------- Product card ---------------- */
.fk-card {
    background: #fff; border: 1px solid #efeaf9; border-radius: 16px; overflow: hidden;
    width: 200px; min-width: 200px; scroll-snap-align: start; position: relative;
    display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.fk-grid .fk-card { width: auto; min-width: 0; }
.fk-card:hover { box-shadow: 0 14px 30px rgba(123,47,247,.18); transform: translateY(-4px); border-color: #d9c9ff; }
.fk-card .img { height: 185px; background: linear-gradient(180deg, #faf8ff, #f1ecff); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fk-card .img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .3s; }
.fk-card:hover .img img { transform: scale(1.06); }
.fk-card .img i { font-size: 3rem; color: #cbbdf2; }
.fk-card .off { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--grad-buy); color: #fff; font-size: .74rem; font-weight: 800; padding: 4px 9px; border-radius: 20px; box-shadow: 0 4px 10px rgba(255,61,0,.35); }
.fk-card .oos { position: absolute; top: 10px; right: 10px; z-index: 1; background: #3b3b4f; color: #fff; font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 20px; }
.fk-card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.fk-card .name { color: var(--c-text); font-size: .92rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.fk-card .name:hover { color: var(--c-purple); }
.fk-card .cat { align-self: flex-start; color: var(--c-purple); background: #f1eaff; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.fk-card .price { font-weight: 800; font-size: 1.08rem; margin-top: 4px; }
.fk-card .price small { color: var(--c-muted); font-weight: 400; font-size: .8rem; text-decoration: line-through; margin-left: 6px; }
.fk-card .price .pct { color: var(--c-green); font-size: .8rem; font-weight: 700; margin-left: 6px; }
.fk-card .btns { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; }
.fk-card .btns .btn { flex: 1; font-size: .8rem; padding: 7px 0; border-radius: 10px; font-weight: 700; }
.btn-fk { background: var(--grad-cart); color: #fff; border: 0; box-shadow: 0 4px 12px rgba(40,116,240,.3); }
.btn-fk:hover { color: #fff; filter: brightness(1.08); }
.btn-fk-buy { background: var(--grad-buy); color: #fff; border: 0; box-shadow: 0 4px 12px rgba(255,61,0,.3); }
.btn-fk-buy:hover { color: #fff; filter: brightness(1.08); }

/* ---------------- Flash deal ---------------- */
.shflash { background: linear-gradient(90deg, #ff0844, #ff6b00, #ffb300); background-size: 200% 100%; animation: flashbg 4s ease infinite; }
@keyframes flashbg { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.shflash h5 i { animation: zap 1s ease-in-out infinite; }
@keyframes zap { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25) rotate(-10deg); } }
.flash-head-timer { background: #fff; color: #ff0844; font-weight: 700; font-size: .88rem; padding: 6px 14px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.flash-head-timer b { font-variant-numeric: tabular-nums; }
.flash-sec { box-shadow: 0 10px 30px rgba(255, 8, 68, .18); }
.fk-card.is-flash { border-color: #ffc2a8; }
.flash-tag { position: absolute; top: 152px; left: 10px; z-index: 1; background: linear-gradient(135deg, #ff0844, #ffb300); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .5px; padding: 3px 9px; border-radius: 20px; box-shadow: 0 4px 10px rgba(255,8,68,.35); }
.flash-timer { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 4px; background: #fff0eb; color: #e5361b; font-weight: 700; font-size: .78rem; padding: 3px 9px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.flash-box { background: linear-gradient(90deg, #ff0844, #ff6b00); color: #fff; border-radius: 14px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.flash-box .cd { background: #fff; color: #ff0844; font-weight: 800; padding: 4px 12px; border-radius: 10px; font-variant-numeric: tabular-nums; }

/* ---------------- Footer ---------------- */
.fk-footer { background: linear-gradient(120deg, #1b1240, #2a1a6e); color: #cfc8ef; font-size: .85rem; padding: 20px 0; margin-top: 34px; }
.fk-footer a { color: var(--c-yellow); }

/* ---------------- Generic (other pages) ---------------- */
.token-big { font-size: 5rem; font-weight: 800; line-height: 1; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.qr-box { background: #fff; padding: 16px; border-radius: 14px; display: inline-block; box-shadow: 0 6px 20px rgba(123,47,247,.15); }
.card { border-radius: 16px; border-color: #efeaf9; }
.step { display: flex; align-items: center; gap: .5rem; }
.step .dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: #c7c2d9; }
.step.done .dot { background: var(--c-green); } .step.active .dot { background: var(--c-purple); }
.step .line { flex: 1; height: 3px; background: #e2ddf0; } .step.done .line { background: var(--c-green); }
.no-img { display: flex; align-items: center; justify-content: center; background: #f1ecff; color: #cbbdf2; font-size: 3rem; }

/* ---------------- Display board (TV) ---------------- */
body.display-board { background: #0b1b33; color: #fff; }
.display-board .serving-token { font-size: 9rem; font-weight: 900; line-height: 1; color: #ffd43b; }
.display-board .waiting-token { font-size: 2.2rem; font-weight: 700; background: #1c3b6b; border-radius: 12px; padding: .5rem 1rem; display: inline-block; margin: .3rem; }
.display-board .done-token { font-size: 1.4rem; background: #243b55; border-radius: 8px; padding: .3rem .8rem; display: inline-block; margin: .2rem; opacity: .8; }