/* ============================================================================
   FTS V2 — Sidebar: Booking Card (matching demo screenshot exactly)
   Custom inline datepicker + travelers counter + WTE modal button
   ============================================================================ */

/* ─── Sidebar Wrapper — sticky on scroll ─── */
.fts-v2-sidebar-wrapper {
    position: sticky !important;
    top: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-self: flex-start !important;
}
.fts-v2-sidebar-sticky {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* ─── Booking Card Shell ─── */
.fts-v2-booking-card {
    background: var(--v2-bg) !important;
    border: 1px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-xl) !important;
    overflow: hidden !important;
    box-shadow: var(--v2-shadow-md) !important;
}

/* ═══════════════════════════════════════
   1. DARK NAVY PRICE TOP (compact)
   ═══════════════════════════════════════ */
.fts-v2-booking-price-top {
    background: var(--v2-dark) !important;
    padding: 12px 16px 10px !important;
    border-radius: var(--v2-radius-xl) var(--v2-radius-xl) 0 0 !important;
}
.fts-v2-booking-price-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1px !important;
}
.fts-v2-booking-from {
    font-size: 11px !important;
    color: rgba(255,255,255,0.6) !important;
}
.fts-v2-booking-rating {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
}
.fts-v2-booking-rating i {
    color: var(--v2-secondary) !important;
    font-size: 11px !important;
}
.fts-v2-booking-rating span {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 400 !important;
    font-size: 11px !important;
}
.fts-v2-booking-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}
.fts-v2-booking-old-price {
    text-decoration: line-through !important;
    color: rgba(255,255,255,0.45) !important;
    font-size: 13px !important;
}
.fts-v2-booking-current-price {
    font-family: var(--v2-font-heading) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #fff !important;
}
.fts-v2-booking-per-person {
    color: rgba(255,255,255,0.7) !important;
    font-size: 11px !important;
}
.fts-v2-booking-save-badge {
    margin-top: 6px !important;
    display: inline-block !important;
    background: #dc3545 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

/* ═══════════════════════════════════════
   2. URGENCY BAR (light red)
   ═══════════════════════════════════════ */
.fts-v2-urgency-bar {
    background: #fde8e8 !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    color: #c53030 !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #f5c6cb !important;
}
.fts-v2-urgency-bar i {
    color: #c53030 !important;
    margin-right: 4px !important;
}

/* ═══════════════════════════════════════
   3. COUNTDOWN BAR (light orange)
   ═══════════════════════════════════════ */
.fts-v2-countdown-bar {
    background: #fff3ee !important;
    padding: 6px 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 11px !important;
    color: var(--v2-primary) !important;
    border-bottom: 1px solid var(--v2-border) !important;
}
.fts-v2-countdown-bar i { margin-right: 4px !important; }
.fts-v2-countdown-timer {
    font-family: var(--v2-font-heading) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: var(--v2-primary) !important;
}

/* ═══════════════════════════════════════
   4. CALENDAR — Accordion Style
   ═══════════════════════════════════════ */
.fts-v2-calendar-section {
    padding: 0 !important;
    border-bottom: 1px solid var(--v2-border) !important;
}

/* ─── Toggle Button ─── */
.fts-v2-cal-toggle {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    gap: 10px !important;
}
.fts-v2-cal-toggle:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}
.fts-v2-cal-toggle-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.fts-v2-cal-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: var(--v2-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.fts-v2-cal-icon-wrap svg {
    color: #fff !important;
    stroke: #fff !important;
    width: 18px !important;
    height: 18px !important;
}
.fts-v2-cal-toggle-text {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    min-width: 0 !important;
}
.fts-v2-cal-label {
    font-family: var(--v2-font-heading) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--v2-dark) !important;
    line-height: 1.2 !important;
}
.fts-v2-cal-selected {
    font-size: 11px !important;
    color: var(--v2-text-light) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.fts-v2-cal-selected.has-date {
    color: var(--v2-primary) !important;
    font-weight: 600 !important;
}
.fts-v2-cal-chevron {
    flex-shrink: 0 !important;
    color: var(--v2-text-muted) !important;
    transition: transform 0.3s ease !important;
}

/* ─── Expanded State ─── */
.fts-v2-calendar-section:not(.fts-v2-cal-collapsed) .fts-v2-cal-chevron {
    transform: rotate(180deg) !important;
}
.fts-v2-calendar-section:not(.fts-v2-cal-collapsed) .fts-v2-cal-toggle {
    background: #fff !important;
    border-bottom: 1px solid var(--v2-border) !important;
}

/* ─── Calendar Body ─── */
.fts-v2-cal-body {
    padding: 14px !important;
}

/* ─── Datepicker Shell ─── */
#fts-v2-datepicker .ui-datepicker {
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-family: var(--v2-font-body) !important;
    box-shadow: none !important;
}

