/* ---------------------------
Base & typography
---------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  isolation:isolate;
}
body::before{
  content:"";
  position:fixed;
  inset:-10% -8% -20%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(520px 260px at 8% 12%, rgba(46,116,184,.22), transparent 65%),
    radial-gradient(460px 240px at 88% 10%, rgba(241,201,174,.18), transparent 60%),
    radial-gradient(420px 320px at 62% 92%, rgba(30,40,74,.14), transparent 65%);
}

h1,h2,h3{
  font-family:var(--font-serif);
  color:var(--heading);
  margin:0 0 var(--space-3);
  letter-spacing:-.01em;
}
h1{font-size:30px}
h2{font-size:23px}
h3{font-size:18px}

a{
  color:var(--primary);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  border:0;
}

/* Layout container */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 var(--space-3);
}
.ag-main{
  position:relative;
  z-index:1;
  flex:1 0 auto;
}
.ag-results{
  position:relative;
}
.ag-results::before{
  content:"";
  position:absolute;
  inset:-30px -20px auto;
  height:160px;
  z-index:-1;
  background:
    radial-gradient(420px 180px at 18% 0%, rgba(46,116,184,.12), transparent 60%),
    radial-gradient(360px 160px at 88% 15%, rgba(241,201,174,.12), transparent 60%);
}

/* Detail layouts (car/transfer) */
.ag-detail-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--primary-strong);
  text-decoration:none;
  font-weight:600;
}
.ag-detail-back:hover{ color:var(--primary); }
.ag-detail-title{
  font-family:var(--font-serif);
  margin:6px 0 0;
}
.ag-detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  font-size:14px;
  margin-top:6px;
}
.ag-detail-grid{
  display:grid;
  grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  gap:18px;
  align-items:start;
  margin-top:16px;
}
.ag-detail-stack{
  display:grid;
  gap:16px;
}
@media (max-width: 992px){
  .ag-detail-grid{ grid-template-columns:1fr; }
}
.ag-detail-media{
  border-radius:18px;
  border:1px solid rgba(46,116,184,.18);
  overflow:hidden;
  background:var(--surface-alt);
  box-shadow:var(--shadow-soft);
}
.ag-detail-media img{
  width:100%;
  height:auto;
  display:block;
}
.ag-detail-media-placeholder{
  min-height:240px;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-weight:600;
}
.ag-detail-card{
  background:var(--surface);
  border:1px solid rgba(46,116,184,.18);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow-soft);
}
.ag-detail-card h3{
  margin:0 0 10px;
  font-family:var(--font-serif);
  font-size:18px;
}
.ag-detail-kv{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 520px){
  .ag-detail-kv{ grid-template-columns:1fr; }
}
.ag-detail-kv-item{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface-alt);
}
.ag-detail-kv-label{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ag-detail-kv-value{
  margin-top:2px;
  font-weight:600;
  color:var(--heading);
}
.ag-detail-note{
  color:var(--muted);
  font-size:14px;
}

/* =========================
   LEGACY: HEADER + NAV + MEGA MENU
   =========================
   DEPRECATED: These styles supported the old mega-menu navigation.
   The Shell UI (see css/components/_shell.css) replaces them.
   Safe to remove once all pages use the Shell layout.
   ========================= */

:root{
  --header-h: 64px;
  --nav-radius: 12px;
  --nav-hit: 42px;
  --nav-gap: 14px;
  --panel-shadow: 0 24px 60px rgba(15,23,42,.16);

  /* Primary buttons wear the BRAND gradient — the same navy → blue → warm
     sweep as the Messages/Chatbot dock (--ag-gradient-brand), so a CTA and
     the dock read as one family instead of two unrelated blues.

     NOT a verbatim copy of the dock's value, and the difference is the whole
     point. The dock places its warm stop at 55%; on anything wider than an
     icon that puts the label in the tan, and white on #F1C9AE is 1.53:1
     against a WCAG AA floor of 4.5:1. The dock survives it by being
     icons-only with its ✦ on a dark orb — a button has no such luxury, and
     this codebase has already shipped invisible buttons once
     (project_visual_audit_2026_07_16). Compressed to the last 22% the warm
     stop reads as a rim highlight and the label sits on #2E74B8 (4.88:1).

     Declared HERE rather than in css/design-tokens.css, which is off-limits
     by standing instruction. _head_common.html loads that file first, so
     this plain :root redeclaration wins on source order at equal
     specificity. Pinned by apps/core/tests/test_button_gradient.py. */
  --ag-gradient-button: linear-gradient(135deg, #1E284A 0%, #2E74B8 78%, #F1C9AE 100%);
  --button-gradient: var(--ag-gradient-button);
}

.skip-link{
  position:absolute;
  inset-inline-start:12px;
  inset-block-start:12px;
  padding:.55rem .75rem;
  border-radius:.6rem;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  transform:translateY(-140%);
  transition:transform .2s ease;
  z-index:1000;
}
.skip-link:focus{ transform:translateY(0); }

.site-header{
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  position:sticky;
  top:0;
  z-index:50;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
  gap:16px;
}

.header-left,
.header-right{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--heading);
  text-decoration:none;
  white-space:nowrap;
}
.brand-logo-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  border-radius:6px;
  overflow:hidden;
  isolation:isolate;
  perspective:700px;
}
.brand-logo{
  width:300px;
  height:40px;
  object-fit:cover;
  border-radius:6px;
  display:flex;
}

.ag-mini-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}
.ag-mini-item{
  display:flex;
  flex-direction:column;
  padding:8px 10px;
  border-radius:12px;
  background:var(--surface-alt);
  text-decoration:none;
  color:inherit;
  border:1px solid var(--line);
}
.ag-mini-item:hover{
  background:rgba(46,116,184,.08);
  border-color:rgba(46,116,184,.25);
}
.ag-mini-item__title{
  font-weight: 600;
}
.ag-mini-item__meta{
  font-size:12px;
  color:var(--muted);
}
.brand-mark{
  width:28px;
  height:28px;
  border-radius:8px;
  background:var(--brand-gradient);
  color:#fff;
  display:inline-grid;
  place-items:center;
  font-weight: 600;
  letter-spacing:.2px;
}
.brand-icon-mobile{
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
}
.brand-text{
  font-weight: 600;
  position:relative;
  display:inline-flex;
  align-items:center;
  isolation:isolate;
  perspective:700px;
  overflow:hidden;
}
.brand-text__label{
  position:relative;
  z-index:1;
}
.brand-meteor{
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:1px;
  pointer-events:none;
  opacity:0;
  z-index:2;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 6px rgba(46,116,184,.35))
         drop-shadow(0 0 10px rgba(241,201,174,.35));
  will-change:transform, opacity;
}
.brand-meteor__svg{
  display:block;
  width:100%;
  height:100%;
}
.brand-meteor__path{
  shape-rendering:geometricPrecision;
}


.brand--compact .brand-text{ font-weight: 600; }

/* ===== Mobile Responsive Global Fixes ===== */
/* Core overflow prevention — detailed mobile rules in css/mobile-responsive.css */
body{
  overflow-x: hidden;
}
.shell__main{
  overflow-x: hidden;
}
/* `overflow-x: hidden` forces the OTHER axis to compute as `auto` (CSS spec: if
   one axis is not `visible`, the other is `auto` if it was `visible`). That made
   <body> and .shell__main scroll containers, and `position: sticky` resolves
   against the nearest scrolling ancestor — which never actually scrolls here, the
   viewport does. Result: every sticky offset inside the shell silently did
   nothing, so the Mode Hub rail and the community sidebar scrolled away with the
   page. `clip` hides horizontal overflow WITHOUT establishing a scroll container,
   so sticky works again. Guarded by @supports: older engines keep the old
   behaviour rather than losing the overflow guard entirely. */
@supports (overflow-x: clip) {
  body{
    overflow-x: clip;
  }
  .shell__main{
    overflow-x: clip;
  }
}

/* ===== Site Footer ===== */
.site-footer{
  position:relative;
  overflow:hidden;
  background:#a3c39a5c;
  color:#fff;
  margin-top:50px;
  padding:3rem 0 0;
  font-size:14px;
  flex-shrink:0;
  line-height:1.6;
}
/* ── Aurora animated background ── */
.site-footer__aurora{
  position:absolute;
  inset:0;
  opacity:1;
  pointer-events:none;
}
.site-footer__aurora-band{
  position:absolute;
  border-radius:50%;
  will-change:transform;
}
.site-footer__aurora-band--1{
  width:140%;height:120%;
  background:radial-gradient(ellipse at 40% 50%,rgba(46,116,184,0.9) 0%,rgba(46,116,184,0.35) 35%,transparent 65%);
  top:-30%;left:-30%;
  animation:aurora-drift-1 8s ease-in-out infinite alternate;
}
.site-footer__aurora-band--2{
  width:100%;height:100%;
  background:radial-gradient(ellipse at 50% 50%,rgba(241,201,174,0.75) 0%,rgba(241,201,174,0.25) 35%,transparent 60%);
  top:-10%;left:20%;
  animation:aurora-drift-2 10s ease-in-out infinite alternate;
}
.site-footer__aurora-band--3{
  width:120%;height:110%;
  background:radial-gradient(ellipse at 60% 50%,rgba(37,99,235,0.7) 0%,rgba(79,70,229,0.3) 35%,transparent 60%);
  top:-20%;left:40%;
  animation:aurora-drift-3 12s ease-in-out infinite alternate;
}
.site-footer__aurora-band--4{
  width:130%;height:100%;
  background:radial-gradient(ellipse at 35% 50%,rgba(46,116,184,0.5) 0%,rgba(30,40,74,0.25) 40%,transparent 65%);
  top:10%;left:-20%;
  animation:aurora-drift-4 14s ease-in-out infinite alternate;
}
@keyframes aurora-drift-1{
  0%{transform:translateX(0%) translateY(0%) rotate(-5deg) scale(1)}
  50%{transform:translateX(15%) translateY(5%) rotate(3deg) scale(1.1)}
  100%{transform:translateX(30%) translateY(-5%) rotate(-3deg) scale(1.05)}
}
@keyframes aurora-drift-2{
  0%{transform:translateX(0%) translateY(0%) rotate(3deg) scale(1.05)}
  50%{transform:translateX(-10%) translateY(-8%) rotate(-5deg) scale(0.95)}
  100%{transform:translateX(20%) translateY(3%) rotate(5deg) scale(1.1)}
}
@keyframes aurora-drift-3{
  0%{transform:translateX(10%) translateY(5%) rotate(-3deg) scale(1)}
  50%{transform:translateX(-15%) translateY(-3%) rotate(4deg) scale(1.15)}
  100%{transform:translateX(5%) translateY(8%) rotate(-6deg) scale(0.95)}
}
@keyframes aurora-drift-4{
  0%{transform:translateX(-5%) translateY(-5%) rotate(2deg) scale(1.1)}
  50%{transform:translateX(10%) translateY(5%) rotate(-4deg) scale(1)}
  100%{transform:translateX(-10%) translateY(-8%) rotate(3deg) scale(1.05)}
}
@media(prefers-reduced-motion:reduce){
  .site-footer__aurora-band{animation:none!important}
}
/* ── Footer content (above aurora) ── */
.site-footer__inner{
  position:relative;
  z-index:1;
  padding:0 var(--ag-space-lg);
}
.site-footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:2.5rem;
}
.site-footer__brand .brand{
  text-decoration:none;
  margin-bottom:.5rem;
  margin-left:0;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.site-footer__brand .brand-text__label{
  color:#fff;
}
.site-footer__tagline{
  color:#fff;
  font-size:13px;
  margin:0 0 0 20px;
  max-width:240px;
}
.site-footer__heading{
  color:#fff;
  font-family:"Poppins",sans-serif;
  font-weight: 600;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin:0 0 1rem;
}
.site-footer__links{
  list-style:none;
  margin:0;padding:0;
}
.site-footer__links li{
  margin-bottom:.45rem;
}
.site-footer__links a{
  color:#fff;
  text-decoration:none;
  transition:color .2s;
}
.site-footer__links a:hover,
.site-footer__links a:focus-visible{
  color:#fff;
}
.site-footer__newsletter{
  display:flex;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:1rem;
}
.site-footer__newsletter input{
  flex:1;
  min-width:0;
  padding:.5rem 1rem;
  border:none;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:13px;
  outline:none;
}
.site-footer__newsletter input::placeholder{
  color:rgba(255,255,255,0.4);
}
.site-footer__newsletter button{
  padding:.5rem .9rem;
  border:solid 0.1px white;
  background:var(--button-gradient);
  color:#fff;
  cursor:pointer;
  font-size:15px;
  line-height:1;
  transition:filter .2s;
}
.site-footer__newsletter button:hover{
  filter:brightness(.96);
}
.site-footer__socials{
  display:flex;
  gap:.6rem;
}
.site-footer__social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:#fff;
  text-decoration:none;
  transition:background .2s, color .2s;
}
.site-footer__social-icon:hover{
  background:var(--ag-color-brand-primary);
  color:#fff;
}
.site-footer__social-icon svg{
  width:16px;height:16px;
  fill:currentColor;
}
.site-footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:2.5rem;
  padding:1rem 0;
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:13px;
  color:#fff;
}
.site-footer__bottom a{
  color:#fff;
  text-decoration:none;
  transition:opacity .2s;
}
.site-footer__bottom a:hover{
  opacity:.8;
}
.site-footer__bottom-links{
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
}
.site-footer__switchers{
  display:flex;
  align-items:center;
  gap:.25rem;
  margin-top:.75rem;
}
.site-footer__switchers .switcher-trigger{
  background:rgba(255,255,255,0.1);
  color:#fff;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:999px;
  padding:.3rem .75rem;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:background .2s;
}
.site-footer__switchers .switcher-trigger:hover{
  background:rgba(255,255,255,0.18);
}
.site-footer__switchers .currency-switcher,
.site-footer__switchers .language-switcher{
  margin-left:0;
}
@media(max-width:1023px){
  .site-footer__grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:639px){
  .site-footer__grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .site-footer__tagline{
    margin-inline:auto;
  }
  .site-footer__socials{
    justify-content:center;
  }
  .site-footer__bottom{
    justify-content:center;
    text-align:center;
  }
  .site-footer__bottom-links{
    justify-content:center;
  }
  .site-footer__switchers{
    justify-content:center;
  }
}

