/* ============================================================
   Orlando Travel Company — Tours listing (static mockup)
   ============================================================ */:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --amber: #f5a623;
  --amber-btn: #f5b721;
  --red: #e4483d;
  --star: #f5a623;
  --green: #16a34a;

  --bg: #f4f5f7;
  --card: #ffffff;
  --text: #1f2733;
  --heading: #141b26;
  --muted: #6b7280;
  --border: #e7e9ee;
  --footer-bg: #1b212b;
  --footer-bottom: #141a22;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px rgba(20, 27, 38, 0.08);
  --shadow-sm: 0 4px 14px rgba(20, 27, 38, 0.06);
  --container: 1200px;
}
#vc-app * {
  box-sizing: border-box;
}
#vc-app a {
  color: inherit;
  text-decoration: none;
}
#vc-app img {
  max-width: 100%;
  display: block;
}
#vc-app .container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- Buttons ------------------------------------------------ */
#vc-app .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  
}
#vc-app .btn:active {
  transform: translateY(1px);
}
#vc-app .btn-primary {
  background: var(--primary);
  color: #fff;
}
#vc-app .btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}
#vc-app .btn-amber {
  background: var(--amber-btn);
  color: #3a2c00;
}
#vc-app .btn-amber:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 20px rgba(245, 183, 33, 0.4);
}
#vc-app .btn-outline {
  background: #fff;
  color: var(--primary);
  border: 1px solid #cdd7f5;
}
#vc-app .btn-outline:hover {
  background: #f2f6ff;
}

/* ---- Top accent + header ----------------------------------- */

/* ---- Hero --------------------------------------------------- */
#vc-app .hero {
  position: relative;
  min-height: 340px;
  /* Override in your theme: .hero { --vc-hero-bg: url(...); } */
  background: var(--vc-hero-bg, linear-gradient(135deg, #12203c, #26467f))
    center/cover no-repeat;
  display: flex;
  align-items: center;
  padding-bottom: 70px;
}
#vc-app .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 22, 45, 0.55),
    rgba(11, 22, 45, 0.72)
  );
}
#vc-app .hero-content {
  position: relative;
  color: #fff;
}
#vc-app .breadcrumb {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 14px;
}
#vc-app .breadcrumb a:hover {
  text-decoration: underline;
}
#vc-app .breadcrumb .current {
  opacity: 0.8;
}
#vc-app .breadcrumb span {
  margin: 0 4px;
}
#vc-app .hero h1 {
  font-size: 44px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.5px;
}
#vc-app .hero p {
  font-size: 16px;
  opacity: 0.92;
  margin: 0;
}

/* ---- Search bar (overlaps hero) ---------------------------- */
#vc-app .search-bar {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-top: -55px;
  position: relative;
  z-index: 5;
}
#vc-app .search-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
#vc-app .search-row--options {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
#vc-app .field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: #fff;
  min-height: 52px;
}
#vc-app .field-search {
  flex: 2.2;
  flex-direction: row;
  align-items: center;
}
#vc-app .field-search input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
  
  color: var(--text);
  background: transparent;
}
#vc-app .field-search-btn {
  border: none;
  background: none;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  padding: 4px;
}
#vc-app .field-select {
  flex: 1;
}
#vc-app .field-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}
#vc-app .field-select select {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  
  color: var(--text);
  width: 100%;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 16px;
}
#vc-app .btn-search {
  padding-left: 32px;
  padding-right: 32px;
}
#vc-app .chips {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
#vc-app .chip,
#vc-app .check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #4b5563;
  cursor: pointer;
}
#vc-app .chip input,
#vc-app .check input {
  appearance: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid #c4cad4;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  transition: 0.15s;
}
#vc-app .chip input:checked,
#vc-app .check input:checked {
  background: var(--primary);
  border-color: var(--primary);
}
#vc-app .chip input:checked::after,
#vc-app .check input:checked::after {
  content: "✓";
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#vc-app .sort-controls {
  display: flex;
  align-items: center;
  gap: 18px;
}
#vc-app .sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}
#vc-app .sort > span {
  white-space: nowrap;
  flex: 0 0 auto;
}
#vc-app .sort .cs {
  flex: 1 1 auto;
  width: auto;
  min-width: 160px;
}
#vc-app .sort select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  background: #fff;
}
#vc-app .view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
#vc-app .view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: #fff;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  
}
#vc-app .view-toggle button.active {
  background: #eef3ff;
  color: var(--primary);
}

