/* ==========================================================================
   Tripfy Platform — Comprehensive Design System
   Version: 2.0.0  |  Pure CSS  |  Dark-mode ready via [data-theme="dark"]
   Brand primary: #2596be  |  Fonts: Poppins (head) + Manrope (body)
   ========================================================================== */

/* ==========================================================================
   SECTION 1 — CSS Custom Properties
   ========================================================================== */

:root {
  --tf-primary:     #2596be;
  --tf-primary-dk:  #1f7fa3;
  --tf-primary-lt:  #3aaed4;
  --tf-accent:      #e8a838;
  --tf-text:        #1a202c;
  --tf-muted:       #64748b;
  --tf-bg:          #f8fafc;
  --tf-card-bg:     #ffffff;
  --tf-border:      #e2e8f0;
  --tf-shadow:      0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  --tf-shadow-lg:   0 8px 40px rgba(0,0,0,.10);
  --tf-radius:      12px;
  --tf-radius-sm:   8px;
  --tf-radius-lg:   20px;
  --tf-font-head:   'Poppins', sans-serif;
  --tf-font-body:   'Manrope', sans-serif;
  --tf-transition:  0.22s ease;
  --tf-sidebar-w:   256px;
  --tf-topbar-h:    64px;
}

[data-theme="dark"] {
  --tf-text:     #e2e8f0;
  --tf-muted:    #94a3b8;
  --tf-bg:       #09131f;
  --tf-card-bg:  #0f1e2d;
  --tf-border:   #1e3048;
  --tf-shadow:   0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.2);
}

/* ==========================================================================
   SECTION 2 — Base / Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--tf-font-body);
  color: var(--tf-text);
  background: var(--tf-bg);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tf-font-head);
  font-weight: 700;
  color: var(--tf-text);
  margin-top: 0;
  line-height: 1.3;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.3rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

a {
  color: var(--tf-primary);
  text-decoration: none;
  transition: color var(--tf-transition);
}

a:hover {
  text-decoration: underline;
}

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

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ul, ol {
  margin-top: 0;
}

button,
input,
select,
textarea {
  font-family: var(--tf-font-body);
}

/* ==========================================================================
   SECTION 3 — Utility Classes
   ========================================================================== */

.tf-primary-color { color: var(--tf-primary); }
.tf-accent-color  { color: var(--tf-accent); }

.tf-section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tf-primary);
  border: 1px solid var(--tf-primary);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 12px;
}

.tf-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.tf-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.bg-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-padding    { padding: 80px 0; }
.section-padding-sm { padding: 50px 0; }

/* ==========================================================================
   SECTION 4 — Buttons — .theme-btn
   ========================================================================== */

.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tf-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--tf-font-body);
  cursor: pointer;
  transition: background var(--tf-transition), transform var(--tf-transition), box-shadow var(--tf-transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}

.theme-btn:hover {
  background: var(--tf-primary-dk);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37,150,190,0.3);
  color: #fff;
  text-decoration: none;
}

.theme-btn:active {
  transform: translateY(0);
}

.theme-btn--outline {
  background: transparent;
  color: var(--tf-primary);
  border: 2px solid var(--tf-primary);
}

.theme-btn--outline:hover {
  background: var(--tf-primary);
  color: #fff;
}

.theme-btn--sm {
  padding: 7px 18px;
  font-size: 0.82rem;
}

.theme-btn--lg {
  padding: 14px 36px;
  font-size: 1rem;
}

.theme-btn--accent {
  background: var(--tf-accent);
  color: #fff;
}

.theme-btn--accent:hover {
  background: #d4932a;
  color: #fff;
}

.theme-btn--white {
  background: #fff;
  color: var(--tf-primary);
}

.theme-btn--white:hover {
  background: var(--tf-bg);
  color: var(--tf-primary-dk);
}

/* ==========================================================================
   SECTION 5 — Card — .tf-card
   ========================================================================== */

.tf-card {
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
  overflow: hidden;
  transition: transform var(--tf-transition), box-shadow var(--tf-transition);
  position: relative;
}

.tf-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tf-shadow-lg);
}

.tf-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.tf-card__body {
  padding: 18px 20px;
}

.tf-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--tf-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 10px;
  z-index: 2;
}

.tf-card__price {
  color: var(--tf-primary);
  font-weight: 700;
  font-size: 1.05rem;
}

.tf-card__price del {
  color: var(--tf-muted);
  font-weight: 400;
  font-size: 0.85rem;
  text-decoration: line-through;
  margin-left: 4px;
}

.tf-card__meta {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--tf-muted);
  margin-top: 8px;
  flex-wrap: wrap;
}

.tf-card__meta i { color: var(--tf-primary); }

.tf-card__title a {
  color: var(--tf-text);
  font-weight: 600;
  font-size: 0.97rem;
  display: block;
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 6px;
}

.tf-card__title a:hover {
  color: var(--tf-primary);
  text-decoration: none;
}

.tf-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.tf-card__stars i {
  color: var(--tf-accent);
  font-size: 0.8rem;
}

/* ==========================================================================
   SECTION 6 — Section Header — .tf-section-header
   ========================================================================== */

.tf-section-header {
  text-align: center;
  margin-bottom: 48px;
}

.tf-section-header h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--tf-text);
}

.tf-section-header p {
  color: var(--tf-muted);
  max-width: 560px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ==========================================================================
   SECTION 7 — Hero — .tf-hero
   ========================================================================== */

.tf-hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.tf-hero__swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tf-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tf-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tf-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,40,70,0.72) 0%, rgba(0,0,0,0.35) 100%);
  z-index: 1;
}

.tf-hero__content-wrap {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-top: 80px;
}

.tf-hero__eyebrow {
  margin-bottom: 20px;
}

.tf-hero__eyebrow .tf-section-label {
  border-color: rgba(255,255,255,0.6);
  color: #fff;
  background: rgba(255,255,255,0.1);
}

.tf-hero__title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 20px;
}

@media (max-width: 767.98px) {
  .tf-hero__title { font-size: 2.2rem; }
}

.tf-hero__title-accent {
  color: var(--tf-accent);
}

.tf-hero__desc {
  color: rgba(255,255,255,.85);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

.tf-hero__pagination {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 6px;
}

.tf-hero__pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,0.5);
  opacity: 1;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  transition: width var(--tf-transition), background var(--tf-transition);
}

.tf-hero__pagination .swiper-pagination-bullet-active {
  background: #fff;
  width: 24px;
  border-radius: 4px;
  transition: width var(--tf-transition), background var(--tf-transition);
}

/* ==========================================================================
   SECTION 8 — Hero Search Bar — .tf-hero__search-bar
   ========================================================================== */

.tf-hero__search-bar {
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  max-width: 820px;
  margin: 0 auto;
  align-items: center;
}

.tf-hero__search-fields {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}

.tf-hero__search-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}

.tf-hero__search-field i {
  color: rgba(255,255,255,.7);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.tf-hero__input,
.tf-hero__select {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.9rem;
  outline: none;
  width: 100%;
  font-family: var(--tf-font-body);
}

.tf-hero__input::placeholder {
  color: rgba(255,255,255,0.6);
}

.tf-hero__select option {
  color: #1a202c;
  background: #fff;
}

.tf-hero__select { cursor: pointer; }

.tf-hero__search-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}

.tf-hero__search-btn {
  border-radius: 12px;
  padding: 12px 24px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
   SECTION 9 — Category Pills — .tf-cat-pills
   ========================================================================== */

.tf-cat-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}

.tf-cat-pills__label {
  color: rgba(255,255,255,.7);
  font-size: 0.82rem;
  font-weight: 500;
}

.tf-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  color: #fff;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--tf-transition);
  cursor: pointer;
}

.tf-cat-pill:hover {
  background: rgba(255,255,255,.25);
  color: #fff;
  text-decoration: none;
}

/* ==========================================================================
   SECTION 10 — Hero Scroll Indicator — .tf-hero__scroll-indicator
   ========================================================================== */

.tf-hero__scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.tf-hero__scroll-indicator a {
  color: rgba(255,255,255,.7);
  font-size: 1.4rem;
  display: inline-flex;
  animation: tf-bounce 1.6s infinite;
  text-decoration: none;
}

.tf-hero__scroll-indicator a:hover {
  color: #fff;
  text-decoration: none;
}

/* ==========================================================================
   SECTION 11 — Short Hero (inner pages) — .tf-hero--short
   ========================================================================== */

.tf-hero--short {
  height: 240px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.tf-hero--short .tf-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.tf-hero--short__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.6));
}

.tf-hero--short__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.tf-hero--short__title {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

/* ==========================================================================
   SECTION 12 — Breadcrumb — .tf-breadcrumb
   ========================================================================== */

.tf-breadcrumb__list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tf-breadcrumb__item {
  font-size: 0.82rem;
  color: rgba(255,255,255,.75);
}

.tf-breadcrumb__item a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: color var(--tf-transition);
}

.tf-breadcrumb__item a:hover {
  color: #fff;
  text-decoration: none;
}

.tf-breadcrumb__item--sep {
  color: rgba(255,255,255,.4);
  font-size: 0.65rem;
}

.tf-breadcrumb__item--active {
  color: #fff;
  font-weight: 500;
}

/* ==========================================================================
   SECTION 13 — Tour Grid Cards — .tour-card-tf
   ========================================================================== */

.tour-card-tf {
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
  overflow: hidden;
  transition: transform var(--tf-transition), box-shadow var(--tf-transition);
  position: relative;
}

.tour-card-tf:hover {
  transform: translateY(-3px);
  box-shadow: var(--tf-shadow-lg);
}

.tour-card-tf .tf-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.tour-card-tf__cat {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--tf-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 10px;
  z-index: 2;
}

.tour-card-tf__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,.9);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tf-muted);
  font-size: 0.9rem;
  transition: color var(--tf-transition), background var(--tf-transition);
  z-index: 2;
}

.tour-card-tf__wishlist:hover,
.tour-card-tf__wishlist.active {
  color: #e53e3e;
  background: #fff;
}

.tour-card-tf .tf-card__body {
  padding: 18px 20px;
}

/* ==========================================================================
   SECTION 14 — Destination Card — .tf-dest-card
   ========================================================================== */

.tf-dest-card {
  position: relative;
  border-radius: var(--tf-radius);
  overflow: hidden;
  cursor: pointer;
}

.tf-dest-card__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tf-dest-card:hover .tf-dest-card__img {
  transform: scale(1.06);
}

.tf-dest-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 50%);
}

.tf-dest-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 18px;
}

.tf-dest-card__name {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.tf-dest-card__count {
  color: rgba(255,255,255,.8);
  font-size: 0.8rem;
}

/* ==========================================================================
   SECTION 15 — Stats Bar / Trust Row — .tf-stats-row
   ========================================================================== */

.tf-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin: 40px 0;
}

.tf-stats-item {
  text-align: center;
  flex: 1;
  min-width: 120px;
}

.tf-stats-item__num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--tf-primary);
  display: block;
  font-family: var(--tf-font-head);
}

.tf-stats-item__label {
  font-size: 0.82rem;
  color: var(--tf-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: block;
  margin-top: 4px;
}

/* ==========================================================================
   SECTION 16 — Header / Navigation
   ========================================================================== */

.header-section {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  padding: 0;
}

.header-section.scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
}

[data-theme="dark"] .header-section.scrolled {
  background: rgba(9,19,31,.95);
}

.header-section.header-inner {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

[data-theme="dark"] .header-section.header-inner {
  background: #0f1e2d;
}

#header-sticky {
  padding: 0 24px;
}

.header-main {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* --- Logo --- */
.header-logo,
.header-logo-2 {
  display: block;
  flex-shrink: 0;
}

.header-logo img,
.header-logo-2 img {
  max-height: 42px;
  width: auto;
}

.tf-logo-light { display: block; }
.tf-logo-dark  { display: none; }

.header-section.scrolled .tf-logo-light { display: block; }
.header-section.scrolled .tf-logo-dark  { display: none; }

[data-theme="dark"] .header-section.scrolled .tf-logo-light { display: none; }
[data-theme="dark"] .header-section.scrolled .tf-logo-dark  { display: block; }

.header-section.header-inner .tf-logo-dark  { display: block; }
.header-section.header-inner .tf-logo-light { display: none; }

[data-theme="dark"] .header-section.header-inner .tf-logo-dark  { display: block; }
[data-theme="dark"] .header-section.header-inner .tf-logo-light { display: none; }

/* --- Center nav (Airbnb style) --- */
.bnb-nav-center {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.bnb-tabs {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border-radius: 40px;
  padding: 4px;
  gap: 2px;
}

.bnb-tab {
  padding: 8px 18px;
  border-radius: 36px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--tf-muted);
  text-decoration: none;
  transition: background var(--tf-transition), color var(--tf-transition), box-shadow var(--tf-transition);
  white-space: nowrap;
  position: relative;
}

.bnb-tab:hover,
.bnb-tab.active {
  background: #fff;
  color: var(--tf-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  text-decoration: none;
}

/* On hero page transparent header */
.tf-home-hero-header .bnb-tabs {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tf-home-hero-header .bnb-tab {
  color: rgba(255,255,255,.8);
}

.tf-home-hero-header .bnb-tab:hover,
.tf-home-hero-header .bnb-tab.active {
  background: rgba(255,255,255,.25);
  color: #fff;
  box-shadow: none;
}

.bnb-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--tf-accent);
  color: #fff;
  font-size: 0.55rem;
  border-radius: 10px;
  padding: 1px 5px;
  font-weight: 700;
  line-height: 1.4;
}

/* --- Search icon --- */
.bnb-search-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--tf-border);
  color: var(--tf-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--tf-transition), color var(--tf-transition);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.bnb-search-btn:hover {
  background: var(--tf-bg);
  color: var(--tf-text);
}

/* --- User actions / header right --- */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tf-header-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--tf-border);
  color: var(--tf-text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--tf-transition), color var(--tf-transition);
  text-decoration: none;
  position: relative;
}

.tf-header-action-btn:hover {
  background: var(--tf-bg);
  color: var(--tf-primary);
  text-decoration: none;
}

.tf-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--tf-primary);
}

/* On hero transparent header */
.tf-home-hero-header .tf-header-action-btn {
  border-color: rgba(255,255,255,.4);
  color: #fff;
}

.tf-home-hero-header .tf-header-action-btn:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}

.tf-home-hero-header .theme-btn {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
}

.tf-home-hero-header .theme-btn:hover {
  background: rgba(255,255,255,.25);
}

/* --- Mobile offcanvas menu --- */
.fix-area {
  position: relative;
}

.offcanvas__info {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  background: var(--tf-card-bg);
  z-index: 1100;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  padding: 0;
  box-shadow: var(--tf-shadow-lg);
}

.offcanvas__info.active {
  transform: translateX(0);
}

.offcanvas__wrapper {
  height: 100%;
  overflow-y: auto;
  padding: 24px 20px;
}

.offcanvas__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1099;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.offcanvas__overlay.active {
  opacity: 1;
  pointer-events: all;
}

.offcanvas__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--tf-border);
}

.offcanvas__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--tf-border);
  background: var(--tf-bg);
  color: var(--tf-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background var(--tf-transition);
}

.offcanvas__close:hover {
  background: var(--tf-border);
}

.offcanvas__menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.offcanvas__menu li {
  margin-bottom: 4px;
}

.offcanvas__menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 8px;
  color: var(--tf-text);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--tf-transition), color var(--tf-transition);
}

.offcanvas__menu li a:hover {
  background: var(--tf-bg);
  color: var(--tf-primary);
  text-decoration: none;
}

/* ==========================================================================
   SECTION 17 — User Dashboard Shell — Sidebar Layout
   ========================================================================== */

.tf-app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--tf-bg);
}

/* --- Sidebar --- */
.tf-sidebar {
  width: var(--tf-sidebar-w);
  background: var(--tf-card-bg);
  border-right: 1px solid var(--tf-border);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s ease;
  overflow: hidden;
}

