@charset "UTF-8";
/* =====================================================================
   TRNCHub — Design System
   ---------------------------------------------------------------------
   Loaded after Bootstrap 5.3. Everything here is either a design token,
   a component, or a small utility. Bootstrap handles the grid, the
   dropdown/offcanvas behaviour and the reboot; this file owns the look.

   Contents
     01  Tokens
     02  Base & typography
     03  Layout
     04  Buttons
     05  Forms & search
     06  Cards
     07  Badges, chips & pills
     08  Navigation (header, mega menu, breadcrumbs)
     09  Hero
     10  Sections & headings
     11  Media, gallery & maps
     12  Tables & pagination
     13  Alerts, modals & empty states
     14  Skeletons & loading
     15  Footer
     16  Animations
     17  Utilities
     18  Responsive
     19  Accessibility & print
   ===================================================================== */


/* =====================================================================
   01  TOKENS
   ===================================================================== */
:root {
  /* --- Brand palette ------------------------------------------------ */
  --th-primary:        #2563EB;
  --th-primary-hover:  #1D4ED8;
  --th-primary-active: #1E40AF;
  --th-primary-soft:   #EFF6FF;
  --th-primary-border: #BFDBFE;

  --th-secondary:      #10B981;
  --th-secondary-hover:#059669;
  --th-secondary-soft: #ECFDF5;

  --th-accent:         #F59E0B;
  --th-accent-hover:   #D97706;
  --th-accent-soft:    #FFFBEB;

  --th-danger:         #EF4444;
  --th-danger-hover:   #DC2626;
  --th-danger-soft:    #FEF2F2;

  --th-info:           #06B6D4;
  --th-info-soft:      #ECFEFF;

  /* --- Surfaces ----------------------------------------------------- */
  --th-bg:             #F8FAFC;
  --th-bg-subtle:      #F1F5F9;
  --th-surface:        #FFFFFF;
  --th-surface-raised: #FFFFFF;
  --th-border:         #E5E7EB;
  --th-border-strong:  #D1D5DB;

  /* --- Text --------------------------------------------------------- */
  --th-text:           #111827;
  --th-text-muted:     #6B7280;
  --th-text-subtle:    #9CA3AF;
  --th-text-invert:    #FFFFFF;

  /* --- Gradients ---------------------------------------------------- */
  --th-gradient-brand:  linear-gradient(135deg, #2563EB 0%, #4F46E5 55%, #7C3AED 100%);
  --th-gradient-ocean:  linear-gradient(135deg, #0EA5E9 0%, #2563EB 100%);
  --th-gradient-mint:   linear-gradient(135deg, #10B981 0%, #059669 100%);
  --th-gradient-sun:    linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
  --th-gradient-subtle: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);

  /* Hero mesh: three soft radial washes over the brand gradient.
     Gives the header depth without a background image request. */
  --th-mesh:
    radial-gradient(at 12% 18%, rgba(56, 189, 248, .40) 0px, transparent 52%),
    radial-gradient(at 88% 8%,  rgba(124, 58, 237, .38) 0px, transparent 50%),
    radial-gradient(at 62% 96%, rgba(16, 185, 129, .26) 0px, transparent 54%),
    linear-gradient(135deg, #1E3A8A 0%, #2563EB 58%, #4F46E5 100%);

  /* --- Radii -------------------------------------------------------- */
  --th-radius-xs:   8px;
  --th-radius-sm:  10px;
  --th-radius-md:  14px;   /* buttons, inputs */
  --th-radius-lg:  16px;   /* search bar */
  --th-radius-xl:  20px;   /* cards */
  --th-radius-2xl: 28px;   /* hero panels, feature blocks */
  --th-radius-pill: 999px;

  /* --- Shadows ------------------------------------------------------
     Two-layer shadows: a tight contact shadow plus a wide soft one.
     Nothing heavier than this anywhere in the UI. */
  --th-shadow-xs: 0 1px 2px rgba(17, 24, 39, .05);
  --th-shadow-sm: 0 1px 2px rgba(17, 24, 39, .04), 0 2px 8px rgba(17, 24, 39, .04);
  --th-shadow-md: 0 2px 4px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .06);
  --th-shadow-lg: 0 4px 8px rgba(17, 24, 39, .04), 0 16px 40px rgba(17, 24, 39, .08);
  --th-shadow-xl: 0 8px 16px rgba(17, 24, 39, .05), 0 28px 64px rgba(17, 24, 39, .12);
  --th-shadow-brand: 0 8px 24px rgba(37, 99, 235, .24);
  --th-shadow-focus: 0 0 0 4px rgba(37, 99, 235, .16);

  /* --- Typography --------------------------------------------------- */
  --th-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --th-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --th-text-xs:   0.75rem;    /* 12 */
  --th-text-sm:   0.8125rem;  /* 13 */
  --th-text-base: 0.9375rem;  /* 15 */
  --th-text-md:   1rem;       /* 16 */
  --th-text-lg:   1.125rem;   /* 18 */
  --th-text-xl:   1.375rem;   /* 22 */
  --th-text-2xl:  1.75rem;    /* 28 */
  --th-text-3xl:  2.25rem;    /* 36 */
  --th-text-4xl:  3rem;       /* 48 */
  --th-text-5xl:  3.75rem;    /* 60 */

  --th-leading-tight: 1.15;
  --th-leading-snug:  1.35;
  --th-leading-normal:1.6;
  --th-leading-loose: 1.75;

  --th-tracking-tight: -0.022em;
  --th-tracking-snug:  -0.012em;
  --th-tracking-wide:   0.04em;

  /* --- Spacing & layout --------------------------------------------- */
  --th-container: 1320px;
  --th-gutter:    1.5rem;
  --th-section-y: clamp(3.5rem, 7vw, 6rem);
  --th-header-h:  72px;

  /* --- Motion ------------------------------------------------------- */
  --th-ease:        cubic-bezier(.4, 0, .2, 1);
  --th-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --th-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --th-fast:   .15s;
  --th-normal: .25s;
  --th-slow:   .4s;

  /* --- Z-index scale ------------------------------------------------ */
  --th-z-sticky:  1020;
  --th-z-header:  1030;
  --th-z-dropdown:1040;
  --th-z-overlay: 1050;
  --th-z-modal:   1060;
  --th-z-toast:   1080;
}


/* =====================================================================
   02  BASE & TYPOGRAPHY
   ===================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sticky header must not cover the target of an in-page anchor. */
  scroll-padding-top: calc(var(--th-header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;

  /* Sideways scroll is never wanted. It has to be on <html> as well as
     <body> — on <body> alone most browsers ignore it, which is the usual
     reason a page still slides sideways on a phone. `clip` is preferred
     over `hidden` because `hidden` on <html> silently kills
     position: sticky further down the page. */
  overflow-x: clip;
}

/* Fallback for browsers without overflow: clip. */
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

body {
  margin: 0;
  background: var(--th-bg);
  color: var(--th-text);
  font-family: var(--th-font);
  font-size: var(--th-text-base);
  line-height: var(--th-leading-normal);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;

  /* Nothing may be wider than the screen. Long unbroken strings — a URL
     in a description, a pasted reference — are the usual culprit. */
  max-width: 100%;
}

/* Media and embeds are the other common cause of sideways scroll. */
img, svg, video, iframe, canvas, table {
  max-width: 100%;
}

/* Inter's variable weights, when the font is available. */
@supports (font-variation-settings: normal) {
  :root { --th-font: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
}

h1, h2, h3, h4, h5, h6,
.th-h1, .th-h2, .th-h3, .th-h4 {
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: var(--th-leading-tight);
  letter-spacing: var(--th-tracking-tight);
  color: var(--th-text);
  text-wrap: balance;
}

h1, .th-h1 { font-size: clamp(2rem, 4.4vw, var(--th-text-4xl)); }
h2, .th-h2 { font-size: clamp(1.625rem, 3.2vw, var(--th-text-3xl)); }
h3, .th-h3 { font-size: clamp(1.25rem, 2.2vw, var(--th-text-2xl)); }
h4, .th-h4 { font-size: var(--th-text-xl); letter-spacing: var(--th-tracking-snug); }
h5         { font-size: var(--th-text-lg); letter-spacing: var(--th-tracking-snug); }
h6         { font-size: var(--th-text-md); }

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(var(--th-text-md), 1.6vw, var(--th-text-lg));
  line-height: var(--th-leading-loose);
  color: var(--th-text-muted);
  font-weight: 400;
}

small, .th-small { font-size: var(--th-text-sm); }

a {
  color: var(--th-primary);
  text-decoration: none;
  transition: color var(--th-fast) var(--th-ease);
}
a:hover { color: var(--th-primary-hover); }

/* Links inside body copy keep an underline for legibility. */
.prose a,
.article-body a {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--th-primary-border);
}
.prose a:hover,
.article-body a:hover { text-decoration-color: currentColor; }

hr {
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background: var(--th-border);
  opacity: 1;
}

::selection {
  background: rgba(37, 99, 235, .16);
  color: var(--th-text);
}

/* Slim, unobtrusive scrollbars on desktop. */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--th-border-strong) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--th-border-strong);
    border: 3px solid var(--th-bg);
    border-radius: var(--th-radius-pill);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--th-text-subtle); }
}


/* =====================================================================
   03  LAYOUT
   ===================================================================== */

.container,
.container-lg,
.container-xl,
.container-xxl { max-width: var(--th-container); padding-inline: var(--th-gutter); }

.th-section { padding-block: var(--th-section-y); }
.th-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.th-section--flush-top { padding-top: 0; }
.th-section--alt { background: var(--th-surface); }
.th-section--subtle { background: var(--th-bg-subtle); }

.th-section--dark {
  background: var(--th-mesh);
  color: rgba(255, 255, 255, .88);
}
.th-section--dark h1,
.th-section--dark h2,
.th-section--dark h3 { color: #fff; }

/* Page wrapper keeps the footer down on short pages. */
.th-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.th-page > main { flex: 1 0 auto; }

/* Two-column listing layout: filters beside results. */
.th-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.th-layout--reverse { grid-template-columns: minmax(0, 1fr) 320px; }

.th-sidebar {
  position: sticky;
  top: calc(var(--th-header-h) + 1.25rem);
  max-height: calc(100vh - var(--th-header-h) - 2.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}


/* =====================================================================
   04  BUTTONS
   ===================================================================== */

.btn {
  --th-btn-bg: transparent;
  --th-btn-fg: var(--th-text);
  --th-btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6875rem 1.25rem;
  border: 1px solid var(--th-btn-border);
  border-radius: var(--th-radius-md);
  background: var(--th-btn-bg);
  color: var(--th-btn-fg);
  font-family: inherit;
  font-size: var(--th-text-base);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--th-fast) var(--th-ease),
    box-shadow var(--th-normal) var(--th-ease),
    background-color var(--th-fast) var(--th-ease),
    border-color var(--th-fast) var(--th-ease),
    color var(--th-fast) var(--th-ease);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--th-shadow-focus);
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn.disabled { opacity: .55; pointer-events: none; }

.btn i, .btn svg { flex-shrink: 0; font-size: 1.05em; }

/* --- Variants ------------------------------------------------------- */
.btn-primary {
  --th-btn-bg: var(--th-primary);
  --th-btn-fg: #fff;
  box-shadow: var(--th-shadow-brand);
}
.btn-primary:hover {
  --th-btn-bg: var(--th-primary-hover);
  box-shadow: 0 10px 28px rgba(37, 99, 235, .32);
  transform: translateY(-1px);
}
.btn-primary:active { --th-btn-bg: var(--th-primary-active); }

.btn-gradient {
  --th-btn-fg: #fff;
  background: var(--th-gradient-brand);
  background-size: 160% 160%;
  box-shadow: var(--th-shadow-brand);
}
.btn-gradient:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(79, 70, 229, .34);
}

.btn-secondary {
  --th-btn-bg: var(--th-secondary);
  --th-btn-fg: #fff;
  box-shadow: 0 8px 24px rgba(16, 185, 129, .22);
}
.btn-secondary:hover { --th-btn-bg: var(--th-secondary-hover); transform: translateY(-1px); }

.btn-accent {
  --th-btn-bg: var(--th-accent);
  --th-btn-fg: #fff;
  box-shadow: 0 8px 24px rgba(245, 158, 11, .24);
}
.btn-accent:hover { --th-btn-bg: var(--th-accent-hover); transform: translateY(-1px); }

.btn-danger  { --th-btn-bg: var(--th-danger); --th-btn-fg: #fff; }
.btn-danger:hover { --th-btn-bg: var(--th-danger-hover); }

.btn-outline {
  --th-btn-bg: var(--th-surface);
  --th-btn-fg: var(--th-text);
  --th-btn-border: var(--th-border);
  box-shadow: var(--th-shadow-xs);
}
.btn-outline:hover {
  --th-btn-border: var(--th-primary);
  --th-btn-fg: var(--th-primary);
  box-shadow: var(--th-shadow-sm);
  transform: translateY(-1px);
}

.btn-soft {
  --th-btn-bg: var(--th-primary-soft);
  --th-btn-fg: var(--th-primary-hover);
}
.btn-soft:hover { --th-btn-bg: var(--th-primary-border); }

.btn-ghost { --th-btn-fg: var(--th-text-muted); }
.btn-ghost:hover { --th-btn-bg: var(--th-bg-subtle); --th-btn-fg: var(--th-text); }

/* Glass button, for use over the hero image. */
.btn-glass {
  --th-btn-fg: #fff;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .26);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.btn-glass:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }

.btn-white { --th-btn-bg: #fff; --th-btn-fg: var(--th-primary); box-shadow: var(--th-shadow-md); }
.btn-white:hover { transform: translateY(-1px); box-shadow: var(--th-shadow-lg); }

/* --- Sizes ---------------------------------------------------------- */
.btn-sm  { padding: .5rem .875rem;   font-size: var(--th-text-sm);  border-radius: var(--th-radius-sm); }
.btn-lg  { padding: .875rem 1.75rem; font-size: var(--th-text-md);  border-radius: var(--th-radius-lg); }
.btn-xl  { padding: 1.0625rem 2.25rem; font-size: var(--th-text-lg); border-radius: var(--th-radius-lg); }
.btn-block { display: flex; width: 100%; }

/* --- Icon button ---------------------------------------------------- */
.btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--th-radius-md);
  font-size: 1.0625rem;
}
.btn-icon.btn-sm { width: 34px; height: 34px; font-size: .9375rem; }
.btn-icon.btn-round { border-radius: var(--th-radius-pill); }

/* --- Loading state -------------------------------------------------- */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.125em;
  height: 1.125em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: th-spin .6s linear infinite;
}
.btn-outline.is-loading::after,
.btn-ghost.is-loading::after { color: var(--th-primary); }


/* =====================================================================
   05  FORMS & SEARCH
   ===================================================================== */

.form-label {
  display: block;
  margin-bottom: .4375rem;
  font-size: var(--th-text-sm);
  font-weight: 600;
  color: var(--th-text);
  letter-spacing: -.005em;
}
.form-label .req { color: var(--th-danger); margin-left: .125rem; }

.form-control,
.form-select,
textarea.form-control {
  width: 100%;
  padding: .6875rem .9375rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-md);
  background: var(--th-surface);
  color: var(--th-text);
  font-family: inherit;
  font-size: var(--th-text-base);
  line-height: 1.4;
  transition:
    border-color var(--th-fast) var(--th-ease),
    box-shadow var(--th-fast) var(--th-ease),
    background-color var(--th-fast) var(--th-ease);
  appearance: none;
}

