@import url('fonts.css');

/* ==========================================================================
   JALEES (جليس) — AUTHENTIC BRAND DESIGN SYSTEM & DESIGN TOKENS
   Pure RTL Arabic-First Architecture
   ========================================================================== */

:root {
  /* Official Brand Palette */
  --jalees-navy: #172A46;
  --jalees-navy-deep: #0D1B2E;
  --jalees-navy-light: #254069;

  --jalees-terracotta: #D98572;
  --jalees-terracotta-dark: #C26C58;
  --jalees-terracotta-light: #F7ECE8;
  --jalees-terracotta-tint: rgba(217, 133, 114, 0.12);

  --jalees-sage: #A4B49D;
  --jalees-sage-dark: #7A8D73;
  --jalees-sage-light: #EDF2EB;

  --jalees-slate: #557FA3;
  --jalees-slate-dark: #3E6485;
  --jalees-slate-light: #EBF2F8;

  /* Canvas & Surfaces (Refined Warm Off-White Beige — 2 Steps Lighter) */
  --jalees-cream: #F6F1E5;
  --jalees-cream-light: #FAF8F3;
  --jalees-cream-surface: #FCFAF5;
  --jalees-cream-card: #FFFFFF;
  --jalees-white: #FFFFFF;

  /* Typography & Neutrals */
  --jalees-charcoal: #34383C;
  --jalees-charcoal-dark: #181832;
  --jalees-text-body: #4A5158;
  --jalees-text-muted: #737A84;
  --jalees-text-light: #9DA4AF;

  /* Borders & Dividers (Adjusted for refined lighter beige) */
  --jalees-border: #EAE3D7;
  --jalees-border-light: #F0EAE0;
  --jalees-border-subtle: #F7F2EC;

  /* Elevation Shadows */
  --shadow-sm: 0 2px 8px rgba(23, 42, 70, 0.04);
  --shadow-md: 0 6px 20px rgba(23, 42, 70, 0.06);
  --shadow-lg: 0 14px 36px rgba(23, 42, 70, 0.08);
  --shadow-card: 0 4px 24px -2px rgba(23, 42, 70, 0.05);
  --shadow-hover: 0 12px 32px -4px rgba(23, 42, 70, 0.12);

  /* Typography */
  --font-main: 'Thmanyah Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Thmanyah Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  direction: rtl;
  text-align: right;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-main);
  font-weight: 400;
  color: var(--jalees-charcoal);
  background-color: var(--jalees-cream-light);
  line-height: 1.75;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-main);
  font-weight: 700;
  color: var(--jalees-navy);
  line-height: 1.35;
  letter-spacing: -0.015em;
}



a {
  color: var(--jalees-navy);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--jalees-terracotta);
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3.5vw, 32px);
  padding-right: clamp(16px, 3.5vw, 32px);
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(248, 245, 238, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--jalees-border);
  transition: all var(--transition-smooth);
}

.site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.brand-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.brand-logo-img {
  height: 38px;
  max-height: 38px;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition-fast);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--jalees-navy);
  padding: 8px 2px;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: var(--jalees-terracotta);
  transition: width var(--transition-fast);
  border-radius: 2px;
}

.nav-link:hover,
.nav-link.active {
  color: var(--jalees-terracotta-dark);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--jalees-navy);
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1001;
  pointer-events: auto;
  touch-action: manipulation;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-nav-toggle:hover {
  background-color: var(--jalees-cream);
}

/* Mobile Drawer */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 46, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
}

.mobile-drawer-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: -360px;
  width: 300px;
  max-width: calc(100vw - 36px);
  height: 100vh;
  height: 100dvh;
  background: var(--jalees-cream-light);
  border-left: 1px solid var(--jalees-border);
  z-index: 1100;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 24px rgba(23, 42, 70, 0.15);
  transition: right var(--transition-smooth);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-drawer.open {
  right: 0 !important;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--jalees-border);
  margin-bottom: 18px;
}

.drawer-close-btn {
  background: transparent;
  border: none;
  font-size: 1.35rem;
  color: var(--jalees-navy);
  cursor: pointer;
  padding: 8px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  touch-action: manipulation;
  transition: all var(--transition-fast);
}

.drawer-close-btn:hover {
  background: var(--jalees-cream);
  color: var(--jalees-terracotta);
}

.drawer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.drawer-links li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.drawer-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--jalees-navy);
  padding: 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid rgba(228, 220, 207, 0.5);
  transition: all var(--transition-fast);
  touch-action: manipulation;
}

.drawer-link:hover,
.drawer-link.active {
  background: rgba(27, 54, 93, 0.05);
  color: var(--jalees-terracotta-dark);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-main);
  font-size: 0.98rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1.2;
}

.btn-primary {
  background-color: var(--jalees-navy);
  color: var(--jalees-white);
}

.btn-primary:hover {
  background-color: var(--jalees-navy-deep);
  color: var(--jalees-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-terracotta {
  background-color: var(--jalees-terracotta);
  color: var(--jalees-white);
}

.btn-terracotta:hover {
  background-color: var(--jalees-terracotta-dark);
  color: var(--jalees-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--jalees-border);
  color: var(--jalees-navy);
}

.btn-outline:hover {
  border-color: var(--jalees-navy);
  background-color: var(--jalees-white);
  color: var(--jalees-navy);
}

.btn-ghost {
  background-color: transparent;
  color: var(--jalees-navy);
  padding: 8px 16px;
}

.btn-ghost:hover {
  background-color: var(--jalees-cream);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: 15px 32px;
  font-size: 1.05rem;
  border-radius: var(--radius-lg);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero-section {
  padding: clamp(48px, 6vw, 76px) 0 clamp(40px, 5vw, 64px);
  background: radial-gradient(circle at 50% 10%, rgba(217, 133, 114, 0.08) 0%, transparent 65%), var(--jalees-cream-light);
  border-bottom: 1px solid var(--jalees-border);
  text-align: center;
}

.hero-content-center {
  max-width: 900px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--jalees-terracotta-light);
  color: var(--jalees-terracotta-dark);
  border: 1px solid var(--jalees-terracotta);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.hero-title {
  font-family: var(--font-main, 'Thmanyah Sans', sans-serif);
  font-size: clamp(2.18rem, 6.3vw, 4.8rem);
  font-weight: 800;
  color: var(--theme-text-heading, var(--jalees-navy, #1A2B4C));
  margin-bottom: 20px;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(6px, 1vw, 10px);
  direction: rtl;
}

.hero-title-line {
  display: block;
  white-space: nowrap;
  text-align: center;
  max-width: 100%;
}

.hero-title-line-1,
.hero-title-line-2 {
  display: block;
}

.hero-desc {
  font-size: clamp(0.79rem, 1.5vw, 0.94rem);
  line-height: 1.8;
  color: var(--jalees-text-body);
  max-width: 680px;
  margin: 0 auto 32px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

/* Realistic Photography Hero Container */
.hero-photo-wrap {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 20px 48px -12px rgba(23, 42, 70, 0.15);
  border: 3px solid var(--jalees-white);
  background: var(--jalees-cream-surface);
}

.hero-photo-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

/* ==========================================================================
   SECTIONS & TYPOGRAPHY
   ========================================================================== */

.section {
  padding: clamp(56px, 7vw, 96px) 0;
}

.section-cream {
  background-color: var(--jalees-cream-light);
}

.section-white {
  background-color: var(--jalees-white);
  border-top: 1px solid var(--jalees-border);
  border-bottom: 1px solid var(--jalees-border);
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--jalees-terracotta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.section-title {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 12px;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--jalees-text-muted);
  line-height: 1.7;
}

/* ==========================================================================
   WHY JALEES (IMAGE + TEXT CARDS & MOBILE CAROUSEL)
   ========================================================================== */

.why-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-image-card {
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm);
  display: flex !important;
  flex-direction: column !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.why-image-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--jalees-terracotta);
}

.why-card-img-wrap {
  width: 100% !important;
  height: 220px !important;
  background: transparent !important;
  overflow: hidden !important;
  position: relative;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  border-bottom: 1px solid var(--jalees-border);
  border-radius: 16px 16px 0 0 !important;
}

/* خلفية قسم كيف تعمل منصة جليس */
#how-it-works .why-card-img-wrap {
    background-image: url('../images/bk1.jpg') !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-radius: 16px 16px 0 0 !important;
    width: 100% !important;
    height: 315px !important; /* تحديد الطول الثابت */
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: hidden !important;
}

/* ضبط حجم الجوال داخل الخلفية */
#how-it-works .why-card-img {
    max-width: 260px !important;
    width: 100% !important;
    height: 100% !important; /* أخذ كامل طول الحاوية (315px) */
    max-height: 315px !important;
    margin: 0 auto !important;
    padding-top: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    object-fit: contain !important; /* منع تشوه الصورة وإظهارها بالكامل */
    box-shadow: none !important;
    object-position: top center !important; /* تثبيت الصورة للأعلى */
}

.why-image-card img,
.why-card-img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 16px 16px 0 0 !important;
  display: block !important;
  max-width: 100% !important;
  transition: transform var(--transition-normal);
}

.why-image-card:hover .why-card-img {
  transform: scale(1.05);
}

.why-card-body {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.why-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--jalees-navy);
  margin-bottom: 10px;
}

.why-card-desc {
  font-size: 0.95rem;
  color: var(--jalees-text-body);
  line-height: 1.65;
}

/* ==========================================================================
   HOW IT WORKS (4 STEPS WITH IMAGES & TIMELINE)
   ========================================================================== */

.journey-container {
  max-width: 1100px;
  margin: 0 auto;
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.journey-step-item {
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  box-sizing: border-box;
}

.journey-step-item:hover {
  transform: translateY(-4px);
  border-color: var(--jalees-terracotta);
  box-shadow: var(--shadow-hover);
}

.journey-node-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
}

.journey-num-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--jalees-navy);
  color: var(--jalees-white);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid var(--jalees-cream-light);
  box-shadow: 0 0 0 2px var(--jalees-navy);
  z-index: 2;
}

.journey-connector-line {
  flex-grow: 1;
  height: 2px;
  background: var(--jalees-border);
  margin-right: 8px;
}

.journey-step-title {
  font-size: 1.15rem;
  color: var(--jalees-navy);
  margin-bottom: 8px;
}

.journey-step-desc {
  font-size: 0.92rem;
  color: var(--jalees-text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* 1. Wrapper Adjustments: Flush top, larger side margins */
.step-card .img-wrapper,
.how-it-works-section .card-header-img,
.journey-img-wrap,
#how-it-works .journey-img-wrap {
  width: 100% !important;
  padding-top: 0 !important;
  /* NO top margin/padding */
  padding-bottom: 20px !important;
  padding-left: 35px !important;
  /* Larger left margin */
  padding-right: 35px !important;
  /* Larger right margin */
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  /* Aligns the image strictly to the top */
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-sizing: border-box;
  position: relative;
}

/* 2. Image Adjustments: Fill the space naturally with ALL corners rounded */
.step-card img,
.how-it-works-section .card-img-top,
.journey-card-img,
.journey-step-img,
.journey-card img,
#how-it-works .journey-card-img,
#how-it-works img {
  width: 100% !important;
  max-width: 280px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
  border-radius: 16px !important;
  /* CRITICAL: Rounds all 4 corners evenly */
  box-shadow: none !important;
  transition: transform var(--transition-normal);
}

.journey-step-item:hover .journey-card-img,
.journey-step-item:hover .journey-step-img {
  transform: scale(1.02);
}

/* ==========================================================================
   CONSULTATION CATEGORIES (9 DOMAIN CARDS)
   ========================================================================== */

#domains {
  padding: clamp(48px, 6vw, 80px) 0;
  margin: 0;
  height: auto !important;
  min-height: 0 !important;
}

.domains-grid,
.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.domain-card,
.category-card {
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
  box-sizing: border-box;
  height: 100%;
}

.domain-card:hover,
.category-card:hover {
  transform: translateY(-4px);
  border-color: var(--jalees-terracotta);
  box-shadow: var(--shadow-hover);
}

.domain-icon-wrap,
.category-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--jalees-cream-light);
  color: var(--jalees-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
  transition: all var(--transition-fast);
}

.domain-card:hover .domain-icon-wrap,
.category-card:hover .category-icon-wrapper {
  background: var(--jalees-terracotta);
  color: var(--jalees-white);
}

.domain-title,
.category-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--jalees-navy);
  margin-bottom: 10px;
  line-height: 1.4;
}

.domain-desc,
.category-desc {
  font-size: 0.92rem;
  color: var(--jalees-text-muted);
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1;
}

.domain-action,
.category-link-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--jalees-terracotta-dark);
  margin-top: auto;
}

