/*
Theme Name: GoldRatesUAE
Theme URI: https://goldratesuae.com
Description: Fast bilingual (EN/AR) gold-rate theme. White base with restrained UAE-flag accents (green primary, red for negative). Data-first, minimal CSS — speed is the priority. Pairs with the GoldRatesUAE Core plugin.
Author: GoldRatesUAE
Version: 2.0.0
Text Domain: goldratesuae
*/

/* ===== Palette: white base, UAE-flag accents ===== */
:root{
	--ink:#14161a;--ink-2:#4a4f57;--ink-3:#787f89;
	--bg:#ffffff;--bg-2:#f6f8f7;--line:#e6e9ec;
	--green:#009639;--green-d:#00762d;--green-bg:#e9f6ee;
	--red:#e23b3b;--red-bg:#fdecec;
	--gold:#b78a2e;
	--max:1120px;--r:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-size:16px;line-height:1.6}
body.lang-ar{font-family:"Segoe UI","Noto Naskh Arabic",Tahoma,sans-serif}
.gru-container{max-width:var(--max);margin-inline:auto;padding-inline:16px}
img{max-width:100%;height:auto}
a{color:var(--green-d);text-decoration:none}
a:hover{text-decoration:underline}
.tab,.gru-tab{font-variant-numeric:tabular-nums}

h1{font-size:clamp(1.5rem,4vw,2rem);font-weight:800;line-height:1.2;margin:0 0 8px}
h2{font-size:clamp(1.2rem,2.6vw,1.45rem);font-weight:700;margin:28px 0 12px}
h3{font-size:1.05rem;font-weight:700;margin:18px 0 8px}
p{margin:0 0 .85rem}

/* ===== Header / footer ===== */
.gru-header{background:var(--bg);border-bottom:1px solid var(--line)}
.gru-header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:var(--max);margin-inline:auto;padding:10px 16px}
.gru-logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--ink)}
.gru-logo:hover{text-decoration:none}
.gru-logo .dot{width:10px;height:10px;border-radius:50%;background:var(--green)}
.gru-nav{display:none;gap:16px}
.gru-nav a{color:var(--ink-2);font-size:14px;font-weight:500}
.gru-lang{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--ink-2)}
.gru-lang:hover{border-color:var(--green);color:var(--green-d);text-decoration:none}
@media(min-width:768px){.gru-nav{display:flex}}
.gru-footer{margin-top:48px;border-top:1px solid var(--line);background:var(--bg-2)}
.gru-footer-grid{display:grid;gap:24px;grid-template-columns:1fr;max-width:var(--max);margin-inline:auto;padding:32px 16px;font-size:14px}
@media(min-width:640px){.gru-footer-grid{grid-template-columns:1fr 1fr 1fr}}
.gru-footer h2{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin:0 0 10px}
.gru-footer ul{list-style:none;margin:0;padding:0}
.gru-footer li{margin-bottom:7px}
.gru-footer a{color:var(--ink-2)}
.gru-copy{border-top:1px solid var(--line);text-align:center;font-size:12px;color:var(--ink-3);padding:12px}

/* ===== Hero + live header ===== */
.gru-hero{background:linear-gradient(180deg,var(--green-bg),transparent);border-bottom:1px solid var(--line)}
.gru-hero-inner{max-width:var(--max);margin-inline:auto;padding:22px 16px 26px;display:grid;gap:18px}
@media(min-width:900px){.gru-hero-inner{grid-template-columns:1fr 360px;align-items:start}}
.gru-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--green-d);text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px}
.gru-dot-live{width:8px;height:8px;border-radius:50%;background:var(--green);animation:gru-pulse 1.6s infinite}
@keyframes gru-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.gru-lead{color:var(--ink-2);max-width:560px;margin:0}