.form-control::placeholder { color: var(--th-text-subtle); }

.form-control:hover,
.form-select:hover { border-color: var(--th-border-strong); }

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--th-primary);
  box-shadow: var(--th-shadow-focus);
}

.form-control:disabled,
.form-select:disabled { background: var(--th-bg-subtle); color: var(--th-text-subtle); cursor: not-allowed; }

textarea.form-control { min-height: 120px; resize: vertical; line-height: var(--th-leading-normal); }

/* Custom select chevron — no browser default arrow. */
.form-select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9375rem center;
  background-size: 16px;
}

.form-control-lg,
.form-select-lg { padding: .875rem 1.125rem; font-size: var(--th-text-md); border-radius: var(--th-radius-lg); }
.form-control-sm { padding: .5rem .75rem; font-size: var(--th-text-sm); border-radius: var(--th-radius-sm); }

.form-hint {
  display: block;
  margin-top: .375rem;
  font-size: var(--th-text-xs);
  color: var(--th-text-muted);
}

.is-invalid,
.form-control.is-invalid { border-color: var(--th-danger); }
.is-invalid:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, .14); }
.invalid-feedback {
  display: block;
  margin-top: .375rem;
  font-size: var(--th-text-xs);
  color: var(--th-danger-hover);
}

/* --- Input group with a leading icon --------------------------------- */
.th-field { position: relative; }
.th-field > i.field-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  translate: 0 -50%;
  color: var(--th-text-subtle);
  font-size: 1.0625rem;
  pointer-events: none;
  transition: color var(--th-fast) var(--th-ease);
}
.th-field > .form-control,
.th-field > .form-select { padding-left: 2.75rem; }
.th-field:focus-within > i.field-icon { color: var(--th-primary); }

/* --- Checkbox & radio ------------------------------------------------ */
.form-check {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: 0;
  margin-bottom: .5rem;
  cursor: pointer;
}
.form-check-input {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1.5px solid var(--th-border-strong);
  border-radius: 6px;
  background: var(--th-surface);
  cursor: pointer;
  appearance: none;
  transition: all var(--th-fast) var(--th-ease);
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
  border-color: var(--th-primary);
  background: var(--th-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
}
.form-check-input[type="radio"]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 4px var(--th-surface);
}
.form-check-input:focus-visible { outline: none; box-shadow: var(--th-shadow-focus); }
.form-check-label { font-size: var(--th-text-base); color: var(--th-text); cursor: pointer; user-select: none; }

/* --- Switch ---------------------------------------------------------- */
.form-switch .form-check-input {
  width: 2.5rem;
  height: 1.375rem;
  border-radius: var(--th-radius-pill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle r='3' cx='4' cy='4' fill='%23fff'/%3E%3C/svg%3E");
  background-position: left .1875rem center;
  background-size: 1rem;
  transition: background-position var(--th-normal) var(--th-ease), background-color var(--th-fast) var(--th-ease);
}
.form-switch .form-check-input:checked { background-position: right .1875rem center; }

/* --- Filter chip checkbox (pill that looks selected) ------------------ */
.th-chip-check { position: relative; display: inline-block; }
.th-chip-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.th-chip-check span {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4375rem .875rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-pill);
  background: var(--th-surface);
  font-size: var(--th-text-sm);
  font-weight: 500;
  color: var(--th-text-muted);
  cursor: pointer;
  transition: all var(--th-fast) var(--th-ease);
}
.th-chip-check span:hover { border-color: var(--th-primary-border); color: var(--th-text); }
.th-chip-check input:checked + span {
  border-color: var(--th-primary);
  background: var(--th-primary-soft);
  color: var(--th-primary-hover);
  font-weight: 600;
}
.th-chip-check input:focus-visible + span { box-shadow: var(--th-shadow-focus); }

/* --- Universal search bar -------------------------------------------- */
.th-search {
  display: flex;
  align-items: stretch;
  gap: .375rem;
  padding: .375rem;
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  box-shadow: var(--th-shadow-lg);
}
.th-search__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.th-search__field + .th-search__field { border-left: 1px solid var(--th-border); }
.th-search__field > i {
  margin-inline: .875rem .25rem;
  color: var(--th-text-subtle);
  font-size: 1.0625rem;
  flex-shrink: 0;
}
.th-search__field input,
.th-search__field select {
  width: 100%;
  min-width: 0;
  padding: .8125rem .5rem;
  border: 0;
  background: transparent;
  color: var(--th-text);
  font-family: inherit;
  font-size: var(--th-text-base);
  font-weight: 500;
  appearance: none;
}
.th-search__field input:focus,
.th-search__field select:focus { outline: none; }
.th-search__field input::placeholder { color: var(--th-text-subtle); font-weight: 400; }
.th-search .btn { border-radius: var(--th-radius-md); padding-inline: 1.5rem; }

/* Tabs above the search bar (Properties / Jobs / News / Businesses). */
.th-search-tabs {
  display: inline-flex;
  gap: .25rem;
  padding: .3125rem;
  margin-bottom: 1rem;
  border-radius: var(--th-radius-pill);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.th-search-tab {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .5rem 1.0625rem;
  border: 0;
  border-radius: var(--th-radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font-family: inherit;
  font-size: var(--th-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--th-normal) var(--th-ease);
}
.th-search-tab:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.th-search-tab.is-active {
  background: #fff;
  color: var(--th-primary);
  box-shadow: var(--th-shadow-sm);
}

/* --- Autocomplete dropdown ------------------------------------------- */
.th-autocomplete {
  position: absolute;
  z-index: var(--th-z-dropdown);
  top: calc(100% + .5rem);
  left: 0;
  right: 0;
  max-height: 22rem;
  overflow-y: auto;
  padding: .5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  box-shadow: var(--th-shadow-xl);
}
.th-autocomplete__group {
  padding: .5rem .75rem .25rem;
  font-size: var(--th-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--th-tracking-wide);
  color: var(--th-text-subtle);
}
.th-autocomplete__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  border-radius: var(--th-radius-sm);
  color: var(--th-text);
  cursor: pointer;
  transition: background-color var(--th-fast) var(--th-ease);
}
.th-autocomplete__item:hover,
.th-autocomplete__item.is-active { background: var(--th-primary-soft); color: var(--th-primary-hover); }
.th-autocomplete__item img {
  width: 40px; height: 40px;
  border-radius: var(--th-radius-xs);
  object-fit: cover;
  flex-shrink: 0;
}


/* =====================================================================
   06  CARDS
   ===================================================================== */

.th-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-xl);
  background: var(--th-surface);
  box-shadow: var(--th-shadow-sm);
  overflow: hidden;
  transition:
    transform var(--th-normal) var(--th-ease-out),
    box-shadow var(--th-normal) var(--th-ease-out),
    border-color var(--th-normal) var(--th-ease);
}
.th-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--th-shadow-lg);
  border-color: transparent;
}

.th-card--flat { box-shadow: none; }
.th-card--flat:hover { transform: none; box-shadow: var(--th-shadow-sm); }
.th-card--plain:hover { transform: none; }

/* Media area with a fixed aspect ratio, so nothing shifts on load. */
.th-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--th-bg-subtle);
}
.th-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--th-slow) var(--th-ease-out);
}
.th-card:hover .th-card__media img { transform: scale(1.055); }

.th-card__media--wide  { aspect-ratio: 16 / 9; }
.th-card__media--square{ aspect-ratio: 1 / 1; }

/* Gradient scrim so white text stays legible over any photo. */
.th-card__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(17, 24, 39, .72) 0%, rgba(17, 24, 39, 0) 100%);
  pointer-events: none;
}

.th-card__body { flex: 1 1 auto; padding: 1.25rem; }
.th-card__footer {
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--th-border);
  background: var(--th-bg);
}

.th-card__title {
  margin: 0 0 .375rem;
  font-size: var(--th-text-md);
  font-weight: 650;
  line-height: var(--th-leading-snug);
  letter-spacing: var(--th-tracking-snug);
}
.th-card__title a { color: inherit; }
.th-card__title a:hover { color: var(--th-primary); }

/* Clamp titles to two lines so cards in a row stay the same height. */
.th-clamp-1,
.th-clamp-2,
.th-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.th-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.th-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.th-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

.th-card__meta {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--th-text-sm);
  color: var(--th-text-muted);
}
.th-card__meta i { font-size: .9375rem; }

/* Price block on a property card. */
.th-card__price {
  font-size: var(--th-text-lg);
  font-weight: 750;
  letter-spacing: var(--th-tracking-tight);
  color: var(--th-text);
}
.th-card__price .price-period {
  font-size: var(--th-text-sm);
  font-weight: 500;
  color: var(--th-text-muted);
}

/* Feature strip: beds / baths / area. */
.th-features {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1rem;
  padding-top: .875rem;
  margin-top: .875rem;
  border-top: 1px solid var(--th-border);
  font-size: var(--th-text-sm);
  color: var(--th-text-muted);
}
.th-features span { display: inline-flex; align-items: center; gap: .375rem; }
.th-features i { color: var(--th-text-subtle); font-size: 1rem; }

/* Floating controls on the media area. */
.th-card__actions {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  z-index: 2;
}
.th-fav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--th-text-muted);
  font-size: 1rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--th-shadow-sm);
  transition: all var(--th-fast) var(--th-ease-spring);
}
.th-fav:hover { transform: scale(1.1); color: var(--th-danger); }
.th-fav.is-active { color: var(--th-danger); }
.th-fav.is-active i::before { content: "\F415"; } /* bi-heart-fill */

.th-card__badges {
  position: absolute;
  top: .75rem;
  left: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  z-index: 2;
  max-width: calc(100% - 4rem);
}

/* Horizontal card, used in list view and sidebars. */
.th-card--row {
  flex-direction: row;
  align-items: stretch;
}
.th-card--row .th-card__media {
  flex: 0 0 min(38%, 280px);
  aspect-ratio: auto;
}
.th-card--row .th-card__body { display: flex; flex-direction: column; }

/* Compact list item, e.g. popular articles in the sidebar. */
.th-mini {
  display: flex;
  gap: .875rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--th-border);
}
.th-mini:last-child { border-bottom: 0; }
.th-mini img {
  flex-shrink: 0;
  width: 72px;
  height: 56px;
  border-radius: var(--th-radius-sm);
  object-fit: cover;
}
.th-mini__title {
  font-size: var(--th-text-sm);
  font-weight: 600;
  line-height: var(--th-leading-snug);
  margin-bottom: .1875rem;
}

/* Category tile. */
.th-tile {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-xl);
  background: var(--th-surface);
  color: var(--th-text);
  text-align: left;
  transition: all var(--th-normal) var(--th-ease-out);
}
.th-tile:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--th-shadow-lg);
  color: var(--th-text);
}
.th-tile__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--th-radius-md);
  background: var(--th-primary-soft);
  color: var(--th-primary);
  font-size: 1.375rem;
  transition: all var(--th-normal) var(--th-ease);
}
.th-tile:hover .th-tile__icon {
  background: var(--th-gradient-brand);
  color: #fff;
  transform: scale(1.06) rotate(-4deg);
}
.th-tile__name { font-weight: 650; font-size: var(--th-text-md); letter-spacing: var(--th-tracking-snug); }
.th-tile__count { font-size: var(--th-text-sm); color: var(--th-text-muted); }

/* City tile with a photo background. */
.th-city {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--th-radius-xl);
  overflow: hidden;
  color: #fff;
  box-shadow: var(--th-shadow-md);
}
/* <picture> is an inline wrapper by default and would not fill the tile;
   the image inside it needs the size, not the picture element. */
.th-city picture { display: block; width: 100%; height: 100%; }

.th-city img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* cropped to the tile, never distorted */
  display: block;
  transition: transform var(--th-slow) var(--th-ease-out);
}

/* Zoom on hover only. Touch devices have no hover state, so on a phone
   the "hover" would latch after a tap and stay zoomed. */
@media (hover: hover) and (pointer: fine) {
  .th-city:hover img { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .th-city img { transition: none; }
  .th-city:hover img { transform: none; }
}

/* The gradient. Stronger at the base where the name sits, clear at the
   top so the photograph is still visible as a photograph. */
.th-city::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(17, 24, 39, .82) 0%,
    rgba(17, 24, 39, .35) 42%,
    rgba(17, 24, 39, .08) 70%,
    transparent 100%);
  pointer-events: none;
}

/* No photograph yet. A flat brand gradient with a faint mark reads as a
   deliberate design rather than a missing image. */
.th-city__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--th-gradient-ocean);
}
.th-city__placeholder::before {
  content: "\F3E9";                       /* bi-geo-alt-fill */
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -60%;
  font-family: "bootstrap-icons";
  font-size: 2rem;
  color: rgba(255, 255, 255, .28);
}
.th-city__label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 1.125rem;
  color: #fff;
}
.th-city__name { font-size: var(--th-text-lg); font-weight: 700; letter-spacing: var(--th-tracking-snug); }
.th-city__count { font-size: var(--th-text-sm); opacity: .85; }
.th-city--wide { aspect-ratio: 16 / 10; }

