/* ==========================================================================
   EazyDoc Design System - modernization layer
   Loaded AFTER theme3.css / theme_ar1.css. Overrides legacy look while
   keeping Bootstrap 4 grid + legacy classes used by secondary pages intact.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Brand: medical blue (logo #00AEEF family, darkened to AA) + accent pink
   (logo #FF3D85 family) + heritage teal (#00D9A5) as secondary accent.
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --ed-primary: #0A7CC0;
  --ed-primary-hover: #08689F;
  --ed-primary-active: #065A8A;
  --ed-primary-soft: #E8F5FD;
  --ed-primary-softer: #F2F9FE;
  --ed-primary-ink: #08689F;
  /* readable text on soft bg (5.4:1)   */
  --ed-primary-border: #B9DDF2;
  --ed-accent: #F03D7E;
  /* decorative pink                    */
  --ed-accent-strong: #D92E6C;
  /* AA pink for text / solid fills     */
  --ed-accent-soft: #FDE9F1;
  --ed-teal: #0FBF9F;
  --ed-teal-soft: #E2F8F3;

  /* Neutrals */
  --ed-bg: #F5F8FB;
  --ed-surface: #FFFFFF;
  --ed-surface-2: #EFF5F9;
  --ed-border: #E3EBF2;
  --ed-border-strong: #C9D8E5;
  --ed-text: #16324A;
  --ed-text-2: #4A627A;
  --ed-text-muted: #7C8FA0;

  /* Semantic */
  --ed-success: #12805C;
  --ed-success-soft: #E7F6EF;
  --ed-warning: #92400E;
  --ed-warning-soft: #FEF3E2;
  --ed-warning-border: #F5C66A;
  --ed-danger: #C92523;
  --ed-danger-soft: #FDECEC;

  /* Typography */
  --ed-font-latin: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --ed-font-arabic: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --ed-font: var(--ed-font-latin);

  --ed-fs-display: clamp(2.15rem, 1.2rem + 3.4vw, 3.35rem);
  --ed-fs-h1: clamp(1.75rem, 1.1rem + 2.2vw, 2.5rem);
  --ed-fs-h2: clamp(1.45rem, 1.05rem + 1.4vw, 1.95rem);
  --ed-fs-h3: 1.3rem;
  --ed-fs-h4: 1.1rem;
  --ed-fs-lg: 1.075rem;
  --ed-fs-sm: 0.875rem;
  --ed-fs-caption: 0.8125rem;

  /* Radius */
  --ed-r-sm: 10px;
  --ed-r-md: 14px;
  --ed-r-lg: 18px;
  --ed-r-xl: 24px;
  --ed-r-pill: 999px;

  /* Elevation (subtle, blue-tinted) */
  --ed-shadow-xs: 0 1px 2px rgba(22, 50, 74, 0.06);
  --ed-shadow-sm: 0 1px 2px rgba(22, 50, 74, 0.05),
    0 3px 8px rgba(22, 50, 74, 0.06);
  --ed-shadow-md: 0 2px 4px rgba(22, 50, 74, 0.04),
    0 10px 24px rgba(22, 50, 74, 0.09);
  --ed-shadow-lg: 0 4px 8px rgba(22, 50, 74, 0.05),
    0 18px 44px rgba(22, 50, 74, 0.14);
  --ed-ring: 0 0 0 3px rgba(10, 124, 192, 0.28);

  /* Motion */
  --ed-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ed-t-fast: 0.16s var(--ed-ease);
  --ed-t: 0.26s var(--ed-ease);

  /* Header height (for anchors / sticky offsets) */
  --ed-nav-h: 72px;
}

/* --------------------------------------------------------------------------
   1b. - - - - - - - (- :root - - -)
   -------------------------------------------------------------------------- */
html[lang="ar"] {
  --ed-font: var(--ed-font-arabic);
}

/* - - - - - Cairo - - - (- - - -) */
html[lang="ar"] body,
html.ed-dev-ar body {
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
}

html[lang="ar"] .btn,
html[lang="ar"] .form-control,
html[lang="ar"] select,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] button,
html.ed-dev-ar .btn,
html.ed-dev-ar .form-control,
html.ed-dev-ar select,
html.ed-dev-ar input,
html.ed-dev-ar textarea,
html.ed-dev-ar button {
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--ed-font);
  color: var(--ed-text-2);
  background: var(--ed-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4 {
  color: var(--ed-text);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1,
.h1 {
  font-size: var(--ed-fs-h1);
}

h2,
.h2 {
  font-size: var(--ed-fs-h2);
}

h3,
.h3 {
  font-size: var(--ed-fs-h3);
}

h4,
.h4 {
  font-size: var(--ed-fs-h4);
}

a {
  color: var(--ed-primary);
  transition: color var(--ed-t-fast);
}

a:hover {
  color: var(--ed-primary-hover);
  text-decoration: none;
}

::selection {
  background: var(--ed-primary-soft);
  color: var(--ed-primary-ink);
}

/* Accessible, visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(10, 124, 192, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

.ed-skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 3000;
  background: var(--ed-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--ed-r-sm) var(--ed-r-sm);
  font-weight: 600;
  transition: top var(--ed-t);
}

.ed-skip-link:focus {
  top: 0;
  color: #fff;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ed-primary);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ed-font);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  border-radius: var(--ed-r-pill);
  padding: 12px 26px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--ed-t-fast), color var(--ed-t-fast),
    border-color var(--ed-t-fast), box-shadow var(--ed-t-fast),
    transform var(--ed-t-fast);
  min-height: 46px;
}

.btn i+span,
.btn i:not(:last-child) {
  margin-inline-end: 2px;
}

.btn:hover {
  transform: translateY(-1px);
}

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

.btn:disabled,
.btn.disabled {
  opacity: 0.55;
  pointer-events: none;
}

.btn-primary {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: 0 6px 16px rgba(10, 124, 192, 0.26);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--ed-primary-hover);
  border-color: var(--ed-primary-hover);
  color: #fff;
  box-shadow: 0 8px 22px rgba(8, 104, 159, 0.32);
}

.btn-primary:active {
  background: var(--ed-primary-active);
  border-color: var(--ed-primary-active);
}

.btn-outline-primary {
  background: transparent;
  border-color: var(--ed-primary-border);
  color: var(--ed-primary-ink);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--ed-primary-soft);
  border-color: var(--ed-primary);
  color: var(--ed-primary-ink);
}

.btn-accent {
  background: var(--ed-accent-strong);
  border-color: var(--ed-accent-strong);
  color: #fff;
  box-shadow: 0 6px 16px rgba(217, 46, 108, 0.24);
}

.btn-accent:hover,
.btn-accent:focus {
  background: #C02458;
  border-color: #C02458;
  color: #fff;
}

.btn-soft {
  background: var(--ed-primary-soft);
  border-color: transparent;
  color: var(--ed-primary-ink);
}

.btn-soft:hover {
  background: #D9EEFA;
  color: var(--ed-primary-ink);
}

.btn-ghost {
  background: transparent;
  color: var(--ed-text-2);
}

.btn-ghost:hover {
  background: rgba(22, 50, 74, 0.06);
  color: var(--ed-text);
}

.btn-link-ed {
  background: none;
  border: none;
  color: var(--ed-primary);
  padding: 8px 4px;
  min-height: 0;
}

.btn-link-ed:hover {
  color: var(--ed-primary-hover);
  text-decoration: underline;
}

.btn-lg {
  padding: 15px 34px;
  font-size: 1.0325rem;
  min-height: 54px;
}

.btn-sm {
  padding: 8px 18px;
  font-size: var(--ed-fs-sm);
  min-height: 38px;
}

.btn-block {
  width: 100%;
}

/* Button loading state (spinner shown via .is-loading with a nested .ed-spin) */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: ed-spin 0.7s linear infinite;
}

@keyframes ed-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Legacy rounded-pill buttons sizing harmonized */
.btn.rounded-pill {
  border-radius: var(--ed-r-pill) !important;
}

/* --------------------------------------------------------------------------
   4. Forms
   -------------------------------------------------------------------------- */
.form-control,
.auth-input,
.custom-select select,
.form-select,
select.form-select {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font-family: var(--ed-font);
  font-size: 0.9375rem;
  color: var(--ed-text);
  background: var(--ed-surface);
  border: 1.5px solid var(--ed-border-strong);
  border-radius: var(--ed-r-sm);
  box-shadow: var(--ed-shadow-xs);
  transition: border-color var(--ed-t-fast), box-shadow var(--ed-t-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form-control::placeholder,
.auth-input::placeholder {
  color: var(--ed-text-muted);
}

.form-control:focus,
.auth-input:focus,
.form-select:focus,
.custom-select select:focus {
  border-color: var(--ed-primary);
  box-shadow: var(--ed-ring);
  outline: none;
}

textarea.form-control {
  min-height: 120px;
}

label,
.filter-label,
.form-label {
  font-weight: 600;
  font-size: var(--ed-fs-sm);
  color: var(--ed-text);
  margin-bottom: 6px;
  display: inline-block;
}

/* Native select chevron (logical - flips automatically in RTL) */
.ed-select-wrap {
  position: relative;
}

.ed-select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid var(--ed-text-muted);
  border-bottom: 2px solid var(--ed-text-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.ed-select-wrap select {
  padding-inline-end: 36px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. Header (topbar + navbar)
   -------------------------------------------------------------------------- */
.ed-topbar {
  background: var(--ed-surface);
  border-bottom: 1px solid var(--ed-border);
  font-size: 0.8125rem;
  color: var(--ed-text-2);
  padding: 7px 0;
}

.ed-topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ed-topbar a {
  color: var(--ed-text-2);
}

.ed-topbar a:hover {
  color: var(--ed-primary);
}

.ed-topbar .site-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ed-topbar .site-info .mai-mail {
  color: var(--ed-primary);
}

[dir="rtl"] .ed-topbar .site-info {
  direction: ltr;
}

.ed-topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Social mini icons */
.social-mini-button {
  display: inline-flex;
  gap: 6px;
}

.social-mini-button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--ed-text-2);
  background: var(--ed-surface-2);
  transition: background var(--ed-t-fast), color var(--ed-t-fast), transform var(--ed-t-fast);
}

.social-mini-button a:hover {
  background: var(--ed-primary-soft);
  color: var(--ed-primary-ink);
  transform: translateY(-1px);
}

/* Language switcher — professional dropdown */
#select-container {
  position: relative !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  overflow: visible !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

/* Trigger button */
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--ed-r-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ed-text-2);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ed-t-fast), border-color var(--ed-t-fast);
  line-height: 1;
}

.lang-trigger:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.lang-trigger__flag {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.lang-trigger__chev {
  font-size: 0.55rem;
  opacity: 0.6;
  transition: transform var(--ed-t-fast);
}

.lang-trigger[aria-expanded="true"] .lang-trigger__chev {
  transform: rotate(180deg);
}

/* Dropdown panel */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 6px;
  left: auto;
  min-width: 140px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--ed-t-fast), transform var(--ed-t-fast), visibility var(--ed-t-fast);
  z-index: 1050;
}

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

/* Dropdown option */
.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--ed-r-sm);
  background: transparent;
  color: var(--ed-text-2);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--ed-t-fast), color var(--ed-t-fast);
  text-align: start;
}

.lang-option:hover {
  background: var(--ed-primary-soft);
  color: var(--ed-primary-ink);
}

.lang-option.is-active {
  background: var(--ed-primary-soft);
  color: var(--ed-primary);
  font-weight: 700;
}

.lang-option__flag {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.lang-option__label {
  flex: 1;
}

.lang-option__check {
  font-size: 0.65rem;
  color: var(--ed-primary);
}

/* Legacy ul/li overrides — keep theme3 from interfering */
#select-container ul {
  display: none !important;
}

#select-container:hover {
  width: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[dir="rtl"] .lang-dropdown {
  right: auto;
  left: 6px;
}


/* Override theme3.css display:none on mobile */
@media (max-width: 768px) {
  html[dir="rtl"] {
    overflow-x: hidden;
  }

  #select-container {
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }

  /* Topbar — mobile/tablet */
  .ed-topbar .container {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: clip;
  }

  .ed-topbar .site-info {
    display: none;
  }

  .ed-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .lang-dropdown {
    top: calc(6% + 6px);
  }

  .social-mini-button {
    gap: 2px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: var(--ed-r-pill);
    padding: 4px 6px;
  }

  .social-mini-button a {
    font-size: 0.82rem;
    opacity: 0.5;
    transition: opacity var(--ed-t-fast);
  }

  .social-mini-button a:hover {
    opacity: 1;
  }

  /* Topbar patient profile — mobile/tablet */
  .ed-topbar .pp .pp__meta {
    display: none;
  }

  .ed-topbar .pp .pp__ring {
    margin-inline-end: 0;
  }

  .ed-topbar .pp .pp__chev {
    display: none;
  }

  .ed-topbar .pp__trigger {
    padding: 4px;
    border-radius: 50%;
  }

  .ed-topbar .pp__ring {
    width: 36px;
    height: 36px;
  }

  #select-container .lang-trigger {
    padding: 4px 8px;
    font-size: 0.72rem;
  }

  #select-container .lang-trigger__flag {
    width: 18px;
    height: 13px;
  }
}

/* Navbar */
.ed-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--ed-border);
  box-shadow: var(--ed-shadow-xs);
}

.ed-navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--ed-nav-h);
  flex-wrap: wrap;
}

.ed-brand img {
  height: 44px;
  width: auto;
  display: block;
}

.ed-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  list-style: none;
  padding: 0;
}

.ed-nav .nav-link {
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ed-text-2);
  border-radius: var(--ed-r-sm);
  transition: color var(--ed-t-fast), background var(--ed-t-fast);
}

.ed-nav .nav-link:hover {
  color: var(--ed-primary);
  background: var(--ed-primary-softer);
}

.ed-nav .nav-item.active .nav-link,
.ed-nav .nav-link.active {
  color: var(--ed-primary-ink);
}

.ed-nav .nav-item.active .nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 2px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ed-primary);
}

/* Navbar CTA (desktop) */
.ed-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ed-nav-cta .btn {
  padding: 10px 22px;
  font-size: 0.875rem;
}

/* ==========================================================================
   Patient profile dropdown – v5 (premium clean)
   ========================================================================== */

/* ---- Container ---- */
.pp {
  position: relative;
  z-index: 1301;
  display: inline-block;
}

/* ---- Trigger button ---- */
.pp__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 5px 16px 5px 5px;
  border-radius: var(--ed-r-pill);
  background: transparent;
  border: 1.5px solid transparent;
  font-family: var(--ed-font);
  transition: background var(--ed-t-fast), border-color var(--ed-t-fast), box-shadow var(--ed-t-fast);
  outline: none;
}



.pp__trigger:hover,
.pp:focus-within>.pp__trigger {
  background: rgba(10, 124, 192, 0.06);
  border-color: rgba(10, 124, 192, 0.12);
}

.pp.open>.pp__trigger {
  background: rgba(10, 124, 192, 0.08);
  border-color: rgba(10, 124, 192, 0.18);
  box-shadow: var(--ed-ring);
}

/* Icon-only trigger variant (guest) */
.pp__trigger--icon {
  padding: 6px;
  border-radius: 50%;
}

/* ---- Avatar ring ---- */
.pp__ring {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 2.5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8 0%, var(--ed-primary) 50%, #6366f1 100%);
  background-size: 200% 200%;
  animation: pp-ring-glow 6s ease infinite;
  flex-shrink: 0;
  transition: box-shadow var(--ed-t-fast);
}

.pp:hover>.pp__trigger .pp__ring,
.pp.open>.pp__trigger .pp__ring {
  box-shadow: 0 0 0 3px rgba(10, 124, 192, 0.15);
}

@keyframes pp-ring-glow {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.pp__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ed-surface, #fff);
}

/* Status dot */
.pp__status {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--ed-surface, #fff);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  animation: pp-pulse 2.5s ease-in-out infinite;
}

@keyframes pp-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
  }
}

/* Icon-only ring */
.pp__ring--icon {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ed-primary, #0a7cc0), #0e5a8a);
  border-radius: 50%;
  font-size: 0.9rem;
  color: #fff;
  box-shadow: 0 2px 10px rgba(10, 124, 192, 0.3);
}

.pp__ring--icon .pp__img {
  display: none;
}

.pp__ring--icon .pp__status {
  display: none;
}

/* ---- Text block ---- */
.pp__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: start;
  min-width: 0;
}

.pp__name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ed-text, #16324a);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp__hi {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ed-text-muted, #7c8fa0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}

[dir="rtl"] .pp__hi {
  letter-spacing: 0;
}

/* ---- Chevron ---- */
.pp__chev {
  width: 10px;
  height: 6px;
  color: var(--ed-text-muted, #7c8fa0);
  transition: transform 0.3s var(--ed-ease), color var(--ed-t-fast);
  margin-inline-start: 2px;
  flex-shrink: 0;
}

.pp:hover>.pp__trigger .pp__chev,
.pp.open>.pp__trigger .pp__chev {
  transform: rotate(180deg);
  color: var(--ed-primary, #0a7cc0);
}

/* ================================================================
   Dropdown panel
   ================================================================ */
.pp__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  width: 280px;
  left: 0;
  max-width: calc(100vw - 24px);
  background: var(--ed-surface, #fff);
  border: 1px solid var(--ed-border, #e3ebf2);
  border-radius: var(--ed-r-lg);
  box-shadow: var(--ed-shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.97);
  transform-origin: top right;
  transition:
    opacity 0.25s var(--ed-ease),
    transform 0.25s var(--ed-ease),
    visibility 0.25s;
  z-index: 1300;
}

[dir="rtl"] .pp__dropdown {
  transform-origin: top left;
  right: 0;
  left: auto;
}

.pp:hover>.pp__dropdown,
.pp:focus-within>.pp__dropdown,
.pp.open>.pp__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Dropdown header */
.pp__dd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px 16px;
  background: linear-gradient(180deg, rgba(10, 124, 192, 0.04) 0%, transparent 100%);
}

.pp__dd-head--guest {
  background: linear-gradient(180deg, rgba(10, 124, 192, 0.06) 0%, transparent 100%);
}

.pp__dd-ring {
  width: 48px;
  height: 48px;
  padding: 2.5px;
  border-radius: 14px;
  background: linear-gradient(135deg, #38bdf8, var(--ed-primary));
  flex-shrink: 0;
}

.pp__dd-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 11.5px;
  object-fit: cover;
  border: 2px solid #fff;
}

.pp__dd-ring--icon {
  width: 48px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ed-primary, #0a7cc0), #0e5a8a);
  border-radius: 14px;
  font-size: 1.1rem;
  color: #fff;
}

.pp__dd-ring--icon .pp__dd-img {
  display: none;
}

.pp__dd-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pp__dd-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ed-text, #16324a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.pp__dd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ed-primary, #0a7cc0);
  background: var(--ed-primary-soft, #e8f5fd);
  padding: 2px 8px;
  border-radius: var(--ed-r-pill);
  margin-top: 4px;
  align-self: flex-start;
}

.pp__dd-badge i {
  font-size: 0.55rem;
}

/* Separator */
.pp__dd-sep {
  height: 1px;
  background: var(--ed-border, #e3ebf2);
  margin: 0;
}

/* Nav links */
.pp__dd-nav {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
}

.pp__dd-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--ed-r-sm);
  color: var(--ed-text-2, #4a627a);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--ed-t-fast), color var(--ed-t-fast), transform var(--ed-t-fast);
}

.pp__dd-link:hover {
  background: var(--ed-primary-soft, #e8f5fd);
  color: var(--ed-primary, #0a7cc0);
  text-decoration: none;
  transform: translateX(3px);
}

[dir="rtl"] .pp__dd-link:hover {
  transform: translateX(-3px);
}

.pp__dd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--ed-r-sm);
  background: var(--ed-surface-2, #eff5f9);
  color: var(--ed-text-muted, #7c8fa0);
  font-size: 0.82rem;
  flex-shrink: 0;
  transition: background var(--ed-t-fast), color var(--ed-t-fast);
}

.pp__dd-link:hover .pp__dd-icon {
  background: var(--ed-primary, #0a7cc0);
  color: #fff;
}

/* Button-style link */
.pp__dd-link--btn {
  border: none;
  background: none;
  width: 100%;
  text-align: start;
  cursor: pointer;
  font-family: var(--ed-font);
}

.pp__dd-link--btn:hover {
  background: var(--ed-primary-soft, #e8f5fd);
  color: var(--ed-primary, #0a7cc0);
}

/* Logout */
.pp__dd-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 8px 8px;
  padding: 10px 14px;
  border-radius: var(--ed-r-sm);
  background: var(--ed-danger-soft, #fdcece);
  color: var(--ed-danger, #c92523);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  border: 1px solid rgba(201, 37, 35, 0.1);
  transition: background var(--ed-t-fast), border-color var(--ed-t-fast), transform var(--ed-t-fast), box-shadow var(--ed-t-fast);
}

.pp__dd-logout:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201, 37, 35, 0.12);
}

.pp__dd-logout i {
  font-size: 0.85rem;
  transition: transform 0.25s ease;
}

.pp__dd-logout:hover i {
  transform: rotate(-12deg);
}

/* ================================================================
   Responsive — tablet / mobile
   ================================================================ */
@media (max-width: 767.98px) {

  .pp__meta,
  .pp__chev {
    display: none;
  }

  .pp__trigger {
    padding: 4px;
    border-radius: 50%;
  }

  .pp__ring {
    width: 36px;
    height: 36px;
  }

  .pp__status {
    width: 9px;
    height: 9px;
    border-width: 1.5px;
  }

  .pp__dropdown {
    width: 260px;
    inset-inline-end: -8px;
  }
}

@media (max-width: 575.98px) {
  .pp__ring {
    width: 34px;
    height: 34px;
  }

  .pp__ring--icon {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }

  .pp__dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    max-height: 85vh;
    overflow-y: auto;
  }

  .pp:hover>.pp__dropdown,
  .pp:focus-within>.pp__dropdown,
  .pp.open>.pp__dropdown {
    transform: translateY(0);
  }

  .pp__dd-head {
    padding: 22px 18px 16px;
  }

  .pp__dd-nav {
    padding: 6px 10px;
  }

  .pp__dd-link {
    padding: 13px 14px;
  }
}

/* Mobile nav toggle */
.ed-nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--ed-surface-2);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-sm);
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ed-text);
  cursor: pointer;
}

.ed-nav-toggle .bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.ed-nav-toggle .bars span {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ed-text);
  transition: transform var(--ed-t), opacity var(--ed-t);
}

