/* File: App/Main/Apps/Trip/assets/app.css */

/* ----------------------------------------------------------------
   THEME — one accent color drives the whole public surface.
   Default: ocean blue. The admin can override it via the account
   Settings tab (config key public_theme_color); layout.php then
   injects a single `:root { --trip-accent: #xxxxxx; }` override and
   the derived shades below follow automatically via color-mix().
   Category chips inherit --trip-accent as their default border and
   only carry an inline border-color when a custom color is set.
   ---------------------------------------------------------------- */
:root {
    --trip-accent: #0077be;                                            /* ocean blue */
    --trip-accent-dark: color-mix(in srgb, var(--trip-accent) 86%, #000);
    --trip-accent-darker: color-mix(in srgb, var(--trip-accent) 70%, #000);
    --trip-accent-ring: color-mix(in srgb, var(--trip-accent) 15%, transparent);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    color: #1a1a1a;
    background: #fafafa;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--trip-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.trip-header { background: #fff; border-bottom: 1px solid #e5e5e5; position: sticky; top: 0; z-index: 50; }
.trip-header-inner { max-width: 1200px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.trip-logo { font-size: 20px; font-weight: 700; color: #1a1a1a; }
.trip-logo:hover { text-decoration: none; color: var(--trip-accent); }
.trip-nav { display: flex; gap: 20px; flex: 1; }
.trip-nav a { color: #555; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; }
.trip-nav a.is-active { color: #1a1a1a; border-bottom-color: var(--trip-accent); }
.trip-nav a:hover { text-decoration: none; color: #1a1a1a; }
.trip-header-actions { display: flex; align-items: center; gap: 8px; }
.trip-header-actions .trip-lang-switch,
.trip-header-actions .trip-btn {
    /* Shared baseline so all three header controls have the same height */
    height: 36px;
    box-sizing: border-box;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid #d4d4d4;
    display: inline-flex;
    align-items: center;
}
.trip-lang-switch {
    /* Kill native select styling on every engine */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* IE/old-Edge specific — hide native arrow */
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding: 0 32px 0 14px;
    min-width: 70px;        /* enough room for "EN" + gap + chevron */
    color: #555;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}
.trip-lang-switch::-ms-expand { display: none; }   /* IE / legacy Edge */
.trip-lang-switch:hover { background-color: #f5f5f5; color: #1a1a1a; }
.trip-lang-switch:focus { outline: none; border-color: var(--trip-accent); box-shadow: 0 0 0 3px var(--trip-accent-ring); }

/* Buttons */
.trip-btn { display: inline-block; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.4; transition: background .15s, border-color .15s; }
.trip-btn:hover { text-decoration: none; }
.trip-btn-primary { background: var(--trip-accent); color: #fff; border-color: var(--trip-accent); }
.trip-btn-primary:hover { background: var(--trip-accent-dark); border-color: var(--trip-accent-dark); color: #fff; }
.trip-btn-ghost { background: #fff; color: #1a1a1a; border-color: #d4d4d4; }
.trip-btn-ghost:hover { background: #f5f5f5; color: #1a1a1a; }
.trip-btn-block { display: block; width: 100%; padding: 12px 16px; font-size: 15px; height: auto; }

/* Layout */
.trip-main { flex: 1 0 auto; }
.trip-container { max-width: 1200px; margin: 0 auto; padding: 24px 20px; }
.trip-narrow { max-width: 480px; }
.trip-section { margin-bottom: 32px; }

/* Hero */
.trip-hero { background: linear-gradient(135deg, var(--trip-accent) 0%, var(--trip-accent-darker) 100%); color: #fff; padding: 64px 20px; text-align: center; }
/* Optional hero image (Rework Prompt 4 T3): the inline style supplies a
   dark linear-gradient overlay layered over the cropped image for text
   contrast; cover/center apply to both layers. Default stays the solid
   theme-colored bar above (--trip-accent / --trip-accent-darker). */
.trip-hero.has-image { background-size: cover; background-position: center; }
.trip-hero h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 12px; font-weight: 700; }
.trip-hero-sub { font-size: 17px; opacity: .92; max-width: 560px; margin: 0 auto 24px; }
.trip-hero-search input { width: 100%; max-width: 560px; padding: 14px 18px; border: none; border-radius: 8px; font-size: 15px; background: #fff; }

/* Cards / forms */
.trip-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; padding: 28px; }
.trip-card h1 { margin: 0 0 12px; font-size: 22px; }
.trip-card p { margin: 0 0 16px; color: #444; }
.trip-success { border-left: 4px solid #16a34a; }
.trip-error   { border-left: 4px solid #dc2626; }
.trip-alert { padding: 10px 14px; border-radius: 6px; margin: 12px 0; font-size: 14px; }
.trip-alert-error { background: #fee; color: #991b1b; border: 1px solid #fcc; }
.trip-form { margin-top: 16px; }
.trip-label { display: block; margin-bottom: 16px; }
.trip-label > span { display: block; font-size: 13px; color: #555; margin-bottom: 6px; font-weight: 500; }
.trip-input { width: 100%; padding: 10px 12px; border: 1px solid #d4d4d4; border-radius: 6px; font-size: 15px; font-family: inherit; background: #fff; }
.trip-input:focus { outline: none; border-color: var(--trip-accent); box-shadow: 0 0 0 3px var(--trip-accent-ring); }
.trip-input:disabled { background: #f5f5f5; color: #999; cursor: not-allowed; }
.trip-btn:disabled, .trip-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Misc */
.trip-muted { color: #666; }
.trip-empty { padding: 40px 20px; text-align: center; color: #666; }
.trip-data { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 16px 0; }
.trip-data dt { color: #666; font-size: 14px; }
.trip-data dd { margin: 0; color: #1a1a1a; }

/* Footer */
.trip-footer { background: #fff; border-top: 1px solid #e5e5e5; padding: 20px 0; margin-top: 40px; }
.trip-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; color: #666; font-size: 13px; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------- */
/* Phase 4 — home, browse, trip detail, supplier */
/* ---------------------------------------------------------------- */

.trip-section-title { font-size: 22px; margin: 0 0 16px; font-weight: 600; }
.trip-section-cta   { text-align: center; margin-top: 24px; }
.trip-small         { font-size: 13px; }

/* Hero search */
.trip-hero-search {
    display: flex; gap: 8px; max-width: 600px; margin: 0 auto;
    flex-wrap: wrap; justify-content: center;
}
.trip-hero-search input[type="text"] {
    flex: 1 1 320px;
    padding: 14px 18px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
    color: #1a1a1a;
}
.trip-hero-search button { flex: 0 0 auto; }

/* Categories grid */
.trip-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.trip-cat-tile {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1a1a;
    transition: border-color .12s, box-shadow .12s;
    gap: 8px;
}
.trip-cat-tile { border-color: color-mix(in srgb, var(--trip-accent) 35%, #e5e5e5); }
.trip-cat-tile:hover { border-color: var(--trip-accent); box-shadow: 0 2px 6px rgba(0,0,0,.05); text-decoration: none; }
.trip-cat-label { font-weight: 500; font-size: 14px; }
.trip-cat-count {
    background: #f1f5f9; color: #64748b;
    padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
}

/* Card grid */
.trip-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.trip-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: #1a1a1a;
    transition: transform .15s, box-shadow .15s;
}
.trip-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); text-decoration: none; }
.trip-card-image {
    aspect-ratio: 16 / 10;
    background-size: cover; background-position: center;
    background-color: #f0f0f0;
}
.trip-card-image-empty {
    background-image: linear-gradient(135deg, #e5e7eb, #f3f4f6);
}
.trip-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.trip-card-title { font-size: 16px; margin: 0; font-weight: 600; line-height: 1.3; }
.trip-card-loc { color: #666; font-size: 13px; }
.trip-card-supplier { color: #888; font-size: 12px; margin-bottom: 4px; }
.trip-card-footer { margin-top: auto; padding-top: 8px; }
.trip-card-price { font-size: 17px; font-weight: 700; color: #1a1a1a; }
.trip-card-price-suffix { color: #666; font-size: 12px; font-weight: normal; }
.trip-card-price-quote { font-size: 14px; font-weight: 600; color: var(--trip-accent); }

/* Browse filter bar */
.trip-filter-bar {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.trip-filter-bar .trip-input { flex: 1 1 160px; max-width: 240px; }
.trip-result-count { margin: 0 0 16px; font-size: 14px; }

/* Pagination */
.trip-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.trip-pagination a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1px solid #d4d4d4; border-radius: 6px;
    background: #fff; color: #555; text-decoration: none;
    font-size: 14px;
}
.trip-pagination a:hover { background: #f5f5f5; text-decoration: none; }
.trip-pagination a.is-current { background: var(--trip-accent); color: #fff; border-color: var(--trip-accent); }

/* Trip detail */
.trip-detail-title { font-size: 30px; margin: 16px 0 8px; }
.trip-detail-meta { color: #64748b; font-size: 15px; margin: 0 0 24px; }

.trip-detail-langs {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px; margin: 0 0 16px;
}
.trip-detail-langs-label { color: #64748b; font-size: 13px; margin-right: 4px; }
.trip-detail-lang-pill {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #555;
    font-size: 12px;
    text-decoration: none;
}
.trip-detail-lang-pill:hover { background: #f1f5f9; text-decoration: none; }
.trip-detail-lang-pill.is-active {
    background: var(--trip-accent); color: #fff; border-color: var(--trip-accent);
}

.trip-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
}
.trip-detail-main > .trip-detail-section,
.trip-detail-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px 24px;
}
.trip-detail-main > .trip-detail-section { margin-bottom: 16px; padding: 20px 24px; }
.trip-detail-main > .trip-detail-section h2 { margin: 0 0 12px; font-size: 18px; }
.trip-detail-prose { line-height: 1.6; color: #333; white-space: pre-wrap; }
.trip-detail-summary { margin: 0; font-size: 16px; line-height: 1.55; color: #333; }
.trip-detail-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.trip-cat-chip {
    display: inline-block;
    padding: 4px 12px;
    background: #eff6ff;
    color: var(--trip-accent-dark);
    border: 1px solid #dbeafe;
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
}
.trip-cat-chip:hover { background: #dbeafe; text-decoration: none; }

.trip-detail-map {
    width: 100%; height: 180px; border-radius: 8px;
    background: #f0f0f0;
}
.trip-detail-loc-title {
    font-size: 16px; margin: 0 0 10px;
}
.trip-detail-coords {
    margin: 8px 0 0; font-size: 12px; color: #64748b;
}

.trip-detail-aside { position: sticky; top: 80px; align-self: start; }
.trip-detail-card { padding: 24px; }
.trip-detail-price { font-size: 28px; font-weight: 700; }
.trip-detail-price-suffix { color: #64748b; font-size: 13px; margin-bottom: 14px; }
.trip-detail-pay-modes { list-style: none; padding: 0; margin: 14px 0; font-size: 13px; color: #444; }
.trip-detail-pay-modes li {
    display: inline-block;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 13px;
    margin: 2px 4px 2px 0;
}
.trip-detail-dates { margin: 18px 0; }
.trip-detail-dates h4 { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.trip-detail-dates ul { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.trip-detail-dates li {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.trip-detail-dates li:last-child { border-bottom: none; }
.trip-date-when { color: #1e293b; font-weight: 500; }
.trip-detail-seats { color: #16a34a; font-size: 12px; font-weight: 600; }

/* ---- Rev 14: bookable-day table (detail sidebar + booking picker) ----
   Availability colors: green = 3+ seats free (or unlimited ∞),
   yellow = 1-2 free, red = full (picker rows disabled). */
.trip-day-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.trip-day-table td { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.trip-day-table tr:last-child td { border-bottom: none; }
.trip-day-table .trip-day-seats { text-align: right; white-space: nowrap; }
.trip-day-badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.trip-day-green  .trip-day-badge { background: #ecfdf5; color: #047857; }
.trip-day-yellow .trip-day-badge { background: #fefce8; color: #a16207; }
.trip-day-red    .trip-day-badge { background: #fef2f2; color: #b91c1c; }
.trip-day-red .trip-date-when { color: #94a3b8; }

/* ---- Rev 16: sidebar availability CALENDAR (month pager, no scrolling).
   Cell = day number + x/X counter (left / per-day total; ∞ unlimited).
   green = 3+ free · yellow = 1-2 · red = full · grey = not bookable. */
.trip-cal-widget { margin-top: 4px; }
.trip-cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.trip-cal-nav-title { font-size: 13px; font-weight: 700; color: #1e293b; }
.trip-cal-nav-btn {
    width: 28px; height: 28px; border-radius: 7px; border: 1px solid #cbd5e1;
    background: #fff; color: #1e293b; font-size: 14px; font-weight: 700;
    line-height: 1; cursor: pointer;
}
.trip-cal-nav-btn:hover:not(:disabled) { border-color: var(--trip-accent, #0369a1); color: var(--trip-accent, #0369a1); }
.trip-cal-nav-btn:disabled { opacity: .35; cursor: default; }
.trip-cal { display: none; }
.trip-cal.is-active { display: block; }
.trip-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.trip-cal-head span {
    font-size: 9px; color: #94a3b8; text-transform: uppercase;
    text-align: center; letter-spacing: .03em; padding-bottom: 2px;
}
.trip-cal-day {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; min-height: 38px; border-radius: 8px; border: 0; padding: 2px 0;
    font-family: inherit; margin: 0; user-select: none; background: transparent;
}
.trip-cal-num { font-size: 12px; font-weight: 700; line-height: 1.1; }
.trip-cal-cnt { font-size: 9px; font-weight: 600; line-height: 1; opacity: .85; }
.trip-cal-blank { visibility: hidden; }
.trip-cal-off { background: #f1f5f9; color: #cbd5e1; }
.trip-cal-off .trip-cal-num { font-weight: 500; }
.trip-cal-green  { background: #ecfdf5; color: #047857; }
.trip-cal-yellow { background: #fefce8; color: #a16207; }
.trip-cal-red    { background: #fef2f2; color: #b91c1c; }
span.trip-cal-day.is-full .trip-cal-num { text-decoration: line-through; text-decoration-color: #fca5a5; }
button.trip-cal-day { cursor: pointer; }
button.trip-cal-day:hover,
button.trip-cal-day:focus-visible { outline: 2px solid var(--trip-accent, #0369a1); outline-offset: -1px; }
button.trip-cal-day.is-selected {
    outline: 2px solid var(--trip-accent, #0369a1); outline-offset: -1px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--trip-accent, #0369a1) 20%, transparent);
}
.trip-cal-legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    font-size: 11px; color: #64748b; margin-top: 8px;
}
.trip-cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.trip-cal-dot.trip-cal-off { background: #e2e8f0; }
.trip-cal-hint { margin-top: 6px; }

/* Two-step booking popups */
.trip-modal-box-sm { max-width: 420px; }
.trip-book-day-line { font-size: 15px; font-weight: 700; color: #1e293b; margin-top: 2px; }

/* Seats stepper — Rev 17: one joined pill (− | value | +), equal heights,
   no stray borders; the wrapper carries the focus ring. */
.trip-seat-stepper {
    display: inline-flex; align-items: stretch; width: max-content;
    border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden;
    background: #fff; margin: 4px 0 16px;
}
.trip-seat-stepper:focus-within {
    border-color: var(--trip-accent, #0369a1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--trip-accent, #0369a1) 18%, transparent);
}
.trip-seat-stepper .trip-input,
.trip-seat-stepper .trip-input:focus {
    border: 0; outline: none; box-shadow: none; border-radius: 0;
    width: 64px; height: 42px; padding: 0; margin: 0;
    text-align: center; font-size: 16px; font-weight: 700;
    -moz-appearance: textfield; appearance: textfield;
}
.trip-seat-stepper .trip-input::-webkit-outer-spin-button,
.trip-seat-stepper .trip-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.trip-seat-btn {
    flex: 0 0 auto; width: 42px; border: 0; background: #f8fafc; color: #1e293b;
    font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer;
}
.trip-seat-btn:first-child { border-right: 1px solid #e2e8f0; }
.trip-seat-btn:last-child { border-left: 1px solid #e2e8f0; }
.trip-seat-btn:hover { background: #f1f5f9; color: var(--trip-accent, #0369a1); }
.trip-seat-btn:active { background: #e2e8f0; }

/* Scroll-bleed guard: inner scrollables must not chain to the page. */
.trip-modal, .trip-modal-box, .trip-detail-dates .trip-day-table, .trip-cal-widget { overscroll-behavior: contain; }
.trip-detail-sep { border: none; border-top: 1px solid #e2e8f0; margin: 18px 0; }
.trip-detail-supplier { display: flex; gap: 12px; align-items: center; text-decoration: none; color: #1a1a1a; }
.trip-detail-supplier:hover { text-decoration: none; }
.trip-detail-supplier-avatar {
    width: 48px; height: 48px; border-radius: 999px;
    background-size: cover; background-position: center;
    background-color: #e5e7eb;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    color: #64748b; font-weight: 700; font-size: 18px;
}
.trip-detail-supplier-meta { display: flex; flex-direction: column; }
.trip-detail-supplier-label { font-size: 12px; color: #94a3b8; }

/* Carousel */
.trip-carousel { margin-bottom: 16px; }
.trip-carousel-main {
    width: 100%; height: 480px;
    border-radius: 12px; overflow: hidden;
    background: #e2e8f0;
    position: relative;
}
.trip-carousel-slide {
    width: 100%; height: 100%; object-fit: cover;
    display: none;
    position: absolute; inset: 0;
}
.trip-carousel-slide.is-active { display: block; }
.trip-carousel-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5); color: #fff;
    border: none;
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    z-index: 2;
}
.trip-carousel-nav:hover { background: rgba(0, 0, 0, 0.75); }
.trip-carousel-nav.prev { left: 12px; }
.trip-carousel-nav.next { right: 12px; }
.trip-carousel-counter {
    position: absolute; bottom: 12px; right: 12px;
    background: rgba(0, 0, 0, 0.6); color: #fff;
    padding: 4px 10px; border-radius: 6px; font-size: 13px;
    z-index: 2;
}
.trip-carousel-thumbs {
    display: flex; gap: 6px; margin-top: 8px;
    overflow-x: auto; padding-bottom: 4px;
}
.trip-carousel-thumb {
    flex: 0 0 auto;
    width: 92px; height: 64px;
    border: 2px solid transparent;
    border-radius: 6px; padding: 0;
    cursor: pointer; overflow: hidden;
    background: #e2e8f0;
    transition: border-color .15s;
}
.trip-carousel-thumb.is-active { border-color: var(--trip-accent); }
.trip-carousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trip-carousel-empty {
    width: 100%; height: 280px;
    background: #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 36px;
    border-radius: 12px; margin-bottom: 16px;
}

/* Supplier page */
.trip-supplier-cover {
    height: 220px;
    background-size: cover; background-position: center;
    background-color: #1a1a1a;
}
.trip-supplier-head {
    display: flex; gap: 20px; align-items: flex-end;
    margin: -50px 0 24px;
    padding: 0;
}
.trip-supplier.has-no-cover .trip-supplier-head {
    margin-top: 32px;
    align-items: center;
}
.trip-supplier.has-no-cover .trip-supplier-avatar {
    border: none; box-shadow: none;
}
.trip-supplier-head h1 { font-size: 26px; margin: 0; }
.trip-supplier-head-meta { flex: 1 1 auto; min-width: 0; padding-bottom: 8px; }
.trip-supplier-head .trip-bookmark-form { padding-bottom: 8px; }
.trip-supplier-avatar {
    width: 100px; height: 100px; border-radius: 999px;
    background-size: cover; background-position: center;
    background-color: #e5e7eb;
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    color: #555; font-weight: 700; font-size: 36px;
}
/* Bookmark buttons */
.trip-bookmark-form, .trip-bookmark-form-inline { margin: 0; }
.trip-bookmark-star {
    background: transparent;
    border: none;
    padding: 4px 8px;
    font-size: 28px;
    line-height: 1;
    color: #cbd5e1;
    cursor: pointer;
    transition: color .12s, transform .12s;
}
.trip-bookmark-star:hover { color: #f59e0b; transform: scale(1.1); }
.trip-bookmark-star.is-on { color: #f59e0b; }
.trip-bookmark-star.is-on:hover { color: #d97706; }

/* Trip title row — H1 left, star right */
.trip-detail-title-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 16px 0 8px;
}
.trip-detail-title-row .trip-detail-title { margin: 0; }

/* Saved suppliers grid */
.trip-supplier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.trip-supplier-card {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1a1a;
}
.trip-supplier-card:hover { border-color: var(--trip-accent); text-decoration: none; }
.trip-supplier-card-avatar {
    width: 44px; height: 44px; border-radius: 999px;
    background-size: cover; background-position: center;
    background-color: #e5e7eb;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    color: #555; font-weight: 700; font-size: 16px;
}
.trip-supplier-card-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trip-supplier-card-meta strong { font-size: 14px; }

/* Adjust supplier head to make room for the bookmark button */

@media (max-width: 900px) {
    .trip-detail-layout { grid-template-columns: 1fr; }
    .trip-detail-aside { position: static; }
    .trip-carousel-main { height: 320px; }
}

@media (max-width: 720px) {
    .trip-header-inner { gap: 12px; }
    .trip-nav { order: 3; flex: 1 0 100%; gap: 16px; }
    .trip-nav a { font-size: 14px; }
    .trip-supplier-head { flex-direction: column; align-items: flex-start; text-align: left; margin-top: -40px; }
    .trip-filter-bar .trip-input { max-width: none; }
}

/* ---------------------------------------------------------------- */
/* Advanced search modal */
/* ---------------------------------------------------------------- */
.trip-modal {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1000;
    align-items: flex-start; justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}
.trip-modal.is-open { display: flex; }
.trip-modal-box {
    background: #fff;
    border-radius: 12px;
    max-width: 720px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.trip-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid #e5e5e5;
}
.trip-modal-head h2 { margin: 0; font-size: 18px; }
.trip-modal-close {
    background: transparent; border: none; font-size: 28px; line-height: 1;
    color: #555; cursor: pointer; padding: 0 8px;
}
.trip-modal-close:hover { color: #1a1a1a; }
.trip-modal-body { padding: 22px 24px; }
.trip-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.trip-modal-fullrow { grid-column: 1 / -1; }
.trip-modal-foot {
    display: flex; gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid #e5e5e5;
    background: #fafafa;
    align-items: center;
}

/* Filter icon button (used in hero search and browse filter bar) */
.trip-filter-iconbtn,
.trip-filter-iconbtn-relative {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    padding: 0;
    flex: 0 0 auto;
}
.trip-filter-iconbtn.trip-btn-ghost,
.trip-filter-iconbtn-relative.trip-btn-ghost { color: #1a1a1a; }
.trip-filter-iconbtn.trip-btn-primary,
.trip-filter-iconbtn-relative.trip-btn-primary { color: #fff; }
.trip-filter-iconbtn-relative { position: relative; }
.trip-filter-iconbtn.trip-btn-ghost:hover,
.trip-filter-iconbtn-relative.trip-btn-ghost:hover { background: #f5f5f5; }
.trip-filter-iconbtn-relative .trip-filter-badge {
    position: absolute; top: -4px; right: -4px;
    margin: 0;
}
.trip-filter-iconbtn svg,
.trip-filter-iconbtn-relative svg { display: block; }

/* Filter "more filters" badge (count of active advanced filters) */
.trip-filter-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--trip-accent); color: #fff;
    font-size: 11px; font-weight: 700;
    min-width: 18px; text-align: center;
}

/* Leaflet — sit nicely inside our card layouts */
.trip-detail-map.leaflet-container { background: #f0f0f0; }

@media (max-width: 600px) {
    .trip-modal-grid { grid-template-columns: 1fr; }
    .trip-modal { padding: 16px 8px; }
    .trip-modal-head, .trip-modal-body, .trip-modal-foot { padding-left: 16px; padding-right: 16px; }
}
/* ====================================================================
 * Phase 5 — Reservations / inquiries / me page
 * ==================================================================== */

/* Form labels paired with .trip-input siblings (modal forms). */
.trip-form-label {
    display: block;
    font-size: 13px;
    color: #555;
    font-weight: 500;
    margin: 14px 0 6px;
}
.trip-form-label:first-child { margin-top: 0; }

/* Flash banners shown above the main content area. */
.trip-flash {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
    border: 1px solid transparent;
}
.trip-flash-ok  { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.trip-flash-err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Small / danger button variants. */
.trip-btn-sm     { padding: 6px 12px; font-size: 13px; height: auto; }
.trip-btn-danger { color: #b91c1c; }
.trip-btn-danger:hover { background: #fef2f2; }

/* Request cards on the consumer "me" page. */
.trip-request-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}
.trip-request-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.trip-request-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.trip-request-card-body { display: flex; flex-direction: column; gap: 6px; }
.trip-request-card-title { margin: 0; font-size: 15px; }
.trip-request-msg {
    margin: 4px 0 0;
    padding: 10px 12px;
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
    border-radius: 4px;
    font-size: 14px;
    color: #334155;
}
.trip-request-response {
    margin: 4px 0 0;
    padding: 10px 12px;
    background: #f0fdf4;
    border-left: 3px solid #86efac;
    border-radius: 4px;
    font-size: 14px;
    color: #166534;
}
.trip-request-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.trip-request-card-actions form { margin: 0; }

/* Status pill on request cards. */
.trip-request-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}
.trip-request-status-pending   { background: #ca8a04; }
.trip-request-status-accepted  { background: #16a34a; }
.trip-request-status-paid      { background: var(--trip-accent); }
.trip-request-status-completed { background: #6b7280; }
.trip-request-status-declined  { background: #dc2626; }
.trip-request-status-cancelled { background: #6b7280; }
.trip-request-status-inquiry   { background: #7c3aed; }

/* Tighten textareas inside modals. */
.trip-modal-body textarea.trip-input { min-height: 88px; resize: vertical; }

/* Phase 5c.1 — request thread on me page */
.trip-request-thread { margin-top: 0.5rem; }
.trip-request-thread summary { cursor: pointer; font-size: 13px; color: #555; }
.trip-request-thread-body { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 6px; }
.trip-thread-msg { padding: 8px 10px; border-radius: 6px; max-width: 85%; }
.trip-thread-meta { font-size: 11px; color: #666; margin-bottom: 2px; }
.trip-thread-body { font-size: 14px; white-space: pre-wrap; }
.trip-thread-msg-supplier { background: #f3f4f6; align-self: flex-start; }
.trip-thread-msg-consumer { background: #dbeafe; align-self: flex-end; }
.trip-thread-msg-system   { background: #fef3c7; align-self: center; font-style: italic; max-width: 100%; text-align: center; }

/* Phase 5c.2 — icon button rows + videos */
.trip-btn-icon { padding: 8px 10px; }
.trip-btn-icon-row { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.trip-detail-videos { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.trip-detail-video { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 12px; background: #000; }
.trip-detail-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.trip-detail-video-link { font-size: 14px; }

/* Phase 5c.3 — icon-only action buttons + smaller embedded video */
.trip-detail-actions { display: flex; gap: 8px; margin-top: 4px; }
.trip-btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    flex: 1;
    height: 48px;
}
.trip-btn-icon-only svg { display: block; }
.trip-detail-videos-section .trip-detail-video {
    max-width: 480px;
    padding-top: min(56.25%, 270px);
}

/* Phase 5c.4 — cancel_pending status */
.trip-request-status-cancel_pending {
    background: #dc2626;
    animation: trip-pulse 1.6s ease-in-out infinite;
}
@keyframes trip-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.65; } }

/* ======================================================================
 * REVIEWS — Phase 5d-2 (consumer side)
 * ====================================================================== */

/* The review page itself: same width vibes as other content sections */
.trip-review-page { max-width: 720px; }
.trip-review-page h1 { margin-bottom: 8px; }
.trip-review-form { margin-top: 8px; }

/* --- STAR INPUT (radio-driven, no JS) ---------------------------------- *
 * Implementation: 5 radios are emitted in REVERSE order (5..1). They sit
 * in a flex container with `flex-direction: row-reverse`, which renders
 * them visually 1..5 left-to-right. The CSS sibling combinator (~) only
 * looks RIGHT in the DOM, but since the DOM order is 5..1, "to the right
 * of star N" in the DOM is "to the left of star N" visually — exactly
 * the cascade we want for fill-on-hover and fill-on-check.
 * --------------------------------------------------------------------- */
.trip-review-stars-fs {
    border: 0;
    padding: 0;
    margin: 0;
}
.trip-review-stars-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 8px;
}
.trip-review-star-radio {
    /* Hide visually but keep accessible to keyboard + screen readers */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.trip-review-star-label {
    cursor: pointer;
    font-size: 36px;
    line-height: 1;
    color: #e5e7eb;
    transition: color 0.12s ease, transform 0.12s ease;
    user-select: none;
    padding: 4px;
}
/* Default fill cascade: when a radio is checked, fill IT and every star
   visually to the LEFT of it (which is everything to the RIGHT in DOM). */
.trip-review-star-radio:checked ~ .trip-review-star-label,
.trip-review-star-radio:checked + .trip-review-star-label {
    color: #f59e0b;
}
/* Hover cascade: same idea, takes precedence while pointer is over the row. */
.trip-review-stars-input:hover .trip-review-star-label { color: #e5e7eb; }
.trip-review-star-label:hover,
.trip-review-star-label:hover ~ .trip-review-star-label {
    color: #fbbf24;
    transform: scale(1.05);
}
/* Keyboard focus ring on whichever star the radio currently has focus on */
.trip-review-star-radio:focus-visible + .trip-review-star-label {
    outline: 2px solid var(--trip-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- STAR DISPLAY (read-only, on the thanks page) ---------------------- */
.trip-review-readonly {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 16px;
}
.trip-review-stars-readonly {
    display: inline-flex;
    gap: 2px;
    font-size: 28px;
    line-height: 1;
    margin: 6px 0 12px;
}
.trip-review-star-readonly { color: #e5e7eb; }
.trip-review-star-readonly.is-on { color: #f59e0b; }
.trip-review-body-readonly {
    margin: 8px 0 0;
    padding: 8px 14px;
    border-left: 3px solid #cbd5e1;
    color: #374151;
    background: #fff;
    font-style: normal;
}

/* --- PILL on /me cards -------------------------------------------------- *
 * Compact "you reviewed this 4★" indicator that sits in the card actions
 * row alongside the other buttons. Looks like a chip, not a button.
 * --------------------------------------------------------------------- */
.trip-review-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fef3c7;
    color: #78350f;
    font-size: 0.85rem;
    line-height: 1;
}
.trip-review-pill-star { color: #e5e7eb; font-size: 0.95rem; }
.trip-review-pill-star.is-on { color: #f59e0b; }
.trip-review-pill-label { margin-left: 6px; font-weight: 500; }

/* Mobile: stars stay roomy enough to tap; the pill shrinks gracefully */
@media (max-width: 480px) {
    .trip-review-star-label { font-size: 32px; padding: 6px; }
    .trip-review-stars-readonly { font-size: 24px; }
    .trip-review-pill-label { display: none; }
}

/* /me card: collapsible review summary block ---------------------------- */
.trip-request-review-collapse,
.trip-request-review-summary-static {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
}
.trip-request-review-collapse[open] {
    padding-bottom: 14px;
}
.trip-request-review-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
/* Collapse the default disclosure triangle */
.trip-request-review-summary::-webkit-details-marker { display: none; }
.trip-request-review-summary-static {
    cursor: default;
}
.trip-request-review-collapse > summary::after {
    content: "▾";
    margin-left: auto;
    color: #b45309;
    font-size: 0.9rem;
    transition: transform 0.15s ease;
}
.trip-request-review-collapse[open] > summary::after {
    transform: rotate(180deg);
}
.trip-request-review-stars {
    display: inline-flex;
    gap: 1px;
    font-size: 18px;
    line-height: 1;
}
.trip-request-review-star { color: #e5e7eb; }
.trip-request-review-star.is-on { color: #f59e0b; }
.trip-request-review-body-wrap {
    margin-top: 10px;
}
.trip-request-review-body {
    margin: 0;
    color: #374151;
    line-height: 1.5;
    white-space: pre-wrap;
}
.trip-request-review-response {
    margin-top: 12px;
    padding: 8px 12px;
    background: #fff;
    border-left: 2px solid #cbd5e1;
    font-size: 0.92rem;
    color: #374151;
}
.trip-request-review-response p { margin: 4px 0 0; line-height: 1.5; }


/* ======================================================================
 * REVIEWS — Phase 5d-3 (public display: cards, trip detail, supplier)
 * ====================================================================== */

/* Inline rating chip on trip detail meta + supplier head -------------- */
.trip-rating-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: #374151;
}
.trip-rating-summary strong { color: #111827; }
.trip-rating-star {
    color: #f59e0b;
    font-size: 1em;
    line-height: 1;
}
.trip-supplier-rating-line {
    margin: 4px 0 6px;
    font-size: 0.95rem;
}

/* Card rating line ------------------------------------------------------ */
.trip-card-rating {
    margin: 4px 0;
    font-size: 0.9rem;
    color: #374151;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.trip-card-rating-star {
    color: #f59e0b;
    font-size: 1em;
}
.trip-card-rating strong { color: #111827; font-weight: 600; }

/* Review list block ----------------------------------------------------- */
.trip-public-review-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}
.trip-public-review {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 18px;
}
.trip-public-review-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.trip-public-review-stars {
    display: inline-flex;
    gap: 1px;
    font-size: 18px;
    line-height: 1;
}
.trip-public-review-star { color: #e5e7eb; }
.trip-public-review-star.is-on { color: #f59e0b; }
.trip-public-review-meta {
    color: #6b7280;
    font-size: 0.88rem;
}
.trip-public-review-pending {
    background: #fef3c7;
    color: #78350f;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: help;
    border: 1px solid #fcd34d;
}
.trip-public-review-trip {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: #6b7280;
}
.trip-public-review-trip a {
    color: var(--trip-accent);
    text-decoration: none;
}
.trip-public-review-trip a:hover { text-decoration: underline; }
.trip-public-review-body {
    margin: 6px 0 0;
    color: #374151;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Supplier response (shown inline under the original review) ----------- */
.trip-public-review-response {
    margin-top: 12px;
    padding: 10px 14px;
    background: #f9fafb;
    border-left: 3px solid #6b7280;
    border-radius: 4px;
}
.trip-public-review-response-head {
    font-size: 0.9rem;
    color: #374151;
}
.trip-public-review-response p {
    margin: 4px 0 0;
    color: #374151;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Mobile breakpoint adjustments ---------------------------------------- */
@media (max-width: 480px) {
    .trip-public-review { padding: 12px 14px; }
    .trip-public-review-stars { font-size: 16px; }
    .trip-public-review-meta { font-size: 0.82rem; }
}

/* Links — icon tiles in the right aside card + supplier page ------------- */
.trip-detail-aside-title {
    margin: 0 0 10px;
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.trip-aside-link-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.trip-aside-link-grid li { margin: 0; padding: 0; }

.trip-aside-link-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: var(--trip-accent, var(--trip-accent));
    text-decoration: none;
    transition: background-color .15s, border-color .15s, transform .1s;
}

.trip-aside-link-tile:hover {
    background: #e0ecff;
    border-color: #bfdbfe;
    text-decoration: none;
}

.trip-aside-link-tile:active { transform: scale(0.96); }

.trip-supplier-links { margin-top: 16px; }
.trip-supplier-link-grid { /* slightly larger gap on supplier page */ gap: 10px; }
/* ===== Chat widget (Rework Prompt 3) =================================== */
/* One docked, minimizable conversation card, bottom-right on /me. Bodies
   must never escape their box: wrap anywhere + internal scrolling. */
.trip-chat-dock { position: fixed; right: 16px; bottom: 16px; z-index: 90; width: 360px; max-width: calc(100vw - 24px); }
.trip-chat-card { background: #fff; border: 1px solid #d4d4d4; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); display: flex; flex-direction: column; overflow: hidden; height: 480px; max-height: 70vh; }
.trip-chat-dock.is-min .trip-chat-card { height: auto; max-height: none; }
.trip-chat-dock.is-min .trip-chat-body,
.trip-chat-dock.is-min .trip-chat-input,
.trip-chat-dock.is-min .trip-chat-readonly { display: none !important; }
.trip-chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--trip-accent); color: #fff; cursor: pointer; min-width: 0; flex: 0 0 auto; }
.trip-chat-title { flex: 1; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.trip-chat-headbtn { background: transparent; border: 0; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 7px; border-radius: 4px; flex: 0 0 auto; }
.trip-chat-headbtn:hover { background: rgba(255, 255, 255, .18); }
.trip-chat-body { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #fafafa; min-height: 0; }
.trip-chat-msg { max-width: 85%; padding: 8px 10px; border-radius: 12px; overflow-wrap: anywhere; min-width: 0; }
.trip-chat-msg.is-own { background: var(--trip-accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.trip-chat-msg.is-own .trip-chat-meta { color: rgba(255, 255, 255, .85); }
.trip-chat-msg.is-other { background: #e5e7eb; color: #1a1a1a; align-self: flex-start; border-bottom-left-radius: 3px; }
.trip-chat-msg.is-system { background: #fef3c7; color: #78350f; align-self: center; max-width: 100%; text-align: center; font-style: italic; font-size: 12.5px; }
.trip-chat-meta { font-size: 11px; color: #666; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.trip-chat-mailglyph { font-style: normal; }
.trip-chat-bodytxt { font-size: 14px; white-space: pre-wrap; }
.trip-chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e5e5e5; background: #fff; align-items: flex-end; flex: 0 0 auto; }
.trip-chat-input textarea { flex: 1; min-width: 0; resize: none; border: 1px solid #d4d4d4; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; }
.trip-chat-input textarea:focus { outline: none; border-color: var(--trip-accent); box-shadow: 0 0 0 3px var(--trip-accent-ring); }
.trip-chat-sendbtn { padding: 8px 12px; display: inline-flex; align-items: center; flex: 0 0 auto; }
.trip-chat-readonly { padding: 10px 12px; border-top: 1px solid #e5e5e5; background: #f9fafb; color: #666; font-size: 13px; flex: 0 0 auto; }
.trip-chat-empty { color: #888; font-size: 13px; text-align: center; margin: auto; }
.trip-chat-openbtn { display: inline-flex; align-items: center; gap: 6px; }
.trip-chat-count { color: #666; font-weight: 400; }
@media (max-width: 480px) {
    .trip-chat-dock { right: 8px; bottom: 8px; left: 8px; width: auto; }
    .trip-chat-card { max-height: 60vh; }
}

/* ===== Overflow audit (Rework Prompt 4, T6) ============================ */
/* Systematic rules so user-generated content (titles, bios, messages,
   URLs, emails, notes) never escapes its box: wrap long unbroken words,
   ellipsize single-line cells, keep flex/grid children shrinkable, give
   media hard bounds, and let anything wide scroll inside its container. */

/* Trip cards: long unbroken titles wrap and clamp to 3 lines (full value
   is carried in the title attribute); meta lines wrap anywhere. */
.trip-card-title {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.trip-card-loc, .trip-card-supplier { overflow-wrap: anywhere; }
.trip-card-body { min-width: 0; }

/* Detail page: title, description, policies, notes, meeting point. */
.trip-detail-title { overflow-wrap: anywhere; min-width: 0; }
.trip-detail-section { overflow-wrap: anywhere; min-width: 0; }
.trip-detail-layout > * { min-width: 0; } /* grid children must shrink */
.trip-detail-aside { min-width: 0; overflow-wrap: anywhere; }
.trip-detail-supplier-meta { min-width: 0; }
.trip-detail-supplier-meta strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Supplier page: business name, bio, link labels. */
.trip-supplier-head h1 { overflow-wrap: anywhere; min-width: 0; }
.trip-supplier-bio { overflow-wrap: anywhere; }
.trip-supplier-card-meta strong,
.trip-supplier-card-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.trip-supplier-link-grid a { min-width: 0; max-width: 100%; }

/* Reviews: free-text bodies and responses wrap anywhere. */
.trip-review-body, .trip-review-body-readonly, .trip-review-readonly { overflow-wrap: anywhere; }

/* /me request cards: request messages, trip titles, supplier names. */
.trip-request-card, .trip-request-card-title, .trip-request-card-body { overflow-wrap: anywhere; min-width: 0; }

/* Modals: internal scroll — long content scrolls inside the box, never
   behind the viewport; the frame stays put. */
.trip-modal-box { display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.trip-modal-body { overflow-y: auto; overflow-wrap: anywhere; min-height: 0; }
.trip-modal-head h2 { overflow-wrap: anywhere; min-width: 0; }

/* Flash banners can carry user-derived strings (emails etc.). */
.trip-flash { overflow-wrap: anywhere; }

/* Media: images never exceed their container. */
.trip-main img { max-width: 100%; height: auto; }

/* Anything table-like or intrinsically wide scrolls inside its card on
   narrow (360px) viewports instead of breaking the page layout. */
.trip-table-scroll { overflow-x: auto; max-width: 100%; }
.trip-detail-dates ul { max-width: 100%; }
.trip-detail-dates li { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

/* Category chips: long labels ellipsize inside their tile. */
.trip-cat-tile { min-width: 0; }
.trip-cat-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Word buttons (Rework Prompt 4 T4): the Join / contact buttons carry a
   localized word — give them comfortable hit areas in the actions row. */
.trip-btn-word { display: inline-flex; align-items: center; justify-content: center; }
.trip-detail-actions { flex-wrap: wrap; }
.trip-detail-actions .trip-btn-word { flex: 1 1 auto; padding: 10px 18px; font-size: 15px; }


/* =========================================================================
   Rev 9 — back navigation, general contact, About Us, preloaded home grid
   ========================================================================= */

/* Header back icon (layered navigation) */
.trip-back-btn { flex: 0 0 auto; }
.trip-back-btn svg { display: block; }

/* Preloaded home: client-side category filter + pager */
.trip-card.is-hidden { display: none; }
.trip-cat-tile.is-active {
    border-color: var(--trip-accent);
    box-shadow: inset 0 0 0 1px var(--trip-accent);
    background: color-mix(in srgb, var(--trip-accent) 7%, #fff);
}
.trip-pager { align-items: center; gap: 10px; }
.trip-pager-btn {
    min-width: 42px;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    color: #333;
}
.trip-pager-btn:hover:not(:disabled) { background: #f5f5f5; }
.trip-pager-btn:disabled { opacity: .4; cursor: default; }
.trip-pager-label { font-size: 14px; color: #555; min-width: 56px; text-align: center; }

/* General contact page */
.trip-contact-page { max-width: 640px; }
.trip-contact-form { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.trip-contact-form-foot { display: flex; justify-content: flex-end; }

/* About Us page (reuses the trip-supplier profile styles) */
.trip-about-contact { margin: 16px 0 0; }


/* =========================================================================
   Rev 10 — About Us layout fix (title was clipped by the cover band),
   themed cover fallback, compact standalone icon buttons
   ========================================================================= */

/* Cover band: supplier cover -> landing hero -> theme-accent bar */
.trip-about .trip-supplier-cover { height: 200px; }
.trip-about-cover-bar {
    background-image: linear-gradient(120deg,
        var(--trip-accent),
        color-mix(in srgb, var(--trip-accent) 55%, #0b1220));
}

/* Head: only the avatar overlaps the cover; the meta text starts BELOW
   the band (the previous negative margin pulled the h1 under it). */
.trip-about .trip-supplier-head { align-items: flex-start; margin: -50px 0 20px; }
.trip-about .trip-supplier-head-meta { padding-top: 60px; padding-bottom: 0; }
.trip-about .trip-supplier-head h1 { font-size: 28px; }
.trip-about .trip-supplier-bio { margin-top: 4px; max-width: 760px; line-height: 1.65; }

@media (max-width: 720px) {
    /* Column layout at this width: avatar above, text below the band. */
    .trip-about .trip-supplier-head-meta { padding-top: 0; }
}

/* Standalone icon button (compact) — the base .trip-btn-icon-only is
   sized/flexed for the booking action row. */
.trip-btn-icon-solo { flex: 0 0 auto; height: auto; padding: 9px 12px; }


/* =========================================================================
   Rev 12 — trip photo carousel shows pictures UNCROPPED. Root cause found
   in the field: the overflow-audit rule `.trip-main img { height: auto }`
   (specificity 0,1,1) silently beat the slide's `height: 100%` (0,1,0) —
   the image rendered at NATURAL height and the 480px overflow-hidden
   container CLIPPED it. object-fit never got a say, which is why the
   Rev 11 `contain` changed nothing. Restore the geometry at higher
   specificity; contain then letterboxes mixed ratios on a dark stage.
   ========================================================================= */
.trip-carousel-main { background: #0f172a; }
.trip-carousel-main .trip-carousel-slide,
.trip-carousel-main img.trip-carousel-slide {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0f172a;
}
/* Thumbnails lost their height to the same audit rule — keep them
   covered (recognizable at 92×64). */
.trip-carousel-thumbs .trip-carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ====================================================================
 * Rev 18 — Configurator ("create your own trip" wizard)
 * Banner on the landing page + 3-step wizard with picture tiles and a
 * shared detail modal. Reuses the theme variables (--trip-accent*) and
 * the .trip-modal / .trip-btn / .trip-input building blocks.
 * ==================================================================== */

/* Landing-page banner (between category chips and the trip grid) */
.trip-cfg-banner-wrap { padding-top: 0; }
.trip-cfg-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; border-radius: 12px; text-decoration: none;
    color: #fff;
    background: linear-gradient(120deg, var(--trip-accent) 0%, var(--trip-accent-darker) 100%);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--trip-accent) 30%, transparent);
    transition: box-shadow .15s, transform .15s;
}
.trip-cfg-banner:hover { text-decoration: none; color: #fff; box-shadow: 0 4px 16px color-mix(in srgb, var(--trip-accent) 40%, transparent); transform: translateY(-1px); }
.trip-cfg-banner-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trip-cfg-banner-text strong { font-size: 18px; line-height: 1.3; }
.trip-cfg-banner-text span { font-size: 14px; opacity: .9; }
.trip-cfg-banner .trip-btn { flex: 0 0 auto; background: #fff; color: var(--trip-accent-dark); border-color: #fff; }
.trip-cfg-banner .trip-btn:hover { background: #f1f5f9; }

/* Wizard page */
.trip-cfg-page h1 { margin-bottom: 6px; }
.trip-cfg-intro { max-width: 720px; }
.trip-cfg-steps {
    display: flex; gap: 8px; list-style: none; padding: 0; margin: 22px 0 26px;
    flex-wrap: wrap;
}
.trip-cfg-steps li {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500; color: #888;
    padding: 6px 12px 6px 6px; border: 1px solid #e5e5e5; border-radius: 999px;
    background: #fff;
}
.trip-cfg-steps li span {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eee; color: #666; font-weight: 600; font-size: 12px;
}
.trip-cfg-steps li.is-active { color: #1a1a1a; border-color: var(--trip-accent); }
.trip-cfg-steps li.is-active span { background: var(--trip-accent); color: #fff; }
.trip-cfg-steps li.is-done span { background: color-mix(in srgb, var(--trip-accent) 20%, #fff); color: var(--trip-accent-dark); }

.trip-cfg-step h2 { margin: 0 0 8px; font-size: 22px; }
.trip-cfg-when { max-width: 380px; display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.trip-cfg-when .trip-input { margin-bottom: 12px; }

.trip-cfg-nav {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: 26px; flex-wrap: wrap;
}
.trip-cfg-signin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Picture tiles */
.trip-cfg-grid {
    display: grid; gap: 14px; margin-top: 14px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.trip-cfg-tile {
    position: relative; display: block; width: 100%;
    aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
    border: 3px solid transparent; padding: 0; cursor: pointer;
    background: #f1f5f9; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.trip-cfg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trip-cfg-tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,.14); transform: translateY(-2px); }
.trip-cfg-tile.is-selected { border-color: var(--trip-accent); box-shadow: 0 0 0 3px var(--trip-accent-ring); }
.trip-cfg-tile-name {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 12px; text-align: center; font-weight: 600; color: #555; font-size: 15px;
}
.trip-cfg-tile-check {
    position: absolute; top: 8px; left: 8px;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--trip-accent); color: #fff;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.trip-cfg-tile.is-selected .trip-cfg-tile-check { display: inline-flex; }
.trip-cfg-tile-info {
    position: absolute; bottom: 8px; right: 8px;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.92); color: #333;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: background .12s;
}
.trip-cfg-tile-info:hover { background: #fff; color: var(--trip-accent-dark); }

@keyframes trip-cfg-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.trip-cfg-shake { animation: trip-cfg-shake .35s ease; }

/* Summary + note */
.trip-cfg-summary {
    margin: 22px 0 14px; padding: 12px 16px;
    background: color-mix(in srgb, var(--trip-accent) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--trip-accent) 30%, #e5e5e5);
    border-radius: 10px; font-size: 14px; line-height: 1.7;
}
.trip-cfg-note { margin-top: 10px; }

/* Detail modal internals */
#trip-cfg-detail .trip-modal-box { max-width: 560px; }
.trip-cfg-detail-media img#trip-cfg-detail-img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; display: block;
}
.trip-cfg-detail-thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.trip-cfg-thumb {
    width: 72px; height: 50px; padding: 0; border: 2px solid transparent;
    border-radius: 6px; overflow: hidden; cursor: pointer; background: #f1f5f9;
}
.trip-cfg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trip-cfg-thumb.is-active { border-color: var(--trip-accent); }
.trip-cfg-detail-seats { margin: 10px 0 0; font-weight: 500; }
.trip-cfg-detail-desc { margin: 10px 0 0; white-space: pre-line; line-height: 1.6; }
.trip-cfg-detail-map { height: 220px; border-radius: 10px; margin-top: 14px; overflow: hidden; }

@media (max-width: 640px) {
    .trip-cfg-banner { flex-direction: column; align-items: flex-start; }
    .trip-cfg-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .trip-cfg-steps li { font-size: 12px; padding-right: 8px; }
}

/* ---- Rev 19: wizard-as-modal, favorite star overlay, favorites page ---- */

/* The wizard popup: same .trip-modal chrome as the booking popups, plus a
   blurred backdrop and a wider, self-scrolling box. */
.trip-cfg-modal { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); background: rgba(15, 23, 42, 0.45); }
.trip-cfg-box { max-width: 780px; }
.trip-cfg-box .trip-modal-body { max-height: calc(100vh - 170px); overflow-y: auto; overscroll-behavior: contain; }
.trip-cfg-box .trip-cfg-steps { margin: 0 0 16px; }
.trip-cfg-box .trip-cfg-intro { margin: 0 0 12px; }
.trip-cfg-box .trip-cfg-grid { margin-bottom: 8px; }
.trip-cfg-box .trip-modal-foot { margin-top: 16px; }
.trip-cfg-signin { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* The item detail popup stacks ABOVE the wizard. */
.trip-cfg-detail { z-index: 1100; }

/* Favorite star overlaying the trip-detail carousel (top-right chip). */
.trip-carousel-main { position: relative; }
.trip-bookmark-overlay {
    position: absolute; top: 12px; right: 12px; z-index: 5;
}
.trip-bookmark-overlay .trip-bookmark-star {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
    font-size: 22px; line-height: 1;
}
.trip-bookmark-overlay .trip-bookmark-star:hover { transform: scale(1.08); }

/* Favorites page: friendly empty state. */
.trip-fav-empty {
    text-align: center; padding: 56px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.trip-fav-empty-star { font-size: 56px; line-height: 1; color: #cbd5e1; }

/* Rev 20: clickable step dots + four-step strip. */
.trip-cfg-box .trip-cfg-steps li { cursor: pointer; }
.trip-cfg-box .trip-cfg-steps li:hover { border-color: var(--trip-accent, #2563eb); }
.trip-cfg-box .trip-cfg-steps li:focus-visible { outline: 2px solid var(--trip-accent, #2563eb); outline-offset: 2px; }
.trip-cfg-detail-map { background: #f1f5f9; }

/* Rev 22: map toggle in the wizard detail view. */
.trip-cfg-map-toggle { margin: 10px 0 8px; }

/* Rev 23: the item detail popup gets breathing room on desktop. */
@media (min-width: 720px) {
    .trip-cfg-detail .trip-modal-box-sm { max-width: 660px; }
    .trip-cfg-detail .trip-modal-head { padding: 20px 32px; }
    .trip-cfg-detail .trip-modal-body { padding: 28px 32px 32px; }
    .trip-cfg-detail-seats { margin-top: 16px; }
    .trip-cfg-detail-desc { margin-top: 14px; line-height: 1.7; }
    .trip-cfg-detail-map { margin-top: 20px; }
    .trip-cfg-map-toggle { margin-top: 14px; }
}

/* =========================================================================
   Rev 25 — Mobile audit (small-screen usability pass; nothing above changes,
   every rule here is additive and wins by source order)

   (1) iOS Safari auto-zooms the page when a focused form control has a
       computed font-size < 16px (.trip-input is 15, chat textarea 14, lang
       switch 13) — inside the FIXED wizard/booking modals that leaves the
       layout zoomed and cropped after the keyboard closes. All focusable
       controls go to 16px on touch devices (the seat stepper already is).
   (2) 100vh on iOS Safari is the LARGE viewport (URL bar retracted); with
       the bar visible the modal bottom — including the wizard's ‹ › send
       row at the end of the scrolling body — hides behind the toolbar.
       dvh tracks the real visible height; the vh rules above remain as the
       fallback for engines without dvh.
   (3) Sub-40px touch targets around the new workflows. The tile ⓘ (30px)
       sits ON a tile whose whole surface toggles selection, so a missed
       tap does the WRONG thing (deselects instead of opening the detail).
   (4) The wizard foot sticks to the bottom of the scrolling step body so
       back/next/send stay reachable while a long tile grid scrolls
       (full-bleed via negative margins = body side padding 24px / 16px,
       so tiles scroll BEHIND the opaque #fafafa bar, not beside it).
   (5) The header account button carries display_name or the email local
       part untruncated — a long one wraps the sticky header to a third
       row at 360px. Ellipsize it; Login (btn-primary) and the icon
       buttons are deliberately excluded.
   ========================================================================= */

/* (1) No iOS focus zoom: every focusable control ≥ 16px on touch. */
@media (pointer: coarse) {
    .trip-input,
    .trip-hero-search input[type="text"],
    .trip-chat-input textarea,
    .trip-header-actions .trip-lang-switch { font-size: 16px; }
}

/* (2) Dynamic-viewport modal heights where supported. */
@supports (height: 100dvh) {
    .trip-modal-box { max-height: calc(100dvh - 80px); }
    .trip-cfg-box .trip-modal-body { max-height: calc(100dvh - 170px); }
    .trip-chat-card { max-height: 70dvh; }
    @media (max-width: 480px) {
        .trip-chat-card { max-height: 60dvh; }
    }
}

/* (3) Bigger hit areas on touch. */
@media (pointer: coarse) {
    .trip-cfg-tile-info { width: 40px; height: 40px; }
    .trip-cal-nav-btn { width: 36px; height: 36px; }
    .trip-modal-close { padding: 4px 12px; }
    .trip-nav a { padding: 10px 0; }
}

/* (4) Wizard foot sticks inside the scrolling step body. */
.trip-cfg-box .trip-modal-foot {
    position: sticky; bottom: 0; z-index: 2;
    margin: 16px -24px 0;
}
@media (max-width: 600px) {
    .trip-cfg-box .trip-modal-foot { margin-left: -16px; margin-right: -16px; }
}

/* (5) Account-name header button: ellipsize instead of wrapping. */
@media (max-width: 720px) {
    .trip-header-actions a.trip-btn:not(.trip-btn-icon):not(.trip-btn-primary) {
        display: inline-block;
        max-width: 38vw;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        line-height: 34px; /* 36px control height − 2px borders keeps centering */
    }
}
/* ======================================================================
   ONLINE PAYMENTS (Rev 28) — the public pay page (page=pay) and the
   /me Pay-now button reuse the standard .trip-btn set; only the pay
   card itself needs styling. Centered invoice-style card, big amount,
   theme-accent button, green check on the paid state.
   ====================================================================== */
.trip-pay-card {
    max-width: 460px;
    margin: 32px auto;
    padding: 32px 28px;
    text-align: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    overflow-wrap: anywhere; /* suite CSS overflow audit: long trip titles */
}
.trip-pay-card h1 { margin: 0 0 10px; font-size: 24px; }
.trip-pay-amount {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 18px 0 22px;
    color: var(--trip-accent-dark, #0f172a);
    white-space: nowrap;
}
.trip-pay-btn {
    width: 100%;
    max-width: 320px;
    padding: 13px 20px;
    font-size: 16px;
    font-weight: 600;
}
.trip-pay-note { margin-top: 14px; line-height: 1.5; }
.trip-pay-paid {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 34px;
    line-height: 64px;
    font-weight: 700;
}

/* ======================================================================
 * REV 32 — POSTS (pl_trips_posts)
 * ==================================================================== */

/* ---- CSS AUDIT FIX (the one true duplicate in this file) -------------
 * `.trip-card` is declared TWICE at top level: once early as a generic
 * white content PANEL (used by the login page, e.g. `trip-card trip-success`)
 * with `padding: 28px`, and once later as the GRID CARD. The grid rule
 * never declares padding, so grid cards were silently inheriting the
 * panel's 28px — an accidental coupling, not a decision.
 *
 * The line below makes the grid card's box model explicit and independent
 * of rule order. VISUAL EFFECT: grid cards lose the 28px inset, so the
 * card image becomes flush with the card edge (which is what
 * `.trip-card-image` + `.trip-card-body { padding: 14px 16px 16px }`
 * clearly intend). If that inset was deliberate, delete this one rule —
 * nothing else depends on it.
 * ------------------------------------------------------------------- */
.trip-card-grid > .trip-card { padding: 0; }

/* Post card: kind badge sits where a trip card shows its price. */
.trip-post-badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
    background: color-mix(in srgb, var(--trip-accent) 12%, #fff);
    color: var(--trip-accent);
    border: 1px solid color-mix(in srgb, var(--trip-accent) 30%, #fff);
}

/* Understated "also search posts" toggle in the hero search bar. */
.trip-sp-toggle { opacity: .55; }
.trip-sp-toggle:hover { opacity: .85; }
.trip-sp-toggle.is-on {
    opacity: 1;
    background: color-mix(in srgb, var(--trip-accent) 14%, #fff);
    border-color: var(--trip-accent);
    color: var(--trip-accent);
}

/* ---- Post article ---------------------------------------------------- */
.tpost-article { max-width: 780px; }
.tpost-header { margin-bottom: 22px; }
.tpost-post-title { font-size: clamp(24px, 4vw, 36px); line-height: 1.2; margin: 0 0 10px; font-weight: 700; }
.tpost-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tpost-lede { font-size: 17px; color: #475569; margin: 0; line-height: 1.55; }
.tpost-empty { color: #94a3b8; }

/* One column, consistent vertical rhythm between elements. */
.tpost-block { margin: 0 0 26px; }
.tpost-block:last-child { margin-bottom: 0; }

.tpost-title { line-height: 1.25; font-weight: 700; margin: 0 0 10px; }
.tpost-title-1 { font-size: clamp(22px, 3.4vw, 30px); }
.tpost-title-2 { font-size: clamp(19px, 2.8vw, 24px); }
.tpost-title-3 { font-size: 18px; }
.tpost-title-4 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.tpost-align-left   { text-align: left; }
.tpost-align-center { text-align: center; }
.tpost-align-right  { text-align: right; }

.tpost-text { line-height: 1.65; color: #1f2937; }
.tpost-text p { margin: 0 0 14px; }
.tpost-text ul, .tpost-text ol { margin: 0 0 14px; padding-left: 22px; }
.tpost-text blockquote {
    margin: 0 0 14px; padding: 8px 16px; border-left: 3px solid var(--trip-accent);
    background: #f8fafc; color: #475569;
}
.tpost-text pre {
    background: #0f172a; color: #e2e8f0; padding: 12px 14px;
    border-radius: 8px; overflow: auto; font-size: 13px;
}
.tpost-text a { color: var(--trip-accent); }
/* T6 overflow-audit companion: `.trip-main img { height: auto }` (0,1,1)
   out-specifies a bare `height`, so any fixed-box image below re-asserts
   its height at >= (0,2,0). Free-flowing images here want auto height. */
.tpost-text img { max-width: 100%; height: auto; border-radius: 8px; }

.tpost-figure { margin: 0; }
.tpost-figure img { width: 100%; height: auto; border-radius: 10px; display: block; }
.tpost-figure figcaption,
.tpost-caption { font-size: 13px; color: #64748b; margin-top: 8px; text-align: center; }

/* Carousel — mirrors the trip detail carousel, including the Rev 12
   lesson: the slide image re-asserts width/height at (0,2,0) so the
   overflow-audit rule cannot revert it to natural height. */
.tpost-carousel-main {
    position: relative; height: 420px; background: #0f172a;
    border-radius: 10px; overflow: hidden;
}
.tpost-carousel-slide { display: none; width: 100%; height: 100%; }
.tpost-carousel-slide.is-active { display: block; }
.tpost-carousel-main .tpost-carousel-slide img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}
.tpost-carousel-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.55); color: #fff; border: 0; cursor: pointer;
    width: 38px; height: 38px; border-radius: 50%; font-size: 20px; line-height: 1;
}
.tpost-carousel-nav:hover { background: rgba(0,0,0,.75); }
.tpost-carousel-nav.prev { left: 12px; }
.tpost-carousel-nav.next { right: 12px; }
.tpost-carousel-counter {
    position: absolute; right: 12px; bottom: 12px;
    background: rgba(0,0,0,.55); color: #fff; font-size: 12px;
    padding: 3px 9px; border-radius: 999px;
}
.tpost-carousel-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.tpost-carousel-thumb {
    flex: 0 0 auto; width: 76px; height: 56px; border-radius: 6px;
    border: 2px solid transparent; padding: 0; background: none;
    cursor: pointer; overflow: hidden;
}
.tpost-carousel-thumb.is-active { border-color: var(--trip-accent); }
.tpost-carousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tpost-linkwrap { margin: 0; }
.tpost-link-btn {
    display: inline-block; padding: 11px 22px; border-radius: 8px;
    background: var(--trip-accent); color: #fff; font-weight: 600;
    text-decoration: none;
}
.tpost-link-btn:hover { background: var(--trip-accent-darker); text-decoration: none; }
.tpost-link-inline { color: var(--trip-accent); text-decoration: underline; }

.tpost-video-title { font-weight: 600; margin: 0 0 8px; }
.tpost-video { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #0f172a; }
.tpost-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tpost-map { height: 340px; border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0; }

.tpost-dates-title { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.tpost-cal { max-width: 340px; }
/* Read-only: the display calendar must not look or behave clickable. */
.tpost-cal .trip-cal-day { cursor: default; pointer-events: none; }
.tpost-cal .trip-cal-nav-btn { pointer-events: auto; cursor: pointer; }

/* ---- Fake chat -------------------------------------------------------
 * Bubble layout only — no third-party visual identity is reproduced. */
.tpost-chat {
    background: #eef2f7; border-radius: 12px; padding: 14px;
    border: 1px solid #e2e8f0;
}
.tpost-chat-head {
    display: flex; justify-content: space-between;
    font-size: 12px; font-weight: 700; color: #64748b;
    padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #dbe2ea;
}
.tpost-chat-body { display: flex; flex-direction: column; gap: 8px; }
.tpost-bubble-row { display: flex; }
.tpost-bubble-row.tpost-side-1 { justify-content: flex-start; }
.tpost-bubble-row.tpost-side-2 { justify-content: flex-end; }
.tpost-bubble {
    max-width: 76%; padding: 8px 12px; border-radius: 12px;
    background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.06);
    font-size: 14px; line-height: 1.45; word-break: break-word;
}
.tpost-side-1 .tpost-bubble { border-top-left-radius: 3px; }
.tpost-side-2 .tpost-bubble {
    border-top-right-radius: 3px;
    background: color-mix(in srgb, var(--trip-accent) 16%, #fff);
}
.tpost-bubble-name { font-size: 11px; font-weight: 700; color: var(--trip-accent); margin-bottom: 2px; }
.tpost-bubble-text { white-space: normal; }
.tpost-bubble-link { color: var(--trip-accent); text-decoration: underline; word-break: break-all; }
.tpost-chat .tpost-bubble-img {
    display: block; width: 220px; max-width: 100%; height: auto;
    border-radius: 8px; margin: 2px 0;
}
.tpost-bubble-time { font-size: 10px; color: #94a3b8; text-align: right; margin-top: 3px; }

/* ---- Contact block --------------------------------------------------- */
.tpost-contact {
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 18px;
}
.tpost-contact-intro { margin: 0 0 12px; color: #475569; }
.tpost-contact-form { display: flex; flex-direction: column; gap: 10px; }
.tpost-contact-form textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1;
    border-radius: 8px; font: inherit; resize: vertical;
}
.tpost-contact-btn {
    align-self: flex-start; display: inline-block;
    padding: 11px 22px; border: 0; border-radius: 8px;
    background: var(--trip-accent); color: #fff;
    font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none;
}
.tpost-contact-btn:hover { background: var(--trip-accent-darker); text-decoration: none; }
.tpost-contact-btn[disabled] { opacity: .5; cursor: default; }
.tpost-contact-note { font-size: 12px; color: #94a3b8; margin: 8px 0 0; }

@media (max-width: 640px) {
    .tpost-carousel-main { height: 260px; }
    .tpost-map { height: 260px; }
    .tpost-bubble { max-width: 88%; }
}

/* Preview banner — shown only behind a valid admin preview token. */
.tpost-preview-bar {
    display: flex; align-items: center; gap: 10px;
    background: #fffbeb; border: 1px solid #fcd34d; border-left: 4px solid #f59e0b;
    color: #92400e; border-radius: 6px; padding: 10px 14px;
    font-size: 14px; font-weight: 600;
}
.tpost-preview-state {
    margin-left: auto; text-transform: uppercase; letter-spacing: .05em;
    font-size: 11px; background: #f59e0b; color: #fff;
    padding: 2px 8px; border-radius: 999px;
}

/* Chat day separator (Rev 32e) — chat times are stored as datetimes, so a
   conversation spanning days gets a divider instead of repeating the date. */
.tpost-chat-day { text-align: center; margin: 6px 0 2px; }
.tpost-chat-day span {
    display: inline-block; font-size: 11px; font-weight: 600; color: #64748b;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 999px;
    padding: 2px 10px;
}