/*
 * Luxury Bridge — Single source of truth for the design system
 * Maps GoTrip native variables → luxury palette so ALL components
 * (native GoTrip + custom luxury) share one consistent look.
 *
 * Load order: after vendors.css + main.css, before everything else.
 * This file is CRITICAL CSS — do NOT defer it.
 *
 * SAFE ZONES: booking forms, payment widgets, pricing tables are
 * intentionally excluded from overrides to avoid breaking functionality.
 */

/* ============================================================
   1. UNIFIED COLOR TOKENS
   Bridge GoTrip native vars to luxury values so both systems
   resolve to the same palette without touching any blade files.
   ============================================================ */
:root {
  /* ── Luxury palette (authoritative) ── */
  --luxury-primary:        #0D1B2A;   /* deep navy — replaces #1a1a2a */
  --luxury-primary-light:  #1B2E45;
  --luxury-accent:         #C9A84C;   /* warm gold */
  --luxury-gold:           #C9A84C;
  --luxury-gold-light:     #E8C97A;
  --luxury-gold-hover:     #B8943E;
  --luxury-silver:         #B0B8C1;
  --luxury-silver-light:   #E4E8ED;
  --luxury-charcoal:       #1E2A38;
  --luxury-charcoal-light: #4A5568;
  --luxury-cream:          #F8F6F1;
  --luxury-ivory:          #FDFCF9;
  --luxury-white:          #FFFFFF;

  /* ── Bridge: GoTrip native → luxury ── */
  --color-dark-1:   var(--luxury-primary);
  --color-dark-2:   var(--luxury-primary-light);
  --color-dark-3:   #1E3A5F;
  --color-dark-4:   #234876;
  --color-blue-1:   var(--luxury-accent);   /* primary CTA gold replaces blue */
  --color-blue-2:   #F5EDD8;               /* light gold tint */
  --color-yellow-1: var(--luxury-gold);
  --color-yellow-2: var(--luxury-gold-hover);
  --color-light-1:  var(--luxury-charcoal-light);
  --color-light-2:  var(--luxury-cream);
  --color-light-3:  var(--luxury-ivory);

  /* ── Semantic (unchanged — safe for booking/payment UI) ── */
  --color-green-2:  #008009;
  --color-red-1:    #D93025;
  --color-red-2:    #F1416C;
  --success:        #10b981;
  --warning:        #f59e0b;
  --error:          #ef4444;
  --info:           #3b82f6;

  /* ── Typography ── */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Spacing (8px grid) ── */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;

  /* ── Radius ── */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px;

  /* ── Shadows ── */
  --sh-sm:  0 1px 3px rgba(13,27,42,.08);
  --sh-md:  0 4px 12px rgba(13,27,42,.10);
  --sh-lg:  0 8px 24px rgba(13,27,42,.12);
  --sh-xl:  0 16px 40px rgba(13,27,42,.14);
  --sh-gold: 0 4px 16px rgba(201,168,76,.30);

  /* ── Transitions ── */
  --t-fast:   150ms ease;
  --t-normal: 250ms ease;
  --t-slow:   350ms ease;
}

/* ============================================================
   2. BASE RESET — minimal, non-destructive
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--luxury-ivory);
  color: var(--luxury-charcoal);
}

/* ============================================================
   3. TYPOGRAPHY — headings use display font, body uses Inter
   Only sets defaults; admin font settings override via inline style.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  color: var(--luxury-primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ============================================================
   4. NAVIGATION — header consistency
   ============================================================ */

/* Sticky header glass effect */
.header {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--luxury-silver-light) !important;
  box-shadow: var(--sh-sm) !important;
}

/* Logo area */
.header__logo img { max-height: 48px; }

/* Nav links */
.header__nav .menu-item > a,
.header__nav .nav-item > a {
  color: var(--luxury-charcoal) !important;
  font-weight: 500;
  transition: color var(--t-fast);
}
.header__nav .menu-item > a:hover,
.header__nav .nav-item > a:hover {
  color: var(--luxury-accent) !important;
}

