/* ================================================
   Thailand Taxis – Pastel Spring Edition
   Bright Pastels · Airy · Cheerful · Sunny
   ================================================ */

:root {
  /* ── Pastel Sky Palette ── */
  --tt-yellow: #F0B400;
  --tt-yellow-dark: #D9A300;
  --tt-yellow-light: #FFD966;
  --tt-yellow-glow: rgba(240,180,0,.10);
  --tt-yellow-pastel: #FFF3CC;
  --tt-coral: #FF9A8B;
  --tt-coral-light: #FFBCB0;
  --tt-peach: #EFF6FF;
  --tt-mint: #E0F5E8;
  --tt-sky: #E8F4FD;
  --tt-lavender: #F3EEFF;
  --tt-ivory: #FAFCFF;
  --tt-cream: #F4F8FC;
  --tt-warm-dark: #1E3A5C;
  --tt-warm-mid: #3D6080;
  --tt-warm-text: #2B4A6B;
  --tt-warm-muted: #7A9AB5;
  --tt-warm-border: #DDE8F0;
  --tt-warm-bg: #F5F9FD;
  --tt-green: #66BB6A;
  --tt-green-dark: #4caf50;
  --tt-green-line: #00B900;
  --tt-red: #EF7070;
  --tt-white: #fff;
  /* ── Tokens ── */
  --tt-radius-sm: 8px;
  --tt-radius: 14px;
  --tt-radius-lg: 18px;
  --tt-radius-xl: 28px;
  --tt-shadow-sm: 0 2px 10px rgba(30,58,92,.04);
  --tt-shadow: 0 6px 24px rgba(30,58,92,.06);
  --tt-shadow-lg: 0 14px 40px rgba(30,58,92,.09);
  --tt-shadow-warm: 0 8px 30px rgba(30,58,92,.08);
  --tt-transition: .25s cubic-bezier(.4,0,.2,1);
  --tt-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ====================== RESET ====================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; margin-left: 0 !important; scroll-behavior: smooth; }

body {
  font-family: var(--tt-font);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--tt-warm-text);
  background: var(--tt-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--tt-coral); text-decoration: none; transition: all var(--tt-transition); }
a:hover { color: var(--tt-yellow-dark); }

ul, ol { padding-left: 1.35rem; }
li { margin-bottom: .4rem; line-height: 1.7; }
hr { border: none; border-top: 1px solid var(--tt-warm-border); margin: 1rem 0; }

/* =================== TYPOGRAPHY =================== */
h1, h2, h3, h4, h5, h6 { color: var(--tt-warm-dark); font-weight: 700; line-height: 1.3; margin-bottom: .75rem; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
p  { margin-bottom: .9rem; }
strong, b { font-weight: 600; }
small, .small { font-size: .875rem !important; }
.h5 { font-size: 1.2rem; font-weight: 600; line-height: 1.35; color: var(--tt-warm-dark); }
.h6 { font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--tt-warm-dark); }
.display-1 { font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--tt-warm-dark); }

/* ==================== LAYOUT ==================== */
.page { min-height: 100vh; display: flex; flex-direction: column; }

.container-xl {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ===================== GRID ===================== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -.625rem;
  margin-right: -.625rem;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  padding-left: .625rem;
  padding-right: .625rem;
}

.g-2 { margin-left: -.375rem; margin-right: -.375rem; row-gap: .75rem; }
.g-2 > * { padding-left: .375rem; padding-right: .375rem; }
.g-3 { margin-left: -.5rem; margin-right: -.5rem; row-gap: 1rem; }
.g-3 > * { padding-left: .5rem; padding-right: .5rem; }
.g-4 { margin-left: -.75rem; margin-right: -.75rem; row-gap: 1.5rem; }
.g-4 > * { padding-left: .75rem; padding-right: .75rem; }

.col-6  { width: 50%; }
.col-12 { width: 100%; }
.col-auto { width: auto; flex: 0 0 auto; }

@media (min-width: 576px) {
  .col-sm-5 { width: 41.666%; }
  .col-sm-6 { width: 50%; }
}
@media (min-width: 768px) {
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.333%; }
  .col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.333%; }
  .col-lg-5  { width: 41.666%; }
  .col-lg-6  { width: 50%; }
  .col-lg-7  { width: 58.333%; }
  .col-lg-8  { width: 66.666%; }
  .col-lg-10 { width: 83.333%; }
}