.tf-sidebar__header {
  padding: 20px;
  border-bottom: 1px solid var(--tf-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.tf-sidebar__logo img {
  max-height: 36px;
  width: auto;
}

.tf-sidebar__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--tf-bg);
  color: var(--tf-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background var(--tf-transition), color var(--tf-transition);
}

.tf-sidebar__close:hover {
  background: var(--tf-border);
  color: var(--tf-text);
}

.tf-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.tf-sidebar__menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tf-sidebar__item {
  margin: 2px 8px;
}

.tf-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--tf-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color var(--tf-transition), background var(--tf-transition);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
  font-family: var(--tf-font-body);
}

.tf-sidebar__link:hover {
  color: var(--tf-text);
  background: var(--tf-bg);
  text-decoration: none;
}

.tf-sidebar__item--active .tf-sidebar__link {
  color: var(--tf-primary);
  background: rgba(37,150,190,.08);
  font-weight: 600;
}

.tf-sidebar__icon {
  width: 18px;
  text-align: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.tf-sidebar__caret {
  margin-left: auto;
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.tf-sidebar__item--open .tf-sidebar__caret {
  transform: rotate(180deg);
}

.tf-sidebar__sub {
  list-style: none;
  padding: 4px 0 4px 42px;
  margin: 0;
  display: none;
}

.tf-sidebar__item--open .tf-sidebar__sub {
  display: block;
}

.tf-sidebar__sub-link {
  display: block;
  padding: 7px 8px;
  font-size: 0.82rem;
  color: var(--tf-muted);
  border-radius: 6px;
  text-decoration: none;
  transition: color var(--tf-transition), background var(--tf-transition);
}

.tf-sidebar__sub-link:hover {
  color: var(--tf-primary);
  background: var(--tf-bg);
  text-decoration: none;
}

.tf-sidebar__sub-link.active {
  color: var(--tf-primary);
  font-weight: 600;
}

.tf-sidebar__divider {
  height: 1px;
  background: var(--tf-border);
  margin: 8px 12px;
}

.tf-sidebar__footer {
  padding: 16px;
  border-top: 1px solid var(--tf-border);
  flex-shrink: 0;
}

.tf-sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tf-sidebar__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.tf-sidebar__user-name {
  font-size: 0.85rem;
  font-weight: 600;
  display: block;
  color: var(--tf-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tf-sidebar__user-role {
  font-size: 0.75rem;
  color: var(--tf-muted);
  display: block;
}

.tf-sidebar-overlay {
  display: none;
}

.tf-sidebar-overlay--visible {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 199;
}

/* --- Main content area --- */
.tf-main {
  margin-left: var(--tf-sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- Topbar --- */
.tf-topbar {
  height: var(--tf-topbar-h);
  background: var(--tf-card-bg);
  border-bottom: 1px solid var(--tf-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

.tf-burger {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: none;
  background: var(--tf-bg);
  color: var(--tf-text);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tf-transition), color var(--tf-transition);
  flex-shrink: 0;
}

.tf-burger:hover {
  background: var(--tf-border);
  color: var(--tf-primary);
}

.tf-topbar__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tf-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tf-topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tf-topbar__icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--tf-border);
  background: transparent;
  color: var(--tf-muted);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: color var(--tf-transition), background var(--tf-transition);
}

.tf-topbar__icon-btn:hover {
  color: var(--tf-primary);
  background: var(--tf-bg);
}

.tf-topbar__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--tf-card-bg);
}

.tf-topbar__avatar-btn {
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0;
}

.tf-topbar__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--tf-primary);
}

.tf-topbar__avatar-status {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--tf-card-bg);
}

/* --- Dashboard content area --- */
.tf-content {
  flex: 1;
  padding: 32px 28px;
}

/* --- Dropdown cards --- */
.tf-dropdown-card {
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow-lg);
  background: var(--tf-card-bg);
  overflow: hidden;
}

.tf-dropdown-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tf-border);
}

.tf-dropdown-card__header h6,
.tf-dropdown-card__header p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.tf-dropdown-card__body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
}

.tf-dropdown-card__empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--tf-muted);
}

.tf-dropdown-card__empty i {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 8px;
  color: var(--tf-border);
}

.tf-dropdown-card__action {
  font-size: 0.8rem;
  color: var(--tf-primary);
  text-decoration: none;
  font-weight: 500;
}

.tf-dropdown-card__action:hover {
  text-decoration: underline;
}

/* --- Notification items --- */
.tf-notification-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tf-border);
  text-decoration: none;
  transition: background var(--tf-transition);
}

.tf-notification-item:hover {
  background: var(--tf-bg);
  text-decoration: none;
}

.tf-notification-item:last-child {
  border-bottom: none;
}

.tf-notification-item__text {
  font-size: 0.82rem;
  color: var(--tf-text);
  margin: 0 0 2px;
  line-height: 1.5;
}

.tf-notification-item__time {
  font-size: 0.74rem;
  color: var(--tf-muted);
  display: block;
}

.tf-notification-item__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* --- User dropdown --- */
.tf-user-dropdown {
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow-lg);
  background: var(--tf-card-bg);
  overflow: hidden;
  min-width: 220px;
}

.tf-user-dropdown__header {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--tf-border);
}

.tf-user-dropdown__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.tf-user-dropdown__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tf-text);
  display: block;
}

.tf-user-dropdown__email {
  font-size: 0.78rem;
  color: var(--tf-muted);
  display: block;
}

.tf-user-dropdown__menu {
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

.tf-user-dropdown__menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 0.875rem;
  color: var(--tf-text);
  text-decoration: none;
  transition: background var(--tf-transition), color var(--tf-transition);
}

.tf-user-dropdown__menu li a:hover {
  background: var(--tf-bg);
  color: var(--tf-primary);
  text-decoration: none;
}

.tf-user-dropdown__theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--tf-border);
}

.tf-user-dropdown__theme-label {
  font-size: 0.8rem;
  color: var(--tf-muted);
}

.tf-theme-toggle-group {
  display: flex;
  gap: 4px;
}

.tf-theme-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--tf-border);
  background: transparent;
  color: var(--tf-muted);
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tf-transition), color var(--tf-transition), border-color var(--tf-transition);
}

.tf-theme-btn:hover {
  background: var(--tf-bg);
  color: var(--tf-text);
}

.tf-theme-btn.active {
  background: var(--tf-primary);
  border-color: var(--tf-primary);
  color: #fff;
}

/* ==========================================================================
   SECTION 18 — Mobile Bottom Navigation — .tf-bottom-nav
   ========================================================================== */

.tf-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--tf-card-bg);
  border-top: 1px solid var(--tf-border);
  display: flex;
  align-items: center;
  z-index: 200;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}

.tf-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--tf-muted);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 6px 0;
  transition: color var(--tf-transition);
}

.tf-bottom-nav__item i {
  font-size: 1.2rem;
}

.tf-bottom-nav__item:hover,
.tf-bottom-nav__item--active {
  color: var(--tf-primary);
  text-decoration: none;
}

/* ==========================================================================
   SECTION 19 — Footer — .tf-platform-footer
   ========================================================================== */

.tf-platform-footer {
  background: #0a1929;
  color: rgba(255,255,255,.75);
  padding-top: 60px;
}

.tf-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 48px;
}

.tf-footer-socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tf-footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background var(--tf-transition), color var(--tf-transition), border-color var(--tf-transition);
}

.tf-footer-socials a:hover {
  background: var(--tf-primary);
  color: #fff;
  border-color: var(--tf-primary);
  text-decoration: none;
}

.tf-footer-newsletter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.tf-footer-newsletter p {
  font-size: 0.9rem;
  color: rgba(255,255,255,.7);
  margin: 0 12px 0 0;
}

.tf-footer-newsletter-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tf-footer-newsletter-input {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 0.875rem;
  font-family: var(--tf-font-body);
  outline: none;
  transition: border-color var(--tf-transition);
}

.tf-footer-newsletter-input::placeholder {
  color: rgba(255,255,255,.4);
}

.tf-footer-newsletter-input:focus {
  border-color: var(--tf-primary);
}

.tf-footer-newsletter-btn {
  padding: 8px 22px;
  border-radius: 8px;
  background: var(--tf-primary);
  color: #fff;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--tf-transition);
  font-family: var(--tf-font-body);
}

.tf-footer-newsletter-btn:hover {
  background: var(--tf-primary-dk);
}

.tf-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}

.tf-footer-column h3 {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  margin-bottom: 20px;
  font-family: var(--tf-font-head);
}

.tf-footer-column ul.list-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tf-footer-column ul li {
  margin-bottom: 10px;
}

.tf-footer-column ul li a {
  color: rgba(255,255,255,.65);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color var(--tf-transition);
}

.tf-footer-column ul li a:hover {
  color: #fff;
  text-decoration: none;
}

.tf-footer-brand p {
  font-size: 0.875rem;
  color: rgba(255,255,255,.6);
  margin: 12px 0 20px;
  line-height: 1.7;
}

.tf-footer-contact a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.65);
  font-size: 0.85rem;
  margin-bottom: 8px;
  text-decoration: none;
  transition: color var(--tf-transition);
}

.tf-footer-contact a:hover {
  color: #fff;
  text-decoration: none;
}

.footer-logo img {
  max-height: 44px;
  width: auto;
}

.footer-copyright {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copyright p {
  font-size: 0.8rem;
  color: rgba(255,255,255,.45);
  margin: 0;
}

.footer-copyright a {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color var(--tf-transition);
}

.footer-copyright a:hover {
  color: #fff;
  text-decoration: none;
}

.footer-copyright-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================================================================
   SECTION 20 — Preloader — #preloader.preloader
   ========================================================================== */

#preloader.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--tf-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.preloader .spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tf-spin 0.8s linear infinite;
}

.preloader .txt-loading {
  display: flex;
  gap: 4px;
  margin-top: 20px;
}

.preloader .letters-loading {
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  animation: tf-letter-pulse 1.8s infinite;
  font-family: var(--tf-font-head);
}

.preloader .letters-loading:nth-child(1)  { animation-delay: 0.0s; }
.preloader .letters-loading:nth-child(2)  { animation-delay: 0.1s; }
.preloader .letters-loading:nth-child(3)  { animation-delay: 0.2s; }
.preloader .letters-loading:nth-child(4)  { animation-delay: 0.3s; }
.preloader .letters-loading:nth-child(5)  { animation-delay: 0.4s; }
.preloader .letters-loading:nth-child(6)  { animation-delay: 0.5s; }
.preloader .letters-loading:nth-child(7)  { animation-delay: 0.6s; }
.preloader .letters-loading:nth-child(8)  { animation-delay: 0.7s; }
.preloader .letters-loading:nth-child(9)  { animation-delay: 0.8s; }
.preloader .letters-loading:nth-child(10) { animation-delay: 0.9s; }

.preloader.loaded {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* ==========================================================================
   SECTION 21 — Back To Top — .back-to-top
   ========================================================================== */

.back-to-top {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tf-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  z-index: 100;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, background var(--tf-transition);
  box-shadow: 0 4px 12px rgba(37,150,190,.4);
  text-decoration: none;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-2px);
  background: var(--tf-primary-dk);
  color: #fff;
  text-decoration: none;
}

/* ==========================================================================
   SECTION 22 — Auth Pages — .tf-auth
   ========================================================================== */

.tf-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d3f5f 0%, var(--tf-primary) 50%, #3ab0d8 100%);
  padding: 20px;
}

.tf-auth__card {
  background: var(--tf-card-bg);
  border-radius: var(--tf-radius-lg);
  padding: 48px 44px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--tf-shadow-lg);
}

.tf-auth__logo {
  text-align: center;
  margin-bottom: 28px;
}

.tf-auth__logo img {
  max-height: 50px;
  width: auto;
  margin: 0 auto;
}

.tf-auth__title {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
  color: var(--tf-text);
}

.tf-auth__sub {
  font-size: 0.9rem;
  color: var(--tf-muted);
  text-align: center;
  margin-bottom: 28px;
}

.tf-auth input,
.tf-auth select,
.tf-auth textarea {
  border: 1px solid var(--tf-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  width: 100%;
  background: var(--tf-bg);
  color: var(--tf-text);
  font-family: var(--tf-font-body);
  transition: border-color var(--tf-transition), box-shadow var(--tf-transition);
  outline: none;
}

.tf-auth input:focus,
.tf-auth select:focus,
.tf-auth textarea:focus {
  border-color: var(--tf-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,150,190,.12);
}

.tf-auth__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

.tf-auth__divider::before,
.tf-auth__divider::after {
  content: '';
  height: 1px;
  background: var(--tf-border);
  flex: 1;
}

.tf-auth__divider span {
  font-size: 0.8rem;
  color: var(--tf-muted);
  white-space: nowrap;
}

.tf-auth__footer {
  text-align: center;
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--tf-muted);
}

.tf-auth__footer a {
  color: var(--tf-primary);
  font-weight: 500;
  text-decoration: none;
}

.tf-auth__footer a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   SECTION 23 — Error Pages — .tf-error
   ========================================================================== */

.tf-error {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 16px;
}

.tf-error__inner {
  position: relative;
  display: inline-block;
}

.tf-error__code {
  font-size: 8rem;
  font-weight: 900;
  color: var(--tf-primary);
  line-height: 1;
  opacity: 0.15;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-family: var(--tf-font-head);
}

.tf-error__content {
  position: relative;
  z-index: 2;
  padding: 60px 40px;
}

.tf-error__title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--tf-text);
}

.tf-error__desc {
  color: var(--tf-muted);
  margin-bottom: 32px;
  font-size: 1rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   SECTION 24 — Package List Page — .tf-pkg-page
   ========================================================================== */

.tf-pkg-page {
  padding: 40px 0 60px;
}

.tf-pkg-sidebar {
  position: sticky;
  top: 90px;
  background: var(--tf-card-bg);
  border-radius: var(--tf-radius);
  padding: 24px;
  border: 1px solid var(--tf-border);
}

.tf-filter-group {
  margin-bottom: 24px;
}

.tf-filter-group:last-child {
  margin-bottom: 0;
}

.tf-filter-group__title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tf-muted);
  margin-bottom: 12px;
  display: block;
}

.tf-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--tf-text);
  user-select: none;
}

.tf-filter-check input[type="checkbox"] {
  accent-color: var(--tf-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.tf-filter-range input[type="range"] {
  width: 100%;
  accent-color: var(--tf-primary);
  cursor: pointer;
}

.tf-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--tf-card-bg);
  border-radius: var(--tf-radius);
  border: 1px solid var(--tf-border);
}

.tf-sort-bar__count {
  font-size: 0.875rem;
  color: var(--tf-muted);
}

.tf-sort-bar__count span {
  color: var(--tf-text);
  font-weight: 600;
}

.tf-sort-bar select {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--tf-border);
  background: var(--tf-card-bg);
  color: var(--tf-text);
  font-size: 0.875rem;
  font-family: var(--tf-font-body);
  outline: none;
  cursor: pointer;
}

/* ==========================================================================
   SECTION 25 — Package Details Page — .tf-pkg-detail
   ========================================================================== */

.tf-pkg-detail {
  padding: 40px 0 60px;
}

.tf-pkg-detail__gallery {
  position: relative;
  border-radius: var(--tf-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 32px;
}

.tf-pkg-detail__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tf-pkg-detail__book-card {
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  padding: 24px;
  position: sticky;
  top: 90px;
  box-shadow: var(--tf-shadow);
}

.tf-pkg-detail__price {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--tf-primary);
  display: block;
  margin-bottom: 4px;
  font-family: var(--tf-font-head);
}

.tf-pkg-detail__price-label {
  font-size: 0.8rem;
  color: var(--tf-muted);
  margin-bottom: 20px;
  display: block;
}

