/* ============================================================
   IMPALA KIDS — PUBLIC WEBSITE SHELL LAYER (Workshops-first slice)
   Load order: bootstrap.rtl.min.css, impala-tokens.css,
   impala-components.css, then this file.
   This is intentionally the MINIMUM shell needed to host the two
   public Workshops pages ahead of full Phase 7 — header nav +
   footer only. Phase 7 will extend this file (hero blocks,
   testimonial cards, program grid, etc.) rather than replace it.
   Marketing spacing is wider than Admin/Portal per the approved
   Design System (§1 Design Direction — "الموقع العام: مساحات
   واسعة ومريحة").
   ============================================================ */

body.ik-public { background: var(--ik-bg); }

.ik-public-header {
  background: var(--ik-surface); border-bottom: 1px solid var(--ik-border);
  position: sticky; top: 0; z-index: var(--ik-z-sticky);
}
.ik-public-header .container { display: flex; align-items: center; gap: var(--ik-space-6); min-height: 72px; }
.ik-public-header .ik-brand { color: var(--ik-primary-600); font-weight: 700; font-size: 20px; white-space: nowrap; }
.ik-public-nav { display: none; gap: var(--ik-space-5); flex: 1; }
.ik-public-nav a { color: var(--ik-text); font-size: var(--ik-fs-small); font-weight: 500; padding: var(--ik-space-2) 0; min-height: 44px; display: flex; align-items: center; }
.ik-public-nav a.active { color: var(--ik-primary-600); font-weight: 700; }
@media (min-width: 992px) { .ik-public-nav { display: flex; } }

.ik-cart-btn { position: relative; }
.ik-cart-btn .ik-cart-count {
  position: absolute; top: -6px; inset-inline-end: -6px; background: var(--ik-secondary-500); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

.ik-public-mobile-toggle { display: inline-flex; }
@media (min-width: 992px) { .ik-public-mobile-toggle { display: none; } }

.ik-public-main { padding-block: var(--ik-space-10); }
.ik-public-section-title { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--ik-space-8); }

.ik-public-footer { background: var(--ik-primary-900); color: rgba(255,255,255,.8); padding-block: var(--ik-space-12) var(--ik-space-6); margin-top: var(--ik-space-16); }
.ik-public-footer h3 { color: #fff; font-size: var(--ik-fs-h3); margin-bottom: var(--ik-space-4); }
.ik-public-footer a { color: rgba(255,255,255,.75); font-size: var(--ik-fs-small); display: block; margin-bottom: var(--ik-space-2); }
.ik-public-footer a:hover { color: #fff; }
.ik-public-footer .ik-footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: var(--ik-space-8); padding-top: var(--ik-space-5); font-size: var(--ik-fs-caption); text-align: center; color: rgba(255,255,255,.6); }

.ik-whatsapp-fab {
  position: fixed; bottom: var(--ik-space-5); inset-inline-start: var(--ik-space-5); z-index: var(--ik-z-sticky);
  width: 52px; height: 52px; border-radius: 50%; background: var(--ik-success); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--ik-shadow-lg);
}

/* ---------- Checkout stepper ---------- */
.ik-checkout-stepper { display: flex; justify-content: center; gap: var(--ik-space-6); margin-bottom: var(--ik-space-8); }
.ik-step { display: flex; align-items: center; gap: 10px; color: var(--ik-text-muted); }
.ik-step-num { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ik-border-strong); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.ik-step.active .ik-step-num { background: var(--ik-primary-500); border-color: var(--ik-primary-500); color: #fff; }
.ik-step.active .ik-step-label { color: var(--ik-text); font-weight: 700; }
.ik-step.done .ik-step-num { background: var(--ik-success); border-color: var(--ik-success); color: #fff; }
.ik-step-label { font-size: var(--ik-fs-small); }
@media (max-width: 575.98px) { .ik-step-label { display: none; } .ik-checkout-stepper { gap: var(--ik-space-4); } }

/* ---------- Marketing sections ---------- */
.ik-hero { padding-block: var(--ik-space-16) var(--ik-space-12); }
.ik-hero h1 { font-size: var(--ik-fs-display); line-height: var(--ik-lh-display); }
.ik-feature-icon { width: 56px; height: 56px; border-radius: var(--ik-radius-lg); background: var(--ik-primary-50); color: var(--ik-primary-600); display: flex; align-items: center; justify-content: center; margin-bottom: var(--ik-space-3); }
.ik-testimonial { background: var(--ik-surface); border: 1px solid var(--ik-border); border-radius: var(--ik-radius-lg); padding: var(--ik-space-5); height: 100%; }
.ik-testimonial .ik-stars { color: var(--ik-secondary-500); margin-bottom: var(--ik-space-2); }
.ik-cta-band { background: var(--ik-primary-500); color: #fff; border-radius: var(--ik-radius-lg); padding: var(--ik-space-10); text-align: center; }
.ik-cta-band .btn-light { color: var(--ik-primary-700); }
.ik-map-placeholder { aspect-ratio: 16/9; background: var(--ik-surface-alt); border-radius: var(--ik-radius-lg); display: flex; align-items: center; justify-content: center; color: var(--ik-text-muted); }

/* ---------- Footer Payment Logos (LIVE ADMIN DATA — see Admin → Payment Methods → Footer Payment Logos) ---------- */
.ik-payment-logos-title { color: rgba(255,255,255,.85); font-size: var(--ik-fs-small); font-weight: 600; margin-bottom: var(--ik-space-3); }
.ik-payment-logo-strip { display: flex; flex-wrap: wrap; gap: var(--ik-space-3); align-items: center; }
.ik-payment-logo {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 64px;
  padding: 0 var(--ik-space-3); background: #fff; border-radius: var(--ik-radius-md);
  box-shadow: var(--ik-shadow-xs);
}
.ik-payment-logo img { height: 20px; width: auto; max-width: 56px; object-fit: contain; display: block; }
.ik-payment-logo .ik-payment-logo-fallback { display: none; font-size: 12px; font-weight: 700; color: var(--ik-text); white-space: nowrap; }
.ik-payment-logo.ik-is-link { cursor: pointer; min-height: 44px; }
@media (max-width: 575.98px) { .ik-payment-logo { height: 36px; } .ik-payment-logo img { height: 18px; } }