/* ── DR. MOHAMED IBRAHIM EL GAMMAL CLINIC ──
   Premium Luxury Medical Aesthetics · 2025 Edition
   Based on styleguide.md design system
*/

/* ── CSS CUSTOM PROPERTIES ───────────────────── */
:root {
  /* Core Brand Colors */
  --c-teal-100:  #e6fafa;
  --c-teal-300:  #7de0de;
  --c-teal-500:  #0cb8b6;
  --c-teal-700:  #088a88;
  --c-teal-900:  #044e4d;

  /* Navy Depth */
  --c-navy-100:  #edf0f7;
  --c-navy-500:  #1d2d5e;
  --c-navy-700:  #101d40;
  --c-navy-900:  #060c20;

  /* Coral Accent */
  --c-coral-300: #ffb3b3;
  --c-coral-500: #ff6b6b;
  --c-coral-700: #cc3030;

  /* Neutrals */
  --c-white:     #ffffff;
  --c-off-white: #fafbfc;
  --c-surface-1: #f4f6f8;
  --c-surface-2: #edf0f3;
  --c-border:    #e2e6ea;
  --c-border-strong: #c8cdd3;

  /* Text Scale */
  --c-text-primary:   #1a1f2e;
  --c-text-secondary: #4a5568;
  --c-text-muted:     #8898a6;
  --c-text-inverse:   #ffffff;

  /* Semantic */
  --c-success: #10b981;
  --c-warning: #f59e0b;
  --c-error:   #ef4444;
  --c-info:    #3b82f6;

  /* Gold Luxury */
  --c-gold-light: #f5e6c8;
  --c-gold:       #c9a84c;
  --c-gold-dark:  #8a6820;

  /* Platinum */
  --c-platinum:   #e8eaed;

  /* Gradients */
  --grad-hero:        linear-gradient(135deg, #e6fafa 0%, #ffffff 50%, #fafbfc 100%);
  --grad-teal-silk:   linear-gradient(160deg, #0cb8b6 0%, #088a88 60%, #1d2d5e 100%);
  --grad-pearl:       linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%);
  --grad-card-shine:  linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(244,246,248,0.7) 100%);
  --grad-mesh:
    radial-gradient(ellipse at 20% 20%, rgba(12,184,182,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(29,45,94,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 60% 10%, rgba(255,107,107,0.04) 0%, transparent 50%),
    #fafbfc;
  --grad-gold:  linear-gradient(90deg, #c9a84c, #f5e6c8, #c9a84c);

  /* Typography - Font Families */
  --font-arabic:  'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Cairo', sans-serif;
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Typography - Size Scale */
  --text-xs:   clamp(0.7rem,  1.5vw, 0.75rem);
  --text-sm:   clamp(0.8rem,  1.8vw, 0.875rem);
  --text-base: clamp(0.9rem,  2vw,   1rem);
  --text-md:   clamp(1rem,    2.2vw, 1.125rem);
  --text-lg:   clamp(1.1rem,  2.5vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 3vw,   1.5rem);
  --text-2xl:  clamp(1.5rem,  3.5vw, 2rem);
  --text-3xl:  clamp(2rem,    4.5vw, 2.75rem);
  --text-4xl:  clamp(2.5rem,  6vw,   3.75rem);
  --text-5xl:  clamp(3rem,    8vw,   5rem);

  /* Typography - Weight Scale */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Typography - Line Heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.85;
  --leading-arabic: 1.9;

  /* Typography - Letter Spacing */
  --tracking-tight: -0.03em;
  --tracking-normal: 0em;
  --tracking-wide:   0.05em;
  --tracking-wider: 0.12em;
  --tracking-luxury: 0.2em;

  /* Spacing Tokens */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* Border Radius */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* Border Styles */
  --border-thin:   1px solid var(--c-border);
  --border-base:   1.5px solid var(--c-border-strong);
  --border-teal:   2px solid var(--c-teal-500);
  --border-gold:   1px solid var(--c-gold);

  /* Shadows */
  --shadow-none: none;
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl: 0 32px 64px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-teal: 0 8px 32px rgba(12,184,182,0.25), 0 2px 8px rgba(12,184,182,0.12);
  --shadow-gold: 0 4px 20px rgba(201,168,76,0.3);
  --shadow-inner-teal: inset 0 0 0 2px var(--c-teal-500);

  /* Animation Easing */
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-sharp:     cubic-bezier(0.4, 0, 0.6, 1);

  /* Animation Durations */
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;
  --duration-enter: 600ms;
  --duration-page:  800ms;

  /* Layout */
  --container-max: 1280px;
  --header-height: 72px;
}

/* ── RESET & BASE ─────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  direction: rtl;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-arabic);
  background: var(--c-off-white);
  color: var(--c-text-primary);
  line-height: var(--leading-arabic);
  font-size: var(--text-base);
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--c-navy-700);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); font-weight: var(--weight-semi); }
h4 { font-size: var(--text-xl); font-weight: var(--weight-semi); }

p { margin-block-end: var(--space-4); }

a {
  color: var(--c-teal-500);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

a:hover { color: var(--c-teal-700); }

img { max-width: 100%; height: auto; }

/* ── LAYOUT ─────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 4rem);
}

.section {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.section-sm { padding-block: clamp(2rem, 4vw, 3.5rem); }
.section-lg { padding-block: clamp(6rem, 12vw, 10rem); }

.section-bg-alt { background: var(--c-surface-1); }

/* Section Header */
.section-header {
  text-align: center;
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

.section-overline {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-luxury);
  color: var(--c-teal-500);
  text-transform: uppercase;
  margin-block-end: var(--space-3);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  color: var(--c-navy-700);
  line-height: var(--leading-tight);
  margin-block-end: var(--space-4);
}

.section-subtitle {
  font-family: var(--font-arabic);
  font-size: var(--text-lg);
  color: var(--c-text-secondary);
  line-height: var(--leading-arabic);
  max-width: 60ch;
  margin-inline: auto;
}

/* ── HEADER / NAVIGATION ───────────────────────── */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  border-block-end: 1px solid rgba(226, 230, 234, 0.6);
  transition: box-shadow 0.3s ease;
}

.header.is-scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--header-height);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.nav-logo:hover { transform: scale(1.02); }

.nav-logo img {
  height: 48px;
  width: auto;
}

.nav-logo-text {
  font-family: var(--font-arabic);
  font-weight: var(--weight-bold);
  font-size: 1.25rem;
  color: var(--c-navy-700);
  margin-inline-start: var(--space-3);
}

.nav-logo-tagline {
  display: block;
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

.nav-link {
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--c-text-secondary);
  text-decoration: none;
  padding-block: var(--space-2);
  position: relative;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active { color: var(--c-teal-500); }

.nav-link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: var(--c-teal-500);
  transition: width 0.3s var(--ease-out);
}

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

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  background: var(--c-teal-500);
  color: var(--c-white);
  font-family: var(--font-arabic);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s var(--ease-spring);
}

.btn-primary:hover {
  background: var(--c-teal-700);
  box-shadow: var(--shadow-teal);
  transform: translateY(-2px);
  color: var(--c-white);
}

.btn-primary:active { transform: translateY(0); }

.btn-full {
  width: 100%;
}

.btn-loading {
  opacity: 0.7;
  pointer-events: none;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--c-teal-700);
  border: 1.5px solid var(--c-teal-500);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-8);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: var(--c-teal-100);
  border-color: var(--c-teal-700);
  color: var(--c-teal-700);
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: #25D366;
  color: white;
  border-radius: var(--radius-pill);
  font-family: var(--font-arabic);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  color: white;
}

.btn-whatsapp::before,
.btn-whatsapp::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: var(--radius-pill);
  border: 2px solid #25D366;
  animation: pulseRing 2.5s ease-out infinite;
  pointer-events: none;
}

.btn-whatsapp::after { animation-delay: 0.8s; }

@keyframes pulseRing {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Mobile Toggle */
.nav-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: var(--space-2);
  display: none;
  transition: transform 0.3s ease;
}

.nav-toggle i { font-size: 1.5rem; }

.nav-toggle:hover {
  transform: scale(1.1);
}

/* Nav Quick Actions */
.nav-quick-actions {
  display: flex;
  align-items: center;
  margin-inline-start: var(--space-6);
}

.nav-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--c-teal-100);
  color: var(--c-teal-700);
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-action-btn:hover {
  transform: translateY(-2px) scale(1.1);
  box-shadow: var(--shadow-sm);
  border-color: var(--c-teal-300);
}

.nav-action-btn.nav-action-btn--whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  border: none;
}

.nav-action-btn.nav-action-btn--whatsapp:hover {
  background: linear-gradient(135deg, #128C7E, #25D366);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  transform: translateY(-2px) scale(1.1);
}

/* Mobile Navigation Enhanced */
.nav-links.is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: var(--header-height) 0 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px) saturate(180%);
  z-index: 99;
  padding: var(--space-8);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  animation: slideInDown 0.3s var(--ease-out);
}

.nav-links.is-open > ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.nav-links.is-open .nav-link {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
  text-align: center;
}

.nav-links.is-open .nav-link:hover,
.nav-links.is-open .nav-link.active {
  background: var(--c-teal-100);
}

.nav-links.is-open .mobile-divider {
  width: 100%;
  height: 1px;
  background: var(--c-border);
  margin: var(--space-2) 0;
}

.mobile-action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--c-teal-700);
  background: var(--c-teal-100);
  text-decoration: none;
  transition: all 0.2s ease;
  width: 100%;
}

.mobile-action-link:hover {
  background: var(--c-teal-500);
  color: white;
}

.mobile-action-link.mobile-action-link--whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
}

.mobile-action-link.mobile-action-link--whatsapp:hover {
  background: linear-gradient(135deg, #128C7E, #25D366);
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── HERO SECTION ───────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding-block-start: var(--header-height);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--grad-mesh);
  z-index: 0;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content { display: flex; flex-direction: column; }

.hero-overline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--c-teal-500);
  letter-spacing: var(--tracking-wide);
  margin-block-end: var(--space-5);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  line-height: 1.1;
  color: var(--c-navy-700);
  margin-block-end: var(--space-6);
}

