/* ============================================================
   IQRA INSTITUTE — MOBILE APP UI  (public site)
   Loaded with media="(max-width: 768px)" → desktop is untouched.
   Everything is scoped to phone widths; markup/behaviour is unchanged.
   ============================================================ */

:root {
  --mb-bar-h: 56px;                 /* top app bar */
  --mb-tab-h: 64px;                 /* bottom tab bar */
  --mb-safe-b: env(safe-area-inset-bottom, 0px);
  --mb-safe-t: env(safe-area-inset-top, 0px);
  --mb-gutter: 16px;
  --mb-r: 18px;
  --mb-shadow: 0 6px 22px rgba(15, 46, 36, .10);
}

/* ───────── Base: touch + no sideways wobble ───────── */
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  overflow-x: hidden;
  padding-bottom: calc(var(--mb-tab-h) + var(--mb-safe-b));
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  line-height: 1.6;
}
a, button, [role="button"], label, summary, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
* { -webkit-touch-callout: none; }
p, h1, h2, h3, h4, li, .faq-answer, .testimonial-text, .contact-item, input, textarea { -webkit-touch-callout: default; user-select: text; }
.container { padding: 0 var(--mb-gutter); }
section { padding: 36px 0; scroll-margin-top: calc(var(--mb-bar-h) + var(--mb-safe-t) + 4px); }

/* scroll-in animations off: horizontal carousels hide off-screen cards otherwise */
.fade-up, .fade-in, [class*="fade-"] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* tap feedback instead of hover lifts */
@media (hover: none) {
  .btn-primary:hover, .btn-secondary:hover, .btn-book:hover, .course-card:hover, .price-card:hover,
  .btn-course:hover, .feature-item:hover { transform: none !important; }
}
.btn-primary:active, .btn-secondary:active, .btn-course:active, .btn-book:active, .tab-btn:active,
.mb-tab:active, .mb-sheet-item:active { transform: scale(.97); opacity: .92; }

/* ───────── Top app bar (replaces the desktop navbar) ───────── */
.navbar-top { display: none !important; }
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(15, 46, 36, .92) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(201, 168, 76, .25), 0 6px 20px rgba(0, 0, 0, .18) !important;
  padding-top: var(--mb-safe-t);
}
.navbar-main { padding: 0; }
.navbar-inner { height: var(--mb-bar-h); }
.navbar .container { padding: 0 12px; }
.logo { gap: 9px; min-width: 0; }
.logo-mark { width: 38px; height: 38px; }
.logo-text .name { font-size: 1.05rem; letter-spacing: .04em; white-space: nowrap; }
.logo-text .tagline { font-size: .52rem; letter-spacing: .14em; }
.hamburger, .nav-links, .nav-links.open { display: none !important; }   /* menu lives in the bottom sheet */

.mb-bar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mb-bar-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); color: var(--gold-light); font-size: 1.05rem;
}
.mb-bar-btn.gold { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--emerald-dark); }

/* Content starts under the fixed bar */
body > section:first-of-type, .hero { scroll-margin-top: 0; }
.hero { padding-top: calc(var(--mb-bar-h) + var(--mb-safe-t) + 18px) !important; min-height: auto !important; padding-bottom: 28px !important; }

/* ───────── Bottom tab bar ───────── */
.mb-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  height: calc(var(--mb-tab-h) + var(--mb-safe-b)); padding-bottom: var(--mb-safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid rgba(15, 46, 36, .08);
  box-shadow: 0 -6px 24px rgba(15, 46, 36, .10);
}
.mb-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; color: #7b8a84; font: 600 .66rem/1 'Nunito', sans-serif; letter-spacing: .02em;
  position: relative; cursor: pointer; text-decoration: none;
}
.mb-tab i { font-size: 1.18rem; transition: transform .2s; }
.mb-tab.active { color: var(--emerald); }
.mb-tab.active i { transform: translateY(-2px); }
.mb-tab.active::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 26px; height: 3px; margin-left: -13px;
  border-radius: 0 0 4px 4px; background: var(--gold);
}
.mb-tab-cta { overflow: visible; }
.mb-tab-cta .mb-fab {
  width: 54px; height: 54px; margin-top: -22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--emerald-dark);
  box-shadow: 0 8px 20px rgba(201, 168, 76, .55), 0 0 0 5px rgba(255, 255, 255, .94);
  font-size: 1.3rem;
}
.mb-tab-cta span { margin-top: 2px; color: var(--emerald); }

