/* Hetauda Updates AI v1.2.7 — self-contained rate widget.
   Scoped to .huag-rates: it does not override Picostrap or LiveCanvas elements. */
.huag-rates {
  --huag-ink:#172e3e;
  --huag-muted:#5e7180;
  --huag-line:#e3ebee;
  --huag-teal:#087e75;
  box-sizing:border-box;
  display:block;
  width:100%; max-width:100%; min-width:0;
  color:var(--huag-ink);
  font-family:inherit; font-size:14px; line-height:1.5;
  container: huag-widget / inline-size;
}
.huag-rates *, .huag-rates *::before, .huag-rates *::after { box-sizing:border-box; }
.huag-rates__headline { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:8px 12px; margin:0 0 14px; }
.huag-rates__eyebrow { font-size:11px; font-weight:800; line-height:1.5; letter-spacing:.11em; text-transform:uppercase; color:var(--huag-teal); }
.huag-rates__status { display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%; border-radius:999px; background:#e7f5f1; padding:5px 11px; color:#146b60; font-size:11px; font-weight:700; line-height:1.4; }
.huag-rates__status::before { content:""; flex:none; display:block; width:7px; height:7px; border-radius:50%; background:#1ea88c; }
.huag-rates__status--cached { color:#946008; background:#fff3de; }
.huag-rates__status--cached::before { background:#cc901f; }
/* Always stack metals. Within each metal the two rate units respond to container width. */
.huag-rates__grid { display:grid; grid-template-columns:minmax(0,1fr); gap:11px; min-width:0; width:100%; }
.huag-rates__card { display:block; min-width:0; max-width:100%; overflow:hidden; padding:16px; border:1px solid var(--huag-line); border-radius:17px; margin:0; }
.huag-rates__card--gold { background:linear-gradient(135deg,#fff9ec 0%,#fffdf9 100%); border-color:#efdfa9; }
.huag-rates__card--silver { background:linear-gradient(135deg,#f1f6f9 0%,#fbfdfe 100%); border-color:#dce7ed; }
.huag-rates__card-head { display:flex; align-items:center; gap:10px; margin:0 0 13px; min-width:0; }
.huag-rates__symbol { display:inline-grid; flex:none; place-items:center; width:35px; height:35px; border-radius:10px; background:#f5dea5; color:#765519; font-size:13px; font-weight:800; line-height:1; }
.huag-rates__card--silver .huag-rates__symbol { background:#dbe6ed; color:#526778; }
.huag-rates .huag-rates__name { margin:0; color:var(--huag-ink); font-family:inherit; font-size:16px; font-weight:800; letter-spacing:-.015em; line-height:1.35; }
.huag-rates__quotes { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; min-width:0; }
.huag-rates__quote { min-width:0; width:100%; max-width:100%; border-radius:11px; padding:11px 12px; background:rgba(255,255,255,.78); border:1px solid rgba(142,163,174,.18); }
.huag-rates__quote-heading { display:flex; align-items:center; flex-wrap:wrap; gap:5px 8px; margin:0 0 4px; min-width:0; }
.huag-rates__quote-label { font-size:12px; font-weight:700; line-height:1.35; color:#586b78; }
.huag-rates__approx { display:inline-block; border-radius:999px; padding:1px 6px; color:#86631b; background:rgba(249,226,157,.38); font-size:9px; font-weight:800; white-space:nowrap; }
.huag-rates__amount { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; width:100%; max-width:100%; min-width:0; margin:0; color:var(--huag-ink); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; line-height:1.18; }
.huag-rates__currency { display:inline-block; flex:none; font-size:14px; font-weight:750; white-space:nowrap; }
/* Use container width (not viewport width). Digits stay inside each quote. */
.huag-rates__digits { display:inline-block; min-width:0; max-width:100%; font-size:clamp(19px, 5.7cqw, 29px); font-weight:850; letter-spacing:-.035em; overflow-wrap:anywhere; }
.huag-rates__details { margin:15px 0 0; min-width:0; }
.huag-rates__detail { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 10px; margin:0 0 10px; color:var(--huag-ink); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.huag-rates__detail-label { color:#5a6e7a; font-weight:750; }
.huag-rates__timezone { color:var(--huag-muted); }
.huag-rates__source { margin:13px 0 5px; padding-top:13px; border-top:1px solid var(--huag-line); font-size:12px; line-height:1.65; color:#526675; overflow-wrap:anywhere; }
.huag-rates .huag-rates__source-link { color:var(--huag-teal); font-weight:800; text-underline-offset:3px; }
.huag-rates .huag-rates__source-link:hover { color:#065a55; }
.huag-rates__small { margin:6px 0 0; color:#60737f; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.huag-rates__cached-warning { margin:9px 0; padding:10px 11px; border-radius:10px; background:#fff5e4; color:#865917; font-size:11px; line-height:1.55; }
.huag-rates--unavailable { border:1px solid var(--huag-line); border-radius:12px; padding:14px 16px; background:#f8fafb; }
.huag-rates__unavailable-title { margin:0 0 6px; font-size:14px; font-weight:700; }
@container huag-widget (min-width: 540px) {
  .huag-rates__quotes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .huag-rates__quote { padding:14px 15px; }
  .huag-rates__card { padding:18px; }
}
@container huag-widget (max-width: 360px) {
  .huag-rates__detail { display:block; }
  .huag-rates__detail-label { display:block; }
  .huag-rates__card { padding:12px; }
  .huag-rates__quote { padding:10px 11px; }
  .huag-rates__digits { font-size:clamp(19px, 6.4cqw, 25px); }
}
@media (prefers-reduced-motion: no-preference) {
  .huag-rates__card { transition: box-shadow .18s ease; }
  .huag-rates__card:hover { box-shadow:0 6px 22px rgba(12,45,62,.06); }
}
