.daterangepicker {
    position: absolute;
    color: inherit;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    width: 278px;
    max-width: none;
    padding: 0;
    margin-top: 7px;
    top: 100px;
    left: 20px;
    z-index: 3001;
    display: none;
    font-family: arial;
    font-size: 15px;
    line-height: 1em;
  }
  
  .daterangepicker:before,
  .daterangepicker:after {
    position: absolute;
    display: inline-block;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
  }
  
  .daterangepicker:before {
    top: -7px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #ccc;
  }
  
  .daterangepicker:after {
    top: -6px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
  }
  
  .daterangepicker.opensleft:before {
    right: 9px;
  }
  
  .daterangepicker.opensleft:after {
    right: 10px;
  }
  
  .daterangepicker.openscenter:before {
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto;
  }
  
  .daterangepicker.openscenter:after {
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto;
  }
  
  .daterangepicker.opensright:before {
    left: 9px;
  }
  
  .daterangepicker.opensright:after {
    left: 10px;
  }
  
  .daterangepicker.drop-up {
    margin-top: -7px;
  }
  
  .daterangepicker.drop-up:before {
    top: initial;
    bottom: -7px;
    border-bottom: initial;
    border-top: 7px solid #ccc;
  }
  
  .daterangepicker.drop-up:after {
    top: initial;
    bottom: -6px;
    border-bottom: initial;
    border-top: 6px solid #fff;
  }
  
  .daterangepicker.single .daterangepicker .ranges,
  .daterangepicker.single .drp-calendar {
    float: none;
  }
  
  .daterangepicker.single .drp-selected {
    display: none;
  }
  
  .daterangepicker.show-calendar .drp-calendar {
    display: block;
  }
  
  .daterangepicker.show-calendar .drp-buttons {
    display: block;
  }
  
  .daterangepicker.auto-apply .drp-buttons {
    display: none;
  }
  
  .daterangepicker .drp-calendar {
    display: none;
    max-width: 270px;
  }
  
  .daterangepicker .drp-calendar.left {
    padding: 8px 0 8px 8px;
  }
  
  .daterangepicker .drp-calendar.right {
    padding: 8px;
  }
  
  .daterangepicker .drp-calendar.single .calendar-table {
    border: none;
  }
  
  .daterangepicker .calendar-table .next span,
  .daterangepicker .calendar-table .prev span {
    color: #fff;
    border: solid black;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    display: inline-block;
    padding: 3px;
  }
  
  .daterangepicker .calendar-table .next span {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  
  .daterangepicker .calendar-table .prev span {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }
  
  .persian-daterangepicker-next {
    transform: rotate(135deg) !important;
    -webkit-transform: rotate(135deg) !important;
  }
  
  .persian-daterangepicker-prev {
    transform: rotate(315deg) !important ;
    -webkit-transform: rotate(315deg) !important ;
  }
  
  .daterangepicker .calendar-table th,
  .daterangepicker .calendar-table td {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    min-width: 32px;
    width: 32px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
  }
  
  .daterangepicker .calendar-table {
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: #fff;
  }
  
  .daterangepicker .calendar-table table {
    width: 100%;
    margin: 0;
    border-spacing: 0;
    border-collapse: collapse;
  }
  
  .daterangepicker td.available:hover,
  .daterangepicker th.available:hover {
    background-color: #eee;
    border-color: transparent;
    color: inherit;
  }
  
  .daterangepicker td.week,
  .daterangepicker th.week {
    font-size: 80%;
    color: #ccc;
  }
  
  .daterangepicker td.off,
  .daterangepicker td.off.in-range,
  .daterangepicker td.off.start-date,
  .daterangepicker td.off.end-date {
    background-color: #fff;
    border-color: transparent;
    color: #999;
  }
  
  .daterangepicker td.in-range {
    background-color: #ebf4f8;
    border-color: transparent;
    color: #000;
    border-radius: 0;
  }
  
  .daterangepicker td.start-date {
    border-radius: 0px 4px 4px 0px;
  }
  
  .daterangepicker td.end-date {
    border-radius: 4px 0px 0px 4px;
  }
  
  .daterangepicker td.start-date.end-date {
    border-radius: 4px;
  }
  
  .daterangepicker td.active,
  .daterangepicker td.active:hover {
    background-color: #ff6822;
    border-color: transparent;
    color: #fff;
  }

  /* Official holidays (from DB, next 2 months) — Gregorian cell dates */
  #datepicker-container .daterangepicker td.available.ts-cal-holiday,
  #mobile-datepicker .daterangepicker td.available.ts-cal-holiday {
    color: #c62828;
    font-weight: 600;
  }

  #datepicker-container .daterangepicker td.available.ts-cal-holiday:hover,
  #mobile-datepicker .daterangepicker td.available.ts-cal-holiday:hover {
    color: #b71c1c;
  }

  #datepicker-container .daterangepicker td.ts-cal-holiday.active,
  #datepicker-container .daterangepicker td.ts-cal-holiday.active:hover,
  #datepicker-container .daterangepicker td.ts-cal-holiday.start-date,
  #datepicker-container .daterangepicker td.ts-cal-holiday.end-date,
  #mobile-datepicker .daterangepicker td.ts-cal-holiday.active,
  #mobile-datepicker .daterangepicker td.ts-cal-holiday.active:hover,
  #mobile-datepicker .daterangepicker td.ts-cal-holiday.start-date,
  #mobile-datepicker .daterangepicker td.ts-cal-holiday.end-date {
    color: #fff;
  }

  .ts-date-nights-tooltip {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    background: rgba(33, 33, 33, 0.92);
    color: #fff;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.12s ease;
    z-index: 99999;
  }

  .ts-date-nights-tooltip.is-visible {
    visibility: visible;
    opacity: 1;
  }
  
  .daterangepicker th.month {
    width: auto;
  }
  
  .daterangepicker td.disabled,
  .daterangepicker option.disabled {
    color: #999;
    cursor: not-allowed;
    text-decoration: line-through;
  }
  
  .daterangepicker select.monthselect,
  .daterangepicker select.yearselect {
    font-size: 12px;
    padding: 1px;
    height: auto;
    margin: 0;
    cursor: default;
  }
  
  .daterangepicker select.monthselect {
    margin-right: 2%;
    width: 56%;
  }
  
  .daterangepicker select.yearselect {
    width: 40%;
  }
  
  .daterangepicker select.hourselect,
  .daterangepicker select.minuteselect,
  .daterangepicker select.secondselect,
  .daterangepicker select.ampmselect {
    width: 50px;
    margin: 0 auto;
    background: #eee;
    border: 1px solid #eee;
    padding: 2px;
    outline: 0;
    font-size: 12px;
  }
  
  .daterangepicker .calendar-time {
    text-align: center;
    margin: 4px auto 0 auto;
    line-height: 30px;
    position: relative;
  }
  
  .daterangepicker .calendar-time select.disabled {
    color: #ccc;
    cursor: not-allowed;
  }
  
  .daterangepicker .drp-buttons {
    clear: both;
    text-align: right;
    padding: 8px;
    border-top: 1px solid #ddd;
    display: none;
    line-height: 12px;
    vertical-align: middle;
  }
  
  .daterangepicker .drp-selected {
    display: inline-block;
    font-size: 12px;
    padding-right: 8px;
  }
  
  .daterangepicker .drp-buttons .btn {
    margin-left: 8px;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
  }
  
  .daterangepicker.show-ranges.single.rtl .drp-calendar.left {
    border-right: 1px solid #ddd;
  }
  
  .daterangepicker.show-ranges.single.ltr .drp-calendar.left {
    border-left: 1px solid #ddd;
  }
  
  .daterangepicker.show-ranges.rtl .drp-calendar.right {
    border-right: 1px solid #ddd;
  }
  
  .daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left: 1px solid #ddd;
  }
  
  .daterangepicker .ranges {
    float: none;
    text-align: left;
    margin: 0;
  }
  
  .daterangepicker.show-calendar .ranges {
    margin-top: 8px;
  }
  
  .daterangepicker .ranges ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }
  
  .daterangepicker .ranges li {
    font-size: 12px;
    padding: 8px 12px;
    cursor: pointer;
  }
  
  .daterangepicker .ranges li:hover {
    background-color: #eee;
  }
  
  .daterangepicker .ranges li.active {
    background-color: #08c;
    color: #fff;
  }
  
  /*  Larger Screen Styling */
  @media (min-width: 564px) {
    .daterangepicker {
      width: auto;
    }
  
    .daterangepicker .ranges ul {
      width: 140px;
    }
  
    .daterangepicker.single .ranges ul {
      width: 100%;
    }
  
    .daterangepicker.single .drp-calendar.left {
      clear: none;
    }
  
    .daterangepicker.single .ranges,
    .daterangepicker.single .drp-calendar {
      float: left;
    }
  
    .daterangepicker {
      direction: ltr;
      text-align: left;
    }
  
    .daterangepicker .drp-calendar.left {
      clear: left;
      margin-right: 0;
    }
  
    .daterangepicker .drp-calendar.left .calendar-table {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  
    .daterangepicker .drp-calendar.right {
      margin-left: 0;
    }
  
    .daterangepicker .drp-calendar.right .calendar-table {
      border-left: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  
    .daterangepicker .drp-calendar.left .calendar-table {
      padding-right: 8px;
    }
  
    .daterangepicker .ranges,
    .daterangepicker .drp-calendar {
      float: left;
    }
  }
  
  @media (min-width: 730px) {
    .daterangepicker .ranges {
      width: auto;
    }
  
    .daterangepicker .ranges {
      float: left;
    }
  
    .daterangepicker.rtl .ranges {
      float: right;
    }
  
    .daterangepicker .drp-calendar.left {
      clear: none !important;
    }
  }
  
  /* light theme */
  
  .daterangepicker {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    border: 0px;
  }
  
  .table-condensed td {
    font-family: "IRANSans" !important;
    font-size: 14px !important;
    padding: 2px;
  }
  .table-condensed th {
    font-family: "IRANSans" !important;
    font-size: 14px !important;
  }
  .today{
    background-color: #ff6822;
      color: white;
  }
/* Date Panel */
.date-panel {
    right: 30%;
    width: auto;
    min-width: 600px !important;
    max-width: 900px;
}

/* Date Panel Header */
.date-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    flex-wrap: wrap;
    gap: 15px;
}

.date-inputs-container {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 5px;
}

.date-input-group {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    min-width: 120px;
}

.date-input-group label {
    font-size: 11px;
    color: #888;
    margin-bottom: 2px;
}

.date-input-group input {
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding: 0;
    width: 100%;
    background: transparent;
    text-align: center;
}

.date-separator {
    width: 1px;
    height: 30px;
    background: #ddd;
}

.calendar-switch-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: #ff6822; /* Blue color like image */
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.calendar-switch-btn i {
    font-size: 14px;
}

.calendar-switch-btn:hover {
    opacity: 0.8;
}

.calendar-switch-btn:active {
    opacity: 0.6;
}

/* Date Panel Footer */
.date-panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    gap: 10px;
}