.nav{
  display:flex;
  align-items:center;
  gap:var(--nav-gap);
  position:relative;
}

.nav__list{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  margin:0;
  list-style:none;
}

.nav__item{ position:relative; }

.nav__link,
.menu__button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:var(--nav-hit);
  padding:0 .85rem;
  border-radius:.75rem;
  font-weight: 600;
  font-size:13px;
  line-height:1;
  color:var(--nav-link-color);
  text-decoration:none;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.nav__link:hover,
.menu__button:hover{
  background:rgba(46,116,184,.12);
  border-color:rgba(46,116,184,.22);
}

.nav__link:focus-visible,
.menu__button:focus-visible{
  outline:3px solid rgba(46,116,184,.35);
  outline-offset:2px;
}

.menu__chevron{
  font-size:12px;
  opacity:.8;
  transform:translateY(1px);
}

.menu{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.menu--mega{ position:static; }

.menu.is-open .menu__button{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.10);
}

.nav-switchers{
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-switchers--desktop{
  transform:none;
  margin:0;
}
.nav-switchers--mobile{ display:none; }

.nav-switchers--desktop .currency-switcher,
.nav-switchers--desktop .language-switcher{
  margin:0 !important;
}
.nav-switchers--desktop select{
  font-size:12px;
  padding:4px 8px;
  height:32px;
  border-radius:8px;
}
.switcher-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  font-weight: 600;
  font-size:12px;
  color:var(--nav-link-color);
}

.ag-switcher-modal .ag-modal__dialog{
  position:relative;
  inset:auto;
  top:auto;
  left:auto;
  transform:none;
  width:min(880px, 94vw);
  max-height:80vh;
}
.ag-switcher-header{
  padding:18px 20px 10px;
  border-bottom:1px solid var(--line);
}
.ag-switcher-title{
  font-size:16px;
  font-weight: 600;
  color:#0f172a;
}
.ag-switcher-subtitle{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}
.ag-switcher-alert{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  font-size:12px;
  font-weight:600;
}
.ag-switcher-hint{
  margin-top:8px;
  color:#64748b;
  font-size:12px;
}
.ag-switcher-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:999px;
  margin-left:6px;
  background:#f97316;
  color:#fff;
  font-size:11px;
  font-weight: 600;
  line-height:1;
}
.ag-switcher-body{
  padding:16px 18px 20px;
  overflow:auto;
}
.ag-switcher-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;
}
.ag-switcher-column{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ag-switcher-label{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight: 600;
}
.ag-switcher-options{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ag-switcher-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  text-align:left;
}
.ag-switcher-option:hover,
.ag-switcher-option.is-highlighted{
  border-color:#c7d2fe;
  background:#eef2ff;
}
.agpay__methods{
  margin-bottom:8px;
}
.agpay__methodsLabel{
  font-size:12px;
  font-weight: 600;
  color:#475569;
  margin-bottom:6px;
}
.agpay__methodsList{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.agpay__method{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:#334155;
  font-size:11px;
  font-weight: 600;
}
.ag-switcher-code{
  font-weight: 600;
  color:#0f172a;
  font-size:12px;
}
.ag-switcher-name{
  color:#475569;
  font-size:12px;
}
.ag-switcher-search{
  width:100%;
  margin-top:10px;
  padding:8px 12px;
  border:1px solid var(--line, #e5e7eb);
  border-radius:10px;
  font-size:13px;
  outline:none;
  background:#f8fafc;
}
.ag-switcher-search:focus{
  border-color:#818cf8;
  background:#fff;
}

@media (max-width: 991px){
  .ag-switcher-modal .ag-modal__dialog{
    width:min(520px, 94vw);
  }
  .ag-switcher-grid{
    grid-template-columns:1fr;
  }
}

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid #e6eaf0;
  background:#fff;
  color:var(--nav-link-color);
  cursor:pointer;
  margin-left:5px;
}
.nav-toggle__icon{ font-size:18px; line-height:1; }

.header-notifications{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--nav-link-color);
  position:relative;
}
.header-notifications__icon{ font-size:16px; line-height:1; }

.header-notifications[data-push-state="subscribed"]{
  border-color:#16a34a;
  background:#f0fdf4;
  color:#166534;
}
.header-notifications[data-push-state="subscribed"]::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#22c55e;
  top:6px;
  right:6px;
  box-shadow:0 0 0 2px #fff;
}
.header-notifications[data-push-state="error"],
.header-notifications[data-push-state="blocked"]{
  border-color:#ef4444;
  color:#b91c1c;
}
.header-notifications[data-push-state="unsupported"],
.header-notifications[data-push-state="unconfigured"]{
  border-color:#f59e0b;
  color:#b45309;
}

.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.38);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:60;
}
body.nav-open .nav-overlay,
body.mega-open .nav-overlay{
  opacity:1;
  pointer-events:auto;
}

.menu__panel[hidden]{ display:none !important; }

.menu__panel--mega{
  position:fixed;
  inset-inline:0;
  inset-block-start:var(--header-h);
  z-index:70;
}

.menu__panel-inner{
  width:min(1180px, calc(100vw - 32px));
  margin:14px auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--panel-shadow);
  overflow:hidden;
}

.menu__panel-head{
  padding:16px 18px 8px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.menu__panel-title{
  font-weight: 600;
  color:var(--heading);
  letter-spacing:.2px;
}
.menu__panel-hint{
  margin-top:4px;
  color:var(--muted);
  font-size:.92rem;
}

.menu__list{
  list-style:none;
  padding:0;
  margin:0;
}

.menu__list--mega{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
  padding:14px 14px 10px;
}

.menu__link--mega{
  display:flex;
  gap:12px;
  align-items:baseline;
  padding:.8rem .85rem;
  border-radius:16px;
  border:1px solid transparent;
  background:#fff;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.menu__link--mega:hover{
  background:rgba(46,116,184,.08);
  border-color:rgba(46,116,184,.18);
  transform:translateY(-1px);
}

.menu__link--mega:focus-visible{
  outline:3px solid rgba(46,116,184,.35);
  outline-offset:2px;
}

.menu__link-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  font-size:16px;
  line-height:1;
}
.menu__link-icon .bi{
  font-size:1.1em;
  vertical-align:-0.125em;
}
.nav-icon{
  font-size:1.1em;
  vertical-align:-0.125em;
  margin-right:4px;
}

.menu__link-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.menu__link-title{ font-weight: 600; color:var(--heading); line-height:1.1; font-size:14px; }
.menu__link-desc{ color:var(--muted); font-size:12px; line-height:1.35; }

.menu__panel-foot{
  padding:10px 14px 14px;
  border-top:1px solid rgba(15,23,42,.08);
  display:flex;
  justify-content:flex-end;
}
.menu__panel-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.6rem .85rem;
  border-radius:12px;
  text-decoration:none;
  font-weight: 600;
  color:var(--nav-link-color);
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.02);
}
.menu__panel-cta:hover{
  background:rgba(46,116,184,.12);
  border-color:rgba(46,116,184,.22);
}

.nav__mobile-top{ display:none; }

@media (max-width: 991px){
  .site-header{
    --brand-meteor-size:4px;
    --brand-meteor-tail:28px;
  }
  .menu{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .header-inner{
    position:relative;
    flex-direction:column;
    align-items:center;
    height:auto;
    padding:10px 0;
    gap:10px;
  }
  .header-left{ width:100%; justify-content:center; position:relative; }
  .header-left .brand{ margin:0 auto; }
  .header-left .brand-logo{
    width:150px;
    height:20px;
  }
  .nav-toggle{ position:absolute; inset-inline-start:0; }
  .header-right{
    position:absolute;
    inset-inline-end:0;
    top:50%;
    transform:translateY(-50%);
    gap:8px;
  }

  .nav-toggle{ display:inline-flex; }

  /* .nav drawer rules removed 2026-05-18 — verified orphan from a refactor
   * that replaced the legacy site-header with shell__topbar /
   * shell__sidebar-toggle. The bare `.nav` selector wrongly matched
   * <ul class="nav nav-tabs"> in profile_detail, hiding #profileTabs
   * off-screen at every viewport ≤ 991px. See audit 2026-05-17 Profile S1 #1. */

  .nav__mobile-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(15,23,42,.08);
    margin-bottom:6px;
  }

  .nav-close{
    width:42px;
    height:42px;
    border-radius:12px;
    border:1px solid rgba(15,23,42,.10);
    background:#fff;
    cursor:pointer;
    font-size:22px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--heading);
  }

  .nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }

  .nav__link,
  .menu__button{
    width:100%;
    justify-content:space-between;
  }

  .nav-switchers--desktop{ display:none; }
  .nav-switchers--mobile{
    display:flex;
    flex-wrap:wrap;
    padding-top:12px;
    border-top:1px solid rgba(15,23,42,.08);
    margin-top:8px;
  }

  .menu__panel--mega{
    position:static;
    inset:auto;
  }

  .menu__panel-inner{
    width:100%;
    margin:0;
    border-radius:0;
    box-shadow:none;
    border:0;
    background:transparent;
  }

  .menu__panel-head,
  .menu__panel-foot{ display:none; }
  .menu__list--mega{
    display:none;
    grid-template-columns:1fr;
    padding:6px 0 0 10px;
    margin-left:10px;
  }
  .menu.is-open .menu__list--mega{ display:block; }
  .menu__link--mega{
    padding:.5rem .5rem;
    background:transparent;
    border:0;
  }
  .menu__link-icon{ font-size:14px; }
}

@media (prefers-reduced-motion: reduce){
  .nav,
  .nav-overlay,
  .nav__link,
  .menu__button,
  .menu__link--mega{
    transition:none !important;
  }
}