/* ================= FLEX UTILITIES ================= */
.d-flex  { display: flex; }
.d-block { display: block; }
.d-none  { display: none; }
@media print { .d-print-none { display: none !important; } }
.flex-row  { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-fill { flex: 1 1 auto; }
.justify-content-center  { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.align-items-end    { align-items: flex-end; }
.ms-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }

.d-md-inline { display: none !important; }
@media (min-width: 768px) {
  .d-md-inline { display: inline !important; }
  .justify-content-md-start { justify-content: flex-start; }
  .text-md-start { text-align: left; }
  .text-md-end   { text-align: right; }
  .mb-md-0 { margin-bottom: 0 !important; }
}

/* ================ SPACING UTILITIES ================ */
.m-0  { margin: 0; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; }  .mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.75rem; } .mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; }  .mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.75rem; } .mb-5 { margin-bottom: 3rem; }
.me-1 { margin-right: .25rem; } .me-2 { margin-right: .5rem; } .me-3 { margin-right: 1rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.p-2 { padding: .5rem; }  .p-3 { padding: 1rem; }  .p-4 { padding: 1.5rem; }
.py-2 { padding-top: .5rem;  padding-bottom: .5rem; }
.py-4 { padding-top: 2rem;   padding-bottom: 2rem; }
.py-5 { padding-top: 3rem;   padding-bottom: 3rem; }
.px-3 { padding-left: 1rem;  padding-right: 1rem; }

/* ================ TEXT UTILITIES ================ */
.text-center { text-align: center; }
.text-start  { text-align: left; }
.text-end    { text-align: right; }
.text-white   { color: var(--tt-white) !important; }
.text-muted   { color: var(--tt-warm-muted) !important; }
.text-danger  { color: var(--tt-red) !important; }
.text-dark    { color: var(--tt-warm-dark) !important; }
.text-success { color: var(--tt-green) !important; }
.text-warning { color: var(--tt-yellow) !important; }
.text-decoration-none { text-decoration: none !important; }
.fw-bold   { font-weight: 700 !important; }
.fw-medium { font-weight: 500; }
.fw-normal { font-weight: 400 !important; }

/* ================ SIZING / MISC ================ */
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.rounded    { border-radius: var(--tt-radius); }
.shadow     { box-shadow: var(--tt-shadow); }
.shadow-sm  { box-shadow: var(--tt-shadow-sm); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ====================================================
   COMPONENTS
   ==================================================== */

/* ──── Navbar ──── */
.navbar {
  background: var(--tt-white);
  padding: .8rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(90,70,50,.08);
  border-bottom: 1px solid var(--tt-warm-border);
}
.navbar .container-xl { display: flex; align-items: center; }
.navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--tt-warm-dark);
  font-weight: 700;
  font-size: 1.1rem;
  gap: .6rem;
  letter-spacing: .01em;
}
.navbar-brand:hover { color: var(--tt-warm-dark); }
.navbar-brand img { height: 20px; width: auto; display: inline-block; }
.navbar-nav {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

/* ──── Buttons ──── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-family: var(--tt-font);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
  padding: .6rem 1.3rem;
  border-radius: var(--tt-radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: all var(--tt-transition);
  white-space: nowrap;
}

.btn-taxi {
  background: var(--tt-warm-dark);
  color: var(--tt-white);
  border-color: var(--tt-warm-dark);
}
.btn-taxi:hover {
  background: var(--tt-warm-mid);
  border-color: var(--tt-warm-mid);
  color: var(--tt-white);
  transform: translateY(-2px);
  box-shadow: var(--tt-shadow);
}

.btn-dark {
  background: var(--tt-warm-dark);
  color: var(--tt-white);
  border-color: var(--tt-warm-dark);
}
.btn-dark:hover {
  background: var(--tt-warm-mid);
  border-color: var(--tt-warm-mid);
  color: var(--tt-white);
  transform: translateY(-2px);
  box-shadow: var(--tt-shadow);
}

.btn-outline-light {
  background: transparent;
  color: var(--tt-warm-mid);
  border-color: var(--tt-warm-border);
}
.btn-outline-light:hover {
  background: var(--tt-cream);
  color: var(--tt-warm-dark);
  border-color: var(--tt-yellow);
}

.btn-outline-dark {
  background: transparent;
  color: var(--tt-warm-dark);
  border-color: var(--tt-warm-border);
}
.btn-outline-dark:hover {
  background: var(--tt-warm-dark);
  color: var(--tt-peach);
  border-color: var(--tt-warm-dark);
}

.btn-success {
  background: var(--tt-green-line);
  color: var(--tt-white);
  border-color: var(--tt-green-line);
}
.btn-success:hover { background: #009900; border-color: #009900; color: var(--tt-white); transform: translateY(-1px); }

.btn-whatsapp {
  background: #25D366;
  color: var(--tt-white);
  border-color: #25D366;
}
.btn-whatsapp:hover { background: #1EBE5A; border-color: #1EBE5A; color: var(--tt-white); transform: translateY(-1px); }

.btn-lg { font-size: 1.05rem; padding: .85rem 1.85rem; border-radius: var(--tt-radius-lg); }
.btn-sm { font-size: .85rem;  padding: .45rem .95rem;  border-radius: var(--tt-radius-sm); }
.btn-xs { font-size: .75rem;  padding: .3rem .7rem;    border-radius: var(--tt-radius-sm); }
.btn:disabled, .btn[disabled] { opacity: .45; pointer-events: none; }

/* ──── Cards ──── */
.card {
  background: var(--tt-white);
  border: 1px solid var(--tt-warm-border);
  border-radius: var(--tt-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--tt-transition);
}
.card:hover { box-shadow: var(--tt-shadow); }
.card-header {
  background: linear-gradient(135deg, #EFF6FF, #E4F0FB);
  color: var(--tt-warm-dark);
  padding: 1rem 1.3rem;
  font-weight: 600;
  border-bottom: 1px solid var(--tt-warm-border);
}
.card-header .card-title,
.card-header .h5,
.card-header h2,
.card-header h3 { color: var(--tt-warm-dark) !important; margin-bottom: 0; }
.card-body { padding: 1.5rem; }
.card-title { font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; color: var(--tt-warm-dark); }

/* ──── Forms ──── */
.form-label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--tt-warm-dark);
}
.form-control,
.form-select {
  display: block;
  width: 100%;
  font-family: var(--tt-font);
  font-size: .95rem;
  line-height: 1.5;
  padding: .7rem 1rem;
  border: 1.5px solid var(--tt-warm-border);
  border-radius: var(--tt-radius);
  background: var(--tt-white);
  color: var(--tt-warm-text);
  transition: border-color var(--tt-transition), box-shadow var(--tt-transition);
  appearance: none;
  min-height: 48px;
}
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--tt-yellow);
  box-shadow: 0 0 0 4px var(--tt-yellow-glow);
  background: var(--tt-cream);
}
.form-control::placeholder { color: var(--tt-warm-muted); }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%238B7D6B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.5rem;
}
textarea.form-control { resize: vertical; min-height: 90px; }
.input-group { display: flex; }
.input-group > .form-control { flex: 1 1 auto; border-radius: 0 var(--tt-radius) var(--tt-radius) 0; }
.input-group > .form-select  { border-radius: var(--tt-radius) 0 0 var(--tt-radius); border-right: 0; flex-shrink: 0; }