/* ---- Custom select (styled dropdown) ----------------------- */
#vc-app .cs {
  position: relative;
  width: 100%;
}
#vc-app .cs__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
#vc-app .cs__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
#vc-app .cs__trigger:hover {
  border-color: #c7cfdb;
}
#vc-app .cs[data-open="true"] .cs__trigger {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
#vc-app .cs__chev {
  color: #6b7280;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
#vc-app .cs[data-open="true"] .cs__chev {
  transform: rotate(180deg);
}

/* bare variant: parent .field already provides the border */
#vc-app .cs--bare .cs__trigger {
  border: none;
  padding: 0;
  background: transparent;
}
#vc-app .cs--bare.cs[data-open="true"] .cs__trigger {
  box-shadow: none;
}
#vc-app .cs__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: -6px;
  right: -6px;
  z-index: 60;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(20, 27, 38, 0.18);
  max-height: 300px;
  overflow: auto;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition:
    opacity 0.17s ease,
    transform 0.17s ease;
}
#vc-app .cs[data-open="true"] .cs__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#vc-app .cs--bare .cs__panel {
  left: -12px;
  right: -12px;
}
#vc-app .cs__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
#vc-app .cs__option:hover,
#vc-app .cs__option.is-active {
  background: #f2f6ff;
  color: var(--primary);
}
#vc-app .cs__option[aria-selected="true"] {
  background: #eef3ff;
  color: var(--primary);
  font-weight: 600;
}
#vc-app .cs__option[aria-selected="true"]::after {
  content: "✓";
  font-size: 13px;
}

/* thin scrollbar for the panel */
#vc-app .cs__panel::-webkit-scrollbar {
  width: 8px;
}
#vc-app .cs__panel::-webkit-scrollbar-thumb {
  background: #d7dbe3;
  border-radius: 8px;
}

/* ---- Page layout ------------------------------------------- */
#vc-app .page-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  margin-top: 30px;
}

/* ---- Sidebar ------------------------------------------------ */
#vc-app .filters-toggle {
  display: none; /* desktop: sidebar always visible */
  align-items: center;
  gap: 8px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  color: var(--heading);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
#vc-app .filters-toggle .ft-chev {
  margin-left: auto;
  color: #9aa3af;
  transition: transform 0.2s ease;
}
#vc-app .sidebar.show-filters .filters-toggle .ft-chev {
  transform: rotate(180deg);
}
#vc-app .filter-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 20px;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
#vc-app .filter-card::-webkit-scrollbar {
  width: 8px;
}
#vc-app .filter-card::-webkit-scrollbar-thumb {
  background: #d7dbe3;
  border-radius: 8px;
}
#vc-app .filter-title {
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--heading);
}
#vc-app .filter-group {
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
#vc-app .filter-group:first-of-type {
  border-top: none;
  padding-top: 12px;
}
#vc-app .filter-group h3 {
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--heading);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
#vc-app .filter-group.collapsed h3 {
  margin-bottom: 0;
}
#vc-app .filter-group h3 .fg-chev {
  color: #9aa3af;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
#vc-app .filter-group.collapsed h3 .fg-chev {
  transform: rotate(-90deg);
}
#vc-app .filter-group__body {
  overflow: hidden;
  transition: max-height 0.25s ease;
}

/* Filters button count badge */
#vc-app .ft-count {
  background: var(--primary);
  color: #fff;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#vc-app .ft-count[hidden] {
  display: none;
}

/* Modal chrome — hidden on desktop, shown inside the mobile modal */
#vc-app .filter-modal-head,
#vc-app .filter-modal-foot,
#vc-app .filters-backdrop {
  display: none;
}