.hero-title em {
  font-style: italic;
  color: var(--c-teal-500);
}

.hero-body {
  font-size: var(--text-lg);
  color: var(--c-text-secondary);
  line-height: var(--leading-arabic);
  margin-block-end: var(--space-6);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-end: var(--space-8);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--c-border);
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
}

.hero-visual { order: 1; }

.hero-image-frame {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 7 / 8;
}

.hero-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero-image-deco {
  position: absolute;
  inset-block-end: -20px;
  inset-inline-end: -20px;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-full);
  background: var(--grad-teal-silk);
  opacity: 0.15;
  filter: blur(40px);
  z-index: -1;
}

/* ── SERVICE CARDS ─────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

.card-service {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.35s var(--ease-spring),
    box-shadow 0.35s ease,
    border-color 0.3s ease;
}

.card-service::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-teal-500), var(--c-teal-300));
  transform: scaleX(0);
  transform-origin: end;
  transition: transform 0.4s var(--ease-out);
}

.card-service:hover,
.card-service:focus {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-teal-300);
}

.card-service:hover::before,
.card-service:focus::before {
  transform: scaleX(1);
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--c-teal-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: var(--space-5);
  font-size: 28px;
  color: var(--c-teal-700);
  transition: background 0.3s ease, transform 0.3s var(--ease-spring);
}

.card-service:hover .card-icon {
  background: var(--c-teal-500);
  color: var(--c-white);
  transform: scale(1.1) rotate(-4deg);
}

.card-title {
  font-family: var(--font-arabic);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--c-text-primary);
  margin-block-end: var(--space-3);
}

.card-body {
  font-size: var(--text-base);
  color: var(--c-text-secondary);
  line-height: var(--leading-arabic);
  margin-block-end: var(--space-5);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--c-teal-500);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.card-link:hover { gap: var(--space-3); }

[dir="rtl"] .card-link i { transform: scaleX(-1); }

/* ── STAT CARD (from styleguide) ─────────────────── */
.card-stat {
  background: var(--grad-teal-silk);
  color: var(--c-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.card-stat::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.12) 0%, transparent 60%);
}

.card-stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 200;
  line-height: 1;
  margin-block-end: var(--space-3);
}

.card-stat-label {
  font-family: var(--font-arabic);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  opacity: 0.9;
}

/* ── STATS BAND ─────────────────────────────────── */
.stats-band {
  background: var(--grad-teal-silk);
  position: relative;
  overflow: hidden;
}

.stats-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
    radial-gradient(circle at 85% 50%, rgba(255,255,255,0.07) 0%, transparent 50%);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  text-align: center;
  position: relative;
  z-index: 1;
  padding: var(--space-12) 0;
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 200;
  color: var(--c-white);
  line-height: 1;
  margin-block-end: var(--space-2);
  letter-spacing: var(--tracking-tight);
}

.stat-label {
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.8);
  font-weight: var(--weight-medium);
}

/* ── GALLERY ─────────────────────────────────────── */
.gallery-grid {
  columns: 3 280px;
  column-gap: var(--space-4);
}

.gallery-item {
  break-inside: avoid;
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  list-style: none;
  transition: opacity 0.3s ease;
}

.gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.5s var(--ease-smooth);
  border-radius: var(--radius-lg);
}

.gallery-item:hover img { transform: scale(1.04); }

.gallery-caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  background: linear-gradient(to top,
    rgba(29,45,94,0.85) 0%,
    transparent 100%
  );
  padding: var(--space-6) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.gallery-item:hover .gallery-caption {
  opacity: 1;
  transform: translateY(0);
}

.caption-text {
  color: rgba(255,255,255,0.9);
  font-size: var(--text-sm);
  font-family: var(--font-arabic);
}

/* Gallery Filter */
.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
  margin-block: var(--space-8) var(--space-6);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--c-text-secondary);
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.2s var(--ease-spring);
}

.filter-btn:hover {
  background: var(--c-teal-100);
  border-color: var(--c-teal-300);
  color: var(--c-teal-700);
  transform: translateY(-2px);
}

.filter-btn i {
  font-size: var(--text-base);
}

.filter-btn.active {
  background: var(--c-teal-500);
  border-color: var(--c-teal-500);
  color: var(--c-white);
  box-shadow: var(--shadow-teal);
}

/* ── FAQ ACCORDION ─────────────────────────────── */
.faq-container { max-width: 720px; margin-inline: auto; }

.faq-item {
  border-block-end: 1px solid var(--c-border);
  padding-block: var(--space-1);
}

.faq-item:first-child { border-block-start: 1px solid var(--c-border); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  cursor: pointer;
  font-family: var(--font-arabic);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--c-text-primary);
  list-style: none;
  transition: color 0.2s ease;
}

.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--c-teal-500); }

.faq-icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--c-teal-500);
  transition: transform 0.35s var(--ease-spring);
}

details[open] .faq-icon { transform: rotate(45deg); }

.faq-answer {
  overflow: hidden;
  padding-block-end: var(--space-5);
  animation: expandDown 0.35s var(--ease-out);
}

.faq-answer p {
  font-family: var(--font-arabic);
  font-size: var(--text-base);
  line-height: var(--leading-arabic);
  color: var(--c-text-secondary);
  margin: 0;
}

@keyframes expandDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── CONTACT SECTION ───────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.location-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block: var(--space-6);
}

.location-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--c-surface-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
}

.location-icon {
  color: var(--c-teal-500);
  font-size: 22px;
  flex-shrink: 0;
  margin-block-start: 2px;
}

.location-name {
  display: block;
  font-weight: var(--weight-semi);
  color: var(--c-text-primary);
  margin-block-end: var(--space-1);
}

.location-address {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  line-height: var(--leading-arabic);
}

.hours-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  padding: var(--space-3) var(--space-4);
  background: var(--c-teal-100);
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-teal-300);
}

.contact-form-wrap {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.form-group { margin-block-end: var(--space-5); }

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--c-text-primary);
  margin-block-end: var(--space-2);
}

.input-field,
select,
textarea {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  font-family: var(--font-arabic);
  font-size: var(--text-base);
  color: var(--c-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-field:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--c-teal-500);
  box-shadow: 0 0 0 3px rgba(12, 184, 182, 0.12);
}

.input-field::placeholder,
textarea::placeholder {
  color: var(--c-text-muted);
}

/* ── FOOTER ─────────────────────────────────────── */
.footer {
  background: var(--c-navy-700);
  color: rgba(255,255,255,0.75);
  padding-block: var(--space-16) var(--space-8);
  position: relative;
}

/* Footer Grid System */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-10);
  padding-block-end: var(--space-10);
  border-block-end: 1px solid rgba(255,255,255,0.1);
  margin-block-end: var(--space-8);
}

.footer-logo {
  font-family: var(--font-arabic);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--c-white);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
  transition: transform 0.2s ease;
}

.footer-logo:hover { transform: translateX(-4px); }

.footer-logo i { font-size: 24px; }

.footer-tagline {
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  margin-block-end: var(--space-4);
  font-weight: var(--weight-medium);
}

.footer-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: rgba(255,255,255,0.6);
  margin-block-end: var(--space-6);
}

.footer-social {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.social-link {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 20px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-link:hover {
  background: var(--c-teal-500);
  color: white;
  transform: translateY(-2px);
}

.social-link--wa:hover { background: #25D366; }

.footer-heading {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-luxury);
  text-transform: uppercase;
  color: var(--c-teal-300);
  margin-block-end: var(--space-5);
}

.footer-links,
.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links a,
.footer-contact-list a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-contact-list a:hover { color: var(--c-teal-300); }

.footer-contact-list li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-sm);
}

.footer-contact-list i {
  color: var(--c-teal-300);
  font-size: 16px;
  flex-shrink: 0;
  margin-block-start: 2px;
}

.footer-copy {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  text-align: center;
}

/* ── UTILITY ─────────────────────────────────────── */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--c-teal-500);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

.btn-link:hover { gap: var(--space-2); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.badge-teal { background: var(--c-teal-100); color: var(--c-teal-700); border: 1px solid var(--c-teal-300); }
.badge-navy { background: var(--c-navy-100); color: var(--c-navy-500); }
.badge-gold { background: var(--c-gold-light); color: var(--c-gold-dark); border: 1px solid var(--c-gold); }
.badge-coral { background: #fff0f0; color: var(--c-coral-700); }
.badge-success { background: #ecfdf5; color: #065f46; }
.badge-info { background: #eff6ff; color: #1e40af; }
.badge-warning { background: #fffbeb; color: #92400e; }
.badge-error { background: #fef2f2; color: #991b1b; }

/* Scroll to Top */
.scroll-top {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  z-index: 90;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--c-teal-500);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-teal);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top:hover { background: var(--c-teal-700); }

/* Floating WhatsApp Button */
.floating-whatsapp {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: #25D366;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
  animation: whatsappFloat 2s ease-in-out infinite;
}

.floating-whatsapp:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
  color: white;
}

.floating-whatsapp span {
  font-size: 10px;
  font-family: var(--font-arabic);
  font-weight: var(--weight-medium);
}

.floating-whatsapp::before,
.floating-whatsapp::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: var(--radius-full);
  border: 2px solid #25D366;
  opacity: 0;
  pointer-events: none;
}

.floating-whatsapp:hover::before {
  animation: whatsappPulse 1.5s ease-out infinite;
}

.floating-whatsapp:hover::after {
  animation: whatsappPulse 1.5s ease-out infinite 0.5s;
}

@keyframes whatsappFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes whatsappPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Adjust scroll to top button position when floating WhatsApp is present */
body.has-floating-whatsapp .scroll-top {
  inset-inline-end: calc(var(--space-6) + 70px);
}

/* Social Media Buttons */
.social-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-btn:hover {
  transform: translateY(-2px);
  color: white;
}

.social-btn i { font-size: 16px; }

.social-btn--facebook {
  background: #1877F2;
  color: white;
}

.social-btn--facebook:hover {
  background: #0d5bbd;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.4);
}

.social-btn--instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
}

.social-btn--instagram:hover {
  box-shadow: 0 4px 15px rgba(220, 39, 67, 0.4);
}

.social-btn--twitter {
  background: #000000;
  color: white;
}

.social-btn--twitter:hover {
  background: #333333;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.social-btn--youtube {
  background: #FF0000;
  color: white;
}

.social-btn--youtube:hover {
  background: #cc0000;
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
}

/* Map Container */
.map-container {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.map-container iframe {
  display: block;
  width: 100%;
  height: 350px;
}

.map-label {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-end: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 1rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  max-width: 250px;
}

.map-label h4 {
  color: var(--c-navy-700);
  font-weight: var(--weight-semi);
  margin-bottom: 0.25rem;
}

.map-label .text-muted {
  color: var(--c-text-secondary);
  font-size: var(--text-sm);
}

/* Inquiry Tabs */
.inquiry-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--c-border);
  overflow-x: auto;
}

.inquiry-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.inquiry-tab:hover {
  color: var(--c-teal-500);
  background: var(--c-surface-1);
}

.inquiry-tab--active {
  color: var(--c-teal-500);
  border-bottom-color: var(--c-teal-500);
  font-weight: var(--weight-semi);
}

.inquiry-tab i {
  font-size: 14px;
}

/* Form Validation Styles */
.input-field:invalid:not(:placeholder-shown) {
  border-color: var(--c-error);
}

.input-field:valid:not(:placeholder-shown) {
  border-color: var(--c-success);
}

.text-danger {
  color: var(--c-error);
}

/* Form Check */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.form-check-input {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  accent-color: var(--c-teal-500);
}

.form-check-label {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  cursor: pointer;
  line-height: var(--leading-normal);
}

/* Direction Cards */
.direction-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
  height: 100%;
}

