/* ================================================================
   Sun&Fun Reisen — Ultra Modern UI/UX Refactor
   Page: Delfin Schwimmen Ausflug (single product / tour)
   Theme: adventure-tours child
   ================================================================ */

/* ── 0. CSS Custom Properties (Design Tokens) ─────────────────── */
:root {
  /* Primary palette — ocean-inspired */
  --sf-primary: #0077B6;
  --sf-primary-dark: #005F8A;
  --sf-primary-light: #00B4D8;
  --sf-accent: #F77F00;
  --sf-accent-glow: rgba(247, 127, 0, .25);

  /* Neutrals */
  --sf-bg: #F8FAFB;
  --sf-surface: #FFFFFF;
  --sf-surface-alt: #F0F4F8;
  --sf-text: #1A2332;
  --sf-text-secondary: #5A6A7E;
  --sf-text-muted: #8B97A8;
  --sf-border: #E2E8F0;
  --sf-border-light: #F1F5F9;

  /* Gradients */
  --sf-gradient-hero: linear-gradient(135deg, #0077B6 0%, #00B4D8 50%, #48CAE4 100%);
  --sf-gradient-cta: linear-gradient(135deg, #F77F00 0%, #FCBF49 100%);
  --sf-gradient-card: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);

  /* Glass */
  --sf-glass: rgba(255,255,255,.72);
  --sf-glass-border: rgba(255,255,255,.35);

  /* Shadows */
  --sf-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sf-shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --sf-shadow-lg: 0 12px 40px rgba(0,0,0,.12);
  --sf-shadow-xl: 0 20px 60px rgba(0,0,0,.15);
  --sf-shadow-glow: 0 0 30px rgba(0,180,216,.2);

  /* Radii */
  --sf-radius-sm: 8px;
  --sf-radius-md: 14px;
  --sf-radius-lg: 20px;
  --sf-radius-xl: 28px;
  --sf-radius-full: 999px;

  /* Typography */
  --sf-font: 'Inter', 'Oxygen', system-ui, -apple-system, sans-serif;
  --sf-font-display: 'Inter', 'Oxygen', system-ui, sans-serif;
  --sf-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Transitions */
  --sf-ease: cubic-bezier(.4, 0, .2, 1);
  --sf-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --sf-transition: .3s var(--sf-ease);

  /* Spacing */
  --sf-space-xs: 4px;
  --sf-space-sm: 8px;
  --sf-space-md: 16px;
  --sf-space-lg: 24px;
  --sf-space-xl: 40px;
  --sf-space-2xl: 64px;
}


/* ── 1. Global Reset & Base ────────────────────────────────────── */
body {
  background: var(--sf-bg) !important;
  color: var(--sf-text) !important;
  font-family: var(--sf-font) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body a {
  color: var(--sf-primary);
  text-decoration: none;
  transition: color var(--sf-transition);
}
body a:hover {
  color: var(--sf-primary-dark);
}

::selection {
  background: var(--sf-primary-light);
  color: #fff;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}


/* ── 2. Top Header Bar ─────────────────────────────────────────── */
.header {
  background: rgba(26, 35, 50, .97) !important;
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
  transition: all var(--sf-transition);
}

.header .header__info__item {
  color: rgba(255,255,255,.8) !important;
  font-size: 13px !important;
  letter-spacing: .02em;
}

.header .header__info__item a {
  color: rgba(255,255,255,.85) !important;
  transition: color var(--sf-transition);
}
.header .header__info__item a:hover {
  color: var(--sf-primary-light) !important;
}

/* Social icons — glass pills */
.header .header__info__item--social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--sf-radius-full);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7) !important;
  font-size: 14px !important;
  transition: all var(--sf-transition);
  border: 1px solid rgba(255,255,255,.06);
}
.header .header__info__item--social-icons a:hover {
  background: var(--sf-primary-light);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,180,216,.3);
}

