:root{
  --gold-1:#8a6416;
  --gold-2:#c9a13b;
  --gold-3:#e6c874;
  --gold-deep:#6b4d17;
  --brown-text:#3a2c17;
  --cream-1:#f8f0e0;
  --cream-2:#f1e4c9;
  --green:#2e7d32;
  --red:#c62828;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:'Poppins',sans-serif;
  background:#f0e2c4;
}

.board-wrapper{
  min-height:100vh;
  display:flex;
  align-items:stretch;
  justify-content:center;
}

.board{
  position:relative;
  width:100%;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255,255,255,0.35), transparent 55%),
    url("../assets/avadh-marble-bg.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  padding:34px 56px 40px;
  display:flex;
  flex-direction:column;
}

/* ---------- Top bar ---------- */
.top-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,2.4vw,38px);
  z-index:2;
}

.slide-badge{
  width:56px;
  height:56px;
  border:1.5px solid var(--gold-2);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:600;
  color:var(--brown-text);
  background:rgba(255,255,255,0.35);
  flex-shrink:0;
}

.brand{
  flex:0 1 330px;
  width:auto;
  min-width:260px;
  padding:0;
  text-align:left;
}

.brand a{
  display:inline-block;
  width:min(460px, 100%);
}

.brand-logo-image{
  display:block;
  width:100%;
  height:auto;
  max-height:126px;
  object-fit:contain;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 3px 5px rgba(107,77,23,0.12));
}

.brand-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.brand-logo{
  width:76px;
  height:76px;
  transform:rotate(45deg);
  border:1.5px solid var(--gold-2);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25), transparent 70%);
  flex-shrink:0;
}
.brand-logo span{
  display:inline-block;
  transform:rotate(-45deg);
  font-family:'Cinzel',serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:1px;
  color:var(--gold-1);
}

.brand-text h1{
  font-family:'Cinzel',serif;
  font-weight:700;
  font-size:52px;
  letter-spacing:6px;
  margin:0;
  line-height:1;
  background:linear-gradient(180deg,#e9c977 0%,#a9791f 55%,#c9a13b 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.brand-sub{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:2px;
}
.brand-sub .line{
  width:70px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-2));
}
.brand-sub:has(.line:last-child) .line:last-child{
  background:linear-gradient(90deg, var(--gold-2), transparent);
}
.brand-text h2{
  font-family:'Cinzel',serif;
  font-weight:600;
  font-size:24px;
  letter-spacing:10px;
  margin:0;
  color:var(--gold-1);
}

.tagline{
  margin:8px 0 0;
  font-size:13px;
  letter-spacing:3px;
  font-weight:600;
  color:#8a7350;
}

.time-block{
  position:static;
  text-align:right;
  flex:0 0 170px;
  min-width:170px;
}
.time-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  font-size:18px;
  font-weight:600;
  color:var(--brown-text);
}
.time-row i{color:var(--gold-2);}
.date-row{
  font-size:15px;
  color:#5c4a2c;
  margin-top:2px;
}
.live-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:8px;
}
.live-label{
  font-weight:700;
  font-size:14px;
  letter-spacing:2px;
  color:var(--green);
}
.live-toggle{
  width:34px;
  height:18px;
  background:var(--green);
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  padding:2px;
  justify-content:flex-end;
}
.live-toggle .dot{
  width:14px;
  height:14px;
  background:#fff;
  border-radius:50%;
  display:block;
}

/* ---------- Live page navigation ---------- */
.board-menu{
  position:relative;
  z-index:3;
  flex:1 1 auto;
  width:auto;
  min-width:0;
  min-height:44px;
  margin:0;
  padding:5px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(18px, 2.2vw, 32px);
  border:0;
  background:transparent;
}

.board-menu__link{
  position:relative;
  padding:8px 0 7px;
  color:#4d3919;
  font-size:1.1rem;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease;
}

.board-menu__link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:2px;
  transform:scaleX(0);
  background:linear-gradient(90deg,#8a6416,#e6c874);
  transition:transform .2s ease;
}