.direction-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-teal-300);
}

.direction-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--c-teal-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-size: 24px;
  color: var(--c-teal-700);
  transition: background 0.3s ease, color 0.3s ease;
}

.direction-card:hover .direction-icon {
  background: var(--c-teal-500);
  color: var(--c-white);
}

.direction-title {
  font-family: var(--font-arabic);
  font-weight: var(--weight-semi);
  color: var(--c-navy-700);
  margin-bottom: var(--space-3);
}

.direction-text {
  color: var(--c-text-secondary);
  line-height: var(--leading-arabic);
  margin-bottom: 0;
}

/* Directions Box */
.directions-box {
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: border-color 0.3s ease;
}

.directions-box:hover {
  border-color: var(--c-teal-300);
}

.directions-box-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-arabic);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--c-navy-700);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--c-border);
}

.directions-box-title i {
  color: var(--c-teal-500);
  font-size: 20px;
}

.directions-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
}

.directions-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  color: var(--c-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
}

.directions-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--c-teal-500);
  flex-shrink: 0;
  margin-top: 6px;
}

/* Clinic Photos */
.clinic-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease-spring);
}

.clinic-photo:hover {
  transform: translateY(-4px);
}

.clinic-photo-frame {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-surface-1);
}

.clinic-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-smooth);
}

.clinic-photo:hover .clinic-photo-frame img {
  transform: scale(1.05);
}

.clinic-photo-caption {
  padding-top: var(--space-3);
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--c-navy-700);
  text-align: center;
}

/* Working Hours */
.hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hours-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--c-border);
  transition: background 0.2s ease;
}

.hours-item:last-child {
  border-bottom: none;
}

.hours-item:hover {
  background: var(--c-surface-1);
}

.hours-day {
  font-weight: var(--weight-medium);
  color: var(--c-text-primary);
}

.hours-time {
  color: var(--c-teal-700);
  font-weight: var(--weight-semi);
}

.hours-note {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--c-teal-100);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--c-teal-700);
}

/* Working Hours Section */
.working-hours {
  margin-top: 1.5rem;
}

/* Contact Info Panel */
.contact-info {
  margin-bottom: var(--space-8);
}

/* Social Media Section */
.social-media-section {
  margin-top: 2rem;
}

/* Emergency Contact */
.emergency-contact {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: #fef2f2;
  border: 1.5px solid var(--c-coral-300);
  border-radius: var(--radius-lg);
}

.emergency-contact-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.emergency-icon {
  color: var(--c-coral-500);
  font-size: 20px;
  flex-shrink: 0;
}

.hours-note {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--c-teal-100);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--c-teal-700);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Quick Contact Buttons */
.quick-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.quick-contact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
}

.quick-contact-btn:hover {
  transform: translateY(-2px);
  color: white;
}

.quick-contact-btn i {
  font-size: 20px;
}

.quick-contact-btn--phone {
  background: var(--c-teal-500);
  color: white;
}

.quick-contact-btn--phone:hover {
  background: var(--c-teal-700);
  box-shadow: 0 4px 15px rgba(12, 184, 182, 0.3);
}

.quick-contact-btn--whatsapp {
  background: #25D366;
  color: white;
}

.quick-contact-btn--whatsapp:hover {
  background: #128C7E;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.quick-contact-btn--email {
  background: var(--c-navy-500);
  color: white;
}

.quick-contact-btn--email:hover {
  background: var(--c-navy-700);
  box-shadow: 0 4px 15px rgba(29, 45, 94, 0.3);
}

.quick-contact-btn--sms {
  background: var(--c-info);
  color: white;
}

.quick-contact-btn--sms:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* Feature Cards */
.feature-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-size: 28px;
  transition: transform 0.3s var(--ease-spring);
}

.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

.feature-icon--teal {
  background: var(--c-teal-100);
  color: var(--c-teal-700);
}

.feature-icon--gold {
  background: var(--c-gold-light);
  color: var(--c-gold-dark);
}

.feature-icon--coral {
  background: var(--c-coral-300);
  color: var(--c-coral-700);
}

.feature-icon--navy {
  background: var(--c-navy-100);
  color: var(--c-navy-700);
}

.feature-title {
  font-family: var(--font-arabic);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--c-navy-700);
  margin-bottom: var(--space-3);
}

.feature-text {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  line-height: var(--leading-arabic);
  margin-bottom: 0;
}

/* Testimonial Cards */
.testimonial-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
  height: 100%;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.testimonial-rating {
  display: flex;
  gap: 0.25rem;
  margin-bottom: var(--space-4);
  color: var(--c-gold);
}

.testimonial-text {
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  color: var(--c-text-primary);
  line-height: var(--leading-arabic);
  margin-bottom: var(--space-5);
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--c-teal-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-teal-700);
  flex-shrink: 0;
}

.testimonial-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--c-navy-700);
}