/* ──── Tables ──── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--tt-warm-border); }
.table thead { background: #EFF6FF; color: var(--tt-warm-dark); }
.table thead th { font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.table-striped tbody tr:nth-child(even) { background: var(--tt-cream); }
.table-hover tbody tr:hover { background: var(--tt-yellow-glow); }

/* ──── Alerts ──── */
.alert {
  padding: 1rem 1.3rem;
  border-radius: var(--tt-radius);
  font-size: .95rem;
  line-height: 1.55;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.alert-success { background: #edf7ed; color: #2e6b2e; border-color: #c8e6c9; }
.alert-danger  { background: #fef0ef; color: #a33; border-color: #f5c6c6; }

/* ──── Spinner ──── */
.spinner-border {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid var(--tt-warm-border);
  border-top-color: var(--tt-yellow);
  border-radius: 50%;
  animation: tt-spin .8s linear infinite;
}
.spinner-border-sm { width: 1.1rem; height: 1.1rem; border-width: 2px; }
.spinner-border.text-warning { border-top-color: var(--tt-yellow); }
@keyframes tt-spin { to { transform: rotate(360deg); } }

/* ====================================================
   SITE-SPECIFIC SECTIONS
   ==================================================== */

/* ──── Hero (pastel fallback for non-landing pages) ──── */
.hero-section {
  background: linear-gradient(160deg, #EFF6FF 0%, #E4F0FB 30%, #D8EAFC 60%, #CCDFF5 100%);
  color: var(--tt-warm-dark);
  padding: 4rem 0 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -30%; right: -15%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(100,160,240,.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(70,140,220,.1) 0%, transparent 70%);
  pointer-events: none;
}

/* ──── Hero Video (landing page) ──── */
.hero-video-section {
  position: relative;
  overflow: hidden;
  height: 80vh;
  min-height: 500px;
  max-height: 800px;
  display: flex;
  flex-direction: column;
}
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-video.active {
  opacity: 1;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.25) 50%,
    rgba(0,0,0,.45) 100%
  );
}

/* Navbar transparent on hero-video */
.navbar-hero {
  position: relative;
  z-index: 10;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 1rem 0;
}
.navbar-hero .navbar-brand { color: var(--tt-white); }
.navbar-hero .navbar-brand:hover { color: var(--tt-white); }
.navbar-hero .btn-outline-light {
  color: var(--tt-white);
  border-color: rgba(255,255,255,.5);
}
.navbar-hero .btn-outline-light:hover {
  background: rgba(255,255,255,.2);
  color: var(--tt-white);
  border-color: rgba(255,255,255,.7);
}
.navbar-hero .btn-taxi {
  background: var(--tt-white);
  color: var(--tt-warm-dark);
  border-color: var(--tt-white);
}
.navbar-hero .btn-taxi:hover {
  background: rgba(255,255,255,.85);
  color: var(--tt-warm-dark);
}

.hero-content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 0 4rem;
}
.hero-video-section .hero-content .btn-taxi {
  background: var(--tt-white);
  color: var(--tt-warm-dark);
  border-color: var(--tt-white);
}
.hero-video-section .hero-content .btn-taxi:hover {
  background: rgba(255,255,255,.85);
  box-shadow: 0 4px 20px rgba(255,255,255,.25);
}
.hero-video-section .hero-content .btn-outline-light {
  color: var(--tt-white);
  border-color: rgba(255,255,255,.5);
}
.hero-video-section .hero-content .btn-outline-light:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.8);
}

