/* ================================================================
   MARKET STATS PAGE — PAGE-SPECIFIC STYLES
   Location: /home/kitchenbrand/public_html/T-Belle/styles/marketStats.css

   Requires global.css to be loaded first.
   This is a data dashboard page — class names are intentionally
   abbreviated for density. Do not rename them.

   Variable map (old → new):
     --gold / --gold-lt → var(--accent) / var(--accent-light) [global]
     --char             → var(--charcoal)                      [global]
     --blue             → var(--secondary)                     [global]
     --hdr              → var(--header-h)                      [global]
     --tr               → var(--trans)                         [global]
     --pine/pine-md/lt  → page tokens (forest green palette)
     --cream/stone/*    → page tokens (warm neutral palette)
     --green/--red      → page tokens (positive/negative indicators)
     --r                → page token (20px card radius, ≠ global --radius-xl)
     --sh/--shl         → page tokens (pine-tinted shadows)
     DM Sans            → var(--sans) = Jost [global]

   Header: global.css tiffany header applies — the blue header
   override that was in this file has been removed.
================================================================ */


/* ================================================================
   PAGE-SPECIFIC TOKENS
================================================================ */
:root {
    /* ── Forest pine (shared with sellers page) ─────────────── */
    --pine:    #1A3829;
    --pine-md: #244D38;
    --pine-lt: #2E6349;

    /* ── Warm neutrals ──────────────────────────────────────── */
    --cream:    #FAF7F2;
    --cream-dk: #F0EBE1;
    --stone:    #D6D0C4;
    --stone-dk: #9A9488;

    /* ── Deep dark ──────────────────────────────────────────── */
    --ink: #0E1210;

    /* ── Data indicators ────────────────────────────────────── */
    --green: #2E7D4F;   /* positive trend */
    --red:   #8B2635;   /* negative trend */

    /* ── Dashboard-specific sizing ──────────────────────────── */
    --r:   20px;                              /* card border-radius */
    --sh:  0 2px 14px rgba(26,56,41,.09);    /* card shadow */
    --shl: 0 8px 36px rgba(26,56,41,.15);    /* lifted shadow */
}


/* ================================================================
   BODY OVERRIDE
================================================================ */
body {
    background:  var(--cream);
    color:       var(--charcoal);
    overflow-x:  hidden;
}


/* ================================================================
   READING PROGRESS BAR
================================================================ */
#rp {
    position:       fixed;
    top:            0;
    left:           0;
    z-index:        2000;
    height:         3px;
    width:          0%;
    background:     linear-gradient(90deg, var(--pine), var(--accent));
    pointer-events: none;
}


/* ================================================================
   HERO
   Note: body padding-top (80px) already clears the fixed header.
   The internal padding on .hi handles the visual breathing room.
================================================================ */
.hero {
    background: linear-gradient(155deg, var(--pine) 0%, var(--pine-md) 65%, #1c3d28 100%);
    position:   relative;
    overflow:   hidden;
}
.hero::before {
    content:          '';
    position:         absolute;
    inset:            0;
    pointer-events:   none;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size:  56px 56px;
}
.hero::after {
    content:        '';
    position:       absolute;
    inset:          0;
    pointer-events: none;
    background:     radial-gradient(ellipse 65% 75% at 82% 25%, rgba(200,146,58,.11) 0%, transparent 60%);
}
.hi {
    position:   relative;
    z-index:    1;
    max-width:  1380px;
    margin:     0 auto;
    padding:    52px 72px 44px;
}
.ey {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    font-size:      10px;
    font-weight:    500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  14px;
}
.ey::before { content: ''; display: block; width: 26px; height: 1px; background: var(--accent); }

h1 {
    font-family:    var(--serif);
    font-size:      clamp(40px, 5vw, 66px);
    font-weight:    300;
    color:          var(--white);
    line-height:    .97;
    letter-spacing: -.01em;
    margin-bottom:  16px;
}
h1 em { font-style: italic; color: var(--accent-light); display: block; }

.hdesc {
    font-size:     14px;
    color:         rgba(255,255,255,.56);
    max-width:     500px;
    line-height:   1.78;
    margin-bottom: 24px;
}
.hmeta {
    display:     flex;
    align-items: center;
    gap:         22px;
    flex-wrap:   wrap;
    padding:     16px 0 0;
    border-top:  1px solid rgba(255,255,255,.08);
}
.hmi         { font-size: 11px; color: rgba(255,255,255,.45); display: flex; align-items: center; gap: 6px; }
.hmi strong  { color: var(--white); font-weight: 500; }
.ldot        { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.22); animation: pulse 2s infinite; }
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(74,222,128,.22); }
    50%     { box-shadow: 0 0 0 6px rgba(74,222,128,.08); }
}


