/* ============================================================
   مساحة أمان — Safe Space landing styles
   Self-contained port of the Asia Academy design-system tokens,
   re-skinned to the official "مساحة أمان" poster theme
   (deep forest green + cream + gold).
   Loaded AFTER compass.css so these brand tokens win the cascade
   while compass.css supplies the Tailwind utilities used by the
   reused testimonials/gallery partials.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Noto+Kufi+Arabic:wght@400;500;600;700;800&display=swap");

:root {
  /* — Families — */
  --font-sans: "Cairo", "Noto Kufi Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Cairo", "Noto Kufi Arabic", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* — Size scale — */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* — Weights — */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* — Line heights — */
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* — Tracking — */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* — Spacing / layout — */
  --container-max: 80rem;

  /* — Radius — */
  --radius-sm: 0.375rem;
  --radius: 0.625rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* — Shadow — */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* — Motion — */
  --transition: all 150ms ease;
  --transition-slow: all 300ms ease;
  --hover-lift: translateY(-0.25rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== Event theme — official "مساحة أمان" poster =====
     Deep forest green + cream + gold. */
  --primary: #356B4E;
  --primary-light: #4A8A68;
  --primary-dark: #21452F;
  --primary-foreground: #FFFFFF;

  --secondary: #C0992F;
  --secondary-light: #D8B85A;
  --secondary-dark: #8E6E18;
  --secondary-foreground: #2A2208;

  --gradient-primary: linear-gradient(to bottom right, #356B4E, #4A8A68);
  --gradient-primary-deep: linear-gradient(to bottom right, #2C5740, #1B3A28);
  --gradient-secondary: linear-gradient(to bottom right, #D8B85A, #C0992F);
  --gradient-secondary-deep: linear-gradient(to bottom right, #C0992F, #8E6E18);
  --gradient-cream: linear-gradient(to bottom right, #F3EEDD, #FFFFFF);

  --primary-tint: rgba(53, 107, 78, 0.12);
  --primary-wash: rgba(53, 107, 78, 0.08);
  --secondary-tint: rgba(192, 153, 47, 0.16);
  --focus-ring: rgba(53, 107, 78, 0.18);

  /* — Neutral / surfaces — */
  --cream: #F3EEDD;
  --background: #FFFFFF;
  --surface: #FFFFFF;
  --surface-muted: #F9FAFB;
  --border: #E5E7EB;
  --border-strong: rgba(0, 0, 0, 0.10);

  /* — Text — */
  --heading: #111827;
  --body: #374151;
  --muted: #4B5563;
  --on-color: #FFFFFF;

  /* — Bridge vars: the reused compass partials reference these names — */
  --gold: #C0992F;
  --foreground: #374151;
  --muted-foreground: #4B5563;
}

/* — Base / RTL document defaults — */
html.ss-page {
  direction: rtl;
  scroll-behavior: smooth;
}
body.ss-page {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: 92px;
  max-width: 100%;
  overflow-x: hidden;
}
.ss-page h1, .ss-page h2, .ss-page h3, .ss-page h4, .ss-page h5, .ss-page h6 {
  color: var(--heading);
  font-family: var(--font-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.ss-page *, .ss-page *::before, .ss-page *::after { box-sizing: border-box; }

/* Sticky footer offer bar — visible on all viewports */
.ss-sticky-footer { animation: ssFooterGlow 2.6s ease-in-out infinite; }
@keyframes ssFooterGlow { 0%,100% { border-top-color: var(--secondary); } 50% { border-top-color: var(--secondary-light); } }

/* Full-width video CTA band — pulse + bouncing arrow */
.ss-video-band { transition: filter 150ms ease, transform 150ms ease; animation: ssBandPulse 2.4s ease-in-out infinite; }
.ss-video-band > span { min-width: 0; }
.ss-video-band:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ss-video-arrow { animation: ssArrowBounce 1.4s ease-in-out infinite; }
.ss-video-play { animation: ssPlayPulse 1.8s ease-in-out infinite; }
@keyframes ssArrowBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes ssPlayPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.45); } 70% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }
@keyframes ssBandPulse { 0%,100% { box-shadow: var(--shadow-lg); } 50% { box-shadow: 0 12px 28px rgba(192,153,47,0.45); } }

/* Signature hover-lift for interactive cards */
.ss-card-interactive { transition: var(--transition); }
.ss-card-interactive:hover { transform: var(--hover-lift); box-shadow: var(--shadow-xl) !important; }

/* Buttons — hover behaviours ported from the design-system Button */
.ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-sans); font-weight: var(--weight-medium); border-radius: var(--radius-lg); border: none; cursor: pointer; transition: var(--transition); text-decoration: none; line-height: 1.2; }
.ss-btn-lg { padding: 1rem 2rem; font-size: var(--text-lg); }
.ss-btn-md { padding: 0.75rem 1.5rem; font-size: var(--text-base); }
.ss-btn-gradient { background-image: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-lg); }
.ss-btn-gradient:hover { transform: var(--hover-lift); box-shadow: var(--shadow-xl); }
.ss-btn-secondary { background: var(--secondary); color: var(--secondary-foreground); box-shadow: var(--shadow-lg); }
.ss-btn-secondary:hover { background: var(--secondary-dark); transform: var(--hover-lift); box-shadow: var(--shadow-xl); }

@media (prefers-reduced-motion: reduce) {
  .ss-sticky-footer, .ss-video-band, .ss-video-arrow, .ss-video-play { animation: none !important; }
}

@media (max-width: 640px) {
  body.ss-page { padding-bottom: 118px; }

  /* Never allow a stray element to push the page wider than the viewport */
  #root, #root section, #root > section > div { max-width: 100% !important; }
  #root img { max-width: 100%; height: auto; }

  /* Collapse every inline grid to one column */
  #root [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Tighter vertical rhythm + comfortable side gutters */
  #root > section > div { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; padding-left: 1.1rem !important; padding-right: 1.1rem !important; }

  /* Everything centers on mobile */
  #root > section > div { text-align: center; }
  #root .ss-hero-grid > div { align-items: center; }

  /* Hero: tighter, smaller logo, full-width CTA */
  .ss-hero-grid { gap: 1.25rem !important; }
  #root .ss-hero-grid img { margin-left: auto; margin-right: auto; }
  .ss-hero-cta { width: 100%; }
  .ss-hero-cta > button, .ss-cta > button { width: 100% !important; max-width: 420px; margin-left: auto; margin-right: auto; }

  /* Slightly smaller display type so headings never crowd the edges */
  #root h1 { font-size: clamp(1.65rem, 7.5vw, 2.2rem) !important; }
  #root h2 { font-size: clamp(1.45rem, 6vw, 1.9rem) !important; }

  /* Video band: compact */
  .ss-video-band { padding: 0.85rem 0.9rem !important; gap: 0.6rem !important; }
  .ss-video-band .ss-vb-title { font-size: 0.98rem !important; }
  .ss-video-band .ss-vb-sub { font-size: 0.74rem !important; }
  .ss-video-band .ss-video-play { width: 38px !important; height: 38px !important; font-size: 1rem !important; }

  /* ===== Sticky footer — compact mobile redesign =====
     Shorter bar: the offer label + live countdown share ONE line,
     then a bright, attention-pulsing full-width CTA. */
  .ss-sticky-footer { border-top-width: 3px; }
  .ss-foot-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.4rem !important;
    padding: 0.45rem 0.8rem calc(0.45rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Row 1 — label and counter on the SAME line */
  .ss-foot-info {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    width: 100%;
    order: 1;
  }
  .ss-foot-offer { width: auto; flex: 0 0 auto; text-align: right; line-height: 1.05 !important; }
  /* Hide the stacked name + badge — the label lives in the hint line */
  .ss-foot-offer > div:first-child { display: none !important; }
  .ss-foot-name { display: none !important; }
  .ss-foot-offer .ss-foot-priceline { margin: 0 !important; justify-content: flex-start !important; }
  #ss-foot-hint { font-size: 0.72rem !important; color: var(--secondary-light) !important; font-weight: var(--weight-semibold) !important; white-space: nowrap; }

  /* Compact inline countdown — numeric tiles only, no stacked labels */
  .ss-countdown { justify-content: center !important; gap: 0.2rem !important; flex: 0 0 auto; }
  .ss-countdown .ss-unit { min-width: 0 !important; flex-direction: row !important; }
  .ss-countdown .ss-unit-val {
    font-size: 0.9rem !important;
    min-width: 25px !important;
    padding: 0.08rem 0.26rem !important;
    background: rgba(216,184,90,0.22) !important;
    color: var(--secondary-light) !important;
  }
  .ss-countdown .ss-unit-label { display: none !important; }
  .ss-countdown > span { align-self: center !important; margin: 0 !important; opacity: 0.5; }

  /* Row 2 — bright, attention-pulsing CTA */
  .ss-foot-cta {
    order: 2;
    width: 100% !important;
    padding: 0.65rem 1rem !important;
    font-size: 1rem !important;
    font-weight: var(--weight-bold) !important;
    border-radius: var(--radius-xl) !important;
    color: #3A2D05 !important;
    background: linear-gradient(135deg, #F7D979, #E3C158 45%, #C0992F) !important;
    box-shadow: 0 6px 16px rgba(192,153,47,0.5) !important;
    animation: ssCtaAttention 5s ease-in-out infinite !important;
  }
  .ss-foot-cta:hover { filter: brightness(1.06); }
}

/* CTA attention pulse — one bright flash roughly every 5 seconds */
@keyframes ssCtaAttention {
  0%, 80%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(192,153,47,0.5); }
  86% { transform: scale(1.045); box-shadow: 0 0 0 6px rgba(247,217,121,0.40), 0 10px 24px rgba(192,153,47,0.7); }
  92% { transform: scale(0.99); box-shadow: 0 4px 14px rgba(192,153,47,0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-foot-cta { animation: none !important; }
}

/* Testimonial "read more" toggle — match the green theme, not compass teal */
.ss-page .testimonial-review button { color: var(--primary) !important; }

/* ===== Checkout transition =====
   Full-screen blocker that stays up while the page collapses to the payment
   view AND the Stripe form finishes rendering, then fades out smoothly to
   reveal the ready form (no pop-in). */
#ss-pay-blocker {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 1.5rem;
  background: rgba(243, 238, 221, 0.97); /* cream */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity 450ms ease;
}
#ss-pay-blocker.ss-blk-fade { opacity: 0; }
#ss-pay-blocker .ss-spin {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-full);
  border: 4px solid rgba(53, 107, 78, 0.18);
  border-top-color: var(--primary);
  animation: ssSpin 0.85s linear infinite;
  margin-bottom: 1.1rem;
}
#ss-pay-blocker .ss-blk-title { color: var(--primary-dark); font-weight: var(--weight-bold); font-size: var(--text-lg); }
#ss-pay-blocker .ss-blk-sub { color: var(--muted); font-size: var(--text-sm); margin-top: 0.4rem; }
@keyframes ssSpin { to { transform: rotate(360deg); } }

/* Gentle entrance for the payment page as the blocker clears */
@keyframes ssPayEnter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
#book.ss-pay-enter { animation: ssPayEnter 600ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  #ss-pay-blocker .ss-spin { animation-duration: 1.4s; }
  #book.ss-pay-enter { animation: none; }
}