/* Aban Teb IPD — foreign-patient portal theme only (.ipd-portal-body / auth / onboard)
   Design: Accessible & Ethical · Primary #0EA5E9 · CTA #F97316 · BG #F0F9FF */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Noto+Sans:wght@400;500;600;700&display=swap');

:root {
  --ipd-primary: #0ea5e9;
  --ipd-primary-deep: #0369a1;
  --ipd-secondary: #38bdf8;
  --ipd-cta: #f97316;
  --ipd-cta-hover: #ea580c;
  --ipd-bg: #f0f9ff;
  --ipd-text: #0c4a6e;
  --ipd-ink: #0f172a;
  --ipd-muted: #475569;
  --ipd-surface: #ffffff;
  --ipd-border: #e2e8f0;
  --ipd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ipd-radius: 1.15rem;
  --ipd-shadow: 0 14px 36px rgba(14, 165, 233, 0.1);
}

/* —— Portal dashboard shell —— */
.ipd-portal-body {
  font-family: "Noto Sans", Manrope, "Segoe UI", sans-serif !important;
  background: var(--ipd-bg);
  color: var(--ipd-ink);
  --sidebar-width: 280px;
  --sidebar-active: var(--ipd-primary);
}

.ipd-portal-body h1,
.ipd-portal-body h2,
.ipd-portal-body h3,
.ipd-portal-body h4,
.ipd-portal-body h5,
.ipd-portal-body .page-title,
.ipd-portal-body .ipd-welcome-title {
  font-family: Figtree, Manrope, "Segoe UI", sans-serif !important;
  letter-spacing: -0.02em;
  color: var(--ipd-ink);
}

html[dir="ltr"] .ipd-portal-body .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 55%, #e0f2fe 100%);
  border-right: 1px solid #bae6fd !important;
  box-shadow: 12px 0 40px rgba(3, 105, 161, 0.08) !important;
}

.ipd-portal-body .sidebar-brand {
  padding: 1.1rem 1rem 0.95rem;
  border-bottom: 1px solid #e0f2fe;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
}

.ipd-portal-body .ipd-sidebar-brand img {
  height: 2.4rem;
  max-width: 108px;
}

.ipd-portal-body .brand-text {
  font-family: Figtree, Manrope, sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ipd-ink);
}

.ipd-portal-body .ipd-sidebar-sub {
  color: var(--ipd-primary-deep);
}

.ipd-portal-body .sidebar-nav {
  padding: 0.75rem 0.65rem 1rem;
  gap: 0.2rem;
}

.ipd-portal-body .sidebar-section-label {
  margin: 1rem 0.55rem 0.4rem;
  color: #64748b;
}

.ipd-portal-body .sidebar-link {
  border-radius: 0.85rem;
  margin: 0.12rem 0;
  padding: 0.62rem 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #334155;
  transition: background 0.2s var(--ipd-ease), color 0.2s var(--ipd-ease), box-shadow 0.2s var(--ipd-ease);
  cursor: pointer;
}

.ipd-portal-body .sidebar-link:hover {
  background: rgba(14, 165, 233, 0.1);
  color: var(--ipd-primary-deep);
}

html[dir="ltr"] .ipd-portal-body .sidebar-link.active {
  background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%);
  color: var(--ipd-primary-deep);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--ipd-primary);
}

.ipd-portal-body .sidebar-link--logout {
  color: #be123c;
}

.ipd-portal-body .sidebar-link--logout:hover {
  background: #fff1f2;
  color: #9f1239;
}

.ipd-portal-body .sidebar-footer {
  border-top: 1px solid #e0f2fe;
  padding: 0.65rem;
  background: rgba(255, 255, 255, 0.55);
}

html[dir="ltr"] .ipd-portal-body .main-content {
  background: var(--ipd-bg);
}

.ipd-portal-body .top-header {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #e0f2fe !important;
  box-shadow: 0 8px 28px rgba(14, 165, 233, 0.06) !important;
  padding: 0.75rem 1.35rem !important;
}

.ipd-portal-body .page-title {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--ipd-ink) !important;
}

