/* ─── Alpine cloak ───────────────────────────────── */
[x-cloak] { display: none !important; }

/* ─── Nav states ─────────────────────────────────── */
.nav-transparent {
  background: transparent;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.nav-transparent.scrolled {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 20px rgba(15,82,159,.1), 0 1px 4px rgba(0,0,0,.04);
}
.nav-solid {
  background: white;
  box-shadow: 0 1px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
}
.nav-link-active {
  background: var(--color-brand);
  color: white !important;
  border-radius: 9999px;
  padding: 0.375rem 1rem;
}

/* ─── Home hero gradient (bedoctor style) ────────── */
.home-hero-bg {
  background: linear-gradient(135deg,
    #b8d3f3 0%,
    #cfe0f8 20%,
    #e6f0fb 45%,
    #f5e8df 75%,
    #fdf4ef 100%
  );
}

/* ─── Typography ─────────────────────────────────── */
:root {
  --font-base: 'IBM Plex Sans Arabic', sans-serif;
  --color-brand:      #0f529f;
  --color-brand-dark: #0a3d7a;
  --color-brand-light:#1a6bc8;
  --color-brand-pale: #e8f0fb;
}
body {
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
}

/* ─── RTL/LTR base ───────────────────────────────── */
[dir="rtl"] { text-align: right; }
[dir="ltr"] { text-align: left;  }

/* ─── Tailwind brand color bridge ───────────────── */
.bg-brand        { background-color: var(--color-brand); }
.bg-brand-dark   { background-color: var(--color-brand-dark); }
.bg-brand-light  { background-color: var(--color-brand-light); }
.text-brand      { color: var(--color-brand); }
.text-brand-light{ color: var(--color-brand-light); }
.border-brand    { border-color: var(--color-brand); }
.hover\:bg-brand:hover      { background-color: var(--color-brand); }
.hover\:bg-brand-dark:hover { background-color: var(--color-brand-dark); }
.hover\:text-brand:hover    { color: var(--color-brand); }
.hover\:border-brand:hover  { border-color: var(--color-brand); }

/* ─── Hero dotted background ─────────────────────── */
.hero-dots-bg {
  background-image: radial-gradient(circle, #0f529f 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ─── Float animations ───────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
@keyframes float-delayed {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

.hero-float {
  animation: float 3.5s ease-in-out infinite;
}
.hero-float-delayed {
  animation: float-delayed 4s ease-in-out infinite;
  animation-delay: 0.8s;
}

/* ─── Line clamp utilities ───────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Smooth transitions (selective, not * ────────── */
a, button, .group, [class*="hover:"] {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}

/* ─── Product image zoom ─────────────────────────── */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* ─── Swiper brand colors ────────────────────────── */
.swiper-button-next,
.swiper-button-prev {
  color: #fff;
}
.swiper-pagination-bullet-active {
  background: var(--color-brand);
}

/* ─── Table responsive ───────────────────────────── */
@media (max-width: 640px) {
  table { display: block; overflow-x: auto; }
}

/* ─── Sticky nav shadow on scroll ───────────────── */
nav.shadow-sm {
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
}

/* ─── Backdrop blur fallback ─────────────────────── */
@supports not (backdrop-filter: blur(4px)) {
  .backdrop-blur-sm { background-color: rgba(15, 82, 159, 0.85); }
}

/* ─── Stats section divider (RTL-friendly) ───────── */
[dir="rtl"] .divide-x > * + * {
  border-right-width: 1px;
  border-left-width: 0;
}

/* ─── Scroll reveal ──────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--rd, 0s);
}
[data-reveal].visible {
  opacity: 1;
  transform: none;
}

/* ─── Section rhythm helpers ─────────────────────── */
.sec-dark  { background: #0c1a2e; }
.sec-light { background: #ffffff; }
.sec-light-blue { background: linear-gradient(180deg,#edf5ff 0%,#f6f9fe 100%); }
.sec-light-warm { background: linear-gradient(180deg,#f8fafe 0%,#ffffff 100%); }

/* ─── Floating glass nav ─────────────────────────── */
.nav-glass-pill {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 4px 24px rgba(15,82,159,.08), 0 1px 4px rgba(0,0,0,.06);
}

/* ─── Hero swiper ────────────────────────────────── */
.hero-swiper { height: 100%; width: 100%; }
.hero-pagination {
  position: absolute;
  bottom: 2rem !important;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  justify-content: center;
}
.hero-pagination .swiper-pagination-bullet {
  width: 8px; height: 8px;
  background: rgba(15,82,159,0.25);
  border-radius: 9999px;
  opacity: 1;
  transition: width 0.3s ease, background 0.3s ease;
  margin: 0 !important;
}
.hero-pagination .swiper-pagination-bullet-active {
  background: #0f529f;
  width: 28px;
  border-radius: 4px;
}