/* ══ DesiPrice — Spice Market Luxe Design System ══ */

:root {
    --saffron: #e8850c;
    --saffron-deep: #c56a00;
    --saffron-glow: #ffa726;
    --saffron-mist: rgba(232,133,12,0.08);
    --cardamom: #2e7d32;
    --cardamom-mist: rgba(46,125,50,0.08);
    --chili: #c62828;
    --chili-mist: rgba(198,40,40,0.06);
    --sky: #1565c0;
    --sky-mist: rgba(21,101,192,0.07);
    --plum: #6a1b9a;
    --plum-mist: rgba(106,27,154,0.07);
    --teal: #00897b;
    --turmeric: #f9a825;
    --ink: #1a1a1a;
    --slate: #4a4a4a;
    --ash: #6b6b6b;
    --mist: #9e9e9e;
    --cloud: #e8e8e8;
    --fog: #f3f2f0;
    --parchment: #faf9f7;
    --white: #ffffff;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    --card-shadow-hover: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
    --card-radius: 10px;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--fog); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--sky); }

/* ── Ticker ─────────────────────── */
.ticker-wrap { background: linear-gradient(90deg, #0d1117, #161b22, #0d1117); color: #c9d1d9; padding: 7px 0; overflow: hidden; font-family: var(--font-display); font-size: 0.74rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ticker { display: flex; white-space: nowrap; }
.ticker:hover { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 1.4rem; border-right: 1px solid rgba(255,255,255,0.08); }
.ticker-item .label { color: #8b949e; font-weight: 500; }
.ticker-item .value { font-weight: 700; color: #f0f6fc; }
.ticker-item .change { font-weight: 600; font-size: 0.68rem; }
.up { color: #3fb950; }
.down { color: #f85149; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── Header ─────────────────────── */
.header { background: linear-gradient(135deg, #1a1a2e 0%, #2d1810 40%, #4a1c0a 70%, var(--saffron-deep) 100%); color: white; padding: 1.6rem 1.2rem 1.2rem; text-align: center; position: relative; overflow: hidden; }
.header::before { content: ''; position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(232,133,12,0.15) 0%, transparent 70%); pointer-events: none; }
.header h1 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; position: relative; }
.header p { opacity: 0.8; font-size: 0.82rem; position: relative; }
.stats-bar { display: flex; justify-content: center; gap: 1.8rem; margin-top: 0.6rem; font-size: 0.72rem; opacity: 0.7; position: relative; font-family: var(--font-display); }
.stats-bar b { font-size: 1.05rem; font-weight: 700; }

/* ── Location Selector ─────────── */
.loc-selector { display: flex; justify-content: center; gap: 8px; padding: 0.6rem 1rem; background: var(--parchment); border-bottom: 1px solid var(--cloud); flex-wrap: wrap; }
.loc-pill { padding: 6px 18px; border: 1.5px solid var(--cloud); border-radius: 100px; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; cursor: pointer; background: var(--white); transition: all 0.25s var(--ease-out); text-decoration: none; color: var(--ink); }
.loc-pill:hover { border-color: var(--saffron); color: var(--saffron); transform: translateY(-1px); }
.loc-pill.active { border-color: var(--saffron); background: linear-gradient(135deg, var(--saffron), var(--saffron-deep)); color: white; box-shadow: 0 2px 12px rgba(232,133,12,0.25); }

/* ── Layout ─────────────────────── */
.main-layout { display: flex; max-width: 1340px; margin: 0 auto; }
.sidebar { width: 290px; min-width: 290px; padding: 0.75rem; background: var(--parchment); border-right: 1px solid var(--cloud); max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: thin; }
.content-area { flex: 1; padding: 0.75rem 1rem; min-width: 0; }

/* ── Sidebar ────────────────────── */
.sidebar-section { margin-bottom: 1rem; }
.sidebar-title { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; color: var(--ash); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.35rem 0; margin-bottom: 0.4rem; border-bottom: 1px solid var(--cloud); }
.see-all { display: block; text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--saffron); margin-top: 0.3rem; text-decoration: none; }

.market-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.market-card { padding: 0.5rem; background: var(--white); border: 1px solid var(--cloud); border-radius: 8px; text-align: center; transition: all 0.2s var(--ease-out); }
.market-card:hover { border-color: var(--saffron); transform: translateY(-1px); }
.market-card .m-label { font-size: 0.6rem; color: var(--mist); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-display); }
.market-card .m-value { font-size: 0.92rem; font-weight: 700; font-family: var(--font-display); }
.market-card .m-change { font-size: 0.65rem; font-weight: 600; font-family: var(--font-display); }

.news-card { padding: 0.5rem 0.6rem; background: var(--white); border: 1px solid var(--cloud); border-radius: 8px; margin-bottom: 5px; font-size: 0.74rem; line-height: 1.4; transition: all 0.2s var(--ease-out); }
.news-card:hover { border-color: var(--saffron-glow); box-shadow: var(--card-shadow); }
.news-tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; font-family: var(--font-display); }
.news-tag-deal { background: var(--cardamom-mist); color: var(--cardamom); }
.news-tag-event { background: var(--plum-mist); color: var(--plum); }
.news-tag-social { background: var(--sky-mist); color: var(--sky); }
.news-tag-news { background: var(--saffron-mist); color: var(--saffron-deep); }
.news-loc { font-size: 0.6rem; color: var(--teal); font-weight: 600; font-family: var(--font-display); }

.remit-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.6rem; background: var(--white); border: 1px solid var(--cloud); border-radius: 8px; margin-bottom: 4px; font-size: 0.74rem; transition: all 0.2s var(--ease-out); }
.remit-row:hover { border-color: var(--cardamom); }
.remit-name { font-weight: 600; font-family: var(--font-display); }
.remit-rate { font-weight: 700; color: var(--cardamom); font-family: var(--font-display); font-size: 0.82rem; text-decoration: none; }

.flight-card { padding: 0.5rem 0.6rem; background: var(--white); border: 1px solid var(--cloud); border-radius: 8px; margin-bottom: 5px; font-size: 0.74rem; transition: all 0.2s var(--ease-out); }
.flight-card:hover { border-color: var(--sky); }
.flight-route { font-family: var(--font-display); font-weight: 700; font-size: 0.76rem; }
.flight-price { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--cardamom); text-decoration: none; }
.flight-airline { font-size: 0.65rem; color: var(--ash); }

.community-card { padding: 0.5rem 0.6rem; background: var(--white); border: 1px solid var(--cloud); border-radius: 8px; margin-bottom: 5px; font-size: 0.72rem; }
.comm-quote { font-style: italic; color: var(--slate); border-left: 2px solid var(--saffron); padding-left: 0.5rem; margin-bottom: 4px; }
.comm-source { font-size: 0.6rem; color: var(--sky); font-family: var(--font-display); }
.comm-votes { font-size: 0.6rem; color: var(--cardamom); font-weight: 700; font-family: var(--font-display); }

.gas-card { padding: 0.4rem 0.6rem; background: var(--white); border: 1px solid var(--cloud); border-radius: 6px; margin-bottom: 4px; }

/* ── Report Form ────────────────── */
.report-form input, .report-form select { padding: 6px 10px; border: 1px solid var(--cloud); border-radius: 6px; font-size: 0.75rem; font-family: var(--font-body); margin-bottom: 4px; width: 100%; }
.report-form button { width: 100%; padding: 8px; background: var(--saffron); color: white; border: none; border-radius: 6px; font-weight: 600; font-family: var(--font-display); cursor: pointer; font-size: 0.78rem; }

/* ── Search ─────────────────────── */
.search-box { background: var(--white); border-radius: 14px; padding: 1rem 1.2rem; margin: 0 auto; max-width: 660px; box-shadow: var(--card-shadow); border: 1px solid var(--cloud); }
.search-row { display: flex; gap: 0.5rem; }
.search-row input { flex: 1; padding: 0.65rem 0.9rem; border: 1.5px solid var(--cloud); border-radius: 10px; font-size: 0.9rem; font-family: var(--font-body); outline: none; background: var(--fog); transition: all 0.2s var(--ease-out); }
.search-row input:focus { border-color: var(--saffron); background: var(--white); box-shadow: 0 0 0 3px var(--saffron-mist); }
.search-row button { padding: 0.65rem 1.2rem; background: linear-gradient(135deg, var(--saffron), var(--saffron-deep)); color: white; border: none; border-radius: 10px; font-size: 0.88rem; font-family: var(--font-display); font-weight: 600; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.5rem; }
.chip { padding: 3px 10px; background: var(--fog); border-radius: 100px; font-size: 0.72rem; font-weight: 500; cursor: pointer; border: 1px solid var(--cloud); color: var(--ash); text-decoration: none; transition: all 0.15s var(--ease-out); }
.chip:hover { background: var(--saffron-mist); color: var(--saffron-deep); border-color: var(--saffron-glow); }

/* ── Navigation ─────────────────── */
.nav-sections { display: flex; gap: 5px; margin-bottom: 0.75rem; overflow-x: auto; scrollbar-width: none; }
.nav-sections::-webkit-scrollbar { display: none; }
.nav-sec { padding: 0.45rem 0.7rem; border: 1.5px solid var(--cloud); border-radius: var(--card-radius); font-size: 0.78rem; font-weight: 600; cursor: pointer; background: var(--white); white-space: nowrap; text-align: center; min-width: 72px; font-family: var(--font-display); transition: all 0.2s var(--ease-out); text-decoration: none; color: var(--ink); }
.nav-sec:hover { border-color: var(--saffron-glow); transform: translateY(-1px); }
.nav-sec.active { border-color: var(--saffron); background: var(--saffron-mist); color: var(--saffron-deep); }
.nav-sec .nav-emoji { display: block; font-size: 1.2rem; margin-bottom: 1px; }
.nav-sec .nav-count { font-size: 0.6rem; color: var(--mist); font-weight: 500; display: block; }

/* ── Product Grid ───────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 7px; }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.gcard { background: var(--white); border: 1px solid var(--cloud); border-radius: var(--card-radius); padding: 0.65rem 0.75rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: inherit; text-decoration: none; transition: all 0.25s var(--ease-out); animation: cardIn 0.35s var(--ease-out) both; }
.gcard:hover { border-color: var(--saffron-glow); box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.gcard .left { display: flex; align-items: center; gap: 0.6rem; }
.gcard .thumb { font-size: 1.5rem; }
.gcard .pn { font-weight: 600; text-transform: capitalize; font-size: 0.84rem; font-family: var(--font-display); }
.gcard .cat-label { font-size: 0.65rem; color: var(--mist); }
.gcard .ri { text-align: right; }
.gcard .ri .pr { font-weight: 700; font-size: 1rem; font-family: var(--font-display); }
.gcard .ri .sv { font-size: 0.64rem; color: var(--ash); }

/* ── Price Detail ───────────────── */
.section { background: var(--white); border-radius: var(--card-radius); padding: 1.1rem; margin-bottom: 0.75rem; box-shadow: var(--card-shadow); border: 1px solid var(--cloud); }
.result-title { font-size: 1.2rem; font-weight: 700; text-transform: capitalize; font-family: var(--font-display); letter-spacing: -0.02em; margin-bottom: 0.15rem; }
.result-aliases { font-size: 0.72rem; color: var(--mist); margin-bottom: 0.5rem; }
.winner { background: var(--cardamom-mist); border-left: 3px solid var(--cardamom); border-radius: 6px; padding: 0.55rem 0.8rem; margin-bottom: 0.6rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.84rem; }
.winner .name { font-weight: 700; color: var(--cardamom); font-family: var(--font-display); }
.save-badge { background: var(--cardamom); color: white; padding: 3px 10px; border-radius: 100px; font-size: 0.68rem; font-weight: 700; font-family: var(--font-display); }
.card-list { display: flex; flex-direction: column; gap: 5px; }
.pcard { display: grid; grid-template-columns: 1fr 85px 50px; gap: 6px; align-items: center; padding: 0.55rem 0.75rem; border: 1px solid var(--cloud); border-radius: 8px; background: var(--white); transition: all 0.2s var(--ease-out); }
.pcard:hover { border-color: var(--saffron-glow); }
.pcard.best { border: 1.5px solid var(--cardamom); background: var(--cardamom-mist); }
.pcard .sname { font-weight: 600; font-size: 0.82rem; font-family: var(--font-display); }
.pcard .raw { font-size: 0.68rem; color: var(--mist); }
.pcard .meta { display: flex; gap: 0.4rem; align-items: center; margin-top: 2px; font-size: 0.68rem; color: var(--ash); }
.pcard .amt { text-align: right; font-size: 1.15rem; font-weight: 700; font-family: var(--font-display); }
.pcard.best .amt { color: var(--cardamom); }
.pcard .unit { font-size: 0.65rem; color: var(--mist); text-align: right; }
.pcard .bar { height: 4px; border-radius: 2px; background: var(--saffron-glow); }
.pcard.best .bar { background: var(--cardamom); }
.badge { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 0.56rem; font-weight: 700; text-transform: uppercase; font-family: var(--font-display); }
.badge-g { background: var(--cardamom); color: white; }
.badge-r { background: var(--chili-mist); color: var(--chili); }
.stars { color: var(--turmeric); font-size: 0.76rem; }
.star-e { color: var(--cloud); }

/* ── Store Cards ────────────────── */
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); gap: 7px; }
.scard { background: var(--white); border: 1px solid var(--cloud); border-radius: var(--card-radius); padding: 0.75rem 0.85rem; transition: all 0.25s var(--ease-out); animation: cardIn 0.35s var(--ease-out) both; }
.scard:hover { border-color: var(--saffron-glow); box-shadow: var(--card-shadow-hover); transform: translateY(-1px); }
.scard h4 { font-size: 0.85rem; font-family: var(--font-display); font-weight: 700; }
.scard .addr { font-size: 0.7rem; color: var(--ash); margin-top: 2px; }
.scard .smeta { display: flex; justify-content: space-between; align-items: center; margin-top: 0.3rem; }
.scard .snippet { margin-top: 0.35rem; font-size: 0.7rem; color: var(--ash); font-style: italic; border-left: 2px solid var(--cloud); padding-left: 0.5rem; }
.scard .links { margin-top: 0.3rem; font-size: 0.7rem; }
.scard .links a { color: var(--sky); text-decoration: none; }