.date-footer-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-today-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid #ddd;
    color: #333;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-today-dates:hover {
    background: #f7f7f7;
    border-color: #ff6822;
    color: #ff6822;
}

.btn-today-dates i {
    font-size: 14px;
}

.btn-clear-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #ff6822;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 0;
    transition: opacity 0.2s;
}

.btn-clear-dates:hover {
    opacity: 0.8;
}

.btn-clear-dates i {
    font-size: 14px;
}

.btn-submit-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ff6822;
    color: #fff;
    border: none;
    padding: 8px 25px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-submit-dates:hover {
    background: #ff6822;
}

.btn-submit-dates:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.btn-submit-dates i {
    font-size: 14px;
}

/* Override Persian Datepicker Styles to match image more closely */
.datepicker-plot-area {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    min-width: unset !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td span {
    border-radius: 8px !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td.selected span {
    background-color: #ff6822 !important; /* Match blue theme */
    text-shadow: none !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td.today span {
    background-color: transparent !important;
    color: #ff6822 !important;
    border: 1px solid #ff6822 !important;
}

/* General */
.travel-search-wrapper {
    position: relative;
    direction: rtl;
    z-index: 999; /* Ensure it sits above content below */
}

/* Panels */
.travel-search-panel {
    position: absolute;
    top: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 1000;
    display: none;
    margin-top: 10px;
    min-width: 300px;
}

.travel-search-panel.active {
    display: block;
}

/* Location Panel */
.location-panel {
    right: 0;
    width: 350px;
}

.location-search-input, .flight-place-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 15px;
}

.recent-places h4, .search-results h4 {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.place-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s;
}

.place-item:hover {
    background: #f7f7f7;
}
.recent-places .place-name{
  font-size: 14px;
  color: #333;
}

.place-icon {
    background: #eee;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    color: #555;
}

/* Mobile Date Picker Wrapper */
.mobile-date-picker-wrapper {
    width: 100%;
}

.mobile-date-picker-wrapper .date-panel-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.mobile-date-picker-wrapper .date-panel-footer {
    margin-top: 15px;
    padding-top: 10px;
}

.mobile-date-picker-wrapper #mobile-datepicker {
    margin: 15px 0;
    position: relative;
    min-height: 300px;
}

/* Mobile date picker container styling */
#mobile-datepicker .daterangepicker {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    box-shadow: none;
    border: none;
    width: 100% !important;
    background: transparent;
}