.board-menu__link:hover,
.board-menu__link.is-active{color:#8a6416;}
.board-menu__link:hover::after,
.board-menu__link.is-active::after{transform:scaleX(1);}

.board-menu__login{
  padding:7px 18px;
  border:1px solid #b78a27;
  border-radius:999px;
}
.board-menu__login::after{display:none;}
.board-menu__login:hover{color:#fff; background:linear-gradient(135deg,#6b4d17,#c9a13b);}

/* ---------- Live message and connection state ---------- */
.live-rates-marquee-wrap{
  position:relative;
  z-index:2;
  width:88%;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  overflow:hidden;
  min-height:38px;
  border:1px solid rgba(201,161,59,0.55);
  border-radius:10px;
  color:#5a4218;
  background:rgba(255,253,248,0.62);
  box-shadow:0 4px 12px rgba(120,90,20,0.1);
}

.marquee{
  min-height:38px;
  padding:0 16px;
  overflow:hidden;
  white-space:nowrap;
  line-height:38px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.25px;
}

/* ---------- Gold table ---------- */
.gold-table-wrap{
  width:76%;
  margin-left:auto;
  margin-right:auto;
  margin-top:22px;
  border:2px solid transparent;
  border-radius:24px;
  background:
    linear-gradient(#f8f0e0,#f8f0e0) padding-box,
    linear-gradient(110deg,#8a6416 0%,#f4d77b 18%,#a87519 46%,#f5df91 76%,#8a6416 100%) border-box;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(120,90,20,0.18);
  z-index:2;
  position:relative;
}
.gold-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  background:var(--cream-1);
}
.gold-table thead tr{
  background:
    linear-gradient(90deg,rgba(255,226,139,.12),transparent 28%,rgba(255,240,187,.16) 70%,transparent),
    linear-gradient(180deg,#e1b74f 0%,#b47b1f 52%,#896014 100%);
}
.gold-table thead th{
  background:transparent;
  color:#fff;
  font-size:18px;
  font-weight:600;
  padding:16px 40px;
  text-align:center;
  width:22%;
}
.gold-table thead th.head-title{text-align:left; width:56%;}
.gold-table tbody td{
  padding:14px 40px;
  font-size:17px;
  color:var(--brown-text);
  text-align:center;
  border-bottom:1px solid #e6d6ae;
}
.gold-table tbody tr:last-child td{border-bottom:none;}
.gold-table tbody tr{cursor:pointer;transition:background-color .2s ease;}
.gold-table tbody tr:hover td{background:var(--cream-2);}
.gold-table tbody td:first-child{
  text-align:left;
  font-weight:500;
}

.gold-rate-value,
.market-rate-value{
  transition:background-color .25s ease, color .25s ease;
}

.gold-rate-value.value-up,
.market-rate-value.value-up{
  color:var(--green);
  background:transparent;
}

.gold-rate-value.value-down,
.market-rate-value.value-down{
  color:var(--red);
  background:rgba(198,40,40,0.08);
}

/* ---------- Section heading ---------- */
.section-heading{
  width:94%;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:26px;
  margin-bottom:16px;
  z-index:2;
  position:relative;
}
.heading-text{
  font-family:'Cinzel',serif;
  font-weight:700;
  font-size:20px;
  letter-spacing:3px;
  color:var(--gold-1);
}
.orn{
  width:130px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-2), transparent);
  position:relative;
}
.orn::before{
  content:"";
  position:absolute;
  top:-3px;
  width:6px;
  height:6px;
  border:1px solid var(--gold-2);
  border-radius:50%;
  background:#fff;
}
.orn-left::before{right:0;}
.orn-right::before{left:0;}

/* ---------- Market table ---------- */
.market-table-wrap{
  width:84%;
  margin-left:auto;
  margin-right:auto;
  border:1.5px solid transparent;
  border-radius:20px;
  background:
    linear-gradient(rgba(250,244,229,.94),rgba(250,244,229,.94)) padding-box,
    linear-gradient(105deg,#9b6b18 0%,#e5c66f 20%,#b17c22 48%,#f0d889 78%,#916015 100%) border-box;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(120,90,20,0.1);
  z-index:2;
  position:relative;
}
.market-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
.market-table thead tr{
  background:linear-gradient(180deg,#fffaf0 0%,#f3e2bb 56%,#e6c77f 100%);
}
.market-table thead th{
  padding:12px 20px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.6px;
  color:#5f4413;
  text-align:center;
  border-bottom:1px solid #c99a38;
}
.market-table thead th.text-start{text-align:left;}
.market-table thead th:first-child,
.market-table tbody td:first-child{width:34%;}
.market-table thead th:nth-child(2),
.market-table tbody td:nth-child(2),
.market-table thead th:nth-child(3),
.market-table tbody td:nth-child(3){width:20%;}
.market-table thead th:nth-child(4),
.market-table tbody td:nth-child(4){width:26%;}
.market-table tbody td{
  padding:12px 20px;
  font-size:16px;
  font-weight:500;
  color:var(--brown-text);
  text-align:center;
  border-bottom:1px solid #efe2c2;
}
.market-table tbody tr:last-child td{border-bottom:none;}
.market-table tbody tr:hover{background:transparent;}
.rates-loading-row td{text-align:center !important; color:#786343 !important;}
.product-cell{
  text-align:left !important;
  font-weight:600;
  white-space:nowrap;
}
.product-cell .prod-icon{
  margin-right:10px;
  vertical-align:middle;
}
.prod-icon{
  width:28px;
  height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:#fff;
  flex-shrink:0;
}
.gold-icon{background:linear-gradient(135deg,#e9c977,#a9791f);}
.silver-icon{background:linear-gradient(135deg,#e3e3e3,#9a9a9a);}
.usd-icon{background:linear-gradient(135deg,#7fc98f,#2e7d32);}
.chart-icon.up-chart{background:linear-gradient(135deg,#e9c977,#a9791f);}
.chart-icon.down-chart{background:linear-gradient(135deg,#e08b8b,#c62828);}

.change{font-weight:700;}
.change.up{color:var(--green);}
.change.down{color:var(--red);}
.change.flat{color:#786343;}
.rate-high{color:var(--green) !important;}
.rate-low{color:var(--red) !important;}

.live-rate-status{
  margin:0;
  padding:8px 14px;
  border-top:1px solid #e6d6ae;
  background:transparent;
  color:var(--green);
  font-size:12px;
  font-weight:600;
  text-align:center;
}

.live-rate-status.is-error{
  color:var(--red);
  background:rgba(255,238,238,0.88);
}

/* ---------- Bottom ornament ---------- */
.bottom-orn{
  margin-top:auto;
  padding-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--gold-2);
  z-index:2;
  position:relative;
}
.orn-line{
  width:220px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-2), transparent);
}

/* ---------- Footer navigation ---------- */
.footer-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  height:78px;
  border-top:2px solid #c9a13b;
  background:#fffdf8;
  box-shadow:0 -5px 18px rgba(107,77,23,.12);
}

.footer-nav__inner{
  width:min(100%, 1400px);
  height:100%;
  margin:0 auto;
  padding:8px 20px;
  display:flex;
  align-items:center;
  justify-content:space-around;
}

.footer-nav__item{
  flex:1;
  padding:10px;
  border-radius:8px;
  color:#6c5939;
  font-size:13px;
  font-weight:600;
  text-align:center;
  text-decoration:none;
  transition:color .2s ease,background .2s ease,transform .2s ease;
}

.footer-nav__item:hover{
  color:#8a6416;
  transform:translateY(-2px);
}
.footer-nav__item.is-active{
  color:#6b4d17;
  background:rgba(230,200,116,.25);
}

.footer-legal{
  position:relative;
  padding:18px 24px 96px;
  color:#fff8e5;
  text-align:center;
  background:linear-gradient(100deg,#49330f,#76551a 45%,#9a7528 100%);
}
.footer-legal::before{
  content:"";
  position:absolute;
  top:5px;
  left:8%;
  right:8%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,232,164,.75),transparent);
}
.footer-legal__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 18px;
  margin-bottom:10px;
}
.footer-legal__links a{
  color:rgba(255,248,229,.9);
  font-size:12px;
  font-weight:600;
  text-decoration:none;
}
.footer-legal__links a:hover{color:#f5d77d;}
.footer-legal__copy{
  margin:0;
  color:rgba(255,255,255,.6);
  font-size:12px;
}

@media (max-width:1180px){
  .top-bar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px 16px;
  }
  .brand{grid-column:1; grid-row:1; min-width:0; width:auto;}
  .time-block{grid-column:2; grid-row:1; min-width:150px; width:auto;}
  .board-menu{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
  }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .board{padding:22px 18px 26px;}
  .brand-text h1{font-size:32px; letter-spacing:3px;}
  .brand-text h2{font-size:16px; letter-spacing:6px;}
  .brand-logo{width:56px;height:56px;}
  .gold-table thead th, .gold-table tbody td{padding:10px 12px; font-size:14px;}
  .market-table thead th, .market-table tbody td{padding:8px 8px; font-size:12px;}
  .top-bar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px 16px;
  }
  .brand{grid-column:1; grid-row:1; min-width:0; width:auto;}
  .time-block{grid-column:2; grid-row:1; position:static; text-align:right; min-width:150px; width:auto; margin:0;}
  .time-row, .live-row{justify-content:flex-end;}
  .orn, .orn-line{width:40px;}
  .brand a{width:min(320px, 100%);}
  .brand-logo-image{max-height:90px;}
  .live-rates-marquee-wrap,
  .gold-table-wrap,
  .market-table-wrap,
  .section-heading{width:100%;}
  .live-rates-marquee-wrap{margin-top:12px;}
  .product-cell{white-space:normal;}
  .board-menu{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    justify-content:flex-start;
    gap:22px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .board-menu::-webkit-scrollbar{display:none;}
  .footer-nav__inner{min-height:64px; padding:6px 4px;}
  .footer-nav__item{padding:9px 3px; font-size:11px;}
  .footer-legal{padding-left:16px; padding-right:16px;}
}

@media (min-width:1024px){
  .footer-nav{
    position:static;
    height:auto;
    border-top:0;
    box-shadow:none;
    background:#3a2c17;
  }
  .footer-nav__inner{
    height:auto;
    justify-content:center;
    gap:56px;
    padding:26px 24px;
  }
  .footer-nav__item{
    flex:0 0 auto;
    color:rgba(255,255,255,.75);
  }
  .footer-nav__item.is-active{
    color:#e6c874;
    background:transparent;
  }
  .footer-nav__item:hover{color:#e6c874;}
  .footer-legal{
    padding:18px 24px 24px;
    background:#3a2c17;
  }
}


/* Requested live-rate refinements */
.rate-move-badge{display:inline-block;min-width:78px;padding:5px 9px;border-radius:7px;color:var(--brown-text);background:transparent;}
.rate-move-badge.value-up{background:#238b45;color:#fff;}
.rate-move-badge.value-down{background:#c62828;color:#fff;}
.rate-move-badge.value-flat{background:transparent;color:var(--brown-text);}
.rate-range-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.hl-badge{display:inline-block;min-width:92px;padding:3px 8px;border-radius:6px;color:#fff;font-size:13px;font-weight:700;line-height:1.25;}
.hl-high{background:#238b45;}
.hl-low{background:#c62828;}
.gold-table .head-title{width:72% !important;}
.gold-table .head-sell{width:28% !important;text-align:center;}
.top-bar .brand{order:2;text-align:center;}
.top-bar .board-menu{order:1;flex:0 1 auto;}
.top-bar .time-block{order:3;}
@media(max-width:768px){.gold-table-wrap,.market-table-wrap{width:96%;}.rate-move-badge{min-width:62px;padding:4px 5px}.hl-badge{min-width:74px;font-size:11px}.top-bar{justify-content:space-between}.top-bar .brand{order:1}.top-bar .board-menu{order:2}.top-bar .time-block{order:3}}


/* Final header, marquee and H/L alignment refinements */
.top-bar{justify-content:flex-start;}
.top-bar .brand{order:1;flex:0 1 390px;min-width:300px;text-align:left;}
.top-bar .brand a{width:min(520px,100%);}
.top-bar .brand-logo-image{max-height:150px;}
.top-bar .board-menu{order:2;flex:1 1 auto;justify-content:center;}
.top-bar .time-block{order:3;}
.global-marquee-wrap:not(.live-rates-marquee-wrap){width:100%;margin:0;overflow:hidden;background:#6b4d17;color:#fff;border:0;border-bottom:1px solid #d6b85f;border-radius:0;min-height:36px;box-shadow:none;position:relative;z-index:10;}
.global-marquee,.live-rates-marquee-wrap .marquee{display:block;width:max-content;min-width:max-content;padding:0;white-space:nowrap;line-height:36px;font-size:13px;font-weight:600;letter-spacing:.25px;animation:globalMarquee 18s linear infinite;will-change:transform;}
.global-marquee.is-marquee-running{animation-name:globalMarquee;}
@keyframes globalMarquee{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
.rate-range-cell,.rates__range{vertical-align:middle;text-align:center;}
.rate-range-cell{display:table-cell;}
.hl-line,.rates__range-line{display:grid;grid-template-columns:28px minmax(58px,auto);align-items:center;justify-content:center;column-gap:4px;line-height:1.45;font-weight:700;background:none!important;border:0!important;padding:0!important;border-radius:0!important;min-width:0!important;}
.hl-label,.rates__range-label{display:inline-block;text-align:right;color:inherit;}
.hl-value{display:inline-block;text-align:right;min-width:58px;}
.hl-high,.rate-high,.rates__range-label--high{color:var(--green)!important;}
.hl-low,.rate-low,.rates__range-label--low{color:var(--red)!important;}
@media(max-width:900px){.top-bar .brand{order:1;grid-column:1;grid-row:1;min-width:0;}.top-bar .board-menu{order:2;grid-column:1/-1;grid-row:2;justify-content:flex-start;}.top-bar .time-block{order:3;grid-column:2;grid-row:1;}.top-bar .brand a{width:min(390px,100%)}.top-bar .brand-logo-image{max-height:112px;}}