/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/**
 * FILE ORGANIZATION:
 * 
 * 1. MOBILE BOTTOM BAR CRITICAL STYLES (must be first for specificity)
 * 2. LAMUSE TABS - Tab navigation component
 * 3. TRIP BUILDER - Main booking system (Steps 1-3)
 *    - Step containers and titles
 *    - Variant cards with steppers
 *    - Subtotal and error displays
 * 4. CHECKOUT FORM STYLING - Date/time picker wrapper
 * 5. WOOCOMMERCE INTEGRATION - Cart/checkout/order customization
 * 6. VIDEO BACKGROUND FIX - Mobile video autoplay
 * 7. SUMMARY & BOOKING BUTTONS - Step 3 review section
 * 8. DESKTOP STICKY SUMMARY - Fixed sidebar (1100px+)
 * 9. MOBILE BOTTOM BAR - Fixed bottom bar (<1100px)
 * 10. MOBILE RESPONSIVE - Small screen adjustments
 */

/**
 * MOBILE BOTTOM BAR - CRITICAL STYLES
 * These styles must be at the top with high specificity to override theme defaults
 * The mobile bottom bar is a fixed element that appears at the bottom of the screen
 * on mobile devices (<1100px) showing booking status and a "View & Book" button
 */

/* Force mobile bottom bar to show on small screens */
@media (max-width: 1099px) {
  #hsMobileBottomBar.hs-mobile-bottom-bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
  }
}

/**
 * LAMUSE TABS
 * Custom tab component styling for content sections
 */

.lamuse-tabs {
  margin-top: 20px;
}
.tabs-header {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.tab-btn {
  background: none;
  border: none;
  font-size: 16px;
  padding: 12px 0;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

.tab-btn.active {
  font-weight: bold;
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
}

.tab-section {
  margin-top: 30px;
}

/**
 * ===== TRIP BUILDER =====
 * Complete booking system with 3 steps:
 * Step 1: Date selection
 * Step 2: Variant cards with traveler steppers
 * Step 3: Summary and booking button
 * 
 * Additional components:
 * - Desktop sticky summary sidebar (1100px+)
 * - Mobile bottom bar (<1100px)
 */

/* ===== TRIP BUILDER ===== */

.trip-booking {
  max-width: 900px;
}

/**
 * Step Container
 * Each step (date, options, summary) is wrapped in .step
 * Provides consistent spacing between sections
 */

/* Steps */
.step {
  margin-top: 20px;
}

.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight:600;
  margin-bottom:10px;
}

.trip-booking .step-title span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #11202d;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 32px;
}

/**
 * Variants Container
 * Holds all variant cards in a vertical flex layout
 * Each variant represents a different trip option (e.g., Standard, Deluxe)
 */

/* Variants */
.variants {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.trip-booking .step #booking-date,
.trip-booking .step .input-date {
  display: block;
  width: 80%;
  max-width: 80%;
  box-sizing: border-box;
}

/**
 * Variant Cards
 * Individual trip option cards containing:
 * - Header with title and badge
 * - Description and note
 * - Price display
 * - Traveler steppers (adults, children, infants)
 * - Subtotal (shown when travelers added)
 * - Error messages (shown when validation fails)
 * 
 * States:
 * - .has-selection: Has travelers but passes validation (shows subtotal)
 * - .is-invalid: Has travelers but fails min_adults validation (red border + error)
 */

/* Variant Cards */
.variant {
  border: 1px solid #0b7e93;
  border-radius: 12px;
  padding: 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.variant.is-invalid {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.08);
}

/**
 * Variant Header
 * Title and "Most popular" badge positioning
 */

/* Variant Header */
.variant-header {
  display:flex;
  justify-content:space-between;
}

.badge{
  background:#f5a623;
  padding:4px 10px;
  border-radius:8px;
  font-size:11px;
}

.price strong{
  font-size:20px;
  font-weight: 700;
}

/**
 * Variant Note
 * Optional informational box with icon
 * Supports bold text via <b> or <strong> tags
 * Example: "Minimum 2 adults required to book this option"
 */

/* Variant Note */
.trip-booking .variant-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 12px;
  padding: 10px 12px;
  border: 1px solid #d3d8de;
  border-radius: 14px;
  background: #f3f6f8;
}

.trip-booking .variant-note-icon {
  width: 20px;
  height: 20px;
  border: 1px solid #9aa9b7;
  border-radius: 999px;
  color: #647789;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  line-height: 1;
}

.trip-booking .variant-note p {
  margin: 0;
  color: #415568;
  font-size: 15px;
  line-height: 1.35;
}

.trip-booking .variant-note p b,
.trip-booking .variant-note p strong {
  font-weight: 700;
}