/* Fix order for RTL (Persian) - show Current Month (M1) on top */
#mobile-datepicker .daterangepicker.rtl {
    flex-direction: column-reverse !important;
}

/* Standard order for LTR (Georgian) */
#mobile-datepicker .daterangepicker.ltr {
    flex-direction: column !important;
}

#mobile-datepicker .daterangepicker .drp-calendar {
    float: none !important;
    margin: 0 auto 10px auto !important;
    max-width: 320px !important;
    width: 100% !important;
    clear: both !important;
}

#mobile-datepicker .daterangepicker .drp-calendar.left {
    padding: 0 !important;
}

#mobile-datepicker .daterangepicker .drp-calendar.right {
    padding: 0 !important;
}

#mobile-datepicker .daterangepicker .drp-buttons {
    display: none !important;
}

/* Date Picker Container */
#datepicker-container {
    min-height: 300px;
    position: relative;
}

#datepicker-container .daterangepicker {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0;
    display: block !important;
    box-shadow: none;
    border: none;
}

/* Hide default date picker buttons - we use custom buttons */
#datepicker-container .daterangepicker .drp-buttons {
    display: none !important;
}

/* Also hide for mobile datepicker */
.mobile-date-picker-wrapper .daterangepicker .drp-buttons {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .date-panel {
        min-width: 100% !important;
        right: 0;
        left: 0;
    }
    
    .date-panel-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-inputs-container {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .calendar-switch-btn {
        width: 100%;
        justify-content: center;
        padding: 8px;
    }
    
    .date-panel-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .date-footer-left {
        width: 100%;
        justify-content: space-between;
    }
    
    .btn-submit-dates {
        width: 100%;
        justify-content: center;
    }
}

/* Guest Panel */
.guest-panel {
    left: 0;
    width: 300px;
}

.guest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.guest-row:last-child {
    border-bottom: none;
}

.guest-info h5 {
    margin: 0 0 5px;
    font-size: 15px;
}

.guest-info span {
    font-size: 12px;
    color: #888;
}

.guest-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.guest-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}