.ed-nav-toggle[aria-expanded="true"] .bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.ed-nav-toggle[aria-expanded="true"] .bars span:nth-child(2) {
  opacity: 0;
}

.ed-nav-toggle[aria-expanded="true"] .bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile drawer (works with the legacy bootstrap collapse markup too) */
@media (max-width: 991.98px) {
  .ed-nav-toggle {
    display: inline-flex;
  }

  .ed-navbar .container {
    padding-block: 10px;
  }

  .ed-navbar .navbar-collapse {
    flex-basis: 100%;
    margin-top: 10px;
    border-top: 1px solid var(--ed-border);
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .ed-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .ed-nav .nav-link {
    padding: 12px 14px;
  }

  .ed-nav .nav-item.active .nav-link::after {
    display: none;
  }

  .ed-nav .nav-item.active .nav-link {
    background: var(--ed-primary-soft);
    color: var(--ed-primary-ink);
  }

  .ed-nav-cta {
    flex-direction: column;
    align-items: stretch;
    margin-top: 8px;
  }

  .ed-nav-cta .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   6. Section scaffolding
   -------------------------------------------------------------------------- */
.ed-section {
  padding: 50px 0;
  position: relative;
}

@media (max-width: 767.98px) {
  .ed-section {
    padding: 52px 0;
  }
}

.ed-section--tint {
  background: var(--ed-surface);
}

.ed-section--white {
  background: var(--ed-surface);
}

.ed-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ed-primary-ink);
  background: var(--ed-primary-soft);
  border: 1px solid var(--ed-primary-border);
  padding: 6px 14px;
  border-radius: var(--ed-r-pill);
  margin-bottom: 14px;
}

[dir="rtl"] .ed-eyebrow {
  letter-spacing: 0;
}

.ed-section-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}

.ed-section-head .ed-title {
  font-size: var(--ed-fs-h2);
  margin: 0 0 10px;
}

.ed-section-head .ed-sub {
  color: var(--ed-text-2);
  font-size: var(--ed-fs-lg);
  margin: 0;
}

.ed-section-head--start {
  text-align: start;
  margin-inline: 0;
}

/* --------------------------------------------------------------------------
   7. Hero (homepage)
   -------------------------------------------------------------------------- */
.ed-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(58rem 30rem at 85% -10%, var(--ed-primary-soft) 0%, transparent 60%),
    radial-gradient(40rem 26rem at -10% 15%, var(--ed-accent-soft) 0%, transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, var(--ed-primary-softer) 100%);
  padding: 64px 0 96px;
}

@media (max-width: 767.98px) {
  .ed-hero {
    padding: 44px 0 72px;
  }
}

.ed-hero__grid {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.ed-hero__content {
  flex: 1 1 480px;
  max-width: 620px;
}

.ed-hero__title {
  font-size: var(--ed-fs-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ed-text);
  margin: 14px 0 16px;
}

.ed-hero__title .accent {
  color: var(--ed-accent-strong);
  position: relative;
  white-space: nowrap;
}

.ed-hero__sub {
  font-size: var(--ed-fs-lg);
  color: var(--ed-text-2);
  margin: 0 0 28px;
  max-width: 540px;
}

.ed-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

/* Hero visual */
.ed-hero__visual {
  flex: 1 1 380px;
  max-width: 520px;
  margin-inline: auto;
  position: relative;
  display: flex;
  justify-content: center;
}

.ed-hero__blob {
  position: absolute;
  inset: 6% 4% 10% 4%;
  background: linear-gradient(135deg, var(--ed-primary-soft), var(--ed-teal-soft) 55%, var(--ed-accent-soft));
  border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%;
  animation: ed-blob 14s ease-in-out infinite alternate;
}

@keyframes ed-blob {
  0% {
    border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%;
    transform: rotate(0deg) scale(1);
  }

  50% {
    border-radius: 55% 45% 40% 60% / 55% 60% 40% 45%;
    transform: rotate(3deg) scale(1.02);
  }

  100% {
    border-radius: 45% 55% 62% 38% / 40% 50% 50% 60%;
    transform: rotate(-2deg) scale(1);
  }
}

.ed-hero__visual img {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: auto;
  filter: drop-shadow(0 24px 44px rgba(8, 104, 159, 0.18));
}

/* Floating mini-cards on hero (decorative, brand copy only - no fake data) */
.ed-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-md);
  box-shadow: var(--ed-shadow-md);
  padding: 10px 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ed-text);
  animation: ed-float 5s ease-in-out infinite;
}

.ed-float-card .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 0.95rem;
}

.ed-float-card--check {
  top: 12%;
  inset-inline-start: -4%;
  animation-delay: 0.4s;
}

.ed-float-card--check .ic {
  background: var(--ed-success-soft);
  color: var(--ed-success);
}

.ed-float-card--pin {
  bottom: 10%;
  inset-inline-end: -2%;
}

.ed-float-card--pin .ic {
  background: var(--ed-accent-soft);
  color: var(--ed-accent-strong);
}

@keyframes ed-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

@media (max-width: 767.98px) {
  .ed-float-card {
    display: none;
  }
}

/* Hero search bar */
.ed-searchbar {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  box-shadow: var(--ed-shadow-lg);
  padding: 10px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  max-width: 860px;
}

.ed-searchbar__field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 8px;
}

.ed-searchbar__field>i {
  color: var(--ed-primary);
  font-size: 1rem;
}

.ed-searchbar__field .form-control {
  border: none;
  box-shadow: none;
  min-height: 44px;
  background: transparent;
  padding: 8px 4px;
}

.ed-searchbar__field:focus-within {
  background: var(--ed-primary-softer);
  border-radius: var(--ed-r-sm);
}

.ed-searchbar .form-control:focus {
  box-shadow: none;
}

.ed-searchbar .ed-select-wrap::after {
  inset-inline-end: 10px;
}

.ed-searchbar select.form-control {
  border: none;
  box-shadow: none;
  min-height: 44px;
  cursor: pointer;
}

.ed-searchbar .btn {
  min-height: 46px;
  padding-inline: 26px;
}

@media (max-width: 991.98px) {
  .ed-searchbar {
    grid-template-columns: 1fr 1fr;
  }

  .ed-searchbar__field--name {
    grid-column: 1 / -1;
  }

  .ed-searchbar .btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575.98px) {
  .ed-searchbar {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   8. Feature cards
   -------------------------------------------------------------------------- */
.ed-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

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

@media (max-width: 575.98px) {
  .ed-features {
    grid-template-columns: 1fr;
  }
}

.ed-feature-card {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  padding: 28px 24px;
  box-shadow: var(--ed-shadow-xs);
  transition: transform var(--ed-t), box-shadow var(--ed-t), border-color var(--ed-t);
  cursor: default;
  height: 100%;
}

a.ed-feature-card,
.ed-feature-card[data-url] {
  cursor: pointer;
}

.ed-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ed-shadow-md);
  border-color: var(--ed-primary-border);
}

.ed-feature-card .ed-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--ed-primary-soft);
  color: var(--ed-primary);
  margin-bottom: 16px;
  font-size: 1.3rem;
  transition: transform var(--ed-t);
}

.ed-feature-card:hover .ed-icon-badge {
  transform: scale(1.08) rotate(-4deg);
}

.ed-feature-card .ed-icon-badge svg {
  width: 26px;
  height: 26px;
}

.ed-feature-card h3,
.ed-feature-card h4 {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.ed-feature-card p {
  color: var(--ed-text-2);
  font-size: var(--ed-fs-sm);
  margin: 0;
}

/* Icon badge variants */
.ed-icon-badge--teal {
  background: var(--ed-teal-soft);
  color: #0B8A74;
}

.ed-icon-badge--pink {
  background: var(--ed-accent-soft);
  color: var(--ed-accent-strong);
}

.ed-icon-badge--amber {
  background: var(--ed-warning-soft);
  color: var(--ed-warning);
}

/* --------------------------------------------------------------------------
   9. How it works
   -------------------------------------------------------------------------- */
.ed-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: ed-step;
}

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

@media (max-width: 575.98px) {
  .ed-steps {
    grid-template-columns: 1fr;
  }
}

.ed-step {
  position: relative;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  padding: 26px 22px 22px;
  counter-increment: ed-step;
}

.ed-step h4 i {
  margin: 0px 5px 0px 5px;
}

.ed-step::before {
  content: counter(ed-step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  padding-inline: 8px;
  border-radius: var(--ed-r-pill);
  background: var(--ed-primary);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.ed-step h4 {
  font-size: 1rem;
  margin: 0 0 6px;
}

.ed-step p {
  font-size: var(--ed-fs-sm);
  color: var(--ed-text-2);
  margin: 0;
}

/* --------------------------------------------------------------------------
   10. Doctor cards
   -------------------------------------------------------------------------- */
.ed-doc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  overflow: hidden;
  height: 100%;
  transition: transform var(--ed-t), box-shadow var(--ed-t), border-color var(--ed-t);
}

.ed-doc-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ed-shadow-md);
  border-color: var(--ed-primary-border);
}

.ed-doc-card__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--ed-primary-softer), var(--ed-surface-2));
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.ed-doc-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.45s var(--ed-ease);
}

.ed-doc-card:hover .ed-doc-card__photo img {
  transform: scale(1.045);
}

.ed-doc-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(10, 34, 54, 0.28));
  pointer-events: none;
}

.ed-doc-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  flex: 1;
}

.ed-doc-card__clinic {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ed-text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ed-doc-card__name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ed-text);
  margin: 0;
  line-height: 1.35;
}

a.ed-doc-card__name:hover {
  color: var(--ed-primary-hover);
}

.ed-doc-card__spec {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ed-primary-ink);
  background: var(--ed-primary-soft);
  border-radius: var(--ed-r-pill);
  padding: 4px 12px;
}

.ed-doc-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--ed-fs-sm);
  color: var(--ed-text-2);
}

.ed-doc-card__meta .row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ed-doc-card__meta i {
  color: var(--ed-primary);
  width: 16px;
  text-align: center;
}

.ed-doc-card__meta i.fa-phone-alt {
  color: var(--ed-success);
}

.ed-doc-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ed-border);
}

.ed-doc-card__actions .btn {
  padding-block: 10px;
}

/* Doctors grid */
.ed-doctors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 991.98px) {
  .ed-doctors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 575.98px) {
  .ed-doctors-grid {
    grid-template-columns: 1fr;
  }
}

/* Owl carousel (homepage doctors) - modernized */
#doctorSlideshow .owl-stage {
  display: flex;
}

#doctorSlideshow .owl-item {
  display: flex;
}

#doctorSlideshow .owl-item>div {
  width: 100%;
  display: flex;
}

#doctorSlideshow .ed-doc-card {
  width: 100%;
}

#doctorSlideshow .owl-nav {
  margin-top: 22px;
  text-align: center;
}

#doctorSlideshow .owl-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  background: var(--ed-surface) !important;
  border: 1px solid var(--ed-border-strong) !important;
  color: var(--ed-primary) !important;
  font-size: 1.1rem !important;
  margin: 0 6px !important;
  transition: background var(--ed-t-fast), color var(--ed-t-fast), border-color var(--ed-t-fast);
}

#doctorSlideshow .owl-nav button:hover {
  background: var(--ed-primary) !important;
  color: #fff !important;
  border-color: var(--ed-primary) !important;
}

/* --------------------------------------------------------------------------
   11. Search / filter panel (doctors page)
   -------------------------------------------------------------------------- */
.ed-filter-card {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  box-shadow: var(--ed-shadow-sm);
  padding: 22px;
  margin-bottom: 28px;
}

.ed-filter-card__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 14px;
  align-items: end;
}

@media (max-width: 991.98px) {
  .ed-filter-card__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575.98px) {
  .ed-filter-card__grid {
    grid-template-columns: 1fr;
  }
}

.ed-filter-card__search {
  position: relative;
}

.ed-filter-card__search>i {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ed-text-muted);
  pointer-events: none;
}

.ed-filter-card__search .form-control {
  padding-inline-start: 38px;
}

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

.ed-results-count {
  font-size: var(--ed-fs-sm);
  font-weight: 600;
  color: var(--ed-text-2);
}

.ed-results-count strong {
  color: var(--ed-text);
  font-size: 1rem;
}

.ed-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ed-primary-soft);
  color: var(--ed-primary-ink);
  border-radius: var(--ed-r-pill);
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Empty state */
.ed-empty {
  text-align: center;
  padding: 64px 20px;
  background: var(--ed-surface);
  border: 1.5px dashed var(--ed-border-strong);
  border-radius: var(--ed-r-lg);
  color: var(--ed-text-2);
}

.ed-empty .ed-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ed-primary-softer);
  color: var(--ed-primary);
  font-size: 1.6rem;
  margin-bottom: 16px;
}

.ed-empty h4 {
  margin: 0 0 6px;
}

.ed-empty p {
  margin: 0;
  font-size: var(--ed-fs-sm);
}

.ed-empty--appts {
  border: 1px solid var(--ed-border);
  border-radius: 18px;
  background: var(--ed-surface);
  padding: 48px 20px;
  text-align: center;
  box-shadow: var(--ed-shadow-sm);
}

.ed-empty--appts .ed-empty__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  background: var(--ed-primary-softer);
  color: var(--ed-primary);
  font-size: 1.5rem;
  margin-bottom: 14px;
}

.ed-empty--appts h4 {
  font-weight: 800;
  color: var(--ed-text);
}

.ed-empty--appts p {
  color: var(--ed-text-muted);
  font-weight: 600;
  max-width: 420px;
  margin: 8px auto 0;
}

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */
.ed-testimonials {
  background: var(--ed-surface);
}

.ed-testimonial-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 8px 20px;
}

.ed-testimonial-card .ed-quote-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ed-primary-soft);
  color: var(--ed-primary-ink);
  font-size: 1.5rem;
  margin-bottom: 18px;
}

.ed-testimonial-card blockquote {
  font-size: var(--ed-fs-lg);
  color: var(--ed-text);
  font-weight: 500;
  line-height: 1.8;
  margin: 0 0 18px;
}

.ed-testimonial-card .ed-testimonial-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ed-primary-border);
  box-shadow: var(--ed-shadow-xs);
  background: var(--ed-primary-softer);
}

.ed-testimonial-card .ed-testimonial-role {
  display: block;
  margin-top: 8px;
  font-size: var(--ed-fs-sm);
  font-weight: 600;
  color: var(--ed-text-muted);
}

/* Bootstrap carousel controls (testimonials) restyled */
/* Neutralize legacy broken bg image reference (img/testimonial.bg-top.png does not exist) */
.testimonial::after {
  content: none !important;
}

.testimonial {
  min-height: 0;
  background-color: transparent;
  background-image: none;
}

.testimonial .heading.white-heading {
  color: var(--ed-primary-ink);
}

.testimonial .white-heading span {
  color: var(--ed-text);
}

.testimonial .carousel-control-prev,
.testimonial .carousel-control-next {
  width: 44px;
  height: 44px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ed-surface);
  border: 1px solid var(--ed-border-strong);
  border-radius: 50%;
  opacity: 1;
  filter: none;
  transition: background var(--ed-t-fast), border-color var(--ed-t-fast);
}

.testimonial .carousel-control-prev:hover,
.testimonial .carousel-control-next:hover {
  background: var(--ed-primary);
  border-color: var(--ed-primary);
}

.testimonial .carousel-control-prev span,
.testimonial .carousel-control-next span {
  filter: none;
  background-image: none;
  color: var(--ed-primary);
  font-size: 1.2rem;
}

.testimonial .carousel-control-prev span::before {
  content: "\f060";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.testimonial .carousel-control-next span::before {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.testimonial .carousel-control-prev:hover span,
.testimonial .carousel-control-next:hover span {
  color: #fff;
}

[dir="rtl"] .testimonial .carousel-control-next {
  left: auto;
  right: auto;
}

[dir="rtl"] .testimonial .carousel-control-prev {
  left: auto;
  right: auto;
}

/* --------------------------------------------------------------------------
   13. App promotion
   -------------------------------------------------------------------------- */
.ed-app-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(46rem 26rem at 90% 110%, rgba(15, 191, 159, 0.14) 0%, transparent 60%),
    linear-gradient(135deg, #0D2B45 0%, #0A5C93 58%, #0A7CC0 100%);
  color: #EAF4FB;
  padding: 72px 0;
}

.ed-app-section .ed-app-grid {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.ed-app-section .ed-app-content {
  flex: 1 1 420px;
}

.ed-app-section .ed-app-visual {
  flex: 0 1 320px;
  display: flex;
  justify-content: center;
  position: relative;
}

.ed-app-section h2 {
  color: #fff;
  font-size: var(--ed-fs-h2);
  margin: 0 0 12px;
}

.ed-app-section p {
  color: rgba(234, 244, 251, 0.85);
  font-size: var(--ed-fs-lg);
  margin: 0 0 22px;
  max-width: 520px;
}

.ed-app-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  gap: 10px;
}

.ed-app-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.ed-app-perks i {
  color: #5EEAD4;
}

.ed-app-section img.phone {
  width: 100%;
  max-width: 300px;
  filter: drop-shadow(0 30px 50px rgba(2, 20, 36, 0.45));
}

.ed-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: var(--ed-r-md);
  padding: 10px 20px;
  text-decoration: none !important;
  box-shadow: 0 10px 26px rgba(2, 20, 36, 0.35);
  transition: transform var(--ed-t-fast), box-shadow var(--ed-t-fast);
  max-width: 220px;
}

.ed-store-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(2, 20, 36, 0.45);
}

.ed-store-btn img {
  width: 26px;
  height: auto;
}

.ed-store-btn .t1 {
  display: block;
  font-size: 0.68rem;
  color: var(--ed-text-2);
  line-height: 1.1;
}

.ed-store-btn .t2 {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ed-text);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.ed-footer {
  background: #0C2338;
  color: #AFC3D4;
  padding: 60px 0 0;
  font-size: 0.9rem;
}

.ed-footer h5 {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
}

.ed-footer .ed-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ed-footer .ed-footer-brand img {
  height: 40px;
  width: auto;
  background: #fff;
  border-radius: 8px;
  padding: 4px 8px;
}

.ed-footer .ed-footer-brand .name {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
}

.ed-footer p.lead {
  font-size: 0.875rem;
  line-height: 1.8;
  color: #8FA9BF;
}

.ed-footer .footer-menu,
.ed-footer .ed-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.ed-footer .footer-menu li,
.ed-footer .ed-footer-list li {
  margin: 0;
  padding: 0;
}

.ed-footer .footer-menu a,
.ed-footer .ed-footer-list a,
.ed-footer .footer-link {
  color: #AFC3D4 !important;
  text-decoration: none;
  transition: color var(--ed-t-fast), padding var(--ed-t-fast);
  cursor: pointer;
  font-size: 0.9rem;
}

.ed-footer .footer-menu a:hover,
.ed-footer .ed-footer-list a:hover,
.ed-footer .footer-link:hover {
  color: #fff !important;
}