/* Hero price card */
.gru-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.gru-card-hero{border-top:3px solid var(--green)}
.gru-card-k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.gru-card-price{font-size:2rem;font-weight:800;line-height:1.1;color:var(--ink)}
.gru-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700}
.gru-badge.up{background:var(--green-bg);color:var(--green-d)}
.gru-badge.down{background:var(--red-bg);color:var(--red)}
.gru-badge.flat{background:var(--bg-2);color:var(--ink-3)}
.gru-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.gru-mini div{background:var(--bg-2);border-radius:8px;padding:8px 10px}
.gru-mini .k{font-size:11px;color:var(--ink-3)}
.gru-mini .v{font-weight:700;font-size:.95rem}
.gru-card-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* Live header strip (above master table) */
.gru-live{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.gru-live-price{font-size:1.6rem;font-weight:800}
.gru-live-chg{font-weight:700;font-size:.9rem}
.gru-live-chg.up{color:var(--green-d)}.gru-live-chg.down{color:var(--red)}.gru-live-chg.flat{color:var(--ink-3)}
.gru-live-meta{text-align:end;font-size:.8rem;color:var(--ink-3);display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.gru-live-badge{display:inline-block;background:var(--green);color:#fff;font-size:10px;font-weight:800;letter-spacing:.05em;border-radius:4px;padding:1px 6px}
.gru-range{display:flex;gap:14px;font-size:.8rem;color:var(--ink-2)}
.gru-range b{color:var(--ink)}

/* ===== Tables ===== */
.gru-tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table.gru-t{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
.gru-t thead th{background:var(--bg-2);color:var(--ink-2);font-weight:700;text-align:start;padding:10px 12px;white-space:nowrap;border-bottom:1px solid var(--line)}
.gru-t td{padding:10px 12px;border-top:1px solid var(--line)}
.gru-t td:not(:first-child),.gru-t th:not(:first-child){text-align:end}
.gru-t tbody tr:nth-child(even){background:var(--bg-2)}
.gru-t .up{color:var(--green-d)}.gru-t .down{color:var(--red)}.gru-t .flat{color:var(--ink-3)}
.gru-t .hl{font-weight:700}
.gru-note{font-size:12px;color:var(--ink-3);margin-top:8px}

/* Karat filter chips */
.gru-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.gru-chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.gru-chip.active{background:var(--green);border-color:var(--green);color:#fff}

/* ===== Sparkline ===== */
.gru-spark{display:block;width:100%;height:56px}
.gru-spark path.line{fill:none;stroke:var(--green);stroke-width:2}
.gru-spark path.area{fill:rgba(0,150,57,.08);stroke:none}
.gru-spark-wrap{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.gru-spark-head{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3);margin-bottom:6px}

/* ===== Link grid ===== */
.gru-links{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:640px){.gru-links{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.gru-links{grid-template-columns:repeat(4,1fr)}}
.gru-links a{display:block;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;font-weight:600;font-size:14px;color:var(--ink);background:var(--bg)}
.gru-links a:hover{border-color:var(--green);color:var(--green-d);text-decoration:none}

/* ===== City premium ===== */
.gru-premium{border:1px solid var(--line);border-radius:var(--r);padding:16px}
.gru-premium-empty{border-style:dashed;background:var(--bg-2);color:var(--ink-2);font-size:14px}
.gru-premium-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:center}
.gru-premium-cols .k{font-size:12px;color:var(--ink-3)}
.gru-premium-cols .v{font-size:1.15rem;font-weight:700}
.gru-premium-cols .v.mid{color:var(--green-d)}
.gru-premium-meta{text-align:center;font-size:12px;color:var(--ink-3);margin-top:10px}

/* ===== Status pill ===== */
.gru-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--ink-2)}
.gru-pdot{width:8px;height:8px;border-radius:50%}
.gru-pdot.ok{background:var(--green)}.gru-pdot.bad{background:var(--red)}.gru-pdot.muted{background:var(--ink-3)}

/* ===== Sections / article ===== */
.gru-section{padding:26px 0}
.gru-section .gru-container>h2:first-child{margin-top:0}
.gru-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--green-d);margin:0 0 4px}
.gru-article{max-width:760px;margin:0 auto;padding:8px 16px 40px}
.gru-article ul,.gru-article ol{padding-inline-start:20px}
.gru-article li{margin-bottom:5px}
.gru-breadcrumb{font-size:13px;color:var(--ink-3);padding:12px 0}
.gru-breadcrumb a{color:var(--green-d)}
.gru-breadcrumb .sep{margin:0 6px}

/* ===== Buttons / calculators ===== */
.gru-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-weight:600;font-size:13px;cursor:pointer}
.gru-btn:hover{border-color:var(--green);color:var(--green-d);text-decoration:none}
.gru-btn-primary{background:var(--green);border-color:var(--green);color:#fff}
.gru-btn-primary:hover{background:var(--green-d);color:#fff}
.gru-calc,.gru-fairquote{border:1px solid var(--line);border-radius:var(--r);padding:16px;max-width:460px}
.gru-calc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.gru-calc-row label{font-size:14px;color:var(--ink-2)}
.gru-calc-row input,.gru-calc-row select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;min-width:120px}
.gru-calc-result,.gru-fairquote-out{margin-top:6px;font-size:15px}
.gru-fairquote-out>div{display:flex;justify-content:space-between;padding:4px 0}
.gru-fairquote-total{border-top:1px solid var(--line);margin-top:6px;padding-top:8px!important;font-weight:700}

/* ===== Chart ===== */
.gru-chart-wrap{border:1px solid var(--line);border-radius:var(--r);padding:14px}
.gru-chart-canvas{width:100%;height:320px}

/* ===== Mobile optimization ===== */
html,body{overflow-x:hidden;max-width:100%}
img,svg,table,canvas{max-width:100%}

/* Mobile sticky rate bar (hidden on desktop) */
.gru-mbar{display:none}
@media(max-width:767px){
	.gru-mbar{display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:50;
		background:var(--green-d);color:#fff;padding:7px 14px;font-size:13px;font-weight:600;
		overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
	.gru-mbar-item{display:inline-flex;gap:5px;align-items:baseline}
	.gru-mbar-item b{color:#cfeecf;font-weight:700}
	.gru-mbar-chg{margin-inline-start:auto;font-weight:700}
	.gru-mbar-chg.up{color:#b8f0c8}.gru-mbar-chg.down{color:#ffd0d0}.gru-mbar-chg.flat{color:#e8e8e8}
}

/* Mobile spacing + tap targets */
@media(max-width:640px){
	body{font-size:15.5px}
	h1{font-size:1.5rem}
	.gru-hero-inner{padding:16px 14px 20px;gap:14px}
	.gru-card-price{font-size:1.7rem}
	.gru-section{padding:18px 0}
	.gru-container{padding-inline:14px}
	.gru-article{padding:8px 14px 32px}
	/* comfortable tap targets */
	.gru-chip{padding:8px 14px;font-size:14px}
	.gru-btn{padding:10px 16px}
	.gru-lang{padding:7px 14px}
	.gru-nav a{padding:8px 0}
	/* table scroll hint */
	.gru-tw{position:relative}
	.gru-t{font-size:13.5px;min-width:480px}
	.gru-t th,.gru-t td{padding:9px 10px}
	/* link grid: 2 cols with bigger tap area */
	.gru-links a{padding:14px}
}

/* Prevent tables from forcing the page wide (they scroll inside .gru-tw) */
.gru-tw{max-width:100%}

/* ===== Logo ===== */
.gru-logo-img{height:38px;width:auto;display:block}
@media(max-width:640px){.gru-logo-img{height:32px}}
.gru-footer-brand{padding:28px 16px 0}
.gru-footer-logo{height:44px;width:auto;opacity:.95}

/* --- E-E-A-T byline ------------------------------------------------------ */
.gru-byline{display:flex;align-items:center;gap:12px;margin:0 0 22px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--green-bg)}
.gru-byline-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--green);
  color:#fff;font-weight:700;font-size:12px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center}
.gru-byline-txt{font-size:14px;line-height:1.45;color:var(--ink)}
.gru-byline-txt a{color:var(--green-d);text-decoration:none}
.gru-byline-txt a:hover{text-decoration:underline}
.gru-byline-meta{display:block;font-size:12.5px;opacity:.8;margin-top:2px}
.lang-ar .gru-byline{flex-direction:row}

/* --- Key statistics card ------------------------------------------------- */
.gru-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gru-stat{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:#fff}
.gru-stat-l{display:block;font-size:12.5px;color:var(--ink);opacity:.7;margin-bottom:4px}
.gru-stat-v{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.gru-stat-v.up{color:var(--green-d)}
.gru-stat-v.down{color:var(--red)}
@media(max-width:640px){.gru-stats{grid-template-columns:repeat(2,1fr)}}

/* --- Weight converter ---------------------------------------------------- */
.gru-wconv{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--green-bg);max-width:520px}
.gru-wc-controls{display:flex;gap:10px;margin-bottom:14px}
.gru-wc-in,.gru-wc-unit{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:16px;background:#fff}
.gru-wc-in{flex:1;min-width:0}
.gru-wc-unit{flex:0 0 auto}
.gru-wconv .gru-t td:last-child{text-align:right;font-weight:600}
.lang-ar .gru-wconv .gru-t td:last-child{text-align:left}

/* --- City cost model + emirate comparison -------------------------------- */
.gru-costmodel{margin:18px 0}
.gru-spread{margin:12px 0 6px;padding:11px 14px;background:var(--green-bg);
  border-inline-start:3px solid var(--green);border-radius:6px;font-size:15px}
.gru-note{font-size:13.5px;color:var(--ink);opacity:.85;margin:8px 0}
.gru-note-muted{opacity:.65;font-size:12.5px;line-height:1.55}
.gru-row-hl{background:var(--green-bg)}
.gru-row-hl td{font-weight:600}
.zk-status{font-weight:700;font-size:13.5px}
.zk-status.ok{color:var(--green-d)}
.zk-status.no{color:var(--ink);opacity:.7}
.gru-calc .gru-t td:last-child{text-align:right}
.lang-ar .gru-calc .gru-t td:last-child{text-align:left}