/* Tours page and search widget in the shared site design system. */
.tours-page {
  --search-fields-padding: 30px;
  --search-fields-gap: 16px;
  --search-field-padding: 10px 14px 9px;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  accent-color: var(--widget-action);
}

.tours-page-content { background: var(--paper); }

.tours-page-search > .container { max-width: 1600px; padding: 0; }

.tours-page-intro {
  max-width: 740px;
  margin: 0 0 2.25rem;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
}

.tours-page-intro a { border-bottom: 1px solid currentColor; color: var(--ink); }
.tours-page .page { max-width: none; padding: 0; }

/* Widget frame and mode tabs. */
.tours-page .widget {
  overflow: visible;
  border: 1px solid var(--widget-border);
  border-radius: 0 6px 6px 6px;
  background: var(--widget-surface);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--ink) 10%, transparent);
}

.tours-page .search-tabs { gap: 6px; margin: 0 0 -1px; }

.tours-page .search-tab {
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--widget-border);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  color: var(--muted);
  background: var(--paper);
  box-shadow: none;
  font-size: 15px;
  font-weight: 750;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.tours-page .search-tab:hover { color: var(--ink); background: var(--widget-head); }

.tours-page .search-tab.active {
  border-color: var(--widget-border);
  color: var(--ink);
  background: var(--widget-head);
}

/* Main search area. */
.tours-page .head,
.tours-page .hot-filters {
  padding: var(--search-fields-padding);
  border-radius: 0;
  background: var(--widget-head);
}

.tours-page .main-fields,
.tours-page .hot-main-fields { gap: var(--search-fields-gap); }

.tours-page .field-card,
.tours-page .tourists,
.tours-page .hot-filters label,
.tours-page .control,
.tours-page .control summary {
  border: 1px solid var(--widget-border);
  border-radius: 4px;
  color: var(--ink);
  background: var(--widget-field);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent);
}

.tours-page .field-card:hover,
.tours-page .tourists:hover,
.tours-page .hot-filters label:hover,
.tours-page .control:hover { border-color: var(--accent-strong); }

.tours-page .field-card:focus-within,
.tours-page .tourists:focus-within,
.tours-page .hot-filters label:focus-within,
.tours-page .control:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
}

.tours-page .label,
.tours-page .hot-filters label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .055em;
}

.tours-page .field-card select,
.tours-page .field-card input,
.tours-page .tourist-value,
.tours-page .date-value,
.tours-page .nights-value,
.tours-page .search-field-value,
.tours-page .hot-filters select,
.tours-page .control select {
  color: var(--ink);
  background: transparent;
}

/* Native select menus inherit the active theme's color scheme. */
.tours-page select,
.tours-page select option,
.tours-page select optgroup {
  color: var(--ink);
  background: var(--widget-field);
}

.tours-page select option:checked {
  color: var(--widget-selected-text);
  background: var(--widget-selected) linear-gradient(var(--widget-selected), var(--widget-selected));
}

.tours-page select option:hover,
.tours-page select option:focus,
.tours-page select option:active {
  color: var(--widget-selected-text) !important;
  background: var(--widget-action) linear-gradient(var(--widget-action), var(--widget-action)) !important;
}

/* Custom single-select popup: consistent colors in every browser. */
.tours-page .custom-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.tours-page .custom-select { position: relative; width: 100%; min-width: 0; }

.tours-page .custom-select-button {
  position: relative;
  width: 100%;
  min-height: 24px;
  padding: 0 28px 0 0;
  overflow: hidden;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tours-page .custom-select-button::after {
  position: absolute;
  top: 50%;
  right: 3px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  content: '';
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}

.tours-page .custom-select.open .custom-select-button::after {
  transform: translateY(-25%) rotate(225deg);
}

.tours-page .custom-select-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.tours-page .custom-select.disabled .custom-select-button { color: var(--muted); cursor: not-allowed; }

.tours-page .custom-select-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: -14px;
  min-width: calc(100% + 28px);
  max-width: min(420px, calc(100vw - 32px));
  max-height: 310px;
  padding: 3px;
  overflow: auto;
  border: 1px solid var(--widget-border);
  border-radius: 5px;
  color: var(--ink);
  background: var(--widget-field);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--ink) 22%, transparent);
}

.tours-page .custom-select-list[hidden] { display: none; }

.tours-page .custom-select-option {
  display: block;
  width: 100%;
  min-height: 29px;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 3px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
}

.tours-page .custom-select-option:hover,
.tours-page .custom-select-option.active {
  color: var(--widget-selected-text);
  background: var(--widget-selected);
}

.tours-page .custom-select-option[aria-selected='true'] {
  color: var(--widget-action-text);
  background: var(--widget-action);
  font-weight: 750;
}

.tours-page .custom-select-option:disabled { color: var(--muted); background: transparent; cursor: default; }

.tours-page .region-popup { width: min(420px, calc(100vw - 32px)); }