.guest-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.guest-count {
    width: 20px;
    text-align: center;
    font-weight: bold;
}

/* Mobile Full Screen */
.mobile-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: none;
    flex-direction: column;
    direction: rtl;
}

.mobile-search-overlay.active {
    display: flex;
}

.mobile-search-header {
    padding: 15px;
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #eee;
}

.close-mobile-search {
    background: none;
    border: none;
    font-size: 20px;
    color: #333;
}

.mobile-accordion {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.accordion-item {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

.accordion-header {
    padding: 15px;
    background: #f9f9f9;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-content {
    padding: 15px;
    display: none;
}

.accordion-item.active .accordion-content {
    display: block;
}

.mobile-search-footer {
    padding: 15px;
    border-top: 1px solid #eee;
}

.mobile-search-btn {
    width: 100%;
    background: #ff6822; /* Adjust color */
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
}

/* RTL Overrides for Datepicker if needed */
.datepicker-plot-area {
    font-family: inherit;
}

/* New styles for text replacement */
.search-display-text {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 13px;
  color: #333;
  padding: 5px 0;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
  min-height: 20px;
  display: flex;
  align-items: center;
  font-weight: 500;
}
.travel-search-module-section{
  width: auto;
  margin: 0 15px;
  border-radius: 30px;
}
/* Ensure modals overlay content on all pages (hotel, flight, property, localguide, etc.) */
.travel-search-module-section,
.travel-search-container,
.travel-search-inner,
.travel-search-wrapper,
#searchboxcont {
    overflow: visible !important;
    background-color: #e9e9e9 !important;
}

/* Section containing the location panel needs position: relative for dropdown positioning */
.travel-search-section.location,
.travel-search-section.dates,
.travel-search-section.guests {
    position: relative;
}

.travel-search-section {
    cursor: pointer;
}

/* City Search Results */
.city-search-results {
    margin-top: 10px;
    max-height: 300px;
    overflow-y: auto;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.city-search-results .search-results-loading {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
}

.city-search-results .search-results-loading i {
    margin-left: 8px;
}

.city-search-results .search-results-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.city-search-results .city-search-result-item .place-info {
    width: 100%;
}

.city-search-results .city-search-result-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s;
}

.city-search-results .city-search-result-item:hover {
    background: #f7f7f7;
}

.city-search-results .search-results-empty {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
}

/* Mobile city search results */
.mobile-city-search-results {
    margin-top: 15px;
    max-height: 250px;
    overflow-y: auto;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.mobile-city-search-results .city-search-result-item {
    padding: 12px;
}

.mobile-city-search-results .city-search-result-item .place-icon {
    width: 45px;
    height: 45px;
}

/* Scrollbar styling for search results */
.city-search-results::-webkit-scrollbar,
.mobile-city-search-results::-webkit-scrollbar {
    width: 6px;
}

.city-search-results::-webkit-scrollbar-track,
.mobile-city-search-results::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.city-search-results::-webkit-scrollbar-thumb,
.mobile-city-search-results::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.city-search-results::-webkit-scrollbar-thumb:hover,
.mobile-city-search-results::-webkit-scrollbar-thumb:hover {
    background: #999;
}
.place-desc{
  font-size: 12px;
  color: #666;
}

.place-iata-code {
  background: #eee;
  color: #555;
  font-size: 10px;
  padding: 4px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: middle;
  direction: ltr;
  float: left;
  line-height: 16px;
  font-weight: bold;
}

.place-name small {
  font-size: 12px;
  color: #888;
  font-weight: 400;
}

/* Flight Specific Styles */
.searchboxescontainer{
    display: flex;
    align-items: center;
}
#searchbox{
  background-color: #e9e9e9;
}
/* Combined flight location (legacy) - keeping for backward compatibility */
.flight-location {
    display: flex;
    align-items: center;
    flex: 2; /* Take more space */
}

/* Separate flight origin and destination sections */
.flight-origin-section,
.flight-destination-section {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
}

.flight-location-group {
    flex: 1;
    position: relative;
}

.flight-location-separator {
    width: 40px;
    display: flex;
    justify-content: center;
    color: #ddd;
    font-size: 16px;
}

.flight-type-select {
    margin-bottom: 5px;
}

.flight-type-select .trip-type-dropdown {
    padding: 2px 12px;
    border: 1px solid #ddd;
    border-radius: 15px;
    font-size: 14px;
    background-color: #fff;
    cursor: pointer;
    min-width: 120px;
    margin-right: 15px;
}

.radio-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    cursor: pointer;
}