.domain-action i,
.category-link-text i {
  transition: transform var(--transition-fast);
}

.domain-card:hover .domain-action i,
.category-card:hover .category-link-text i {
  transform: translateX(-4px);
}

/* ==========================================================================
   CONSULTANTS CARDS & GRID
   ========================================================================== */

.consultants-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.consultant-card {
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-fast);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.consultant-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--jalees-terracotta);
}

.consultant-head {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.consultant-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}

.consultant-avatar,
.homepage-consultant-avatar {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  border: 2px solid var(--jalees-cream) !important;
  flex-shrink: 0 !important;
  display: block;
  box-sizing: border-box !important;
}

.verified-badge-icon {
  position: absolute;
  bottom: -2px;
  left: -2px;
  background: var(--jalees-navy);
  color: var(--jalees-white);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  border: 2px solid var(--jalees-white);
}

.consultant-name {
  font-size: 1.15rem;
  color: var(--jalees-navy);
  margin-bottom: 4px;
}

.consultant-specialty {
  font-size: 0.88rem;
  color: var(--jalees-text-muted);
}

.consultant-bio {
  font-size: 0.92rem;
  color: var(--jalees-text-body);
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

.consultant-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-terracotta {
  background: var(--jalees-terracotta-light);
  color: var(--jalees-terracotta-dark);
}

.badge-outline {
  background: var(--jalees-cream-light);
  border: 1px solid var(--jalees-border);
  color: var(--jalees-charcoal);
}

.consultant-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--jalees-border-subtle);
}

/* ==========================================================================
   CONSULTANT PROFILE PAGE (RESPONSIVE STACK ON MOBILE)
   ========================================================================== */

.consultant-profile-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.profile-header-card {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.profile-section-block {
  margin-bottom: 36px;
}

.profile-section-title {
  font-size: 1.35rem;
  margin-bottom: 14px;
  position: relative;
  padding-bottom: 8px;
  color: var(--jalees-navy);
}

.title-underline {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 2px;
  background: var(--jalees-terracotta);
}

.profile-bio-text {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--jalees-text-body);
}

.qualifications-list {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.qualification-item {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  background: var(--jalees-cream-light) !important;
  padding: 14px 18px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--jalees-border) !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qualification-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.qual-icon {
  color: var(--jalees-terracotta) !important;
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
}

.qual-text {
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: var(--jalees-navy) !important;
  line-height: 1.5 !important;
}

.specializations-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.spec-badge {
  font-size: 0.92rem;
  padding: 8px 16px;
}

.consultant-booking-column {
  position: sticky;
  top: 110px;
  width: 100%;
}

.booking-widget-card {
  background: var(--jalees-cream-surface);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  width: 100%;
  box-sizing: border-box;
}

.booking-widget-eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--jalees-terracotta);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.booking-widget-title {
  font-size: 1.3rem;
  color: var(--jalees-navy);
  margin-bottom: 12px;
}

.booking-widget-desc {
  font-size: 0.95rem;
  color: var(--jalees-text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.booking-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 0.9rem;
}

.booking-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--jalees-text-body);
}

/* ==========================================================================
   ABOUT US PAGE (RESPONSIVE STACK ON MOBILE)
   ========================================================================== */

.about-story-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.about-quote-card {
  background: var(--jalees-cream-light);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 40px);
  position: relative;
  border-right: 6px solid var(--jalees-navy);
  width: 100%;
  box-sizing: border-box;
}

.about-quote-text {
  font-size: 1.15rem;
  color: var(--jalees-navy);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 20px;
}

.about-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  width: 100%;
  box-sizing: border-box;
}

.about-vision-card {
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 36px);
  border-top: 5px solid var(--jalees-navy);
}

.about-mission-card {
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 36px);
  border-top: 5px solid var(--jalees-terracotta);
}

.mission-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--jalees-cream-light);
  color: var(--jalees-navy);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.mission-icon-wrap.terracotta {
  background: var(--jalees-terracotta-light);
  color: var(--jalees-terracotta-dark);
}

.about-goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.goal-item-card {
  background: var(--jalees-cream-light);
  padding: 24px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--jalees-border);
  display: flex;
  gap: 16px;
}

.goal-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--jalees-terracotta);
  flex-shrink: 0;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.value-item-card {
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}

.value-num-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--jalees-cream-light);
  border: 1px solid var(--jalees-border);
  color: var(--jalees-navy);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* ==========================================================================
   AUTH PAGES (LOGIN, REGISTER, FORGOT)
   ========================================================================== */

.auth-wrapper {
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 60px;
  width: 100%;
  box-sizing: border-box;
}

.auth-card {
  width: 100%;
  max-width: 480px;
  height: auto !important;
  min-height: auto;
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 5vw, 40px);
  padding-bottom: 48px;
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
  overflow: visible;
}

.form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--jalees-navy);
}

@media (min-width: 769px) {
  .registration-name-phone-row {
    align-items: stretch !important;
  }

  .registration-name-phone-row > .form-group {
    display: flex;
    flex-direction: column;
  }

  .registration-name-phone-row > .form-group > .form-control,
  .registration-name-phone-row > .form-group > .jalees-phone-field {
    margin-top: auto;
  }
}

/* Phone Number Field Alignment with Full Name Field */
.jalees-phone-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
  position: relative;
  direction: rtl;
  width: 100%;
  height: 48px;
  margin-top: auto;
}

.jalees-country-picker {
  position: relative;
  flex-shrink: 0;
  height: 100%;
}

.jalees-country-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  cursor: pointer;
  height: 100%;
  font-size: 0.9rem;
  user-select: none;
  min-width: 95px;
  box-sizing: border-box;
  /* Directional radius: picker is the LEFT element — rounded LEFT (outer) corners. */
  border-radius: var(--radius-md) 4px 4px var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.jalees-country-trigger:hover,
.jalees-country-trigger:focus {
  border-color: var(--jalees-navy);
}

.jalees-phone-control {
  flex: 1;
  direction: ltr;
  text-align: right;
  height: 100% !important;
  margin-top: 0 !important;
  /* Directional radius: input is the RIGHT element — rounded RIGHT (outer) corners. */
  border-radius: 4px var(--radius-md) var(--radius-md) 4px !important;
}

.auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-logo-link {
  display: inline-block;
  margin-bottom: 14px;
}

.auth-logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.auth-title {
  font-size: 1.65rem;
  color: var(--jalees-navy);
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: 0.95rem;
  color: var(--jalees-text-muted);
}

.social-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  background: var(--jalees-cream-light);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--jalees-charcoal);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.social-btn:hover {
  background: var(--jalees-white);
  border-color: var(--jalees-navy);
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--jalees-text-light);
  font-size: 0.85rem;
  margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--jalees-border);
}

.auth-divider:not(:empty)::before {
  margin-left: 12px;
}

.auth-divider:not(:empty)::after {
  margin-right: 12px;
}

/* ==========================================================================
   DIRECTORY FILTER BAR (MINNECT / ERTH STYLE)
   ========================================================================== */

.directory-header-section {
  padding: 40px 0 24px;
  background: var(--jalees-cream-surface);
  border-bottom: 1px solid var(--jalees-border);
  margin-bottom: 32px;
}

.directory-page-title {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  margin-bottom: 8px;
}

.directory-page-desc {
  font-size: 1.05rem;
  color: var(--jalees-text-body);
  max-width: 680px;
}

.filter-bar-container {
  margin-bottom: 32px;
}

.filter-bar-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-input-wrap {
  position: relative;
  flex-grow: 1;
}

.search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--jalees-text-muted);
  font-size: 1rem;
}

.filter-search-input {
  width: 100%;
  height: 52px;
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  padding: 0 48px 0 40px;
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: var(--jalees-charcoal);
  box-shadow: var(--shadow-sm);
  outline: none;
  transition: border-color var(--transition-fast);
}

.filter-search-input:focus {
  border-color: var(--jalees-navy);
}

.clear-search-btn {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--jalees-text-muted);
  padding: 4px;
}

.btn-filter-toggle {
  height: 52px;
  padding: 0 24px;
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--jalees-navy);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-filter-toggle:hover,
.btn-filter-toggle.has-active {
  border-color: var(--jalees-terracotta);
  color: var(--jalees-terracotta-dark);
}

.filter-count-badge {
  background: var(--jalees-terracotta);
  color: var(--jalees-white);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-dropdown-panel {
  display: none;
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 14px;
  box-shadow: var(--shadow-md);
  animation: fadeIn 0.2s ease;
}

.filter-dropdown-panel.show {
  display: block;
}

.filter-grid-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.filter-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--jalees-navy);
  margin-bottom: 8px;
}

.filter-select {
  width: 100%;
  height: 44px;
  background: var(--jalees-cream-light);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-md);
  padding: 0 14px;
  font-family: var(--font-main);
  font-size: 0.9rem;
  color: var(--jalees-charcoal);
  outline: none;
}

.filter-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--jalees-border-subtle);
}

.quick-category-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 0 4px;
  scrollbar-width: none;
}

.quick-category-chips::-webkit-scrollbar {
  display: none;
}

.chip-item {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  color: var(--jalees-navy);
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.chip-item:hover,
.chip-item.active {
  background: var(--jalees-navy);
  color: var(--jalees-white);
  border-color: var(--jalees-navy);
}

/* ==========================================================================
   JOIN AS CONSULTANT CARD
   ========================================================================== */

.join-consultant-card {
  background: linear-gradient(135deg, var(--jalees-navy) 0%, #1A365D 100%);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 48px);
  color: var(--jalees-white);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "badge action"
    "title action"
    "desc action"
    "benefits action";
  align-items: center;
  column-gap: clamp(24px, 4vw, 48px);
  row-gap: 12px;
  overflow: hidden;
  position: relative;
}

.join-consultant-badge-wrap {
  grid-area: badge;
  justify-self: start;
}

.join-consultant-badge {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  padding: 6px 14px;
  font-size: 0.85rem;
  border-radius: 50px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.join-consultant-title {
  grid-area: title;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 800;
  color: var(--jalees-white);
  margin: 0;
  line-height: 1.35;
}

.join-consultant-desc {
  grid-area: desc;
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.7;
  max-width: 680px;
}

.join-consultant-btn-wrap {
  grid-area: action;
  align-self: center;
  justify-self: end;
}

.join-consultant-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-weight: 700;
  white-space: nowrap;
  font-size: 1rem;
  box-shadow: 0 4px 14px rgba(224, 122, 95, 0.35);
  transition: all var(--transition-fast, 0.25s ease);
}

.join-consultant-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(224, 122, 95, 0.45);
}

.join-consultant-benefits {
  grid-area: benefits;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 6px;
}

.join-benefit-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.join-benefit-item i {
  color: var(--jalees-terracotta-light, #F2CC8F);
  font-size: 0.95rem;
}

/* Join Consultant Responsive overrides for mobile */
@media (max-width: 768px) {
  .join-consultant-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(28px, 6vw, 36px) clamp(16px, 5vw, 24px);
    gap: 0;
  }

  .join-consultant-badge-wrap {
    justify-self: center;
    margin-bottom: 12px;
  }

  .join-consultant-title {
    font-size: clamp(1.25rem, 5vw, 1.55rem);
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.4;
  }

  .join-consultant-desc {
    font-size: 0.92rem;
    text-align: center;
    margin-bottom: 22px;
    line-height: 1.75;
  }

  .join-consultant-btn-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
  }

  .join-consultant-btn {
    width: min(88%, 340px);
    min-height: 48px;
    justify-content: center;
    font-size: 0.95rem;
  }

  .join-consultant-benefits {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 0;
  }

  .join-benefit-item {
    justify-content: center;
    font-size: 0.85rem;
    width: 100%;
  }
}

/* ==========================================================================
   FAQ ACCORDIONS (ALL CLOSED BY DEFAULT)
   ========================================================================== */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: var(--jalees-cream-light);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-item.active {
  border-color: var(--jalees-terracotta);
  background: var(--jalees-white);
}

.faq-question {
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-main);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--jalees-navy);
  cursor: pointer;
  text-align: right;
}

.faq-icon {
  font-size: 0.85rem;
  color: var(--jalees-terracotta);
  transition: transform var(--transition-fast);
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.faq-answer p {
  padding: 0 22px 18px;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--jalees-text-body);
}

/* ==========================================================================
   BOOKING WIZARD & CALENDAR
   ========================================================================== */

.booking-wizard {
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: var(--shadow-md);
}

.wizard-stepper {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--jalees-border-subtle);
}

.wizard-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.45;
  transition: opacity var(--transition-fast);
}

.wizard-step-node.active {
  opacity: 1;
}