/* Statistic block. */
.th-stat { text-align: center; }
.th-stat__value {
  font-size: clamp(2rem, 4vw, var(--th-text-3xl));
  font-weight: 750;
  letter-spacing: var(--th-tracking-tight);
  line-height: 1.1;
  background: var(--th-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.th-section--dark .th-stat__value { background: none; color: #fff; }
.th-stat__label {
  margin-top: .25rem;
  font-size: var(--th-text-sm);
  font-weight: 500;
  color: var(--th-text-muted);
}
.th-section--dark .th-stat__label { color: rgba(255, 255, 255, .72); }

/* Glass panel, used sparingly over the hero mesh. */
.th-glass {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--th-radius-xl);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 8px 32px rgba(17, 24, 39, .16);
}


/* =====================================================================
   07  BADGES, CHIPS & PILLS
   ===================================================================== */

.th-badge {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .3125rem .625rem;
  border-radius: var(--th-radius-xs);
  background: var(--th-bg-subtle);
  color: var(--th-text-muted);
  font-size: var(--th-text-xs);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
}
.th-badge i { font-size: .875rem; }

.th-badge--primary   { background: var(--th-primary-soft);   color: var(--th-primary-hover); }
.th-badge--secondary { background: var(--th-secondary-soft); color: var(--th-secondary-hover); }
.th-badge--accent    { background: var(--th-accent-soft);    color: var(--th-accent-hover); }
.th-badge--danger    { background: var(--th-danger-soft);    color: var(--th-danger-hover); }
.th-badge--info      { background: var(--th-info-soft);      color: #0E7490; }

/* Solid badges for card corners, readable over any photo. */
.th-badge--solid  { background: rgba(17, 24, 39, .78); color: #fff; backdrop-filter: blur(8px); }
.th-badge--is-accent { background: var(--th-accent); color: #fff; }
.th-badge--is-danger { background: var(--th-danger); color: #fff; }
.th-badge--is-muted  { background: rgba(17, 24, 39, .62); color: #fff; }

.th-badge--pill { border-radius: var(--th-radius-pill); padding-inline: .75rem; }
.th-badge--lg   { padding: .4375rem .875rem; font-size: var(--th-text-sm); }

/* Verified tick. */
.th-verified { color: var(--th-primary); font-size: .875em; vertical-align: baseline; }

/* Removable filter chip. */
.th-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border: 1px solid var(--th-primary-border);
  border-radius: var(--th-radius-pill);
  background: var(--th-primary-soft);
  color: var(--th-primary-hover);
  font-size: var(--th-text-sm);
  font-weight: 500;
}
.th-chip button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(37, 99, 235, .18);
  color: inherit;
  font-size: .625rem;
  cursor: pointer;
  transition: background-color var(--th-fast) var(--th-ease);
}
.th-chip button:hover { background: var(--th-primary); color: #fff; }

/* Star rating. */
.rating-stars { display: inline-flex; gap: .0625rem; color: var(--th-accent); font-size: .875rem; }
.rating-stars.sm { font-size: .75rem; }
.rating-stars.lg { font-size: 1.125rem; }


/* =====================================================================
   08  NAVIGATION
   ===================================================================== */

.th-header {
  position: sticky;
  top: 0;
  z-index: var(--th-z-header);
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  transition: box-shadow var(--th-normal) var(--th-ease),
              border-color var(--th-normal) var(--th-ease),
              background-color var(--th-normal) var(--th-ease);
}
.th-header.is-scrolled {
  border-bottom-color: var(--th-border);
  box-shadow: var(--th-shadow-sm);
  background: rgba(255, 255, 255, .94);
}

/* Transparent header sitting over the hero, until the user scrolls. */
.th-header--overlay {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.th-header--overlay .th-nav__link,
.th-header--overlay .th-logo { color: #fff; }
.th-header--overlay.is-scrolled {
  position: sticky;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.th-header--overlay.is-scrolled .th-nav__link { color: var(--th-text-muted); }
.th-header--overlay.is-scrolled .th-logo { color: var(--th-text); }

.th-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--th-header-h);
}

.th-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -.03em;
  color: var(--th-text);
  flex-shrink: 0;
}
.th-logo:hover { color: var(--th-primary); }

/* A supplied logo file. Height is fixed and width follows the aspect
   ratio, so any reasonable proportion drops in without distortion. */
.th-logo__img {
  height: 34px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

/* Square emblem. A 1:1 logo at 34px reads as a favicon, so it is given
   a little more room and the site name is set beside it — the standard
   lockup for a mark that does not contain the name itself. */
.th-logo__img--mark {
  height: 40px;
  width: 40px;
  max-width: none;
  border-radius: 9px;
  flex-shrink: 0;
}

.th-logo__name {
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -.03em;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .th-logo__img       { height: 28px; max-width: 150px; }
  .th-logo__img--mark { height: 34px; width: 34px; }
  .th-logo__name      { font-size: 1.0625rem; }
}

/* Very narrow phones: the emblem alone, so the logo never pushes the
   burger menu off the edge. */
@media (max-width: 359.98px) {
  .th-logo__name { display: none; }
}
/* =====================================================================
   LOCATION HERO  (includes/hero.php)
   ===================================================================== */
.th-hero-img {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--th-text);   /* shows while the image decodes */
  isolation: isolate;
}

.th-hero-img--sm { min-height: clamp(200px, 26vw, 300px); }
.th-hero-img--md { min-height: clamp(280px, 34vw, 420px); }
.th-hero-img--lg { min-height: clamp(360px, 48vw, 580px); }

.th-hero-img__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.th-hero-img__img {
  width: 100%;
  height: 100%;
  /* cover, never contain or fill: the image is cropped to the box and
     is never stretched out of proportion. object-position is set inline
     from the focal point stored with each image. */
  object-fit: cover;
  display: block;
  /* Fades in on load. Starting at 0 rather than animating a wrapper
     means no layout shift and nothing to reserve space for. */
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .7s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
.th-hero-img.is-loaded .th-hero-img__img { opacity: 1; transform: none; }

/* Cached images fire onload before the class can attach; without this
   a repeat visit shows a permanently invisible hero. */
.th-hero-img__img[src] { animation: th-hero-safety 0s linear 2s forwards; }
@keyframes th-hero-safety { to { opacity: 1; transform: none; } }

.th-hero-img__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Stronger at the bottom, where the text sits, and lighter at the top
     so the photograph is still legible as a photograph. */
  background:
    linear-gradient(180deg,
      rgba(17, 24, 39, calc(var(--th-hero-overlay, .45) * .55)) 0%,
      rgba(17, 24, 39, calc(var(--th-hero-overlay, .45) * .85)) 55%,
      rgba(17, 24, 39, calc(var(--th-hero-overlay, .45) * 1.15)) 100%);
}

.th-hero-img__inner {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  color: #fff;
  max-width: 100%;
}
.th-hero-img__inner--center { text-align: center; }
.th-hero-img__inner--center .th-hero-img__subtitle { margin-inline: auto; }

.th-hero-img__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .75rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--th-tracking-wide);
  text-transform: uppercase;
}

.th-hero-img__title {
  margin: 0 0 .75rem;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: #fff;
  /* A shadow rather than a heavier scrim: it keeps the text readable
     over a bright patch without dulling the whole photograph. */
  text-shadow: 0 2px 20px rgba(17, 24, 39, .45);
}

.th-hero-img__subtitle {
  max-width: 52ch;
  margin: 0;
  font-size: clamp(.9375rem, 1.6vw, 1.125rem);
  line-height: var(--th-leading-loose);
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 12px rgba(17, 24, 39, .4);
}

.th-hero-img__slot { margin-top: 1.5rem; }

.th-hero-img__credit {
  position: absolute;
  right: .75rem;
  bottom: .5rem;
  font-size: .625rem;
  color: rgba(255, 255, 255, .55);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
  .th-hero-img__img { transition: opacity .2s linear; transform: none; }
  .th-hero-img.is-loaded .th-hero-img__img { transform: none; }
}


/* =====================================================================
   EMPLOYER PORTAL  (/employer)
   ===================================================================== */
.th-emp {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.th-emp__nav  { position: sticky; top: calc(var(--th-header-h) + 1.25rem); }
.th-emp__main { min-width: 0; }

@media (max-width: 991.98px) {
  .th-emp { grid-template-columns: minmax(0, 1fr); }
  .th-emp__nav { position: static; }
}

.th-emp__link {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: var(--th-radius-sm);
  color: var(--th-text-muted);
  font-size: .875rem;
  font-weight: 550;
  text-decoration: none;
  transition: background var(--th-transition), color var(--th-transition);
}
.th-emp__link:hover { background: var(--th-bg-subtle); color: var(--th-text); }
.th-emp__link.is-active { background: var(--th-primary-soft); color: var(--th-primary); }
.th-emp__link i { width: 1.125rem; flex-shrink: 0; }
.th-emp__link > span:first-of-type { flex: 1 1 auto; min-width: 0; }


/* Stat tiles. */
.th-grid--stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }

.th-stat-tile { text-decoration: none; color: inherit; transition: transform var(--th-transition); }
a.th-stat-tile:hover { transform: translateY(-2px); }
.th-stat-tile__icon  { font-size: 1.25rem; color: var(--th-text-subtle); }
.th-stat-tile__value { font-size: 1.75rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; margin-top: .5rem; }
.th-stat-tile__label { font-size: .75rem; color: var(--th-text-muted); }


/* Pipeline strip. */
.th-pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .5rem; }

.th-pipeline__stage {
  display: block;
  padding: .875rem .5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-md);
  text-align: center;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--th-transition), background var(--th-transition);
}
.th-pipeline__stage:hover { border-color: var(--th-primary); background: var(--th-primary-soft); }
.th-pipeline__stage.is-empty { opacity: .5; }
.th-pipeline__count { display: block; font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.th-pipeline__label { display: block; font-size: .6875rem; color: var(--th-text-muted); margin-top: .2rem; }


/* Job row. */
.th-jobrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.25rem; align-items: center; }
.th-jobrow__stats { display: flex; gap: 1.25rem; text-align: center; }
.th-jobrow__stats strong { display: block; font-size: 1.125rem; font-weight: 700; }
.th-jobrow__stats span   { font-size: .6875rem; color: var(--th-text-subtle); }
.th-jobrow__stats a      { color: inherit; text-decoration: none; }
.th-jobrow__stats a:hover strong { color: var(--th-primary); }

@media (max-width: 767.98px) {
  .th-jobrow { grid-template-columns: minmax(0, 1fr); gap: .875rem; }
  .th-jobrow__stats { justify-content: flex-start; }
}


/* A <details> used as a dropdown. No JS, and Escape closes it natively. */
.th-menu-more { position: relative; }
.th-menu-more > summary { list-style: none; cursor: pointer; }
.th-menu-more > summary::-webkit-details-marker { display: none; }

.th-menu-more__panel {
  position: absolute;
  right: 0;
  top: calc(100% + .35rem);
  z-index: 20;
  min-width: 170px;
  padding: .3rem;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-md);
  box-shadow: var(--th-shadow-lg);
}
.th-menu-more__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .625rem;
  border: 0;
  border-radius: var(--th-radius-sm);
  background: none;
  color: var(--th-text);
  font-size: .8125rem;
  text-align: left;
  cursor: pointer;
}
.th-menu-more__item:hover { background: var(--th-bg-subtle); }


/* Bulk action bar. */
.th-bulkbar {
  position: sticky;
  bottom: 1rem;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: var(--th-surface);
  border: 1px solid var(--th-primary);
  border-radius: var(--th-radius-lg);
  box-shadow: var(--th-shadow-lg);
}


/* ---------------------------------------------------------------------
   Segmented tabs — .th-tabs / .th-tab
   ---------------------------------------------------------------------
   These classes were in the markup of ten pages (the three owner
   portals and the member Messages screen) and had NO rule anywhere in
   either stylesheet. They rendered as bare inline links: no spacing, no
   active state, no hit area, and on a phone three words running into
   each other with nothing to aim a thumb at.

   Purely additive, so it cannot change an existing appearance — there
   was none to change.

   Scrolls horizontally rather than wrapping, because a tab strip that
   reflows to two lines moves the tab under the finger between taps.
   The scrollbar is hidden but the strip still scrolls.
   --------------------------------------------------------------------- */
.th-tabs {
  display: flex;
  gap: .25rem;
  padding: .25rem;
  background: var(--th-bg-subtle);
  border-radius: var(--th-radius-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.th-tabs::-webkit-scrollbar { display: none; }

.th-tab {
  flex: 1 0 auto;
  padding: .5rem .875rem;
  border-radius: var(--th-radius-sm);
  font-size: var(--th-text-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--th-text-muted);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  /* 44px total height at this font size — the minimum comfortable
     touch target, and the reason for the padding rather than a margin. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.th-tab:hover { color: var(--th-primary); }

.th-tab.is-active {
  background: var(--th-surface);
  color: var(--th-primary);
  box-shadow: var(--th-shadow-sm, 0 1px 2px rgb(0 0 0 / .08));
}

@media (prefers-reduced-motion: reduce) {
  .th-tab { transition: none; }
}


/* Applicant table. New rows are tinted so triage is visual. */
.th-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.th-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.th-table th {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--th-border);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--th-text-subtle);
  text-align: left;
  white-space: nowrap;
}
.th-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--th-border); vertical-align: middle; }
.th-table tbody tr:last-child td { border-bottom: 0; }
.th-table tbody tr.is-new { background: color-mix(in srgb, var(--th-primary) 4%, transparent); }
.th-table__check   { width: 40px; }
.th-table__actions { width: 1%; white-space: nowrap; text-align: right; }

/* Same card treatment the admin tables get on a phone, same reasoning. */
@media (max-width: 767.98px) {
  .th-table, .th-table tbody, .th-table tr, .th-table td { display: block; width: 100%; }
  .th-table thead { display: none; }

  .th-table tbody tr {
    position: relative;
    margin-bottom: .75rem;
    padding: .5rem .25rem;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-md);
  }

  .th-table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem .75rem;
    border: 0;
    text-align: right;
  }
  .th-table td::before {
    content: attr(data-label);
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--th-text-subtle);
    text-align: left;
  }
  .th-table td[data-label=""]::before { content: none; }

  .th-table__check { position: absolute; top: .5rem; right: .5rem; padding: 0; }
  .th-table td:first-of-type ~ td:first-of-type { text-align: left; }
}


/* CV block. */
.th-cv {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1rem;
  background: var(--th-bg-subtle);
  border-radius: var(--th-radius-md);
  flex-wrap: wrap;
}
.th-cv > i { font-size: 1.75rem; color: var(--th-primary); }
.th-cv__preview { width: 100%; height: 70vh; margin-top: .75rem; border: 1px solid var(--th-border); border-radius: var(--th-radius-md); }


/* Definition list for contact details. */
.th-deflist { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; margin: 0; }
.th-deflist dt { font-size: .75rem; color: var(--th-text-subtle); text-transform: uppercase; letter-spacing: .04em; }
.th-deflist dd { margin: 0; font-size: .9375rem; overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
  .th-deflist { grid-template-columns: minmax(0, 1fr); gap: .15rem .5rem; }
  .th-deflist dd { margin-bottom: .6rem; }
}


/* Unread dot. */
.th-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--th-primary); flex-shrink: 0; }

/* Scrollable tab strip, reused by several employer pages. */
.th-tabs--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.th-tabs--scroll::-webkit-scrollbar { display: none; }
.th-tabs--scroll > * { flex-shrink: 0; }


/* =====================================================================
   AVAILABILITY CALENDAR  (property-owner/availability.php)
   ===================================================================== */
.th-cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.th-cal__title { font-size: .9375rem; font-weight: 650; margin: 0 0 .5rem; }

.th-cal__week,
.th-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.th-cal__week abbr {
  text-align: center;
  font-size: .625rem;
  font-weight: 700;
  color: var(--th-text-subtle);
  text-decoration: none;
  padding-bottom: .25rem;
}

.th-cal__day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 6px;
  font-size: .75rem;
  background: var(--th-bg-subtle);
}
.th-cal__day--blank   { background: none; }
.th-cal__day--booked  { background: var(--th-danger);    color: #fff; }
.th-cal__day--blocked { background: var(--th-text-subtle); color: #fff; }
.th-cal__day--available,
.th-cal__day--free    { background: var(--th-bg-subtle); }
.th-cal__day.is-past  { opacity: .35; }

.th-cal__key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--th-bg-subtle);
  vertical-align: -1px;
}
.th-cal__key--booked  { background: var(--th-danger); }
.th-cal__key--blocked { background: var(--th-text-subtle); }
.th-cal__key--free,
.th-cal__key--available { background: var(--th-bg-subtle); border: 1px solid var(--th-border); }


/* =====================================================================
   BUSINESS OWNER PORTAL
   ===================================================================== */

/* Upload drop zone. */
.th-dropzone {
  border: 2px dashed var(--th-border);
  border-radius: var(--th-radius-lg);
  transition: border-color var(--th-transition), background var(--th-transition);
}
.th-dropzone.is-over { border-color: var(--th-primary); background: var(--th-primary-soft); }

.th-dropzone__label {
  display: grid;
  place-items: center;
  gap: .35rem;
  padding: 2.25rem 1rem;
  cursor: pointer;
  text-align: center;
}
.th-dropzone__label i    { font-size: 2rem; color: var(--th-text-subtle); }
.th-dropzone__label span { font-size: .75rem; color: var(--th-text-subtle); }

.th-dropzone__preview { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.th-dropzone__preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--th-radius-sm);
}

/* Gallery grid. */
.th-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
}

.th-gallery-item {
  position: relative;
  margin: 0;
  border-radius: var(--th-radius-md);
  overflow: hidden;
  background: var(--th-bg-subtle);
  cursor: grab;
}
.th-gallery-item.is-dragging { opacity: .4; cursor: grabbing; }
.th-gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.th-gallery-item figcaption {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .5rem;
  background: var(--th-surface);
}
.th-gallery-item__handle { color: var(--th-text-subtle); cursor: grab; }