/* Tab navigation */
.tf-tab-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--tf-border);
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.tf-tab-btn {
  padding: 10px 20px;
  border: none;
  background: none;
  color: var(--tf-muted);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--tf-transition), border-color var(--tf-transition);
  font-family: var(--tf-font-body);
  white-space: nowrap;
}

.tf-tab-btn:hover {
  color: var(--tf-text);
}

.tf-tab-btn.active {
  color: var(--tf-primary);
  border-bottom-color: var(--tf-primary);
}

.tf-tab-content {
  display: none;
}

.tf-tab-content.active {
  display: block;
}

/* ==========================================================================
   SECTION 26 — Review Stars — .tf-stars
   ========================================================================== */

.tf-stars i {
  color: var(--tf-accent);
  font-size: 0.85rem;
}

/* ==========================================================================
   SECTION 27 — Checkout Page — .tf-checkout
   ========================================================================== */

.tf-checkout {
  padding: 40px 0 60px;
}

.tf-checkout__summary {
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  padding: 24px;
  position: sticky;
  top: 90px;
}

.tf-checkout__summary-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tf-text);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tf-border);
}

.tf-checkout__total {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tf-primary);
  display: block;
}

.tf-checkout__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tf-border);
}

.tf-checkout__item:last-child {
  border-bottom: none;
}

.tf-checkout__item img {
  width: 60px;
  height: 50px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.tf-checkout__item-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tf-text);
  margin: 0 0 4px;
}

.tf-checkout__item-meta {
  font-size: 0.78rem;
  color: var(--tf-muted);
}

.tf-checkout__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.875rem;
  color: var(--tf-text);
}

.tf-checkout__divider {
  height: 1px;
  background: var(--tf-border);
  margin: 8px 0;
}

/* ==========================================================================
   SECTION 28 — Plans Section — .tf-plans
   ========================================================================== */

.tf-plans {
  padding: 80px 0;
}

.tf-plan-card {
  position: relative;
  background: var(--tf-card-bg);
  border: 2px solid var(--tf-border);
  border-radius: var(--tf-radius-lg);
  padding: 32px 28px;
  text-align: center;
  transition: transform var(--tf-transition), box-shadow var(--tf-transition), border-color var(--tf-transition);
}

.tf-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tf-shadow-lg);
}

.tf-plan-card--featured {
  border-color: var(--tf-primary);
  background: linear-gradient(135deg, rgba(37,150,190,.04) 0%, rgba(37,150,190,.02) 100%);
}

.tf-plan-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tf-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 4px 14px;
  white-space: nowrap;
}

.tf-plan-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tf-text);
  margin-bottom: 4px;
}

.tf-plan-card__price {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--tf-primary);
  margin: 16px 0 4px;
  font-family: var(--tf-font-head);
  display: block;
}

.tf-plan-card__period {
  font-size: 0.82rem;
  color: var(--tf-muted);
  display: block;
}

.tf-plan-card__features {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  text-align: left;
}

.tf-plan-card__features li {
  padding: 8px 0;
  border-bottom: 1px solid var(--tf-border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--tf-text);
}

.tf-plan-card__features li:last-child {
  border-bottom: none;
}

.tf-plan-card__features li i {
  color: var(--tf-primary);
  flex-shrink: 0;
}

/* ==========================================================================
   SECTION 29 — FAQ Section — .tf-faq
   ========================================================================== */

.tf-faq {
  padding: 80px 0;
}

.tf-faq-item {
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow var(--tf-transition);
}

.tf-faq-item:hover {
  box-shadow: var(--tf-shadow);
}

.tf-faq-item__q {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--tf-text);
  user-select: none;
  gap: 16px;
}

.tf-faq-item__q i {
  color: var(--tf-primary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.tf-faq-item--open .tf-faq-item__q i {
  transform: rotate(180deg);
}

.tf-faq-item__a {
  padding: 0 20px 16px;
  color: var(--tf-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  display: none;
}

.tf-faq-item--open .tf-faq-item__a {
  display: block;
}

/* ==========================================================================
   SECTION 30 — Testimonial Card — .tf-testi-card
   ========================================================================== */

.tf-testi-card {
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  padding: 28px 24px;
  height: 100%;
}

.tf-testi-card__quote i {
  font-size: 2rem;
  color: var(--tf-primary);
  opacity: .3;
  margin-bottom: 12px;
  display: block;
}

.tf-testi-card__text {
  font-size: 0.9rem;
  color: var(--tf-muted);
  line-height: 1.75;
  font-style: italic;
  margin: 0 0 20px;
}

.tf-testi-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.tf-testi-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.tf-testi-card__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tf-text);
  display: block;
}

.tf-testi-card__location {
  font-size: 0.78rem;
  color: var(--tf-muted);
  display: block;
}

/* ==========================================================================
   SECTION 31 — Pagination — .tf-pagination
   ========================================================================== */

.tf-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 32px 0 0;
}

.tf-pagination a,
.tf-pagination span {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--tf-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--tf-text);
  text-decoration: none;
  transition: border-color var(--tf-transition), color var(--tf-transition), background var(--tf-transition);
  background: var(--tf-card-bg);
}

.tf-pagination a:hover {
  border-color: var(--tf-primary);
  color: var(--tf-primary);
  text-decoration: none;
}

.tf-pagination .current,
.tf-pagination span[aria-current] {
  background: var(--tf-primary);
  border-color: var(--tf-primary);
  color: #fff;
}

/* ==========================================================================
   SECTION 32 — Marquee / Brand Logos — .tf-marquee-wrap
   ========================================================================== */

.tf-marquee-wrap {
  overflow: hidden;
  position: relative;
}

.tf-marquee-track {
  display: flex;
  width: max-content;
  animation: tf-marquee 30s linear infinite;
  align-items: center;
}

.tf-marquee-wrap:hover .tf-marquee-track {
  animation-play-state: paused;
}

.tf-brand-logo {
  width: 120px;
  height: 60px;
  object-fit: contain;
  filter: grayscale(100%) opacity(.5);
  margin: 0 24px;
  display: block;
  transition: filter var(--tf-transition);
}

.tf-brand-logo:hover {
  filter: none;
}

/* ==========================================================================
   SECTION 33 — Cookie Bar — .tf-cookie-bar
   ========================================================================== */

.tf-cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--tf-card-bg);
  border-top: 2px solid var(--tf-primary);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  z-index: 1000;
  box-shadow: 0 -4px 24px rgba(0,0,0,.08);
}

.tf-cookie-bar p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--tf-text);
  flex: 1;
  min-width: 200px;
}

.tf-cookie-bar a {
  color: var(--tf-primary);
  font-weight: 500;
}

.tf-cookie-bar__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   SECTION 34 — Stats Section — .tf-stats-section
   ========================================================================== */

.tf-stats-section {
  background: linear-gradient(135deg, #0d3f5f 0%, var(--tf-primary) 100%);
  color: #fff;
  padding: 60px 0;
}

.tf-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.tf-stat-block {
  text-align: center;
  padding: 24px;
}

.tf-stat-block__num {
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--tf-font-head);
  display: block;
}

.tf-stat-block__label {
  font-size: 0.82rem;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: block;
  margin-top: 6px;
}

/* ==========================================================================
   SECTION 35 — Transport CTA Section — .tf-transport-cta
   ========================================================================== */

.tf-transport-cta {
  background: var(--tf-card-bg);
  border-radius: var(--tf-radius-lg);
  padding: 48px;
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0 0 60px;
  border: 1px solid var(--tf-border);
}

.tf-transport-cta__icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--tf-primary), var(--tf-primary-lt));
  border-radius: var(--tf-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  flex-shrink: 0;
}

.tf-transport-cta__body {
  flex: 1;
}

.tf-transport-cta__body h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tf-text);
  margin-bottom: 8px;
}

.tf-transport-cta__body p {
  color: var(--tf-muted);
  font-size: 0.9rem;
  margin: 0;
}

.tf-transport-cta__action {
  flex-shrink: 0;
}

/* ==========================================================================
   SECTION 36 — Dashboard Forms — .tf-form-*
   ========================================================================== */

.tf-form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tf-text);
  margin-bottom: 6px;
  display: block;
}

.tf-form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-sm);
  background: var(--tf-card-bg);
  color: var(--tf-text);
  font-size: 0.875rem;
  font-family: var(--tf-font-body);
  transition: border-color var(--tf-transition), box-shadow var(--tf-transition);
  outline: none;
  line-height: 1.5;
}

.tf-form-control:focus {
  border-color: var(--tf-primary);
  box-shadow: 0 0 0 3px rgba(37,150,190,.1);
}

.tf-form-control:disabled {
  background: var(--tf-bg);
  cursor: not-allowed;
  opacity: 0.7;
}

.tf-form-control::placeholder {
  color: var(--tf-muted);
  opacity: 0.7;
}

textarea.tf-form-control {
  resize: vertical;
  min-height: 100px;
}

.tf-form-group {
  margin-bottom: 18px;
}

.tf-form-section {
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  padding: 28px;
  margin-bottom: 24px;
}

.tf-form-section__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tf-text);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tf-border);
  display: block;
}

/* ==========================================================================
   SECTION 37 — Tables — .tf-table
   ========================================================================== */

.tf-table-wrap {
  overflow-x: auto;
  border-radius: var(--tf-radius);
  border: 1px solid var(--tf-border);
  background: var(--tf-card-bg);
}

.tf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tf-table thead th {
  background: var(--tf-bg);
  color: var(--tf-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tf-border);
  white-space: nowrap;
  text-align: left;
}

.tf-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--tf-border);
  color: var(--tf-text);
  vertical-align: middle;
}

.tf-table tbody tr:last-child td {
  border-bottom: none;
}

.tf-table tbody tr:hover td {
  background: rgba(37,150,190,.03);
}

/* ==========================================================================
   SECTION 38 — Badges / Status Pills — .tf-badge
   ========================================================================== */

.tf-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.tf-badge--success {
  background: #dcfce7;
  color: #15803d;
}

.tf-badge--warning {
  background: #fef9c3;
  color: #b45309;
}

.tf-badge--danger {
  background: #fee2e2;
  color: #b91c1c;
}

.tf-badge--info {
  background: rgba(37,150,190,.1);
  color: var(--tf-primary);
}

.tf-badge--muted {
  background: var(--tf-bg);
  color: var(--tf-muted);
}

/* Dark mode badge overrides */
[data-theme="dark"] .tf-badge--success {
  background: rgba(21,128,61,.2);
  color: #4ade80;
}

[data-theme="dark"] .tf-badge--warning {
  background: rgba(180,83,9,.2);
  color: #fbbf24;
}

[data-theme="dark"] .tf-badge--danger {
  background: rgba(185,28,28,.2);
  color: #f87171;
}

[data-theme="dark"] .tf-badge--muted {
  background: var(--tf-border);
  color: var(--tf-muted);
}

/* ==========================================================================
   SECTION 39 — Modals — .tf-modal
   ========================================================================== */

.tf-modal .modal-content {
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-lg);
  box-shadow: var(--tf-shadow-lg);
}

.tf-modal .modal-header {
  border-bottom: 1px solid var(--tf-border);
  padding: 20px 24px;
}

.tf-modal .modal-title {
  font-family: var(--tf-font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--tf-text);
}

.tf-modal .modal-body {
  padding: 24px;
  color: var(--tf-text);
}

.tf-modal .modal-footer {
  border-top: 1px solid var(--tf-border);
  padding: 16px 24px;
}

.tf-modal .btn-close {
  color: var(--tf-muted);
  opacity: 0.7;
}

.tf-modal .btn-close:hover {
  opacity: 1;
}

/* ==========================================================================
   SECTION 40 — Animations (keyframes)
   ========================================================================== */

@keyframes tf-spin {
  to { transform: rotate(360deg); }
}

@keyframes tf-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

@keyframes tf-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tf-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes tf-letter-pulse {
  0%, 100% { color: rgba(255,255,255,.3); }
  50%      { color: #fff; }
}

/* ==========================================================================
   SECTION 41 — Responsive Overrides
   ========================================================================== */

/* ---- Tablet & below (≤ 991.98px) ---- */
@media (max-width: 991.98px) {
  .tf-sidebar {
    transform: translateX(-100%);
  }

  .tf-sidebar--open {
    transform: translateX(0);
  }

  .tf-main {
    margin-left: 0;
  }

  .bnb-nav-center {
    display: none;
  }

  .tf-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .tf-hero__title {
    font-size: 2.4rem;
  }

  .tf-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tf-pkg-detail__book-card {
    position: static;
    margin-top: 32px;
  }

  .tf-transport-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    gap: 24px;
  }

  .tf-hero__search-fields {
    flex-wrap: wrap;
  }
}

/* ---- Mobile (≤ 767.98px) ---- */
@media (max-width: 767.98px) {
  .tf-hero__title {
    font-size: 1.9rem;
  }

  .tf-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .section-padding {
    padding: 50px 0;
  }

  .tf-content {
    padding: 20px 16px;
  }

  .tf-hero__search-bar {
    background: rgba(255,255,255,.12);
    flex-direction: column;
    border-radius: 12px;
  }

  .tf-hero__search-fields {
    flex-direction: column;
    width: 100%;
  }

  .tf-hero__search-field {
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding: 10px 12px;
    width: 100%;
  }

  .tf-hero__search-field:last-of-type {
    border-bottom: none;
  }

  .tf-hero__search-divider {
    display: none;
  }

  .tf-hero__search-btn {
    width: 100%;
    border-radius: 10px;
    justify-content: center;
    margin-top: 4px;
  }

  .tf-auth__card {
    padding: 32px 24px;
  }

  body.tf-mobile-has-bottom-nav {
    padding-bottom: 60px;
  }

  .tf-stats-section .tf-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tf-sort-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .tf-checkout__summary {
    position: static;
  }

  .header-main {
    height: 60px;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.65rem; }
  h3 { font-size: 1.35rem; }

  .tf-transport-cta {
    padding: 24px;
  }

  .tf-topbar {
    padding: 0 16px;
  }
}

/* ---- Small mobile (≤ 479.98px) ---- */
@media (max-width: 479.98px) {
  .tf-hero__title {
    font-size: 1.6rem;
  }

  .tf-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .tf-stat-block__num {
    font-size: 2rem;
  }

  .tf-section-header h2 {
    font-size: 1.5rem;
  }

  .tf-pkg-detail__price {
    font-size: 1.5rem;
  }

  .tf-auth__card {
    padding: 28px 20px;
  }
}

/* ==========================================================================
   SECTION 42 — Print Styles
   ========================================================================== */

@media print {
  .tf-sidebar,
  .tf-topbar,
  .tf-bottom-nav,
  .back-to-top,
  .header-section,
  .tf-platform-footer,
  .tf-cookie-bar,
  #preloader {
    display: none !important;
  }

  .tf-main {
    margin-left: 0 !important;
  }

  .tf-content {
    padding: 0 !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  .tf-card,
  .tf-pkg-detail__book-card,
  .tf-checkout__summary {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}

/* ==========================================================================
   SECTION 43 — Old Adventra Class Compatibility
   ========================================================================== */

/* .tour-box-items behaves like .tf-card */
.tour-box-items {
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
  overflow: hidden;
  transition: transform var(--tf-transition), box-shadow var(--tf-transition);
  position: relative;
}

.tour-box-items:hover {
  transform: translateY(-3px);
  box-shadow: var(--tf-shadow-lg);
}

.tour-box-items .tour-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.tour-box-items .tour-content {
  padding: 18px 20px;
}

/* .section-title behaves like .tf-section-header */
.section-title {
  text-align: center;
  margin-bottom: 48px;
}

.section-title h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--tf-text);
  font-family: var(--tf-font-head);
}

.section-title p {
  color: var(--tf-muted);
  max-width: 560px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.7;
}

.section-title .sub-title {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tf-primary);
  border: 1px solid var(--tf-primary);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 12px;
}