.ipd-portal-body .user-profile-chip {
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  border-radius: 999px;
  padding: 0.25rem 0.65rem 0.25rem 0.25rem;
}

.ipd-portal-body .user-profile-chip__avatar--patient {
  background: linear-gradient(145deg, #0ea5e9, #0369a1);
  color: #fff;
  font-weight: 800;
}

.ipd-portal-body .content-area:not(.content-area--flush) {
  padding: 1.35rem 1.35rem 2.25rem;
  background: transparent;
}

/* Shared page hero (non-travel) */
.ipd-portal-body .ipd-page-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ipd-radius);
  padding: 1.35rem 1.4rem 1.45rem;
  margin-bottom: 1.25rem;
  color: #fff;
  background:
    linear-gradient(125deg, rgba(3, 105, 161, 0.94) 0%, rgba(14, 165, 233, 0.88) 48%, rgba(8, 145, 178, 0.9) 100%);
  box-shadow: var(--ipd-shadow);
}

.ipd-portal-body .ipd-page-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% 40%;
  height: 140%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 65%);
  pointer-events: none;
}

.ipd-portal-body .ipd-page-hero > * {
  position: relative;
  z-index: 1;
}

.ipd-portal-body .ipd-page-hero .ipd-kicker,
.ipd-portal-body .ipd-page-hero .ov-ipd-kicker {
  color: rgba(224, 242, 254, 0.95);
}

.ipd-portal-body .ipd-page-hero h1,
.ipd-portal-body .ipd-page-hero .ipd-welcome-title,
.ipd-portal-body .ipd-page-hero .ov-ipd-title {
  margin: 0.35rem 0 0;
  color: #fff !important;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 800;
}

.ipd-portal-body .ipd-page-hero p,
.ipd-portal-body .ipd-page-hero .ipd-appt__lead,
.ipd-portal-body .ipd-page-hero .ov-ipd-lead,
.ipd-portal-body .ipd-page-hero .ipd-home__lead {
  color: rgba(240, 249, 255, 0.92) !important;
  max-width: 40rem;
}

/* Panels / cards inside portal */
.ipd-portal-body .panel-card,
.ipd-portal-body .ipd-appt__panel {
  border: 1px solid var(--ipd-border) !important;
  border-radius: var(--ipd-radius) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05) !important;
  background: var(--ipd-surface) !important;
  overflow: hidden;
}

.ipd-portal-body .panel-header {
  border-bottom: 1px solid #e0f2fe;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 0.95rem 1.1rem;
}

.ipd-portal-body .panel-header h5 {
  margin: 0;
  font-weight: 800;
  font-size: 1.02rem;
}

.ipd-portal-body .alert {
  border-radius: 0.9rem;
}

/* Shared CTAs */
.ipd-portal-body .ipd-home-cta,
.ipd-portal-body .ipd-btn-primary,
.ipd-portal-body a.ipd-home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ipd-cta);
  color: #fff !important;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0.7rem 1.2rem;
  text-decoration: none;
  border: 0;
  box-shadow: 0 12px 24px rgba(249, 115, 22, 0.28);
  cursor: pointer;
  transition: background 0.2s var(--ipd-ease), transform 0.2s var(--ipd-ease);
}

.ipd-portal-body .ipd-home-cta:hover,
.ipd-portal-body .ipd-btn-primary:hover {
  background: var(--ipd-cta-hover);
  transform: translateY(-1px);
  color: #fff !important;
}

.ipd-portal-body .ipd-home-cta-secondary,
.ipd-portal-body .ipd-btn-ghost,
.ipd-portal-body a.ipd-home-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #7dd3fc;
  background: #fff;
  color: var(--ipd-primary-deep) !important;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.65rem 1.05rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ipd-ease), border-color 0.2s var(--ipd-ease);
}

.ipd-portal-body .ipd-home-cta-secondary:hover,
.ipd-portal-body .ipd-btn-ghost:hover {
  background: #e0f2fe;
  border-color: #38bdf8;
}