/* Navigation links */
.main-nav .menu > .menu-item > a {
  color: rgba(255,255,255,.85) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: .01em;
  padding: 8px 16px !important;
  border-radius: var(--sf-radius-sm);
  transition: all var(--sf-transition);
  position: relative;
}
.main-nav .menu > .menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--sf-primary-light);
  border-radius: 2px;
  transition: all var(--sf-transition);
  transform: translateX(-50%);
}
.main-nav .menu > .menu-item > a:hover::after,
.main-nav .menu > .menu-item.current-menu-item > a::after {
  width: 60%;
}
.main-nav .menu > .menu-item > a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.06);
}

/* Logo */
.logo {
  transition: opacity var(--sf-transition);
}
.logo:hover {
  opacity: .85;
}
.logo img {
  max-height: 48px !important;
}


/* ── 3. Hero / Header Section (Product Title Banner) ───────────── */
.header-section {
  position: relative;
  overflow: hidden;
}

/* Overlay gradient on hero image */
.header-section-mask {
  background: linear-gradient(
    180deg,
    rgba(0, 40, 80, .3) 0%,
    rgba(0, 60, 110, .65) 100%
  ) !important;
}

.header-section__content {
  padding: 80px 0 60px !important;
  position: relative;
  z-index: 2;
}

/* Breadcrumb-style title */
.header-section__title h1,
.header-section__title {
  font-family: var(--sf-font-display) !important;
  font-size: clamp(28px, 4vw, 46px) !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
  letter-spacing: -.02em;
  line-height: 1.15 !important;
}

.header-section__description {
  color: rgba(255,255,255,.9) !important;
  font-size: 16px !important;
  max-width: 600px;
}

/* Stars rating */
.header-section__rating {
  margin-top: 16px !important;
}
.header-section__rating .fa-star {
  color: #FCBF49 !important;
  font-size: 16px !important;
  filter: drop-shadow(0 1px 4px rgba(252, 191, 73, .4));
}
.header-section__rating__link {
  color: rgba(255,255,255,.8) !important;
  font-size: 14px !important;
  margin-left: 8px;
  transition: color var(--sf-transition);
}
.header-section__rating__link:hover {
  color: #FCBF49 !important;
}


/* ── 4. Main Content Area ──────────────────────────────────────── */
.layout-container {
  max-width: 1280px !important;
}

main,
.layout-content {
  background: transparent !important;
}


/* ── 5. Tour Info Attributes (Dauer, Abholzeit, Abholung) ─────── */
.item-attributes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-space-md);
  margin: var(--sf-space-lg) 0;
}

.item-attributes__item {
  background: var(--sf-surface) !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: var(--sf-radius-md) !important;
  padding: 16px 20px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 180px;
  transition: all var(--sf-transition);
  box-shadow: var(--sf-shadow-sm);
}
.item-attributes__item:hover {
  border-color: var(--sf-primary-light) !important;
  box-shadow: var(--sf-shadow-md);
  transform: translateY(-2px);
}

.item-attributes__item .icon-tick,
.item-attributes__item [class*="icon-"] {
  color: var(--sf-primary) !important;
  font-size: 20px !important;
}

.item-attributes__item__content__item--text {
  color: var(--sf-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.item-attributes__item__content {
  color: var(--sf-text-muted) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .08em;
}


/* ── 6. Tabs (Beschreibung, Highlights, Fotos) ─────────────────── */
.list-block--tour-tabs {
  background: var(--sf-surface) !important;
  border-radius: var(--sf-radius-lg) !important;
  padding: 6px !important;
  margin-bottom: var(--sf-space-xl) !important;
  box-shadow: var(--sf-shadow-sm);
  border: 1px solid var(--sf-border);
}

.list-block--tour-tabs .list-block__item,
.list-block--tour-tabs li {
  display: inline-flex;
  align-items: center;
}

.list-block--tour-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px !important;
  border-radius: var(--sf-radius-md) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--sf-text-secondary) !important;
  background: transparent !important;
  border: none !important;
  transition: all var(--sf-transition);
  position: relative;
}

.list-block--tour-tabs a:hover {
  color: var(--sf-primary) !important;
  background: rgba(0, 119, 182, .06) !important;
}

.list-block--tour-tabs a.active,
.list-block--tour-tabs li.active a {
  background: var(--sf-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 119, 182, .3);
}