.flight-dates-display {
    display: flex;
    gap: 10px;
}

.flight-date-section {
    flex: 1;
}

.flight-date-section.disabled {
    opacity: 0.5;
}

.flight-date-section.disabled .search-display-text {
    text-decoration: none;
}

/* Mobile Flight Styles */
.flight-mobile-location-group {
    margin-bottom: 15px;
}

.flight-mobile-location-separator {
    height: 1px;
    background: #eee;
    margin: 15px 0;
    position: relative;
}

.flight-mobile-location-separator:after {
    content: "\f074"; /* fa-exchange */
    font-family: FontAwesome;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    background: #fff;
    padding: 0 10px;
    color: #ccc;
}

.mobile-flight-type-toggle {
    display: flex;
    gap: 20px;
    padding: 10px 15px;
    background: #f9f9f9;
    border-bottom: 1px solid #eee;
}

/* ==============================================
   Hero Layout: Bootstrap grid — search (8 cols) + tiles (4 cols)
   ============================================== */

/* Row is the positioning context for the absolute tiles column.
   overflow must stay visible so dropdown panels are not clipped. */
.ts-hero-row {
    position: relative;
    overflow: visible;
}

/* Search column: let the inner search form fill its column */
.ts-search-col {
    direction: rtl;
}

/* Hero TravelSearch module: category icons scroll horizontally on tablet / small desktop,
   where the ~66% column beside tiles is too narrow for all icons (same pattern as mobile ≤768px). */
