/* ══════════ SyPRate Premium Design (مطابق للتصميم الأصلي) ══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:       #1C4A32;
  --green-light: #2E6B47;
  --green-dim:   #0D2B1F;
  --green-glow:  rgba(201,168,76,0.15);
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-dim:    #9C8038;
  --bg:          #FAF7EF;
  --bg2:         #F2ECDA;
  --card:        #FFFFFF;
  --border:      #E5DCC0;
  --text:        #1a1a1a;
  --text2:       #5C5544;
  --text3:       #9C9480;
  --shadow:      0 4px 24px rgba(28,74,50,0.10);
}

.pattern-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='0.7' opacity='0.5'%3E%3Cpath d='M45 5 L75 25 L75 65 L45 85 L15 65 L15 25 Z'/%3E%3Cpath d='M45 20 L62 32 L62 58 L45 70 L28 58 L28 32 Z'/%3E%3Ccircle cx='45' cy='45' r='10'/%3E%3Cpath d='M45 5 L45 20 M45 70 L45 85 M15 25 L28 32 M62 32 L75 25 M15 65 L28 58 M62 58 L75 65'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 90px 90px;
}

body {
  font-family: 'Cairo', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.6;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='0.7'%3E%3Cpath d='M45 5 L75 25 L75 65 L45 85 L15 65 L15 25 Z'/%3E%3Cpath d='M45 20 L62 32 L62 58 L45 70 L28 58 L28 32 Z'/%3E%3Ccircle cx='45' cy='45' r='10'/%3E%3Cpath d='M45 5 L45 20 M45 70 L45 85 M15 25 L28 32 M62 32 L75 25 M15 65 L28 58 M62 58 L75 65'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 90px 90px;
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
}
header, main, footer { position: relative; z-index: 1; }
.arabic-deco { font-family: 'Amiri', serif; }

/* ─── HEADER ─── */
header {
  background: var(--green-dim);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='0.5' opacity='0.15'%3E%3Cpath d='M45 5 L75 25 L75 65 L45 85 L15 65 L15 25 Z'/%3E%3Ccircle cx='45' cy='45' r='10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 70px 70px;
  border-bottom: 2px solid var(--gold);
  padding: 0.6rem 1.5rem;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; padding: .6rem 0; }