/* ================================================================
   MARKET SELECTOR BAR
================================================================ */
.mbar    { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.07); padding: 16px 72px; }
.mbar-in { max-width: 1380px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mlbl    { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.26); flex-shrink: 0; }
.mtabs   { display: flex; gap: 5px; flex-wrap: wrap; }
.mtab {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    padding:     6px 15px;
    border-radius: 999px;
    font-size:   12px;
    border:      1px solid rgba(255,255,255,.10);
    color:       rgba(255,255,255,.48);
    transition:  all var(--trans);
    white-space: nowrap;
}
.mtab:hover  { border-color: rgba(255,255,255,.26); color: var(--white); background: rgba(255,255,255,.05); }
.mtab.on     { background: var(--accent); border-color: var(--accent); color: var(--white); font-weight: 500; }
.mdesc       { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.28); text-align: right; line-height: 1.4; }
.mdesc strong { color: var(--accent); font-weight: 500; display: block; }


/* ================================================================
   BREADCRUMB
================================================================ */
.bc     { background: var(--cream-dk); padding: 10px 72px; border-bottom: 1px solid var(--stone); }
.bc nav { max-width: 1380px; margin: 0 auto; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--stone-dk); }
.bc a:hover { color: var(--pine); }


/* ================================================================
   SNAPSHOT STRIP
================================================================ */
.sstrip { background: var(--cream); padding: 36px 72px 0; }
.sgrid  { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.sc     { background: var(--white); border-radius: var(--r); padding: 20px 18px; box-shadow: var(--sh); border-top: 3px solid var(--pine); }
.sc.tg  { border-top-color: var(--accent); }
.sc.tb  { border-top-color: var(--secondary); }
.slbl   { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone-dk); margin-bottom: 7px; }
.snum   { font-family: var(--serif); font-size: 36px; font-weight: 300; color: var(--charcoal); line-height: 1; }
.snum sup { font-size: 17px; color: var(--accent); }
.ssub   { font-size: 11px; color: var(--stone-dk); margin-top: 5px; line-height: 1.45; }
.cup    { color: var(--green); font-weight: 500; }
.cdn    { color: var(--red);   font-weight: 500; }
.cgo    { color: var(--accent); font-weight: 500; }


/* ================================================================
   SECTIONS
================================================================ */
.sec      { padding: 60px 72px; }
.sec.wh   { background: var(--white); }
.sec.cr   { background: var(--cream); }
.sec.cd   { background: var(--cream-dk); }
.sec.pi   { background: var(--pine); }
.sin      { max-width: 1380px; margin: 0 auto; }
.sey      { font-size: 10px; letter-spacing: .20em; text-transform: uppercase; font-weight: 500; margin-bottom: 6px; }
.sey.gd   { color: var(--accent); }
.sey.pn   { color: var(--pine); }

h2 {
    font-family:    var(--serif);
    font-size:      clamp(26px, 3vw, 40px);
    font-weight:    300;
    line-height:    1.06;
    letter-spacing: -.01em;
}
.ssub2 { font-size: 13px; color: var(--stone-dk); max-width: 480px; line-height: 1.78; margin-top: 7px; }