/* Active nav item */
.header__nav .menu-item.is-active > a,
.header__nav .nav-item.active > a {
  color: var(--luxury-accent) !important;
}

/* CTA button in header */
.header .button.-blue-1,
.header .btn-blue-1 {
  background: var(--luxury-accent) !important;
  color: var(--luxury-primary) !important;
  border-color: var(--luxury-accent) !important;
  font-weight: 600;
  border-radius: var(--r-lg) !important;
  transition: all var(--t-normal);
}
.header .button.-blue-1:hover,
.header .btn-blue-1:hover {
  background: var(--luxury-gold-hover) !important;
  box-shadow: var(--sh-gold) !important;
  transform: translateY(-1px);
}

/* Mobile nav bar — unified gold accent */
.mobile-nav-item.mobile-nav-home {
  background: var(--luxury-accent) !important;
  color: var(--luxury-primary) !important;
  box-shadow: var(--sh-gold) !important;
}
.mobile-nav-item:not(.mobile-nav-home):hover {
  color: var(--luxury-accent) !important;
}

/* ============================================================
   5. BUTTONS — unified across all pages
   ============================================================ */

/* Primary CTA (was blue, now gold) */
.button.-blue-1,
.btn-blue-1,
.bg-blue-1 {
  background: var(--luxury-accent) !important;
  color: var(--luxury-primary) !important;
  border-color: var(--luxury-accent) !important;
}
.button.-blue-1:hover,
.btn-blue-1:hover {
  background: var(--luxury-gold-hover) !important;
  box-shadow: var(--sh-gold) !important;
}

/* Dark buttons */
.button.-dark-1,
.bg-dark-1 {
  background: var(--luxury-primary) !important;
  color: var(--luxury-white) !important;
}
.button.-dark-1:hover {
  background: var(--luxury-primary-light) !important;
}

/* Outline buttons */
.button.-outline-dark-1 {
  border-color: var(--luxury-primary) !important;
  color: var(--luxury-primary) !important;
}
.button.-outline-dark-1:hover {
  background: var(--luxury-primary) !important;
  color: var(--luxury-white) !important;
}

/* Yellow/gold buttons */
.button.-yellow-1,
.bg-yellow-1 {
  background: var(--luxury-gold) !important;
  color: var(--luxury-primary) !important;
}

/* ============================================================
   6. TOUR & HOTEL CARDS — consistent look across listing pages
   ============================================================ */

/* Base card shell — applies to GoTrip's native .tourCard */
.tourCard,
.hotelCard {
  background: var(--luxury-white);
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--luxury-silver-light) !important;
  box-shadow: var(--sh-md) !important;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
  overflow: hidden;
}
.tourCard:hover,
.hotelCard:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-xl) !important;
}

/* Card image */
.tourCard__image img,
.hotelCard__image img {
  transition: transform var(--t-slow);
}
.tourCard:hover .tourCard__image img,
.hotelCard:hover .hotelCard__image img {
  transform: scale(1.04);
}

/* Card title */
.tourCard__title a,
.hotelCard__title a {
  color: var(--luxury-primary) !important;
  font-family: var(--font-display);
  transition: color var(--t-fast);
}
.tourCard__title a:hover,
.hotelCard__title a:hover {
  color: var(--luxury-accent) !important;
}

/* Price display on cards */
.tourCard__price,
.hotelCard__price,
.tourCard .price,
.hotelCard .price {
  color: var(--luxury-accent) !important;
  font-weight: 700;
}

/* Rating stars */
.tourCard .stars i,
.hotelCard .stars i,
.tourCard .icon-star,
.hotelCard .icon-star {
  color: var(--luxury-gold) !important;
}

