/* Fares Digital Hub v26 — shared root layout, toast, responsive, theme and modal safeguards. */
:root {
  --v26-safe-bottom: env(safe-area-inset-bottom, 0px);
  --v26-safe-top: env(safe-area-inset-top, 0px);
  --v26-page-inline: clamp(12px, 3vw, 32px);
  --v26-anchor-offset: 104px;
  --v26-toast-bottom: calc(14px + var(--v26-safe-bottom));
  --v26-toast-z: 2147483000;
  --v26-focus: color-mix(in srgb, var(--accent, #32d583) 74%, #ffffff);
  --v26-scroll-track: color-mix(in srgb, var(--surface, #111827) 80%, transparent);
  --v26-scroll-thumb: color-mix(in srgb, var(--accent, #32d583) 58%, #667085);
}

html {
  min-block-size: 100%;
  inline-size: 100%;
  max-inline-size: 100%;
  scrollbar-gutter: auto;
  scrollbar-color: var(--v26-scroll-thumb) var(--v26-scroll-track);
  scrollbar-width: auto;
}

body {
  min-block-size: 100svh;
  min-block-size: 100dvh;
  inline-size: 100%;
  max-inline-size: 100%;
  margin: 0;
  padding-block-end: 0 !important;
}

:where(body, main, header, footer, section, article, nav, form, fieldset, dialog, div) {
  min-inline-size: 0;
}

:where(img, svg, video, canvas) {
  max-inline-size: 100%;
}

:where(input, select, textarea, button) {
  max-inline-size: 100%;
  box-sizing: border-box;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
  inline-size: 100%;
  min-inline-size: 0;
}

:where(input[type="date"], input[type="time"], input[type="datetime-local"], select) {
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  text-overflow: ellipsis;
}

:where(main, section[id], article[id], [data-anchor-target]) {
  scroll-margin-block-start: var(--v26-anchor-offset) !important;
}

:where(button, a, input, select, textarea, [tabindex]):focus {
  outline: none;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--v26-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--v26-focus) 18%, transparent) !important;
}

@media (hover: none) and (pointer: coarse) {
  :where(button, a, input, select, textarea) {
    -webkit-tap-highlight-color: transparent;
  }
}

:where(html, body, dialog, textarea, pre, [class*="scroll"], [class*="modal"], [class*="dialog"]) {
  scrollbar-color: var(--v26-scroll-thumb) var(--v26-scroll-track);
  scrollbar-width: auto;
}

:where(html, body, dialog, textarea, pre, [class*="scroll"], [class*="modal"], [class*="dialog"])::-webkit-scrollbar {
  inline-size: 11px;
  block-size: 11px;
}

:where(html, body, dialog, textarea, pre, [class*="scroll"], [class*="modal"], [class*="dialog"])::-webkit-scrollbar-track {
  background: var(--v26-scroll-track);
  border-radius: 999px;
}

:where(html, body, dialog, textarea, pre, [class*="scroll"], [class*="modal"], [class*="dialog"])::-webkit-scrollbar-thumb {
  min-block-size: 44px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--v26-scroll-thumb);
  background-clip: padding-box;
}

#fares-toast-root-v26 {
  position: fixed;
  z-index: var(--v26-toast-z);
  inset-inline: 0;
  inset-block-end: var(--v26-toast-bottom);
  display: grid;
  place-items: center;
  padding-inline: max(10px, env(safe-area-inset-left, 0px));
  pointer-events: none;
  direction: ltr;
}

.fares-toast-v26 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  inline-size: fit-content;
  min-inline-size: min(290px, calc(100vw - 24px));
  max-inline-size: min(620px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #32d583) 34%, var(--line, #344054));
  border-radius: 16px;
  color: var(--text, #f8fafc);
  background: color-mix(in srgb, var(--surface, #101828) 94%, transparent);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: auto;
  direction: var(--v26-toast-direction, rtl);
  transform: translateY(14px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.fares-toast-v26.is-visible { opacity: 1; transform: translateY(0); }
.fares-toast-v26[data-type="success"] { border-color: rgba(50, 213, 131, .55); }
.fares-toast-v26[data-type="error"] { border-color: rgba(248, 113, 113, .65); }
.fares-toast-v26[data-type="warning"] { border-color: rgba(245, 158, 11, .65); }
.fares-toast-v26-icon { font-weight: 900; }
.fares-toast-v26-message { min-inline-size: 0; overflow-wrap: anywhere; line-height: 1.5; text-align: start; }
.fares-toast-v26-close { min-inline-size: 36px; min-block-size: 36px; border: 0; border-radius: 10px; color: inherit; background: transparent; cursor: pointer; }

/* Retire inherited flow-positioned toast nodes; v26 keeps them only as compatibility hooks. */
:where(.toast, .admin-toast)[data-v26-retired-toast] { display: none !important; }

/* Secondary pages should size naturally and use the page scrollbar, not fixed-height cards. */
:where(.admin-auth-card, .admin-mfa-card, .admin-recovery-dialog-panel) {
  max-block-size: none !important;
}

:where(.admin-auth-card, .admin-mfa-card):not(dialog) {
  overflow: visible !important;
}

:where(.share-dialog-panel, .feedback-dialog-panel) {
  inline-size: min(94vw, 620px) !important;
  max-inline-size: calc(100vw - 20px) !important;
  max-block-size: calc(var(--visual-viewport-height, 100dvh) - var(--v26-safe-top) - var(--v26-safe-bottom) - 20px) !important;
  margin: auto !important;
  box-sizing: border-box;
}

:where(.share-dialog-panel, .feedback-dialog-panel) > :where(.share-options, .feedback-dialog-body, form) {
  min-inline-size: 0;
}

html[data-theme="light"] {
  --v26-scroll-track: rgba(15, 23, 42, .08);
  --v26-scroll-thumb: rgba(22, 101, 68, .64);
  --v26-focus: #087443;
}

html[data-theme="light"] .fares-toast-v26 {
  color: #102a21;
  border-color: rgba(15, 93, 65, .28);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
}

/* Improve the hero illustration and all security-style cards in light mode without altering dark mode. */
html[data-theme="light"] :where(.hero-visual, .profile-card, .admin-security-card, .admin-security-extra, .admin-factor-item, .admin-recovery-card, .admin-activity-card) {
  color: #102a21;
  border-color: rgba(15, 23, 42, .18) !important;
  background-color: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .12);
}

html[data-theme="light"] :where(.hero-visual svg, .hero-visual [class*="ring"], .hero-visual [class*="orbit"]) {
  opacity: .92 !important;
  filter: contrast(1.22) saturate(1.08) drop-shadow(0 8px 22px rgba(46, 91, 163, .16));
}

html[data-theme="light"] :where(.admin-security-card, .admin-security-extra, .admin-factor-item, .admin-recovery-card, .admin-activity-card) :where(p, small, .admin-muted, .admin-card-description) {
  color: #39574c !important;
}

html[data-theme="light"] :where(.admin-security-card, .admin-security-extra, .admin-factor-item, .admin-recovery-card, .admin-activity-card) :where(input, select, textarea) {
  color: #12251f !important;
  border-color: rgba(15, 93, 65, .25) !important;
  background: #ffffff !important;
}

@media (max-width: 760px) {
  :root {
    --v26-page-inline: 10px;
    --v26-anchor-offset: 84px;
    --v26-toast-bottom: calc(10px + var(--v26-safe-bottom));
  }

  body { min-block-size: 100svh; min-block-size: 100dvh; }

  :where(input, select, textarea) { font-size: max(16px, 1rem) !important; }

  :where(.share-dialog-panel, .feedback-dialog-panel) {
    inline-size: calc(100vw - 18px) !important;
    max-inline-size: calc(100vw - 18px) !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .share-dialog-panel :where(.share-grid, [data-share-options], .share-options) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .share-dialog-panel :where(button, a) {
    min-inline-size: 0 !important;
    min-block-size: 52px !important;
    padding: 9px !important;
  }

  .feedback-dialog-panel textarea { min-block-size: 78px !important; max-block-size: 128px !important; }
  .feedback-dialog-panel :where(.feedback-rating, .feedback-actions) { gap: 8px !important; }

  .fares-toast-v26 {
    inline-size: calc(100vw - 20px);
    min-inline-size: 0;
    max-inline-size: calc(100vw - 20px);
  }
}

@media (max-width: 360px) {
  .share-dialog-panel :where(.share-grid, [data-share-options], .share-options) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Center to the visual viewport itself, independent of RTL and reserved scrollbar gutters. */
#fares-toast-root-v26 {
  inset-inline: auto !important;
  left: 50% !important;
  right: auto !important;
  inline-size: 100vw !important;
  max-inline-size: 100vw !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}