*{box-sizing:border-box;}
html,body{
  margin:0;
  min-height:100vh;
  background:#FFFFFF;
  font-family:'Space Grotesk',sans-serif;
  color:#3A1219;
}
.wrap{ max-width:1040px; margin:0 auto; padding:22px 16px 60px; }

/* ---- header ---- */
.topnav{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:10px;
  background:#FFFFFF;
  border:1px solid rgba(110,37,48,0.16);
  border-radius:16px;
  padding:16px 22px;
  margin-bottom:16px;
  box-shadow:0 4px 16px rgba(58,15,24,0.05);
  direction:ltr;
}
html[dir="rtl"] .topnav{ align-items:flex-start; direction:rtl; }
.nav-brand{ display:flex; align-items:center; gap:12px; direction:rtl; }
@media (min-width:760px){
  .topnav{
    flex-direction:row-reverse;
    justify-content:space-between;
    align-items:center;
  }
}
.nav-coin{
  width:80px;height:80px;border-radius:50%;
  flex-shrink:0;
  overflow:hidden;
}
.nav-coin img{ width:100%; height:100%; object-fit:cover; display:block; }
.nav-brand-name{ font-family:'Cairo',sans-serif; font-weight:700; font-size:30px; color:#3A1219; }
.nav-sub{ font-size:12px; font-weight:700; color:#7A5D48; letter-spacing:.04em; }
.nav-since{ font-size:11px; font-weight:600; color:#9C7E68; letter-spacing:.12em; margin-top:2px; }

.status-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }

.lang-btn{
  font-family:'Cairo','Space Grotesk',sans-serif;
  font-size:12px; font-weight:700;
  color:#6E2530; background:#FFFFFF;
  border:1px solid rgba(110,37,48,0.3);
  border-radius:14px;
  padding:5px 14px;
  cursor:pointer;
  transition:background-color .15s ease;
}
.lang-btn:hover{ background:#F6EAE6; }

.pill{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:#1F6B4C;
  background:#E9F7EF;
  border:1px solid rgba(63,180,120,0.35);
  border-radius:14px;
  padding:5px 12px;
  direction:ltr;
  white-space:nowrap;
}
.pill.offline{
  color:#A23A2E;
  background:#FBEAE7;
  border-color:rgba(224,102,90,0.35);
}
.pill.neutral{
  color:#6E2530;
  background:#F6EAE6;
  border-color:rgba(110,37,48,0.25);
}
.dot{width:7px;height:7px;border-radius:50%;background:#3FB478;flex-shrink:0;}
.pill.offline .dot{ background:#E0665A; }
.pill.neutral .dot{ background:#6E2530; }

/* ---- page menu ---- */
.menu{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-bottom:22px;
  direction:inherit;
}
.menu a{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:#7A5D48; text-decoration:none;
  padding:9px 16px; border-radius:10px;
  border:1px solid rgba(110,37,48,0.14);
  background:#FFFFFF;
  transition:background-color .15s ease, color .15s ease;
}
.menu a:hover{ background:#F6EAE6; color:#3A1219; }
.menu a.active{ background:#6E2530; color:#F6EEE1; border-color:#6E2530; }

/* ---- section titles ---- */
.section-title{
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#7A5D48;
  margin:26px 4px 12px;
  direction:inherit;
  font-weight:600;
}

/* ---- karat cards: 2x2 on mobile, 4-across on desktop ---- */
.karat-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  direction:inherit;
}
@media (min-width:760px){
  .karat-grid{ grid-template-columns:repeat(4, 1fr); }
}
.karat-card{
  position:relative;
  background:linear-gradient(160deg, #7A2A37, #4A1620);
  border:1px solid rgba(110,37,48,0.4);
  border-radius:16px;
  padding:14px 14px 12px;
  direction:inherit;
  box-shadow:0 10px 28px rgba(74,22,32,0.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.karat-card:hover, .karat-card:active{ transform: translateY(-2px); box-shadow:0 14px 34px rgba(74,22,32,0.32); }
.karat-top{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.karat-badge{
  width:34px;height:34px;border-radius:10px;
  background:#F6EEE1;
  color:#6E2530;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
  flex-shrink:0;
}
.karat-name{ font-weight:600; font-size:13px; color:#F0DCC9; }
.karat-price{ font-size:23px; font-weight:700; color:#FFFFFF; margin-bottom:4px; }
.karat-price span.unit{ font-size:12px; font-weight:500; color:#F0DCC9; }
.karat-live{
  display:flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; color:#7EE8B5;
}
.karat-live .dot{ width:6px; height:6px; background:#7EE8B5; }

/* ---- bars table ---- */
.table-card{
  background:linear-gradient(165deg, #6E2530, #3F1119);
  border:1px solid rgba(110,37,48,0.4);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(74,22,32,0.22);
  direction:inherit;
}
.table-card table{ width:100%; border-collapse:collapse; font-size:14px; }
.table-card thead th{
  text-align:center; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:#F0DCC9; background:rgba(0,0,0,0.18); padding:12px 8px; font-weight:700;
}
.table-card thead th:first-child{ text-align:left; padding-left:18px; }
.table-card tbody tr{ border-top:1px solid rgba(255,255,255,0.08); transition: background-color .15s ease; }
.table-card tbody tr:nth-child(odd){ background:rgba(255,255,255,0.03); }
.table-card tbody tr:hover{ background-color: rgba(255,255,255,0.06); }
.table-card tbody td{ padding:13px 8px; text-align:center; vertical-align:middle; }
.table-card tbody td:first-child{ text-align:left; padding-left:18px; font-weight:700; color:#FFFFFF; }
.table-card tbody td:first-child small{ display:block; font-size:10px; font-weight:400; color:#F0DCC9; margin-top:1px; }
.purity{ color:#F0DCC9; font-size:13px; }
.bid-cell{ color:#F0DCC9; font-weight:600; }
.ask-cell{ color:#FFFFFF; font-weight:700; font-size:15px; }
.ask-cell .pending{ color:#F0DCC9; font-weight:500; font-size:13px; }

/* ---- content cards (about / contact / articles) ---- */
.content-card{
  background:#FFFFFF;
  border:1px solid rgba(110,37,48,0.16);
  border-radius:16px;
  padding:24px;
  box-shadow:0 4px 16px rgba(58,15,24,0.05);
  direction:inherit;
  line-height:1.7;
  color:#4A3328;
  font-size:15px;
}
.content-card h2{
  font-family:'Cairo',sans-serif;
  font-size:22px; color:#3A1219; margin:0 0 12px;
}
.content-card h3{
  font-size:16px; color:#6E2530; margin:22px 0 8px;
}
.content-card p{ margin:0 0 14px; }
.content-card ul{ margin:0 0 14px; padding-inline-start:20px; }
.content-card li{ margin-bottom:6px; }
.placeholder{
  color:#9C7E68; font-style:italic; font-size:14px;
  border:1px dashed rgba(110,37,48,0.25);
  border-radius:10px; padding:16px; text-align:center;
}

/* ---- contact / visit ---- */
.visit-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.visit-actions a{
  flex:1;
  min-width:150px;
  text-align:center;
  padding:13px 16px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  transition:filter .15s ease, transform .15s ease;
}
.visit-actions a:active{ transform:translateY(1px); }
.btn-whatsapp{ background:#25D366; color:#FFFFFF; }
.btn-whatsapp:hover{ filter:brightness(0.95); }
.btn-directions{ background:#6E2530; color:#F6EEE1; }
.btn-directions:hover{ filter:brightness(1.1); }
.hours-title{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#7A5D48; margin-bottom:10px; font-weight:600; }
.hours-list{ display:flex; flex-direction:column; }
.hours-row{
  display:flex; justify-content:space-between;
  padding:8px 2px;
  border-bottom:1px solid rgba(110,37,48,0.08);
  font-size:13px;
  color:#6E5548;
}
.hours-row:last-child{ border-bottom:none; }
.hours-row.today{ color:#3A1219; font-weight:700; }
.hours-row.today .hday::after{ content:' •'; color:#1F8F5C; }

/* ---- footer ---- */
footer{ text-align:center; margin-top:30px; font-size:12px; color:#7A5D48; direction:inherit; line-height:1.6; }
footer .brand-ar{ font-family:'Cairo',sans-serif; font-weight:700; font-size:16px; color:#6E2530; direction:rtl; margin-top:6px; }
footer .legal{ max-width:520px; margin:6px auto 0; font-size:11px; color:#B39985; }
footer .footer-links{ margin-top:10px; }
footer .footer-links a{ color:#7A5D48; text-decoration:none; margin:0 8px; }
footer .footer-links a:hover{ color:#6E2530; text-decoration:underline; }

/* ---- shimmer skeleton ---- */
@keyframes shimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
.skeleton{
  color:transparent !important;
  border-radius:6px;
  background:linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.16) 37%, rgba(255,255,255,0.06) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
}

/* ---- price flash on change ---- */
@keyframes flashUp{ 0%{ background-color:rgba(63,224,160,0.35); } 100%{ background-color:transparent; } }
@keyframes flashDown{ 0%{ background-color:rgba(224,102,90,0.35); } 100%{ background-color:transparent; } }
.flash-up{ animation:flashUp 900ms ease-out; border-radius:6px; }
.flash-down{ animation:flashDown 900ms ease-out; border-radius:6px; }

@media (max-width:520px){
  .table-card thead th:nth-child(2), .table-card tbody td:nth-child(2){ display:none; }
}

/* ---- RTL mirroring ---- */
html[dir="rtl"] .table-card thead th:first-child{ text-align:right; padding-left:8px; padding-right:18px; }
html[dir="rtl"] .table-card tbody td:first-child{ text-align:right; padding-left:8px; padding-right:18px; }
html[dir="rtl"] .hours-title,
html[dir="rtl"] .status-row{ justify-content:flex-start; }
/* prices stay latin-numeral and read left-to-right even in Arabic mode */
.karat-price .num, .bid-cell span, .ask-cell span, #ounceText{ direction:ltr; unicode-bidi:isolate; }

/* ---- language button as a link ---- */
.lang-btn{ display:inline-block; text-decoration:none; }
.nav-coin{ display:block; }

/* ---- article cards on the hub page ---- */
.article-card{
  display:block;
  text-decoration:none;
  border:1px solid rgba(110,37,48,0.18);
  border-radius:14px;
  padding:18px 20px;
  margin:18px 0;
  background:#FCF8F0;
  transition:transform .15s ease, box-shadow .15s ease;
}
.article-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(58,15,24,0.10); }
.article-card h3{ margin:0 0 8px; color:#6E2530; }
.article-card p{ margin:0 0 10px; color:#4A3328; font-size:14px; }
.read-more{ font-size:13px; font-weight:700; color:#6E2530; }

/* ---- long-form article ---- */
.article h1{
  font-family:'Cairo',sans-serif;
  font-size:27px; line-height:1.35; color:#3A1219; margin:0 0 8px;
}
.article h2{ font-size:20px; margin:30px 0 10px; color:#3A1219; }
.article h3{ font-size:16px; margin:22px 0 8px; color:#6E2530; }
.article-meta{ color:#9C7E68; font-size:13px; font-style:italic; margin-bottom:22px; }
.article blockquote{
  margin:14px 0; padding:12px 18px;
  border-inline-start:3px solid #6E2530;
  background:#FCF8F0; color:#3A1219; font-weight:600;
}
.article pre{
  background:#FCF8F0; border:1px solid rgba(110,37,48,0.14);
  border-radius:10px; padding:14px; overflow-x:auto;
  font-size:12.5px; line-height:1.7; direction:ltr; text-align:left;
}
.calc-table{ width:100%; border-collapse:collapse; margin:14px 0; font-size:14px; }
.calc-table th{
  background:#F6EAE6; color:#6E2530; text-align:start;
  padding:10px 12px; font-size:12px; text-transform:uppercase; letter-spacing:.05em;
}
.calc-table td{ padding:10px 12px; border-top:1px solid rgba(110,37,48,0.10); color:#4A3328; }
.calc-table .total-row td{ border-top:2px solid rgba(110,37,48,0.3); color:#3A1219; }
.article a{ color:#6E2530; }
.article-footer{ margin-top:30px; padding-top:16px; border-top:1px solid rgba(110,37,48,0.14); font-size:13px; color:#7A5D48; }


/* ---- responsive formula block (replaces overflowing <pre>) ---- */
.formula{
  background:#FCF8F0; border:1px solid rgba(110,37,48,0.14);
  border-radius:10px; padding:14px 16px; margin:14px 0;
}
.formula-row{
  display:flex; flex-wrap:wrap; gap:4px 10px;
  padding:7px 0; font-size:13.5px; line-height:1.6;
  border-bottom:1px dashed rgba(110,37,48,0.14);
}
.formula-row:last-child{ border-bottom:none; }
.formula-row.total{
  border-bottom:none; border-top:2px solid rgba(110,37,48,0.28);
  margin-top:4px; font-weight:700; color:#3A1219;
}
.formula-label{ font-weight:700; color:#6E2530; min-width:120px; }
.formula-calc{ color:#4A3328; }

/* article tables stay readable on small screens */
@media (max-width:520px){
  .calc-table{ font-size:13px; }
  .calc-table th, .calc-table td{ padding:8px 8px; }
}

/* ---- price explanation note under the bullion table ---- */
.price-note{
  background:#FCF8F0;
  border:1px solid rgba(110,37,48,0.14);
  border-radius:14px;
  padding:18px 20px;
  margin-top:16px;
  direction:inherit;
}
.price-note h3{
  margin:0 0 10px; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:#6E2530;
}
.price-note p{ margin:0 0 10px; font-size:13.5px; line-height:1.7; color:#4A3328; }
.price-note-link{
  display:inline-block; font-size:13px; font-weight:700;
  color:#6E2530; text-decoration:none;
}
.price-note-link:hover{ text-decoration:underline; }

/* ---- chart page ---- */
.chart-wrap{
  height:520px;
  background:#FFFFFF;
  border:1px solid rgba(110,37,48,0.16);
  border-radius:16px;
  padding:10px;
  margin-top:14px;
  box-shadow:0 4px 16px rgba(58,15,24,0.05);
  overflow:hidden;
  direction:ltr;
}
@media (max-width:520px){ .chart-wrap{ height:420px; } }
.tradingview-widget-copyright{
  font-size:11px; text-align:center; padding-top:4px; color:#9C7E68;
}
.tradingview-widget-copyright a{ color:#9C7E68; text-decoration:none; }

.convert-row{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 14px; }
.convert-box{
  flex:1; min-width:140px;
  background:#FFFFFF;
  border:1px solid rgba(110,37,48,0.16);
  border-radius:12px;
  padding:12px 14px;
}
.convert-label{
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:#9C7E68; margin-bottom:4px;
}
.convert-value{ font-size:19px; font-weight:700; color:#3A1219; direction:ltr; }

/* fallback sits behind the widget; the widget paints over it once loaded */
.chart-wrap{ position:relative; }
.chart-fallback{
  position:absolute; inset:10px;
  display:flex; align-items:center; justify-content:center;
  color:#9C7E68; font-size:14px; pointer-events:none;
}
.tradingview-widget-container__widget{ position:relative; z-index:1; }

/* tighter menu so five items sit comfortably on a phone */
@media (max-width:520px){
  .menu{ gap:5px; }
  .menu a{ padding:8px 12px; font-size:12.5px; }
}

/* ---- FAQ page (questions open and close; answers stay in the page for search engines) ---- */
.faq h2{ margin:30px 0 2px; }
.faq-item{ border-bottom:1px solid rgba(110,37,48,0.12); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:13px 2px; font-weight:600; font-size:15px; line-height:1.55; color:#3A1219;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:''; flex:none; width:8px; height:8px; margin-top:7px;
  border-right:2px solid #6E2530; border-bottom:2px solid #6E2530;
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:11px; }
.faq-item summary:hover{ color:#6E2530; }
.faq-item summary:focus-visible{ outline:2px solid #C58B4F; outline-offset:2px; border-radius:6px; }
.faq-a{ padding:0 2px 14px; }
.faq-a p:last-child, .faq-a ul:last-child{ margin-bottom:0; }
.faq-more{ margin-top:34px; }
.faq-more h2{ margin:0 0 14px; font-size:18px; }
.faq-more .visit-actions{ margin-bottom:0; }
.faq .visit-actions .btn-whatsapp{ color:#FFFFFF; }
.faq .visit-actions .btn-directions{ color:#F6EEE1; }
@media (prefers-reduced-motion: reduce){ .faq-item summary::after{ transition:none; } }

/* ---- contact page: pointer to the FAQ ---- */
.contact-faq{ margin:20px 0 0 !important; padding-top:16px; border-top:1px solid rgba(110,37,48,0.12); font-size:14px; }
.contact-faq a{ color:#6E2530; font-weight:700; }