/* GoldRates.ae — Shared Stylesheet | Theme: Light | Font: Plus Jakarta Sans */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --gold:#C9A84C; --gold-d:#A07830; --gold-bg:#FDF8EE;
  --bg:#F7F5F1; --bg-white:#FFFFFF; --card:#FFFFFF; --card2:#F7F5F1;
  --border:rgba(180,145,60,.25); --sub:#E8E4DC;
  --text:#1A1A1A; --muted:#555550; --dim:#6B6B65;
  --green:#1E7E3E; --red:#C0392B;
  --r:12px; --rs:8px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;}

/* TICKER */
.ticker-bar{background:#1A1A1A;border-bottom:1px solid #2A2A2A;padding:7px 0;overflow:hidden;}
.ticker-inner{display:flex;gap:40px;animation:tick 50s linear infinite;width:max-content;white-space:nowrap;}
.ticker-inner:hover{animation-play-state:paused;}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.t-item{display:inline-flex;gap:8px;align-items:center;font-size:11px;color:#888;}
.t-lbl{color:var(--gold);font-weight:600;letter-spacing:.05em;}
.t-up{color:#2E7D32;} .t-dn{color:#C0392B;}

/* LAYOUT */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}

/* HEADER */
.site-header{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1.5px solid var(--sub);max-width:1200px;margin:0 auto;gap:16px;background:var(--bg-white);}
.logo{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:700;color:#1A1A1A;text-decoration:none;flex-shrink:0;letter-spacing:-.02em;}
.logo span{color:var(--gold);}
.site-nav{display:flex;gap:18px;flex:1;justify-content:center;}
.site-nav a{font-size:13px;color:var(--muted);text-decoration:none;transition:color .2s;white-space:nowrap;font-weight:500;}
.site-nav a:hover{color:var(--gold-d);}

/* CURRENCY SWITCHER */
.cur-switcher{position:relative;flex-shrink:0;}
.cur-btn{display:flex;align-items:center;gap:8px;background:var(--bg-white);border:1.5px solid var(--sub);border-radius:var(--rs);padding:8px 14px;cursor:pointer;color:var(--text);font-size:13px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;transition:border-color .2s;white-space:nowrap;}
.cur-btn:hover{border-color:var(--gold);}
.cur-btn .flag{font-size:16px;}
.cur-btn .chev{color:var(--dim);font-size:10px;margin-left:2px;transition:transform .2s;display:inline-block;}
.cur-btn.open .chev{transform:rotate(180deg);}
.cur-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1.5px solid var(--sub);border-radius:var(--r);min-width:230px;z-index:999;display:none;box-shadow:0 8px 32px rgba(0,0,0,.12);}
.cur-dropdown.show{display:block;}
.cur-section-label{font-size:10px;font-weight:700;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;padding:10px 14px 4px;}
.cur-option{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;transition:background .15s;font-size:13px;text-decoration:none;}
.cur-option:hover{background:var(--gold-bg);}
.cur-option.active{background:var(--gold-bg);}
.cur-option .flag{font-size:18px;width:24px;text-align:center;}
.cur-option .cur-nm{flex:1;color:var(--text);font-weight:500;}
.cur-option .cur-cd{font-size:11px;color:var(--muted);font-weight:600;}
.cur-option.active .cur-nm{color:var(--gold-d);}
.cur-option.active .cur-cd{color:var(--gold);}
.cur-divider{height:1px;background:var(--sub);margin:4px 0;}

/* CURRENCY BANNER / PILLS */
.cur-banner{display:flex;align-items:center;gap:10px;background:var(--gold-bg);border:1px solid rgba(180,145,60,.3);border-radius:var(--rs);padding:10px 16px;margin:0 0 18px;flex-wrap:wrap;}
.cur-banner-lbl{font-size:12px;color:var(--muted);font-weight:500;}
.cur-banner-rate{font-size:13px;font-weight:600;color:var(--text);}
.cur-pills{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;}
.cur-pill{display:flex;align-items:center;gap:5px;font-size:11px;padding:4px 10px;border-radius:100px;border:1.5px solid var(--sub);cursor:pointer;transition:all .15s;background:var(--bg-white);color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;text-decoration:none;white-space:nowrap;}
.cur-pill:hover{border-color:var(--gold);color:var(--gold-d);}
.cur-pill.active{border-color:var(--gold);color:var(--gold-d);background:var(--gold-bg);font-weight:600;}

/* HERO */
.hero{padding:28px 0 16px;}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.hero-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--text);}
.hero-title .gold{color:var(--gold-d);}
.hero-sub{font-size:13px;color:var(--muted);margin-top:5px;font-weight:400;}
.live-badge{display:inline-flex;align-items:center;gap:5px;background:#E8F5E9;border:1px solid #A5D6A7;color:var(--green);font-size:10px;font-weight:700;padding:3px 9px;border-radius:100px;letter-spacing:.06em;}
.dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.hero-meta{text-align:right;font-size:11px;color:var(--dim);line-height:1.9;}

/* RATE CARDS */
.rate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;}
.rc{background:var(--bg-white);border:1.5px solid var(--sub);border-radius:var(--r);padding:18px;position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.rc:hover{border-color:var(--gold);box-shadow:0 4px 16px rgba(180,145,60,.1);}
.rc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--sub);}
.rc.feat::before{background:var(--gold);}
.rc-karat{font-size:10px;font-weight:700;color:var(--gold-d);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px;}
.rc-lbl{font-size:10px;color:var(--dim);margin-bottom:12px;}
.rc-aed{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;font-weight:700;line-height:1;margin-bottom:4px;letter-spacing:-.02em;color:var(--text);}
.rc-aed sup{font-size:11px;font-weight:500;color:var(--muted);}
.rc-primary{font-size:14px;font-weight:600;margin-bottom:2px;}
.rc-unit{font-size:10px;color:var(--dim);margin-bottom:10px;}
.rc-chg{font-size:11px;font-weight:600;color:var(--green);}