/* =========================================================
   HEADER ACTIONS (profile icon button)
========================================================= */
.header_actions{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0;
  padding:0;
  list-style:none;
}
.dropdown-user-dashboard > .dropdown-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50% !important;
  text-decoration:none;
  background:#f3f6fb;
  border:1px solid #e6eaf0;
  position:relative;
  overflow:hidden;
}
.dropdown-user-dashboard > .dropdown-toggle::after{
  display:none;
}
.dropdown-user-dashboard .user-avatar{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.dropdown-user-dashboard .dropdown-menu{
  padding:8px;
  margin:0;
  list-style:none;
  min-width:220px;
}
.dropdown-user-dashboard .dropdown-item{
  display:block;
  width:100%;
  text-align:left;
}
.dropdown-user-dashboard .dropdown-header{
  padding:.35rem .6rem;
  margin:0;
}
.dropdown-user-dashboard .dropdown-divider{
  margin:.35rem 0;
}
.stt-icon-user1::before{
  content:"👤";
  font-size:18px;
  line-height:1;
}

/* ---------------------------
Buttons / Inputs (shared)
---------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:12px;
  padding:10px 16px;
  font-weight:600;
  cursor:pointer;
}
.btn--primary{
  background:var(--button-gradient);
  border:solid 0.1px white;
  -webkit-appearance:none;
  appearance:none;
  color:#fff;
  box-shadow:var(--shadow-soft);
}
.btn--primary:hover{filter:brightness(.96)}

.btn-primary{
  background:var(--button-gradient);
  border:solid 0.1px white;
  -webkit-appearance:none;
  appearance:none;
  color:#fff;
  box-shadow:var(--shadow-soft);
}
.btn--primary,
.btn-primary,
.btnx-primary,
.agck__btn--primary,
.agsu__btn--primary,
.agaccBtn--primary{
  color:#fff !important;
}
.btn-primary:hover{
  filter:brightness(.98);
  box-shadow:0 14px 28px rgba(46,116,184,.18);
}
.btn-outline-primary{
  color:var(--primary-strong);
  border-color:rgba(46,116,184,.35);
  background:rgba(46,116,184,.06);
}
.btn-outline-primary:hover{
  background:rgba(46,116,184,.12);
  border-color:rgba(46,116,184,.5);
}

.input{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
  background:var(--surface);
}
.input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(46,116,184,.16);
}

/* ---------------------------
Forms / filter bar
---------------------------- */
form.filters{
  display:grid;
  grid-template-columns:repeat(6,minmax(140px,1fr));
  gap:10px;
  align-items:end;
  margin:var(--space-3) 0 var(--space-4);
}
form.filters label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:var(--muted);
}
input,
select,
.form-control,
.form-select{
  height:40px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  outline:none;
}
input:focus,
select:focus,
.form-control:focus,
.form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(46,116,184,.16);
}
button{
  height:38px;
  padding:0 14px;
  border:solid 0.1px white;
  -webkit-appearance:none;
  appearance:none;
  background:var(--button-gradient);
  color:#fff;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
}
/* Bootstrap's outline and link buttons are TRANSPARENT by design: they set
   `background-color: transparent` and keep a coloured label. They never touch
   background-IMAGE — but the rule above uses the `background` SHORTHAND, which
   sets an image. So the brand gradient painted straight through every outline
   button while the label kept its variant colour:

     .btn-outline-danger    -> red  rgb(220,53,69)   on the blue gradient
     .btn-outline-secondary -> grey rgb(108,117,125) on the blue gradient
     .btn-outline-primary   -> blue                  on the blue gradient

   That is the site-wide "button text you can't read" bug, across ~349 outline
   buttons. Clearing the image lets Bootstrap's own background-color win, so
   these render as the outline buttons they were written as — and their :hover
   states, which set a solid background-color, work correctly too.

   Only transparent-by-design variants are listed. Solid buttons are untouched:
   .btn-primary declares its own `background: var(--button-gradient)` below, so
   it keeps the gradient. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark,
.btn-link{
  background-image:none;
}
button.secondary{
  background:var(--surface);
  color:var(--heading);
  border:1px solid var(--line);
}

/* Keep globe actions neutral (no gradient fill) */
button.globe-btn,
.btn.globe-btn,
button[data-globe-button]{
  background:#fff !important;
  background-image:none !important;
  color:var(--heading) !important;
  border:1px solid var(--line) !important;
}
button.globe-btn:hover,
.btn.globe-btn:hover,
button[data-globe-button]:hover{
  background:rgba(15,23,42,.04) !important;
}

/* Keep rating controls neutral (no gradient fill) */
.ag-rating-count,
.ag-rating-input button,
.ratingInput button,
.ratingClear,
#ratingClearBtn,
button[data-open-modal="ratingsList"],
button[data-open-modal="stayRatings"],
button[data-open-modal="activityRatings"],
button[data-open-modal="tourRatings"]{
  background-image:none !important;
}
.ag-rating-count,
.ratingClear,
#ratingClearBtn,
button[data-open-modal="ratingsList"],
button[data-open-modal="stayRatings"],
button[data-open-modal="activityRatings"],
button[data-open-modal="tourRatings"]{
  background-color:transparent !important;
  border-color:transparent !important;
}

form[data-rate-form] .btn-primary,
form[data-rating-form] .btn--primary,
.ag-rating-form .btnx-primary,
#ratingSubmitBtn{
  background:#fff !important;
  background-image:none !important;
  color:var(--heading) !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
}

.filters-panel .filters .filter-group{
  padding-bottom:6px;
}
.filters-panel .filters .filter-group + .filter-group{
  border-top:1px dashed rgba(46,116,184,.12);
  padding-top:10px;
}

/* ---------------------------
Home hero & search bar
---------------------------- */
.hero{
  margin-top:var(--space-2);
  background:
    linear-gradient(180deg, rgba(18,24,48,.65), rgba(18,24,48,.2)),
    radial-gradient(900px 380px at 12% -40%, rgba(46,116,184,.55), transparent),
    radial-gradient(700px 320px at 88% 10%, rgba(241,201,174,.35), transparent);
  color:#fffaf2;
  border-radius:var(--radius);
  overflow:hidden;
}
.hero__inner{
  max-width:1100px;
  min-height:550px;
  margin:0 auto;
  padding:var(--space-6) var(--space-3) var(--space-4);
}
.hero__title{
  font-size:34px;
  line-height:1.2;
  margin:0 0 var(--space-2);
}
.hero__subtitle{
  opacity:.95;
  margin-bottom:var(--space-3);
  color:rgba(255,255,255,.78);
}

.searchbar{
  background:rgba(255,255,255,.92);
  color:var(--heading);
  border:1px solid rgba(46,116,184,.15);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(10px);
}
.searchbar__row{
  display:grid;
  grid-template-columns:1fr 2fr 2fr auto;
  gap:10px;
  align-items:end;
}
.searchbar__field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.searchbar__label{
  font-size:12px;
  color:var(--muted);
}
.searchbar__submit{min-width:120px}

/* ---------------------------
Sections (home blocks)
---------------------------- */
.section{padding:var(--space-4) 0}
.section__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-3);
}
.section__title{font-size:22px}
.link{
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
}
.link:hover{text-decoration:underline}

/* ---------------------------
Card grid (v2 for home) + legacy card styles
---------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
}
.cards.cards--compact{
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
.card{
  background:var(--surface);
  border:1px solid rgba(46,116,184,.12);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:rgba(46,116,184,.35);
}
.card__media{
  aspect-ratio:4/3;
  background:var(--bg-soft);
}
.card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card__placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#5f6f7a;
  background:#f3efe8;
  font-weight:600;
}
.card__body{padding:12px}
.card__title{
  font-size:16px;
  margin:0 0 6px;
  color:var(--heading);
}
.card__meta{
  font-size:13px;
  color:var(--muted);
  display:flex;
  gap:8px;
}
.card__price{
  margin-top:8px;
  font-weight: 600;
  color:var(--heading);
}

/* Flight result cards */
.card--flight.result-card {
  border-radius: 18px;
}
.flight-airline-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(46,116,184,.12);
  color: var(--primary-strong);
  font-size: 22px;
}
.flight-airline-logo__mark {
  display: inline-block;
  transform: translateY(-1px);
}
.flight-airline-name {
  font-size: 15px;
}
.flight-airline-code {
  letter-spacing: 0.04em;
}
.flight-leg-time {
  font-size: 16px;
}
.flight-leg-route__city {
  font-weight: 600;
}
.flight-card-badges .badge {
  position: static;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(46,116,184,.1);
  border: 1px solid rgba(46,116,184,.18);
}
.flight-badge-urgency {
  background: rgba(239, 68, 68, .1) !important;
  border-color: rgba(239, 68, 68, .25) !important;
  color: #dc2626 !important;
  font-weight: 600;
  animation: pulse-urgency 2s ease-in-out infinite;
}
@keyframes pulse-urgency {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}
.flight-badge--toggle {
  cursor: pointer;
  background: rgba(46,116,184,.06) !important;
  border-style: dashed !important;
  transition: background .15s;
}
.flight-badge--toggle:hover { background: rgba(46,116,184,.12) !important; }
.flight-card-price {
  min-width: 160px;
}
.card-price-amount {
  font-size: 18px;
}
.card-price-note {
  max-width: 180px;
}

/* Flight timeline */
.flight-tl {
  padding: 8px 0;
}
.flight-tl__segment {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.flight-tl__point {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  flex-shrink: 0;
}
.flight-tl__time {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.flight-tl__iata {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.flight-tl__line {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  min-width: 60px;
}
.flight-tl__line::before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--primary-strong, #2563eb);
  border-radius: 2px;
  position: relative;
}
.flight-tl__duration {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.flight-tl__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-strong, #2563eb);
  border: 2px solid var(--surface, #fff);
  box-shadow: 0 0 0 1px var(--primary-strong, #2563eb);
  flex-shrink: 0;
}
.flight-tl__meta {
  font-size: 12px;
  color: var(--muted);
  padding-left: 52px;
  margin-bottom: 6px;
}
.flight-tl__stop {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface, #fff);
  border: 2px solid var(--primary-strong, #2563eb);
  flex-shrink: 0;
}
.flight-tl__layover {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 4px 20px;
  font-size: 11px;
  color: var(--muted);
}
.flight-tl__layover::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface, #fff);
  border: 2px solid var(--primary-strong, #2563eb);
  flex-shrink: 0;
}
.flight-tl__stops-label {
  font-size: 12px;
  color: var(--primary-strong, #2563eb);
  font-weight: 500;
}
/* Card-specific timeline sizing */
.card--flight .flight-tl__time { font-size: 14px; }
.card--flight .flight-tl__point { min-width: 38px; }

/* Fare comparison table */
.fare-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
}
.fare-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 400px;
}
.fare-table__header {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 10px 16px;
  color: var(--heading);
  background: rgba(46,116,184,.06);
  border-bottom: 2px solid rgba(46,116,184,.12);
}
.fare-table__header:first-child {
  border-radius: 10px 0 0 0;
}
.fare-table__header:last-child {
  border-radius: 0 10px 0 0;
}
.fare-table__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding: 8px 12px 8px 0;
  white-space: nowrap;
  vertical-align: middle;
}
.fare-table__row:nth-child(even) {
  background: rgba(46,116,184,.03);
}
.fare-table__cell {
  font-size: 14px;
  text-align: center;
  padding: 8px 16px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(46,116,184,.08);
}
.fare-table__select {
  border-radius: 999px;
  padding: 4px 20px;
  font-size: 13px;
}
.fare-table__best {
  background: rgba(5,150,105,.06);
  font-weight: 600;
  color: #059669;
}
@media (max-width: 575px) {
  .fare-table { margin: 0 -12px; padding: 0 12px; }
  .fare-table__cell { padding: 6px 10px; font-size: 13px; }
  .fare-table__header { padding: 8px 10px; font-size: 13px; }
}

/* Boarding pass */
.boarding-pass {
  background: var(--surface, #fff);
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(17,24,39,.06);
  margin-bottom: 18px;
}
.boarding-pass__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
}
.boarding-pass__header-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.boarding-pass__header-brand {
  font-size: 14px;
  font-weight: 600;
}
.boarding-pass__body {
  padding: 20px 20px 16px;
}
.boarding-pass__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.boarding-pass__row:last-child {
  margin-bottom: 0;
}
.boarding-pass__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.boarding-pass__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}
.boarding-pass__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--heading, #111827);
}
.boarding-pass__tear {
  position: relative;
  height: 1px;
  margin: 0 12px;
  border-top: 2px dashed #d1d5db;
}
.boarding-pass__tear::before,
.boarding-pass__tear::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f6f7fb;
}
.boarding-pass__tear::before { left: -22px; }
.boarding-pass__tear::after { right: -22px; }
.boarding-pass__footer {
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.boarding-pass__ref {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.boarding-pass__ref-code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--heading, #111827);
}
.boarding-pass__copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: var(--surface, #fff);
  font-size: 12px;
  color: var(--muted, #6b7280);
  cursor: pointer;
  transition: background .15s;
  width: fit-content;
}
.boarding-pass__copy:hover {
  background: rgba(46,116,184,.06);
}
.boarding-pass__status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}
.boarding-pass__status-text {
  font-size: 14px;
  font-weight: 600;
}
.boarding-pass__status-text[data-status="pending"] { color: #d97706; }
.boarding-pass__status-text[data-status="confirmed"],
.boarding-pass__status-text[data-status="approved"] { color: #059669; }
.boarding-pass__status-text[data-status="cancelled"],
.boarding-pass__status-text[data-status="canceled"],
.boarding-pass__status-text[data-status="rejected"] { color: #dc2626; }

@media (max-width: 575px) {
  .boarding-pass__row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .boarding-pass__body { padding: 16px; }
  .boarding-pass__header { padding: 12px 16px; }
  .boarding-pass__footer { padding: 12px 16px; }
  .boarding-pass__ref-code { font-size: 15px; }
}

/* Loading skeletons */
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text--short { width: 60%; }
.skeleton-text--long { width: 90%; }
.skeleton-text--medium { width: 75%; }
.skeleton-circle { border-radius: 50%; }
.skeleton-card {
  pointer-events: none;
  user-select: none;
}
.skeleton-card .card-body { opacity: 1; }

/* Inline field validation feedback */
.field-feedback { font-size: 12px; margin-top: 2px; display: block; }
.field-feedback--ok { color: #059669; }
.field-feedback--warn { color: #d97706; }
.field-feedback--error { color: #dc2626; }

/* Flight checkout stepper */
.checkout-steps__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.checkout-step-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(46,116,184,.18);
  background: rgba(255,255,255,.9);
  font-size: 13px;
  color: var(--heading);
}
.checkout-step-tab.is-active {
  border-color: rgba(46,116,184,.3);
  background: rgba(46,116,184,.12);
  color: var(--primary-strong);
}
.checkout-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(46,116,184,.18);
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 600;
}
.checkout-step {
  display: none;
}
.checkout-route{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(46,116,184,.18);
  background:var(--surface-alt);
}
.checkout-step-actions {
  display: flex;
  justify-content: flex-end;
}

/* Flight checkout (extracted from inline <style>) */
.agpay{
  margin-top: 16px;
}
.agpay__box{
  border:1px dashed var(--line);
  border-radius:14px;
  padding:12px;
  background:var(--surface-alt);
  margin-bottom:10px;
}
.agpay__line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight: 600;
  color:var(--heading);
  margin-bottom:10px;
}
.agpay__element{
  margin-top:6px;
}
.agpay__note{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  min-height:18px;
}

/* Seat-map modal (extracted from inline <style>) */
.seatmap-modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:none;align-items:center;justify-content:center;z-index:1050;padding:16px;
}
.seatmap-modal-backdrop.open{display:flex}
.seatmap-modal{
  width:100%;max-width:920px;background:var(--surface);border-radius:18px;border:1px solid var(--ag-color-brand-primary-border);
  box-shadow:0 24px 60px rgba(46,116,184,.25);overflow:hidden;
}
.seatmap-modal-head{
  padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--surface-alt);
}
.seatmap-modal-body{padding:16px;display:grid;gap:12px}
.seatmap-modal-foot{
  padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface-alt);
}
.seatmap-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.seatmap-dot{width:8px;height:8px;border-radius:999px;background:#9ca3af;display:inline-block}
.seatmap-dot.blocked{background:var(--accent)}
.seatmap-dot.reserved{background:var(--ag-color-warning-alt)}
.seatmap-dot.selected{background:var(--primary)}
.seatmap-grid{
  display:grid;gap:6px;overflow:auto;max-height:440px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface-alt);
}
.seatmap-row{display:flex;align-items:center;gap:6px}
.seatmap-row-num{width:28px;text-align:right;font-size:11px;color:var(--muted)}
.seatmap-seat{
  width:32px;height:28px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:11px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.seatmap-seat.is-aisle{width:14px;border:0;background:transparent;cursor:default}
.seatmap-seat.is-blocked{background:rgba(241,89,74,.12);border-color:rgba(241,89,74,.45);color:var(--ag-color-error-hover);cursor:not-allowed}
.seatmap-seat.is-reserved{background:rgba(244,180,92,.18);border-color:rgba(244,180,92,.5);color:#92400e;cursor:not-allowed}
.seatmap-seat.is-selected{outline:2px solid var(--primary);border-color:var(--ag-color-brand-primary-border)}

/* Legacy cards (used by list/detail snippets) */
.grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
  justify-items:stretch;
}
.card-image{
  position:relative;
  aspect-ratio:3/2;
  background:#e7efe9;
}
.card-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.18) 100%);
  opacity:.35;
  pointer-events:none;
}
.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card-image-placeholder{
  width:100%;
  height:100%;
  color:#5f6f7a;
  background:#f1ece5;
  font-weight:600;
}
.card-image .badge,
.ag-card__media .badge{
  position:absolute;
  left:10px;
  top:10px;
  background:rgba(26,43,72,.85);
  color:#fff;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
}
.card-body{padding:12px 14px}
.card-title{
  font-weight: 600;
  color:var(--heading);
  display:inline-block;
  margin-bottom:6px;
  font-size:16px;
}
.card-title:hover{text-decoration:underline}
.card-meta{
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}
.card-price{font-weight: 600}