.hero-title {
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: .85rem;
  letter-spacing: -.01em;
  position: relative;
}
.hero-video-section .hero-title {
  color: var(--tt-white) !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.hero-section .hero-title {
  color: var(--tt-warm-dark) !important;
}

.hero-subtitle {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.75;
  position: relative;
}
.hero-video-section .hero-subtitle {
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.hero-section .hero-subtitle {
  color: var(--tt-warm-mid);
}

/* ──── Features ──── */
.feature-card {
  text-align: center;
  padding: 2rem 1rem;
  border-radius: var(--tt-radius-lg);
  transition: all var(--tt-transition);
}
.feature-card:hover {
  background: var(--tt-white);
  box-shadow: var(--tt-shadow);
  transform: translateY(-3px);
}
.feature-icon {
  width: 64px;
  height: 64px;
  background: #EFF6FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--tt-warm-dark);
  border: 2px solid #D8EAFC;
}
.feature-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tt-warm-dark);
  margin-bottom: .35rem;
}

/* ──── Route Cards (landing grid) ──── */
.route-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all var(--tt-transition);
  border: 1px solid var(--tt-warm-border);
  text-decoration: none !important;
  border-radius: var(--tt-radius-lg);
  background: var(--tt-white);
}
.route-card-link .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 1.3rem;
}
.route-card-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--tt-shadow-lg);
  border-color: var(--tt-yellow);
}