/* ================================================================
   CHART CARDS
================================================================ */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.g3 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-top: 16px; }
.cc {
    background:    var(--white);
    border-radius: var(--r);
    padding:       22px 20px;
    box-shadow:    var(--sh);
    border:        1px solid var(--stone);
}
.cc.dk { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.cch   { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.cct   { font-family: var(--serif); font-size: 19px; font-weight: 400; color: var(--charcoal); }
.cct.wh { color: var(--white); }
.ccs   { font-size: 11px; color: var(--stone-dk); margin-top: 2px; }
.ccs.wh { color: rgba(255,255,255,.40); }
.leg   { display: flex; gap: 10px; align-items: center; }
.ld    { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--stone-dk); }
.ldo   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
canvas           { max-height: 250px; width: 100% !important; }
canvas.tall      { max-height: 340px; }


/* ================================================================
   YEAR-OVER-YEAR TABLE
================================================================ */
.yw    { overflow-x: auto; margin-top: 24px; }
.yt    { width: 100%; border-collapse: collapse; font-size: 13px; }
.yt th { padding: 11px 14px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.38); border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
.yt th.c  { text-align: center; }
.yt th.hi { background: rgba(200,146,58,.10); color: var(--accent); border-radius: 6px 6px 0 0; border: 1px solid rgba(200,146,58,.16); border-bottom: none; }
.yt td    { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.70); }
.yt td.c  { text-align: center; }
.yt td.hi { background: rgba(200,146,58,.06); color: var(--white); font-weight: 500; text-align: center; border-left: 1px solid rgba(200,146,58,.12); border-right: 1px solid rgba(200,146,58,.12); }
.yt tr:last-child td.hi { border-radius: 0 0 6px 6px; }
.ml  { color: rgba(255,255,255,.46); font-size: 12px; }
.cu2 { color: #4ade80; font-size: 11px; font-weight: 500; }
.cd2 { color: #f87171; font-size: 11px; font-weight: 500; }


/* ================================================================
   BEDS / GENERAL TABLES
================================================================ */
.tw    { overflow-x: auto; margin-top: 14px; }
.t     { width: 100%; border-collapse: collapse; font-size: 13px; }
.t th  { padding: 9px 12px; font-size: 9px; letter-spacing: .10em; text-transform: uppercase; color: var(--stone-dk); border-bottom: 2px solid var(--stone); text-align: left; background: var(--cream); }
.t td  { padding: 11px 12px; border-bottom: 1px solid var(--stone); color: var(--charcoal); vertical-align: middle; }
.t tr:last-child td { border-bottom: none; }
.t tr:hover td      { background: var(--cream); }
.bc2   { width: 32px; height: 32px; border-radius: 50%; background: var(--pine); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 16px; font-weight: 300; flex-shrink: 0; }
.bf    { display: flex; align-items: center; gap: 9px; }


/* ================================================================
   CITY TABLE
================================================================ */
.cit    { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; }
.cit th { padding: 9px 12px; font-size: 9px; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.32); border-bottom: 1px solid rgba(255,255,255,.07); text-align: left; }
.cit td { padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.05); color: rgba(255,255,255,.72); vertical-align: middle; }
.cit tr:last-child td { border-bottom: none; }
.cit tr:hover td      { background: rgba(255,255,255,.04); }
.cbg {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       32px;
    height:          20px;
    padding:         0 8px;
    border-radius:   999px;
    font-size:       10px;
    font-weight:     600;
    background:      rgba(200,146,58,.13);
    color:           var(--accent);
    border:          1px solid rgba(200,146,58,.20);
}
.hb  { height: 4px; border-radius: 2px; background: var(--accent); opacity: .60; min-width: 3px; }
.st  { font-size: 10px; color: rgba(255,255,255,.28); margin-left: 4px; }