/* INFO CHIPS */
.info-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px;}
.chip{background:var(--bg-white);border:1.5px solid var(--sub);border-radius:var(--rs);padding:11px 14px;display:flex;justify-content:space-between;align-items:center;}
.chip-l{font-size:11px;color:var(--dim);font-weight:500;}
.chip-v{font-size:13px;font-weight:700;color:var(--text);}

/* AD */
.ad-unit{margin:18px 0;background:var(--bg-white);border:1.5px dashed var(--sub);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:10px;letter-spacing:.05em;text-transform:uppercase;min-height:90px;}

/* SECTIONS */
.sec{padding:26px 0;border-top:1.5px solid var(--sub);}
.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.sec-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--text);}
.sec-sub{font-size:12px;color:var(--dim);font-weight:500;}
.intro-p{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.75;}

/* 22K BLOCK */
.k22-block{background:var(--bg-white);border:1.5px solid rgba(180,145,60,.3);border-radius:var(--r);padding:22px;}
.k22-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:18px;}
.k22-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text);}
.k22-badge{background:var(--gold-bg);border:1px solid rgba(180,145,60,.3);color:var(--gold-d);font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px;letter-spacing:.06em;}
.k22-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.k22-cell{text-align:center;padding:14px;background:var(--bg);border-radius:var(--rs);border:1px solid var(--sub);}
.k22-qty{font-size:11px;color:var(--dim);margin-bottom:6px;font-weight:500;}
.k22-aed{font-size:11px;color:var(--muted);margin-bottom:4px;font-weight:500;}
.k22-primary{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.01em;}