/* ── Home Hero ──────────────────── */
.home-hero { display: flex; max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; gap: 2rem; }
.hero-content { flex: 1; }
.hero-content h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.hero-content > p { color: var(--ash); font-size: 0.88rem; margin-bottom: 1.5rem; }
.home-sidebar { width: 320px; min-width: 280px; }
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.city-card { display: flex; flex-direction: column; align-items: center; padding: 1.2rem 0.8rem; background: var(--white); border: 1.5px solid var(--cloud); border-radius: 12px; text-decoration: none; color: var(--ink); transition: all 0.25s var(--ease-out); }
.city-card:hover { border-color: var(--saffron); box-shadow: var(--card-shadow-hover); transform: translateY(-3px); }
.city-emoji { font-size: 2rem; margin-bottom: 0.3rem; }
.city-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.city-full { font-size: 0.7rem; color: var(--mist); }

.feature-list { display: flex; flex-direction: column; gap: 6px; }
.feature-item { font-size: 0.78rem; padding: 0.4rem 0.6rem; background: var(--white); border: 1px solid var(--cloud); border-radius: 6px; }

/* ── Footer ─────────────────────── */
.footer { margin-top: 2rem; text-align: center; color: var(--mist); font-size: 0.68rem; padding: 1.5rem; font-family: var(--font-display); border-top: 1px solid var(--cloud); }
.footer a { color: var(--saffron); text-decoration: none; }
.footer-links { margin-top: 0.5rem; display: flex; justify-content: center; gap: 1.5rem; }

/* ── Responsive ─────────────────── */
@media (max-width: 900px) {
    .main-layout { flex-direction: column; }
    .sidebar { width: 100%; min-width: 0; max-height: none; border-right: none; border-bottom: 1px solid var(--cloud); display: flex; gap: 10px; overflow-x: auto; padding: 0.6rem; scrollbar-width: none; }
    .sidebar::-webkit-scrollbar { display: none; }
    .sidebar-section { min-width: 260px; flex-shrink: 0; }
    .home-hero { flex-direction: column; }
    .home-sidebar { width: 100%; min-width: 0; }
}
@media (max-width: 600px) {
    .search-row { flex-direction: column; }
    .header h1 { font-size: 1.4rem; }
    .grid { grid-template-columns: 1fr; }
    .city-grid { grid-template-columns: 1fr 1fr; }
    .pcard { grid-template-columns: 1fr 65px 35px; }
}