.testimonial-location {
  display: block;
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

/* Skip Link */
.skip-link {
  position: absolute;
  top: -50px;
  inset-inline-start: 0;
  background: var(--c-teal-500);
  color: white;
  padding: 12px 24px;
  z-index: 10000;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.3s ease;
}

.skip-link:focus { top: 0; }

/* Focus Visible */
:focus-visible {
  outline: 2px solid var(--c-teal-500);
  outline-offset: 3px;
}

:focus:not(:focus-visible) { outline: none; }

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes expandWidth {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes expandHeight {
  from { height: 0; opacity: 0; }
  to { height: auto; opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px var(--c-teal-500), 0 0 10px var(--c-teal-500); }
  50% { box-shadow: 0 0 20px var(--c-teal-500), 0 0 30px var(--c-teal-500); }
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Animation Utility Classes */
.animate-fade-in {
  animation: fadeInUp 0.8s ease forwards;
}

.animate-fade {
  animation: fadeIn 0.5s ease forwards;
}

.animate-slide-up {
  animation: fadeSlideUp var(--duration-enter) var(--ease-out) both;
}

.animate-slide-right {
  animation: slideInRight var(--duration-enter) var(--ease-out) both;
}

.animate-slide-left {
  animation: slideInLeft var(--duration-enter) var(--ease-out) both;
}

.animate-bounce {
  animation: bounce 1s var(--ease-in-out) infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-scale-in {
  animation: scaleIn var(--duration-slow) var(--ease-spring) forwards;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

/* Stagger Delays */
.stagger-1 { animation-delay: 0ms; }
.stagger-2 { animation-delay: 80ms; }
.stagger-3 { animation-delay: 160ms; }
.stagger-4 { animation-delay: 240ms; }
.stagger-5 { animation-delay: 320ms; }
.stagger-6 { animation-delay: 400ms; }
.stagger-7 { animation-delay: 480ms; }
.stagger-8 { animation-delay: 560ms; }

/* Scroll-triggered Animation Classes */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.from-left {
  transform: translateX(-30px);
}

.animate-on-scroll.from-right {
  transform: translateX(30px);
}

.animate-on-scroll.from-left.is-visible,
.animate-on-scroll.from-right.is-visible {
  transform: translateX(0);
}

/* Shimmer Text Effect */
.text-shimmer {
  background: linear-gradient(90deg,
    var(--c-teal-700) 0%,
    var(--c-teal-300) 40%,
    var(--c-teal-700) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* Gradient Text */
.text-gradient-teal {
  background: var(--grad-teal-silk);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── ADDITIONAL BUTTONS ─────────────────────────── */
.btn-gold {
  background: linear-gradient(135deg, var(--c-gold) 0%, #e8c870 50%, var(--c-gold) 100%);
  background-size: 200% auto;
  color: var(--c-navy-900);
  font-family: var(--font-arabic);
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-8);
  border: none;
  box-shadow: var(--shadow-gold);
  transition: background-position 0.4s ease, transform 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-gold:hover {
  background-position: right center;
  transform: translateY(-2px);
}

/* ── LUXURY BORDER ─────────────────────────────── */
.luxury-border {
  border: 1px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, var(--c-teal-500), var(--c-gold)) border-box;
  border-radius: var(--radius-lg);
}

/* ── IMAGE TREATMENTS ───────────────────────────── */
.img-reveal {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.img-reveal.loaded {
  opacity: 1;
  transform: scale(1);
}

/* Hover Zoom Effect */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.5s var(--ease-smooth);
}

.img-zoom:hover img {
  transform: scale(1.06);
}

/* Pan Effect */
.img-pan {
  overflow: hidden;
}

.img-pan img {
  transition: transform 8s ease;
}

.img-pan:hover img {
  transform: scale(1.1);
}

/* Grayscale to Color */
.img-desaturate {
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.img-desaturate:hover {
  filter: grayscale(0);
}

/* Blur to Clear */
.img-blur {
  filter: blur(4px);
  transition: filter 0.4s ease;
}

.img-blur:hover {
  filter: blur(0);
}

/* Image Shine Effect */
.img-shine {
  position: relative;
  overflow: hidden;
}

.img-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.img-shine:hover::after {
  left: 150%;
}

/* ── NOISE TEXTURE ──────────────────────────────── */
.texture-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  border-radius: inherit;
}

/* ── SECTION CLIP PATHS ──────────────────────────── */
.section-clip-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  padding-block-end: calc(var(--space-24) + 4vw);
}

.section-clip-top {
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
  padding-block-start: calc(var(--space-24) + 4vw);
  margin-block-start: -4vw;
}

.section-clip-wave-bottom {
  clip-path: url(#wave-bottom);
}

.section-clip-wave-top {
  clip-path: url(#wave-top);
}

.section-rounded {
  border-radius: var(--radius-3xl);
  border-radius: clamp(20px, 4vw, 40px);
}

/* ── COMPONENT: ALERTS ───────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  position: relative;
}

.alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.alert-close {
  position: absolute;
  inset-inline-end: var(--space-3);
  inset-block-start: var(--space-3);
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.alert-close:hover { opacity: 1; }

.alert-success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #d1fae5;
}

.alert-success .alert-icon { color: #10b981; }

.alert-warning {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fef3c7;
}

.alert-warning .alert-icon { color: #f59e0b; }

.alert-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fee2e2;
}

.alert-error .alert-icon { color: #ef4444; }

.alert-info {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #dbeafe;
}

.alert-info .alert-icon { color: #3b82f6; }

/* ── COMPONENT: TESTIMONIAL CARDS ─────────────────── */
.card-testimonial {
  background: var(--c-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: var(--border-thin);
  position: relative;
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s ease;
}

.card-testimonial:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.testimonial-quotes {
  position: absolute;
  inset-inline-start: var(--space-6);
  inset-block-start: var(--space-6);
  font-size: 4rem;
  color: var(--c-teal-100);
  font-family: var(--font-display);
  line-height: 1;
  user-select: none;
}

.testimonial-content {
  position: relative;
  z-index: 1;
}

.testimonial-text {
  font-size: var(--text-md);
  color: var(--c-text-primary);
  line-height: var(--leading-arabic);
  font-style: italic;
  margin-block-end: var(--space-6);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.testimonial-name {
  font-weight: var(--weight-semi);
  color: var(--c-text-primary);
  display: block;
}

.testimonial-location {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
}

.testimonial-rating {
  display: flex;
  gap: 2px;
  margin-block-end: var(--space-3);
}

.star-icon {
  color: var(--c-gold);
  font-size: 16px;
}

.star-icon.empty { color: var(--c-border); }

/* ── COMPONENT: PRICE CARDS ───────────────────────── */
.card-pricing {
  background: var(--c-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: var(--border-thin);
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s ease;
}

.card-pricing:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.card-pricing.featured {
  border: 2px solid var(--c-teal-500);
  box-shadow: var(--shadow-teal);
}

.pricing-badge {
  position: absolute;
  inset-inline-left: var(--space-5);
  inset-block-start: -10px;
  background: var(--c-teal-500);
  color: var(--c-white);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
}

.pricing-name {
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--c-text-primary);
  margin-block-end: var(--space-2);
}

.pricing-description {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  margin-block-end: var(--space-6);
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-block-end: var(--space-6);
}

.pricing-currency {
  font-size: var(--text-md);
  color: var(--c-text-muted);
}

.pricing-amount {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  color: var(--c-navy-700);
}

.pricing-period {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
}

.pricing-features {
  list-style: none;
  flex: 1;
  margin-block-end: var(--space-6);
}

.pricing-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--c-surface-2);
}

.pricing-feature:last-child {
  border-block-end: none;
}

.pricing-feature i {
  color: var(--c-success);
  flex-shrink: 0;
}

.pricing-feature.excluded i {
  color: var(--c-text-muted);
  opacity: 0.5;
}

/* ── COMPONENT: TIMELINE ─────────────────────────── */
.timeline {
  position: relative;
  padding-inline-start: var(--space-8);
}

.timeline::before {
  content: '';
  position: absolute;
  inset-inline-left: 0;
  inset-block: var(--space-4);
  width: 2px;
  background: var(--c-border);
}

.timeline-item {
  position: relative;
  padding-inline-start: var(--space-8);
  margin-block-end: var(--space-10);
}

.timeline-marker {
  position: absolute;
  inset-inline-left: -5px;
  inset-block-start: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--c-teal-500);
  border: 3px solid var(--c-white);
  box-shadow: 0 0 0 3px var(--c-teal-100);
}

.timeline-marker.completed {
  background: var(--c-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.timeline-content {
  background: var(--c-white);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: var(--border-thin);
}

.timeline-date {
  font-size: var(--text-xs);
  color: var(--c-teal-500);
  font-weight: var(--weight-medium);
  margin-block-end: var(--space-2);
  display: block;
}

.timeline-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--c-text-primary);
  margin-block-end: var(--space-2);
}

.timeline-description {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
}

/* ── COMPONENT: PROGRESS BAR ─────────────────────── */
.progress {
  width: 100%;
  height: 8px;
  background: var(--c-surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--grad-teal-silk);
  border-radius: var(--radius-pill);
  transition: width 0.6s var(--ease-out);
  position: relative;
}

.progress-bar.teal { background: var(--grad-teal-silk); }
.progress-bar.success { background: var(--c-success); }
.progress-bar.warning { background: var(--c-warning); }
.progress-bar.error { background: var(--c-error); }
.progress-bar.gold {
  background: var(--grad-gold);
  background-size: 200% auto;
  animation: shimmer 2s linear infinite;
}

/* Striped Progress */
.progress-striped .progress-bar {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.progress-striped .progress-bar.animated {
  animation: progressStripes 1s linear infinite;
}

@keyframes progressStripes {
  from { background-position: 1rem 0; }
  to { background-position: 0 0; }
}

/* ── COMPONENT: BREADCRUMBS ─────────────────────── */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}

.breadcrumb-item {
  color: var(--c-text-muted);
  transition: color 0.2s ease;
}

.breadcrumb-item:hover { color: var(--c-teal-500); }

.breadcrumb-item.active {
  color: var(--c-text-primary);
  font-weight: var(--weight-medium);
}

.breadcrumb-separator {
  color: var(--c-border-strong);
}

/* ── COMPONENT: TABS ─────────────────────────────── */
.tabs {
  border-block-end: 2px solid var(--c-border);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
}

.tab {
  padding: var(--space-3) var(--space-5);
  background: transparent;
  border: none;
  border-block-end: 3px solid transparent;
  color: var(--c-text-secondary);
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tab:hover { color: var(--c-teal-500); }

.tab.active {
  color: var(--c-teal-500);
  border-block-end-color: var(--c-teal-500);
}

.tab-panel {
  display: none;
  padding-block-start: var(--space-6);
}

.tab-panel.active { display: block; }

/* ── COMPONENT: MODAL ─────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(29, 45, 94, 0.7);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--c-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  max-width: 90vw;
  width: 600px;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s var(--ease-spring);
}

.modal-overlay.is-open .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-block-end: 1px solid var(--c-border);
}

.modal-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--c-text-primary);
}

.modal-close {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
  background: var(--c-surface-1);
  color: var(--c-text-primary);
}

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--c-surface-1);
  border-block-start: 1px solid var(--c-border);
  justify-content: flex-end;
}

/* ── COMPONENT: TOOLTIP ───────────────────────────── */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip-content {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--c-navy-900);
  color: var(--c-white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

.tooltip:hover .tooltip-content {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

.tooltip-arrow {
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  bottom: -4px;
  border: 4px solid transparent;
  border-block-start-color: var(--c-navy-900);
}

/* ── COMPONENT: DROPDOWN ─────────────────────────── */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--c-white);
  border: var(--border-base);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--c-text-primary);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dropdown-toggle:hover,
.dropdown-toggle.is-open {
  border-color: var(--c-teal-500);
}

.dropdown-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-width: 200px;
  background: var(--c-white);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  margin-block-start: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s var(--ease-out);
  z-index: 100;
}

.dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  width: 100%;
  text-align: start;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--c-text-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}

.dropdown-item:hover {
  background: var(--c-surface-1);
}

.dropdown-item.danger {
  color: var(--c-error);
}

.dropdown-item.danger:hover {
  background: #fef2f2;
}

.dropdown-divider {
  height: 1px;
  background: var(--c-border);
  margin: var(--space-2) 0;
}

/* ── COMPONENT: LOADING STATES ───────────────────── */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-border);
  border-block-start-color: var(--c-teal-500);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

.spinner-sm { width: 16px; height: 16px; border-width: 1.5px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.spinner-xl { width: 48px; height: 48px; border-width: 4px; }

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--c-surface-1) 25%,
    var(--c-surface-2) 50%,
    var(--c-surface-1) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 1rem;
  margin-block-end: var(--space-2);
}

.skeleton-title {
  height: 1.75rem;
  width: 60%;
  margin-block-end: var(--space-4);
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

.skeleton-card {
  padding: var(--space-6);
  background: var(--c-white);
  border-radius: var(--radius-xl);
  border: var(--border-thin);
}

/* Button Loading State */
.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.is-loading .spinner {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ── BOOTSTRAP 5.3 INTEGRATION ───────────────────── */
/* Bootstrap Grid Override for RTL */
[dir="rtl"] .row {
  margin-inline-start: calc(-1 * var(--bs-gutter-x, 1.5rem));
  margin-inline-end: calc(-1 * var(--bs-gutter-x, 1.5rem));
}

[dir="rtl"] .col,
[dir="rtl"] [class*="col-"] {
  padding-inline-start: var(--bs-gutter-x, 1.5rem);
  padding-inline-end: 0;
}

/* Bootstrap Colors - Brand Mapping */
.bs-primary { background-color: var(--c-teal-500) !important; color: var(--c-white); }
.bs-secondary { background-color: var(--c-navy-500) !important; color: var(--c-white); }
.bs-success { background-color: var(--c-success) !important; color: var(--c-white); }
.bs-danger { background-color: var(--c-error) !important; color: var(--c-white); }
.bs-warning { background-color: var(--c-warning) !important; color: var(--c-white); }
.bs-info { background-color: var(--c-info) !important; color: var(--c-white); }
.bs-light { background-color: var(--c-off-white) !important; color: var(--c-text-primary); }
.bs-dark { background-color: var(--c-navy-900) !important; color: var(--c-white); }

/* Bootstrap Buttons - Brand Overrides */
.btn-bs-primary {
  background: var(--c-teal-500);
  border-color: var(--c-teal-500);
  color: var(--c-white);
}

.btn-bs-primary:hover {
  background: var(--c-teal-700);
  border-color: var(--c-teal-700);
}

.btn-bs-secondary {
  background: var(--c-navy-500);
  border-color: var(--c-navy-500);
  color: var(--c-white);
}

.btn-bs-secondary:hover {
  background: var(--c-navy-700);
  border-color: var(--c-navy-700);
}

.btn-bs-outline-primary {
  border-color: var(--c-teal-500);
  color: var(--c-teal-500);
  background: transparent;
}

.btn-bs-outline-primary:hover {
  background: var(--c-teal-500);
  color: var(--c-white);
}

/* Bootstrap Cards - Brand Overrides */
.card {
  background: var(--c-white);
  border: var(--border-thin);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.card-header {
  background: var(--c-surface-1);
  border-block-end: 1px solid var(--c-border);
  padding: var(--space-4);
  font-weight: var(--weight-semi);
  color: var(--c-navy-700);
}

.card-footer {
  background: var(--c-surface-1);
  border-block-start: 1px solid var(--c-border);
  padding: var(--space-4);
}

.card-img-top {
  border-block-start-left-radius: var(--radius-xl);
  border-block-start-right-radius: var(--radius-xl);
}

/* Bootstrap Badges - Brand Overrides */
.badge-bs-primary {
  background-color: var(--c-teal-500);
  color: var(--c-white);
}

.badge-bs-secondary {
  background-color: var(--c-navy-500);
  color: var(--c-white);
}

.badge-bs-success {
  background-color: var(--c-success);
  color: var(--c-white);
}

.badge-bs-danger {
  background-color: var(--c-error);
  color: var(--c-white);
}

.badge-bs-warning {
  background-color: var(--c-warning);
  color: var(--c-white);
}

.badge-bs-info {
  background-color: var(--c-info);
  color: var(--c-white);
}

/* Bootstrap Form Controls - Brand Overrides */
.form-control {
  font-family: var(--font-arabic);
  border: var(--border-base);
  border-radius: var(--radius-md);
  color: var(--c-text-primary);
}

.form-control:focus {
  border-color: var(--c-teal-500);
  box-shadow: 0 0 0 0.25rem rgba(12, 184, 182, 0.25);
}

.form-select {
  font-family: var(--font-arabic);
  border: var(--border-base);
  border-radius: var(--radius-md);
  color: var(--c-text-primary);
}

.form-select:focus {
  border-color: var(--c-teal-500);
  box-shadow: 0 0 0 0.25rem rgba(12, 184, 182, 0.25);
}

.form-check-input:checked {
  background-color: var(--c-teal-500);
  border-color: var(--c-teal-500);
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(12, 184, 182, 0.25);
}

/* Bootstrap Alert Overrides */
.alert-primary {
  background-color: var(--c-teal-100);
  border-color: var(--c-teal-300);
  color: var(--c-teal-900);
}

.alert-secondary {
  background-color: var(--c-navy-100);
  border-color: var(--c-navy-500);
  color: var(--c-navy-900);
}

/* Bootstrap Navbar Overrides */
.navbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
}

.navbar-brand {
  color: var(--c-navy-700);
  font-weight: var(--weight-bold);
}

.navbar-brand:hover {
  color: var(--c-teal-500);
}

.nav-link {
  color: var(--c-text-secondary);
  font-family: var(--font-arabic);
}

.nav-link:hover,
.nav-link.active {
  color: var(--c-teal-500);
}

/* Bootstrap Pagination Overrides */
.page-link {
  color: var(--c-teal-500);
  border-color: var(--c-border);
}

.page-link:hover {
  background-color: var(--c-teal-100);
  border-color: var(--c-teal-300);
}

.page-item.active .page-link {
  background-color: var(--c-teal-500);
  border-color: var(--c-teal-500);
}

/* Bootstrap Accordion Overrides */
.accordion-button {
  font-family: var(--font-arabic);
  font-weight: var(--weight-medium);
  background: var(--c-white);
  color: var(--c-text-primary);
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(12, 184, 182, 0.25);
  border-color: var(--c-teal-500);
}

.accordion-button:not(.collapsed) {
  background: var(--c-teal-100);
  color: var(--c-teal-900);
}

.accordion-item {
  border: var(--border-thin);
}

/* Bootstrap Dropdown Overrides */
.dropdown-menu {
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.dropdown-item {
  font-family: var(--font-arabic);
}

.dropdown-item.active {
  background: var(--c-teal-500);
}

/* Bootstrap Modal Overrides */
.modal-content {
  border: none;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

.modal-header {
  border-block-end: 1px solid var(--c-border);
}

.modal-footer {
  border-block-start: 1px solid var(--c-border);
  background: var(--c-surface-1);
}

/* Bootstrap Table Overrides */
.table {
  border-color: var(--c-border);
  font-family: var(--font-arabic);
}

.table thead th {
  background: var(--c-surface-1);
  border-block-end: 2px solid var(--c-border-strong);
  color: var(--c-navy-700);
  font-weight: var(--weight-semi);
}

.table-striped tbody tr:nth-of-type(odd) {
  background: var(--c-surface-1);
}

.table-hover tbody tr:hover {
  background: var(--c-teal-50);
}

/* Bootstrap List Group Overrides */
.list-group-item {
  border-color: var(--c-border);
}

.list-group-item.active {
  background: var(--c-teal-500);
  border-color: var(--c-teal-500);
}

/* Bootstrap Offcanvas Overrides */
.offcanvas {
  background: var(--c-white);
}

.offcanvas-header {
  border-block-end: 1px solid var(--c-border);
}

.offcanvas-footer {
  border-block-start: 1px solid var(--c-border);
  background: var(--c-surface-1);
}

/* Bootstrap Carousel Overrides */
.carousel-indicators [data-bs-target] {
  background-color: var(--c-navy-700);
  opacity: 0.5;
}

.carousel-indicators .active {
  background-color: var(--c-teal-500);
  opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Bootstrap RTL Support */
[dir="rtl"] .dropdown-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

[dir="rtl"] .dropdown-menu-start {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

[dir="rtl"] .dropdown-menu-end {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

[dir="rtl"] .carousel-control-next {
  inset-inline-start: 0;
}

[dir="rtl"] .carousel-control-prev {
  inset-inline-end: 0;
}

[dir="rtl"] .ms-auto {
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
}

[dir="rtl"] .me-auto {
  margin-inline-end: auto !important;
  margin-inline-start: 0 !important;
}

/* ── FONT AWESOME ICON STYLES ───────────────────── */
/* Base Icon Styles */
.fa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Icon Sizes */
.fa-xs { font-size: 0.75em; }
.fa-sm { font-size: 0.875em; }
.fa-lg { font-size: 1.25em; }
.fa-xl { font-size: 1.5em; }
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }
.fa-4x { font-size: 4em; }
.fa-5x { font-size: 5em; }

/* Icon Spacing */
.fa-fw {
  text-align: center;
  width: 1.25em;
}

/* Icon Animation Classes */
.fa-spin {
  animation: faSpin 2s linear infinite;
}

.fa-spin-reverse {
  animation: faSpin 2s linear infinite reverse;
}

.fa-pulse {
  animation: faSpin 1s steps(8) infinite;
}

@keyframes faSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fa-bounce {
  animation: faBounce 2s infinite ease-in-out;
}

@keyframes faBounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }
}

.fa-beat {
  animation: faBeat 1s infinite ease-in-out;
}

@keyframes faBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.fa-fade {
  animation: faFade 3s infinite ease-in-out;
}

@keyframes faFade {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.fa-flip {
  animation: faFlip 2s infinite ease-in-out;
}

@keyframes faFlip {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(-1); }
}

.fa-shake {
  animation: faShake 2s infinite linear;
}

@keyframes faShake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* Icon Colors - Brand */
.fa-teal { color: var(--c-teal-500); }
.fa-teal-light { color: var(--c-teal-300); }
.fa-teal-dark { color: var(--c-teal-700); }
.fa-navy { color: var(--c-navy-500); }
.fa-navy-light { color: var(--c-navy-100); }
.fa-navy-dark { color: var(--c-navy-700); }
.fa-gold { color: var(--c-gold); }
.fa-gold-light { color: var(--c-gold-light); }
.fa-coral { color: var(--c-coral-500); }
.fa-coral-light { color: var(--c-coral-300); }

/* Icon Colors - Semantic */
.fa-success { color: var(--c-success); }
.fa-warning { color: var(--c-warning); }
.fa-error { color: var(--c-error); }
.fa-info { color: var(--c-info); }

/* Icon Containers */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
}

.icon-box-sm {
  width: 40px;
  height: 40px;
  font-size: var(--text-base);
}

.icon-box-md {
  width: 56px;
  height: 56px;
  font-size: var(--text-xl);
}

.icon-box-lg {
  width: 72px;
  height: 72px;
  font-size: var(--text-2xl);
}

.icon-box-teal {
  background: var(--c-teal-100);
  color: var(--c-teal-700);
}

.icon-box-navy {
  background: var(--c-navy-100);
  color: var(--c-navy-500);
}

.icon-box-gold {
  background: var(--c-gold-light);
  color: var(--c-gold-dark);
}

.icon-box-coral {
  background: #fff0f0;
  color: var(--c-coral-700);
}

.icon-box-white {
  background: var(--c-white);
  color: var(--c-teal-500);
  box-shadow: var(--shadow-sm);
}

/* Icon Button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--text-lg);
}

.icon-btn:hover {
  background: var(--c-surface-1);
  color: var(--c-teal-500);
  transform: translateY(-2px);
}

.icon-btn:active {
  transform: translateY(0);
}

.icon-btn-sm {
  width: 32px;
  height: 32px;
  font-size: var(--text-md);
}

.icon-btn-lg {
  width: 48px;
  height: 48px;
  font-size: var(--text-xl);
}

/* Icon Floating */
.icon-float {
  position: fixed;
  inset-block-end: var(--space-8);
  inset-inline-end: var(--space-8);
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  z-index: 100;
  cursor: pointer;
  transition: all 0.3s var(--ease-spring);
  box-shadow: var(--shadow-lg);
}

.icon-float:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}

/* RTL Icon Flipping */
[dir="rtl"] .fa-arrow-left {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-arrow-right {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-chevron-left {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-chevron-right {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-angle-left {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-angle-right {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-backward {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-forward {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-long-arrow-alt-left {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-long-arrow-alt-right {
  transform: scaleX(-1);
}

/* Icon Circle Badge */
.fa-badge {
  position: relative;
}

.fa-badge::before {
  content: '';
  position: absolute;
  inset-inline-start: -4px;
  inset-block-start: -4px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--c-error);
  border: 2px solid var(--c-white);
}

/* Icon Rotations */
.fa-rotate-90 { transform: rotate(90deg); }
.fa-rotate-180 { transform: rotate(180deg); }
.fa-rotate-270 { transform: rotate(270deg); }
.fa-flip-horizontal { transform: scaleX(-1); }
.fa-flip-vertical { transform: scaleY(-1); }
.fa-flip-both { transform: scale(-1, -1); }

/* RTL Flip Overrides */
[dir="rtl"] .fa-flip-horizontal {
  transform: scaleX(1);
}

[dir="rtl"] .fa-flip-both {
  transform: scale(1, -1);
}

/* ── GLASSMORPHISM EFFECTS ─────────────────────── */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-sm {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-lg {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-dark {
  background: rgba(29, 45, 94, 0.6);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--c-white);
}

.glass-teal {
  background: rgba(12, 184, 182, 0.08);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(12, 184, 182, 0.2);
}

.glass-hover {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s var(--ease-out);
}

.glass-hover:hover {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border: 1px solid rgba(12, 184, 182, 0.3);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ── GRADIENT EFFECTS ───────────────────────────── */
.bg-gradient-hero { background: var(--grad-hero); }
.bg-gradient-teal-silk { background: var(--grad-teal-silk); }
.bg-gradient-pearl { background: var(--grad-pearl); }
.bg-gradient-mesh { background: var(--grad-mesh); }

.gradient-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gradient-border-teal {
  position: relative;
  background: var(--c-white);
  border-radius: var(--radius-xl);
}

.gradient-border-teal::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--c-teal-500), var(--c-teal-300), var(--c-navy-500));
  border-radius: calc(var(--radius-xl) + 2px);
  z-index: -1;
}

.text-gradient-rainbow {
  background: linear-gradient(90deg, var(--c-teal-500), var(--c-navy-500), var(--c-coral-500), var(--c-gold), var(--c-teal-500));
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── ACCESSIBILITY ENHANCEMENTS ──────────────────── */
.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--c-navy-900);
  color: var(--c-white);
  padding: var(--space-3) var(--space-6);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  z-index: 10000;
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: inset-block-start 0.3s ease;
}

.skip-link:focus {
  inset-block-start: 0;
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-contrast: high) {
  :root {
    --c-border: #000000;
    --c-text-secondary: #000000;
  }
}

@media (forced-colors: active) {
  :root {
    --c-teal-500: ButtonText;
    --c-navy-700: ButtonText;
    --c-text-primary: CanvasText;
    --c-border: ButtonBorder;
  }
}

/* ── DARK MODE ──────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --c-white: #1a1f2e;
    --c-off-white: #11141d;
    --c-surface-1: #1e2536;
    --c-surface-2: #252d42;
    --c-border: #3a4259;
    --c-border-strong: #4a5568;
    --c-text-primary: #f1f5f9;
    --c-text-secondary: #94a3b8;
    --c-text-muted: #64748b;
    --c-text-inverse: #1a1f2e;
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
    --shadow-lg: 0 16px 40px rgba(0,0,0,0.6);
    --shadow-xl: 0 32px 64px rgba(0,0,0,0.7);
  }

  body { background: var(--c-off-white); }

  .header {
    background: rgba(26, 31, 46, 0.92);
    border-block-end-color: rgba(58, 66, 89, 0.6);
  }

  .card-service,
  .card-testimonial,
  .contact-form-wrap {
    background: var(--c-surface-1);
    border-color: var(--c-border);
  }

  .input-field,
  select,
  textarea {
    background: var(--c-surface-2);
    border-color: var(--c-border);
    color: var(--c-text-primary);
  }
}

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: var(--header-height) 0 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    padding: var(--space-8);
    gap: var(--space-2);
    animation: slideDown 0.3s var(--ease-out);
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .nav-toggle { display: block; }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hero-visual { order: -1; }
  .hero-image-frame { aspect-ratio: 4 / 3; max-height: 60vw; }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .gallery-grid { columns: 1; }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-grid { grid-template-columns: 1fr; }

  .container { padding-inline: 1.5rem; }

  /* Mobile Contact Page Styles */
  .inquiry-tabs {
    padding-bottom: 0.5rem;
  }

  .inquiry-tab {
    padding: 0.6rem 0.75rem;
    font-size: var(--text-xs);
  }

  .direction-card {
    padding: var(--space-4);
  }

  .direction-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .directions-box {
    padding: var(--space-6);
  }

  .directions-box-title {
    font-size: var(--text-base);
  }

  .working-hours {
    margin-top: 1rem;
  }

  .quick-contact {
    margin-top: 1.5rem;
  }

  .quick-contact-btn {
    padding: 0.75rem 0.5rem;
    font-size: var(--text-xs);
  }

  .floating-whatsapp {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }

  .floating-whatsapp span {
    display: none;
  }

  body.has-floating-whatsapp .scroll-top {
    inset-inline-end: calc(var(--space-6) + 60px);
  }

  .map-label {
    inset-block-end: 8px;
    inset-inline-end: 8px;
    padding: 0.5rem;
    max-width: 150px;
  }

  .map-label h4 {
    font-size: var(--text-xs);
  }

  .map-label .text-muted {
    font-size: 10px;
  }

  /* Contact Info Panel Mobile Styles */
  .contact-form-wrap {
    padding: var(--space-6);
  }

  /* Location Card Mobile Styles */
  .location-card {
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .location-icon {
    font-size: 20px;
    margin-block-start: 1px;
  }

  /* Hours Badge Mobile */
  .hours-badge {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
  }

  /* Hours List Mobile */
  .hours-item {
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
  }

  /* Clinic Photo Mobile */
  .clinic-photo-frame {
    aspect-ratio: 4 / 3;
  }

  .clinic-photo-caption {
    font-size: var(--text-xs);
  }

  /* Testimonial Card Mobile */
  .testimonial-card {
    padding: var(--space-5);
  }

  .testimonial-text {
    font-size: var(--text-sm);
  }

  .testimonial-avatar {
    width: 40px;
    height: 40px;
  }

  /* FAQ Mobile */
  .faq-container {
    max-width: 100%;
  }

  .faq-question {
    padding-block: var(--space-4);
    font-size: var(--text-sm);
    gap: var(--space-3);
  }

  .faq-answer {
    padding-block: var(--space-3);
    font-size: var(--text-sm);
  }

  /* Map Container Mobile */
  .map-container iframe {
    height: 250px !important;
  }

  /* Social Buttons Mobile */
  .social-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .social-btn i {
    font-size: 16px;
  }

  /* Emergency Contact Mobile */
  .emergency-contact {
    padding: var(--space-3);
  }

  .emergency-contact-content {
    gap: 0.5rem;
  }

  .emergency-icon {
    font-size: 18px;
  }

  /* Hours Note Mobile */
  .hours-note {
    padding: var(--space-3);
    font-size: var(--text-xs);
  }

  /* Working Hours Section Mobile */
  .working-hours {
    margin-top: 1rem;
  }

  /* Social Media Section Mobile */
  .social-media-section {
    margin-top: 1.5rem;
  }

  /* Contact Info Mobile */
  .contact-info {
    margin-bottom: var(--space-6);
  }

  /* Form Check Mobile */
  .form-check-input {
    margin-top: 0.25rem;
  }

  /* Section Overline Mobile */
  .section-overline {
    font-size: var(--text-xs);
  }

  .section-title {
    font-size: var(--text-xl);
  }

  /* Feature Card Mobile */
  .feature-icon {
    width: 48px;
    height: 48px;
  }

  .feature-icon i {
    font-size: 20px;
  }

  .feature-title {
    font-size: var(--text-sm);
  }

  .feature-text {
    font-size: var(--text-xs);
  }
}

/* ── PRINT STYLES ────────────────────────────────── */
@media print {
  /* Hide non-essential elements */
  .skip-link,
  .nav-toggle,
  .floating-whatsapp,
  .scroll-top,
  .nav-links,
  .header,
  .footer,
  .btn,
  .social-buttons,
  .gallery-caption,
  .contact-form-wrap,
  .hero-ctas,
  .hero-badges,
  .faq-icon {
    display: none !important;
  }

  /* Page layout */
  html,
  body {
    background: white;
    color: black;
    font-size: 12pt;
    line-height: 1.4;
    overflow: visible;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  /* Sections */
  .section {
    page-break-inside: avoid;
    padding-block: 2rem;
  }

  /* Cards */
  .card-service,
  .card-testimonial,
  .card-pricing,
  .location-card {
    page-break-inside: avoid;
    border: 1px solid #ccc;
    box-shadow: none;
    background: white;
    margin-block-end: 1rem;
  }

  /* Typography */
  h1, h2, h3, h4, h5, h6 {
    color: black;
    page-break-after: avoid;
  }

  h1 { font-size: 18pt; }
  h2 { font-size: 16pt; }
  h3 { font-size: 14pt; }

  /* Images */
  img {
    max-width: 100%;
    page-break-inside: avoid;
  }

  /* Stats */
  .stats-band {
    background: white;
    border: 1px solid #ccc;
  }

  .stat-number {
    color: black;
  }

  .stat-label {
    color: black;
  }

  /* Gallery */
  .gallery-grid {
    columns: 1;
  }

  .gallery-item {
    margin: 0 0 1rem;
    border: 1px solid #ccc;
  }

  /* Contact info */
  .location-list {
    page-break-inside: avoid;
  }

  .hours-badge {
    border: 1px solid #000;
    background: white;
  }

  /* Footer info only */
  .footer-grid {
    display: block;
    border: none;
  }

  .footer-copy {
    text-align: center;
    color: black;
  }
}

/* ── PERFORMANCE OPTIMIZATIONS ───────────────────── */
/* Use will-change for animated elements */
.animate-on-scroll,
.card-service:hover,
.btn:hover,
.nav-link:hover {
  will-change: transform, opacity;
}

/* Use hardware acceleration */
.gpu-accelerated {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Font Display Optimization */
@font-face {
  font-display: swap;
}

/* Image Optimization */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Reduce Paint on Scroll */
.header,
.scroll-top,
.floating-whatsapp {
  contain: layout style paint;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── ICON ANIMATIONS & STYLES ───────────────────── */

/* Icon Container Variants */
.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s var(--ease-spring);
}

.icon-circle--primary {
  background: var(--c-teal-100);
  color: var(--c-teal-700);
}

.icon-circle--secondary {
  background: var(--c-navy-100);
  color: var(--c-navy-500);
}

.icon-circle--accent {
  background: var(--c-coral-300);
  color: var(--c-coral-700);
}

.icon-circle--gold {
  background: var(--c-gold-light);
  color: var(--c-gold-dark);
}

.icon-circle--large {
  width: 64px;
  height: 64px;
  font-size: 28px;
}

.icon-circle--small {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

/* Icon Square Container */
.icon-square {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.3s var(--ease-spring);
}

.icon-square--teal {
  background: var(--c-teal-100);
  color: var(--c-teal-700);
}

.icon-square--navy {
  background: var(--c-navy-100);
  color: var(--c-navy-500);
}

/* Icon Animations */
.icon-spin-slow {
  animation: fa-spin 3s linear infinite;
}

.icon-spin-fast {
  animation: fa-spin 0.7s linear infinite;
}

.icon-pulse {
  animation: fa-pulse 2s ease-in-out infinite;
}

.icon-bounce {
  animation: fa-bounce 1s ease-in-out infinite;
}

.icon-shake {
  animation: fa-shake 1s ease-in-out infinite;
}

.icon-beat {
  animation: fa-beat 1s ease-in-out infinite;
}

.icon-fade {
  animation: iconFade 0.3s ease-in-out;
}

@keyframes iconFade {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Icon Hover Effects */
.icon-hover-grow:hover {
  transform: scale(1.15);
}

.icon-hover-shrink:hover {
  transform: scale(0.9);
}

.icon-hover-rotate:hover {
  transform: rotate(15deg);
}

.icon-hover-flip:hover {
  transform: scaleX(-1);
}

.icon-hover-color-teal:hover {
  color: var(--c-teal-500);
}

.icon-hover-color-coral:hover {
  color: var(--c-coral-500);
}

/* Icon Tooltip */
.icon-tooltip {
  position: relative;
}

.icon-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 0.5rem 0.75rem;
  background: var(--c-navy-700);
  color: var(--c-white);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.icon-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

/* RTL Icon Direction */
[dir="rtl"] .fa-arrow-right {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-chevron-right {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-angle-right {
  transform: scaleX(-1);
}

/* Service Icon Variants */
.service-icon {
  font-size: 2rem;
  color: var(--c-teal-500);
  margin-bottom: 1rem;
}

.service-icon--medical {
  color: var(--c-teal-500);
}

.service-icon--beauty {
  color: var(--c-gold);
}

.service-icon--laser {
  color: var(--c-navy-500);
}

/* Font Awesome Color Variants */
.fa--teal { color: var(--c-teal-500); }
.fa--teal-dark { color: var(--c-teal-700); }
.fa--teal-light { color: var(--c-teal-300); }
.fa--navy { color: var(--c-navy-500); }
.fa--coral { color: var(--c-coral-500); }
.fa--gold { color: var(--c-gold); }
.fa--white { color: var(--c-white); }
.fa--gray { color: var(--c-text-muted); }

/* Medical Icon Styles */
.medical-icon-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.medical-icon-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--c-teal-100);
  border-radius: var(--radius-pill);
  color: var(--c-teal-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: all 0.2s ease;
}

.medical-icon-badge:hover {
  background: var(--c-teal-500);
  color: var(--c-white);
  transform: translateY(-2px);
}

/* Social Icon Hover Effects */
.social-link .fa-brands {
  transition: transform 0.2s var(--ease-spring);
}

.social-link:hover .fa-facebook {
  color: #1877F2;
  transform: scale(1.1);
}

.social-link:hover .fa-instagram {
  color: #E4405F;
  transform: scale(1.1);
}

.social-link:hover .fa-whatsapp {
  color: #25D366;
  transform: scale(1.1);
}

/* Feature Icon Animation */
.feature-icon-container {
  position: relative;
  display: inline-flex;
}

.feature-icon-container::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--c-teal-500);
  opacity: 0;
  animation: ripple 1.5s ease-out infinite;
  z-index: -1;
}

@keyframes ripple {
  0% { transform: scale(0.8); opacity: 0.3; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ── FONT AWESOME ICON ENHANCEMENTS ──────────────── */

/* Font Awesome Overlay on Phosphor Icons */
.card-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon .fa-solid,
.card-icon .fa-regular {
  position: absolute;
  opacity: 0.3;
  font-size: 0.7em;
  top: 2px;
  right: 2px;
}

.card-service:hover .card-icon .fa-solid,
.card-service:hover .card-icon .fa-regular {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Medical Icon Badges */
.medical-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--c-teal-100);
  border: 1px solid var(--c-teal-300);
  border-radius: var(--radius-pill);
  color: var(--c-teal-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.medical-badge i {
  font-size: 1rem;
}

/* Cosmetic Beauty Icon Container */
.beauty-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--c-gold-light) 0%, var(--c-gold) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: var(--shadow-gold);
  transition: all 0.3s var(--ease-spring);
}

.beauty-icon-wrapper:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.4);
}

/* Surgical Icon Container */
.surgical-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--c-teal-100) 0%, var(--c-teal-300) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-teal-700);
  font-size: 24px;
  border: 2px solid var(--c-teal-500);
  transition: all 0.3s var(--ease-spring);
}

.surgical-icon-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-teal);
}

/* Feature Icon with Pulse */
.feature-icon-pulse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feature-icon-pulse::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: 2px solid var(--c-teal-500);
  animation: pulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulseRing {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* WhatsApp Button Icon Animation */
.btn-whatsapp .fa-whatsapp {
  transition: transform 0.3s var(--ease-spring);
}

.btn-whatsapp:hover .fa-whatsapp {
  transform: scale(1.2) rotate(10deg);
}

/* Scroll Top Icon Animation */
.scroll-top .fa-arrow-up {
  transition: transform 0.3s var(--ease-spring);
}

.scroll-top:hover .fa-arrow-up {
  transform: translateY(-3px);
}

/* Calendar Icon Animation */
.calendar-icon-bounce .fa-calendar-check {
  animation: softBounce 2s ease-in-out infinite;
}

@keyframes softBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Phone Icon Ring Animation */
.phone-ring .fa-phone {
  position: relative;
}

.phone-ring .fa-phone::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--c-teal-500);
  border-radius: var(--radius-full);
  animation: phoneRing 1.5s ease-out infinite;
}

@keyframes phoneRing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Mail Icon Animation */
.mail-icon-fly .fa-envelope {
  transition: transform 0.3s var(--ease-spring);
}

.mail-icon-fly:hover .fa-envelope {
  transform: translateX(-4px) rotate(-5deg);
}

/* Location Icon Pulse */
.location-pulse .fa-location-dot {
  position: relative;
}

.location-pulse .fa-location-dot::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: var(--c-teal-500);
  border-radius: var(--radius-full);
  opacity: 0.2;
  animation: locationPulse 2s ease-in-out infinite;
}

@keyframes locationPulse {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.3); opacity: 0.4; }
}

/* Service Card Icon Wrapper */
.service-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.service-icon-wrapper .ph-thin {
  font-size: 2rem;
  color: var(--c-teal-700);
  z-index: 1;
}

.service-icon-wrapper .fa-solid {
  position: absolute;
  font-size: 1rem;
  bottom: 0;
  right: 0;
  background: var(--c-teal-500);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* Trust Badge Icon */
.trust-badge .fa-solid {
  transition: transform 0.3s var(--ease-spring);
}

.trust-badge:hover .fa-solid {
  transform: scale(1.15) rotate(5deg);
}

/* Stats Icon Animation */
.stat-icon .fa-solid {
  animation: fadeInUp 0.6s ease forwards;
}

/* FAQ Icon Rotation */
details[open] .fa-plus {
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease-spring);
}

details .fa-plus {
  transition: transform 0.3s var(--ease-spring);
}

/* Social Media Icon Colors */
.social-link .fa-brands {
  font-size: 1.2rem;
}

.social-link:hover .fa-facebook {
  color: #1877F2 !important;
  transform: scale(1.1) rotate(5deg);
}

.social-link:hover .fa-instagram {
  color: #E4405F !important;
  transform: scale(1.1) rotate(5deg);
}

.social-link:hover .fa-whatsapp {
  color: #25D366 !important;
  transform: scale(1.1) rotate(5deg);
}

/* Icon Size Variants for Font Awesome */
.fa-2xl { font-size: 2em; }
.fa-3xl { font-size: 3em; }
.fa-4xl { font-size: 4em; }

/* Icon Spacing Utilities */
.me-1 { margin-inline-end: 0.25rem; }
.me-2 { margin-inline-end: 0.5rem; }
.me-3 { margin-inline-end: 1rem; }

.ms-1 { margin-inline-start: 0.25rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.ms-3 { margin-inline-start: 1rem; }

/* RTL Fixes for Font Awesome Icons */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-angle-right {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-angle-left {
  transform: scaleX(-1);
}

/* Icon Tooltip for Accessibility */
.icon-with-tooltip {
  position: relative;
}

.icon-with-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 0.5rem 0.75rem;
  background: var(--c-navy-700);
  color: var(--c-white);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

.icon-with-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

/* ── UTILITY CONSOLIDATION ───────────────────────── */
/* Spacing Utilities */
.mt-0 { margin-block-start: 0; }
.mt-1 { margin-block-start: var(--space-1); }
.mt-2 { margin-block-start: var(--space-2); }
.mt-3 { margin-block-start: var(--space-3); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-5 { margin-block-start: var(--space-5); }
.mt-6 { margin-block-start: var(--space-6); }
.mt-8 { margin-block-start: var(--space-8); }

.mb-0 { margin-block-end: 0; }
.mb-1 { margin-block-end: var(--space-1); }
.mb-2 { margin-block-end: var(--space-2); }
.mb-3 { margin-block-end: var(--space-3); }
.mb-4 { margin-block-end: var(--space-4); }
.mb-5 { margin-block-end: var(--space-5); }
.mb-6 { margin-block-end: var(--space-6); }

.ml-0 { margin-inline-start: 0; }
.ml-1 { margin-inline-start: var(--space-1); }
.ml-2 { margin-inline-start: var(--space-2); }
.ml-3 { margin-inline-start: var(--space-3); }
.ml-4 { margin-inline-start: var(--space-4); }

.mr-0 { margin-inline-end: 0; }
.mr-1 { margin-inline-end: var(--space-1); }
.mr-2 { margin-inline-end: var(--space-2); }
.mr-3 { margin-inline-end: var(--space-3); }
.mr-4 { margin-inline-end: var(--space-4); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.pt-0 { padding-block-start: 0; }
.pt-1 { padding-block-start: var(--space-1); }
.pt-2 { padding-block-start: var(--space-2); }
.pt-3 { padding-block-start: var(--space-3); }
.pt-4 { padding-block-start: var(--space-4); }
.pt-5 { padding-block-start: var(--space-5); }
.pt-6 { padding-block-start: var(--space-6); }

.pb-0 { padding-block-end: 0; }
.pb-1 { padding-block-end: var(--space-1); }
.pb-2 { padding-block-end: var(--space-2); }
.pb-3 { padding-block-end: var(--space-3); }
.pb-4 { padding-block-end: var(--space-4); }
.pb-5 { padding-block-end: var(--space-5); }
.pb-6 { padding-block-end: var(--space-6); }

/* Display Utilities */
.d-none { display: none; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }

/* Flex Utilities */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column-reverse { flex-direction: column-reverse; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }

.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

/* Grid Utilities */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Position Utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

.inset-0 { inset: 0; }
.top-0 { inset-block-start: 0; }
.right-0 { inset-inline-end: 0; }
.bottom-0 { inset-block-end: 0; }
.left-0 { inset-inline-start: 0; }

/* Width Utilities */
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-half { width: 50%; }
.w-third { width: 33.333%; }
.w-quarter { width: 25%; }

.max-w-full { max-width: 100%; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }

/* Height Utilities */
.h-auto { height: auto; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Text Utilities */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }

.text-decoration-none { text-decoration: none; }
.text-decoration-underline { text-decoration: underline; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.font-light { font-weight: var(--weight-light); }
.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semi); }
.font-bold { font-weight: var(--weight-bold); }

.text-muted { color: var(--c-text-muted); }
.text-primary { color: var(--c-text-primary); }
.text-secondary { color: var(--c-text-secondary); }
.text-white { color: var(--c-white); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Border Utilities */
.border-none { border: none; }
.border-thin { border: var(--border-thin); }
.border-base { border: var(--border-base); }

.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-pill { border-radius: var(--radius-pill); }

/* Background Utilities */
.bg-transparent { background: transparent; }
.bg-white { background: var(--c-white); }
.bg-off-white { background: var(--c-off-white); }
.bg-teal-100 { background: var(--c-teal-100); }
.bg-navy-500 { background: var(--c-navy-500); }

/* Shadow Utilities */
.shadow-none { box-shadow: none; }
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Overflow Utilities */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

/* Cursor Utilities */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-help { cursor: help; }

/* Opacity Utilities */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Z-Index Utilities */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }

/* Transitions Utilities */
.transition-none { transition: none; }
.transition-all { transition: all 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease; }

/* ── WHATSAPP FLOATING BUTTON ───────────────────── */
.whatsapp-float {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: #25D366;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: 99;
  text-decoration: none;
  transition: all 0.3s var(--ease-spring);
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.5);
}

.whatsapp-float .fa-brands {
  font-size: 30px;
}

.whatsapp-float .ph-thin {
  display: none;
}

.whatsapp-tooltip {
  position: absolute;
  inset-inline-end: 70px;
  background: var(--c-navy-700);
  color: var(--c-white);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-8px);
}

/* Mobile adjustment for WhatsApp button */
@media (max-width: 767px) {
  .whatsapp-float {
    inset-block-end: 16px;
    inset-inline-end: 16px;
    width: 50px;
    height: 50px;
  }
  
  .whatsapp-float .fa-brands {
    font-size: 24px;
  }
  
  .whatsapp-tooltip {
    display: none;
  }
}

/* ── ICON COMBINATION STYLES ───────────────────── */
/* For combining Phosphor and Font Awesome icons */
.icon-dual {
  position: relative;
  display: inline-flex;
}

.icon-dual .ph-thin {
  position: relative;
  z-index: 1;
}

.icon-dual .fa-solid,
.icon-dual .fa-brands {
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-spring);
}

.icon-dual:hover .fa-solid,
.icon-dual:hover .fa-brands {
  opacity: 1;
  transform: scale(1);
}

/* Icon Stack for layered icons */
.icon-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
}

.icon-stack .icon-stack-base {
  position: absolute;
  font-size: 2em;
}

.icon-stack .icon-stack-icon {
  position: relative;
  font-size: 1em;
  color: white;
  z-index: 1;
}

/* Animated Service Icons */
.service-icon-animated {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--c-teal-100);
  color: var(--c-teal-700);
  font-size: 24px;
  transition: all 0.3s var(--ease-spring);
}

.service-icon-animated:hover {
  background: var(--c-teal-500);
  color: var(--c-white);
  transform: scale(1.1) rotate(-3deg);
}

.service-icon-animated .fa-solid {
  animation: iconEntrance 0.5s var(--ease-spring) forwards;
}

@keyframes iconEntrance {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── SITE-WIDE IMPROVEMENTS ───────────────────────── */

/* Custom Scrollbar - Matches Brand Colors */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--c-surface-1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-teal-500) 0%, var(--c-teal-700) 100%);
  border-radius: 10px;
  border: 2px solid var(--c-surface-1);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--c-teal-700) 0%, var(--c-teal-900) 100%);
}