/* ── 7. Tab Content / Description Area ─────────────────────────── */
#tabdescription,
.tab-content {
  background: var(--sf-surface) !important;
  border-radius: var(--sf-radius-lg) !important;
  padding: var(--sf-space-xl) !important;
  box-shadow: var(--sf-shadow-sm);
  border: 1px solid var(--sf-border);
  line-height: 1.8 !important;
}

#tabdescription h2,
#tabdescription h3,
#tabdescription h4 {
  font-family: var(--sf-font-display) !important;
  color: var(--sf-text) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  margin-top: 32px;
  margin-bottom: 12px;
}
#tabdescription h2 { font-size: 24px !important; }
#tabdescription h3 { font-size: 20px !important; }
#tabdescription h4 { font-size: 17px !important; }

#tabdescription p {
  color: var(--sf-text-secondary) !important;
  font-size: 15px !important;
  margin-bottom: 16px;
}

/* Location tags */
.abholung,
[class*="abholung"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sf-surface-alt) !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: var(--sf-radius-full) !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sf-primary-dark) !important;
  transition: all var(--sf-transition);
}
.abholung:hover {
  background: rgba(0, 119, 182, .08) !important;
  border-color: var(--sf-primary-light) !important;
}
.abholung .fa-map-marker-alt {
  color: var(--sf-accent) !important;
}


/* ── 8. Photo Gallery ──────────────────────────────────────────── */
#tabphotos img,
.gallery img,
.entry-content img[class*="align"] {
  border-radius: var(--sf-radius-md) !important;
  transition: all .4s var(--sf-ease);
  box-shadow: var(--sf-shadow-sm);
}
#tabphotos img:hover,
.gallery img:hover {
  transform: scale(1.03);
  box-shadow: var(--sf-shadow-lg);
  border-radius: var(--sf-radius-lg) !important;
}


/* ── 9. Price Box / Pricing Section ────────────────────────────── */
.booking-form-wrapper,
.form-block--tour-booking {
  background: var(--sf-surface) !important;
  border-radius: var(--sf-radius-xl) !important;
  padding: 36px 32px 32px !important;
  box-shadow: var(--sf-shadow-lg) !important;
  border: 1px solid var(--sf-border) !important;
  position: relative;
  overflow: hidden;
}

/* Subtle decorative accent bar */
.booking-form-wrapper::before,
.form-block--tour-booking::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--sf-gradient-cta);
  border-radius: var(--sf-radius-xl) var(--sf-radius-xl) 0 0;
}

.form-block__title {
  font-family: var(--sf-font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--sf-text) !important;
  margin-bottom: 20px !important;
}

/* Price display */
.form-block__price-details,
.amount {
  font-family: var(--sf-font-display) !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  color: var(--sf-primary) !important;
  letter-spacing: -.02em;
}

.form-block__price-details .from,
.booking-form-wrapper .from {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--sf-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Form fields */
.form-block__item {
  margin-bottom: var(--sf-space-md) !important;
}

.form-block__item label,
.form-control-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sf-text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px !important;
}

.form-select,
select,
.form-block__item select {
  appearance: none !important;
  background: var(--sf-surface-alt) !important;
  border: 2px solid var(--sf-border) !important;
  border-radius: var(--sf-radius-md) !important;
  padding: 14px 44px 14px 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--sf-text) !important;
  transition: all var(--sf-transition);
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6A7E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
}

.form-select:focus,
select:focus {
  border-color: var(--sf-primary-light) !important;
  box-shadow: 0 0 0 4px rgba(0, 180, 216, .12) !important;
  outline: none !important;
}

/* Quantity controls */
.form-block__field--quantity_erwachsene,
.form-block__field--quantity_kinder-alter-5-11,
.form-block__field--quantity_kleinkind-alter-4 {
  /* styled like the selects */
}