/* ─── Month Navigation ─── */
#fts-v2-datepicker .ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    padding: 0 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 0 !important;
}
#fts-v2-datepicker .ui-datepicker-prev,
#fts-v2-datepicker .ui-datepicker-next {
    position: static !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    top: auto !important;
    flex-shrink: 0 !important;
    transition: background 0.15s !important;
}
#fts-v2-datepicker .ui-datepicker-prev { order: 1 !important; }
#fts-v2-datepicker .ui-datepicker-next { order: 3 !important; }
#fts-v2-datepicker .ui-datepicker-prev:hover,
#fts-v2-datepicker .ui-datepicker-next:hover {
    background: var(--v2-bg-gray) !important;
}
#fts-v2-datepicker .ui-datepicker-prev .ui-icon,
#fts-v2-datepicker .ui-datepicker-next .ui-icon {
    background-image: none !important;
    text-indent: 0 !important;
    font-size: 0 !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
}
#fts-v2-datepicker .ui-datepicker-prev .ui-icon::after {
    content: '‹' !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    color: var(--v2-text-light) !important;
    display: block !important;
    text-align: center !important;
    line-height: 1 !important;
}
#fts-v2-datepicker .ui-datepicker-next .ui-icon::after {
    content: '›' !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    color: var(--v2-text-light) !important;
    display: block !important;
    text-align: center !important;
    line-height: 1 !important;
}
#fts-v2-datepicker .ui-datepicker-title {
    font-family: var(--v2-font-heading) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--v2-dark) !important;
    line-height: 1 !important;
    margin: 0 !important;
    order: 2 !important;
    flex: 1 !important;
    text-align: center !important;
}

/* ─── Day Grid ─── */
#fts-v2-datepicker .ui-datepicker-calendar {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 2px !important;
    table-layout: fixed !important;
}

/* Day name headers */
#fts-v2-datepicker .ui-datepicker-calendar thead th {
    font-size: 9px !important;
    font-weight: 600 !important;
    color: var(--v2-text-muted) !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 0 0 6px !important;
    border: none !important;
    background: transparent !important;
}

/* Day cells */
#fts-v2-datepicker .ui-datepicker-calendar td {
    padding: 1px 0 !important;
    border: none !important;
    position: relative !important;
    text-align: center !important;
    vertical-align: middle !important;
    height: 36px !important;
    background: transparent !important;
}

/* Date number — perfect circle */
#fts-v2-datepicker .ui-datepicker-calendar td a,
#fts-v2-datepicker .ui-datepicker-calendar td span.ui-state-default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 1 !important;
    text-align: center !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--v2-dark) !important;
    background: transparent !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

/* Hover — soft circle */
#fts-v2-datepicker .ui-datepicker-calendar td a:hover {
    background: var(--v2-bg-gray) !important;
}

/* Selected / Active — solid fill + glow */
#fts-v2-datepicker .ui-datepicker-calendar td a.ui-state-active {
    background: var(--v2-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important;
}

/* Today — outline ring */
#fts-v2-datepicker .ui-datepicker-calendar td a.ui-state-highlight {
    background: transparent !important;
    color: var(--v2-primary) !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1.5px var(--v2-primary) !important;
}

/* Today + Selected */
#fts-v2-datepicker .ui-datepicker-calendar td a.ui-state-highlight.ui-state-active {
    background: var(--v2-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important;
}

/* Disabled / unavailable */
#fts-v2-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable span,
#fts-v2-datepicker .ui-datepicker-calendar td.fts-v2-dp-disabled span {
    color: #000 !important;
    opacity: 0.8 !important;
    cursor: default !important;
}

/* Other-month cells */
#fts-v2-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month span {
    color: var(--v2-text-muted) !important;
    opacity: 0.35 !important;
}

