/* =========================================
   ALMURAKIB GOLD - CLEAN PREMIUM DARK
========================================= */

:root{
  --bg:#0b0f14;
  --panel:#11161d;
  --panel-2:#151c24;
  --panel-3:#1a222c;
  --border:rgba(255,255,255,.08);
  --border-soft:rgba(255,255,255,.05);

  --text:#f8fafc;
  --text-soft:#cbd5e1;
  --text-muted:#94a3b8;

  --gold:#facc15;
  --gold-2:#f59e0b;
  --gold-soft:rgba(250,204,21,.14);

  --green:#22c55e;
  --red:#ef4444;

  --shadow-xl:0 30px 70px rgba(0,0,0,.45);
  --shadow-lg:0 18px 42px rgba(0,0,0,.35);
  --shadow-md:0 10px 26px rgba(0,0,0,.28);

  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:16px;
}

/* ===== Main Widget ===== */

.alm-gold-widget{
  position:relative;
  overflow:hidden;
  padding:32px;
  border-radius:var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(250,204,21,.08), transparent 22%),
    linear-gradient(180deg, #0f141a 0%, #0b0f14 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xl);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.alm-gold-widget::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.02), transparent 35%, transparent 70%, rgba(255,255,255,.015));
}

/* ===== Top Cards ===== */

.gold-top{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-bottom:28px;
}

.gold-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:26px;
  background:
    linear-gradient(180deg, rgba(22,29,38,.96) 0%, rgba(14,19,26,.96) 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
}

.gold-card::before{
  content:"";
  position:absolute;
  top:-80px;
  right:-80px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(250,204,21,.18), transparent 70%);
  pointer-events:none;
}

.gold-card > span{
  display:block;
  margin-bottom:14px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--text-muted);
}

.gold-price-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.gold-price-line:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.gold-price-line small{
  font-size:12px;
  font-weight:700;
  color:var(--gold);
  letter-spacing:.6px;
  text-transform:uppercase;
  flex-shrink:0;
}

.price-row{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  direction:ltr;
  line-height:1;
}

.price{
  font-size:42px;
  font-weight:900;
  color:#ffffff !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:.3px;
  text-shadow:0 2px 14px rgba(255,255,255,.05);
}

.arrow{
  width:18px;
  text-align:center;
  font-size:18px;
  color:var(--text-muted);
  transition:transform .25s ease, opacity .25s ease, color .25s ease;
}

.arrow.up{
  color:var(--green);
  animation:almArrowUp .35s ease;
}

.arrow.down{
  color:var(--red);
  animation:almArrowDown .35s ease;
}

@keyframes almArrowUp{
  0%{transform:translateY(7px);opacity:.4}
  100%{transform:translateY(0);opacity:1}
}

@keyframes almArrowDown{
  0%{transform:translateY(-7px);opacity:.4}
  100%{transform:translateY(0);opacity:1}
}

/* ===== Table ===== */

.gold-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(19,25,33,.98) 0%, rgba(12,17,24,.98) 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}

.gold-table thead th{
  padding:16px 14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-align:center;
  color:#e5e7eb;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}

.gold-table thead th:first-child{
  color:var(--gold);
}

.gold-table tbody td{
  padding:16px 12px;
  text-align:center;
  color:#f8fafc !important;
  border-bottom:1px solid var(--border-soft);
  background:transparent;
  vertical-align:middle;
}

.gold-table tbody tr:last-child td{
  border-bottom:none;
}

.gold-table tbody tr:nth-child(even) td{
  background:rgba(255,255,255,.015);
}

.gold-table tbody tr:hover td{
  background:rgba(250,204,21,.06);
}

.gold-table tbody td:first-child{
  color:#fff0b3 !important;
  font-weight:800;
}

.table-price-row{
  justify-content:center;
}

.table-price-row .price{
  font-size:16px;
  font-weight:800;
  color:#ffffff !important;
}

.table-price-row .arrow{
  font-size:12px;
  width:14px;
}

/* ===== Gold Bars ===== */

.gold-bars{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

.bar-card{
  position:relative;
  overflow:hidden;
  padding:24px;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(19,25,33,.96) 0%, rgba(12,17,24,.96) 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bar-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--gold-2), var(--gold), #fde68a);
}

.bar-card::after{
  content:"";
  position:absolute;
  top:-70px;
  right:-70px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(250,204,21,.13), transparent 70%);
  pointer-events:none;
}

.bar-card:hover{
  transform:translateY(-6px);
  border-color:rgba(250,204,21,.18);
  box-shadow:0 22px 50px rgba(0,0,0,.38);
}

.bar-weight{
  margin-bottom:16px;
  font-size:20px;
  font-weight:900;
  color:#fff3c4;
  letter-spacing:.2px;
}

.bar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,.07);
}

.bar-row:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.bar-row span{
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#b8c2cf !important;
}

.bar-row strong{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  min-width:72px;
  font-size:20px;
  font-weight:900;
  color:#ffffff !important;
  font-variant-numeric:tabular-nums;
}

/* ===== Responsive ===== */

@media (max-width: 1180px){
  .gold-bars{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 900px){
  .alm-gold-widget{
    padding:24px;
  }

  .gold-top{
    grid-template-columns:1fr;
    gap:18px;
  }

  .price{
    font-size:34px;
  }

  .gold-bars{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .alm-gold-widget{
    padding:18px;
    border-radius:20px;
  }

  .gold-card{
    padding:20px;
    border-radius:18px;
  }

  .gold-price-line{
    padding:8px 0;
  }

  .price{
    font-size:28px;
  }

  .gold-table thead th,
  .gold-table tbody td{
    padding:12px 10px;
    font-size:13px;
  }

  .table-price-row .price{
    font-size:14px;
  }

  .gold-bars{
    grid-template-columns:1fr;
    gap:16px;
  }

  .bar-card{
    padding:20px;
    border-radius:18px;
  }

  .bar-row strong{
    font-size:18px;
  }
}