*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Cairo','Tajawal',Arial,sans-serif;direction:rtl;background:#f4f5f7;color:#1f2937;line-height:1.7}
:root{--gold:#b8962e;--border:#e5e7eb;--text-main:#1f2937;--text-muted:#4b5563;--bg-main:#f4f5f7;--bg-section:#ffffff;--success:#059669;--danger:#dc2626}

.site-header{width:100%;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.header-container{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:center;position:relative;min-height:64px}
.logo{position:absolute;top:50%;transform:translateY(-50%);left:20px}
.logo img{height:48px;width:auto;max-width:160px;object-fit:contain}
.nav-wrapper{display:flex;align-items:center;gap:8px}
.nav-btn{background:transparent;border:none;border-radius:6px;padding:8px 16px;font-family:inherit;font-weight:700;color:#1f2937;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s,color .2s;min-height:48px;font-size:.95rem}
.nav-btn:hover,.nav-container.open .nav-btn{background:rgba(0,0,0,.05);color:var(--gold)}
.nav-btn .arrow{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid currentColor;transition:transform .25s;flex-shrink:0;margin-top:2px}
.nav-container.open .nav-btn .arrow{transform:rotate(180deg)}
.nav-dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-10px);background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:210px;padding:8px 0;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:2000;pointer-events:none}
.nav-container{position:relative}
.nav-container.open .nav-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.nav-dropdown a{display:block;padding:10px 20px;color:var(--text-main);text-decoration:none;font-size:.92rem;transition:background .15s,color .15s}
.nav-dropdown a:hover,.nav-dropdown a.active{background:rgba(184,150,46,.08);color:var(--gold)}

.main-content{max-width:1200px;margin:0 auto;padding:20px 16px}

.page-hero{text-align:center;padding:32px 16px 24px}
.page-hero h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;color:var(--text-main);margin-bottom:8px}
.page-hero p{color:var(--text-muted);font-size:.98rem;margin-bottom:14px}
.live-badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:5px 16px;font-size:.88rem;color:var(--text-muted);font-weight:700}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse 1.5s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.country-section{margin-bottom:36px}
.country-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--border)}
.country-flag{font-size:2rem;line-height:1}
.country-title{font-size:1.2rem;font-weight:800;color:var(--text-main)}
.country-sub{font-size:.84rem;color:var(--text-muted);margin-top:2px}
.country-link{margin-right:auto;font-size:.82rem;font-weight:700;color:var(--gold);text-decoration:none;border:1px solid var(--border);border-radius:8px;padding:4px 12px;transition:border-color .2s}
.country-link:hover{border-color:var(--gold)}

