/* ==========================================================
   ZEN HOSPITAL AI — TARGETED DESIGN FIXES
   Loaded on all pages after the inline zen CSS block.
   Fixes inconsistencies without duplicating the full system.
   ========================================================== */

/* ── 0. GLOBAL OVERFLOW GUARD — prevents horizontal scroll on all devices ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ── 1. CONTENT WIDTH (text pages stay readable at ≤860px) ── */
.content {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 2. CARD CLIPPING (feat & faq-item need position:relative for ::before) ── */
.feat, .faq-item {
  position: relative !important;
  overflow: hidden !important;
}

/* ── 3. FEAT ICON — consistent dark-theme styling ── */
.feat-icon {
  background: rgba(55, 116, 255, .14) !important;
  border: 1px solid rgba(151, 190, 255, .22) !important;
  border-radius: 14px !important;
}

/* ── 4. LANG SWITCHER — unified dropdown layout ── */
/* Container */
.lang-switcher {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* Trigger button */
.lang-trigger {
  width: 52px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 8px !important;
  cursor: pointer !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.lang-trigger:hover {
  border-color: hsl(213,68%,70%) !important;
  box-shadow: 0 4px 12px rgba(59,130,246,.12) !important;
}
.lang-switcher.open .lang-trigger {
  border-color: hsl(213,68%,60%) !important;
  box-shadow: 0 6px 18px rgba(59,130,246,.15) !important;
}
/* Flag + caret inside trigger */
.lang-current-flag, .lang-option-flag {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}
.lang-current-flag svg, .lang-option-flag svg {
  width: 24px !important;
  height: 16px !important;
  display: block !important;
  border-radius: 3px !important;
}
.lang-caret {
  width: 11px !important;
  height: 11px !important;
  transition: transform .15s !important;
  color: #94a3b8 !important;
}
.lang-switcher.open .lang-caret { transform: rotate(180deg) !important; }
/* Dropdown menu */
.lang-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 240 !important;
  display: none !important;
  grid-template-columns: repeat(5,1fr) !important;
  gap: 8px !important;
  width: 248px !important;
  padding: 10px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
  backdrop-filter: none !important;
}
.lang-switcher.open .lang-menu { display: grid !important; }
/* Option buttons inside dropdown */
.lang-option {
  width: 100% !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: transform .12s, border-color .12s, background .12s !important;
}
.lang-option:hover {
  background: hsl(213,68%,95%) !important;
  border-color: hsl(213,68%,70%) !important;
  transform: translateY(-1px) !important;
}
.lang-option.active {
  background: hsl(213,68%,92%) !important;
  border-color: hsl(213,68%,60%) !important;
  box-shadow: 0 4px 12px rgba(59,130,246,.12) !important;
}
/* Legacy emoji .lang-btn pills (fallback) */
.lang-btn {
  width: 30px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(10,25,66,.65) !important;
  border: 1px solid rgba(151,190,255,.22) !important;
  color: #c7d9ff !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s !important;
}
.lang-btn:hover, .lang-btn.active {
  background: rgba(84,132,255,.22) !important;
  border-color: rgba(124,190,255,.48) !important;
  color: #fff !important;
}

/* ── 5. HEADER HEIGHT CONSISTENCY (all pages 58px) ── */
.hdr {
  min-height: 58px !important;
  width: 100% !important;
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.hdr-center {
  display: none !important;
}

.hdr-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  position: relative !important;
  z-index: 260 !important;
}

.hdr-util {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-left: 12px !important;
  border-left: 1px solid #e2e8f0 !important;
}

/* ── 6. PAGE HERO PADDING — uniform across pages ── */
.page-hero {
  padding-top: 48px !important;
  padding-bottom: 28px !important;
}

/* ── 7. FEATURES GRID — uniform gap ── */
.features {
  gap: 18px !important;
}

/* ── 8. FOOTER — light theme pale blue ── */
footer {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  background: #eff6ff !important;
  border-top: 1px solid #c7dfff !important;
  box-shadow: none !important;
}
.footer-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* ── 9. DEMO SECTION ── */
.demo-section {
  background: rgba(10, 25, 66, .72) !important;
  border: 1px solid rgba(151, 190, 255, .18) !important;
  border-radius: 14px !important;
}

/* ── 10. BACK LINK consistent color ── */
.back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 16px !important;
}

/* ── 11. LOGO MARK — consistent glow ── */
.logo-mark svg, .hdr-logo > svg {
  filter: drop-shadow(0 0 12px rgba(99,179,255,.5)) !important;
}

/* ── 12. COUNTER BADGE layout fix ── */
.counter-badge {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  color: #475569 !important;
}

/* ── 13. INDEX HERO — compact, professional, symmetric layout ── */
.hero-outer {
  padding-top: 14px !important;
  padding-bottom: 0 !important;
}

/* Horizontal padding only — leaves inline padding-bottom on card wrapper intact */
.hero-inner {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* Reduce breathing room below the card (overrides the inline padding-bottom:28px) */
.hero-inner:has(.consult-card) {
  padding-bottom: 14px !important;
}

.hero-label {
  margin-bottom: 8px !important;
  font-size: 11px !important;
}

.hero-title {
  font-size: clamp(22px, 1.8vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
  margin-bottom: 6px !important;
  white-space: normal !important;
}

.hero-title-accent {
  display: inline !important;
  color: #e91e8c !important;
}

.hero-subtitle {
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin-bottom: 12px !important;
  color: #64748b !important;
}

.consult-card {
  margin-bottom: 0 !important;
}

/* Content determines height — no forced min-height */
.card-split {
  min-height: 0 !important;
}

/* ── Card structural lines ── */
.tier-switch {
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 16px 20px !important;
  gap: 14px !important;
}

.tier-switch-prem-focus {
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

.tier-tab {
  padding: 14px 14px 12px !important;
  gap: 4px !important;
  min-height: 118px !important;
}

.tier-tab-premium {
  padding-top: 16px !important;
}

/* Single-column mode (V05): card shows ONE column at a time based on tier.
   border-right must be NONE — in 1-col mode it renders as a spurious right-edge line. */
.card-col-left {
  border-right: none !important;
}

/* ── 14. FOOTER SOCIALS — light theme, small icons ── */
.footer-socials .fsoc {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border: 1px solid #c7dfff !important;
  background: #fff !important;
  color: #6b8fcf !important;
  box-shadow: none !important;
  transition: transform .14s ease, color .14s ease, border-color .14s ease, background .14s ease !important;
}

.footer-socials .fsoc svg {
  width: 13px !important;
  height: 13px !important;
}

.footer-socials .fsoc:hover,
.footer-socials .fsoc:focus-visible {
  color: #fff !important;
  border-color: hsl(213,72%,48%) !important;
  background: hsl(213,72%,48%) !important;
  box-shadow: none !important;
}

.footer-socials .fsoc:active {
  transform: translateY(1px) scale(.97) !important;
  color: #fff !important;
  background: hsl(213,72%,40%) !important;
}

.col-header {
  padding: 12px 18px 10px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

.col-body {
  padding: 12px 18px !important;
}

.col-footer {
  padding: 10px 18px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

textarea.fi {
  min-height: 60px !important;
}

.field-solo {
  margin-bottom: 6px !important;
}

.field-group {
  margin-bottom: 6px !important;
}

/* ── 14. MOBILE: nav hidden – show 'Despre' link only if screen allows ── */
@media (max-width: 768px) {
  .hero-outer {
    padding-top: 12px !important;
  }

  .hero-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .nav-hide { display: none !important; }
  .hdr-center { display: none !important; }
  .hdr-right { margin-left: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CROSS-BROWSER COMPATIBILITY
   Chrome 90+  ·  Safari 14+ (iOS/macOS)  ·  Samsung Internet 14+
   Firefox 90+  ·  Edge 90+  ·  iPhone SE → iPhone 15 Pro Max
   Samsung Galaxy S20 → S24 · Pixel · OnePlus · Xiaomi
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tap highlight: elimina flash-ul gri la tap pe iOS/Android ── */
a, button, [role="button"], input, select, textarea, label {
  -webkit-tap-highlight-color: transparent;
}

/* ── Position sticky cu prefix webkit (Safari vechi) ── */
header {
  position: -webkit-sticky !important;
  position: sticky !important;
}

/* ── Backdrop-filter: Safari necesita prefix -webkit- ── */
header,
.toast,
[style*="backdrop-filter"] {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ── Appearance reset: evita stilul nativ pe iOS/Android ── */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ── User-select cu prefix webkit ── */
.mc-plan-bar, .mc-step-num, .badge,
.mc-plan-name, .hdr-brand-name {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ═══ iOS CRITIC: font-size minim 16px pe campuri mobile
     Sub 16px → Safari auto-zoomează la focus ══════════════ */
@media (max-width: 900px) {
  textarea.mc-obs,
  input.mc-input,
  textarea.mc-input,
  .mc-input,
  .pay-field input,
  .pay-email-input,
  .prem-unlocked-field input,
  .field input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  select.mc-input,
  select.fi,
  textarea.fi,
  .fi {
    font-size: 16px !important;
  }
}

/* ── Autofill: elimina fundalul galben Chrome/Safari ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #1a1a2e !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Autofill pe campuri premium (roz) */
.pay-field input:-webkit-autofill,
.pay-email-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff8fc inset !important;
  box-shadow: 0 0 0 1000px #fff8fc inset !important;
}

/* ── Momentum scroll iOS ── */
.mc-body,
.mobile-card,
[id$="Body"],
.admin-table-wrap {
  -webkit-overflow-scrolling: touch;
}

/* ── Safe area insets: iPhone X/11/12/13/14/15 (notch + Dynamic Island) ── */
@supports (padding: max(0px)) {
  #cookieBanner {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  .mc-footer {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ── Viewport height: dvh fix pentru iOS Safari (bara de adresa) ── */
@supports (height: 100dvh) {
  .intro-screen { height: 100dvh !important; }
}
.intro-screen {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* ── Spinner: webkit animation prefix ── */
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.spinner {
  -webkit-animation: spin .7s linear infinite;
  animation: spin .7s linear infinite;
}

/* ── Mic pulse: webkit prefix ── */
@-webkit-keyframes micPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
.mic-btn.mic-recording {
  -webkit-animation: micPulse .7s ease-in-out infinite;
  animation: micPulse .7s ease-in-out infinite;
}

/* ── Mic btn: icon simplu, fara cerc, colt dreapta-jos pe textarea ── */
.mic-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  bottom: 8px !important;
  top: auto !important;
  -webkit-transform: none !important;
  transform: none !important;
}
/* Pe input simplu (o linie) — centrat vertical */
.mc-field .mic-btn,
.pay-field .mic-btn {
  bottom: auto !important;
  top: 50% !important;
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
}

/* ── Scrollbar subtil cross-browser ── */
* {
  scrollbar-width: thin;
  scrollbar-color: #c7dfff transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c7dfff; border-radius: 3px; }

/* ── Transform webkit: hover states ── */
.tier-tab:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.btn-login:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.lang-option:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.clock-card:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

/* ── Transition webkit ── */
.mc-btn-next, .mc-btn-free, .mc-btn-prem,
.btn-primary, .btn-premium, .btn-login {
  -webkit-transition: all .2s;
  transition: all .2s;
}

/* ── Color-scheme: forteaza light mode pe toate browserele
     (previne dark-mode automat pe Samsung/Chrome Android) ── */
:root {
  color-scheme: light;
}
.mobile-card, .mc-step, header, .consult-card {
  color-scheme: light;
}

/* ── iPhone SE (375px) si telefoane mici ── */
@media (max-width: 390px) {
  .mc-plan-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }
  .mc-plan-card {
    padding: 10px 8px !important;
  }
  .mc-plan-name { font-size: 11px !important; }
  .mc-plan-features li { font-size: 9.5px !important; }
  .mobile-card { border-radius: 14px !important; }
  .mc-header { padding: 12px 14px !important; }
  .mc-body { padding: 12px 14px !important; }
}

/* ── iPhone Pro Max / Samsung Ultra (430px+) ── */
@media (min-width: 414px) and (max-width: 768px) {
  .mc-obs { font-size: 16px !important; }
}

/* ── Tablet portrait (768px–1024px: iPad, Samsung Tab) ── */
/* card-split is intentionally single-column on all sizes (V05 tier logic) — no override needed */

/* ── Landscape pe telefon ── */
@media (max-width: 768px) and (orientation: landscape) {
  .mobile-card {
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mobilePatientPromo { display: none !important; }
  .intro-screen { min-height: 100vh !important; }
}

/* ── Focus visible: accesibilitate keyboard pe toate browserele ── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid hsl(213,72%,48%);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ── Placeholder color: cross-browser ── */
::-webkit-input-placeholder { color: #aaa; opacity: 1; }
::-moz-placeholder           { color: #aaa; opacity: 1; }
:-ms-input-placeholder       { color: #aaa; }
::placeholder                { color: #aaa; opacity: 1; }

/* ── Print: ascunde elemente UI cand utilizatorul printeaza ── */
@media print {
  header, #cookieBanner, .mobile-card,
  .intro-screen, #mobilePatientPromo,
  .mc-footer, .mc-header { display: none !important; }
}

/* ── V13-B landing: header dreapta + Premium evident (desktop) ── */
@media (min-width: 769px) {
  #siteHeader .hdr {
    width: 100% !important;
    max-width: 1220px !important;
  }
  #siteHeader .hdr-right {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    margin-left: auto !important;
  }
  #siteHeader .hdr-nav {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #siteHeader .hdr-util {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-left: 14px !important;
    margin-left: 4px !important;
    border-left: 1px solid #e2e8f0 !important;
  }
  .tier-switch.tier-switch-prem-focus {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    padding: 18px 22px !important;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
    align-items: stretch !important;
  }
  .tier-slot {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  .tier-slot .tier-tab {
    flex: 1 1 auto !important;
    min-height: 118px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .tier-slot-free .tier-tab {
    background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%) !important;
    border: 1.5px solid #86efac !important;
  }
  .tier-slot-prem .tier-tab-premium {
    min-height: 118px !important;
    border: 2px solid #e91e8c !important;
    background: linear-gradient(135deg, #fff5fa 0%, #fce7f3 45%, #fbcfe8 100%) !important;
    box-shadow: 0 8px 24px rgba(233, 30, 140, 0.16) !important;
  }
  body.tier-free .tier-slot-prem .tier-tab-premium {
    transform: none !important;
  }
  .tier-price-chip {
    display: inline-flex !important;
  }
  #mainCard.consult-card {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100dvh - 200px) !important;
    overflow: hidden !important;
  }
  #mainCard .card-split {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #mainCard .card-split > .card-col {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  #mainCard .col-footer {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 6 !important;
    box-shadow: 0 -6px 16px rgba(15, 23, 42, .07) !important;
  }
}