/* ================================================================
   MARKET HEALTH CARDS
================================================================ */
.hg  { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 24px; }
.hc  { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r); padding: 26px 22px; text-align: center; }
.hico { font-size: 28px; margin-bottom: 10px; }
.hnum { font-family: var(--serif); font-size: 48px; font-weight: 300; color: var(--white); line-height: 1; }
.hnum sup { font-size: 20px; color: var(--accent); }
.hlbl { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-top: 5px; }
.hdsc { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 9px; line-height: 1.70; }
.hpil { display: inline-flex; align-items: center; gap: 4px; margin-top: 11px; padding: 4px 12px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.ps   { background: rgba(200,146,58,.13); color: var(--accent); border: 1px solid rgba(200,146,58,.22); }
.pb   { background: rgba(27,79,114,.20);  color: #93c5fd;       border: 1px solid rgba(93,197,253,.16); }
.pn   { background: rgba(255,255,255,.07); color: rgba(255,255,255,.48); border: 1px solid rgba(255,255,255,.10); }


/* ================================================================
   PRICE RANGE BARS
================================================================ */
.prg { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.prr { display: grid; grid-template-columns: 125px 1fr 48px; align-items: center; gap: 9px; }
.prl { font-size: 12px; color: var(--stone-dk); }
.prt { background: var(--cream-dk); border-radius: 3px; height: 9px; overflow: hidden; }
.prf { height: 100%; background: linear-gradient(90deg, var(--pine), var(--pine-lt)); border-radius: 3px; }
.prc { font-size: 12px; font-weight: 500; color: var(--charcoal); text-align: right; }


/* ================================================================
   FOOTER (stats page variant)
================================================================ */
footer { background: var(--ink); padding: 40px 72px 22px; }
.footer-inner { max-width: 1380px; margin: 0 auto; }
.footer-top {
    display:               grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap:                   40px;
    padding-bottom:        28px;
    border-bottom:         1px solid rgba(255,255,255,.07);
}
.footer-brand .logo-main { font-family: var(--serif); font-size: 22px; font-weight: 300; color: var(--white); letter-spacing: .04em; }
.footer-brand p           { font-size: 12px; color: rgba(255,255,255,.36); line-height: 1.70; margin-top: 9px; max-width: 230px; }
.footer-brand .contact-info        { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.footer-brand .contact-info a      { font-size: 11px; color: rgba(255,255,255,.40); transition: color var(--trans); }
.footer-brand .contact-info a:hover { color: var(--accent); }
.footer-col h4    { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.20); margin-bottom: 12px; }
.footer-col ul    { list-style: none; }
.footer-col li    { margin-bottom: 8px; }
.footer-col a     { font-size: 12px; color: rgba(255,255,255,.40); transition: color var(--trans); }
.footer-col a:hover { color: var(--white); }
.footer-bottom    { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 5px; padding-top: 18px; }
.footer-bottom p  { font-size: 10px; color: rgba(255,255,255,.17); }


/* ================================================================
   LIVE CHAT BUTTON
================================================================ */
#live-chat {
    position:      fixed;
    bottom:        28px;
    right:         28px;
    z-index:       900;
    width:         52px;
    height:        52px;
    border-radius: 50%;
    background:    var(--accent);
    color:         var(--white);
    border:        none;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    box-shadow:    0 4px 20px rgba(200,146,58,.45);
    transition:    transform var(--trans), box-shadow var(--trans);
}
#live-chat:hover        { transform: scale(1.08); box-shadow: 0 8px 28px rgba(200,146,58,.55); }
#live-chat svg          { width: 22px; height: 22px; }
.chat-tooltip {
    position:       absolute;
    right:          64px;
    top:            50%;
    transform:      translateY(-50%);
    background:     var(--charcoal);
    color:          var(--white);
    font-size:      12px;
    white-space:    nowrap;
    padding:        6px 12px;
    border-radius:  var(--radius-sm);
    pointer-events: none;
    opacity:        0;
    transition:     opacity var(--trans);
}
#live-chat:hover .chat-tooltip { opacity: 1; }


/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1200px) {
    .sgrid                                    { grid-template-columns: repeat(2,1fr); }
    .g2, .g3                                  { grid-template-columns: 1fr; }
    .hg                                       { grid-template-columns: 1fr 1fr; }
    .sec, .sstrip, .bc, .mbar, .hi, footer   { padding-left: 48px; padding-right: 48px; }
}
@media (max-width: 820px) {
    .sgrid                                    { grid-template-columns: 1fr 1fr; }
    .sec, .sstrip, .bc, .mbar, .hi, footer   { padding-left: 24px; padding-right: 24px; }
    .hg                                       { grid-template-columns: 1fr; }
    .footer-top                               { grid-template-columns: 1fr; gap: 24px; }
    .prr                                      { grid-template-columns: 95px 1fr 40px; }
    .mdesc                                    { display: none; }
}
@media (max-width: 540px) {
    .sgrid { grid-template-columns: 1fr; }
}