/* ALL CURRENCIES TABLE */
.allcur-wrap{background:var(--bg-white);border:1.5px solid var(--sub);border-radius:var(--r);overflow:hidden;margin-bottom:14px;}
.allcur-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1.5px solid var(--sub);background:var(--bg);}
.allcur-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text);}
table.allcur{width:100%;border-collapse:collapse;font-size:13px;}
table.allcur th{padding:9px 16px;font-size:10px;font-weight:700;color:var(--dim);letter-spacing:.07em;text-transform:uppercase;border-bottom:1.5px solid var(--sub);text-align:left;white-space:nowrap;background:var(--bg);}
table.allcur td{padding:11px 16px;border-bottom:1px solid var(--sub);}
table.allcur tr:last-child td{border-bottom:none;}
table.allcur tr:hover td{background:var(--gold-bg);}
table.allcur tr.active-row td{background:var(--gold-bg);}
table.allcur tr.active-row .price-cell{color:var(--gold-d);}
.fl{font-size:17px;width:22px;display:inline-block;text-align:center;}
.cur-name-bold{font-weight:600;}
.cur-badge{display:inline-block;background:var(--sub);border-radius:3px;font-size:10px;padding:1px 5px;margin-left:5px;color:var(--muted);}
.price-cell{font-weight:700;font-size:14px;color:var(--text);}
.cur-link{display:inline-block;font-size:11px;color:var(--gold-d);text-decoration:none;margin-left:8px;font-weight:500;opacity:.8;}
.cur-link:hover{opacity:1;text-decoration:underline;}

/* WEIGHT TABLE */
.table-wrap{background:var(--bg-white);border:1.5px solid var(--sub);border-radius:var(--r);overflow:hidden;}
table.wt{width:100%;border-collapse:collapse;font-size:13px;}
table.wt th{padding:10px 16px;font-size:10px;font-weight:700;color:var(--dim);letter-spacing:.07em;text-transform:uppercase;border-bottom:1.5px solid var(--sub);text-align:left;background:var(--bg);}
table.wt td{padding:12px 16px;border-bottom:1px solid var(--sub);color:var(--text);}
table.wt tr:last-child td{border-bottom:none;}
table.wt tr:hover td{background:var(--gold-bg);}
.ktag{display:inline-block;background:var(--gold-bg);border:1px solid rgba(180,145,60,.35);color:var(--gold-d);font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;}

/* CONVERTER */
.converter-box{background:var(--bg-white);border:1.5px solid var(--sub);border-radius:var(--r);padding:22px;margin-bottom:14px;}
.conv-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.conv-inp{background:var(--bg);border:1.5px solid var(--sub);border-radius:var(--rs);padding:10px 14px;color:var(--text);font-size:14px;font-family:'Plus Jakarta Sans',sans-serif;width:120px;font-weight:500;}
.conv-inp:focus{outline:none;border-color:var(--gold);}
.conv-sel{background:var(--bg);border:1.5px solid var(--sub);border-radius:var(--rs);padding:10px 12px;color:var(--text);font-size:13px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;}
.conv-btn{background:var(--gold);border:none;border-radius:var(--rs);padding:10px 20px;color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:background .15s;}
.conv-btn:hover{background:var(--gold-d);}
.conv-result-aed{font-size:14px;font-weight:600;color:var(--gold-d);margin-bottom:12px;min-height:22px;}
.conv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.conv-cell{background:var(--bg);border:1px solid var(--sub);border-radius:var(--rs);padding:12px;text-align:center;}
.conv-cell-flag{font-size:18px;margin-bottom:4px;}
.conv-cell-val{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;color:var(--text);}
.conv-cell-lbl{font-size:10px;color:var(--dim);margin-top:2px;font-weight:500;}