/* ──── Route Cards (booking sidebar) ──── */
.route-card {
  border: 1.5px solid var(--tt-warm-border);
  border-radius: var(--tt-radius);
  padding: .9rem 1.15rem;
  margin-bottom: .5rem;
  cursor: pointer;
  background: var(--tt-white);
  transition: all var(--tt-transition);
}
.route-card:hover {
  border-color: var(--tt-yellow);
  box-shadow: 0 2px 12px rgba(240,180,0,.12);
  background: var(--tt-cream);
}
.route-card.selected {
  border-color: var(--tt-yellow);
  background: var(--tt-yellow-glow);
  border-width: 2px;
}
.route-from-to { font-weight: 600; color: var(--tt-warm-dark); font-size: 1rem; }

/* ──── Car Type Buttons ──── */
.car-type-btn {
  border: 2px solid var(--tt-warm-border);
  background: var(--tt-white);
  color: var(--tt-warm-dark);
  padding: .6rem 1.15rem;
  border-radius: var(--tt-radius);
  cursor: pointer;
  font-family: var(--tt-font);
  font-size: .9rem;
  font-weight: 600;
  transition: all var(--tt-transition);
}
.car-type-btn:hover { border-color: var(--tt-warm-dark); background: var(--tt-cream); }
.car-type-btn.active {
  background: var(--tt-warm-dark);
  border-color: var(--tt-warm-dark);
  color: var(--tt-white);
}

/* ──── CTA Section ──── */
.cta-section {
  background: linear-gradient(135deg, #EFF6FF, #E0EEFA);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(70,140,220,.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section h2 { color: var(--tt-warm-dark); position: relative; }
.cta-section p  { color: var(--tt-warm-mid); position: relative; }

/* ──── Footer ──── */
.site-footer {
  background: var(--tt-warm-dark);
  color: rgba(255,240,229,.85);
  padding: 2.5rem 0 2rem;
  margin-top: auto;
  font-size: .9rem;
}
.site-footer a { color: var(--tt-yellow-light); text-decoration: none; }
.site-footer a:hover { color: var(--tt-white); }

/* ──── Booking Summary ──── */
.booking-summary {
  background: var(--tt-cream);
  border: 1px solid var(--tt-warm-border);
  border-radius: var(--tt-radius-lg);
  padding: 1.5rem;
}

/* ──── Testimonials ──── */
.testimonial-card {
  background: var(--tt-white);
  border-radius: var(--tt-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--tt-shadow-sm);
  border-left: 4px solid var(--tt-yellow);
}

/* ──── Trust Stats ──── */
.trust-stat-number { font-size: 1.75rem; font-weight: 800; color: var(--tt-yellow-dark); display: block; }
.trust-stat-label  { font-size: .85rem; color: var(--tt-warm-muted); }

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

@media (min-width: 992px) {
  .booking-summary { position: sticky; top: 5rem; }
  .container-xl { padding: 0 2rem; }
  .hero-section { padding: 5rem 0 4.5rem; }
  .hero-video-section { height: 85vh; min-height: 580px; max-height: 900px; }
  .hero-title { font-size: 2.8rem; }
  .py-5 { padding-top: 4rem; padding-bottom: 4rem; }
}

@media (max-width: 991px) {
  .booking-summary { position: static; margin-top: 1.5rem; }
}

@media (max-width: 768px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
  h3, .h5 { font-size: 1.1rem; }
  .display-1 { font-size: 3rem; }
  .hero-section { padding: 2.75rem 0 2.25rem; }
  .hero-video-section { height: 75vh; min-height: 420px; }
  .hero-title { font-size: 1.75rem !important; }
  .hero-subtitle { font-size: .95rem; }
  .btn-lg { font-size: .95rem; padding: .7rem 1.35rem; }
  .feature-card { padding: 1.25rem .5rem; }
  .card-body { padding: 1.15rem; }
}

@media (max-width: 576px) {
  .container-xl { padding: 0 1rem; }
  .hero-video-section { height: 70vh; min-height: 360px; }
  .hero-content { padding: 1.5rem 0 3rem; }
  .hero-title { font-size: 1.5rem !important; }
  .col-6 { width: 50%; }
  .d-flex.flex-wrap.gap-3 { gap: .5rem !important; }
  .btn-lg { width: 100%; justify-content: center; }
  .py-5 { padding-top: 2rem; padding-bottom: 2rem; }
  .feature-icon { width: 52px; height: 52px; }
  .feature-icon svg { width: 22px; height: 22px; }
}