/* Shared adventra button compatibility */
.tp-btn,
.tp-btn-border {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 10px 28px;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--tf-font-body);
  cursor: pointer;
  transition: background var(--tf-transition), transform var(--tf-transition), box-shadow var(--tf-transition);
  text-decoration: none;
  border: none;
}

.tp-btn {
  background: var(--tf-primary);
  color: #fff;
}

.tp-btn:hover {
  background: var(--tf-primary-dk);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37,150,190,0.3);
  color: #fff;
  text-decoration: none;
}

.tp-btn-border {
  background: transparent;
  color: var(--tf-primary);
  border: 2px solid var(--tf-primary);
}

.tp-btn-border:hover {
  background: var(--tf-primary);
  color: #fff;
  text-decoration: none;
}

/* ==========================================================================
   SECTION 44 — Dark Mode — Additional Component Overrides
   ========================================================================== */

[data-theme="dark"] .bnb-tabs {
  background: rgba(255,255,255,.05);
}

[data-theme="dark"] .bnb-tab:hover,
[data-theme="dark"] .bnb-tab.active {
  background: rgba(255,255,255,.1);
  color: var(--tf-primary-lt);
}

[data-theme="dark"] .tf-sort-bar select {
  background: var(--tf-card-bg);
  color: var(--tf-text);
  border-color: var(--tf-border);
}

[data-theme="dark"] .tf-table thead th {
  background: rgba(255,255,255,.03);
}

[data-theme="dark"] .tf-table tbody tr:hover td {
  background: rgba(37,150,190,.06);
}

[data-theme="dark"] .preloader {
  background: #0a1929;
}

[data-theme="dark"] .offcanvas__info {
  background: var(--tf-card-bg);
}

[data-theme="dark"] .tf-auth {
  background: linear-gradient(135deg, #050d18 0%, #0a2a3f 50%, #0f1e2d 100%);
}

[data-theme="dark"] .tf-error__code {
  opacity: 0.08;
}

[data-theme="dark"] .tour-box-items {
  background: var(--tf-card-bg);
  border-color: var(--tf-border);
}

[data-theme="dark"] .section-title h2 {
  color: var(--tf-text);
}

[data-theme="dark"] .tf-card__title a {
  color: var(--tf-text);
}

[data-theme="dark"] .tf-card__title a:hover {
  color: var(--tf-primary-lt);
}

[data-theme="dark"] .tf-plan-card--featured {
  background: linear-gradient(135deg, rgba(37,150,190,.08) 0%, rgba(37,150,190,.04) 100%);
}

[data-theme="dark"] .back-to-top {
  box-shadow: 0 4px 12px rgba(37,150,190,.25);
}

[data-theme="dark"] .tf-cookie-bar {
  border-top-color: var(--tf-primary-lt);
}

[data-theme="dark"] .tf-filter-check input[type="checkbox"] {
  accent-color: var(--tf-primary-lt);
}

[data-theme="dark"] .tf-filter-range input[type="range"] {
  accent-color: var(--tf-primary-lt);
}

/* ==========================================================================
   SECTION 45 — Extended Utility Components
   ========================================================================== */

/* Visually hidden (accessibility) */
.tf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Text truncation */
.tf-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tf-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tf-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Divider */
.tf-divider {
  height: 1px;
  background: var(--tf-border);
  margin: 24px 0;
}

/* Loading skeleton */
.tf-skeleton {
  background: linear-gradient(90deg, var(--tf-bg) 25%, var(--tf-border) 50%, var(--tf-bg) 75%);
  background-size: 200% 100%;
  animation: tf-skeleton-shimmer 1.5s infinite;
  border-radius: 6px;
  display: block;
}

@keyframes tf-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Alert banners */
.tf-alert {
  padding: 12px 16px;
  border-radius: var(--tf-radius-sm);
  font-size: 0.875rem;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tf-alert--info {
  background: rgba(37,150,190,.1);
  color: var(--tf-primary);
  border-left: 3px solid var(--tf-primary);
}

.tf-alert--success {
  background: #f0fdf4;
  color: #15803d;
  border-left: 3px solid #22c55e;
}

.tf-alert--warning {
  background: #fffbeb;
  color: #b45309;
  border-left: 3px solid var(--tf-accent);
}

.tf-alert--danger {
  background: #fef2f2;
  color: #b91c1c;
  border-left: 3px solid #ef4444;
}

[data-theme="dark"] .tf-alert--success {
  background: rgba(21,128,61,.15);
  color: #4ade80;
}

[data-theme="dark"] .tf-alert--warning {
  background: rgba(180,83,9,.15);
  color: #fbbf24;
}

[data-theme="dark"] .tf-alert--danger {
  background: rgba(185,28,28,.15);
  color: #f87171;
}

/* Progress bar */
.tf-progress {
  height: 6px;
  background: var(--tf-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}

.tf-progress__bar {
  height: 100%;
  background: var(--tf-primary);
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* Feature box — benefit / why-choose sections */
.tf-feature-box {
  text-align: center;
  padding: 32px 24px;
}

.tf-feature-box__icon {
  width: 60px;
  height: 60px;
  border-radius: var(--tf-radius);
  background: rgba(37,150,190,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--tf-primary);
  margin: 0 auto 16px;
}

.tf-feature-box h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tf-text);
  margin-bottom: 8px;
}

.tf-feature-box p {
  font-size: 0.875rem;
  color: var(--tf-muted);
  margin: 0;
  line-height: 1.7;
}

/* Itinerary timeline */
.tf-timeline {
  position: relative;
  padding-left: 32px;
}

.tf-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tf-border);
}

.tf-timeline__item {
  position: relative;
  margin-bottom: 28px;
}

.tf-timeline__dot {
  position: absolute;
  left: -28px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tf-primary);
  border: 3px solid var(--tf-card-bg);
  box-shadow: 0 0 0 2px var(--tf-primary);
}

.tf-timeline__day {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tf-primary);
  margin-bottom: 4px;
  display: block;
}

.tf-timeline__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tf-text);
  margin-bottom: 6px;
}

.tf-timeline__desc {
  font-size: 0.875rem;
  color: var(--tf-muted);
  line-height: 1.65;
  margin: 0;
}

/* Included / Excluded list */
.tf-incl-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tf-incl-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--tf-text);
  padding: 6px 0;
}

.tf-incl-list li i.fa-check {
  color: #22c55e;
  flex-shrink: 0;
  margin-top: 2px;
}

.tf-incl-list li i.fa-times,
.tf-incl-list li i.fa-xmark {
  color: #ef4444;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Rating distribution bar */
.tf-rating-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.8rem;
  color: var(--tf-muted);
}

.tf-rating-bar__track {
  flex: 1;
  height: 6px;
  background: var(--tf-border);
  border-radius: 10px;
  overflow: hidden;
}

.tf-rating-bar__fill {
  height: 100%;
  background: var(--tf-accent);
  border-radius: 10px;
}

/* Avatar group */
.tf-avatar-group {
  display: flex;
}

.tf-avatar-group .tf-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--tf-card-bg);
  object-fit: cover;
  margin-left: -8px;
}

.tf-avatar-group .tf-avatar:first-child {
  margin-left: 0;
}

/* Gallery thumbs */
.tf-gallery-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.tf-gallery-thumbs img {
  width: 72px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--tf-transition), transform var(--tf-transition);
}

.tf-gallery-thumbs img:hover,
.tf-gallery-thumbs img.active {
  opacity: 1;
  transform: scale(1.04);
}

/* Tag / chip */
.tf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--tf-bg);
  color: var(--tf-text);
  border: 1px solid var(--tf-border);
}

/* Map wrapper */
.tf-map-wrap {
  border-radius: var(--tf-radius);
  overflow: hidden;
  border: 1px solid var(--tf-border);
}

.tf-map-wrap iframe {
  display: block;
  width: 100%;
}

/* Sticky price CTA strip (mobile only) */
.tf-sticky-cta {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 10px 16px;
  background: var(--tf-primary);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 -2px 16px rgba(37,150,190,.3);
}

@media (max-width: 767.98px) {
  .tf-sticky-cta { display: flex; }
}

.tf-sticky-cta__price {
  font-size: 1.1rem;
  font-weight: 800;
  font-family: var(--tf-font-head);
}

.tf-sticky-cta__label {
  font-size: 0.75rem;
  opacity: 0.85;
  display: block;
}

/* No-scrollbar utility */
.tf-no-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tf-no-scroll::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   End of Tripfy Platform Design System
   ========================================================================== */

/* ==========================================================================
   PATCH — Missing component CSS for tripfy sections
   Adds: section-head aliases, tour-card, tour-masonry, hero modifiers,
         testimonial enhancements, blog-card, video, app-cta, brand-strip
   ========================================================================== */

/* ── Section Header Aliases ─────────────────────────────────────────────── */
.tf-section-head { text-align: center; margin-bottom: 3rem; }
.tf-section-head .tf-section-label { display: inline-block; margin-bottom: .75rem; }
.tf-section-title {
  font-family: var(--tf-font-head);
  font-weight: 700;
  font-size: 2rem;
  color: var(--tf-text);
  margin: 0 0 1rem;
  line-height: 1.25;
}
.tf-section-desc {
  color: var(--tf-muted);
  font-size: 1rem;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.7;
}
.tf-section-label--light { color: rgba(255,255,255,.85); }
.tf-section-label--light::before { background: rgba(255,255,255,.5); }
@media (max-width: 767px) { .tf-section-title { font-size: 1.5rem; } }

/* Section background modifiers */
.tf-section--dark-navy  { background: #09131f; }
.tf-section--light-gray { background: #f4f7fb; }
.tf-section--masonry    { background: var(--tf-bg); }
.tf-section--app-cta    { position: relative; overflow: hidden; padding: 5rem 0; }
.tf-section--video      { position: relative; overflow: hidden; min-height: 420px; display: flex; align-items: center; }
[data-theme="dark"] .tf-section--light-gray { background: #0d1a27; }

/* ── Hero Modifiers ─────────────────────────────────────────────────────── */
.tf-hero--full    { min-height: 100vh; }
.tf-hero--luxury  { min-height: 100vh; }
.tf-hero__overlay--dark { background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,.4) 100%); }
.tf-hero__content-wrap--center { top: 50%; transform: translateY(-50%); position: absolute; left: 0; right: 0; padding: 0; }
.tf-hero__eyebrow--gold { color: var(--tf-accent); }
.tf-hero__eyebrow--gold::before { background: var(--tf-accent); }
.tf-hero__title--bold   { font-weight: 800; }
.tf-hero__desc--light   { color: rgba(255,255,255,.85); }
.tf-hero__scroll-text   { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.7); margin-bottom: .4rem; }

/* Glass-style search bar */
.tf-hero__search-bar--glass { background: rgba(255,255,255,.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.2); }
.tf-hero__select--glass,
.tf-hero__input--glass  { background: transparent; color: #fff; }
.tf-hero__select--glass option { color: #1a202c; background: #fff; }
.tf-hero__input--glass::placeholder { color: rgba(255,255,255,.6); }
.tf-hero__search-divider--glass { background: rgba(255,255,255,.2); }
.tf-hero__search-btn--gold { background: var(--tf-accent); color: #fff; }
.tf-hero__search-btn--gold:hover { background: #d4922e; }
.tf-hero__pills--glass .tf-cat-pill { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.08); }
.tf-hero__pills--glass .tf-cat-pill:hover { background: rgba(255,255,255,.18); }
.tf-cat-pill--outline { border: 1px solid rgba(255,255,255,.4); color: #fff; background: transparent; }
.tf-cat-pill--outline:hover { background: rgba(255,255,255,.15); }

/* ── Tour Card System ───────────────────────────────────────────────────── */
.tf-tour-card {
  background: var(--tf-card-bg);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--tf-transition), box-shadow var(--tf-transition);
}
.tf-tour-card:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow-lg); }

.tf-tour-card__img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  flex-shrink: 0;
}
.tf-tour-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.tf-tour-card:hover .tf-tour-card__img img { transform: scale(1.06); }

.tf-tour-card__price-badge {
  position: absolute;
  bottom: .75rem; left: .75rem;
  background: var(--tf-primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  padding: .3rem .75rem;
  border-radius: 20px;
  z-index: 2;
}
.tf-tour-card__price-badge del { opacity: .7; margin-left: .3rem; }

.tf-tour-card__category {
  position: absolute;
  top: .75rem; right: .75rem;
  background: rgba(37,150,190,.9);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: 6px;
  z-index: 2;
}

.tf-tour-card__wishlist {
  position: absolute;
  top: .75rem; left: .75rem;
  width: 34px; height: 34px;
  background: rgba(255,255,255,.9);
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background var(--tf-transition);
  color: #e74c3c;
}
.tf-tour-card__wishlist:hover { background: #e74c3c; color: #fff; }

.tf-tour-card__featured-badge {
  position: absolute;
  top: .75rem; right: .75rem;
  background: var(--tf-accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 6px;
  z-index: 2;
}

.tf-tour-card__body { padding: 1.1rem 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.tf-tour-card__location { font-size: .8rem; color: var(--tf-muted); display: flex; align-items: center; gap: .4rem; }
.tf-tour-card__location i { color: var(--tf-primary); }
.tf-tour-card__title { font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.4; flex: 1; }
.tf-tour-card__title a { color: var(--tf-text); }
.tf-tour-card__title a:hover { color: var(--tf-primary); text-decoration: none; }
.tf-tour-card__meta { display: flex; gap: 1rem; flex-wrap: wrap; }
.tf-tour-card__meta-item { font-size: .8rem; color: var(--tf-muted); display: flex; align-items: center; gap: .3rem; }
.tf-tour-card__meta-item i { color: var(--tf-primary); }
.tf-tour-card__rating { display: flex; align-items: center; gap: .3rem; font-size: .8rem; }
.tf-tour-card__rating .fas { color: var(--tf-accent); }
.tf-tour-card__review-count { color: var(--tf-muted); font-size: .78rem; }
.tf-tour-card__footer { padding: .75rem 1.25rem 1.1rem; border-top: 1px solid var(--tf-border); }

/* Large card variant */
.tf-tour-card--large .tf-tour-card__img { aspect-ratio: 3/2; }
.tf-tour-card--large .tf-tour-card__title { font-size: 1.15rem; }

/* ── Tour Masonry Layout ────────────────────────────────────────────────── */
.tf-tour-masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.tf-tour-masonry__featured { grid-row: span 2; }
.tf-tour-masonry__featured .tf-tour-card__img { aspect-ratio: unset; height: 100%; min-height: 420px; }
.tf-tour-masonry__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.tf-tour-masonry__grid .tf-tour-card__img { aspect-ratio: 16/9; }
.d-md-grid { display: grid !important; }
@media (max-width: 767px) {
  .tf-tour-masonry { grid-template-columns: 1fr; }
  .tf-tour-masonry__featured { grid-row: unset; }
  .d-md-grid { display: none !important; }
}
.tf-stagger > *:nth-child(1) { --wow-delay: 0.1s; }
.tf-stagger > *:nth-child(2) { --wow-delay: 0.2s; }
.tf-stagger > *:nth-child(3) { --wow-delay: 0.3s; }

/* ── Testimonial Card Enhancements ──────────────────────────────────────── */
.tf-testi-card--dark {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--tf-radius);
  padding: 1.75rem;
  color: #fff;
}
.tf-testi-card__top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.tf-testi-card__stars { display: flex; gap: .25rem; }
.tf-testi-card__stars .fas { color: var(--tf-accent); font-size: .9rem; }
.tf-testi-card__quote-right { font-size: 1.5rem; color: rgba(255,255,255,.2); }
.tf-testi-card__message { font-size: .95rem; line-height: 1.7; margin-bottom: 1.25rem; color: rgba(255,255,255,.85); }
.tf-testi-card__author { display: flex; align-items: center; gap: .85rem; }
.tf-testi-card__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--tf-primary); }
.tf-testi-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tf-testi-card__author-info h5 { font-size: .9rem; font-weight: 600; margin: 0 0 .15rem; }
.tf-testi-slider-three { padding-bottom: 2.5rem !important; }
.tf-testi-slider-three__pagination { bottom: 0 !important; }

/* ── Blog Card System ───────────────────────────────────────────────────── */
.tf-blog-card {
  background: var(--tf-card-bg);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--tf-transition), box-shadow var(--tf-transition);
}
.tf-blog-card:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow-lg); }