.ag-card--wide{
  border-radius:18px;
}
.ag-card--wide .card-body{
  padding:16px 18px;
}
.ag-card--wide .card-price-amount{
  font-size:19px;
}
.ag-card--flight::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  z-index:1;
  pointer-events:none;
}

/* Unified catalog cards */
.ag-card{
  background:var(--surface);
  border:1px solid rgba(46,116,184,.12);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
}
.ag-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.ag-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:rgba(46,116,184,.35);
}
.ag-card--unified{
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:360px;
}
.ag-card__link{
  display:flex;
  flex-direction:column;
  height:100%;
  color:inherit;
  text-decoration:none;
  flex:1;
}
.ag-card__media{
  position:relative;
  height:190px;
  background:#e7efe9;
}
.ag-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.18) 100%);
  opacity:.4;
  pointer-events:none;
}
.ag-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ag-card__placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#5f6f7a;
  font-weight:600;
}
.ag-card__placeholder .placeholder-icon {
  font-size: 3rem;
  line-height: 1;
}
.ag-card__owner{
  position:absolute;
  top:12px;
  inset-inline-end:12px;
  width:34px;
  height:34px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid #fff;
  background:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 10px 22px rgba(15,23,42,.2);
}
.ag-card__owner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ag-card__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 16px 16px;
  flex:1;
  word-break: break-word;
  overflow-wrap: break-word;
}
.ag-card__title{
  font-weight: 600;
  color:var(--heading);
  line-height:1.2;
  font-size:16px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.ag-card__meta{
  font-size:13px;
  color:var(--muted);
}
.ag-card__rating{
  display:flex;
  align-items:center;
  gap:6px;
}
.ag-card__stars{
  position: relative;
  font-size: 13px;
  line-height: 1;
  color:#e5e7eb;
}
.ag-card__stars .fill{
  position:absolute;
  inset:0;
  width:var(--rating, 0%);
  overflow:hidden;
  color:#f4b45c;
  white-space:nowrap;
}
.ag-card__rating-meta{
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:4px;
  align-items:center;
}
.ag-card__rating-value{
  font-weight: 600;
  color:var(--heading);
}
.ag-card__snippet{
  font-size:13px;
  color:var(--muted);
  margin-top:auto;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.ag-card__price{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ag-card__actions{
  padding:10px 16px 16px;
  border-top:1px dashed rgba(46,116,184,.15);
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.ag-card__globe{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight: 600;
  text-decoration:none;
  color:var(--heading);
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  background-image:none !important;
}
.ag-card__globe:hover{ background:rgba(15,23,42,.04); }

.ag-card__link:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:14px;
}

@keyframes ag-card-rise{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.grid-cards--real > .ag-card,
.results-list .ag-card,
.d-flex.flex-column > .ag-card{
  animation:ag-card-rise .55s ease both;
}
.grid-cards--real > .ag-card:nth-child(2),
.d-flex.flex-column > .ag-card:nth-child(2){
  animation-delay:.05s;
}
.grid-cards--real > .ag-card:nth-child(3),
.d-flex.flex-column > .ag-card:nth-child(3){
  animation-delay:.1s;
}
.grid-cards--real > .ag-card:nth-child(4),
.d-flex.flex-column > .ag-card:nth-child(4){
  animation-delay:.15s;
}
@media (prefers-reduced-motion: reduce){
  .grid-cards--real > .ag-card,
  .results-list .ag-card,
  .d-flex.flex-column > .ag-card{
    animation:none;
  }
}

/* Skeletons */
.results-list .grid-cards--skeleton{ display:none; }
.results-list.is-loading .grid-cards--skeleton{ display:grid; }
.results-list.is-loading .grid-cards--real{ display:none; }

.ag-card--skeleton{
  border-color:rgba(26,43,72,.08);
  box-shadow:none;
}
.ag-card--skeleton .ag-card__media{
  background:linear-gradient(90deg,#eef1f6 0%,#f7f9fc 45%,#eef1f6 100%);
  background-size:200% 100%;
  animation:skeleton-loading 1.4s ease-in-out infinite;
}
.ag-skeleton{
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg,#eef1f6 0%,#f7f9fc 45%,#eef1f6 100%);
  background-size:200% 100%;
  animation:skeleton-loading 1.4s ease-in-out infinite;
}
.ag-skeleton--title{ height:16px; width:70%; }
.ag-skeleton--meta{ width:55%; }
.ag-skeleton--rating{ width:40%; }
.ag-skeleton--text{ width:100%; }
.ag-skeleton--price{ width:45%; height:14px; }

@keyframes skeleton-loading{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

@media (prefers-reduced-motion: reduce){
  .ag-card--skeleton .ag-card__media,
  .ag-skeleton{ animation:none; }
}
.ag-card__price-label{
  font-size:12px;
  color:var(--muted);
}
.ag-card__price-amount{
  font-weight: 600;
  color:var(--heading);
}
.ag-card__price-unit{
  font-size:12px;
  color:var(--muted);
}

/* Activities list summary */
.results-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid rgba(46,116,184,.18);
  border-radius:18px;
  background:rgba(255,255,255,.85);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(10px);
  margin-top: 12px;
}
.results-summary__left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.results-summary__count{
  font-weight: 600;
  color:var(--heading);
  font-size:15px;
}
.results-summary__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.results-chip{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight: 600;
  color:var(--heading);
  background:var(--surface-alt);
  border:1px solid rgba(46,116,184,.15);
}
.results-summary__right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.results-sort-form .form-label{
  white-space:nowrap;
}
.results-summary__toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(46,116,184,.18);
  background:rgba(255,255,255,.75);
}
.results-toggle{
  font-size:12px;
  font-weight: 600;
  color:var(--muted);
  text-decoration:none;
  padding:6px 12px;
  border-radius:999px;
}
.results-toggle.is-active{
  color:var(--heading);
  background:rgba(46,116,184,.12);
}
.results-clear{
  font-size:12px;
  font-weight: 600;
  color:var(--primary);
  text-decoration:none;
}
.results-clear:hover{ text-decoration:underline; }
.section__actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Unified results header (search summary) */
.results-header{
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(46,116,184,.18);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(10px);
}
.results-title{
  font-family:var(--font-serif);
  font-size:22px;
  letter-spacing:-.01em;
  color:var(--heading);
}
.results-subtitle{
  color:var(--muted);
}
.results-filter-chips{
  margin-top:8px;
}

/* Globe modal */
.ag-globe-modal .ag-modal__dialog{
  position:relative;
  inset:auto;
  width:min(1100px, 96vw);
  height:82vh;
  max-height:82vh;
}
.ag-globe-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  gap:12px;
  padding-inline-end:52px;
}
.ag-globe-modal__title{
  font-weight: 600;
  color:var(--heading);
}
.ag-globe-modal__link{
  font-size:12px;
  font-weight: 600;
  text-decoration:none;
  color:var(--primary);
}
.ag-globe-modal__body{
  flex:1;
  min-height:0;
}
.ag-globe-modal__frame{
  width:100%;
  height:100%;
  border:0;
}
@media (max-width: 991px){
  .results-summary{
    flex-direction:column;
    align-items:flex-start;
  }
  .results-summary__right{
    width:100%;
    justify-content:space-between;
  }
}
@media (max-width: 768px){
  .ag-globe-modal .ag-modal__dialog{
    width:min(520px, 94vw);
    height:78vh;
    max-height:78vh;
  }
}

/* Datepicker modal */
.ag-date-field{ position: relative; display: inline-block; width: 100%; }
.ag-date-input{
  color: transparent !important;
  caret-color: transparent;
  cursor: pointer;
}
.ag-date-input::placeholder{ color: transparent; }
.ag-date-display{
  position: absolute;
  top: 50%;
  inset-inline-start: 12px;
  transform: translateY(-50%);
  font-size: 14px;
  color: #0f172a;
  pointer-events: none;
  white-space: nowrap;
}
.ag-date-display.is-placeholder{ color: #94a3b8; }

:root{
  --agdp-ink: #0b1220;
  --agdp-muted: #64748b;
  --agdp-line: rgba(15,23,42,.10);
  --agdp-surface: #ffffff;
  --agdp-surface-2: #f8fafc;
  --agdp-shadow: 0 30px 80px rgba(2,8,20,.35), 0 6px 16px rgba(2,8,20,.16);
  --agdp-accent: #2563eb;
  --agdp-accent-2: #1d4ed8;
  --agdp-today: #0ea5e9;
  --agdp-radius: 18px;
  --agdp-day-size: 42px;
  --agdp-day-gap: 8px;
}

.ag-date-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2147483640;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ag-date-modal.is-open{ display: flex; }
body.ag-date-open{ overflow: hidden; }

.ag-date-dialog{
  width: min(460px, 92vw);
  background: var(--agdp-surface);
  border-radius: var(--agdp-radius);
  border: 1px solid var(--agdp-line);
  box-shadow: var(--agdp-shadow);
  overflow: hidden;
  transform: translateY(6px) scale(.99);
  opacity: 0;
  transition: transform .16s ease, opacity .16s ease;
}
.ag-date-modal.is-open .ag-date-dialog{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.ag-date-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--agdp-surface);
  border-bottom: 1px solid var(--agdp-line);
}
.ag-date-header h3{
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--agdp-ink);
  text-transform: none;
}
.ag-date-nav{
  display: flex;
  gap: 8px;
}
.ag-date-actions{
  display: flex;
  align-items: center;
  gap: 8px;
}
.ag-date-dialog button{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font: 700 13px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--agdp-ink);
  cursor: pointer;
}
.ag-date-icon-btn,
.ag-date-nav button{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--agdp-line);
  background: var(--agdp-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.ag-date-icon-btn:hover,
.ag-date-nav button:hover{
  background: var(--agdp-surface-2);
  border-color: rgba(37,99,235,.22);
  transform: translateY(-1px);
}
.ag-date-icon-btn:active,
.ag-date-nav button:active{ transform: translateY(0); }
.ag-date-icon-btn:focus-visible,
.ag-date-nav button:focus-visible{
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}

.ag-date-body{
  padding: 12px 14px 12px;
  background: var(--agdp-surface);
}
.ag-time-panel{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 0;
  background: var(--agdp-surface);
}
.ag-time-label{
  font-size: 11px;
  font-weight: 600;
  color: var(--agdp-muted);
  letter-spacing: .10em;
  text-transform: uppercase;
}
.ag-time-controls{
  display: flex;
  align-items: center;
  gap: 6px;
}
.ag-time-controls input{
  border: 1px solid var(--agdp-line);
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 600;
  background: var(--agdp-surface);
  width: 56px;
  text-align: center;
}
.ag-time-sep{
  color: #94a3b8;
  font-weight: 600;
}
.ag-date-weekdays,
.ag-date-grid{
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: var(--agdp-day-gap);
  grid-auto-rows: var(--agdp-day-size);
}
.ag-date-grid{
  height: calc(var(--agdp-day-size) * 6 + var(--agdp-day-gap) * 5);
}
.ag-date-weekdays span{
  text-align: center;
  font-size: 11px;
  color: var(--agdp-muted);
  letter-spacing: .10em;
  text-transform: uppercase;
  user-select: none;
}
.ag-date-day{
  width: 100%;
  height: var(--agdp-day-size);
  border-radius: 14px;
  border: 1px solid var(--agdp-line);
  background: var(--agdp-surface);
  color: var(--agdp-ink);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;
  user-select: none;
}
.ag-date-empty{ height: var(--agdp-day-size); }
.ag-date-day:hover{
  background: rgba(37,99,235,.06);
  border-color: rgba(37,99,235,.22);
  transform: translateY(-1px);
}
.ag-date-day:active{ transform: translateY(0); }
.ag-date-day:focus-visible{
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}
.ag-date-day.is-today{
  border-color: rgba(14,165,233,.55);
  background: rgba(14,165,233,.10);
  color: #0369a1;
}
.ag-date-day.is-selected{
  background: linear-gradient(135deg, var(--agdp-accent-2) 0%, var(--agdp-accent) 100%);
  border-color: var(--agdp-accent-2);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(29,78,216,.22);
}
.ag-date-day.is-in-range{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.18);
}
.ag-date-day.is-range-start,
.ag-date-day.is-range-end{
  background: linear-gradient(135deg, var(--agdp-accent-2) 0%, var(--agdp-accent) 100%);
  border-color: var(--agdp-accent-2);
  color: #fff;
}
.ag-date-day.is-disabled{
  opacity: 0.35;
  pointer-events: none;
}

.ag-date-footer{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--agdp-surface-2);
  border-top: 1px solid var(--agdp-line);
}
.ag-date-footer button{
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid var(--agdp-line);
  background: var(--agdp-surface);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.ag-date-footer button:hover{
  background: #eef2ff;
  border-color: rgba(37,99,235,.22);
  transform: translateY(-1px);
}
.ag-date-footer button:active{ transform: translateY(0); }
.ag-date-footer button:focus-visible{
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}
.ag-date-footer .ag-date-primary{
  background: var(--agdp-ink);
  color: #f8fafc;
  border-color: var(--agdp-ink);
  box-shadow: 0 10px 18px rgba(2,8,20,.18);
}
.ag-date-footer .ag-date-primary:hover{ background: #0f172a; }

.ag-date-modal.is-date .ag-time-panel{ display: none; }
.ag-date-modal.is-time .ag-date-body{ display: none; }

@media (max-width: 520px){
  .ag-date-modal{ align-items: flex-end; padding: 12px; }
  .ag-date-dialog{
    width: min(520px, 100vw);
    border-radius: 18px 18px 0 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .ag-date-dialog{ transition: none; }
  .ag-date-day, .ag-date-icon-btn, .ag-date-footer button{ transition: none; }
}

/* Filters panel styling */
.filters-panel{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(46,116,184,.18);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(10px);
}
.filters-panel .form-label{
  font-weight:600;
  color:var(--heading);
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.filters-panel hr{
  border-color:var(--line);
  opacity:.7;
}
.filters-panel .text-muted{
  color:var(--muted) !important;
}
.filters-panel .form-control,
.filters-panel .form-select{
  background:rgba(255,255,255,.9);
}

/* Modal skin (Bootstrap overrides for catalog filters) */
.modal-content{
  border-radius:18px;
  border:1px solid rgba(46,116,184,.2);
  box-shadow:0 24px 60px rgba(46,116,184,.25);
  background:var(--surface);
}
.modal-header{
  border-bottom:1px solid var(--line);
  background:var(--surface-alt);
}
.modal-title{
  font-family:var(--font-serif);
  color:var(--heading);
}
.modal-body{
  background:var(--surface);
}

.alert-info{
  border-color:rgba(46,116,184,.2);
  background:rgba(46,116,184,.08);
  color:var(--heading);
}
.alert-warning{
  border-color:rgba(241,201,174,.35);
  background:rgba(241,201,174,.08);
  color:var(--heading);
}

/* Activities filters sticky + off-canvas */
.activities-results .filters-panel{
  align-self:flex-start;
}
@media (min-width: 768px){
  .activities-results .filters-panel{
    position: sticky;
    top: 86px;
    max-height: calc(100vh - 110px);
    overflow: auto;
  }
}
@media (max-width: 767.98px){
  .activities-results .filters-panel{
    position: fixed;
    inset-block: 0;
    inset-inline-start: -100%;
    width: min(92vw, 360px);
    background: var(--surface);
    z-index: 2001;
    transition: inset-inline-start .2s ease;
    overflow-y: auto;
    padding: 12px 12px 18px;
    box-shadow: 0 28px 60px rgba(15,23,42,.25);
  }
  .activities-results .filters-panel.is-open{
    inset-inline-start: 0;
  }
  .activities-results .filters-panel__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 4px 2px 10px;
    border-bottom: 1px solid var(--line2);
    margin-bottom: 10px;
  }
  .activities-results .filters-panel__title{
    font-weight: 600;
    color:var(--heading);
  }
  .activities-results .filters-panel__close{
    border:0;
    width:36px;
    height:36px;
    border-radius:999px;
    background:rgba(46,116,184,.12);
    font-size:20px;
    cursor:pointer;
  }
  .activities-results .filters-overlay{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 2000;
    display: none;
  }
  .activities-results .filters-overlay.is-open{ display:block; }
  .activities-results .filters-reset{
    font-size:12px;
    font-weight: 600;
    color:var(--primary);
    text-decoration:none;
  }
}

/*
 * Media modal – layout overrides
 * NOTE: Base .ag-modal rules live in layouts.css (single source of truth).
 * Only media-modal-specific additions belong here.
 */
.ag-switcher-modal{
  align-items:center;
  justify-content:center;
}
.ag-modal-open{
  overflow:hidden;
}
.ag-media-modal.is-open,
.ag-media-modal:not([hidden]),
.ag-media-reactions-modal.is-open,
.ag-media-reactions-modal:not([hidden]),
.ag-media-emoji-modal.is-open,
.ag-media-emoji-modal:not([hidden]),
.ag-media-share-modal.is-open,
.ag-media-share-modal:not([hidden]){
  z-index:9000;
}
.ag-modal__backdrop{
  position:absolute;
  inset:0;
  z-index:0;
}
.ag-media-modal .ag-modal__dialog{
  z-index:1;
}
.ag-media-modal .ag-modal__close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
}
.ag-modal__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.ag-modal__media{
  position:relative;
  background:#0b1220;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:400px;
  overflow:hidden;
}
.ag-modal__media img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.ag-modal__media video{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.ag-modal__media > .ag-modal__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; min-height:0; border-radius:50%;
  border:none; padding:0; margin:0;
  background:rgba(0,0,0,0.5); color:#fff; font-size:0;
  font-weight:400; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s; box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.ag-modal__media > .ag-modal__nav:hover{ background:rgba(0,0,0,0.75); }
.ag-modal__media > .ag-modal__nav svg{ width:22px; height:22px; }
.ag-modal__nav--prev{ left:12px; }
.ag-modal__nav--next{ right:12px; }
.ag-modal__side{
  padding:16px;
  padding-top:48px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:340px;
}
@media (max-width:768px){
  .ag-modal__grid{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
  }
  .ag-modal__media{
    min-height:280px;
    max-height:50vh;
  }
  .ag-modal__side{
    min-width:auto;
  }
}

/* Custom modal-backdrop wrappers (provider wizards, etc.) */
.modal-backdrop .modal{
  display:flex;
  flex-direction:column;
}
/* -- Modal user row -- */
.ag-modal__user-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.ag-modal__user-row .who{
  display:flex;
  align-items:center;
  gap:10px;
}
.ag-modal__user-row .who img{
  width:36px;
  height:36px;
  border-radius:999px;
  object-fit:cover;
  background:#f3f4f6;
}
.ag-modal__user-row .name{
  font-weight:650;
  font-size:15px;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ag-modal__user-row .handle{
  font-size:13px;
  color:#64748b;
}

/* -- Modal kebab menu -- */
.ag-modal__kebab{
  position:relative;
}
.ag-modal__kebab summary{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  font-weight:700;
  color:#64748b;
  list-style:none;
  user-select:none;
  transition:background .15s;
}
.ag-modal__kebab summary::-webkit-details-marker{ display:none; }
.ag-modal__kebab summary::marker{ display:none; content:''; }
.ag-modal__kebab summary:hover{
  background:#f1f5f9;
  color:#0f172a;
}
.ag-modal__kebab[open] summary{
  background:#f1f5f9;
  color:#0f172a;
}
.ag-modal__kebab-drop{
  position:absolute;
  right:0;
  top:calc(100% + 4px);
  min-width:160px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(2,6,23,.10);
  border:1px solid rgba(15,23,42,.08);
  padding:6px;
  z-index:20;
}
.ag-modal__kebab-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:8px;
  font-size:13px;
  font-weight:500;
  border:none;
  background:transparent;
  cursor:pointer;
  width:100%;
  text-align:left;
  color:#334155;
  text-decoration:none;
  transition:background .12s;
}
.ag-modal__kebab-item:hover{ background:#f8fafc; }
.ag-modal__kebab-item--danger{ color:#ef4444; }
.ag-modal__kebab-item--danger:hover{ background:#fef2f2; color:#dc2626; }
.ag-modal__kebab-item svg{ flex-shrink:0; }

/* -- Modal info block -- */
.ag-modal__info{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ag-modal__caption{
  font-size:14px;
  color:#334155;
  line-height:1.55;
}
.ag-modal__sub-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#64748b;
}
.ag-modal__views svg{
  vertical-align:-2px;
  margin-right:3px;
}

/* -- Modal share button -- */
.ag-modal__share-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  height:40px;
  border:none;
  border-radius:10px;
  background:var(--ag-gradient-button);
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:filter 180ms;
}
.ag-modal__share-btn:hover{ filter:brightness(1.08); }
.ag-modal__share-btn svg{ width:16px; height:16px; }

/* -- Modal divider -- */
.ag-modal__divider{
  border:none;
  border-top:1px solid #e5e7eb;
  margin:2px 0;
}
.ag-react-area{margin-bottom:12px}
.ag-react-trigger{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  cursor:pointer;
}
.ag-react-icons{display:inline-flex; gap:4px}
.ag-react-pop{
  position:absolute;
  margin-top:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:6px;
  display:none;
  gap:6px;
  box-shadow:var(--shadow);
}
.ag-react-picker{position:relative; display:inline-flex}
.ag-react-picker:hover .ag-react-pop,
.ag-react-picker.is-open .ag-react-pop{display:flex;}
.ag-react-pop button{
  border:0;
  background:#fff;
  padding:6px;
  border-radius:8px;
  cursor:pointer;
}
.ag-react-pop button.is-active{background:#f3f6fb}
.ag-react-summary{margin-top:8px}
.ag-react-counts{display:flex; flex-wrap:wrap; gap:6px}
.ag-react-count-pill{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  cursor:pointer;
}
.ag-react-total{
  margin-top:6px;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:12px;
}
.ag-comments{margin-top:12px}
.ag-comments__list{display:grid; gap:10px; margin-top:8px}
.ag-comment-form{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-top:10px;
}
.ag-comment-form textarea{
  flex:1;
  min-height:72px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
}
.ag-comment-form .btn{height:40px}
.ag-cmt{
  display:flex;
  gap:10px;
}
.ag-cmt img{
  width:32px;
  height:32px;
  border-radius:999px;
  object-fit:cover;
}
.ag-cmt-body{
  background:#f8fafc;
  border-radius:12px;
  padding:8px 10px;
  flex:1;
}
.ag-cmt-actions{
  display:flex;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}
.ag-cmt-actions button{
  border:0;
  background:none;
  color:inherit;
  cursor:pointer;
  padding:0;
}
.ag-cmt-replies{
  margin-left:42px;
  display:grid;
  gap:8px;
}

/* Shared media interactions (enhanced) */
.ag-media-modal .ag-react-area{
  display:grid;
  gap:10px;
}
.ag-media-modal .ag-react-picker{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ag-media-modal .ag-react-picker--comment .ag-react-trigger{
  width:36px;
  height:36px;
}
.ag-media-modal .ag-react-picker--comment .ag-react-icons{
  width:24px;
  height:24px;
}
.ag-media-modal .ag-react-picker--comment .ag-react-icons span{
  font-size:.6rem;
}
.ag-media-modal .ag-react-picker--comment .ag-react-pop{
  bottom:calc(100% + 6px);
}
.ag-media-modal .ag-react-picker::after{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  bottom:100%;
  height:18px;
}
.ag-media-modal .ag-react-trigger{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:50%;
  width:46px;
  height:46px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
}
.ag-media-modal .ag-react-trigger .ag-react-icons{
  position:relative;
  width:30px;
  height:30px;
}
.ag-media-modal .ag-react-trigger .ag-react-icons span{
  position:absolute;
  font-size:.72rem;
  line-height:1;
}
.ag-media-modal .ag-react-trigger .ag-react-icons span:nth-child(1){ top:0; left:6px; }
.ag-media-modal .ag-react-trigger .ag-react-icons span:nth-child(2){ top:4px; right:0; }
.ag-media-modal .ag-react-trigger .ag-react-icons span:nth-child(3){ bottom:0; left:2px; }
.ag-media-modal .ag-react-trigger .ag-react-icons span:nth-child(4){ bottom:3px; right:2px; }
.ag-media-modal .ag-react-trigger .ag-react-icons span:nth-child(5){ top:10px; left:10px; }
.ag-media-modal .ag-react-trigger.is-active{
  border-color: rgba(19,153,252,.6);
  box-shadow: 0 0 0 3px rgba(19,153,252,.18);
}

/* Reel action-bar reaction trigger (vertical rail, over video).
   .ag-reel-modal is present whenever media_type=="reel" regardless of
   page, but its full sizing normally only ships via reels_feed.css
   (loaded by reels_feed.html only). Mirrored here so #actionBarReactWrap
   also renders correctly on pages that don't load that stylesheet, e.g.
   reel_detail.html (G11 P2 — was rendering as a zero-size icon + an
   orphaned "0"). Values match the .ag-reel-modal rules in reels_feed.css. */

/* Same gap, two more elements (2026-07-26): media_modal.html puts the CC
   captions button and #reelInfoOverlay INSIDE .ag-modal__media, and both
   are position:absolute ONLY in reels_feed.css. Without it they rejoined
   normal flow on reel_detail.html and stacked below the video in a black
   strip, clipped mid-element. Positioned here so the button overlays the
   video on any page; the feed's own richer rules still win on the feed
   itself (reels_feed.css loads later, via base.html's extra_head). */
.ag-modal-cc-btn{
  position:absolute;
  bottom:60px;
  inset-inline-end:16px;
  z-index:20;
  padding:4px 8px;
  border-radius:4px;
  border:1.5px solid rgba(255,255,255,0.5);
  background:rgba(0,0,0,0.5);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.5px;
  cursor:pointer;
  transition:background .15s;
}
.ag-modal-cc-btn:hover{ background:rgba(0,0,0,0.7); }
.ag-modal-cc-btn.active{
  background:rgba(0,149,246,0.85);
  border-color:rgba(0,149,246,0.85);
}
/* #reelInfoOverlay is the FEED modal's author/caption block. reel_detail.html
   reparents .ag-modal__user-row + .ag-modal__info onto the video for the same
   job, so on the detail page the overlay is a duplicate — hide it there only
   (the feed modal keeps using it). */
.ag-reel-detail #reelInfoOverlay{ display:none !important; }

.ag-reel-modal #actionBarLike{ display:none !important; }
.ag-reel-modal .ag-action-bar__react-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  position:relative;
}
.ag-reel-modal .ag-action-bar__react-btn{
  width:46px;
  height:46px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.4) !important;
  background:rgba(255,255,255,0.1) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:border-color .15s, background .15s, transform .15s;
}
.ag-reel-modal .ag-action-bar__react-btn:hover{
  border-color:rgba(255,255,255,0.7) !important;
  background:rgba(255,255,255,0.2) !important;
  transform:scale(1.1);
}
.ag-reel-modal .ag-action-bar__react-btn.is-active{
  border-color:rgba(0,149,246,0.8) !important;
  background:rgba(0,149,246,0.2) !important;
  box-shadow:0 0 0 3px rgba(0,149,246,0.2);
}
.ag-reel-modal .ag-action-bar__react-btn .ag-react-icons{
  position:relative;
  width:28px;
  height:28px;
}
.ag-reel-modal .ag-action-bar__react-btn .ag-react-icons span{
  position:absolute;
  font-size:.65rem;
  line-height:1;
}
.ag-reel-modal .ag-action-bar__react-btn .ag-react-icons span:nth-child(1){ top:0; left:5px; }
.ag-reel-modal .ag-action-bar__react-btn .ag-react-icons span:nth-child(2){ top:3px; right:0; }
.ag-reel-modal .ag-action-bar__react-btn .ag-react-icons span:nth-child(3){ bottom:0; left:1px; }
.ag-reel-modal .ag-action-bar__react-btn .ag-react-icons span:nth-child(4){ bottom:2px; right:1px; }
.ag-reel-modal .ag-action-bar__react-btn .ag-react-icons span:nth-child(5){ top:9px; left:9px; }
.ag-reel-modal .ag-react-picker--action .ag-react-pop{
  position:absolute;
  bottom:0;
  right:calc(100% + 10px);
  left:auto;
  display:none;
  flex-direction:row;
  gap:4px;
  padding:6px 8px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  z-index:20;
  white-space:nowrap;
}
.ag-reel-modal .ag-react-picker--action .ag-react-pop button{
  border:0;
  background:#f8fafc;
  border-radius:999px;
  width:36px;
  height:36px;
  cursor:pointer;
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s;
}
.ag-reel-modal .ag-react-picker--action .ag-react-pop button:hover{
  transform:scale(1.2);
  background:#eef2ff;
}
.ag-reel-modal .ag-react-picker--action .ag-react-pop .ag-react-more{
  background:#eef2ff;
  color:#4f46e5;
  font-weight:600;
}

.ag-media-modal .ag-react-pop{
  position:absolute;
  bottom:calc(100% + 8px);
  left:0;
  display:flex;
  gap:6px;
  padding:8px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 16px 40px rgba(15,23,42,.15);
  z-index:5;
  opacity:0;
  visibility:hidden;
  transform: translateY(6px);
  pointer-events:none;
  transition: opacity .25s ease .5s, transform .25s ease .5s, visibility 0s linear .5s;
}
/* Invisible bridge to prevent losing hover when moving to popup */
.ag-media-modal .ag-react-pop::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-16px;
  height:20px;
}
.ag-media-modal .ag-react-picker:hover .ag-react-pop,
.ag-media-modal .ag-react-picker.is-open .ag-react-pop{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
  pointer-events:auto;
  transition-delay:0s;
}
.ag-media-modal .ag-react-pop:hover{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
  pointer-events:auto;
  transition-delay:0s;
}
.ag-media-modal .ag-react-pop button{
  border:0;
  background:#f8fafc;
  border-radius:999px;
  width:36px;
  height:36px;
  cursor:pointer;
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.ag-media-modal .ag-react-pop .ag-react-more{
  background:#eef2ff;
  color:var(--primary);
  font-weight: 600;
  font-size:1rem;
}
.ag-media-modal .ag-react-pop button.is-active{
  box-shadow:0 0 0 3px rgba(19,153,252,.2);
}
.ag-media-modal .ag-react-picker.ag-react-hide .ag-react-pop{
  opacity:0;
  visibility:hidden;
  transform: translateY(6px);
  transition:none;
  pointer-events:none;
}
.ag-media-modal .ag-react-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.ag-media-modal .ag-react-counts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.ag-media-modal .ag-react-count-pill{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:999px;
  padding:4px 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
  color:var(--primary);
  font-weight:500;
  cursor:pointer;
}
.ag-media-modal .ag-react-total{
  border:0;
  background:none;
  color:var(--primary);
  font-weight:500;
  padding:0;
  cursor:pointer;
}
.ag-media-reactions-modal .ag-react-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0;
}
.ag-media-reactions-modal .ag-react-tab{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
  font-size:.9rem;
  color:var(--primary);
  font-weight:500;
}
.ag-media-reactions-modal .ag-react-tab.is-active{
  border-color:#2563eb;
  color:#2563eb;
  font-weight: 600;
}
.ag-media-reactions-modal .ag-react-list{
  display:grid;
  gap:8px;
}
.ag-media-reactions-modal .ag-react-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid #eef1f4;
  border-radius:12px;
  padding:8px 10px;
  background:#fff;
}
.ag-media-reactions-modal .ag-react-row .who{
  display:flex;
  align-items:center;
  gap:8px;
}
.ag-media-reactions-modal .ag-react-row img{
  width:28px;
  height:28px;
  border-radius:999px;
  object-fit:cover;
  background:#f3f4f6;
}
.ag-media-emoji-modal .ag-emoji-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap:8px;
  max-height:340px;
  overflow:auto;
  padding:6px 2px;
}
.ag-media-emoji-modal .ag-emoji-btn{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:12px;
  height:40px;
  font-size:1.2rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.ag-media-emoji-modal .ag-emoji-search{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:10px;
}
.ag-media-emoji-modal .ag-emoji-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.ag-media-emoji-modal .ag-emoji-tab{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
  font-size:.9rem;
  color:var(--primary);
  font-weight:500;
}
.ag-media-emoji-modal .ag-emoji-tab.is-active{
  border-color:#2563eb;
  color:#2563eb;
  font-weight: 600;
}
.ag-media-modal .ag-comments{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex: 1;
  min-height:0;
}
.ag-media-modal .ag-comments__list{
  border: 1px solid #e3e8f2;
  border-radius: 18px;
  padding:14px 12px;
  overflow:auto;
  min-height: 180px;
  max-height: 340px;
  background:#f8fafc;
}
@media (max-width: 767px) {
  .ag-media-modal .ag-comments__list {
    min-height: 60px;
    max-height: 200px;
  }
  .ag-media-modal .ag-modal__side {
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.ag-media-modal .ag-cmt{
  margin-bottom: 14px;
  display:flex;
  flex-direction:column;
}
.ag-media-modal .ag-cmt:last-child{ margin-bottom:0; }
.ag-media-modal .ag-cmt-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  position:relative;
}
.ag-media-modal .ag-cmt-children{
  margin-left: 36px;
  padding-left: 12px;
  border-left:2px solid #e2e8f0;
  position:relative;
}
.ag-media-modal .ag-cmt-children::before{
  content:"";
  position:absolute;
  left:-2px;
  top:-12px;
  bottom:6px;
  width:2px;
  background:#e2e8f0;
  border-radius:999px;
}
.ag-media-modal .ag-cmt-children .ag-cmt-row::before{
  content:"";
  position:absolute;
  left:-12px;
  top:12px;
  width:12px;
  height:12px;
  border-left:2px solid #e2e8f0;
  border-bottom:2px solid #e2e8f0;
  border-bottom-left-radius:10px;
}
.ag-media-modal .ag-cmt .avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  object-fit:cover;
  background:#eef2f7;
  flex:0 0 auto;
}
.ag-media-modal .ag-cmt-body{
  flex:1;
  min-width:0;
}
.ag-media-modal .ag-cmt-bubble{
  background:#f0f2f5;
  border-radius:16px;
  padding:8px 12px;
  display:inline-block;
  max-width:100%;
  position:relative;
  padding-bottom:22px;
}
.ag-media-modal .ag-cmt-close{
  position:absolute;
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  border:0;
  border-radius:999px;
  background:#e5e7eb;
  color:#374151;
  font-size:.8rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.ag-media-modal .ag-cmt-close:hover{
  background:#d1d5db;
}
.ag-media-modal .ag-cmt-name{
  font-weight: 600;
  color:#050505;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:2px;
}
.ag-media-modal .ag-cmt-name a{
  color:#050505;
  text-decoration:none;
}
.ag-media-modal .ag-cmt-name .handle{
  color:#64748b;
  font-weight:500;
  font-size:.82rem;
}
.ag-media-modal .ag-cmt-text{
  color:#050505;
  font-size:.92rem;
}
.ag-media-modal .ag-cmt-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
  font-size:.78rem;
  color:#64748b;
}
.ag-media-modal .ag-cmt-actions .action-link{
  border:0;
  background:transparent;
  color:#606770;
  font-weight: 600;
  cursor:pointer;
  padding:0;
}
.ag-media-modal .ag-cmt-actions .action-link:hover{
  color:#1877f2;
}
.ag-media-modal .ag-cmt-actions .time{
  color:#8a8d91;
  font-weight:500;
  width:max-content;
}
.ag-media-modal .ag-cmt-actions .ag-react-counts{
  margin-left:auto;
}
.ag-media-modal .ag-cmt .ag-react-counts{
  position:absolute;
  right:8px;
  bottom:6px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:1px 4px;
  display:flex;
  gap:4px;
  align-items:center;
  font-size:10px;
  line-height:1;
  cursor:pointer;
}
.ag-media-modal .ag-cmt .ag-react-count-pill{
  border:0;
  background:transparent;
  font-size:10px;
  padding:0 2px;
  line-height:1;
}
.ag-media-modal .ag-cmt-reply{
  margin-top:8px;
  display:none;
  padding-left:44px;
}
.ag-media-modal .ag-cmt-reply.is-open{ display:block; }
.ag-media-modal .ag-cmt-reply textarea{
  background:#f0f2f5;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:8px 12px;
}
.ag-media-modal .ag-mention{
  position:relative;
}
.ag-media-modal .ag-mention-list{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 12px 24px rgba(15,23,42,.12);
  z-index:20;
  margin-top:4px;
  max-height:240px;
  overflow:auto;
}
.ag-media-modal .ag-mention-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  cursor:pointer;
}
.ag-media-modal .ag-mention-item:hover{
  background:#f8fafc;
}
.ag-media-modal .ag-mention-item img{
  width:26px;
  height:26px;
  border-radius:999px;
  object-fit:cover;
  background:#f3f4f6;
}
.ag-media-modal .ag-comment-form{
  display:flex;
  gap:8px;
  align-items:flex-end;
}

/* ---------------------------
   Reel detail — Instagram layout
   Scoped to .ag-reel-detail page only
---------------------------- */
.ag-reel-detail{ --ag-border: rgba(15,23,42,.10); }
.ag-reel-detail .ag-reel-wrap{ max-width:480px; margin:0 auto; padding:24px 0; }

.ag-reel-detail #photoModal,
.ag-reel-detail #photoModal.is-open{
  position:static !important;
  inset:auto !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  padding:0 !important;
  z-index:auto !important;
  transition:none !important;
}
.ag-reel-detail .ag-modal__backdrop,
.ag-reel-detail .ag-modal__close{ display:none !important; }

.ag-reel-detail #photoModal .ag-modal__dialog{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  box-shadow:none !important;
  border-radius:0 !important;
  transform:none !important;
  transition:none !important;
  /* Fix round 1 (Task 1.17, measured on the real page): the generic
     lightbox's own base rule gives .ag-modal__dialog a 12px margin --
     never overridden here before, since every property above already
     forces the dialog to 100% width/no-radius/etc. On a real page (not
     an isolated harness), that 12px combines with this page's own outer
     content padding to push the dialog's right edge past the viewport
     at some widths (measured: 640x360 overflowed by 4px) -- pre-existing
     for .ag-modal__media itself, inherited by the reply bar docked right
     after it. Zeroed here, scoped to .ag-reel-detail only (the generic
     lightbox elsewhere is untouched). */
  margin:0 !important;
}
.ag-reel-detail .ag-modal__grid{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
.ag-reel-detail .ag-modal__media{
  position:relative !important;
  aspect-ratio:9/16;
  max-height:85vh;
  min-height:480px;
  overflow:hidden !important;
  border-radius:12px;
  background:#000;
  display:block !important;
  align-items:initial !important;
  justify-content:initial !important;
}
.ag-reel-detail .ag-modal__media::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:50%;
  background:linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  z-index:3;
  pointer-events:none;
  border-radius:0 0 12px 12px;
}
.ag-reel-detail .ag-modal__media video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  max-width:none !important;
  max-height:none !important;
}
.ag-reel-detail #photoModalImg{ display:none !important; }
.ag-reel-detail .ag-modal__nav{ display:none !important; }
.ag-reel-detail .ag-action-bar,
.ag-reel-detail .ag-action-bar[hidden]{ display:flex !important; bottom:110px !important; }