/* ── 10. CTA / Book Now Button ─────────────────────────────────── */
.form-block__button,
.booking-form-wrapper .button,
.booking-form-wrapper button[type="submit"],
.form-block__button--add-to-cart {
  background: var(--sf-gradient-cta) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sf-radius-full) !important;
  padding: 16px 40px !important;
  font-family: var(--sf-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  cursor: pointer;
  transition: all var(--sf-transition);
  box-shadow: 0 4px 20px var(--sf-accent-glow);
  position: relative;
  overflow: hidden;
  text-transform: none !important;
}

.form-block__button::before,
.booking-form-wrapper .button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .5s var(--sf-ease);
}

.form-block__button:hover,
.booking-form-wrapper .button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 30px rgba(247, 127, 0, .35) !important;
}
.form-block__button:hover::before,
.booking-form-wrapper .button:hover::before {
  left: 100%;
}

.form-block__button:active {
  transform: translateY(-1px) !important;
}


/* ── 11. Feature / Checklist Items (✓ items) ──────────────────── */
}


/* ── 12. Info Table (Dauer, Typ, Verfügbarkeit, Abholzeit) ────── */
#tabdescription table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--sf-radius-md);
  overflow: hidden;
  box-shadow: var(--sf-shadow-sm);
  border: 1px solid var(--sf-border);
  margin: 20px 0;
}

#tabdescription table thead th {
  background: var(--sf-primary) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 14px 20px !important;
  border: none !important;
}

#tabdescription table tbody td {
  padding: 14px 20px !important;
  font-size: 15px !important;
  color: var(--sf-text-secondary) !important;
  background: var(--sf-surface) !important;
  border-bottom: 1px solid var(--sf-border-light) !important;
}

#tabdescription table tbody tr:last-child td {
  border-bottom: none !important;
}

#tabdescription table tbody tr:hover td {
  background: var(--sf-surface-alt) !important;
}


/* ── 13. Highlights / Unordered Lists ──────────────────────────── */
/* ── 14. Included / Excluded Sections ──────────────────────────── */
#tabdescription h3 + p .icon-tick--on {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 15px;
  color: var(--sf-text-secondary);
}
#tabdescription h3 + p .icon-tick--on::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: var(--sf-radius-full);
  background: transparent !important ;
  flex-shrink: 0;
}


/* ── 15. "Bring With You" / Preparation Section ────────────────── */
#tabdescription h3 strong {
  color: var(--sf-text) !important;
  font-weight: 600 !important;
}


/* ── 16. CTA Banner ("Anfrage Senden") ─────────────────────────── */
#tabdescription .block-after-indent,
#tabdescription [class*="anfrage"],
#tabdescription .form-block--style3 {
  background: var(--sf-gradient-hero) !important;
  border-radius: var(--sf-radius-xl) !important;
  padding: 32px !important;
  color: #fff !important;
  text-align: center;
  box-shadow: var(--sf-shadow-lg);
  position: relative;
  overflow: hidden;
}

#tabdescription .block-after-indent::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
#tabdescription .block-after-indent::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}

#tabdescription .block-after-indent p {
  color: rgba(255,255,255,.9) !important;
}
#tabdescription .block-after-indent strong,
#tabdescription .block-after-indent a {
  color: #fff !important;
}

#tabdescription .block-after-indent .atbtn,
#tabdescription .form-block--style3 .atbtn {
  background: #fff !important;
  color: var(--sf-primary) !important;
  border-radius: var(--sf-radius-full) !important;
  padding: 14px 36px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: all var(--sf-transition);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#tabdescription .block-after-indent .atbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.2);
}


/* ── 17. Related Tours / Links Section ─────────────────────────── */
.entry-content .atgrid__item {
  border-radius: var(--sf-radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--sf-shadow-md);
  transition: all .4s var(--sf-ease);
  border: 1px solid var(--sf-border);
  background: var(--sf-surface);
}
.entry-content .atgrid__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--sf-shadow-xl);
}

.atgrid__item__top__image img {
  transition: transform .6s var(--sf-ease);
}
.atgrid__item:hover .atgrid__item__top__image img {
  transform: scale(1.08);
}

.atgrid__item__title a {
  color: var(--sf-text) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  transition: color var(--sf-transition);
}
.atgrid__item__title a:hover {
  color: var(--sf-primary) !important;
}