.th-gallery-item__actions {
  position: absolute;
  top: .35rem;
  right: .35rem;
  display: flex;
  gap: .25rem;
  opacity: 0;
  transition: opacity var(--th-transition);
}
.th-gallery-item:hover .th-gallery-item__actions,
.th-gallery-item:focus-within .th-gallery-item__actions { opacity: 1; }
.th-gallery-item__actions .th-icon-btn {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(4px);
}

/* Touch devices have no hover, so the controls must always be there. */
@media (hover: none) {
  .th-gallery-item__actions { opacity: 1; }
}

/* Opening hours rows. */
.th-hours-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--th-border);
}
.th-hours-row:last-of-type { border-bottom: 0; }
.th-hours-row__day   { flex: 0 0 6.5rem; font-size: .875rem; font-weight: 600; }
.th-hours-row__times { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.th-hours-row__times input { width: auto; min-width: 7rem; }
.th-hours-row__times span  { font-size: .8125rem; color: var(--th-text-subtle); }

.th-hours-row__split > summary {
  list-style: none;
  cursor: pointer;
  color: var(--th-text-subtle);
}
.th-hours-row__split > summary::-webkit-details-marker { display: none; }
.th-hours-row__split[open] > summary { color: var(--th-primary); }

@media (max-width: 575.98px) {
  .th-hours-row__day   { flex-basis: 100%; }
  .th-hours-row__times { width: 100%; }
  .th-hours-row__times input { flex: 1 1 6rem; min-width: 0; }
}

/* Owner reply on a review. */
.th-reply {
  margin-top: .75rem;
  padding: .75rem .875rem;
  border-left: 3px solid var(--th-primary);
  border-radius: 0 var(--th-radius-sm) var(--th-radius-sm) 0;
  background: var(--th-bg-subtle);
}

/* Ownership timeline. */
.th-timeline { list-style: none; margin: 0; padding: 0; }
.th-timeline > li {
  position: relative;
  padding: 0 0 1.25rem 1.25rem;
  border-left: 2px solid var(--th-border);
}
.th-timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.th-timeline > li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: .3rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--th-primary);
}

/* Admin user picker. */
.ad-usersearch {
  margin-top: .5rem;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-md);
  background: var(--th-surface);
}
.ad-usersearch__item {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .6rem .75rem;
  border: 0;
  border-bottom: 1px solid var(--th-border);
  background: none;
  color: var(--th-text);
  text-align: left;
  cursor: pointer;
}
.ad-usersearch__item:last-child { border-bottom: 0; }
.ad-usersearch__item:hover { background: var(--th-bg-subtle); }
.ad-usersearch__item img { border-radius: 50%; flex-shrink: 0; }
.ad-usersearch__item strong { display: block; font-size: .875rem; }
.ad-usersearch__item em { display: block; font-style: normal; font-size: .75rem; color: var(--th-text-subtle); }
.ad-usersearch__meta { margin-left: auto; font-size: .6875rem; color: var(--th-text-subtle); text-align: right; }
.ad-usersearch__empty { padding: 1rem; margin: 0; font-size: .8125rem; color: var(--th-text-subtle); text-align: center; }


/* =====================================================================
   REPORT DIALOG  (includes/report-button.php)
   ===================================================================== */
.th-report-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem 0;
  border: 0;
  background: none;
  color: var(--th-text-subtle);
  font-size: .8125rem;
  cursor: pointer;
  transition: color var(--th-transition);
}
.th-report-link:hover { color: var(--th-danger); }

.th-dialog {
  width: min(460px, calc(100vw - 2rem));
  max-height: min(90dvh, 680px);
  padding: 0;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-xl);
  background: var(--th-surface);
  color: var(--th-text);
  box-shadow: var(--th-shadow-xl);
}
.th-dialog::backdrop { background: rgba(17, 24, 39, .55); backdrop-filter: blur(3px); }

.th-dialog[open] { animation: th-dialog-in .18s var(--th-ease-out); }

@keyframes th-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .th-dialog[open] { animation: none; }
}

.th-dialog__body    { display: flex; flex-direction: column; max-height: inherit; }
.th-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--th-border);
  flex-shrink: 0;
}
.th-dialog__content { padding: 1.25rem; overflow-y: auto; }
.th-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--th-border);
  background: var(--th-bg-subtle);
  flex-shrink: 0;
}

/* A radio row with the whole strip clickable, not just the 16px dot. */
.th-radio-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .6rem .75rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-sm);
  font-size: .875rem;
  cursor: pointer;
  transition: border-color var(--th-transition), background var(--th-transition);
}
.th-radio-row:hover { border-color: var(--th-text-subtle); }
.th-radio-row:has(input:checked) {
  border-color: var(--th-primary);
  background: var(--th-primary-soft);
}


/* =====================================================================
   TWO-FACTOR  (user/security.php)
   ===================================================================== */
.th-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }

.th-steps > li {
  position: relative;
  padding: 0 0 1.75rem 2.75rem;
  border-left: 2px solid var(--th-border);
  margin-left: .9rem;
}
.th-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }

.th-steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: -1rem;
  top: -.15rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--th-primary);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
}
.th-steps > li > strong { display: block; margin-bottom: .35rem; }

.th-qr {
  display: grid;
  place-items: center;
  width: 206px;
  height: 206px;
  margin: 1rem 0;
  padding: .5rem;
  /* White regardless of theme: a QR scanner needs dark-on-light, and an
     inverted code in dark mode simply will not read. */
  background: #fff;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-md);
}
.th-qr canvas { display: block; }
.th-qr__fallback { font-size: .75rem; color: #6B7280; }

.th-secret {
  display: inline-block;
  padding: .5rem .75rem;
  background: var(--th-bg-subtle);
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-sm);
  font-family: ui-monospace, Menlo, monospace;
  font-size: .9375rem;
  letter-spacing: .1em;
  user-select: all;          /* one click selects the whole thing */
}

.th-recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem;
  padding: 1rem;
  background: var(--th-bg-subtle);
  border-radius: var(--th-radius-md);
}
.th-recovery-codes code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .9375rem;
  letter-spacing: .05em;
  color: var(--th-text);
  user-select: all;
}

/* Printing recovery codes is a supported path, so make the page useful
   on paper: codes only, no navigation, black on white. */
@media print {
  .th-header, .th-footer, .th-nav, .btn, .th-card--plain:not(:has(.th-recovery-codes)) {
    display: none !important;
  }
  .th-recovery-codes { background: none; border: 1px solid #000; }
  .th-recovery-codes code { color: #000; }
}


/* =====================================================================
   SOCIAL SIGN-IN  (includes/social-login.php)
   ===================================================================== */
.th-social { display: grid; gap: .625rem; }

.th-social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .8rem 1rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-btn);
  background: var(--th-surface);
  color: var(--th-text);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--th-transition), border-color var(--th-transition);
}
.th-social__btn:hover { background: var(--th-bg-subtle); border-color: var(--th-text-subtle); color: var(--th-text); }
.th-social__btn svg   { flex-shrink: 0; }

/* Apple's guidelines want their button black-on-white or white-on-black,
   not the neutral treatment the others get. */
.th-social__btn--apple { background: #000; border-color: #000; color: #fff; }
.th-social__btn--apple:hover { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }

.th-divider-or {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin: 1.25rem 0;
  color: var(--th-text-subtle);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: var(--th-tracking-wide);
}
.th-divider-or::before,
.th-divider-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--th-border);
}


/* =====================================================================
   CHOICE CARDS
   Radio buttons as selectable cards. Used by the job application-method
   picker; the native input stays in the DOM for keyboard and screen
   reader users rather than being replaced with a div.
   ===================================================================== */
.th-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .75rem;
}

.th-choice { cursor: pointer; }
.th-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.th-choice__body {
  display: block;
  height: 100%;
  padding: 1rem;
  border: 2px solid var(--th-border);
  border-radius: var(--th-radius-md);
  transition: border-color var(--th-transition), background var(--th-transition);
}
.th-choice__body i      { display: block; margin-bottom: .5rem; font-size: 1.25rem; color: var(--th-text-subtle); }
.th-choice__body strong { display: block; margin-bottom: .2rem; font-size: .9375rem; }
.th-choice__body span   { display: block; font-size: .75rem; line-height: 1.5; color: var(--th-text-muted); }

.th-choice:hover .th-choice__body { border-color: var(--th-text-subtle); }

.th-choice input:checked + .th-choice__body {
  border-color: var(--th-primary);
  background: var(--th-primary-soft);
}
.th-choice input:checked + .th-choice__body i { color: var(--th-primary); }

/* Keyboard focus has to be visible when the input itself is hidden. */
.th-choice input:focus-visible + .th-choice__body {
  outline: 2px solid var(--th-primary);
  outline-offset: 2px;
}


/* =====================================================================
   NOTIFICATIONS  (includes/notification-bell.php)
   ===================================================================== */
.th-notif { position: relative; }

.th-notif__trigger {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--th-text-muted);
  font-size: 1.1875rem;
  cursor: pointer;
  transition: background var(--th-transition), color var(--th-transition);
}
.th-notif__trigger:hover { background: var(--th-bg-subtle); color: var(--th-text); }
.th-notif__trigger--dark { color: rgba(255, 255, 255, .7); }
.th-notif__trigger--dark:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.th-notif__badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--th-danger);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.th-notif__panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: var(--th-z-dropdown, 1000);

  /* 380px on desktop, viewport minus a 16px gutter each side below that.
     The bell sits close to the right edge, so anchoring on `right` and
     letting the panel grow leftwards keeps it on screen without any
     collision detection. */
  width: min(380px, calc(100vw - 2rem));

  /* A cap on the whole panel, not just the list: the header and footer
     are part of the height, and capping only the list let the panel
     exceed 500px once they were added. */
  max-height: min(500px, calc(100dvh - var(--th-header-h) - 1.5rem));
  display: flex;
  flex-direction: column;

  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  box-shadow: var(--th-shadow-lg);
  overflow: hidden;

  transform-origin: top right;
  animation: th-notif-in .16s var(--th-ease-out);
}

@keyframes th-notif-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .th-notif__panel { animation: none; }
}

/* -------------------------------------------------------------------
   BUG FIXED: on phones the panel was anchored to a bell roughly 16px
   from the right edge, so `right: 0` plus a 380px width pushed its left
   edge off screen on anything under 400px. Below 480px it detaches from
   the bell and spans the viewport instead — which is what every mobile
   app does, and for the same reason.
   ------------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .th-notif { position: static; }

  .th-notif__panel {
    position: fixed;
    top: calc(var(--th-header-h) + .5rem);
    right: 1rem;
    left: 1rem;
    width: auto;
    max-height: calc(100dvh - var(--th-header-h) - 2rem);
  }
}

.th-notif__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;               /* never squashed by a long list */
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--th-border);
  font-size: .875rem;
}
.th-notif__clear {
  border: 0;
  background: none;
  color: var(--th-primary);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}

/* The list is the only part that scrolls; the panel's own max-height
   bounds it, so no second cap is needed here. */
.th-notif__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.th-notif__item {
  display: flex;
  gap: .75rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--th-border);
  color: inherit;
  text-decoration: none;
  transition: background var(--th-transition);
}
.th-notif__item:hover { background: var(--th-bg-subtle); }
.th-notif__item:last-child { border-bottom: 0; }
.th-notif__item.is-unread { background: color-mix(in srgb, var(--th-primary) 6%, transparent); }

.th-notif__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--th-primary-soft);
  color: var(--th-primary);
  font-size: .9375rem;
}

.th-notif__text  { min-width: 0; font-size: .8125rem; line-height: 1.45; }
.th-notif__text strong { display: block; }
.th-notif__text span   { color: var(--th-text-subtle); font-size: .75rem; }
.th-notif__empty { padding: 2rem 1rem; text-align: center; color: var(--th-text-subtle); font-size: .8125rem; }


/* =====================================================================
   CONVERSATION THREADS  (user/messages.php, admin/support.php)
   ===================================================================== */
.th-thread { display: flex; flex-direction: column; gap: 1rem; }

.th-bubble { max-width: 78%; }
.th-bubble--in  { align-self: flex-start; }
.th-bubble--out { align-self: flex-end; }

.th-bubble__meta {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  margin-bottom: .3rem;
  font-size: .6875rem;
  color: var(--th-text-subtle);
}
.th-bubble--out .th-bubble__meta { justify-content: flex-end; }
.th-bubble__meta strong { color: var(--th-text-muted); font-weight: 650; }

.th-bubble__body {
  padding: .7rem .9rem;
  border-radius: var(--th-radius-md);
  font-size: .875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.th-bubble--in  .th-bubble__body { background: var(--th-bg-subtle); border-bottom-left-radius: 4px; }
.th-bubble--out .th-bubble__body { background: var(--th-primary); color: #fff; border-bottom-right-radius: 4px; }

.th-bubble__file {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  font-size: .75rem;
}

@media (max-width: 575.98px) {
  .th-bubble { max-width: 90%; }
}


/* Two-pane list/detail layout, used by the admin support inbox.
   The list column is a clamp rather than a fixed 320px: between 992 and
   1200px a third of the width went to the list and the conversation had
   nowhere to go. */
.ad-split {
  display: grid;
  grid-template-columns: clamp(240px, 26%, 340px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.ad-split__list   { position: sticky; top: calc(var(--th-header-h) + 1rem); min-width: 0; }
.ad-split__detail { min-width: 0; }

@media (max-width: 991.98px) {
  .ad-split { grid-template-columns: minmax(0, 1fr); }
  .ad-split__list { position: static; }
}


/* =====================================================================
   HERO SLIDER  (includes/hero-slider.php)
   Slides are stacked and cross-faded rather than translated, so a slide
   never has to be measured and there is nothing to recalculate on
   resize or orientation change.
   ===================================================================== */
.th-slider {
  position: relative;
  overflow: hidden;
  background: var(--th-text);
}

.th-slider__track { position: relative; }

.th-slider__slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.th-slider__slide.is-active { position: relative; opacity: 1; visibility: visible; }

.th-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.th-slider__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17,24,39,.78) 0%, rgba(17,24,39,.35) 55%, transparent 100%);
}

.th-slider__content {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  padding: clamp(3.5rem, 10vw, 7rem) 0;
  color: #fff;
}
.th-slider__content--center { max-width: 46rem; margin-inline: auto; text-align: center; }
.th-slider__content--right  { margin-left: auto; text-align: right; }

.th-slider__title {
  font-size: clamp(1.875rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin: 0 0 1rem;
  color: #fff;
}
.th-slider__subtitle {
  font-size: clamp(1rem, 2vw, 1.1875rem);
  line-height: var(--th-leading-loose);
  color: rgba(255, 255, 255, .88);
  margin: 0 0 1.75rem;
}

.th-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background var(--th-transition);
}
.th-slider__nav:hover { background: rgba(255, 255, 255, .32); }
.th-slider__nav--prev { left: 1rem; }
.th-slider__nav--next { right: 1rem; }

.th-slider__dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: .5rem;
}
.th-slider__dot {
  width: 32px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: background var(--th-transition);
}
.th-slider__dot.is-active { background: #fff; }

@media (max-width: 767.98px) {
  .th-slider__nav                { display: none; }
  .th-slider__overlay            { background: linear-gradient(180deg, rgba(17,24,39,.35) 0%, rgba(17,24,39,.82) 100%); }
  .th-slider__content,
  .th-slider__content--right     { max-width: none; text-align: center; margin: 0; }
}

/* Respect a user who has asked for less motion: no autoplay, no fade. */
@media (prefers-reduced-motion: reduce) {
  .th-slider__slide { transition: none; }
}


/* =====================================================================
   ADVERTISING SLOTS  (includes/ad-slot.php)
   ===================================================================== */
.th-ad {
  position: relative;
  margin: 1.5rem 0;
  text-align: center;
}
.th-ad img { max-width: 100%; height: auto; border-radius: var(--th-radius-md); }

.th-ad__label {
  display: block;
  margin-top: .35rem;
  font-size: .625rem;
  letter-spacing: var(--th-tracking-wide);
  text-transform: uppercase;
  color: var(--th-text-subtle);
}

.th-ad--sidebar { margin: 0 0 1.5rem; }
.th-ad--header  { margin: 0 0 1rem; }


/* =====================================================================
   DATABASE MENUS  (includes/menu.php)
   ===================================================================== */
.th-menu { list-style: none; margin: 0; padding: 0; }
.th-menu > li + li { margin-top: .5rem; }
.th-menu a { display: inline-flex; align-items: center; gap: .4rem; }
.th-menu__sub { list-style: none; margin: .4rem 0 0 .9rem; padding: 0; }
.th-menu__sub > li + li { margin-top: .35rem; }


.th-logo__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--th-gradient-brand);
  color: #fff;
  font-size: 1rem;
  box-shadow: var(--th-shadow-brand);
}