/* Card badge (featured, sale, etc.) */
.tourCard__badge,
.hotelCard__badge,
.badge-featured {
  background: linear-gradient(135deg, var(--luxury-accent), var(--luxury-gold-light)) !important;
  color: var(--luxury-primary) !important;
  border-radius: var(--r-full) !important;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================================
   7. SEARCH FILTER SIDEBAR — consistent with card system
   ============================================================ */

.sidebar-filter,
.filter-sidebar,
.bravo_search .col-xl-3 > div,
.bravo_search .col-lg-4 > div {
  background: var(--luxury-white);
  border-radius: var(--r-xl);
  border: 1px solid var(--luxury-silver-light);
  box-shadow: var(--sh-sm);
}

/* Filter section headings */
.filter-title,
.sidebar-filter h4,
.sidebar-filter h5 {
  color: var(--luxury-primary);
  font-family: var(--font-display);
  font-weight: 600;
  border-bottom: 1px solid var(--luxury-silver-light);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Checkboxes & radio in filters */
.form-checkbox .form-checkbox__mark,
.form-radio .form-radio__mark {
  border-color: var(--luxury-silver) !important;
}
.form-checkbox input:checked ~ .form-checkbox__mark,
.form-radio input:checked ~ .form-radio__mark {
  background: var(--luxury-accent) !important;
  border-color: var(--luxury-accent) !important;
}

/* Range slider track */
.irs--flat .irs-bar,
.irs--flat .irs-handle > i:first-child {
  background: var(--luxury-accent) !important;
}
.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single {
  background: var(--luxury-primary) !important;
}

/* ============================================================
   8. SEARCH FORM (hero search bar)
   ============================================================ */

.mainSearch,
.hero-search,
.search-form-luxury {
  background: var(--luxury-white) !important;
  border-radius: var(--r-2xl) !important;
  box-shadow: var(--sh-xl) !important;
  border: 1px solid var(--luxury-silver-light) !important;
}

.mainSearch__submit,
.hero-search .button.-blue-1 {
  background: var(--luxury-accent) !important;
  color: var(--luxury-primary) !important;
  border-radius: var(--r-lg) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ============================================================
   9. SECTION HEADERS — consistent across all front pages
   ============================================================ */

.sectionTitle__title,
.section-title,
.section-luxury__title {
  font-family: var(--font-display) !important;
  color: var(--luxury-primary) !important;
}

/* Gold underline accent on section titles */
.sectionTitle__title::after,
.section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--luxury-accent);
  margin-top: 8px;
  border-radius: var(--r-full);
}

.sectionTitle__text,
.section-subtitle {
  color: var(--luxury-charcoal-light) !important;
}

/* ============================================================
   10. FOOTER — consistent dark luxury footer
   ============================================================ */

footer,
.footer {
  background: var(--luxury-primary) !important;
  color: rgba(255,255,255,0.85) !important;
}

footer a,
.footer a {
  color: rgba(255,255,255,0.75) !important;
  transition: color var(--t-fast);
}
footer a:hover,
.footer a:hover {
  color: var(--luxury-gold-light) !important;
}

footer h4, footer h5,
.footer h4, .footer h5 {
  color: var(--luxury-white) !important;
  font-family: var(--font-display);
}

/* Newsletter section */
.mailchimp.bg-dark-2 {
  background: var(--luxury-primary-light) !important;
}
.mailchimp .button {
  background: var(--luxury-accent) !important;
  color: var(--luxury-primary) !important;
  font-weight: 700;
}

/* ============================================================
   11. BREADCRUMB
   ============================================================ */

.breadcrumb-item a { color: var(--luxury-accent) !important; }
.breadcrumb-item.active { color: var(--luxury-charcoal-light) !important; }

/* ============================================================
   12. PAGINATION
   ============================================================ */

.pagination .page-item .page-link {
  color: var(--luxury-primary) !important;
  border-color: var(--luxury-silver-light) !important;
  border-radius: var(--r-md) !important;
  transition: all var(--t-fast);
}
.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover {
  background: var(--luxury-accent) !important;
  border-color: var(--luxury-accent) !important;
  color: var(--luxury-primary) !important;
}

/* ============================================================
   13. TABS (tour detail page tabs)
   ============================================================ */

.tabs__controls .tabs__button {
  color: var(--luxury-charcoal-light) !important;
  border-bottom: 2px solid transparent;
  transition: all var(--t-fast);
}
.tabs__controls .tabs__button.is-active,
.tabs__controls .tabs__button:hover {
  color: var(--luxury-primary) !important;
  border-bottom-color: var(--luxury-accent) !important;
}

/* ============================================================
   14. TESTIMONIALS / REVIEWS
   ============================================================ */

.testimonial-card,
.review-card {
  background: var(--luxury-white);
  border-radius: var(--r-xl);
  border: 1px solid var(--luxury-silver-light);
  box-shadow: var(--sh-sm);
}

.testimonial-card .stars i,
.review-card .stars i {
  color: var(--luxury-gold) !important;
}

/* ============================================================
   15. BADGES & TAGS
   ============================================================ */

.tag-item,
.tour-tag,
.category-tag {
  background: var(--luxury-cream) !important;
  color: var(--luxury-primary) !important;
  border: 1px solid var(--luxury-silver-light) !important;
  border-radius: var(--r-full) !important;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 10px;
}

/* ============================================================
   16. LOADING / PRELOADER
   ============================================================ */

.loading-overlay { background: var(--luxury-ivory) !important; }
.loading-spinner,
.spinner-luxury {
  border-color: var(--luxury-silver-light) !important;
  border-top-color: var(--luxury-accent) !important;
}

/* ============================================================
   17. SCROLL PROGRESS BAR
   ============================================================ */

.scroll-progress {
  background: linear-gradient(90deg, var(--luxury-accent), var(--luxury-gold-light)) !important;
}

/* ============================================================
   18. PACKAGE LOCATION FILTER (tour search page)
   Fixes the inline style inconsistency in search.blade.php
   ============================================================ */

#package_location_filter,
.package-filter-select {
  background: var(--luxury-white) !important;
  color: var(--luxury-charcoal) !important;
  border: 1px solid var(--luxury-silver-light) !important;
  border-radius: var(--r-lg) !important;
  padding: 8px 14px !important;
  font-weight: 500;
  transition: border-color var(--t-fast);
}
#package_location_filter:focus,
.package-filter-select:focus {
  border-color: var(--luxury-accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(201,168,76,.15) !important;
}
#package_location_filter option {
  background: var(--luxury-white) !important;
  color: var(--luxury-charcoal) !important;
}

/* ============================================================
   19. SECTION BACKGROUNDS — alternating rhythm
   ============================================================ */

.bg-light-2 { background: var(--luxury-cream) !important; }
.bg-light-3 { background: var(--luxury-ivory) !important; }
.bg-dark-1  { background: var(--luxury-primary) !important; }
.bg-dark-2  { background: var(--luxury-primary-light) !important; }

/* ============================================================
   20. ACCESSIBILITY & MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --luxury-primary: #000;
    --luxury-accent: #8B6914;
    --luxury-charcoal: #000;
    --luxury-cream: #fff;
    --luxury-ivory: #fff;
  }
}

/* ============================================================
   21. RESPONSIVE CONSISTENCY
   ============================================================ */

@media (max-width: 991px) {
  .tourCard, .hotelCard {
    border-radius: var(--r-lg) !important;
  }
}

@media (max-width: 767px) {
  .sectionTitle__title { font-size: 1.5rem; }
  .mainSearch { border-radius: var(--r-xl) !important; }
}

/* ============================================================
   INTENTIONALLY EXCLUDED (booking/payment safety zone):
   - .booking-form, .booking-sidebar, .booking-step
   - .payment-*, .stripe-*, .mpesa-*
   - .price-summary-*, #price-breakdown-container
   - .tour-form-book, .bravo-booking-form
   - .checkout-*, .order-summary
   These retain their original styling to avoid breaking
   any booking or payment functionality.
   ============================================================ */

/* ============================================================
   22. HOTEL CARDS — mirrors tour card styling for consistency
   ============================================================ */

/* Base shell — same as .tourCard */
.hotelsCard.-type-1 {
  background: var(--luxury-white);
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--luxury-silver-light) !important;
  box-shadow: var(--sh-md) !important;
  overflow: hidden;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}