.ipd-portal-body a:focus-visible,
.ipd-portal-body button:focus-visible,
.ipd-portal-body input:focus-visible,
.ipd-portal-body select:focus-visible,
.ipd-portal-body textarea:focus-visible {
  outline: 3px solid rgba(14, 165, 233, 0.45);
  outline-offset: 2px;
}

/* —— Home —— */
.ipd-portal-body .ipd-home {
  max-width: none;
  gap: 1.25rem;
}

.ipd-portal-body .ipd-home__hero.ipd-page-hero {
  margin-bottom: 0;
}

.ipd-portal-body .ipd-home-steps__item {
  border: 1px solid var(--ipd-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.ipd-portal-body .ipd-home-steps__item.is-now {
  border-color: #7dd3fc;
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.12);
}

.ipd-portal-body .ipd-home-steps__item.is-done {
  border-color: #a7f3d0;
}

.ipd-portal-body .ipd-home-focus {
  border-radius: var(--ipd-radius);
  border: 1px solid #bae6fd;
  background: linear-gradient(160deg, #ffffff 0%, #f0f9ff 100%);
  box-shadow: var(--ipd-shadow);
}

.ipd-portal-body .ipd-home-travel {
  border-radius: var(--ipd-radius);
  border: 1px solid #bae6fd;
  background: linear-gradient(145deg, #ffffff 0%, #ecfeff 100%);
  box-shadow: 0 10px 28px rgba(8, 145, 178, 0.08);
}

.ipd-portal-body .ipd-home-travel__cards a {
  cursor: pointer;
  transition: transform 0.2s var(--ipd-ease), border-color 0.2s var(--ipd-ease), box-shadow 0.2s var(--ipd-ease);
}

.ipd-portal-body .ipd-home-travel__cards a:hover {
  transform: translateY(-2px);
  border-color: #38bdf8;
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.14);
}

.ipd-portal-body .ipd-home-upcoming {
  border-radius: var(--ipd-radius);
  border: 1px solid var(--ipd-border);
  background: #fff;
  padding: 1rem 1.1rem;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.ipd-portal-body .ipd-home-links a {
  border-radius: 999px;
  border: 1px solid #e0f2fe;
  background: #fff;
  padding: 0.4rem 0.75rem;
  font-weight: 700;
  color: var(--ipd-primary-deep);
  text-decoration: none;
  transition: background 0.2s var(--ipd-ease);
  cursor: pointer;
}

.ipd-portal-body .ipd-home-links a:hover {
  background: #e0f2fe;
}

/* —— Appointments —— */
.ipd-portal-body .ipd-appt {
  gap: 1.25rem;
}

.ipd-portal-body .ipd-appt__hero {
  max-width: none;
}

.ipd-portal-body .ipd-match {
  background: linear-gradient(135deg, #ecfeff 0%, #f0f9ff 55%, #fff 100%);
  border-color: #7dd3fc;
  border-radius: var(--ipd-radius);
  box-shadow: 0 12px 32px rgba(14, 165, 233, 0.1);
}

.ipd-portal-body .ipd-match-card__select {
  background: var(--ipd-cta);
  border: 0;
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ipd-ease);
}

.ipd-portal-body .ipd-match-card__select:hover {
  background: var(--ipd-cta-hover);
}

/* —— Online visit —— */
.ipd-portal-body .ov-ipd-hero {
  border-radius: var(--ipd-radius);
  padding: 1.25rem 1.35rem;
  color: #fff;
  background: linear-gradient(125deg, #0369a1, #0ea5e9 55%, #0891b2);
  box-shadow: var(--ipd-shadow);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.ipd-portal-body .ov-ipd-kicker {
  color: #e0f2fe;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin: 0;
}

.ipd-portal-body .ov-ipd-title {
  color: #fff !important;
  margin: 0.3rem 0 0;
  font-weight: 800;
}

.ipd-portal-body .ov-ipd-lead {
  color: rgba(240, 249, 255, 0.92) !important;
  margin: 0.4rem 0 0;
}

.ipd-portal-body .ov-ipd-ghost,
.ipd-portal-body .ov-ipd-refresh {
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s var(--ipd-ease), border-color 0.2s var(--ipd-ease);
}

.ipd-portal-body .ov-ipd-ghost {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  text-decoration: none;
  padding: 0.55rem 1rem;
}

.ipd-portal-body .ov-ipd-ghost:hover {
  background: rgba(255, 255, 255, 0.22);
}

.ipd-portal-body .ov-ipd-refresh {
  border: 0;
  background: var(--ipd-cta);
  color: #fff;
  padding: 0.55rem 1rem;
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.28);
}

.ipd-portal-body .ov-ipd-refresh:hover {
  background: var(--ipd-cta-hover);
}

/* —— Auth pages (login / register) —— */
.ipd-auth-page {
  font-family: "Noto Sans", Manrope, "Segoe UI", sans-serif !important;
  background: var(--ipd-bg) !important;
  min-height: 100vh;
}

.ipd-auth-page h1,
.ipd-auth-page h2 {
  font-family: Figtree, Manrope, sans-serif !important;
}

.ipd-auth-page .main-header,
.ipd-auth-page .header-sticky {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e0f2fe;
}

.ipd-auth-page .btn-default,
.ipd-auth-page .btn-highlighted {
  background: var(--ipd-cta) !important;
  border-color: var(--ipd-cta) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.25);
  cursor: pointer;
}

.ipd-auth-page .btn-default:hover,
.ipd-auth-page .btn-highlighted:hover {
  background: var(--ipd-cta-hover) !important;
  border-color: var(--ipd-cta-hover) !important;
}

.ipd-auth-page .ipd-auth-aside {
  border-radius: 1.35rem !important;
  background: linear-gradient(145deg, #0369a1 0%, #0ea5e9 55%, #0891b2 100%) !important;
  color: #fff !important;
  box-shadow: var(--ipd-shadow);
  padding: 1.75rem !important;
}

.ipd-auth-page .ipd-auth-card {
  border-radius: 1.35rem !important;
  border: 1px solid #e0f2fe !important;
  box-shadow: 0 16px 40px rgba(14, 165, 233, 0.1) !important;
  background: #fff !important;
}

.ipd-auth-page .form-control {
  border-radius: 0.85rem !important;
  border-color: #cbd5e1 !important;
  padding: 0.7rem 0.9rem !important;
}

.ipd-auth-page .form-control:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.2) !important;
}

/* —— Standalone onboarding (foreign patients) —— */
.ipd-onboard-body,
.ipd-care-body {
  font-family: "Noto Sans", Manrope, "Segoe UI", sans-serif !important;
  background: var(--ipd-bg) !important;
}

.ipd-onboard-body h1,
.ipd-onboard-body h2,
.ipd-onboard-body h3,
.ipd-care-body h1,
.ipd-care-body h2,
.ipd-care-body h3 {
  font-family: Figtree, Manrope, sans-serif !important;
}

.ipd-onboard-body .po-brand-bar,
.ipd-care-body .ipd-care-top {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e0f2fe;
  backdrop-filter: blur(10px);
}

.ipd-onboard-body .po-card,
.ipd-care-body .ipd-care-panel {
  border-radius: 1.25rem !important;
  border: 1px solid #e0f2fe !important;
  box-shadow: 0 14px 36px rgba(14, 165, 233, 0.1) !important;
}

.ipd-onboard-body .ipd-btn-primary,
.ipd-care-body .ipd-btn-primary,
.ipd-care-body button.ipd-btn-primary {
  background: var(--ipd-cta) !important;
  border-color: var(--ipd-cta) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.25);
  cursor: pointer;
}

.ipd-care-body .ipd-journey-hero {
  border-radius: 1.25rem;
  background: linear-gradient(125deg, #0369a1, #0ea5e9 55%, #0891b2);
  color: #fff;
  padding: 1.35rem 1.4rem;
  box-shadow: var(--ipd-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .ipd-portal-body *,
  .ipd-auth-page *,
  .ipd-onboard-body *,
  .ipd-care-body * {
    transition: none !important;
    animation: none !important;
  }
}