/* ==========================================================================
   Template 2 — alternate tour/attraction detail + booking design
   (step-by-step "Check Availability" modal instead of the always-open
   sidebar form used by Template 1). Scoped entirely under .v2_* classes so
   it never touches Template 1's detail-redesign.css.
   ========================================================================== */

.v2_page {font-family: inherit;}

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

/* Gallery grid — one large image + up to 4 thumbnails. The number of real
   thumbnails varies per tour/attraction (0 to 4+), so the grid shape is
   picked via a thumbs_N modifier class (set in the blade view from the
   actual gallery count) instead of a single fixed 3-col/2-row template —
   otherwise fewer-than-4 thumbnails left empty grid cells. */
.v2_gallery_grid {display: grid; gap: 8px; border-radius: 14px; overflow: hidden; margin-bottom: 22px; height: 360px;}
.v2_gallery_grid .v2_gallery_main {cursor: pointer;}
.v2_gallery_grid img {width: 100%; height: 100%; object-fit: cover; display: block;}
.v2_gallery_thumb {position: relative; cursor: pointer;}
.v2_gallery_more_overlay {position: absolute; inset: 0; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;}

/* 1 image total — no thumbnails */
.v2_gallery_grid.thumbs_0 {grid-template-columns: 1fr; height: 420px;}

/* 2 images total — main + 1 thumb, side by side */
.v2_gallery_grid.thumbs_1 {grid-template-columns: 2fr 1fr;}

/* 3 images total — main (full height) + 2 thumbs stacked */
.v2_gallery_grid.thumbs_2 {grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr;}
.v2_gallery_grid.thumbs_2 .v2_gallery_main {grid-row: 1 / 3;}

/* 4 images total — main (full height) + 2 stacked thumbs + 1 tall thumb, no gaps */
.v2_gallery_grid.thumbs_3 {grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;}
.v2_gallery_grid.thumbs_3 .v2_gallery_main {grid-row: 1 / 3;}
.v2_gallery_grid.thumbs_3 .v2_gallery_thumb:last-child {grid-row: 1 / 3;}

/* 5+ images total — main (full height) + a filled 2x2 thumb grid ("+N" overlay on the last cell when there are more than 5) */
.v2_gallery_grid.thumbs_4 {grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;}
.v2_gallery_grid.thumbs_4 .v2_gallery_main {grid-row: 1 / 3;}

@media (max-width: 767px) {
  .v2_gallery_grid {grid-template-columns: 1fr !important; grid-template-rows: auto !important; height: auto;}
  .v2_gallery_grid .v2_gallery_main {grid-row: auto !important; height: 260px;}
  .v2_gallery_thumb {display: none;}
}