.ed-footer .ed-footer-contact {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ed-footer .ed-footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ed-footer .ed-footer-contact i {
  color: #5EEAD4;
  width: 18px;
  text-align: center;
}

.ed-footer .ed-footer-contact a {
  color: #AFC3D4;
}

.ed-footer .ed-footer-contact a:hover {
  color: #fff;
}

.ed-footer .footer-sosmed {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.ed-footer .footer-sosmed a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: #CBE2F2 !important;
  transition: background var(--ed-t-fast), transform var(--ed-t-fast), color var(--ed-t-fast);
}

.ed-footer .footer-sosmed a:hover {
  background: var(--ed-primary);
  color: #fff !important;
  transform: translateY(-2px);
}

.ed-footer hr {
  border-color: rgba(255, 255, 255, 0.1);
  margin: 36px 0 0;
}

.ed-footer #copyright,
.ed-footer .ed-footer-bottom {
  padding: 18px 0;
  text-align: center;
  color: #7E97AB;
  font-size: 0.8125rem;
  margin: 0;
}

.ed-footer #copyright a {
  color: #fff;
}

[dir="rtl"] .ed-footer .footer-menu,
[dir="rtl"] .ed-footer .footer-link {
  direction: rtl;
}

/* --------------------------------------------------------------------------
   15. Booking page (appointment)
   -------------------------------------------------------------------------- */
.ed-booking-page {
  padding: 40px 0 72px;
  max-width: 860px;
  margin: 0 auto;
}

/* Doctor head card */
.ed-doc-head,
.doctor-profile.ed-doc-head {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-xl);
  box-shadow: var(--ed-shadow-sm);
  padding: 26px;
  margin-bottom: 26px;
  text-align: start;
}

.ed-doc-head .doctor-img,
.doctor-profile.ed-doc-head .doctor-img {
  width: 116px;
  height: 116px;
  border-radius: 30px;
  object-fit: cover;
  border: 3px solid var(--ed-primary-soft);
  box-shadow: var(--ed-shadow-sm);
  background: var(--ed-primary-softer);
  flex-shrink: 0;
}

.ed-doc-head .ed-doc-head__info {
  flex: 1 1 0%;
  min-width: 0;
}

.ed-doc-head h1 {
  font-size: var(--ed-fs-h2);
  margin: 0 0 4px;
}

.ed-doc-head .spec {
  color: var(--ed-primary-ink);
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 10px;
}

.ed-doc-head .ed-doc-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ed-doc-head .ed-doc-head__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Bio */
.bio-section {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-inline-start: 4px solid var(--ed-primary);
  border-radius: var(--ed-r-md);
  padding: 20px 24px;
  margin: 0 0 26px;
  box-shadow: var(--ed-shadow-xs);
}

.bio-content {
  text-align: center;
  color: var(--ed-text-2);
  line-height: 1.9;
  font-size: 0.98rem;
  text-align: start;
}

/* Booking card + steps */
.ed-booking-card {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-xl);
  box-shadow: var(--ed-shadow-md);
  padding: 28px;
}

@media (max-width: 575.98px) {
  .ed-booking-card {
    padding: 18px;
  }
}

.ed-booking-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.ed-booking-steps .ed-bstep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ed-surface-2);
  border: 1px solid var(--ed-border);
  color: var(--ed-text-2);
  border-radius: var(--ed-r-pill);
  padding: 7px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.ed-booking-steps .ed-bstep .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ed-border-strong);
  color: var(--ed-text);
  font-size: 0.72rem;
  font-weight: 800;
}

.ed-booking-steps .ed-bstep--active {
  background: var(--ed-primary-soft);
  border-color: var(--ed-primary-border);
  color: var(--ed-primary-ink);
}

.ed-booking-steps .ed-bstep--active .n {
  background: var(--ed-primary);
  color: #fff;
}

.ed-step-block {
  margin-bottom: 26px;
}

.ed-step-block .ed-step-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--ed-text);
  font-size: 1.06rem;
  margin-bottom: 14px;
}

.ed-step-block .ed-step-block__head .ed-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--ed-primary-soft);
  color: var(--ed-primary-ink);
  font-size: 0.9rem;
}

/* Date carousel (same DOM contract: .date-card / .active / .disabled / data-date) */
.date-carousel {
  display: grid;
  grid-auto-flow: column;
  gap: 11px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  grid-auto-columns: minmax(104px, 1fr);
}

.date-carousel::-webkit-scrollbar {
  height: 6px;
}

.date-carousel::-webkit-scrollbar-thumb {
  background: var(--ed-border-strong);
  border-radius: 3px;
}

[dir="rtl"] .date-carousel {
  grid-auto-flow: column;
}

.date-card {
  scroll-snap-align: start;
  background: var(--ed-surface);
  border: 1.5px solid var(--ed-border);
  border-radius: var(--ed-r-md);
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ed-t-fast), background var(--ed-t-fast),
    transform var(--ed-t-fast), box-shadow var(--ed-t-fast);
  user-select: none;
}

.date-card:hover:not(.disabled) {
  border-color: var(--ed-primary);
  background: var(--ed-primary-softer);
  transform: translateY(-2px);
  box-shadow: var(--ed-shadow-sm);
}

.date-card .day-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ed-text-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

[dir="rtl"] .date-card .day-name {
  letter-spacing: 0;
}

.date-card .day-number {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ed-primary);
  line-height: 1.1;
}

.date-card .month {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ed-text-muted);
  text-transform: uppercase;
}

.date-card.active {
  border-color: var(--ed-primary);
  background: var(--ed-primary-soft);
  box-shadow: 0 0 0 3px rgba(10, 124, 192, 0.14);
}

.date-card.active .day-number {
  color: var(--ed-primary-hover);
}

.date-card.disabled {
  background: var(--ed-surface-2);
  border-color: var(--ed-border);
  cursor: not-allowed;
  opacity: 0.55;
}

.date-card.disabled .day-number {
  color: var(--ed-text-muted);
}

@media (max-width: 768px) {
  .date-carousel {
    grid-auto-columns: minmax(84px, 1fr);
    gap: 14px;
  }

  .date-card {
    padding: 10px 6px;
  }

  .date-card .day-number {
    font-size: 1.3rem;
  }

  /* Doctor profile header — mobile/tablet */
  .ed-doc-head,
  .doctor-profile.ed-doc-head {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
  }

  .ed-doc-head .doctor-img,
  .doctor-profile.ed-doc-head .doctor-img {
    width: 96px;
    height: 96px;
    border-radius: 24px;
  }

  .ed-doc-head .ed-doc-head__info {
    min-width: 0;
    width: 100%;
  }

  .ed-doc-head h1 {
    font-size: 1.2rem;
    word-break: break-word;
  }

  .ed-doc-head .spec {
    font-size: 0.92rem;
  }

  .ed-doc-head .ed-doc-head__meta {
    justify-content: center;
  }

  .ed-doc-head .ed-doc-head__actions {
    justify-content: center;
    width: 100%;
  }
}

/* Slot grid (server markup contract: .slot-btn / .booked / data-slot) */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
  margin: 6px 0 4px;
}

.slot-btn {
  padding: 12px 6px;
  background: var(--ed-surface);
  border: 1.5px solid var(--ed-border-strong);
  border-radius: var(--ed-r-sm);
  cursor: pointer;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ed-text);
  transition: border-color var(--ed-t-fast), background var(--ed-t-fast),
    transform var(--ed-t-fast), box-shadow var(--ed-t-fast), color var(--ed-t-fast);
  user-select: none;
}

.slot-btn:not(.booked):hover {
  border-color: var(--ed-primary);
  background: var(--ed-primary-softer);
  color: var(--ed-primary-ink);
  transform: translateY(-2px);
  box-shadow: var(--ed-shadow-sm);
}

.slot-btn.selected {
  background: var(--ed-primary);
  border-color: var(--ed-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(10, 124, 192, 0.35);
  transform: translateY(-2px);
}

.slot-btn.booked {
  background: var(--ed-surface-2);
  color: var(--ed-text-muted);
  border-color: var(--ed-border);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  opacity: 0.6;
  filter: none;
}

.slot-btn.time-slot {
  font-variant-numeric: tabular-nums;
}

/* Reason select */
.reason-container {
  margin: 0;
}

.reason-label {
  font-weight: 700;
  color: var(--ed-text);
  font-size: 1.06rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.reason-label i {
  color: var(--ed-primary-ink);
}

.custom-select select {
  min-height: 50px;
  padding: 12px 16px;
  font-size: 1rem;
}

.custom-select:focus-within::after {
  color: var(--ed-primary);
}

/* Booking confirm button */
.booking-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 26px 0 6px;
  padding: 16px 28px;
  background: linear-gradient(135deg, var(--ed-primary) 0%, #0A96C9 100%);
  color: #fff;
  border: none;
  border-radius: var(--ed-r-pill);
  font-family: var(--ed-font);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(10, 124, 192, 0.35);
  transition: transform var(--ed-t-fast), box-shadow var(--ed-t-fast), filter var(--ed-t-fast);
}

.booking-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(10, 124, 192, 0.42);
  filter: brightness(1.04);
}

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

/* Time/status message */
#timeMessage {
  margin: 18px auto;
  max-width: 520px;
  border-radius: var(--ed-r-md);
  padding: 14px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--ed-warning-soft);
  border: 1px solid var(--ed-warning-border);
  color: var(--ed-warning);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--ed-shadow-xs);
}

#timeMessage::before {
  content: "\f06a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.1em;
}

/* ================================================================
   AUTH MODAL — Glassmorphism + Head Design
   ================================================================ */

.auth-modal {
  display: none;
  position: fixed;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: center;
  align-items: center;
  background: rgba(6, 14, 30, 0.55);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  z-index: 9999;
  padding: 20px 16px;
}

/* Card */
.auth-modal .modal-content {
  position: relative;
  background: #fff;
  width: 100%;
  top: 0%;
  bottom: 13%;
  max-width: 410px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  border-radius: 24px;
  padding: 0;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.02),
    0 12px 40px rgba(0, 0, 0, 0.12);
  margin: auto;
  animation: authCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

@keyframes authCardIn {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.95);
  }

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

/* Close */
.auth-modal .close-modal {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--ed-text-muted, #9ca3af);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.25s ease;
  line-height: 1;
  z-index: 3;
  border: none;
}

.auth-modal .close-modal:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--ed-text, #111827);
  transform: rotate(90deg);
}

/* ---- Header ---- */
.auth-head {
  text-align: center;
  padding: 36px 28px 0;
}

.auth-head__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--ed-primary, #0a7cc0), #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(10, 124, 192, 0.25);
  position: relative;
}

.auth-head__icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ed-primary, #0a7cc0), #6366f1);
  opacity: 0.15;
  z-index: -1;
  animation: authPulseRing 2.5s ease-in-out infinite;
}

@keyframes authPulseRing {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.15;
  }

  50% {
    transform: scale(1.12);
    opacity: 0.06;
  }
}

.auth-head__title {
  font-family: var(--ed-font, 'Cairo', sans-serif);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ed-text, #111827);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.auth-head__sub {
  font-family: var(--ed-font, 'Cairo', sans-serif);
  font-size: 0.85rem;
  color: var(--ed-text-muted, #9ca3af);
  margin: 0;
}

/* ---- Tabs ---- */
.auth-modal .tabs {
  display: flex;
  gap: 4px;
  margin: 24px 28px 0;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 14px;
}

.auth-modal .tab-btn {
  flex: 1;
  padding: 10px 8px;
  border: none;
  background: transparent;
  border-radius: 11px;
  cursor: pointer;
  font-family: var(--ed-font, 'Cairo', sans-serif);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ed-text-muted, #9ca3af);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.auth-modal .tab-btn.active {
  background: #fff;
  color: var(--ed-primary, #0a7cc0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* ---- Form body ---- */
.auth-modal .tab-pane {
  display: none;
  padding: 20px 28px 28px;
}

.auth-modal .tab-pane.active {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---- Inputs ---- */
.auth-modal .auth-input {
  width: 100%;
  min-height: 48px;
  padding: 14px 16px;
  font-family: var(--ed-font, 'Cairo', sans-serif);
  font-size: 0.9rem;
  color: var(--ed-text, #111827);
  background: #f7f8fa;
  border: 1.5px solid transparent;
  border-radius: 12px;
  outline: none;
  transition: all 0.25s ease;
  margin-bottom: 12px;
}

.auth-modal .auth-input::placeholder {
  color: #9ca3af;
  font-weight: 500;
}

.auth-modal .auth-input:focus {
  background: #fff;
  border-color: var(--ed-primary, #0a7cc0);
  box-shadow: 0 0 0 3px rgba(10, 124, 192, 0.1);
}

.auth-modal .auth-input:hover:not(:focus) {
  border-color: #e5e7eb;
}

/* ---- Submit button ---- */
.auth-modal .auth-btn {
  width: 100%;
  min-height: 50px;
  background: linear-gradient(135deg, var(--ed-primary, #0a7cc0), #6366f1);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-family: var(--ed-font, 'Cairo', sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 4px 16px rgba(10, 124, 192, 0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.01em;
}

.auth-modal .auth-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}

.auth-modal .auth-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(10, 124, 192, 0.35);
}

.auth-modal .auth-btn:hover::after {
  opacity: 1;
}

.auth-modal .auth-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(10, 124, 192, 0.25);
}

/* ---- Error ---- */
.auth-modal .error-message {
  color: #dc2626;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  display: none;
  animation: authShake 0.4s ease;
}

/* ---- Auth field wrapper ---- */
.auth-field {
  position: relative;
  margin-bottom: 4px;
}

.auth-field__err {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #dc2626;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 2px;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}

.auth-field--error .auth-field__err {
  min-height: 16px;
  max-height: 40px;
  opacity: 1;
  margin-bottom: 8px;
}

.auth-field--error .auth-input {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.auth-field--error .auth-input:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* ---- Alert banner ---- */
.auth-alert {
  display: none;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0 0 12px;
  padding: 11px 14px;
  border-radius: 10px;
  line-height: 1.4;
}

.auth-alert i {
  margin-inline-end: 6px;
}

.auth-alert--error {
  display: block;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  animation: authShake 0.4s ease;
}

.auth-alert--success {
  display: block;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

/* ---- Loading spinner on button ---- */
.auth-btn {
  position: relative;
  overflow: hidden;
}

.auth-btn__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authSpin 0.6s linear infinite;
  margin: 0 auto;
}

.auth-btn.is-loading .auth-btn__text {
  visibility: hidden;
}

.auth-btn.is-loading .auth-btn__spinner {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -9px;
  margin-left: -9px;
}

.auth-btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

@keyframes authSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Shake animation on card ---- */
.modal-content.is-shaking {
  animation: authCardShake 0.45s ease;
}

@keyframes authCardShake {

  0%,
  100% {
    transform: translateX(0);
  }

  15% {
    transform: translateX(-6px);
  }

  30% {
    transform: translateX(5px);
  }

  45% {
    transform: translateX(-4px);
  }

  60% {
    transform: translateX(3px);
  }

  75% {
    transform: translateX(-1px);
  }
}

@keyframes authShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-5px);
  }

  40% {
    transform: translateX(5px);
  }

  60% {
    transform: translateX(-3px);
  }

  80% {
    transform: translateX(3px);
  }
}

/* ---- Misc ---- */
.auth-modal .ed-auth-note {
  font-size: 0.78rem;
  color: var(--ed-text-muted, #9ca3af);
  text-align: center;
  margin: 8px 0 0;
}

/* ================================================================
   MOBILE + TABLET — centered
   ================================================================ */
@media (max-width: 768px) {
  .auth-modal {
    padding: 16px 12px;
  }

  .auth-modal .modal-content {
    max-width: 100%;
    border-radius: 20px;
    bottom: 13%;
    top: unset;
    animation: authCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .auth-head {
    padding: 28px 20px 0;
  }

  .auth-head__icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .auth-modal .tabs {
    margin: 20px 20px 0;
  }

  .auth-modal .tab-pane {
    padding: 18px 20px 24px;
  }
}

@media (max-width: 480px) {
  .auth-modal .modal-content {
    border-radius: 18px;
    top: 0%;
  }
}

/* Booking summary (success) modal - same IDs contract */
.booking-summary-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12, 35, 56, 0.55);
  backdrop-filter: blur(4px);
  z-index: 9999;
  overflow-y: auto;
  animation: modalFade 0.25s var(--ed-ease);
}

.booking-summary-modal .modal-content {
  position: relative;
  background: var(--ed-surface);
  width: calc(100% - 32px);
  max-width: 460px;
  border-radius: var(--ed-r-xl);
  box-shadow: var(--ed-shadow-lg);
  margin: 6vh auto 48px;
  padding: 0;
  top: auto;
  overflow: hidden;
}

.booking-summary-modal .modal-header {
  display: block;
  padding: 30px 26px 8px;
  text-align: center;
}

.booking-summary-modal .modal-header h3 {
  color: var(--ed-text);
  font-size: 1.3rem;
  margin: 0;
}

.booking-summary-modal .ed-success-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--ed-success-soft);
  color: var(--ed-success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  animation: ed-pop 0.45s var(--ed-ease) 0.1s both;
}

@keyframes ed-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }

  70% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.booking-summary-modal .modal-body {
  padding: 18px 26px;
}

.booking-summary-modal .summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 13px 16px;
  background: var(--ed-surface-2);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-sm);
}

.booking-summary-modal .summary-item .label {
  font-weight: 700;
  color: var(--ed-text-2);
  font-size: 0.875rem;
  margin: 0;
}

.booking-summary-modal .summary-item .value {
  color: var(--ed-text);
  font-weight: 700;
  font-size: 0.95rem;
  text-align: end;
}

.booking-summary-modal .ed-summary-next {
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: var(--ed-r-sm);
  background: var(--ed-primary-softer);
  border: 1px dashed var(--ed-primary-border);
  color: var(--ed-text-2);
  font-size: 0.85rem;
  line-height: 1.7;
}

.booking-summary-modal .ed-summary-next strong {
  color: var(--ed-primary-ink);
  display: block;
  margin-bottom: 2px;
}

.booking-summary-modal .modal-footer {
  display: flex;
  gap: 10px;
  padding: 8px 26px 28px;
}

.booking-summary-modal .modal-footer .btn {
  flex: 1;
}

.booking-summary-modal .confirm-btn {
  flex: 1;
  background: var(--ed-primary);
  color: #fff;
  border: none;
  padding: 13px 20px;
  border-radius: var(--ed-r-pill);
  cursor: pointer;
  font-family: var(--ed-font);
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(10, 124, 192, 0.28);
  transition: background var(--ed-t-fast), transform var(--ed-t-fast);
}

.booking-summary-modal .confirm-btn:hover {
  background: var(--ed-primary-hover);
  transform: translateY(-1px);
}

@media (max-width: 575.98px) {

  .booking-summary-modal .modal-body,
  .booking-summary-modal .modal-header,
  .booking-summary-modal .modal-footer {
    padding-inline: 18px;
  }

  .booking-summary-modal .modal-footer {
    flex-direction: column-reverse;
  }
}

/* Existing appointment alert */
.existing-appointment-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  padding: 30px 28px;
  border-radius: var(--ed-r-xl);
  box-shadow: var(--ed-shadow-lg);
  z-index: 99999;
  width: calc(100% - 32px);
  max-width: 400px;
  text-align: center;
  animation: ed-modal-in 0.28s var(--ed-ease);
}

.existing-appointment-alert h4 {
  color: var(--ed-warning);
  margin-bottom: 14px;
  font-size: 1.15rem;
}

.existing-appointment-alert .details p {
  margin: 6px 0;
  color: var(--ed-text-2);
  font-size: 0.95rem;
}

.existing-appointment-alert .details strong {
  color: var(--ed-text);
}

.existing-appointment-alert button {
  background: var(--ed-primary);
  color: #fff;
  border: none;
  padding: 11px 30px;
  border-radius: var(--ed-r-pill);
  cursor: pointer;
  margin-top: 16px;
  font-family: var(--ed-font);
  font-weight: 700;
  transition: background var(--ed-t-fast);
}

.existing-appointment-alert button:hover {
  background: var(--ed-primary-hover);
}

/* Custom alert (same contract) */
.custom-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--ed-surface);
  padding: 30px 28px;
  border-radius: var(--ed-r-xl);
  box-shadow: var(--ed-shadow-lg);
  border: 1px solid var(--ed-border);
  text-align: center;
  max-width: 400px;
  width: calc(100% - 32px);
  z-index: 10000;
  display: none;
  font-weight: 600;
  color: var(--ed-text);
}

.custom-alert .alert-title {
  font-size: 1.05rem;
  margin-bottom: 18px;
}

.alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 35, 56, 0.5);
  z-index: 9999;
  display: none;
}

/* Loading overlay (same contract) */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(245, 248, 251, 0.88);
  backdrop-filter: blur(3px);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}

.loader {
  text-align: center;
}