.th-nav {
  display: flex;
  align-items: center;
  gap: .125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.th-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .875rem;
  border-radius: var(--th-radius-sm);
  color: var(--th-text-muted);
  font-size: var(--th-text-base);
  font-weight: 550;
  transition: all var(--th-fast) var(--th-ease);
}
.th-nav__link:hover { color: var(--th-text); background: var(--th-bg-subtle); }
.th-nav__link.active { color: var(--th-primary); font-weight: 650; }
.th-nav__link .bi-chevron-down { font-size: .6875rem; opacity: .6; transition: transform var(--th-fast) var(--th-ease); }
.th-nav__item:hover .bi-chevron-down { transform: rotate(180deg); }

/* --- Mega menu -------------------------------------------------------
   Opens on hover on desktop, and on click (via .is-open) elsewhere. */
.th-nav__item { position: relative; }

.th-mega {
  position: absolute;
  z-index: var(--th-z-dropdown);
  top: calc(100% + .5rem);
  /* Anchored to the left of its nav item, not centred on it. Centring
     pushed the first menu ("Properties") half off the left edge of the
     screen, because half of a 760px panel is wider than the distance
     from the logo to that item. */
  left: 0;
  width: min(760px, calc(100vw - 3rem));
  padding: 1.5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-xl);
  background: var(--th-surface);
  box-shadow: var(--th-shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--th-normal) var(--th-ease),
              transform var(--th-normal) var(--th-ease-out),
              visibility var(--th-normal);
}

/* The last item sits close to the right edge, so its panel opens
   leftwards instead — the mirror of the same problem. */
.th-nav__item:last-child .th-mega { left: auto; right: 0; }

.th-mega--sm { width: min(420px, calc(100vw - 3rem)); }

/* An invisible bridge across the 8px gap between the link and the panel.
   Without it the menu closes the instant the pointer leaves the link,
   before it can reach the panel — which reads as the menu flickering
   shut just as you go to click something in it. */
.th-mega::before {
  content: "";
  position: absolute;
  top: -.75rem;
  left: 0;
  right: 0;
  height: .75rem;
}

@media (hover: hover) and (min-width: 992px) {
  .th-nav__item:hover > .th-mega,
  .th-nav__item:focus-within > .th-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.th-mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.th-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}
.th-mega__heading {
  margin-bottom: .625rem;
  font-size: var(--th-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--th-tracking-wide);
  color: var(--th-text-subtle);
}
.th-mega__link {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .4375rem .5rem;
  margin-inline: -.5rem;
  border-radius: var(--th-radius-sm);
  color: var(--th-text);
  font-size: var(--th-text-base);
  transition: all var(--th-fast) var(--th-ease);
}
.th-mega__link:hover { background: var(--th-primary-soft); color: var(--th-primary-hover); }
.th-mega__link i { color: var(--th-text-subtle); font-size: 1rem; width: 1.125rem; }
.th-mega__link:hover i { color: var(--th-primary); }
.th-mega__promo {
  padding: 1.25rem;
  border-radius: var(--th-radius-lg);
  background: var(--th-gradient-brand);
  color: #fff;
}

/* --- Header actions --------------------------------------------------- */
.th-header__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  /* Never wrap. A header that grows to two rows breaks every sticky
     offset on the page, because --th-header-h no longer matches the
     real height — section anchors land in the wrong place and the
     sticky sidebar sits under the navbar. */
  flex-wrap: nowrap;
  flex-shrink: 0;
}

/* The nav is the only part allowed to give up space. */
.th-header__inner > .th-nav-wrap,
.th-header__inner > nav { min-width: 0; }

@media (max-width: 400px) {
  /* At 360px the logo, three icons, an avatar and a burger do not fit
     at full size. Tightening the gap and the touch targets keeps them
     on one row while staying above the 40px minimum a finger needs. */
  .th-header__actions { gap: .125rem; }
  .th-icon-btn        { width: 38px; height: 38px; font-size: 1.0625rem; }
  .th-notif__trigger  { width: 38px; height: 38px; }
}

.th-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--th-radius-sm);
  background: transparent;
  color: var(--th-text-muted);
  font-size: 1.125rem;
  cursor: pointer;
  transition: all var(--th-fast) var(--th-ease);
}
.th-icon-btn:hover { background: var(--th-bg-subtle); color: var(--th-text); }
.th-icon-btn__count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: var(--th-radius-pill);
  background: var(--th-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.th-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--th-gradient-brand);
  color: #fff;
  font-size: var(--th-text-sm);
  font-weight: 650;
  overflow: hidden;
  flex-shrink: 0;
}
.th-avatar img { width: 100%; height: 100%; object-fit: cover; }
.th-avatar--lg { width: 56px; height: 56px; font-size: var(--th-text-md); }
.th-avatar--sm { width: 28px; height: 28px; font-size: var(--th-text-xs); }

/* --- Dropdown --------------------------------------------------------- */
.dropdown-menu {
  padding: .5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  box-shadow: var(--th-shadow-xl);
  font-size: var(--th-text-base);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  border-radius: var(--th-radius-sm);
  color: var(--th-text);
  font-weight: 500;
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--th-primary-soft); color: var(--th-primary-hover); }
.dropdown-item i { color: var(--th-text-subtle); width: 1.125rem; flex-shrink: 0; }
.dropdown-item:hover i { color: var(--th-primary); }

/* The account menu grew to nine items. On a short screen — a phone in
   landscape, or a small laptop — that is taller than the viewport, and
   the last items were unreachable because the menu had no scroll. */
.dropdown-menu {
  max-height: calc(100dvh - var(--th-header-h) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dropdown-divider { margin: .375rem .25rem; border-color: var(--th-border); }

/* --- Breadcrumbs ------------------------------------------------------ */
.th-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: var(--th-text-sm);
  color: var(--th-text-muted);
}
.th-breadcrumb li { display: inline-flex; align-items: center; gap: .375rem; }
.th-breadcrumb li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--th-text-subtle);
  opacity: .6;
}
.th-breadcrumb a { color: var(--th-text-muted); }
.th-breadcrumb a:hover { color: var(--th-primary); }
.th-breadcrumb [aria-current="page"] { color: var(--th-text); font-weight: 550; }

/* --- Mobile bottom bar ------------------------------------------------ */
.th-tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--th-z-sticky);
  display: none;
  border-top: 1px solid var(--th-border);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  padding-bottom: env(safe-area-inset-bottom);
}
.th-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .125rem;
  padding: .5rem .25rem;
  color: var(--th-text-subtle);
  font-size: 10px;
  font-weight: 600;
}
.th-tabbar__item i { font-size: 1.25rem; }
.th-tabbar__item.active { color: var(--th-primary); }


/* =====================================================================
   09  HERO
   ===================================================================== */

.th-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 76vh, 760px);
  padding-block: calc(var(--th-header-h) + 3rem) 4rem;
  background: var(--th-mesh);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Faint dot grid over the mesh — adds texture at zero request cost. */
.th-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
}

/* Soft white fade into the page below. */
.th-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  height: 140px;
  background: linear-gradient(to top, var(--th-bg) 0%, transparent 100%);
}

.th-hero__content { position: relative; z-index: 1; max-width: 780px; }

.th-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--th-radius-pill);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: var(--th-text-sm);
  font-weight: 550;
  color: rgba(255, 255, 255, .94);
}
.th-hero__eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .28);
  animation: th-pulse 2.4s var(--th-ease) infinite;
}

.th-hero__title {
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 5.6vw, var(--th-text-5xl));
  font-weight: 780;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: #fff;
}
.th-hero__title em {
  font-style: normal;
  background: linear-gradient(120deg, #A5F3FC 0%, #93C5FD 45%, #C4B5FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.th-hero__subtitle {
  max-width: 60ch;
  margin-bottom: 2rem;
  font-size: clamp(var(--th-text-md), 1.7vw, var(--th-text-lg));
  line-height: var(--th-leading-loose);
  color: rgba(255, 255, 255, .82);
}

.th-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.th-hero__stat-value { font-size: var(--th-text-2xl); font-weight: 750; letter-spacing: -.03em; color: #fff; }
.th-hero__stat-label { font-size: var(--th-text-sm); color: rgba(255, 255, 255, .68); }

/* Compact hero for interior pages. */
.th-pagehead {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  background: var(--th-mesh);
  color: #fff;
}
.th-pagehead h1 { color: #fff; margin-bottom: .5rem; }
.th-pagehead p { color: rgba(255, 255, 255, .78); margin: 0; }
.th-pagehead .th-breadcrumb { color: rgba(255, 255, 255, .68); margin-bottom: 1rem; }
.th-pagehead .th-breadcrumb a { color: rgba(255, 255, 255, .78); }
.th-pagehead .th-breadcrumb a:hover { color: #fff; }
.th-pagehead .th-breadcrumb [aria-current="page"] { color: #fff; }
.th-pagehead .th-breadcrumb li + li::before { background: rgba(255, 255, 255, .5); }

/* Light variant for content pages. */
.th-pagehead--light {
  background: var(--th-gradient-subtle);
  border-bottom: 1px solid var(--th-border);
  color: var(--th-text);
}
.th-pagehead--light h1 { color: var(--th-text); }
.th-pagehead--light p { color: var(--th-text-muted); }
.th-pagehead--light .th-breadcrumb { color: var(--th-text-muted); }
.th-pagehead--light .th-breadcrumb a { color: var(--th-text-muted); }
.th-pagehead--light .th-breadcrumb [aria-current="page"] { color: var(--th-text); }
.th-pagehead--light .th-breadcrumb li + li::before { background: var(--th-text-subtle); }


/* =====================================================================
   10  SECTIONS & HEADINGS
   ===================================================================== */

.th-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.th-section-head__text { max-width: 60ch; }
.th-eyebrow {
  display: block;
  margin-bottom: .5rem;
  font-size: var(--th-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--th-tracking-wide);
  color: var(--th-primary);
}
.th-section-head h2 { margin-bottom: .375rem; }
.th-section-head p { color: var(--th-text-muted); margin: 0; }

.th-link-more {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 600;
  font-size: var(--th-text-base);
  white-space: nowrap;
}
.th-link-more i { transition: transform var(--th-fast) var(--th-ease); }
.th-link-more:hover i { transform: translateX(3px); }

/* Horizontal scroll rail for card rows on small screens.
   The negative margin lets cards bleed to the screen edge; `max-width`
   keeps that bleed from making the whole page scrollable sideways. */
.th-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .5rem;
  margin-inline: calc(var(--th-gutter) * -1);
  padding-inline: var(--th-gutter);
  max-width: calc(100% + var(--th-gutter) * 2);
}
.th-rail::-webkit-scrollbar { display: none; }
.th-rail > * { scroll-snap-align: start; }

/* Chip rails (category pills) size to their content rather than being
   forced to a 280px minimum, which was leaving big gaps on desktop. */
.th-rail[style*="auto"] { grid-auto-columns: auto; }


/* =====================================================================
   11  MEDIA, GALLERY & MAPS
   ===================================================================== */

img { max-width: 100%; height: auto; }

/* Blur-up placeholder while a lazy image loads. */
img[loading="lazy"] { background: var(--th-bg-subtle); }

.th-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: .625rem;
  border-radius: var(--th-radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.th-gallery__item { position: relative; overflow: hidden; background: var(--th-bg-subtle); cursor: pointer; }
.th-gallery__item:first-child { grid-row: span 2; }
.th-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--th-slow) var(--th-ease-out); }
.th-gallery__item:hover img { transform: scale(1.05); }
.th-gallery__more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(17, 24, 39, .55);
  color: #fff;
  font-weight: 650;
  backdrop-filter: blur(2px);
}

/* Lightbox, built by trnchub.js when a gallery item is clicked. */
.th-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--th-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Room for the close button at the top and the counter at the bottom,
     plus clearance either side for the prev/next controls. */
  padding: 4.5rem clamp(3.5rem, 8vw, 6rem);
  background: rgba(11, 18, 32, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: th-fade-in .2s var(--th-ease) both;
}

/* Sizing against the viewport rather than the flex item is what makes a
   tall portrait photo fit. `max-height: 100%` resolved against an
   auto-height parent, so images taller than the screen were being cut
   off top and bottom. */
.th-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--th-radius-lg);
  box-shadow: var(--th-shadow-xl);
  animation: th-scale-in .3s var(--th-ease-out) both;
}
.th-lightbox__close,
.th-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 1.125rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--th-fast) var(--th-ease), transform var(--th-fast) var(--th-ease);
}
.th-lightbox__close:hover,
.th-lightbox__nav:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }
.th-lightbox__close { top: 1.25rem; right: 1.25rem; }
.th-lightbox__nav.is-prev { left: 1.25rem; }
.th-lightbox__nav.is-next { right: 1.25rem; }
.th-lightbox__count {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  translate: -50% 0;
  padding: .375rem .875rem;
  border-radius: var(--th-radius-pill);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: var(--th-text-sm);
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.th-map {
  height: 400px;
  border-radius: var(--th-radius-xl);
  overflow: hidden;
  border: 1px solid var(--th-border);
  background: var(--th-bg-subtle);
}
.th-map--tall { height: 560px; }
.th-map--sticky { position: sticky; top: calc(var(--th-header-h) + 1.25rem); }

/* Leaflet overrides so the map matches the rest of the UI. */
.leaflet-container { font-family: var(--th-font) !important; }
.leaflet-popup-content-wrapper {
  border-radius: var(--th-radius-lg) !important;
  box-shadow: var(--th-shadow-xl) !important;
  padding: 0 !important;
  overflow: hidden;
}
.leaflet-popup-content { margin: 0 !important; width: 240px !important; }
.leaflet-popup-tip { box-shadow: var(--th-shadow-md); }
.leaflet-control-zoom a {
  border-radius: var(--th-radius-xs) !important;
  color: var(--th-text) !important;
  border-color: var(--th-border) !important;
}
.leaflet-bar { border: 0 !important; box-shadow: var(--th-shadow-md) !important; }

.th-map-marker {
  display: grid;
  place-items: center;
  padding: .25rem .625rem;
  border-radius: var(--th-radius-pill);
  background: var(--th-primary);
  color: #fff;
  font-size: var(--th-text-xs);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--th-shadow-md);
  border: 2px solid #fff;
}
.th-map-marker.is-active { background: var(--th-accent); scale: 1.1; }


