/* ==========================================================================
   BT.Web popup system (design "A"): BtModal, BtModalHost, BtToastHost.
   One set of tokens for every modal, sheet and toast. Loaded after main.css.
   ========================================================================== */

:root {
    /* z-index scale: the only values popups may use */
    --bt-z-dropdown: 1000;
    --bt-z-modal: 1050;
    --bt-z-toast: 1100;
    --bt-z-reconnect: 2000;

    --bt-modal-backdrop: rgba(5, 16, 54, 0.55);
    --bt-modal-radius: 12px;
    --bt-modal-shadow: 0 24px 60px rgba(5, 16, 54, 0.25);
    --bt-modal-rule: #e6e9f0;
    --bt-modal-ink: var(--color-dark-1, #051036);
    --bt-modal-text: #3c4560;
    --bt-modal-muted: var(--color-light-1, #697488);
    --bt-modal-field-border: #d5dae6;

    --bt-color-primary: var(--color-theme-primary, #4cb5b3);
    --bt-color-danger: var(--color-red-1, #D93025);
    --bt-color-success: #1E8E5A;
    --bt-color-warning: #D9822B;
    --bt-color-info: var(--bt-color-primary);

    --bt-modal-sm: 480px;
    --bt-modal-md: 560px;
    --bt-modal-lg: 760px;
    --bt-modal-xl: 1140px;
}

/* ---- dialog = full-viewport container; the panel is the visible box ---------------------- */
dialog.bt-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 24px;
    border: 0;
    background: transparent;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--bt-z-modal);
    font-family: var(--font-primary, 'Jost', system-ui, sans-serif);
    color: var(--bt-modal-text);
    box-sizing: border-box;
}

dialog.bt-modal[open] { display: flex; }

/* Backdrop: navy dim + frosted blur that eases in with the panel */
dialog.bt-modal::backdrop {
    background: rgba(5, 16, 54, 0.55);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
    animation: bt-backdrop-in .28s ease-out;
}
@keyframes bt-backdrop-in {
    from { background: rgba(5, 16, 54, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
    to   { background: rgba(5, 16, 54, 0.55); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
}

/* Lock page scroll while any modal is open (no JS bookkeeping needed). */
body:has(dialog.bt-modal[open]) { overflow: hidden; }

.bt-modal__panel {
    background: #fff;
    border-radius: var(--bt-modal-radius);
    box-shadow: var(--bt-modal-shadow);
    width: 100%;
    max-width: var(--bt-modal-md);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bt-modal-in .18s ease-out;
}

.bt-modal--sm .bt-modal__panel { max-width: var(--bt-modal-sm); }
.bt-modal--md .bt-modal__panel { max-width: var(--bt-modal-md); }
.bt-modal--lg .bt-modal__panel { max-width: var(--bt-modal-lg); }
.bt-modal--xl .bt-modal__panel { max-width: var(--bt-modal-xl); }

/* Trip "add a sector" search overlay: wider, and tall enough that the search bar's
   autocomplete / calendar / occupancy dropdowns open inside the body without a scrollbar. */
dialog.bt-modal--search .bt-modal__panel { max-width: 1320px; overflow: visible; }
dialog.bt-modal--search .bt-modal__body { overflow: visible; border-radius: 0 0 var(--bt-modal-radius) var(--bt-modal-radius); }
/* Every sector's search card matches the flight card (12px radius, no extra shadow) */
dialog.bt-modal--search .mainSearch { border-radius: 12px; box-shadow: none; }

@keyframes bt-modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ---- header ---------------------------------------------------------------------------- */
.bt-modal__header {
    flex: none;
    min-height: 60px;
    box-sizing: border-box;
    padding: 10px 16px 10px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--bt-modal-rule);
}

.bt-modal__icon { font-size: 20px; line-height: 1; flex: none; }
.bt-modal--info    .bt-modal__icon { color: var(--bt-color-info); }
.bt-modal--success .bt-modal__icon { color: var(--bt-color-success); }
.bt-modal--warning .bt-modal__icon { color: var(--bt-color-warning); }
.bt-modal--danger  .bt-modal__icon { color: var(--bt-color-danger); }

.bt-modal__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.bt-modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--bt-modal-ink);
    overflow-wrap: anywhere;
}

.bt-modal__subtitle { margin: 2px 0 0; font-size: 12px; color: var(--bt-modal-muted); }

.bt-modal__close {
    flex: none;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--bt-modal-muted);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.bt-modal__close:hover { background: #f1f3f8; color: var(--bt-modal-ink); }
.bt-modal__close:focus-visible { outline: 2px solid var(--bt-color-primary); outline-offset: 2px; }
.bt-modal__close:disabled { opacity: .4; cursor: default; }

/* ---- body / footer ---------------------------------------------------------------------- */
.bt-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 24px;
    font-size: 15px;
    line-height: 1.55;
}

.bt-modal__body--flush { padding: 0; }
.bt-modal__body--tinted { background: #f7f8fb; }

/* Tab strip under the header (Send Quote compose/preview, rail fare conditions) */
.bt-tabs { display: flex; gap: 24px; padding: 0 24px; border-bottom: 1px solid var(--bt-modal-rule); flex: none; }
.bt-tabs__tab { padding: 12px 0; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--bt-modal-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bt-tabs__tab[aria-selected="true"], .bt-tabs__tab.is-active { color: var(--bt-modal-ink); border-bottom-color: var(--bt-color-primary); }
.bt-tabs__tab:focus-visible { outline: 2px solid var(--bt-color-primary); outline-offset: -2px; }
/* A tab strip as the body's first child sits edge to edge under the header */
.bt-modal__body > .bt-tabs:first-child { margin: -24px -24px 20px; }
@media (max-width: 640px) { .bt-modal__body > .bt-tabs:first-child { margin: -20px -20px 16px; padding: 0 20px; gap: 18px; } }

.bt-modal__text { margin: 0 0 12px; }
.bt-modal__text:last-child { margin-bottom: 0; }
.bt-modal__text--muted { color: var(--bt-modal-muted); font-size: 14px; }

.bt-modal__details {
    margin: 12px 0 0;
    border: 1px solid var(--bt-modal-rule);
    border-radius: 8px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 16px;
    font-size: 14px;
}
.bt-modal__details dt { color: var(--bt-modal-muted); font-weight: 400; }
.bt-modal__details dd { margin: 0; color: var(--bt-modal-ink); font-weight: 500; overflow-wrap: anywhere; }
.bt-modal__details dd.bt-modal__details-emph { color: var(--bt-color-danger); }

/* Inline status boxes inside a modal body (replace Bootstrap .alert-* in migrated confirms) */
.bt-alert {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.bt-alert:first-child { margin-top: 0; }
.bt-alert--success { background: #e3f3ea; color: #155a3b; }
.bt-alert--danger  { background: #fbe9e7; color: #8a1f15; }
.bt-alert--warning { background: #fdf0e3; color: #7a4a0f; }
.bt-alert--info    { background: #e6f1fb; color: #1b4b7e; }

.bt-modal__progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 8px 0 4px;
}

.bt-modal__progress-title { font-size: 16px; font-weight: 600; color: var(--bt-modal-ink); }

.bt-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid var(--bt-modal-rule);
    border-top-color: var(--bt-color-primary);
    animation: bt-spin 1s linear infinite;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }

.bt-modal__footer {
    flex: none;
    padding: 16px 24px;
    border-top: 1px solid var(--bt-modal-rule);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.bt-modal__footer-note { margin-right: auto; font-size: 13px; color: var(--bt-modal-muted); }

/* ---- buttons (used inside modals and toasts; independent of Bootstrap and the theme) ------ */
.bt-btn {
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s, border-color .12s, opacity .12s;
}
.bt-btn:focus-visible { outline: 2px solid var(--bt-color-primary); outline-offset: 2px; }
.bt-btn:disabled { opacity: .55; cursor: default; }

.bt-btn--primary { background: var(--bt-color-primary); color: #fff; }
.bt-btn--primary:hover:not(:disabled) { filter: brightness(.94); }
.bt-btn--secondary { background: #fff; color: var(--bt-modal-ink); border-color: var(--bt-modal-field-border); }
.bt-btn--secondary:hover:not(:disabled) { background: #f7f8fb; }
.bt-btn--danger { background: var(--bt-color-danger); color: #fff; }
.bt-btn--danger:hover:not(:disabled) { filter: brightness(.94); }
.bt-btn--ghost { background: transparent; color: var(--bt-modal-ink); }
.bt-btn--ghost:hover:not(:disabled) { background: #f1f3f8; }

/* ---- form fields inside modals ------------------------------------------------------------ */
.bt-modal__body .bt-field { display: flex; flex-direction: column; gap: 6px; }
.bt-modal__body .bt-field + .bt-field,
.bt-modal__body .bt-field + .bt-field-row,
.bt-modal__body .bt-field-row + .bt-field,
.bt-modal__body .bt-field-row + .bt-field-row,
.bt-modal__body .bt-alert + .bt-field,
.bt-modal__body .bt-alert + .bt-field-row,
.bt-modal__body .bt-modal__text + .bt-field,
.bt-modal__body .bt-modal__text + .bt-field-row { margin-top: 16px; }
.bt-modal__body .bt-field-row > .bt-field + .bt-field { margin-top: 0; }
.bt-modal__body .bt-field label { font-size: 13px; font-weight: 500; color: var(--bt-modal-ink); }
.bt-modal__body .bt-field .bt-required { color: var(--bt-color-danger); }
.bt-modal__body .bt-field input:not([type=checkbox]):not([type=radio]),
.bt-modal__body .bt-field select,
.bt-modal__body .bt-field textarea {
    min-height: 44px;
    border: 1px solid var(--bt-modal-field-border);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--bt-modal-ink);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
.bt-modal__body .bt-field textarea { resize: vertical; }
.bt-modal__body .bt-field input:focus,
.bt-modal__body .bt-field select:focus,
.bt-modal__body .bt-field textarea:focus { outline: 2px solid var(--bt-color-primary); outline-offset: 0; border-color: transparent; }
.bt-modal__body .bt-field .bt-error { font-size: 12px; color: var(--bt-color-danger); }
.bt-modal__body .bt-field--invalid input,
.bt-modal__body .bt-field--invalid select,
.bt-modal__body .bt-field--invalid textarea { border-color: var(--bt-color-danger); }
.bt-modal__body .bt-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* ---- mobile: bottom sheet for sm/md, full sheet for lg/xl --------------------------------- */
@media (max-width: 640px) {
    dialog.bt-modal { padding: 0; align-items: flex-end; }

    .bt-modal__panel {
        max-width: none;
        max-height: 92dvh;
        border-radius: 16px 16px 0 0;
        animation: bt-sheet-in .22s ease-out;
    }

    .bt-modal--lg .bt-modal__panel,
    .bt-modal--xl .bt-modal__panel { height: 100dvh; max-height: none; border-radius: 0; }

    .bt-modal__header { padding-left: 20px; }
    .bt-modal__body { padding: 20px; }
    .bt-modal__footer { padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); flex-direction: column-reverse; align-items: stretch; }
    .bt-modal__footer .bt-btn { width: 100%; height: 48px; }
    .bt-modal__footer .bt-modal__footer-note { margin: 0 0 4px; }
    .bt-modal__body .bt-field-row { grid-template-columns: 1fr; }
    .bt-toasts { left: 12px; right: 12px; top: 72px; width: auto; }
}

@keyframes bt-sheet-in {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bt-modal__panel, .bt-toast { animation: none; }
    dialog.bt-modal::backdrop { animation: none; }
    .bt-spinner { animation-duration: 2s; }
}

/* ---- phase 5: sheets, maps, hero icons, countdown bar ----------------------------------- */
/* Filter / map sheets: full-screen on phones and tablets (they only open there), normal modal above */
@media (max-width: 991px) {
    dialog.bt-modal--sheet { padding: 0; align-items: stretch; }
    dialog.bt-modal--sheet .bt-modal__panel { max-width: none; height: 100dvh; max-height: none; border-radius: 0; animation: bt-sheet-in .22s ease-out; }
    dialog.bt-modal--sheet .bt-modal__footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
dialog.bt-modal--sheet .bt-modal__footer { flex-direction: row; align-items: center; justify-content: space-between; }
dialog.bt-modal--sheet .bt-modal__footer .bt-btn { width: auto; height: 44px; }
dialog.bt-modal--sheet .bt-modal__footer .bt-btn--primary { flex: 1; }

/* The theme's mobile filter sidebar padded itself to clear a close icon it no longer has */
dialog.bt-modal--sheet .sidebar.-mobile-filter { padding: 0; }

/* Map canvas inside a modal: fills the body */
.bt-modal__map { width: 100%; height: 70vh; min-height: 420px; }
@media (max-width: 991px) { dialog.bt-modal--sheet .bt-modal__map { height: calc(100dvh - 60px); min-height: 0; } }

/* Big centred icon for "time expired" / session warnings */
.bt-modal__hero { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 4px auto 16px; font-size: 30px; }
.bt-modal__hero--danger { background: #fbe9e7; color: var(--bt-color-danger); }
.bt-modal__hero--warning { background: #fdf0e3; color: var(--bt-color-warning); }
.bt-modal__hero--info { background: #e6f1fb; color: var(--bt-color-info); }
.bt-modal__center { text-align: center; }
.bt-modal__center .bt-modal__progress-title { display: block; margin-bottom: 6px; }
.bt-modal__footer--center { justify-content: center; }

/* Countdown bar (session timeout) */
.bt-progress { height: 6px; border-radius: 3px; background: #eef1f6; overflow: hidden; margin-top: 12px; }
.bt-progress__bar { height: 100%; border-radius: 3px; background: var(--bt-color-danger); transition: width 1s linear; }

/* ---- toasts ------------------------------------------------------------------------------- */
.bt-toasts {
    position: fixed;
    top: 88px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 24px);
    z-index: var(--bt-z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    font-family: var(--font-primary, 'Jost', system-ui, sans-serif);
}

.bt-toast {
    pointer-events: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(5, 16, 54, 0.18);
    padding: 14px 14px 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: bt-toast-in .18s ease-out;
}
@keyframes bt-toast-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
}

.bt-toast__icon { font-size: 18px; line-height: 1.3; flex: none; }
.bt-toast--success .bt-toast__icon { color: var(--bt-color-success); }
.bt-toast--error   .bt-toast__icon { color: var(--bt-color-danger); }
.bt-toast--warning .bt-toast__icon { color: var(--bt-color-warning); }
.bt-toast--info    .bt-toast__icon { color: var(--bt-color-info); }

.bt-toast__text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--bt-modal-ink); }
.bt-toast__title { font-weight: 600; display: block; overflow-wrap: anywhere; }
.bt-toast__detail { color: var(--bt-modal-muted); font-size: 13px; overflow-wrap: anywhere; }

.bt-toast__close {
    flex: none;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--bt-modal-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.bt-toast__close:hover { background: #f1f3f8; color: var(--bt-modal-ink); }
.bt-toast__close:focus-visible { outline: 2px solid var(--bt-color-primary); outline-offset: 2px; }