@media (min-width: 769px) and (max-width: 1599px) {
    .travel-search-module-section .travel-search-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        align-items: flex-start;
        padding-inline: 16px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .travel-search-module-section .travel-search-categories::-webkit-scrollbar {
        display: none;
    }

    .travel-search-module-section .travel-category-btn {
        flex-shrink: 0;
    }
}

/* Always make the wrapper chain fill the column */
.ts-search-col #searchboxcont,
.ts-search-col .travel-search-container,
.ts-search-col .travel-search-inner {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Only remove container constraints when search is NOT sticky.
   When sticky (#searchbox gets Box-sticky-search / Box-sticky-mobile-search),
   let Bootstrap's container centre the form inside the full-width sticky bar. */
.ts-search-col #searchbox:not(.Box-sticky-search):not(.Box-sticky-mobile-search),
.ts-search-col #searchbox:not(.Box-sticky-search):not(.Box-sticky-mobile-search) > .container {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* When sticky, the search box must anchor to the left viewport edge.
   Without left:0, fixed elements keep their static-flow horizontal offset
   (33% in from left because of the column margin), leaving a gap on the left. */
#searchbox.Box-sticky-search,
#searchbox.Box-sticky-mobile-search {
    left: 0;
    right: 0;
    width: 100%;
}

/* Tiles column — hidden on small screens */
.ts-tiles-col {
    display: none;
}

/* On desktop: tiles are absolutely positioned so they do NOT stretch the row.
   The row height is driven solely by the search column.
   The tiles fill the full row height and clip any overflow. */
@media (min-width: 992px) {
    .ts-tiles-col {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 33.3333%; /* matches col-lg-4 */
        overflow: hidden;
        padding: 12px 0 12px 12px;
    }

    /* Push search column past the tiles area */
    .ts-search-col {
        margin-left: 33.3333%;
    }
}

.ts-tiles-masonry {
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: flex-start;
}

.ts-tiles-col-a,
.ts-tiles-col-b {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* margin-top base + parallax: js/travel-search.js COL_A_BASE / COL_B_BASE */
    backface-visibility: hidden;
}

.ts-tiles-col-a {
    margin-top: -60px;
}

/* Stagger second column (base offset; parallax adds shift in JS) */
.ts-tiles-col-b {
    margin-top: -30px;
}

.ts-tile-img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Inner 8+4 when sticky: form column + logo (mirrors head.php) --- */
.ts-search-inner-row {
    margin-left: -15px;
    margin-right: -15px;
    overflow: visible;
}

#searchbox:not(.Box-sticky-search):not(.Box-sticky-mobile-search) .ts-sticky-logo-col,
#searchbox.Box-sticky-mobile-search .ts-sticky-logo-col {
    display: none !important;
}

#searchbox:not(.Box-sticky-search):not(.Box-sticky-mobile-search) .ts-search-form-col {
    width: 100%;
    max-width: 100%;
    float: none;
}