/* CHART */
.ctrl-row{display:flex;gap:3px;background:var(--bg-white);border:1.5px solid var(--sub);border-radius:var(--rs);padding:3px;}
.ctrl{padding:5px 12px;border-radius:6px;border:none;background:transparent;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .15s;}
.ctrl.on{background:var(--gold);color:#fff;}
.karat-row{display:flex;gap:6px;margin-bottom:12px;}
.kbtn{padding:4px 11px;border-radius:100px;border:1.5px solid var(--sub);background:var(--bg-white);color:var(--muted);font-size:11px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;transition:all .15s;}
.kbtn.on{border-color:var(--gold);color:var(--gold-d);background:var(--gold-bg);font-weight:600;}
.chart-wrap{background:var(--bg-white);border:1.5px solid var(--sub);border-radius:var(--r);padding:18px;}
.chart-stats{display:flex;gap:24px;margin-bottom:14px;flex-wrap:wrap;}
.cs-l{font-size:10px;color:var(--dim);margin-bottom:2px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:8px;}
.faq-item{background:var(--bg-white);border:1.5px solid var(--sub);border-radius:var(--rs);overflow:hidden;}
.faq-q{padding:14px 16px;font-size:14px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;color:var(--text);}
.faq-q:hover{color:var(--gold-d);background:var(--gold-bg);}
.faq-arr{font-size:12px;color:var(--dim);transition:transform .2s;}
.faq-a{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s;font-size:13px;color:var(--muted);line-height:1.75;}
.faq-a a{text-decoration:underline;}
.faq-item.open .faq-a{max-height:300px;padding:0 16px 14px;}
.faq-item.open .faq-arr{transform:rotate(180deg);}
.faq-item.open .faq-q{color:var(--gold-d);}

/* AFFILIATES */
.aff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.aff-card{background:var(--bg-white);border:1.5px solid var(--sub);border-radius:var(--r);padding:20px;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;display:block;}
.aff-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 4px 16px rgba(180,145,60,.1);}
.aff-icon{width:40px;height:40px;background:var(--gold-bg);border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:18px;}
.aff-title{font-size:14px;font-weight:700;margin-bottom:4px;color:var(--text);}
.aff-desc{font-size:11px;color:var(--muted);line-height:1.5;margin-bottom:10px;}
.aff-cta{font-size:11px;color:var(--gold-d);font-weight:600;}
.aff-badge{float:right;background:var(--gold-bg);border:1px solid rgba(180,145,60,.3);color:var(--gold-d);font-size:9px;padding:2px 6px;border-radius:3px;font-weight:700;}

/* SEO CONTENT */
.seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;}
.seo-block h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;color:var(--gold-d);margin-bottom:10px;}
.seo-block p,.seo-block li{font-size:13px;color:var(--muted);line-height:1.75;margin-bottom:7px;}
.seo-block ul{padding-left:16px;}
.seo-block a{color:var(--gold-d);text-decoration:underline;font-weight:500;}
.seo-block a:hover{text-decoration:underline;}
.disclaimer{font-size:11px;color:var(--dim);background:var(--bg);border:1.5px solid var(--sub);border-radius:var(--rs);padding:12px 16px;margin-top:20px;line-height:1.6;}