.logo-icon {
  width: 64px; height: 64px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.logo-icon img { width: 100%; height: 100%; object-fit: contain; }
.logo-text { font-size: 1.15rem; font-weight: 800; color: var(--gold-light); font-family: 'Amiri', serif; }
.logo-sub { font-size: 0.65rem; color: #C9C0A0; display: block; font-weight: 500; }

/* ─── NAV PILLS ─── */
.nav-pills {
  display: flex; gap: .4rem; flex-wrap: wrap;
  width: 100%; order: 3; justify-content: center;
  border-top: 1px solid rgba(201,168,76,0.2);
  padding-top: .6rem; margin-top: .2rem;
}
.nav-pills a {
  font-size: .8rem; font-weight: 700; color: #E5DCC0; text-decoration: none;
  padding: .5rem 1rem; border-radius: 20px;
  border: 1.5px solid rgba(201,168,76,0.3);
  transition: all .2s;
}
.nav-pills a:hover, .nav-pills a.active {
  background: rgba(201,168,76,0.18); border-color: var(--gold); color: var(--gold-light);
}

main { max-width: 900px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

/* ─── HERO ─── */
.hero {
  background: linear-gradient(160deg, var(--green-dim) 0%, var(--green) 55%, var(--green-light) 100%);
  background-image:
    linear-gradient(160deg, rgba(13,43,31,0.96) 0%, rgba(28,74,50,0.94) 55%, rgba(46,107,71,0.92) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='0.8' opacity='0.6'%3E%3Cpath d='M60 8 L100 32 L100 88 L60 112 L20 88 L20 32 Z'/%3E%3Cpath d='M60 25 L85 40 L85 80 L60 95 L35 80 L35 40 Z'/%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3Cpath d='M60 8 L60 25 M60 95 L60 112 M20 32 L35 40 M85 40 L100 32 M20 88 L35 80 M85 80 L100 88'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
  border: 1.5px solid var(--gold);
  border-radius: 20px;
  padding: 2rem;
  color: #F2ECDA;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(13,43,31,0.35);
}
.hero-label { font-size: 0.8rem; opacity: 0.9; margin-bottom: 0.5rem; font-weight: 600; color: var(--gold-light); }
.hero-rate { font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -1px; color: #FDF8E8; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.hero-rate span { font-size: 1.1rem; font-weight: 600; opacity: 0.85; margin-right: 0.4rem; }
.hero-sub { font-size: 0.8rem; opacity: 0.85; margin-top: 0.4rem; color: #E5DCC0; }
.hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.5rem; }
.hero-card {
  background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.4);
  border-radius: 12px; padding: 0.9rem 1rem; backdrop-filter: blur(10px);
}
.hero-card-label { font-size: 0.72rem; opacity: 0.85; margin-bottom: 0.2rem; color: var(--gold-light); }
.hero-card-value { font-size: 1.3rem; font-weight: 800; color: #FDF8E8; }
.hero-badge {
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(201,168,76,0.18);border:1px solid rgba(201,168,76,0.5);
  border-radius:20px;padding:.3rem .8rem;font-size:.75rem;font-weight:600;
  color:var(--gold-light);text-decoration:none;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light); animation: pulse 2s infinite; display:inline-block;}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: 0.5; transform: scale(0.8);} }
.header-left { display: flex; align-items: center; gap: 0.75rem; }
.last-update {
  font-size: 0.72rem; color: var(--gold-light);
  background: rgba(201,168,76,0.1);
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  border: 1px solid rgba(201,168,76,0.3);
  display: flex; align-items: center; gap: 0.4rem;
}

/* ─── SECTION TITLE ─── */
.section-title {
  font-size: 1rem; font-weight: 800; color: var(--gold-dim);
  margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;
  font-family: 'Amiri', serif;
  background: #FBF6E9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='0.5' opacity='0.25'%3E%3Cpath d='M30 3 L50 17 L50 43 L30 57 L10 43 L10 17 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 1rem;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.section-title::before { content: '✦'; color: var(--gold-dim); font-size: 0.8rem; }

/* ─── INFO BANNER ─── */
.info-banner {
  background: var(--bg2); border: 1px solid var(--border); border-right: 3px solid var(--gold);
  border-radius: 10px; padding: 0.9rem 1.2rem; font-size: 0.8rem; color: var(--text2);
  margin-bottom: 1.5rem; display: flex; align-items: flex-start; gap: 0.6rem;
}

/* ─── CHART ─── */
.chart-wrap {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 1.5rem;
}
.chart-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap:wrap; }
.chart-tab {
  padding: 0.4rem 1rem; border-radius: 20px; font-family: 'Cairo', sans-serif;
  font-size: 0.8rem; font-weight: 600; cursor: pointer; border: 1.5px solid var(--border);
  background: var(--bg2); color: var(--text2); transition: all 0.2s;
}
.chart-tab.active { background: var(--gold); border-color: var(--gold); color: #1a1a1a; }

/* ─── DASHBOARD CARDS GRID ─── */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.dash-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.3rem; box-shadow: var(--shadow); position: relative;
  opacity:0; transform:translateY(14px); animation: cardIn .5s forwards;
}
@keyframes cardIn { to { opacity:1; transform:translateY(0); } }
.dash-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.dash-card-title { font-size:.85rem; font-weight:700; color:var(--gold-dim); }
.dash-card-icon { font-size:1.3rem; }
.dash-card-value { font-size:1.6rem; font-weight:900; color:var(--text); display:flex; align-items:center; gap:.4rem;}
.dash-card-sub { font-size:.72rem; color:var(--text3); margin-top:.3rem; }
.dash-card-link { display:inline-block; margin-top:.8rem; font-size:.75rem; font-weight:700; color:var(--gold-dim); border-bottom:1px solid var(--gold-dim); text-decoration:none; }

/* ─── GOLD STACKED PANELS ─── */
.gold-panel {
  border-radius: 20px; padding: 1.8rem; color: #F2ECDA; margin-bottom: 1.5rem;
  border: 1.5px solid var(--gold); position: relative; overflow: hidden;
  box-shadow: 0 8px 32px rgba(13,43,31,0.25);
}
.gold-panel.official {
  background: linear-gradient(160deg, #4a3510 0%, #6b4a1a 55%, #8f6a2e 100%);
  background-image:
    linear-gradient(160deg, rgba(74,53,16,0.94) 0%, rgba(107,74,26,0.9) 55%, rgba(143,106,46,0.88) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E8C97A' stroke-width='0.8' opacity='0.5'%3E%3Cpath d='M60 8 L100 32 L100 88 L60 112 L20 88 L20 32 Z'/%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
}
.gold-panel.world {
  background: linear-gradient(160deg, var(--green-dim) 0%, var(--green) 55%, var(--green-light) 100%);
  background-image:
    linear-gradient(160deg, rgba(13,43,31,0.96) 0%, rgba(28,74,50,0.94) 55%, rgba(46,107,71,0.92) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='0.8' opacity='0.5'%3E%3Cpath d='M60 8 L100 32 L100 88 L60 112 L20 88 L20 32 Z'/%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
}
.gold-panel h3 { font-family:'Amiri',serif; font-size:1.15rem; margin-bottom:1.1rem; display:flex; align-items:center; gap:.5rem; color:#FDF8E8;}
.gold-rows { display:grid; grid-template-columns:1fr 1fr; gap: .8rem; }
.gold-row-card {
  background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.4);
  border-radius: 12px; padding: 0.8rem 1rem; backdrop-filter: blur(10px);
}
.gold-row-label { font-size: 0.7rem; opacity: 0.85; margin-bottom: 0.2rem; color: var(--gold-light); }
.gold-row-value { font-size: 1.15rem; font-weight: 800; color: #FDF8E8; }
.gold-meta { margin-top:1rem; font-size:.75rem; opacity:.85; color:#E5DCC0; }
.change-badge { font-size:.72rem; font-weight:700; margin-top:.3rem; }
.change-up { color:#8CE0A8; }
.change-down { color:#F0A0A0; }

/* ─── RATES TABLE (reused style) ─── */
.rates-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 1.5rem; }
.rates-table { width: 100%; border-collapse: collapse; }
.rates-table thead tr { background: var(--bg2); border-bottom: 2px solid var(--border); }
.rates-table th { padding: 0.85rem 1.2rem; font-size: 0.75rem; font-weight: 700; color: var(--text2); text-align: right; }
.rates-table td { padding: 0.9rem 1.2rem; font-size: 0.9rem; border-bottom: 1px solid var(--border); }
.rates-table tbody tr:last-child td { border-bottom: none; }
.rates-table tbody tr:hover { background: var(--bg2); }

/* ─── FOOTER ─── */
footer {
  background: var(--green-dim);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='0.5' opacity='0.15'%3E%3Cpath d='M45 5 L75 25 L75 65 L45 85 L15 65 L15 25 Z'/%3E%3Ccircle cx='45' cy='45' r='10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 70px 70px;
  border-top: 2px solid var(--gold);
  text-align: center; padding: 2rem 1rem 1.5rem; color: #E5DCC0; font-size: 0.75rem;
  margin-top: 2rem;
}
footer a { color: var(--gold-light); text-decoration: none; }

/* ─── QUICK CONVERTER ─── */
.converter {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
.conv-row { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.conv-field { flex: 1; min-width: 140px; }
.conv-field label { font-size: 0.75rem; color: var(--text2); font-weight: 600; display: block; margin-bottom: 0.4rem; }
.conv-input, .conv-select {
  width: 100%; padding: 0.85rem 1rem; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--bg2); color: var(--text); font-family: 'Cairo', sans-serif;
  font-size: 1rem; font-weight: 700; outline: none; transition: border-color .2s;
}
.conv-input:focus, .conv-select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--green-glow); }
.swap-btn {
  width: 44px; height: 44px; border-radius: 50%; background: var(--green-glow);
  border: 2px solid var(--gold); color: var(--gold-dim); font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0;
}
.swap-btn:hover { background: var(--gold); color: #fff; transform: rotate(180deg); }
.conv-result {
  background: var(--bg2); border: 1.5px solid var(--gold); border-radius: 14px;
  padding: 1.2rem 1.5rem; margin-top: 1rem; text-align: center;
}
.result-main { font-size: 1.8rem; font-weight: 900; color: var(--green-light); }
.result-sub { font-size: 0.8rem; color: var(--text2); margin-top: 0.3rem; }

/* ─── RATE COLORS (reused) ─── */
.rate-buy { font-weight: 700; color: var(--green-light); }
.rate-sell { font-weight: 700; color: #B5451F; }

/* ─── SPINNER ─── */
.spinner {
  display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border);
  border-top-color: var(--green); border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── TRUST BADGES STRIP (داخل الفوتر) ─── */
.trust-strip {
  display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1rem;
  max-width: 900px; margin: 0 auto 1.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(201,168,76,.25);
}
.trust-item {
  flex: 1; min-width: 100px; text-align: center; padding: 0 .5rem;
  border-right: 1px solid rgba(201,168,76,.2);
}
.trust-item:first-child { border-right: none; }
.trust-icon { width: 30px; height: 30px; margin: 0 auto .5rem; display: block; color: var(--gold-light); }
.trust-label { font-size: .72rem; color: #E5DCC0; font-weight: 700; line-height: 1.4; }

@media (max-width: 700px) {
  .trust-strip { flex-direction: column; }
  .trust-item { border-right: none; border-bottom: 1px solid rgba(201,168,76,.15); padding-bottom: .8rem; }
  .trust-item:last-child { border-bottom: none; }
}

@media (max-width: 640px) {
  .hero-rate { font-size: 2.2rem; }
  main { padding: 1rem 1rem 3rem; }
  .gold-rows { grid-template-columns: 1fr; }
}