/* Active filter chips */
#vc-app .active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 18px;
}
#vc-app .active-filters[hidden] {
  display: none;
}
#vc-app .af-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef3ff;
  color: var(--primary);
  border: 1px solid #d6e0fb;
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
  font-size: 13px;
  font-weight: 500;
}
#vc-app .af-chip button {
  border: none;
  background: rgba(37, 99, 235, 0.15);
  color: var(--primary);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#vc-app .af-chip button:hover {
  background: var(--primary);
  color: #fff;
}
#vc-app .af-clear {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
#vc-app .af-clear:hover {
  color: var(--primary);
}
#vc-app .check {
  display: flex;
  margin-bottom: 10px;
}
#vc-app .check .count {
  color: var(--muted);
  font-size: 13px;
}
#vc-app .range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 8px;
}

/* Dual-handle price range slider */
#vc-app .price-range {
  position: relative;
  height: 26px;
}
#vc-app .pr-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 5px;
  transform: translateY(-50%);
  background: #e2e6ee;
  border-radius: 5px;
}
#vc-app .pr-fill {
  position: absolute;
  height: 100%;
  background: var(--primary);
  border-radius: 5px;
}
#vc-app .price-range input[type="range"] {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 18px; /* match the thumb so it centers on the track */
  transform: translateY(-50%);
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
#vc-app .price-range input[type="range"]::-webkit-slider-runnable-track {
  background: none;
  border: none;
}
#vc-app .price-range input[type="range"]::-moz-range-track {
  background: none;
  border: none;
}
#vc-app .price-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(20, 27, 38, 0.25);
  margin-top: 0;
}
#vc-app .price-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(20, 27, 38, 0.25);
}
#vc-app .rating-row .stars {
  letter-spacing: 1px;
}
#vc-app .stars {
  color: var(--star);
  font-size: 15px;
  white-space: nowrap;
}
#vc-app .stars.muted,
#vc-app .stars .muted {
  color: #d6dae1;
}
#vc-app .btn-clear {
  width: 100%;
  margin-top: 8px;
}

/* ---- Results ------------------------------------------------ */
#vc-app .results-count {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 16px;
}
#vc-app .tour-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ---- Tour card --------------------------------------------- */
#vc-app .tour-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
#vc-app .tour-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
#vc-app .tour-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
#vc-app .tour-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
#vc-app .tour-card:hover .tour-media img {
  transform: scale(1.06);
}
#vc-app .badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
#vc-app .badge--blue {
  background: var(--primary);
}
#vc-app .badge--amber {
  background: var(--amber);
}
#vc-app .badge--red {
  background: var(--red);
}
#vc-app .tour-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
#vc-app .tour-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 8px;
  line-height: 1.35;
}
#vc-app .tour-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  font-size: 13px;
}
#vc-app .tour-rating .reviews {
  color: var(--muted);
}
#vc-app .tour-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}
#vc-app .tour-meta div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #55606e;
}
#vc-app .tour-meta svg {
  color: #9aa3af;
  flex: 0 0 auto;
}
#vc-app .tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
}
#vc-app .price .from {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
#vc-app .price .amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}
#vc-app .btn-details {
  padding: 9px 16px;
  font-size: 13px;
}

/* ---- List view --------------------------------------------- */
#vc-app .tour-grid.list-view {
  grid-template-columns: 1fr;
  gap: 16px;
}
#vc-app .tour-grid.list-view .tour-card {
  flex-direction: row;
}
#vc-app .tour-grid.list-view .tour-media {
  width: 300px;
  aspect-ratio: auto;
  flex: 0 0 auto;
}
#vc-app .tour-grid.list-view .tour-body {
  flex: 1;
}

/* ---- Pagination -------------------------------------------- */
#vc-app .pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 34px 0 10px;
}
#vc-app .pagination a {
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: 0.15s;
}
#vc-app .pagination a:hover {
  color: var(--primary);
}
#vc-app .pagination a.active {
  background: var(--primary);
  color: #fff;
}

/* ---- Promo -------------------------------------------------- */

/* ---- Footer ------------------------------------------------- */