.loader .circle {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--ed-primary);
  border-radius: 50%;
  margin: 0 5px;
  animation: bounce 1.4s infinite ease-in-out;
}

.loader .circle:nth-child(2) {
  animation-delay: -0.16s;
  background: var(--ed-teal);
}

.loader .circle:nth-child(3) {
  animation-delay: -0.32s;
  background: var(--ed-accent-strong);
}

.loader p {
  color: var(--ed-primary-ink);
  margin-top: 18px;
  font-weight: 700;
  font-size: 1rem;
}

/* Sticky mobile booking bar on appointment page */
.ed-mobile-book {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--ed-border);
  box-shadow: 0 -6px 24px rgba(22, 50, 74, 0.1);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: none;
}

.ed-mobile-book .booking-btn {
  margin: 0;
  min-height: 50px;
}

@media (max-width: 767.98px) {
  .ed-booking-page {
    padding-bottom: 96px;
  }

  .ed-mobile-book {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   16. Page banner (about/contact) - restyled legacy .page-banner
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  background: linear-gradient(120deg, #0D2B45 0%, #0A5C93 60%, #0A7CC0 100%) !important;
  background-size: cover !important;
}

.page-banner.overlay-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40rem 20rem at 80% -20%, rgba(15, 191, 159, 0.25) 0%, transparent 60%),
    radial-gradient(30rem 18rem at 10% 120%, rgba(240, 61, 126, 0.18) 0%, transparent 55%);
  pointer-events: none;
}

.page-banner .banner-section {
  position: relative;
  padding: 84px 0;
}

.page-banner h1 {
  color: #fff;
  font-size: var(--ed-fs-h1);
  margin: 0;
}

.page-banner .breadcrumb {
  margin: 0;
}

.page-banner .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.75);
}

.page-banner .breadcrumb-item a:hover {
  color: #fff;
}

.page-banner .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.92);
}

.page-banner .breadcrumb-item+.breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 767.98px) {
  .page-banner .banner-section {
    padding: 56px 0;
  }
}

/* Legacy card-page refresh (contact/terms etc.) */
.card-page {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  box-shadow: var(--ed-shadow-sm);
  padding: 28px;
}

.card-page h4 {
  font-size: 1.15rem;
}

.card-page h4 i {
  margin-right: 7px;
}

[dir="rtl"] .card-page h4 i {
  margin-left: 7px;
  margin-right: 0;
}

.fs-vlarge {
  font-size: 1rem !important;
}

.card-page .fg-primary {
  color: var(--ed-primary) !important;
}

/* --------------------------------------------------------------------------
   17. FAB (floating booking shortcut)
   -------------------------------------------------------------------------- */
.appointment-btn {
  position: fixed;
  bottom: 22px;
  right: 15px;

  inset-inline-end: 22px;
  background: var(--ed-primary);
  color: #fff !important;
  font-size: 1.25rem;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(10, 124, 192, 0.45);
  transition: background var(--ed-t-fast), transform var(--ed-t-fast), box-shadow var(--ed-t-fast);
  text-decoration: none;
  z-index: 1500;
  animation: ed-fab-pulse 2.6s infinite;
}

.appointment-btn:hover {
  background: var(--ed-primary-hover);
  transform: scale(1.07);
}

@keyframes ed-fab-pulse {

  0%,
  100% {
    box-shadow: 0 10px 26px rgba(10, 124, 192, 0.45), 0 0 0 0 rgba(10, 124, 192, 0.35);
  }

  50% {
    box-shadow: 0 10px 26px rgba(10, 124, 192, 0.45), 0 0 0 12px rgba(10, 124, 192, 0);
  }
}

[dir="rtl"] .appointment-btn {
  left: 15px;
  right: unset;
}

@media (min-width: 768px) {
  .appointment-btn {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   18. Misc components
   -------------------------------------------------------------------------- */
/* Definition / about block */
.ed-split {
  display: flex;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
}

.ed-split>* {
  flex: 1 1 400px;
}

.ed-split .ed-split__media {
  position: relative;
  display: flex;
  justify-content: center;
}

.ed-split .ed-split__media img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ed-r-lg);
}

/* Skeleton loaders */
.ed-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--ed-surface-2);
  border-radius: var(--ed-r-sm);
}

.ed-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: ed-shimmer 1.4s infinite;
  transform: translateX(-100%);
}

[dir="rtl"] .ed-skeleton::after {
  animation-name: ed-shimmer-rtl;
}

@keyframes ed-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes ed-shimmer-rtl {
  100% {
    transform: translateX(-100%);
  }
}

/* Cookies/console-safe image fallbacks */
img {
  max-width: 100%;
}

/* Legacy hero cleanup on pages that still use .hero-home */
.hero-home {
  padding-top: 40px !important;
}

/* Google map embed rounded */
.maps-container,
#google-maps iframe {
  border-radius: var(--ed-r-lg);
  border: 1px solid var(--ed-border);
  width: 100%;
}

/* --------------------------------------------------------------------------
   19. RTL refinements
   -------------------------------------------------------------------------- */
[dir="rtl"] body {
  text-align: right;
}

[dir="rtl"] .ed-hero__title,
[dir="rtl"] .ed-app-section h2 {
  letter-spacing: 0;
}

[dir="rtl"] .ed-doc-card__meta .row-meta {
  direction: rtl;
}

[dir="rtl"] .bio-section {
  border-inline-start: 0;
  border-inline-end: 4px solid var(--ed-primary);
}

[dir="rtl"] #timeMessage {
  text-align: right;
}

[dir="rtl"] .form-control,
[dir="rtl"] select {
  text-align: right;
}

[dir="rtl"] .auth-input {
  text-align: right;
}

[dir="rtl"] .search-input-group input {
  text-align: right;
}

/* Arabic font weight tuning - Cairo reads better slightly larger */
html[lang="ar"] body {
  font-size: 0.975rem;
}

html[lang="ar"] .ed-nav .nav-link,
html[lang="ar"] .btn {
  font-weight: 700;
}

html[lang="ar"] .ed-doc-card__name {
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   20. Reduced motion
   -------------------------------------------------------------------------- */
@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;
  }

  .ed-hero__blob,
  .ed-float-card,
  .appointment-btn {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */
@media print {

  .ed-topbar,
  .ed-navbar,
  .ed-footer,
  .appointment-btn,
  .ed-mobile-book {
    display: none !important;
  }

  body {
    background: #fff;
  }
}

/* ==========================================================================
   V2 DEEP REDESIGN LAYER - new IA, patient area, discovery experiences
   ========================================================================== */

/* --------------------------------------------------------------------------
   V2.1 Hero (homepage, search-first)
   -------------------------------------------------------------------------- */
.ed-hero2 {
  position: relative;
  overflow: hidden;
  padding: 35px 0 118px;
  background:
    radial-gradient(52rem 26rem at 88% -12%, var(--ed-primary-soft) 0%, transparent 62%),
    radial-gradient(36rem 22rem at -8% 20%, var(--ed-accent-soft) 0%, transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, var(--ed-primary-softer) 100%);
}

@media (max-width: 767.98px) {
  .ed-hero2 {
    padding: 44px 0 96px;
  }
}

.ed-hero2__grid {
  display: flex;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
}

.ed-hero2__content {
  flex: 1 1 500px;
  max-width: 640px;
}

.ed-hero2__title {
  font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ed-text);
  margin: 16px 0 14px;
}

.ed-hero2__title .accent {
  color: var(--ed-accent-strong);
}

.ed-hero2__sub {
  font-size: var(--ed-fs-lg);
  color: var(--ed-text-2);
  margin: 30px 0 24px;
  max-width: 540px;
}

/* trust row (real counts only) */
.ed-trust-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.ed-trust-row .ed-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--ed-fs-sm);
  font-weight: 600;
  color: var(--ed-text-2);
}

.ed-trust-row .ed-trust strong {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ed-primary-ink);
}

.ed-trust-row .ed-trust-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ed-border-strong);
}

/* Product UI preview (abstract booking widget mock - brand UI, no fake data) */
.ed-hero2__visual {
  flex: 1 1 360px;
  max-width: 480px;
  margin-inline: auto;
  position: relative;
}

.ed-ui-preview {
  position: relative;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-xl);
  box-shadow: var(--ed-shadow-lg);
  padding: 22px;
  transform: rotate(1.5deg);
  z-index: 2;
}

.ed-ui-preview__bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.ed-ui-preview__bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ed-surface-2);
  border: 1px solid var(--ed-border);
}

.ed-ui-preview__bar span:first-child {
  background: var(--ed-primary);
  border-color: var(--ed-primary);
}

.ed-ui-preview__title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ed-text-2);
  margin-bottom: 10px;
}

.ed-ui-preview__dates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.ed-ui-preview__dates span {
  border: 1.5px solid var(--ed-border);
  border-radius: var(--ed-r-sm);
  text-align: center;
  padding: 7px 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ed-text-muted);
  line-height: 1.3;
}

.ed-ui-preview__dates span.on {
  border-color: var(--ed-primary);
  background: var(--ed-primary-soft);
  color: var(--ed-primary-ink);
}

.ed-ui-preview__dates span.off {
  opacity: 0.4;
  text-decoration: line-through;
}

.ed-ui-preview__slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.ed-ui-preview__slots span {
  border-radius: var(--ed-r-sm);
  background: var(--ed-surface-2);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ed-text-2);
  text-align: center;
  padding: 8px 0;
}

.ed-ui-preview__slots span.sel {
  background: var(--ed-primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(10, 124, 192, 0.35);
}

.ed-ui-preview__slots span.bk {
  opacity: 0.35;
  text-decoration: line-through;
}

.ed-ui-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-md);
  box-shadow: var(--ed-shadow-md);
  padding: 10px 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ed-text);
  z-index: 3;
  animation: ed-float 5s ease-in-out infinite;
}

.ed-ui-float .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.ed-ui-float--ok {
  bottom: -8%;
  inset-inline-start: -10%;
}

.ed-ui-float--ok .ic {
  background: var(--ed-success-soft);
  color: var(--ed-success);
}

.ed-ui-float--pin {
  top: -9%;
  inset-inline-end: -6%;
  animation-delay: 1.2s;
}

.ed-ui-float--pin .ic {
  background: var(--ed-accent-soft);
  color: var(--ed-accent-strong);
}

@media (max-width: 767.98px) {
  .ed-ui-float {
    display: none;
  }

  .ed-ui-preview {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   V2.2 Quick actions rail
   -------------------------------------------------------------------------- */
.ed-quick-rail {
  position: relative;
  z-index: 5;
  margin-top: -74px;
}

.ed-quick-rail__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-xl);
  box-shadow: var(--ed-shadow-lg);
  padding: 16px;
}

@media (max-width: 991.98px) {
  .ed-quick-rail__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .ed-quick-rail__inner {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
  }

  .ed-quick-rail {
    margin-top: -60px;
  }
}

.ed-qa {
  background: unset;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--ed-r-md);
  border: 1px solid transparent;
  color: var(--ed-text);
  font-weight: 700;
  font-size: 0.9rem;
  transition: background var(--ed-t-fast), border-color var(--ed-t-fast), transform var(--ed-t-fast);
}

.ed-qa:hover {
  background: var(--ed-primary-softer);
  border-color: var(--ed-primary-border);
  color: var(--ed-primary-ink);
  transform: translateY(-2px);
  text-decoration: none;
}

.ed-qa .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 1.05rem;
  background: var(--ed-primary-soft);
  color: var(--ed-primary);
  flex-shrink: 0;
}

.ed-qa--pink .ic {
  background: var(--ed-accent-soft);
  color: var(--ed-accent-strong);
}

.ed-qa--teal .ic {
  background: var(--ed-teal-soft);
  color: #0B8A74;
}

.ed-qa--amber .ic {
  background: var(--ed-warning-soft);
  color: var(--ed-warning);
}

/* --------------------------------------------------------------------------
   V2.3 Specialty tiles
   -------------------------------------------------------------------------- */
.ed-spec-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

@media (max-width: 991.98px) {
  .ed-spec-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 575.98px) {
  .ed-spec-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.ed-spec-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-md);
  padding: 18px 8px 14px;
  color: var(--ed-text);
  transition: transform var(--ed-t-fast), border-color var(--ed-t-fast), box-shadow var(--ed-t-fast);
}

.ed-spec-tile:hover {
  transform: translateY(-3px);
  border-color: var(--ed-primary);
  box-shadow: var(--ed-shadow-sm);
  text-decoration: none;
}

.ed-spec-tile .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ed-primary-softer);
  color: var(--ed-primary);
  font-size: 1.1rem;
}

.ed-spec-tile:hover .ic {
  background: var(--ed-primary);
  color: #fff;
}

.ed-spec-tile .nm {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.ed-spec-tile .ct {
  font-size: 0.68rem;
  color: var(--ed-text-muted);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   V2.4 Doctor card v2 + works-today + list view
   -------------------------------------------------------------------------- */
.ed-doc2 {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  overflow: hidden;
  height: 100%;
  transition: transform var(--ed-t), box-shadow var(--ed-t), border-color var(--ed-t);
}

.ed-doc2:hover {
  transform: translateY(-4px);
  box-shadow: var(--ed-shadow-md);
  border-color: var(--ed-primary-border);
}

.ed-doc2__top {
  position: relative;
  aspect-ratio: 16/9.4;
  background: linear-gradient(135deg, var(--ed-primary-softer), var(--ed-surface-2));
  overflow: hidden;
}

.ed-doc2__top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s var(--ed-ease);
}

.ed-doc2:hover .ed-doc2__top img {
  transform: scale(1.05);
}

.ed-doc2__top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 34, 54, .32));
}

.ed-badge-today {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 128, 92, 0.94);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--ed-r-pill);
  box-shadow: 0 2px 8px rgba(18, 128, 92, 0.4);
}

.ed-badge-today::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7CE8C4;
}

.ed-badge-today--off {
  background: rgba(71, 85, 105, 0.94);
  box-shadow: 0 2px 8px rgba(71, 85, 105, 0.4);
}

.ed-badge-today--off::before {
  background: #CBD5E1;
}

.ed-doc2__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  flex: 1;
}

.ed-doc2__name {
  direction: rtl;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ed-text);
  margin: 0;
  line-height: 1.35;
}

a.ed-doc2__name:hover {
  color: var(--ed-primary-hover);
}

.ed-doc2__spec {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ed-primary-ink);
  background: var(--ed-primary-soft);
  border-radius: var(--ed-r-pill);
  padding: 3px 11px;
}

.ed-doc2__meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--ed-fs-sm);
  color: var(--ed-text-2);
}

.ed-doc2__meta .row-meta {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ed-doc2__meta i {
  color: var(--ed-primary);
  width: 15px;
  text-align: center;
  font-size: 0.85rem;
}

.ed-doc2__meta i.fa-phone-alt {
  color: var(--ed-success);
}

.ed-doc2__foot {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--ed-border);
}

.ed-doc2__foot .btn {
  flex: 1;
  padding-block: 10px;
}

.ed-doc2__foot .btn--main {
  flex: 1.6;
}

/* List view */
.ed-doctors-grid.is-list {
  grid-template-columns: 1fr;
}

.ed-doctors-grid.is-list .doctor-card {
  margin: 0;
}

.ed-doctors-grid.is-list .ed-doc2 {
  flex-direction: row;
  align-items: stretch;
}

.ed-doctors-grid.is-list .ed-doc2__top {
  width: 190px;
  min-width: 190px;
  aspect-ratio: auto;
}

.ed-doctors-grid.is-list .ed-doc2__body {
  padding: 14px 18px;
}

.ed-doctors-grid.is-list .ed-doc2__foot {
  border-top: 1px solid var(--ed-border);
  padding-top: 12px;
}

@media (max-width: 640px) {
  .ed-doctors-grid.is-list .ed-doc2 {
    flex-direction: column;
  }

  .ed-doctors-grid.is-list .ed-doc2__top {
    width: 100%;
    min-width: 0;
    aspect-ratio: 16/9.4;
  }
}

/* --------------------------------------------------------------------------
   V2.5 Doctors toolbar (count / sort / chips / view modes / filter btn)
   -------------------------------------------------------------------------- */
.ed-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ed-toolbar__count {
  font-weight: 700;
  color: var(--ed-text);
  font-size: 0.95rem;
}

.ed-toolbar__count strong {
  color: var(--ed-primary-ink);
  font-size: 1.15rem;
}

.ed-toolbar__spacer {
  flex: 1;
}

.ed-toolbar select.ed-toolbar__sort {
  min-height: 40px;
  padding: 7px 34px 7px 12px;
  font-size: var(--ed-fs-sm);
  font-weight: 600;
  border-radius: var(--ed-r-pill);
  background-color: var(--ed-surface);
}

.ed-viewtoggle {
  display: inline-flex;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border-strong);
  border-radius: var(--ed-r-pill);
  padding: 3px;
  gap: 2px;
}

.ed-viewtoggle button {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 36px;
  height: 34px;
  border-radius: var(--ed-r-pill);
  color: var(--ed-text-muted);
  font-size: 0.9rem;
  transition: background var(--ed-t-fast), color var(--ed-t-fast);
}

.ed-viewtoggle button.on {
  background: var(--ed-primary);
  color: #fff;
}

.ed-filterbtn {
  display: none;
}

.ed-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ed-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ed-primary-soft);
  color: var(--ed-primary-ink);
  border: 1px solid var(--ed-primary-border);
  border-radius: var(--ed-r-pill);
  padding: 4px 8px 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
}

[dir="rtl"] .ed-chip {
  padding: 4px 12px 4px 8px;
}

.ed-chip button {
  border: none;
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(10, 124, 192, 0.16);
  color: var(--ed-primary-ink);
  font-size: 0.65rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ed-chip button:hover {
  background: var(--ed-danger-soft);
  color: var(--ed-danger);
}

/* Mobile filter drawer (bottom sheet) */
.ed-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 35, 56, 0.5);
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ed-t), visibility var(--ed-t);
}

.ed-drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.ed-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1501;
  background: var(--ed-surface);
  border-radius: var(--ed-r-xl) var(--ed-r-xl) 0 0;
  box-shadow: var(--ed-shadow-lg);
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  max-height: 82vh;
  overflow-y: auto;
  transform: translateY(105%);
  transition: transform var(--ed-t);
}

.ed-drawer.open {
  transform: translateY(0);
}

.ed-drawer__handle {
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: var(--ed-border-strong);
  margin: 4px auto 14px;
}

.ed-drawer__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ed-drawer__title h4 {
  margin: 0;
  font-size: 1rem;
}

.ed-drawer__title h4 i {
  margin-right: 7px;
}

[dir="rtl"] .ed-drawer__title h4 i {
  margin-right: 0;
  margin-left: 7px;
}

.ed-drawer__city {
  margin-left: auto;
  margin-right: 8px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ed-primary);
  background: rgba(10, 124, 192, 0.08);
  border-radius: var(--ed-r-pill);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  line-height: 1.6;
}

[dir="rtl"] .ed-drawer__city {
  margin-left: 8px;
  margin-right: auto;
}

.ed-drawer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ed-drawer__grid .search-col {
  grid-column: 1 / -1;
}

.ed-drawer .btn-apply {
  width: 100%;
  margin-top: 16px;
}