/* Title row */
.v2_title_row {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px;}
.v2_title_row h1 {font-size: 28px; font-weight: 800; margin-bottom: 6px;}
.v2_meta_row {display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13.5px; color: #666;}
.v2_meta_row .rating-inline {display: flex; align-items: center; gap: 6px;}

/* Highlight badges row */
.v2_highlights_row {display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px;}
.v2_highlight_badge {display: flex; align-items: center; gap: 8px; border: 1px solid #eee; border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #333; background: #fafafa;}
.v2_highlight_badge i {color: var(--warning, #CE8E31); font-size: 15px;}

/* Collapsible content sections (Inclusions/Exclusions/Overview) */
.v2_section {margin-bottom: 16px; border: 1px solid #f0f0f0; border-radius: 12px; overflow: hidden;}
.v2_section_toggle {display: flex; align-items: center; justify-content: space-between; width: 100%; background: #fafafa; border: 0; padding: 16px 18px; font-size: 15.5px; font-weight: 700; color: #1a1a1a; text-align: left; cursor: pointer;}
.v2_section_toggle .toggle_icon {transition: transform .2s ease; color: #888;}
.v2_section_toggle[aria-expanded="true"] .toggle_icon {transform: rotate(180deg);}
.v2_section_body {padding: 18px;}

/* Location */
.v2_map_frame {width: 100%; height: 280px; border: 0; border-radius: 12px;}

/* Reviews (reused summary/list structure, restyled minimally) */
.v2_review_summary {display: flex; flex-wrap: wrap; gap: 32px; padding: 18px 0 22px; border-bottom: 1px solid #eee; margin-bottom: 20px;}

/* Sidebar booking card */
.v2_booking_card {background: #fff; border: 1px solid #f0f0f0; border-radius: 16px; box-shadow: 0 16px 40px rgba(20,20,20,.06); padding: 20px;}
.v2_booking_card .v2_price_from_label {font-size: 13px; color: #888;}
.v2_booking_card .v2_price_from_amount {font-size: 26px; font-weight: 800; color: #1a1a1a; margin: 2px 0 14px;}
.v2_check_availability_btn {width: 100%; padding: 14px; font-weight: 700; font-size: 15.5px; border-radius: 12px;}
.v2_why_us {margin-top: 18px; padding-top: 16px; border-top: 1px solid #f0f0f0;}
.v2_why_us_title {font-size: 14px; font-weight: 700; margin-bottom: 10px;}
.v2_why_us_item {display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #555; margin-bottom: 8px;}
.v2_why_us_item i {color: #1E9E5A;}

/* Mobile sticky bar (mirrors Template 1's, restyled) */
.v2_mobile_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;}
.v2_mobile_bar strong {font-size: 18px;}

/* ==========================================================================
   Check Availability modal — step wizard
   ========================================================================== */
/* The site's sticky header uses z-index:9999 (higher than Bootstrap's default
   modal z-index:1055), so without this the sticky nav would render on top of
   the modal's own header bar. Scoped to only apply while a v2 modal is open,
   so it never touches Template 1's pre-existing video modal (#exampleModal). */
.v2_booking_modal {z-index: 10050 !important;}
body:has(.v2_booking_modal.show) .modal-backdrop {z-index: 10040 !important;}

.v2_booking_modal .modal-dialog.modal-fullscreen {height: 100vh;}
.v2_booking_modal .modal-content {border: 0; border-radius: 0; height: 100%; display: flex; flex-direction: column;}
.v2_modal_header {flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eee;}
.v2_step_indicator {display: flex; align-items: center; gap: 0; margin: 0 auto;}
.v2_step_dot {width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #999; background: #fff;}
.v2_step_dot.is_active {border-color: var(--warning, #CE8E31); color: var(--warning, #CE8E31);}
.v2_step_dot.is_done {border-color: #1E9E5A; background: #1E9E5A; color: #fff;}
.v2_step_line {width: 60px; height: 2px; background: #ddd;}
.v2_step_line.is_done {background: #1E9E5A;}

.v2_modal_body {flex: 1 1 auto; min-height: 0; padding: 24px 0; overflow-y: auto;}
.v2_step_title {font-size: 20px; font-weight: 800; margin-bottom: 18px;}
.v2_step_subtitle {font-size: 15px; font-weight: 700; margin: 22px 0 12px;}

/* Option cards (tour type / transfer) */
.v2_option_card {display: flex; align-items: center; justify-content: space-between; border: 1px solid #e5e5e5; border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; cursor: pointer; transition: all .15s ease;}
.v2_option_card:hover {border-color: var(--warning, #CE8E31);}
.v2_option_card.is_selected {border-color: var(--warning, #CE8E31); background: #FFF8EF;}
.v2_option_card .v2_option_label {font-weight: 700; font-size: 14.5px;}
.v2_option_card .v2_option_sub {font-size: 12px; color: #888; font-weight: 400;}
.v2_option_radio {width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ccc; flex: 0 0 auto; position: relative;}
.v2_option_card.is_selected .v2_option_radio {border-color: var(--warning, #CE8E31);}
.v2_option_card.is_selected .v2_option_radio::after {content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--warning, #CE8E31);}

/* Add-on rows reuse qty_stepper/bb_addon_* from Template 1's stylesheet (shared, generic component styling) */

/* Modal summary sidebar */
.v2_summary_card {background: #fafafa; border-radius: 14px; padding: 20px; position: sticky; top: 20px;}
.v2_summary_card .v2_summary_img {width: 100%; height: 140px; object-fit: cover; border-radius: 10px; margin-bottom: 12px;}
.v2_summary_card h5 {font-size: 15px; font-weight: 700; margin-bottom: 10px;}
.v2_summary_meta {font-size: 12.5px; color: #666; margin-bottom: 14px;}

/* Wizard footer nav */
.v2_wizard_footer {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #eee;}

/* Cart / checkout pages use the cart_header, which is position:absolute on
   desktop (>=992px) and only falls back to normal flow below 991px — so the
   section needs explicit top clearance on desktop or content renders under it. */
.cart_section.v2_page {padding-top: 40px; padding-bottom: 60px;}
@media (min-width: 992px) {
  .cart_section.v2_page {padding-top: 150px;}
}

/* Cart / checkout step pill — small bordered card in the sidebar column,
   above the summary/details card (not a full-width line under the breadcrumb) */
.v2_wizard_pill {background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; box-shadow: 0 6px 18px rgba(20,20,20,.04);}
.v2_wizard_pill .step_done {color: #1a1a1a; font-weight: 700;}
.v2_wizard_pill .step_current {color: #1a1a1a; font-weight: 700;}
.v2_wizard_pill .step_muted {color: #aaa; font-weight: 500;}
.v2_wizard_pill .sep {margin: 0 8px; color: #ccc;}

/* Attraction add-on cards inside the transfer step (tour modal) — replaces
   the borrowed Template 1 bb_addon_* markup with v2 option-card styling */
.v2_addon_item {border: 1px solid #e5e5e5; border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; transition: border-color .15s ease;}
.v2_addon_item.is_selected {border-color: var(--warning, #CE8E31); background: #FFF8EF;}
.v2_addon_row {display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.v2_addon_row .form-check {margin: 0; display: flex; align-items: center; gap: 8px;}
.v2_addon_row .form-check-input {width: 18px; height: 18px; margin: 0; cursor: pointer;}
.v2_addon_row .form-check-label {font-weight: 600; font-size: 14px; cursor: pointer;}
.v2_addon_price {font-weight: 700; font-size: 13.5px; color: #1a1a1a;}
.v2_addon_ticket_options {display: flex; gap: 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; padding-left: 26px;}
.v2_addon_ticket_options .form-check {display: flex; align-items: center; gap: 6px; margin: 0;}
.v2_addon_ticket_options .form-check-input {width: 16px; height: 16px; margin: 0;}
.v2_addon_ticket_options .form-check-label {font-size: 12.5px; color: #666;}