/* FOOTER */
.site-footer{border-top:1.5px solid var(--sub);padding:24px;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:var(--bg-white);}
.flogo{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;color:#1A1A1A;font-weight:700;letter-spacing:-.01em;}
.flogo span{color:var(--gold);}
.flinks{display:flex;gap:16px;flex-wrap:wrap;}
.flinks a{font-size:11px;color:var(--dim);text-decoration:none;transition:color .2s;font-weight:500;}
.flinks a:hover{color:var(--gold-d);}
.fcopy{width:100%;font-size:10px;color:var(--dim);}


/* ── HAMBURGER BUTTON ── */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:transparent;border:1.5px solid var(--sub);border-radius:var(--rs);cursor:pointer;padding:8px;flex-shrink:0;}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all .25s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── MOBILE MENU OVERLAY ── */
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:998;}
.mob-overlay.open{display:block;}
.mob-menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);background:var(--bg-white);z-index:999;transform:translateX(100%);transition:transform .3s ease;box-shadow:-8px 0 32px rgba(0,0,0,.12);display:flex;flex-direction:column;}
.mob-menu.open{transform:translateX(0);}
.mob-menu-inner{display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:0 0 24px;}
.mob-menu-top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1.5px solid var(--sub);}
.mob-close{background:transparent;border:1.5px solid var(--sub);border-radius:var(--rs);width:32px;height:32px;cursor:pointer;font-size:14px;color:var(--muted);display:flex;align-items:center;justify-content:center;}
.mob-close:hover{color:var(--text);border-color:var(--text);}
.mob-nav{display:flex;flex-direction:column;padding:8px 0;}
.mob-nav a{padding:14px 20px;font-size:15px;font-weight:500;color:var(--text);text-decoration:none;border-bottom:1px solid var(--sub);transition:background .15s;}
.mob-nav a:hover{background:var(--gold-bg);color:var(--gold-d);}
.mob-nav a:last-child{border-bottom:none;}
.mob-divider{height:8px;background:var(--bg);border-top:1px solid var(--sub);border-bottom:1px solid var(--sub);}
.mob-currencies{padding:16px 20px;}
.mob-cur-label{font-size:10px;font-weight:700;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;}
.mob-cur-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mob-cur-pill{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 6px;background:var(--bg);border:1.5px solid var(--sub);border-radius:var(--rs);font-size:12px;font-weight:600;color:var(--text);text-decoration:none;transition:all .15s;}
.mob-cur-pill:hover{border-color:var(--gold);color:var(--gold-d);background:var(--gold-bg);}


/* Silver cards — 2 cols mobile, 4 cols desktop */
.silver-grid { grid-template-columns: repeat(2, 1fr) !important; }
@media(min-width:600px) { .silver-grid { grid-template-columns: repeat(4, 1fr) !important; } }

/* RESPONSIVE */
@media(max-width:900px){.site-nav{display:none;}.cur-pills{display:none;}.hamburger{display:flex;}}
@media(max-width:768px){
  .rate-grid{grid-template-columns:repeat(2,1fr);}
  .info-row{grid-template-columns:repeat(2,1fr);}
  .k22-grid{grid-template-columns:repeat(2,1fr);}
  .conv-grid{grid-template-columns:repeat(2,1fr);}
  .aff-grid{grid-template-columns:1fr;}
  .seo-grid{grid-template-columns:1fr;}
  .hero-title{font-size:24px;}
  .hero-meta{text-align:left;}
}

/* ── MOBILE TABLE FIXES ── */
@media(max-width:768px){
  /* Make all tables horizontally scrollable */
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Hide less important columns on mobile to reduce overflow */
  .wt th:nth-child(5), .wt td:nth-child(5),  /* AED/oz in main karat table */
  .wt th:nth-child(6), .wt td:nth-child(6),  /* INR/gram */
  .wt th:nth-child(7), .wt td:nth-child(7)   /* USD/gram */
  { display:none; }

  /* Last 10 days — hide USD/oz column, shorten date */
  #gr10DaysTable th:nth-child(6),
  #gr10DaysTable td:nth-child(6){ display:none; }

  /* All currencies table — hide 10g and tola columns on mobile */
  .allcur th:nth-child(4), .allcur td:nth-child(4),
  .allcur th:nth-child(5), .allcur td:nth-child(5){ display:none; }

  /* Weight table — hide INR columns on mobile */
  .wt th:nth-child(5), .wt td:nth-child(5),
  .wt th:nth-child(6), .wt td:nth-child(6){ display:none; }

  /* Reduce table font size on mobile */
  .wt td, .wt th, .allcur td, .allcur th{ font-size:12px; padding:8px 6px; }
  #gr10DaysTable td, #gr10DaysTable th{ font-size:12px; padding:6px 5px; white-space:nowrap; }
}