/* ---- Responsive -------------------------------------------- */

@media (max-width: 980px) {#vc-app .page-layout {
    grid-template-columns: 1fr;
  }
#vc-app .filters-toggle {
    display: flex;
    margin-bottom: 16px;
  }

/* Filters open as a bottom-sheet modal on mobile */
#vc-app .filter-card {
    display: none;
  }
#vc-app .filters-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(15, 21, 32, 0.55);
    animation: vc-fade 0.2s ease;
  }
body.filters-open {
    overflow: hidden;
  }
body.filters-open #vc-app .filters-backdrop {
    display: block;
  }
body.filters-open #vc-app .filter-card {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 100;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
    padding: 0 20px 88px; /* no top padding (header sits flush); room for footer */
    animation: vc-slideup 0.28s ease;
  }
body.filters-open #vc-app .filter-title {
    display: none;
  }

/* modal header already says "Filters" */
#vc-app .filter-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    margin: 0 -20px 4px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    font-weight: 700;
    font-size: 17px;
    color: var(--heading);
    
  }
body.filters-open #vc-app .filter-group:first-of-type {
    padding-top: 16px;
  }
#vc-app .filter-close {
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
  }
#vc-app .filter-modal-foot {
    display: flex;
    gap: 12px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 101;
    background: #fff;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(20, 27, 38, 0.08);
  }
#vc-app .filter-modal-foot .btn {
    flex: 1;
  }
#vc-app .btn-clear {
    display: none;
  }

/* the modal footer provides Clear on mobile */
#vc-app .tour-grid {
    grid-template-columns: repeat(2, 1fr);
  }

/* Sort + view controls stack into one column on mobile */
#vc-app .search-row--options .sort-controls {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
#vc-app .sort {
    width: 100%;
  }
#vc-app .sort select {
    flex: 1;
  }
#vc-app .view-toggle {
    width: 100%;
  }
#vc-app .view-toggle button {
    flex: 1;
    justify-content: center;
  }

  @keyframes vc-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes vc-slideup {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }#vc-app .search-row {
    flex-wrap: wrap;
  }
#vc-app .field-search {
    flex: 1 1 100%;
  }
#vc-app .field-select {
    flex: 1 1 30%;
  }

}

@media (max-width: 760px) {#vc-app .hero h1 {
    font-size: 32px;
  }
#vc-app .tour-grid {
    grid-template-columns: 1fr;
  }
#vc-app .tour-grid.list-view .tour-card {
    flex-direction: column;
  }
#vc-app .tour-grid.list-view .tour-media {
    width: 100%;
    aspect-ratio: 16/10;
  }
#vc-app .search-row--options {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

}
/* ---- Small phones: optimized down to 350px ------------------ */

@media (max-width: 480px) {#vc-app .container {
    padding: 0 14px;
  }
#vc-app .hero {
    min-height: 260px;
    padding-bottom: 58px;
  }
#vc-app .hero h1 {
    font-size: 25px;
  }
#vc-app .hero p {
    font-size: 14px;
  }
#vc-app .search-bar {
    padding: 14px;
    margin-top: -44px;
  }
#vc-app .search-row {
    flex-direction: column;
    gap: 10px;
  }
#vc-app .field,
#vc-app .field-search,
#vc-app .field-select {
    flex: 1 1 100%;
    width: 100%;
  }
#vc-app .btn-search {
    width: 100%;
  }
#vc-app .chips {
    gap: 10px 18px;
  }
#vc-app .sort-controls {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }
#vc-app .sort {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: flex-start;
  }
#vc-app .sort select {
    flex: 1;
  }
#vc-app .view-toggle {
    width: 100%;
  }
#vc-app .view-toggle button {
    flex: 1;
    justify-content: center;
  }
#vc-app .filter-card {
    padding: 18px 16px;
  }
#vc-app .results-count {
    font-size: 13px;
  }
#vc-app .tour-media {
    aspect-ratio: 16 / 9;
  }
#vc-app .pagination a {
    min-width: 34px;
    height: 34px;
  }

}