/* ─── FSD Annotation Dots ─── */
.fts-v2-dp-dot {
    display: block !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    margin: 2px auto 0 !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.fts-v2-dp-dot-low  { background: #e53e3e !important; }
.fts-v2-dp-dot-best { background: #38a169 !important; }

/* Legacy text labels — keep hidden as fallback */
.fts-v2-dp-label { display: none !important; }

/* ─── Calendar Legend ─── */
.fts-v2-calendar-legend {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--v2-border) !important;
}
.fts-v2-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: var(--v2-text-light) !important;
}
.fts-v2-legend-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}
.fts-v2-legend-low .fts-v2-legend-dot  { background: #e53e3e !important; }
.fts-v2-legend-best .fts-v2-legend-dot { background: #38a169 !important; }

/* ═══════════════════════════════════════
   5. TRAVELERS ACCORDION
   ═══════════════════════════════════════ */
.fts-v2-travelers-accordion {
    border-bottom: 1px solid var(--v2-border) !important;
    overflow: hidden !important;
}

/* ─── Toggle Button ─── */
.fts-v2-trav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12px 14px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}
.fts-v2-trav-toggle:hover {
    background: #f8fafc !important;
}
.fts-v2-trav-toggle-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.fts-v2-trav-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #f0f4ff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4f46e5 !important;
    flex-shrink: 0 !important;
}
.fts-v2-trav-icon-wrap svg {
    stroke: #4f46e5 !important;
}
.fts-v2-trav-toggle-text {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}
.fts-v2-trav-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--v2-dark) !important;
}
.fts-v2-trav-summary {
    font-size: 11px !important;
    color: var(--v2-text-muted) !important;
    margin-top: 1px !important;
}
.fts-v2-trav-chevron {
    color: #a0aec0 !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
}
.fts-v2-travelers-accordion:not(.fts-v2-trav-collapsed) .fts-v2-trav-chevron {
    transform: rotate(180deg) !important;
}

/* ─── Accordion Body ─── */
.fts-v2-trav-body {
    padding: 0 14px 14px !important;
}
.fts-v2-trav-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.fts-v2-trav-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
.fts-v2-trav-row-info {
    display: flex !important;
    flex-direction: column !important;
}
.fts-v2-trav-row-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--v2-dark) !important;
}
.fts-v2-trav-row-hint {
    font-size: 11px !important;
    color: var(--v2-text-muted) !important;
}
.fts-v2-trav-row-counter {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.fts-v2-trav-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--v2-border) !important;
    background: transparent !important;
    color: var(--v2-dark) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.15s ease !important;
    line-height: 1 !important;
}
.fts-v2-trav-btn:hover {
    border-color: var(--v2-primary) !important;
    color: var(--v2-primary) !important;
    background: var(--v2-primary-light, #fff3ee) !important;
}
.fts-v2-trav-num {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--v2-dark) !important;
    min-width: 20px !important;
    text-align: center !important;
}

/* ═══════════════════════════════════════
   6. TRUST POINTS
   ═══════════════════════════════════════ */
.fts-v2-booking-trust {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--v2-border) !important;
}
.fts-v2-booking-trust-item {
    font-size: 11px !important;
    color: var(--v2-text-light) !important;
    padding: 2px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.fts-v2-trust-svg {
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
}

/* ═══════════════════════════════════════
   7. CHECK AVAILABILITY BUTTON
   ═══════════════════════════════════════ */
.fts-v2-booking-cta {
    padding: 10px 14px !important;
}
.fts-v2-check-btn {
    display: block !important;
    width: 100% !important;
    background: var(--v2-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: var(--v2-font-heading) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-align: center !important;
    letter-spacing: 0.3px !important;
}
.fts-v2-check-btn:hover {
    background: var(--v2-primary-dark, #e55a28) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(255,107,53,0.35) !important;
}

/* ═══════════════════════════════════════
   8. PAYMENT ICONS
   ═══════════════════════════════════════ */
.fts-v2-payment-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 14px 10px !important;
    border-top: 1px solid var(--v2-border) !important;
}
.fts-v2-payment-icons > i {
    font-size: 11px !important;
    color: var(--v2-text-muted) !important;
}
.fts-v2-payment-text {
    font-size: 10px !important;
    color: var(--v2-text-muted) !important;
}
.fts-v2-payment-sep {
    font-size: 10px !important;
    color: var(--v2-text-muted) !important;
}

/* ═══════════════════════════════════════
   9. ENQUIRY CARD
   ═══════════════════════════════════════ */
.fts-v2-enquiry-card {
    background: var(--v2-bg) !important;
    border: 1px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-xl) !important;
    padding: 16px !important;
    box-shadow: var(--v2-shadow-sm) !important;
}
.fts-v2-enquiry-card h4 {
    font-family: var(--v2-font-heading) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--v2-dark) !important;
    margin: 0 0 4px !important;
}
.fts-v2-enquiry-card h4 i {
    color: var(--v2-primary) !important;
    margin-right: 6px !important;
}
.fts-v2-enquiry-card > p {
    color: var(--v2-text-light) !important;
    font-size: 11px !important;
    margin: 0 0 12px !important;
}
.fts-v2-enquiry-card .wte_enquiry_contact_form-wrap {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.fts-v2-enquiry-card input,
.fts-v2-enquiry-card select,
.fts-v2-enquiry-card textarea {
    border: 1.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-sm) !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    width: 100% !important;
}
.fts-v2-enquiry-card input:focus,
.fts-v2-enquiry-card textarea:focus {
    border-color: var(--v2-primary) !important;
    box-shadow: 0 0 0 3px rgba(255,107,53,0.1) !important;
    outline: none !important;
}