/* Firefox Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-teal-500) var(--c-surface-1);
}

/* Loading Skeletons */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--c-surface-1) 0%,
    var(--c-surface-2) 50%,
    var(--c-surface-1) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: 4px;
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-text.long { width: 100%; }

.skeleton-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.skeleton-card {
  height: 200px;
  border-radius: var(--radius-lg);
}

/* Smooth Page Transitions */
html {
  scroll-behavior: smooth;
}

.page-transition {
  animation: pageFadeIn 0.4s ease-out;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Focus Styles for Accessibility */
:focus-visible {
  outline: 3px solid var(--c-teal-500);
  outline-offset: 2px;
}

/* Focus Trap for Modals */
[role="dialog"] {
  position: fixed;
  z-index: 9999;
}

/* Form Validation Feedback */
.input-field:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: var(--c-error);
}

.input-field:valid:not(:placeholder-shown),
select:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown) {
  border-color: var(--c-success);
}

.input-field:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--c-teal-500);
  box-shadow: 0 0 0 4px rgba(12, 184, 182, 0.1);
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 80px;
  left: 20px;
  z-index: 9999;
  max-width: 350px;
}

[dir="rtl"] .toast-container {
  left: auto;
  right: 20px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--c-white);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  margin-top: 0.75rem;
  animation: toastSlideIn 0.3s ease-out;
}