/* ============================================================
   Base — scoped to #vc-app so the theme can't bleed in.
   Font FAMILY is deliberately inherited from the theme; only
   colors, spacing and sizing are re-asserted here.
   ============================================================ */
#vc-app {
  color: var(--text);
  line-height: 1.5;
}
#vc-app h1,
#vc-app h2,
#vc-app h3,
#vc-app h4 {
  color: var(--heading);
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}
#vc-app p {
  margin: 0;
}
#vc-app ul,
#vc-app ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
#vc-app button {
  cursor: pointer;
}
#vc-app button,
#vc-app input,
#vc-app select,
#vc-app textarea {
  font: inherit;
}
/* Hero sits on a dark image: force light text over any theme heading color. */
#vc-app .hero h1,
#vc-app .hero p,
#vc-app .hero-content,
#vc-app .hero-content a,
#vc-app .breadcrumb a,
#vc-app .breadcrumb .current {
  color: #fff;
}
#vc-app .tour-title a {
  color: var(--heading);
}
#vc-app .tour-title a:hover {
  color: var(--primary);
}
#vc-app .btn-primary,
#vc-app .btn-primary:hover,
#vc-app .btn-details {
  color: #fff;
}
#vc-app .btn-outline {
  color: var(--primary);
}
#vc-app .stars {
  color: var(--star);
}
#vc-app .stars.muted,
#vc-app .stars .muted {
  color: #d6dae1;
}

/* WordPress paginate_links() markup: links are <a>, current is <span>. */
#vc-app .pagination .page-numbers {
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: 0.15s;
  text-decoration: none;
}
#vc-app .pagination a.page-numbers:hover {
  color: var(--primary);
}
#vc-app .pagination .page-numbers.current {
  background: var(--primary);
  color: #fff;
}
#vc-app .pagination .page-numbers.dots {
  background: none;
  box-shadow: none;
}

/* ============================================================
   Full-width canvas — gated twice: this stylesheet only loads on
   Viator pages, AND every rule requires body.vc-fullwidth, which
   VC_Display::body_class() adds only there.
   For Astra the theme filters already do this; the rules below are
   a fallback for themes without a full-width content layout.
   ============================================================ */
#vc-app {
  width: 100%;
}
/* Only the CONTENT container. Astra reuses .ast-container in the header and
   the footer, so this class must never be targeted on its own. */
body.vc-fullwidth #content > .ast-container,
body.vc-fullwidth .site-content > .ast-container,
body.vc-fullwidth #primary,
body.vc-fullwidth #primary > .entry-content {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
body.vc-fullwidth #primary {
  padding-top: 0;
}
/* The theme's post title / meta are redundant: our hero already has them. */
body.vc-fullwidth .ast-single-post-order,
body.vc-fullwidth .entry-header .entry-title {
  display: none;
}

/* ============================================================
   Fixes for running inside a real theme
   ============================================================ */

/* Lucide injects <svg> at its default 24px. Size it per context. */
#vc-app .tour-meta svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}
#vc-app .filters-toggle svg,
#vc-app .view-toggle button svg {
  width: 16px;
  height: 16px;
}

/* Themes (Astra) style every <input> with border/background/padding/height.
   The dual price slider needs a bare canvas or the two thumbs break. */
#vc-app .price-range input[type="range"] {
  border: 0;
  padding: 0;
  min-height: 0;
  box-shadow: none;
  border-radius: 0;
  outline: none;
}
#vc-app .price-range input[type="range"]:focus {
  box-shadow: none;
  outline: none;
}
/* Same for the custom checkboxes/radios, which themes love to restyle. */
#vc-app .chip input,
#vc-app .check input {
  min-height: 0;
  box-shadow: none;
  outline: none;
  padding: 0;
  margin: 0;
}
#vc-app .check input[type="radio"] {
  border-radius: 50%;
}

/* Text inputs inside the search bar: neutralise theme borders/backgrounds. */
#vc-app .field-search input {
  border: 0;
  box-shadow: none;
  outline: none;
  padding: 0;
  min-height: 0;
  background: transparent;
}