@media (max-width: 991.98px) {
  .ed-filterbar-desktop {
    display: none !important;
  }

  .ed-filterbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    background: var(--ed-surface);
    border: 1.5px solid var(--ed-border-strong);
    border-radius: var(--ed-r-pill);
    font-weight: 700;
    font-size: var(--ed-fs-sm);
    color: var(--ed-text);
    cursor: pointer;
  }

  .ed-filterbtn .n {
    background: var(--ed-primary);
    color: #fff;
    border-radius: var(--ed-r-pill);
    min-width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    padding: 0 5px;
  }

  .ed-filterbtn .n.show {
    display: inline-flex;
  }

  /* ---- Toolbar mobile ---- */
  .ed-toolbar {
    flex-wrap: wrap;
    gap: 10px;
    background: var(--ed-surface, #fff);
    border: 1px solid var(--ed-border, #e5e7eb);
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 14px;
  }

  .ed-toolbar__count {
    width: 100%;
    font-size: 0.85rem;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ed-border, #e5e7eb);
  }

  .ed-toolbar__spacer {
    display: none;
  }

  .ed-toolbar__count+.ed-filterbtn,
  .ed-toolbar__count~.ed-filterbtn {
    margin-inline-start: 0;
  }

  .ed-toolbar>.ed-filterbtn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  .ed-select-wrap {
    flex: 1;
    min-width: 0;
  }

  .ed-select-wrap select {
    width: 100%;
    min-height: 42px;
  }

  .ed-viewtoggle {
    width: 100%;
    justify-content: center;
    background: var(--ed-surface-2, #f3f4f6);
    border: none;
    border-radius: 12px;
    padding: 4px;
  }

  .ed-viewtoggle button {
    flex: 1;
    min-height: 38px;
  }
}

@media (max-width: 480px) {
  .ed-toolbar {
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
  }

  .ed-toolbar__count {
    font-size: 0.82rem;
    padding-bottom: 6px;
  }

  .ed-toolbar>.ed-filterbtn,
  .ed-select-wrap {
    flex: 1 1 calc(50% - 4px);
  }

  .ed-viewtoggle {
    border-radius: 10px;
  }
}

/* Drawer doubles as the desktop filter panel - one DOM, unique IDs */
@media (min-width: 992px) {
  .ed-drawer {
    position: static;
    transform: none;
    max-height: none;
    overflow: visible;
    box-shadow: var(--ed-shadow-xs);
    border: 1px solid var(--ed-border);
    border-radius: var(--ed-r-lg);
    padding: 22px;
  }

  .ed-drawer__handle,
  .ed-drawer .btn-apply {
    display: none;
  }

  .ed-drawer__title {
    margin-bottom: 0;
    padding-bottom: 16px;
  }
}

/* --------------------------------------------------------------------------
   V2.6 Cities / nearby
   -------------------------------------------------------------------------- */
.ed-cities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

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

.ed-city-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  padding: 18px;
  color: var(--ed-text);
  overflow: hidden;
  transition: transform var(--ed-t-fast), border-color var(--ed-t-fast), box-shadow var(--ed-t-fast);
}

.ed-city-card:hover {
  transform: translateY(-3px);
  border-color: var(--ed-primary);
  box-shadow: var(--ed-shadow-sm);
  text-decoration: none;
}

.ed-city-card::after {
  content: "\f3c5";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset-inline-end: -14px;
  bottom: -18px;
  font-size: 4.6rem;
  color: var(--ed-primary-softer);
  pointer-events: none;
}

.ed-city-card .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--ed-primary-soft);
  color: var(--ed-primary);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.ed-city-card .nm {
  font-weight: 800;
  font-size: 0.98rem;
}

.ed-city-card .ct {
  font-size: 0.75rem;
  color: var(--ed-text-muted);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   V2.7 Benefits bento
   -------------------------------------------------------------------------- */
.ed-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 16px;
}

.ed-bento .span2 {
  grid-column: span 2;
}

@media (max-width: 991.98px) {
  .ed-bento {
    grid-template-columns: 1fr 1fr;
  }

  .ed-bento .span2 {
    grid-column: span 2;
  }
}

@media (max-width: 575.98px) {
  .ed-bento {
    grid-template-columns: 1fr;
  }

  .ed-bento .span2 {
    grid-column: span 1;
  }
}

.ed-benefit {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  padding: 26px;
  transition: transform var(--ed-t-fast), box-shadow var(--ed-t-fast);
}

.ed-benefit:hover {
  transform: translateY(-3px);
  box-shadow: var(--ed-shadow-sm);
}

.ed-benefit .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  font-size: 1.2rem;
  background: var(--ed-primary-soft);
  color: var(--ed-primary);
  margin-bottom: 14px;
}

.ed-benefit--accent .ic {
  background: var(--ed-accent-soft);
  color: var(--ed-accent-strong);
}

.ed-benefit--teal .ic {
  background: var(--ed-teal-soft);
  color: #0B8A74;
}

.ed-benefit--amber .ic {
  background: var(--ed-warning-soft);
  color: var(--ed-warning);
}

.ed-benefit h3 {
  font-size: 1.08rem;
  margin: 0 0 7px;
}

.ed-benefit p {
  margin: 0;
  font-size: var(--ed-fs-sm);
  color: var(--ed-text-2);
  line-height: 1.7;
}

.ed-benefit.span2 {
  display: flex;
  gap: 22px;
  align-items: center;
}

.ed-benefit.span2 .ic {
  margin-bottom: 0;
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  font-size: 1.5rem;
}

@media (max-width: 575.98px) {
  .ed-benefit.span2 {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   V2.8 Journey (before / after)
   -------------------------------------------------------------------------- */
.ed-journey {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 767.98px) {
  .ed-journey {
    grid-template-columns: 1fr;
  }
}

.ed-journey-col {
  border-radius: var(--ed-r-lg);
  padding: 26px;
}

.ed-journey-col--before {
  background: var(--ed-surface);
  border: 1px dashed var(--ed-border-strong);
}

.ed-journey-col--after {
  background: linear-gradient(150deg, #0D2B45 0%, #0A5C93 70%, #0A7CC0 100%);
  color: #EAF4FB;
}

.ed-journey-col h3 {
  font-size: 1.05rem;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ed-journey-col--before h3 {
  color: var(--ed-text-2);
}

.ed-journey-col--after h3 {
  color: #fff;
}

.ed-journey-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ed-r-sm);
  font-size: var(--ed-fs-sm);
  font-weight: 600;
  position: relative;
}

.ed-journey-col--before .ed-journey-step {
  background: var(--ed-surface-2);
  color: var(--ed-text-2);
  margin-bottom: 8px;
}

.ed-journey-col--before .ed-journey-step .n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ed-border);
  color: var(--ed-text-2);
  font-size: 0.72rem;
  font-weight: 800;
}

.ed-journey-col--after .ed-journey-step {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  margin-bottom: 8px;
}

.ed-journey-col--after .ed-journey-step .n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5EEAD4;
  color: #0D2B45;
  font-size: 0.72rem;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   V2.9 Values / ecosystem / vision
   -------------------------------------------------------------------------- */
.ed-values {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

@media (max-width: 991.98px) {
  .ed-values {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575.98px) {
  .ed-values {
    grid-template-columns: 1fr 1fr;
  }
}

.ed-value {
  text-align: center;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-md);
  padding: 20px 12px;
}

.ed-value .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ed-primary-softer);
  color: var(--ed-primary);
  font-size: 1rem;
  margin-bottom: 10px;
}

.ed-value h4 {
  font-size: 0.85rem;
  margin: 0 0 4px;
}

.ed-value p {
  font-size: 0.72rem;
  color: var(--ed-text-muted);
  margin: 0;
  line-height: 1.5;
}

.ed-eco {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 767.98px) {
  .ed-eco {
    grid-template-columns: 1fr;
  }
}

.ed-eco-card {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  padding: 28px 24px;
  text-align: center;
  transition: transform var(--ed-t-fast), box-shadow var(--ed-t-fast);
}

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

.ed-eco-card .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  font-size: 1.5rem;
  margin-bottom: 14px;
  background: var(--ed-primary-soft);
  color: var(--ed-primary);
}

.ed-eco-card:nth-child(2) .ic {
  background: var(--ed-accent-soft);
  color: var(--ed-accent-strong);
}

.ed-eco-card:nth-child(3) .ic {
  background: var(--ed-teal-soft);
  color: #0B8A74;
}

.ed-eco-card h3 {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.ed-eco-card p {
  font-size: var(--ed-fs-sm);
  color: var(--ed-text-2);
  margin: 0;
}

.ed-vision {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(40rem 20rem at 12% -30%, rgba(15, 191, 159, 0.28) 0%, transparent 60%),
    radial-gradient(34rem 18rem at 95% 130%, rgba(240, 61, 126, 0.2) 0%, transparent 55%),
    linear-gradient(130deg, #0D2B45 0%, #0A5C93 65%, #0A7CC0 100%);
  border-radius: var(--ed-r-xl);
  color: #EAF4FB;
  padding: 64px 40px;
  text-align: center;
}

.ed-vision h2 {
  color: #fff;
  font-size: var(--ed-fs-h2);
  margin: 0 0 14px;
}

.ed-vision p {
  max-width: 640px;
  margin: 0 auto;
  font-size: var(--ed-fs-lg);
  color: rgba(234, 244, 251, 0.88);
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
   V2.10 Featured quote + final CTA
   -------------------------------------------------------------------------- */
.ed-quote-feature {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding: 20px 24px 0;
}

.ed-quote-feature .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--ed-accent-soft);
  color: var(--ed-accent-strong);
  font-size: 1.6rem;
  margin-bottom: 18px;
  transform: rotate(-6deg);
}

.ed-quote-feature blockquote {
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  font-weight: 600;
  color: var(--ed-text);
  line-height: 1.85;
  margin: 0 0 18px;
}

.ed-quote-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 920px;
  margin: 34px auto 0;
}

@media (max-width: 767.98px) {
  .ed-quote-side {
    grid-template-columns: 1fr;
  }
}

.ed-quote-mini {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-md);
  padding: 20px;
  font-size: 0.9rem;
  color: var(--ed-text-2);
  line-height: 1.75;
}

.ed-quote-mini .who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-weight: 700;
  color: var(--ed-text);
  font-size: 0.8rem;
}

.ed-quote-mini .who img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.ed-cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(36rem 18rem at 85% -20%, rgba(15, 191, 159, 0.22) 0%, transparent 60%),
    linear-gradient(120deg, #0D2B45 0%, #0A5C93 60%, #0A7CC0 100%);
  border-radius: var(--ed-r-xl);
  padding: 56px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.ed-cta-band h2 {
  color: #fff;
  font-size: var(--ed-fs-h2);
  margin: 0 0 8px;
}

.ed-cta-band p {
  color: rgba(234, 244, 251, 0.85);
  margin: 0;
  font-size: var(--ed-fs-lg);
}

.ed-cta-band .ed-cta-band__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ed-cta-band .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--ed-primary-ink);
  box-shadow: 0 8px 22px rgba(2, 20, 36, 0.35);
}

.ed-cta-band .btn-primary:hover {
  background: var(--ed-primary-softer);
  border-color: var(--ed-primary-softer);
  color: var(--ed-primary-ink);
}

.ed-cta-band .btn-outline-inv {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.ed-cta-band .btn-outline-inv:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* --------------------------------------------------------------------------
   V2.11 Page hero bands (doctors/contact/about)
   -------------------------------------------------------------------------- */
.ed-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(44rem 20rem at 88% -30%, rgba(15, 191, 159, 0.2) 0%, transparent 58%),
    radial-gradient(30rem 16rem at 4% 130%, rgba(240, 61, 126, 0.16) 0%, transparent 55%),
    linear-gradient(125deg, #0D2B45 0%, #0A5C93 62%, #0A7CC0 100%);
  color: #EAF4FB;
  text-align: -webkit-center;
  padding: 64px 0 72px;
}

@media (max-width: 767.98px) {
  .ed-band {
    padding: 44px 0 52px;
  }
}

.ed-band h1 {
  color: #fff;
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}

.ed-band p {
  color: rgba(234, 244, 251, 0.85);
  font-size: var(--ed-fs-lg);
  margin: 0;
  max-width: 560px;
}

.ed-band .ed-band__stats {
  display: flex;
  gap: 26px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.ed-band .ed-band__stats .st strong {
  display: block;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
}

.ed-band .ed-band__stats .st span {
  font-size: 0.8rem;
  color: rgba(234, 244, 251, 0.75);
  font-weight: 600;
}

/* Search panel embedded in band */
.ed-band .ed-searchbar {
  box-shadow: 0 18px 44px rgba(2, 20, 36, 0.35);
  margin-top: 28px;
  max-width: 920px;
}

/* --------------------------------------------------------------------------
   V2.12 Contact v2
   -------------------------------------------------------------------------- */
.ed-contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 991.98px) {
  .ed-contact-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .ed-contact-cards {
    grid-template-columns: 1fr;
  }
}

.ed-contact-card {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--ed-t-fast), box-shadow var(--ed-t-fast), border-color var(--ed-t-fast);
}

.ed-contact-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ed-shadow-sm);
  border-color: var(--ed-primary-border);
}

.ed-contact-card .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 1.1rem;
  background: var(--ed-primary-soft);
  color: var(--ed-primary);
  margin-bottom: 4px;
}

.ed-contact-card h3 {
  font-size: 0.98rem;
  margin: 0;
}

.ed-contact-card .val {
  font-size: 0.9rem;
  color: var(--ed-text-2);
  font-weight: 600;
  direction: ltr;
  text-align: start;
}

[dir="rtl"] .ed-contact-card .val {
  text-align: right;
}

.ed-contact-card .val.ltr {
  direction: ltr;
}

.ed-form-status {
  display: none;
  border-radius: var(--ed-r-sm);
  padding: 12px 16px;
  font-size: var(--ed-fs-sm);
  font-weight: 700;
  margin-bottom: 14px;
}

.ed-form-status.is-error {
  display: block;
  background: var(--ed-danger-soft);
  color: var(--ed-danger);
}

.ed-form-status.is-ok {
  display: block;
  background: var(--ed-success-soft);
  color: var(--ed-success);
}

.ed-field-error {
  display: none;
  color: var(--ed-danger);
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 4px;
}

.ed-field.has-error .form-control {
  border-color: var(--ed-danger);
}

.ed-field.has-error .ed-field-error {
  display: block;
}

/* FAQ accordion */
.ed-faq {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.ed-faq details {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-md);
  overflow: hidden;
}

.ed-faq details[open] {
  border-color: var(--ed-primary-border);
}

.ed-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--ed-text);
  font-size: 0.95rem;
}

.ed-faq summary::-webkit-details-marker {
  display: none;
}

.ed-faq summary::after {
  content: "\2b";
  font-weight: 800;
  color: var(--ed-primary);
  font-size: 1.1rem;
  transition: transform var(--ed-t-fast);
}

.ed-faq details[open] summary::after {
  content: "\2212";
}

.ed-faq .ed-faq__a {
  padding: 0 20px 18px;
  color: var(--ed-text-2);
  font-size: var(--ed-fs-sm);
  line-height: 1.8;
  margin: 0;
}

/* --------------------------------------------------------------------------
   V2.13 Patient shell (sidebar + topbar + bottom nav)
   -------------------------------------------------------------------------- */
.ed-pshell {
  display: flex;
  min-height: 100vh;
  background: var(--ed-bg);
}

.ed-pside {
  width: 264px;
  min-width: 264px;
  background: #0C2338;
  color: #AFC3D4;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.ed-pside .ed-pside__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  margin-bottom: 18px;
}

.ed-pside .ed-pside__brand img {
  height: 38px;
  width: auto;
  background: #fff;
  border-radius: 9px;
  padding: 4px 7px;
}

.ed-pside .ed-pside__brand .t {
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.3;
}

.ed-pside .ed-pside__label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64809A;
  font-weight: 800;
  padding: 0 12px;
  margin: 8px 0 8px;
}

[dir="rtl"] .ed-pside .ed-pside__label {
  letter-spacing: 0;
}

.ed-pside nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ed-pside nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--ed-r-sm);
  color: #AFC3D4;
  font-weight: 700;
  font-size: 0.875rem;
  transition: background var(--ed-t-fast), color var(--ed-t-fast);
}

.ed-pside nav a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  text-decoration: none;
}

.ed-pside nav a.on {
  background: var(--ed-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(10, 124, 192, 0.4);
}

.ed-pside nav a i {
  width: 20px;
  text-align: center;
  font-size: 0.95rem;
}

.ed-pside .ed-pside__foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.ed-pside .ed-pside__foot a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ed-r-sm);
  color: #F0A9A9;
  font-weight: 700;
  font-size: 0.85rem;
}

.ed-pside .ed-pside__foot a:hover {
  background: rgba(240, 169, 169, 0.12);
  text-decoration: none;
}

.ed-pmain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ed-ptop {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ed-surface);
  border-bottom: 1px solid var(--ed-border);
  padding: 14px 28px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.ed-ptop .greeting {
  min-width: 0;
}

.ed-ptop .greeting .hi {
  font-weight: 800;
  color: var(--ed-text);
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ed-ptop .greeting .sub {
  font-size: 0.75rem;
  color: var(--ed-text-muted);
  font-weight: 600;
}

.ed-ptop .spacer {
  flex: 1;
}

.ed-ptop .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ed-primary-soft);
}

.ed-pcontent {
  padding: 28px;

  width: 100%;
  margin: 0 auto;
  flex: 1;
}

@media (max-width: 767.98px) {
  .ed-pcontent {
    padding: 18px 16px 96px;
  }
}

/* Patient mobile header + bottom nav */
.ed-pmobile-head {
  display: none;
}

.ed-pbottomnav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1400;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--ed-border);
  box-shadow: 0 -6px 24px rgba(22, 50, 74, 0.1);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}

.ed-pbottomnav .wrap {
  display: flex;
}

.ed-pbottomnav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px;
  border-radius: var(--ed-r-sm);
  color: var(--ed-text-muted);
  font-size: 0.62rem;
  font-weight: 800;
}

.ed-pbottomnav a i {
  font-size: 1.15rem;
}

.ed-pbottomnav a.on {
  color: var(--ed-primary);
  background: var(--ed-primary-softer);
}

@media (max-width: 991.98px) {
  .ed-pside {
    display: none;
  }

  .ed-ptop {
    display: none;
  }

  .ed-pmobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #0C2338;
    color: #fff;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .ed-pmobile-head .who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .ed-pmobile-head img {
    height: 32px;
    width: auto;
    background: #fff;
    border-radius: 7px;
    padding: 3px 5px;
  }

  .ed-pmobile-head .hi {
    font-weight: 800;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ed-pmobile-head a.exit {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    padding: 6px;
  }

  .ed-pbottomnav {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   V2.14 Dashboard components
   -------------------------------------------------------------------------- */
.ed-dash-hero {
  background:
    radial-gradient(30rem 14rem at 92% -40%, rgba(15, 191, 159, 0.25) 0%, transparent 60%),
    linear-gradient(130deg, #0D2B45 0%, #0A5C93 65%, #0A7CC0 100%);
  border-radius: var(--ed-r-xl);
  color: #EAF4FB;
  padding: 30px 28px;
  margin-bottom: 24px;
}

.ed-dash-hero .hi {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
}

.ed-dash-hero .q {
  color: rgba(234, 244, 251, 0.82);
  margin: 0 0 20px;
  font-size: 0.98rem;
}

.ed-dash-hero .ed-dash-hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ed-dash-hero .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--ed-primary-ink);
  box-shadow: 0 8px 20px rgba(2, 20, 36, 0.3);
}

.ed-dash-hero .btn-primary:hover {
  background: var(--ed-primary-softer);
  border-color: var(--ed-primary-softer);
}

.ed-dash-hero .btn-outline-inv {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.ed-dash-hero .btn-outline-inv:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Next appointment card */
.ed-next-appt {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-xl);
  box-shadow: var(--ed-shadow-sm);
  padding: 24px;
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.ed-next-appt::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--ed-primary), var(--ed-teal));
}

.ed-next-appt__img {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  object-fit: cover;
  background: var(--ed-primary-softer);
  flex-shrink: 0;
}

[dir="rtl"] .ed-next-appt::before {
  inset: 0 0 0 auto;
}

.ed-next-appt .when {
  min-width: 108px;
  text-align: center;
  background: var(--ed-primary-soft);
  border-radius: var(--ed-r-md);
  padding: 14px 18px;
}

.ed-next-appt .when .d {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ed-primary-ink);
  line-height: 1.05;
}

.ed-next-appt .when .m {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ed-primary-ink);
  text-transform: uppercase;
}

.ed-next-appt .when .cd {
  margin-top: 8px;
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ed-primary);
  background: #fff;
  border-radius: var(--ed-r-pill);
  padding: 2px 10px;
}

.ed-next-appt .info {
  flex: 1;
  min-width: 220px;
}

.ed-next-appt .info .lbl {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ed-primary);
  margin-bottom: 6px;
}

[dir="rtl"] .ed-next-appt .info .lbl {
  letter-spacing: 0;
}

.ed-next-appt .info h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.ed-next-appt .info .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: var(--ed-fs-sm);
  color: var(--ed-text-2);
  margin-top: 6px;
}

.ed-next-appt .info .meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ed-next-appt .info .meta i {
  color: var(--ed-primary);
  font-size: 0.8rem;
}

.ed-next-appt .acts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ed-panel {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  padding: 22px;
}

.ed-panel--flush {
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}

.ed-appt-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ed-border);
  text-decoration: none;
  transition: background .15s;
}

.ed-appt-row:hover {
  background: var(--ed-surface-2);
}

.ed-appt-row:last-child {
  border-bottom: none;
}

.ed-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ed-panel__head h3 {
  font-size: 1.02rem;
  margin: 0;
}

/* Instructions list */
.ed-instr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ed-instr-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ed-instr-list li i {
  margin-top: 2px;
  flex-shrink: 0;
}

.ed-instr-list li span {
  font-size: 0.9rem;
  color: var(--ed-text-2);
  line-height: 1.5;
}



.ed-qa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

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

.ed-qa-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-md);
  padding: 18px 16px;
  color: var(--ed-text);
  font-weight: 700;
  font-size: 0.85rem;
  transition: transform var(--ed-t-fast), border-color var(--ed-t-fast), box-shadow var(--ed-t-fast);
}

