/* KSAGoldLive — plugin component styles (supplements the theme) */

/* ============================================================
   HERO PRICE CARD — the headline. Nothing sits above this.
   ============================================================ */
.ksa-hero-card{
  background:linear-gradient(135deg,var(--color-green-dark,#00512A),var(--bg-dark,#0F1B14));
  color:#fff;border:1px solid rgba(212,175,55,.3);border-radius:var(--radius-lg,14px);
  padding:22px;margin:0 0 20px;
}
.ksa-hero-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-gold,#D4AF37);margin-bottom:6px}
.ksa-hero-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ksa-hero-price{font-size:clamp(2rem,7vw,2.9rem);font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums;color:#fff}
.ksa-hero-chg{font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
.ksa-up{color:#4ade80}.ksa-down{color:#f87171}.ksa-flat{color:#cbd5e1}
.ksa-hero-sub{display:block;font-size:.72rem;color:rgba(255,255,255,.6);margin-top:4px}

.ksa-hero-karats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 0}
.ksa-hero-kbox{background:rgba(255,255,255,.07);border-radius:10px;padding:10px 12px}
.ksa-kbox-label{display:block;font-size:.66rem;color:rgba(255,255,255,.65);margin-bottom:3px}
.ksa-hero-kbox strong{font-size:1rem;font-variant-numeric:tabular-nums}

.ksa-hero-range{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.ksa-hero-range span{font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums}
.ksa-hero-range em{display:block;font-size:.62rem;font-style:normal;text-transform:uppercase;
  letter-spacing:.05em;color:rgba(255,255,255,.55);margin-bottom:2px}

.ksa-hero-updated{display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:.74rem;color:rgba(255,255,255,.62)}
.ksa-live-badge{background:#ef4444;color:#fff;font-size:.58rem;font-weight:800;
  letter-spacing:.08em;padding:2px 7px;border-radius:4px;animation:ksaPulse 2s ease infinite}
@keyframes ksaPulse{0%,100%{opacity:1}50%{opacity:.55}}

@media(max-width:600px){
  .ksa-hero-karats{grid-template-columns:repeat(3,1fr);gap:6px}
  .ksa-hero-kbox{padding:8px}
  .ksa-hero-kbox strong{font-size:.85rem}
}

/* ============================================================
   TABLES
   ============================================================ */
.price-table .td-today strong{color:var(--color-gold-dark,#A8880A)}
.price-table .td-yest{color:var(--text-3,#8A938E)}
.price-table .td-up{color:var(--color-up,#16A34A);font-weight:700}
.price-table .td-down{color:var(--color-down,#DC2626);font-weight:700}
.price-table .td-flat{color:var(--color-flat,#94A3B8)}
.ksa-row-highlight td{background:rgba(212,175,55,.08)}
.ksa-weight-table .wt-weight{font-weight:700}
.ksa-table-note{font-size:.82rem;color:var(--text-2,#55605A);margin:10px 0 22px;line-height:1.6}
.ksa-nodata{padding:18px;background:var(--bg-2,#F7F7F2);border-radius:10px;color:var(--text-2,#55605A)}

/* Hide secondary unit columns on small screens so the essentials fit */
@media(max-width:600px){.price-table .ksa-col-unit{display:none}}

/* ============================================================
   CHART
   ============================================================ */
.chart-container{background:var(--bg-2,#F7F7F2);border:1px solid var(--border,#DDE2DE);
  border-radius:var(--radius-lg,14px);padding:18px;margin:24px 0}
.chart-header h3{margin:0 0 12px;font-size:1.05rem}
.chart-controls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.chart-btn{padding:5px 14px;border-radius:20px;border:1px solid var(--border,#DDE2DE);
  background:var(--bg-1,#fff);color:var(--text-2,#55605A);font-size:.78rem;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:all .15s}
.chart-btn:hover{border-color:var(--color-gold,#D4AF37)}
.chart-btn.active{background:var(--color-gold,#D4AF37);color:#1a1200;border-color:var(--color-gold,#D4AF37)}
/* Explicit height — Chart.js needs it AND it prevents layout shift */
.chart-canvas-wrap{position:relative;width:100%;height:340px}
@media(max-width:600px){.chart-canvas-wrap{height:240px}}

/* ============================================================
   CALCULATORS
   ============================================================ */
.ksa-calc{background:var(--bg-2,#F7F7F2);border:1px solid var(--border,#DDE2DE);
  border-radius:var(--radius-lg,14px);padding:22px;margin:22px 0;max-width:620px}
.ksa-calc h3{margin:0 0 16px;font-size:1.15rem}
.ksa-calc-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.ksa-calc-row label{font-size:.85rem;font-weight:700;color:var(--text-1,#14231A)}
.ksa-calc input,.ksa-calc select{width:100%;padding:11px 13px;border:1px solid var(--border,#DDE2DE);
  border-radius:8px;background:var(--bg-1,#fff);color:var(--text-1,#14231A);font-size:.95rem;
  font-family:inherit;box-sizing:border-box}
.ksa-calc input:focus,.ksa-calc select:focus{outline:none;border-color:var(--color-gold,#D4AF37);
  box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.ksa-calc-btn{appearance:none;border:none;background:var(--color-green,#006C35);color:#fff;
  font-weight:800;font-size:.95rem;padding:12px 26px;border-radius:8px;cursor:pointer;
  transition:filter .15s;width:100%}
.ksa-calc-btn:hover{filter:brightness(1.1)}
.ksa-calc-result{margin-top:18px;padding:16px;background:var(--bg-1,#fff);
  border:1px solid var(--border,#DDE2DE);border-radius:10px}
.ksa-res-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--border,#DDE2DE);font-size:.92rem}
.ksa-res-row:last-child{border-bottom:none}
.ksa-res-row strong{font-variant-numeric:tabular-nums}
.ksa-res-total{margin-top:6px;padding-top:12px;border-top:2px solid var(--color-gold,#D4AF37);
  border-bottom:none;font-size:1.05rem}
.ksa-res-total strong{color:var(--color-gold-dark,#A8880A);font-size:1.15rem}
.ksa-res-yes strong{color:var(--color-up,#16A34A)}
.ksa-res-no strong{color:var(--text-2,#55605A)}
.ksa-res-note{margin:12px 0 0;font-size:.8rem;color:var(--text-2,#55605A);line-height:1.6}
.ksa-calc-note{margin:14px 0 0;font-size:.8rem;color:var(--text-2,#55605A);line-height:1.65}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.ksa-contact-form{max-width:620px;margin:22px 0;padding:24px;background:var(--bg-2,#F7F7F2);
  border:1px solid var(--border,#DDE2DE);border-radius:var(--radius-lg,14px)}
.ksa-form-row{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.ksa-form-row label{font-size:.85rem;font-weight:700;color:var(--text-1,#14231A)}
.ksa-contact-form input[type=text],.ksa-contact-form input[type=email],.ksa-contact-form textarea{
  width:100%;padding:11px 13px;border:1px solid var(--border,#DDE2DE);border-radius:8px;
  background:var(--bg-1,#fff);color:var(--text-1,#14231A);font-size:.95rem;font-family:inherit;
  box-sizing:border-box}
.ksa-contact-form input:focus,.ksa-contact-form textarea:focus{outline:none;
  border-color:var(--color-gold,#D4AF37);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.ksa-contact-form textarea{resize:vertical;min-height:130px}
.ksa-cf-submit{appearance:none;border:none;background:var(--color-green,#006C35);color:#fff;
  font-weight:800;font-size:.95rem;padding:12px 26px;border-radius:8px;cursor:pointer}
.ksa-cf-submit:disabled{opacity:.6;cursor:default}
.ksa-cf-status{margin:14px 0 0;font-size:.9rem;font-weight:600;min-height:1.2em}
.ksa-cf-status.is-success{color:var(--color-up,#16A34A)}
.ksa-cf-status.is-error{color:var(--color-down,#DC2626)}
.ksa-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ============================================================
   QUICK ANSWER BOX — featured-snippet targeting
   ============================================================ */
.ksa-quickanswer{background:var(--bg-2,#F7F7F2);border-inline-start:4px solid var(--color-gold,#D4AF37);
  border-radius:8px;padding:16px 20px;margin:20px 0}
.ksa-quickanswer p{margin:0;font-size:1rem;line-height:1.65}

/* ============================================================
   ADSENSE SLOTS — space RESERVED so ads cannot shift layout
   ============================================================ */
.ksa-ad{margin:26px 0;text-align:center;min-height:280px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;overflow:hidden}
.ksa-ad .adsbygoogle{display:block;width:100%}
.ksa-ad-label{display:block;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3,#8A938E);margin-bottom:6px;line-height:1}
@media(min-width:1024px){.ksa-ad{min-height:260px}}

/* ============================================================
   DARK MODE
   ============================================================ */
.dark-mode .ksa-calc,[data-theme=dark] .ksa-calc,
.dark-mode .ksa-contact-form,[data-theme=dark] .ksa-contact-form,
.dark-mode .chart-container,[data-theme=dark] .chart-container,
.dark-mode .ksa-quickanswer,[data-theme=dark] .ksa-quickanswer{
  background:#16231C;border-color:rgba(212,175,55,.22)}
.dark-mode .ksa-calc-result,[data-theme=dark] .ksa-calc-result{background:#0F1B14}