/* G11 P2: .ag-modal__user-row and .ag-modal__info are independent
   position:absolute siblings (reel_detail.html reparents both directly
   into .ag-modal__media). They used to sit only 54px apart (114 - 60);
   .ag-modal__info's actual content (caption + hashtags + audio) easily
   exceeds that, so it grew upward and painted over the user row/avatar
   above it (same z-index, later in DOM order wins). .ag-modal__info is
   now hard-bounded via max-height + overflow-y:auto below, so
   .ag-modal__user-row's offset only needs to clear that fixed max
   footprint: 60 (info's bottom) + 96 (info's max-height) + 8 (gap) = 164. */
.ag-reel-detail .ag-modal__user-row{
  position:absolute !important;
  bottom:164px;
  left:16px;
  right:80px;
  z-index:5;
  color:#fff;
  padding:0 !important;
  border:none !important;
}
.ag-reel-detail .ag-modal__user-row .who{ display:flex; align-items:center; gap:10px; }
.ag-reel-detail .ag-modal__user-row .who img{
  width:40px !important; height:40px !important;
  border-radius:50%; border:2px solid rgba(255,255,255,0.7);
}
.ag-reel-detail .ag-modal__user-row .name{
  color:#fff !important; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.ag-reel-detail .ag-modal__user-row .handle{
  color:rgba(255,255,255,0.85) !important; text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.ag-reel-detail .ag-modal__kebab summary{
  color:rgba(255,255,255,0.9) !important; text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
/* G11 P2: #photoModalKebab (reparented here, above) is the sole owner
   menu on the detail page and already has the fuller Edit/Archive/Delete
   set — hide the action bar's separate #actionBarMore kebab (Edit/Delete
   only) so owners don't see two ⋮ menus stacked over the video.
   #actionBarMore remains the only kebab for the popup-modal flow
   (reels_feed.html), where #photoModalKebab stays hidden inside
   .ag-modal__side (see .ag-reel-modal .ag-modal__side .ag-modal__user-row
   in reels_feed.css) — this rule is scoped to .ag-reel-detail so that
   flow is untouched. */
.ag-reel-detail #actionBarMore{ display:none !important; }

/* G11 P2: caption/meta panel used to be display:-webkit-box with
   -webkit-line-clamp:2, hard-clipping anything past 2 lines with only an
   invisible cursor:pointer as the "there's more" affordance. Bounded to
   content via max-height + overflow-y:auto instead, so all text stays
   reachable by scrolling; the existing click-to-expand handler in
   media_modal.js (toggles .is-expanded on #photoModalCaption) now grows
   the panel via :has() below instead of un-clamping text. */
.ag-reel-detail .ag-modal__info{
  position:absolute !important;
  bottom:60px; left:16px; right:80px;
  z-index:5;
  max-height:96px;
  overflow-y:auto;
}
.ag-reel-detail .ag-modal__info:has(.ag-modal__caption.is-expanded){
  max-height:50vh;
}
.ag-reel-detail .ag-modal__caption{
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
  cursor:pointer;
  line-height:1.4;
}
.ag-reel-detail .ag-modal__hashtags .ag-hashtag-pill{
  color:#fff; border-color:rgba(255,255,255,0.3); text-shadow:0 1px 2px rgba(0,0,0,0.4);
}
.ag-reel-detail .ag-modal__views{
  color:rgba(255,255,255,0.9) !important; text-shadow:0 1px 2px rgba(0,0,0,0.4);
}
.ag-reel-detail .ag-modal__sub-row{ margin-top:4px; }
.ag-reel-detail .ag-modal__share-btn{ display:none !important; }
.ag-reel-detail .ag-modal__divider{ display:none; }

/* Side panel — hidden by default, shown as overlay bottom sheet */
.ag-reel-detail .ag-modal__side{
  display:none !important;
  position:absolute !important;
  bottom:0; left:0; right:0;
  z-index:10;
  padding:16px !important;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:16px 16px 0 0;
  max-height:65%;
  overflow-y:auto !important;
  min-width:0 !important;
  box-shadow:0 -4px 24px rgba(0,0,0,0.15);
  transform:translateY(100%);
  transition:transform 0.3s ease;
}
.ag-reel-detail.is-comments-open .ag-modal__side{
  display:flex !important;
  transform:translateY(0);
}
/* Close button for the comments overlay */
.ag-reel-detail .ag-side-close{
  position:absolute;
  top:12px; right:12px;
  width:32px; height:32px;
  border:none; border-radius:50%;
  background:rgba(0,0,0,0.08);
  color:#333; font-size:18px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.ag-reel-detail .ag-side-close:hover{ background:rgba(0,0,0,0.14); }
/* Hide reaction area inside comments overlay (moved to action bar) */
.ag-reel-detail .ag-modal__side .ag-react-area{ display:none !important; }
.ag-reel-detail .ag-modal__side .ag-react-area + .ag-modal__divider{ display:none !important; }
.ag-reel-detail .ag-modal__side > .text-muted:first-of-type{ display:none; }

/* Overlay backdrop when comments are open */
.ag-reel-detail .ag-comments-backdrop{
  display:none;
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.3);
  z-index:9;
}
.ag-reel-detail.is-comments-open .ag-comments-backdrop{ display:block; }

/* Messenger v4 Task 1.17 (fix round 1, Critical 1): "Reply to <name>..."
   bar for a Reel opened from a DM card's from_thread link. A NORMAL
   in-flow block docked directly after .ag-modal__media by the inline
   script above (a flex child of .ag-modal__grid, which is
   flex-direction:column) -- NOT position:absolute inside the video box.
   The original absolute-inside-the-video draft measured clean in an
   isolated harness, but on the REAL page (base.html chrome + the fixed
   .ag-chat pill + the video's own overflow:hidden/min-height:480px/
   max-height:75-85vh) it was unreachable at every required viewport and
   sat on top of the native video controls. In-flow placement fixes both
   by construction: it can never overlap the video (it isn't inside it
   any more), and it's part of the page's own scroll flow, which the
   inline script's scrollBarIntoView() then nudges clear of the fixed
   chat pill. Styled to match the page's OWN light chrome below the
   video (the site is light-only, color-scheme: light only) rather than
   the previous translucent-over-video treatment, which would look wrong
   sitting on a plain white/page background. The status line is a THIRD
   row item (between the input and Send), not a stacked second line, so
   the bar's height never changes across idle/sent/error. Logical
   (padding-inline/padding-block) properties throughout so the row
   mirrors correctly under RTL with no separate override. */
.ag-reel-detail .ag-reel-reply-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding-block:12px;
  padding-inline:16px;
  background:var(--ag-color-bg-surface, #fff);
  border-top:1px solid var(--ag-color-border, #D9E1EE);
}
.ag-reel-detail .ag-reel-reply-bar__input{
  flex:1;
  min-width:0;
  border:1px solid var(--ag-color-border, #D9E1EE);
  border-radius:999px;
  padding-block:8px;
  padding-inline:14px;
  background:var(--ag-color-bg-surface-alt, #F9FAFD);
  color:var(--ag-color-text-body, #2A2A55);
  font-size:14px;
}
.ag-reel-detail .ag-reel-reply-bar__input::placeholder{ color:var(--ag-color-text-muted, #6B7491); }
.ag-reel-detail .ag-reel-reply-bar__send{
  flex-shrink:0;
  border:none;
  border-radius:999px;
  padding-block:8px;
  padding-inline:16px;
  background:var(--ag-color-brand-primary);
  color:#fff;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
}
.ag-reel-detail .ag-reel-reply-bar__send:disabled{ opacity:0.6; cursor:default; }
/* Same one-element, two-outcome status convention as
   .ag-share-sheet-v2__status (components.css) -- always rendered, never
   `hidden`; :empty collapses it to zero width between send attempts.
   flex-shrink so a long "Couldn't send. Try again." never pushes the
   Send button off-screen on a narrow phone; ellipsis is a defensive
   belt-and-braces only (neither status string realistically needs it at
   320px+). */
.ag-reel-detail .ag-reel-reply-bar__status{
  flex-shrink:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:600;
  color:var(--ag-color-text-muted, #6B7491);
}
.ag-reel-detail .ag-reel-reply-bar__status:empty{ display:none; }
.ag-reel-detail .ag-reel-reply-bar__status--error{ color:var(--ag-color-error-text, #C0392B); }

/* Reaction picker in action bar */
.ag-reel-detail .ag-action-bar .ag-react-picker{
  position:relative;
  display:inline-flex;
}
.ag-reel-detail .ag-action-bar .ag-react-trigger{
  width:auto !important; height:auto !important;
  border:none !important; background:none !important;
  padding:0 !important;
}
.ag-reel-detail .ag-action-bar .ag-react-icons{
  display:none;
}
.ag-reel-detail .ag-action-bar .ag-react-pop{
  bottom:calc(100% + 8px);
  right:0; left:auto;
}

.ag-reel-detail .ag-video-progress{
  position:absolute; bottom:0; left:0; right:0; z-index:7;
}
@media (max-width:767px){
  .ag-reel-detail .ag-reel-wrap{ padding:0; max-width:100%; }
  .ag-reel-detail .ag-modal__media{ border-radius:0; max-height:75vh; }
  .ag-reel-detail .ag-modal__media::after{ border-radius:0; }
  .ag-reel-detail .ag-modal__side{ border-radius:16px 16px 0 0; }
}

/* ---------------------------
Hotel detail layout
---------------------------- */
.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.columns{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:24px;
}
@media (max-width:980px){
  .columns{grid-template-columns:1fr}
}

.aside{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  background:#fff;
  position:sticky;
  top:88px;
  height:fit-content;
  box-shadow:var(--shadow);
}

.room-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}
.room-card{
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  background:#fff;
}
.room-card img{
  width:112px;
  height:75px;
  object-fit:cover;
  border-radius:8px;
  background:var(--bg-soft);
}
.room-title{
  font-weight:600;
  color:var(--heading);
}
.room-meta{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

/* ---------------------------
Utilities
---------------------------- */
.muted{color:var(--muted)}
.mt-0{margin-top:0}
.mt-1{margin-top:var(--space-1)}
.mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}

/* ---------------------------
Responsive tweaks
---------------------------- */
@media (max-width:720px){
  .hero__title{font-size:26px}
  .searchbar__row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .searchbar__submit{width:100%}
}

/* =========================================================
   CLEAN AUTH MODAL POLISH
========================================================= */
.login-register-popup .modal-dialog{max-width:580px;}
.login-register-popup .modal-content{
  border-radius:16px !important;
  box-shadow:0 24px 64px rgba(16,24,40,.18);
  border:1px solid #e6eaf0;
  overflow:hidden;
}

/* Header + tabs */
.login-register-popup .modal-header{
  border:0;
  padding:16px 20px 0 20px;
  display:block !important; /* keep tabs full width under close button */
}
.login-register-popup .modal-header .close{
  border:0;
  background:transparent;
  margin-left:auto;
  opacity:.7;
}
.login-register-popup .modal-header .close:hover{opacity:1;}

.login-register-popup .account-tabs{
  display:flex !important;
  gap:24px;
  list-style:none !important;
  padding:0 20px 10px 20px !important;
  margin:0 !important;
  border-bottom:1px solid #eef2f7;
}
.login-register-popup .account-tabs li{
  cursor:pointer;
  font-weight:600;
  color:#6b7b93;
  padding:10px 0;
  border-bottom:2px solid transparent;
  width:80px;
  text-align:center;
}
.login-register-popup .account-tabs li.active{
  color:#2e74b8;
  border-color:#2e74b8;
}

/* Body + forms */
.login-register-popup .modal-body{padding:20px;}
.login-register-popup .login-form-wrapper{display:none;}
.login-register-popup .login-form-wrapper.active{display:block;}
.login-register-popup .login-form-wrapper .heading{
  font-weight: 600;
  font-size:1.125rem;
  margin-bottom:12px;
}

.login-register-popup .form-group{margin-bottom:12px;}
.login-register-popup .form-control{
  height:44px;
  border-radius:10px;
}
.login-register-popup .form-submit{
  width:100%;
  height:44px;
  border:0;
  border-radius:10px;
  background:#5191FA;
  color:#fff;
  font-weight:600;
}

/* Remember/terms line on one row */
.login-register-popup .st-flex.space-between{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.login-register-popup input[type="checkbox"]{
  width:16px;
  height:16px;
  vertical-align:middle;
}

/* Password eye fallback (emoji) */
.login-register-popup .field-password{position:relative;}
.login-register-popup .field-password .stt-icon{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  user-select:none;
  opacity:.75;
}
.login-register-popup .field-password .stt-icon:hover{opacity:1;}
.login-register-popup .field-password .ic-view::after{content:"👁";}
.login-register-popup .field-password .ic-hide::after{content:"🙈";}
.login-register-popup .field-password .ic-hide{display:none;}
.login-register-popup .field-password.show .ic-view{display:none;}
.login-register-popup .field-password.show .ic-hide{display:inline-block;}

/* Hide loader if unused */
.login-register-popup .loader-wrapper{display:none !important;}

/* Nicer backdrop */
.modal-backdrop.show{opacity:.4;}

/* ===== A11y utility used by base.html & language_switcher ===== */
.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================================================
   Misc overrides (dropdowns, pills, counters, etc.)
========================================================= */
.dropdown-item{
  display:block;
  width:100%;
  padding:.45rem .9rem;
  color:var(--heading);
  text-decoration:none;
  background:transparent;
  border:0;
  border-radius:10px;
  transition:background .15s ease, color .15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus{
  background:rgba(15,23,42,.06);
  color:var(--heading);
}
.dropdown-menu{
  background:var(--surface);
  border:1px solid rgba(46,116,184,.15);
  box-shadow:0 18px 40px rgba(15,23,42,.18);
}

.popover{z-index:1000;}
.popover.open .popover-menu{color:#6c757d;}

.btn.secondary{
  background:var(--surface);
  color:var(--heading);
  border:1px solid var(--line);
}

/* Cookie consent banner */
.ag-cookie-banner{
  position:fixed;
  bottom:16px;
  left:16px;
  right:16px;
  z-index:1050;
  display:flex;
  justify-content:center;
}
.ag-cookie-banner__inner{
  width:min(880px,100%);
  background:#0f172a;
  color:#f8fafc;
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 24px 50px rgba(15,23,42,.35);
  display:grid;
  gap:12px;
}
.ag-cookie-banner__text p{
  margin:6px 0 0;
  color:#cbd5f5;
}
.ag-cookie-banner__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ag-cookie-banner__links{
  display:flex;
  gap:8px;
  font-size:.9rem;
}
.ag-cookie-banner__links a{
  color:#e2e8f0;
  text-decoration:underline;
}
@media (max-width:720px){
  .ag-cookie-banner{
    left:12px;
    right:12px;
    bottom:12px;
  }
  .ag-cookie-banner__inner{
    border-radius:14px;
  }
  .ag-cookie-banner__actions{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ───────────────────────────────────────────────────────────
   Bottom-right widget stack — spaced vertically to avoid overlap
   ─────────────────────────────────────────────────────────── */
.ag-faq-widget {
  bottom: 24px !important;
  z-index: 1050 !important;
}
.ag-support-trigger {
  bottom: 84px !important;
  z-index: 1040 !important;
}
.ag-checklist-widget {
  bottom: 144px !important;
  z-index: 90 !important;
}

/* Ensure expanded panels open above the stack */
.ag-faq-widget .faq-panel,
.ag-support-trigger .support-panel {
  bottom: 60px;
}
.ag-checklist-widget .checklist-panel {
  bottom: 60px;
}

@media (max-width: 600px) {
  .ag-faq-widget,
  .ag-support-trigger,
  .ag-checklist-widget {
    right: 12px !important;
  }
}

/* -- Passenger stepper --------------------------------------------------- */
.pax-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.pax-stepper__btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #f9fafb;
  color: #374151;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  user-select: none;
}
.pax-stepper__btn:hover:not(:disabled) { background: #f3f4f6; }
.pax-stepper__btn:disabled { opacity: .35; cursor: not-allowed; }
.pax-stepper__val {
  width: 40px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  border: none;
  background: transparent;
  -moz-appearance: textfield;
}
.pax-stepper__val::-webkit-outer-spin-button,
.pax-stepper__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pax-stepper__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}
.pax-stepper__hint {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

/* ── Policy section (flight detail) ── */
.policy-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
}
.policy-item + .policy-item { border-top: 1px solid #f3f4f6; }
.policy-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.policy-item__icon--cancel { background: rgba(239,68,68,.08); color: #dc2626; }
.policy-item__icon--refund { background: rgba(37,99,235,.08); color: #2563eb; }
.policy-item__title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px;
}
.policy-item__text {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}

/* Hold countdown timer (flight checkout) */
.hold-timer {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(37,99,235,.06);
  color: #1e40af;
  font-size: 14px;
}
.hold-timer--warning { background: rgba(245,158,11,.08); color: #b45309; }
.hold-timer--expired { background: rgba(239,68,68,.08); color: #dc2626; }

/* Completeness progress bar (provider flight dashboard) */
.completeness-bar {
  width: 100%;
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
}
.completeness-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}

/* Flight detail helpers */
.ag-airline-logo { object-fit: contain; border-radius: 8px; }
.fare-table__low-seats { color: #ef4444; font-weight: 600; }

/* ── Theme toggle button ── */
.header-theme-toggle {
  background: none;
  border: none;
  color: var(--ag-color-text-body);
  font-size: 1.15rem;
  padding: var(--ag-space-2);
  cursor: pointer;
  border-radius: var(--ag-radius-pill);
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-theme-toggle:hover {
  background: var(--ag-color-bg-surface-alt);
  color: var(--ag-color-brand-primary);
}

/* ── Tour card badges & highlights ── */

.ag-card__badge {
  position: absolute;
  top: var(--ag-space-sm);
  left: var(--ag-space-sm);
  padding: 2px 10px;
  font-family: var(--ag-font-sans);
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-semibold);
  border-radius: var(--ag-radius-sm);
  z-index: var(--ag-z-raised);
  line-height: 1.4;
}

.ag-card__badge--multiday {
  background: var(--ag-color-brand-secondary);
  color: var(--ag-color-text-on-dark);
}

.ag-card__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.ag-card__highlight {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-medium);
  color: var(--ag-color-text-muted);
}

.ag-card__highlight svg {
  color: var(--ag-color-brand-primary);
  flex-shrink: 0;
}

/* Legal pages (Messenger v4 Task 4.3): the voice-note disclosure rows reuse
   the surrounding tables' cell look without inline styles (CSP). Lives in
   styles.css because BOTH legal layouts (base.html and landing) load it. */
.ag-legal-cell {
  padding: 10px;
  border: 1px solid #e5e7eb;
}
.ag-legal-text {
  font-size: 15px;
  line-height: 1.7;
}