.toast-success {
  border-right: 4px solid var(--c-success);
}

[dir="rtl"] .toast-success {
  border-right: none;
  border-left: 4px solid var(--c-success);
}

.toast-error {
  border-right: 4px solid var(--c-error);
}

[dir="rtl"] .toast-error {
  border-right: none;
  border-left: 4px solid var(--c-error);
}

.toast-warning {
  border-right: 4px solid var(--c-warning);
}

[dir="rtl"] .toast-warning {
  border-right: none;
  border-left: 4px solid var(--c-warning);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

[dir="rtl"] @keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

[dir="rtl"] @keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Keyboard Navigation Improvements */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--c-teal-500);
  color: var(--c-white);
  padding: 0.5rem 1rem;
  z-index: 10000;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print Optimization */
@media print {
  .header,
  .footer,
  .floating-buttons,
  .nav-toggle,
  .btn-primary,
  .btn-whatsapp,
  .gallery-filter {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  a {
    text-decoration: underline;
  }

  .section {
    page-break-inside: avoid;
  }

  .card-service,
  .card-testimonial {
    break-inside: avoid;
  }

  /* Show URLs after links */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.3s ease;
}

.loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--c-teal-100);
  border-top-color: var(--c-teal-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Success/Error States */
.state-success {
  color: var(--c-success);
}

.state-error {
  color: var(--c-error);
}

.state-warning {
  color: var(--c-warning);
}

.state-info {
  color: var(--c-info);
}

/* Button Loading State */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Hover Effects Enhancement */
.hover-lift {
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Link Underline Animation */
.link-animated {
  position: relative;
  text-decoration: none;
}

.link-animated::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--c-teal-500);
  transition: width 0.3s ease;
}

.link-animated:hover::after {
  width: 100%;
}

/* Pulse Animation for Call to Action */
@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.pulse-button {
  position: relative;
}

.pulse-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

/* Selection Colors */
::selection {
  background: var(--c-teal-500);
  color: var(--c-white);
}

::-moz-selection {
  background: var(--c-teal-500);
  color: var(--c-white);
}