.tours-page .custom-multiselect-list {
  display: grid;
  max-height: 280px;
  padding: 3px;
  overflow: auto;
  border: 1px solid var(--widget-border);
  border-radius: 5px;
  background: var(--widget-field);
}

.tours-page .custom-multiselect-list .custom-select-option[aria-selected='true'] {
  color: var(--widget-action-text);
  background: var(--widget-action);
  font-weight: 750;
}

.tours-page .field-card:has(.custom-select)::after,
.tours-page .hot-filters label:has(.custom-select)::after,
.tours-page .control:has(.custom-select)::after { display: none; }

.tours-page .results-sort .custom-select { width: auto; min-width: 190px; }
.tours-page .results-sort .custom-select-button {
  min-height: 31px;
  padding: 0 30px 0 9px;
  border: 1px solid var(--widget-border);
  border-radius: 3px;
  background: var(--widget-field);
  font-size: 13px;
  font-weight: 400;
}
.tours-page .results-sort .custom-select-list { right: 0; left: auto; min-width: 240px; }

.tours-page .field-card:has(select)::after,
.tours-page .tourists summary::after,
.tours-page .hot-filters label:has(select)::after,
.tours-page .control:has(select)::after,
.tours-page .control summary::after { border-color: var(--muted); }

/* Secondary filters and the single primary action. */
.tours-page .filters,
.tours-page .search-action,
.tours-page .hot-bottom { background: var(--widget-surface); }

.tours-page .filters { border-top: 1px solid var(--widget-border); }

.tours-page .search-action,
.tours-page .hot-bottom {
  padding: 22px 30px 26px;
  border-top: 1px solid var(--widget-border);
}

.tours-page .search {
  min-height: 54px;
  border: 1px solid var(--widget-action);
  border-radius: 4px;
  color: var(--widget-action-text);
  background: var(--widget-action);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--widget-action) 28%, transparent);
  font-size: 17px;
  font-weight: 750;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tours-page .search:not(:disabled):hover,
.tours-page .search:not(:disabled):focus-visible {
  border-color: var(--widget-action-hover);
  background: var(--widget-action-hover);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--widget-action) 32%, transparent);
  transform: translateY(-1px);
}

.tours-page .search:disabled {
  border-color: var(--widget-disabled);
  color: var(--widget-disabled-text);
  background: var(--widget-disabled);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.tours-page .stars,
.tours-page .flight-options,
.tours-page .toggle,
.tours-page .expand summary { color: var(--muted); }
.tours-page #budget-summary .budget-value { color: var(--ink); }
.tours-page .star { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.tours-page .star.active { color: var(--accent-strong); }
.tours-page .flight-options input { accent-color: var(--accent-strong); }

/* Popovers, calendars and counters. */
.tours-page .tourists-menu,
.tours-page .calendar-popup,
.tours-page .nights-popup,
.tours-page .popup,
.tours-page .order-dialog {
  border: 1px solid var(--widget-border);
  border-radius: 6px;
  color: var(--ink);
  background: var(--widget-field);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--ink) 18%, transparent);
}

.tours-page .popup label,
.tours-page .popup p,
.tours-page .budget label,
.tours-page .flight-options,
.tours-page .order-dialog p,
.tours-page .order-dialog label { color: var(--muted); }

.tours-page .popup input,
.tours-page .popup select {
  border-color: var(--widget-border);
  color: var(--ink);
  background: var(--widget-field);
}

.tours-page .popup input:focus,
.tours-page .popup select:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.tours-page .counter,
.tours-page .child-row,
.tours-page .add-child,
.tours-page .calendar-note button,
.tours-page .age-grid button,
.tours-page .day.available,
.tours-page .night.available,
.tours-page .day.in-range {
  color: var(--ink);
  background: var(--widget-soft);
}

.tours-page .counter button,
.tours-page .child-remove,
.tours-page .confirm-tourists,
.tours-page .day.selected,
.tours-page .night.selected {
  color: var(--widget-action-text);
  background: var(--widget-action);
}

.tours-page .day.available:hover { background: var(--accent-soft); }
.tours-page .weekday { color: var(--accent-strong); }
.tours-page .weekday.weekend,
.tours-page .status.error,
.tours-page .info-error { color: var(--danger); }

.tours-page .month-title,
.tours-page .month-title small { color: var(--ink); }

/* Status, results and hotel cards. */
.tours-page .status,
.tours-page .results-info,
.tours-page .results-toolbar span,
.tours-page .results-sort,
.tours-page .place,
.tours-page .note,
.tours-page .hotel-rating,
.tours-page .disclaimer,
.tours-page .hotel-info-content,
.tours-page .tour-details { color: var(--muted); }

.tours-page .status-spinner {
  border-color: var(--widget-border);
  border-top-color: var(--accent-strong);
}

.tours-page .results-layout,
.tours-page .results-sort select,
.tours-page .results-pagination button {
  border-color: var(--widget-border);
  color: var(--muted);
  background: var(--widget-field);
}

