/* ==========================================================================
   assets/tool.css — Zinuk MeHon LeHon TOOL & LIBRARY-GRID DESIGN SYSTEM
   --------------------------------------------------------------------------
   Shares the homepage visual DNA (Open Sans Hebrew · navy #042F47 · gold
   #f59e0b · shadow-luxe) with the tool library grid, the article/tool grids
   and the interactive calculators — WITHOUT touching any calculation JS.
   Purely presentational: premium product-card hover, gold CTA shimmer,
   modern range sliders, and prominent result-card emphasis.
   RTL-first, mobile-safe (zero horizontal overflow).
   ========================================================================== */

:root {
  --navy: #042F47;
  --navy-600: #0a3a57;
  --ink: #0a192f;
  --gold-400: #fbbf24;
  --gold-500: #f59e0b;
  --gold-600: #d97706;
  --emerald: #10b981;
  --luxe: 0 24px 50px -20px rgba(4, 47, 71, 0.28);
}

/* ---- global RTL / overflow guards ---- */
html, body { overflow-x: hidden; max-width: 100%; }

/* ---- gold CTA shimmer button (homepage parity) ---- */
.btn-cta { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); position: relative; overflow: hidden; }
.btn-cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.btn-cta:hover::after { transform: translateX(120%); }

/* ==========================================================================
   PREMIUM PRODUCT CARDS (library grids)
   Applied by adding `premium-card` to a card that already has overflow-hidden.
   ========================================================================== */
.premium-card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform; }
.premium-card:hover { transform: translateY(-6px); border-color: var(--gold-500); box-shadow: var(--luxe); }
.premium-card img { transition: transform .45s ease; }
.premium-card:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .premium-card, .premium-card img { transition: none; }
  .premium-card:hover { transform: none; }
  .premium-card:hover img { transform: none; }
}

/* ==========================================================================
   CALCULATOR RESULT EMPHASIS
   Opt-in glow that makes result numbers pop with rewarding visual feedback.
   ========================================================================== */
.result-glow { box-shadow: 0 0 0 1px rgba(245,158,11,.30), 0 22px 45px -18px rgba(245,158,11,.45) !important; }
.result-pop { animation: resultPop .5s cubic-bezier(.18,.89,.32,1.28) both; }
@keyframes resultPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* ==========================================================================
   MODERN GOLD RANGE SLIDER (opt-in via `.range-gold`)
   ========================================================================== */
input[type=range].range-gold {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
  border-radius: 9999px; background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); outline: none; cursor: pointer;
}
input[type=range].range-gold::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 9999px;
  background: #fff; border: 3px solid var(--gold-500); box-shadow: 0 4px 12px rgba(245,158,11,.45);
  transition: transform .15s ease;
}
input[type=range].range-gold::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type=range].range-gold::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 9999px; background: #fff; border: 3px solid var(--gold-500);
  box-shadow: 0 4px 12px rgba(245,158,11,.45);
}