/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Brand reskin to match the landing: amber primary on a navy structure, warm sand neutrals,
     Fraunces display + Plus Jakarta body. --coral is kept as the name of the "primary" token so
     the whole app re-themes without renaming every reference; it now holds amber.
     The CS/Admin consoles override these back to the prior blue/Inter look (see `.admin-page`). */
  --coral: #F5A623;            /* primary / accent (amber) */
  --coral-dark: #E8961A;
  --coral-light: #FFF6EA;      /* sand-tinted light */
  --coral-dark-text: #9a6510;
  --gold: #199f7e;
  --gold-light: #e7f7f4;
  --navy: #0F1F3D;
  --navy-2: #162B52;
  --navy-light: #1a3050;
  --accent: #F5A623;
  --accent-light: #FFF6EA;
  --sunset: #E4632A;
  --sky: #7FB6FF;
  --sand: #FFF6EA;
  --green: #2fbf9a;
  --white: #fff;
  --bg: #FBFAF7;               /* warm off-white page ground */
  --border: #E6E1D8;
  --text: #1B2438;
  --muted: #5B6579;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(15,31,61,0.08);
  --shadow-lg: 0 22px 52px rgba(15,31,61,0.14);
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text); background: var(--white); font-size: 15px; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
textarea, input, select, button { font-family: inherit; }

/* ===== BUTTONS (landing style: pill shape, amber primary with navy text) ===== */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; border: 2px solid transparent; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.btn-primary { background: var(--coral); color: var(--navy); border-color: var(--coral); }
.btn-primary:hover { background: var(--coral-dark); border-color: var(--coral-dark); transform: translateY(-1px); }
.btn-outline-coral { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline-coral:hover { background: var(--navy); color: white; }
.btn-outline-nav { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,.6); border-radius: 999px; padding: 9px 0; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 92px; }
.btn-outline-nav:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-primary-nav { background: var(--coral); color: var(--navy); border: 2px solid var(--coral); border-radius: 999px; padding: 9px 0; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; width: 92px; }
.btn-primary-nav:hover { background: var(--coral-dark); border-color: var(--coral-dark); }
.w-full { width: 100%; justify-content: center; }
.mt-2 { margin-top: 12px; }
.mt-4 { margin-top: 24px; }

/* ===== NAVBAR ===== */
.navbar {
  position: sticky; top: 0; z-index: 1000;
  background: var(--navy); padding: 0 5%;
  display: flex; align-items: center; gap: 24px; height: 64px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.2);
}
.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: white; }
.logo-icon { width: 38px; height: 38px; background: var(--coral); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: white; flex-shrink: 0; }
.logo-icon.sm { width: 30px; height: 30px; font-size: 14px; }
.logo-img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.logo-img.sm { width: 30px; height: 30px; }
.logo-text { font-size: 16px; color: white; letter-spacing: 0.3px; }
.logo-text strong { color: var(--coral); }
.logo-stack { display: flex; flex-direction: column; gap: 0; line-height: 1.15; }
.logo-sub { display: block; font-size: 10.5px; font-weight: 600; color: var(--coral); letter-spacing: 0.02em; margin-top: 1px; }
@media (max-width: 900px) { .nav-logo .logo-sub { display: none; } }
.nav-links { display: flex; gap: 4px; margin: 0 auto; }
.nav-links a { color: rgba(255,255,255,0.8); padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; transition: all 0.2s; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: white; background: rgba(255,255,255,0.12); }
.nav-links .highlight-link { color: var(--coral); }
/* Redundant with the "Sign Up" pill button once nav-links renders inline (>=769px); it stays
   in the mobile hamburger drawer below, where Sign Up is hidden under 480px and this is the
   only way to register. */
@media (min-width: 769px) { .nav-links .highlight-link, .nav-links .nav-signin { display: none; } }
.nav-links a i { display: none; }  /* icons show only in the mobile drop menu, not the desktop row */
@keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Support. Same pill as the language button beside it, so the two read as one group of
   utilities rather than two competing controls. */
.nav-support { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.88); font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.nav-support:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); color: #fff; }
.nav-support.active { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.38); color: #fff; }
.nav-support .fa-headset { font-size: 14px; color: #f0940a; }

/* Language selector */
/* Language dropdown (custom, matches the profile dropdown) */
.lang-dd { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.88); font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.lang-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); }
.lang-btn .fa-globe { font-size: 14px; color: #f0940a; }
.lang-cur { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-caret { font-size: 10px; opacity: 0.7; transition: transform 0.18s; }
.lang-dd.open .lang-caret { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 252px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 44px rgba(15,35,64,0.2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; z-index: 1200; overflow: hidden; }
.lang-dd.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #33517a; background: #f4f9ff; border-bottom: 1px solid var(--border); }
.lang-menu-head i { color: var(--coral); }
.lang-menu-list { max-height: 322px; overflow-y: auto; padding: 6px; }
.lang-item { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 13.5px; color: var(--text); }
.lang-item:hover { background: var(--coral-light); }
.lang-item.active { background: #eaf3ff; }
.lang-native { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-code { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #7d94b5; background: #eef5fd; border: 1px solid #d7e6f6; border-radius: 6px; padding: 2px 6px; }
.lang-check { font-size: 12px; color: var(--coral); visibility: hidden; }
.lang-item.active .lang-check { visibility: visible; }

/* The header's clock switch (staff): every time on the staff screens in India, a US zone or UTC (services/clock.py) */
.tz-dd { position: relative; }
.tz-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.9); font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.tz-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); }
.tz-btn .fa-clock { color: #f0940a; }
.tz-caret { font-size: 10px; opacity: 0.7; transition: transform 0.18s; }
.tz-dd.open .tz-caret { transform: rotate(180deg); }
.tz-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 260px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 44px rgba(15,35,64,0.2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; z-index: 1200; overflow: hidden; padding-bottom: 6px; }
.tz-dd.open .tz-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.tz-head { padding: 11px 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #33517a; background: #f4f9ff; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.tz-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: calc(100% - 12px); margin: 0 6px; border: none; background: none; text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 13.5px; color: var(--text); }
.tz-item:hover { background: var(--coral-light); }
.tz-item.on { background: #eaf3ff; }
.tz-item b { display: block; font-weight: 600; }
.tz-item small { font-size: 11px; color: #7d94b5; font-weight: 700; }
.tz-now { font-variant-numeric: tabular-nums; font-weight: 700; color: #33517a; }
.nav-cal.active { background: rgba(255,255,255,0.16); color: #fff; }
@media (max-width: 760px) {
  .tz-btn { padding: 6px 8px; gap: 0; } .tz-btn .tz-caret, .tz-btn .fa-clock { display: none; }
  .navbar .nav-right { gap: 6px; }
  .nav-right .site-sw-caret { display: none; }
  .nav-right .site-sw-btn { padding: 7px 10px; }
}

/* Notification btn */
.notif-btn { position: relative; color: rgba(255,255,255,0.8); font-size: 18px; padding: 6px; }
.notif-btn:hover { color: white; }
.badge { position: absolute; top: -4px; right: -4px; background: var(--coral); color: white; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* User menu */
.user-menu-wrapper { position: relative; }
.user-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; border-radius: 8px; padding: 6px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.user-btn:hover { background: rgba(255,255,255,0.18); }
.nav-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.user-dropdown { display: none; position: absolute; top: 100%; right: 0; margin-top: 6px; background: white; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 180px; padding: 8px 0; z-index: 999; }
.user-dropdown.open { display: block; }
.user-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 14px; color: var(--text); transition: background 0.15s; }
.user-dropdown a:hover { background: var(--bg); color: var(--coral); }
.user-dropdown a.danger { color: #dc2626; }
.user-dropdown hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

.hamburger { display: none; background: none; border: none; color: white; font-size: 22px; cursor: pointer; }

/* ===== TOAST ===== */
.toast-container { position: fixed; top: 74px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 12px 20px; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 280px; animation: slideIn 0.3s ease; }
.toast-success { border-left: 4px solid var(--green); }
.toast-danger { border-left: 4px solid #dc2626; }
.toast-info { border-left: 4px solid var(--accent); }
.toast button { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); }
@keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== MODAL ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal-box { background: white; border-radius: 16px; padding: 32px; max-width: 440px; width: 100%; position: relative; box-shadow: var(--shadow-lg); }
.modal-box.sm { max-width: 420px; }
.modal-box h2 { font-family: var(--font-head); font-size: 22px; margin-bottom: 8px; }
.modal-box p { color: var(--muted); margin-bottom: 16px; font-size: 14px; }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--muted); }
.modal-actions { display: flex; gap: 12px; margin-top: 20px; }
.modal-actions .btn { white-space: nowrap; }
.lang-modal-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 13px; }
.lang-modal-row select { border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }
textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 14px; resize: vertical; margin-bottom: 8px; }

/* ===== HERO SLIDER ===== */
.hero-slider { position: relative; height: 480px; overflow: hidden; background: #f0f4f8; }
.slides-wrapper { width: 100%; height: 100%; }
.slide { position: absolute; inset: 0; display: none; align-items: center; background: #f0f4f8; }
.slide.active { display: flex; }
.slide-bg-image { position: absolute; right: 0; top: 0; height: 100%; width: 500px; object-fit: cover; object-position: center center; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 35%, black 65%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 35%, black 65%); }
.slide-fade-overlay { display: none; }
.slide-content { position: relative; z-index: 2; display: flex; align-items: center; padding: 0 6%; width: 100%; max-width: 1200px; margin: 0 auto; }
.slide-text { max-width: 520px; }
.slide-text .slide-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--navy); margin-bottom: 14px; }
.slide-text h1 { font-family: var(--font-head); font-size: clamp(28px, 4vw, 52px); font-weight: 800; color: var(--navy); line-height: 1.15; margin-bottom: 16px; }
.slide-text h1 em { font-style: italic; color: var(--coral, #e05a2b); }
.slide-text p { color: #4a5568; font-size: 17px; margin-bottom: 24px; }
.slide-dots { position: absolute; bottom: 24px; left: 6%; display: flex; gap: 10px; z-index: 5; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(15,35,64,0.25); cursor: pointer; transition: background 0.2s; }
.dot.active { background: var(--navy); }

/* ===== SEARCH SECTION ===== */
.search-section { background: white; padding: 20px 5% 48px; margin-top: 0; position: relative; z-index: 10; }
.travel-tabs { display: flex; gap: 0; border: 2px solid var(--coral); border-radius: 10px; overflow: hidden; width: fit-content; margin: 0 auto 24px; }
.travel-tab { background: white; border: none; padding: 12px 32px; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--coral); display: flex; align-items: center; gap: 8px; transition: all 0.2s; }
.travel-tab.active { background: var(--coral); color: white; }
.trip-type-row { display: flex; gap: 12px; margin-bottom: 20px; justify-content: center; }
.radio-pill { cursor: pointer; }
.radio-pill input { display: none; }
.radio-pill { background: var(--bg); border: 2px solid var(--border); border-radius: 20px; padding: 7px 18px; font-size: 13px; font-weight: 600; color: var(--muted); transition: all 0.2s; }
.radio-pill:has(input:checked) { background: var(--coral); border-color: var(--coral); color: white; }

/* Search Bar */
.search-bar { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); }
.form-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.field-group { flex: 1; min-width: 160px; }
.field-group.wide { flex: 2; min-width: 240px; }
.field-group label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.field-group label .optional { text-transform: none; font-weight: 400; font-size: 11px; }
/* required marker (red) and the muted "optional" tag on form labels */
.req { color: #e0533d; font-weight: 800; margin-left: 1px; }
label .opt { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; font-style: normal; color: #9aa5ad; margin-left: 4px; }
.field-group input[type=text],
.field-group input[type=date],
.field-group input[type=time],
.field-group input[type=email],
.field-group input[type=password],
.field-group input[type=tel],
.field-group select { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none; transition: border-color 0.2s; background: white; appearance: none; -webkit-appearance: none; color: var(--text); }
.field-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.field-group input:focus, .field-group select:focus { border-color: var(--coral); }
.tick-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-top: 4px; }
.tick-check.is-disabled { opacity: 0.5; cursor: not-allowed; }
.tick-check input[type=checkbox] { display: none; }
.tick-box { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 5px; background: white; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.tick-check input:checked + .tick-box { background: var(--coral); border-color: var(--coral); }
.tick-check input:checked + .tick-box::after { content: ''; display: block; width: 5px; height: 9px; border: 2px solid white; border-top: none; border-left: none; transform: rotate(45deg) translateY(-1px); }
.tick-label { font-size: 14px; color: var(--text); }
.anon-toggle-row { margin-bottom: 12px; padding: 10px 14px; background: var(--accent-light); border-radius: 8px; border: 1px solid #d0d5f5; }
.input-with-icon { position: relative; }
.field-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 13px; width: 16px; text-align: center; }
.input-with-icon input { padding-left: 34px; }
.input-with-icon input[type=text] { padding-left: 42px; }
.flex-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 6px; cursor: pointer; }
.flex-check input[type=checkbox] { accent-color: var(--coral); }

/* Styled file upload (replaces the browser's raw "Choose File" control, e.g. sign-up photo).
   This is itself a <label>, so `.field-group label { display: block }` (0,1,1) outranks a bare
   `.file-upload` (0,1,0) and silently wins, collapsing the row into a vertical stack — hence the
   `.field-group .file-upload` override below. */
.file-upload { display: flex; align-items: center; gap: 12px; border: 1.5px dashed var(--border);
  border-radius: 12px; padding: 11px 12px; cursor: pointer; background: #fbfdff;
  transition: border-color .2s, background .2s; }
.field-group .file-upload { display: flex; }
.file-upload:hover { border-color: var(--coral); background: #fff; }
.file-upload input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.file-upload-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--coral-light);
  color: var(--coral); display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; flex: 0 0 40px; }
.file-upload-text { flex: 1; min-width: 0; font-size: 14px; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; }
.file-upload-text small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.file-upload-btn { flex: 0 0 auto; background: var(--coral); color: #fff; border-radius: 999px;
  padding: 8px 16px; font-size: 13px; font-weight: 700; }
.file-upload:hover .file-upload-btn { background: var(--coral-dark); }

/* Per-person travellers editor (post form step 3 — "one companion for the whole group") */
#travellersRows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.tv-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: #fff; position: relative; }
.tv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tv-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--coral); text-transform: uppercase; letter-spacing: 0.4px; }
.tv-badge i { font-size: 11px; }
.tv-x { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; border-radius: 6px; transition: color 0.15s, background 0.15s; }
.tv-x:hover { color: #dc2626; background: #fef2f2; }
#travellersRows .tv-card:only-child .tv-x { display: none; }
.tv-needs.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 14px; }
.tv-needs .flex-check { margin-top: 4px; }

/* Companion "open to anyone" master toggle + the language "Any" option */
.cmp-any-toggle { margin: 0 0 16px; }
.cmp-prefs { transition: opacity .15s ease; }
.cmp-prefs.is-disabled { opacity: .5; pointer-events: none; }
.cmp-prefs.is-disabled .multi-select-btn,
.cmp-prefs.is-disabled select,
.cmp-prefs.is-disabled input { background-color: #f4f6f9; }
.lang-any-opt { border-bottom: 1px solid var(--border); margin-bottom: 5px !important; padding-bottom: 9px !important; }

/* Toggle switch */
.toggle-switch { display: inline-flex; align-items: center; cursor: pointer; }
.toggle-switch input { display: none; }
.toggle-slider { width: 42px; height: 22px; background: var(--border); border-radius: 11px; position: relative; transition: background 0.2s; }
.toggle-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: left 0.2s; }
.toggle-switch input:checked + .toggle-slider { background: var(--coral); }
.toggle-switch input:checked + .toggle-slider::after { left: 23px; }

/* Airport autocomplete */
.airport-autocomplete { position: relative; }
/* position/coords are set by floatPanel() in main.js once it is moved to <body> */
.airport-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); z-index: 4000; overflow: hidden; margin-top: 2px; }
.airport-dropdown.open { display: block; }
.airport-option { padding: 10px 14px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.airport-option:hover, .airport-option.active { background: var(--coral-light); }
.airport-iata { font-weight: 700; color: var(--coral); min-width: 36px; font-size: 13px; }
.airport-detail { color: var(--muted); font-size: 12px; }

/* Multi-select */
.multi-select-wrapper { position: relative; }
.multi-select-btn { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; text-align: left; background: white; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); }
.multi-select-btn:hover { border-color: var(--coral); }
.multi-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); z-index: 500; padding: 8px; max-height: 200px; overflow-y: auto; }
.multi-dropdown.open { display: block; }
.multi-dropdown label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.multi-dropdown label:hover { background: var(--coral-light); }
.multi-dropdown label input { accent-color: var(--coral); }

/* Action Bar */
.action-bar { background: var(--coral-light); border-radius: 12px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.action-note { font-size: 13px; color: var(--coral-dark); flex: 1; min-width: 200px; }
.action-note i { margin-right: 6px; }
.action-btns { display: flex; gap: 12px; flex-shrink: 0; }

/* The navbar is sticky (top:0), so a jump/scroll to a section would tuck its heading under it.
   Offset the scroll target by the nav height so the title lands in view. */
#results, #my-trips, #how-it-works, #search, #feedback, #search-results { scroll-margin-top: 78px; }

/* ===== RESULTS ===== */
.results-section { padding: 48px 5%; background: var(--bg); }
.results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px 16px; }
.results-header h2 { font-family: var(--font-head); font-size: 24px; font-weight: 800; }
.rh-titlewrap { display: flex; align-items: baseline; gap: 10px 12px; flex-wrap: wrap; min-width: 0; }
.rh-titlewrap .results-count { position: relative; top: -1px; }
.results-controls { display: flex; align-items: center; gap: 12px; }
.results-controls select { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; background: white; }
.results-count { font-size: 13px; color: var(--muted); }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
/* Carousel */
.carousel-wrapper { position: relative; display: flex; align-items: center; gap: 8px; }
.carousel-track-outer { flex: 1; overflow: hidden; }
.carousel-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.carousel-arrow { background: white; border: 1px solid var(--border); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: var(--navy); box-shadow: var(--shadow); transition: all 0.2s; flex-shrink: 0; }
.carousel-arrow:hover { background: var(--coral); color: white; border-color: var(--coral); }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background 0.2s; }
.carousel-dot.active { background: var(--coral); }
.btn-outline-coral { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px solid var(--coral); color: var(--coral); border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; white-space: nowrap; }
.btn-outline-coral:hover { background: var(--coral); color: white; }
.loading-spinner { grid-column: 1/-1; text-align: center; padding: 40px; color: var(--muted); font-size: 16px; }