.atgrid__item__price {
  color: var(--sf-primary) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}


/* ── 18. Comments / Reviews Section ────────────────────────────── */
#comments,
.comments-area {
  background: var(--sf-surface);
  border-radius: var(--sf-radius-lg);
  padding: var(--sf-space-xl);
  box-shadow: var(--sf-shadow-sm);
  border: 1px solid var(--sf-border);
}

.comment-body {
  border-radius: var(--sf-radius-md);
  padding: 20px;
  background: var(--sf-surface-alt);
  margin-bottom: var(--sf-space-md);
  border: 1px solid var(--sf-border-light);
  transition: all var(--sf-transition);
}
.comment-body:hover {
  box-shadow: var(--sf-shadow-sm);
}


/* ── 19. Footer ────────────────────────────────────────────────── */
.footer {
  background: linear-gradient(180deg, #0F1923 0%, #1A2332 100%) !important;
  color: rgba(255,255,255,.7) !important;
  padding: 60px 0 0 !important;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,180,216,.3), transparent);
}

.footer a {
  color: rgba(255,255,255,.7) !important;
  transition: all var(--sf-transition);
}
.footer a:hover {
  color: var(--sf-primary-light) !important;
}

.footer__copyright {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
  margin-top: 40px;
}

.footer__bottom {
  background: transparent !important;
}


/* ── 20. Scroll-to-Top Button ──────────────────────────────────── */
.footer__arrow-top,
.back-to-top {
  background: var(--sf-primary) !important;
  border-radius: var(--sf-radius-full) !important;
  width: 48px !important;
  height: 48px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,119,182,.3);
  transition: all var(--sf-transition);
}
.footer__arrow-top:hover,
.back-to-top:hover {
  background: var(--sf-primary-light) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,180,216,.4);
}


/* ── 21. Separators / Dividers ─────────────────────────────────── */
hr,
#tabdescription hr,
.separator {
  border: none !important;
  height: 1px !important;
  background: var(--sf-border) !important;
  margin: 28px 0 !important;
}


/* ── 22. Responsive / Mobile ───────────────────────────────────── */
@media (max-width: 768px) {
  .header-section__content {
    padding: 50px 0 40px !important;
  }

  .header-section__title h1 {
    font-size: 26px !important;
  }

  .item-attributes {
    flex-direction: column;
  }

  #tabdescription,
  .tab-content {
    padding: var(--sf-space-lg) !important;
  }

  .booking-form-wrapper,
  .form-block--tour-booking {
    padding: 24px 20px 20px !important;
    border-radius: var(--sf-radius-lg) !important;
  }

  .amount {
    font-size: 28px !important;
  }

  .form-block__button {
    width: 100%;
    text-align: center;
    padding: 16px !important;
  }

  .list-block--tour-tabs {
    border-radius: var(--sf-radius-md) !important;
  }
  .list-block--tour-tabs a {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  :root {
    --sf-space-xl: 24px;
    --sf-space-2xl: 32px;
  }

  .header-section__title h1 {
    font-size: 22px !important;
  }
}


/* ── 23. Animations / Micro-interactions ───────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Stagger entrance for attribute items */
.item-attributes__item {
  animation: fadeInUp .5s var(--sf-ease) backwards;
}
.item-attributes__item:nth-child(1) { animation-delay: .1s; }
.item-attributes__item:nth-child(2) { animation-delay: .2s; }
.item-attributes__item:nth-child(3) { animation-delay: .3s; }

/* Smooth content reveal */
#tabdescription,
.booking-form-wrapper {
  animation: fadeInUp .6s var(--sf-ease) backwards;
  animation-delay: .15s;
}


/* ── 24. Dark Mode Ready (bonus: respects system preference) ──── */
@media (prefers-color-scheme: dark) {
  :root {
    --sf-bg: #0F1923;
    --sf-surface: #1A2332;
    --sf-surface-alt: #243044;
    --sf-text: #E8EDF3;
    --sf-text-secondary: #A0B0C4;
    --sf-text-muted: #6B7D94;
    --sf-border: #2A3A50;
    --sf-border-light: #1E2D40;
  }

  body {
    background: var(--sf-bg) !important;
    color: var(--sf-text) !important;
  }

  /* Ensure images have subtle rounding in dark */
  img {
    border-radius: var(--sf-radius-sm);
  }
}


/* ── 25. Print Styles ──────────────────────────────────────────── */
@media print {
  .header,
  .footer,
  .booking-form-wrapper,
  .form-block__button,
  .list-block--tour-tabs {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  #tabdescription {
    box-shadow: none !important;
    border: none !important;
  }
}

/* ── 25. Consistent Tables on Mobile ─────────────────── */
@media (max-width: 767px) {
  #tabdescription table,
  .tours-tabs__content table {
    display: table !important;
    overflow: hidden;
    width: 100%;
    white-space: normal;
  }
  #tabdescription table tbody,
  .tours-tabs__content table tbody {
    display: table-row-group;
  }
  #tabdescription table tr,
  .tours-tabs__content table tr {
    display: table-row;
  }
  #tabdescription table td,
  #tabdescription table th,
  .tours-tabs__content table td,
  .tours-tabs__content table th {
    display: table-cell;
  }
}

/* ── 26. Layout Fixes ────────────────────────── */
.tab-content.hidden-xs, .tours-tabs__content.padding-all{
 padding: 0 !important;
}

.col-md-6 {
 max-width: 49% !important;
}

h2, h3, h4 {
 display: block;
 width: 100%;
}

/* ── 27. Bullets like new site ────────────────────────── */
#tabdescription ul:not([class*="tour-categories"]),
#tabdescription ul:not([class*="list-block"]),
.tours-tabs__content ul:not([class*="tour-categories"]),
.tours-tabs__content ul:not([class*="list-block"]) {
  list-style: disc !important;
  padding-left: 20px !important;
}
#tabdescription ul:not([class*="tour-categories"]) li,

}