/* Quiet trust line in the card body (free cancellation is near-universal,
   so it must not compete with the scarcity badge on the image). */
#vc-app .tour-free {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1c8a4e;
}
#vc-app .tour-free svg {
  width: 14px;
  height: 14px;
}

/* ---- Dual price slider: align track with the thumb travel ----------------
   The thumb centre can only travel between 9px and (width - 9px), because the
   browser clamps the 18px thumb inside the input box. So the visual track must
   be inset by that same 9px, otherwise the handles sit off the ends of the bar.
   The fill is a child of the track, so its JS percentages stay correct. */
#vc-app .pr-track {
  left: 9px;
  right: 9px;
  height: 6px;
  border-radius: 999px;
}
#vc-app .pr-fill {
  top: 0;
  height: 100%;
  border-radius: 999px;
}
/* Kill any native track / theme background showing through. */
#vc-app .price-range input[type="range"] {
  background: transparent;
  accent-color: auto;
}
#vc-app .price-range input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  border: 0;
  height: 18px;
}
#vc-app .price-range input[type="range"]::-moz-range-track {
  background: transparent;
  border: 0;
  height: 18px;
}
#vc-app .price-range input[type="range"]::-moz-range-progress {
  background: transparent;
}

/* ---- Hero typography ---------------------------------------------------- */
#vc-app .hero {
  padding-top: 46px;
}
#vc-app .breadcrumb {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 18px;
}
#vc-app .breadcrumb span {
  margin: 0 6px;
}
#vc-app .hero h1 {
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  max-width: 16ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
}
#vc-app .hero p {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  font-weight: 400;
  opacity: 0.9;
  max-width: 56ch;
}

/* ============================================================
   Dual price slider — final, authoritative rules.
   Two <input type=range> are stacked over a custom track. The
   native track/progress MUST be fully suppressed in every engine,
   otherwise the browser paints its own grey track + accent-colour
   fill underneath ours.
   ============================================================ */
#vc-app .price-range {
  position: relative;
  height: 28px;
}
#vc-app .pr-track {
  position: absolute;
  top: 50%;
  left: 9px;   /* half a thumb: the thumb centre can't reach the edge */
  right: 9px;
  height: 6px;
  transform: translateY(-50%);
  background: #e2e6ee;
  border-radius: 999px;
  overflow: hidden;
}
#vc-app .pr-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
  background: var(--primary);
  border-radius: 999px;
}
#vc-app .price-range input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 18px;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0 !important;
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0;
  pointer-events: none;
}
#vc-app .price-range input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent !important;
  border: 0;
  height: 18px;
}
#vc-app .price-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  margin-top: 0;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(20, 27, 38, 0.3);
  cursor: pointer;
}
#vc-app .price-range input[type="range"]::-moz-range-track {
  background: transparent !important;
  border: 0;
  height: 18px;
}
#vc-app .price-range input[type="range"]::-moz-range-progress {
  background: transparent !important;
}
#vc-app .price-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(20, 27, 38, 0.3);
  cursor: pointer;
}

/* ============================================================
   Price range — noUiSlider skin (replaces the hand-rolled slider)
   ============================================================ */
#vc-app .vc-price-slider.noUi-target {
  height: 6px;
  margin: 16px 9px 0;
  background: #e2e6ee;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}
#vc-app .vc-price-slider .noUi-connects {
  border-radius: 999px;
}
#vc-app .vc-price-slider .noUi-connect {
  background: var(--primary);
}
#vc-app .vc-price-slider.noUi-horizontal .noUi-handle {
  width: 18px;
  height: 18px;
  right: -9px;
  top: -6px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(20, 27, 38, 0.3);
  cursor: grab;
}
#vc-app .vc-price-slider .noUi-handle:active,
#vc-app .vc-price-slider .noUi-handle.noUi-active {
  cursor: grabbing;
}
/* noUiSlider draws two grip lines inside the handle — remove them. */
#vc-app .vc-price-slider .noUi-handle::before,
#vc-app .vc-price-slider .noUi-handle::after {
  display: none;
}
#vc-app .vc-price-slider .noUi-handle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}