/* =====================================================================
   12  TABLES & PAGINATION
   ===================================================================== */

.th-table-wrap {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-xl);
  background: var(--th-surface);
  overflow: hidden;
}
.th-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.th-table { width: 100%; border-collapse: collapse; font-size: var(--th-text-base); }
.th-table th {
  padding: .875rem 1rem;
  background: var(--th-bg);
  border-bottom: 1px solid var(--th-border);
  font-size: var(--th-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--th-tracking-wide);
  color: var(--th-text-muted);
  text-align: left;
  white-space: nowrap;
}
.th-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--th-border); vertical-align: middle; }
.th-table tbody tr:last-child td { border-bottom: 0; }
.th-table tbody tr { transition: background-color var(--th-fast) var(--th-ease); }
.th-table tbody tr:hover { background: var(--th-bg); }
.th-table__num { text-align: right; font-variant-numeric: tabular-nums; }

.th-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
}
.th-pagination a,
.th-pagination span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: .625rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-sm);
  background: var(--th-surface);
  color: var(--th-text-muted);
  font-size: var(--th-text-base);
  font-weight: 600;
  transition: all var(--th-fast) var(--th-ease);
}
.th-pagination a:hover { border-color: var(--th-primary); color: var(--th-primary); transform: translateY(-1px); }
.th-pagination .is-current {
  background: var(--th-primary);
  border-color: var(--th-primary);
  color: #fff;
  box-shadow: var(--th-shadow-brand);
}
.th-pagination .is-gap { border: 0; background: transparent; min-width: 24px; }
.th-pagination .is-disabled { opacity: .4; pointer-events: none; }


/* =====================================================================
   13  ALERTS, MODALS & EMPTY STATES
   ===================================================================== */

.th-alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9375rem 1.125rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--th-radius-md);
  font-size: var(--th-text-base);
}
.th-alert i { font-size: 1.125rem; flex-shrink: 0; margin-top: .0625rem; }
.th-alert__close { margin-left: auto; background: 0; border: 0; color: inherit; opacity: .6; cursor: pointer; }
.th-alert__close:hover { opacity: 1; }

.th-alert--success { background: var(--th-secondary-soft); border-color: #A7F3D0; color: #065F46; }
.th-alert--danger  { background: var(--th-danger-soft);    border-color: #FECACA; color: #991B1B; }
.th-alert--warning { background: var(--th-accent-soft);    border-color: #FDE68A; color: #92400E; }
.th-alert--info    { background: var(--th-primary-soft);   border-color: var(--th-primary-border); color: #1E40AF; }

/* Toast stack. */
.th-toasts {
  position: fixed;
  z-index: var(--th-z-toast);
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  max-width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
.th-toast {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.125rem;
  border-radius: var(--th-radius-md);
  background: var(--th-text);
  color: #fff;
  font-size: var(--th-text-base);
  font-weight: 500;
  box-shadow: var(--th-shadow-xl);
  pointer-events: auto;
  animation: th-toast-in .35s var(--th-ease-spring) both;
}
.th-toast.is-leaving { animation: th-toast-out .25s var(--th-ease) both; }
.th-toast--success i { color: #34D399; }
.th-toast--danger  i { color: #F87171; }

.modal-content {
  border: 0;
  border-radius: var(--th-radius-xl);
  box-shadow: var(--th-shadow-xl);
}
.modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--th-border); }
.modal-body   { padding: 1.5rem; }
.modal-footer { padding: 1.125rem 1.5rem; border-top: 1px solid var(--th-border); gap: .5rem; }
.modal-backdrop.show { opacity: .4; backdrop-filter: blur(3px); }

.th-empty {
  padding: 4rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--th-border-strong);
  border-radius: var(--th-radius-xl);
  background: var(--th-surface);
}
.th-empty__icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 1.25rem;
  border-radius: var(--th-radius-lg);
  background: var(--th-bg-subtle);
  color: var(--th-text-subtle);
  font-size: 1.75rem;
}
.th-empty h3 { font-size: var(--th-text-lg); margin-bottom: .5rem; }
.th-empty p { color: var(--th-text-muted); margin-bottom: 1.5rem; }


/* =====================================================================
   14  SKELETONS & LOADING
   ===================================================================== */

.th-skeleton {
  position: relative;
  border-radius: var(--th-radius-sm);
  background: var(--th-bg-subtle);
  overflow: hidden;
}
.th-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, .7) 50%,
    transparent 100%);
  animation: th-shimmer 1.4s infinite;
}
.th-skeleton--text  { height: .75rem; margin-bottom: .5rem; }
.th-skeleton--title { height: 1.125rem; width: 70%; margin-bottom: .75rem; }
.th-skeleton--media { aspect-ratio: 4 / 3; border-radius: 0; }
.th-skeleton--circle{ border-radius: 50%; }

/* Thin progress bar shown during AJAX filter updates. */
.th-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--th-z-toast);
  height: 3px;
  background: var(--th-gradient-brand);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--th-slow) var(--th-ease-out), opacity var(--th-normal);
}
.th-progress.is-active { transform: scaleX(.7); }
.th-progress.is-done   { transform: scaleX(1); opacity: 0; }

.th-results.is-loading { opacity: .45; pointer-events: none; transition: opacity var(--th-fast); }


/* =====================================================================
   15  FOOTER
   ===================================================================== */

.th-footer {
  background: #0B1220;
  color: rgba(255, 255, 255, .62);
  font-size: var(--th-text-base);
}
.th-footer__main { padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
.th-footer h4 {
  margin-bottom: 1rem;
  font-size: var(--th-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--th-tracking-wide);
  color: #fff;
}
.th-footer ul { padding: 0; margin: 0; list-style: none; }
.th-footer li { margin-bottom: .625rem; }
.th-footer a { color: rgba(255, 255, 255, .62); }
.th-footer a:hover { color: #fff; }
.th-footer .th-logo { color: #fff; }
.th-footer__brand p { max-width: 34ch; margin-top: 1rem; line-height: var(--th-leading-loose); }

.th-footer__social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.th-footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--th-radius-sm);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .78);
  font-size: 1rem;
  transition: all var(--th-fast) var(--th-ease);
}
.th-footer__social a:hover { background: var(--th-primary); color: #fff; transform: translateY(-2px); }

.th-footer__bottom {
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: var(--th-text-sm);
}

/* Newsletter block. */
.th-newsletter {
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--th-radius-2xl);
  background: var(--th-gradient-brand);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.th-newsletter::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, transparent 70%);
  pointer-events: none;
}
.th-newsletter h2 { color: #fff; }
.th-newsletter p { color: rgba(255, 255, 255, .82); }
.th-newsletter .form-control {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  backdrop-filter: blur(8px);
}
.th-newsletter .form-control::placeholder { color: rgba(255, 255, 255, .6); }
.th-newsletter .form-control:focus {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
}


/* =====================================================================
   16  ANIMATIONS
   ===================================================================== */

@keyframes th-spin    { to { transform: rotate(360deg); } }
@keyframes th-shimmer { 100% { transform: translateX(100%); } }

@keyframes th-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes th-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes th-slide-down {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes th-scale-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes th-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, .28); }
  50%      { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
}
@keyframes th-toast-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes th-toast-out {
  to { opacity: 0; transform: translateX(24px); }
}

.th-anim-fade  { animation: th-fade-in   .5s var(--th-ease) both; }
.th-anim-up    { animation: th-slide-up  .6s var(--th-ease-out) both; }
.th-anim-down  { animation: th-slide-down .5s var(--th-ease-out) both; }
.th-anim-scale { animation: th-scale-in  .45s var(--th-ease-out) both; }

/* Stagger helpers for grids revealed on scroll. */
.th-delay-1 { animation-delay: .06s; }
.th-delay-2 { animation-delay: .12s; }
.th-delay-3 { animation-delay: .18s; }
.th-delay-4 { animation-delay: .24s; }
.th-delay-5 { animation-delay: .30s; }
.th-delay-6 { animation-delay: .36s; }

/* Scroll reveal: JS adds .is-visible via IntersectionObserver. */
.th-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s var(--th-ease-out), transform .65s var(--th-ease-out);
  will-change: opacity, transform;
}
.th-reveal.is-visible { opacity: 1; transform: none; }

/* Page transition on first paint. */
.th-page-enter { animation: th-fade-in .35s var(--th-ease) both; }

.th-hover-lift { transition: transform var(--th-normal) var(--th-ease-out), box-shadow var(--th-normal) var(--th-ease-out); }
.th-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--th-shadow-lg); }


/* =====================================================================
   17  UTILITIES
   ===================================================================== */

.th-text-muted  { color: var(--th-text-muted) !important; }
.th-text-subtle { color: var(--th-text-subtle) !important; }
.th-text-brand  { color: var(--th-primary) !important; }
.th-text-gradient {
  background: var(--th-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.th-bg-surface { background: var(--th-surface) !important; }
.th-bg-subtle  { background: var(--th-bg-subtle) !important; }
.th-bg-brand   { background: var(--th-gradient-brand) !important; color: #fff; }

.th-radius-md { border-radius: var(--th-radius-md) !important; }
.th-radius-lg { border-radius: var(--th-radius-lg) !important; }
.th-radius-xl { border-radius: var(--th-radius-xl) !important; }

.th-shadow-sm { box-shadow: var(--th-shadow-sm) !important; }
.th-shadow-md { box-shadow: var(--th-shadow-md) !important; }
.th-shadow-lg { box-shadow: var(--th-shadow-lg) !important; }
.th-shadow-none { box-shadow: none !important; }

.th-border   { border: 1px solid var(--th-border) !important; }
.th-border-t { border-top: 1px solid var(--th-border) !important; }
.th-border-b { border-bottom: 1px solid var(--th-border) !important; }

.th-fw-500 { font-weight: 500 !important; }
.th-fw-600 { font-weight: 600 !important; }
.th-fw-700 { font-weight: 700 !important; }
.th-fs-xs  { font-size: var(--th-text-xs) !important; }
.th-fs-sm  { font-size: var(--th-text-sm) !important; }
.th-fs-lg  { font-size: var(--th-text-lg) !important; }

.th-nums { font-variant-numeric: tabular-nums; }

/* Flex and grid children default to min-width:auto, which stops text
   truncation working inside them. This opts a child back in. */
.min-w-0 { min-width: 0 !important; }

/* Responsive card grid without writing column classes each time. */
.th-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(var(--th-grid-min, 280px), 1fr));
}
.th-grid--sm { --th-grid-min: 200px; gap: 1.25rem; }
.th-grid--lg { --th-grid-min: 340px; }

.th-stack   { display: flex; flex-direction: column; gap: var(--th-stack-gap, 1rem); }
.th-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--th-cluster-gap, .5rem); }

.th-divider { height: 1px; background: var(--th-border); border: 0; margin-block: 1.5rem; }

/* Visually hidden but available to screen readers. */
.th-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.th-stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* =====================================================================
   18  RESPONSIVE
   ===================================================================== */

