/* ==========================================================================
   Detail page redesign (Tour / Attraction detail + booking box)
   Design language: modern OTA style (GetYourGuide/Klook/Viator-inspired) —
   generous whitespace, minimal internal borders, soft elevation, pill accents.
   Reuses existing --primary/--warning brand colors, does not touch global site styles.
   ========================================================================== */

/* No-slider detail pages: replicate the header clearance that .innerbanner used to provide */
@media (min-width: 992px) {
  .no_slider_header {margin-top: 110px;}
}

@media (min-width: 1170px) {
  .no_slider_header {margin-top: 110px;}
}
@media (max-width: 991px) {
  .no_slider_header {margin-top: 0px;}
}

/* Breadcrumb */
.dtl_breadcrumb {font-size: 13px; margin-bottom: 18px; color: #6b6b6b;}
.dtl_breadcrumb a {color: #6b6b6b; text-decoration: none;}
.dtl_breadcrumb a:hover {color: var(--primary);}
.dtl_breadcrumb .sep {margin: 0 6px; color: #c8c8c8;}
.dtl_breadcrumb .current {color: #1a1a1a; font-weight: 600;}

/* Title / meta row */
.dtl_title_row {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 6px;}
.dtl_title_row h1 {margin-bottom: 8px; font-size: 32px; font-weight: 800;}
.dtl_meta_row {display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 14px; color: #666;}
.dtl_meta_row .rating-inline {display: flex; align-items: center; gap: 6px;}
.dtl_meta_row .location_tag {display: inline-flex; align-items: center; gap: 5px;}
.dtl_meta_row .location_tag i {color: var(--warning);}
.dtl_share_wishlist {display: flex; gap: 10px;}
.dtl_share_wishlist a {width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: center; color: #333; transition: all .2s ease;}
.dtl_share_wishlist a:hover {border-color: var(--warning); color: var(--warning); background: #FFF8EF;}

/* Gallery — large hero on top, horizontal scrollable thumb strip below (all breakpoints) */
.dtl_gallery_wrap {display: flex; flex-direction: column; gap: 10px; margin: 20px 0 28px;}
.dtl_gallery_main {border-radius: 16px; overflow: hidden;}
.dtl_gallery_main img {width: 100%; height: 340px; object-fit: cover; object-position: center; display: block;}
.dtl_gallery_thumbs {display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;}
.dtl_gallery_thumbs .thumb {flex: 0 0 auto; width: 110px; height: 84px; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: .75; transition: all .2s ease;}
.dtl_gallery_thumbs .thumb img {width: 100%; height: 100%; object-fit: cover;}
.dtl_gallery_thumbs .thumb.active, .dtl_gallery_thumbs .thumb:hover {border-color: var(--warning); opacity: 1;}
@media (min-width: 992px) {
  .dtl_gallery_main img {height: 400px;}
}
@media (max-width: 767px) {
  .dtl_gallery_main img {min-height: 240px; height: 240px;}
}

/* Highlight icons row — simple inline row, no boxes */
.dtl_highlights_row {display: flex; flex-wrap: wrap; gap: 28px; padding: 18px 0; border-bottom: 1px solid #eee; margin-bottom: 30px;}
.dtl_highlights_row .item {display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #444;}
.dtl_highlights_row .item i {font-size: 16px; color: #1E9E5A;}

/* Section wrapper for content blocks */
.dtl_section {margin-bottom: 34px;}
.dtl_section h3.section_title {font-size: 23px; font-weight: 800; margin-bottom: 16px;}

/* Inclusions / Exclusions — stacked rows, each collapsible */
.incl_excl_accordion_item {border: 1px solid #f0f0f0; border-radius: 12px; margin-bottom: 14px; overflow: hidden;}
.incl_excl_accordion_item:last-child {margin-bottom: 0;}
.incl_excl_col h5 {font-size: 16px; font-weight: 700; margin-bottom: 12px;}
.incl_excl_col.included h5 {color: #1E9E5A;}
.incl_excl_col.excluded h5 {color: #E0342A;}
.incl_excl_col ul {list-style: none; margin: 0; padding: 0;}
.incl_excl_col ul li {position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 14.5px; line-height: 1.5;}
.incl_excl_col.included ul li:before {content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0; color: #1E9E5A; background: none; width: auto; height: auto; border-radius: 0;}
.incl_excl_col.excluded ul li:before {content: "\F622"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0; color: #E0342A; background: none; width: auto; height: auto; border-radius: 0;}
.incl_excl_col {padding: 4px 18px 18px;}

/* Generic collapsible section toggle (Inclusions & Exclusions rows, Reviews section) */
.collapse_toggle_btn {display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; background: #fafafa; border: 0; padding: 14px 18px; font-size: 15px; font-weight: 700; color: #1a1a1a; text-align: left; cursor: pointer;}
.collapse_toggle_btn .collapse_toggle_label {display: inline-flex; align-items: center; gap: 8px;}
.collapse_toggle_btn .collapse_toggle_label.included {color: #1E9E5A;}
.collapse_toggle_btn .collapse_toggle_label.excluded {color: #E0342A;}
.collapse_toggle_btn .toggle_icon {transition: transform .2s ease; color: #888; flex: 0 0 auto;}
.collapse_toggle_btn[aria-expanded="true"] .toggle_icon {transform: rotate(180deg);}
.collapse_toggle_btn.section_title_toggle {background: transparent; border-bottom: 1px solid #eee; padding: 0 0 16px; border-radius: 0;}
.collapse_toggle_btn.section_title_toggle .section_title {font-size: 23px; font-weight: 800;}

/* Trust badges (reused between "why us" row and booking box) */
.trust_badges_row {display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px;}
.trust_badges_row .badge_item {display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #444; font-weight: 500;}
.trust_badges_row .badge_item i {color: #1E9E5A; font-size: 15px;}

/* ==========================================================================
   Booking box — modern OTA style: airy padding, borderless internals,
   pill date selection, plain list-style add-ons, centered trust row.
   ========================================================================== */
.booking_box {background: #fff; border: 1px solid #f0f0f0; border-radius: 18px; box-shadow: 0 16px 40px rgba(20,20,20,.06);}
.booking_box .bb_price_from {font-size: 13px; color: #888; margin-bottom: 2px; padding: 18px 18px 0;}
.booking_box .bb_price_from strong {font-size: 26px; color: #1a1a1a; font-weight: 800; display: block; margin-top: 2px;}
.booking_box .bb_scroll_area {padding: 14px 18px 0;}
.booking_box .bb_field {margin-bottom: 16px;}
.booking_box .bb_field label {font-size: 13px; font-weight: 700; color: #222; margin-bottom: 6px; display: block;}
.booking_box .bb_field .form-control, .booking_box .bb_field .form-select {border-radius: 10px; border-color: #e5e5e5; padding: 9px 12px; font-size: 13.5px;}
.booking_box .bb_row2 {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.booking_box .bb_addons {border-top: 1px solid #f0f0f0; padding-top: 14px; margin-top: 4px;}
.booking_box .bb_addons h6 {font-size: 14px; font-weight: 700; margin-bottom: 4px; color: #222;}
.booking_box .bb_discount_list {list-style: none; padding: 0; margin: 8px 0 0; }
.booking_box .bb_discount_list li {font-size: 12.5px; margin-bottom: 6px; color: #555;}
.booking_box .bb_breakdown {border-top: 1px solid #f0f0f0; margin-top: 14px; padding-top: 12px;}
.booking_box .bb_breakdown .row_line {display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; gap: 10px; color: #333;}
.booking_box .bb_breakdown .row_line .muted_sub {display: block; font-size: 11.5px; color: #999;}
.booking_box .bb_footer {position: sticky; bottom: -1px; padding: 14px 18px 20px; border-top: 1px solid #f0f0f0; background: #fff; margin-top: 8px;}
.booking_box .bb_total {display: flex; justify-content: space-between; align-items: center;}
.booking_box .bb_total .label {font-weight: 700; font-size: 14.5px; color: #222;}
.booking_box .bb_total del {display: block; font-size: 11.5px; color: #999;}
.booking_box .bb_total .amount {font-size: 24px; font-weight: 800; color: #1a1a1a;}
.booking_box .bb_total .save_chip {display: inline-block; background: #E6F5EC; color: #1E9E5A; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-left: 6px; vertical-align: middle;}
.booking_box .bb_book_btn {width: 100%; margin-top: 16px; padding: 14px; font-weight: 700; font-size: 16px; border-radius: 12px; box-shadow: 0 8px 18px rgba(206,142,49,.25);}
.booking_box .bb_footer .trust_badges_row {margin-top: 14px; justify-content: center; gap: 20px;}
.booking_box .bb_footer .trust_badges_row .badge_item {color: #777;}

/* IMPORTANT: position:sticky does not work on an element that is a descendant of a
   <form> (confirmed browser behavior — the Livewire booking widget's root element is
   a <form>, which would otherwise silently prevent .booking_box itself from sticking).
   So the sticky positioning lives on this plain wrapper div in the parent Blade view,
   which itself is NOT inside the form — the form (and .booking_box) live inside it. */
@media (min-width: 992px) {
  .dtl_booking_sticky_wrap {position: sticky; top: 130px; max-height: calc(100vh - 160px); overflow-y: auto;}
}

/* Inline calendar — borderless, spacious, pill-shaped selected date */
.dtl_calendar {padding: 0;}
.dtl_calendar_head {display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; margin-bottom: 12px; color: #1a1a1a;}
.dtl_calendar_head .cal_nav {border: 1px solid #e5e5e5; background: #fff; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #333; padding: 0; font-size: 12px;}
.dtl_calendar_head .cal_nav:hover {background: #f7f7f7; border-color: #ccc;}
.dtl_calendar_weekdays {display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: #aaa; margin-bottom: 6px; font-weight: 600;}
.dtl_calendar_grid {display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px;}
.cal_day {border: 0; background: transparent; width: 100%; height: 34px; border-radius: 30px; font-size: 13px; color: #222; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0 auto; max-width: 40px;}
.cal_day:hover:not(:disabled) {background: #f5f5f5;}
.cal_day.is_blank {visibility: hidden; pointer-events: none;}
.cal_day.is_past {color: #d5d5d5; text-decoration: none;}
.cal_day.is_selected {background: var(--warning, #CE8E31); color: #fff; font-weight: 700; max-width: 56px; box-shadow: 0 4px 10px rgba(206,142,49,.35);}

/* Time picker — soft pill chip strip, borderless container */
.dtl_time_picker {padding: 0;}
.dtl_time_picker .time_strip {display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-behavior: smooth;}
.dtl_time_picker .time_chip {flex: 0 0 auto; border: 1px solid #e5e5e5; background: #fafafa; border-radius: 20px; font-size: 12.5px; padding: 7px 14px; color: #444; white-space: nowrap; transition: all .15s ease;}
.dtl_time_picker .time_chip:hover {border-color: var(--warning, #CE8E31); color: var(--warning, #CE8E31); background: #FFF8EF;}
.dtl_time_picker .time_chip.is_selected {background: var(--warning, #CE8E31); border-color: var(--warning, #CE8E31); color: #fff; font-weight: 700;}

/* Tour type segmented control (replaces native select) */
.bb_segmented {display: flex; background: #f5f5f5; border-radius: 12px; padding: 4px; gap: 4px;}
.bb_segmented .seg_btn {flex: 1 1 0; border: 0; background: transparent; padding: 10px 8px; font-size: 13px; font-weight: 600; color: #666; border-radius: 9px; text-align: center; transition: all .15s ease;}
.bb_segmented .seg_btn.is_active {background: #fff; color: #1a1a1a; box-shadow: 0 2px 8px rgba(0,0,0,.08);}

/* Quantity stepper — clean row, no boxing */
.qty_stepper {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.qty_stepper .qty_label {font-size: 14px; font-weight: 600; color: #333;}
.qty_stepper .qty_controls {display: flex; align-items: center; gap: 12px;}
.qty_stepper .qty_btn {width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e0e0e0; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #444; padding: 0; line-height: 1; font-size: 15px;}
.qty_stepper .qty_btn:hover:not(:disabled) {background: #FFF8EF; border-color: var(--warning, #CE8E31); color: var(--warning, #CE8E31);}
.qty_stepper .qty_btn:disabled {opacity: .3;}
.qty_stepper .qty_value {min-width: 20px; text-align: center; font-weight: 700; font-size: 14px;}
.qty_stepper_row + .qty_stepper_row {margin-top: 16px;}

/* Transfer on/off switch row */
.bb_switch_row {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.bb_switch_row .form-switch {padding-left: 2.5em; margin: 0;}
.bb_switch_row .form-switch .form-check-input {width: 2.5em; height: 1.4em; cursor: pointer;}
.bb_switch_row .form-switch .form-check-input:checked {background-color: var(--warning, #CE8E31); border-color: var(--warning, #CE8E31);}

/* Add-ons — plain list rows, no boxing, divider between items only */
.bb_addon_item {padding: 12px 0; border-bottom: 1px solid #f2f2f2;}
.bb_addon_item:last-child {border-bottom: 0;}
.bb_addon_row {display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;}
.bb_addon_row .form-check {margin: 0;}
.bb_addon_row .form-check-input {margin-top: .25em;}
.bb_addon_row .form-check-label {font-size: 14px; color: #333;}
.bb_addon_row .addon_price {font-size: 13.5px; font-weight: 700; color: #333; white-space: nowrap;}

/* Mobile bottom sticky bar */
.mobile_booking_bar {position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; box-shadow: 0 -6px 20px rgba(0,0,0,.12); padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.mobile_booking_bar .mb_price strong {font-size: 19px; display: block;}
.mobile_booking_bar .mb_price del {font-size: 11px; color: #999;}
.mobile_booking_bar .btn {white-space: nowrap; font-weight: 700; border-radius: 10px; padding: 11px 22px;}

/* Bottom sheet (offcanvas bottom) for mobile booking options — the sheet body itself scrolls, footer sticks to its bottom */
/* The site's sticky header uses z-index:9999 (higher than Bootstrap's default
   offcanvas z-index:1045), so once the header goes fixed on scroll it renders
   on top of this offcanvas instead of underneath it. Scoped to only apply
   while this specific sheet is open, so it never touches the cart offcanvas
   or any other offcanvas/modal on the site. */
.booking_bottom_sheet {z-index: 10050 !important;}
body:has(.booking_bottom_sheet.show) .offcanvas-backdrop {z-index: 10040 !important;}

.booking_bottom_sheet.offcanvas-bottom {height: auto; max-height: 88vh; border-top-left-radius: 22px; border-top-right-radius: 22px; display: flex; flex-direction: column;}
.booking_bottom_sheet .offcanvas-header {border-bottom: 1px solid #f0f0f0; flex: 0 0 auto; padding: 18px 20px;}
.booking_bottom_sheet .offcanvas-body {padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0;}
.booking_bottom_sheet .bb_sheet_scroll {padding: 20px;}
.booking_bottom_sheet .bb_footer {position: sticky; bottom: -1px; padding: 16px 20px 22px; border-top: 1px solid #f0f0f0; background: #fff; margin-top: 10px;}
.booking_bottom_sheet .bb_field {margin-bottom: 16px;}
.booking_bottom_sheet .bb_field label {font-size: 13px; font-weight: 700; color: #222; margin-bottom: 6px; display: block;}
.booking_bottom_sheet .bb_field .form-control, .booking_bottom_sheet .bb_field .form-select {border-radius: 10px; border-color: #e5e5e5; padding: 9px 12px; font-size: 13.5px;}
.booking_bottom_sheet .bb_price_toggle {border-top: 1px solid #f0f0f0; margin-top: 14px; padding-top: 14px;}
.booking_bottom_sheet .bb_price_toggle_link {display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 700; color: var(--warning, #CE8E31); text-decoration: none;}
.booking_bottom_sheet .bb_breakdown {margin-top: 12px;}
.booking_bottom_sheet .bb_breakdown .row_line {display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; gap: 10px; color: #333;}
.booking_bottom_sheet .bb_breakdown .row_line .muted_sub {display: block; font-size: 11.5px; color: #999;}

/* Reviews — compact summary row + plain review cards */
.star_rating_static i {color: var(--warning, #CE8E31); margin-right: 1px;}

.review_summary_row {display: flex; flex-wrap: wrap; gap: 40px; padding: 20px 0 28px; border-bottom: 1px solid #eee; margin-bottom: 24px;}
.review_score_block {flex: 0 0 auto; text-align: center; min-width: 110px;}
.review_score_block .score_num {font-size: 40px; font-weight: 800; color: #1a1a1a; line-height: 1;}
.review_score_block .score_stars_row {display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0;}
.review_score_block .score_stars_row .score_small_num {font-size: 12.5px; font-weight: 700; color: #444;}
.review_score_block .score_count {font-size: 12.5px; color: #888;}

.review_bars_block {flex: 1 1 260px; max-width: 360px; display: flex; flex-direction: column; gap: 6px; justify-content: center;}
.review_bars_block .bar_row {display: flex; align-items: center; gap: 10px; font-size: 12px;}
.review_bars_block .bar_label {flex: 0 0 auto; width: 30px; color: #666; display: flex; align-items: center; gap: 2px;}
.review_bars_block .bar_label i {color: var(--warning, #CE8E31); font-size: 10px;}
.review_bars_block .bar_track {flex: 1 1 auto; height: 6px; background: #f0f0f0; border-radius: 6px; overflow: hidden;}
.review_bars_block .bar_fill {height: 100%; background: var(--warning, #CE8E31); border-radius: 6px;}
.review_bars_block .bar_count {flex: 0 0 auto; width: 24px; text-align: right; color: #999;}

.review_row {padding: 16px 0; border-bottom: 1px solid #f0f0f0;}
.review_row:last-child {border-bottom: 0;}
.review_row .review_head {display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px;}
.review_row .review_avatar {width: 36px; height: 36px; border-radius: 50%; background: #eef0f2; color: #555; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 auto;}
.review_row h6 {font-size: 14.5px; font-weight: 700; margin: 0; color: #1a1a1a;}
.review_row .review_date {font-size: 11.5px; color: #999;}
.review_row .review_star_badge {display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #1a1a1a; white-space: nowrap;}
.review_row .review_text {font-size: 13.5px; color: #444; margin: 0 0 0 46px; line-height: 1.6;}

.review_form_card {border: 1px solid #f0f0f0; border-radius: 16px; padding: 26px; background: #fff; box-shadow: 0 10px 26px rgba(20,20,20,.04);}
.review_form_card .reviewCustomer label {font-weight: 600; font-size: 13.5px; margin-bottom: 6px; display: block;}