.hotelsCard.-type-1:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-xl) !important;
}

/* Image zoom on hover — same as tour */
.hotelsCard__image .cardImage__content img {
  transition: transform var(--t-slow);
}
.hotelsCard.-type-1:hover .hotelsCard__image .cardImage__content img {
  transform: scale(1.04);
}

/* Wishlist button */
.hotelsCard .cardImage__wishlist .button {
  background: rgba(255,255,255,0.95) !important;
  border: 2px solid var(--luxury-accent) !important;
  color: var(--luxury-charcoal) !important;
  transition: all var(--t-fast);
}
.hotelsCard .cardImage__wishlist .button:hover {
  background: var(--luxury-accent) !important;
  color: var(--luxury-primary) !important;
}

/* Badges — same gold/green as tour */
.hotelsCard .cardImage__leftBadge > div:first-child {
  background: linear-gradient(135deg, var(--luxury-accent), var(--luxury-gold-light)) !important;
  color: var(--luxury-primary) !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hotelsCard .cardImage__leftBadge > div + div {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
}

/* Content padding — same as tour */
.hotelsCard__content.px-10 {
  padding: 12px !important;
}

/* Title */
.hotelsCard__title a {
  color: var(--luxury-primary) !important;
  font-family: var(--font-display);
  font-weight: 600;
  transition: color var(--t-fast);
}
.hotelsCard__title a:hover {
  color: var(--luxury-accent) !important;
}

/* Star rating icons */
.hotelsCard .icon-star {
  color: var(--luxury-gold) !important;
}

/* Review score badge */
.hotelsCard .flex-center.bg-blue-1 {
  background: linear-gradient(135deg, var(--luxury-accent), var(--luxury-gold-light)) !important;
  color: var(--luxury-primary) !important;
  font-weight: 700;
  border-radius: var(--r-md) !important;
}

/* Location text */
.hotelsCard__content .icon-pin {
  color: var(--luxury-accent) !important;
}

/* Divider line */
.hotelsCard__content .border-top-light {
  border-color: var(--luxury-silver-light) !important;
}

/* Price */
.hotelsCard__content .text-dark-1.fw-600 {
  color: var(--luxury-primary) !important;
}
.hotelsCard__content .text-dark-1.fw-600 .text-light-1 {
  color: var(--luxury-charcoal-light) !important;
}
.hotelsCard__content .line-through {
  color: var(--luxury-charcoal-light) !important;
  opacity: 0.7;
}
.hotelsCard__content .text-12.text-light-1.lh-14 {
  color: var(--luxury-charcoal-light) !important;
}

/* CTA button — same as tour "View Details" */
.hotelsCard__content .button.-sm.-blue-1 {
  background: rgba(201,168,76,0.12) !important;
  color: var(--luxury-accent) !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600;
  transition: all var(--t-normal);
}
.hotelsCard__content .button.-sm.-blue-1:hover {
  background: var(--luxury-accent) !important;
  color: var(--luxury-primary) !important;
  border-color: var(--luxury-accent) !important;
  box-shadow: var(--sh-gold) !important;
}

/* ── Hotel list-view card (loop-list.blade.php) ── */
.bravo_search_hotel .loop-list-item,
.bravo_search_hotel .row.x-gap-20.y-gap-20 {
  background: var(--luxury-white);
  border-radius: var(--r-xl);
  border: 1px solid var(--luxury-silver-light);
  box-shadow: var(--sh-sm);
  padding: 16px;
  transition: box-shadow var(--t-normal);
}
.bravo_search_hotel .row.x-gap-20.y-gap-20:hover {
  box-shadow: var(--sh-lg);
}

/* List view image */
.bravo_search_hotel .cardImage.w-250 {
  border-radius: var(--r-lg) !important;
  overflow: hidden;
}
.bravo_search_hotel .cardImage.w-250 img {
  transition: transform var(--t-slow);
}
.bravo_search_hotel .cardImage.w-250:hover img {
  transform: scale(1.04);
}

/* List view title */
.bravo_search_hotel .text-18.lh-16.fw-500 a {
  color: var(--luxury-primary) !important;
  font-family: var(--font-display);
  transition: color var(--t-fast);
}
.bravo_search_hotel .text-18.lh-16.fw-500 a:hover {
  color: var(--luxury-accent) !important;
}

/* List view review badge */
.bravo_search_hotel .flex-center.bg-blue-1.size-40 {
  background: linear-gradient(135deg, var(--luxury-accent), var(--luxury-gold-light)) !important;
  color: var(--luxury-primary) !important;
  font-weight: 700;
  border-radius: var(--r-md) !important;
}

/* List view CTA */
.bravo_search_hotel .button.-md.-dark-1.bg-blue-1 {
  background: var(--luxury-accent) !important;
  color: var(--luxury-primary) !important;
  border-radius: var(--r-lg) !important;
  font-weight: 700;
  transition: all var(--t-normal);
}
.bravo_search_hotel .button.-md.-dark-1.bg-blue-1:hover {
  background: var(--luxury-gold-hover) !important;
  box-shadow: var(--sh-gold) !important;
  transform: translateY(-2px);
}

/* ── Hotel homepage block "View All" button ── */
.bravo-gotrip-list-hotel .button.-outline-blue-1 {
  border-color: var(--luxury-accent) !important;
  color: var(--luxury-accent) !important;
  border-radius: var(--r-lg) !important;
  font-weight: 600;
  transition: all var(--t-normal);
}
.bravo-gotrip-list-hotel .button.-outline-blue-1:hover {
  background: var(--luxury-accent) !important;
  color: var(--luxury-primary) !important;
}

/* ── Hotel tab pills (location tabs on homepage) ── */
.bravo-gotrip-list-hotel .tabs__button {
  border-radius: var(--r-lg) !important;
  font-weight: 500;
  transition: all var(--t-fast);
}
.bravo-gotrip-list-hotel .tabs__button.is-tab-el-active {
  background: var(--luxury-accent) !important;
  color: var(--luxury-primary) !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .hotelsCard.-type-1 {
    border-radius: var(--r-lg) !important;
  }
  .hotelsCard__content.px-10 {
    padding: 10px !important;
  }
}

/* ============================================================
   23. CARD IMAGE HEIGHT — fixed heights, overrides ratio trick
   The .cardImage uses position:relative + ::before padding-top for ratio.
   We override by setting explicit height on .cardImage itself and
   zeroing the ::before so it doesn't push height anymore.
   ============================================================ */

/* ── Desktop / tablet ── */
.tourCard.-type-1 .cardImage,
.hotelsCard.-type-1 .cardImage {
  height: 200px !important;
  min-height: 0 !important;
}

.tourCard.-type-1 .cardImage::before,
.hotelsCard.-type-1 .cardImage::before {
  display: none !important;
  padding-top: 0 !important;
}

.tourCard.-type-1 .cardImage .cardImage__content,
.hotelsCard.-type-1 .cardImage .cardImage__content {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
}

.tourCard.-type-1 .cardImage img,
.hotelsCard.-type-1 .cardImage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ── Mobile ≤ 575px — 100px hard cap ── */
@media (max-width: 575px) {
  .tourCard.-type-1 .cardImage,
  .hotelsCard.-type-1 .cardImage {
    height: 100px !important;
  }
}

/* ── Homepage blocks ── */
.bravo-gotrip-list-hotel .tourCard.-type-1 .cardImage,
.bravo-gotrip-list-hotel .hotelsCard.-type-1 .cardImage,
.bravo-gotrip-list-tour  .tourCard.-type-1 .cardImage {
  height: 200px !important;
}
.bravo-gotrip-list-hotel .tourCard.-type-1 .cardImage::before,
.bravo-gotrip-list-hotel .hotelsCard.-type-1 .cardImage::before,
.bravo-gotrip-list-tour  .tourCard.-type-1 .cardImage::before {
  display: none !important;
}

@media (max-width: 575px) {
  .bravo-gotrip-list-hotel .tourCard.-type-1 .cardImage,
  .bravo-gotrip-list-hotel .hotelsCard.-type-1 .cardImage,
  .bravo-gotrip-list-tour  .tourCard.-type-1 .cardImage {
    height: 100px !important;
  }
}

/* ============================================================
   24. HOMEPAGE SECTION SPACING — tighter gaps between blocks
   Default layout-pt/pb-md = 60px, layout-pb-lg = 120px.
   Reducing to keep sections compact and scannable.
   ============================================================ */

/* Desktop — halve the padding */
.layout-pt-md  { padding-top:    30px !important; }
.layout-pb-md  { padding-bottom: 30px !important; }
.layout-pt-lg  { padding-top:    50px !important; }
.layout-pb-lg  { padding-bottom: 50px !important; }

/* Tablet ≤ 767px */
@media (max-width: 767px) {
  .layout-pt-md  { padding-top:    20px !important; }
  .layout-pb-md  { padding-bottom: 20px !important; }
  .layout-pt-lg  { padding-top:    30px !important; }
  .layout-pb-lg  { padding-bottom: 30px !important; }
}

/* Mobile ≤ 575px */
@media (max-width: 575px) {
  .layout-pt-md  { padding-top:    16px !important; }
  .layout-pb-md  { padding-bottom: 16px !important; }
  .layout-pt-lg  { padding-top:    20px !important; }
  .layout-pb-lg  { padding-bottom: 20px !important; }
}

/* ============================================================
   25. CARD GRID GAPS — tighter spacing between cards
   y-gap-30 = 30px vertical gap (15px top+bottom per card)
   Reducing to 12px gap on desktop, 8px on mobile.
   ============================================================ */

/* Vertical gap between card rows */
.row.y-gap-30 {
  margin-top:    -6px !important;
  margin-bottom: -6px !important;
}
.row.y-gap-30 > * {
  padding-top:    6px !important;
  padding-bottom: 6px !important;
}

/* Horizontal gap between card columns — tighten x-gap-20 too */
.row.x-gap-20 {
  margin-left:  -8px !important;
  margin-right: -8px !important;
}
.row.x-gap-20 > * {
  padding-left:  8px !important;
  padding-right: 8px !important;
}

/* Mobile — even tighter */
@media (max-width: 575px) {
  .row.y-gap-30 {
    margin-top:    -4px !important;
    margin-bottom: -4px !important;
  }
  .row.y-gap-30 > * {
    padding-top:    4px !important;
    padding-bottom: 4px !important;
  }
  .row.x-gap-20 {
    margin-left:  -6px !important;
    margin-right: -6px !important;
  }
  .row.x-gap-20 > * {
    padding-left:  6px !important;
    padding-right: 6px !important;
  }
}

/* ============================================================
   ICON FONT PROTECTION
   Ensure icomoon and FontAwesome glyphs always render correctly
   regardless of any font-family overrides on parent elements.
   ============================================================ */
[class^="icon-"],
[class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa {
  font-family: 'FontAwesome' !important;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}