@media (max-width: 1199.98px) {
  .th-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 1.5rem; }
  .th-layout--reverse { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 991.98px) {
  :root { --th-header-h: 64px; --th-gutter: 1.25rem; }

  .th-layout,
  .th-layout--reverse { grid-template-columns: minmax(0, 1fr); }
  .th-sidebar { position: static; max-height: none; overflow: visible; }

  .th-nav { display: none; }
  .th-hero { min-height: auto; padding-block: calc(var(--th-header-h) + 2.5rem) 3rem; }
  .th-search { flex-direction: column; gap: .25rem; }
  .th-search__field + .th-search__field { border-left: 0; border-top: 1px solid var(--th-border); }
  .th-search .btn { width: 100%; padding-block: .875rem; }

  .th-gallery { grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; }
  .th-gallery__item:first-child { grid-column: span 2; grid-row: span 1; }
  .th-gallery__item:nth-child(n + 4) { display: none; }

  .th-card--row { flex-direction: column; }
  .th-card--row .th-card__media { flex-basis: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 767.98px) {
  :root { --th-section-y: 3rem; }

  body { padding-bottom: 64px; }          /* room for the mobile tab bar */
  .th-tabbar { display: flex; }

  .th-section-head { flex-direction: column; align-items: flex-start; }
  .th-grid { --th-grid-min: 100%; gap: 1rem; }
  .th-hero__stats { gap: 1rem 1.75rem; }
  .th-toasts { left: 1rem; right: 1rem; bottom: 5rem; max-width: none; }
  .th-map { height: 300px; }
  .btn-xl { padding: .875rem 1.5rem; font-size: var(--th-text-md); }
}

@media (max-width: 575.98px) {
  :root { --th-gutter: 1rem; }
  .th-card__body { padding: 1rem; }
  .th-mega { width: calc(100vw - 2rem); }
}

/* Large screens: let the grid breathe rather than stretching cards. */
@media (min-width: 1600px) {
  :root { --th-container: 1400px; }
}


/* =====================================================================
   19  ACCESSIBILITY & PRINT
   ===================================================================== */

/* Every interactive element gets the same visible focus ring. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--th-primary);
  outline-offset: 2px;
  border-radius: var(--th-radius-xs);
}

.th-skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 9999;
  padding: .75rem 1.25rem;
  border-radius: var(--th-radius-md);
  background: var(--th-primary);
  color: #fff;
  font-weight: 600;
  transition: top var(--th-fast) var(--th-ease);
}
.th-skip-link:focus { top: 1rem; color: #fff; }

/* Respect the OS "reduce motion" preference. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .th-reveal { opacity: 1; transform: none; }
}

/* Honour "increase contrast". */
@media (prefers-contrast: more) {
  :root {
    --th-text-muted: #4B5563;
    --th-border: #9CA3AF;
    --th-border-strong: #6B7280;
  }
  .th-card { border-width: 1.5px; }
}

@media print {
  .th-header,
  .th-footer,
  .th-tabbar,
  .th-toasts,
  .th-card__actions,
  .btn,
  .th-pagination { display: none !important; }

  body { background: #fff; font-size: 11pt; }
  .th-card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}


/* =====================================================================
   19c  ONE-TIME CODE INPUT
   ===================================================================== */

.th-otp {
  display: flex;
  gap: .5rem;
  justify-content: center;
}

.th-otp__box {
  width: 3rem;
  height: 3.75rem;
  padding: 0;
  border: 1.5px solid var(--th-border);
  border-radius: var(--th-radius-md);
  background: var(--th-surface);
  color: var(--th-text);
  font-family: var(--th-font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  transition: border-color var(--th-fast) var(--th-ease),
              box-shadow var(--th-fast) var(--th-ease);
}
.th-otp__box:focus {
  outline: none;
  border-color: var(--th-primary);
  box-shadow: var(--th-shadow-focus);
}
/* A filled box reads as done at a glance. */
.th-otp__box:not(:placeholder-shown),
.th-otp__box[value]:not([value=""]) { border-color: var(--th-primary); }

@media (max-width: 575.98px) {
  .th-otp { gap: .375rem; }
  .th-otp__box { width: 2.625rem; height: 3.25rem; font-size: 1.25rem; }
}


/* Active item in the member-area sidebar. */
.th-usernav--active {
  background: var(--th-primary-soft);
  color: var(--th-primary-hover);
  font-weight: 650;
}
.th-usernav--active i { color: var(--th-primary); }


/* =====================================================================
   19a  STAFF BAR
   Only rendered for signed-in staff. Sits above the sticky header and
   scrolls away with the page — it is a shortcut, not a fixture.
   ===================================================================== */

.th-staffbar {
  position: relative;
  z-index: calc(var(--th-z-header) + 1);
  background: #0B1220;
  color: rgba(255, 255, 255, .8);
  font-size: var(--th-text-sm);
}

.th-staffbar__inner {
  display: flex;
  align-items: center;
  gap: .375rem;
  min-height: 40px;
  padding-block: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.th-staffbar__inner::-webkit-scrollbar { display: none; }

.th-staffbar__badge {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .1875rem .5rem;
  border-radius: var(--th-radius-xs);
  background: var(--th-primary);
  color: #fff;
  font-size: var(--th-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.th-staffbar__link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .625rem;
  border-radius: var(--th-radius-xs);
  color: rgba(255, 255, 255, .8);
  font-weight: 550;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--th-fast) var(--th-ease), color var(--th-fast) var(--th-ease);
}
.th-staffbar__link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.th-staffbar__link--alert { color: #FCD34D; }
.th-staffbar__link--alert:hover { background: rgba(252, 211, 77, .14); color: #FDE68A; }

.th-staffbar__spacer { flex: 1 1 auto; }
.th-staffbar__user { color: rgba(255, 255, 255, .5); font-size: var(--th-text-xs); white-space: nowrap; }

/* The overlay header normally starts at the very top of the page. When
   the staff bar is present it has to begin below it instead. */
.th-staffbar + .th-header--overlay { top: 40px; }
.th-staffbar + .th-header--overlay.is-scrolled { top: 0; }


/* =====================================================================
   19b  BUSINESS PROFILE HEADER
   The logo overlaps the cover photo. Done here rather than with inline
   negative margins, which overlapped the heading on narrow screens.
   ===================================================================== */

.th-bizhead {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.25rem;
  margin-block: -3rem 1.5rem;
}

.th-bizhead__logo {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: var(--th-radius-xl);
  background: #fff;
  border: 4px solid var(--th-surface);
  box-shadow: var(--th-shadow-md);
}

/* Pushed down so it clears the cover the logo is hanging over. */
.th-bizhead__body { min-width: 0; padding-top: 3rem; }

.th-bizhead__actions {
  display: flex;
  gap: .5rem;
  padding-top: 3rem;
}

@media (max-width: 767.98px) {
  /* Stacked on phones: the three-column grid left no usable width for
     the name, so it wrapped underneath the buttons. */
  .th-bizhead {
    grid-template-columns: minmax(0, 1fr);
    gap: .875rem;
    margin-block: -2.5rem 1.25rem;
  }

  .th-bizhead__logo { width: 80px; height: 80px; }
  .th-bizhead__body,
  .th-bizhead__actions { padding-top: 0; }
  .th-bizhead__actions { justify-content: flex-start; }
}


/* =====================================================================
   20  LANGUAGE SWITCHER
   ===================================================================== */

.th-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4375rem .75rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-pill);
  background: var(--th-surface);
  color: var(--th-text);
  font-family: inherit;
  font-size: var(--th-text-sm);
  font-weight: 650;
  cursor: pointer;
  transition: border-color var(--th-fast) var(--th-ease),
              box-shadow var(--th-fast) var(--th-ease);
}
.th-lang-btn:hover { border-color: var(--th-primary); box-shadow: var(--th-shadow-sm); }
.th-lang-btn:focus-visible { outline: none; box-shadow: var(--th-shadow-focus); }
.th-lang-btn__flag { font-size: 1.0625rem; line-height: 1; }
.th-lang-btn__code { letter-spacing: .04em; }
.th-lang-btn .bi-chevron-down { font-size: .625rem; opacity: .6; }

/* Glass variant while the header floats over the hero. */
.th-header--overlay:not(.is-scrolled) .th-lang-btn {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .26);
  color: #fff;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.th-lang__menu { min-width: 230px; }
.th-lang__heading {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem .375rem;
  margin: 0;
  font-size: var(--th-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--th-tracking-wide);
  color: var(--th-text-subtle);
}
.th-lang__item { font-weight: 550; }
.th-lang__item.is-active { color: var(--th-primary); font-weight: 700; }
.th-lang__item .bi-check-lg { color: var(--th-primary); }
.th-lang__flag { font-size: 1.25rem; line-height: 1; width: 1.5rem; }
.th-lang__note {
  padding: .5rem .75rem .25rem;
  margin: .375rem 0 0;
  border-top: 1px solid var(--th-border);
  font-size: var(--th-text-xs);
  color: var(--th-text-subtle);
}

/* Chip list used in the mobile drawer. */
.th-lang-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4375rem .75rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-pill);
  background: var(--th-surface);
  color: var(--th-text-muted);
  font-family: inherit;
  font-size: var(--th-text-sm);
  font-weight: 550;
  cursor: pointer;
  transition: all var(--th-fast) var(--th-ease);
}
.th-lang-chip:hover { border-color: var(--th-primary-border); color: var(--th-text); }
.th-lang-chip.is-active {
  border-color: var(--th-primary);
  background: var(--th-primary-soft);
  color: var(--th-primary-hover);
  font-weight: 650;
}

/* Shown for the moment between choosing a language and the translated
   page arriving. Covers the flash of untranslated content so the switch
   reads as deliberate rather than as a page blinking. */
.th-translating {
  position: fixed;
  inset: 0;
  z-index: var(--th-z-toast);
  display: grid;
  place-items: center;
  background: rgba(248, 250, 252, .92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: th-fade-in .15s var(--th-ease) both;
}

.th-translating__inner { text-align: center; }

.th-translating__inner p {
  margin: 1rem 0 0;
  font-size: var(--th-text-sm);
  font-weight: 600;
  color: var(--th-text-muted);
}

.th-translating__spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border: 3px solid var(--th-border);
  border-top-color: var(--th-primary);
  border-radius: 50%;
  animation: th-spin .7s linear infinite;
}


/* --- Translation widget cleanup --------------------------------------
   Both GTranslate and Google's own widget inject furniture we do not
   want: a floating flag button, a top banner, tooltips and highlighted
   text. All of it is suppressed so the header switcher is the only
   visible control anywhere on the site. */

/* GTranslate's floating switcher, in every variant it ships. */
.gtranslate_wrapper .gt_float_switcher,
.gt_float_switcher,
.gtranslate_wrapper > div:not(.gt_selector_wrap),
.gt-current-lang,
.gt_switcher_wrapper { display: none !important; }

/* The <select> itself must stay in the layout — a display:none control
   will not fire the change event that triggers translation. It is moved
   off-screen by the inline style on its wrapper instead. */
.gtranslate_wrapper select.gt_selector { display: block !important; }

/* Google's widget, kept because old sessions may still have it cached. */
.skiptranslate iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.goog-te-gadget-icon { display: none !important; }
body { top: 0 !important; }
#goog-gt-tt,
.goog-te-balloon-frame { display: none !important; }
.goog-text-highlight {
  background: transparent !important;
  box-shadow: none !important;
}


/* =====================================================================
   21  MORTGAGE CALCULATOR
   ===================================================================== */

.th-calc__field { margin-bottom: 1.25rem; }
.th-calc__field:last-of-type { margin-bottom: 0; }

.th-calc__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .375rem;
}
.th-calc__label label { font-size: var(--th-text-sm); font-weight: 650; }
.th-calc__label output {
  font-size: var(--th-text-sm);
  font-weight: 600;
  color: var(--th-primary);
  font-variant-numeric: tabular-nums;
}

.th-calc input[type="range"] {
  width: 100%;
  height: 6px;
  accent-color: var(--th-primary);
  cursor: pointer;
}
.th-calc input[type="range"]:focus-visible {
  outline: 2px solid var(--th-primary);
  outline-offset: 4px;
  border-radius: var(--th-radius-pill);
}

.th-calc__result {
  height: 100%;
  padding: 1.5rem;
  border-radius: var(--th-radius-lg);
  background: var(--th-gradient-brand);
  color: #fff;
}
.th-calc__result-label {
  margin: 0 0 .25rem;
  font-size: var(--th-text-sm);
  color: rgba(255, 255, 255, .78);
}
.th-calc__result-value {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4vw, var(--th-text-3xl));
  font-weight: 750;
  letter-spacing: var(--th-tracking-tight);
  font-variant-numeric: tabular-nums;
}
.th-calc__breakdown {
  margin: 0;
  padding-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.th-calc__breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .25rem;
}
.th-calc__breakdown dt {
  font-size: var(--th-text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
}
.th-calc__breakdown dd {
  margin: 0;
  font-size: var(--th-text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* =====================================================================
   22  MOBILE POLISH
   ===================================================================== */

/* Floating filter toggle — created by trnchub.js on listing pages. */
.th-filter-fab {
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: var(--th-z-sticky);
  translate: -50% 0;
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .6875rem 1.375rem;
  border: 0;
  border-radius: var(--th-radius-pill);
  background: var(--th-text);
  color: #fff;
  font-family: inherit;
  font-size: var(--th-text-sm);
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--th-shadow-xl);
}
.th-filter-fab:active { transform: scale(.97); }

@media (max-width: 991.98px) {
  .th-filter-fab { display: inline-flex; }

  /* The filter sidebar collapses behind the button, so results come
     first. Sidebars without a filter form (e.g. news) are untouched. */
  .th-layout > .th-sidebar.th-m-collapsed { display: none; }
  .th-layout > .th-sidebar.th-m-collapsed.is-open {
    display: block;
    animation: th-slide-up .35s var(--th-ease-out) both;
  }
}

@media (max-width: 767.98px) {
  /* 16px inputs stop iOS Safari zooming the page on focus. */
  .form-control,
  .form-select,
  .th-search__field input,
  .th-search__field select { font-size: 1rem; }

  /* --- Checkboxes and radios ---------------------------------------
     18px is fine for a mouse and far too small for a thumb. The control
     grows, and the whole row becomes tappable so the label works as the
     target too — 44px is the accepted minimum. */
  .form-check {
    min-height: 44px;
    padding-block: .375rem;
    margin-bottom: .125rem;
    gap: .75rem;
  }

  .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2px;
    border-radius: 7px;
  }

  /* The tick was sized for an 18px box and looked thin when scaled up. */
  .form-check-input:checked { background-size: 76%; }

  .form-check-input[type="radio"]:checked { box-shadow: inset 0 0 0 6px var(--th-surface); }

  .form-check-label { font-size: var(--th-text-md); line-height: 1.4; }

  /* Filter chips are tapped just as often — give them a real target. */
  .th-chip-check span {
    min-height: 40px;
    padding-inline: 1rem;
    font-size: var(--th-text-base);
  }

  /* The switch in settings forms. */
  .form-switch .form-check-input { width: 3rem; height: 1.625rem; background-size: 1.25rem; }
  .form-switch .form-check-input:checked { background-position: right .1875rem center; }

  /* Tab rails scroll sideways instead of wrapping into a tall block. */
  .th-search-tabs {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .th-search-tabs::-webkit-scrollbar { display: none; }
  .th-search-tab { flex-shrink: 0; }

  /* Page-header action buttons share the row evenly. */
  .th-pagehead .btn { flex: 1 1 auto; justify-content: center; }

  /* Bigger touch targets where fingers actually land. */
  .th-fav { width: 40px; height: 40px; }
  .th-lightbox__nav, .th-lightbox__close { width: 40px; height: 40px; }
  .th-lightbox__nav.is-prev { left: .5rem; }
  .th-lightbox__nav.is-next { right: .5rem; }

  /* The calculator result loses its side-by-side layout gracefully. */
  .th-calc__result { margin-top: .5rem; }
}


/* =====================================================================
   PROPERTY VIDEO  (includes/property-video.php)
   =====================================================================
   The trigger is a <button> holding a poster image, replaced in JS by
   the real player on click. Sizing lives here rather than on the
   element so the swap does not shift the page — the frame occupies the
   same box as the button it replaces, so there is no layout jump and
   no CLS penalty.
   ===================================================================== */
.th-videos { margin: 0 0 2rem; scroll-margin-top: 6rem; }

.th-videos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.th-video { margin: 0; }

/* The first video gets the full width — it is almost always the main
   walkthrough, and a row of equal thumbnails hides that. */
.th-video--lead { grid-column: 1 / -1; }

.th-video__trigger,
.th-video__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--th-radius-lg);
  overflow: hidden;
  background: #111827;
}

.th-video__trigger { cursor: pointer; }

.th-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--th-slow) var(--th-ease), filter var(--th-normal) var(--th-ease);
}
.th-video__trigger:hover .th-video__poster { transform: scale(1.03); filter: brightness(.85); }

.th-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.th-video__play i {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--th-primary);
  font-size: 2rem;
  padding-left: 4px;               /* the glyph is visually left-heavy */
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  transition: transform var(--th-normal) var(--th-ease-spring);
}
.th-video__trigger:hover .th-video__play i { transform: scale(1.08); }
.th-video__trigger:focus-visible { outline: 3px solid var(--th-primary); outline-offset: 3px; }

.th-video__meta {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  display: flex;
  gap: .375rem;
  pointer-events: none;
}
.th-video__kind,
.th-video__duration {
  padding: .2rem .5rem;
  border-radius: var(--th-radius-pill);
  background: rgba(17, 24, 39, .78);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.th-video__frame iframe,
.th-video__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.th-video__caption {
  margin: .5rem 0 0;
  font-size: .8125rem;
  color: var(--th-text-muted);
}

@media (max-width: 575.98px) {
  .th-video__play i { width: 52px; height: 52px; font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .th-video__poster,
  .th-video__play i { transition: none; }
  .th-video__trigger:hover .th-video__poster { transform: none; }
}


/* =====================================================================
   RENTAL PAYMENT TERMS  (properties/detail.php)
   ===================================================================== */
.th-terms {
  padding: .75rem .875rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-md);
  background: var(--th-bg-subtle, #F8FAFC);
}

.th-terms__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .375rem;
  padding-bottom: .375rem;
  border-bottom: 1px solid var(--th-border);
}


/* =====================================================================
   OWNER VIDEO ROWS  (property-owner/videos.php)
   ===================================================================== */
.th-vrow {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: .875rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-md);
  background: var(--th-surface);
}

.th-vrow__thumb {
  width: 120px;
  height: 68px;
  object-fit: cover;
  border-radius: var(--th-radius-sm);
  background: var(--th-bg-subtle);
}

.th-vrow__form    { min-width: 0; }
.th-vrow__actions { display: flex; flex-direction: column; align-items: flex-end; }

@media (max-width: 767.98px) {
  /* The thumbnail keeps its row; the controls drop beneath the title
     rather than being squeezed into a 60px column. */
  .th-vrow { grid-template-columns: 96px minmax(0, 1fr); }
  .th-vrow__thumb { width: 96px; height: 54px; }
  .th-vrow__actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; gap: .5rem; }
}


/* =====================================================================
   GUIDES
   ---------------------------------------------------------------------
   Deliberately calmer than the listing modules. A guide page is read,
   not scanned: wider line height, a narrower measure, and no competing
   colour until the cross-link blocks at the foot.
   ===================================================================== */

.th-guides-hero { padding-top: 2rem; }
.th-guides-hero__text { max-width: 68ch; }

.th-guides-search {
  position: relative;
  display: flex;
  gap: .5rem;
  max-width: 560px;
}
.th-guides-search > i {
  position: absolute;
  left: .875rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--th-text-subtle);
  pointer-events: none;
}
.th-guides-search .form-control { padding-left: 2.5rem; }