.ed-qa-tile:hover {
  transform: translateY(-3px);
  border-color: var(--ed-primary);
  box-shadow: var(--ed-shadow-sm);
  text-decoration: none;
}

.ed-qa-tile .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 1rem;
  background: var(--ed-primary-soft);
  color: var(--ed-primary);
}

.ed-med-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 575.98px) {
  .ed-med-grid {
    grid-template-columns: 1fr;
  }
}

.ed-med-item {
  background: var(--ed-surface-2);
  border-radius: var(--ed-r-sm);
  padding: 12px 14px;
}

.ed-med-item .k {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--ed-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}

[dir="rtl"] .ed-med-item .k {
  letter-spacing: 0;
}

.ed-med-item .v {
  font-weight: 800;
  color: var(--ed-text);
  font-size: 0.95rem;
}

.ed-appt-row .cal {
  width: 44px;
  height: 44px;
  border-radius: var(--ed-r-sm);
  flex-shrink: 0;
  background: var(--ed-primary-soft);
  color: var(--ed-primary-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1.1;
}

.ed-appt-row .cal .d {
  font-size: 0.95rem;
}

.ed-appt-row .cal .m {
  font-size: 0.55rem;
  text-transform: uppercase;
}

.ed-appt-row .who {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ed-appt-row .who .nm {
  font-weight: 700;
  color: var(--ed-text);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ed-appt-row .who .sub {
  font-size: 0.75rem;
  color: var(--ed-text-muted);
}

.ed-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--ed-r-pill);
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 800;
}

.ed-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ed-status--ok {
  background: var(--ed-success-soft);
  color: var(--ed-success);
}

.ed-status--done {
  background: var(--ed-primary-soft);
  color: var(--ed-primary-ink);
}

.ed-status--cancel {
  background: var(--ed-danger-soft);
  color: var(--ed-danger);
}

.ed-status--warn {
  background: var(--ed-warning-soft);
  color: var(--ed-warning);
}

/* Segmented control (appointments tabs) */
.ed-seg {
  display: inline-flex;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-pill);
  padding: 4px;
  gap: 3px;
}

.ed-seg a {
  padding: 8px 18px;
  border-radius: var(--ed-r-pill);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ed-text-2);
  transition: background var(--ed-t-fast), color var(--ed-t-fast);
}

.ed-seg a:hover {
  text-decoration: none;
  color: var(--ed-primary-ink);
}

.ed-seg a.on {
  background: var(--ed-primary);
  color: #fff;
}

/* Appointment list cards v2 */
.ed-appt-card {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-lg);
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  transition: transform var(--ed-t-fast), box-shadow var(--ed-t-fast);
}

.ed-appt-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ed-shadow-sm);
}

.ed-appt-card .when {
  min-width: 84px;
  text-align: center;
  background: var(--ed-surface-2);
  border-radius: var(--ed-r-md);
  padding: 10px 14px;
}

.ed-appt-card .when .d {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ed-text);
  line-height: 1.1;
}

.ed-appt-card .when .m {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ed-text-muted);
  text-transform: uppercase;
}

.ed-appt-card .when .y {
  font-size: 0.68rem;
  color: var(--ed-text-muted);
  font-weight: 700;
}

.ed-appt-card .det {
  flex: 1;
  min-width: 200px;
}

.ed-appt-card .det .nm {
  font-weight: 800;
  color: var(--ed-text);
  margin-bottom: 3px;
  font-size: 1rem;
}

.ed-appt-card .det .sub {
  font-size: var(--ed-fs-sm);
  color: var(--ed-text-2);
  display: grid;
  gap: 9px;
}

.ed-appt-card .det .sub span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.ed-appt-card .det .sub i {
  color: var(--ed-primary);
  font-size: 0.8rem;
}

.ed-appt-card .acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ed-appt-card .acts .btn {
  border-radius: 999px;
}

.btn-cancel-appt {
  background: var(--ed-danger-soft);
  color: var(--ed-danger);
  border: none;
  border-radius: 999px;
}

.btn-cancel-appt:hover {
  background: var(--ed-danger);
  color: #fff;
}

.btn-confirm-appt {
  background: var(--ed-success-soft);
  color: var(--ed-success);
  border: none;
  border-radius: 999px;
}

.btn-confirm-appt:hover {
  background: var(--ed-success);
  color: #fff;
}

/* Detail actions row */
.ed-detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ed-border, #e5e7eb);
}

.ed-detail-actions .btn {
  border-radius: 999px;
}

/* Rating form */
.ed-rating-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ed-rating-stars {
  display: flex;
  gap: 6px;
  font-size: 2rem;
  cursor: pointer;
  justify-content: center;
  padding: 8px 0;
}

.ed-rating-stars i {
  color: #d1d5db;
  transition: color 0.15s ease, transform 0.15s ease;
  transform-origin: center;
}

.ed-rating-stars i:hover {
  transform: scale(1.2);
}

.ed-rating-stars i.fas {
  color: var(--ed-warning, #f59e0b);
  filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.3));
}

.ed-rating-form textarea {
  resize: none;
  min-height: 80px;
}

.ed-rating-form .btn {
  align-self: flex-start;
  border-radius: 999px;
}

.ed-rating-status {
  font-size: 0.85rem;
}

.ed-rating-done {
  color: var(--ed-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* Appointment detail timeline */
.ed-timeline {
  position: relative;
  padding-inline-start: 26px;
}

.ed-timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--ed-border);
}

.ed-tl-step {
  position: relative;
  padding: 0 0 22px;
}

.ed-tl-step:last-child {
  padding-bottom: 0;
}

.ed-tl-step::before {
  content: "";
  position: absolute;
  inset-inline-start: -26px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ed-surface);
  border: 3px solid var(--ed-border-strong);
}

.ed-tl-step.done::before {
  border-color: var(--ed-success);
  background: var(--ed-success-soft);
}

.ed-tl-step.cur::before {
  border-color: var(--ed-primary);
  background: var(--ed-primary);
  box-shadow: 0 0 0 4px rgba(10, 124, 192, 0.18);
}

.ed-tl-step .t {
  font-weight: 800;
  color: var(--ed-text);
  font-size: 0.92rem;
}

.ed-tl-step .s {
  font-size: 0.78rem;
  color: var(--ed-text-muted);
}

.ed-tl-step--danger {
  color: var(--ed-danger) !important;
}

.ed-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 575.98px) {
  .ed-detail-grid {
    grid-template-columns: 1fr;
  }
}

.ed-detail-item {
  background: var(--ed-surface-2);
  border-radius: var(--ed-r-sm);
  padding: 13px 15px;
}

.ed-detail-item .k {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--ed-text-muted);
  text-transform: uppercase;
  margin-bottom: 3px;
}

[dir="rtl"] .ed-detail-item .k {
  letter-spacing: 0;
}

.ed-detail-item .v {
  font-weight: 700;
  color: var(--ed-text);
  font-size: 0.95rem;
}

.ed-detail-item--full {
  grid-column: 1 / -1;
}

/* Notifications */
.ed-notif {
  display: flex;
  gap: 14px;
  padding: 15px 6px;
  border-bottom: 1px solid var(--ed-border);
  align-items: flex-start;
}

.ed-notif:last-child {
  border-bottom: none;
}

.ed-notif .ic {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--ed-primary-soft);
  color: var(--ed-primary);
}

.ed-notif--warn .ic {
  background: var(--ed-warning-soft);
  color: var(--ed-warning);
}

.ed-notif--info .ic {
  background: var(--ed-teal-soft);
  color: #0B8A74;
}

.ed-notif .tx {
  flex: 1;
  min-width: 0;
}

.ed-notif .tx .t {
  font-weight: 700;
  color: var(--ed-text);
  font-size: 0.9rem;
}

.ed-notif .tx .s {
  font-size: 0.78rem;
  color: var(--ed-text-2);
  margin-top: 2px;
  line-height: 1.6;
}

/* Section title inside patient content */
.ed-psec {
  margin-bottom: 26px;
}

.ed-psec>h2 {
  font-size: 1.05rem;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ed-psec>h2 i {
  color: var(--ed-primary);
  font-size: 0.95rem;
}

/* Favorite doctors mini cards */
.ed-fav-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.ed-fav-card {
  min-width: 168px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r-md);
  padding: 16px;
  text-align: center;
  transition: border-color var(--ed-t-fast), transform var(--ed-t-fast);
}

.ed-fav-card:hover {
  border-color: var(--ed-primary);
  transform: translateY(-2px);
  text-decoration: none;
}

.ed-fav-card img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
  background: var(--ed-primary-softer);
}

.ed-fav-card .nm {
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--ed-text);
  margin-bottom: 2px;
}

.ed-fav-card .sp {
  font-size: 0.7rem;
  color: var(--ed-text-muted);
  font-weight: 700;
}

/* RTL fixes for patient shell */
[dir="rtl"] .ed-next-appt .info .meta span {
  direction: rtl;
}

[dir="rtl"] .ed-appt-card .det .sub span {
  direction: rtl;
}

/* Reduced motion for v2 */
@media (prefers-reduced-motion: reduce) {

  .ed-ui-float,
  .ed-hero__blob {
    animation: none !important;
  }
}

/* ==========================================================================
   V2.15 - Premium Patient Redesign: Sidebar + Family + Addresses + Profile
   ========================================================================== */

/* - Sidebar - premium modern - */
.ed-pside {
  width: 272px;
  min-width: 272px;
  background:
    radial-gradient(420px 280px at 20% -10%, rgba(10, 124, 192, .28) 0%, transparent 70%),
    radial-gradient(380px 320px at 90% 110%, rgba(15, 191, 159, .14) 0%, transparent 60%),
    linear-gradient(180deg, #0B1E33 0%, #0D2440 55%, #0A1C32 100%);
  border-inline-end: 1px solid rgba(255, 255, 255, .06);
  padding: 18px 14px 14px;
  gap: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .12) transparent;
}

.ed-pside::-webkit-scrollbar {
  width: 4px;
}

.ed-pside::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
}

.ed-pside__brand {
  padding: 6px 10px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.ed-pside__brand img {
  height: 36px;
  border-radius: 10px;
  padding: 4px 7px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}

.ed-pside__brand .t {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  font-weight: 700;
}

[dir="rtl"] .ed-pside__brand .t {
  letter-spacing: 0;
}

/* - Patient mini header inside sidebar - */
.ed-pside__patient {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 12px 13px;
  margin: 0 2px 18px;
  backdrop-filter: blur(8px);
}

.ed-pside__patient img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  flex-shrink: 0;
}

.ed-pside__patient .nm {
  color: #fff;
  font-weight: 800;
  font-size: .92rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ed-pside__patient .sub {
  color: rgba(255, 255, 255, .62);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ed-pside__patient .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0FBF9F;
  box-shadow: 0 0 0 3px rgba(15, 191, 159, .22);
  flex-shrink: 0;
}

.ed-pside__label {
  color: rgba(255, 255, 255, .38);
  letter-spacing: .09em;
  font-size: .64rem;
  margin: 18px 0 8px;
  padding: 0 10px;
}

.ed-pside nav {
  gap: 3px;
}

.ed-pside nav a {
  padding: 10px 11px;
  border-radius: 12px;
  font-size: .86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .74);
  position: relative;
  overflow: hidden;
}

.ed-pside nav a i {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  font-size: .82rem;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}

.ed-pside nav a:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.ed-pside nav a:hover i {
  background: rgba(255, 255, 255, .11);
}

.ed-pside nav a.on {
  background: linear-gradient(135deg, #0A7CC0 0%, #0A6EB0 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(10, 124, 192, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.ed-pside nav a.on i {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.ed-pside nav a .badge {
  margin-inline-start: auto;
  background: #F03D7E !important;
  color: #fff !important;
  font-size: .65rem !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(240, 61, 126, .4);
}

/* - Sidebar foot - profile / settings / logout - */
.ed-pside__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ed-pside__foot a {
  padding: 9px 11px;
  border-radius: 12px;
  font-size: .84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .68);
  gap: 10px;
}

.ed-pside__foot a i {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  font-size: .82rem;
}

.ed-pside__foot a:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.ed-pside__foot a.on {
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

.ed-pside__foot a.on i {
  background: rgba(255, 255, 255, .13);
}

.ed-pside__foot a:last-child {
  color: #FF9AA8;
}

.ed-pside__foot a:last-child i {
  background: rgba(255, 77, 109, .14);
  color: #FF9AA8;
}

.ed-pside__foot a:last-child:hover {
  background: rgba(255, 77, 109, .12);
  color: #FFB3BF;
}


/* - Family search - */
.ed-family-search {
  position: relative;
  margin-bottom: 18px;
  max-width: 380px;
}

.ed-family-search i {
  position: absolute;
  inset-inline-start: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ed-text-muted);
  font-size: .85rem;
  pointer-events: none;
}

.ed-family-search input {
  width: 100%;
  padding: 11px 44px 11px 42px;
  border-radius: 999px;
  border: 1px solid var(--ed-border);
  background: var(--ed-surface);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ed-text);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

[dir="rtl"] .ed-family-search input {
  padding: 11px 42px 11px 44px;
}

.ed-family-search input:focus {
  border-color: var(--ed-primary);
  box-shadow: 0 0 0 4px rgba(10, 124, 192, .1);
}

.ed-family-search input::placeholder {
  color: var(--ed-text-muted);
  font-weight: 500;
}

/* - Premium Family - cards - */
.ed-family-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ed-family-head h1 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ed-text);
  margin: 0;
  letter-spacing: -.015em;
}

[dir="rtl"] .ed-family-head h1 {
  letter-spacing: 0;
}

.ed-family-head .count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ed-primary-softer);
  color: var(--ed-primary-ink);
  border: 1px solid var(--ed-primary-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .78rem;
  font-weight: 800;
}

/* - Page head - icon spacing for subtitle p - */
.ed-page-head__titles p i {
  margin-inline-end: 7px !important;
}

.ed-page-head__titles i+p {
  margin-inline-start: 7px !important;
}

/* - Family header actions (badge + add) - */
.ed-family-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 999px;
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
}

.ed-family-actions .ed-page-head__badge {
  margin-inline-end: -2px;
}

.ed-family-actions__add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #F03D7E, #D92E6C);
  border: none;
  box-shadow: 0 6px 16px rgba(217, 46, 108, .32);
  transition: transform .18s, box-shadow .18s, filter .18s;
  white-space: nowrap;
}

[dir="rtl"] .ed-family-actions__add {
  direction: rtl;
}

.ed-family-actions__add i {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, .22);
  font-size: .6rem;
}

.ed-family-actions__add:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(217, 46, 108, .4);
  filter: brightness(1.06);
  color: #fff;
}

.ed-family-actions__add:active {
  transform: translateY(0) scale(.97);
}

/* - Family stats bar - */
.ed-family-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ed-family-stats__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid var(--ed-border);
  background: var(--ed-surface);
  color: var(--ed-text);
  transition: .18s;
}

.ed-family-stats__pill:hover {
  border-color: var(--ed-primary-border);
}

.ed-family-stats__pill i {
  font-size: .7rem;
}

.ed-family-stats__pill--all {
  background: var(--ed-primary-softer);
  color: var(--ed-primary-ink);
  border-color: var(--ed-primary-border);
}

.ed-family-stats__pill--male {
  color: var(--ed-primary);
}

.ed-family-stats__pill--female {
  color: #D92E6C;
}

/* - Family grid - */
.ed-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

@media (max-width: 575.98px) {
  .ed-family-grid {
    grid-template-columns: 1fr;
  }
}

/* - Family card - */
@keyframes edCardIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

.ed-family-card {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--ed-shadow-sm);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s, border-color .22s;
  position: relative;
  isolation: isolate;
  animation: edCardIn .45s cubic-bezier(.16, 1, .3, 1) both;
}

.ed-family-card:nth-child(2) {
  animation-delay: .06s;
}

.ed-family-card:nth-child(3) {
  animation-delay: .12s;
}

.ed-family-card:nth-child(4) {
  animation-delay: .18s;
}

.ed-family-card:nth-child(5) {
  animation-delay: .24s;
}

.ed-family-card:hover {
  transform: translateY(-5px) scale(1.008);
  box-shadow: 0 14px 32px rgba(22, 50, 74, .1), 0 0 0 1px var(--card-accent, var(--ed-primary-border));
  border-color: var(--card-accent-soft, var(--ed-primary-border));
}

/* per-card accent cycle (matches cover) */
.ed-family-card:nth-of-type(5n+1),
.ed-family-card:nth-of-type(5n+1) .ed-family-card__cover {
  --card-accent: #D92E6C;
  --card-accent-deep: #A81E4A;
  --card-accent-soft: #FDE9F1;
}

.ed-family-card:nth-of-type(5n+2),
.ed-family-card:nth-of-type(5n+2) .ed-family-card__cover {
  --card-accent: #0A7CC0;
  --card-accent-deep: #084A7A;
  --card-accent-soft: #E3F2FC;
}

.ed-family-card:nth-of-type(5n+3),
.ed-family-card:nth-of-type(5n+3) .ed-family-card__cover {
  --card-accent: #0FBF9F;
  --card-accent-deep: #067A62;
  --card-accent-soft: #E2F8F3;
}

.ed-family-card:nth-of-type(5n+4),
.ed-family-card:nth-of-type(5n+4) .ed-family-card__cover {
  --card-accent: #E8940A;
  --card-accent-deep: #9A4E07;
  --card-accent-soft: #FEF3DF;
}

.ed-family-card:nth-of-type(5n+5),
.ed-family-card:nth-of-type(5n+5) .ed-family-card__cover {
  --card-accent: #7C3AED;
  --card-accent-deep: #5B21B6;
  --card-accent-soft: #F1EAFE;
}

/* cover header */
.ed-family-card__cover {
  height: 80px;
  background:
    radial-gradient(220px 120px at 85% -30%, rgba(255, 255, 255, .28) 0%, transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent, #D92E6C) 78%, #fff) 0%, var(--card-accent, #D92E6C) 55%, var(--card-accent-deep, #A81E4A) 100%);
  position: relative;
  overflow: hidden;
}

/* watermark glyph */
.ed-family-card__cover-glyph {
  position: absolute;
  inset-inline-end: 12px;
  bottom: -14px;
  font-size: 64px;
  line-height: 1;
  color: rgba(255, 255, 255, .16);
  transform: rotate(-8deg);
  pointer-events: none;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), color .35s;
}

.ed-family-card:hover .ed-family-card__cover-glyph {
  transform: rotate(0deg) translateY(-6px) scale(1.05);
  color: rgba(255, 255, 255, .24);
}

.ed-family-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .06) 50%, transparent 55%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}

.ed-family-card:hover .ed-family-card__cover::after {
  transform: translateX(100%);
}

.ed-family-card__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 18px 14px;
  text-align: center;
  margin-top: -38px;
  position: relative;
  z-index: 1;
}

.ed-family-card__avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--card-accent-soft, var(--ed-primary-soft));
  border: 3px solid #fff;
  box-shadow: 0 10px 24px rgba(22, 50, 74, .16), inset 0 0 0 1px var(--card-accent-soft, transparent);
  font-size: 1.55rem;
  color: var(--card-accent, var(--ed-primary));
  font-weight: 800;
  overflow: hidden;
  transition: transform .28s, box-shadow .28s;
}

.ed-family-card:hover .ed-family-card__avatar {
  transform: scale(1.06);
  box-shadow: 0 12px 28px rgba(22, 50, 74, .22);
}

