/**
 * Fellow Traveler theme — Bootstrap 5 dark-navy override.
 * Loaded AFTER bootstrap.min.css so cascade wins. Keeps Bootstrap classes intact while
 * recoloring the palette and tightening typography to match the brand.
 */

/* ---------- Bootstrap variable overrides ---------- */
:root {
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-info: #38bdf8;
    --bs-body-bg: #0f172a;
    --bs-body-color: #e2e8f0;
    --bs-secondary-bg: #1e293b;
    --bs-tertiary-bg: #111827;
    --bs-border-color: #334155;
    --bs-link-color: #38bdf8;
    --bs-link-hover-color: #7dd3fc;
    --bs-heading-color: #ffffff;

    --ft-bg-main:    #0f172a;
    --ft-bg-card:    #1e293b;
    --ft-bg-navbar:  #111827;
    --ft-accent:     #38bdf8;
    --ft-text-muted: #94a3b8;
    --ft-gradient:   linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
}

/* ---------- Base typography ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--ft-bg-main);
    color: var(--bs-body-color);
    padding-top: 64px; /* fixed navbar offset */
    line-height: 1.55;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--bs-heading-color);
}
/* Responsive default for page h1s — keeps long titles readable on mobile.
   .ft-hero h1 has its own larger override and is unaffected. */
main h1 {
    font-size: clamp(1.4rem, 3.5vw + 0.6rem, 2.4rem);
    line-height: 1.2;
}

/* Safety net: legacy content blocks (extracted from old static HTML) sometimes have
   intrinsic widths that overflow on mobile. Cap them to container width. */
.trip-main-content,
.trip-sidebar,
.dash-tabs,
.trending-grid {
    max-width: 100%;
    min-width: 0;   /* allow CSS Grid + flex children to shrink below content size */
}
/* CSS Grid items default to min-width: auto which equals min-content — that can blow
   out columns on narrow viewports when a child has wide intrinsic content. Force shrink. */
.trip-detail-grid > *,
.row > [class*="col-"] { min-width: 0; }

.dash-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, video { max-width: 100%; height: auto; }
table { max-width: 100%; }
main .ft-hero h1 {
    /* hero re-asserts its own scale (set below in .ft-hero block) */
    font-size: clamp(1.6rem, 4.5vw, 3rem);
}
a { transition: color .2s ease, opacity .2s ease; }
.text-muted { color: var(--ft-text-muted) !important; }