/* ── 29. Checkmarks like new site ────────────────────────── */
#tabdescription .icon-tick--on,
#tabdescription .fa-check.icon-tick--on {
  display: inline-block !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important; font-weight: 900 !important;
  color: #01CB68 !important;
  font-size: 14pt !important;
  width: auto !important;
  height: auto !important;
  line-height: inherit !important;
  float: none !important;
}
#tabdescription .icon-tick--off {
  display: inline-block !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important; font-weight: 900 !important;
  color: #EB7591 !important;
  font-size: 14pt !important;
}
#tabdescription p .fa-check,
.entry-content .icon-tick {
  display: inline !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  color: #01CB68 !important;

}

/* ── 29. Checkmarks like new site ────────────────────────── */
#tabdescription .icon-tick--on,
#tabdescription .fa-check.icon-tick--on {
  display: inline-block !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  font-weight: 900 !important;
  color: #01CB68 !important;
  font-size: 14pt !important;
  width: auto !important;
  height: auto !important;
  line-height: inherit !important;
  float: none !important;
  border: none !important;
  box-shadow: none !important;
}
#tabdescription .icon-tick--off {
  display: inline-block !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  font-weight: 900 !important;
  color: #EB7591 !important;
  font-size: 14pt !important;
}
/* Force ALL checkmark icons to show */
#tabdescription .fa-check::before {
  font-family: "Font Awesome 5 Free" !important;
  content: "\f00c" !important;
  font-weight: 900 !important;
  color: inherit !important;
  display: inline !important;
}

/* ── Override: normal bullet points ───────────────────── */
.tours-tabs__content ul:not([class]) li::before {
  content: none !important;
}
.tours-tabs__content ul:not([class]) {
  list-style: disc !important;
  padding-left: 20px !important;
}

/* ── Force normal bullets ─────────────────────────────── */
.tours-tabs__content ul:not([class]) {
  list-style: disc !important;
  padding-left: 20px !important;
}
.tours-tabs__content ul:not([class]) li {
  position: relative;
}
.tours-tabs__content ul:not([class]) li::before {
  display: none !important;
  content: '' !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

/* ── Hide ::after pseudo on bullets ──────────────────── */
.tours-tabs__content ul:not([class]) li::after {
  display: none !important;
}