/* ─────────────────────────────────────────────────────────────
   Landing page — supplemental styles beyond Tailwind utilities.
   Almost everything is handled by Tailwind classes in the
   templates; this file is reserved for things Tailwind can't
   express cleanly (custom keyframes, font weight applied to
   the whole page, etc.).
   ───────────────────────────────────────────────────────────── */

/* Ensure the chosen Google Fonts win over any Tailwind base resets */
body {
  font-family: 'Tajawal', system-ui, sans-serif;
  font-weight: 400;
}
h1, h2, h3, h4 {
  font-family: 'Cairo', system-ui, sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   Pricing — billing toggle (شهري / سنوي), glassmorphism.
   These live here because the glass/backdrop-blur effect, the
   JS-driven `.bill-active` class and the `.line-through` utility
   are not emitted by Tailwind's purge (toggle state is added at
   runtime by landing.js).
   ───────────────────────────────────────────────────────────── */

/* Frosted-glass container that holds both toggles + the save badge */
.glass-toggle {
  position: relative;
  gap: 0.375rem;                         /* 6px between segments */
  padding: 0.375rem;
  border-radius: 9999px;
  background: linear-gradient(135deg,
              rgba(255, 255, 255, 0.55),
              rgba(255, 255, 255, 0.30));
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 10px 30px rgba(37, 43, 74, 0.12),  /* soft drop shadow   */
    inset 0 1px 0 rgba(255, 255, 255, 0.85),  /* top highlight */
    inset 0 -1px 0 rgba(160, 180, 255, 0.30); /* bottom tint   */
}

/* Toggle buttons */
.bill-toggle {
  position: relative;
  z-index: 1;
  padding: 0.55rem 1.6rem;
  border: none;
  background: transparent;
  color: #64748b;                        /* slate-500 */
  font-weight: 700;
  border-radius: 9999px;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.15s ease;
}
.bill-toggle:hover { color: #252B4A; }
.bill-toggle:active { transform: scale(0.97); }

/* Active (selected) toggle — raised glass pill with a blue glow */
.bill-active {
  color: #252B4A;                        /* waslaa-navy */
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.98),
              rgba(255, 255, 255, 0.78));
  box-shadow:
    0 4px 14px rgba(160, 180, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.bill-active:hover { color: #252B4A; }

/* "وفّر 20%" chip — sits *inside* the سنوي button, not a 3rd segment */
.save-chip {
  display: inline-block;
  margin-inline-start: 0.4rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  vertical-align: middle;
  background: linear-gradient(135deg, #FFB380, #FF9F60);  /* waslaa peach */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.line-through {
  text-decoration-line: line-through;
}