.ed-family-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ed-family-card__name {
  font-weight: 800;
  color: var(--ed-text);
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

[dir="rtl"] .ed-family-card__name {
  letter-spacing: 0;
}

.ed-family-card__relation {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  background: var(--card-accent-soft, var(--ed-primary-softer));
  color: var(--card-accent, var(--ed-primary-ink));
  border: 1px solid color-mix(in srgb, var(--card-accent, #D92E6C) 25%, transparent);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: .7rem;
  font-weight: 800;
}

/* Family card - age badge */
.ed-family-card__age {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ed-bg);
  color: var(--ed-text-muted);
  border: 1px solid var(--ed-border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .68rem;
  font-weight: 700;
}

.ed-family-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 18px 14px;
  border-top: 1px solid var(--ed-border);
  background: linear-gradient(180deg, var(--ed-surface), var(--ed-bg));
}

.ed-family-card__body .ed-family-card__field {
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: 12px;
  padding: 10px 12px;
  transition: border-color .18s, box-shadow .18s;
}

.ed-family-card__body .ed-family-card__field:hover {
  border-color: color-mix(in srgb, var(--card-accent, #0A7CC0) 35%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent, #0A7CC0) 8%, transparent);
}

.ed-family-card__field .k {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
  margin-bottom: 6px;
}

.ed-family-card__field .k i {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  background: var(--card-accent-soft, var(--ed-primary-softer));
  color: var(--card-accent, var(--ed-primary));
  font-size: .58rem;
}

[dir="rtl"] .ed-family-card__field .k {
  letter-spacing: 0;
}

.ed-family-card__field .v {
  font-weight: 700;
  color: var(--ed-text);
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ed-family-card__field .v i {
  font-size: .78rem;
  color: var(--card-accent, var(--ed-primary));
}

/* Family card - footer actions */
.ed-family-card__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px 18px;
}

.ed-family-card__foot .btn {
  flex: 1;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 700;
  padding: 9px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--ed-border);
  background: var(--ed-surface);
  color: var(--ed-text);
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.ed-family-card__foot .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .18s;
}

.ed-family-card__foot .btn:hover::before {
  opacity: .06;
}

.ed-family-card__foot .btn:active {
  transform: scale(.97);
}

.ed-family-card__foot .btn--edit i {
  color: var(--card-accent, var(--ed-primary));
}

.ed-family-card__foot .btn--edit:hover {
  color: var(--card-accent, var(--ed-primary));
  border-color: var(--card-accent, var(--ed-primary));
  background: var(--card-accent-soft, var(--ed-primary-softer));
}

.ed-family-card__foot .btn--del {
  color: #B42318;
  border-color: #FECDCA;
  background: #FEF3F2;
}

.ed-family-card__foot .btn--del i {
  color: #B42318;
}

.ed-family-card__foot .btn--del:hover {
  background: #FEE4E2;
  border-color: #F97066;
  color: #B42318;
}

/* - Premium Addresses - cards - */
.ed-addr-grid {
  display: grid;
  gap: 14px;
}

.ed-addr-card {
  display: flex;
  gap: 0;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--ed-shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

.ed-addr-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ed-shadow-md);
  border-color: var(--ed-primary-border);
}

.ed-addr-card__icon {
  width: 96px;
  min-width: 96px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 18px 10px;
  text-align: center;
  border-inline-end: 1px solid var(--ed-border);
}

.ed-addr-card__icon .ic {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}

.ed-addr-card__icon .lbl {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ed-addr-card__icon--home {
  background: linear-gradient(180deg, #F2F9FE, #E8F5FD);
}

.ed-addr-card__icon--home .ic {
  background: var(--ed-primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(10, 124, 192, .25);
}

.ed-addr-card__icon--home .lbl {
  color: var(--ed-primary-ink);
}

.ed-addr-card__icon--work {
  background: linear-gradient(180deg, #EEF8F5, #E2F8F3);
}

.ed-addr-card__icon--work .ic {
  background: #0FBF9F;
  color: #fff;
  box-shadow: 0 6px 14px rgba(15, 191, 159, .25);
}

.ed-addr-card__icon--work .lbl {
  color: #0A7A62;
}

.ed-addr-card__icon--other {
  background: linear-gradient(180deg, #FDF2F8, #FDE9F1);
}

.ed-addr-card__icon--other .ic {
  background: var(--ed-accent);
  color: #fff;
  box-shadow: 0 6px 14px rgba(240, 61, 126, .22);
}

.ed-addr-card__icon--other .lbl {
  color: var(--ed-accent-strong);
}

.ed-addr-card__body {
  flex: 1;
  min-width: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ed-addr-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ed-addr-card__head .title {
  font-weight: 800;
  color: var(--ed-text);
  font-size: .98rem;
}

.ed-addr-card__addr {
  font-size: .9rem;
  color: var(--ed-text-2);
  line-height: 1.6;
  font-weight: 500;
}

.ed-addr-card__city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ed-text-muted);
}

.ed-addr-card__city i {
  color: var(--ed-primary);
}

/* Addresses - icon spacing for p */
.ed-addr-card p i,
.ed-pcontent--addr p i {
  margin-inline-end: 7px !important;
}

.ed-pcontent--addr i+p,
.ed-addr-card i+p {
  margin-inline-start: 7px !important;
}

@media (max-width: 575.98px) {
  .ed-addr-card {
    flex-direction: column;
  }

  .ed-addr-card__icon {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    justify-content: flex-start;
    padding: 14px 16px;
    border-inline-end: none;
    border-bottom: 1px solid var(--ed-border);
  }
}

/* - Premium Profile - redesign - */
.ed-profile-hero {
  background:
    radial-gradient(420px 200px at 85% -30%, rgba(255, 255, 255, .18) 0%, transparent 60%),
    linear-gradient(135deg, #0B2340 0%, #0E4A7A 55%, #0A7CC0 100%);
  border-radius: 20px;
  padding: 22px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(11, 35, 64, .22);
}

.ed-profile-hero::after {
  content: "";
  position: absolute;
  inset: auto -40px -60px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, transparent 70%);
  pointer-events: none;
}

.ed-profile-hero__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.ed-profile-hero__avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
  object-fit: cover;
  background: rgba(255, 255, 255, .9);
}

.ed-profile-hero__name {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 3px;
  letter-spacing: -.015em;
}

[dir="rtl"] .ed-profile-hero__name {
  letter-spacing: 0;
}

.ed-profile-hero__meta {
  font-size: .82rem;
  color: rgba(255, 255, 255, .78);
  font-weight: 600;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.ed-profile-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ed-profile-hero__actions {
  margin-inline-start: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ed-profile-hero__actions .btn {
  border-radius: 999px;
  font-weight: 700;
  padding: 7px 14px;
  font-size: .8rem;
}

.ed-profile-hero__actions .btn-soft {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
}

.ed-profile-hero__actions .btn-soft:hover {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.ed-profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.ed-profile-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: 14px;
  padding: 13px 14px;
  box-shadow: var(--ed-shadow-xs);
}

.ed-profile-stat .ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: .95rem;
  flex-shrink: 0;
}

.ed-profile-stat .k {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
}

[dir="rtl"] .ed-profile-stat .k {
  letter-spacing: 0;
}

.ed-profile-stat .v {
  font-weight: 800;
  color: var(--ed-text);
  font-size: .92rem;
}

.ed-profile-stat .v.ltr {
  direction: ltr;
}

.ed-med-card--premium {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--ed-border);
  box-shadow: var(--ed-shadow-sm);
}

.ed-med-card--premium .ed-panel__head {
  background: linear-gradient(180deg, var(--ed-primary-softer), var(--ed-surface));
  margin: -22px -22px 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--ed-border);
}

.ed-quick-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ed-quick-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 16px 18px 18px;
  border-radius: 20px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: var(--ed-shadow-xs);
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), box-shadow .24s, border-color .24s;
  isolation: isolate;
}

.ed-quick-link::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  opacity: 1;
  transition: opacity .22s;
}

.ed-quick-link::after {
  content: "";
  position: absolute;
  inset: auto -18px -18px auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  opacity: .07;
  pointer-events: none;
  transition: transform .3s;
}

.ed-quick-link:nth-child(1)::before {
  background: linear-gradient(180deg, #0A7CC0, #3AA0E0);
}

.ed-quick-link:nth-child(2)::before {
  background: linear-gradient(180deg, #0FBF9F, #34D8B8);
}

.ed-quick-link:nth-child(3)::before {
  background: linear-gradient(180deg, #F59E0B, #FBBF24);
}

.ed-quick-link:nth-child(4)::before {
  background: linear-gradient(180deg, #7C3AED, #A78BFA);
}

.ed-quick-link:nth-child(1)::after {
  background: radial-gradient(circle, #0A7CC0 0%, transparent 70%);
}

.ed-quick-link:nth-child(2)::after {
  background: radial-gradient(circle, #0FBF9F 0%, transparent 70%);
}

.ed-quick-link:nth-child(3)::after {
  background: radial-gradient(circle, #F59E0B 0%, transparent 70%);
}

.ed-quick-link:nth-child(4)::after {
  background: radial-gradient(circle, #7C3AED 0%, transparent 70%);
}

.ed-quick-link:nth-child(1) {
  background: linear-gradient(180deg, #F2F9FE 0%, #FFFFFF 62%);
}

.ed-quick-link:nth-child(2) {
  background: linear-gradient(180deg, #EEF8F5 0%, #FFFFFF 62%);
}

.ed-quick-link:nth-child(3) {
  background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 62%);
}

.ed-quick-link:nth-child(4) {
  background: linear-gradient(180deg, #F5F3FF 0%, #FFFFFF 62%);
}

.ed-quick-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--ed-shadow-md);
  border-color: var(--ed-primary-border);
  text-decoration: none;
}

.ed-quick-link:hover::after {
  transform: scale(1.15);
}

.ed-quick-link .ic {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(22, 50, 74, .12);
  border: 1px solid rgba(255, 255, 255, .95);
  position: relative;
  z-index: 1;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1);
}

.ed-quick-link:hover .ic {
  transform: scale(1.06) rotate(-3deg);
}

.ed-quick-link:nth-child(1) .ic {
  background: linear-gradient(135deg, #E0F0FE, #B9DDF2);
  color: #0A7CC0;
}

.ed-quick-link:nth-child(2) .ic {
  background: linear-gradient(135deg, #D1F5EB, #A8E6D8);
  color: #0A7A62;
}

.ed-quick-link:nth-child(3) .ic {
  background: linear-gradient(135deg, #FDE9CC, #FDE68A);
  color: #92400E;
}

.ed-quick-link:nth-child(4) .ic {
  background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
  color: #6D28D9;
}

.ed-quick-link .tx {
  display: grid;
  min-width: 0;
  flex: 1;
}

.ed-quick-link .tx .t {
  font-weight: 800;
  color: var(--ed-text);
  font-size: .92rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.ed-quick-link .tx .s {
  font-size: .74rem;
  color: var(--ed-text-muted);
  font-weight: 600;
  margin-top: 3px;
  margin: 0px 10px 0px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ed-quick-link .arr {
  margin-inline-start: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  color: var(--ed-text-muted);
  font-size: .7rem;
  flex-shrink: 0;
  box-shadow: var(--ed-shadow-xs);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.ed-quick-link:hover .arr {
  background: var(--ed-primary);
  color: #fff;
  border-color: var(--ed-primary);
  transform: translateX(2px);
}

[dir="rtl"] .ed-quick-link:hover .arr {
  transform: translateX(-2px);
}

.ed-quick-link .badge-count {
  font-size: .68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--ed-border);
  background: var(--ed-bg);
  color: var(--ed-text-muted);
  flex-shrink: 0;
}

@media (max-width: 575.98px) {

  .ed-quick-link .tx .s,
  .ed-quick-link .badge-count,
  .ed-quick-link .arr {
    display: none !important;
  }
}

/* Form polish inside profile */
.ed-panel .form-control {
  border-radius: 11px;
  border: 1px solid var(--ed-border);
  padding: 10px 13px;
  font-weight: 600;
  transition: border-color .18s, box-shadow .18s;
}

.ed-panel .form-control:focus {
  border-color: var(--ed-primary-border);
  box-shadow: var(--ed-ring);
}

.ed-field label {
  font-size: .78rem;
  font-weight: 800;
  color: var(--ed-text-2);
  margin-bottom: 6px;
  letter-spacing: .02em;
}

[dir="rtl"] .ed-field label {
  letter-spacing: 0;
}

/* - Loading state for buttons - */
.btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .7;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ed-spin .6s linear infinite;
}

@keyframes ed-spin {
  to {
    transform: rotate(360deg);
  }
}

/* - Toast notification - */
.ed-toast {
  pointer-events: auto;
}

/* ==========================================================================
   V2.16 - Premium Dashboard + Appointments + Notifications + Settings
   ========================================================================== */

/* - Dashboard Hero - premium - */
.ed-dash-hero--premium {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(520px 260px at 90% -30%, rgba(255, 255, 255, .14) 0%, transparent 65%),
    radial-gradient(420px 220px at 15% 120%, rgba(15, 191, 159, .18) 0%, transparent 60%),
    linear-gradient(135deg, #0B2340 0%, #0E4A7A 50%, #0A7CC0 100%);
  border-radius: 20px;
  padding: 28px 26px 22px;
  color: #fff;
  box-shadow: 0 16px 40px rgba(11, 35, 64, .22);
}

.ed-dash-hero--premium .hi {
  font-size: clamp(1.45rem, 1.2rem + 1.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 6px;
  color: #fff;
}

[dir="rtl"] .ed-dash-hero--premium .hi {
  letter-spacing: 0;
}

.ed-dash-hero--premium .q {
  color: rgba(255, 255, 255, .78);
  font-weight: 600;
  font-size: .92rem;
  margin: 0 0 18px;
}

.ed-dash-hero--premium .ed-dash-hero__actions .btn {
  border-radius: 999px;
  font-weight: 700;
  padding: 9px 18px;
  font-size: .84rem;
}

.ed-dash-hero--premium .btn-primary {
  background: #fff;
  color: #0B2340;
  border-color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.ed-dash-hero--premium .btn-primary:hover {
  background: #F2F9FE;
  color: #0B2340;
}

.ed-dash-hero--premium .btn-outline-inv {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
}

.ed-dash-hero--premium .btn-outline-inv:hover {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

/* - Dashboard stats - premium metric cards - */
.ed-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 575.98px) {
  .ed-stat-grid {
    grid-template-columns: 1fr;
  }
}

.ed-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--ed-shadow-xs);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

.ed-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ed-shadow-sm);
  border-color: var(--ed-primary-border);
}

.ed-stat-card .ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.ed-stat-card .num {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ed-text);
  letter-spacing: -.02em;
}

[dir="rtl"] .ed-stat-card .num {
  letter-spacing: 0;
}

.ed-stat-card .lbl {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
  margin-top: 3px;
}

[dir="rtl"] .ed-stat-card .lbl {
  letter-spacing: 0;
}

/* - Dashboard quick actions - premium tiles - */
.ed-qa-grid--premium .ed-qa-tile {
  border-radius: 16px;
  padding: 18px 16px;
  gap: 12px;
  border: 1px solid var(--ed-border);
  box-shadow: var(--ed-shadow-xs);
  position: relative;
  overflow: hidden;
}

.ed-qa-grid--premium .ed-qa-tile::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ed-primary), var(--ed-teal));
  opacity: 0;
  transition: opacity .2s;
}

.ed-qa-grid--premium .ed-qa-tile:hover::before {
  opacity: 1;
}

.ed-qa-grid--premium .ed-qa-tile .ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 1.1rem;
}

/* - Dashboard sections - */
.ed-dash-sec {
  margin-bottom: 22px;
}

.ed-dash-sec h2 {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ed-text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

[dir="rtl"] .ed-dash-sec h2 {
  letter-spacing: 0;
}

.ed-dash-sec h2 i {
  color: var(--ed-primary);
}

/* - Next appt premium card - */
.ed-next-appt--premium {
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--ed-shadow-sm);
  border: 1px solid var(--ed-border);
}

.ed-next-appt--premium::before {
  width: 4px;
  border-radius: 18px 0 0 18px;
}

[dir="rtl"] .ed-next-appt--premium::before {
  border-radius: 0 18px 18px 0;
}

.ed-next-appt--today {
  border-color: #FECACA;
  background: linear-gradient(180deg, #FFFBFB, var(--ed-surface));
}

.ed-next-appt--today .when {
  background: var(--ed-danger);
  color: #fff;
}

.ed-next-appt--today .when .d,
.ed-next-appt--today .when .m {
  color: #fff;
}

.ed-next-appt--today .when .cd {
  background: rgba(255, 255, 255, .92);
  color: var(--ed-danger);
}

/* - Medical snapshot - trio - */
.ed-med-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 575.98px) {
  .ed-med-trio {
    grid-template-columns: 1fr;
  }
}

.ed-med-trio__item {
  text-align: center;
  padding: 16px 10px;
  border-radius: 14px;
  border: 1px solid var(--ed-border);
  background: var(--ed-surface);
}

.ed-med-trio__item .ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
  font-size: .95rem;
}

.ed-med-trio__item .k {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
}

[dir="rtl"] .ed-med-trio__item .k {
  letter-spacing: 0;
}

.ed-med-trio__item .v {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ed-text);
  margin-top: 3px;
}

.ed-med-trio__item--blood {
  background: linear-gradient(180deg, #FFFBFB, #FFF);
  border-color: #FECACA;
}

.ed-med-trio__item--blood .ic {
  background: #FDECEC;
  color: var(--ed-danger);
}

.ed-med-trio__item--blood .v {
  color: var(--ed-danger);
}

.ed-med-trio__item--height {
  background: linear-gradient(180deg, #F2F9FE, #FFF);
  border-color: var(--ed-primary-border);
}

.ed-med-trio__item--height .ic {
  background: var(--ed-primary-soft);
  color: var(--ed-primary);
}

.ed-med-trio__item--weight {
  background: linear-gradient(180deg, #F0FDF9, #FFF);
  border-color: #A8E6D8;
}

.ed-med-trio__item--weight .ic {
  background: var(--ed-teal-soft);
  color: #0A7A62;
}

/* - Appointments - premium tabs & cards - */
.ed-seg--premium {
  display: inline-flex;
  gap: 4px;
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: 999px;
  padding: 4px;
}

.ed-seg--premium a {
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ed-text-muted);
  transition: background .18s, color .18s, box-shadow .18s;
  text-decoration: none;
  white-space: nowrap;
}

.ed-seg--premium a:hover {
  color: var(--ed-text);
  text-decoration: none;
}

.ed-seg--premium a.on {
  background: var(--ed-surface);
  color: var(--ed-primary-ink);
  box-shadow: var(--ed-shadow-xs);
  border: 1px solid var(--ed-border);
}

.ed-appt-card--premium {
  border-radius: 16px;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--ed-border);
  box-shadow: var(--ed-shadow-xs);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

.ed-appt-card--premium:hover {
  transform: translateY(-2px);
  box-shadow: var(--ed-shadow-sm);
  border-color: var(--ed-primary-border);
}

.ed-appt-card--premium .when {
  min-width: 72px;
  border-radius: 12px;
  padding: 10px 8px;
}

.ed-appt-card--premium .acts .btn {
  border-radius: 999px;
  font-weight: 700;
  font-size: .78rem;
  padding: 6px 12px;
}

/* - Notifications - premium - */
@keyframes edNotifIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

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

@keyframes edPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .5;
    transform: scale(1.4);
  }
}

.ed-notif-section {
  margin-bottom: 24px;
}

.ed-notif-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ed-notif-section__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  font-size: .85rem;
  flex-shrink: 0;
}

.ed-notif-section__icon--danger {
  background: var(--ed-danger-soft);
  color: var(--ed-danger);
}

.ed-notif-section__icon--primary {
  background: var(--ed-primary-softer);
  color: var(--ed-primary);
}

.ed-notif-section h2 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
  flex: 1;
}

.ed-notif-section__count {
  font-weight: 700;
  font-size: .72rem;
  padding: 3px 10px;
  border-radius: 999px;
}

.ed-notif-section__count--danger {
  background: var(--ed-danger-soft);
  color: var(--ed-danger);
}

.ed-notif-section__count--primary {
  background: var(--ed-primary-softer);
  color: var(--ed-primary-ink);
}

.ed-notif-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ed-notif-stats__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid var(--ed-border);
  background: var(--ed-surface);
  color: var(--ed-text);
  transition: .18s;
}

.ed-notif-stats__pill:hover {
  border-color: var(--ed-primary-border);
}

.ed-notif-stats__pill i {
  font-size: .7rem;
}

.ed-notif-stats__pill--remind {
  color: #92400E;
  background: #FEF3E2;
  border-color: #F5C66A;
}

.ed-notif-stats__pill--recent {
  color: var(--ed-primary-ink);
  background: var(--ed-primary-softer);
  border-color: var(--ed-primary-border);
}

.ed-notif--premium {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: 16px;
  padding: 15px 16px;
  box-shadow: var(--ed-shadow-xs);
  border-inline-start-width: 4px;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s, border-color .2s;
  animation: edNotifIn .4s cubic-bezier(.16, 1, .3, 1) both;
}

.ed-notif--premium:nth-child(2) {
  animation-delay: .05s;
}

.ed-notif--premium:nth-child(3) {
  animation-delay: .1s;
}

.ed-notif--premium:nth-child(4) {
  animation-delay: .15s;
}

.ed-notif--premium:nth-child(5) {
  animation-delay: .2s;
}

.ed-notif--premium:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(22, 50, 74, .09), 0 0 0 1px var(--ed-border);
}

.ed-notif--premium .ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: transform .22s;
  position: relative;
}

.ed-notif--premium:hover .ic {
  transform: scale(1.08) rotate(-4deg);
}

.ed-notif--premium .tx {
  flex: 1;
  min-width: 0;
}

.ed-notif--premium .tx .t {
  font-weight: 800;
  color: var(--ed-text);
  font-size: .92rem;
}

.ed-notif--premium .tx .s {
  font-size: .8rem;
  color: var(--ed-text-muted);
  font-weight: 600;
  margin-top: 3px;
}

.ed-notif--premium .tx .tx-sub {
  font-weight: 600;
  color: var(--ed-text-muted);
}