/**
 * Variant Rows (Traveler Steppers)
 * Contains the traveler type rows with quantity controls
 * Each row has: Label (e.g., "Adults Age 8+") + Stepper (-, qty, +)
 * 
 * Stepper buttons:
 * - .minus: Decrease quantity (minimum 0)
 * - .plus: Increase quantity (no maximum)
 * - .qty: Current quantity display
 */

/* Variant Rows (Traveler Steppers) */
.trip-booking .row {
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center;
  width:100%;
  gap:12px;
  margin-top:10px;
  justify-content: space-between;
}

.trip-booking .left{
  flex: 0 0 50%;
  min-width: 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left: 15px;
}

.trip-booking .variant-rows .left {
  padding-left: 0;
}

.trip-booking .stepper{
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 24px 24px 24px;
  align-items: center;
  justify-items: center;
  margin-right: 15px;
  column-gap: 6px;
  min-height: 28px;
}

.trip-booking .stepper button{
  width:24px;
  height:24px;
  border-radius:50%;
  cursor:pointer;
  background: none;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.trip-booking .stepper .minus{
  border-color: rgba(0, 0, 0, 0.25);
}

.trip-booking .stepper .minus:hover{
  border-color: rgba(0, 0, 0, 1);
}

.trip-booking .stepper .plus{
  border-color: rgba(0, 0, 0, 0.2);
}

.trip-booking .stepper .plus:hover{
  border-color: rgba(0, 0, 0, 1);
}

.trip-booking .stepper .qty{
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: center;
  line-height: 28px;
  font-weight: 600;
}

.trip-booking .variant-rows{
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-top: 0px;
  padding: 8px 0;
}

.trip-booking .variant-rows .row{
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0;
}

.trip-booking .variant-rows .row + .row {
  margin-top: 0px !important;
}

.trip-booking .variant-rows .left div {
  line-height: 1.1;
  font-size: 16px;
  margin: 0;
}

.trip-booking .variant-rows .left small {
  font-size: 12px;
  line-height: 1.2;
  display: block;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/**
 * Variant Subtotal
 * Shows calculated price for this variant
 * Hidden by default, shown when .has-selection class added (JavaScript)
 * Only displays when travelers are selected AND validation passes
 */

/* Variant Subtotal */
.trip-booking .variant .variant-subtotal {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 !important;
  margin-left: 0 !important;
}

.trip-booking .variant.has-selection .variant-subtotal {
  display: flex;
}

.trip-booking .variant .variant-subtotal > span:first-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.trip-booking .variant-subtotal strong{
  font-size: 18px;
  font-weight: 700;
}

/**
 * Variant Error Messages
 * Inline validation error box with icon
 * Shows when variant has travelers but min_adults requirement not met
 * Example: "Add 1 more adult to book this option (min. 2)"
 * 
 * Display controlled by:
 * - .variant.is-invalid class (shows error)
 * - [hidden] attribute (overrides display)
 */

/* Variant Error Messages */
.trip-booking .variant-error {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #ffb3b3;
  border-radius: 14px;
  background: #fff1f1;
}

.trip-booking .variant.is-invalid .variant-error {
  display: flex;
}

.trip-booking .variant-error[hidden] {
  display: none !important;
}

.trip-booking .variant-error-icon {
  width: 18px;
  height: 18px;
  border: 1px solid #ff6b6b;
  border-radius: 999px;
  color: #ff3b30;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  line-height: 1;
  margin-top: 2px;
}

.trip-booking .variant-error-text {
  margin: 0;
  color: #ff3b30;
  font-size: 15px;
  line-height: 1.4;
}

/**
 * Checkout Form Styling
 * Custom date/time picker wrapper for specific products
 * Yellow dashed border design for emphasis
 */

/* Checkout & Order Pages */
.chon-ngay-gio-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 15px;
  padding: 12px;
  background: #fffbe6;
  border: 2px dashed #fccb00;
  border-radius: 8px;
  max-width: 100%;
  align-items: flex-end;
}

.chon-ngay-gio-wrapper .field-ngay {
  flex: 2 1 0%;
  min-width: 140px;
}

.chon-ngay-gio-wrapper .field-gio {
  flex: 1 1 0%;
  min-width: 100px;
}

.chon-ngay-gio-wrapper label {
  font-weight: 600;
  font-size: 14px;
  color: #d35400;
  margin-bottom: 6px;
  display: block;
}

.chon-ngay-gio-wrapper input,
.chon-ngay-gio-wrapper select {
  width: 100%;
  padding: 10px 10px 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
}

/**
 * WooCommerce Checkout & Order Details
 * Custom formatting for booking data display in cart, checkout, and order pages
 * Handles variant subtotal alignment and meta data presentation
 */

/* Checkout booking row alignment */
.woocommerce-checkout-review-order-table td.product-name dl.variation,
.woocommerce-checkout-review-order-table td.product-name dl.variation dt,
.woocommerce-checkout-review-order-table td.product-name dl.variation dd {
  line-height: 1.5;
}

.woocommerce-checkout-review-order-table td.product-total .hs-booking-subtotal-lines {
  display: block;
}

.woocommerce-checkout-review-order-table td.product-total .hs-booking-subtotal-line {
  display: block;
  line-height: 1.5;
}

.woocommerce-checkout-review-order-table td.product-total .hs-booking-subtotal-lines.has-departure-date {
  padding-top: 1.5em;
}

/* Order-received booking row alignment */
.woocommerce-order-details td.product-total {
  position: relative;
  vertical-align: top;
}

.woocommerce-order-details .hs-order-variant-total-stack {
  position: relative;
  min-height: 1px;
}

.woocommerce-order-details .hs-order-variant-total-line {
  display: block;
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
}

.woocommerce-order-details .hs-order-variant-total-line-abs {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  width: 100%;
}

.woocommerce-order-details .hs-order-variant-total-line.has-meta-gap {
  margin-bottom: 1.45em;
}

.woocommerce-order-details td.product-name dl.variation dt,
.woocommerce-order-details td.product-name .wc-item-meta .wc-item-meta-label,
.woocommerce-order-details td.product-name ul.wc-item-meta strong {
  display: inline;
  margin-right: 0.35em;
  font-weight: 700;
}

.woocommerce-order-details td.product-name dl.variation dd {
  display: inline;
  margin: 0;
}

.woocommerce-order-details td.product-name .hs-order-meta-value {
  font-weight: 400;
}

.woocommerce-checkout-review-order-table td.product-name a,
.woocommerce-order-details td.product-name a {
  font-weight: 700;
}

/**
 * Video Background Mobile Fix
 * Forces Flatsome theme video backgrounds to display and autoplay on mobile devices
 * By default, Flatsome hides video backgrounds on mobile for performance
 */

@media (max-width: 768px) {
  .ux-bg .background-video,
  .ux-bg-video,
  .background-video,
  .hs-force-show-bg-video {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/**
 * ===== SUMMARY & BOOKING BUTTONS =====
 * Step 3: Final review section before booking
 * Contains:
 * - Selection list (departure date + variant rows)
 * - Grand total display
 * - Main booking button
 */

/* ===== SUMMARY & BOOKING BUTTONS ===== */

.summary {
  margin-top: 30px;
  padding:20px;
  background:#f5f5f5;
  border-radius:12px;
}

/**
 * Step 3 Title Spacing
 * Reduces gap between numbered title and summary box
 */

.trip-booking .step-summary-title {
  margin-bottom: 10px;
}

.trip-booking .step-summary-title + .summary {
  margin-top: 0;
}

/**
 * Summary Selection List
 * Shows what user has selected:
 * - Departure date (bold, with border bottom)
 * - Variant rows (title × quantity + price)
 * Empty state: Helper message when no travelers selected
 */

.summary-selection-list {
  margin-bottom: 20px;
}

.summary-empty-message {
  color: #7a7a7a;
  font-size: 15px;
  margin: 0 0 16px;
  line-height: 1.5;
}

.summary-date-row {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ddd;
}

.summary-date-row strong {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.summary-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e8e8e8;
}

.summary-item-row:last-child {
  margin-bottom: 16px;
}

.summary-item-title {
  flex: 1;
  font-size: 15px;
  color: #444;
  line-height: 1.4;
}

.summary-item-price {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}

/**
 * ===== BOOKING BUTTONS =====
 * Main booking buttons with different states:
 * - Disabled: Gray background, cursor not-allowed
 * - Active: Green background (#1D9962), clickable
 * Button text changes based on validation state
 */

/* ===== BOOKING BUTTONS ===== */

#reserveBtn {
  width: 100%;
  height:50px;
  background:#1D9962;
  color:#fff;
  border:none;
  border-radius:999px;
}

/**
 * Sticky Reserve Button (Desktop Sidebar)
 * Same styling as main button but for sticky summary sidebar
 */

#stickyReserveBtn {
  width: 100%;
  height: 56px;
  background: #22a162;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

#stickyReserveBtn:disabled {
  background: #7dc5a5;
  cursor: not-allowed;
}

/**
 * ===== DESKTOP STICKY SUMMARY =====
 * Fixed sidebar that appears on desktop (1100px+) when travelers are selected
 * Follows scroll and shows:
 * - "YOUR SELECTION" heading
 * - Departure date with calendar icon
 * - Selected variants with quantities and prices
 * - Total price (large display)
 * - Booking button
 * 
 * Positioning:
 * - JavaScript calculates left/top based on page layout
 * - Aligns with Reserve section to avoid overlapping product images
 * - Visible only when .is-visible class added (has travelers)
 */

/* ===== DESKTOP STICKY SUMMARY ===== */

.hs-sticky-summary {
  display: none;
}

@media (min-width: 1100px) {
  .hs-sticky-summary {
    position: fixed;
    z-index: 60;
    margin-top: 0;
  }

  .hs-sticky-summary.is-visible {
    display: block;
  }
}

/**
 * ===== MOBILE BOTTOM BAR =====
 * Fixed bottom bar for mobile devices (<1100px viewport)
 * Provides quick access to booking status and summary
 * 
 * Features:
 * - 64px height with 8px bottom margin
 * - Dynamic text based on booking state:
 *   1. "Choose your options" (no travelers, button disabled)
 *   2. "Minimum adults not meet" (validation failed, button disabled)
 *   3. "Ready to book" (all valid, button enabled)
 * - "View & Book" button scrolls to Step 3 on click
 * - Green button matching main booking button style
 * 
 * Z-index: 99999 to ensure it appears above all theme elements
 * Requires high specificity (#ID.class) to override theme styles
 */

/* ===== MOBILE BOTTOM BAR ===== */

/* Mobile Bottom Bar */
.hs-mobile-bottom-bar {
  display: none;
  position: fixed !important;
  bottom: 8px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  background: #f8f9fa !important;
  border-top: 2px solid #ddd !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/**
 * Mobile Bottom Bar Media Query
 * Shows bar on small screens and adds padding to prevent content hiding
 */

@media (max-width: 1099px) {
  .hs-mobile-bottom-bar {
    display: block !important;
  }

  .trip-booking {
    padding-bottom: 88px;
  }
  
  body {
    padding-bottom: 72px !important;
  }
}

/**
 * Mobile Bottom Bar Content
 * Flexbox layout: text on left, button on right
 * Both vertically centered
 */

.hs-mobile-bottom-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  padding: 0 24px;
  max-width: 100%;
}

/**
 * Mobile Bottom Bar Text
 * Status message on left side
 * Truncates with ellipsis if too long
 */

.hs-mobile-bottom-bar-text {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 0;
}

/**
 * Mobile Bottom Bar Button
 * "View & Book" button on right side
 * States:
 * - Active: Green (#22a162), clickable
 * - Hover: Darker green (#1d9962)
 * - Disabled: Light green (#7dc5a5), not clickable
 * Height: 36px with 14px top/bottom margins = 64px total bar height
 */

.hs-mobile-bottom-bar-btn {
  flex-shrink: 0;
  padding: 0 24px;
  background: #22a162 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
  margin: 14px 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs-mobile-bottom-bar-btn:hover:not(:disabled) {
  background: #1d9962 !important;
}

.hs-mobile-bottom-bar-btn:disabled {
  background: #7dc5a5 !important;
  color: #fff !important;
  cursor: not-allowed;
}

.hs-sticky-summary-card {
  background: #fff;
  border: 1px solid #dbe1e5;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 12px 26px rgba(12, 28, 40, 0.12);
}

.hs-sticky-summary-heading {
  margin: 0 0 16px;
  color: #6d7b86;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hs-sticky-summary-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #24343e;
}

.hs-sticky-summary-date-row strong {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.hs-sticky-summary-icon {
  font-size: 18px;
  line-height: 1;
}

.hs-sticky-summary-items {
  border-bottom: 1px solid #dde3e7;
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.hs-sticky-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.hs-sticky-summary-item:first-child {
  margin-top: 0;
}

.hs-sticky-summary-item-left {
  min-width: 0;
  color: #5d707c;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-sticky-summary-item-price {
  color: #1f2f39;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.hs-sticky-summary-total-row {
  margin-bottom: 16px;
}

.hs-sticky-summary-total-row > span {
  display: block;
  margin-bottom: 6px;
  color: #576a75;
  font-size: 16px;
}

.hs-sticky-summary-total-row > strong {
  display: block;
  color: #1f2f39;
  font-size: 48px;
  line-height: 1;
  font-weight: 800;
}

/**
 * ===== MOBILE RESPONSIVE =====
 * Adjustments for small screens (max-width: 768px)
 * - Full-width date input
 * - Full-width booking sections
 */

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

  .trip-booking .step {
    width: 100%;
  }

  .trip-booking .step input#booking-date,
  .trip-booking .step input.input-date {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;
  }


}