.node-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--jalees-cream-light);
  border: 2px solid var(--jalees-border);
  color: var(--jalees-navy);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.wizard-step-node.active .node-circle {
  background: var(--jalees-navy);
  border-color: var(--jalees-navy);
  color: var(--jalees-white);
}

.node-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--jalees-navy);
}

.wizard-step-content {
  display: none;
}

.wizard-step-content.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

.step-heading {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.step-subheading {
  font-size: 0.95rem;
  color: var(--jalees-text-muted);
  margin-bottom: 24px;
}

.session-type-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.session-type-card-label {
  cursor: pointer;
}

.session-type-radio {
  display: none;
}

.session-type-card {
  background: var(--jalees-cream-light);
  border: 2px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition-fast);
}

.session-type-radio:checked+.session-type-card {
  background: var(--jalees-white);
  border-color: var(--jalees-terracotta);
  box-shadow: var(--shadow-md);
}

.popular-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--jalees-terracotta);
  color: var(--jalees-white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.card-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--jalees-white);
  color: var(--jalees-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 14px;
}

.session-title {
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.session-duration {
  font-size: 0.85rem;
  color: var(--jalees-sage-dark);
  font-weight: 600;
  margin-bottom: 10px;
}

.session-card-desc {
  font-size: 0.88rem;
  color: var(--jalees-text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}

.session-price-tag {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--jalees-navy);
}

.wizard-nav-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--jalees-border-subtle);
}

/* Calendar Widget */
.calendar-booking-widget {
  background: var(--jalees-cream-light);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.calendar-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cal-month-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--jalees-navy);
}

.cal-nav-btn {
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--jalees-navy);
}

.cal-weekdays-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--jalees-text-muted);
  margin-bottom: 10px;
}

.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  min-height: 250px;
  position: relative;
}

.cal-day-cell {
  height: 42px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1.5px solid transparent;
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--jalees-text-muted);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all var(--transition-fast);
}

/* Phase 9: Available days strictly highlighted in crisp white with clear border & shadow */
.cal-day-cell.available {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: var(--jalees-navy) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  pointer-events: auto !important;
}

.cal-day-cell.available:hover {
  border-color: var(--jalees-terracotta) !important;
  color: var(--jalees-terracotta-dark) !important;
  box-shadow: 0 4px 10px rgba(198, 93, 59, 0.2) !important;
  transform: translateY(-1px);
}

.cal-day-cell.selected {
  background: var(--jalees-navy) !important;
  color: #ffffff !important;
  border-color: var(--jalees-navy) !important;
  box-shadow: 0 4px 12px rgba(15, 34, 64, 0.28) !important;
  transform: translateY(-1px);
}

/* Phase 9: Unavailable / past / non-bookable days visibly disabled & non-interactive */
.cal-day-cell.disabled {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px dashed rgba(0, 0, 0, 0.08) !important;
  color: #94a3b8 !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  user-select: none !important;
  box-shadow: none !important;
}

.time-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  direction: rtl !important;
  width: 100%;
  box-sizing: border-box;
}

.time-slots-grid label {
  display: block;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.time-radio {
  display: none;
}

.slot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  background: var(--jalees-white);
  border: 1.5px solid var(--jalees-border);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--jalees-navy);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  direction: rtl !important;
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
}

.slot-time-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  direction: rtl !important;
  white-space: nowrap;
}

.slot-time-item {
  direction: ltr !important;
  display: inline-block;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.5px;
  unicode-bidi: isolate;
}

.slot-time-sep {
  color: var(--jalees-text-muted);
  font-weight: 400;
  padding: 0 2px;
  display: inline-block;
}

.slot-period-tag {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--jalees-terracotta);
  margin-inline-start: 4px;
  display: inline-block;
}

.slot-btn:hover {
  border-color: var(--jalees-terracotta);
  color: var(--jalees-terracotta-dark);
  box-shadow: 0 3px 8px rgba(198, 93, 59, 0.12);
}

.slot-btn.selected,
.time-radio:checked+.slot-btn {
  background: var(--jalees-terracotta) !important;
  border-color: var(--jalees-terracotta) !important;
  color: var(--jalees-white) !important;
  box-shadow: 0 4px 10px rgba(198, 93, 59, 0.25) !important;
}

.slot-btn.selected .slot-period-tag,
.time-radio:checked+.slot-btn .slot-period-tag {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ==========================================================================
   FORMS & CONTROLS (UNIFIED SYSTEM & GRID ALIGNMENT)
   ========================================================================== */
.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.form-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--jalees-navy);
  margin-bottom: 8px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Universal full-width class utility */
.w-full {
  width: 100% !important;
  max-width: 100% !important;
}

/* Unified full-width input, select, textarea styling */
.form-control,
.form-input,
.form-select,
select.form-control,
select.form-input,
textarea.form-control,
textarea.form-input {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: var(--jalees-charcoal);
  outline: none;
  box-sizing: border-box;
  margin-top: auto;
  /* Aligns input to bottom of flex column across uneven label heights */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-input:focus,
.form-select:focus {
  border-color: var(--jalees-navy);
  box-shadow: 0 0 0 3px rgba(23, 42, 70, 0.08);
}

/* Preserve native width & layout for checkboxes and radio buttons */
input[type="checkbox"].form-control,
input[type="checkbox"].form-input,
input[type="radio"].form-control,
input[type="radio"].form-input,
.form-check-input {
  width: auto !important;
  max-width: none !important;
  margin-top: 0 !important;
  display: inline-block !important;
  cursor: pointer;
}

/* Textarea min height */
textarea.form-control,
textarea.form-input {
  resize: vertical;
  min-height: 85px;
}

/* Styled select dropdown arrow */
select.form-control,
select.form-input,
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23172A46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  padding-left: 38px;
}

[dir="rtl"] select.form-control,
[dir="rtl"] select.form-input,
[dir="rtl"] .form-select {
  background-position: left 14px center;
  padding-left: 38px;
  padding-right: 16px;
}

/* ==========================================================================
   FOOTER (COMPACT, HIGH CONTRAST, MULTI-THEME COMPATIBLE)
   ========================================================================== */