.tf-blog-card__img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.tf-blog-card__img a { display: block; height: 100%; }
.tf-blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tf-blog-card:hover .tf-blog-card__img img { transform: scale(1.06); }

.tf-blog-card__date-badge {
  position: absolute;
  bottom: .75rem; left: .75rem;
  background: var(--tf-primary);
  color: #fff;
  border-radius: var(--tf-radius-sm);
  padding: .4rem .6rem;
  text-align: center;
  min-width: 48px;
  z-index: 2;
  line-height: 1;
}
.tf-blog-card__date-day { display: block; font-size: 1.25rem; font-weight: 700; }
.tf-blog-card__date-month { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; }

.tf-blog-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.tf-blog-card__meta { display: flex; gap: 1rem; font-size: .78rem; color: var(--tf-muted); margin-bottom: .6rem; }
.tf-blog-card__meta i { color: var(--tf-primary); margin-right: .3rem; }
.tf-blog-card__title { font-size: 1rem; font-weight: 600; line-height: 1.45; margin: 0 0 .6rem; flex: 1; }
.tf-blog-card__title a { color: var(--tf-text); }
.tf-blog-card__title a:hover { color: var(--tf-primary); text-decoration: none; }
.tf-blog-card__excerpt { font-size: .88rem; color: var(--tf-muted); line-height: 1.65; margin-bottom: .85rem; }
.tf-blog-card__read-more { font-size: .85rem; font-weight: 600; color: var(--tf-primary); display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; }
.tf-blog-card__read-more:hover { color: var(--tf-primary-dk); text-decoration: none; gap: .6rem; }

/* ── Brand Strip ────────────────────────────────────────────────────────── */
.tf-brand-strip { padding: 2.5rem 0 0; }
.tf-brand-strip--bottom { margin-top: 3.5rem; padding: 2rem 0; border-top: 1px solid var(--tf-border); }
.tf-brand-strip__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tf-muted); margin-bottom: 1rem; }
.tf-news-brand-slider .tf-brand-logo img { filter: grayscale(100%); opacity: .55; transition: all .3s; }
.tf-news-brand-slider .tf-brand-logo:hover img { filter: none; opacity: 1; }

/* ── Video Section ──────────────────────────────────────────────────────── */
.tf-video__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.tf-video__overlay { position: absolute; inset: 0; background: rgba(9,19,31,.65); }
.tf-video__play-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 90px; height: 90px;
  margin-top: 2rem;
}
.tf-video__play-icon {
  width: 80px; height: 80px;
  background: var(--tf-primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 3;
  transition: transform var(--tf-transition), background var(--tf-transition);
}
.tf-video__play-icon .fas { color: #fff; font-size: 1.4rem; margin-left: 4px; }
.tf-video__play-btn:hover .tf-video__play-icon { background: var(--tf-primary-dk); transform: scale(1.1); }
.tf-video__play-ripple {
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(37,150,190,.4);
  border-radius: 50%;
  animation: tfVideoRipple 2s infinite ease-out;
  z-index: 2;
}
.tf-video__play-ripple--delay { animation-delay: .9s; }
@keyframes tfVideoRipple {
  0%   { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   APP SECTION — unique split layout with CSS phone mockup
   ═══════════════════════════════════════════════════════════════ */
.tr-app-section { padding: 80px 0; background: #f8f9fb; }
.tr-app-section__grid {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 64px;
    align-items: center;
}

/* ── Left: text ─────────────────────────────────────────────── */
.tr-app-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2596be;
    background: #e5f4fa;
    border-radius: 50px;
    padding: 5px 14px;
    margin-bottom: 20px;
}
.tr-app-section__eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    background: #2596be;
    border-radius: 50%;
    animation: tr-pulse 2s ease infinite;
}
@keyframes tr-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(.7); }
}
.tr-app-section__title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin: 0 0 18px;
}
.tr-app-section__title span { color: #2596be; }
.tr-app-section__desc {
    font-size: 15.5px;
    color: #4b5563;
    line-height: 1.75;
    margin: 0 0 32px;
    max-width: 500px;
}
.tr-app-section__features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 36px;
}
.tr-app-section__feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.tr-app-section__feature-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: #f0f9fd;
    border: 1px solid #b3dcea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.tr-app-section__feature-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}
.tr-app-section__feature-text span {
    font-size: 13.5px;
    color: #6b7280;
    line-height: 1.5;
}
.tr-app-section__stores {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.tr-app-section__store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #0f172a;
    color: #fff;
    border-radius: 12px;
    padding: 11px 22px;
    text-decoration: none;
    transition: background .2s, transform .15s;
    border: 1.5px solid transparent;
}
.tr-app-section__store-btn:hover {
    background: #1e293b;
    color: #fff;
    transform: translateY(-1px);
}
.tr-app-section__store-btn i { font-size: 1.5rem; }
.tr-app-section__store-btn div { display: flex; flex-direction: column; }
.tr-app-section__store-btn small { font-size: 10px; opacity: .7; line-height: 1.2; }
.tr-app-section__store-btn strong { font-size: 14px; line-height: 1.3; }
.tr-app-section__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #6b7280;
}
.tr-app-section__stars { color: #f59e0b; letter-spacing: 1px; }
.tr-app-section__rating strong { color: #111827; }

/* ── Right: visual card ─────────────────────────────────────── */
.tr-app-section__visual {
    position: relative;
    border-radius: 28px;
    overflow: visible;
}
.tr-app-visual-card {
    background: linear-gradient(145deg, #062233 0%, #0b3347 60%, #0f4460 100%);
    border-radius: 28px;
    padding: 40px 32px 0;
    position: relative;
    overflow: hidden;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Dot grid texture */
.tr-app-visual-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
/* Glow orb */
.tr-app-visual-card::after {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(34,197,94,.2) 0%, transparent 70%);
    pointer-events: none;
}
.tr-app-visual-card__label {
    position: relative;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 12px;
    align-self: flex-start;
}
.tr-app-visual-card__title {
    position: relative;
    z-index: 2;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 6px;
    align-self: flex-start;
}
.tr-app-visual-card__sub {
    position: relative;
    z-index: 2;
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin: 0 0 28px;
    align-self: flex-start;
    line-height: 1.5;
}

/* ── CSS Phone mockup ───────────────────────────────────────── */
.tr-css-phone {
    position: relative;
    z-index: 2;
    width: 188px;
    height: 360px;
    background: #fff;
    border-radius: 38px;
    border: 7px solid #1e1e1e;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 32px 64px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.15);
    overflow: hidden;
    flex-shrink: 0;
    animation: tr-phone-float 4s ease-in-out infinite;
}
@keyframes tr-phone-float {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
/* Notch */
.tr-css-phone__notch {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 72px; height: 22px;
    background: #1e1e1e;
    border-radius: 0 0 14px 14px;
    z-index: 5;
}
/* Screen content */
.tr-css-phone__screen {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8fafb;
    overflow: hidden;
}
/* Header bar */
.tr-css-phone__header {
    background: #0b3347;
    padding: 26px 12px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tr-css-phone__header-logo {
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .05em;
}
.tr-css-phone__header-icon {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 8px;
}
/* Hero card in phone */
.tr-css-phone__hero {
    background: linear-gradient(160deg, #c08040 0%, #7c4a18 100%);
    height: 92px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.tr-css-phone__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.45));
}
.tr-css-phone__hero-label {
    position: absolute;
    bottom: 8px; left: 10px;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.tr-css-phone__hero-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: #f59e0b;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 7px;
    font-weight: 800;
    color: #fff;
}
/* Mini tour cards */
.tr-css-phone__body { padding: 8px; flex: 1; overflow: hidden; }
.tr-css-phone__section-label {
    font-size: 7px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.tr-css-phone__card {
    display: flex;
    gap: 7px;
    background: #fff;
    border-radius: 8px;
    padding: 7px;
    margin-bottom: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    align-items: center;
}
.tr-css-phone__card-img {
    width: 36px; height: 36px;
    border-radius: 6px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
}
.tr-css-phone__card-img--two { background: linear-gradient(135deg, #fb923c 0%, #dc2626 100%); }
.tr-css-phone__card-info { flex: 1; min-width: 0; }
.tr-css-phone__card-name {
    font-size: 7.5px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tr-css-phone__card-meta {
    font-size: 6.5px;
    color: #9ca3af;
    margin-top: 2px;
}
.tr-css-phone__card-price {
    font-size: 8px;
    font-weight: 800;
    color: #2596be;
    flex-shrink: 0;
}
/* Bottom nav */
.tr-css-phone__nav {
    background: #fff;
    border-top: 1px solid #f0f0f0;
    display: flex;
    padding: 6px 0 4px;
    justify-content: space-around;
    flex-shrink: 0;
}
.tr-css-phone__nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 6px;
    color: #9ca3af;
}
.tr-css-phone__nav-item--active { color: #2596be; }
.tr-css-phone__nav-item i { font-size: 10px; }

/* ── Floating badges ────────────────────────────────────────── */
.tr-app-badge {
    position: absolute;
    z-index: 10;
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    animation: tr-badge-in .6s ease both;
}
@keyframes tr-badge-in {
    from { opacity: 0; transform: scale(.85) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.tr-app-badge--confirm {
    top: 24px; right: -28px;
    animation-delay: .4s;
}
.tr-app-badge--confirm i { color: #2596be; font-size: 16px; }
.tr-app-badge--rating {
    bottom: 100px; right: -28px;
    animation-delay: .7s;
}
.tr-app-badge--rating .tr-app-badge__stars { color: #f59e0b; letter-spacing: 1px; font-size: 11px; }
.tr-app-badge__meta { display: flex; flex-direction: column; line-height: 1.3; }
.tr-app-badge__meta small { font-size: 10px; color: #6b7280; font-weight: 400; }

/* phone flush at bottom of card */
.tr-app-visual-card__phone-wrap {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .tr-app-section__grid { grid-template-columns: 1fr 400px; gap: 48px; }
    .tr-app-badge--confirm { right: -16px; }
    .tr-app-badge--rating  { right: -16px; }
}
@media (max-width: 900px) {
    .tr-app-section__grid { grid-template-columns: 1fr; }
    .tr-app-section__visual { max-width: 460px; margin: 0 auto; }
    .tr-app-badge--confirm { right: 0; }
    .tr-app-badge--rating  { right: 0; }
    .tr-app-section__title { font-size: 1.9rem; }
}
@media (max-width: 480px) {
    .tr-app-section__stores { flex-direction: column; }
    .tr-app-section__title { font-size: 1.5rem; }
    .tr-app-badge { display: none; }
}
@keyframes floatBobY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float-bob-y { animation: floatBobY 4s ease-in-out infinite; }

/* ── Dark-mode adjustments for new components ───────────────────────────── */
[data-theme="dark"] .tf-tour-card { box-shadow: 0 1px 3px rgba(0,0,0,.5); }
[data-theme="dark"] .tf-blog-card { box-shadow: 0 1px 3px rgba(0,0,0,.5); }
[data-theme="dark"] .tf-brand-strip--bottom { border-top-color: var(--tf-border); }

/* ==========================================================================
   PATCH 2 — Complete Header / Nav / Mobile Menu CSS
   ========================================================================== */

/* ── Body offset for fixed header ───────────────────────────────────────── */
body { padding-top: 76px; }
.tf-hero, .tf-hero--full, .tf-hero--luxury { margin-top: -76px; }

/* ── Header bar ─────────────────────────────────────────────────────────── */
.tf-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: transparent;
  transition: background .28s ease, box-shadow .28s ease;
}
.tf-header--scrolled,
.tf-header--solid {
  background: var(--tf-card-bg);
  box-shadow: 0 1px 8px rgba(0,0,0,.09);
}
[data-theme="dark"] .tf-header--scrolled,
[data-theme="dark"] .tf-header--solid { box-shadow: 0 1px 8px rgba(0,0,0,.4); }

.tf-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 clamp(.75rem, 2vw, 2.5rem);
  max-width: 1440px;
  margin: 0 auto;
  gap: 1.5rem;
}

/* ── Logo ───────────────────────────────────────────────────────────────── */
.tf-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
/* Override global img { height: auto } */
.tf-logo__img { height: 44px !important; width: auto !important; display: block; }
.tf-logo__img--light { display: block; }
.tf-logo__img--dark  { display: none; }
.tf-header--scrolled .tf-logo__img--light,
.tf-header--solid    .tf-logo__img--light { display: none; }
.tf-header--scrolled .tf-logo__img--dark,
.tf-header--solid    .tf-logo__img--dark  { display: block; }
[data-theme="dark"] .tf-logo__img--light { display: block; }
[data-theme="dark"] .tf-logo__img--dark  { display: none; }

/* ── Desktop nav ────────────────────────────────────────────────────────── */
.tf-nav { flex: 1; display: flex; align-items: center; justify-content: center; }
.tf-nav__links {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: .15rem;
}
.tf-nav__item { position: relative; }
.tf-nav__link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .9rem;
  font-size: .9rem; font-weight: 500;
  color: rgba(255,255,255,.92);
  border-radius: var(--tf-radius-sm);
  background: transparent; border: none; cursor: pointer;
  text-decoration: none;
  transition: color var(--tf-transition), background var(--tf-transition);
  white-space: nowrap;
}
.tf-nav__link:hover,
.tf-nav__link--active { color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }
.tf-header--scrolled .tf-nav__link,
.tf-header--solid    .tf-nav__link { color: var(--tf-text); }
.tf-header--scrolled .tf-nav__link:hover,
.tf-header--solid    .tf-nav__link:hover,
.tf-header--scrolled .tf-nav__link--active,
.tf-header--solid    .tf-nav__link--active { color: var(--tf-primary); background: rgba(37,150,190,.07); }
.tf-nav__caret { font-size: .65rem; transition: transform .2s; }
.tf-nav__item--has-dropdown:hover .tf-nav__caret,
.tf-nav__link--btn[aria-expanded="true"] .tf-nav__caret { transform: rotate(180deg); }

/* Mega dropdown */
.tf-nav__mega-dropdown {
  position: absolute;
  top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  min-width: 520px;
  background: var(--tf-card-bg);
  border-radius: var(--tf-radius);
  box-shadow: 0 8px 40px rgba(0,0,0,.14);
  border: 1px solid var(--tf-border);
  display: none; z-index: 500;
  padding: .6rem;
  animation: tfDropIn .18s ease;
}
.tf-nav__mega-dropdown--open { display: block; }
@keyframes tfDropIn { from { opacity:0; transform: translateX(-50%) translateY(-6px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
.tf-nav__mega-inner { display: flex; flex-direction: column; gap: .15rem; }
.tf-nav__mega-all { padding-bottom: .5rem; border-bottom: 1px solid var(--tf-border); margin-bottom: .4rem; }
.tf-nav__mega-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .05rem; }
.tf-nav__mega-link {
  display: flex; align-items: center; gap: .5rem;
  padding: .38rem .55rem;
  font-size: .84rem; color: var(--tf-text);
  border-radius: var(--tf-radius-sm);
  transition: background var(--tf-transition), color var(--tf-transition);
  text-decoration: none;
  white-space: nowrap;
}
.tf-nav__mega-link:hover { background: rgba(37,150,190,.07); color: var(--tf-primary); text-decoration: none; }
.tf-nav__mega-link--all { font-weight: 600; color: var(--tf-primary); }
.tf-nav__mega-icon { color: var(--tf-primary); font-size: .75rem; flex-shrink: 0; }

/* ── Header actions ─────────────────────────────────────────────────────── */
.tf-header__actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }

.tf-header__action-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  border-radius: 50%; font-size: 1rem; color: rgba(255,255,255,.9);
  position: relative; text-decoration: none;
  transition: background var(--tf-transition), color var(--tf-transition);
}
.tf-header__action-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.tf-header--scrolled .tf-header__action-btn,
.tf-header--solid    .tf-header__action-btn { color: var(--tf-text); }
.tf-header--scrolled .tf-header__action-btn:hover,
.tf-header--solid    .tf-header__action-btn:hover { background: var(--tf-bg); }

.tf-header__notif-badge {
  position: absolute; top: 5px; right: 5px;
  background: #e74c3c; color: #fff;
  font-size: .58rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
  pointer-events: none;
}

/* Notification dropdown */
.tf-header__notif-dropdown { border-radius: var(--tf-radius) !important; }
.tf-header__notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid var(--tf-border); font-weight: 600;
}
.tf-header__notif-viewall { font-size: .78rem; color: var(--tf-primary); }
.tf-header__notif-body { padding: .75rem 1rem; }
.tf-header__notif-count { font-size: .85rem; color: var(--tf-muted); }
.tf-header__notif-empty { text-align: center; padding: 1.25rem 0; color: var(--tf-muted); }
.tf-header__notif-empty i { font-size: 1.6rem; margin-bottom: .4rem; display: block; opacity: .5; }
.tf-header__notif-empty p { margin: 0; font-size: .82rem; }

/* User button & dropdown */
.tf-header__user-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  border: none; background: transparent; cursor: pointer;
  padding: .3rem .5rem; border-radius: 30px;
  transition: background var(--tf-transition);
}
.tf-header__user-btn:hover { background: rgba(255,255,255,.15); }
.tf-header--scrolled .tf-header__user-btn:hover,
.tf-header--solid    .tf-header__user-btn:hover { background: var(--tf-bg); }
.tf-header__user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.3); }
.tf-header__user-name { font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.9); }
.tf-header--scrolled .tf-header__user-name,
.tf-header--solid    .tf-header__user-name { color: var(--tf-text); }
.tf-header__user-caret { font-size: .65rem; color: rgba(255,255,255,.6); }
.tf-header--scrolled .tf-header__user-caret,
.tf-header--solid    .tf-header__user-caret { color: var(--tf-muted); }

.tf-header__user-dropdown { border-radius: var(--tf-radius) !important; }
.tf-header__user-info { display: flex; align-items: center; gap: .7rem; padding: 1rem 1rem .75rem; }
.tf-header__user-info-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tf-header__user-info-name  { font-size: .88rem; font-weight: 600; color: var(--tf-text); margin: 0 0 .1rem; }
.tf-header__user-info-email { font-size: .75rem; color: var(--tf-muted); }

/* Login / Register buttons in header */
.tf-header__login-btn {
  display: inline-flex; align-items: center;
  padding: .38rem .95rem; font-size: .86rem; font-weight: 500;
  color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--tf-radius-sm);
  transition: background var(--tf-transition), color var(--tf-transition);
  text-decoration: none;
}
.tf-header__login-btn:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.tf-header--scrolled .tf-header__login-btn,
.tf-header--solid    .tf-header__login-btn { color: var(--tf-text); border-color: var(--tf-border); }
.tf-header--scrolled .tf-header__login-btn:hover,
.tf-header--solid    .tf-header__login-btn:hover { background: var(--tf-bg); }

.tf-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem 1.1rem; font-size: .86rem; font-weight: 600;
  border-radius: var(--tf-radius-sm); border: none; cursor: pointer;
  transition: all var(--tf-transition); text-decoration: none;
}
.tf-btn--primary { background: var(--tf-primary); color: #fff; }
.tf-btn--primary:hover { background: var(--tf-primary-dk); color: #fff; text-decoration: none; }
.tf-btn--outline { background: transparent; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.35); }
.tf-btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.tf-btn.w-100 { justify-content: center; }

/* ── Mobile overlay & drawer ────────────────────────────────────────────── */
.tf-mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.52);
  z-index: 1099;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.tf-mobile-overlay--visible { opacity: 1; pointer-events: auto; }

.tf-mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 92vw);
  background: #fff;
  z-index: 1100;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-shadow: -8px 0 48px rgba(0,0,0,.22);
}
.tf-mobile-menu--open { transform: translateX(0); }

/* Header */
.tf-mobile-menu__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(135deg, #062233 0%, #1a6fa3 100%);
  flex-shrink: 0;
}
.tf-mobile-menu__logo img { height: 36px !important; width: auto !important; }
.tf-mobile-menu__close {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: rgba(255,255,255,.15); border-radius: 10px;
  font-size: .95rem; color: #fff; cursor: pointer;
  transition: background .18s;
}
.tf-mobile-menu__close:hover { background: rgba(255,255,255,.28); }

/* Nav body */
.tf-mobile-menu__nav { padding: 1rem 1rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0; overflow-y: auto; }

/* Section label */
.tf-mmenu-label {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #94a3b8; padding: .6rem .5rem .3rem; margin: 0;
}

/* List */
.tf-mobile-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }

/* Link row */
.tf-mobile-menu__link {
  display: flex; align-items: center; gap: 12px;
  padding: .6rem .7rem; border-radius: 12px;
  font-size: .92rem; font-weight: 600; color: #1e293b;
  text-decoration: none; width: 100%;
  transition: background .18s, color .18s;
  position: relative;
}
.tf-mobile-menu__link:hover,
.tf-mobile-menu__link.active {
  background: #f0f9fd; color: #2596be; text-decoration: none;
}
.tf-mmenu-chevron {
  font-size: 9px; color: #cbd5e1; margin-left: auto; flex-shrink: 0;
  transition: color .18s, transform .18s;
  line-height: 1;
}
.tf-mobile-menu__link:hover .tf-mmenu-chevron,
.tf-mobile-menu__link.active .tf-mmenu-chevron { color: #2596be; transform: translateX(2px); }
.tf-mobile-menu__link--danger .tf-mmenu-chevron { display: none; }

.tf-mmenu-text { flex: 1; }

/* Icon badge */
.tf-mmenu-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: transform .2s;
}
.tf-mobile-menu__link:hover .tf-mmenu-icon,
.tf-mobile-menu__link.active .tf-mmenu-icon { transform: scale(1.1); }

/* Icon colours */
.tf-mmenu-icon--home { background: #eff9ff; color: #2596be; }
.tf-mmenu-icon--exp  { background: #fff7ed; color: #f97316; }
.tf-mmenu-icon--dest { background: #f0fdf4; color: #16a34a; }
.tf-mmenu-icon--tr   { background: #faf5ff; color: #9333ea; }
.tf-mmenu-icon--ct   { background: #f0fdfa; color: #0d9488; }
.tf-mmenu-icon--dash { background: #eff6ff; color: #3b82f6; }
.tf-mmenu-icon--prof { background: #f8fafc; color: #64748b; }
.tf-mmenu-icon--out  { background: #fef2f2; color: #ef4444; }
.tf-mmenu-icon--lang { background: #f8fafc; color: #64748b; }

/* Danger link */
.tf-mobile-menu__link--danger { color: #ef4444; }
.tf-mobile-menu__link--danger:hover { background: #fef2f2; color: #dc2626; }
.tf-mobile-menu__link--danger::after { display: none; }

/* Divider */
.tf-mobile-menu__divider { border: none; border-top: 1px solid #f1f5f9; margin: .65rem 0; }

/* Auth buttons */
.tf-mobile-menu__auth { display: flex; flex-direction: column; gap: 8px; padding: .4rem 0; }
.tf-mmenu-auth-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; border-radius: 12px; font-size: .9rem; font-weight: 700;
  text-decoration: none; transition: opacity .18s, transform .15s;
}
.tf-mmenu-auth-btn:hover { opacity: .9; transform: translateY(-1px); }
.tf-mmenu-auth-btn--outline {
  border: 2px solid #2596be; color: #2596be; background: transparent;
}
.tf-mmenu-auth-btn--solid {
  background: linear-gradient(135deg, #2596be 0%, #1a7ea3 100%);
  color: #fff; border: none;
  box-shadow: 0 4px 14px rgba(37,150,190,.28);
}

/* Language link */
.tf-mmenu-lang { opacity: .7; }
.tf-mmenu-lang::after { display: none; }

/* ── Burger icon ────────────────────────────────────────────────────────── */
.tf-burger {
  width: 42px; height: 42px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: none; background: rgba(255,255,255,.1); border-radius: 50%;
  cursor: pointer; transition: background var(--tf-transition);
}
.tf-burger:hover { background: rgba(255,255,255,.2); }
.tf-header--scrolled .tf-burger,
.tf-header--solid    .tf-burger { background: var(--tf-bg); }
.tf-burger__bar {
  display: block; width: 20px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: background var(--tf-transition);
}
.tf-header--scrolled .tf-burger__bar,
.tf-header--solid    .tf-burger__bar { background: var(--tf-text); }

/* ===== TOURRADAR-INSPIRED COMPONENT CSS ===== */

/* Trust bar */
.tr-trust-bar {
  background: #f5f5f5;
  border-bottom: 1px solid #e8e8e8;
  font-size: .78rem;
  color: #555;
  padding: 8px 0;
  z-index: 1000;
  position: relative;
}
.tr-trust-bar__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
}
.tr-trust-bar__item {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .1rem .9rem;
  white-space: nowrap;
}
.tr-trust-bar__item i { color: #0073bb; font-size: .8rem; }
.tr-trust-bar__sep {
  display: inline-block; width: 1px; height: 14px;
  background: #ccc; flex-shrink: 0;
}

/* Body with trust bar: total top offset = trust bar (~36px) + header (76px) */
body.tr-page-body { padding-top: 112px !important; }
body.tr-page-body .tf-hero,
body.tr-page-body .tf-hero--full,
body.tr-page-body .tf-hero--luxury,
body.tr-page-body .tr-hero { margin-top: -112px !important; }

/* Header overrides for always-white */
.tf-header { background: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.08) !important; top: 36px !important; }
.tf-nav__link { color: #1a1a1a !important; }
.tf-nav__link:hover, .tf-nav__link--active { color: #0073bb !important; background: rgba(0,115,187,.06) !important; }
.tf-logo__img--light { display: none !important; }
.tf-logo__img--dark  { display: block !important; }
.tf-header__action-btn { color: #333 !important; }
.tf-header__action-btn:hover { background: #f5f5f5 !important; color: #0073bb !important; }
.tf-header__login-btn { color: #1a1a1a !important; border-color: #ddd !important; }
.tf-header__login-btn:hover { background: #f5f5f5 !important; }
.tf-btn--outline { color: #1a1a1a !important; border-color: #ddd !important; }
.tf-btn--outline:hover { background: #f5f5f5 !important; }
.tf-burger__bar { background: #333 !important; }
.tf-burger { background: #f5f5f5 !important; }

/* ── TourRadar Hero ── */
.tr-hero { padding: 1rem 0 0; background: #fff; }
.tr-hero__card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 420px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.tr-hero__swiper { position: absolute; inset: 0; }
.tr-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.tr-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.6) 100%);
  z-index: 1;
}
.tr-hero__heading {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
  text-align: center; z-index: 2; width: 90%;
}
.tr-hero__title {
  font-size: 3rem; font-weight: 800; color: #fff;
  line-height: 1.15; margin: 0 0 .5rem; font-family: var(--tf-font-head);
}
.tr-hero__subtitle { font-size: 1rem; color: rgba(255,255,255,.88); margin: 0; }

.tr-hero__search-wrap {
  position: relative; z-index: 3;
  padding: 0 1.5rem 1.5rem;
}
.tr-hero__trust {
  text-align: center; color: rgba(255,255,255,.85);
  font-size: .82rem; margin: .75rem 0 0;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
}

/* Search bar (pill style) */
.tr-search-bar {
  display: flex; align-items: center;
  background: #fff;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0,0,0,.22);
  overflow: hidden;
  height: 58px;
}
.tr-search-bar__field {
  flex: 1; display: flex; align-items: center; gap: .5rem;
  padding: 0 1.25rem; min-width: 0;
}
.tr-search-bar__icon { color: #888; font-size: .9rem; flex-shrink: 0; }
.tr-search-bar__select,
.tr-search-bar__input {
  border: none; outline: none; background: transparent;
  font-size: .9rem; color: #333; width: 100%; cursor: pointer;
  font-family: var(--tf-font-body);
}
.tr-search-bar__select { appearance: none; -webkit-appearance: none; }
.tr-search-bar__divider { width: 1px; height: 28px; background: #e0e0e0; flex-shrink: 0; }
.tr-search-bar__btn {
  display: flex; align-items: center; gap: .5rem;
  height: 100%; padding: 0 1.75rem;
  background: #0073bb; color: #fff; border: none;
  font-size: .92rem; font-weight: 600; cursor: pointer;
  border-radius: 0 50px 50px 0;
  transition: background .2s;
  white-space: nowrap; flex-shrink: 0;
}
.tr-search-bar__btn:hover { background: #005d99; }
@media (max-width: 767px) {
  .tr-hero__card { height: 300px; border-radius: 12px; }
  .tr-hero__title { font-size: 1.75rem; }
  .tr-search-bar { flex-wrap: wrap; border-radius: 12px; height: auto; }
  .tr-search-bar__field { padding: .75rem 1rem; flex: 0 0 100%; border-bottom: 1px solid #eee; }
  .tr-search-bar__divider { display: none; }
  .tr-search-bar__btn { width: 100%; border-radius: 0 0 12px 12px; justify-content: center; padding: .85rem; }
}

/* ── Tours section ── */
.tr-tours-section { padding: 2.5rem 0; background: #fff; }
.tr-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.tr-section-header__title { font-size: 1.4rem; font-weight: 700; margin: 0; color: #1a1a1a; }
.tr-section-header__link { font-size: .88rem; color: #0073bb; font-weight: 500; text-decoration: none; }
.tr-section-header__link:hover { text-decoration: underline; }

/* Filter tabs */
.tr-filter-tabs {
  display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.5rem;
  scrollbar-width: none;
}
.tr-filter-tabs::-webkit-scrollbar { display: none; }
.tr-filter-tab {
  display: inline-flex; align-items: center;
  padding: .4rem 1rem; border-radius: 24px;
  font-size: .84rem; font-weight: 500;
  border: 1.5px solid #ddd; background: #fff; color: #333;
  cursor: pointer; white-space: nowrap;
  transition: all .18s; text-decoration: none; flex-shrink: 0;
}
.tr-filter-tab:hover { border-color: #1a1a1a; color: #1a1a1a; text-decoration: none; }
.tr-filter-tab--active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

/* 5-column grid */
.col-xl-2-4 { flex: 0 0 20%; max-width: 20%; }
@media (max-width: 1199px) { .col-xl-2-4 { flex: 0 0 25%; max-width: 25%; } }
@media (max-width: 991px)  { .col-xl-2-4 { flex: 0 0 33.333%; max-width: 33.333%; } }
@media (max-width: 767px)  { .col-xl-2-4 { flex: 0 0 50%; max-width: 50%; } }
@media (max-width: 480px)  { .col-xl-2-4 { flex: 0 0 100%; max-width: 100%; } }

/* TourRadar-style tour card */
.tr-tour-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ebebeb;
  display: flex; flex-direction: column;
  height: 100%;
  transition: box-shadow .2s, transform .2s;
  cursor: pointer;
}
.tr-tour-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); transform: translateY(-2px); }
.tr-tour-card__img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f0f0f0;
}
.tr-tour-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.tr-tour-card:hover .tr-tour-card__img img { transform: scale(1.05); }
.tr-tour-card__discount {
  position: absolute; top: .6rem; left: .6rem;
  background: #e8292b; color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: .25rem .6rem; border-radius: 24px; z-index: 2;
  letter-spacing: .01em;
}
.tr-tour-card__wish {
  position: absolute; top: .6rem; right: .6rem;
  width: 30px; height: 30px;
  background: rgba(255,255,255,.9); border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: #888; cursor: pointer; z-index: 2;
  transition: all .18s;
}
.tr-tour-card__wish:hover { background: #fff; color: #e74c3c; }
.tr-tour-card__body { padding: .85rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.tr-tour-card__title { font-size: .88rem; font-weight: 600; color: #1a1a1a; line-height: 1.4; margin: 0; flex: 1; }
.tr-tour-card__title a { color: inherit; text-decoration: none; }
.tr-tour-card__title a:hover { color: #0073bb; }
.tr-tour-card__meta { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: #666; flex-wrap: wrap; }
.tr-tour-card__rating { display: flex; align-items: center; gap: .2rem; color: #1a1a1a; font-weight: 600; }
.tr-tour-card__rating .fas { color: #f5a623; font-size: .75rem; }
.tr-tour-card__review-ct { color: #888; font-weight: 400; }
.tr-tour-card__price { font-size: .88rem; color: #1a1a1a; font-weight: 600; margin-top: auto; }

/* =====================================================
   TOURRADAR REDESIGN - FULL HOMEPAGE v2
   ===================================================== */

/* --- Full-screen Hero --- */
body.tr-page-body { padding-top: 112px !important; }
.tr-hero-fs {
    position: relative;
    width: 100%;
    min-height: 600px;
    height: calc(100vh - 112px);
    max-height: 820px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: -112px;       /* pull up under the trust bar + header */
    padding-top: 112px;       /* offset the content so it's truly centered visually */
}
.tr-hero-fs .tr-hero-fs__swiper {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.tr-hero-fs .tr-hero-fs__bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.tr-hero-fs__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.58) 100%);
}
.tr-hero-fs__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
    max-width: 800px;
    width: 100%;
    margin-bottom: 40px;
}
.tr-hero-fs__title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.tr-hero-fs__subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}
.tr-hero-fs__search-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 880px;
    padding: 0 20px;
}
.tr-hero-fs__trust {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.tr-hero-fs__trust i { color: #f59e0b; }

/* Search bar inside full-screen hero */
.tr-hero-fs .tr-search-bar {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 4px 28px rgba(0,0,0,0.3);
    overflow: hidden;
    height: 60px;
    padding: 0 6px;
    gap: 0;
}
.tr-hero-fs .tr-search-bar__field {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 16px;
    gap: 8px;
    min-width: 0;
}
.tr-hero-fs .tr-search-bar__icon { color: #6b7280; font-size: 14px; flex-shrink: 0; }
.tr-hero-fs .tr-search-bar__select,
.tr-hero-fs .tr-search-bar__input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #111;
    width: 100%;
    cursor: pointer;
}
.tr-hero-fs .tr-search-bar__divider { width: 1px; height: 28px; background: #e5e7eb; flex-shrink: 0; }
.tr-hero-fs .tr-search-bar__btn {
    background: #2596be;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 0 28px;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    transition: background .2s;
}
.tr-hero-fs .tr-search-bar__btn:hover { background: #1f7fa3; }
@media (max-width: 767px) {
    .tr-hero-fs__title { font-size: 2rem; }
    .tr-hero-fs .tr-search-bar { flex-direction: column; height: auto; border-radius: 16px; padding: 12px; gap: 8px; }
    .tr-hero-fs .tr-search-bar__field { width: 100%; border-bottom: 1px solid #e5e7eb; padding: 8px 12px; }
    .tr-hero-fs .tr-search-bar__divider { display: none; }
    .tr-hero-fs .tr-search-bar__btn { width: 100%; border-radius: 12px; justify-content: center; margin-top: 4px; }
}
@media (max-width: 480px) {
    .tr-hero-fs { min-height: 500px; max-height: 680px; }
    .tr-hero-fs__title { font-size: 1.7rem; }
}

/* --- Deals of the Week banner (video section repurposed) --- */
/* ── Deals of the Week card ──────────────────────────────── */
.tr-deals-week {
    padding: 40px 0;
    background: #f7f8fa;
}
.tr-deals-week__card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    min-height: 200px;
}
.tr-deals-week__left {
    flex: 1 1 0;
    padding: 36px 40px;
}
.tr-deals-week__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 12px;
    line-height: 1.3;
}
.tr-deals-week__subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px;
}
.tr-deals-week__desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px;
    line-height: 1.6;
    max-width: 480px;
}
.tr-deals-week__btn {
    display: inline-block;
    background: #1f7fa3;
    color: #fff;
    border-radius: 8px;
    padding: 11px 26px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.tr-deals-week__btn:hover { background: #196886; color: #fff; }
.tr-deals-week__right {
    flex: 0 0 420px;
    align-self: stretch;
    overflow: hidden;
}
.tr-deals-week__img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
}
@media (max-width: 900px) {
    .tr-deals-week__card { flex-direction: column; }
    .tr-deals-week__right { flex: 0 0 auto; width: 100%; height: 220px; }
    .tr-deals-week__left { padding: 28px 24px; }
    .tr-deals-week__title { font-size: 1.25rem; }
}

/* --- Section header shared style --- */
.tr-section-header { margin-bottom: 32px; }
.tr-section-header__title { font-size: 1.75rem; font-weight: 800; color: #111; margin: 0; }

/* --- Popular Destinations section --- */
.tr-destinations-section { padding: 64px 0; }
.tr-dest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 768px) { .tr-dest-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .tr-dest-grid { grid-template-columns: repeat(4, 1fr); } }
.tr-dest-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; background: #fff; }
.tr-dest-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tr-dest-card__region { font-size: 15px; font-weight: 700; color: #111; margin: 0; }
.tr-dest-card__see-all { font-size: 12px; color: #2596be; text-decoration: none; white-space: nowrap; }
.tr-dest-card__see-all:hover { text-decoration: underline; }
.tr-dest-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tr-dest-card__list li { flex: 0 0 calc(50% - 6px); }
.tr-dest-card__list a { font-size: 13px; color: #374151; text-decoration: none; }
.tr-dest-card__list a:hover { color: #2596be; text-decoration: underline; }

/* --- Travel Types section --- */
.tr-travel-types { padding: 64px 0; background: #f9fafb; }
.tr-type-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; text-decoration: none; color: #111; transition: all .2s; text-align: center; }
.tr-type-card:hover { border-color: #2596be; color: #2596be; box-shadow: 0 4px 16px rgba(37,150,190,.15); transform: translateY(-2px); }
.tr-type-card__icon { font-size: 28px; color: #2596be; }
.tr-type-card__label { font-size: 14px; font-weight: 600; }

/* --- Travel Categories section --- */
.tr-categories-section { padding: 64px 0; }
.tr-cat-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.tr-cat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 1px solid #e5e7eb; border-radius: 50px; font-size: 13px; color: #374151; text-decoration: none; background: #fff; transition: all .2s; }
.tr-cat-pill:hover { border-color: #2596be; color: #2596be; background: #e5f4fa; }
.tr-cat-pill__count { background: #f3f4f6; border-radius: 50px; padding: 2px 8px; font-size: 11px; color: #6b7280; }
.tr-style-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; text-decoration: none; color: #374151; font-size: 13px; font-weight: 600; text-align: center; transition: all .2s; }
.tr-style-card:hover { border-color: #2596be; color: #2596be; box-shadow: 0 4px 16px rgba(37,150,190,.12); }
.tr-style-card__icon { font-size: 26px; color: #2596be; }

/* --- Newsletter section --- */
.tr-newsletter { padding: 60px 0; background: #1e3a5f; }
.tr-newsletter__title { font-size: 1.9rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.tr-newsletter__sub { color: rgba(255,255,255,.75); font-size: 15px; margin: 0; }
.tr-newsletter__form { display: flex; gap: 0; border-radius: 8px; overflow: hidden; max-width: 500px; }
.tr-newsletter__input { flex: 1; border: none; padding: 14px 18px; font-size: 14px; outline: none; }
.tr-newsletter__btn { background: #f59e0b; color: #111; border: none; padding: 14px 24px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s; white-space: nowrap; }
.tr-newsletter__btn:hover { background: #d97706; }
.tr-newsletter__note { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 10px; }
.tr-newsletter__note a { color: rgba(255,255,255,.75); }
@media (max-width: 575px) {
    .tr-newsletter__form { flex-direction: column; }
    .tr-newsletter__btn { border-radius: 0 0 8px 8px; }
}
.tr-tour-card__old { color: #999; font-weight: 400; font-size: .8rem; margin-left: .3rem; }

/* =====================================================
   STICKY TRUST BAR + HEADER FIX
   ===================================================== */

/* Make the trust bar sticky at the very top */
.tr-trust-bar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    width: 100%;
}

/* Header sits below the 36px trust bar and stays sticky */
.tf-header {
    position: fixed !important;
    top: 36px !important;
    left: 0;
    right: 0;
    z-index: 1001;
}

/* Ensure body content starts below both bars (36px trust + 76px header = 112px) */
body.tr-page-body {
    padding-top: 112px !important;
}

/* Hero sections pull back up to fill full screen */
body.tr-page-body .tr-hero-fs {
    margin-top: -112px !important;
    padding-top: 112px;
}
body.tr-page-body .tr-hero,
body.tr-page-body .tf-hero,
body.tr-page-body .tf-hero--full {
    margin-top: -112px !important;
}

/* On mobile, trust bar height may be taller if items wrap — keep header below it */
@media (max-width: 767px) {
    .tf-header { top: 36px !important; }
}

/* =====================================================
   TOURRADAR-STYLE FOOTER  (.tr-footer)
   ===================================================== */

.tr-footer { background: #f2f2f2; font-size: 13.5px; color: #444; }

/* ── Trustpilot + Association bar ─────────────────── */
.tr-footer__trust-bar {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding: 18px 0;
}
.tr-footer__trust-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.tr-footer__google-reviews {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    transition: box-shadow .2s, border-color .2s;
}
.tr-footer__google-reviews:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    border-color: #c0d4e8;
}
.tr-footer__google-g {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.tr-footer__google-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tr-footer__excellent {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}
.tr-footer__stars { color: #fbbc05; font-size: 17px; display: flex; gap: 2px; }
.tr-footer__trust-sub { font-size: 13px; color: #555; }
.tr-footer__trust-sub strong { color: #111; }
.tr-footer__assoc-label { font-size: 11px; color: #777; font-weight: 700; white-space: nowrap; letter-spacing: .06em; text-transform: uppercase; }
/* Registration badges */
.tr-footer__reg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tr-footer__reg-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-footer__reg-flag {
    display: flex;
    align-items: center;
    gap: 7px;
}
.tr-footer__tz-flag {
    display: flex;
    width: 28px;
    height: 19px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tr-footer__tz-stripe { display: block; flex: 1; }
.tr-footer__tz-stripe--green  { background: #1EB53A; }
.tr-footer__tz-stripe--yellow { background: #FCD116; flex: 0 0 3px; }
.tr-footer__tz-stripe--black  { background: #000; }
.tr-footer__tz-stripe--blue   { background: #00A3DD; }
.tr-footer__reg-country { font-size: 12px; font-weight: 700; color: #222; }
.tr-footer__reg-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
}
.tr-footer__reg-icon { font-size: 15px; color: #1EB53A; flex-shrink: 0; }
.tr-footer__reg-info { display: flex; flex-direction: column; gap: 1px; }
.tr-footer__reg-name { font-size: 11px; font-weight: 800; color: #111; letter-spacing: .03em; line-height: 1.2; }
.tr-footer__reg-desc { font-size: 10px; color: #777; line-height: 1.2; white-space: nowrap; }

/* ── Main link columns ─────────────────────────────── */
.tr-footer__main { padding: 48px 0 36px; }
.tr-footer__cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
}
@media (min-width: 640px) {
    .tr-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .tr-footer__cols { grid-template-columns: repeat(4, 1fr); }
}
.tr-footer__col-title {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    text-transform: none;
    margin: 0 0 14px;
    letter-spacing: 0;
}
.tr-footer__col-subtitle {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin: 20px 0 10px;
}
.tr-footer__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.tr-footer__nav li a,
.tr-footer__nav li span {
    color: #555;
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.5;
    transition: color .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tr-footer__nav li a:hover { color: #111; text-decoration: underline; }
.tr-footer__contact-line {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #555;
    font-size: 13px;
}
.tr-footer__contact-line i { color: #777; margin-top: 2px; flex-shrink: 0; }
.tr-footer__contact-line a { color: #555; text-decoration: none; }
.tr-footer__contact-line a:hover { color: #111; }

/* badges */
.tr-footer__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    background: #2596be;
    color: #fff;
    line-height: 1.6;
    vertical-align: middle;
}
.tr-footer__badge--green { background: #00b67a; }

/* ── Bottom bar ────────────────────────────────────── */
.tr-footer__bottom-bar {
    border-top: 1px solid #ddd;
    padding: 28px 0;
    background: #f2f2f2;
}
.tr-footer__bottom-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 640px) {
    .tr-footer__bottom-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .tr-footer__bottom-grid { grid-template-columns: repeat(4, 1fr); }
}
.tr-footer__bottom-label {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    margin: 0 0 10px;
    text-transform: none;
}

/* Language pills */
.tr-footer__lang-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-footer__lang-pill {
    border: 1.5px solid #bbb;
    border-radius: 50px;
    background: transparent;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    cursor: pointer;
    transition: all .15s;
}
.tr-footer__lang-pill:hover { border-color: #888; color: #111; }
.tr-footer__lang-pill--active {
    background: #111;
    border-color: #111;
    color: #fff;
}

/* Social icons */
.tr-footer__socials { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-footer__social-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid #bbb;
    display: flex; align-items: center; justify-content: center;
    color: #555;
    font-size: 14px;
    text-decoration: none;
    transition: all .15s;
}
.tr-footer__social-btn:hover { border-color: #111; color: #111; background: rgba(0,0,0,.04); }

/* Payment icons */
.tr-footer__payments { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tr-footer__pay-icon { font-size: 28px; color: #444; }

/* App download buttons */
.tr-footer__apps { display: flex; flex-direction: column; gap: 8px; }
.tr-footer__app-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #111;
    color: #fff;
    border-radius: 8px;
    padding: 8px 16px;
    text-decoration: none;
    transition: background .15s;
    max-width: 160px;
}
.tr-footer__app-btn:hover { background: #333; color: #fff; }
.tr-footer__app-btn-icon { font-size: 22px; flex-shrink: 0; }
.tr-footer__app-btn small { display: block; font-size: 9px; opacity: .8; line-height: 1.2; }
.tr-footer__app-btn strong { display: block; font-size: 13px; line-height: 1.3; }

/* ── Copyright bar ─────────────────────────────────── */
.tr-footer__copyright-bar {
    border-top: 1px solid #ddd;
    background: #f2f2f2;
    padding: 16px 0;
}
.tr-footer__copyright-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.tr-footer__copyright-text { margin: 0; font-size: 13px; color: #666; }
.tr-footer__legal {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
}
.tr-footer__legal li { display: flex; align-items: center; }
.tr-footer__legal li + li::before {
    content: '•';
    margin: 0 8px;
    color: #aaa;
    font-size: 10px;
}
.tr-footer__legal a { color: #2596be; font-size: 13px; text-decoration: none; }
.tr-footer__legal a:hover { text-decoration: underline; }

@media (max-width: 639px) {
    .tr-footer__trust-inner { flex-direction: column; align-items: flex-start; }
    .tr-footer__copyright-inner { flex-direction: column; align-items: flex-start; }
    .tr-footer__apps { flex-direction: row; flex-wrap: wrap; }
}

/* =====================================================
   HERO FULL-SCREEN FIX
   ===================================================== */

/* Use full 100vh so padding-top doesn't shrink visible content */
.tr-hero-fs {
    height: 100vh !important;
    min-height: 560px !important;
    max-height: 900px !important;
    margin-top: -112px !important;
    padding-top: 112px !important;
    /* Swiper fade requires the container to be a stacking context */
    isolation: isolate;
}

/* Slides container fills the hero; individual slides handled below */

/* The background div inside each slide also needs full height */
.tr-hero-fs .tr-hero-fs__bg {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Overlay must sit above swiper (z-index 0) but below content (z-index 2) */
.tr-hero-fs .tr-hero-fs__overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none;
}

/* Content and search bar above overlay */
.tr-hero-fs .tr-hero-fs__content {
    position: relative !important;
    z-index: 3 !important;
}
.tr-hero-fs .tr-hero-fs__search-wrap {
    position: relative !important;
    z-index: 3 !important;
}

@media (max-width: 767px) {
    .tr-hero-fs {
        height: 100svh !important;
        max-height: 700px !important;
    }
}
@media (max-width: 480px) {
    .tr-hero-fs {
        min-height: 480px !important;
        max-height: 620px !important;
    }
}

/* =====================================================
   HERO ANIMATED SLIDES - TEXT, COUNTER, KEN BURNS
   ===================================================== */

/* ── Ken Burns zoom on each slide's background image ── */
@keyframes tr-kb-zoom {
    from { transform: scale(1.0);  }
    to   { transform: scale(1.10); }
}
/* Ken Burns is applied per-slide via .tr-hero-fs__slide--active .tr-hero-fs__bg below */

/* ── Location label badge ──────────────────────────── */
.tr-hero-fs__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.92);
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    padding: 5px 14px;
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(24px);
}
.tr-hero-fs__label::before {
    content: '';
    width: 6px; height: 6px;
    background: #f59e0b;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Title & subtitle: start hidden, animate in via JS ─ */
.tr-hero-fs__title,
.tr-hero-fs__subtitle {
    opacity: 0;
    transform: translateY(24px);
}

/* ── Trust line refinement ─────────────────────────── */
.tr-hero-fs__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    color: rgba(255,255,255,.85);
    font-size: 13px;
    margin-top: 16px;
    text-align: center;
}
.tr-hero-fs__trust-stars { color: #00b67a; display: inline-flex; gap: 1px; }
.tr-hero-fs__trust strong { color: #fff; }

/* ── Vanilla-JS slide container & individual slides ── */
.tr-hero-fs__slides {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
}
.tr-hero-fs__slide {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    transition: opacity 2.5s ease !important;
    overflow: hidden;
    z-index: 0;
}
.tr-hero-fs__slide--active {
    opacity: 1 !important;
    z-index: 1 !important;
}

/* ── Ken Burns: base (no animation), then active overrides ── */
.tr-hero-fs__slide .tr-hero-fs__bg {
    animation: none;
    transform: scale(1.08);
    transition: transform 0s;
}
.tr-hero-fs__slide--active .tr-hero-fs__bg {
    animation: tr-kb-zoom 8s ease-out forwards !important;
    transform: scale(1.0);
}

/* ── Dot pagination ────────────────────────────────── */
.tr-hero-fs__dots {
    position: absolute !important;
    bottom: 28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    gap: 6px !important;
}
.tr-hero-fs__dot {
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .3s, width .3s, border-radius .3s;
    flex-shrink: 0;
}
.tr-hero-fs__dot--active {
    background: #fff !important;
    width: 26px !important;
    border-radius: 4px !important;
}

@media (max-width: 767px) {
    .tr-hero-fs__label { font-size: 11px; padding: 4px 11px; }
}

/* ==========================================================================
   RESPONSIVE FIXES + MISSING SECTION CSS  (appended 2026-06-02)
   ========================================================================== */

/* ── 1. Hero tablet breakpoint (768-991px) ─────────────────────────────── */
@media (max-width: 991px) and (min-width: 768px) {
    .tr-hero-fs__title       { font-size: 2.6rem; }
    .tr-hero-fs__subtitle    { font-size: 1rem; }
    .tr-hero-fs__content     { margin-bottom: 28px; }
    .tr-hero-fs .tr-search-bar__field { padding: 0 10px; gap: 6px; }
    .tr-hero-fs .tr-search-bar__btn   { padding: 0 18px; font-size: 14px; }
}

/* ── 2. Stat strip — business_presence.blade.php ──────────────────────── */
.tf-stat-strip { padding: 72px 0; }

.tf-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.tf-stat-item__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #2596be 0%, #1a7fa3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(37,150,190,.28);
    margin-bottom: 4px;
}
.tf-stat-item__count {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: 'Poppins', sans-serif;
    font-size: 2.4rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
}
.tf-stat-item__plus {
    font-size: 1.5rem;
    color: #2596be;
    font-weight: 800;
}
.tf-stat-item__label {
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}
[data-theme="dark"] .tf-stat-item__count { color: #f1f5f9; }
[data-theme="dark"] .tf-stat-item__label { color: #94a3b8; }

@media (max-width: 575px) {
    .tf-stat-strip  { padding: 56px 0; }
    .tf-stat-item__count { font-size: 2rem; }
    .tf-stat-item__icon  { width: 52px; height: 52px; font-size: 20px; }
}

/* ── 3. Transport CTA — transport_cta.blade.php new class names ───────── */
.tf-section--transport-cta {
    position: relative;
    padding: 72px 0;
    background: linear-gradient(135deg, #062233 0%, #0f3d5e 100%);
    overflow: hidden;
}

.tf-transport-cta__gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(37,150,190,.22) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 10% 80%, rgba(37,150,190,.12) 0%, transparent 70%);
    pointer-events: none;
}

.tf-transport-cta__card {
    position: relative;
    z-index: 2;
}

/* Decorative floating vehicle icons */
.tf-transport-cta__vehicles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.tf-transport-cta__vehicle-icon {
    position: absolute;
    color: rgba(255,255,255,.05);
    font-size: 5rem;
}
.tf-transport-cta__vehicle-icon--bus  { top: -10px; right: 8%; font-size: 8rem; transform: rotate(-15deg); }
.tf-transport-cta__vehicle-icon--van  { bottom: -10px; right: 22%; font-size: 6rem; transform: rotate(8deg); }
.tf-transport-cta__vehicle-icon--taxi { top: 20%; right: 40%; font-size: 4rem; opacity: .03; }

/* Text block */
.tf-transport-cta__text { padding-right: 24px; }
.tf-transport-cta__text .tf-section-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 12px; }
.tf-transport-cta__text p { color: rgba(255,255,255,.75); font-size: 15px; line-height: 1.7; margin: 0; }

/* Action buttons */
.tf-transport-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
@media (min-width: 992px) {
    .tf-transport-cta__actions { align-items: flex-end; }
}

.tf-transport-cta__btn { display: inline-flex; }
.tf-transport-cta__btn--outline {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,.35) !important;
    color: #fff !important;
}
.tf-transport-cta__btn--outline:hover {
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.6) !important;
}

@media (max-width: 767px) {
    .tf-section--transport-cta { padding: 56px 0; }
    .tf-transport-cta__text    { padding-right: 0; margin-bottom: 8px; }
    .tf-transport-cta__actions { flex-direction: row; flex-wrap: wrap; }
}

/* ── 4. General tablet/mobile padding resets ──────────────────────────── */
@media (max-width: 767px) {
    .tr-deals-week__title { font-size: 1.2rem; }
    .tr-tours-section { padding: 2rem 0; }
    .tr-section-header { margin-bottom: 16px; }
    .tr-section-header__title { font-size: 1.25rem; }
}

/* ── 5. Filter tab mobile: don't clip the shadow ──────────────────────── */
@media (max-width: 575px) {
    .tr-filter-tabs { padding-bottom: 4px; }
}

/* ==========================================================================
   MOBILE RESPONSIVE FIXES — (appended 2026-06-02 fix-2)
   ========================================================================== */

/* ── 1. Trust bar: prevent wrapping, always single row ─────────────────── */
@media (max-width: 575px) {
    .tr-trust-bar__inner {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 8px;
        /* Fade edges to hint scroll */
        mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
    }
    .tr-trust-bar__inner::-webkit-scrollbar { display: none; }
    /* Shrink font slightly so items fit better on very small screens */
    .tr-trust-bar { font-size: .72rem; }
    .tr-trust-bar__item { padding: .1rem .6rem; }
}

/* ── 2. Hero: tighter on mobile ────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Content area: less margin-bottom so search sits closer to text */
    .tr-hero-fs__content { margin-bottom: 20px; padding: 0 16px; }

    /* Compact search card */
    .tr-hero-fs .tr-search-bar { padding: 10px; gap: 4px; }
    .tr-hero-fs .tr-search-bar__field { padding: 7px 10px; }

    /* Trust line: smaller text, no icon label repeat */
    .tr-hero-fs__trust { font-size: 11.5px; margin-top: 10px; gap: 4px; }

    /* Subtitle: shorter on mobile */
    .tr-hero-fs__subtitle { font-size: .93rem; }
}

/* ── 3. Hero height: don't lock min-height too tall ────────────────────── */
@media (max-width: 480px) {
    .tr-hero-fs {
        min-height: 480px !important;
        max-height: 620px !important;
    }
    .tr-hero-fs__title    { font-size: 1.55rem !important; line-height: 1.2; }
    .tr-hero-fs__subtitle { font-size: .85rem; }
    .tr-hero-fs__content  { margin-bottom: 14px; }
}

/* ── 4. Section padding: reduce for mobile throughout ─────────────────── */
@media (max-width: 575px) {
    .tf-stat-strip         { padding: 48px 0; }
    .tr-deals-week         { padding: 24px 0; }
    .tf-section--transport-cta { padding: 48px 0; }

    /* Tour section */
    .tr-tours-section      { padding: 1.5rem 0; }
    .tr-section-header     { margin-bottom: 12px; }
    .tr-section-header__title { font-size: 1.15rem; }
    .tr-filter-tabs        { gap: .5rem; }
    .tr-filter-tab         { font-size: .8rem; padding: .4rem .9rem; }

    /* Tour cards: 2 per row on mobile (not 1) */
    .col-xl-2-4 { flex: 0 0 50% !important; max-width: 50% !important; }
    .tr-tour-card__body    { padding: .65rem; }
    .tr-tour-card__title   { font-size: .82rem; }
}
@media (max-width: 360px) {
    .col-xl-2-4 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ── 5. Stat strip icon size on very small screens ─────────────────────── */
@media (max-width: 400px) {
    .tf-stat-item__count { font-size: 1.7rem; }
    .tf-stat-item__icon  { width: 46px; height: 46px; font-size: 18px; }
}

/* ==========================================================================
   FULL-SCREEN HERO + SEARCH FORM REDESIGN  (appended 2026-06-02 fix-3)
   ========================================================================== */

/* ── 1. Remove max-height cap — hero fills full viewport ──────────────── */
.tr-hero-fs {
    max-height: none !important;
    height: 100vh !important;
    height: 100svh !important;   /* Safari/mobile browser bars aware */
}
@media (max-width: 767px) {
    .tr-hero-fs {
        height: 100svh !important;
        max-height: none !important;
        min-height: 100svh !important;
    }
}
@media (max-width: 480px) {
    .tr-hero-fs {
        height: 100svh !important;
        max-height: none !important;
        min-height: 100svh !important;
    }
}

/* ── 2. Search bar: taller on desktop for label+value layout ──────────── */
.tr-hero-fs .tr-search-bar {
    height: 72px;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,.28);
    padding: 0 8px;
}
.tr-hero-fs .tr-search-bar__max-width {
    max-width: 920px;
}

/* ── 3. Field: icon + label column + select + chevron ─────────────────── */
.tr-hero-fs .tr-search-bar__field {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 16px;
    gap: 12px;
    min-width: 0;
    position: relative;
}
.tr-hero-fs .tr-search-bar__field-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.tr-hero-fs .tr-search-bar__icon {
    color: #2596be;
    font-size: 17px;
    flex-shrink: 0;
}
.tr-hero-fs .tr-search-bar__field-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}
.tr-hero-fs .tr-search-bar__field-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}
.tr-hero-fs .tr-search-bar__select,
.tr-hero-fs .tr-search-bar__input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111 !important;
    width: 100% !important;
    cursor: pointer !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    line-height: 1.3;
}
.tr-hero-fs .tr-search-bar__select:focus,
.tr-hero-fs .tr-search-bar__input:focus { outline: none !important; box-shadow: none !important; }
.tr-hero-fs .tr-search-bar__chevron {
    font-size: 10px;
    color: #9ca3af;
    flex-shrink: 0;
    pointer-events: none;
}

/* ── 4. Search button: always show text ───────────────────────────────── */
.tr-hero-fs .tr-search-bar__btn {
    height: 54px;
    padding: 0 28px;
    border-radius: 12px;
    font-size: 15px;
    gap: 8px;
    white-space: nowrap;
}
.tr-hero-fs .tr-search-bar__btn .tr-search-btn-text { display: inline !important; }

/* ── 5. Mobile: stacked clean cards ──────────────────────────────────── */
@media (max-width: 767px) {
    .tr-hero-fs .tr-search-bar {
        flex-direction: column;
        height: auto;
        border-radius: 20px;
        padding: 10px;
        gap: 2px;
        background: #fff;
        box-shadow: 0 12px 48px rgba(0,0,0,.25);
    }
    .tr-hero-fs .tr-search-bar__field {
        width: 100%;
        padding: 10px 14px;
        border-bottom: 1px solid #f1f5f9;
        border-radius: 0;
        gap: 10px;
    }
    .tr-hero-fs .tr-search-bar__field:last-of-type { border-bottom: none; }
    .tr-hero-fs .tr-search-bar__divider { display: none; }
    .tr-hero-fs .tr-search-bar__field-label { font-size: 9.5px; }
    .tr-hero-fs .tr-search-bar__select,
    .tr-hero-fs .tr-search-bar__input { font-size: 13.5px !important; }
    .tr-hero-fs .tr-search-bar__btn {
        width: 100%;
        border-radius: 12px;
        justify-content: center;
        margin-top: 6px;
        height: 50px;
        font-size: 15px;
        font-weight: 700;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HERO SEARCH BAR — custom styled dropdowns (replaces native selects)
═══════════════════════════════════════════════════════════════ */

/* Allow dropdown panels to overflow the pill bar */
.tr-hero-fs .tr-search-bar { overflow: visible !important; }

/* Dropdown trigger field */
.tr-search-bar .tr-sb-drop {
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* Displayed value text */
.tr-sb-drop__val {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.tr-sb-drop__val--placeholder { color: #9ca3af !important; font-weight: 500 !important; }

/* Hidden dropdown panel */
.tr-sb-drop__menu {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    left: -16px;
    min-width: 210px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 56px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
    border: 1.5px solid #e5e7eb;
    padding: 6px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 99999;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}
.tr-sb-drop--open > .tr-sb-drop__menu { display: block; }

/* Chevron rotation */
.tr-search-bar__chevron { transition: transform .25s ease; }
.tr-sb-drop--open > .tr-search-bar__chevron,
.tr-sb-drop--open .tr-search-bar__chevron { transform: rotate(180deg); }

/* Option buttons */
.tr-sb-drop__opt {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.45;
}
.tr-sb-drop__opt:hover   { background: #f0f9ff; color: #2596be; }
.tr-sb-drop__opt--active { background: #eff6ff; color: #2596be; font-weight: 700; }

/* Mobile: full-width panel, anchored to field top */
@media (max-width: 767px) {
    .tr-sb-drop__menu {
        left: 0;
        right: 0;
        min-width: 0;
        width: 100%;
        top: calc(100% + 6px);
    }
}

/* ── Prevent horizontal page overflow on mobile ── */
html, body { overflow-x: hidden; max-width: 100%; }

/* ── Popular Destinations: single column on mobile ── */
@media (max-width: 767px) {
    .tr-dest-grid { grid-template-columns: 1fr !important; }
}

/* ── Global: remove underline on all link hovers ── */
a:hover { text-decoration: none !important; }