/* Desktop: match Bootstrap 8+4 in sticky bar; logo like header (hidden when not sticky) */
@media (min-width: 992px) {
    #searchbox.Box-sticky-search .ts-sticky-logo-col {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #searchbox.Box-sticky-search .ts-search-inner-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    #searchbox.Box-sticky-search .ts-search-form-col {
        width: 66.66666667%;
        max-width: 66.66666667%;
        flex: 0 0 66.66666667%;
    }

    #searchbox.Box-sticky-search .ts-sticky-logo-col {
        width: 33.33333333%;
        max-width: 33.33333333%;
        flex: 0 0 33.33333333%;
    }
}

/* Sticky bar: no extra horizontal inset vs in-flow; vertical padding from container */
#searchbox.Box-sticky-search .container,
#searchbox.Box-sticky-mobile-search .container {
    box-sizing: border-box;
    padding-top: 8px;
    padding-bottom: 8px;
}

.ts-hero-sticky-logo {
    text-align: center;
    line-height: 0;
    width: 100%;
}

.ts-hero-sticky-logo a.logo {
    display: inline-block;
    max-width: 100%;
}

.ts-hero-sticky-logo a.logo img {
    max-height: 48px;
    width: auto;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Sticky search: inner row + logo column in fixed bar (hero tiles stay visible)
   -------------------------------------------------------------------------- */
.ts-search-inner-row {
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
}

/* Non-sticky: one full-width column (hero already has 8+4; inner bar fills the 8) */
#searchbox:not(.Box-sticky-search) .ts-sticky-logo-col,
#searchbox:not(.Box-sticky-search) .ts-hero-sticky-logo {
    display: none !important;
}

#searchbox:not(.Box-sticky-search) .ts-search-form-col {
    width: 100%;
    max-width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
}

/* Desktop+tablet sticky: mirror Bootstrap 8+4 with logo (like #logo in head.php) */
@media (min-width: 768px) {
    #searchbox.Box-sticky-search .ts-search-inner-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    #searchbox.Box-sticky-search .ts-sticky-logo-col {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 1px;
    }

    #searchbox.Box-sticky-search .ts-hero-sticky-logo {
        display: block;
        text-align: left;
    }

    #searchbox.Box-sticky-search .ts-hero-sticky-logo a.logo {
        display: inline-block;
        margin: 0;
    }

    #searchbox.Box-sticky-search .ts-hero-sticky-logo img {
        max-height: 48px;
        width: auto;
        max-width: 100%;
    }

    #searchbox.Box-sticky-search .ts-hero-sticky-logo .logo-dark,
    html:not(.dark) #searchbox.Box-sticky-search .ts-hero-sticky-logo .logo-dark,
    body:not(.dark) #searchbox.Box-sticky-search .ts-hero-sticky-logo .logo-dark {
        display: none;
    }

    html.dark #searchbox.Box-sticky-search .ts-hero-sticky-logo .logo-light,
    body.dark #searchbox.Box-sticky-search .ts-hero-sticky-logo .logo-light {
        display: none;
    }

    html.dark #searchbox.Box-sticky-search .ts-hero-sticky-logo .logo-dark,
    body.dark #searchbox.Box-sticky-search .ts-hero-sticky-logo .logo-dark {
        display: inline-block;
    }
}

/* Sticky: bar uses same box model as non-sticky (no extra horizontal inset) */
#searchbox.Box-sticky-search .container,
#searchbox.Box-sticky-mobile-search .container {
    width: 100%;
    max-width: none;
}

/* Match non-sticky inner container: no extra horizontal padding when sticky <992px */
@media (max-width: 991px) {
    .ts-search-col #searchbox.Box-sticky-mobile-search > .container {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 1200px) and (max-width: 1389px) {
    #searchbox.Box-sticky-search .container,
    #searchbox.Box-sticky-mobile-search .container {
        max-width: 1170px;
    }
}

@media (min-width: 1390px) {
    #searchbox.Box-sticky-search .container,
    #searchbox.Box-sticky-mobile-search .container {
        max-width: 1370px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #searchbox.Box-sticky-search .container,
    #searchbox.Box-sticky-mobile-search .container {
        max-width: 970px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #searchbox.Box-sticky-search .container,
    #searchbox.Box-sticky-mobile-search .container {
        max-width: 750px;
    }
}