.footer,
.site-footer {
  background-color: var(--theme-footer-bg, #172A46);
  color: var(--theme-footer-text, #FFFFFF);
  padding: 56px 0 0 0;
  border-top: 1px solid var(--theme-card-border, rgba(255, 255, 255, 0.1));
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.2fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: 44px;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-logo-link {
  display: inline-block;
}

.footer-logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.footer-desc {
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--theme-footer-muted, rgba(255, 255, 255, 0.82));
  max-width: 440px;
}

.footer-col-title,
.footer-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--theme-footer-text, #FFFFFF);
  margin-bottom: 18px;
  position: relative;
}

.footer-links-list,
.footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-list li,
.footer-links li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-link {
  color: var(--theme-footer-muted, rgba(255, 255, 255, 0.82));
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 400;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
}

.footer-link:hover {
  color: var(--theme-accent, #D98572);
  transform: translateX(-3px);
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--theme-footer-muted, rgba(255, 255, 255, 0.82));
  text-decoration: none;
  font-size: 0.94rem;
  transition: color var(--transition-fast);
}

.footer-contact-item:hover {
  color: var(--theme-accent, #D98572);
}

.footer-contact-icon {
  font-size: 1.1rem;
  color: var(--theme-accent, #D98572);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.footer-contact-icon.whatsapp-icon {
  color: #25D366;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 0;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.copyright-text {
  font-size: 0.875rem;
  color: var(--theme-footer-muted, rgba(255, 255, 255, 0.65));
  margin: 0;
}

/* ==========================================================================
   FOOTER CURRENCY SELECTOR (DESKTOP OFFSET & ELEGANT THEMED UI)
   ========================================================================== */
.footer-currency-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 10;
}

/* Desktop (>= 769px): Shift inward to prevent floating WhatsApp collision */
@media (min-width: 769px) {
  .footer-currency-wrap {
    margin-left: clamp(230px, 20vw, 300px);
    margin-inline-end: clamp(230px, 20vw, 300px);
  }
}

/* Mobile & Tablet (<= 768px): Center horizontally in Footer */
@media (max-width: 768px) {
  .footer-bottom {
    text-align: center;
    padding-bottom: clamp(75px, 12vw, 90px) !important;
  }

  .footer-bottom-inner {
    flex-direction: column-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
  }

  .footer-currency-wrap {
    margin: 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline-end: auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .jalees-currency-dropdown {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

.jalees-currency-selector-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Currency Trigger Button — Matches JALEES footer theme & typography */
.jalees-currency-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-pill, 50px);
  background: rgba(255, 255, 255, 0.08);
  color: var(--theme-footer-text, #FFFFFF);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-main, 'Thmanyah Sans', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.4;
}

.jalees-currency-trigger:hover,
.jalees-currency-trigger:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--jalees-terracotta, #D98572);
  color: #FFFFFF;
  outline: none;
  box-shadow: 0 4px 14px rgba(217, 133, 114, 0.3);
}

.jalees-currency-trigger .curr-flag {
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.jalees-currency-trigger .curr-code {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  direction: ltr;
  display: inline-block;
}

.jalees-currency-trigger .curr-chevron {
  font-size: 0.68rem;
  opacity: 0.75;
  transition: transform 0.25s ease;
  margin-top: 1px;
}

.jalees-currency-trigger[aria-expanded="true"] .curr-chevron {
  transform: rotate(180deg);
}

/* Dropdown Menu Popup */
.jalees-currency-dropdown {
  display: none;
  position: absolute;
  min-width: 170px;
  max-width: 220px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  z-index: 1050;
  padding: 6px 0;
  text-align: right;
  overflow: hidden;
}

.jalees-currency-dropdown.drop-up {
  bottom: calc(100% + 10px);
  top: auto;
}

.jalees-currency-dropdown.drop-down {
  top: calc(100% + 10px);
  bottom: auto;
}

@media (min-width: 769px) {
  .jalees-currency-dropdown {
    left: 0;
    right: auto;
  }
}

.jalees-currency-dropdown-header {
  padding: 6px 14px 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #718096;
  border-bottom: 1px solid #EDF2F7;
  margin-bottom: 4px;
  text-align: center;
  font-family: var(--font-main, 'Thmanyah Sans', sans-serif);
}

.jalees-currency-list {
  max-height: 230px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 0 4px;
}

.jalees-curr-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin: 2px 0;
  border-radius: 8px;
  color: #1A2B4C;
  text-decoration: none !important;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease;
  direction: ltr;
  /* Keeps flag and ISO code consistently LTR */
}

.jalees-curr-item:hover {
  background: rgba(217, 133, 114, 0.09);
  color: var(--jalees-terracotta, #D98572);
}

.jalees-curr-item.active {
  background: rgba(217, 133, 114, 0.14);
  color: var(--jalees-terracotta, #D98572);
  font-weight: 700;
}

.jalees-curr-item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}

.jalees-curr-item-label .curr-flag {
  font-size: 1.1rem;
  line-height: 1;
}

.jalees-curr-item-label .curr-code {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  direction: ltr;
  display: inline-block;
}

.jalees-curr-check {
  font-size: 0.8rem;
  color: var(--jalees-terracotta, #D98572);
}

/* ==========================================================================
   FLOATING WHATSAPP BUTTON (JALEES BRAND STYLED — BOTTOM LEFT)
   ========================================================================== */
.floating-whatsapp-btn {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: calc(24px + env(safe-area-inset-left, 0px));
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--jalees-navy, #1A2B4C);
  color: var(--jalees-white, #FFFFFF);
  padding: 12px 20px;
  border-radius: var(--radius-pill, 50px);
  box-shadow: 0 8px 24px rgba(26, 43, 76, 0.3);
  border: 1px solid rgba(217, 133, 114, 0.4);
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.floating-whatsapp-btn:hover,
.floating-whatsapp-btn:focus-visible {
  background: var(--jalees-terracotta, #D98572);
  color: var(--jalees-white, #FFFFFF);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(217, 133, 114, 0.45);
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
}

.floating-whatsapp-icon {
  font-size: 1.35rem;
  color: var(--jalees-terracotta, #D98572);
  transition: color 0.3s ease, transform 0.3s ease;
  line-height: 1;
}

.floating-whatsapp-btn:hover .floating-whatsapp-icon,
.floating-whatsapp-btn:focus-visible .floating-whatsapp-icon {
  color: var(--jalees-white, #FFFFFF);
  transform: scale(1.1);
}

.floating-whatsapp-text {
  font-size: 0.9rem;
  font-weight: 700;
  font-family: var(--font-main, 'Thmanyah Sans', sans-serif);
  white-space: nowrap;
  color: var(--jalees-white, #FFFFFF);
}

.floating-whatsapp-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  background: var(--jalees-navy, #1A2B4C);
  color: var(--jalees-white, #FFFFFF);
  padding: 6px 14px;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-main, 'Thmanyah Sans', sans-serif);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  transform: translateY(6px);
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(217, 133, 114, 0.3);
}

/* ==========================================================================
   ABOUT PAGE HERO & RESPONSIVE STACK
   ========================================================================== */
.about-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.about-hero-image-wrap {
  width: 100%;
  max-width: 780px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--jalees-white);
  background: var(--jalees-cream);
}

.about-hero-img {
  width: 100%;
  max-width: 100%;
  height: clamp(220px, 42vw, 380px);
  object-fit: cover;
  display: block;
}

.about-hero-text {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-hero-text p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   JOIN CONSULTANT PAGE (PURE RTL, RIGHT ALIGNED, BALANCED SPACING)
   ========================================================================== */

.join-hero-section {
  padding: clamp(44px, 5.5vw, 68px) 0 clamp(36px, 4.5vw, 52px) 0;
  background: radial-gradient(circle at 90% 20%, rgba(217, 133, 114, 0.08) 0%, transparent 60%), var(--jalees-cream-light);
  border-bottom: 1px solid var(--jalees-border);
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
}

.join-hero-wrapper {
  width: 100%;
}

.join-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  max-width: 840px;
  margin-left: auto;
  margin-right: 0;
}

.join-hero-content .hero-badge {
  align-self: flex-start;
  margin-bottom: 16px;
}

.join-hero-title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--jalees-navy);
  margin-bottom: 16px;
  line-height: 1.35;
  text-align: right;
  width: 100%;
}

.join-hero-desc {
  font-size: clamp(1.02rem, 1.8vw, 1.2rem);
  line-height: 1.8;
  color: var(--jalees-text-body);
  margin-bottom: 28px;
  text-align: right;
  max-width: 780px;
}

.join-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}

/* Section 2: Financial Return Section (Right Aligned Axis) */
.join-financial-section {
  padding: clamp(36px, 4vw, 56px) 0;
  margin-bottom: 0;
  height: auto !important;
  min-height: 0 !important;
}

.join-section-header {
  text-align: right;
  max-width: 840px;
  margin-left: auto;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.join-section-header .section-eyebrow {
  align-self: flex-start;
  margin-bottom: 8px;
}

.join-section-title {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 800;
  color: var(--jalees-navy);
  margin-bottom: 12px;
  text-align: right;
  width: 100%;
}

.join-section-desc {
  font-size: 1.05rem;
  color: var(--jalees-text-muted);
  line-height: 1.75;
  text-align: right;
  max-width: 780px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-card {
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--jalees-terracotta);
}

.why-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--jalees-terracotta-light);
  color: var(--jalees-terracotta-dark);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.join-consultant-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.join-form-card {
  background: var(--jalees-white);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-xl);
  padding: clamp(20px, 4vw, 36px);
  box-shadow: var(--shadow-lg);
  width: 100%;
  box-sizing: border-box;
}

.join-obligations-card {
  width: 100%;
  box-sizing: border-box;
}

.join-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .join-consultant-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .join-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.floating-whatsapp-btn:hover .floating-whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 767.98px) {
  .floating-whatsapp-btn {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: calc(18px + env(safe-area-inset-left, 0px));
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 6px 22px rgba(26, 43, 76, 0.35);
  }

  .floating-whatsapp-text,
  .floating-whatsapp-tooltip {
    display: none !important;
  }

  .floating-whatsapp-icon {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (360px, 390px, 414px, 768px, 1024px, 1280px)
   ========================================================================== */

/* ==========================================================================
   CAROUSEL DOTS PAGINATION (ANTI-DISTORTION & STRICT CIRCULAR RATIO)
   ========================================================================== */
.carousel-dots-pagination {
  display: none;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  margin-bottom: 12px;
  padding: 6px 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  direction: rtl;
  clear: both;
  line-height: 1;
}

.carousel-dot,
.swiper-pagination-bullet {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background: #D5CCC0 !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  flex: 0 0 8px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  align-self: center !important;
  outline: none !important;
  box-shadow: none !important;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  box-sizing: border-box !important;
}

.carousel-dot:hover,
.swiper-pagination-bullet:hover {
  background: var(--jalees-terracotta-dark) !important;
}

.carousel-dot.active,
.carousel-dot.is-active,
.swiper-pagination-bullet-active {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background: var(--jalees-terracotta) !important;
  box-shadow: 0 0 0 3px rgba(217, 133, 114, 0.3) !important;
  transform: scale(1.25) !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .why-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .domains-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .journey-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .journey-connector-line {
    display: none;
  }
}

@media (max-width: 991px) {
  .consultant-profile-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .consultant-booking-column {
    position: static;
    top: auto;
  }

  .about-story-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-mission-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Tablet & Mobile Header Navigation (max-width: 992px) */
@media (max-width: 992px) {

  .nav-links,
  .header-actions .btn-ghost {
    display: none;
  }

  .mobile-nav-toggle {
    display: inline-flex !important;
  }
}

/* ==========================================================================
   MOBILE ONLY CAROUSEL & STACKED LAYOUTS (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {

  .header-inner {
    height: 68px;
  }

  .brand-logo-img {
    height: 32px;
    max-height: 32px;
  }

  /* Mobile Single Item Touch Carousels (1 slide = 1 full card, 0 partial card preview) */
  .carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 8px;
  }

  .why-cards-grid,
  .domains-grid,
  .consultants-carousel-track,
  .journey-grid-carousel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    gap: 0 !important;
    padding: 8px 0 16px 0 !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
  }

  .why-cards-grid::-webkit-scrollbar,
  .domains-grid::-webkit-scrollbar,
  .consultants-carousel-track::-webkit-scrollbar,
  .journey-grid-carousel::-webkit-scrollbar {
    display: none;
  }

  /* Mobile Standardized Card Layout & Padding (20px on Mobile, 24px on Desktop) */
  .why-image-card,
  .domain-card,
  .consultant-card,
  .journey-step-item {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding: 20px !important;
  }

  .why-image-card {
    padding: 0 !important;
    /* Outer card padding is 0 to allow top image to touch card top border */
    overflow: hidden !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  .why-card-img-wrap {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    display: block !important;
  }

  .why-image-card img,
  .why-card-img {
    width: 100% !important;
    height: auto !important;
    /* CRITICAL: Lets the image show fully without cropping */
    max-height: none !important;
    /* Remove any previous max-height limits */
    min-height: 0 !important;
    object-fit: contain !important;
    /* Ensures the whole image is visible */
    object-position: center !important;
    border-radius: 16px 16px 0 0 !important;
    display: block !important;
  }

  .why-card-body {
    padding: 20px !important;
  }

  /* Dots / Pagination on Mobile — Centered, Spaced & Overflow-Protected */
  .carousel-dots-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 22px !important;
    margin-bottom: 12px !important;
    padding: 6px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    direction: rtl !important;
    clear: both !important;
  }

  .carousel-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    max-width: 8px !important;
    max-height: 8px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    background: #D5CCC0 !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    flex: 0 0 8px !important;
    flex-shrink: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
  }

  .carousel-dot:hover {
    background: var(--jalees-terracotta-dark) !important;
  }

  .carousel-dot.active {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    max-width: 8px !important;
    max-height: 8px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    background: var(--jalees-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(217, 133, 114, 0.3) !important;
    transform: scale(1.25) !important;
  }

  .hero-photo-wrap {
    border-radius: var(--radius-lg);
    border-width: 2px;
  }

  .journey-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .footer-bottom {
    text-align: center;
    padding-bottom: clamp(75px, 12vw, 90px) !important;
  }

  .footer-bottom-inner {
    flex-direction: column-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
  }

  .footer-currency-wrap {
    margin: 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline-end: auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .jalees-currency-dropdown {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .wizard-stepper {
    overflow-x: auto;
    gap: 12px;
    justify-content: flex-start;
  }

  .wizard-step-node {
    min-width: 68px;
  }

  .about-values-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .about-goals-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .consultant-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .consultant-actions .btn {
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  .auth-card {
    padding: 24px 18px 44px !important;
  }

  .hero-title {
    font-size: clamp(2.15rem, 6.8vw, 2.85rem);
    font-weight: 800;
    line-height: 1.3;
  }

  .hero-title-line {
    white-space: normal;
    word-break: break-word;
    text-wrap: balance;
  }

  .hero-desc {
    font-size: 0.88rem;
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 90%;
  }

  .social-auth-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(1.85rem, 7.2vw, 2.25rem);
    gap: 6px;
    line-height: 1.3;
    margin-bottom: 16px;
  }

  .hero-title-line {
    white-space: normal;
    word-break: break-word;
    text-wrap: balance;
  }

  .hero-desc {
    font-size: 0.82rem;
    line-height: 1.65;
    margin-bottom: 20px;
    max-width: 100%;
  }

  .auth-card {
    padding: 24px 16px 44px !important;
  }
}

@media (max-width: 360px) {
  .hero-title {
    font-size: 1.7rem;
    gap: 4px;
    line-height: 1.3;
  }

  .hero-desc {
    font-size: 0.78rem;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  .profile-header-card {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .consultant-actions {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HOMEPAGE FEATURED CONSULTANTS & CONSULTANTS PAGE GRID (RESPONSIVE)
   ========================================================================== */
.homepage-consultants-grid,
.consultants-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 36px;
  width: 100%;
  box-sizing: border-box;
}

.homepage-consultant-card,
.consultant-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.homepage-consultant-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--jalees-terracotta);
}

@media (min-width: 1024px) {

  .homepage-consultants-grid,
  .consultants-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {

  .homepage-consultants-grid,
  .consultants-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

@media (max-width: 767.98px) {

  .homepage-consultants-grid,
  .consultants-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .homepage-consultants-grid .mobile-hidden-consultant:not(.is-expanded) {
    display: none !important;
  }

  .homepage-consultants-action-wrap #btnShowAllConsultants .btn-text-desktop {
    display: none !important;
  }

  .homepage-consultants-action-wrap #btnShowAllConsultants .btn-text-mobile {
    display: inline !important;
  }
}

/* ==========================================================================
   BOOKING FUNNEL — COMPACT RTL STEPPER (NUMBERS ONLY 1 — 2 — 3 — 4 — 5)
   ========================================================================== */
.compact-wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  max-width: 520px;
  margin: 0 auto 32px auto;
  padding: 0 12px;
  direction: rtl;
}

.compact-wizard-stepper .stepper-track-line {
  position: absolute;
  top: 50%;
  right: 28px;
  left: 28px;
  height: 3px;
  background: var(--jalees-border);
  z-index: 1;
  transform: translateY(-50%);
}

.compact-wizard-stepper .stepper-progress-fill {
  position: absolute;
  top: 50%;
  right: 28px;
  height: 3px;
  background: var(--jalees-terracotta);
  z-index: 2;
  transform: translateY(-50%);
  transition: width 0.3s ease;
  width: 0%;
}

.compact-wizard-stepper .stepper-node {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compact-wizard-stepper .node-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--jalees-white);
  border: 2px solid var(--jalees-border);
  color: var(--jalees-text-muted);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-sm);
  cursor: default;
}

.compact-wizard-stepper .stepper-node.active .node-circle {
  border-color: var(--jalees-terracotta);
  background: var(--jalees-terracotta);
  color: var(--jalees-white);
  box-shadow: 0 0 0 4px rgba(217, 133, 114, 0.22);
}

.compact-wizard-stepper .stepper-node.completed .node-circle {
  border-color: var(--jalees-navy);
  background: var(--jalees-navy);
  color: var(--jalees-white);
}

@media (max-width: 480px) {
  .compact-wizard-stepper {
    max-width: 100%;
    padding: 0 4px;
    margin-bottom: 24px;
  }

  .compact-wizard-stepper .stepper-track-line,
  .compact-wizard-stepper .stepper-progress-fill {
    right: 20px;
    left: 20px;
  }

  .compact-wizard-stepper .node-circle {
    width: 32px;
    height: 32px;
    font-size: 0.82rem;
  }
}

/* ==========================================================================
   SCHEDULE MANAGER & AVAILABILITY CALENDAR COMPONENT
   Pure RTL Arabic-First Architecture with Dark Mode & Mobile Responsiveness
   ========================================================================== */

.schedule-manager {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 16px;
  padding-block: 24px 60px;
  direction: rtl;
  text-align: right;
  font-family: var(--font-main);
  box-sizing: border-box;
}

/* Header Component */
.schedule-header {
  background: var(--jalees-navy);
  color: var(--jalees-white);
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: var(--shadow-md);
  transition: var(--transition-smooth);
}

.schedule-header-title {
  color: var(--jalees-white);
  margin: 0 0 6px 0;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.schedule-header-desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.94rem;
  font-weight: 400;
}

.schedule-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Toolbar Component */
.schedule-toolbar {
  background: var(--jalees-cream-card);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.schedule-toolbar-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* View Mode Switch (Segmented Control) */
.view-toggle {
  display: inline-flex;
  background: var(--jalees-cream-surface);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--jalees-border);
  gap: 4px;
}

.view-toggle-btn {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--jalees-text-body);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.view-toggle-btn.active,
.view-toggle-btn:hover {
  background: var(--jalees-white);
  color: var(--jalees-navy);
  box-shadow: var(--shadow-sm);
}

/* Calendar Card & Grid */
.schedule-calendar-card {
  background: var(--jalees-cream-card);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.calendar-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.calendar-month-title {
  margin: 0;
  color: var(--jalees-navy);
  font-size: 1.3rem;
  font-weight: 700;
}

.calendar-status-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  flex-wrap: wrap;
  color: var(--jalees-text-muted);
}

.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}

/* 7-Column Grid */
.calendar-grid-header {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 8px;
  margin-bottom: 8px;
  text-align: center;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.weekday-header-cell {
  font-weight: 700;
  color: var(--jalees-navy);
  font-size: 0.88rem;
  padding: 10px 4px;
  background: var(--jalees-cream-light);
  border-radius: var(--radius-sm);
  border: 1px solid var(--jalees-border-light);
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.calendar-grid-body {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 8px;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.calendar-day-empty {
  background: var(--jalees-cream-light);
  border: 1px dashed var(--jalees-border-light);
  border-radius: var(--radius-md);
  min-height: 120px;
  opacity: 0.4;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.calendar-day-cell {
  background: var(--jalees-cream-card);
  border: 1px solid var(--jalees-border);
  border-radius: var(--radius-md);
  padding: 10px;
  min-height: 120px;
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.calendar-day-cell:hover,
.calendar-day-cell:focus-visible {
  box-shadow: var(--shadow-md);
  border-color: var(--jalees-terracotta);
  transform: translateY(-2px);
  outline: none;
}

.calendar-day-cell.is-today {
  border-color: var(--jalees-terracotta);
  background: var(--jalees-terracotta-tint);
}

.calendar-day-cell.is-selected {
  box-shadow: 0 0 0 2px var(--jalees-terracotta);
}

.calendar-day-cell.is-off {
  background: var(--jalees-cream-light);
  border-color: var(--jalees-border-light);
}

.day-cell-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.day-number {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--jalees-navy);
}

.calendar-day-cell.is-today .day-number {
  color: var(--jalees-terracotta-dark);
}

/* Status Badges */
.day-status-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.day-status-badge.available {
  background: #E8F5E9;
  color: #2E7D32;
}

.day-status-badge.off {
  background: #FFEBEE;
  color: #D32F2F;
}

.day-status-badge.booked {
  background: #E3F2FD;
  color: #1976D2;
}

.day-status-badge.special {
  background: #FFE0B2;
  color: #E65100;
}

/* Schedule Chips */
.schedule-chips-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.schedule-chip {
  background: var(--jalees-cream-surface);
  border: 1px solid var(--jalees-border);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 0.74rem;
  color: var(--jalees-navy);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-fast);
}

.schedule-chip:hover {
  background: var(--jalees-white);
  border-color: var(--jalees-terracotta);
}

.day-cell-bottom {
  border-top: 1px dashed var(--jalees-border);
  padding-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
}

.day-action-link {
  color: var(--jalees-terracotta);
  font-weight: 700;
  transition: var(--transition-fast);
}

.calendar-day-cell:hover .day-action-link {
  color: var(--jalees-terracotta-dark);
}

/* Recurrence Segmented Cards */
.recurrence-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.recurrence-card-option {
  padding: 12px 8px;
  border: 1px solid var(--jalees-border);
  background: var(--jalees-cream-card);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: var(--transition-fast);
  font-family: inherit;
}

.recurrence-card-option:hover {
  border-color: var(--jalees-terracotta);
  background: var(--jalees-cream-surface);
}

.recurrence-card-option.active {
  border: 2px solid var(--jalees-terracotta);
  background: var(--jalees-terracotta-tint);
  box-shadow: var(--shadow-sm);
}

.recurrence-card-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--jalees-navy);
}

.recurrence-card-sub {
  display: block;
  font-size: 0.74rem;
  color: var(--jalees-text-muted);
}

/* Weekly Day Pills Selector */
.weekly-day-pills {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

.weekly-day-pill {
  padding: 10px 4px;
  border: 1px solid var(--jalees-border);
  background: var(--jalees-cream-card);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--jalees-navy);
  text-align: center;
  transition: var(--transition-fast);
  font-family: inherit;
}

.weekly-day-pill.active {
  border: 2px solid var(--jalees-terracotta);
  background: var(--jalees-terracotta-tint);
  color: var(--jalees-terracotta-dark);
}

/* Time Period Range Card */
.time-period-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--jalees-cream-surface);
  border: 1px solid var(--jalees-border);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.time-period-card:hover {
  border-color: var(--jalees-terracotta);
}

.time-period-input {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--jalees-border);
  font-size: 0.88rem;
  font-family: inherit;
  direction: ltr;
  text-align: center;
  width: 110px;
  background: var(--jalees-white);
  color: var(--jalees-navy);
  font-weight: 600;
}

.time-period-input:focus {
  outline: none;
  border-color: var(--jalees-terracotta);
  box-shadow: 0 0 0 3px var(--jalees-terracotta-tint);
}

/* Side Drawer & Mobile Bottom Sheet */
.day-panel-drawer {
  background: var(--jalees-cream-card);
  border-radius: var(--radius-lg);
  max-width: 580px;
  width: 100%;
  padding: 26px;
  box-shadow: var(--shadow-lg);
  position: relative;
  transition: var(--transition-smooth);
}

@media (max-width: 768px) {
  .schedule-manager {
    padding-inline: 10px;
    padding-block: 16px 40px;
  }

  .schedule-header {
    padding: 18px 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .schedule-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .schedule-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }

  .schedule-toolbar-group {
    justify-content: space-between;
    width: 100%;
  }

  .schedule-toolbar-group .view-toggle {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }

  .schedule-toolbar-group .view-toggle .view-toggle-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
  }

  .calendar-table-container,
  .schedule-calendar-card {
    overflow-x: hidden !important;
  }

  .calendar-table,
  .calendar-grid-header,
  .calendar-grid-body {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: none !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  .calendar-table th,
  .weekday-header-cell {
    border: none !important;
    border-bottom: 1px solid #EEEEEE !important;
    padding: 6px 2px !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--jalees-navy, #1B365D) !important;
    background: transparent !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* The cell padding needs to be minimal */
  .calendar-table td,
  .calendar-day-cell,
  .calendar-day-empty {
    border: none !important;
    border-bottom: 1px solid #EEEEEE !important;
    padding: 5px 2px !important;
    text-align: center !important;
    vertical-align: top !important;
    min-height: 54px !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .calendar-table td .add-appointment-btn,
  .calendar-table td .empty-text,
  .calendar-day-cell .add-appointment-btn,
  .calendar-day-cell .day-action-link,
  .calendar-day-cell .empty-text,
  .calendar-day-cell .day-lock-icon,
  .calendar-day-cell .schedule-chips-list,
  .calendar-day-cell .desktop-only-icon,
  .calendar-day-cell .badge-count,
  .calendar-day-cell .badge-desc {
    display: none !important;
  }

  .calendar-day-cell .day-cell-bottom {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 1px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  .day-status-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .calendar-table td .date-number,
  .calendar-day-cell .day-number,
  .calendar-day-cell .date-number {
    display: block !important;
    font-size: 16px !important;
    font-weight: bold !important;
    margin-bottom: 4px !important;
    text-align: center !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    border-radius: 50% !important;
    margin-inline: auto !important;
    color: var(--jalees-navy, #1B365D) !important;
  }

  .calendar-day-cell.is-today .day-number,
  .calendar-day-cell.is-today .date-number {
    background: var(--jalees-terracotta, #E07A5F) !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
  }

  /* Compact the main status badge (e.g., متاح) */
  .calendar-table td .status-badge,
  .calendar-day-cell .status-badge,
  .calendar-day-cell .calendar-appointment-item {
    display: inline-block !important;
    padding: 2px 4px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }

  /* Hide the clock icon inside the badge on mobile to save space */
  .calendar-table td .status-badge i,
  .calendar-day-cell .status-badge i {
    display: none !important;
  }

  /* Compact the session count text (e.g., 1 جلسة متاحة) */
  .calendar-table td .session-count,
  .calendar-day-cell .session-count {
    display: block !important;
    font-size: 9px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .session-count.session-count-available {
    color: #2E7D32 !important;
  }

  .session-count.session-count-booked {
    color: var(--jalees-navy, #1B365D) !important;
  }

  .status-badge.booked-badge,
  .status-badge.badge-booked {
    background: var(--jalees-navy, #1B365D) !important;
    color: #FFFFFF !important;
  }

  .status-badge.available-badge,
  .status-badge.badge-available {
    background: #E8F5E9 !important;
    color: #2E7D32 !important;
    border: 1px solid rgba(46, 125, 50, 0.25) !important;
  }

  .recurrence-selector {
    grid-template-columns: repeat(2, 1fr);
  }

  .weekly-day-pills {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Transform Drawer into Mobile Bottom Sheet */
  .day-panel-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 88vh;
    overflow-y: auto;
    padding: 20px 16px;
    animation: slideUpBottomSheet 0.3s ease-out;
  }
}

@keyframes slideUpBottomSheet {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* Dark Mode Theme Compatibility */
[data-theme="dark"] .schedule-header {
  background: #111C2E;
}

[data-theme="dark"] .schedule-toolbar,
[data-theme="dark"] .schedule-calendar-card,
[data-theme="dark"] .day-panel-drawer {
  background: #192639;
  border-color: #2A3B54;
}

[data-theme="dark"] .weekday-header-cell,
[data-theme="dark"] .time-period-card,
[data-theme="dark"] .schedule-chip {
  background: #111C2E;
  border-color: #2A3B54;
  color: #E2E8F0;
}

[data-theme="dark"] .calendar-day-cell {
  background: #192639;
  border-color: #2A3B54;
}

[data-theme="dark"] .day-number,
[data-theme="dark"] .calendar-month-title {
  color: #F8FAFC;
}

/* ==========================================================================
   ADMIN DASHBOARD SCHEDULE MODAL POSITIONING & FLUID RESPONSIVE LAYOUT
   ========================================================================== */

/* Admin Schedule Modal Backdrop & Centered Dialog */
.admin-schedule-modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 270px;
  /* Aligns with fixed Admin Sidebar on Desktop */
  z-index: 2000;
  background: rgba(13, 27, 42, 0.65);
  backdrop-filter: blur(4px);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 20px;
  direction: rtl;
}

@media (max-width: 991px) {
  .admin-schedule-modal-backdrop {
    right: 0;
    /* Inset full screen on Mobile/Tablet when sidebar collapses */
    padding: 10px;
  }
}

.admin-schedule-modal-dialog {
  background: var(--jalees-cream-card, #FFFFFF);
  width: 100%;
  max-width: 1160px;
  height: calc(100vh - 40px);
  max-height: 860px;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--jalees-border, #EAE3D7);
}

.admin-schedule-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--jalees-border);
  background: var(--jalees-cream-surface);
  flex-shrink: 0;
}

.admin-schedule-modal-title {
  margin: 0;
  color: var(--jalees-navy);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-schedule-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--jalees-text-muted);
  padding: 4px 8px;
  font-weight: 700;
  transition: var(--transition-fast);
  border-radius: var(--radius-sm);
}

.admin-schedule-modal-close:hover {
  color: #D32F2F;
  background: var(--jalees-cream-light);
}

.admin-schedule-modal-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.admin-schedule-modal-iframe {
  width: 100%;
  height: 100%;
  min-height: 550px;
  border: none;
  flex: 1;
  display: block;
}

/* Fluid Responsive Grid for Main Schedule Container */
.schedule-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .schedule-main-grid {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 14px;
  }
}

@media (max-width: 860px) {
  .schedule-main-grid {
    grid-template-columns: 1fr;
  }
}

/* Safe Z-Index Elevation for Inner Drawers & Wizards inside iframe */
#dayEditModal,
#recurringWizardModal,
#appointmentModal,
#dayDetailsModal {
  z-index: 3500 !important;
}

/* Redesigned Calendar Appointments & Locked Bookings */
.calendar-appointment-item {
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 0.72rem;
  margin-bottom: 4px;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  transition: var(--transition-fast);
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.calendar-appointment-item span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

.calendar-appointment-booked {
  background: var(--jalees-navy, #1B2A4A);
  color: #FFFFFF;
  border-right: 3px solid var(--jalees-terracotta, #E07A5F);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  font-weight: 700;
}

.calendar-appointment-booked .lock-icon {
  color: #FFD54F;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.calendar-appointment-booked .booked-tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.65rem;
  max-width: 48% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex-shrink: 1 !important;
  margin-right: auto;
}

.calendar-appointment-open {
  background: rgba(46, 125, 50, 0.08);
  color: #2E7D32;
  border: 1px solid rgba(46, 125, 50, 0.25);
  font-weight: 600;
}

.calendar-appointment-open:hover {
  background: rgba(46, 125, 50, 0.16);
}

/* Bottom Tools Toolbar */
.bottom-tools-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--jalees-white, #FFFFFF);
  border-top: 2px solid var(--jalees-terracotta, #E07A5F);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
  padding: 12px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1040;
  direction: rtl;
}

.bottom-tools-info {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.88rem;
}

.bottom-tools-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--jalees-navy, #1B2A4A);
}

.bottom-tools-stat strong {
  color: var(--jalees-terracotta, #E07A5F);
}

.bottom-tools-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-add-appointment {
  background: var(--jalees-terracotta, #E07A5F);
  color: #FFFFFF;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 22px;
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(224, 122, 95, 0.35);
  transition: var(--transition-fast);
}

.btn-add-appointment:hover {
  background: var(--jalees-terracotta-dark, #C8654B);
  transform: translateY(-1px);
}

/* Month checklist pills in Appointment Modal */
.months-grid-checklist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.month-pill-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  border: 1px solid var(--jalees-border);
  background: var(--jalees-cream-card);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--jalees-navy);
  transition: var(--transition-fast);
  user-select: none;
}

.month-pill-checkbox:has(input:checked) {
  border-color: var(--jalees-terracotta);
  background: var(--jalees-terracotta-tint);
  color: var(--jalees-terracotta-dark);
  font-weight: 700;
}

/* Mobile Responsiveness for 320px, 375px, 390px, 414px, 768px */
@media (max-width: 768px) {
  .bottom-tools-toolbar {
    padding: 10px 14px;
    flex-direction: column;
    gap: 8px;
  }

  .bottom-tools-info {
    width: 100%;
    justify-content: space-around;
    font-size: 0.8rem;
    gap: 8px;
  }

  .bottom-tools-actions {
    width: 100%;
  }

  .btn-add-appointment {
    width: 100%;
    justify-content: center;
    padding: 10px;
    font-size: 0.9rem;
  }

  .months-grid-checklist {
    grid-template-columns: repeat(3, 1fr);
  }

  .schedule-manager {
    padding-bottom: 110px !important;
  }
}

@media (max-width: 480px) {
  .months-grid-checklist {
    grid-template-columns: repeat(2, 1fr);
  }

  .calendar-table td,
  .calendar-day-cell,
  .calendar-day-empty {
    min-height: 52px !important;
    padding: 8px 1px 4px 1px !important;
  }

  .calendar-table td .status-badge,
  .calendar-day-cell .status-badge,
  .calendar-appointment-item {
    font-size: 9px !important;
    padding: 1px 3px !important;
  }
}

[data-theme="dark"] .bottom-tools-toolbar {
  background: #192639;
  border-color: #2A3B54;
}

[data-theme="dark"] .bottom-tools-stat {
  color: #E2E8F0;
}

[data-theme="dark"] .month-pill-checkbox {
  background: #111C2E;
  border-color: #2A3B54;
  color: #E2E8F0;
}

/* Beneficiary Sidebar Book Session Button */
.book-session-sidebar-btn {
  background: var(--jalees-terracotta, #E07A5F) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(224, 122, 95, 0.28);
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.book-session-sidebar-btn:hover {
  background: var(--jalees-terracotta-dark, #C85A32) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(224, 122, 95, 0.38);
}

/* ==========================================================================
   PHASE 6 — COMPREHENSIVE MOBILE RESPONSIVENESS SUITE (320px — 768px)
   Pure RTL Arabic-First Architecture with Zero Horizontal Overflow
   ========================================================================== */

/* 1. Viewport & Universal Fluid Safety */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Universal Table Responsive Container */
.table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
  scrollbar-width: thin;
}

.table-responsive::-webkit-scrollbar {
  height: 5px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(27, 54, 93, 0.22);
  border-radius: 4px;
}

/* Text Consultation Master-Detail Layout */
.text-consultation-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 992px) {
  .text-consultation-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* 3. Tablet & Mobile Universal Breakpoint (max-width: 768px) */
@media (max-width: 768px) {

  /* Minimum 44x44px Touch Targets for Interactive Elements */
  .btn,
  .btn-sm,
  .btn-lg,
  .btn-room,
  .btn-join-session,
  .slot-btn,
  .cal-nav-btn,
  .mobile-nav-toggle,
  .drawer-close-btn,
  .admin-sidebar-close-btn,
  .filter-tab,
  .customer-nav-item {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* Prevent iOS Safari auto-zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Tables inside scrollable wrappers keep minimum width for legibility */
  .table-responsive>table,
  .table-card>table,
  div[style*="overflow-x: auto"]>table {
    min-width: 580px;
  }

  /* Beneficiary / Customer Layout Responsiveness */
  .customer-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    width: 100% !important;
    min-height: auto !important;
    align-content: start !important;
  }

  .customer-sidebar {
    padding: 14px 16px !important;
    border-left: none !important;
    border-bottom: 1px solid var(--jalees-border) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .customer-user-badge {
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
    gap: 12px !important;
  }

  .customer-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
  }

  .customer-nav {
    flex-direction: row !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .customer-nav::-webkit-scrollbar {
    display: none;
  }

  .customer-nav-item {
    padding: 8px 14px !important;
    font-size: 0.88rem !important;
    white-space: nowrap !important;
    border: 1px solid var(--jalees-border) !important;
    background: #FFFFFF !important;
    border-radius: 20px !important;
    flex-shrink: 0 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
    cursor: pointer !important;
  }

  .customer-nav-item.active {
    background: var(--jalees-navy) !important;
    color: #FFFFFF !important;
    border-color: var(--jalees-navy) !important;
  }

  .customer-nav-item.book-session-sidebar-btn {
    background: var(--jalees-terracotta) !important;
    color: #FFFFFF !important;
    border-color: var(--jalees-terracotta) !important;
    margin-bottom: 0 !important;
  }

  .customer-main {
    padding: 16px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Customer Sessions Cards on Mobile */
  .session-card {
    padding: 16px 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .session-card .btn-room {
    width: 100% !important;
    justify-content: center !important;
  }

  .session-info {
    gap: 12px !important;
  }

  .consultant-avatar-img {
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
  }

  /* Featured Online Session Card on Mobile */
  .featured-meeting-card {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }

  .meeting-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .consultant-img {
    width: 54px !important;
    height: 54px !important;
    flex-shrink: 0 !important;
  }

  .featured-meeting-card .meeting-card-content>div:last-child {
    width: 100% !important;
    align-items: stretch !important;
    text-align: center !important;
  }

  .featured-meeting-card .btn-join-session {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Customer Stats Grid on Tablet/Mobile */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 1.25rem !important;
  }

  .stat-card {
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .stat-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.15rem !important;
  }

  /* Filter Tabs horizontal scroll */
  .filter-tabs {
    gap: 6px !important;
    padding-bottom: 8px !important;
  }

  .filter-tab {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
  }

  /* Mobile Modals — Centered Evaluation, Rating, Success & Dialog Modals */
  .modal-backdrop,
  .modal-overlay-backdrop,
  #postSessionModal,
  .review-modal-backdrop,
  .evaluation-modal-backdrop,
  .rating-modal-backdrop,
  .success-modal-backdrop,
  #beneficiaryTextModal,
  #sessionDetailsModal {
    padding: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .modal-dialog-centered,
  .modal-dialog,
  .modal-content-card,
  .review-modal,
  .evaluation-modal,
  .rating-modal,
  .success-modal,
  #postSessionModal .review-modal,
  #beneficiaryTextModal>div,
  #sessionDetailsModal>div {
    width: 95% !important;
    max-width: 540px !important;
    border-radius: 20px !important;
    max-height: 90vh !important;
    margin: auto !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    align-self: center !important;
  }

  /* Specific bottom sheets for availability scheduling drawers */
  .payment-modal-backdrop,
  #appointmentModal,
  #dayDetailsModal,
  #categoryModalOverlay {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .payment-modal-card,
  #appointmentModal>div,
  #dayDetailsModal>div,
  #categoryModalOverlay>.modal-content-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Calendar booking widget on mobile */
  .calendar-booking-widget {
    padding: 14px 10px !important;
  }

  .cal-nav-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .cal-day-cell {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 0.88rem !important;
  }

  /* Time slots grid on mobile */
  .time-slots-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .slot-btn {
    padding: 8px 6px !important;
    font-size: 0.84rem !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .slot-time-content {
    gap: 4px !important;
    direction: rtl !important;
    white-space: nowrap !important;
    font-size: 0.84rem !important;
  }
}

/* 4. Compact Mobile Breakpoint (max-width: 480px) */
@media (max-width: 480px) {

  /* Time slots grid on compact mobile */
  .time-slots-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 8px !important;
  }

  .slot-time-content {
    gap: 3px !important;
    font-size: 0.82rem !important;
  }

  .slot-period-tag {
    font-size: 0.74rem !important;
    margin-inline-start: 2px !important;
  }

  /* Booking Funnel Navigation Actions: Full Width Stack */
  .wizard-nav-actions {
    flex-direction: column-reverse !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .wizard-nav-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Payment Method Options: 1 Column */
  .payment-methods-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Admin Header User Button: Hide text to prevent overflow */
  .admin-user-btn span {
    display: none !important;
  }

  .admin-user-btn {
    padding: 4px 6px !important;
  }

  .admin-content {
    padding: 14px 10px !important;
  }
}

/* 5. Ultra-Compact Mobile Breakpoint (max-width: 360px — including 320px) */
@media (max-width: 360px) {

  /* Container padding scaled for 320px */
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Stats grid single column on 320px */
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stepper circles scale down to fit 320px width cleanly */
  .compact-wizard-stepper .node-circle {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.76rem !important;
  }

  .compact-wizard-stepper .stepper-track-line,
  .compact-wizard-stepper .stepper-progress-fill {
    right: 14px !important;
    left: 14px !important;
  }

  /* Calendar cells scaled for 320px */
  .cal-day-cell {
    font-size: 0.78rem !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .cal-weekdays-row {
    font-size: 0.7rem !important;
  }

  /* Headings & price tags */
  .step-heading {
    font-size: 1.15rem !important;
  }

  .session-title {
    font-size: 1.05rem !important;
  }

  .session-price-tag {
    font-size: 1.2rem !important;
  }

  .header-actions .btn {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
  }
}

/* ==========================================================================
   COMPREHENSIVE POST-LOGIN & PORTALS RESPONSIVE SUITE (CUSTOMER, CONSULTANT, ADMIN)
   ========================================================================== */

/* 1. Customer / Beneficiary Portal Layout & Sidebar */
@media (max-width: 992px) {
  .customer-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    min-height: auto !important;
    align-content: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .customer-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 1.25rem 1rem !important;
    border-left: none !important;
    border-bottom: 1px solid var(--jalees-border, #EAE3D7) !important;
    height: auto !important;
  }

  .customer-user-badge {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    border-bottom: 1px solid var(--jalees-border, #EAE3D7) !important;
  }

  .customer-user-badge>div:last-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .customer-user-badge h3 {
    margin: 0 0 0.2rem 0 !important;
    font-size: 1.05rem !important;
    color: var(--jalees-navy, #1B365D) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .customer-user-badge span {
    display: block !important;
    font-size: 0.82rem !important;
    color: #666 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Option A: Responsive Wrapping Navigation */
  .customer-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .customer-nav-item {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
    padding: 0.65rem 0.6rem !important;
    font-size: 0.86rem !important;
    border: 1px solid var(--jalees-border, #EAE3D7) !important;
    background: #FAF7F2 !important;
    border-radius: 12px !important;
    color: var(--jalees-navy, #1B365D) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
  }

  .customer-nav-item.book-session-sidebar-btn {
    flex: 1 1 100% !important;
    background: var(--jalees-terracotta, #C85A32) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-color: var(--jalees-terracotta, #C85A32) !important;
    order: -1 !important;
  }

  .customer-nav-item.active {
    background: var(--jalees-navy, #1B365D) !important;
    color: #FFFFFF !important;
    border-color: var(--jalees-navy, #1B365D) !important;
  }

  .customer-nav-item.active i {
    color: #FFFFFF !important;
  }

  .customer-nav-item:hover {
    background: rgba(27, 54, 93, 0.08) !important;
    color: var(--jalees-terracotta, #C85A32) !important;
  }

  .customer-nav-item[style*="margin-top"] {
    margin-top: 0 !important;
  }

  .customer-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 1.25rem 1rem !important;
  }

  .customer-main>div:first-child {
    margin-bottom: 1.25rem !important;
  }

  .customer-main h1 {
    font-size: 1.4rem !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .quick-info-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  .customer-main {
    padding: 1.25rem 0.85rem !important;
  }

  /* Single column cards on Mobile */
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .stat-card {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: 1.15rem 1.25rem !important;
  }

  .quick-info-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .info-card {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .featured-meeting-card {
    padding: 1.25rem 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .meeting-card-content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.25rem !important;
  }

  .meeting-info {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
  }

  .btn-join-session {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .customer-sidebar {
    padding: 1rem 0.75rem !important;
  }

  .customer-main {
    padding: 1rem 0.75rem !important;
  }

  .customer-avatar {
    width: 46px !important;
    height: 46px !important;
    font-size: 1.2rem !important;
  }

  .customer-nav-item {
    padding: 0.55rem 0.4rem !important;
    font-size: 0.8rem !important;
    gap: 0.35rem !important;
  }
}

@media (max-width: 380px) {
  .customer-nav-item {
    font-size: 0.76rem !important;
    padding: 0.5rem 0.3rem !important;
  }
}

/* 2. Universal Table Responsiveness */
.table-responsive {
  width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.table-responsive table,
.table-card table,
.ledger-table table,
.admin-table,
.admin-card table,
.admin-card div[style*="overflow-x"] table {
  min-width: 680px;
}

@media (max-width: 480px) {

  .table-responsive table,
  .table-card table,
  .ledger-table table,
  .admin-table,
  .admin-card table,
  .admin-card div[style*="overflow-x"] table {
    min-width: 600px;
  }

  .table-responsive th,
  .table-responsive td,
  .table-card th,
  .table-card td {
    padding: 0.75rem 0.65rem !important;
    font-size: 0.82rem !important;
  }
}

/* 3. Responsive Form Grids (Two-column to Single-column) */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
  .form-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .profile-card,
  .card-box,
  .table-card,
  .settings-card,
  .review-card,
  .session-card,
  .beneficiary-stat-card,
  .featured-meeting-card {
    padding: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Base Universal Payment Details Modal */
.payment-modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(13, 27, 42, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.payment-modal-backdrop.active {
  display: flex !important;
}

.payment-modal {
  background: #FFFFFF;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  direction: rtl;
  box-sizing: border-box;
  position: relative;
}

.modal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px dashed var(--jalees-border, #EAE3D7);
  font-size: 0.92rem;
}

/* 4. Session Cards Action Area & Badges on Mobile */
@media (max-width: 768px) {
  .session-card-actions {
    width: 100% !important;
    align-items: stretch !important;
    text-align: right !important;
  }

  .session-card-actions .action-buttons-wrap {
    width: 100% !important;
    justify-content: stretch !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .session-card-actions .action-buttons-wrap .btn,
  .session-card-actions .action-buttons-wrap .btn-room {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* 5. Universal Modal Responsiveness */
@media (max-width: 768px) {

  #sessionDetailsModal>div,
  #beneficiaryTextModal>div,
  .payment-modal,
  #closeModal>div {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 92vh !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin: auto !important;
  }

  #sessionDetailsModal,
  #beneficiaryTextModal,
  .payment-modal-backdrop,
  #closeModal {
    padding: 10px !important;
  }
}

@media (max-width: 480px) {
  .modal-row {
    font-size: 0.85rem !important;
    padding: 0.5rem 0 !important;
  }

  #modalReplySection textarea {
    font-size: 0.86rem !important;
  }

  #modalReplySection .btn {
    padding: 8px 12px !important;
    font-size: 0.84rem !important;
  }

  #chatSendBtn span {
    display: inline;
  }
}

/* 6. Consultant Dashboard & Chat Responsiveness */
@media (max-width: 768px) {
  .consultant-welcome-banner {
    padding: 18px 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .consultant-welcome-banner .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .consultant-quick-nav {
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  .consultant-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .text-consultation-layout {
    grid-template-columns: 1fr !important;
  }

  .chat-msg-row>div {
    max-width: 92% !important;
  }

  .chat-input-controls {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .consultant-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 7. Booking Funnel Mobile Sizing */
@media (max-width: 480px) {
  .booking-wizard {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
}

/* ==========================================================================
   8. CUSTOMER (BENEFICIARY) PORTAL LAYOUT & NAVIGATION
   ========================================================================== */

.customer-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 80px);
  background-color: var(--jalees-cream-surface, #FCFAF5);
}

@media (max-width: 992px) {
  .customer-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: auto;
  }
}

.customer-sidebar {
  background: #FFFFFF;
  border-left: 1px solid var(--jalees-border, #EAE3D7);
  padding: 2rem 1.25rem;
}

.customer-user-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--jalees-border, #EAE3D7);
}

.customer-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--jalees-navy, #1B365D);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

.customer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.customer-nav-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  color: var(--jalees-navy, #1B365D);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.customer-nav-item:hover {
  background: rgba(27, 54, 93, 0.06);
  color: var(--jalees-terracotta, #C85A32);
}

.customer-nav-item.active {
  background: var(--jalees-navy, #1B365D);
  color: #FFFFFF !important;
}

.customer-nav-item.active i {
  color: #FFFFFF !important;
}

.customer-main {
  padding: 2rem 2.5rem;
  min-width: 0;
}

@media (max-width: 768px) {
  .customer-main {
    padding: 1.25rem 1rem;
  }

  .customer-sidebar {
    padding: 1.25rem 1rem;
    border-left: none;
    border-bottom: 1px solid var(--jalees-border, #EAE3D7);
  }
}

/* ==========================================================================
   9. CONSULTANT QUICK NAVIGATION RESPONSIVENESS
   ========================================================================== */

.consultant-quick-nav {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (max-width: 768px) {
  .consultant-quick-nav {
    padding: 8px 12px !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
  }

  .consultant-quick-nav .btn {
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   10. JOIN AS CONSULTANT FORM RESPONSIVENESS
   Desktop: 2-column grid layout
   Mobile (≤768px): 1-column stacked layout, phone group flex, WhatsApp clearance
   ========================================================================== */

.join-form-row,
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.join-form-row>div,
.form-grid-2>div {
  width: 100%;
}

@media (max-width: 768px) {

  /* 1. Force Single Column Layout (Global Form Fix) */
  .join-form-row,
  .form-grid-2,
  .form-row,
  .join-consultant-form .form-grid-2 {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
  }

  .join-form-row>div,
  .form-grid-2>div,
  .form-row>div,
  .join-consultant-form .form-group,
  .main-form-wrapper .form-group {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px !important;
    /* Add breathing room between stacked fields */
  }

  /* 2. Phone Number Field Formatting */
  .phone-input-group,
  .jalees-phone-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
    height: 48px !important;
    box-sizing: border-box !important;
  }

  .phone-input-group select,
  .jalees-country-picker {
    flex: 0 0 35% !important;
    /* Country code takes 35% */
    max-width: 35% !important;
    min-width: 100px !important;
    height: 100% !important;
  }

  .jalees-country-trigger {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    padding: 0 6px !important;
    gap: 4px !important;
  }

  .phone-input-group input,
  .jalees-phone-control {
    flex: 1 1 auto !important;
    /* Phone number takes the rest */
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. Fix WhatsApp Button Overlap */
  .main-form-wrapper,
  .join-form-card,
  .join-form-section,
  #application-form {
    padding-bottom: 100px !important;
  }

  .join-form-card {
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }
}

/* ==========================================================================
   FORCEFUL MOBILE FIX: "WHY CHOOSE JALEES" (لماذا تختار منصة جليس؟) CARD IMAGES
   Placed at the absolute bottom of main.css to guarantee maximum specificity
   and ensure it loads last to override any other declarations.
   ========================================================================== */
@media (max-width: 768px) {

  /* 1. Target the card container to adjust dynamically */
  html body section#why-jalees .why-image-card,
  html body #why-jalees .why-cards-grid .why-image-card,
  html body #whyCardsCarousel .why-image-card,
  html body .carousel-wrapper[data-carousel="why-jalees"] .why-image-card,
  .why-image-card,
  .feature-card,
  .slider-card {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    padding: 0 !important;
  }

  /* 2. Target the image container / frame wrapper */
  html body section#why-jalees .why-card-img-wrap,
  html body #why-jalees .why-image-card .why-card-img-wrap,
  html body #whyCardsCarousel .why-card-img-wrap,
  html body .carousel-wrapper[data-carousel="why-jalees"] .why-card-img-wrap,
  .why-card-img-wrap {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 15px 15px 0 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. Target the image element with natural aspect ratio and uncropped full visibility */
  html body section#why-jalees .why-card-img,
  html body section#why-jalees .why-image-card img,
  html body section#why-jalees .why-card-img-wrap img,
  html body #why-jalees .why-cards-grid .why-image-card img,
  html body #whyCardsCarousel img,
  html body .carousel-wrapper[data-carousel="why-jalees"] img,
  .why-image-card .why-card-img-wrap img,
  .why-image-card img.why-card-img,
  .why-card-img,
  /* Fallback and carousel card selectors */
  section .feature-card img,
  .owl-carousel .owl-item img,
  .card-img-top,
  .slider-card img {
    width: 100% !important;
    height: auto !important;
    /* CRITICAL: Lets the image show fully without cropping */
    max-height: none !important;
    /* Remove any previous max-height limits */
    min-height: 0 !important;
    object-fit: contain !important;
    /* Ensures the whole image is visible */
    object-position: center !important;
    display: block !important;
    border-radius: 15px 15px 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
}

/* ==========================================================================
   HOMEPAGE HERO SECTION MOBILE TYPOGRAPHY OVERRIDE (@media max-width: 768px)
   Restoring main heading and subheading text to larger, readable design
   ========================================================================== */
@media (max-width: 768px) {

  /* Exact classes and tags for hero section heading */
  .hero-section h1,
  .hero-section .hero-title,
  .hero-title {
    font-size: 37px !important;
    /* Increased by ~15% */
    line-height: 1.5 !important;
  }

  /* Exact classes and tags for hero section paragraph */
  .hero-section p,
  .hero-section .hero-desc,
  .hero-desc {
    font-size: 18px !important;
    /* Increased by ~15% */
    line-height: 1.8 !important;
    /* Slightly larger line height to accommodate bigger text */
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ==========================================================================
   سلايدر سحب لقسم "كيف تعمل منصة جليس" (#how-it-works) في شاشات الجوال
   --------------------------------------------------------------------------
   البنية (index.php:284-298) بعد إضافة الغلاف .journey-slide:
     .journey-grid.journey-grid-carousel   <- المسار القابل للتمرير
       > .journey-slide                    <- الشريحة: 100% من عرض الشاشة
           > .why-image-card               <- البطاقة: بحد أقصى 320px
               > .why-card-img-wrap > img.why-card-img
               > .why-card-body
   --------------------------------------------------------------------------
   لماذا الغلاف ضروري ولا يمكن الاكتفاء بـ CSS؟
   لأن CSS لا ينشئ عناصر DOM. بدون مستوى وسيط كانت البطاقة نفسها هي عنصر
   flex، فيستحيل أن تكون الشريحة 100% والبطاقة 320px معاً: إما 320px مع
   ظهور طرف الجارة، أو 100% متمددة. الغلاف يفصل "الشريحة" عن "البطاقة"
   فيحقق العزل التام دون المساس بشكل البطاقة (السطور 600-609).
   ========================================================================== */

/* 1) ضمان بقاء طول حاوية صورة الجوال 315px في كل الشاشات دون انضغاط.
      القواعد الأساسية موجودة أعلاه (السطر 632) بنفس المحددات والقيم،
      لذا نضيف هنا فقط حماية الانضغاط: البطاقة حاوية flex عمودية،
      و flex-shrink افتراضياً = 1 مما يسمح نظرياً بتقليص الحاوية */
#how-it-works .why-card-img-wrap {
  flex-shrink: 0 !important;
}

/* 2) الغلاف .journey-slide — على كل المقاسات.
      اتجاه عمود (column) كي تتمدد البطاقة وتملأ ارتفاع الشريحة، فيبقى توحيد
      ارتفاعات البطاقات الذي كان يوفره stretch حين كانت البطاقة نفسها
      عنصر الشبكة. و min-width:0 يمنع فيضان عناصر الشبكة */
#how-it-works .journey-slide {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#how-it-works .journey-slide > .why-image-card {
  flex: 1 1 auto;
  min-width: 0;
}

/* 3) البطاقة تأخذ 100% من عرض الشريحة على الجوال (أُلغي قيد 320px)، وطولها
      يتحدد تلقائياً بمحتواها أي بصورة الجوال — راجع البند 5.
      ------------------------------------------------------------------
      محصور عمداً بـ .journey-slide > .why-image-card فلا يُطبَّق إلا حين
      يكون الغلاف موجوداً في DOM. هذا مقصود: لو طُبِّق على البطاقة وهي
      ابن مباشر للمسار لألغى شبكة الأمان في السطر 3295-3296
      (flex:0 0 100% + min-width:100%) ولانضغطت البطاقات كلها في شاشة
      واحدة. الحالة الثانية تتولاها القاعدة الاحتياطية في البند 4.3 */
@media (max-width: 768px) {

  #how-it-works .journey-slide > .why-image-card {
    /* min-width يتغلب على max-width في CSS، لذا يُصفّر صراحةً */
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;  /* إلغاء تقييد 320px: البطاقة تملأ عرض الشاشة */
    height: auto !important;     /* الطول يتحدد بالمحتوى (صورة الجوال) */
    margin: 0 auto !important;
    /* البطاقة لم تعد ابناً مباشراً للمسار، لكن السطر 3299 ما زال يفرض
       scroll-snap-align:start عليها. وحسب مواصفة CSS Scroll Snap فإن كل
       صندوق له scroll-snap-align غير none يُعد منطقة snap حتى لو كان
       متداخلاً، لذا تُلغى منعاً لتنافس مواضع الـ snap مع الشريحة */
    scroll-snap-align: none !important;
  }
}

/* 4) السلايدر: بطاقة واحدة معزولة تماماً في كل مرة.
      مفعّل عند 767px وليس 768px لأن آلية الـ carousel في هذا المشروع
      تبدأ عند 767px (السطر 3245)، وعند 768px بالضبط (iPad عمودي) يكون
      القسم شبكة ثنائية الأعمدة حسب @media (max-width:1024px) — السطر 3192 */
@media (max-width: 767px) {

  /* 4.1 المسار (حاوية السحب): gap صفر، بلا هوامش سالبة، بلا شريط تمرير.
         لا حشوة جانبية هنا — فالشريحة نفسها 100% وهي التي توسّط البطاقة */
  #how-it-works .journey-grid-carousel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch;
    gap: 0 !important;              /* إزالة gap لمنع ظهور البطاقة التالية */
    margin-left: 0 !important;      /* لا هوامش سالبة تسبب تمريراً أفقياً */
    margin-right: 0 !important;
    padding: 8px 0 24px 0 !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #how-it-works .journey-grid-carousel::-webkit-scrollbar {
    display: none;
  }

  /* 4.2 الشريحة: تأخذ 100% من عرض الشاشة بالضبط، فتُعزل البطاقة تماماً
         لأن الشريحة المجاورة تقع بالكامل خارج نافذة العرض = صفر ظهور */
  #how-it-works .journey-grid-carousel > .journey-slide {
    flex: 0 0 100% !important;
    flex-shrink: 0 !important;        /* CRITICAL: يمنع ضغط الشرائح */
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;  /* بطاقة واحدة لكل سحبة */
    /* display:block (وليس flex) كي تتمدد البطاقة بحرية داخل الشريحة ويتحدد
       طولها بمحتواها. البطاقة عنصر block-level بعرض 100% فتملأ محتوى
       الشريحة (عرض الشاشة − 30px حشوة جانبية) */
    display: block !important;
    padding: 0 15px !important;           /* بديل gap: مساحة آمنة حول البطاقة */
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 4.3 قاعدة احتياطية (FALLBACK) — مضادة لانهيار التخطيط.
         ----------------------------------------------------------------
         تعمل فقط إذا كان الغلاف .journey-slide غائباً عن DOM المُصيَّر،
         أي حين تُصبح البطاقة نفسها ابناً مباشراً للمسار. ويحدث هذا إذا:
           - لم يُرفع index.php مع main.css، أو
           - كان opcache يقدّم نسخة index.php القديمة (api.php:156)، أو
           - كانت الصفحة مخزّنة في المتصفح أو في CDN.
         محدد الابن المباشر يجعلها متنافية بنيوياً مع 4.2، فالبطاقة لا يمكن
         أن تكون ابناً مباشراً للمسار وابناً للشريحة في آن واحد.
         بدونها: flex-shrink:1 مع min-width:0 ينضغطان فتظهر البطاقات الأربع
         مجتمعة في شاشة واحدة. هنا نُعيد فرض flex-shrink:0 و min-width:100%
         فتبقى بطاقة واحدة لكل شاشة (بعرض كامل = تراجع مقبول بدل الانهيار) */
  #how-it-works .journey-grid-carousel > .why-image-card {
    flex: 0 0 100% !important;
    flex-shrink: 0 !important;   /* CRITICAL: يمنع ضغط البطاقات بجوار بعضها */
    width: 100% !important;
    min-width: 100% !important;  /* إجبار العنصر على أخذ عرض الشاشة بالكامل */
    max-width: 100% !important;
    height: auto !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* 5) تحرير طول حاوية صورة الجوال والصورة نفسها على الجوال.
      ------------------------------------------------------------------
      البطاقة صارت 100% عرضاً (البند 3)، لذا يجب رفع الطول الثابت 315px
      والسماح لصورة الجوال بالتكبّر متناسبةً وهي التي تحدد طول الحاوية.

      جدول تجاوز الخصوصيات (كلها !important، والحسم بالخصوصية ثم الترتيب):
        .why-card-img-wrap
          السطر 617  (0,1,0) height:220px        <- يُهزم
          السطر 632  (1,1,0) height:315px        <- يُهزم بالترتيب (هنا لاحق)
          السطر 3316 (0,1,0) height:auto         <- يُهزم
          السطر 5968 (0,1,0) height:auto         <- يُهزم
          index.php:152 (0,1,0)                  <- يُهزم
        .why-card-img
          السطر 649  (1,1,0) max-width:260px / height:100% / max-height:315px
                                                  <- يُهزم بالترتيب (هنا لاحق)
          السطر 663  (0,1,0) height:220px        <- يُهزم
          السطر 3326 (0,1,0)                     <- يُهزم
          السطر 5991 (0,1,0)                     <- يُهزم
          index.php:161 (0,1,0)                  <- يُهزم
          index.php:244 #how-it-works img (1,0,1) max-width:280px
                                                  <- يُهزم: (1,1,0) > (1,0,1)
                                                     لأن عدد الـ class أعلى،
                                                     والخصوصية تُحسم قبل ترتيب
                                                     المستند مهما كان موقع
                                                     الـ <style> المضمّن */
@media (max-width: 768px) {

  /* 5.1 حاوية الصورة: طول تلقائي بدل 315px، والجوال مثبّت في الأسفل */
  #how-it-works .why-card-img-wrap {
    width: 100% !important;
    height: auto !important;             /* تجاوز الـ 315px الثابت (السطر 640) */
    min-height: 380px !important;        /* ضمان مساحة كافية للخلفية الملونة */
    max-height: none !important;
    display: flex !important;
    justify-content: center !important;  /* توسيط الجوال أفقياً */
    align-items: flex-end !important;    /* تثبيت صورة الجوال في الأسفل */
    flex-shrink: 0 !important;           /* منع انضغاط الحاوية داخل البطاقة */
    box-sizing: border-box !important;
  }

  /* 5.2 صورة الجوال: تتمدد بالعرض الكامل وطولها متناسب بلا قصّ أو تشوّه */
  #how-it-works .why-card-img {
    width: 100% !important;
    max-width: 100% !important;          /* يتجاوز 260px (650) و 280px (index.php:244) */
    height: auto !important;             /* يتجاوز height:100% (652) — النسبة تُحفظ */
    max-height: none !important;         /* يتجاوز max-height:315px (653) */
    min-height: 0 !important;
    object-fit: contain !important;      /* لا قصّ ولا تشوّه */
    object-position: center bottom !important; /* تجاوز top center (659) */
    margin: 0 auto !important;
    display: block !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   CONSULTANT, BENEFICIARY & ADMIN DASHBOARDS — RESPONSIVE STACKED CARD TABLES (MOBILE)
   Transforms multi-column data tables into vertical cards strictly avoiding horizontal scroll.
   ========================================================================== */
@media (max-width: 768px) {
  .table-responsive:has(.responsive-table-mobile),
  .table-card:has(.responsive-table-mobile),
  .admin-card:has(.responsive-table-mobile),
  .card-custom:has(.responsive-table-mobile),
  div:has(> .responsive-table-mobile),
  div:has(> div > .responsive-table-mobile) {
    overflow-x: visible !important;
  }

  .responsive-table-mobile {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .responsive-table-mobile thead {
    display: none !important;
  }

  .responsive-table-mobile tbody {
    display: block !important;
    width: 100% !important;
  }

  .responsive-table-mobile tr {
    display: block !important;
    width: 100% !important;
    background: #FFFFFF !important;
    border: 1px solid var(--jalees-border, #EAE3D7) !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
    padding: 12px 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
  }

  .responsive-table-mobile td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    padding: 10px 0 !important;
    border-bottom: 1px dashed var(--jalees-border, #EAE3D7) !important;
    font-size: 0.88rem !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    white-space: normal !important;
  }

  .responsive-table-mobile td:last-child {
    border-bottom: none !important;
    padding-bottom: 4px !important;
  }

  .responsive-table-mobile td::before {
    content: attr(data-label);
    font-weight: 700 !important;
    color: var(--jalees-navy, #1B365D) !important;
    font-size: 0.84rem !important;
    text-align: right !important;
    flex-shrink: 0 !important;
  }

  .responsive-table-mobile td[data-label*="ملاحظات"],
  .responsive-table-mobile td[data-label*="الوصف"],
  .responsive-table-mobile td[data-label*="التعليق"],
  .responsive-table-mobile td[data-label*="الإجابة"],
  .responsive-table-mobile td[data-label*="تفاصيل التغيير"],
  .responsive-table-mobile td[data-label*="المجالات الاستشارية"],
  .responsive-table-mobile td[data-label*="التخصصات الفرعية"],
  .responsive-table-mobile td[data-label*="أنواع الجلسات"] {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: right !important;
  }

  .responsive-table-mobile td[data-label*="ملاحظات"]::before,
  .responsive-table-mobile td[data-label*="الوصف"]::before,
  .responsive-table-mobile td[data-label*="التعليق"]::before,
  .responsive-table-mobile td[data-label*="الإجابة"]::before,
  .responsive-table-mobile td[data-label*="تفاصيل التغيير"]::before,
  .responsive-table-mobile td[data-label*="المجالات الاستشارية"]::before,
  .responsive-table-mobile td[data-label*="التخصصات الفرعية"]::before,
  .responsive-table-mobile td[data-label*="أنواع الجلسات"]::before {
    margin-bottom: 4px !important;
  }

  .responsive-table-mobile td[data-label*="الإجراءات"],
  .responsive-table-mobile td[data-label*="إجراء"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .responsive-table-mobile td[data-label*="ملاحظات"] > div,
  .responsive-table-mobile td[data-label*="ملاحظات"] > span,
  .responsive-table-mobile td[data-label*="ملاحظات"] > button {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   DESKTOP TABLE PRESERVATION (≥769px)
   Guarantees standard table formatting on desktop screens, completely neutralizing
   any card-stacking or flex behaviors on larger displays.
   ========================================================================== */
@media (min-width: 769px) {
  .admin-card:has(.responsive-table-mobile),
  .table-card:has(.responsive-table-mobile),
  .table-responsive:has(.responsive-table-mobile) {
    overflow-x: auto !important;
  }

  .responsive-table-mobile {
    display: table !important;
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }

  .responsive-table-mobile thead {
    display: table-header-group !important;
  }

  .responsive-table-mobile thead tr {
    display: table-row !important;
  }

  .responsive-table-mobile tbody {
    display: table-row-group !important;
    width: auto !important;
  }

  .responsive-table-mobile tr {
    display: table-row !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .responsive-table-mobile th {
    display: table-cell !important;
    width: auto !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
  }

  .responsive-table-mobile td {
    display: table-cell !important;
    width: auto !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  .responsive-table-mobile td::before {
    display: none !important;
    content: none !important;
  }
}