.tours-page .results-layout[aria-pressed='true'],
.tours-page .results-pagination button[aria-current='page'] {
  border-color: var(--widget-selected);
  color: var(--widget-selected-text);
  background: var(--widget-selected);
}

.tours-page .card,
.tours-page .empty {
  border-color: var(--widget-border);
  border-radius: 5px;
  color: var(--ink);
  background: var(--widget-field);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 8%, transparent);
}

.tours-page .card h2,
.tours-page .order-dialog h2,
.tours-page .hotel-info-content h3 { color: var(--ink); }
.tours-page .hotel-info-button { width: auto; min-height: 0; margin: 8px 8px 0 0; padding: 8px 12px; border: 1px solid var(--widget-border); border-radius: 999px; color: var(--accent-strong); background: transparent; cursor: pointer; font: inherit; font-size: .88rem; }
.tours-page .hotel-info-button:hover, .tours-page .hotel-info-button:focus-visible { background: var(--widget-soft); }
.tours-page .external-review-links { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.tours-page .external-review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px 24px; }
.tours-page .external-review-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent-strong); text-decoration: none; }
.tours-page .hot-offer-click-area { cursor: pointer; border-radius: 3px; }
.tours-page .hot-offer-click-area:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.tours-page .hot-offer-actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: 2.67px; row-gap: 10px; margin-top: 10px; }
.tours-page .hot-offer-actions .hotel-info-button { margin-top: 0; }
.tours-page .hot-offer-actions .order-button { flex: 1 1 auto; max-width: 300px; min-height: 0; margin-top: 0; padding: 8px 12px; border: 1px solid var(--widget-border); border-radius: 999px; color: var(--widget-action-text); background: var(--widget-action); font: inherit; font-size: .88rem; }
.tours-page .hot-offer-actions .order-button:hover,
.tours-page .hot-offer-actions .order-button:focus-visible { color: var(--widget-action-text); background: var(--widget-action); }
.hotel-info-modal { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; padding: 20px; background: var(--overlay-color); }
.hotel-info-modal[hidden] { display: none; }
.hotel-info-dialog { position: relative; display: flex; flex-direction: column; width: min(100%, 760px); max-height: min(84vh, 760px); overflow: hidden; padding: 28px; border: 1px solid var(--widget-border); border-radius: 8px; color: var(--ink); background: var(--widget-field); box-shadow: 0 20px 60px var(--shadow-color); }
.hotel-info-dialog h2 { margin: 0 38px 20px 0; color: var(--ink); font-weight: 400; }
.hotel-info-dialog.has-external-review-links h2 { margin-bottom: 0; }
.hotel-info-open { overflow: hidden; }
.hotel-info-dialog .hotel-info-content { min-height: 0; overflow: auto; color: var(--muted); }
.hotel-info-dialog .hotel-map-dialog { height: min(55vh, 440px); min-height: 280px; margin-top: 4px; }
@media (max-width: 620px) { .hotel-info-dialog { max-height: 90vh; padding: 22px 18px; } }
.tours-page .card h2 { font-weight: 400; }
.tours-page .order-dialog h2 { font-weight: 400; }
.tours-page .price { color: var(--accent-strong); }
.tours-page .tour-link:hover .tour-price,
.tours-page .tour-link:focus-visible .tour-price { color: var(--accent-strong); }
.tours-page .tour-order-target { cursor: pointer; }
.tours-page .tour-order-target:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.tours-page .tour-options,
.tours-page .hotel-info { border-color: var(--widget-border); background: transparent; }
.tours-page .tour-options[open],
.tours-page .hotel-info[open] { border-color: var(--widget-border); background: var(--widget-surface); }
.tours-page .tour-options summary,
.tours-page .hotel-info > summary,
.tours-page .map-link { color: var(--accent-strong); }

.tours-page .discount-badge { color: var(--widget-action-text); background: var(--widget-action); }
.tours-page .request-preview,
.tours-page .request-debug,
.tours-page .review.topic-match { border-color: var(--widget-border); background: var(--widget-soft); }

.tours-page .order-dialog input,
.tours-page .order-dialog textarea {
  border-color: var(--widget-border);
  color: var(--ink);
  background: var(--widget-field);
}

.tours-page .order-button,
.tours-page .order-actions .submit { color: var(--widget-action-text); background: var(--widget-action); }
.tours-page .order-actions .cancel { color: var(--ink); background: var(--widget-soft); }
.tours-page .site-footer { display: none; }

@media (max-width: 980px) {
  .tours-page { --search-fields-padding: 24px; --search-fields-gap: 14px; }
}

@media (max-width: 620px) {
  .tours-page { --search-fields-padding: 16px; --search-fields-gap: 12px; }
  .tours-page .search-tab { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .tours-page .search-action,
  .tours-page .hot-bottom { padding: 18px 16px; }
}