/* ==========================================================================
   Travel Brand — Design system (tokens, typography, base elements)
   Light theme only. Loaded after Bootstrap 5.3 so it can refine defaults.
   ========================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2"); }

/* --------------------------------------------------------------------------
   TEMPLATES: every colour used by the component CSS comes from a token below.
   A template (Content/templates/{id}/theme.css) re-themes the site by overriding
   these on :root[data-template="{id}"]. When changing --tb-primary, also change
   --tb-primary-rgb (same colour as "r, g, b") and the --tb-primary-50…300 tints.
   Literals left on purpose: mask colours (#000) and white text on photos.
   -------------------------------------------------------------------------- */
:root {
    /* Brand & UI colour */
    --tb-primary: #1677E8;
    --tb-brand-logo: #1677E8;       /* logo wordmark: fixed brand colour, never overridden by templates */
    --tb-brand-whatsapp: #25D366;   /* WhatsApp share button: third-party brand colour, never overridden by templates */
    --tb-primary-rgb: 22, 119, 232;
    --tb-primary-hover: #0F62C9;
    --tb-primary-soft: #EBF3FE;
    --tb-primary-50: #F5F9FF;       /* hover wash */
    --tb-primary-150: #CFE3FB;      /* range ends in the calendar */
    --tb-primary-200: #B7D3F6;      /* open / highlighted borders */
    --tb-primary-300: #9CC4F3;      /* focused search bar border */
    --tb-primary-ink: #0A1F3D;      /* deepest shade of the primary: premium dark surfaces */
    --tb-ink-rgb: 10, 31, 61;       /* scrims, glass, deep shadows (same colour as --tb-primary-ink) */
    --tb-shadow-rgb: 16, 24, 40;    /* neutral shadows and backdrops */
    --tb-on-strong: #FFFFFF;        /* text and icons on primary, success, dark and photo surfaces */

    /* Hero (template-level: each template may override these) */
    --tb-hero-scrim:
        linear-gradient(180deg, rgba(var(--tb-ink-rgb), .58) 0%, rgba(var(--tb-ink-rgb), .14) 36%, rgba(var(--tb-ink-rgb), .22) 62%, rgba(var(--tb-ink-rgb), .72) 100%),
        linear-gradient(90deg, rgba(var(--tb-ink-rgb), .42) 0%, rgba(var(--tb-ink-rgb), 0) 62%);
    --tb-rail-bg: rgba(var(--tb-ink-rgb), .58);
    --tb-rail-border: rgba(255, 255, 255, .14);
    --tb-secondary: #0E9384;
    --tb-secondary-soft: #E7F6F3;
    --tb-secondary-ink: #0F6F5C;
    --tb-accent-coral: #F06A4A;
    --tb-accent-coral-soft: #FFF0EB;
    --tb-accent-coral-ink: #C2452A;
    --tb-accent-amber: #F2A93B;
    --tb-accent-amber-soft: #FFF6E6;
    --tb-accent-violet: #6D5BD0;
    --tb-accent-violet-soft: #F1EFFD;
    --tb-accent-violet-ink: #5443B8;
    --tb-rating: #E6A23C;

    --tb-bg: #F8F7F4;           /* warm off-white page */
    --tb-bg-warm: #F3EFE8;      /* sand band */
    --tb-surface: #FFFFFF;
    --tb-surface-muted: #F4F5F7;
    --tb-surface-strong: #E6E8EC;
    --tb-text: #1D2433;
    --tb-text-strong: #0E1726;
    --tb-text-muted: #5D6677;
    --tb-text-subtle: #8D95A3;
    --tb-text-disabled: #C2CBD6;
    --tb-border: #E6E4DF;
    --tb-border-strong: #D0D4DB;
    --tb-highlight: #FFEDB8;    /* matched text in autocomplete */

    --tb-success: #15803D;
    --tb-success-soft: #EAF7EF;
    --tb-warning: #B45309;
    --tb-warn-ink: #8A4B05;     /* text on amber-soft */
    --tb-warn-icon: #C27A0E;
    --tb-warn-border: #F3D9A6;
    --tb-danger: #C2410C;
    --tb-danger-soft: #FFF3ED;
    --tb-danger-border: #F5B29C;

    /* Shape */
    --tb-radius-card: 12px;
    --tb-radius-lg: 16px;
    --tb-radius-control: 10px;
    --tb-radius-pill: 999px;

    /* Elevation */
    --tb-shadow-xs: 0 1px 2px rgba(var(--tb-shadow-rgb), .05);
    --tb-shadow-sm: 0 2px 6px rgba(var(--tb-shadow-rgb), .06), 0 1px 2px rgba(var(--tb-shadow-rgb), .04);
    --tb-shadow-md: 0 12px 28px rgba(var(--tb-shadow-rgb), .09);
    --tb-shadow-lg: 0 24px 64px rgba(var(--tb-shadow-rgb), .16), 0 2px 6px rgba(var(--tb-shadow-rgb), .05);
    --tb-shadow-pop: 0 14px 40px rgba(var(--tb-shadow-rgb), .16);

    /* Spacing scale */
    --tb-space-1: 4px;
    --tb-space-2: 8px;
    --tb-space-3: 12px;
    --tb-space-4: 16px;
    --tb-space-5: 24px;
    --tb-space-6: 32px;
    --tb-space-7: 48px;
    --tb-space-8: 64px;

    --tb-section-gap: 72px;
    --tb-container: 1240px;
    --tb-header-h: 72px;

    --tb-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --tb-font-display: var(--tb-font);   /* headlines; templates may set a display face (free fonts only) */
    --tb-ease: cubic-bezier(.2, .7, .2, 1);

    /* Bootstrap bridges */
    --bs-body-font-family: var(--tb-font);
    --bs-body-color: var(--tb-text);
    --bs-body-bg: var(--tb-bg);
    --bs-primary: var(--tb-primary);
    --bs-primary-rgb: var(--tb-primary-rgb);
    --bs-link-color: var(--tb-primary);
    --bs-link-color-rgb: var(--tb-primary-rgb);
    --bs-link-hover-color: var(--tb-primary-hover);
    --bs-border-color: var(--tb-border);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--tb-font);
    font-size: 15px;
    line-height: 1.55;
    font-feature-settings: "cv11", "ss01";
    color: var(--tb-text);
    background: var(--tb-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { color: var(--tb-text-strong); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
a { color: var(--tb-primary); text-decoration: none; }
a:hover { color: var(--tb-primary-hover); }
img { max-width: 100%; }

/* Visible, consistent keyboard focus */
:focus-visible { outline: 3px solid rgba(var(--tb-primary-rgb), .45); outline-offset: 2px; border-radius: 6px; }
.btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(var(--tb-primary-rgb), .3); }

.tb-container { width: 100%; max-width: var(--tb-container); margin: 0 auto; padding: 0 24px; }

.skip-link { position: absolute; left: 12px; top: -48px; z-index: 2000; background: var(--tb-text-strong); color: var(--tb-on-strong); padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { top: 10px; color: var(--tb-on-strong); }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: var(--tb-radius-control); padding: .55rem 1.1rem; font-size: 14px; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
.btn-tb-primary { background: var(--tb-primary); border: 1px solid var(--tb-primary); color: var(--tb-on-strong); }
.btn-tb-primary:hover, .btn-tb-primary:focus { background: var(--tb-primary-hover); border-color: var(--tb-primary-hover); color: var(--tb-on-strong); }
.btn-tb-outline { background: var(--tb-surface); border: 1px solid var(--tb-border-strong); color: var(--tb-text-strong); }
.btn-tb-outline:hover { border-color: var(--tb-primary); color: var(--tb-primary); background: var(--tb-primary-soft); }
.btn-tb-soft { background: var(--tb-primary-soft); border: 1px solid transparent; color: var(--tb-primary); }
.btn-tb-soft:hover { background: var(--tb-primary-150); color: var(--tb-primary-hover); }
.btn-tb-ghost { background: transparent; border: 1px solid transparent; color: var(--tb-text); }
.btn-tb-ghost:hover { background: var(--tb-surface-muted); }
.btn-tb-lg { padding: .8rem 1.6rem; font-size: 16px; border-radius: 10px; }

.btn-icon {
    width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--tb-border); background: var(--tb-surface); color: var(--tb-text);
}
.btn-icon:hover { border-color: var(--tb-primary); color: var(--tb-primary); }
.btn-icon:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Generic UI ---------- */
.tb-card { background: var(--tb-surface); border: 1px solid var(--tb-border); border-radius: var(--tb-radius-card); box-shadow: var(--tb-shadow-xs); }
.tb-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--tb-radius-pill);
    border: 1px solid var(--tb-border); background: var(--tb-surface); color: var(--tb-text); font-size: 13px; font-weight: 500; line-height: 1.3;
}
.tb-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--tb-radius-pill);
    font-size: 11.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.4;
}
.tb-badge--blue { background: var(--tb-primary-soft); color: var(--tb-primary-hover); }
.tb-badge--green { background: var(--tb-secondary-soft); color: var(--tb-secondary-ink); }
.tb-badge--coral { background: var(--tb-accent-coral-soft); color: var(--tb-accent-coral-ink); }
.tb-badge--amber { background: var(--tb-accent-amber-soft); color: var(--tb-warn-ink); }
.tb-badge--violet { background: var(--tb-accent-violet-soft); color: var(--tb-accent-violet-ink); }
.tb-badge--light { background: rgba(255, 255, 255, .92); color: var(--tb-text-strong); box-shadow: var(--tb-shadow-xs); }
.tb-badge--demo { background: var(--tb-accent-amber-soft); color: var(--tb-warn-ink); border: 1px dashed var(--tb-warn-border); }

.text-muted-tb { color: var(--tb-text-muted) !important; }
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; }

/* Image wrapper with graceful fallback (see app.js) */
.tb-img { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--tb-primary-soft), var(--tb-secondary-soft)); }
.tb-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--tb-ease); }
.tb-img.is-broken img { display: none; }
.tb-img.is-broken::after { content: "\F42A"; font-family: "bootstrap-icons"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tb-text-subtle); font-size: 28px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}