/* ---------- Card ---------- */
.th-guide-card .th-card__title { font-size: 1rem; line-height: 1.35; }
.th-guide-card--feature .th-card__title { font-size: 1.375rem; }

.th-guide-card__meta {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .75rem;
  color: var(--th-text-muted);
}

/* ---------- Compact rows ---------- */
.th-guide-pill,
.th-guide-mini,
.th-guide-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem;
  border-radius: var(--th-radius-md);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--th-fast) var(--th-ease);
}
.th-guide-pill:hover,
.th-guide-mini:hover,
.th-guide-row:hover { background: var(--th-bg-subtle); color: inherit; }

.th-guide-pill { border: 1px solid var(--th-border); }
.th-guide-pill img,
.th-guide-mini img { border-radius: var(--th-radius-sm); object-fit: cover; flex-shrink: 0; }
.th-guide-pill img { width: 48px; height: 48px; }
.th-guide-mini img { width: 56px; height: 56px; }

.th-guide-row img {
  width: 72px;
  height: 54px;
  border-radius: var(--th-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.th-guide-row { border: 1px solid var(--th-border); }
.th-guide-row__text { min-width: 0; flex: 1; }
.th-guide-row__text strong { display: block; font-size: .875rem; line-height: 1.35; }

.th-guide-list {
  list-style: none;
  counter-reset: guides;
  margin: 0;
  padding: 0;
}
.th-guide-list li {
  counter-increment: guides;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .5rem;
  padding: .625rem 0;
  border-bottom: 1px solid var(--th-border);
}
.th-guide-list li::before {
  content: counter(guides);
  font-weight: 700;
  color: var(--th-text-subtle);
  font-variant-numeric: tabular-nums;
}
.th-guide-list a { display: block; font-weight: 600; }
.th-guide-list span { display: block; }

/* ---------- Article ---------- */
.th-guide__standfirst {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--th-text-muted);
  margin-bottom: 1.25rem;
}

.th-guide__byline {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 0;
  border-top: 1px solid var(--th-border);
  border-bottom: 1px solid var(--th-border);
}

.th-guide__cover { margin: 1.75rem 0; }
.th-guide__cover img {
  width: 100%;
  height: auto;
  border-radius: var(--th-radius-lg);
}
.th-guide__cover figcaption {
  margin-top: .5rem;
  font-size: .8125rem;
  color: var(--th-text-subtle);
}

/* A guide is long-form, so the body gets more room to breathe than a
   news article and a hard cap on line length — past about 75 characters
   the eye loses the start of the next line. */
.th-guide__body {
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 72ch;
}
.th-guide__body h2 { margin: 2.5rem 0 .875rem; scroll-margin-top: 5.5rem; }
.th-guide__body h3 { margin: 1.75rem 0 .625rem; scroll-margin-top: 5.5rem; }
.th-guide__body ul,
.th-guide__body ol { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.th-guide__body li { margin-bottom: .5rem; }

.th-guide__body blockquote {
  margin: 1.5rem 0;
  padding: .875rem 1.25rem;
  border-left: 3px solid var(--th-primary);
  background: var(--th-bg-subtle);
  border-radius: 0 var(--th-radius-md) var(--th-radius-md) 0;
}

/* ---------- Contents ---------- */
.th-guide-side { position: sticky; top: 5.5rem; }

.th-toc { display: flex; flex-direction: column; gap: .125rem; }
.th-toc__link {
  padding: .3rem .5rem;
  border-left: 2px solid var(--th-border);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--th-text-muted);
  text-decoration: none;
}
.th-toc__link:hover { border-left-color: var(--th-primary); color: var(--th-primary); }
.th-toc__link.is-sub { padding-left: 1.25rem; font-size: .75rem; }

/* ---------- FAQ ---------- */
.th-faq { margin: 2.5rem 0 0; }

.th-faq__item {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-md);
  margin-bottom: .5rem;
  background: var(--th-surface);
}
.th-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.th-faq__item summary::-webkit-details-marker { display: none; }
.th-faq__item summary::after {
  content: "\F282";                 /* bi-chevron-down */
  font-family: "bootstrap-icons";
  font-weight: 400;
  color: var(--th-text-subtle);
  transition: rotate var(--th-normal) var(--th-ease);
  flex-shrink: 0;
}
.th-faq__item[open] summary::after { rotate: 180deg; }
.th-faq__item summary:focus-visible { outline: 2px solid var(--th-primary); outline-offset: 2px; }

.th-faq__answer {
  padding: 0 1rem 1rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--th-text-muted);
}

/* ---------- Cross-link blocks ---------- */
.th-guide-links__block { margin-bottom: 3rem; }
.th-guide-links__block:last-child { margin-bottom: 0; }

.th-related-guides { margin: 0; }
.th-related-guides .th-section-head { margin-bottom: 1rem; }

@media (max-width: 991.98px) {
  .th-guide-side { position: static; }
}

@media (max-width: 575.98px) {
  .th-guide__body { font-size: 1rem; }
  .th-guides-search { flex-direction: column; }
  .th-guides-search > i { top: 1.375rem; }
}


/* =====================================================================
   WHATSAPP ENQUIRY CTA
   ===================================================================== */
.btn-whatsapp {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus { background: #1EBE5A; border-color: #1EBE5A; color: #fff; }
.btn-whatsapp:focus-visible { box-shadow: 0 0 0 3px rgba(37, 211, 102, .35); }

/* Card icon — sits beside the save heart, same size, so the corner
   stays a pair of controls rather than becoming a toolbar. */
.th-wa-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #25D366;
  font-size: 1.0625rem;
  backdrop-filter: blur(4px);
  box-shadow: var(--th-shadow-sm);
  transition: background-color var(--th-fast) var(--th-ease),
              color var(--th-fast) var(--th-ease);
}
.th-wa-icon:hover { background: #25D366; color: #fff; }

/* ---------------------------------------------------------------------
   Mobile sticky bar
   ---------------------------------------------------------------------
   Sits ABOVE the bottom tab bar, never over it. Covering the site's own
   navigation to sell a lead is how you make people leave, and on iOS it
   would also collide with the home indicator.
   --------------------------------------------------------------------- */
.th-wa-sticky { display: none; }

@media (max-width: 991.98px) {
  .th-wa-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--th-tabbar-h, 56px);
    z-index: calc(var(--th-z-sticky) - 1);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;

    padding: .625rem .875rem;
    padding-bottom: calc(.625rem + env(safe-area-inset-bottom, 0px));

    background: var(--th-surface);
    border-top: 1px solid var(--th-border);
    box-shadow: 0 -4px 16px rgba(17, 24, 39, .08);
  }

  .th-wa-sticky__price { display: flex; flex-direction: column; line-height: 1.2; }
  .th-wa-sticky__price strong { font-size: 1.0625rem; }
  .th-wa-sticky .btn { flex-shrink: 0; }

  /* Room for the bar plus the tab bar, so the foot of the page is
     still reachable rather than permanently hidden behind them. */
  body.th-has-wa-sticky { padding-bottom: calc(var(--th-tabbar-h, 56px) + 68px); }
}

@media print {
  .th-wa-sticky, .th-wa-icon { display: none !important; }
}


/* =====================================================================
   HELP CENTRE + CONTEXTUAL DRAWER
   ===================================================================== */
.th-help-hero { max-width: 62ch; }

.th-help-search { position: relative; display: flex; gap: .5rem; max-width: 520px; }
.th-help-search > i {
  position: absolute; left: .875rem; top: 50%; translate: 0 -50%;
  color: var(--th-text-subtle); pointer-events: none;
}
.th-help-search .form-control { padding-left: 2.5rem; }

/* ---------- Assistant ---------- */
.th-assistant {
  max-width: 560px;
  padding: 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}
.th-assistant__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.th-assistant__avatar {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--th-primary-soft, rgba(37,99,235,.12)); color: var(--th-primary);
}
.th-assistant__question { font-weight: 600; margin-bottom: .875rem; }
.th-assistant__options { display: flex; flex-direction: column; gap: .375rem; }

.th-assistant__option {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .875rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-md);
  color: inherit; text-decoration: none; font-weight: 500;
  transition: border-color var(--th-fast) var(--th-ease),
              background-color var(--th-fast) var(--th-ease);
}
.th-assistant__option:hover {
  border-color: var(--th-primary);
  background: var(--th-primary-soft, rgba(37,99,235,.06));
  color: inherit;
}
.th-assistant__option > span { flex: 1; }
.th-assistant__foot {
  display: flex; gap: .5rem; margin-top: 1rem;
  padding-top: .875rem; border-top: 1px solid var(--th-border);
}

/* ---------- Lists ---------- */
.th-help-cat,
.th-help-result,
.th-help-link {
  display: flex; gap: .75rem;
  color: inherit; text-decoration: none;
  transition: background-color var(--th-fast) var(--th-ease);
}

.th-help-cat {
  align-items: flex-start; height: 100%;
  padding: 1rem;
  border: 1px solid var(--th-border); border-radius: var(--th-radius-md);
  background: var(--th-surface);
}
.th-help-cat:hover { border-color: var(--th-primary); color: inherit; }
.th-help-cat__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--th-radius-sm);
  background: var(--th-primary-soft, rgba(37,99,235,.12)); color: var(--th-primary);
}

.th-help-result {
  flex-direction: column; gap: .125rem;
  padding: .875rem 1rem;
  border: 1px solid var(--th-border); border-radius: var(--th-radius-md);
}
.th-help-result:hover { background: var(--th-bg-subtle); color: inherit; }

.th-help-link { align-items: center; padding: .375rem 0; font-size: .875rem; }
.th-help-link:hover { color: var(--th-primary); }
.th-help-link i { color: var(--th-text-subtle); flex-shrink: 0; }

/* ---------- Article body ---------- */
.th-help-body { font-size: 1rem; line-height: 1.7; max-width: 70ch; }
.th-help-body h3 { margin: 1.75rem 0 .625rem; font-size: 1.0625rem; }
.th-help-body ul, .th-help-body ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.th-help-body li { margin-bottom: .375rem; }
.th-help-body table {
  width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .875rem;
}
.th-help-body th, .th-help-body td {
  padding: .5rem .625rem; border-bottom: 1px solid var(--th-border); text-align: left;
}
.th-help-body th { font-weight: 600; background: var(--th-bg-subtle); }

.th-help-actions {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--th-border);
}
.th-help-related { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--th-border); }
.th-help-side { position: sticky; top: 5.5rem; }

/* ---------- Trigger ---------- */
.th-help-btn {
  display: inline-grid; place-items: center; gap: .375rem;
  grid-auto-flow: column;
  min-width: 28px; height: 28px; padding: 0 .5rem;
  border: 1px solid var(--th-border); border-radius: var(--th-radius-pill);
  background: transparent; color: var(--th-text-muted);
  font-size: .75rem; cursor: pointer;
  transition: border-color var(--th-fast) var(--th-ease), color var(--th-fast) var(--th-ease);
}
.th-help-btn:hover { border-color: var(--th-primary); color: var(--th-primary); }

.th-help-banner {
  display: flex; align-items: center; gap: .625rem; width: 100%;
  padding: .75rem .875rem; margin-bottom: 1rem;
  border: 1px solid var(--th-border); border-radius: var(--th-radius-md);
  background: var(--th-primary-soft, rgba(37,99,235,.06));
  color: var(--th-text); font-size: .875rem; text-align: left; cursor: pointer;
}
.th-help-banner:hover { border-color: var(--th-primary); }
.th-help-banner > span { flex: 1; }
.th-help-banner > i:first-child { color: var(--th-primary); font-size: 1.05rem; }

/* ---------- Drawer ---------- */
.th-help-drawer { position: fixed; inset: 0; z-index: var(--th-z-modal, 1060); }
.th-help-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(17, 24, 39, .45);
  opacity: 0; transition: opacity var(--th-normal) var(--th-ease);
}
.th-help-drawer.is-open .th-help-drawer__backdrop { opacity: 1; }

.th-help-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(460px, 100%);
  display: flex; flex-direction: column;
  background: var(--th-surface);
  box-shadow: -8px 0 32px rgba(17, 24, 39, .18);
  translate: 100% 0;
  transition: translate var(--th-normal) var(--th-ease);
}
.th-help-drawer.is-open .th-help-drawer__panel { translate: 0 0; }

.th-help-drawer__head {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--th-border);
  flex-shrink: 0;
}
.th-help-drawer__head strong { flex: 1; }
.th-help-drawer__grip { display: none; }

.th-help-drawer__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.th-help-drawer__scroll { padding: 1.25rem; }

/* Stop the page behind from scrolling while the drawer is open. */
body.th-help-open { overflow: hidden; }

@media (max-width: 767.98px) {
  /* Bottom sheet. Capped at 88vh so a sliver of the page stays visible —
     it makes clear the drawer is a layer, not a navigation. */
  .th-help-drawer__panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-height: 88vh;
    border-radius: var(--th-radius-lg) var(--th-radius-lg) 0 0;
    translate: 0 100%;
    box-shadow: 0 -8px 32px rgba(17, 24, 39, .18);
  }
  .th-help-drawer__grip {
    display: block; width: 36px; height: 4px; border-radius: 2px;
    background: var(--th-border-strong); margin-right: .25rem;
  }
  .th-help-drawer__scroll { padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .th-help-side { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .th-help-drawer__panel, .th-help-drawer__backdrop { transition: none; }
}


/* =====================================================================
   SIGN-IN PROMPT
   ---------------------------------------------------------------------
   A card in the corner, not a modal. No backdrop and no scroll lock —
   the page stays fully usable behind it, which is the whole difference
   between a prompt and an interruption.
   ===================================================================== */
.th-signin-prompt {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: calc(var(--th-z-sticky) - 2);

  width: min(340px, calc(100vw - 2rem));
  padding: 1.125rem 1.25rem;

  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  box-shadow: 0 12px 40px rgba(17, 24, 39, .16);

  opacity: 0;
  translate: 0 16px;
  transition: opacity var(--th-normal) var(--th-ease),
              translate var(--th-normal) var(--th-ease);
}
.th-signin-prompt.is-in { opacity: 1; translate: 0 0; }

.th-signin-prompt__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--th-text-subtle);
  cursor: pointer;
}
.th-signin-prompt__close:hover { background: var(--th-bg-subtle); color: var(--th-text); }

.th-signin-prompt__title { font-weight: 700; margin: 0 1.5rem .375rem 0; }
.th-signin-prompt__text {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--th-text-muted);
  margin-bottom: .875rem;
}
.th-signin-prompt__actions { display: flex; flex-direction: column; gap: .5rem; }

.th-signin-prompt__foot {
  margin: .25rem 0 0;
  font-size: .75rem;
  color: var(--th-text-subtle);
  text-align: center;
}
.th-signin-prompt__foot button {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

@media (max-width: 575.98px) {
  /* Above the tab bar, never over it — same rule as the WhatsApp CTA.
     A prompt that covers the navigation is how you lose the visitor
     you were trying to convert. */
  .th-signin-prompt {
    left: .75rem;
    right: .75rem;
    bottom: calc(var(--th-tabbar-h, 56px) + .75rem);
    width: auto;
  }
}

/* A property page already has a sticky WhatsApp bar there. */
body.th-has-wa-sticky .th-signin-prompt {
  bottom: calc(var(--th-tabbar-h, 56px) + 82px);
}

@media (prefers-reduced-motion: reduce) {
  .th-signin-prompt { transition: none; }
}