.karat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.karat-card{background:#fff;border-radius:12px;padding:16px 12px;border:1px solid var(--border);text-align:center;transition:box-shadow .2s,border-color .2s}
.karat-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);border-color:var(--gold)}
.karat-badge{display:inline-block;background:var(--gold);color:#fff;font-size:.78rem;font-weight:800;padding:3px 10px;border-radius:12px;margin-bottom:6px}
.karat-name{font-size:.82rem;color:var(--text-muted);margin-bottom:8px}
.karat-price{font-size:1.35rem;font-weight:800;color:var(--gold);display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.2}
.ri{height:14px;width:auto;opacity:.8}
.karat-currency{font-size:.75rem;color:var(--text-muted);margin-top:4px}
.karat-change{font-size:.8rem;font-weight:700;margin-top:6px;padding:2px 8px;border-radius:8px;display:inline-block}
.karat-change.up{color:var(--success);background:rgba(5,150,105,.08)}
.karat-change.down{color:var(--danger);background:rgba(220,38,38,.08)}

.country-table-wrap{background:#fff;border-radius:12px;border:1px solid var(--border);overflow:hidden;margin-bottom:8px}
.country-table-title{padding:12px 16px;font-weight:800;font-size:.9rem;color:var(--text-main);border-bottom:1px solid var(--border);background:#fafafa}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:560px}
thead th{background:#f9fafb;font-weight:800;font-size:.82rem;color:var(--text-muted);padding:10px 10px;text-align:center;border-bottom:1px solid var(--border);white-space:nowrap}
tbody tr:hover{background:#fafafa}
tbody td{padding:9px 10px;text-align:center;font-size:.83rem;border-bottom:1px solid #f3f4f6}
tbody tr:last-child td{border-bottom:none}
.kl{font-weight:700;color:var(--text-main);text-align:right}
.purity{color:var(--text-muted);font-size:.8rem}
.pv{font-weight:700;color:var(--gold)}

.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:28px}
.info-card{background:#fff;border-radius:12px;border:1px solid var(--border);padding:20px}
.info-card h2{font-size:1rem;font-weight:800;color:var(--text-main);margin-bottom:10px}
.info-card p{font-size:.88rem;color:var(--text-muted);line-height:1.7}
.info-card ul{font-size:.88rem;color:var(--text-muted);padding-right:16px;line-height:1.9}
.info-card a{color:var(--gold);text-decoration:none;font-weight:700}
.info-card a:hover{text-decoration:underline}

.faq-section{background:#fff;border-radius:12px;border:1px solid var(--border);padding:24px;margin-bottom:24px}
.faq-section>h2{font-size:1.15rem;font-weight:800;margin-bottom:20px;color:var(--text-main)}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.faq-item{background:#f9fafb;border-radius:10px;padding:16px}
.faq-item h3{font-size:.9rem;font-weight:800;color:var(--text-main);margin-bottom:8px}
.faq-item p{font-size:.85rem;color:var(--text-muted);line-height:1.7}

.tips-section{background:#fff;border-radius:12px;border:1px solid var(--border);padding:24px;margin-bottom:24px}
.tips-section>h2{font-size:1.15rem;font-weight:800;margin-bottom:16px;color:var(--text-main)}
.tips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tip-card{background:#f9fafb;border-radius:10px;padding:14px 16px;font-size:.86rem;color:var(--text-muted);line-height:1.6}
.tip-card strong{display:block;color:var(--text-main);font-weight:800;margin-bottom:4px}

.related-box{background:#fff;border-radius:12px;border:1px solid var(--border);padding:20px;margin-bottom:24px}
.related-box h2{font-size:1rem;font-weight:800;color:var(--text-main);margin-bottom:14px}
.related-links{display:flex;flex-wrap:wrap;gap:10px}
.related-links a{background:#f4f5f7;border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:.87rem;font-weight:700;color:var(--text-main);text-decoration:none;transition:border-color .2s,color .2s}
.related-links a:hover{border-color:var(--gold);color:var(--gold)}

@media(max-width:700px){
  .header-container{padding:10px 12px;min-height:56px}
  .logo img{height:38px}
  .logo{left:12px}
  .nav-btn{padding:6px 10px;font-size:.82rem;min-height:44px;gap:4px}
  .nav-wrapper{gap:4px}
  .nav-dropdown{min-width:180px;left:auto;right:0;transform:translateX(0) translateY(-10px)}
  .nav-container.open .nav-dropdown{transform:translateX(0) translateY(0)}
  .karat-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .karat-card{padding:12px 8px}
  .karat-price{font-size:1.15rem}
  .karat-badge{font-size:.72rem;padding:2px 8px}
  .karat-name{font-size:.75rem}
  .karat-currency{font-size:.7rem}
  .karat-change{font-size:.73rem}
  .country-header{flex-wrap:wrap;gap:8px}
  .country-link{margin-right:0;width:100%;text-align:center}
  .info-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .tips-grid{grid-template-columns:1fr}
  thead th,tbody td{padding:8px 6px;font-size:.76rem}
  .page-hero{padding:20px 12px 16px}
  .page-hero h1{font-size:1.35rem}
  .related-links a{padding:8px 12px;font-size:.82rem}
  .faq-section,.tips-section,.related-box{padding:16px}
  .info-card{padding:16px}
}