/* Hide old floating helpers that clash with the bar */
.sticky-cta { display: none !important; }
.wa-float { bottom: calc(var(--mb-tab-h) + var(--mb-safe-b) + 18px) !important; right: 14px !important; width: 46px !important; height: 46px !important; z-index: 1050; }
.wa-float-icon { font-size: 1.4rem !important; }

/* ───────── "More" bottom sheet ───────── */
.mb-sheet-bg {
  position: fixed; inset: 0; z-index: 2200; background: rgba(8, 24, 18, .55);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.mb-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2210;
  background: #fbfaf6; border-radius: 24px 24px 0 0;
  padding: 10px var(--mb-gutter) calc(18px + var(--mb-safe-b));
  max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(105%); transition: transform .32s cubic-bezier(.22, .8, .2, 1);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .25);
}
body.mb-sheet-open .mb-sheet-bg { opacity: 1; pointer-events: auto; }
body.mb-sheet-open .mb-sheet { transform: none; }
body.mb-sheet-open { overflow: hidden; }
.mb-sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: #d6d9d3; margin: 0 auto 12px; }
.mb-sheet h4 { font: 700 .72rem 'Nunito', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8a948f; margin: 14px 4px 8px; }
.mb-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mb-sheet-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center;
  min-height: 82px; padding: 10px 6px; border-radius: 16px; background: #fff; color: var(--emerald-dark);
  font: 700 .74rem/1.2 'Nunito', sans-serif; box-shadow: 0 2px 10px rgba(15, 46, 36, .07); border: 1px solid rgba(15, 46, 36, .05);
  text-decoration: none; transition: transform .15s;
}
.mb-sheet-item i { font-size: 1.35rem; color: var(--emerald-light); }
.mb-sheet-item.gold { background: linear-gradient(135deg, var(--gold), var(--gold-light)); }
.mb-sheet-item.gold i { color: var(--emerald-dark); }
.mb-sheet-list a {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 6px;
  color: var(--emerald-dark); font-weight: 600; font-size: .92rem; text-decoration: none; border-bottom: 1px solid rgba(15, 46, 36, .06);
}
.mb-sheet-list a i { width: 22px; text-align: center; color: var(--gold); }
.mb-sheet-social { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.mb-sheet-social a { width: 42px; height: 42px; border-radius: 50%; background: var(--emerald); color: var(--gold-light); display: flex; align-items: center; justify-content: center; }

/* ───────── Buttons & forms (thumb-friendly) ───────── */
.btn-primary, .btn-secondary, .btn-course, .btn-book, .price-actions a, .price-actions button, .newsletter-form button, .contact-form-card button[type="submit"] {
  min-height: 50px; border-radius: 14px !important; font-size: .92rem;
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font-size: 16px !important;            /* stops iOS zoom-on-focus */
  min-height: 50px; border-radius: 14px !important; padding: 12px 14px;
}
textarea { min-height: 110px; }
.form-group label { font-size: .82rem; font-weight: 700; }
.form-row { grid-template-columns: 1fr !important; gap: .2rem; }

/* ───────── Section headers ───────── */
.section-header { margin-bottom: 20px; text-align: left; }
.section-header h2 { font-size: 1.55rem; margin-bottom: .45rem; }
.section-header .gold-line.center { margin-left: 0; margin-right: 0; }
.section-header p { font-size: .9rem; margin: 0; }
.section-label { font-size: .68rem; }
.islamic-divider { height: 22px; overflow: hidden; opacity: .55; }

/* ───────── Hero ───────── */
.hero .container { padding-top: 0; }
.hero-arabic-verse { font-size: 1.45rem !important; margin-bottom: .5rem !important; }
.hero-translation { font-size: .82rem; padding: 10px 14px; border-radius: 14px; }
.hero h1 { font-size: 1.75rem; line-height: 1.18; margin: .6rem 0; }
.hero p { font-size: .92rem; }
.hero-typing-line { font-size: .9rem; }
.hero-cta { gap: 10px; margin-top: 1rem; }
.hero-cta a { min-height: 52px; font-size: .95rem; }
.hero-glow, .hero-ornament, .hero-corner { display: none !important; }       /* decor that caused sideways scroll */
.hero-features { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; padding: 12px 6px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(201, 168, 76, .25); }
.hero-feature .num { font-size: 1.05rem; }
.hero-feature .lbl { font-size: .56rem; letter-spacing: .02em; }

/* ───────── Ticker, feature strip → compact swipe rows ───────── */
.courses-ticker { height: 40px; }
.features-strip { padding: 14px 0; }
.features-strip .container {
  display: flex !important; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.features-strip .container::-webkit-scrollbar { display: none; }
.feature-item {
  flex: 0 0 82%; scroll-snap-align: center; background: rgba(255, 255, 255, .45); border-radius: 16px; padding: 12px 14px; gap: 12px;
}
.feature-item h4 { font-size: .86rem; }
.feature-item p { font-size: .72rem; }

/* ───────── About ───────── */
.about-section { padding-top: 28px; }
.about-grid { gap: 20px; }
.about-features { grid-template-columns: 1fr 1fr !important; gap: 10px; }
.about-feature { background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--mb-shadow); flex-direction: column; gap: 6px; }
.about-feature h5 { font-size: .85rem; }
.about-feature p { font-size: .72rem; line-height: 1.4; }
.about-video-frame, .about-img-frame { border-radius: var(--mb-r); overflow: hidden; box-shadow: var(--mb-shadow); }

/* ───────── Stats ───────── */
.stats-section { padding: 28px 0; }
.stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
.stat-item { background: rgba(255, 255, 255, .07); border: 1px solid rgba(201, 168, 76, .25); border-radius: 16px; padding: 16px 8px; }
.stat-num { font-size: 1.7rem; }
.stat-label { font-size: .7rem; }

/* ───────── Swipe carousels (courses + pricing) ───────── */
.courses-grid, .pricing-grid {
  display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(var(--mb-gutter) * -1); padding: 4px var(--mb-gutter) 14px;
  scroll-padding-left: var(--mb-gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.courses-grid::-webkit-scrollbar, .pricing-grid::-webkit-scrollbar { display: none; }
.courses-grid > .course-card { flex: 0 0 82%; scroll-snap-align: start; }
.pricing-grid > .price-card { flex: 0 0 84%; scroll-snap-align: center; }
.course-card, .price-card { border-radius: var(--mb-r) !important; overflow: hidden; box-shadow: var(--mb-shadow); }
.course-card { display: flex; flex-direction: column; }
.course-img-top { height: 150px; }
.course-body { padding: 14px; }
.course-body h3 { font-size: 1.05rem; }
.course-body p { font-size: .84rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.course-topic { font-size: .78rem; }
.course-footer { padding: 12px 14px; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.course-price { font-size: .78rem; }
.btn-course { padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; }

/* Pricing tabs → segmented control */
.pricing-tabs {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin: 0 0 14px;
  background: #e9ede9; border-radius: 16px;
}
.pricing-tabs .tab-btn { min-height: 42px; padding: 0 2px; border: 0; border-radius: 12px; background: transparent; font-size: .74rem; font-weight: 700; }
.pricing-tabs .tab-btn.active { background: var(--emerald); color: #fff; box-shadow: 0 3px 10px rgba(26, 74, 58, .3); }
.price-header h3 { font-size: .98rem; }
.price-main .amount { font-size: 1.7rem; }
.price-actions { grid-template-columns: 1fr !important; }

/* Carousel position dots (added by JS) */
.mb-dots { display: flex; justify-content: center; gap: 6px; margin-top: -2px; }
.mb-dots i { width: 6px; height: 6px; border-radius: 3px; background: #cfd6d1; transition: all .2s; }
.mb-dots i.on { width: 18px; background: var(--gold); }

/* ───────── Testimonials ───────── */
.testimonials-section { padding: 32px 0; }
.testimonial-card { border-radius: var(--mb-r); padding: 18px; }
.testimonial-text { font-size: .9rem; }

/* ───────── Contact ───────── */
.contact-grid { gap: 16px; }
.contact-item { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: var(--mb-shadow); }
.contact-form-card { border-radius: var(--mb-r); padding: 18px 16px; box-shadow: var(--mb-shadow); }

/* ───────── FAQ accordion ───────── */
.faq-grid { gap: 10px; }
.faq-item { border-radius: 16px; overflow: hidden; box-shadow: var(--mb-shadow); }
.faq-question { min-height: 54px; padding: 12px 16px; font-size: .92rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.faq-answer { font-size: .88rem; }

/* ───────── Newsletter + Footer ───────── */
.newsletter-section { padding: 26px 0; }
.newsletter-inner { flex-direction: column; gap: 14px; }
.newsletter-form > div { flex-direction: column; }
.newsletter-form input, .newsletter-form button { width: 100%; }
.footer-main { padding: 28px 0 8px; }
.footer-grid { grid-template-columns: 1fr 1fr !important; gap: 22px 14px; }
.footer-brand, .footer-col:last-child { grid-column: 1 / -1; }
.footer-col h4 { font-size: .85rem; }
.footer-links a { min-height: 38px; display: flex; align-items: center; font-size: .84rem; }
.footer-bottom { padding-bottom: 18px; }

/* ───────── Modals → bottom sheets ───────── */
.modal-overlay { align-items: flex-end !important; padding: 0 !important; }
.modal-box {
  max-width: 100% !important; width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0 !important;
  border-top: 0 !important; transform: translateY(100%) !important; padding-bottom: var(--mb-safe-b);
}
.modal-overlay.open .modal-box { transform: translateY(0) !important; }
.modal-header { padding: 16px 18px !important; border-radius: 24px 24px 0 0 !important; position: sticky; top: 0; z-index: 2; }
.modal-header::before { content: ''; position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.modal-header h3 { font-size: 1.02rem; }
.modal-close { width: 38px; height: 38px; }
.modal-body { padding: 16px 16px 24px !important; }
.exit-popup-overlay { display: none !important; }                 /* exit-intent popups don't exist on phones */

/* ───────── Inner public pages (courses, register, blog, legal) ───────── */
.page-hero, .course-hero, [class*="-hero"]:not(.hero):not(.hero-content) { padding-top: calc(var(--mb-bar-h) + var(--mb-safe-t) + 22px); }
.container table { display: block; overflow-x: auto; }
img, video, iframe { max-width: 100%; }

@media (max-width: 380px) {
  .logo-text .tagline { display: none; }
  .hero h1 { font-size: 1.55rem; }
  .mb-sheet-grid { gap: 8px; }
}

/* Inner pages that use inline 2-column page layouts (course pages, terms, privacy) → single column */
[style*="grid-template-columns:2fr 1fr"], [style*="grid-template-columns: 2fr 1fr"],
[style*="grid-template-columns:1fr 3fr"], [style*="grid-template-columns: 1fr 3fr"] {
  grid-template-columns: 1fr !important; gap: 1.4rem !important;
}
[style*="position:sticky"], [style*="position: sticky"] { position: static !important; }

/* Course cards: keep them compact — first 3 topics only (full list is on the course page) */
.course-topics .course-topic:nth-child(n+4) { display: none; }

/* ───────── Registration (multi-step form) ───────── */
.page-hero { min-height: 0 !important; padding: calc(var(--mb-bar-h) + var(--mb-safe-t) + 16px) 0 22px !important; }
.page-hero h1 { font-size: 1.55rem; }
.page-hero p { font-size: .9rem; }
.breadcrumb { font-size: .75rem; }
.reg-page { padding: 16px 0 28px !important; }
.reg-card { display: flex !important; flex-direction: column; border-radius: 20px !important; box-shadow: var(--mb-shadow); overflow: hidden; }
.reg-form { order: 1; padding: 20px 16px 24px !important; }
.reg-sidebar { order: 2; padding: 22px 16px !important; }
.reg-form h2 { font-size: 1.25rem; }
.reg-form > p { font-size: .82rem; margin-bottom: 1.1rem; }
.reg-sidebar .reg-features-list li { font-size: .84rem; }
/* progress: circles only, active label shown */
.reg-progress { gap: 0; margin-bottom: 1.2rem; }
.reg-step-label { display: none; }
.reg-step-item.active .reg-step-label { display: block; position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; text-align: center; font-size: .62rem; }
.reg-step-item { position: relative; }
.reg-step-line { min-width: 16px; margin-bottom: 0; }
.reg-progress { margin-bottom: 2.2rem; }
/* big thumb buttons */
.btn-step-next, .btn-step-back { min-height: 52px; border-radius: 14px !important; font-size: .95rem; }
.btn-step-next { flex: 1; justify-content: center; }
.days-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; }
.days-grid label, .day-chip { min-height: 44px; }