.ed-notif--premium .tx .s .tx-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .78rem;
}

.ed-notif--premium .btn {
  border-radius: 999px;
  flex-shrink: 0;
}

.ed-notif--premium--today {
  background: linear-gradient(180deg, var(--ed-surface), #FFFBFB);
}

.ed-notif-pulse {
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ed-danger);
  animation: edPulse 1.6s ease-in-out infinite;
}

/* - Notifications - empty state - */
.ed-notif-empty {
  border: 2px dashed var(--ed-border);
  border-radius: 24px;
  background: var(--ed-surface);
  padding: 56px 24px;
  text-align: center;
  box-shadow: var(--ed-shadow-sm);
}

.ed-notif-empty__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--ed-primary-softer);
  color: var(--ed-primary);
  font-size: 1.8rem;
  margin-bottom: 18px;
}

.ed-notif-empty__icon::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1.5px dashed var(--ed-primary-border);
  border-radius: 50%;
  opacity: .7;
}

.ed-notif-empty h4 {
  font-weight: 800;
  color: var(--ed-text);
  margin: 0 0 4px;
}

.ed-notif-empty p {
  color: var(--ed-text-muted);
  font-weight: 600;
  margin: 6px 0 0;
  font-size: var(--ed-fs-sm);
}

/* - Notifications - app banner - */
.ed-app-banner {
  position: relative;
  border-radius: 22px;
  padding: 20px 22px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: #fff;
  background:
    radial-gradient(420px 200px at 92% -20%, rgba(255, 255, 255, .14) 0%, transparent 60%),
    radial-gradient(300px 180px at -8% 120%, rgba(15, 191, 159, .25) 0%, transparent 60%),
    linear-gradient(135deg, #10263D 0%, #0C1B2C 60%, #0A1522 100%);
  box-shadow: 0 14px 30px rgba(12, 27, 44, .25);
}

.ed-app-banner::after {
  content: "";
  position: absolute;
  inset-inline-end: -40px;
  top: -40px;
  width: 150px;
  height: 150px;
  border: 1.5px dashed rgba(255, 255, 255, .12);
  border-radius: 50%;
  pointer-events: none;
}

.ed-app-banner__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #34A853, #1E7E34);
  color: #fff;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(52, 168, 83, .35);
}

.ed-app-banner__text {
  flex: 1;
  min-width: 200px;
  font-size: .88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

.ed-app-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #34A853, #1E7E34);
  box-shadow: 0 6px 16px rgba(52, 168, 83, .35);
  transition: transform .18s, box-shadow .18s, filter .18s;
  white-space: nowrap;
}

[dir="rtl"] .ed-app-banner__btn {
  direction: rtl;
}

.ed-app-banner__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(52, 168, 83, .45);
  filter: brightness(1.06);
  color: #fff;
}

.ed-app-banner__btn:active {
  transform: translateY(0) scale(.97);
}

/* - Settings - premium - */
.ed-settings-card {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--ed-shadow-xs);
}

.ed-settings-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ed-border);
  background: linear-gradient(180deg, var(--ed-primary-softer), var(--ed-surface));
}

.ed-settings-card__head h3 {
  font-size: .95rem;
  font-weight: 800;
  margin: 0;
  color: var(--ed-text);
}

.ed-settings-card__head i {
  color: var(--ed-primary);
}

.ed-settings-card__body {
  padding: 18px;
}

.ed-settings-card__body p i,
.ed-settings-card__body h3 i {
  margin-inline-end: 7px;
}

.ed-lang-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ed-lang-pills .btn {
  border-radius: 999px;
  font-weight: 700;
  padding: 8px 16px;
  font-size: .84rem;
}

.ed-lang-pills .btn-soft {
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  color: var(--ed-text-muted);
}

.ed-lang-pills .btn-soft:hover {
  background: var(--ed-surface);
  color: var(--ed-text);
  border-color: var(--ed-border-strong);
}

.ed-lang-pills .btn-primary {
  box-shadow: 0 4px 12px rgba(10, 124, 192, .22);
}

.tx t {
  margin: 0px 6px 0px 6px;
}

/* - Premium page header (used on settings/addresses/medical/notifications/appointments) - */
.ed-page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.ed-page-head__back {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  color: var(--ed-text-2);
  box-shadow: var(--ed-shadow-xs);
  flex-shrink: 0;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.ed-page-head__back:hover {
  transform: translateY(-1px);
  box-shadow: var(--ed-shadow-sm);
  border-color: var(--ed-primary-border);
  color: var(--ed-text);
  text-decoration: none;
}

.ed-page-head__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0A7CC0 0%, #0A6EB0 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(10, 124, 192, .28);
  flex-shrink: 0;
  font-size: 1.05rem;
}

.ed-page-head__icon--teal {
  background: linear-gradient(135deg, #0FBF9F 0%, #0A9A7F 100%);
  box-shadow: 0 8px 18px rgba(15, 191, 159, .25);
}

.ed-page-head__icon--pink {
  background: linear-gradient(135deg, #F03D7E 0%, #D92E6C 100%);
  box-shadow: 0 8px 18px rgba(240, 61, 126, .25);
}

.ed-page-head__icon--amber {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  box-shadow: 0 8px 18px rgba(245, 158, 11, .25);
}

.ed-page-head__titles {
  min-width: 0;
  flex: 1;
}

.ed-page-head__titles h1 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ed-text);
  line-height: 1.15;
}

[dir="rtl"] .ed-page-head__titles h1 {
  letter-spacing: 0;
}

.ed-page-head__titles p {
  margin: 3px 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ed-text-muted);
}

.ed-page-head__badge {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.ed-page-head__badge--ok {
  color: var(--ed-success);
  background: var(--ed-success-soft);
  border: 1px solid #A7F3D0;
}

.ed-page-head__badge--done {
  color: var(--ed-primary-ink);
  background: var(--ed-primary-softer);
  border: 1px solid var(--ed-primary-border);
}

.ed-page-head__badge--cancel {
  color: var(--ed-danger);
  background: var(--ed-danger-soft);
  border: 1px solid #FECACA;
}

.ed-page-head__badge--amber {
  color: #92400E;
  background: #FEF3E2;
  border: 1px solid #F5C66A;
}

[dir="rtl"] .ed-page-head__badge {
  letter-spacing: 0;
}

/* - Dashboard - icon spacing for h3/p - */
.ed-dash-sec h2 i,
.ed-dash-sec h3 i,
.ed-panel h3 i,
.ed-panel p i,
.ed-dash-hero i {
  margin-inline-end: 7px;
}

/* keep gap for flex headings but add breathing room for inline icons */
.ed-dash-sec h2 i:last-child,
.ed-panel h3 i:last-child {
  margin-inline-end: 0;
}

/* - Appointments - icon spacing for span/a/p/h3 - */
.ed-appt-card .sub span i,
.ed-appt-card .det .nm i,
.ed-appt-card .acts a i,
.ed-appt-card .acts button i,
.ed-seg a i,
.ed-empty h4 i,
.ed-empty p i,
.ed-empty a i,
.ed-appt-row .who i,
.ed-appt-row .sub i {
  margin-inline-end: 6px;
}

/* - Appointments - icon spacing for div - */
.ed-appt-card i+div,
.ed-pcontent i+div {
  margin-inline-start: 6px;
}

/* - Appointment details - icon spacing for p/h3/span/a/div - */
.ed-next-appt p i,
.ed-next-appt h3 i,
.ed-next-appt span i,
.ed-next-appt a i,
.ed-detail-grid p i,
.ed-detail-grid h3 i,
.ed-detail-grid span i,
.ed-detail-grid a i,
.ed-detail-item p i,
.ed-detail-item h3 i,
.ed-detail-item span i,
.ed-detail-item a i,
.ed-panel p i,
.ed-panel h3 i,
.ed-panel span i,
.ed-panel a i,
.ed-timeline p i,
.ed-timeline h3 i,
.ed-timeline span i,
.ed-timeline a i {
  margin-inline-end: 8px !important;
}

.ed-pcontent i+p,
.ed-pcontent i+h3,
.ed-pcontent i+span,
.ed-pcontent i+a,
.ed-pcontent i+div {
  margin-inline-start: 8px !important;
}

.ed-panel__head h3 i,
.ed-next-appt .info h3 i,
.ed-next-appt .info .lbl i {
  margin-inline-end: 8px !important;
}

/* - Family - icon spacing for p/div - */
.ed-family-card p i,
.ed-family-card div i,
.ed-family-head p i,
.ed-family-head div i,
.ed-family-grid p i,
.ed-family-grid div i,
.ed-pcontent--family p i,
.ed-pcontent--family div i {
  margin-inline-end: 7px !important;
}

.ed-family-card i+p,
.ed-family-card i+div,
.ed-pcontent--family i+p,
.ed-pcontent--family i+div {
  margin-inline-start: 7px !important;
}

.ed-pcontent i+p,
.ed-pcontent i+h3,
.ed-pcontent i+span,
.ed-pcontent i+a,
.ed-pcontent i+div {
  margin-inline-start: 6px;
}

/* - Document viewer modal - */
.ed-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.ed-modal.on {
  opacity: 1;
  pointer-events: auto;
}

.ed-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ed-modal__card {
  position: relative;
  z-index: 1;
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  background: transparent;
  border-radius: 20px;
  overflow: hidden;
  transform: translateY(20px) scale(.96);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}

.ed-modal.on .ed-modal__card {
  transform: translateY(0) scale(1);
}

/* - Family page - ed-pcontent premium - */
.ed-pcontent--family {
  background:
    radial-gradient(520px 260px at 95% -10%, rgba(10, 124, 192, .06) 0%, transparent 60%),
    radial-gradient(460px 240px at -5% 30%, rgba(15, 191, 159, .05) 0%, transparent 60%),
    var(--ed-bg);
}

/* ================================================================
   APPOINTMENTS PAGE — Mobile + Tablet
   ================================================================ */
@media (max-width: 768px) {

  /* Page header */
  .ed-page-head {
    gap: 10px !important;
  }

  .ed-page-head__icon {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
    border-radius: 12px;
  }

  .ed-page-head__titles h1 {
    font-size: 1.15rem;
  }

  .ed-page-head__titles p {
    font-size: 0.78rem;
  }

  .ed-page-head__badge {
    font-size: 0.68rem;
    padding: 5px 10px;
  }

  /* Segmented tabs */
  .ed-seg {
    width: 100%;
    display: flex;
    border-radius: 14px;
    padding: 4px;
  }

  .ed-seg a {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-size: 0.8rem;
    border-radius: 11px;
    white-space: nowrap;
  }

  /* Appointment card — stacked layout */
  .ed-appt-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
  }

  .ed-appt-card .when {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
    background: none;
    padding: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--ed-border, #e5e7eb);
    padding-bottom: 12px;
  }

  .ed-appt-card .when .d {
    font-size: 1.3rem;
    min-width: 36px;
  }

  .ed-appt-card .when .m {
    font-size: 0.72rem;
  }

  .ed-appt-card .when .y {
    font-size: 0.72rem;
  }

  .ed-appt-card .det {
    min-width: 0;
  }

  .ed-appt-card .det .nm {
    font-size: 0.95rem;
    margin-bottom: 6px;
  }

  .ed-appt-card .det .sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 0.8rem;
  }

  .ed-appt-card .acts {
    display: flex;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--ed-border, #e5e7eb);
  }

  .ed-appt-card .acts .btn {
    flex: 1;
    justify-content: center;
    min-height: 38px;
    font-size: 0.82rem;
  }

  .ed-appt-card .ed-status {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
  }

  .ed-appt-card {
    position: relative;
  }
}

@media (max-width: 480px) {
  .ed-page-head__badge {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .ed-seg a {
    font-size: 0.75rem;
    padding: 9px 6px;
  }

  .ed-appt-card {
    padding: 14px;
    border-radius: 14px;
  }

  .ed-appt-card .when .d {
    font-size: 1.15rem;
  }

  .ed-appt-card .acts {
    flex-direction: column;
  }

  .ed-appt-card .acts .btn {
    width: 100%;
  }

  /* Empty state */
  .ed-empty {
    padding: 36px 16px !important;
    border-radius: 14px !important;
  }

  .ed-empty span[style*="64px"] {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.2rem !important;
  }

  .ed-empty h4 {
    font-size: 1rem !important;
  }

  .ed-empty p {
    font-size: 0.82rem !important;
  }
}

/* ================================================================
   APPOINTMENT DETAIL PAGE — Mobile + Tablet
   ================================================================ */
@media (max-width: 768px) {

  /* Doctor card — stack */
  .ed-next-appt {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
  }

  .ed-next-appt::before {
    width: 100%;
    height: 4px;
    inset: 0 auto auto 0;
    border-radius: 18px 18px 0 0;
  }

  [dir="rtl"] .ed-next-appt::before {
    inset: 0;
  }

  .ed-next-appt img {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    margin: 0 auto;
  }

  .ed-next-appt .info {
    min-width: 0;
    text-align: center;
  }

  .ed-next-appt .info .meta {
    justify-content: center;
  }

  .ed-next-appt .ed-status {
    align-self: center;
  }

  .ed-next-appt .ed-status::before {
    display: none;
  }

  /* Panel */
  .ed-panel {
    border-radius: 16px;
    padding: 18px;
  }

  .ed-panel__head h3 {
    font-size: 1rem;
  }

  /* Detail grid — 1 column */
  .ed-detail-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ed-detail-grid .ed-detail-item {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ed-surface-2, #f7f8fa);
  }

  .ed-detail-grid .ed-detail-item[style*="grid-column"] {
    grid-column: 1 !important;
  }

  /* Timeline */
  .ed-timeline {
    padding-inline-start: 22px;
  }

  .ed-tl-step::before {
    width: 14px;
    height: 14px;
    inset-inline-start: -22px;
  }

  .ed-tl-step .t {
    font-size: 0.88rem;
  }

  .ed-tl-step .s {
    font-size: 0.78rem;
  }

  /* Instructions list */
  .ed-instr-list {
    gap: 10px;
  }

  .ed-instr-list li {
    gap: 8px;
  }

  .ed-instr-list li span {
    font-size: 0.85rem;
  }

  /* Rating */
  #ratingStars {
    font-size: 1.6rem;
    justify-content: center;
  }

  #ratingComment {
    min-height: 80px;
  }

  /* Action buttons row */
  .ed-detail-actions {
    flex-direction: column;
  }

  .ed-detail-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .ed-next-appt {
    padding: 14px;
    border-radius: 14px;
  }

  .ed-next-appt img {
    width: 60px;
    height: 60px;
    border-radius: 16px;
  }

  .ed-next-appt .info h3 {
    font-size: 1rem;
  }

  .ed-panel {
    padding: 14px;
    border-radius: 14px;
  }

  #ratingStars {
    font-size: 1.4rem;
  }
}

/* ================================================================
   NOTIFICATIONS PAGE — Mobile + Tablet
   ================================================================ */
@media (max-width: 768px) {

  /* Notification cards — stack */
  .ed-notif--premium {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
  }

  .ed-notif--premium .ic {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
    border-radius: 11px;
  }

  .ed-notif--premium .tx {
    flex: 1 1 calc(100% - 54px);
  }

  .ed-notif--premium .tx .t {
    font-size: 0.88rem;
  }

  .ed-notif--premium .tx .s {
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .ed-notif--premium .btn {
    width: 100%;
    justify-content: center;
    min-height: 36px;
    font-size: 0.82rem;
  }

  /* Activity rows */
  .ed-appt-row {
    padding: 12px 14px;
    gap: 12px;
  }

  .ed-appt-row .cal {
    width: 40px;
    height: 40px;
  }

  .ed-appt-row .cal .d {
    font-size: 0.88rem;
  }

  .ed-appt-row .who .nm {
    font-size: 0.85rem;
  }

  .ed-appt-row .who .sub {
    font-size: 0.72rem;
  }

  /* Stats pills */
  .ed-notif-stats {
    gap: 8px;
  }

  .ed-notif-stats__pill {
    font-size: 0.75rem;
    padding: 6px 12px;
  }

  /* Section header */
  .ed-notif-section__head h2 {
    font-size: 0.95rem;
  }

  .ed-notif-section__icon {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

  /* Empty state */
  .ed-notif-empty {
    padding: 40px 16px !important;
    border-radius: 18px !important;
  }

  .ed-notif-empty__icon {
    width: 68px;
    height: 68px;
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .ed-notif--premium .tx .s {
    font-size: 0.75rem;
  }

  .ed-notif--premium .btn {
    font-size: 0.78rem;
    min-height: 34px;
  }

  .ed-appt-row {
    padding: 10px 12px;
  }

  .ed-notif-empty {
    padding: 32px 14px !important;
    border-radius: 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   Shared patient page top card (.ed-top)
   One header design for every patient page. Page accent via
   modifier: .ed-top--pink / --blue / --amber / --purple / --teal
   Structure:
     .ed-top[.ed-top--accent]
       .ed-top__head
         a.ed-top__back + span.ed-top__icon + .ed-top__titles + .ed-top__action?
       .ed-top__body?   (search / toolbar)
       .ed-top__meta?   (pills / chips row)
   ════════════════════════════════════════════════════════════ */
.ed-top {
  position: relative;
  overflow: hidden;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: 18px;
  box-shadow: var(--ed-shadow-xs);
  padding: 20px 22px;
  margin-bottom: 20px;
}

.ed-top::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(420px 200px at 92% -30%, var(--top-wash, rgba(10, 124, 192, .08)) 0%, transparent 60%),
    radial-gradient(360px 180px at -10% 120%, rgba(10, 124, 192, .06) 0%, transparent 60%);
}

.ed-top>* {
  position: relative;
}

.ed-top__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ed-top__back {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  color: var(--ed-text-2);
  box-shadow: var(--ed-shadow-xs);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  text-decoration: none;
  flex-shrink: 0;
  font-size: .85rem;
}

.ed-top__back:hover {
  transform: translateY(-1px);
  box-shadow: var(--ed-shadow-sm);
  border-color: var(--ed-primary-border);
  text-decoration: none;
}

.ed-top__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--top-grad, linear-gradient(135deg, var(--ed-primary), #0A6EB0));
  color: #fff;
  box-shadow: var(--top-shadow, 0 8px 18px rgba(10, 124, 192, .28));
  flex-shrink: 0;
  font-size: 1.05rem;
}

.ed-top__titles {
  flex: 1;
  min-width: 0;
}

.ed-top__titles h1 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ed-text);
  line-height: 1.2;
}

[dir="rtl"] .ed-top__titles h1 {
  letter-spacing: 0;
}

.ed-top__titles p {
  margin: 3px 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ed-text-muted);
}

.ed-top__action {
  flex-shrink: 0;
}

.ed-top__body {
  margin-top: 16px;
}

.ed-top .ed-family-search {
  max-width: none;
  margin-bottom: 0;
}

.ed-top__meta {
  margin: 12px 0 0;
}

.ed-top .ed-family-stats {
  margin-bottom: 0;
}

/* Accent modifiers */
.ed-top--pink {
  --top-wash: rgba(240, 61, 126, .10);
  --top-grad: linear-gradient(135deg, #F03D7E, #D92E6C);
  --top-shadow: 0 8px 18px rgba(212, 46, 108, .28);
}

.ed-top--blue {
  --top-wash: rgba(10, 124, 192, .08);
  --top-grad: linear-gradient(135deg, #0A7CC0, #0A6EB0);
  --top-shadow: 0 8px 18px rgba(10, 124, 192, .28);
}

.ed-top--amber {
  --top-wash: rgba(245, 158, 11, .10);
  --top-grad: linear-gradient(135deg, #F59E0B, #D97706);
  --top-shadow: 0 8px 18px rgba(245, 158, 11, .28);
}

.ed-top--purple {
  --top-wash: rgba(139, 92, 246, .10);
  --top-grad: linear-gradient(135deg, #8B5CF6, #6D28D9);
  --top-shadow: 0 8px 18px rgba(124, 58, 237, .28);
}

.ed-top--teal {
  --top-wash: rgba(15, 191, 159, .10);
  --top-grad: linear-gradient(135deg, #0FBF9F, #0A9A7F);
  --top-shadow: 0 8px 18px rgba(15, 191, 159, .25);
}

@media (max-width: 640px) {
  .ed-top {
    padding: 16px;
  }

  .ed-top__head {
    flex-wrap: wrap;
    gap: 12px;
  }

  .ed-top__titles {
    flex: 1 1 calc(100% - 110px);
  }

  .ed-top__titles h1 {
    font-size: 1.2rem;
  }

  .ed-top__action {
    flex: 1 1 100%;
    display: flex;
  }

  .ed-top__action>.btn,
  .ed-top__action>button {
    flex: 1;
    justify-content: center;
  }

  .ed-top__meta {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
  }

  .ed-top__meta>* {
    flex-shrink: 0;
  }
}