/* ══════════════════════════════════════════════════════════════════════
   FaithTrip — shared enhancement layer
   Loaded last on BOTH layouts (admin master + b2c master), so it reaches
   the storefront, the customer portal, the agent portal and the admin
   panel from one file.

   Deliberately conservative. A global stylesheet dropped onto four live
   surfaces can break every page at once, so nothing here changes the box
   model of existing elements: no width, height, margin, display, position
   or float on any generic selector. What it adds is the layer those pages
   never had — focus that is visible, motion that is consistent and can be
   turned off, touch targets big enough for a thumb, and a way to show that
   something is loading.

   Colours come from the tokens each side already defines (--ft-* on admin,
   --b2c-* on the storefront), with a literal fallback so this file is
   still correct on a page that loads neither.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --fte-brand:        var(--ft-navy, var(--b2c-primary, #0D1B5E));
  --fte-accent:       var(--ft-gold, var(--b2c-accent, #F5A623));
  --fte-ring:         0 0 0 3px rgba(13, 27, 94, .28);
  --fte-ring-accent:  0 0 0 3px rgba(245, 166, 35, .40);
  --fte-ease:         cubic-bezier(.4, 0, .2, 1);
  --fte-fast:         .16s;
  --fte-slow:         .28s;
}

/* ── 1. Focus you can actually see ──────────────────────────────────────
   Keyboard and screen-reader users had the browser default, which several
   themes here reset to `outline:none`. :focus-visible only fires for
   keyboard focus, so a mouse click still looks the same as before. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--fte-brand);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On a dark header the navy ring disappears, so switch to gold there. */
.navbar-dark a:focus-visible,
.ft-page-header a:focus-visible,
[class*="hero"] a:focus-visible,
footer a:focus-visible {
  outline-color: var(--fte-accent);
}

/* ── 2. Motion, consistently, and off when asked ───────────────────────
   Hover states across these pages jump instantly in some places and ease
   in others. One easing everywhere reads as one product. */
a, button, .btn, [role="button"], .card, .ft-card, .ft-kpi,
input, select, textarea {
  transition:
    background-color var(--fte-fast) var(--fte-ease),
    border-color     var(--fte-fast) var(--fte-ease),
    color            var(--fte-fast) var(--fte-ease),
    box-shadow       var(--fte-fast) var(--fte-ease),
    transform        var(--fte-fast) var(--fte-ease);
}
/* Anyone who has asked their system to reduce motion gets none of it —
   including the pulsing chat button and any marquee. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── 3. Touch targets ──────────────────────────────────────────────────
   Measured on the live storefront: 15 of 142 links and buttons were under
   32px tall, footer links at 17px. Padding is used rather than height so
   nothing reflows — an inline link inside a paragraph is left alone. */
@media (max-width: 900px) and (pointer: coarse) {
  footer a,
  .footer a,
  nav a:not(.navbar-brand),
  .navbar-nav a,
  .b2b-nav-item > a,
  .dropdown-item {
    padding-block: 10px;
  }
  /* Icon-only controls need a real target, not a 20px glyph. */
  button:not(.btn-block) > i:only-child,
  a > i:only-child {
    padding: 6px;
    margin: -6px;
  }
}

/* ── 4. Loading and busy states ────────────────────────────────────────
   Opt-in classes: nothing gains them unless markup or ft-enhance.js adds
   them, so no existing page changes appearance. */
.ft-skeleton {
  background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 50%, #eef1f6 75%);
  background-size: 200% 100%;
  animation: ftShimmer 1.3s var(--fte-ease) infinite;
  border-radius: 8px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
@keyframes ftShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* A form mid-submit: dimmed, no second click, and a spinner in the button
   that was pressed. This is the visible half of the double-submit guard —
   the other half is in ft-enhance.js, which blocks the second submit. */
.ft-busy { position: relative; pointer-events: none; opacity: .7; }
.ft-btn-busy { position: relative; color: transparent !important; pointer-events: none; }
.ft-btn-busy::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: ftSpin .6s linear infinite;
}
.ft-btn-outline.ft-btn-busy::after,
.btn-outline-primary.ft-btn-busy::after,
.btn-light.ft-btn-busy::after { color: var(--fte-brand); }
@keyframes ftSpin { to { transform: rotate(360deg); } }

/* A thin progress bar at the very top while a page or request is in
   flight — the cheapest way to make a slow page feel answered. */
#ftProgress {
  position: fixed; inset: 0 auto auto 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--fte-brand), var(--fte-accent));
  box-shadow: 0 0 8px rgba(245, 166, 35, .6);
  z-index: 2147483647;
  opacity: 0;
  transition: width .25s var(--fte-ease), opacity .3s var(--fte-ease);
  pointer-events: none;
}
#ftProgress.on { opacity: 1; }

/* ── 5. Small things that are felt more than noticed ───────────────────*/
::selection { background: var(--fte-accent); color: #0D1B5E; }

/* Tables on phones: let a wide table scroll inside itself instead of
   pushing the whole page sideways. Scoped to the wrappers these themes
   already use, so no table is restyled. */
@media (max-width: 768px) {
  .table-responsive, .ft-table-wrap, .dataTables_wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
}

/* Disabled controls should look disabled everywhere, not just where a
   theme remembered to say so. */
:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .6; }

/* Print: drop the furniture so a booking or invoice prints clean. */
@media print {
  #otaGlobalActionBar, #ftProgress, .no-print,
  nav, .navbar, footer, .sidebar, #faithbot-panel { display: none !important; }
  a[href]::after { content: ''; }
}