/* Skip link */
.skip-link {
    position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
    background: #2563eb; color: #fff; padding: 8px 16px; z-index: 99999; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; top: 0; width: auto; height: auto; overflow: visible; }

/* ---------- Navbar ---------- */
.ft-navbar {
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.ft-navbar .navbar-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    color: #fff;
    font-size: 1.15rem;
}
.ft-navbar .navbar-brand i { color: var(--ft-accent); margin-right: .4rem; }
.ft-navbar .nav-link {
    color: #e2e8f0;
    font-weight: 500;
    padding: .4rem .85rem !important;
    border-radius: 6px;
    transition: background .2s ease;
}
.ft-navbar .nav-link:hover,
.ft-navbar .nav-link.active {
    color: #fff;
    background: rgba(56, 189, 248, 0.12);
}
.ft-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.15);
}
.ft-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .25); }
.ft-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(226,232,240,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.bell-dot {
    position: absolute; top: 6px; right: 4px; width: 7px; height: 7px; background: #ef4444; border-radius: 50%;
}

/* ---------- Hero ---------- */
.ft-hero {
    position: relative;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(17, 24, 39, 0.88) 100%),
        url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=1600&q=80') center/cover;
    padding: 4rem 1rem 3rem;
    overflow: hidden;
}
.ft-hero h1 {
    font-size: clamp(1.6rem, 4.5vw, 3rem);
    color: #fff;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}
.ft-hero h1 .accent {
    background: linear-gradient(135deg, #fff 0%, var(--ft-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ft-hero-toggle {
    display: inline-flex;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 1.5rem;
}
.ft-hero-toggle .btn {
    border-radius: 999px !important;
    padding: .45rem 1.1rem;
    font-weight: 600;
    font-size: .9rem;
    border: none;
}
.ft-hero-toggle .btn.active {
    background: var(--ft-gradient);
    color: #fff;
}
.ft-hero-toggle .btn:not(.active) {
    background: transparent;
    color: #e2e8f0;
}

/* ---------- Search bar (Bootstrap pill style) ---------- */
.ft-search-bar {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    padding: .5rem;
}
.ft-search-bar .form-control,
.ft-search-bar .form-select {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    padding: .65rem .9rem !important;
    box-shadow: none !important;
}
.ft-search-bar .form-control::placeholder { color: #94a3b8; }
.ft-search-bar .form-select { color: #fff; }
.ft-search-bar .form-select option { background: var(--ft-bg-card); color: #fff; }
.ft-search-bar .search-label {
    display: block;
    font-size: .7rem;
    color: var(--ft-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 0 .9rem;
    margin-bottom: -.1rem;
}
.ft-search-bar .search-field {
    padding: .35rem 0 .55rem;
    border-radius: 14px;
    transition: background .2s ease;
}
.ft-search-bar .search-field + .search-field { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.ft-search-bar .search-field:hover { background: rgba(56, 189, 248, 0.06); }
.ft-search-btn {
    background: var(--ft-gradient);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: .7rem 1.4rem;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.ft-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.35);
    color: #fff;
}

@media (max-width: 768px) {
    .ft-search-bar .search-field + .search-field { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.06); }
}

/* ---------- Quick filter chips ---------- */
.ft-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(30, 41, 59, 0.7);
    color: #e2e8f0;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
}
.ft-chip:hover {
    border-color: var(--ft-accent);
    color: #fff;
    background: rgba(56, 189, 248, 0.1);
}
.ft-chip i { font-size: .8rem; color: var(--ft-accent); }
.ft-chip-toggle {
    background: transparent;
    border: 1px solid var(--ft-accent);
    color: var(--ft-accent);
    border-radius: 999px;
    padding: .35rem 1rem;
    font-weight: 600;
    font-size: .8rem;
    cursor: pointer;
}
.ft-chip-toggle:hover { background: rgba(56, 189, 248, 0.08); }
.ft-chips-collapsible:not(.expanded) .ft-chip-extra { display: none; }

/* ---------- Cards (trip, traveler, story) ---------- */
.ft-card {
    background: var(--ft-bg-card);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}
.ft-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    border-color: var(--bs-primary);
    color: inherit;
}
.ft-card-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
}
.ft-card-photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .35s ease;
}
.ft-card:hover .ft-card-photo img { transform: scale(1.05); }
.ft-card-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: #10b981;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .25rem .55rem;
    border-radius: 6px;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.ft-card-badge.featured { background: #f59e0b; }
.ft-card-badge.trending { background: #ef4444; }
.ft-card-body {
    padding: .85rem .75rem;
    text-align: center;
}
.ft-card-title {
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .25rem;
    line-height: 1.25;
}
.ft-card-meta {
    color: var(--ft-accent);
    font-size: .78rem;
    font-weight: 500;
    margin-bottom: .35rem;
}
.ft-card-host {
    color: var(--ft-text-muted);
    font-size: .78rem;
}
.ft-card-host strong { color: #fff; }
.ft-card-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    font-size: .73rem;
    color: var(--ft-text-muted);
    margin-top: .3rem;
}
.ft-card-tag i { color: var(--ft-accent); }
.ft-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .25rem;
    color: var(--ft-accent);
    font-size: .85rem;
}
.ft-tick.sponsor { color: #f472b6; }

/* ---------- Section helpers ---------- */
.ft-section { padding: 3rem 0; }
.ft-section-title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: .35rem;
    text-align: center;
}
.ft-section-subtitle {
    color: var(--ft-text-muted);
    text-align: center;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Footer ---------- */
.ft-footer {
    background: var(--ft-bg-navbar);
    border-top: 1px solid var(--bs-border-color);
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}
.ft-footer h5 {
    font-size: .95rem;
    color: var(--ft-accent);
    margin-bottom: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.ft-footer a {
    color: var(--ft-text-muted);
    text-decoration: none;
    font-size: .9rem;
    display: block;
    padding: .25rem 0;
}
.ft-footer a:hover { color: var(--ft-accent); }
.ft-footer-social {
    display: flex;
    gap: .85rem;
    justify-content: center;
    margin-top: 1.5rem;
}
.ft-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--ft-bg-card);
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    color: var(--ft-text-muted);
    transition: all .15s ease;
}
.ft-footer-social a:hover {
    background: var(--bs-primary);
    color: #fff;
    transform: translateY(-3px);
}

/* ---------- Buttons ---------- */
.btn-gradient {
    background: var(--ft-gradient);
    border: none;
    color: #fff;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(56, 189, 248, .35);
    color: #fff;
}
.btn-outline-accent {
    background: transparent;
    border: 1px solid var(--ft-accent);
    color: var(--ft-accent);
}
.btn-outline-accent:hover {
    background: rgba(56, 189, 248, .12);
    color: #fff;
}

/* ---------- Category tiles ---------- */
.ft-category {
    background: var(--ft-bg-card);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 1rem .75rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: all .2s ease;
    display: block;
    height: 100%;
}
.ft-category:hover {
    border-color: var(--ft-accent);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    color: inherit;
}
.ft-category i {
    color: var(--ft-accent);
    font-size: 1.5rem;
    margin-bottom: .5rem;
    display: block;
}
.ft-category-name { font-weight: 600; font-size: .9rem; color: #fff; }
.ft-category-count { font-size: .75rem; color: var(--ft-text-muted); margin-top: .15rem; }
@media (max-width: 480px) {
    .ft-category { padding: .65rem .35rem; }
    .ft-category i { font-size: 1.1rem; margin-bottom: .3rem; }
    .ft-category-name { font-size: .72rem; line-height: 1.2; }
    .ft-category-count { font-size: .65rem; }
}

/* ---------- Results count strip ---------- */
.ft-results-count {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: .45rem 1rem;
    font-size: .85rem;
    color: var(--ft-text-muted);
}
.ft-results-count .live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 12px #10b981;
    animation: pulseDot 1.5s ease-in-out infinite;
}
.ft-results-count strong { color: var(--ft-accent); }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ---------- Form field-level error display (used by auth.js) ---------- */
.input-error,
input.input-error,
select.input-error,
textarea.input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 .15rem rgba(239, 68, 68, .18) !important;
    background-color: rgba(239, 68, 68, .04) !important;
}
.field-error {
    display: block;
    color: #fca5a5;
    font-size: .78rem;
    margin-top: .3rem;
    line-height: 1.35;
    padding-left: .15rem;
}
.field-error::before {
    content: "⚠ ";
    color: #ef4444;
    font-weight: 700;
}
.auth-error {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .35);
    color: #fecaca;
    padding: .65rem .9rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: .9rem;
}