/* Trip Card */
.trip-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: all 0.25s; user-select: none; -webkit-user-select: none; }
.trip-card:hover { border-color: var(--coral); box-shadow: 0 8px 32px rgba(58,111,168,0.14); transform: translateY(-3px); }
.trip-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.trip-route { font-weight: 700; font-size: 15px; color: var(--navy); }
.trip-route span { color: var(--coral); }
.trip-type-badge { background: var(--gold-light); color: var(--gold); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; text-transform: uppercase; }
.trip-details { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.trip-detail-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.trip-detail-row i { color: var(--coral); width: 16px; flex-shrink: 0; margin-top: 2px; }
.trip-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.trip-tag { background: var(--coral-light); color: var(--coral-dark); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
/* Multi-destination legs in card */
.trip-legs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.trip-leg-row { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.leg-dot { background: var(--coral); color: white; font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.leg-date { color: var(--muted); font-size: 11px; }
.leg-airline { color: var(--muted); font-size: 11px; font-style: italic; }
/* Multi-destination form */
.multi-dest-header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; margin-bottom: 12px; padding: 0 2px; }
.leg-row { display: flex; align-items: flex-start; gap: 10px; background: white; border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.leg-num { background: var(--coral); color: white; font-size: 12px; font-weight: 700; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 22px; }
.leg-fields { display: flex; flex-wrap: wrap; gap: 12px; flex: 1; }
.leg-fields .field-group { min-width: 140px; flex: 1; }
.leg-remove { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px 6px; font-size: 14px; border-radius: 6px; flex-shrink: 0; margin-top: 20px; transition: color 0.2s; }
.leg-remove:hover { color: #e74c3c; }
.leg-remove-placeholder { width: 30px; flex-shrink: 0; }
.trip-card-footer { display: flex; align-items: center; justify-content: space-between; }
.trip-author { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.trip-author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.trip-author i { font-size: 28px; color: var(--muted); }
.connect-btn { background: var(--coral); color: white; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.connect-btn:hover { background: var(--coral-dark); transform: translateY(-1px); }
.connect-btn.sent { background: var(--green); cursor: default; }
.my-trip-actions { display: flex; gap: 8px; }
.btn-sm-outline { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.btn-sm-outline.danger { border-color: #dc2626; color: #dc2626; }
.btn-sm-outline:hover { border-color: var(--coral); color: var(--coral); }

/* ===== MY TRIPS SECTION ===== */
.my-trips-section { padding: 48px 5%; background: white; }

/* ===== HOW IT WORKS ===== */
.how-works { padding: 80px 5%; background: var(--navy); }
.how-works .section-header { text-align: center; margin-bottom: 48px; }
.how-works .section-header h2 { font-family: var(--font-head); font-size: 32px; font-weight: 800; color: white; }
.how-works .section-tag { font-size: 13px; color: var(--coral); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.steps-row { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
.step-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 32px 24px; text-align: center; width: 180px; position: relative; }
.step-num { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; background: var(--coral); color: white; border-radius: 50%; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.step-icon { font-size: 32px; color: var(--coral); margin-bottom: 12px; }
.step-card h3 { font-size: 16px; font-weight: 700; color: white; margin-bottom: 8px; }
.step-card p { font-size: 12px; color: rgba(255,255,255,0.6); }
.step-arrow { color: rgba(255,255,255,0.3); font-size: 20px; padding: 0 12px; }

/* Section header */
.section-header { text-align: center; margin-bottom: 40px; }
.section-header.left { text-align: left; }
.section-tag { font-size: 13px; font-weight: 600; color: var(--coral); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.section-header h2 { font-family: var(--font-head); font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--text); }

/* ===== HELP / REVIEWS STRIP (workflow home) =====
   The full testimonials + contact/review forms now live on their own canonical pages
   (/reviews, /contact); this is just a slim pointer to them. */
.help-strip { padding: 32px 5%; background: var(--bg); }
.help-strip-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.help-strip-item { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px;
  display: flex; align-items: center; gap: 16px; }
.help-strip-item i { width: 42px; height: 42px; border-radius: 50%; background: var(--coral-light); color: var(--coral-dark-text);
  display: grid; place-items: center; font-size: 17px; flex: none; }
.help-strip-item div { flex: 1; min-width: 0; }
.help-strip-item b { display: block; font-size: 14.5px; color: var(--navy); }
.help-strip-item span { font-size: 13px; color: var(--muted); }
.help-strip-item .btn { flex: none; white-space: nowrap; }
@media (max-width: 760px) { .help-strip-inner { grid-template-columns: 1fr; } .help-strip-item { flex-wrap: wrap; } .help-strip-item .btn { width: 100%; justify-content: center; } }

/* ===== FEEDBACK ===== */
.feedback-section { padding: 80px 5%; background: var(--bg); }
.feedback-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; }
.testimonials-col { display: flex; flex-direction: column; }

/* rating summary */
.tm-summary { display: flex; align-items: center; gap: 18px; margin: 2px 0 22px; }
.tm-score { font-family: var(--font-head); font-size: 46px; font-weight: 800; color: var(--navy); line-height: 1; }
.tm-score span { font-size: 17px; color: var(--muted); font-weight: 700; }
.tm-summary-meta { display: grid; gap: 5px; }
.tm-stars { color: #f5a623; font-size: 15px; letter-spacing: 2px; }
.tm-stars.sm { font-size: 12px; letter-spacing: 1.5px; }
.tm-count { font-size: 13px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.tm-count i { color: #e0733d; }

/* review cards — a stack that fills the column */
.tm-list { display: grid; gap: 14px; }
.tm-card {
  position: relative; background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px 16px; box-shadow: var(--shadow); overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.tm-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--coral), #6ea8dd); }
.tm-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(15, 35, 64, .1); }
.tm-quote { position: absolute; top: 16px; right: 18px; font-size: 30px; color: var(--coral); opacity: .12; }
.tm-card .tm-stars.sm { margin-bottom: 9px; }
.tm-card blockquote {
  margin: 0 0 14px; font-size: 14.5px; line-height: 1.65; color: #33465e;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.tm-author { display: flex; align-items: center; gap: 11px; }
.tm-avatar {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 15px;
  background: linear-gradient(135deg, var(--coral), #6ea8dd);
}
.tm-card:nth-child(3n+2) .tm-avatar { background: linear-gradient(135deg, #199f7e, #4fc3a1); }
.tm-card:nth-child(3n) .tm-avatar { background: linear-gradient(135deg, #e0733d, #f2ab3f); }
.tm-author strong { display: block; font-size: 14px; color: var(--navy); }
.tm-author small { font-size: 12px; color: var(--muted); }
.tm-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.tm-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border);
  cursor: pointer; transition: background .2s, transform .2s; }
.tm-dots span.active { background: var(--coral); transform: scale(1.25); }

.social-row { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 22px; }
.social-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.social-row a { color: var(--muted); font-size: 20px; transition: color 0.2s, transform .15s; }
.social-row a:hover { color: var(--coral); transform: translateY(-2px); }

/* legacy single-card carousel (kept for any other page that still uses it) */
.testimonial-carousel .testimonial-card { display: none; background: white; border-radius: var(--radius); padding: 28px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.testimonial-carousel .testimonial-card.active { display: block; }
.testimonial-card .stars { color: #f59e0b; font-size: 18px; margin-bottom: 12px; }
.testimonial-card p { font-size: 15px; color: var(--muted); font-style: italic; line-height: 1.7; margin-bottom: 20px; }
.t-author { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.t-avatar { font-size: 32px; color: var(--muted); }

/* Review form */
.review-col { background: white; border-radius: var(--radius); padding: 32px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.review-form .star-rating { display: flex; gap: 8px; margin-bottom: 16px; }
.star-rating i { font-size: 28px; color: var(--border); cursor: pointer; transition: color 0.15s; }
.star-rating i.active { color: #f59e0b; }
.review-login-prompt { text-align: center; padding: 32px; }
.review-login-prompt p { color: var(--muted); margin-bottom: 16px; }

/* ===== APP BAR ===== */
.app-bar { background: linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%); padding: 60px 5%; }
.app-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 1100px; margin: 0 auto; }
.app-bar-text h2 { font-family: var(--font-head); font-size: 30px; font-weight: 800; color: white; margin-bottom: 8px; }
.app-bar-text p { color: rgba(255,255,255,0.85); margin-bottom: 24px; }
.app-badges { display: flex; gap: 16px; flex-wrap: wrap; }
.app-badge { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; padding: 12px 20px; display: flex; align-items: center; gap: 12px; color: white; transition: all 0.2s; }
.app-badge:hover { background: rgba(255,255,255,0.25); }
.app-badge i { font-size: 28px; }
.app-badge div small { display: block; font-size: 11px; opacity: 0.8; }
.app-badge div strong { display: block; font-size: 16px; }
.app-badge.large i { font-size: 36px; }

/* ===== FOOTER ===== */
.footer { background: var(--navy); color: rgba(255,255,255,0.7); }
.footer-inner { padding: 48px 5% 32px; display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start; }
.footer-brand { flex: 1; min-width: 200px; }
.footer-brand .nav-logo { margin-bottom: 12px; }
.footer-brand p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.5); }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; flex: 2; }
.footer-links a { color: rgba(255,255,255,0.6); font-size: 13px; transition: color 0.2s; }
.footer-links a:hover { color: white; }
.footer-social { display: flex; gap: 16px; }
.footer-social a { color: rgba(255,255,255,0.5); font-size: 20px; transition: color 0.2s; }
.footer-social a:hover { color: var(--coral); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 16px 5%; text-align: center; font-size: 13px; color: rgba(255,255,255,0.35); }

/* ===== CHAT SIDEBAR ===== */
.chat-sidebar { position: fixed; bottom: 24px; right: 24px; z-index: 8000; }
.chat-toggle { background: var(--coral); color: white; border: none; width: 54px; height: 54px; border-radius: 50%; font-size: 22px; cursor: pointer; box-shadow: 0 4px 20px rgba(58,111,168,0.4); transition: all 0.2s; position: relative; }
.chat-toggle:hover { background: var(--coral-dark); transform: scale(1.05); }
.chat-panel { position: absolute; bottom: 64px; right: 0; width: 320px; background: white; border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; }
.chat-panel-header { background: var(--navy); color: white; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.chat-panel-header button { background: none; border: none; color: white; font-size: 20px; cursor: pointer; }
.chat-search, .inbox-search { width: 100%; border: none; border-bottom: 1px solid var(--border); padding: 12px 16px; font-size: 14px; outline: none; }
.chat-rooms-list { max-height: 300px; overflow-y: auto; }
.chat-room-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.chat-room-item:hover { background: var(--bg); }
.chat-room-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--coral-light); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--coral); flex-shrink: 0; }
.chat-room-info { flex: 1; overflow: hidden; }
.chat-room-info strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-room-info span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.chat-loading { padding: 24px; text-align: center; color: var(--muted); }

/* Chat Window */
.chat-window { position: fixed; bottom: 90px; right: 24px; width: 340px; background: white; border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); z-index: 8001; flex-direction: column; display: flex; }
.chat-window-header { background: var(--navy); color: white; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; border-radius: 16px 16px 0 0; }
.chat-window-header div { display: flex; gap: 8px; }
.chat-window-header button { background: none; border: none; color: white; font-size: 16px; cursor: pointer; }
.chat-security-msg { background: #fffbeb; border-bottom: 1px solid #fde68a; padding: 8px 12px; font-size: 11px; color: #92400e; display: flex; align-items: center; gap: 6px; }
.chat-messages { flex: 1; padding: 16px; overflow-y: auto; max-height: 280px; display: flex; flex-direction: column; gap: 10px; }
.msg-bubble { max-width: 75%; padding: 9px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.msg-bubble.sent { background: var(--coral); color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-bubble.received { background: var(--bg); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-input-row { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.chat-input-row input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 14px; outline: none; }
.chat-input-row input:focus { border-color: var(--coral); }
.chat-input-row button { background: var(--coral); color: white; border: none; border-radius: 8px; padding: 9px 14px; cursor: pointer; }
.chat-attach { color: var(--muted); cursor: pointer; font-size: 16px; }

/* ===== INBOX PAGE ===== */
.inbox-page { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 64px); }
.inbox-sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.inbox-header { padding: 20px; border-bottom: 1px solid var(--border); }
.inbox-header h2 { font-family: var(--font-head); font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.inbox-rooms { flex: 1; overflow-y: auto; }
.inbox-room-item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.inbox-room-item:hover, .inbox-room-item.active { background: var(--coral-light); }
.inbox-avatar { width: 44px; height: 44px; border-radius: 50%; font-size: 28px; color: var(--muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inbox-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.inbox-room-info { flex: 1; overflow: hidden; }
.inbox-room-info strong { display: block; font-size: 15px; font-weight: 700; }
.inbox-room-info span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.inbox-meta small { font-size: 11px; color: var(--muted); }
.inbox-empty { padding: 48px 24px; text-align: center; }
.inbox-empty i { font-size: 48px; color: var(--border); margin-bottom: 16px; }
.inbox-empty p { color: var(--muted); margin-bottom: 16px; }
.inbox-chat-area { display: flex; flex-direction: column; }
.inbox-chat-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: 12px; }
.inbox-chat-placeholder i { font-size: 56px; color: var(--border); }
.inbox-chat-header { background: var(--bg); border-bottom: 1px solid var(--border); padding: 16px 24px; font-size: 16px; }
.inbox-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.inbox-input-row { display: flex; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--border); }
.inbox-input-row input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px; font-size: 14px; outline: none; }
.inbox-input-row input:focus { border-color: var(--coral); }

/* ===== AUTH PAGE ===== */
.auth-page { min-height: calc(100vh - 64px); background: linear-gradient(135deg, #e6f4f4 0%, #f0f9f9 100%); display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { background: white; border-radius: 20px; padding: 40px; max-width: 520px; width: 100%; box-shadow: var(--shadow-lg); }
.auth-header { text-align: center; margin-bottom: 28px; }
.auth-header h1 { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.auth-header p { color: var(--muted); font-size: 14px; }
.oauth-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 10px; font-weight: 600; font-size: 15px; border: 1px solid var(--border); transition: all 0.2s; }
.oauth-btn.google { background: white; color: var(--text); }
.oauth-btn.google:hover { background: var(--bg); border-color: #4285f4; }
.oauth-btn.facebook { background: #1877f2; color: white; border-color: #1877f2; }
.oauth-btn.facebook:hover { background: #1460c6; }
.or-divider { text-align: center; position: relative; margin: 20px 0; }
.or-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); }
.or-divider span { background: white; padding: 0 14px; color: var(--muted); font-size: 13px; position: relative; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .field-group { flex: none; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-space { display: flex; justify-content: space-between; align-items: center; }
.forgot-link { font-size: 13px; color: var(--coral); }
.required-check a { color: var(--coral); }
.auth-switch { text-align: center; font-size: 14px; color: var(--muted); margin-top: 4px; }
.auth-switch a { color: var(--coral); font-weight: 600; }
.eye-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--muted); }
.photo-preview { margin-top: 8px; }

/* ===== ADMIN ===== */
.admin-page { --railw: 260px; display: grid; grid-template-columns: var(--railw) 1fr; min-height: calc(100vh - 68px); background: linear-gradient(90deg, var(--navy) 0, var(--navy) var(--railw), transparent var(--railw)); transition: grid-template-columns .18s ease; } /* STICKY CHROME */
.admin-sidebar { background: var(--navy); padding: 24px 0; position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto; align-self: start; }
.admin-sidebar h3 { color: rgba(255,255,255,0.82); font-size: 14.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; padding: 1px 14px 16px 56px; }
.admin-sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 12px 20px; color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 500; transition: all 0.2s; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { color: white; background: rgba(255,255,255,0.1); border-left: 3px solid var(--coral); }
.admin-main { padding: 32px 40px; }
.admin-main h1 { font-family: var(--font-head); font-size: 28px; font-weight: 800; margin-bottom: 28px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
.stat-card { background: white; border-radius: var(--radius); padding: 20px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow); border-left: 4px solid transparent; }
.stat-card.blue { border-left-color: var(--accent); }
.stat-card.coral { border-left-color: var(--coral); }
.stat-card.green { border-left-color: var(--green); }
.stat-card.yellow { border-left-color: #f59e0b; }
.stat-card i { font-size: 28px; color: var(--muted); }
.stat-card strong { display: block; font-size: 26px; font-weight: 800; }
.stat-card span { font-size: 12px; color: var(--muted); }
.admin-card { background: white; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); margin-bottom: 24px; }
.admin-card h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--border); font-size: 12px; text-transform: uppercase; color: var(--muted); }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.admin-table tr:hover td { background: var(--bg); }
/* "Departs" cells read as one unit: 2026-09-23 (1d). The date and the countdown are separate
   inline elements, so a narrow column would otherwise break them onto two lines. Any "posted ..."
   note below is on its own <br/> line and still wraps normally. */
.admin-table td[data-label="Departs"] { white-space: nowrap; }
.admin-table td[data-label="Departs"] small.muted, .admin-table td[data-label="Departs"] small.urgent { white-space: nowrap; }
.badge-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.badge-pill.green { background: #dcfce7; color: #16a34a; }
.badge-pill.red { background: #fee2e2; color: #dc2626; }
.badge-pill.yellow { background: #fef3c7; color: #d97706; }
/* Users: the one switch a staff row has (the rest is in Team members) */
.owner-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 6px; }
.btn-sm { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.btn-sm:hover { border-color: var(--coral); color: var(--coral); }
.btn-sm.danger { border-color: #dc2626; color: #dc2626; }
.btn-sm.green { border-color: #16a34a; color: #16a34a; }
.admin-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; outline: none; }
/* search + filters wrap onto a second line rather than squeezing the search box */
.admin-search-form { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.admin-search-form input { flex: 1 1 260px; }
.admin-search-form .ss { flex: 0 0 auto; min-width: 150px; }
/* the role multi-select sits inside a table cell, so keep it from stretching the column */
.admin-table .role-select + .ss { min-width: 150px; max-width: 210px; }
.admin-form { display: flex; flex-direction: column; gap: 16px; max-width: 600px; }
.feedback-list { display: flex; flex-direction: column; gap: 16px; }
.feedback-item { background: var(--bg); border-radius: var(--radius); padding: 20px; border: 1px solid var(--border); }
.feedback-item .stars { color: #f59e0b; font-size: 18px; margin-bottom: 8px; }
.feedback-item p { color: var(--text); margin-bottom: 8px; }
.feedback-item small { color: var(--muted); font-size: 12px; }
.fb-actions { margin-top: 12px; display: flex; gap: 8px; }

/* ===== STATIC PAGES ===== */
.static-page { min-height: calc(100vh - 64px); }
.static-hero { padding: 60px 5%; text-align: center; }
.static-hero.coral { background: linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%); color: white; }
.static-hero.navy { background: var(--navy); color: white; }
.static-hero h1 { font-family: var(--font-head); font-size: clamp(28px, 4vw, 48px); font-weight: 800; margin-bottom: 10px; }
.static-hero p { font-size: 16px; opacity: 0.85; }
.static-content { max-width: 800px; margin: 0 auto; padding: 48px 5%; }
.static-content h2 { font-family: var(--font-head); font-size: 22px; font-weight: 700; margin: 28px 0 12px; color: var(--navy); }
.static-content p { color: var(--muted); line-height: 1.8; margin-bottom: 12px; }
.static-content ul { padding-left: 20px; }
.static-content ul li { color: var(--muted); margin-bottom: 8px; line-height: 1.7; }
.credits-text { font-size: 11.5px; line-height: 1.7; color: var(--muted); opacity: .75; }
.faq-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.faq-q { width: 100%; background: white; border: none; padding: 18px 20px; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; }
.faq-q:hover { background: var(--bg); }
.faq-a { display: none; padding: 16px 20px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--border); line-height: 1.7; }

/* Blog */
/* the blog list and post pages: blog-public.css. The post's words, also in the editor: */
.blog-post-content { font-size: 16px; line-height: 1.9; }


/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
  .carousel-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .feedback-inner { grid-template-columns: 1fr; }
  .app-bar-inner { flex-direction: column; text-align: center; }
  .steps-row { flex-direction: column; align-items: center; }
  .step-arrow { transform: rotate(90deg); }
  .inbox-page { grid-template-columns: 1fr; }
  .inbox-chat-area { display: none; }
  .admin-page { grid-template-columns: 1fr; background: none; }
  .admin-sidebar { display: none; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
}
/* The header keeps its drawer until the full menu genuinely fits.

   It used to switch to the desktop layout at 769px, but the desktop header is about 1140px
   wide -- logo, seven links, Sign In, Sign Up, Support and the language picker. Between the
   two, the right-hand group ran off the screen: measured 293px past the edge at 820px and
   99px at 1024px, and .navbar clips it, so on a tablet Sign In was not merely awkward, it
   was not there to press. Below this width the links live in the drawer and Sign In / Sign
   Up stay on the bar, which is what a tablet has room for. */
@media (max-width: 1140px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  /* Main menu as a polished drop panel: icon + label rows, big tap targets, a dimmed backdrop
     behind it, and the "Join" item as a coral button. (Was a bare, cramped text list.) */
  .nav-links.open { display: flex; flex-direction: column; position: fixed; top: 68px; left: 0; right: 0;
    background: var(--navy); padding: 10px 12px 16px; gap: 2px; z-index: 999;
    box-shadow: 0 26px 44px rgba(6,17,34,.45); border-top: 1px solid rgba(255,255,255,0.08);
    max-height: calc(100vh - 68px); overflow-y: auto; animation: navDrop .18s ease; }
  .nav-links.open a { display: flex; align-items: center; gap: 13px; padding: 14px 14px;
    border-radius: 12px; font-size: 15.5px; font-weight: 600; color: rgba(255,255,255,0.82); white-space: normal; }
  .nav-links.open a i { display: inline-flex; width: 20px; justify-content: center; color: var(--coral); font-size: 15px; }
  .nav-links.open a:hover, .nav-links.open a.active { background: rgba(255,255,255,0.1); color: #fff; }
  .nav-links.open .highlight-link { justify-content: center; background: var(--coral); color: #fff; margin-top: 8px; }
  .nav-links.open .highlight-link:hover { background: var(--coral-dark); }
  .nav-links.open .highlight-link i { color: #fff; }
  body.nav-open::before { content: ''; position: fixed; inset: 68px 0 0 0; background: rgba(6,17,34,.45); z-index: 998; }
}

@media (max-width: 768px) {
  .slide-content { padding: 40px 5%; }
  .slide-bg-image { opacity: 0.25; }
  .slide-fade-overlay { background: linear-gradient(to right, #f0f4f8 50%, rgba(240,244,248,0.9) 75%, rgba(240,244,248,0.6) 100%); }
  .hero-slider { height: 340px; }
  .slide-text h1 { font-size: 30px; }
  .form-row { gap: 12px; }
  .results-grid { grid-template-columns: 1fr; }
  .carousel-track { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
  .chat-window { width: calc(100vw - 48px); right: 24px; }
}
/* Sign In leaves the bar only when the bar genuinely cannot hold it.
   On a 390px phone the row needs 459px once the logo, Support, language, Sign In and the burger
   are laid out, and the overflow pushed the BURGER off screen -- taking the whole menu, and with
   it the only route to signing up, out of reach. That is a phone problem: a 768px tablet has
   nearly 300px to spare, and hiding the button there was the reason signing in from a tablet
   meant hunting through a menu. */
@media (max-width: 600px) {
  .btn-outline-nav { display: none; }
}

@media (max-width: 480px) {
  .action-bar { flex-direction: column; }
  .action-btns { width: 100%; }
  .action-btns .btn { flex: 1; justify-content: center; }
  .travel-tabs { width: 100%; }
  .travel-tab { flex: 1; justify-content: center; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
}

/* ===== PHASE 2: CS CONSOLE, CHIPS, CONTACT ROWS, CLAIM ===== */
.muted { color: var(--muted); }
.urgent { color: #dc2626; font-weight: 700; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.mb { margin-bottom: 12px; }
.table-wrap { overflow-x: auto; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h1, .card-head h2 { margin-bottom: 0; }
.admin-card h3.sub { font-size: 14px; font-weight: 700; margin: 16px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; text-transform: capitalize; white-space: nowrap; }
.chip-open { background: #dcfce7; color: #16a34a; }
.chip-matched { background: #dbeafe; color: #1d4ed8; }
.chip-unconfirmed { background: #fef3c7; color: #d97706; }
.chip-closed { background: #fee2e2; color: #dc2626; }
.chip-urgent { background: #fee2e2; color: #dc2626; }
.chip-src { background: var(--bg); color: var(--muted); }
.chip-role-seeking_help { background: var(--coral-light); color: var(--coral-dark-text); }
.chip-role-offering_help { background: var(--gold-light); color: var(--gold); }
.chip-role-open { background: var(--bg); color: var(--muted); }
.ci { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; margin-right: 3px; }
.ci-ok { background: #dcfce7; color: #16a34a; }
.ci-pending { background: #fef3c7; color: #d97706; }
.ci-none { color: var(--muted); }
.ci-cell { white-space: nowrap; }
.cs-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.cs-filters input[type=text] { flex: 1; min-width: 200px; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 14px; }
.cs-filters select { border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; font-size: 13px; background: white; }
.pagination { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.pagination .page { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.pagination .page.current { background: var(--coral); color: white; border-color: var(--coral); }
.cs-form .form-section { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 18px; }
.cs-form .form-section h2 { font-size: 16px; font-weight: 700; margin-bottom: 14px; color: var(--navy); }
.cs-form textarea { margin-bottom: 0; }
.cs-form input[type=number] { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.check-grid .flex-check { margin-top: 2px; font-size: 13px; color: var(--text); }
.form-actions { display: flex; gap: 12px; margin-top: 8px; }

/* ===== CS new/edit-post wizard (cs/post_form.html) ===== */
.cs-form-head { margin-bottom: 20px; }
.cs-form-head h1 { margin-bottom: 6px; }
.cs-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; }
.cs-step { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--muted); font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.cs-step:hover { border-color: var(--coral); }
.cs-step .cs-step-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--border); color: #fff; font-size: 11px; }
.cs-step.is-active { border-color: var(--coral); color: var(--navy); background: var(--coral-light, #eef5fd); }
.cs-step.is-active .cs-step-n { background: var(--coral); }
.cs-step.is-done { color: var(--navy); }
.cs-step.is-done .cs-step-n { background: #199f7e; }
.cs-panel { display: none; }
.cs-panel.is-active { display: block; }
.cs-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; }
.cs-card-h { font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.cs-card-h i { color: var(--coral); font-size: 14px; }
.cs-typerow { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.cs-type { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid var(--border);
  border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); }
.cs-type:has(input:checked) { border-color: var(--coral); background: var(--coral-light, #eef5fd); color: var(--navy); }
.cs-type input { accent-color: var(--coral); }
.cs-legs-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.cs-leg { display: flex; align-items: center; gap: 10px; }
.cs-leg-n { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.cs-leg-fields { flex: 1; display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 1.1fr .8fr; gap: 8px; min-width: 0; }
.cs-leg-fields input { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: 13.5px; min-width: 0; }
.cs-leg-x { flex: 0 0 auto; background: none; border: 1px solid var(--border); border-radius: 8px; width: 32px; height: 32px;
  cursor: pointer; color: var(--muted); }
.cs-leg-x:hover { color: #e0533d; border-color: #e0533d; }
.cs-wizard-nav { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.cs-wizard-spacer { flex: 1; }
.btn-ghost { background: none; border: none; color: var(--muted); font-weight: 600; cursor: pointer; padding: 8px 12px; }
.btn-ghost:hover { color: var(--coral); }
@media (max-width: 720px) {
  .cs-leg { flex-wrap: wrap; }
  .cs-leg-fields { grid-template-columns: 1fr 1fr; }
}
.contact-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.contact-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); padding: 4px 6px; }
.contact-table td { padding: 4px 6px; vertical-align: middle; }
.contact-table input[type=text], .contact-table select { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14px; background: white; }
.contact-table input[type=checkbox] { accent-color: var(--coral); width: 18px; height: 18px; }
/* A phone row picks its country beside the number (cs/_macros.html contact_cc_select). The picker is in
   every row -- the server reads it in step with the values -- but shown only for a phone. */
.contact-row .cr-val { display: flex; gap: 8px; align-items: center; }
.contact-row .cr-val input[type=text] { flex: 1 1 auto; min-width: 0; }
/* an explicit width: left to "auto" inside the flex row it collapsed to "U..." */
.contact-row .cr-cc { display: none; flex: 0 0 124px; width: 124px; max-width: none; }
.contact-row.is-phone .cr-cc { display: block; }
/* the same picker in the scraper's row editor (static/js/scraper.js renderRowModal) */
.row-cc { display: flex; gap: 8px; align-items: center; }
.row-cc input { flex: 1 1 auto; min-width: 0; }
.row-cc .cr-cc { display: none; flex: 0 0 124px; width: 124px; max-width: none; }
.row-cc.is-phone .cr-cc { display: block; }
/* static/js/searchselect.js swaps a long <select> for a searchable control: it hides the native
   one and puts its own .ss box where it stood. That box is what is seen and what takes up room,
   so the width and the phone-only rule apply to it too -- sized on the select alone, the picker
   collapsed to "U..." and stayed on screen beside an e-mail. */
.contact-row .cr-val > .ss, .row-cc > .ss { display: none; flex: 0 0 132px; width: 132px; }
.contact-row.is-phone .cr-val > .ss, .row-cc.is-phone > .ss { display: block; }
.row-remove { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; }
.row-remove:hover { color: #dc2626; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 14px; }
.dl dt { color: var(--muted); font-weight: 600; }
.dl dd { margin: 0; }
.dl dd.cs-notes { background: #fffbeb; border-left: 3px solid #f59e0b; padding: 6px 10px; border-radius: 6px; white-space: pre-wrap; }
.copy-row { display: flex; gap: 8px; margin-bottom: 8px; }
.copy-row input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.copyable { cursor: copy; background: var(--bg); padding: 2px 6px; border-radius: 4px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form select, .inline-form input[type=text] { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; background: white; }
.inline-form input[type=text] { flex: 1; min-width: 140px; }
.timeline { list-style: none; padding: 0; font-size: 13px; }
.timeline li { padding: 6px 0; border-bottom: 1px solid var(--border); display: flex; gap: 12px; flex-wrap: wrap; }
.timeline .when { color: var(--muted); min-width: 120px; }
.timeline .who { font-weight: 600; min-width: 90px; }
.timeline .what { text-transform: capitalize; }
ul.plain { list-style: none; padding: 0; }
.dup-group { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.dup-group a { color: var(--coral); }
.auth-card.wide { max-width: 720px; }
.claim-summary { background: var(--coral-light); border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 4px; }
.claim-summary i { color: var(--coral); width: 18px; }
.claim-account { background: var(--bg); border-radius: 10px; padding: 12px 14px; }
.claim-next { margin-top: 8px; }
.btn-outline { background: transparent; color: var(--coral); border-color: var(--coral); }
.btn-outline:hover { background: var(--coral); color: white; }
/* Notification dropdown */
.notif-wrapper { position: relative; }
.notif-dropdown { display: none; position: absolute; top: 100%; right: 0; margin-top: 6px; background: white; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 340px; max-height: 420px; overflow-y: auto; z-index: 999; }
.notif-dropdown.open { display: block; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
.notif-head button { background: none; border: none; color: var(--coral); font-size: 12px; cursor: pointer; }
.notif-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.notif-item.unread { background: var(--coral-light); }
.notif-item strong { display: block; font-size: 13px; }
.notif-item small { color: var(--muted); }
.notif-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }
/* Trip card extras */
.trip-role-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-left: 6px; text-transform: uppercase; }
.trip-contact-icons { display: inline-flex; gap: 4px; margin-left: 8px; }
.trip-contact-icons i { font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; }
}

/* ===== PHASE 2B: MATCHES ===== */
.match-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.match-left { position: sticky; top: 80px; }
.match-card { border-left: 4px solid var(--border); }
.match-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.match-title { flex: 1; min-width: 200px; }
.match-title a { color: var(--navy); }
.score-badge { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: white; flex-shrink: 0; }
.score-high { background: #16a34a; }
.score-mid { background: #d97706; }
.score-low { background: #6b7280; }
.criteria { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.crit { font-size: 12px; padding: 4px 10px; border-radius: 14px; background: var(--bg); color: var(--muted); }
.crit-ok { background: #dcfce7; color: #166534; }
.crit-no { background: #fee2e2; color: #991b1b; }
.crit i { margin-right: 4px; }
.sides { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.sides th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.sides td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.match-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.match-summary { display: flex; align-items: center; gap: 16px; background: var(--coral-light); border-radius: 12px; padding: 14px 18px; margin-bottom: 8px; }
.match-name { font-weight: 700; font-size: 16px; }
.contact-h { font-family: var(--font-head); font-size: 18px; font-weight: 700; margin: 18px 0 6px; color: var(--navy); }
.contact-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.contact-list li { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 8px; padding: 10px 12px; flex-wrap: wrap; }
.contact-list li i:first-child { color: var(--coral); width: 18px; text-align: center; }
.contact-list a { color: var(--coral); word-break: break-all; }
.report-box { margin-top: 14px; font-size: 13px; color: var(--muted); }
.report-box summary { cursor: pointer; }
.matches-list { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
.match-item { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.match-item .score-badge { width: 48px; height: 48px; font-size: 13px; }
.btn-sm-outline.has-matches { border-color: var(--gold); color: var(--gold); font-weight: 700; }
@media (max-width: 900px) { .match-layout { grid-template-columns: 1fr; } .match-left { position: static; } }

/* ===== PHASE 2C: IMPORT, DASHBOARD ===== */
.import-table td { font-size: 13px; vertical-align: top; }
.import-table tr.row-error td { background: #fff5f5; }
.import-table tr.row-duplicate td { background: #fffbeb; }
.import-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--coral); }

/* ===== PHASE 2D ===== */
.verify-banner { background: #fffbeb; border-bottom: 1px solid #fde68a; color: #92400e; padding: 10px 5%; font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.metric { background: white; border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); border-left: 4px solid var(--coral); }
.metric strong { display: block; font-size: 26px; font-weight: 800; }
.metric span { font-size: 12px; color: var(--muted); }
.metric small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.bar { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bar > div { height: 100%; background: var(--coral); }

/* ===== MOBILE RESPONSIVE PASS (Phase 2, no native app) ===== */
html, body { overflow-x: clip; }  /* clip (not hidden): hidden turns body into a scroll container and breaks position:sticky */
.modal-box { max-height: 92vh; overflow-y: auto; }
.results-grid, .all-trips-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.dash-matches { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.metrics-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.check-grid { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.trip-card-footer { flex-wrap: wrap; gap: 8px; }
.trip-type-row { flex-wrap: wrap; }
.toast-container { max-width: calc(100vw - 40px); }
.toast { min-width: 0; width: 100%; }
.chat-panel { width: min(320px, calc(100vw - 48px)); }
.contact-rows { overflow-x: auto; }
.contact-table { min-width: 520px; }
.admin-card { overflow-x: auto; }
.sides { min-width: 460px; }

@media (max-width: 900px) {
  /* Admin & CS consoles: the sidebar becomes a compact top bar (console name + menu button)
     whose nav opens as a full-width dropdown, so every item is reachable — a horizontal scroll
     strip used to hide most of them off-screen. */
  .admin-page { grid-template-columns: 1fr; background: none; }
  .admin-sidebar { display: flex; align-items: center; padding: 0; position: sticky; top: 64px;
    z-index: 900; height: auto; overflow: visible; align-self: auto; background: var(--navy); }
  .admin-sidebar h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 15px 16px;
    color: #fff; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
  .admin-sidebar nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; background: var(--navy); box-shadow: 0 24px 46px rgba(6,17,34,.5);
    max-height: 74vh; overflow-y: auto; border-top: 1px solid rgba(255,255,255,0.08); }
  .admin-sidebar.nav-open nav { display: flex; }
  .admin-sidebar nav a { white-space: nowrap; padding: 14px 18px; border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 14.5px; }
  .admin-sidebar nav a.active, .admin-sidebar nav a:hover { border-left-color: var(--coral); background: rgba(255,255,255,0.1); }
  .admin-main { padding: 20px 4%; }
  .admin-main h1 { font-size: 22px; margin-bottom: 16px; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 14px; gap: 10px; }
  .stat-card strong { font-size: 20px; }
  .admin-card { padding: 16px; }
  .admin-table th, .admin-table td { padding: 8px 8px; font-size: 13px; }
  .cs-form .form-section { padding: 14px 14px; }
  .match-layout { grid-template-columns: 1fr; }
  .match-left { position: static; }
  .detail-grid { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dt { margin-top: 8px; }
}

@media (max-width: 768px) {
  .navbar { padding: 0 4%; gap: 10px; }
  .nav-right { gap: 8px; }
  .lang-cur { display: none; }
  .lang-btn { padding: 7px 10px; gap: 5px; }
  /* Icon only, same as the language pill: the headset is the recognisable part. */
  .nav-support-tx { display: none; }
  .nav-support { padding: 7px 10px; gap: 0; }
  .user-btn { padding: 6px 8px; }
  .btn-outline-nav, .btn-primary-nav { width: auto; padding: 8px 12px; font-size: 13px; }
  .search-section { padding: 16px 4% 32px; }
  .search-bar { padding: 16px; border-radius: 12px; }
  .form-row { gap: 12px; margin-bottom: 12px; }
  .field-group { min-width: 100%; }
  .field-group.wide { min-width: 100%; }
  .form-row-2 { grid-template-columns: 1fr 1fr; }
  /* 16px inputs stop iOS Safari from zooming into fields */
  input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=number], select, textarea { font-size: 16px !important; }
  .results-section, .my-trips-section, .how-works, .feedback-section, .app-bar { padding-left: 4%; padding-right: 4%; }
  .results-header h2, .dash-section h2 { font-size: 20px; }
  /* Stack the section header on phones: the title + count read as one block, then the
     action buttons sit on their own full-width row below, right-aligned and never cramped. */
  .results-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .rh-titlewrap { align-items: baseline; row-gap: 2px; }
  .results-controls { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .results-controls .btn { white-space: nowrap; }
  .carousel-wrapper { gap: 4px; }
  .carousel-arrow { width: 34px; height: 34px; }
  .auth-page { padding: 20px 12px; }
  .auth-card { padding: 24px 18px; border-radius: 14px; }
  .auth-header h1 { font-size: 22px; }
  .static-content { padding: 28px 5%; }
  .dash { padding: 20px 4% 40px; }
  .dash-filters input[type=text] { min-width: 100%; }
  .dash-filters select { flex: 1; }
  .connections-page, .all-trips-page { padding: 20px 4% 40px; }
  .conn-card { flex-wrap: wrap; }
  .conn-actions { width: 100%; justify-content: flex-end; }
  .inbox-page { height: auto; min-height: calc(100vh - 64px); }
  .chat-window { bottom: 84px; right: 12px; width: calc(100vw - 24px); }
  .chat-sidebar { bottom: 16px; right: 12px; }
  .cs-filters input[type=text] { min-width: 100%; }
  .cs-filters select { flex: 1; min-width: 45%; }
  .card-head h1 { font-size: 20px; }
  .modal-overlay { padding: 10px; align-items: flex-start; padding-top: 24px; }
  .modal-box { padding: 20px 16px; }
  .match-summary { flex-wrap: wrap; }
  .claim-summary { font-size: 14px; }
  .footer-inner { padding: 32px 5% 20px; gap: 24px; }
}

@media (max-width: 480px) {
  .user-btn span { display: none; }
  .user-btn .fa-chevron-down { display: none; }
  .hero-slider { height: 300px; }
  .slide-text h1 { font-size: 26px; }
  .slide-text p { font-size: 15px; }
  .slide-content { padding: 24px 5%; }
  .trip-type-row { gap: 8px; }
  .radio-pill { padding: 6px 12px; font-size: 12px; }
  .travel-tab { padding: 10px 16px; font-size: 14px; }
  .admin-stats { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
  .action-btns { flex-direction: column; }
  .action-btns .btn { width: 100%; }
  .my-trip-actions { flex-wrap: wrap; }
  .step-card { width: 100%; }
  .app-badges { flex-direction: column; }
  .app-badge { width: 100%; }
  .score-badge { width: 48px; height: 48px; font-size: 13px; }
  .match-actions .btn, .match-actions .btn-sm, .match-actions form { width: 100%; }
  .match-actions .btn { justify-content: center; }
  .contact-list li { font-size: 14px; }
  .pagination .page { padding: 5px 8px; }
}

/* Mobile fixes from the viewport audit */
.admin-page > * { min-width: 0; }
@media (max-width: 900px) {
  /* overflow must stay visible so the nav dropdown can extend below the bar (was 'hidden',
     a leftover from the old horizontal strip, which clipped the menu). */
  .admin-sidebar { max-width: 100vw; overflow: visible; }
}
@media (max-width: 768px) {
  /* Contact rows become stacked cards instead of a horizontally scrolling table */
  .contact-rows { overflow: visible; }
  .contact-table { min-width: 0; display: block; }
  .contact-table thead { display: none; }
  .contact-table tbody { display: block; }
  .contact-table tr.contact-row { display: block; position: relative; border: 1px solid var(--border); border-radius: 10px; padding: 10px 40px 10px 10px; margin-bottom: 10px; background: var(--bg); }
  .contact-table td { display: block; padding: 3px 0; }
  .contact-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .contact-table td.center { text-align: left; display: flex; align-items: center; gap: 8px; }
  .contact-table td.center::before { margin-bottom: 0; }
  .contact-table td:last-child { position: absolute; top: 6px; right: 6px; padding: 0; }
  .sides { min-width: 0; }
  .sides thead { display: none; }
  .sides tr { display: block; border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
  .sides td { display: block; border: none; padding: 2px 0; }
}

/* Consent labels: keep text + links flowing as one paragraph next to the checkbox */
.consent-check { align-items: flex-start; }
.consent-check > span { flex: 1; line-height: 1.5; }
.consent-check input { margin-top: 3px; flex-shrink: 0; }

/* Tables that turn into stacked cards on phones (rows carry data-label on each cell) */
@media (max-width: 768px) {
  .admin-table.stack-mobile { display: block; }
  .admin-table.stack-mobile thead { display: none; }
  .admin-table.stack-mobile tbody { display: block; }
  .admin-table.stack-mobile tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: white; }
  .admin-table.stack-mobile td { display: block; border: none; padding: 2px 0; }
  .admin-table.stack-mobile td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
  .admin-table.stack-mobile td[data-label="Route"], .admin-table.stack-mobile td[data-label="Person"] { grid-column: 1 / -1; }
  .admin-table.stack-mobile td.row-actions { grid-column: 1 / -1; display: flex; gap: 8px; padding-top: 6px; }
  .admin-table.stack-mobile tr:hover td { background: transparent; }
}

/* Narrow phones (320-360px) */
.dash-matches > *, .results-grid > *, .all-trips-grid > *, .metrics-grid > * { min-width: 0; }
.dash-match, .trip-card, .match-card, .match-item { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .btn-primary-nav { display: none; }   /* "Sign Up" lives in the menu as "Join Desi Travellers" */
  .btn-outline-nav { width: auto; padding: 7px 10px; }
  .match-title { min-width: 0; }
  .navbar { gap: 6px; }
  .logo-text { font-size: 14px; }
  .dash-match { padding: 12px 12px; }
}

/* Match cards on narrow phones: title keeps a sane width, icons/status wrap below */
.match-card, .match-item { overflow-wrap: normal; }
@media (max-width: 600px) {
  .match-card .match-head, .match-item .match-head, .dash-match .match-head { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: start; }
  .match-card .match-head > .ci-cell, .match-card .match-head > .chip { grid-column: 1 / -1; }
  .match-title { min-width: 0; }
  .match-title .muted { overflow-wrap: anywhere; }
}

/* ===== PHASE 3: SCRAPER CONSOLE ===== */
.progress-bar { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; margin: 8px 0; }
.progress-bar > div { height: 100%; width: 100%; background: linear-gradient(90deg, var(--coral) 0%, var(--coral-light) 50%, var(--coral) 100%); background-size: 200% 100%; animation: scrape-progress 1.4s linear infinite; }
@keyframes scrape-progress { from { background-position: 200% 0; } to { background-position: 0 0; } }
.progress-bar.static > div { animation: none; background: var(--green); }
.log-tail { max-height: 220px; overflow: auto; background: var(--navy); color: #d6e2f0; font-family: Consolas, Menlo, monospace; font-size: 12px; padding: 10px 12px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
.bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; box-shadow: var(--shadow); }
.bulk-bar .spacer { flex: 1; }
.candidate-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; background: white; }
.candidate-card.best { border-color: var(--coral); box-shadow: var(--shadow); }
.candidate-cols { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.candidate-cols span { background: var(--bg); border-radius: 10px; padding: 2px 8px; font-size: 11px; font-family: Consolas, Menlo, monospace; }
.mapping-table select { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px; font-size: 13px; background: white; }
.mapping-table select.dup-target { border-color: #d97706; background: #fffbeb; }
.mapping-table td code { font-size: 12px; color: var(--muted); }
.recipe-editor textarea { font-family: Consolas, Menlo, monospace; font-size: 12px; min-height: 320px; }
.import-table tr.row-imported td { background: #f0fdf4; }
.import-table tr.row-skipped td { opacity: 0.55; }
.stat-inline { display: inline-flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.stat-inline strong { color: var(--text); }
@media (max-width: 768px) {
  .bulk-bar { position: sticky; bottom: 0; z-index: 50; }
}
@media (max-width: 768px) {
  .admin-table.stack-mobile td.map-target { grid-column: 1 / -1; }
}

/* ---- Staff shell (CS / admin): no traveller navigation ---- */
.staff-tag { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--coral); color:#fff; font-size:10px; font-weight:700; letter-spacing:.04em; vertical-align:middle; }
.footer-staff { padding: 14px 5%; }
.footer-staff .footer-bottom { border-top: 0; padding: 0; }

/* ---- Scraper run page: row view/edit modal ---- */
.row-modal-tabs { display:flex; gap:6px; margin:12px 0 16px; }
.row-modal-tabs .btn-sm.green { pointer-events:none; }
.row-edit-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap:12px; }
.row-edit-grid label { font-size:11px; color:var(--muted); display:block; margin-bottom:4px; font-weight:600; }
.row-edit-grid input, .row-edit-grid select, .row-edit-grid textarea { width:100%; border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:13px; background:white; font-family:inherit; }
.row-edit-grid .edited-input { border-color:var(--coral); background:#fff7f5; }
.row-edit-grid .wide { grid-column: 1 / -1; }
tr.row-edited > td:first-child { box-shadow: inset 3px 0 0 var(--coral); }

/* ---- Header portal switch (admins): CS Console <-> Admin ---- */
.portal-switch { display:inline-flex; border:1.5px solid var(--coral); border-radius:999px; overflow:hidden; vertical-align:middle; }
.portal-switch a { padding:7px 16px; font-size:13px; font-weight:600; color:var(--coral); display:inline-flex; align-items:center; gap:6px; }
.portal-switch a.active { background:var(--coral); color:#fff; }
.portal-switch a:not(.active):hover { background:#fff2ef; }
@media (max-width: 900px) { .portal-switch a { padding:6px 12px; font-size:12px; } }

/* portal switch lives inside the profile dropdown */
.portal-switch-wrap { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.portal-switch-wrap .portal-switch { display: flex; width: 100%; }
.portal-switch-wrap .portal-switch a { flex: 1; justify-content: center; padding: 8px 10px; }

/* ---- Profile dropdown redesign: identity header, portal switch, clean menu ---- */
.user-dropdown { min-width: 268px; padding: 0 0 8px; border-radius: 14px; overflow: hidden; }
.dd-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: linear-gradient(135deg, #fff7f5, #ffffff); border-bottom: 1px solid var(--border); }
.dd-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 38px; }
.dd-avatar-icon { display: inline-flex; align-items: center; justify-content: center; background: var(--coral); color: #fff; font-size: 16px; }
.dd-id { min-width: 0; flex: 1; }
.dd-id strong { display: block; font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-id small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; background: #eef2ff; color: #4338ca; flex: 0 0 auto; }
.dd-role-admin { background: #fee2e2; color: #b91c1c; }
.dd-role-cs { background: #e0f2fe; color: #0369a1; }
.dd-section { padding: 12px 14px 4px; }
.dd-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.dd-section .portal-switch { display: flex; width: 100%; border: 1px solid var(--border); background: var(--bg); border-radius: 10px; padding: 3px; gap: 3px; overflow: visible; }
.dd-section .portal-switch a { flex: 1; justify-content: center; padding: 8px 6px; font-size: 12.5px; border-radius: 8px; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.dd-section .portal-switch a.active { background: #fff; color: var(--coral); box-shadow: 0 1px 4px rgba(0,0,0,0.14); }
.dd-section .portal-switch a:not(.active):hover { color: var(--text); background: transparent; }
/* "Working as" (top of the staff menu, _staff_nav.html): one line per role, the one taken lit like the Website / Staff switch */
.role-switch { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); background: var(--bg);
  border-radius: 10px; padding: 3px; max-height: 240px; overflow-y: auto; }
.role-switch a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12.5px; font-weight: 600;
  border-radius: 8px; color: var(--muted); text-decoration: none; }
.role-switch a i { width: 14px; text-align: center; }
.role-switch a.active { background: #fff; color: var(--coral); box-shadow: 0 1px 4px rgba(0,0,0,0.14); }
.role-switch a:not(.active):hover, .role-switch a:focus-visible { color: var(--text); background: rgba(15,35,64,.05); outline: none; }
.acting-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 5%; font-size: 13.5px;
  background: #eef4ff; border-bottom: 1px solid #c7d8fb; color: #1e3a8a; }
.acting-banner a { margin-left: auto; font-weight: 700; color: #1d4ed8; white-space: nowrap; }

/* ===== Users: role chips in the table, and "Manage" -- one account in a panel from the right ===== */
.ur-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ur-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 600; background: #eef2f7; color: #33415c; white-space: nowrap; }
.ur-chip.staff { background: #e7f0fd; color: #1d4ed8; }
.ur-chip.admin { background: #fee2e2; color: #b91c1c; }
.ur-chip.super { background: #fff1db; color: #9a5300; }
.ur-team { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.ur-name { color: inherit; }
.ur-name:hover b { text-decoration: underline; }
.ud-backdrop { position: fixed; inset: 0; background: rgba(15, 35, 64, .35); z-index: 1090; }
.ud-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); z-index: 1100; background: #fff;
  box-shadow: -18px 0 44px rgba(15, 35, 64, .22); overflow-y: auto; transform: translateX(100%); transition: transform .2s ease; }
.ud-drawer.open { transform: none; }
body.ud-open { overflow: hidden; }
.upn { padding-bottom: 24px; color: var(--text); }
.upn-head { position: sticky; top: 0; z-index: 2; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px 14px;
  background: #fff; border-bottom: 1px solid var(--border); }
.upn-av { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--ui-primary-soft, #eaf3fe); color: var(--ui-primary, #1f6fd6); font-weight: 800; font-size: 16px; }
.upn-id { flex: 1; min-width: 0; }
.upn-id h2 { margin: 0; font-size: 19px; }
.upn-id p { margin: 2px 0 6px; color: var(--muted); font-size: 13px; }
.upn-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.upn-close { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.upn-close:hover { color: var(--text); }
.upn-sec { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.upn-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.upn-sec h3 i { color: var(--ui-primary, #1f6fd6); }
.upn-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.upn-facts dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.upn-facts dd { margin: 2px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
.upn-ok { color: #1E7F4F; }
.upn-checks { display: grid; gap: 6px; margin-bottom: 12px; }
.upn-checks.two { grid-template-columns: 1fr 1fr; }
.upn-check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; }
.upn-check:hover { background: #f7f9fc; }
.upn-check.off { opacity: .6; cursor: not-allowed; }
.upn-check.small { padding: 6px 9px; font-size: 13.5px; }
.upn-check input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--ui-primary, #1f6fd6); }
.upn-check b { display: block; font-size: 14px; }
.upn-check small { display: block; color: var(--muted); font-size: 12px; }
.upn-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.upn-field select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-weight: 400; }
.upn-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.upn-note { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #f4f8fd; font-size: 13px; color: #33415c; }
.upn-note.bad { background: #fdecec; color: #991b1b; }
.upn-links { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 14px; }
.upn-links a { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.upn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.upn-remove { margin-top: 10px; color: #b91c1c; }
@media (max-width: 520px) { .upn-facts, .upn-checks.two { grid-template-columns: 1fr; } }
.dd-menu { padding-top: 6px; }
.dd-menu a i { width: 18px; text-align: center; color: var(--muted); }
.dd-menu a:hover i, .dd-menu a.danger i { color: inherit; }
/* Replying to an enquiry, in the console rather than in somebody's own mailbox. */
.vc-reply-ov { position: fixed; inset: 0; z-index: 9998; background: rgba(15,35,64,.5);
  display: grid; place-items: center; padding: 20px; }
.vc-reply-ov[hidden] { display: none; }
.vc-reply { background: #fff; border-radius: 16px; width: min(600px, 100%); max-height: 90vh;
  overflow: auto; box-shadow: 0 30px 70px rgba(1,16,56,.3); }
.vc-reply header { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); }
.vc-reply header h3 { font-size: 17px; font-weight: 800; margin: 0; }
.vc-reply-x { border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer;
  padding: 4px 8px; border-radius: 8px; }
.vc-reply-x:hover { background: var(--bg); color: var(--text); }
.vc-reply form { padding: 18px 20px 20px; }
.vc-reply-to { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.vc-reply-to b { color: var(--text); }
.vc-reply textarea { width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.55; background: #fbfdff;
  resize: vertical; }
.vc-reply textarea:focus { border-color: var(--coral); outline: none; background: #fff;
  box-shadow: 0 0 0 3px rgba(47,128,237,.16); }
.vc-reply-act { display: flex; gap: 10px; align-items: center; margin-top: 14px; }

/* a reply already sent, shown under the message it answers */
.cm-reply { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--coral);
  background: var(--coral-light); border-radius: 0 8px 8px 0; font-size: 12.5px; line-height: 1.5; }
.cm-reply b { display: block; color: var(--text); font-size: 11.5px; margin-bottom: 3px; }
.cm-reply b i { margin-right: 5px; }
.cm-reply span { display: block; color: var(--muted); white-space: pre-wrap; }
.cm-reply em { display: block; color: #b91c1c; font-style: normal; font-weight: 700; font-size: 11px; }
.cm-reply.failed { border-left-color: #dc2626; background: #fdecec; }

/* Logout is a form now -- a GET link could be triggered by any page that gets this browser to
   fetch a URL -- so its button has to read as the menu row it replaced. */
.menu-logout { margin: 0; }
.menu-logout button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px;
  font: inherit; font-size: 14px; color: #dc2626; background: none; border: 0; cursor: pointer;
  text-align: left; transition: background .15s; }
.menu-logout button:hover { background: var(--bg); }
.menu-logout button i { width: 18px; text-align: center; color: inherit; }
.menu-logout button:focus-visible { outline: 3px solid rgba(220,38,38,.3); outline-offset: -3px; }

/* ==== Trip cards: boarding-pass redesign (My Trips / Desis on Move / All Trips / dashboard) ==== */
.trip-card { padding: 0; border: 1px solid #e3ecf7; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.trip-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15,35,64,0.15); border-color: #c6dcf5; }
.tc-band { height: 5px; background: linear-gradient(90deg, var(--coral), #6ea8dd); }
.trip-card.tc-seeking_help .tc-band { background: linear-gradient(90deg, #e0731d, #f2ab3f); }
.trip-card.tc-offering_help .tc-band { background: linear-gradient(90deg, #199f7e, #2fbf9a); }
.trip-card.tc-open .tc-band { background: linear-gradient(90deg, #3a6fa8, #6ea8dd); }
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px 0; }
.tc-head .trip-role-badge { margin-left: 0; font-size: 10.5px; padding: 4px 10px; }
.tc-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tc-route { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 14px 18px 2px; }
/* ports size to their content (the wider of code / city), so the city shows in full when it
   fits; a very long name is capped at 44% and ellipsised so it can't starve the connector */
.tc-port { text-align: center; flex: 0 0 auto; min-width: 0; max-width: 44%; }
.tc-port strong { display: block; font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1.05; letter-spacing: 0.3px; white-space: nowrap; }
.tc-port small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the connector takes the remaining width and clips inside itself rather than pushing the ports;
   dashes shrink to almost nothing so N flight symbols pack in without overflowing the card */
.tc-path { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; position: relative; margin-top: 10px; overflow: hidden; }
.tc-path .tc-dash { flex: 1 1 0; min-width: 3px; border-top: 2px dashed #9dc0e6; }
.tc-path .tc-dot { width: 8px; height: 8px; border-radius: 50%; background: #5b8bc4; flex: 0 0 8px; }
.tc-path i.fa-plane { color: var(--coral); font-size: 14px; }
/* 4+ legs: tighten the symbols and gaps so five or six planes still fit between the codes */
.tc-path--dense { gap: 2px; }
.tc-path--dense i.fa-plane { font-size: 11px; }
.tc-path--dense .tc-flight-hot { padding: 1px; }
.trip-card.tc-offering_help .tc-path i.fa-plane { color: #199f7e; }
.trip-card.tc-seeking_help .tc-path i.fa-plane { color: #e0731d; }
/* round trip: two stacked connectors sharing one pair of endpoints (out ▸ / return ◂) */
.tc-path-round { flex-direction: column; gap: 3px; }
.tc-path .tc-rt { flex: 1; display: flex; flex-direction: column; gap: 3px; width: 100%; }
.tc-path .tc-rtline { display: flex; align-items: center; gap: 5px; }
.tc-path .tc-rtline.tc-back i.fa-plane { opacity: .75; }
.tc-date { position: absolute; left: 50%; transform: translateX(-50%); top: 16px; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: var(--coral-dark-text); background: var(--coral-light); border-radius: 999px; padding: 2px 10px; display: inline-flex; align-items: center; gap: 5px; }
.tc-date i { font-size: 9px; }
.tc-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 8px 18px 0; }
.tc-meta > div small { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tc-meta > div strong { font-size: 12.5px; color: var(--navy); font-weight: 700; }
.trip-card .trip-details { padding: 10px 18px 0; margin-bottom: 10px; }
.trip-card .trip-tags { padding: 0 18px; margin-bottom: 12px; }
.trip-card .trip-legs { padding: 0; }
.tc-langs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tc-langs span { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; font-size: 10.5px; font-weight: 700; padding: 1px 9px; color: var(--muted); }
.tc-spacer { flex: 1; }
.tc-tear { position: relative; border-top: 2px dashed #dbe7f5; margin: 0 10px; }
.tc-tear::before, .tc-tear::after { content: ''; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); }
.tc-tear::before { left: -18px; }
.tc-tear::after { right: -18px; }
.trip-card .trip-card-footer { padding: 10px 18px 14px; background: #fbfdff; }
.trip-card .connect-btn { border-radius: 999px; padding: 8px 18px; box-shadow: 0 6px 14px rgba(58,111,168,0.25); }
.trip-card .trip-author span { font-weight: 700; color: var(--navy); }

/* ===== HEADER/FOOTER/FIELDS REFRESH: match the new landing design language ===== */

/* -- header -- */
.navbar { height: 68px; background: linear-gradient(180deg, #10254a, #0c1e3c); box-shadow: 0 2px 18px rgba(4,12,26,0.35); gap: 20px; }
.logo-text { font-family: var(--font-head); font-weight: 600; }
.logo-text strong { color: #7db4e8; }
.nav-links { gap: 2px; }
.nav-links a { border-radius: 999px; padding: 8px 15px; font-weight: 600; color: rgba(255,255,255,0.78); }
.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,0.12); color: #fff; }
.nav-links .highlight-link { color: #f2ab3f; }
/* "Services" dropdown: the rest of the NRI Parent Service group, all on other domains.
   The carets/icons need display overrides because .nav-links a i is hidden on desktop. */
.nav-links .nav-svc { position: relative; }
/* The anchor stays display:inline like every other nav link. As inline-flex it became an atomic
   inline box, so its padding counted toward layout and the label sat ~7px lower than its siblings. */
.nav-links .nav-svc > a { cursor: pointer; }
.nav-links .nav-svc > a .nav-svc-caret { display: inline-block; font-size: 9.5px; margin-left: 6px;
  vertical-align: baseline; transition: transform .18s; }
.nav-links .nav-svc.open > a { background: rgba(255,255,255,0.12); color: #fff; }
.nav-links .nav-svc.open > a .nav-svc-caret { transform: rotate(180deg); }
.nav-svc-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 236px; list-style: none;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 44px rgba(15,31,61,.22); padding: 8px;
  display: none; z-index: 120; margin: 0; }
.nav-svc.open .nav-svc-menu { display: block; }
.nav-svc-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: #0F1F3D; font-size: 14px; font-weight: 500; padding: 9px 12px; border-radius: 8px; white-space: nowrap; }
.nav-svc-menu a:hover { background: #FFF6EA; color: #0F1F3D; }
.nav-svc-menu a i { display: inline-block; font-size: 10px; opacity: .5; }
.btn-outline-nav { background: transparent; border: 1.5px solid rgba(255,255,255,0.45); color: #fff; border-radius: 999px; padding: 8px 20px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .15s; }
.btn-outline-nav:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.btn-primary-nav { background: #f0940a; border: 1.5px solid #f0940a; color: #fff; border-radius: 999px; padding: 8px 20px; font-size: 13.5px; font-weight: 700; transition: all .15s; box-shadow: 0 6px 16px rgba(240,148,10,0.35); }
.btn-primary-nav:hover { background: #d97f00; border-color: #d97f00; transform: translateY(-1px); color: #fff; }
.user-btn { border-radius: 999px; padding: 6px 14px; }
.notif-btn { border-radius: 50%; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.notif-btn:hover { background: rgba(255,255,255,0.12); }
.badge { background: #f0940a; }
.staff-tag { background: #2f80ed; }

/* -- footer -- */
.footer { background: linear-gradient(180deg, #0f2340 0%, #0a1a30 100%); }
.footer-inner { padding: 60px 5% 36px; gap: 40px 64px; }
.footer-brand p { color: rgba(255,255,255,0.55); }
.footer-links { align-items: center; }
.footer-links a { padding: 7px 14px; border-radius: 999px; font-weight: 600; color: rgba(255,255,255,0.65); }
.footer-links a:hover { background: rgba(255,255,255,0.09); color: #fff; }
.footer-social { gap: 10px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: rgba(255,255,255,0.7); transition: all .2s; }
.footer-social a:hover { background: #2f80ed; border-color: #2f80ed; color: #fff; transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); font-size: 12.5px; letter-spacing: 0.02em; }
/* On phones the three-column footer squeezed the links into a narrow wrapping column with a
   dead right half. Stack it into one centred column: brand, then the links as centred pills,
   then the social row. */
@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: 40px 6% 26px; }
  .footer-brand { min-width: 0; width: 100%; }
  .footer-brand .nav-logo { justify-content: center; }
  .footer-links { justify-content: center; gap: 8px 10px; width: 100%; }
  .footer-links a { white-space: nowrap; }
  .footer-social { justify-content: center; width: 100%; }
}

/* -- form controls, everywhere -- */
.field-group label { color: #33517a; font-size: 11.5px; letter-spacing: 0.08em; }
.field-group input[type=text], .field-group input[type=date], .field-group input[type=time],
.field-group input[type=email], .field-group input[type=password], .field-group input[type=tel],
.field-group input[type=number], .field-group input[type=url], .field-group select {
  border: 1.5px solid #d7e6f6; border-radius: 11px; padding: 11px 14px; font-size: 14px;
  color: #0f2340; width: 100%; transition: border-color .15s, box-shadow .15s, background .15s;
}
.field-group textarea {
  width: 100%; border: 1.5px solid #d7e6f6; border-radius: 11px; padding: 11px 14px; font-size: 14px;
  color: #0f2340; font-family: inherit; resize: vertical; min-height: 88px; outline: none;
  transition: border-color .15s, box-shadow .15s; background: white;
}
.field-group input:hover, .field-group select:hover, .field-group textarea:hover,
.multi-select-btn:hover { border-color: #a9c8ea; }
.field-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232f80ed' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 14px center; padding-right: 36px; }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=date]:focus,
input[type=number]:focus, input[type=tel]:focus, input[type=time]:focus, select:focus, textarea:focus {
  border-color: #2f80ed !important; box-shadow: 0 0 0 3.5px rgba(47,128,237,0.14); outline: none;
}
input::placeholder, textarea::placeholder { color: #8aa0ba; }
input[type=checkbox], input[type=radio] { accent-color: #2f80ed; }
input[type=date]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
.field-icon { color: #2f80ed; opacity: 0.75; }
.flex-check { font-size: 12px; }
.flex-check input[type=checkbox] { accent-color: #2f80ed; width: 15px; height: 15px; }
.tick-check .tick-box { width: 20px; height: 20px; border: 2px solid #b3cdea; border-radius: 6px; background: white; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
.tick-check input:checked + .tick-box { background: #2f80ed; border-color: #2f80ed; }
.tick-check:hover .tick-box { border-color: #2f80ed; }

/* -- multi-select dropdowns -- */
.multi-select-btn { border: 1.5px solid #d7e6f6; border-radius: 11px; padding: 11px 14px; transition: border-color .15s, box-shadow .15s; }
.multi-select-btn:focus { border-color: #2f80ed; box-shadow: 0 0 0 3.5px rgba(47,128,237,0.14); outline: none; }
.multi-select-btn i { color: #2f80ed; font-size: 12px; }
.multi-dropdown { border: 1.5px solid #d7e6f6; border-radius: 14px; box-shadow: 0 16px 40px rgba(12,35,64,0.14); padding: 10px; max-height: 230px; margin-top: 6px; }
.multi-dropdown label { border-radius: 9px; padding: 8px 10px; font-weight: 600; color: #33517a; }
.multi-dropdown label:hover { background: #eaf4fd; color: #0f2340; }
.multi-dropdown input[type=checkbox] { width: 15px; height: 15px; }

/* -- auth & generic form pages inherit the same look -- */
.auth-form input, .auth-form select, .auth-form textarea { border-radius: 11px !important; border-width: 1.5px !important; }
.admin-search-form input { border: 1.5px solid #d7e6f6; border-radius: 999px; padding: 10px 18px; font-size: 14px; min-width: 260px; }
.trips-search-input, .trips-sort-select { border-width: 1.5px !important; border-color: #d7e6f6 !important; }

/* FIELDS REFRESH POLISH */
.btn-primary-nav, .btn-outline-nav { white-space: nowrap; }
.multi-dropdown label { text-transform: none; letter-spacing: 0; font-size: 13.5px; }

/* ===== GLOBAL THEME REFRESH: inner pages match the landing language ===== */

/* buttons everywhere: friendly pills */
.btn { border-radius: 999px; font-weight: 700; padding: 11px 24px; }
.btn-primary { box-shadow: 0 6px 16px rgba(47,128,237,0.25); }
.btn-outline, .btn-outline-coral { border-width: 2px; }
.btn-sm, .btn-sm-outline { border-radius: 999px; padding: 6px 14px; }
.connect-btn { border-radius: 999px; }
.modal-box { border-radius: 20px; }

/* auth pages: sky wash + topo pattern like the landing form section */
.auth-page { background-color: #f0f7ff; background-image: repeating-radial-gradient(circle at 15% 20%, transparent 0 58px, rgba(58,111,168,0.045) 58px 60px), repeating-radial-gradient(circle at 85% 80%, transparent 0 74px, rgba(58,111,168,0.04) 74px 76px); }
.auth-card { border-radius: 22px; box-shadow: 0 18px 50px rgba(12,35,64,0.12); border: 1px solid #e8f1fb; }
.oauth-btn { border-radius: 12px; border-width: 1.5px; }
.auth-header h1 { letter-spacing: -0.3px; }

/* admin / CS shell */
.admin-sidebar { background: linear-gradient(180deg, #10254a, #0c1e3c); }
.admin-sidebar nav a { border-left: 3px solid transparent; border-radius: 0 999px 999px 0; margin-right: 12px; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { border-left-color: #2f80ed; background: rgba(47,128,237,0.18); }
.admin-main h1, .admin-main h2, .card-head h1 { letter-spacing: -0.3px; }
.admin-card { border: 1px solid #e8f1fb; border-radius: 16px; }
.stat-card { border-radius: 16px; border: 1px solid #e8f1fb; }
.stat-card i { color: #2f80ed; opacity: 0.85; }
.admin-table th { color: #33517a; letter-spacing: 0.06em; }
.badge-pill.green { background: #e7f7f4; color: #199f7e; }

/* dashboard match cards + misc cards pick up the rounder look */
.dash-match, .testimonial-card, .review-col, .match-card { border-radius: 16px; }

/* ===== FIELDS V2: friendlier controls (sentence-case labels, soft fills, real states) ===== */
.field-group label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: #2c4a72; margin-bottom: 7px; }
.field-group label .optional { color: #8aa0ba; font-weight: 500; font-size: 12px; }
.field-group input[type=text], .field-group input[type=date], .field-group input[type=time],
.field-group input[type=email], .field-group input[type=password], .field-group input[type=tel],
.field-group input[type=number], .field-group input[type=url], .field-group select {
  padding: 12px 15px; border-radius: 12px; background-color: #fbfdff; border-color: #dbe7f5; font-size: 14.5px;
}
.field-group select { padding-right: 38px; }
.field-group textarea { padding: 12px 15px; border-radius: 12px; background-color: #fbfdff; font-size: 14.5px; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus { background-color: #fff; }
.multi-select-btn { padding: 12px 15px; border-radius: 12px; background-color: #fbfdff; color: #33517a; font-weight: 600; font-size: 14.5px; }
.multi-select-btn:focus { background-color: #fff; }
.admin-search-form input, .trips-search-input { background-color: #fbfdff; }

/* buttons: press, disabled, keyboard-focus and loading states */
.btn:active { transform: translateY(0) scale(0.985); }
.btn:disabled { opacity: 0.65; cursor: default; transform: none; box-shadow: none; }
.btn:focus-visible, .btn-sm:focus-visible, .btn-sm-outline:focus-visible, .connect-btn:focus-visible,
.fw-next-big:focus-visible, .l-q-btn:focus-visible { outline: 3px solid rgba(47,128,237,0.32); outline-offset: 2px; }
.btn-sm { padding: 7px 15px; font-size: 12.5px; font-weight: 600; transition: all .15s; }
.btn-sm:hover { border-color: var(--coral); color: var(--coral); }
.btn.loading { pointer-events: none; opacity: 0.85; }
.btn.loading::after { content: ''; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; border-radius: 50%; animation: cdspin .7s linear infinite; }
@keyframes cdspin { to { transform: rotate(360deg); } }

/* nicer generic loader */
.loading-spinner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 34px; color: var(--muted); font-size: 13.5px; grid-column: 1 / -1; text-align: center; }
.loading-spinner i { color: var(--coral); font-size: 20px; }

/* ===== SKELETON UI ===== */
@keyframes skShimmer { from { background-position: -600px 0; } to { background-position: 600px 0; } }
.sk { background: linear-gradient(90deg, #e9f1fa 25%, #f7fbff 45%, #e9f1fa 65%); background-size: 1200px 100%; animation: skShimmer 1.4s linear infinite; border-radius: 8px; }
.sk-card { background-color: #fff; border: 1px solid #e8f1fb; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.sk-band { height: 5px; border-radius: 0; }
.sk-pad { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.sk-row { display: flex; align-items: center; gap: 12px; }
.sk-foot { border-radius: 12px; }
.notif-sk { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.notif-sk .sk.dot { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; }
.notif-sk .lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* ===== FIELD ICONS FIX: proper leading-icon layout ===== */
.input-with-icon { position: relative; }
.input-with-icon .field-icon { left: 0; width: 46px; text-align: center; font-size: 14px; color: var(--coral); opacity: 0.85; }
.input-with-icon input, .input-with-icon input[type=text], .input-with-icon input[type=date] { padding-left: 46px !important; }
.field-group input[type=text], .field-group input[type=date], .field-group input[type=email],
.field-group input[type=password], .field-group input[type=number], .field-group input[type=tel],
.field-group select, .multi-select-btn { min-height: 46px; }
.flex-check { gap: 7px; font-size: 12.5px; color: #4a6080; font-weight: 600; }

/* ===== BUTTON CENTERING FIX: flex buttons centre their label at any width ===== */
.btn, .btn-sm, .btn-sm-outline, .fw-next-big, .connect-btn, .l-q-btn, .fw-nav { justify-content: center; text-align: center; }
.fw-next-big { display: inline-flex; align-items: center; gap: 8px; }

/* ===== CHEVRON REPEAT FIX: the arrow is a background image and must never tile ===== */
select { background-repeat: no-repeat !important; }

/* ===== FOOTER PIN + CHAT REDESIGN ===== */

/* footer always sits at the bottom of the viewport, even on short pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > .footer { margin-top: auto; }

/* floating bubble */
.chat-toggle { width: 58px; height: 58px; background: linear-gradient(135deg, #2f80ed, #1f5fc0); box-shadow: 0 10px 26px rgba(31,95,192,0.45); font-size: 24px; }
.chat-toggle:hover { transform: scale(1.07) translateY(-1px); background: linear-gradient(135deg, #3b8bf5, #2f80ed); }

/* shared shell for the list panel and the conversation window */
.chat-panel, .chat-window { width: 352px; border-radius: 18px; border: 1px solid #e3ecf7; box-shadow: 0 24px 60px rgba(12,35,64,0.22); overflow: hidden; }
.chat-panel { bottom: 70px; }
.chat-window { bottom: 94px; right: 24px; }
.chat-panel-header, .chat-window-header { background: linear-gradient(135deg, #10254a, #1a3a6b); padding: 13px 14px; font-family: var(--font-head); font-size: 15px; gap: 10px; border-radius: 0; }
.chat-panel-header span i { color: #7db4e8; margin-right: 4px; }
.cp-title { display: flex; align-items: center; gap: 8px; }
.cp-unread { font-size: 10.5px; font-weight: 700; background: rgba(255,255,255,0.18); padding: 3px 9px; border-radius: 999px; }
.cp-head-actions { display: flex; align-items: center; gap: 2px; }
.chat-window-header { justify-content: flex-start; }
.cw-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
#chatWindowTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatWindowSub { font-weight: 500; font-size: 10.5px; color: rgba(255,255,255,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the "expand to full inbox" link sits next to the close button, styled the same */
.chat-window-header .cw-actions a, .chat-panel-header .cp-expand { color: #fff; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; text-decoration: none; }
.chat-window-header .cw-actions a:hover, .chat-panel-header .cp-expand:hover { background: rgba(255,255,255,0.18); }
#chatBackBtn { background: rgba(255,255,255,0.12); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 13px; flex: 0 0 30px; }
#chatBackBtn:hover { background: rgba(255,255,255,0.28); }
.cw-avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.15); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 30px; }
.chat-window-header .cw-actions button, .chat-panel-header button { width: 28px; height: 28px; border-radius: 50%; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.chat-window-header .cw-actions button:hover, .chat-panel-header button:hover { background: rgba(255,255,255,0.18); }

/* conversations list */
.chat-search { padding: 12px 16px; background: #fbfdff; font-size: 13.5px; border-bottom: 1px solid #e3ecf7; }
.chat-rooms-list { max-height: 340px; }
.chat-room-item { border-bottom: 1px solid #eef4fb; padding: 12px 16px; }
.chat-room-item:hover { background: #eaf4fd; }
.chat-room-avatar { background: #eaf4fd; color: #2f80ed; }
.chat-room-item { align-items: flex-start; }   /* the extra timestamp/route lines need top alignment, not centered */
.chat-room-item.unread { background: #f5f9ff; }
.chat-room-item.unread .cri-last, .chat-room-item.unread .cri-top strong { color: #10254a; font-weight: 700; }
.chat-room-avatar { font-weight: 700; font-size: 15px; }
.cri-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cri-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cri-top time { font-size: 10.5px; color: #9fb2cc; font-weight: 600; flex: none; }
.cri-last { color: var(--muted); }
.cri-route { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #2f80ed; font-weight: 600; margin-top: 3px; }
.cri-route i { font-size: 9px; }
/* empty state: a little context and a real way forward, not just a bare sentence */
.chat-empty { padding: 30px 22px; text-align: center; }
.chat-empty i { font-size: 26px; color: #b9cbe6; margin-bottom: 10px; display: block; }
.chat-empty p { font-size: 13.5px; color: #33517a; font-weight: 700; margin-bottom: 4px; }
.chat-empty span { font-size: 12px; color: var(--muted); display: block; margin-bottom: 14px; }
.cp-footer { display: block; text-align: center; padding: 11px; font-size: 12.5px; font-weight: 700; color: #2f80ed; border-top: 1px solid #eef4fb; background: #fbfdff; text-decoration: none; }
.cp-footer:hover { background: #eaf4fd; }
.cp-footer i { margin-left: 4px; font-size: 10px; }

/* conversation */
.chat-security-msg { background: #eaf4fd; border-bottom: 1px solid #d7e6f6; color: #33517a; font-size: 10.5px; padding: 8px 14px; }
.chat-messages { max-height: 300px; min-height: 180px; background: #f7fbff; padding: 14px; }
.msg-bubble { font-size: 13.5px; padding: 9px 13px; border-radius: 16px; box-shadow: 0 1px 2px rgba(12,35,64,0.06); }
.msg-bubble.sent { background: linear-gradient(135deg, #2f80ed, #1f5fc0); border-bottom-right-radius: 5px; }
.msg-bubble.received { background: #fff; border: 1px solid #e3ecf7; border-bottom-left-radius: 5px; }
.chat-input-row { padding: 10px 12px; background: #fff; border-top: 1px solid #eef4fb; }
.chat-input-row input { border: 1.5px solid #d7e6f6; border-radius: 999px; padding: 10px 16px; font-size: 13.5px; background: #fbfdff; }
.chat-input-row input:focus { background: #fff; border-color: #2f80ed; }
.chat-input-row button#chatSendBtn { width: 40px; height: 40px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2f80ed, #1f5fc0); flex: 0 0 40px; }
.chat-attach { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #eaf4fd; color: #2f80ed; flex: 0 0 34px; }
@media (max-width: 480px) {
  .chat-panel { width: calc(100vw - 48px); }
  .chat-window { width: calc(100vw - 32px); right: 16px; }
  /* Tuck the floating chat bubble into the corner and lift it clear of iOS' home bar so it
     sits over less of the content underneath it. */
  .chat-sidebar { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: 14px; }
  .chat-toggle { width: 52px; height: 52px; font-size: 21px; }
}

/* ===== MATCH BROWSER: full-screen split view ===== */
.mb-shell { background: #f7fbff; width: min(1200px, 96vw); height: min(780px, 92vh); border-radius: 20px; position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.mb-shell .modal-close { position: absolute; top: 10px; right: 14px; z-index: 5; }
.mb-cols { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.mb-left { border-right: 1px solid #e3ecf7; background: #fff; }
.mb-left, .mb-right { display: flex; flex-direction: column; min-height: 0; }
.mb-col-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 10px; gap: 10px; }
.mb-label { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #33517a; display: inline-flex; align-items: center; gap: 8px; }
.mb-label i { color: var(--coral); }
.mb-switch { display: flex; align-items: center; gap: 8px; }
.mb-switch button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #d7e6f6; background: #fff; color: var(--coral); cursor: pointer; transition: all .15s; }
.mb-switch button:hover { background: var(--coral); color: #fff; border-color: var(--coral); }
.mb-switch span { font-size: 12.5px; font-weight: 700; color: #33517a; min-width: 44px; text-align: center; }
.mb-post, .mb-match { flex: 1; overflow-y: auto; padding: 6px 20px 20px; min-height: 0; }
.mb-post .trip-card:hover, .mb-match .trip-card:hover { transform: none; box-shadow: var(--shadow); }
.mb-empty { text-align: center; padding: 70px 30px; color: var(--muted); }
.mb-empty i { font-size: 42px; color: #c9dcf1; margin-bottom: 14px; display: block; }
.mb-empty h3 { font-family: var(--font-head); color: var(--navy); margin-bottom: 6px; font-size: 20px; }
.mb-profile-head { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e8f1fb; border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.mb-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--coral-light); color: var(--coral); display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; flex: 0 0 52px; }
.mb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mb-profile-head .who { flex: 1; min-width: 0; }
.mb-profile-head .who strong { font-family: var(--font-head); font-size: 17px; display: block; color: var(--navy); margin-bottom: 3px; }
.mb-match .criteria { margin: 12px 0 10px; }
.mb-status { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.mb-trip { margin-bottom: 4px; }
@media (max-width: 880px) {
  .mb-cols { grid-template-columns: 1fr; overflow-y: auto; }
  .mb-left { border-right: none; border-bottom: 1px solid #e3ecf7; }
  .mb-post, .mb-match { overflow: visible; }
  .mb-shell { height: 94vh; }
}
/* server-rendered variant (match contact page) */
.mcp-page { padding: 36px 5% 60px; background: var(--bg); }
.mcp-head { text-align: center; max-width: 720px; margin: 0 auto 24px; }
.mcp-head h1 { font-family: var(--font-head); font-size: clamp(24px, 3vw, 34px); color: var(--navy); margin: 8px 0 6px; }
.mcp-head p { color: var(--muted); font-size: 14.5px; }
.mcp-head .big-icon { font-size: 38px; color: var(--coral); }
.mb-shell.mb-static { height: auto; margin: 0 auto; }
.mb-static .mb-post, .mb-static .mb-match { overflow: visible; }
.contact-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.contact-list li { background: #fff; border: 1px solid #e8f1fb; border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.contact-list li > i { color: var(--coral); width: 18px; text-align: center; }

/* mb close-overlap fix: keep the X clear of the right-hand up/down switcher */
.mb-right .mb-col-head { padding-right: 58px; }
.mb-shell .modal-close { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1.5px solid #d7e6f6; color: #33517a; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.mb-shell .modal-close:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }

/* ===== SIX-FIXES PACK ===== */

/* dashboard match cards v2 */
.dash-match.dm2 { background: #fff; border: 1px solid #e8f1fb; padding: 0 0 14px; overflow: hidden; box-shadow: var(--shadow); }
.dm2-for { background: linear-gradient(90deg, #eaf4fd, #ffffff); font-size: 12px; color: #33517a; padding: 9px 16px; border-bottom: 1px solid #eef4fb; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dm2-for i { color: var(--coral); }
.dash-match .dm2-head { border: none; box-shadow: none; border-radius: 0; margin-bottom: 0; padding: 12px 16px 4px; }
.dm2-route { display: flex; align-items: center; gap: 10px; padding: 2px 16px 8px; flex-wrap: wrap; }
.dm2-port { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--navy); letter-spacing: .5px; }
.dm2-line { flex: 0 0 46px; border-top: 2px dashed #b9d2ec; position: relative; height: 0; }
.dm2-line i { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--coral); background: #fff; padding: 0 3px; }
.dm2-date { font-size: 11.5px; font-weight: 700; background: var(--coral-light); color: var(--coral-dark-text); border-radius: 999px; padding: 3px 10px; display: inline-flex; gap: 5px; align-items: center; }
.dm2-crit { padding: 0 16px; margin: 4px 0 8px; }
.dm2-status { font-size: 12px; color: var(--muted); padding: 0 16px; margin-bottom: 10px; }
.dash-match.dm2 .match-actions { padding: 0 16px; }

/* hero mini calendar */
.minical { display: none; position: absolute; top: calc(100% + 12px); right: 0; background: #fff; border: 1px solid #dbe9f8; border-radius: 16px; box-shadow: 0 22px 55px rgba(12,35,64,0.2); padding: 14px; z-index: 950; width: 302px; text-align: left; }
.minical.open { display: block; }
.mc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mc-head span { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 14px; }
.mc-head button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #dbe9f8; background: #fff; color: var(--coral); cursor: pointer; font-size: 15px; line-height: 1; }
.mc-head button:hover { background: var(--coral-light); }
.mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mc-dow { font-size: 10.5px; font-weight: 800; color: #33517a; text-align: center; padding: 4px 0; }
.mc-day { border: none; background: none; height: 32px; border-radius: 50%; font-size: 12.5px; font-weight: 600; color: var(--navy); cursor: pointer; font-family: inherit; }
.mc-day:hover:not(:disabled) { background: var(--coral-light); }
.mc-day.sel { background: var(--coral); color: #fff; }
.mc-day:disabled { color: #c4d3e4; cursor: default; }
#qWhen { cursor: pointer; }

/* active search filter bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -8px 0 18px; }
.fb-lbl { font-size: 12px; font-weight: 800; color: #33517a; display: inline-flex; gap: 6px; align-items: center; text-transform: uppercase; letter-spacing: .06em; }
.fb-lbl i { color: var(--coral); }
.fb-chip { background: #fff; border: 1.5px solid #d7e6f6; border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 700; color: var(--navy); display: inline-flex; gap: 7px; align-items: center; }
.fb-chip i { color: var(--coral); }

/* airport autocomplete polish: names first, code as a chip */
.airport-dropdown { border-radius: 14px; border: 1.5px solid #d7e6f6; box-shadow: 0 18px 44px rgba(12,35,64,0.16); margin-top: 6px; max-height: 280px; overflow-y: auto; }
.airport-option { padding: 10px 14px; gap: 12px; }
.airport-option:hover, .airport-option.active { background: #eaf4fd; }
.airport-iata { background: var(--coral-light); color: var(--coral-dark); border-radius: 8px; padding: 5px 0; min-width: 46px; text-align: center; font-size: 12.5px; flex: 0 0 46px; }
.airport-option strong { color: var(--navy); }
.airport-detail { display: block; font-size: 11.5px; }
.l-q-text { position: relative; }
.l-q-text .airport-dropdown { min-width: 330px; text-align: left; }

/* responsive carousel: as many cards as fit */
.carousel-track { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ===== NUMBERED PAGINATION (arrows + windowed numbers, shared everywhere) ===== */
.pagination { justify-content: center; align-items: center; gap: 6px; margin: 22px 0 8px; }
.pagination .page { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #d7e6f6; border-radius: 10px; font-size: 13px; font-weight: 700; color: #33517a; background: #fff; transition: all .15s; font-family: inherit; }
.pagination a.page, .pagination button.page { cursor: pointer; }
.pagination a.page:hover, .pagination button.page:hover:not(:disabled) { border-color: var(--coral); color: var(--coral); }
.pagination .page.current { background: var(--coral); border-color: var(--coral); color: #fff; }
.pagination .pg-arrow { font-size: 18px; padding: 0; }
.pagination .pg-arrow.disabled, .pagination button.pg-arrow:disabled { opacity: 0.35; cursor: default; }
.pagination .pg-ellipsis { border: none; background: none; min-width: 22px; color: #8aa0ba; padding: 0; }

/* ===== SCORE RIBBON TAB: match percentage as a folded bookmark on the card ===== */
.score-tab { position: absolute; top: -5px; right: 16px; width: 58px; padding: 11px 0 14px; text-align: center; color: #fff; z-index: 3; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%); filter: drop-shadow(0 5px 8px rgba(12,35,64,0.22)); }
.score-tab span { display: block; font-family: var(--font-head); font-weight: 800; font-size: 14.5px; line-height: 1.15; }
.score-tab small { display: block; font-size: 8px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; margin-top: 1px; }
.score-tab.st-high { background: linear-gradient(180deg, #2fbf9a, #179a7b); }
.score-tab.st-mid { background: linear-gradient(180deg, #f2ab3f, #e0731d); }
.score-tab.st-low { background: linear-gradient(180deg, #f37a7a, #dd4f4f); }
.score-tab::before { content: ''; position: absolute; top: 0; left: -5px; border-style: solid; border-width: 0 5px 5px 0; border-color: transparent rgba(0,0,0,0.28) transparent transparent; }
.dash-match.dm2 { position: relative; }
.dash-match.dm2 .dm2-for { padding-right: 88px; }
.mb-profile-head { position: relative; padding-right: 88px; }

/* review stars: pop + label + textarea */
.star-rating i.pop { animation: starPop .26s ease; }
@keyframes starPop { 50% { transform: scale(1.4) rotate(8deg); } }
.rate-label { margin-left: auto; font-size: 12.5px; font-weight: 800; color: #8aa0ba; letter-spacing: .04em; text-transform: uppercase; }
.rate-label.picked { color: #e0731d; }
.review-form textarea { width: 100%; border: 1.5px solid #d7e6f6; border-radius: 12px; padding: 12px 15px; font-size: 14px; font-family: inherit; background: #fbfdff; min-height: 104px; resize: vertical; outline: none; margin-bottom: 14px; color: var(--text); }
.review-form textarea:focus { background: #fff; }

/* CALENDAR CLIP FIX: the hero must not clip its popups, and must stack above the form section */
.l-hero { overflow: visible; z-index: 30; }
.landing .search-section { z-index: 5; }
.minical { z-index: 3000; }
.l-q-text .airport-dropdown { z-index: 3000; }

/* inbox: requests & notifications panel */
.ib-extra { overflow-y: auto; max-height: 46%; border-bottom: 1px solid var(--border); background: #fbfdff; }
.ib-block { padding: 12px 16px 8px; }
.ib-block h3 { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #33517a; display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.ib-block h3 i { color: var(--coral); }
.ib-req { background: #fff; border: 1px solid #e8f1fb; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow); }
.ib-req-txt { font-size: 13px; margin-bottom: 8px; }
.ib-req-actions { display: flex; gap: 8px; }
.ib-notif { display: flex; gap: 9px; align-items: flex-start; padding: 8px 6px; border-radius: 10px; font-size: 12.5px; color: var(--text); }
.ib-notif:hover { background: var(--coral-light); }
.ib-notif .dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; margin-top: 5px; flex: 0 0 7px; }
.ib-notif.unread .dot { background: var(--coral); }
.ib-notif .txt { flex: 1; min-width: 0; }
.ib-notif .txt strong { display: block; font-size: 12.5px; }
.ib-notif .txt small { color: var(--muted); display: block; }
.ib-notif .when { color: var(--muted); flex: 0 0 auto; font-size: 11px; }

/* GOOGLE TRANSLATE CHROME: hide the injected banner/tooltips, keep our own layout stable */
.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
font[style] { background: transparent !important; box-shadow: none !important; }
.lang-menu { width: 236px; }

/* GLOBAL CUSTOM CALENDAR (mcal): popup used by every native date field site-wide */
.mcal-pop { position: fixed; z-index: 20000; width: 306px; background: #fff; border: 1px solid #d7e6f6; border-radius: 14px; box-shadow: 0 18px 44px rgba(15, 35, 64, 0.18); padding: 12px; }
.mcal-pop .mc2-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.mcal-pop .mc2-head button { border: 1px solid #d7e6f6; background: #fff; width: 30px; height: 30px; border-radius: 8px; font-size: 16px; color: #0f2340; cursor: pointer; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.mcal-pop .mc2-head button:hover { background: #eaf3ff; }
.mcal-pop .mc2-sel { border: 1px solid #d7e6f6; border-radius: 8px; padding: 5px 4px; font-size: 12.5px; font-weight: 700; color: #0f2340; background-color: #fbfdff; flex: 1; min-width: 0; min-height: 30px; }
.mcal-pop .mc2-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mcal-pop .mc2-dow { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; color: #7d94b5; text-align: center; padding: 4px 0; text-transform: uppercase; }
.mcal-pop .mc2-day { border: none; background: none; font-size: 13px; font-weight: 600; color: #22364f; height: 34px; border-radius: 9px; cursor: pointer; padding: 0; }
.mcal-pop .mc2-day:hover:not(:disabled) { background: #eaf3ff; }
.mcal-pop .mc2-day:disabled { color: #c3d2e4; cursor: default; }
.mcal-pop .mc2-day.today { outline: 1.5px dashed #2f80ed; outline-offset: -1.5px; }
.mcal-pop .mc2-day.sel { background: #2f80ed; color: #fff; }
input[type="date"] { cursor: pointer; }

/* 3-portal switcher (traveller + cs + admin): icon over small text so all three fit */
.dd-section .portal-switch.three a { flex-direction: column; gap: 3px; padding: 7px 2px 6px; font-size: 10.5px; letter-spacing: 0.01em; }
.dd-section .portal-switch.three a i { font-size: 14px; }

/* CS posts: inline matches & duplicates subtree (accordion per row) */
.tree-toggle { border: 1px solid var(--border); background: #fff; width: 24px; height: 24px; border-radius: 7px; cursor: pointer; color: var(--coral); font-size: 11px; margin-right: 6px; vertical-align: middle; }
.tree-toggle:hover { background: var(--coral-light); }
.tree-row > td { background: #f6faff !important; border-bottom: 2px solid var(--border); padding: 14px 16px; }
.pt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pt-grid h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: #33517a; display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.pt-grid h4 i { color: var(--coral); }
.pt-all { margin-left: auto; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--coral); font-weight: 600; }
.pt-item { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #e3eefb; border-radius: 11px; padding: 9px 11px; margin-bottom: 7px; font-size: 13px; }
.pt-main { flex: 1; min-width: 0; }
.pt-score { flex: 0 0 auto; font-weight: 800; font-size: 12.5px; border-radius: 8px; padding: 4px 8px; }
.pt-score.hi { background: #e7f7ee; color: #0c7a43; }
.pt-score.mid { background: #fdf3e2; color: #8a5a00; }
.pt-score.lo { background: #fdeaea; color: #b91c1c; }
.pt-dupic { flex: 0 0 auto; color: #8a5a00; background: #fdf3e2; border-radius: 8px; width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.pt-crit { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: 11px; }
.pt-crit .ok { color: #0c7a43; }
.pt-crit .no { color: #b91c1c; }
.pt-crit .why { background: #fdf3e2; color: #8a5a00; border-radius: 6px; padding: 1px 7px; font-weight: 700; }
.pt-crit .st { color: var(--muted); text-transform: capitalize; }
.pt-loading { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
@media (max-width: 900px) { .pt-grid { grid-template-columns: 1fr; } }

/* CS posts: rows that already HAVE live matches are tinted and tagged with count + best % */
.admin-table tr.has-match > td { background: #f2fbf5; }
.admin-table tr.has-match > td:first-child { box-shadow: inset 3px 0 0 #16a34a; }
.mt-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; border-radius: 7px; padding: 2px 7px; margin-top: 4px; white-space: nowrap; }
.mt-flag.hi { background: #e7f7ee; color: #0c7a43; }
.mt-flag.mid { background: #fdf3e2; color: #8a5a00; }
.mt-flag.lo { background: #fdeaea; color: #b91c1c; }

/* CS post page: admin-managed copy snippets */
.snip { margin-bottom: 12px; }
.snip-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 5px; font-size: 13px; }
.snip textarea { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-size: 12.5px; background: #fbfdff; resize: vertical; }

/* ---- My Trips: two rows of four, with carousel controls ---------------------- */
.mt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .mt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .mt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .mt-grid { grid-template-columns: 1fr; } }
.mt-grid .loading-spinner { grid-column: 1 / -1; }
.mt-count { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 6px; }
/* a spinner or empty-state must span the whole grid, not sit in column one */
.carousel-track > .loading-spinner, .mt-grid > .loading-spinner { grid-column: 1 / -1; }

/* ---- dashboard tabs --------------------------------------------------------- */
.dash-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  border-bottom: 2px solid var(--border); margin: 22px 0 26px; padding: 0 2px;
}
.dash-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.dash-tab:hover { color: var(--coral); }
.dash-tab.active { color: var(--coral); border-bottom-color: var(--coral); }
.dash-tab:focus-visible { outline: 3px solid rgba(47,128,237,.35); outline-offset: -3px; border-radius: 6px; }
.dash-tab .tab-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px;
  background: var(--border); color: var(--text); font-size: 11.5px; font-weight: 700;
}
.dash-tab.active .tab-n { background: var(--coral); color: #fff; }
.dash-panel { display: none; }
.dash-panel.active { display: block; }
@media (prefers-reduced-motion: reduce) { .dash-tab { transition: none; } }

/* Carousels are a fixed 4-up grid, two rows per page. The generic .results-grid
   auto-fill rule earlier in this file has equal specificity and would otherwise win
   by source order, collapsing both carousels to 3 columns. */
.results-grid.carousel-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .results-grid.carousel-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .results-grid.carousel-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .results-grid.carousel-track { grid-template-columns: 1fr; } }

/* ---- Help centre (public) --------------------------------------------------- */
.hc-search { position: relative; max-width: 520px; margin: 0 auto 28px; }
.hc-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.hc-search input {
  width: 100%; padding: 13px 16px 13px 44px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 999px; background: #fff; outline: none;
}
.hc-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 34px; }
@media (max-width: 900px) { .hc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hc-cats { grid-template-columns: 1fr; } }
/* The help index is a grid of topics, not prose, so it gets a wider measure than the
   800px the other static pages use for reading. Percentage padding resolves against the
   full-width parent, so 800px left only 650px inside -- room for two cards, not three. */
.static-content.hc-index { max-width: 1020px; }
.hc-cat-card {
  display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer;
  padding: 15px 16px; border-radius: 14px; background: #fff;
  border: 1.5px solid var(--border); font-family: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hc-cat-card:hover { border-color: var(--coral); transform: translateY(-2px); box-shadow: var(--shadow); }
.hc-cat-card:focus-visible { outline: 3px solid rgba(47,128,237,.4); outline-offset: 2px; }
.hc-cat-ico {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fdeee9; color: var(--coral); font-size: 16px;
}
.hc-cat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-cat-txt strong { font-size: 14.5px; color: var(--navy); }
.hc-cat-txt small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.hc-cat-n {
  margin-left: auto; flex: 0 0 auto; min-width: 24px; height: 24px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--border); color: var(--navy);
  font-size: 12px; font-weight: 700;
}
.hc-group + .hc-group { margin-top: 30px; }
.hc-group-h {
  font-size: 15px; font-weight: 700; color: var(--navy); margin: 0 0 12px;
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 9px; border-bottom: 1px solid var(--border);
}
.hc-group-h i { color: var(--coral); font-size: 14px; }
.hc-empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.hc-empty i { font-size: 26px; opacity: .5; display: block; margin-bottom: 12px; }
.hc-foot { margin-top: 34px; text-align: center; font-size: 14px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .hc-cat-card { transition: none; }
  .hc-cat-card:hover { transform: none; }
}

/* ---- Help centre (admin editor) --------------------------------------------- */
.admin-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 20px; }
.ac-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.ac-head h2 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 9px; }
.admin-card .small { font-size: 12.5px; }
.hc-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
/* Fixed grid columns rather than flex: the icon dropdown is as wide as its label
   ("Rocket / getting started" vs "Baggage"), which under flex varied by ~96px and
   shunted the title and description around on every row. */
.hc-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.9fr) 34px;
  align-items: center; gap: 10px;
}
.hc-row > * { min-width: 0; }
.hc-handle {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background: #fdeee9; color: var(--coral);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
/* one shared height so the three controls line up on every row */
.hc-row input[type=text], .hc-row .ss-btn {
  width: 100%; min-height: 38px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px;
  font-size: 13.5px; font-family: inherit;
}
.hc-row .ss { width: 100%; }
.hc-title, .hc-blurb { width: 100%; }
.hc-del { flex: 0 0 auto; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 8px; border-radius: 8px; }
.hc-del:hover { color: #c0392b; background: #fdeceb; }
.hc-faqs { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.hc-faq { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #fbfcfe; }
.hc-faq-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.hc-q { flex: 1 1 280px; min-width: 0; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-size: 14px; font-weight: 600; font-family: inherit; }
.hc-cat { flex: 0 1 190px; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-size: 13px; background: #fff; font-family: inherit; }
.hc-faq textarea { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 10px 11px; font-size: 13.5px; font-family: inherit; resize: vertical; }

/* ---- admin: colour themes ---------------------------------------------------- */
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; margin-bottom: 22px; }
.th-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.th-card.is-active { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(47,128,237,.12); }
.th-top { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.th-name { flex: 1 1 auto; min-width: 0; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-size: 14.5px; font-weight: 700; font-family: inherit; }
/* choosing the live theme is a radio, so it saves alongside the colour edits */
.th-pick { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--muted); background: #fff;
  border: 1.5px solid var(--border); padding: 6px 12px; border-radius: 999px;
  transition: color .15s, background .15s, border-color .15s; white-space: nowrap; }
.th-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.th-pick i { font-size: 11px; opacity: .35; }
.th-pick:hover { border-color: var(--coral); color: var(--coral); }
.th-pick.is-live { color: #14663f; background: #e7f7f0; border-color: #b6e3cd; }
.th-pick.is-live i { opacity: 1; color: #14663f; }
.th-pick:focus-within { outline: 3px solid rgba(47,128,237,.35); outline-offset: 2px; }
.th-pick-new { cursor: default; opacity: .6; }
.th-pick-new:hover { border-color: var(--border); color: var(--muted); }
.th-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.th-swatch { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.th-swatch input[type=color] { width: 100%; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
.th-sw-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.th-swatch code { font-size: 10.5px; color: var(--muted); font-family: ui-monospace, monospace; }
.th-preview { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.thp-bar { background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; padding: 9px 12px; display: flex; align-items: center; gap: 8px; }
.thp-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--coral); display: inline-block; }
.thp-body { background: var(--bg); padding: 13px; }
.thp-h { margin: 0 0 3px; font-size: 14px; font-weight: 800; color: var(--text); }
.thp-p { margin: 0 0 11px; font-size: 11.5px; color: var(--muted); }
.thp-btn, .thp-btn2, .thp-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 999px; margin-right: 6px; }
.thp-btn { background: var(--l-cta); color: #fff; }
.thp-btn2 { background: #fff; color: var(--coral); border: 1.5px solid var(--coral); }
.thp-chip { background: var(--gold-light); color: var(--gold); }
.th-warn { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.th-warn li { font-size: 11.5px; color: #85560d; background: #fdf3e3; border-radius: 8px; padding: 8px 10px; display: flex; gap: 7px; }
.th-foot { margin-top: 12px; display: flex; justify-content: flex-end; }
.th-del { background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer; padding: 6px 9px; border-radius: 8px; font-family: inherit; }
.th-del:hover { color: #c0392b; background: #fdeceb; }
.th-newnote { margin: 10px 0 0; }
.th-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }

/* ---- Help centre: topic index -> per-topic page ------------------------------ */
.hc-cat-card { text-decoration: none; }
.hc-cat-go { margin-left: 4px; color: var(--muted); font-size: 12px; transition: transform .15s, color .15s; }
.hc-cat-card:hover .hc-cat-go { color: var(--coral); transform: translateX(3px); }
.hc-results { margin-bottom: 30px; }
.hc-results-head { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 12px; }
.hc-result-list { display: flex; flex-direction: column; gap: 9px; }
.hc-result {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.hc-result:hover { border-color: var(--coral); box-shadow: var(--shadow); }
.hc-result-q { font-size: 14px; font-weight: 600; color: var(--text); }
.hc-result-cat { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.hc-crumbs { display: flex; align-items: center; gap: 9px; font-size: 13px; margin-bottom: 22px; }
.hc-crumbs a { color: var(--coral); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.hc-crumbs a:hover { text-decoration: underline; }
.hc-crumb-sep { color: var(--border); }
.hc-crumb-here { color: var(--muted); }
.hc-pager { display: flex; justify-content: space-between; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hc-pager-link {
  display: inline-flex; align-items: center; gap: 12px; flex: 0 1 auto; max-width: 48%;
  padding: 13px 17px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.hc-pager-link:hover { border-color: var(--coral); box-shadow: var(--shadow); }
.hc-pager-link span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-pager-link small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.hc-pager-link strong { font-size: 13.5px; color: var(--text); }
.hc-pager-link i { color: var(--coral); font-size: 13px; }
.hc-pager-link.next { text-align: right; }
.hc-backrow { margin-top: 26px; display: flex; justify-content: center; }
.faq-item.is-target { box-shadow: 0 0 0 3px rgba(47,128,237,.25); border-radius: 10px; }
@media (max-width: 640px) {
  .hc-pager-link { max-width: 100%; flex: 1 1 100%; }
  .hc-result { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .hc-cat-card:hover .hc-cat-go { transform: none; } }

/* The hidden attribute only sets display:none at user-agent weight, so any author rule
   with an explicit display (grid on .hc-cats, inline-flex on .btn) silently beats it.
   This makes el.hidden = true actually hide the element everywhere. */
[hidden] { display: none !important; }

/* ---- Contact us / review tabs (public) --------------------------------------- */
.ct-lead { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; max-width: 62ch; }
.ct-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.ct-row { display: flex; gap: 16px; flex-wrap: wrap; }
.ct-row .ct-field { flex: 1 1 240px; min-width: 0; }
.ct-field { display: flex; flex-direction: column; gap: 6px; }
.ct-field label { font-size: 13px; font-weight: 700; color: var(--text); }
.ct-field .req { color: var(--coral); }
.ct-field input, .ct-field textarea { border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
  font-size: 14.5px; font-family: inherit; background: #fff; color: var(--text); }
.ct-field textarea { resize: vertical; min-height: 120px; }
.ct-field small { font-size: 12px; }
.ct-foot { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--muted); }

/* ---- Contact messages (CS + admin) ------------------------------------------- */
.cm-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.cm-filters input[type=search] { flex: 1 1 260px; min-width: 0; border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 13px; font-size: 14px; font-family: inherit; }
.cm-filters select { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 14px; background: #fff; }
.cm-filters .btn-sm-outline.active { background: var(--coral); color: #fff; border-color: var(--coral); }
.cm-card { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.cm-card.cm-new { border-left-color: var(--coral); }
.cm-card.cm-in_progress { border-left-color: #f0940a; }
.cm-card.cm-closed { border-left-color: var(--gold); opacity: .78; }
.cm-top { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.cm-who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.cm-who strong { font-size: 15px; }
.cm-phone { color: var(--muted); font-size: 13px; }
.cm-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.cm-status { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--border); color: var(--text); white-space: nowrap; }
.cm-status-new { background: var(--coral-light); color: var(--coral-dark-text); }
.cm-status-in_progress { background: #fdf3e3; color: #85560d; }
.cm-status-closed { background: var(--gold-light); color: var(--gold); }
.cm-body { white-space: pre-wrap; font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; }
.cm-notes, .cm-notes-sm { background: var(--bg); border-radius: 9px; padding: 9px 12px;
  font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.cm-notes-sm { margin-top: 8px; font-size: 12px; white-space: pre-wrap; }
.cm-handled { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.cm-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cm-actions input[type=text] { flex: 1 1 220px; min-width: 0; border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 11px; font-size: 13px; font-family: inherit; }
/* The message is what an agent is on this screen to read, and it was the narrowest column
   in the table -- narrower than Phone -- because eight columns shared the width and only
   this one was allowed to wrap. It gets a floor now; the table scrolls instead. */
/* pre-wrap belongs on the text, NOT on the cell. On the cell it also preserved the template's
   own indentation, so every message began eight spaces in while its wrapped lines sat flush
   left -- a column that looked mis-aligned because it was. */
.cm-cell { min-width: 320px; max-width: 460px; font-size: 13.5px; }
.cm-msg { white-space: pre-wrap; }
.nowrap { white-space: nowrap; }

/* ---- home page "Talk to us": contact / review tabs --------------------------- */
.hx-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.hx-tab { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s; }
.hx-tab:hover { color: var(--coral); }
.hx-tab.active { color: var(--coral); border-bottom-color: var(--coral); }
.hx-tab:focus-visible { outline: 3px solid rgba(47,128,237,.35); outline-offset: -3px; border-radius: 6px; }
.hx-panel { display: none; }
.hx-panel.active { display: block; }
.hx-form { max-width: none; gap: 13px; }
.hx-form .ct-field textarea { min-height: 96px; }
@media (prefers-reduced-motion: reduce) { .hx-tab { transition: none; } }

/* ---- shared "consult" card: contact/help form, same look as the public landing ---------- */
.consult { display: grid; grid-template-columns: .8fr 1.3fr; border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 31, 61, .14); margin: 32px 0; background: #fff; }
.consult-side { background: linear-gradient(160deg, var(--navy), var(--navy-2)); color: #fff; padding: 40px 36px; }
.consult-side .ck { display: inline-block; background: var(--coral); color: var(--navy); font-size: 12px;
  font-weight: 700; border-radius: 999px; padding: 5px 12px; margin-bottom: 16px; }
.consult-side h2 { color: #fff; font-family: var(--font-head); font-size: 28px; margin-bottom: 10px; font-weight: 800; }
.consult-side p { color: #C9D5EC; font-size: 14.5px; line-height: 1.6; }
.consult-side ul { list-style: none; margin-top: 20px; display: grid; gap: 10px; padding: 0; }
.consult-side ul li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: #DCE4F2; }
.consult-side ul li i { width: 20px; height: 20px; border-radius: 50%; background: var(--coral); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex: none; }
.consult-form { padding: 32px 34px; }
.consult-foot { margin-top: 4px; }
.side-contact { margin-top: 26px; display: grid; gap: 10px; }
.side-contact a { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: #fff; }
.side-contact .ic { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.12);
  display: grid; place-items: center; color: var(--coral); flex: none; }
.reassure { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.cd-consult-page { padding: 40px 5% 60px; }
.rv-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cd-consult-page .consult { margin: 0; max-width: 1040px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) { .consult { grid-template-columns: 1fr; margin: 20px 0; } .consult-form { padding: 26px; } .consult-side { padding: 30px 26px; } }

/* Shared site footer CSS lives in footer.css (loaded on every page, including the standalone
   landing which does not load this stylesheet) so the design is identical everywhere. */

/* a spent carousel arrow: still there so the control does not jump, clearly inert */
.carousel-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }
.carousel-arrow:disabled:hover { background: white; color: var(--navy); border-color: var(--border); }

/* Contact us button under the help-centre footer line */
.hc-foot .hc-contact-btn { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; }

/* keep an anchored section clear of the sticky navbar */
#talk-to-us { scroll-margin-top: 86px; }

/* ---- searchable dropdowns (user, CS and admin) -------------------------------- */
.ss { position: relative; display: block; min-width: 0; }
.ss .ss-native {           /* kept for form submission, never shown */
  position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden;
}
.ss-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 13px; font-family: inherit; font-size: 14px; color: var(--text);
  cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s;
}
.ss-btn:hover { border-color: #a9c8ea; }
.ss.is-open .ss-btn { border-color: var(--coral); box-shadow: 0 0 0 3.5px rgba(47,128,237,0.14); }
.ss-btn:focus-visible { outline: 3px solid rgba(47,128,237,.4); outline-offset: 1px; }
.ss-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-label.is-empty { color: var(--muted); }
.ss-caret { font-size: 11px; color: var(--muted); flex: 0 0 auto; transition: transform .15s; }
.ss.is-open .ss-caret { transform: rotate(180deg); }
.ss-disabled .ss-btn { background: #f4f6f9; color: var(--muted); cursor: not-allowed; }

/* Fixed, and moved to <body> while open (see searchselect.js). Absolutely positioned it was
   clipped by any ancestor that scrolls -- the contact rows on the CS post form, a dialog with its
   own scroll box -- so the list appeared cut off inside the card instead of floating over it.
   searchselect.js sets top/left/width; everything here is just the panel's own skin. */
.ss-pop {
  position: fixed; z-index: 4000;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 46px rgba(12,35,64,.22); overflow: hidden; min-width: 200px;
}
/* nothing inside a card should be able to scroll the page sideways */
.admin-main, .hc-split, .hc-faqs, .hc-faq { max-width: 100%; }
/* Laid out with flex rather than an absolute icon over a padded input: a global
   input-padding rule was winning over padding-left here and sliding the placeholder
   underneath the magnifier. Flex siblings cannot overlap whatever the padding says. */
.ss-search { padding: 9px; border-bottom: 1px solid var(--border); }
.ss-search-in {
  display: flex; align-items: center; gap: 9px; background: #fff;
  border: 1px solid var(--border); border-radius: 8px; padding: 0 11px;
}
.ss-search-in:focus-within { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(47,128,237,.12); }
.ss-search-in i { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
/* specific enough to beat the generic input padding rule earlier in this file */
.ss-pop .ss-search-in input,
.ss-pop .ss-search-in input:focus {
  flex: 1 1 auto; min-width: 0; width: auto;
  border: 0; outline: none; background: transparent; box-shadow: none;
  padding: 9px 0; font-size: 13.5px; font-family: inherit; color: var(--text);
}
.ss-list { max-height: 240px; overflow-y: auto; padding: 5px; }
.ss-opt {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px;
  font-size: 13.5px; cursor: pointer; color: var(--text);
}
.ss-opt:hover, .ss-opt.is-cursor { background: var(--coral-light); }
.ss-opt.is-on { font-weight: 600; }
.ss-opt.is-off { opacity: .45; cursor: not-allowed; }
.ss-txt { flex: 1 1 auto; min-width: 0; }
.ss-tick { color: var(--coral); font-size: 12px; }
.ss-box {
  flex: 0 0 17px; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--border); display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-size: 9px; background: #fff;
}
.ss-opt.is-on .ss-box { background: var(--coral); border-color: var(--coral); }
.ss-opt:not(.is-on) .ss-box i { visibility: hidden; }
.ss-none { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ss-btn, .ss-caret { transition: none; } }

/* ---- Modify trip: a sectioned sheet rather than one long form ------------------ */
.et-box { max-width: 780px; width: 100%; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: min(92vh, 900px); }
#editTripModal { overflow-y: auto; }
/* The <form> sits between .et-box and .et-body, so the height cap on the box never
   reached the scrolling area: a block-level form just grows to fit its content. Making
   the form a flex column too passes the constraint down, and min-height:0 lets the
   body shrink below its content so overflow-y:auto finally takes effect. */
#editTripForm { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.et-body { flex: 1 1 auto; min-height: 0; }
.et-head, .et-foot { flex: 0 0 auto; }
.et-head { display: flex; align-items: flex-start; gap: 16px; padding: 24px 26px 20px;
  background: linear-gradient(180deg, var(--coral-light), #fff); border-bottom: 1px solid var(--border); }
.et-head-txt { flex: 1 1 auto; min-width: 0; }
.et-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.et-head h2 { font-size: 22px; margin: 7px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-head p { font-size: 13px; color: var(--muted); margin: 0; }
.et-close { flex: 0 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  width: 34px; height: 34px; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; }
.et-close:hover { color: #c0392b; border-color: #f2c9c4; }
.et-body { padding: 20px 26px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.et-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; background: #fff; }
.et-card-h { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.et-card-h i { color: var(--coral); font-size: 12px; }
.et-hint { font-size: 12.5px; color: var(--muted); margin: -6px 0 14px; line-height: 1.5; }
#etTravellersRows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
#etTravellersRows .tv-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: #fbfbfc; }
#etTravellersRows .tv-card:only-child .tv-x { display: none; }
.et-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.et-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.et-field.et-wide { grid-column: 1 / -1; }
.et-field > label { font-size: 12.5px; font-weight: 700; color: var(--text); }
.et-field input[type=text], .et-field input[type=date], .et-field textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px;
  font-size: 14px; font-family: inherit; background: #fff; }
.et-field textarea { resize: vertical; }
.et-field select { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px;
  font-size: 14px; font-family: inherit; background: #fff; }
.et-field input[type=number] { width: 100%; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 13px; font-size: 14px; font-family: inherit; background: #fff; }
.et-agerow { display: flex; gap: 8px; }
.et-field .et-flex { flex-direction: row; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  color: var(--muted); cursor: pointer; margin-top: 2px; }
.et-field .et-flex input { width: auto; }
.et-toggles { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.et-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.et-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.et-sw { width: 38px; height: 21px; border-radius: 999px; background: var(--border); position: relative; transition: background .15s; flex: 0 0 38px; }
.et-sw::after { content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.et-toggle input:checked + .et-sw { background: var(--coral); }
.et-toggle input:checked + .et-sw::after { transform: translateX(17px); }
.et-toggle input:focus-visible + .et-sw { outline: 3px solid rgba(47,128,237,.4); outline-offset: 2px; }
.et-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 26px;
  border-top: 1px solid var(--border); background: #fbfcfe; }
@media (max-width: 640px) {
  .et-grid { grid-template-columns: 1fr; }
  .et-head, .et-body, .et-foot { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .et-sw, .et-sw::after { transition: none; } }

/* ---- admin Help: category chips + per-category question editor ---------------- */
.hc-chipbar { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.hc-chipbar-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit;
  padding: 8px 13px; border-radius: 999px; background: #fff;
  border: 1.5px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.hc-chip i { font-size: 11px; color: var(--coral); }
.hc-chip:hover { border-color: var(--coral); }
.hc-chip.is-on { background: var(--coral); border-color: var(--coral); color: #fff; }
.hc-chip.is-on i { color: #fff; }
.hc-chip:focus-visible { outline: 3px solid rgba(47,128,237,.4); outline-offset: 2px; }
.hc-chip-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--border); color: var(--text); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.hc-chip.is-on .hc-chip-n { background: rgba(255,255,255,.25); color: #fff; }

.hc-split { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; margin-top: 14px; }
.hc-side { display: flex; flex-direction: column; gap: 10px; align-self: start; position: sticky; top: 84px; }
.hc-side-btn { width: 100%; justify-content: center; }
.hc-side-note { margin: 2px 0 0; line-height: 1.45; }
.hc-reset { margin-top: 6px; background: none; border: 0; padding: 6px 0; font-family: inherit;
  font-size: 12.5px; color: var(--muted); text-decoration: underline; cursor: pointer; text-align: left; }
.hc-reset:hover { color: #c0392b; }
.hc-empty-q { text-align: center; padding: 34px 16px; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 12px; }
.hc-empty-q i { font-size: 22px; opacity: .5; display: block; margin-bottom: 10px; }
.hc-empty-q p { margin: 0; font-size: 13.5px; }
@media (max-width: 860px) {
  .hc-split { grid-template-columns: 1fr; }
  .hc-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .hc-side-btn { width: auto; flex: 1 1 auto; }
  .hc-side-note { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .hc-chip { transition: none; } }

/* icon glyph inside a searchable dropdown option / button */
.ss-ico { flex: 0 0 auto; width: 15px; text-align: center; color: var(--coral); font-size: 12px; }
.ss-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ss-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* narrow screens: stack the category fields instead of squeezing them */
@media (max-width: 900px) {
  .hc-row { grid-template-columns: 34px minmax(0, 1fr) 34px; grid-template-areas:
      "handle title del" "handle icon del" "handle blurb del"; row-gap: 8px; }
  .hc-row .hc-handle { grid-area: handle; align-self: start; }
  .hc-row .hc-title { grid-area: title; }
  .hc-row .ss { grid-area: icon; }
  .hc-row .hc-blurb { grid-area: blurb; }
  .hc-row .hc-del { grid-area: del; align-self: start; }
}

/* admin User Voices: same tab pattern as the home page, but the tabs are links here */
.vc-tabs { margin-bottom: 22px; }
.vc-tabs a.hx-tab { text-decoration: none; flex: 0 1 auto; padding-left: 22px; padding-right: 22px; }
.vt-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--coral); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.vc-note { margin: 0 0 16px; }
.cm-filters .muted a { color: var(--coral); }

/* status actions in the admin User Voices table */
.vc-act { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-act .btn-sm-outline { padding: 5px 10px; font-size: 11.5px; white-space: nowrap; }

/* Which leg a match is about. Only rendered when the post has more than one leg, so a
   plain one-way match stays uncluttered. */
.leg-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; margin: 0 4px 0 2px;
  background: #eef4ff; border: 1px solid #d3e3fb; color: #23507e;
  font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.leg-chip i { font-size: 10px; }
.leg-chip-them { background: #f4f0ff; border-color: #e0d7fa; color: #5b3fa8; margin-left: 0; }

/* ---- "N matches" split button: the caret lists the post's legs ----------------
   Only built when a post has more than one leg, so a one-way card is unchanged. */
.mt-split { position: relative; display: inline-flex; }
.mt-split .mt-main { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.mt-caret {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding-left: 8px; padding-right: 8px; display: inline-flex; align-items: center;
}
.mt-caret i { font-size: 10px; transition: transform .15s; }
.mt-split.is-open .mt-caret i { transform: rotate(180deg); }
.mt-legmenu {
  position: fixed; z-index: 1200; min-width: 232px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 5px;
  box-shadow: 0 14px 34px rgba(16, 40, 74, .16);
}
.mt-legrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; font-family: inherit; text-align: left;
}
.mt-legrow:hover { background: #eef4ff; }
.mt-leg-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mt-leg-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.mt-leg-route { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.mt-leg-n {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #1c6b45;
  background: #e6f6ee; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.mt-legrow.is-empty .mt-leg-n { color: var(--muted); background: #f0f3f7; }

/* ---- leg selector inside the matches panel ---------------------------------- */
.mb-legs {
  display: flex; flex-wrap: wrap; gap: 7px; flex: 0 0 auto;
  padding: 2px 20px 12px; margin-bottom: 8px; border-bottom: 1px solid #eef2f7;
}
.mb-legchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 999px; cursor: pointer; font-family: inherit;
  background: #fff; border: 1.5px solid var(--border); color: var(--navy);
  transition: border-color .15s, background .15s, color .15s;
}
.mb-legchip:hover { border-color: #9dc3f0; }
.mb-legchip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.mb-legchip-t { font-size: 12px; font-weight: 700; white-space: nowrap; }
.mb-legchip-s { font-size: 11.5px; opacity: .72; white-space: nowrap; }
.mb-legchip-n {
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px;
  background: #eef4ff; color: #23507e;
}
.mb-legchip.is-on .mb-legchip-n { background: rgba(255, 255, 255, .22); color: #fff; }

/* ===========================================================================
   TRIP CARD v2 — six scan items, fixed height, details one tap away.
   Tokens hang off the app's existing variables so an admin colour theme still
   recolours the card; the literals are the fallbacks from the design spec.
   =========================================================================== */
.trip-card {
  --tc-blue: var(--coral, #2f80ed);
  --tc-blue-tint: #eef5fd;
  --tc-blue-border: #bcd6f3;
  --tc-navy: var(--navy, #0f2340);
  --tc-cta: var(--l-cta, #f0940a);
  --tc-cta-dark: var(--l-cta-dark, #cf7c05);
  --tc-green: var(--gold, #199f7e);
  --tc-green-tint: var(--gold-light, #e7f7f4);
  --tc-amber: #f0940a;
  --tc-amber-tint: #fdf3e2;
  --tc-amber-text: #8a5a00;
  --tc-line: #e3eefb;
  --tc-mute: #7d94b5;
}

/* Cards size to their content — no fixed height, no filler. .tc-body grows so the footer
   still sits flush at the bottom, which keeps footers level across a row (grid stretch)
   without forcing a tall empty gap on a sparse post. */
.trip-card {
  position: relative;
  border: 1px solid var(--tc-line);
  border-radius: 16px;
  cursor: pointer;
  outline: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.tc-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.trip-card:hover { border-color: var(--tc-blue-border); }
.trip-card:focus-visible { box-shadow: 0 0 0 3px rgba(47, 128, 237, .32); }
.trip-card.is-detailed {
  border-color: var(--tc-blue);
  box-shadow: 0 0 0 2px rgba(47, 128, 237, .28), 0 16px 40px rgba(15, 35, 64, .14);
}

/* a post that matches one of the viewer's own trips — flagged while browsing everyone's trips */
.trip-card.tc-mine-match { border-color: #199f7e;
  box-shadow: 0 0 0 2px rgba(25, 159, 126, .16), 0 10px 26px rgba(15, 35, 64, .08); }
.tc-matchflag {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(90deg, #199f7e, #2fbf9a); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .01em; padding: 6px 14px;
}
.tc-matchflag i { font-size: 12px; }
.tc-matchflag b { margin-left: auto; font-weight: 800; background: rgba(255, 255, 255, .22);
  padding: 1px 8px; border-radius: 999px; white-space: nowrap; }

/* 1 · role band — who this is, before a word is read */
.tc-band { height: 6px; background: var(--tc-blue); }
.trip-card.tc-offering_help .tc-band { background: var(--tc-green); }
.trip-card.tc-seeking_help  .tc-band { background: var(--tc-amber); }
.trip-card.tc-open          .tc-band { background: var(--tc-blue); }

/* 2 · header row — role chip left, departure pill right; chips never break mid-word */
.tc-head { display: flex; align-items: center; gap: 6px; padding: 12px 16px 0; flex-wrap: wrap; }
.tc-rolechip, .tc-status, .tc-when { white-space: nowrap; }
.tc-rolechip {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--tc-blue-tint); color: #23507e;
}
.trip-card.tc-offering_help .tc-rolechip { background: var(--tc-green-tint); color: #10725a; }
.trip-card.tc-seeking_help  .tc-rolechip { background: var(--tc-amber-tint); color: var(--tc-amber-text); }
.tc-status {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; background: #f0f3f7; color: var(--tc-mute);
}
.tc-when {
  margin-left: auto; font-size: 11.5px; font-weight: 700; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; background: #f2f5f9; color: var(--tc-mute);
}
.tc-when.is-soon { background: var(--tc-amber-tint); color: var(--tc-amber-text); }
.tc-when.is-past { opacity: .65; }

/* 3 · route block — one compact line for every trip type; a badge marks a round trip or
   an N-stop itinerary, and the flight symbol reveals the full breakdown on hover. */
.tc-route { padding: 12px 16px 0; }
.tc-path { position: relative; }
/* each flight symbol is its own hover spot */
.tc-flight-hot { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  cursor: help; padding: 2px; border-radius: 7px; outline: none; }
.tc-flight-hot:hover i.fa-plane, .tc-flight-hot:focus-visible i.fa-plane { color: var(--tc-cta); transform: scale(1.15); }
.tc-flight-hot i.fa-plane { transition: transform .12s, color .12s; }
.tc-flight-hot:focus-visible { box-shadow: 0 0 0 3px rgba(47,128,237,.28); }
/* the trip-type badge sits in its own centered row below the route, so it never overlaps
   the info line (date / flight pills) beneath it */
.tc-badgerow { display: flex; justify-content: center; padding: 8px 16px 0; }
.tc-rbadge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #23507e; background: var(--tc-blue-tint); border-radius: 999px; padding: 3px 10px;
}
.tc-rbadge i { font-size: 9px; }

/* the floating flight-details tooltip (one element, positioned by JS on <body>, so it uses
   root colours — the .tc-* vars only exist inside a card): a small card with a navy header
   and an icon-led body — route, flight number, date. */
.rt-tip {
  position: fixed; z-index: 1400; min-width: 190px; max-width: 300px;
  background: #fff; border: 1px solid #e3eefb; border-radius: 14px;
  box-shadow: 0 18px 46px rgba(15, 35, 64, .24); overflow: hidden;
}
.rt-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--navy, #0f2340);
}
.rt-head i { color: #7fb0e6; }
.rt-body { padding: 11px 14px 13px; display: grid; gap: 6px; }
.rt-route {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-size: 17px; font-weight: 800; color: var(--navy, #0f2340);
}
.rt-route i { font-size: 12px; color: var(--coral, #2f80ed); }
.rt-sub { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #4a6080; }
.rt-sub i { font-size: 11px; color: #7d94b5; width: 13px; text-align: center; }

/* 4 · date, then flight — one to a row so "flexible" or a long airline never forces an
   awkward wrap, and the two facts always line up the same way. */
.tc-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 16px 0; }
.tc-inforow { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.tc-flextag {
  flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--tc-amber-text); background: var(--tc-amber-tint); padding: 3px 8px; border-radius: 999px;
}
.tc-metapill {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px;
  background: #f2f5f9; color: #3a5170; max-width: 100%;
}
.tc-metapill.tc-flight-hot { cursor: help; }
.tc-metapill.tc-flight-hot:hover { background: var(--tc-blue-border); }
.tc-mp-more { font-size: 9px; opacity: .55; margin-left: 1px; }
.tc-metapill i { font-size: 11px; opacity: .85; }
.tc-metapill span, .tc-metapill { overflow: hidden; text-overflow: ellipsis; }
.tc-metapill.is-flight { background: var(--tc-blue-tint); color: #23507e; }
.tc-metapill.is-flight i { color: var(--tc-blue); opacity: 1; }

.tc-who {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: #eef1f6; color: #3a5170; white-space: nowrap;
}
.tc-who i { font-size: 10px; color: var(--tc-mute); }
.tc-fact {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--tc-blue-tint); color: #23507e; border: 1px solid var(--tc-blue-border);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.tc-tags.tcf-need .tc-fact {
  background: var(--tc-amber-tint); color: var(--tc-amber-text); border-color: #f3ddb4;
}
.tc-more {
  font-size: 11.5px; font-weight: 700; color: var(--tc-blue);
  background: none; border: 0; padding: 2px; cursor: pointer; font-family: inherit;
}
.tc-more:hover { text-decoration: underline; }

/* the trip-shape line under the route: "via DOH · JFK · 2 stops" / "Round trip · returns …" */
.tc-via {
  display: flex; align-items: center; gap: 7px; padding: 8px 16px 0;
  font-size: 12px; font-weight: 600; color: var(--tc-mute); min-width: 0;
}
.tc-via i { font-size: 11px; color: var(--tc-blue); }
.tc-via-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-stops {
  margin-left: auto; flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: #23507e; background: var(--tc-blue-tint);
  padding: 3px 9px; border-radius: 999px;
}

/* practical facts, in fixed rows: date + flight, then who/languages */
.tc-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 16px 0; }
.tc-tagicon { display: inline-flex; align-items: center; color: var(--tc-mute); font-size: 12px; margin-right: 1px; }
.tc-fact-more { background: #eef1f6; color: #3a5170; border-color: #dfe6ef; }

/* the poster's own words — two lines, to make the card a person not a table row */
.tc-msg {
  margin: 10px 16px 0; padding-left: 11px; border-left: 3px solid var(--tc-blue-border);
  font-size: 12.5px; line-height: 1.5; color: #4a6080; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* multi-stop tooltip: one row per leg */
.rt-multi { gap: 0; }
.rt-leg-row { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; border-top: 1px solid #eef2f7; }
.rt-leg-row:first-child { border-top: 0; }
.rt-leg-n { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--navy, #0f2340);
  color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; }
.rt-leg-main { display: grid; gap: 1px; min-width: 0; }
.rt-leg-route { font-family: var(--font-head); font-size: 14px; font-weight: 800; color: var(--navy, #0f2340); }
.rt-leg-route i { font-size: 10px; color: var(--coral, #2f80ed); }
.rt-leg-sub { font-size: 12px; color: #4a6080; }

/* footer — identity left, one action right; one tight row, sits flush under .tc-body */
.trip-card-footer { padding: 9px 14px 10px; margin-top: 10px; gap: 8px; flex-wrap: nowrap;
  border-top: 1px solid var(--tc-line); background: #fbfdff; }
.trip-card .trip-author { min-width: 0; font-size: 13px; }
.trip-card .trip-author i { font-size: 24px; }
.trip-card .trip-author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-card .tc-actions { flex: 0 0 auto; }
.tc-actions { display: flex; align-items: center; gap: 8px; }
.tc-details {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 4px 2px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--tc-blue);
}
.tc-details i { font-size: 10px; transition: transform .15s; }
.trip-card:hover .tc-details { color: var(--coral-dark, #1f5fc0); }
.trip-card:hover .tc-details i { transform: translateX(2px); }

/* one action per card, always orange, always in the same place */
.connect-btn {
  background: var(--tc-cta); color: #fff; border: 0; border-radius: 999px;
  padding: 8px 18px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background .15s, transform .15s;
}
.connect-btn:hover { background: var(--tc-cta-dark); transform: translateY(-1px); }

/* ===== details panel (desktop popup / mobile bottom sheet) ================= */
.td-scrim {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(15, 35, 64, .45);
}
.td-panel {
  position: fixed; z-index: 1310; width: 360px; max-height: calc(100vh - 24px);
  overflow-y: auto; background: #fff; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 35, 64, .24);
  padding: 18px 20px 20px;
  opacity: 0; transition: opacity .16s ease, transform .16s ease;
}
.td-panel.is-in { opacity: 1; transform: none; }
.td-panel[data-side="left"]  { transform: translateX(-6px); }
.td-panel[data-side="right"] { transform: translateX(6px); }
.td-arrow {
  position: absolute; width: 12px; height: 12px; background: #fff; transform: rotate(45deg);
}
.td-panel[data-side="left"]  .td-arrow { left: -6px; box-shadow: -2px 2px 4px rgba(15,35,64,.06); }
.td-panel[data-side="right"] .td-arrow { right: -6px; box-shadow: 2px -2px 4px rgba(15,35,64,.06); }
.td-panel[data-side="none"]  .td-arrow { display: none; }
.td-grip { display: none; }

.td-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--muted, #4a6080); padding: 2px 6px;
}
.td-close:hover { color: var(--navy, #0f2340); }

.td-head h3 {
  font-family: var(--font-head); font-size: 18px; font-weight: 800;
  color: var(--navy, #0f2340); margin: 0 26px 3px 0; line-height: 1.3;
}
.td-head h3 span { color: #2f80ed; }
.td-by { margin: 0 0 14px; font-size: 12.5px; color: #7d94b5; }

.td-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
  padding: 12px 0; border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7;
}
.td-fact { min-width: 0; }
.td-fact small {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #7d94b5; margin-bottom: 3px;
}
.td-fact strong { font-size: 13px; font-weight: 700; color: var(--navy, #0f2340); }
.td-fact strong i { color: #2f80ed; margin-right: 5px; }
.td-consent { font-size: 11px; font-weight: 500; color: #7d94b5; margin-left: 4px; }

.td-block { padding-top: 14px; }
.td-block h4 {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #7d94b5; margin: 0 0 7px;
}
.td-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.td-chips span {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: #eef5fd; color: #23507e; border: 1px solid #bcd6f3;
}
.td-chips.td-need span { background: #fdf3e2; color: #8a5a00; border-color: #f3ddb4; }

.td-legs { display: flex; flex-direction: column; gap: 7px; }
.td-leg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.td-legn {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%;
  background: #2f80ed; color: #fff; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.td-legr { font-weight: 700; color: var(--navy, #0f2340); }
.td-legd, .td-lega { color: #7d94b5; font-size: 11.5px; }

/* Per-person travellers in the details popup — one companion for the whole group */
.td-travellers { display: flex; flex-direction: column; gap: 8px; }
.td-trav { border: 1px solid #e3ebf5; border-radius: 10px; padding: 9px 12px; background: #f8fbff; }
.td-trav-h { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--navy, #0f2340); }
.td-trav-h i { color: #2f80ed; font-size: 11px; }
.td-trav-meta { color: #7d94b5; font-size: 11.5px; font-weight: 600; margin-left: auto; }
.td-trav-needs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.td-trav-needs span { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: #fdf3e2; color: #8a5a00; border: 1px solid #f3ddb4; }

.td-note {
  margin: 0; padding: 11px 13px; border-radius: 12px;
  background: #f4f9ff; color: #3d5673; font-size: 13px; font-style: italic;
  line-height: 1.6; white-space: pre-line;
}

.td-actions { display: flex; gap: 9px; padding-top: 18px; }
.td-btn { flex: 1 1 0; justify-content: center; padding: 11px 14px; font-size: 13.5px; }
.td-cta {
  background: var(--l-cta, #f0940a); color: #fff; border: 0; border-radius: 999px;
  font-weight: 700; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.td-cta:hover { background: var(--l-cta-dark, #cf7c05); }
.btn-outline-danger {
  background: #fff; color: #c0392b; border: 1.5px solid #f0c4be; border-radius: 999px;
  font-weight: 700; cursor: pointer; font-family: inherit;
}
.btn-outline-danger:hover { background: #fdf1ef; border-color: #e79c92; }

/* ----- mobile: the same content as a bottom sheet ------------------------- */
@media (max-width: 860px), (pointer: coarse) {
  .td-panel.is-sheet {
    left: 0 !important; right: 0; top: auto !important; bottom: 0;
    width: auto; max-height: 86vh; border-radius: 20px 20px 0 0;
    padding: 8px 18px 0; display: flex; flex-direction: column;
    transform: translateY(14px);
  }
  .td-panel.is-sheet.is-in { transform: none; }
  .td-panel.is-sheet .td-arrow { display: none; }
  .td-panel.is-sheet .td-grip {
    display: block; flex: 0 0 auto; width: 40px; height: 4px; border-radius: 999px;
    background: #d7e0ea; margin: 4px auto 10px;
  }
  .td-panel.is-sheet .td-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 8px;
  }
  /* thumb-height and always reachable, whatever the note's length */
  .td-panel.is-sheet .td-actions {
    position: sticky; bottom: 0; background: #fff; padding: 12px 0 16px;
    border-top: 1px solid #eef2f7; margin-top: 4px;
  }
  .results-grid .trip-card, .carousel-track .trip-card { min-height: 296px; }
  .tc-route .tc-port strong { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .trip-card, .td-panel, .tc-details i, .connect-btn { transition: none; }
}
/* cards rendered inside the matches panel are illustrations, not doors */
.modal-overlay .trip-card { cursor: default; }
.modal-overlay .trip-card:hover { border-color: var(--tc-line); transform: none; }

/* The sheet's pinned action row lands exactly where the chat bubble floats, so the bubble
   steps aside while a sheet is open rather than sitting on top of Connect. */
body:has(.td-panel.is-sheet:not([hidden])) .chat-toggle { opacity: 0; pointer-events: none; }

/* Save sits with the theme it saves; Delete stays a quiet text button beside it. */
.th-foot { justify-content: space-between; align-items: center; gap: 10px; }
.th-save { padding: 8px 16px; font-size: 12.5px; white-space: nowrap; }

/* The chips now head the Questions card, so they lead the section instead of closing
   the one above it. */
.admin-card .hc-chipbar { margin-top: 0; padding-top: 0; border-top: 0;
  padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px dashed var(--border); }

/* Save belongs to the theme you have chosen: it appears on that card only, so there is
   never a row of identical Save buttons competing for the same click. The form is shared,
   so it still commits every card's colours -- picking a theme cannot discard an edit. */
.th-save { display: none; }
.th-card.is-active .th-save { display: inline-flex; }
.th-card:not(.is-active) .th-foot { justify-content: flex-start; }

.th-picks { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.th-default {
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: #eef2f7; color: #6b7f9a; border: 1px solid #dde5ee;
}

/* Live and DEFAULT stack in the card's top-right. They were the same width and 5px apart,
   which read as one chip sitting on another; the marker is now visibly a caption to the
   pill above it rather than a second pill. */
.th-picks { gap: 7px; flex: 0 0 auto; }
.th-default {
  font-size: 9px; letter-spacing: .12em; padding: 1px 7px;
  background: transparent; border: 0; color: #93a6bd;
  align-self: flex-end; margin-right: 3px;
}

/* User Voices: one table for both consoles and both tabs. */
.vc-table .vc-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vc-table .vc-act .btn-sm-outline { padding: 5px 10px; font-size: 11.5px; white-space: nowrap; }
.vc-note-in { flex: 1 1 130px; min-width: 110px; border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 9px; font-size: 12px; font-family: inherit; }
.vc-stars { color: #f0940a; font-size: 14px; letter-spacing: 1px; }
.vc-star-off { color: #dbe4ee; }
.cm-filters { margin-bottom: 18px; }

/* ---- collapsible staff sidebar -------------------------------------------------
   Admin and CS share one shell, so the rail collapses the same way in both. The width
   is a variable because the navy background is painted by a gradient on the wrapper --
   collapsing has to move the colour and the column together or they come apart. */
.rail-toggle {
  position: absolute; top: 16px; left: 14px;   /* left corner: the one spot that never moves when the rail resizes */
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 0;
  background: rgba(255,255,255,.07); border: 0; border-radius: 8px;
  color: rgba(255,255,255,.65); cursor: pointer; font-size: 12px;
  transition: background .15s, color .15s, transform .18s;
}
.rail-toggle:hover { background: rgba(255,255,255,.16); color: #fff; }
.admin-page.is-rail .rail-toggle { background: rgba(255,255,255,.14); color: #fff; }  /* same ☰ symbol, just lit while collapsed */

.admin-page.is-rail { --railw: 68px; }
.admin-page.is-rail .admin-sidebar h3 { opacity: 0; pointer-events: none; height: 0; padding: 0; overflow: hidden; }
.admin-page.is-rail .admin-sidebar nav a { justify-content: center; padding: 12px 0; margin-right: 8px; }
.admin-page.is-rail .admin-sidebar nav a span { display: none; }
.admin-page.is-rail .admin-sidebar nav a i { font-size: 16px; }
.admin-page.is-rail .admin-sidebar nav { padding-top: 40px; }    /* keep icons clear of the pinned toggle */
.admin-sidebar nav a i { flex: 0 0 auto; width: 18px; text-align: center; }

/* How many rows on that screen nobody has opened yet. The menu named the screens but never
   said which of them had anything in it, so the only way to learn that three enquiries had
   arrived was to open the inbox -- four of them, now that it is split by product.
   The figure while the rail is open; a bare dot once it collapses to icons, where there is no
   room for a number and the only question left is whether there is anything in there. */
.admin-sidebar nav a { position: relative; }
.admin-sidebar nav a .nav-badge {
  margin-left: auto; flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  /* a fixed red, not var(--coral): the staff colour themes remap --coral (to blue on the
     default staff theme), which made the "red dot" that was asked for render blue */
  border-radius: 10px; background: #e5484d; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}
/* "!" -- something to do now (the half-hourly check), not a count */
.admin-sidebar nav a .nav-badge[data-mark] { background: var(--ui-warn, #d97706); }
.admin-page.is-rail .admin-sidebar nav a .nav-badge {
  display: block;                        /* the rule above hides every span in the rail */
  position: absolute; top: 7px; right: 12px; margin: 0;
  min-width: 9px; width: 9px; height: 9px; padding: 0;
  border-radius: 50%; font-size: 0; overflow: hidden;
}

/* Below the breakpoint the toggle becomes the dropdown menu button, pinned to the bar's right. */
@media (max-width: 900px) {
  .rail-toggle { position: static; margin: 0 14px 0 auto; width: 38px; height: 38px; font-size: 15px; }
  /* the rail (icon-only) state is meaningless on a phone dropdown — always show full labels */
  .admin-page.is-rail { --railw: 260px; }
  .admin-page.is-rail .admin-sidebar nav a { justify-content: flex-start; padding: 14px 18px; }
  .admin-page.is-rail .admin-sidebar nav a span { display: inline; }
  .admin-page.is-rail .admin-sidebar nav a i { font-size: 15px; }
  /* the labels are back, so the count fits again */
  .admin-page.is-rail .admin-sidebar nav a .nav-badge {
    display: inline-flex;
    position: static; margin-left: auto; min-width: 20px; width: auto; height: 20px;
    padding: 0 6px; border-radius: 10px; font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-page, .rail-toggle { transition: none; }
}

/* ---- All Posts: journey type and match count ---------------------------------- */
.tt-chip {
  display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: #eef2f7; color: #6b7f9a; border: 1px solid #dde5ee; white-space: nowrap;
}
.tt-round_trip { background: #eef5fd; color: #23507e; border-color: #bcd6f3; }
.tt-multi_destination { background: #f4f0ff; color: #5b3fa8; border-color: #e0d7fa; }
.m-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px;
  padding: 3px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  background: #f0f3f7; color: var(--muted);
}
.m-count.hi { background: #e6f6ee; color: #1c6b45; }
.m-count.mid { background: #fdf3e2; color: #8a5a00; }
.m-count.lo { background: #eef5fd; color: #23507e; }
.row-actions .btn-sm.primary { background: var(--coral); color: #fff; border-color: var(--coral); }
.row-actions .btn-sm.primary:hover { background: var(--coral-dark); }

/* ---- CS post detail: title, chips, legs, tabs -------------------------------- */
.pd-title { margin-bottom: 12px; }
.pd-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pd-chip-gap { flex: 1 1 auto; }
.pd-legs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.pd-leg {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px;
}
.pd-leg-t { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pd-leg-r { font-weight: 800; color: var(--navy); }
.pd-leg-d, .pd-leg-f { color: var(--muted); }
.pd-tabs { margin-bottom: 18px; }
.pd-panel { display: none; }
.pd-panel.active { display: block; }

/* the other side of a match, named, in the timeline */
.tl-match {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 3px 10px; margin-left: 4px; border-radius: 999px;
  background: #eef5fd; border: 1px solid #bcd6f3; color: #23507e; font-size: 12.5px;
}
.tl-match:hover { background: #e2eefc; }
.tl-match i { font-size: 11px; }
.tl-route, .tl-when { color: #4a6080; }
.tl-score { font-weight: 800; color: #1c6b45; }
.tl-legs { margin-left: 6px; font-size: 11.5px; color: var(--muted); }

/* copy button beside a contact value */
.cp-val { display: inline-flex; align-items: center; gap: 6px; }
.cp-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 7px;
  background: #fff; color: var(--muted); cursor: pointer; font-size: 12px;
  transition: color .15s, border-color .15s, background .15s;
}
.cp-copy:hover { color: var(--coral); border-color: var(--coral); background: var(--coral-light); }
.cp-copy.is-done { color: #1c6b45; border-color: #b6e3cd; background: #e6f6ee; }
.pd-legs-sm { margin: 10px 0 4px; gap: 7px; }
.pd-legs-sm .pd-leg { padding: 5px 10px; font-size: 11.5px; }

/* ---- CS post detail: leg chips as filters + the match summary ------------------ */
.pd-leg { cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, color .15s; }
.pd-leg:hover { border-color: #9dc3f0; }
.pd-leg.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.pd-leg.is-on .pd-leg-t, .pd-leg.is-on .pd-leg-d, .pd-leg.is-on .pd-leg-f,
.pd-leg.is-on .pd-leg-r { color: #fff; }
.pd-leg-n {
  font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px;
  background: #eef4ff; color: #23507e;
}
.pd-leg.is-on .pd-leg-n { background: rgba(255,255,255,.22); color: #fff; }

.pm-list { list-style: none; margin: 4px 0 0; padding: 0; }
.pm-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 2px;
  border-bottom: 1px solid #eef2f7; font-size: 13px;
}
.pm-row:last-of-type { border-bottom: 0; }
.pm-score {
  flex: 0 0 auto; min-width: 46px; text-align: center; padding: 3px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 800; background: #f0f3f7; color: var(--muted);
}
.pm-score.hi { background: #e6f6ee; color: #1c6b45; }
.pm-score.mid { background: #fdf3e2; color: #8a5a00; }
.pm-score.lo { background: #eef5fd; color: #23507e; }
.pm-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-route { color: var(--muted); }
.pm-leg {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; background: #f4f0ff; color: #5b3fa8;
}
.pm-when { flex: 0 0 auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.pm-empty { padding: 14px 2px; }
/* Size-only modifier: safe to combine with .btn-primary because it sets no colours. */
.btn-compact { padding: 7px 14px; font-size: 12.5px; }
/* status actions sit inline with Edit in the post header */
.pd-statusform { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pd-statusform select {
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px;
  font-size: 12px; font-family: inherit; background: #fff;
}

/* A definition list in a narrow column: the value track could not shrink below its
   content, so long routes spilled past the card edge. Both tracks may now shrink, and
   values wrap instead of overflowing. */
.dl { grid-template-columns: minmax(0, 130px) minmax(0, 1fr); }
.dl dt, .dl dd { min-width: 0; overflow-wrap: anywhere; }
.match-left .dl { grid-template-columns: minmax(0, 92px) minmax(0, 1fr); }
.match-left .pd-legs-sm { flex-direction: column; align-items: stretch; }
.match-left .pd-leg { justify-content: space-between; }
.tt-wrap { margin-top: 5px; }

/* ---- match queue: one block per waiting post --------------------------------- */
.mq-group { border: 1px solid var(--border); border-radius: 14px; background: #fff;
  margin-bottom: 18px; overflow: hidden; box-shadow: var(--shadow); }
.mq-head { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 13px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
.mq-who, .mq-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13.5px; }
.mq-route { font-weight: 700; color: var(--navy); }
.mq-n { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  background: #fdf3e2; color: #8a5a00; white-space: nowrap; }
.mq-table { margin: 0; }
.mq-table thead th { background: #fff; }

/* ---- CS search field ----------------------------------------------------------
   One pill holding the icon, the field and the clear button, so nothing can overlap
   the placeholder the way a padded input with an absolutely positioned icon does. */
.cs-search {
  flex: 1 1 280px; min-width: 220px;
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 0 14px; height: 40px;
  transition: border-color .15s, box-shadow .15s;
}
.cs-search:focus-within { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(47,128,237,.14); }
.cs-search > i { color: var(--muted); font-size: 13px; flex: 0 0 auto; }
.cs-search input[type=search] {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none;
  font-size: 14px; font-family: inherit; color: var(--text); padding: 0;
}
.cs-search input[type=search]::-webkit-search-cancel-button { display: none; }
.cs-search-x {
  flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: #eef2f7; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.cs-search-x:hover { background: #e2e8f0; color: var(--navy); }
.cs-spin { flex: 0 0 auto; color: var(--coral); font-size: 12px; }
.cs-count { margin-bottom: 12px; }
[aria-busy="true"] { opacity: .55; transition: opacity .12s; }
/* A username is a link wherever CS shows one, and it has to look like one at rest --
   the app's global `a { color: inherit }` otherwise renders it identically to the text
   beside it, so the only way to discover it was to hover and hope. */
.person-link { color: var(--coral); text-decoration: none; }
.person-link .person-name,
td[data-label="Person"] > .person-link {
  color: var(--coral); font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(47, 128, 237, .38);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.person-link:hover, .person-link:hover strong { color: var(--coral-dark); }
.person-link:hover .person-name,
td[data-label="Person"] > .person-link:hover {
  color: var(--coral-dark);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
.person-link:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 4px; }

/* ---- modify form: trip type + multi-stop legs -------------------------------- */
.et-types { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.et-type {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: #fff; border: 1.5px solid var(--border); color: var(--muted);
  transition: border-color .15s, background .15s, color .15s;
}
.et-type input { position: absolute; opacity: 0; width: 0; height: 0; }
.et-type:hover { border-color: #9dc3f0; }
.et-type:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.et-type:focus-within { outline: 3px solid rgba(47,128,237,.3); outline-offset: 2px; }

.et-legs-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.et-leg { display: flex; align-items: flex-start; gap: 10px; }
.et-leg-n {
  flex: 0 0 auto; width: 24px; height: 24px; margin-top: 8px; border-radius: 50%;
  background: var(--coral); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.et-leg-fields { flex: 1 1 auto; min-width: 0; display: grid; gap: 8px;
  grid-template-columns: 1.2fr 1.2fr 1fr 1fr .7fr; }
.et-leg-fields input {
  min-width: 0; border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 11px; font-size: 13.5px; font-family: inherit;
}
.et-leg-fields input:focus { outline: none; border-color: var(--coral); }
.et-leg-x {
  flex: 0 0 auto; margin-top: 6px; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--muted); cursor: pointer;
}
.et-leg-x:hover { color: #c0392b; border-color: #f0c4be; background: #fdf1ef; }
.et-legs-hint { font-size: 12.5px; margin-top: 8px; }
@media (max-width: 780px) { .et-leg-fields { grid-template-columns: 1fr 1fr; } }
/* On a phone the two-up leg fields get too narrow to read - stack them. */
@media (max-width: 480px) { .et-leg-fields { grid-template-columns: 1fr; } }


/* ===== Trip filter panel (templates/_trip_filters.html) =====
   Always open (no toggle). Two layouts from the same markup: a vertical sidebar card on
   /trips, and a full-width horizontal bar on the dashboard (via `.tf-bar`). */
.tf-panel { background: white; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; }
.tf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tf-head strong { font-size: 16px; display: inline-flex; align-items: center; gap: 8px; }
.tf-head-r { display: inline-flex; align-items: center; gap: 14px; }
.tf-reset { background: none; border: none; color: var(--coral); cursor: pointer; font-size: 13px; font-weight: 600; }
.tf-reset:hover { text-decoration: underline; }
/* The caret and tap-to-collapse only exist on small screens (see the ≤900px block below). */
.tf-caret { display: none; color: var(--muted); font-size: 13px; transition: transform 0.2s; }
.tf-field { margin-top: 4px; }
.tf-label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.tf-clearwrap { position: relative; }
.tf-clearwrap .tf-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 13px; pointer-events: none; }
.tf-input { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 30px 10px 32px;
  font-size: 14px; background: white; outline: none; transition: border-color 0.2s; }
.tf-input:focus { border-color: var(--coral); }
input.tf-input[type=date] { padding-left: 12px; }
select.tf-select { padding: 10px 12px; cursor: pointer; }
.tf-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none;
  background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.tf-clear:hover { color: var(--coral); }
.tf-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 3px 0; cursor: pointer; }
.tf-check { align-items: flex-start; }
.tf-check small, .tf-hint { color: var(--muted); font-size: 12px; display: block; }
.tf-hint { margin-top: 4px; }
.tf-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.tf-panel input[type=range] { width: 100%; accent-color: var(--coral); }
.tf-panel input[type=range]:disabled { opacity: 0.45; }
.tf-search { width: 100%; margin-top: 16px; justify-content: center; }

/* /trips: the panel is a sticky left sidebar with the results grid beside it */
.all-trips-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.trips-side { position: sticky; top: 90px; }
@media (max-width: 900px) {
  .all-trips-layout { grid-template-columns: 1fr; }
  .trips-side { position: static; }
}

/* Dashboard "My trips": a full-width horizontal filter bar above the results. */
.tf-bar { margin-bottom: 18px; }
.tf-bar .tf-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px 22px; align-items: start; }
.tf-bar .tf-head { grid-column: 1 / -1; margin-bottom: 2px; }
.tf-bar .tf-field { margin-top: 0; }
.tf-bar .tf-label { margin-top: 0; }
.tf-bar .tf-field--action { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.tf-bar .tf-search { width: auto; margin-top: 4px; padding-left: 30px; padding-right: 30px; }
@media (max-width: 560px) { .tf-bar .tf-field--action { justify-content: stretch; } }

/* Dashboard "Desis on Move": filter as a sticky left sidebar, results to its right
   (same shape as /trips). The results grid sizes to the narrower main column. */
.dash-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }
.dash-side { position: sticky; top: 88px; }
.dash-main .results-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 900px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-side { position: static; }
}

/* On phones/small tablets the always-open filter panel is very tall and buries the results,
   so it collapses to just its header; tapping the header (the caret) expands it. Applies to
   every instance of the panel — /trips sidebar, dashboard "Desis on Move" sidebar and the
   "My trips" bar. */
@media (max-width: 900px) {
  .tf-head { cursor: pointer; }
  .tf-caret { display: inline-block; }
  .tf-panel.tf-open .tf-caret { transform: rotate(180deg); }
  .tf-panel:not(.tf-open) > .tf-field { display: none; }
  .tf-panel:not(.tf-open) .tf-head { margin-bottom: 0; }
}

/* ============ CS MATCHES SCREEN (cmx) — redesigned: boarding-pass post + clean match cards */
.cmx-layout { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.cmx-left { position: sticky; top: 84px; }
.cmx-post { background: #fff; border: 1px solid #e3eefb; border-radius: 16px; box-shadow: 0 10px 26px rgba(15,35,64,0.07); overflow: hidden; }
.cmx-band { height: 6px; background: #2f80ed; }
.cmx-seeking_help .cmx-band { background: #f0940a; }
.cmx-offering_help .cmx-band { background: #199f7e; }
.cmx-post-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px 0; }
.cmx-days { font-size: 11px; font-weight: 800; color: #7d94b5; white-space: nowrap; }
.cmx-days.hot { color: #b45309; background: #fdf3e2; border-radius: 999px; padding: 3px 9px; }
.cmx-route { font-size: 17px; font-weight: 800; color: #0f2340; padding: 10px 16px 2px; line-height: 1.3; }
.cmx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 10px 16px 16px; }
.cmx-facts small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #7d94b5; margin-bottom: 1px; }
.cmx-facts strong { font-size: 12.5px; font-weight: 600; color: #22364f; }
.cmx-facts .wide { grid-column: 1 / -1; }
.cmx-warn { padding: 0 16px 14px; font-size: 12.5px; }
.cmx-card { display: flex; background: #fff; border: 1px solid #e3eefb; border-radius: 16px; box-shadow: 0 10px 26px rgba(15,35,64,0.06); margin-bottom: 16px; overflow: hidden; }
.cmx-score { flex: 0 0 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-right: 2px dashed #dbe7f5; }
.cmx-score strong { font-size: 22px; font-weight: 800; }
.cmx-score small { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; opacity: 0.75; }
.cmx-score.hi { background: #e7f7ee; color: #0c7a43; }
.cmx-score.mid { background: #fdf3e2; color: #8a5a00; }
.cmx-score.lo { background: #fdeaea; color: #b91c1c; }
.cmx-body { flex: 1; min-width: 0; padding: 14px 16px; }
.cmx-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmx-ci { margin-left: auto; }
.cmx-meta { font-size: 12.5px; color: #7d94b5; margin: 4px 0 8px; }
.cmx-crit { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; margin-bottom: 12px; }
.cmx-crit .ok { color: #0c7a43; }
.cmx-crit .no { color: #b91c1c; }
.cmx-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.cmx-side { border: 1px solid #eef3fa; background: #fbfdff; border-radius: 12px; padding: 10px 12px; }
.cmx-side-top { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin-bottom: 6px; flex-wrap: wrap; }
.cmx-side-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; margin-bottom: 8px; }
.cmx-side-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cmx-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid #eef3fa; padding-top: 12px; }
.cmx-dismissed li { font-size: 12px; color: #7d94b5; padding: 4px 0; }
@media (max-width: 1100px) { .cmx-layout { grid-template-columns: 1fr; } .cmx-left { position: static; } }
@media (max-width: 700px) {
  .cmx-sides { grid-template-columns: 1fr; }
  .cmx-card { flex-direction: column; }
  .cmx-score { flex-direction: row; padding: 8px; border-right: 0; border-bottom: 2px dashed #dbe7f5; }
}

/* leg tabs on the CS matches screen + trimmed post-page matches + activity search */
.cmx-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cmx-tab { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #e3eefb; border-radius: 12px; padding: 9px 14px; cursor: pointer; font-size: 12.5px; color: #33517a; }
.cmx-tab small { color: #7d94b5; }
.cmx-tab-n { background: #eef5fd; color: #1f5fc0; font-weight: 800; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; }
.cmx-tab.is-on { border-color: #2f80ed; background: #eaf4fd; box-shadow: 0 4px 14px rgba(47,128,237,0.14); }
.cmx-tab.is-on .cmx-tab-n { background: #2f80ed; color: #fff; }
.pm-more { font-size: 12px; padding-top: 8px; }
.act-search { border: 1px solid #d7e6f6; border-radius: 10px; padding: 9px 12px; font-size: 13px; min-width: 260px; background: #fbfdff; }
#actPager { margin-top: 12px; }
/* the hidden attribute must beat display:flex/grid set by classes */
.cmx-card[hidden], .pm-row[hidden], .timeline li[hidden], .cmx-tabs[hidden] { display: none !important; }

/* ============ ADMIN BLOG EDITOR (bf) ============ */
.bf-layout { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.bf-card { margin-bottom: 16px; }
.bf-title { width: 100%; border: none; outline: none; font-size: 26px; font-weight: 800; color: #0f2340; font-family: 'Poppins', 'Inter', sans-serif; padding: 2px 0 6px; background: transparent; }
.bf-title::placeholder { color: #b9cbe1; }
.bf-toolbar { display: flex; flex-wrap: wrap; gap: 3px; border: 1px solid #d7e6f6; border-bottom: 0; border-radius: 12px 12px 0 0; padding: 7px 9px; background: #fbfdff; }
.bf-toolbar button { border: 0; background: none; min-width: 30px; height: 30px; border-radius: 7px; font-size: 12.5px; font-weight: 800; color: #33517a; cursor: pointer; }
.bf-toolbar button:hover { background: #eaf4fd; color: #1f5fc0; }
.bf-sep { width: 1px; background: #e3eefb; margin: 4px 5px; }
.bf-editor { border: 1px solid #d7e6f6; border-radius: 0 0 12px 12px; min-height: 420px; padding: 18px 20px; font-size: 15px; line-height: 1.75; color: #22364f; outline: none; background: #fff; }
.bf-editor:focus { border-color: #2f80ed; box-shadow: 0 0 0 3px rgba(47,128,237,0.1); }
.bf-editor:empty::before { content: attr(data-placeholder); color: #b9cbe1; pointer-events: none; }
.bf-editor h2 { font-size: 22px; margin: 18px 0 8px; color: #0f2340; }
.bf-editor h3 { font-size: 17px; margin: 14px 0 6px; color: #0f2340; }
.bf-editor blockquote { border-left: 3px solid #2f80ed; background: #f4f9ff; padding: 8px 14px; margin: 10px 0; border-radius: 0 10px 10px 0; color: #44607f; }
.bf-editor img { max-width: 100%; border-radius: 12px; }
.bf-editor a { color: #1f5fc0; text-decoration: underline; }
.bf-editor ul, .bf-editor ol { padding-left: 24px; margin: 8px 0; }
.bf-foot { display: flex; justify-content: space-between; font-size: 12px; padding-top: 8px; }
.bf-h { font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #33517a; display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.bf-h i { color: var(--coral); }
.bf-toggle { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.bf-toggle input { margin-top: 3px; }
.bf-toggle strong { display: block; font-size: 13px; }
.bf-toggle small { color: #7d94b5; font-size: 11.5px; line-height: 1.4; display: block; }
@media (max-width: 1000px) { .bf-layout { grid-template-columns: 1fr; } }

/* ===== Blog post content: the public page and the studio editor (blog_engine's blocks) ===== */
.blog-post-content h2 { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--navy); margin: 34px 0 12px; line-height: 1.3; }
.blog-post-content h3 { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--navy); margin: 24px 0 8px; line-height: 1.35; }
.blog-post-content p { margin: 0 0 14px; }
.blog-post-content ul, .blog-post-content ol { padding-left: 24px; margin: 0 0 16px; }
.blog-post-content ul { list-style: disc; }          /* the site's reset takes markers off every list */
.blog-post-content ol { list-style: decimal; }
.blog-post-content li > ul { list-style: circle; }
.blog-post-content li { margin-bottom: 6px; line-height: 1.7; color: var(--muted); }
.blog-post-content li > ul, .blog-post-content li > ol { margin: 6px 0 0; }
.blog-post-content a { color: #1f5fc0; text-decoration: underline; text-underline-offset: 2px; }
.blog-post-content blockquote { margin: 22px 0; padding: 6px 0 6px 20px; border-left: 4px solid var(--coral); font-size: 19px; font-style: italic; color: var(--navy); line-height: 1.6; }
.blog-post-content .blog-note { display: block; margin: 20px 0; padding: 14px 18px 14px 46px; background: #fff7e6; border: 1px solid #f5dfb0; border-radius: 12px; color: #6b4a07; position: relative; line-height: 1.7; }
.blog-post-content .blog-note::before { content: "\f0eb"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 17px; top: 14px; color: var(--coral); }
.blog-post-content figure.blog-img { margin: 24px 0; }
/* a picture at its own size -- never stretched past it (a small one would blur), never wider than the column, never
   taller than most of a screen (a portrait poster); centred. A wide or full-width one fills its width (blog-blocks.css). */
.blog-post-content figure.blog-img img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(720px, 82vh); margin: 0 auto; object-fit: contain; border-radius: 12px; }
.blog-post-content figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.5; }
.blog-post-content .blog-cta-wrap { margin: 26px 0; text-align: center; }
.blog-post-content a.blog-cta { display: inline-block; padding: 13px 26px; border-radius: 999px; background: var(--coral); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(245,166,35,0.3); }
.blog-post-content a.blog-cta:hover { background: var(--coral-dark); }
.blog-post-content hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }
.blog-post-content table { display: block; overflow-x: auto; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; line-height: 1.55; max-width: 100%; }
.blog-post-content th, .blog-post-content td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; }
.blog-post-content th { background: #f7f4ee; color: var(--navy); font-weight: 700; }
.blog-preview-bar { position: sticky; top: 0; z-index: 50; background: #1f5fc0; color: #fff; text-align: center; padding: 9px 16px; font-size: 13.5px; font-weight: 600; }
@media (max-width: 640px) {
  .blog-post-content h2 { font-size: 21px; }
  .blog-post-content blockquote { font-size: 17px; }
}

/* ===== Blog studio: import and editor (admin) ===== */
.bs-steps { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.bs-steps li { background: #fff; border: 1px solid #e3eefb; border-radius: 14px; padding: 14px 16px; position: relative; }
.bs-steps strong { display: block; color: #0f2340; font-size: 14px; margin: 6px 0 4px; }
.bs-steps p { font-size: 12.5px; color: #5b7090; line-height: 1.5; margin: 0 0 10px; }
.bs-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eaf4fd; color: #1f5fc0; font-weight: 800; font-size: 13px; }
.bs-upload { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; }
.bs-adv { grid-column: 1 / -1; font-size: 13px; color: #33517a; }
.bs-adv summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.bs-adv[open] summary { margin-bottom: 10px; }
.bs-adv-format summary { cursor: pointer; list-style: none; }
.bs-adv-format summary::-webkit-details-marker { display: none; }
.bs-adv-format summary h2 { display: inline; }
.bs-adv-format summary::before { content: "\25B8"; color: #7d94b5; margin-right: 8px; }
.bs-adv-format[open] summary::before { content: "\25BE"; }
.bs-adv-format[open] summary { margin-bottom: 10px; }
.bs-drop { display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; align-items: center; border: 2px dashed #cfe0f4; border-radius: 12px; padding: 14px; cursor: pointer; background: #fbfdff; }
.bs-drop:hover, .bs-drop.has-files { border-color: #2f80ed; background: #f4f9ff; }
.bs-drop > i { font-size: 24px; color: #2f80ed; grid-row: span 2; }
.bs-drop strong { display: block; font-size: 13.5px; color: #0f2340; }
.bs-drop small { display: block; font-size: 11.5px; color: #7d94b5; }
.bs-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bs-picked { grid-column: 2; font-size: 12px; color: #33517a; font-style: normal; overflow-wrap: anywhere; }
.bs-upload > .btn { align-self: center; white-space: nowrap; }
.bs-results h2, .bs-rules h2 { font-size: 17px; color: #0f2340; margin: 0 0 10px; }
.bs-results { margin: 22px 0; }
.bs-result { margin-bottom: 12px; }
.bs-result.is-failed { border-color: #f5c2c2; }
.bs-r-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bs-r-head strong { font-size: 15px; color: #0f2340; }
.bs-r-head small { flex-basis: 100%; }
.bs-r-error { color: #b42318; margin: 8px 0 0; font-size: 13.5px; }
.bs-r-sum, .bs-r-notes { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.bs-r-sum .is-bad { color: #b42318; } .bs-r-sum .is-good { color: #15803d; } .bs-r-sum .is-warn { color: #a16207; }
.bs-r-notes li { color: #44607f; padding-left: 16px; position: relative; }
.bs-r-notes li::before { content: "•"; position: absolute; left: 4px; color: #9fb4cf; }
.bs-r-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bs-pic-notes ul, .bs-list { padding-left: 18px; font-size: 13px; color: #44607f; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.bs-rules { margin-top: 16px; }
.bs-rules code { background: #f4f8fd; border: 1px solid #e3eefb; border-radius: 6px; padding: 2px 6px; font-size: 12.5px; white-space: normal; overflow-wrap: anywhere; }
.bs-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.bs-dot.is-bad { background: #dc2626; } .bs-dot.is-warn { background: #d97706; }
.bs-head-links { display: flex; gap: 8px; flex-wrap: wrap; }
.bs-slug { display: flex; align-items: center; flex-wrap: wrap; font-size: 12px; margin-bottom: 12px; gap: 2px; }
.bs-slug input { border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; font-size: 12px; color: #1f5fc0; font-weight: 600; min-width: 220px; flex: 1; background: transparent; }
.bs-slug input:hover, .bs-slug input:focus { border-color: #d7e6f6; background: #fff; outline: none; }
.bs-editor-wrap { position: relative; }
.bs-title { resize: none; overflow: hidden; display: block; line-height: 1.25; font-family: inherit; padding: 0; background: transparent; }
.bs-editor { font-size: 16px; line-height: 1.85; }
.bs-editor figure { cursor: pointer; outline-offset: 4px; border-radius: 12px; }
.bs-editor figure:hover, .bs-editor figure.is-picked { outline: 2px solid #2f80ed; }
.bs-editor figure.blog-img-missing { display: grid; place-items: center; min-height: 150px; background: repeating-linear-gradient(45deg, #fff7f5, #fff7f5 10px, #fff0ec 10px, #fff0ec 20px); border: 2px dashed #f0a291; color: #b42318; text-align: center; padding: 16px; }
.bs-editor figure.blog-img-missing::before { content: "Missing picture: " attr(data-file) " — click to upload it"; font-weight: 700; font-size: 14px; }
.bs-figpanel { position: absolute; left: 20px; right: 20px; z-index: 5; background: #fff; border: 1px solid #cfe0f4; border-radius: 12px; box-shadow: 0 14px 34px rgba(15,35,64,0.16); padding: 12px 14px; display: grid; gap: 8px; }
.bs-figpanel label { font-size: 12px; color: #33517a; font-weight: 600; display: grid; gap: 4px; }
.bs-figpanel input { border: 1px solid #d7e6f6; border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.bs-fp-missing { margin: 0; color: #b42318; font-size: 13px; }
.bs-fp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-figpanel[hidden], .bs-fp-missing[hidden], .bs-blocked[hidden], .bs-cover img[hidden], .bs-cover p[hidden] { display: none !important; }
.bs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-actions .btn { flex: 1 1 100%; justify-content: center; }
.bs-blocked { color: #b42318; font-size: 12.5px; margin: 10px 0 0; }
.bs-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; line-height: 1.45; }
.bs-checks li { display: grid; grid-template-columns: 16px 1fr; gap: 6px; }
.bs-checks i { margin-top: 2px; }
.bs-c-error { color: #b42318; } .bs-c-warn { color: #8a5a00; } .bs-c-ok { color: #15803d; }
.bs-summary, .bs-field input { width: 100%; border: 1px solid #d7e6f6; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13px; }
.bs-field { display: grid; gap: 4px; font-size: 12px; color: #33517a; font-weight: 600; margin-top: 10px; }
.bs-cover img { width: 100%; aspect-ratio: 1200 / 630; object-fit: contain; background: #eef2f6; border-radius: 10px; border: 1px solid #e3eefb; }
.bs-thumb img { aspect-ratio: 16 / 9; }
.bs-cover p { font-size: 12.5px; margin: 0; }
.bs-cover-actions { display: flex; gap: 8px; margin-top: 8px; }
.bs-cover-actions [hidden] { display: none; }
@media (max-width: 1100px) { .bs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .bs-upload { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bs-steps { grid-template-columns: 1fr; } }
/* The writing page (admin/blog_edit.html), like WordPress: a bar of tools that stays in view, the post
   as it will look, its settings beside it. The floating parts (the + on an empty line, the menu of
   blocks, the bar over a block, the link and picture panels) sit in .bs-editor-wrap. */
.bs-studio .bs-head { align-items: flex-end; }
.bs-studio .bs-head h1 { margin-bottom: 4px; }
.bs-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #5b7090; margin-bottom: 6px; }
.bs-back:hover { color: #1f5fc0; }
.bs-status { margin: 0; font-size: 12.5px; }
.bs-restore { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fdf3e2; border: 1px solid #f5dfb8; color: #8a5a00; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.bs-restore[hidden] { display: none; }
.bs-canvas { background: #fff; border: 1px solid #e3eefb; border-radius: 16px; box-shadow: var(--shadow); margin-bottom: 16px; }
.bs-bar { position: sticky; top: 68px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; background: rgba(251,253,255,0.97); border-bottom: 1px solid #e3eefb; border-radius: 16px 16px 0 0; }
.bs-bar .bf-toolbar { border: 0; padding: 0; background: none; border-radius: 0; gap: 2px; }
.bs-bar .bf-toolbar button.bs-add { background: #1f5fc0; color: #fff; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.bs-bar .bf-toolbar button.bs-add:hover { background: #174a97; color: #fff; }
.bs-bar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bs-bar-actions .btn-sm { padding: 7px 12px; }
.bs-bar-actions .btn.btn-sm { padding: 8px 18px; font-size: 13px; box-shadow: none; }
.bs-dirty { font-size: 12px; color: #a16207; white-space: nowrap; }
.bs-page { max-width: 760px; margin: 0 auto; padding: 34px 28px 10px; }
.bs-studio .bs-title { font-size: 34px; line-height: 1.2; font-family: var(--font-head); color: var(--navy); }
.bs-studio .bs-title, .bs-studio .bs-title:focus { border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent; margin-bottom: 6px; }
.bs-slug i { color: #9fb4cf; margin-right: 4px; }
.bs-editor.bf-editor { border: 0; border-radius: 0; padding: 6px 0 30px; min-height: 360px; box-shadow: none; }
.bs-editor p.bs-ph { position: relative; }
.bs-editor p.bs-ph::before { content: "Type / to choose a block, or just start writing"; position: absolute; left: 0; top: 0; color: #a9bad0; pointer-events: none; white-space: nowrap; }
.bs-editor th, .bs-editor td { min-width: 90px; height: 38px; }
.bs-editor hr { height: 18px; border: 0; margin: 22px 0; background: linear-gradient(var(--border), var(--border)) center / 100% 1px no-repeat; cursor: pointer; }
.bs-editor p.blog-cta-wrap { cursor: pointer; }
.bs-editor p.blog-cta-wrap:hover a { outline: 2px solid #2f80ed; outline-offset: 3px; }
.bs-editor figure.bs-uploading { display: grid; place-items: center; min-height: 140px; background: #f4f9ff; border: 2px dashed #cfe0f4; color: #33517a; font-size: 13.5px; cursor: progress; }
.bs-editor-wrap.is-drop .bs-editor { outline: 2px dashed #2f80ed; outline-offset: 10px; border-radius: 6px; background: #f8fbff; }
.bs-foot { padding: 10px 28px 14px; border-top: 1px solid #eef3fa; flex-wrap: wrap; gap: 6px 16px; }
.bs-foot kbd { font: inherit; font-size: 11px; background: #f4f8fd; border: 1px solid #dfe9f6; border-radius: 4px; padding: 0 4px; }

.bs-plus { position: absolute; z-index: 6; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #cfe0f4; background: #fff; color: #1f5fc0; cursor: pointer; box-shadow: 0 2px 8px rgba(15,35,64,0.08); }
.bs-plus:hover { background: #1f5fc0; color: #fff; border-color: #1f5fc0; }
.bs-menu { position: absolute; z-index: 40; width: 310px; max-width: 100%; max-height: 380px; display: flex; flex-direction: column; background: #fff; border: 1px solid #cfe0f4; border-radius: 12px; box-shadow: 0 16px 40px rgba(15,35,64,0.18); padding: 8px; }
.bs-menu-q { border: 1px solid #d7e6f6; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 6px; }
.bs-menu-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.bs-mi { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: #0f2340; }
.bs-mi > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #eef5fd; color: #1f5fc0; font-size: 14px; }
.bs-mi > i.is-small { font-size: 10.5px; }
.bs-mi b { display: block; font-size: 13px; }
.bs-mi small { display: block; font-size: 11.5px; color: #7d94b5; line-height: 1.35; }
.bs-mi.is-on, .bs-mi:hover { background: #eaf4fd; }
.bs-menu-none { margin: 6px; font-size: 12.5px; }
.bs-blockbar { position: absolute; z-index: 25; display: inline-flex; align-items: center; gap: 2px; background: #0f2340; color: #fff; border-radius: 9px; padding: 3px; box-shadow: 0 8px 20px rgba(15,35,64,0.25); }
.bs-bb-name { font-size: 11.5px; font-weight: 700; padding: 0 8px; color: #b9cbe1; white-space: nowrap; }
.bs-blockbar button { border: 0; background: none; color: #fff; height: 28px; min-width: 28px; padding: 0 7px; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.bs-blockbar button:hover { background: rgba(255,255,255,0.14); }
.bs-bb-table { display: inline-flex; gap: 2px; border-right: 1px solid rgba(255,255,255,0.2); margin-right: 2px; padding-right: 2px; }
.bs-pop { position: absolute; z-index: 45; width: 330px; max-width: 100%; background: #fff; border: 1px solid #cfe0f4; border-radius: 12px; box-shadow: 0 14px 34px rgba(15,35,64,0.18); padding: 12px 14px; display: grid; gap: 8px; }
.bs-pop label { font-size: 12px; color: #33517a; font-weight: 600; display: grid; gap: 4px; }
.bs-pop input { border: 1px solid #d7e6f6; border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.bs-pop-err { margin: 0; color: #b42318; font-size: 12px; }
.bs-pop-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-studio .bs-figpanel { right: auto; width: 440px; max-width: 100%; }
.bs-plus[hidden], .bs-menu[hidden], .bs-menu [hidden], .bs-blockbar[hidden], .bs-blockbar [hidden], .bs-pop[hidden], .bs-pop [hidden] { display: none !important; }

.bs-studio .bf-side { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 2px; }
.bs-state { font-size: 12.5px; color: #44607f; margin: 0 0 6px; line-height: 1.5; }
.bs-c-idle { color: #7d94b5; }
.bs-cover { cursor: pointer; border-radius: 10px; }
.bs-cover p { border: 2px dashed #cfe0f4; border-radius: 10px; padding: 18px 12px; text-align: center; background: #fbfdff; line-height: 1.5; }
.bs-cover p i { color: #2f80ed; font-size: 18px; display: block; margin-bottom: 4px; }
.bs-cover.is-drop p, .bs-cover.is-drop img { outline: 2px dashed #2f80ed; outline-offset: 2px; }
.bs-cover.is-busy { opacity: 0.55; cursor: progress; }
.bs-outline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.bs-outline li.is-h3 { padding-left: 14px; }
.bs-outline a { color: #33517a; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-outline a:hover { color: #1f5fc0; }
.bs-outline-none { font-size: 12.5px; margin: 0; }
.bs-outline-none[hidden] { display: none; }
@media (max-width: 1000px) { .bs-studio .bf-side { position: static; max-height: none; overflow: visible; } }
@media (max-width: 640px) { .bs-page { padding: 20px 14px 6px; } .bs-studio .bs-title { font-size: 26px; } .bs-foot { padding: 10px 14px; } .bs-bar-actions { margin-left: 0; } }

/* the writing guide on the import page: folded until it is asked for */
.bs-guide { margin-top: 18px; padding: 0; }
.bs-guide > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 16px 20px; }
.bs-guide > summary::-webkit-details-marker { display: none; }
.bs-guide-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff4d6; color: #a16207; font-size: 17px; }
.bs-guide > summary strong { display: block; font-size: 15px; color: #0f2340; }
.bs-guide > summary small { display: block; font-size: 12.5px; color: #5b7090; line-height: 1.45; }
.bs-guide-arrow { color: #7d94b5; transition: transform .15s; }
.bs-guide[open] .bs-guide-arrow { transform: rotate(180deg); }
.bs-guide-body { padding: 0 20px 20px; border-top: 1px solid #eef3fa; }
.bs-guide-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 2px; }
.bs-guide-nav a { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; background: #f4f8fd; border: 1px solid #e3eefb; color: #33517a; text-decoration: none; }
.bs-guide-nav a:hover { border-color: #2f80ed; color: #1f5fc0; }
.bs-guide-sec { padding-top: 18px; scroll-margin-top: 84px; }
.bs-guide-sec h2 { font-size: 16px; color: #0f2340; margin: 0 0 8px; }
.bs-guide .bs-adv-format { margin-top: 18px; padding: 14px 16px; border: 1px solid #e3eefb; border-radius: 12px; background: #fbfdff; }
.bs-guide .bs-adv-format summary h2 { font-size: 15px; }

/* featured-review toggle in the voices tables */
.vc-feat i { color: #c9d6e6; }
.vc-feat.is-on { background: #fdf3e2; border-color: #f0b45c; color: #8a5a00; }
.vc-feat.is-on i { color: #f0940a; }
.vc-feat:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===== Notifications management screen (admin + CS: _notifications_manager.html) ===== */
.nm-send { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 20px; }
.nm-send h2 { font-family: var(--font-head); font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.nm-send h2 i { color: var(--coral); }
.nm-send-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.nm-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.nm-field.nm-wide { grid-column: 1 / -1; }
.nm-field input, .nm-field select, .nm-field textarea { border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; font-size: 14px; font-family: inherit; font-weight: 400; color: var(--text); background: #fff; }
.nm-field input:focus, .nm-field select:focus, .nm-field textarea:focus { border-color: var(--coral); outline: none; }
.nm-field textarea { resize: vertical; }
.nm-field small { font-weight: 400; }
.nm-send-action { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; }
.nm-send-msg { font-size: 13px; font-weight: 600; }
.nm-send-msg.ok { color: #16794c; }
.nm-send-msg.err { color: #c0392b; }

.nm-filters { flex-wrap: wrap; align-items: center; gap: 8px; }
.nm-filters .nm-date { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nm-table tr.nm-unread { background: #f3f8ff; }
.nm-cat { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #eef2f7; color: #44546a; }
.nm-cat-match_alerts { background: #e7f7f4; color: #12795e; }
.nm-cat-match_intro { background: #eaf4fd; color: #23507e; }
.nm-cat-connection { background: #fef0e7; color: #9a4a12; }
.nm-cat-chat { background: #efeafd; color: #5a3fb0; }
.nm-cat-announcements { background: #fdf3e2; color: #8a5a00; }
.nm-cat-cs { background: #fde8ee; color: #a01f45; }
.nm-status { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.nm-status.is-unread { background: var(--coral); color: #fff; }
.nm-status.is-read { background: #e9eef4; color: #66748a; }
.nm-actions { white-space: nowrap; }
.nm-actions .btn-sm-outline { padding: 6px 10px; font-size: 12px; margin: 2px 0; }
.nm-link { font-size: 11.5px; color: var(--coral); word-break: break-all; }
@media (max-width: 720px) {
  .nm-send-grid { grid-template-columns: 1fr; }
  .nm-actions { display: flex; gap: 6px; }
}

/* ===== Match reports (User Voices → Reports tab + CS queue) ===== */
.stat-card.red { border-left-color: #dc2626; }
a.stat-card { text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
a.stat-card:hover { box-shadow: 0 8px 22px rgba(12,35,64,.12); transform: translateY(-1px); }
.vt-n-alert { background: #dc2626; color: #fff; }
.rp-table tr.rp-open { background: #fdf2f2; }
.rp-score { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #eaf4fd; color: #23507e; margin-left: 4px; }
.rp-note { min-width: 130px; }

/* ===== CS + Admin consoles: keep the prior blue/Inter utilitarian look =====
   The traveller-facing reskin (amber/navy + Fraunces/Jakarta) is applied via :root; the whole
   console lives inside .admin-page, so overriding the tokens + fonts here scopes it out cleanly. */
.admin-page {
  /* the console's blue comes from ui.css's tokens (one look); the second value is the same blue */
  --coral: var(--ui-primary, #1f6fd6); --coral-dark: var(--ui-primary-hover, #1a5bb3);
  --coral-light: var(--ui-primary-soft, #eaf3fe); --coral-dark-text: var(--ui-primary-hover, #1a5bb3);
  --accent: var(--ui-primary, #1f6fd6); --accent-light: var(--ui-primary-soft, #eaf3fe);
  --bg: #f4f9ff; --border: #d7e6f6; --text: #0f2340; --muted: #4a6080;
  --font-head: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif;
  font-family: var(--font-body); color: var(--text);
}
.admin-page .btn, .admin-page .btn-sm, .admin-page .btn-sm-outline { border-radius: 8px; }
.admin-page .btn-primary { color: #fff; }
.admin-page .btn-outline-coral { color: var(--coral); border-color: var(--coral); }
.admin-page .btn-outline-coral:hover { background: var(--coral); color: #fff; }

/* A primary action at list size. On its own the combination comes out blank: .btn-sm's white
   background is declared later in this file than .btn-primary's colour, and inside a console
   .btn-primary's label is white -- white on white. It reads as "primary" wherever it is used, so
   the fill is restored in both scopes rather than in the one screen that noticed. */
.btn-primary.btn-sm { background: var(--coral); border-color: var(--coral); color: var(--navy); }
.btn-primary.btn-sm:hover { background: var(--coral-dark); border-color: var(--coral-dark); color: var(--navy); }
.admin-page .btn-primary.btn-sm, .admin-page .btn-primary.btn-sm:hover { color: #fff; }

.phone-why { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; margin: -2px 0 6px; }

.btn.btn-danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn.btn-danger:hover { background: #991616; border-color: #991616; }
.btn.btn-danger:disabled { background: #e8b4b4; border-color: #e8b4b4; cursor: not-allowed; }
.bulk-select-bar { display: flex; align-items: center; gap: 12px; background: #fdeaea; border: 1px solid #f5c9c6; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: #8a2721; }
.bulk-select-bar strong { color: #b91c1c; }
.bulk-select-bar .btn-sm { margin-left: auto; }
/* admin hard delete (templates/admin/_hard_delete.html): the pick column and the trash button
   sit in tables built for other buttons, so they take those tables' sizes */
.hd-check, .hd-all { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
table.admin-table th.hd-pick, table.admin-table td.hd-pick { width: 18px; padding-right: 0; }
/* User Voices: the checkbox rides in the When cell, ahead of the date */
.vc-table .vc-pick { display: inline-block; margin-right: 8px; vertical-align: top; }
.vc-table th .hd-all { margin-right: 6px; }
.vc-table .vc-act .hd-del { padding: 5px 10px; font-size: 11.5px; }
/* an actions cell that gained a trash wraps it under the other buttons rather than pushing the
   table wider than the screen, where it would be cut off */
td.row-actions.hd-wrap { white-space: normal; }
/* a row's actions as symbols (the CS posts tables): a square each -- open, edit, delete -- named in its tooltip */
.ra-icons { text-align: right; }
.ra-icons .btn-sm, .tree-row .btn-sm.ra-open { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border-radius: 8px; font-size: 12.5px; vertical-align: middle; }
.ra-icons .btn-sm + .btn-sm { margin-left: 3px; }
/* the days to departure under the date, so the column stays narrow */
.dep-cell { white-space: nowrap; }
.dep-cell small, .m-cell small { display: block; }
.ra-icons .ra-open, .tree-row .ra-open { color: var(--coral); }
.ra-icons .ra-edit { color: var(--muted); }
.ra-icons .ra-edit:hover { color: var(--text); border-color: var(--text); }
.ra-icons .hd-del { background: #fff; }
.ra-icons .hd-del:hover { background: #dc2626; color: #fff; }
@media (max-width: 760px) { .admin-table.stack-mobile td.ra-icons { justify-content: flex-start; } }
td.row-actions.hd-wrap > * { margin-bottom: 4px; }

/* Faint "safer journeys together" illustration behind the signed-in post form (bottom-right,
   sits under the content thanks to z-index:-1 inside the section's own stacking context). */
.search-section { z-index: 0; }   /* no overflow:hidden — the form's suggestion dropdowns must be free to hang below */
.search-section::after { content: ""; position: absolute; right: 12px; bottom: 8px; width: min(520px, 60vw); aspect-ratio: 2043 / 770; background: url("../img/travelling_yourself_illustration.png") no-repeat right bottom / contain; opacity: .12; pointer-events: none; z-index: -1; }

/* ===== POSSIBLE DUPLICATE ===== */
/* Shown before a post is stored, on the traveller's form and in the CS console alike. It is a
   warning, never a refusal: the list explains which live post this resembles and why, and the
   confirm button posts anyway. Amber, not red -- posting again is allowed. */
.dup-modal .modal-box { max-width: 620px; text-align: left; }
.dup-lead { display: flex; gap: 12px; align-items: flex-start; background: var(--coral-light);
  border: 1px solid var(--coral); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.dup-lead i { color: var(--coral-dark); font-size: 19px; margin-top: 2px; }
.dup-lead p { margin: 0; color: var(--text); font-size: 14px; }
/* The all-clear, which only "Check eligibility" can produce. Green, because amber here would
   say "look at this" about an answer whose whole content is that there is nothing to look at. */
.dup-lead.dup-lead-ok { background: #e7f7f1; border-color: #16a34a; }
.dup-lead.dup-lead-ok i { color: #16a34a; }
.dup-list { display: grid; gap: 12px; max-height: 46vh; overflow-y: auto; margin-bottom: 18px; }
.dup-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--white); }
.dup-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dup-route { font-weight: 700; font-size: 15px; }
.dup-id { font-size: 12px; color: var(--muted); white-space: nowrap; }
.dup-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.dup-facts b { color: var(--text); font-weight: 600; }
.dup-why { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dup-why span { background: var(--coral-light); color: var(--coral-dark-text); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 600; }
.dup-card a.dup-open { font-size: 13px; font-weight: 600; color: var(--coral-dark-text);
  text-decoration: underline; display: inline-block; margin-top: 8px; }
.dup-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 560px) {
  .dup-card-top { flex-direction: column; }
  .dup-modal .modal-actions { flex-direction: column-reverse; }
  .dup-modal .modal-actions .btn { width: 100%; }
}

/* ===== POST FILTERS ===== */
/* A right-hand drawer shared by the CS posts list and the Admin listings page. Tokens only, so
   the consoles' blue theme under .admin-page applies automatically. */
.pf-btn { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--border);
  background: #fff; color: var(--text); border-radius: 8px; padding: 8px 14px; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap; }
.pf-btn:hover { border-color: var(--coral); color: var(--coral-dark-text); }
.pf-count { background: var(--coral); color: #fff; border-radius: 999px; min-width: 20px;
  padding: 1px 6px; font-size: 11px; text-align: center; }

.pf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.pf-chips-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--coral-light);
  border: 1px solid var(--coral); color: var(--text); border-radius: 999px; padding: 4px 6px 4px 12px;
  font-size: 12.5px; }
.pf-chip b { font-weight: 700; }
.pf-chip button { border: none; background: rgba(0,0,0,.06); color: inherit; cursor: pointer;
  width: 18px; height: 18px; line-height: 1; border-radius: 50%; font-size: 14px; }
.pf-chip button:hover { background: rgba(0,0,0,.16); }
.pf-clear-all { font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: underline; }

/* ---- the drawer ---- */
.pf-scrim { position: fixed; inset: 0; background: rgba(9,22,44,.45); z-index: 3400;
  opacity: 0; transition: opacity .22s ease; }
.pf-scrim.open { opacity: 1; }
.pf-drawer {
  /* Two columns of controls need about 560px before the labels start fighting the inputs;
     620 leaves the placeholders room to finish their sentence. */
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100%);
  display: flex; flex-direction: column; background: var(--bg); z-index: 3500;
  box-shadow: -24px 0 60px rgba(9,22,44,.28);
  transform: translateX(102%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.pf-drawer.open { transform: none; }
.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; background: #fff; border-bottom: 1px solid var(--border); }
.pf-head-t { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700;
  color: var(--text); }
.pf-head-t i { color: var(--coral); }
.pf-x { border: none; background: none; font-size: 26px; line-height: 1; color: var(--muted);
  cursor: pointer; padding: 0 4px; }
.pf-x:hover { color: var(--text); }
.pf-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px 20px; }

.pf-group { background: #fff; border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: 10px; overflow: hidden; }
.pf-group-h { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: none; border: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.pf-group-h span:first-child { flex: 1 1 auto; text-align: left; }
.pf-group-h i { font-size: 11px; color: var(--muted); transition: transform .18s; }
.pf-group.is-shut .pf-group-h i { transform: rotate(180deg); }
.pf-group.is-shut .pf-group-b { display: none; }
.pf-group-n { background: var(--coral); color: #fff; border-radius: 999px; min-width: 18px;
  padding: 0 6px; font-size: 11px; line-height: 17px; text-align: center; letter-spacing: 0; }
.pf-group-b { padding: 0 16px 16px; }
.pf-group-hint { margin: -2px 0 10px; }

/* auto-fit, so the same markup is two roomy columns in the drawer and one column on a phone
   without a second breakpoint deciding it */
.pf-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px 16px; }
.pf-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.pf-field.pf-wide { grid-column: 1 / -1; }
.pf-lbl { font-size: 12.5px; font-weight: 600; color: var(--text); }
.pf-hint { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 0; }
.pf-field input, .pf-field select, .pf-preset { width: 100%; border: 1.5px solid var(--border);
  border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 13.5px; background: #fff;
  color: var(--text); }
/* a placeholder that runs out of room should trail off, not be sliced mid-letter */
.pf-field input::placeholder { text-overflow: ellipsis; }
.pf-field input:focus, .pf-field select:focus { outline: 0; border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(245,166,35,.18); }
/* the two exact-date boxes only appear when "Exact dates…" is chosen */
/* stacked rather than side by side: a date input needs ~140px and a half-width column cannot
   give two of them that much */
.pf-dates { display: grid; gap: 8px; margin-top: 4px; }
.pf-dates label { display: grid; gap: 3px; }
.pf-dates span { font-size: 11.5px; color: var(--muted); font-weight: 600; }

.pf-foot { display: flex; gap: 10px; padding: 12px 16px; background: #fff;
  border-top: 1px solid var(--border); }
.pf-foot .btn { flex: 1 1 auto; justify-content: center; }
.pf-foot .btn-ghost { flex: 0 0 auto; }

@media (max-width: 640px) {
  .pf-drawer { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-drawer, .pf-scrim { transition: none; }
}

/* Which service a contact enquiry is about (one inbox, two front doors). */
.cm-topic { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
  font-weight: 700; white-space: nowrap; }
.cm-topic-companion { background: #EEF3FB; color: #29547f; border: 1px solid #d6e3f3; }
.cm-topic-insurance { background: #E9F6EF; color: #146C3A; border: 1px solid #bfe5cc; }
.cm-filter-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }

/* Insurance testimonials editor */
.ins-rev-table textarea, .ins-rev-table input { width: 100%; border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13.5px; }
.ins-rev-table td { vertical-align: top; }

/* Insurance page: reassurance line inputs */
.ins-assure-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; }
.ins-assure-rows input { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: 13.5px; }

/* Sahayak queue (CS + admin) */
.sk-asap { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #FDECEC; color: #8A1F1F; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.sk-queue .chip-new { background: #FFF3D6; color: #8a5a06; }
.sk-queue .chip-assigned { background: #E3EDFB; color: #29547f; }
.sk-queue .chip-completed { background: #E9F6EF; color: #146C3A; }
.sk-queue .chip-cancelled { background: #EEF0F3; color: #5B6579; }
.sk-assignee, .sk-cs-note { border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px;
  font: inherit; font-size: 13px; width: 100%; max-width: 190px; }
.sk-notes-row td { background: #FBFAF7; border-top: 0; }
.sk-note-fam { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.sk-note-cs { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.sk-note-cs .sk-cs-note { max-width: 520px; }
.sk-svc-table textarea, .sk-svc-table input { width: 100%; border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13.5px; }
.sk-svc-table td { vertical-align: top; }

/* ---- Saved views -------------------------------------------------------- */
/* A row of named shortcuts above a post listing, and the page that keeps them tidy. Built for
   staff who are not going to read a manual: every view says in plain words what it shows, and a
   rotate icon marks the ones whose dates move with the day. */
.sv-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 6px; padding: 10px 12px; background: var(--sand); border: 1px solid var(--border); border-radius: 12px; }
.sv-bar-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sv-bar-lbl .fa-bookmark { color: var(--coral); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.sv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1.5px solid var(--border); color: var(--text); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.sv-chip:hover { border-color: var(--coral); }
.sv-chip.on { border-color: var(--coral); background: var(--coral-light); color: var(--coral-dark-text); }
.sv-roll { color: #199f7e; font-size: 11px; }
.sv-shared { color: var(--muted); font-size: 11px; }
.sv-empty { flex: 1; font-size: 13px; color: var(--muted); }
.sv-bar-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sv-save { display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed var(--coral); background: #fff; color: var(--coral-dark-text); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.sv-save:hover { background: var(--coral-light); }
.sv-manage { font-size: 13px; color: var(--muted); text-decoration: underline; white-space: nowrap; }

/* the naming dialog, shown where the filters were just set */
.sv-dlg { position: fixed; inset: 0; z-index: 9998; background: rgba(15,31,61,.45); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; overflow-y: auto; }
.sv-dlg-in { width: 100%; max-width: 520px; background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 30px 70px rgba(15,31,61,.3); }
.sv-dlg-in h3 { margin: 0 0 12px; font-size: 20px; }
.sv-dlg-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.sv-sum-chip { background: var(--sand); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; color: var(--muted); }
.sv-sum-chip b { color: var(--text); }
.sv-dlg-lbl { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.sv-dlg-inp { width: 100%; min-height: 46px; border: 1.5px solid var(--border); border-radius: 10px; padding: 0 12px; font-size: 15px; }
.sv-dlg-check { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: 14px; cursor: pointer; }
.sv-dlg-check small { display: block; color: var(--muted); font-size: 12px; }
.sv-dlg-ft { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* the manage page */
.sv-page { max-width: 900px; margin: 0 auto; padding: 26px 5% 60px; }
.sv-head { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 26px; }
.sv-head h1 { margin: 0 0 6px; font-size: 26px; }
.sv-sub { margin: 0; color: var(--muted); font-size: 14px; max-width: 620px; line-height: 1.55; }
.sv-sec { margin-top: 30px; }
.sv-sec h2 { font-size: 17px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.sv-count { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--sand); border-radius: 999px; padding: 3px 10px; }
.sv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sv-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.sv-item-ord form { display: flex; flex-direction: column; gap: 2px; }
.sv-item-ord button { width: 26px; height: 22px; border: 1px solid var(--border); background: #fff; border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 10px; }
.sv-item-ord button:disabled { opacity: .35; cursor: default; }
.sv-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sv-item-name { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-item-reads { font-size: 13px; color: var(--muted); }
.sv-item-meta { font-size: 12px; color: #9aa4b5; }
.sv-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--sand); border-radius: 999px; padding: 3px 9px; }
.sv-item-acts { display: flex; align-items: center; gap: 8px; }
.sv-more { position: relative; }
.sv-more summary { list-style: none; cursor: pointer; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); }
.sv-more summary::-webkit-details-marker { display: none; }
.sv-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 44px rgba(15,31,61,.18); padding: 8px; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.sv-inline { display: flex; gap: 6px; }
.sv-inline input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 13px; }
.sv-more-menu .btn-sm { width: 100%; }
.sv-danger { color: #b42318; }
.sv-none { text-align: center; padding: 38px 20px; border: 1.5px dashed var(--border); border-radius: 14px; color: var(--muted); }
.sv-none .fa-bookmark { font-size: 26px; color: var(--coral); opacity: .5; }
.sv-none p { margin: 10px 0; }
.sv-none b { color: var(--text); }
@media (max-width: 700px) {
  .sv-bar { flex-direction: column; align-items: stretch; }
  .sv-bar-acts { margin-left: 0; }
  .sv-item { flex-wrap: wrap; }
  .sv-item-acts { width: 100%; justify-content: flex-end; }
}

/* Saved-view row actions: three buttons in a row rather than a popover menu. A <details> panel
   on a list row clipped against the row below it, and hid a rename behind two clicks. */
.sv-item-acts form { display: inline-flex; margin: 0; }
.sv-act { border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; }
.sv-act:hover { border-color: var(--coral); background: var(--coral-light); }
.sv-act.sv-danger { color: #b42318; }
.sv-act.sv-danger:hover { border-color: #b42318; background: #fef3f2; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* "New" for a few days after saving, so a colleague notices a view that was shared while they
   were away. It expires on its own -- see saved_filters.NEW_FOR_DAYS. */
.sv-new { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0b7a5f; background: #e7f7f4; border: 1px solid #b9e6da; border-radius: 999px; padding: 2px 7px; }

/* ---- Admin: one product at a time ---------------------------------------
   The panel was sixteen links in a flat list covering three separate products. The tabs pick
   which one you are managing; the list below shows only its screens. Dashboard sits above the
   tabs because it reports across all of them. */
.admin-nav-top { display: flex; flex-direction: column; margin-bottom: 10px; }
.admin-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 0 12px; margin-bottom: 10px; border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); }
.admin-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 10px 6px; border-radius: 10px; font-size: 11.5px; font-weight: 700; line-height: 1.25; color: rgba(255,255,255,.72); border: 1px solid transparent; }
.admin-tab i { font-size: 15px; opacity: .85; }
.admin-tab:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-tab.on { background: rgba(47,128,237,.22); border-color: rgba(47,128,237,.55); color: #fff; }
.admin-tab.on i { opacity: 1; color: #8fc0ff; }

/* Collapsed rail: labels go, icons stay, one tab per row so they stay distinguishable at 68px.
   The collapse class is `is-rail` on .admin-page, which is what the toggle actually sets. */
.admin-page.is-rail .admin-tabs { grid-template-columns: 1fr; padding-top: 40px; }
.admin-page.is-rail .admin-tab span { display: none; }
.admin-page.is-rail .admin-tab { padding: 9px 4px; }

@media (max-width: 900px) {
  /* The sidebar becomes a dropdown here and its <nav>s are hidden until it is opened. The tabs
     are not a <nav>, so they have to be hidden to match -- otherwise four product buttons sit
     across the collapsed bar with nothing under them. */
  .admin-tabs { display: none; grid-template-columns: repeat(4, 1fr); }
  .admin-sidebar.nav-open .admin-tabs { display: grid; margin: 0; padding: 10px 12px; }
  .admin-sidebar.nav-open .admin-nav-top { margin: 0; }
  .admin-tab span { display: none; }
  .admin-tab { padding: 12px 4px; }
  /* the tabs sit inside the dropdown, so it has to be positioned like the nav lists are */
  .admin-sidebar.nav-open .admin-tabs { position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy); z-index: 901; border-top: 1px solid rgba(255,255,255,.08); }
  .admin-sidebar.nav-open .admin-nav-items { top: calc(100% + 66px); }
}
/* A heading between product groups in the CS menu. Only shown from the second group on: the
   first is the console itself and needs no label. */
.cs-nav-head { display: block; padding: 14px 16px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.admin-page.is-rail .cs-nav-head { padding: 10px 0 4px; text-align: center; }
.admin-page.is-rail .cs-nav-head span { display: none; }
.admin-page.is-rail .cs-nav-head::before { content: ""; display: block; height: 1px; background: rgba(255,255,255,.14); margin: 0 12px; }

/* Console access editor: two modes stated as a choice, then the screens grouped by product. */
.csa-mode { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; margin-bottom: 10px; cursor: pointer; }
.csa-mode:hover { border-color: var(--coral); }
.csa-mode b { display: block; font-size: 15px; }
.csa-mode small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.csa-group { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 12px 0 0; }
.csa-group legend { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
.csa-screen { display: flex; gap: 10px; align-items: center; padding: 7px 4px; font-size: 14.5px; cursor: pointer; }
.csa-screen i { width: 18px; text-align: center; color: var(--muted); }
.csa-note { color: var(--coral-dark-text); font-size: 11.5px; font-style: normal; background: var(--coral-light); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }

/* ---- Scrollbars inside panels ------------------------------------------
   A chunky grey system scrollbar down the inside edge of a rounded white dialog reads as a
   rendering fault, not a control. These are thin, have no track and no arrows, and the thumb is
   a translucent rounded bar that picks up the surface it sits on.

   Deliberately styled rather than removed: `scrollbar-width: none` would take away the only clue
   that there is more to read. Firefox gets the standard properties, Chromium and Safari the
   ::-webkit- pseudo-elements; a browser that supports neither keeps its default, which is
   ugly but never broken. */
.admin-sidebar, .admin-sidebar nav, .admin-nav-items,
.modal-overlay, .dlg, .su-modal, .sv-dlg-in, .sv-more-menu,
.lang-menu-list, .notif-dropdown, .ss-pop, .pf-drawer, .pf-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 140, 170, .45) transparent;
}
.admin-sidebar::-webkit-scrollbar, .admin-sidebar nav::-webkit-scrollbar,
.admin-nav-items::-webkit-scrollbar, .modal-overlay::-webkit-scrollbar,
.dlg::-webkit-scrollbar, .su-modal::-webkit-scrollbar, .sv-dlg-in::-webkit-scrollbar,
.sv-more-menu::-webkit-scrollbar, .lang-menu-list::-webkit-scrollbar,
.notif-dropdown::-webkit-scrollbar, .ss-pop::-webkit-scrollbar,
.pf-drawer::-webkit-scrollbar, .pf-body::-webkit-scrollbar { width: 8px; height: 8px; }

.admin-sidebar::-webkit-scrollbar-track, .admin-sidebar nav::-webkit-scrollbar-track,
.admin-nav-items::-webkit-scrollbar-track, .modal-overlay::-webkit-scrollbar-track,
.dlg::-webkit-scrollbar-track, .su-modal::-webkit-scrollbar-track,
.sv-dlg-in::-webkit-scrollbar-track, .sv-more-menu::-webkit-scrollbar-track,
.lang-menu-list::-webkit-scrollbar-track, .notif-dropdown::-webkit-scrollbar-track,
.ss-pop::-webkit-scrollbar-track, .pf-drawer::-webkit-scrollbar-track,
.pf-body::-webkit-scrollbar-track { background: transparent; }

.admin-sidebar::-webkit-scrollbar-thumb, .admin-sidebar nav::-webkit-scrollbar-thumb,
.admin-nav-items::-webkit-scrollbar-thumb, .modal-overlay::-webkit-scrollbar-thumb,
.dlg::-webkit-scrollbar-thumb, .su-modal::-webkit-scrollbar-thumb,
.sv-dlg-in::-webkit-scrollbar-thumb, .sv-more-menu::-webkit-scrollbar-thumb,
.lang-menu-list::-webkit-scrollbar-thumb, .notif-dropdown::-webkit-scrollbar-thumb,
.ss-pop::-webkit-scrollbar-thumb, .pf-drawer::-webkit-scrollbar-thumb,
.pf-body::-webkit-scrollbar-thumb {
  background: rgba(120, 140, 170, .38); border-radius: 999px; border: 2px solid transparent;
  background-clip: content-box;
}
.dlg::-webkit-scrollbar-thumb:hover, .su-modal::-webkit-scrollbar-thumb:hover,
.modal-overlay::-webkit-scrollbar-thumb:hover,
.admin-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(120, 140, 170, .62); background-clip: content-box; }

/* On the dark sidebar the same bar has to be light to be seen at all. */
.admin-sidebar, .admin-sidebar nav, .admin-nav-items { scrollbar-color: rgba(255,255,255,.28) transparent; }
.admin-sidebar::-webkit-scrollbar-thumb, .admin-sidebar nav::-webkit-scrollbar-thumb,
.admin-nav-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,.26); background-clip: content-box; }

/* ---- Site switcher ------------------------------------------------------
   One control for both consoles, in the header so it is in the same place on every screen.
   Shaped like the language pill beside it: the header utilities should read as a set. */
.site-sw { position: relative; }
.site-sw-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,.9); font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer; max-width: 230px; transition: background .15s, border-color .15s; }
.site-sw-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); }
.site-sw.open .site-sw-btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.site-sw-grip { color: #f0940a; font-size: 13px; }
.site-sw-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-sw-caret { font-size: 10px; opacity: .7; transition: transform .18s; }
.site-sw.open .site-sw-caret { transform: rotate(180deg); }
.site-sw-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 244px; background: #fff; color: var(--text); border-radius: 12px; box-shadow: 0 22px 52px rgba(15,31,61,.28); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 1001; }
.site-sw.open .site-sw-menu { opacity: 1; visibility: visible; transform: none; }
.site-sw-head { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 10px 8px; }
.site-sw-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 9px; font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.site-sw-item i:first-child { width: 18px; text-align: center; color: var(--muted); }
.site-sw-item:hover { background: var(--sand); }
.site-sw-item.on { background: var(--coral-light); color: var(--coral-dark-text); }
.site-sw-item.on i:first-child { color: var(--coral); }
.site-sw-tick { margin-left: auto; font-size: 11px; color: var(--coral); }
/* each workspace's business WhatsApp number, under its name */
.site-sw-btn { max-width: 300px; }
.site-sw-cur { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.site-sw-num { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); white-space: nowrap; }
.site-sw-num i { color: #25d366; }
.site-sw-menu { min-width: 290px; }
.site-sw-lbl { display: flex; flex-direction: column; min-width: 0; }
.site-sw-wa { font-size: 12px; font-weight: 500; color: var(--muted); }
.site-sw-wa.live i { color: #1e9e57; }
.site-sw-wa.planned { color: #9a5300; }
.site-sw-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.site-sw-tool { font-size: 13.5px; }
.site-sw-tool.add, .site-sw-tool.add i:first-child { color: var(--coral); }
@media (max-width: 768px) { .site-sw-cur { display: none; } .site-sw-btn { padding: 7px 10px; gap: 5px; } }

/* ---- CS agents & access -------------------------------------------------
   A card per agent rather than another wide table: the useful information is "how much of the
   console can this person reach", which reads better as four small counts than as a row. */
.csa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-top: 18px; }
.csa-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.csa-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.csa-who { display: flex; gap: 11px; align-items: center; min-width: 0; }
.csa-avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sand); color: var(--coral); flex: none; }
.csa-who b { display: block; font-size: 15.5px; }
.csa-who small { display: block; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.csa-badge { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.csa-badge.full { background: #e7f7f4; color: #0b7a5f; border: 1px solid #b9e6da; }
.csa-badge.limited { background: var(--coral-light); color: var(--coral-dark-text); border: 1px solid #f2e2c6; }
.csa-sites { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.csa-site { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 7px 9px; }
.csa-site i { width: 14px; text-align: center; }
.csa-site b { margin-left: auto; color: var(--text); font-size: 12px; }
.csa-site.none { opacity: .55; }
.csa-site.has i { color: var(--coral); }
.csa-card footer { display: flex; gap: 8px; align-items: center; margin-top: auto; }

/* ==========================================================================
   Admin screens: the shared kit
   --------------------------------------------------------------------------
   The insurance and Sahayak screens were written against class names that were
   never given any rules -- .admin-sub, .admin-note, .filter-row, .inline-search,
   .hc-form, .hc-h2, .hc-lbl, .hc-actions -- so they rendered with the browser's
   own defaults: 12px search boxes, loose outline chips for what are really tabs,
   full-bleed text, and form controls that did not match anything else in the
   panel.

   The kit is defined here rather than per screen because the four of them show
   the same three shapes: a list with filters, a settings form, and a table you
   type into. One vocabulary means the next screen inherits the design instead
   of inventing a fifth one.
   ========================================================================== */

/* --- page furniture ------------------------------------------------------ */
.admin-main > h1 + .admin-sub { margin-top: -10px; }
.admin-sub { max-width: 820px; font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; }
.admin-sub a { color: var(--coral); font-weight: 600; }
.admin-sub strong, .admin-sub b { color: var(--text); }

/* Said once, at the top, about the state of the screen -- not a warning. */
.admin-note { display: flex; gap: 10px; align-items: flex-start; max-width: 820px;
  background: var(--coral-light); border: 1px solid #cfe4fa; border-left: 4px solid var(--coral);
  border-radius: 12px; padding: 11px 14px; font-size: 13.5px; line-height: 1.55;
  color: var(--text); margin: 0 0 20px; }
.admin-note i { color: var(--coral); margin-top: 3px; flex: none; }

.admin-count { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.admin-count b { color: var(--text); font-weight: 700; }

/* --- filters and search --------------------------------------------------
   The status filters are tabs: exactly one is on, and picking one replaces the
   list. Loose outline buttons said "four separate actions" instead, so they are
   a segmented control -- one track, one lit segment, the count in the pill. */
.filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 16px; }

.seg { display: inline-flex; flex-wrap: wrap; background: #e9f1fb; border: 1px solid var(--border);
  border-radius: 12px; padding: 3px; gap: 2px; max-width: 100%; }
.seg-item { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px;
  font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; text-decoration: none;
  transition: background .15s, color .15s, box-shadow .15s; }
.seg-item:hover { color: var(--coral); background: rgba(255,255,255,.6); }
.seg-item.active { background: #fff; color: var(--coral); box-shadow: 0 1px 3px rgba(15,35,64,.13); }
.seg-item:focus-visible { outline: 3px solid rgba(47,128,237,.35); outline-offset: -2px; }
.seg-n { font-size: 11px; font-weight: 800; line-height: 1; padding: 4px 7px; min-width: 21px;
  text-align: center; border-radius: 999px; background: rgba(15,35,64,.09); color: var(--muted); }
.seg-item.active .seg-n { background: var(--coral); color: #fff; }
.seg-item.empty .seg-n { opacity: .45; }

.inline-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.inline-search input[type=search], .inline-search input[type=text] {
  border: 1.5px solid var(--border); border-radius: 999px; padding: 9px 16px; font-size: 13.5px;
  background: #fbfdff; color: var(--text); min-width: 250px; }
.inline-search input::placeholder { color: #8ba3c0; }
.inline-search input[type=search]:focus, .inline-search input[type=text]:focus {
  border-color: var(--coral); outline: none; background: #fff;
  box-shadow: 0 0 0 3px rgba(47,128,237,.16); }
.inline-search select { border: 1.5px solid var(--border); border-radius: 999px; padding: 9px 14px;
  font-size: 13.5px; background: #fbfdff; color: var(--text); max-width: 230px; }
.inline-search .ss { flex: 0 0 auto; min-width: 170px; max-width: 230px; }

/* --- a list in a panel ---------------------------------------------------
   The rows used to run edge to edge against the page background, so the table
   had no edges of its own and the pager floated under nothing. */
.admin-panel { background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,35,64,.05); overflow: hidden; margin-bottom: 20px; }
.admin-panel > .table-wrap { border-radius: inherit; }
.admin-panel .admin-table { margin: 0; }
.admin-panel .admin-table th { background: #f7fbff; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.admin-panel .admin-table td { padding: 13px 16px; }
.admin-panel .admin-table tbody tr:last-child td { border-bottom: none; }
.admin-panel .admin-empty { padding: 34px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.admin-panel .admin-empty i { display: block; font-size: 26px; color: #c3d8ef; margin-bottom: 10px; }

/* --- settings forms ------------------------------------------------------ */
.hc-form { max-width: 1000px; display: grid; gap: 18px; }
.hc-sec { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(15,35,64,.05); }
.hc-h2 { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-size: 17px;
  font-weight: 800; color: var(--text); margin: 0 0 5px; }
.hc-h2 i { color: var(--coral); font-size: 15px; }
.hc-hint { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; max-width: 760px; }
.hc-hint a { color: var(--coral); font-weight: 600; }
.hc-hint b, .hc-hint strong { color: var(--text); }
.hc-lbl { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.hc-field { margin-bottom: 16px; }
.hc-field:last-child { margin-bottom: 0; }
.hc-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

.hc-form input[type=text], .hc-form input[type=email], .hc-form input[type=url],
.hc-form input[type=number], .hc-form textarea {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 13px;
  font: inherit; font-size: 14px; background: #fbfdff; color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s; }
.hc-form input::placeholder, .hc-form textarea::placeholder { color: #8ba3c0; }
.hc-form input:focus, .hc-form textarea:focus { border-color: var(--coral); outline: none;
  background: #fff; box-shadow: 0 0 0 3px rgba(47,128,237,.16); }
.hc-form input[readonly] { background: #eff5fb; color: var(--muted); cursor: not-allowed; }
.hc-form textarea { resize: vertical; min-height: 66px; line-height: 1.5; }

/* Stays in view while you work down a long form, so Save is never a scroll away. */
.hc-actions { position: sticky; bottom: 14px; z-index: 3; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; padding: 13px 18px; background: #fff;
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15,35,64,.13); }
.hc-actions .hc-note { margin-left: auto; font-size: 12.5px; color: var(--muted); max-width: 440px; }
/* Room to scroll the last field clear of the bar, which otherwise sits on top of it for good. */
.hc-form { padding-bottom: 8px; }
.admin-main:has(.hc-actions) { padding-bottom: 96px; }

/* --- tables you type into ------------------------------------------------
   Seven inputs across a row left the quote column narrower than the sentence
   it holds and the whole thing unreadable under 1200px. A row is a card: the
   long fields get the width, the short ones sit together, and the row still
   posts one value per field name in order, which is what the server reads. */
.ed-rows { display: grid; gap: 12px; }
.ed-row { position: relative; border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 52px 14px 14px; background: #fbfdff; }
.ed-row:focus-within { border-color: #a9cdf5; background: #fff; }
.ed-grid { display: grid; gap: 12px; }
.ed-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ed-cols.narrow { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.ed-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; }
.ed-num { max-width: 150px; }
.ed-del { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; border: 1px solid var(--border); background: #fff;
  color: #9fb4cd; cursor: pointer; transition: all .15s; }
.ed-del:hover { border-color: #f3b9b6; background: #fdecec; color: #c0392b; }
.ed-del:focus-visible { outline: 3px solid rgba(220,38,38,.3); outline-offset: 2px; }
.ed-empty { border: 1px dashed var(--border); border-radius: 14px; padding: 26px; text-align: center;
  color: var(--muted); font-size: 13.5px; }

/* --- boxes you tick ------------------------------------------------------
   The browser's own checkbox is 13px, square-cornered and grey whatever the
   panel around it looks like. These are the same shape as the inputs above
   them, big enough to hit, and they say clearly which state they are in. */
.admin-page input[type=checkbox], .admin-page input[type=radio] {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid #b9d2ee; border-radius: 5px; background: #fff; flex: none;
  display: inline-grid; place-content: center; cursor: pointer; vertical-align: -3px;
  transition: background .12s, border-color .12s, box-shadow .12s; }
.admin-page input[type=radio] { border-radius: 50%; }
.admin-page input[type=checkbox]:hover, .admin-page input[type=radio]:hover { border-color: var(--coral); }
.admin-page input[type=checkbox]::before { content: ""; width: 10px; height: 10px; transform: scale(0);
  transition: transform .12s ease-out; box-shadow: inset 1em 1em #fff;
  clip-path: polygon(14% 45%, 0 62%, 40% 100%, 100% 22%, 84% 6%, 38% 66%); }
.admin-page input[type=radio]::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  transform: scale(0); transition: transform .12s ease-out; box-shadow: inset 1em 1em #fff; }
.admin-page input[type=checkbox]:checked, .admin-page input[type=radio]:checked {
  background: var(--coral); border-color: var(--coral); }
.admin-page input[type=checkbox]:checked::before, .admin-page input[type=radio]:checked::before { transform: scale(1); }
.admin-page input[type=checkbox]:focus-visible, .admin-page input[type=radio]:focus-visible {
  outline: 3px solid rgba(47,128,237,.32); outline-offset: 2px; }
.admin-page input[type=checkbox]:disabled, .admin-page input[type=radio]:disabled {
  background: #eef4fb; border-color: #dbe7f5; cursor: not-allowed; }
/* These two draw their own control and hide the real box; the rules above must not undo that. */
.admin-page .tick-check input[type=checkbox] { display: none; }
.admin-page .multi-dropdown input[type=checkbox] { width: 16px; height: 16px; }

/* "How should we contact you?" on /contact -- the popup's pills, in the page's own stylesheet. */
.ct-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-pills label { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px;
  border: 1.5px solid var(--border); border-radius: 999px; font-size: 14px; cursor: pointer;
  background: #fff; transition: border-color .15s, background .15s; }
.ct-pills label:hover { border-color: var(--coral); }
.ct-pills label:has(input:checked) { border-color: var(--coral); background: var(--coral-light); font-weight: 600; }
.ct-form select { width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 11px 13px; font: inherit; font-size: 15px; background: #fff; color: var(--text); }
.ct-form select:focus { border-color: var(--coral); outline: none;
  box-shadow: 0 0 0 3px rgba(245,166,35,.18); }

/* The product switcher under the logo.
   Travel Companion, Travel Insurance and Sahayak are separate products sharing a header. The
   only route between them used to be a "Services" item inside the main menu -- which on a phone
   is behind the burger, so from the insurance page there was no visible way back at all. The
   logo stays a link home; the line under it names the product and opens. 38px is the logo image
   and 10px the gap it sits after, so the label lines up with the brand name above it. */
/* The mark is taken out of the flow and centred on the WHOLE brand, so it sits level with the
   middle of the two lines beside it rather than level with the first one.
   In flow it was a 38px item inside the link next to an 18px name, which centred it on the name
   and left its overhang hanging between the two lines -- closing that gap needed a negative
   margin on the switcher and a matching indent at every breakpoint, three numbers that had to
   agree. One padding, the width of the mark plus its gap, does both jobs: it clears the mark
   and lines both lines up with each other.
   min-height keeps the row as tall as the mark now that the mark no longer props it open. */
.nav-brand { position: relative; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; min-width: 0; min-height: 38px; padding-left: 48px; }
.nav-brand .logo-img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
/* The brand's second line: the product switcher, and whatever the product adds beside it.
   The divider is drawn by the mount, not the chip, so it never appears on its own while the
   chip's own script is still loading. */
.svc-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.svc-row > .brand-chip:not(:empty) { padding-left: 9px; border-left: 1px solid rgba(255,255,255,.22); }
.svc-row .logo-sub { white-space: nowrap; }
/* A chip may carry a long label and a short one; below a phone's width the long one wraps and
   takes the header's height with it. */
.svc-row .jn-short { display: none; }
@media (max-width: 560px) {
  .svc-row .jn-long { display: none; }
  .svc-row .jn-short { display: inline; }
}
.svc-sw { position: relative; }
.svc-sw-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0;
  padding: 0 4px 0 0; margin: 0; cursor: pointer; border-radius: 6px; color: inherit;
  line-height: 1.35; }
.svc-sw-btn:hover .logo-sub, .svc-sw.open .logo-sub { color: #fff; }
.svc-sw-btn:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
.svc-sw-caret { font-size: 8px; color: var(--coral); transition: transform .15s; }
.svc-sw.open .svc-sw-caret { transform: rotate(180deg); }

/* 2px, not 8: the panel belongs to the label above it, and a visible gap made it read as
   something that had floated loose of the header. */
.svc-sw-menu { display: none; position: absolute; top: calc(100% + 2px); left: -6px; z-index: 1001;
  width: 272px; background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 22px 48px rgba(1,16,56,.22); padding: 6px; }
.svc-sw.open .svc-sw-menu { display: block; }
.svc-sw-head { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); padding: 9px 10px 5px; }
.svc-sw-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px;
  color: var(--text); text-decoration: none; }
.svc-sw-item:hover { background: var(--bg); }
/* Switching product is a link; switching journey inside one is not, so that item is a button
   and arrives with the browser's own border, background and centred text. Reset to match the
   links it sits among. */
button.svc-sw-item { width: 100%; border: 0; background: none; box-shadow: none; font: inherit;
  text-align: left; cursor: pointer; }
button.svc-sw-item.on { background: var(--coral-light); }
.svc-sw-ico { width: 17px; height: 17px; flex: none; color: var(--coral); }
.svc-sw-item.sm .svc-sw-ico { width: 14px; height: 14px; color: var(--muted); }
.svc-sw-item span { display: flex; flex-direction: column; min-width: 0; }
.svc-sw-item b { font-size: 14px; font-weight: 700; line-height: 1.25; }
.svc-sw-item small { font-size: 11.5px; color: var(--muted); }
.svc-sw-item.on { background: var(--coral-light); }
.svc-sw-item.on b { color: var(--coral-dark-text); }
.svc-sw-item.sm { padding: 7px 10px; }
.svc-sw-item.sm b { font-size: 13px; font-weight: 600; }
.svc-sw-tick { margin-left: auto; width: 15px; height: 15px; flex: none; color: var(--coral); }

@media (max-width: 900px) {
  /* the one place the product name matters most: it is the only thing on a phone that says
     which of the three you are looking at */
  .svc-sw .logo-sub { display: block; font-size: 10px; }
  .svc-sw-menu { min-width: min(280px, calc(100vw - 32px)); }
}
@media (max-width: 420px) {
  .svc-sw-menu { position: fixed; left: 12px; right: 12px; top: 62px; min-width: 0; }
}

/* Reviews are kept per product, so the public page needs a way to say which set is on screen
   and to reach the other. Two tabs, not a dropdown: there are two, and both are worth seeing. */
.rv-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: -18px auto 26px; }
.rv-tab { padding: 9px 20px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff;
  color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; transition: all .15s; }
.rv-tab:hover { border-color: var(--coral); color: var(--coral); }
.rv-tab.on { background: var(--coral); border-color: var(--coral); color: var(--navy); }
.rv-tab:focus-visible { outline: 3px solid rgba(245,166,35,.4); outline-offset: 2px; }

/* The quiet half of a pair of actions -- Cancel next to Save. It had no rules at all, so it
   rendered as bare text beside a solid button and read as a caption rather than a way out. */
.btn-light { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--border);
  background: #fff; color: var(--muted); border-radius: 999px; padding: 10px 20px; font-size: 14px;
  font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.btn-light:hover { border-color: var(--coral); color: var(--coral); background: var(--coral-light); }
.btn-light:focus-visible { outline: 3px solid rgba(47,128,237,.3); outline-offset: 2px; }

/* A ticked row should be readable as ticked without hunting for the box. */
.csa-screen { border-radius: 9px; transition: background .12s; }
.csa-screen:hover { background: var(--bg); }
.csa-screen:has(input:checked) { background: var(--coral-light); }
.csa-screen:has(input:checked) span { font-weight: 600; }
.csa-mode:has(input:checked) { border-color: var(--coral); background: var(--coral-light); }

@media (max-width: 720px) {
  .filter-row { gap: 10px; }
  .inline-search { margin-left: 0; width: 100%; }
  .inline-search input[type=search], .inline-search input[type=text] { flex: 1 1 auto; min-width: 0; }
  .seg { width: 100%; }
  .seg-item { flex: 1 1 auto; justify-content: center; padding: 8px 10px; }
  .hc-sec { padding: 16px; }
  .ed-row { padding: 12px 12px 12px 12px; }
  .ed-pair { grid-template-columns: 1fr; }
  /* A stacked table is already a list of cards; the panel around it would draw a second box. */
  .admin-panel:has(.stack-mobile) { background: none; border: 0; box-shadow: none; }
  .admin-panel .stack-mobile td { padding: 2px 0; }
  .ed-del { position: static; width: 100%; height: 36px; margin-top: 10px; }
}

/* ==========================================================================
   /contact-us -- the group's contact page.

   Its own front door, so it carries more presence than an inner screen: a pale
   sky band with the artwork in it, the form and the ways to reach us side by
   side, the offices as photo cards, then a closing band. Tokens and buttons are
   the site's own, so it reads as the same product rather than a second site.

   Artwork is in static/img/contact/ as WebP with alpha (see services/offices
   ARTWORK). Every one of them is decoration: the page says everything it has to
   say with images off, which is why they all carry an empty alt.
   ========================================================================== */
.cu { background: #fff; --cu-sky: #EAF2FE; --cu-sky-2: #F6FAFF; --cu-cream: #FFF8EC; }
.cu .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.cu-kick { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--coral); margin-bottom: 10px; }
.cu img { max-width: 100%; height: auto; }

/* ----- hero ----- */
.cu-hero { position: relative; overflow: hidden; padding: 46px 0 0;
  background: linear-gradient(170deg, var(--cu-sky-2) 0%, var(--cu-sky) 100%); }
/* The map and the dots sit behind everything and must never take a click. */
.cu-hero-map, .cu-hero-dots { position: absolute; pointer-events: none; user-select: none; }
.cu-hero-map { top: 10px; right: 2%; width: min(560px, 48%); opacity: .5; }
.cu-hero-dots { left: 2%; bottom: 96px; width: 150px; opacity: .55; }
/* The photograph is taken out of the flow and pinned to the bottom-right of the band, so the
   words and the badges both run beside it and it can bleed off the bottom edge. In a grid row
   it could only be as tall as that row, which left it floating above the badges. */
.cu-hero .wrap { position: relative; }
.cu-hero-grid { padding-right: 42%; }
.cu-hero-tx { padding-bottom: 18px; }
.cu-hero h1 { font-family: var(--font-head); font-size: clamp(32px, 4.6vw, 52px); font-weight: 800;
  color: var(--navy); line-height: 1.08; margin: 0 0 14px; letter-spacing: -.01em; }
.cu-lead { font-size: 16px; line-height: 1.7; max-width: 560px; color: var(--muted); margin: 0; }
/* Bleeds off the bottom of the band, which is what stops it reading as a pasted cut-out. */
.cu-hero-art { position: absolute; right: 20px; bottom: 0; width: min(440px, 40%); }
.cu-hero-art img { display: block; width: 100%; margin-bottom: -1px; }

/* Four across, inside the left of the band: the photograph occupies the right 44% and the
   badges have to stop before it rather than run underneath. */
.cu-badges { position: relative; list-style: none; margin: 0; padding: 0 42% 30px 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.cu-badges li { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cu-badges img { width: 34px; height: 34px; flex: none;
  filter: drop-shadow(0 4px 12px rgba(15,35,64,.13)); }
.cu-badges span { display: flex; flex-direction: column; min-width: 0; }
.cu-badges b { font-size: 12px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.cu-badges small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

/* ----- the form and the channels ----- */
.cu-main { padding: 46px 0 54px; background: var(--bg); }
.cu-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cu-form-card { background: #fff; border: 1px solid var(--border); border-radius: 20px;
  padding: clamp(20px, 3vw, 34px); box-shadow: 0 2px 18px rgba(15,35,64,.05); }
.cu-form-card h2 { font-family: var(--font-head); font-size: 25px; font-weight: 800; margin: 0 0 6px; }
.cu-sub { font-size: 14px; color: var(--muted); margin: 0 0 24px; }
.cu-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.cu-f { margin-bottom: 16px; }
.cu-f label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.cu-f .req { color: #dc2626; }

/* A field and the glyph that labels it. The glyph is positioned over the control rather than
   drawn as a background image, so it inherits colour and scales with the text. */
.cu-ip { position: relative; }
.cu-ip > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: #97a3b8; pointer-events: none; }
.cu-ip-area > i { top: 16px; transform: none; }
.cu-ip input, .cu-ip select, .cu-ip textarea { width: 100%; border: 1.5px solid var(--border);
  border-radius: 12px; padding: 12px 14px 12px 40px; font: inherit; font-size: 15px;
  background: #fbfdff; color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s; }
.cu-ip select { appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6579' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; }
.cu-ip textarea { resize: vertical; line-height: 1.55; }
.cu-ip input:focus, .cu-ip select:focus, .cu-ip textarea:focus { border-color: var(--coral);
  outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(245,166,35,.18); }
.cu-ip input:focus ~ i, .cu-ip select:focus ~ i { color: var(--coral); }

/* Every <select> on the site is replaced by the searchable widget in js/searchselect.js: the
   native one is kept but hidden, and .ss-btn is what a visitor actually sees. So the rules
   above never reached the control -- the boxes next to each other were a 50px input and a 40px
   button with a different border, radius and type size. These are the ones that land. */
.cu-form-card .ss { display: block; }
.cu-form-card .ss-btn { min-height: 50px; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: 15px; background: #fbfdff; color: var(--text); }
.cu-ip .ss-btn { padding-left: 40px; }           /* clear of the leading glyph */
.cu-form-card .ss-btn:hover { border-color: #e2c48f; }
.cu-form-card .ss.is-open .ss-btn,
.cu-form-card .ss-btn:focus-visible { border-color: var(--coral); outline: none;
  background: #fff; box-shadow: 0 0 0 3px rgba(245,166,35,.18); }
.cu-form-card .ss-caret { color: var(--muted); }
/* The glyph sits over the control, so it must not swallow the click that opens it. */
.cu-ip > i { z-index: 1; }

/* The shared phone field (templates/_phone_field.html) dressed to match the fields above it.
   Styled from here rather than changed there: every other form on the site uses that macro. */
.cu .pf { margin-bottom: 16px; }
.cu .pf > label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.cu .pf > label .muted { font-weight: 500; color: var(--muted); }
.cu .pf-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
.cu .pf-cc, .cu .pf-num { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 10px;
  font: inherit; font-size: 15px; background: #fbfdff; color: var(--text); min-width: 0;
  min-height: 50px;
  transition: border-color .15s, box-shadow .15s, background .15s; }
/* and the same again for the widget that replaces the country <select> */
.cu .pf-row .ss-btn { padding: 12px 10px; gap: 4px; }
.cu .pf-num { padding-left: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397a3b8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 13px center; background-size: 15px; }
.cu .pf-cc:focus, .cu .pf-num:focus { border-color: var(--coral); outline: none; background-color: #fff;
  box-shadow: 0 0 0 3px rgba(245,166,35,.18); }

/* The contact-method pills. The radio itself stays in the page for the keyboard and for
   assistive technology; the label is what is painted. */
.cu .ct-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.cu .ct-pills label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 16px; font-size: 14px;
  font-weight: 600; color: var(--text); background: #fff;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.cu .ct-pills label:hover { border-color: #e2c48f; }
.cu .ct-pills input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
  pointer-events: none; }
.cu .ct-pills i { font-size: 15px; color: var(--muted); }
.cu .ct-pills .fa-whatsapp { color: #25D366; }
.cu .ct-pills label:has(input:checked) { border-color: var(--coral); background: var(--cu-cream);
  box-shadow: 0 0 0 3px rgba(245,166,35,.14); }
.cu .ct-pills label:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }

.cu-foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.cu-foot .btn-ghost { border: 1.5px solid var(--border); color: var(--text); background: #fff; }
.cu-foot .btn-ghost:hover { border-color: #25D366; color: #128C4B; }
.cu-foot .btn-ghost .fa-whatsapp { color: #25D366; }
.cu-reassure { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; }
.cu-reassure i { color: var(--coral); margin-right: 5px; }

/* ----- "Talk to our team" ----- */
.cu-side { display: grid; gap: 18px; }
.cu-side-card { background: var(--cu-sky); border: 1px solid #DCE8FA; border-radius: 20px; padding: 24px; }
.cu-side-card h3 { font-family: var(--font-head); font-size: 20px; font-weight: 800; margin: 0 0 4px; color: var(--navy); }
.cu-side-sub { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }
.cu-chan { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cu-chan li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px;
  padding: 11px 12px; min-width: 0; }
.cu-chan-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; }
/* _flag.html draws a span instead of an img for a country with no artwork; same box, so the
   rows stay aligned whichever one it is. */
span.cu-chan-ic, .cu-office-flag .flag-txt { display: grid; place-items: center; background: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--muted); }
.cu-chan-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cu-chan-tx small { font-size: 12px; color: var(--muted); }
.cu-chan-tx b { font-size: 14.5px; font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.cu-chan-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 700; color: var(--navy); background: #fff; border: 1.5px solid #D7E3F7;
  border-radius: 999px; padding: 7px 14px; transition: border-color .15s, background .15s, color .15s; }
.cu-chan-btn:hover { border-color: var(--coral); background: var(--cu-cream); color: var(--navy); }
.cu-chan-btn i { font-size: 12px; color: var(--coral); }

/* ----- "Looking for an answer now?" ----- */
.cu-help-card { position: relative; overflow: hidden; background: var(--cu-cream);
  border: 1px solid #F3E2C4; border-radius: 20px; padding: 20px 22px 0;
  display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 14px; align-items: end; }
.cu-help-blob { position: absolute; z-index: 0; left: -24px; bottom: -16px; width: 160px;
  opacity: .55; pointer-events: none; }
/* Pulled out past the card's padding so the card's own edge does the cropping. Left in the
   column she ended mid-shoulder with a strip of cream beside her, which reads as a mistake
   rather than a crop; the extra width also brings her up to the height of the text. */
.cu-help-pic { position: relative; z-index: 1; align-self: end; margin-left: -50px; }
.cu-help-pic img { display: block; width: 100%; margin-bottom: -1px; }
.cu-help-tx { position: relative; z-index: 1; padding-bottom: 22px; }
.cu-help-tx h3 { font-family: var(--font-head); font-size: 19px; font-weight: 800; color: var(--navy);
  margin: 0 0 8px; line-height: 1.25; }
.cu-help-tx p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.cu-help-tx .btn { font-size: 13.5px; padding: 9px 18px; background: #fff; }

/* ----- the offices ----- */
.cu-offices { padding: 60px 0; background: linear-gradient(180deg, #FFFDF9 0%, var(--cu-cream) 100%); }
.cu-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.cu-head h2 { font-family: var(--font-head); font-size: clamp(25px, 3.2vw, 35px); font-weight: 800; margin: 0 0 10px; }
.cu-head .cu-lead { color: var(--muted); margin: 0 auto; }
/* Centred flex, not a grid of equal columns: there are five offices in four countries, and
   auto-fit lands them 4 + 1 with the last one stranded on a row of its own. At this basis they
   fall 3 + 2 and centre, which reads as a set. */
.cu-office-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.cu-office { position: relative; flex: 1 1 290px; max-width: 340px; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.cu-office:hover { border-color: #f0d8ae; box-shadow: 0 14px 34px rgba(15,35,64,.09);
  transform: translateY(-2px); }
.cu-office.hq { border-color: var(--coral); }
.cu-office-pic { height: 132px; background: #EDF3FD; overflow: hidden; }
.cu-office-pic img { display: block; width: 100%; height: 100%; object-fit: contain;
  object-position: center bottom; }
.cu-office-bd { position: relative; padding: 26px 20px 22px; flex: 1; }
/* Straddles the join between the photograph and the card body, which is what ties the two
   halves together instead of leaving a photo with a caption under it. */
.cu-office-flag { position: absolute; top: -20px; left: 20px; width: 40px; height: 40px;
  border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(15,35,64,.18); }
.cu-office-flag img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.cu-office-flag .flag-txt { width: 36px; height: 36px; border-radius: 50%; }
.cu-office h3 { font-size: 16.5px; font-weight: 800; margin: 0 0 9px; display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap; }
.cu-flag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  color: var(--coral); background: rgba(245,166,35,.14); border-radius: 6px; padding: 3px 8px; }
.cu-office address { font-style: normal; font-size: 13.5px; line-height: 1.75; color: var(--muted); }
.cu-tag { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--coral);
  border-radius: 999px; padding: 4px 10px; }

/* ----- closing band ----- */
.cu-band { position: relative; overflow: hidden; background: var(--navy); color: #fff;
  padding: 46px 0; }
.cu-band-art { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(1100px, 100%); opacity: .13; pointer-events: none; }
.cu-band-in { position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; }
.cu-band h2 { font-family: var(--font-head); font-size: clamp(21px, 2.6vw, 29px); font-weight: 800;
  color: #fff; margin: 0 0 8px; max-width: 560px; line-height: 1.3; }
.cu-band p { color: rgba(255,255,255,.72); font-size: 15.5px; margin: 0; }
.cu-band-acts { display: flex; gap: 12px; flex-wrap: wrap; }
.cu-band .btn-outline-coral { color: #fff; border-color: rgba(255,255,255,.55); }
.cu-band .btn-outline-coral:hover { background: #fff; color: var(--navy); border-color: #fff; }

@media (max-width: 980px) {
  .cu-grid { grid-template-columns: 1fr; }
  .cu-hero-map { width: 58%; opacity: .34; }
  .cu-badges b { font-size: 12px; }
  .cu-badges small { font-size: 11px; }
}
@media (max-width: 760px) {
  .cu-hero { padding-top: 34px; }
  /* The photograph goes under the words rather than beside them -- at this width a 44% column
     leaves the heading three words to a line. */
  .cu-hero-grid { padding-right: 0; }
  .cu-hero-art { position: static; width: auto; margin-top: 10px; }
  .cu-hero-art img { max-width: 360px; margin: 0 auto -1px; }
  .cu-hero-dots { display: none; }
  .cu-badges { padding: 0 0 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .cu-main, .cu-offices { padding: 34px 0; }
  .cu-band-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .cu .pf-row { grid-template-columns: 96px minmax(0, 1fr); }
  .cu-badges { grid-template-columns: 1fr 1fr; }
  .cu-foot .btn { width: 100%; justify-content: center; }
  .cu-office { max-width: none; }
  .cu-band-acts .btn { width: 100%; justify-content: center; }
  .cu-chan li { flex-wrap: wrap; }
  .cu-chan-tx b { font-size: 13.5px; }
  .cu-chan-btn { flex: 1 0 100%; justify-content: center; margin-top: 4px; padding: 9px 14px; }
  .cu-help-card { grid-template-columns: 1fr; padding: 22px; }
  .cu-help-pic { display: none; }
  .cu-help-tx { padding-bottom: 0; }
}

/* The promotion summary on the admin dashboard -- a link to the real thing, not a copy. */
.ad-promo-head { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; }
.ad-promo-head h2 { margin: 0; }
.ad-promo-note { font-size: 13px; color: var(--muted); margin: 8px 0 16px; }
.ad-promo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ad-promo-fig { background: #fbfdff; border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; }
.ad-promo-fig b { display: block; font-family: var(--font-head); font-size: 24px; font-weight: 800;
  line-height: 1; color: var(--navy); }
.ad-promo-fig span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.ad-promo-fig em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700;
  color: #16a34a; margin-top: 7px; }

/* ==========================================================================
   /promotion -- read-only activity figures for whoever is promoting the service.

   Dressed like /contact-us on purpose: same pale sky band, same artwork, same
   card and table language, so the two read as one site rather than a marketing
   page and an internal report. Everything on it is an aggregate; see the
   template and services/promo for why there are no names on it.
   ========================================================================== */
.pm { background: var(--bg); --pm-sky: #EAF2FE; --pm-sky-2: #F6FAFF; --pm-cream: #FFF8EC;
  --pm-companion: #2F80ED; --pm-insurance: #16A34A; --pm-contact: var(--coral); }
.pm .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.pm img { max-width: 100%; height: auto; }
.pm-kick { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--coral); margin-bottom: 10px; }

/* ----- hero ----- */
.pm-hero { position: relative; overflow: hidden; padding: 44px 0 0;
  background: linear-gradient(170deg, var(--pm-sky-2) 0%, var(--pm-sky) 100%); }
.pm-hero .wrap { position: relative; }
.pm-hero-map, .pm-hero-dots { position: absolute; pointer-events: none; user-select: none; }
.pm-hero-map { top: 10px; right: 2%; width: min(520px, 46%); opacity: .45; }
.pm-hero-dots { left: 2%; bottom: 90px; width: 140px; opacity: .5; }
.pm-hero-tx { position: relative; padding-right: 42%; }
.pm-hero h1 { font-family: var(--font-head); font-size: clamp(28px, 4vw, 44px); font-weight: 800;
  color: var(--navy); line-height: 1.1; margin: 0 0 12px; letter-spacing: -.01em; }
.pm-lead { font-size: 15.5px; line-height: 1.7; max-width: 560px; color: var(--muted); margin: 0; }
/* Same photograph as the contact page, pinned to the bottom of the band so it bleeds off it. */
.pm-hero-art { position: absolute; right: 20px; bottom: 0; width: min(400px, 38%); }
.pm-hero-art img { display: block; width: 100%; margin-bottom: -1px; }

.pm-reach { position: relative; list-style: none; margin: 26px 0 0; padding: 0 42% 26px 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pm-reach li { display: flex; flex-direction: column; min-width: 0; }
.pm-reach b { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--navy);
  line-height: 1; }
.pm-reach span { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.35; }

.pm-body { padding: 34px 0 60px; display: grid; gap: 18px; }

/* ----- the headline tiles ----- */
.pm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.pm-tile { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 2px 14px rgba(15,35,64,.04); }
.pm-tile small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pm-tile b { display: block; font-family: var(--font-head); font-size: 34px; font-weight: 800;
  line-height: 1; color: var(--navy); }
.pm-tile span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.pm-tile em { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: #16a34a;
  margin-top: 10px; }
.pm-tile.accent { background: var(--pm-cream); border-color: #F3E2C4; }

/* ----- cards and tables ----- */
.pm-card { position: relative; background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 22px 24px; box-shadow: 0 2px 14px rgba(15,35,64,.04); }
.pm-card h2 { font-family: var(--font-head); font-size: 19px; font-weight: 800; margin: 0 0 16px;
  color: var(--navy); }
.pm-card-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.pm-card-head h2 { margin-bottom: 12px; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; }
.pm-note { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; line-height: 1.6; }
.pm-foot { font-size: 12.5px; color: var(--muted); text-align: center; margin: 8px 0 0; }

.pm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pm-table th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); padding: 0 0 10px; }
.pm-table td { padding: 10px 0; border-top: 1px solid var(--border); color: var(--text); }
.pm-table th + th, .pm-table td + td { text-align: right; width: 1%; white-space: nowrap;
  padding-left: 16px; }
.pm-table tfoot td { border-top: 2px solid var(--border); font-weight: 700; }

/* ----- the six-month chart -----
   Flex columns with percentage heights: three series and six months do not need a charting
   library, and one would be 70KB to draw eighteen rectangles. */
.pm-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; }
.pm-legend li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pm-legend li::before { content: ''; width: 10px; height: 10px; border-radius: 3px;
  background: var(--k, var(--muted)); }
.pm-legend b { color: var(--navy); }
.k-companion { --k: var(--pm-companion); }
.k-insurance { --k: var(--pm-insurance); }
.k-contact   { --k: var(--pm-contact); }
.k-star      { --k: var(--coral); }

.pm-chart { display: flex; align-items: flex-end; gap: 10px; height: 190px; margin-top: 6px;
  padding-top: 8px; }
.pm-month { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  height: 100%; min-width: 0; }
.pm-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center;
  gap: 4px; }
/* min-height so a month with one of something is still a visible mark rather than nothing. */
.pm-col { flex: 1 1 0; max-width: 20px; min-height: 3px; border-radius: 4px 4px 0 0;
  background: var(--k, var(--muted)); transition: filter .15s; }
.pm-col:hover { filter: brightness(1.15); }
.pm-month small { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ----- ranked lists ----- */
.pm-bar { display: block; height: 7px; border-radius: 99px; background: #EEF2F8; overflow: hidden; }
.pm-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--k, var(--coral)); }
.pm-rank, .pm-stars-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pm-rank li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 90px 34px; gap: 10px;
  align-items: center; font-size: 14px; }
.pm-rank-n { font-size: 11px; font-weight: 800; color: var(--muted); text-align: center; }
.pm-rank-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pm-rank b, .pm-stars-list b { text-align: right; font-weight: 700; color: var(--navy); }
.pm-stars-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr) 34px 44px; gap: 10px;
  align-items: center; font-size: 14px; }
.pm-stars-n { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pm-stars-list small { font-size: 12px; color: var(--muted); text-align: right; }

/* ----- the quotes ----- */
.pm-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.pm-quote { margin: 0; background: var(--pm-cream); border: 1px solid #F3E2C4; border-radius: 16px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.pm-q-stars { color: var(--coral); font-size: 14px; letter-spacing: 2px; }
.pm-quote blockquote { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text); }
.pm-quote figcaption { font-size: 12px; color: var(--muted); margin-top: auto; }

/* ----- the links ----- */
.pm-links-card { overflow: hidden; }
.pm-links-art { position: absolute; right: -10px; top: 14px; width: 150px; opacity: .3;
  pointer-events: none; }
.pm-links { list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.pm-links a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: #fbfdff; min-width: 0;
  transition: border-color .15s, background .15s; }
.pm-links a:hover { border-color: var(--coral); background: var(--pm-cream); }
.pm-links b { font-size: 14px; color: var(--navy); }
.pm-links span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .pm-hero-tx, .pm-reach { padding-right: 0; }
  .pm-hero-art { position: static; width: auto; margin-top: 12px; }
  .pm-hero-art img { max-width: 320px; margin: 0 auto -1px; }
  .pm-hero-dots { display: none; }
  .pm-reach { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 520px) {
  .pm-chart { height: 150px; gap: 6px; }
  .pm-month small { font-size: 10px; }
  .pm-rank li { grid-template-columns: 18px minmax(0, 1fr) 30px; }
  /* the bar is the first thing to go: the figure beside it says the same thing in less room */
  .pm-rank .pm-bar { display: none; }
  .pm-tile b { font-size: 28px; }
}

/* ===== the shared phone field (templates/_phone_field.html) ===== */
.pf { margin-bottom: 16px; }
.pf > label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.pf > label .req { color: #dc2626; }
.pf-row { display: flex; gap: 8px; align-items: stretch; }
/* Sized through .pf-row rather than on the class alone. This field is dropped into forms that
   style their own inputs, and a rule like `.f input, .f select { width: 100% }` outranks a lone
   `.pf-cc` -- which is how the sign-up popup ended up with a country select across the whole
   row and the number squeezed out of it. Two classes beat a class and an element. */
/* The width is given as a flex basis with `width: 100%` behind it, so the same rule serves the
   flex row here and the grid one the contact page uses -- there the basis is ignored and the
   control fills its track. */
.pf-row .pf-cc { flex: 0 0 132px; width: 100%; border: 1.5px solid var(--border);
  border-radius: 11px; padding: 11px 8px; font: inherit; font-size: 14px; background: #fbfdff;
  color: var(--text); }
.pf-row .pf-num { flex: 1 1 auto; width: auto; min-width: 0; border: 1.5px solid var(--border);
  border-radius: 11px; padding: 11px 14px; font: inherit; font-size: 15px; background: #fbfdff;
  color: var(--text); }
/* Where the searchable dropdown has replaced the select it is the wrapper that the row
   measures, since the native select it hides no longer takes any width. Width only -- how the
   widget looks is left to whatever styles the form it is in. */
.pf-row .ss { flex: 0 0 132px; width: 100%; }
.pf-row .pf-cc:focus, .pf-row .pf-num:focus { border-color: var(--coral); outline: none;
  background: #fff; box-shadow: 0 0 0 3px rgba(245,166,35,.18); }
.pf-hint { display: block; font-size: 12px; margin-top: 6px; }
.pf-err { display: block; font-size: 12.5px; font-weight: 600; color: #dc2626; margin-top: 6px; }
.pf.is-bad .pf-num, .pf.is-bad .pf-cc { border-color: #dc2626; background: #fff6f6; }
.pf.is-bad .pf-num:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
@media (max-width: 420px) {
  .pf-row .pf-cc, .pf-row .ss { flex-basis: 104px; }
  .pf-row .pf-cc { font-size: 13px; padding: 11px 6px; }
}

/* User Voices: rows nobody on staff has opened yet. Clicking one marks it read (read_js). */
.vc-table tr.vc-unread { cursor: pointer; }
.vc-table tr.vc-unread > td { background: #fff7f4; font-weight: 600; }
.vc-table tr.vc-unread > td:first-child { box-shadow: inset 3px 0 0 var(--coral); }
.vc-new-dot { display: inline-block; margin-bottom: 3px; padding: 1px 7px; border-radius: 999px;
  background: var(--coral); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vc-table tr.vc-unread > td { background: rgba(255, 107, 74, .08); }
}
:root[data-theme="dark"] .vc-table tr.vc-unread > td { background: rgba(255, 107, 74, .08); }
/* Match queue: matches nobody has opened yet (opening the post's matches page reads them) */
.mq-table tr.mq-unread > td { background: #fff7f4; }
.mq-table tr.mq-unread > td:first-child { box-shadow: inset 3px 0 0 var(--coral); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mq-table tr.mq-unread > td { background: rgba(255, 107, 74, .08); }
}
:root[data-theme="dark"] .mq-table tr.mq-unread > td { background: rgba(255, 107, 74, .08); }

/* a count at zero stays in the page (so it can come back live) but must not show */
.nav-badge[hidden], .vt-n[hidden] { display: none !important; }
/* User voices: the message column gives a little so every action stays on screen beside the menu */
.vc-table .cm-cell { min-width: 280px; }
.mq-group[data-unread] .mq-table tbody tr { cursor: pointer; }

/* ===== Sales CRM: the pipeline symbol on every screen that shows a person (_crm_pill.html) ===== */
.crm-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 700;
  text-decoration: none; white-space: nowrap; line-height: 1.4; border: 1px solid transparent; font-family: inherit; }
.crm-pill .dots { display: inline-flex; gap: 2px; }
.crm-pill .dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .25; display: block; }
.crm-pill .dots i.on { opacity: 1; }
.crm-pill.r-new { background: #f1f5f9; color: #475569; }
.crm-pill.r-cold { background: #eef2f6; color: #334155; }
.crm-pill.r-prospect { background: #e7f0fd; color: #1d4ed8; }
.crm-pill.r-pipeline { background: #fff1db; color: #9a5300; }
.crm-pill.r-customer { background: #e3f6ea; color: #15803d; }
.crm-pill.r-lost { background: #fde8e8; color: #b91c1c; }
a.crm-pill:hover { filter: brightness(.95); }
.crm-pill-form { display: inline; margin: 0; }
.crm-pill.add { background: #fff; color: #1f5fc0; border: 1px dashed #93b8e8; cursor: pointer; }
.crm-pill.add:hover { background: #eaf3fe; }

/* ===== The staff menu: modules that fold, and "Find a page" (_staff_nav.html) ===============
   One menu for both consoles, built from the workspace's modules and the person's roles. A
   module heading opens and closes its pages; the open ones are remembered per browser. */
.staff-nav h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: .2px; font-size: 15px; color: #fff; }
/* the workspace's name with "Working as" under it; a click lists the roles to take (main.js, "Working as") */
.staff-nav .sn-who { position: relative; min-width: 0; }
.staff-nav .sn-who-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; width: 100%;
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.staff-nav .sn-who-ws, .staff-nav .sn-who-as { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-nav .sn-who-as { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: rgba(255,255,255,.62); }
.staff-nav .sn-who-as i { margin-right: 3px; font-size: 10.5px; }
.staff-nav .sn-who-as b { color: #fff; font-weight: 600; }
.staff-nav .sn-who-as.acting b { color: #ffd479; }       /* one role only: the same "not everything" the banner says */
.staff-nav .sn-who-caret { grid-column: 2; grid-row: 1 / span 2; font-size: 11px; color: rgba(255,255,255,.55); transition: transform .15s; }
.staff-nav .sn-who.open .sn-who-caret { transform: rotate(180deg); }
.staff-nav .sn-who-btn:hover .sn-who-as, .staff-nav .sn-who-btn:hover .sn-who-caret { color: #fff; }
.staff-nav .sn-who-btn:focus-visible { outline: 2px solid #2f80ed; outline-offset: 4px; border-radius: 6px; }
.staff-nav .sn-who-menu { position: absolute; z-index: 30; top: calc(100% - 6px); left: 12px; right: 12px; padding: 10px;
  border-radius: 12px; background: #fff; color: var(--text); box-shadow: 0 14px 34px rgba(6,17,34,.42); }
.staff-nav .sn-who-menu[hidden] { display: none; }
.staff-nav .sn-who-head { margin: 0 2px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.staff-nav .sn-who-note { margin: 8px 2px 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
@media (max-width: 900px) {
  .staff-nav .sn-who { flex: 1 1 auto; }
  .staff-nav .sn-who h3 { padding-right: 4px; }
}
.staff-nav .sn-find { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 0 10px; height: 34px;
  border-radius: 9px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); }
.staff-nav .sn-find input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff;
  font: inherit; font-size: 13px; padding: 0; }
.staff-nav .sn-find input::placeholder { color: rgba(255,255,255,.5); }
.staff-nav .sn-find:focus-within { background: rgba(255,255,255,.14); box-shadow: 0 0 0 2px rgba(47,128,237,.6); }
/* Global results: trips, people, insurance quotes, contact messages and Sahayak bookings from
   the Sales CRM's /find (main.js, the data-nav-find handler) -- the same cross-entity search
   the header's "Find a person" box uses, reusing its .fp-item/.fp-none markup but restyled for
   this dark rail instead of the header's light dropdown. */
.staff-nav .sn-global-results { margin: 0 12px 10px; max-height: 50vh; overflow-y: auto; }
.staff-nav .sn-global-results .fp-item { display: block; padding: 8px 10px; border-radius: 8px;
  color: rgba(255,255,255,.92); text-decoration: none; font-size: 13px; }
.staff-nav .sn-global-results .fp-item:hover { background: rgba(255,255,255,.08); }
.staff-nav .sn-global-results .fp-item b { display: block; font-weight: 600; }
.staff-nav .sn-global-results .fp-item small { color: rgba(255,255,255,.55); }
.staff-nav .sn-group { margin: 2px 0; }
.staff-nav .sn-head { display: flex; align-items: center; gap: 10px; width: calc(100% - 12px); margin-right: 12px; padding: 10px 14px 10px 20px;
  background: none; border: 0; border-radius: 0 999px 999px 0; cursor: pointer; text-align: left;
  color: rgba(255,255,255,.92); font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .1px; }
.staff-nav .admin-nav-items > * { flex-shrink: 0; }     /* a long phone dropdown scrolls; nothing in it squashes */
.staff-nav .admin-nav-top { margin-bottom: 8px; }
.staff-nav .sn-head:hover { background: rgba(255,255,255,.06); }
.staff-nav .sn-head i:first-child { width: 18px; text-align: center; color: rgba(255,255,255,.6); font-size: 13px; }
.staff-nav .sn-head span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-nav .sn-caret { font-size: 10px; color: rgba(255,255,255,.45); transition: transform .15s; }
.staff-nav .sn-group.open > .sn-head .sn-caret, .staff-nav .sn-sub.open > .sn-subhead .sn-caret { transform: rotate(180deg); }
.staff-nav .sn-sum { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff;
  font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }
.staff-nav .sn-group.open > .sn-head .sn-sum, .staff-nav .sn-sub.open > .sn-subhead .sn-sum { display: none; }
.staff-nav .sn-items { display: none; padding-bottom: 6px; }
.staff-nav .sn-group.open .sn-items { display: block; }
.staff-nav .sn-items a { padding: 9px 20px 9px 30px; font-size: 13.5px; }
/* a sub-menu inside a big section (Sales CRM > Daily work): a smaller heading that folds its own lines */
.staff-nav .sn-sub { margin: 0 0 2px; }
.staff-nav .sn-subhead { display: flex; align-items: center; gap: 7px; width: calc(100% - 12px); margin-right: 12px;
  padding: 8px 12px 8px 25px; background: none; border: 0; border-radius: 0 999px 999px 0; cursor: pointer; text-align: left;
  color: rgba(255,255,255,.62); font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0; }
.staff-nav .sn-subhead:hover { background: rgba(255,255,255,.06); color: #fff; }
.staff-nav .sn-subhead i:first-child { width: 16px; text-align: center; color: rgba(255,255,255,.45); font-size: 11.5px; }
.staff-nav .sn-subhead span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-nav .sn-subitems { display: none; }
.staff-nav .sn-sub.open > .sn-subitems { display: block; }
.staff-nav .sn-subitems a { padding-left: 46px; }
.staff-nav .sn-none { color: rgba(255,255,255,.55); font-size: 13px; padding: 8px 20px; margin: 0; }
.staff-nav.is-finding .sn-group, .staff-nav.is-finding .sn-sub { display: none; }
.staff-nav.is-finding .sn-group.has-hit, .staff-nav.is-finding .sn-sub.has-hit { display: block; }
.staff-nav.is-finding .sn-group.has-hit .sn-items, .staff-nav.is-finding .sn-sub.has-hit .sn-subitems { display: block; }
.staff-nav.is-finding .sn-items a.no-hit { display: none; }
/* collapsed to icons: every page's icon, no headings, no search */
.admin-page.is-rail .staff-nav .sn-find, .admin-page.is-rail .staff-nav .sn-head,
.admin-page.is-rail .staff-nav .sn-subhead, .admin-page.is-rail .staff-nav .sn-global-results { display: none; }
.admin-page.is-rail .staff-nav .sn-items, .admin-page.is-rail .staff-nav .sn-subitems { display: block; padding: 0; }
.admin-page.is-rail .staff-nav .sn-group + .sn-group { border-top: 1px solid rgba(255,255,255,.08); margin-top: 4px; padding-top: 4px; }
.admin-page.is-rail .staff-nav .sn-items a { padding: 11px 0; }
@media (max-width: 900px) {
  .staff-nav .sn-head { width: 100%; margin: 0; border-radius: 0; padding: 14px 18px; }
  .staff-nav .sn-subhead { width: 100%; margin: 0; border-radius: 0; padding: 12px 18px 12px 32px; }
  .staff-nav .sn-items a { padding: 13px 18px 13px 32px; }
  .staff-nav .sn-subitems a { padding-left: 48px; }
  .staff-nav .sn-find { margin: 10px 14px; }
  .admin-page.is-rail .staff-nav .sn-find, .admin-page.is-rail .staff-nav .sn-head,
  .admin-page.is-rail .staff-nav .sn-subhead { display: flex; }
  .admin-page.is-rail .staff-nav .sn-global-results:not([hidden]) { display: block; }
  .admin-page.is-rail .staff-nav .sn-items, .admin-page.is-rail .staff-nav .sn-subitems { display: none; }
  .admin-page.is-rail .staff-nav .sn-group.open .sn-items, .admin-page.is-rail .staff-nav .sn-sub.open > .sn-subitems { display: block; }
}

/* The tab strip of a menu line that gathers pages (access.TAB_GROUPS, templates/cs/crm/_tabs.html) on the two
   reports outside the Sales CRM, which do not load crm.css: the site dashboard and Match quality, under Reports.
   The same look as crm.css's .subtabs, with the console's colours when the CRM's are not there. */
.crm-tabstrip { margin-bottom: 4px; }
.crm-tabstrip .subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.crm-tabstrip .subtabs a { padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--c-line, var(--ui-line, #e3eaf4));
  background: #fff; color: var(--c-ink, var(--ui-ink, #0f2340)); text-decoration: none; font-weight: 600; font-size: 14px;
  display: inline-flex; gap: 8px; align-items: center; }
.crm-tabstrip .subtabs a.on { background: var(--c-blue, var(--ui-primary, #1f6fd6)); border-color: var(--c-blue, var(--ui-primary, #1f6fd6));
  color: #fff; }

/* ---- Sign-in & security, two-step sign-in (auth/security.html, auth/two_step.html) ---- */
.sec-page .auth-card { display: flex; flex-direction: column; gap: 22px; }
.sec-page .auth-header { margin-bottom: 0; }
.sec-block { border-top: 1px solid var(--border); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.sec-block h2 { font-family: var(--font-head); font-size: 19px; color: var(--navy); display: flex; align-items: center; gap: 8px; margin: 0; }
.sec-block p { margin: 0; }
.sec-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef1f6; color: #4b5873; }
.sec-chip.on { background: #e2f4ea; color: #17804a; }
.sec-alert { padding: 12px 14px; border-radius: 12px; background: #fdf0de; color: #8a5a06; font-weight: 600; margin: 0; }
.sec-small { font-size: 13px; }
.sec-row { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.sec-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.sec-inline input[type=text] { width: 170px; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 15px; letter-spacing: .08em; }
.sec-page .btn.btn-sm { padding: 8px 16px; font-size: 13px; border-radius: 999px; background: transparent; }
.sec-page .btn.btn-primary.btn-sm { background: var(--coral); }
.sec-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.sec-qr { margin: 10px 0 4px; width: 200px; max-width: 100%; }
.sec-qr svg { width: 100%; height: auto; display: block; }
.sec-key { word-break: break-all; font-size: 13px; }
.sec-codes { padding: 14px 16px; border-radius: 12px; background: #f4f7fb; border: 1px dashed var(--border); }
.sec-codes ol { columns: 2; margin: 10px 0 0; padding-left: 22px; }
.sec-codes code { font-size: 15px; letter-spacing: .06em; }
.sec-sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sec-sessions li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap; }
.sec-dev { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sec-dev small { font-size: 12px; }
.sec-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.sec-code-input { font-size: 22px !important; letter-spacing: .3em; text-align: center; }
.sec-other { text-align: center; margin-top: 14px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
.link-btn:hover { color: var(--navy); }

/* ===== The staff menu as a rail of sections (2026-10-26, the tawk.to way; _staff_nav.html) ==================
   On a computer: the sections as icons down the left, and beside them only the lines of the section being worked
   in (a click on another icon shows its lines). Collapsed, only the rail stays. A phone keeps the dropdown. */
.staff-nav .sn-rail, .staff-nav .sn-area { display: none; }
@media (min-width: 901px) {
  .admin-page:has(.staff-nav) { --railw: 288px; }
  .admin-page.is-rail:has(.staff-nav) { --railw: 76px; }
  .staff-nav .admin-nav-items { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: start; }
  .staff-nav .sn-rail { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 14px; position: sticky; top: 0;
    border-right: 1px solid rgba(255,255,255,.08); min-height: 100%; }
  .staff-nav .sn-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0 6px;
    padding: 10px 2px 9px; border: 0; border-radius: 11px; background: none; cursor: pointer; text-align: center;
    color: rgba(255,255,255,.6); font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.2; }
  .staff-nav .sn-tab i { font-size: 17px; }
  .staff-nav .sn-tab span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere; }
  /* an area of one line is a link on the rail: none of the menu lines' looks */
  .staff-nav a.sn-tab, .staff-nav a.sn-tab:hover, .staff-nav a.sn-tab.active { text-decoration: none; border: 0; margin: 0 6px;
    padding: 10px 2px 9px; border-radius: 11px; justify-content: flex-start; }
  .admin-page.is-rail .staff-nav a.sn-tab { margin: 0 6px; padding: 10px 2px 9px; }
  .admin-page.is-rail .staff-nav a.sn-tab span { display: -webkit-box; }
  /* Help and the Set-up gear, apart from the work areas */
  .staff-nav .sn-tab:not([data-low]) + .sn-tab[data-low] { margin-top: 12px; }
  .staff-nav .sn-tab:not([data-low]) + .sn-tab[data-low]::before { content: ""; position: absolute; top: -7px; left: 12px; right: 12px;
    border-top: 1px solid rgba(255,255,255,.12); }
  .staff-nav .sn-tab:hover { background: rgba(255,255,255,.07); color: #fff; }
  .staff-nav .sn-tab.on { background: rgba(47,128,237,.26); color: #fff; }
  .staff-nav .sn-tab:focus-visible { outline: 2px solid #2f80ed; outline-offset: 1px; }
  .staff-nav .sn-dot { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: #e5484d; color: #fff; font-size: 9.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; }
  .staff-nav .sn-panel { min-width: 0; }
  .staff-nav .sn-area { display: block; margin: 4px 12px 8px 16px; color: #fff; font-size: 15px; font-weight: 700; }
  .staff-nav .sn-head { display: none; }
  .staff-nav .sn-group { display: none; margin: 0; }
  .staff-nav .sn-group.current { display: block; }
  .staff-nav .sn-group.current .sn-items { display: block; }
  .staff-nav .sn-items a { padding: 9px 14px 9px 16px; }
  .staff-nav .sn-subhead { padding-left: 14px; }
  .staff-nav .sn-subitems a { padding-left: 26px; }
  .staff-nav .sn-find, .staff-nav .sn-global-results { margin-left: 12px; margin-right: 10px; }
  /* finding: every section with a match, its name over its lines */
  .staff-nav.is-finding .sn-group:not(.has-hit) { display: none; }
  .staff-nav.is-finding .sn-group.has-hit { display: block; }
  /* collapsed: the rail alone */
  .admin-page.is-rail .staff-nav .sn-who { display: none; }
  .admin-page.is-rail .staff-nav .admin-nav-items { grid-template-columns: 70px; padding-top: 40px; }
  .admin-page.is-rail .staff-nav .sn-panel { display: none; }
}

/* "+" in the staff header: make something new from any screen (base.html; Ctrl+Shift+K in main.js) */
.qc-dd { position: relative; }
.qc-btn { border: 0; background: none; cursor: pointer; }
.qc-dd.open > .qc-btn { background: rgba(255,255,255,0.16); color: #fff; }
.qc-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px; padding: 6px; border-radius: 12px;
  background: #fff; box-shadow: 0 12px 32px rgba(15,35,64,.22); display: flex; flex-direction: column; }
.qc-head { padding: 8px 10px 6px; font-size: 11.5px; font-weight: 700; color: #5b6b84; text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: 4px; }
.qc-head kbd, .qc-menu a kbd { font: 600 10.5px/1 ui-monospace, Consolas, monospace; padding: 3px 5px; border-radius: 5px;
  background: #eef2f8; color: #33415c; text-transform: none; letter-spacing: 0; }
.qc-head kbd:first-of-type { margin-left: auto; }
.qc-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: #0f2340; font-size: 14px;
  font-weight: 600; text-decoration: none; }
.qc-menu a i { width: 18px; text-align: center; color: #1f6fd6; }
.qc-menu a kbd { margin-left: auto; }
.qc-menu a:hover, .qc-menu a:focus-visible { background: #eef4fd; outline: none; }

@media (max-width: 600px) { .qc-dd { display: none; } }   /* a phone's header has no room: the menu has every page */
.sec-dev .sec-chip { align-self: flex-start; }