/**
 * Yatra Single Trip Page Styles
 * Industry-standard design based on leading travel booking platforms
 * Uses common.css variables for design consistency
 */

/* ============================================
   RESET & BASE
   Uses consistent container widths from common.css
   ============================================ */
.yatra-single-trip {
    font-family: var(--yatra-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    line-height: 1.6;
    color: var(--yatra-text-primary, #1a1a1a);
    width: 100%;
    min-height: 100vh;
}

/* Inner container with max-width */
.yatra-single-trip > .yatra-trip-hero-new,
.yatra-single-trip > .yatra-trip-tags,
.yatra-single-trip > .yatra-trip-quick-facts-section,
.yatra-single-trip > .yatra-trip-container {
    width: 100%;
    max-width: var(--yatra-container-max-width, 1300px);
    margin-left: auto;
    margin-right: auto;
}

.yatra-single-trip > * {
    max-width: 100%;
}

.yatra-single-trip * {
    box-sizing: border-box;
}

.yatra-single-trip img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   UNIFIED SPACING SYSTEM
   Consistent spacing across all sections
   ============================================ */

/* Spacing Variables - Consistent Design System */
:root {
    --yatra-section-padding: 60px;
    --yatra-section-gap: 48px;
    --yatra-container-padding: 20px;
    --yatra-element-gap: 24px;
    --yatra-small-gap: 16px;
    --yatra-tiny-gap: 12px;
    --yatra-mini-gap: 8px;
    --yatra-micro-gap: 6px;
}

/* Mobile Responsive Spacing */
@media (max-width: 768px) {
    :root {
        --yatra-section-padding: 40px;
        --yatra-section-gap: 32px;
        --yatra-container-padding: 16px;
        --yatra-element-gap: 20px;
        --yatra-small-gap: 12px;
        --yatra-tiny-gap: 8px;
        --yatra-mini-gap: 6px;
        --yatra-micro-gap: 4px;
    }
}

@media (max-width: 480px) {
    :root {
        --yatra-section-padding: 32px;
        --yatra-section-gap: 24px;
        --yatra-container-padding: 12px;
        --yatra-element-gap: 16px;
        --yatra-small-gap: 12px;
        --yatra-tiny-gap: 8px;
        --yatra-mini-gap: 6px;
        --yatra-micro-gap: 4px;
        --yatra-hero-mobile-padding-top: 12px;
        --yatra-hero-mobile-padding-bottom: 16px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    :root {
        --yatra-hero-mobile-padding-top: 16px;
        --yatra-hero-mobile-padding-bottom: 20px;
    }
}

/* Update main container padding */
.yatra-single-trip {
    padding: 0;
}

/* Unified Container System */
.yatra-single-trip > .yatra-trip-hero-new,
.yatra-single-trip > .yatra-trip-tags,
.yatra-single-trip > .yatra-trip-quick-facts-section,
.yatra-single-trip > .yatra-trip-attributes,
.yatra-single-trip > .yatra-trip-container,
.yatra-single-trip > .yatra-group-discounts-section,
.yatra-single-trip > .yatra-similar-section {
    width: 100%;
    max-width: var(--yatra-container-max-width, 1300px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--yatra-container-padding);
    padding-right: var(--yatra-container-padding);
}

/* Reviews: descendant selector so width matches .yatra-trip-container even if wrapped; align-self fixes flex parents with align-items:center */
.yatra-single-trip .yatra-reviews-section {
    width: 100%;
    max-width: var(--yatra-container-max-width, 1300px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--yatra-container-padding);
    padding-right: var(--yatra-container-padding);
    box-sizing: border-box;
    align-self: stretch;
    min-width: 0;
}

/* Unified Section Spacing
   One rhythm between stacked blocks: previous section’s bottom spacing only.
   --yatra-section-padding: top of the first block (hero) below the page chrome only.
   Do not stack padding-top: section-padding on a section that already follows margin/padding-bottom: section-gap. */
.yatra-trip-hero-new {
    padding-top: var(--yatra-section-padding);
    padding-bottom: var(--yatra-section-gap);
}

.yatra-trip-tags {
    padding-top: 0;
    padding-bottom: var(--yatra-section-gap);
}

.yatra-trip-quick-facts-section,
.yatra-trip-attributes {
    padding-top: 0;
    padding-bottom: var(--yatra-section-gap);
    background: transparent;
}

.yatra-trip-container {
    padding-top: 0;
    padding-bottom: var(--yatra-section-gap);
}

/* When reviews follows the main grid directly, avoid double gap (trip bottom + reviews top) */
.yatra-trip-container:has(+ .yatra-reviews-section) {
    padding-bottom: 0;
}

/* Full-width sections (match template class names) — see also SIMILAR TRIPS / REVIEWS blocks */
.yatra-group-discounts-section {
    padding-top: 0;
    padding-bottom: var(--yatra-section-gap);
}

/* ============================================
   COMMON BUTTON STYLES
   ============================================ */
.yatra-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--yatra-primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.yatra-btn svg {
    flex-shrink: 0;
}

.yatra-btn:hover {
    background: var(--yatra-primary-dark, #2563eb);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* ============================================
   SVG ICONS
   ============================================ */
.yatra-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    flex-shrink: 0;
}

.yatra-icon-sm {
    width: 20px;
    height: 20px;
}

.yatra-icon-lg {
    width: 32px;
    height: 32px;
}

/* Font Awesome webfont icons use font-size (not SVG width/height) */
.yatra-icon.fa-solid,
.yatra-icon.fa-regular,
.yatra-icon-sm.fa-solid,
.yatra-icon-sm.fa-regular,
.yatra-icon-lg.fa-solid,
.yatra-icon-lg.fa-regular,
.yatra-icon-xl.fa-solid,
.yatra-icon-xl.fa-regular {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    line-height: 1;
    color: inherit;
}

.yatra-icon-sm.fa-solid,
.yatra-icon-sm.fa-regular {
    font-size: 18px;
}

.yatra-icon.fa-solid,
.yatra-icon.fa-regular {
    font-size: 22px;
}

.yatra-icon-lg.fa-solid,
.yatra-icon-lg.fa-regular {
    font-size: 28px;
}

.yatra-icon-xl.fa-solid,
.yatra-icon-xl.fa-regular {
    font-size: 40px;
}

.yatra-icon-xl {
    width: 48px;
    height: 48px;
}

.yatra-booking-button svg,
.yatra-booking-enquiry-button svg,
.yatra-card-book-btn svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    stroke: currentColor !important;
    fill: none !important;
}

#check-availability-btn svg,
button.yatra-booking-button svg,
button.yatra-booking-enquiry-button svg,
button.yatra-card-book-btn svg,
a.yatra-card-book-btn svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

#check-availability-btn svg,
button.yatra-card-book-btn svg,
button.yatra-booking-button svg {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
    stroke-width: 2 !important;
}

.yatra-booking-button svg path,
.yatra-booking-enquiry-button svg path,
.yatra-card-book-btn svg path {
    stroke: currentColor !important;
}

#check-availability-btn svg path,
button.yatra-card-book-btn svg path,
button.yatra-booking-button svg path,
button.yatra-booking-enquiry-button svg path {
    stroke: currentColor !important;
}

#check-availability-btn svg path,
button.yatra-card-book-btn svg path,
button.yatra-booking-button svg path {
    stroke: #fff !important;
}

/* ============================================
   STICKY NAVIGATION BAR
   ============================================ */
.yatra-sticky-nav {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

/* Account for WordPress admin bar */
.admin-bar .yatra-sticky-nav {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .yatra-sticky-nav {
        top: 46px;
    }
}

.yatra-sticky-nav.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/*
 * Hide the desktop sticky tab strip on mobile. On phones, the mobile sticky
 * sidebar (yatra-mobile-sticky-sidebar) handles the "back to booking" affordance,
 * and the horizontally-scrolling top nav competes with the theme header + the WP
 * admin bar for limited vertical space. Same 768px breakpoint other trip mobile
 * rules use elsewhere in this file.
 */
@media (max-width: 768px) {
    .yatra-sticky-nav,
    .yatra-sticky-nav-container {
        display: none !important;
    }
}

.yatra-sticky-nav-container {
    max-width: var(--yatra-container-max-width, 1300px);
    margin: 0 auto;
    padding: 0 var(--yatra-container-padding);
    display: flex;
    align-items: center;
    gap: var(--yatra-element-gap);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.yatra-sticky-nav-item {
    display: flex;
    align-items: center;
    gap: var(--yatra-mini-gap);
    padding: 16px 0;
    color: #6b7280;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.yatra-sticky-nav-item:hover,
.yatra-sticky-nav-item.active {
    color: var(--yatra-primary, #3b82f6);
    border-bottom-color: var(--yatra-primary, #3b82f6);
}

.yatra-sticky-nav-item svg {
    width: 18px;
    height: 18px;
}

.yatra-sticky-nav-price {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    color: var(--yatra-primary, #3b82f6);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

.yatra-sticky-nav-price svg {
    width: 20px;
    height: 20px;
}

.yatra-sticky-nav-cta {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.yatra-sticky-nav-cta .yatra-btn {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.yatra-sticky-nav-cta .yatra-btn-primary {
    background: var(--yatra-primary, #3b82f6);
    color: white;
    border-color: var(--yatra-primary, #3b82f6);
}

.yatra-sticky-nav-cta .yatra-btn-primary:hover {
    background: var(--yatra-primary-dark, #2563eb);
    border-color: var(--yatra-primary-dark, #2563eb);
    color: white;
}

/* ============================================
   NEW HERO SECTION
   ============================================ */
.yatra-trip-hero-new {
    max-width: 100%;
    margin: 0 auto;
    padding-top: var(--yatra-section-padding);
    padding-bottom: var(--yatra-section-gap);
}

.yatra-hero-header {
    margin-bottom: 24px;
    text-align: left;
}

.yatra-hero-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #6b7280;
    justify-content: flex-start;
}

.yatra-hero-breadcrumb a {
    color: var(--yatra-primary, #3b82f6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.yatra-hero-breadcrumb a:hover {
    color: var(--yatra-primary-dark, #2563eb);
    text-decoration: underline;
}

.yatra-hero-breadcrumb-separator {
    color: #9ca3af;
    margin: 0 4px;
}

.yatra-hero-breadcrumb-current {
    color: #374151;
    font-weight: 500;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.yatra-hero-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    text-align: left;
}

.yatra-trip-hero-title-new {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: left;
}

.yatra-hero-rating {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    text-align: left;
}

.yatra-hero-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 15px;
    font-weight: 500;
}

.yatra-hero-duration {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 15px;
    font-weight: 500;
}

.yatra-rating-stars {
    display: flex;
    gap: 2px;
    font-size: 20px;
    line-height: 1;
}

/* Do not set gold on the container — it made every star look filled. Empty = gray, .filled = gold. */
.yatra-rating-stars > .yatra-star,
.yatra-rating-stars .yatra-star {
    display: inline-block;
    font-size: 20px;
    color: #d1d5db;
}

.yatra-rating-stars .yatra-star.filled {
    color: var(--yatra-star, #fbbf24);
}

.yatra-no-rating .yatra-star {
    color: #d1d5db;
}

.yatra-no-reviews {
    color: #9ca3af;
    font-style: italic;
}

.yatra-rating-stars .yatra-star.half {
    background: linear-gradient(
        90deg,
        var(--yatra-star, #fbbf24) 50%,
        #d1d5db 50%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.yatra-rating-number {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.yatra-rating-text {
    font-size: 14px;
    color: #6b7280;
}

.yatra-hero-images {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
    align-items: start;
    width: 100%;
}

.yatra-hero-main-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f3f4f6;
    width: 100%;
    height: 500px;
}

.yatra-hero-main-img-link {
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
}


/* Hero Media Badges */
.yatra-hero-media-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.yatra-media-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(17, 24, 39, 0.55);
    color: rgba(255, 255, 255, 0.95);
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    transition: none;
    cursor: default;
    user-select: none;
    pointer-events: none;
}

.yatra-media-badge:hover {
    background: rgba(17, 24, 39, 0.55);
}

.yatra-media-badge-icon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
}

.yatra-media-badge-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.yatra-media-badge-count {
    font-weight: 600;
}

/* Media Type Specific Colors */
.yatra-media-badge-image {
    background: rgba(59, 130, 246, 0.8);
}

.yatra-media-badge-video {
    background: rgba(239, 68, 68, 0.8);
}

.yatra-media-badge-youtube {
    background: rgba(255, 0, 0, 0.8);
}

.yatra-media-badge-tour {
    background: rgba(16, 185, 129, 0.8);
}

.yatra-media-badge-document {
    background: rgba(245, 158, 11, 0.8);
}

/* Hero Media Switcher */
.yatra-hero-media-switcher {
    position: absolute;
    bottom: 15px;
    left: 15px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.yatra-media-switcher-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #374151;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.yatra-media-switcher-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}

.yatra-media-switcher-btn.yatra-media-switcher-active {
    background: var(--yatra-primary, #3b82f6);
    color: white;
    border-color: var(--yatra-primary, #3b82f6);
}

.yatra-media-switcher-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}

.yatra-media-switcher-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* Hero Image Dark Overlay */
.yatra-hero-main-img-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
    pointer-events: none;
    transition: background 0.3s ease;
}

.yatra-hero-main-img-link:hover::before {
    background: rgba(0, 0, 0, 0.25);
}

/* Media Overlays */
.yatra-media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}

.yatra-play-button {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.yatra-play-button:hover {
    transform: scale(1.1);
}

.yatra-document-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.yatra-document-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    color: white;
    text-align: left;
}

.yatra-document-icon {
    flex-shrink: 0;
}

.yatra-document-details {
    flex: 1;
}

.yatra-document-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.2;
}

.yatra-document-size {
    font-size: 14px;
    opacity: 0.8;
}

/* Play Button Overlay Styles */
.yatra-media-play-overlay {
    pointer-events: auto;
    cursor: pointer;
}

/* YouTube Overlay Styles */
.yatra-media-youtube-overlay {
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
}

.yatra-youtube-play-button {
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.yatra-youtube-play-button:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}

.yatra-youtube-play-button svg {
    display: block;
}

/* 360° Tour Overlay Styles */
.yatra-media-tour-overlay {
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
}

.yatra-tour-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    color: white;
    text-align: center;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 16px;
    border: 2px solid rgba(16, 185, 129, 0.4);
    backdrop-filter: blur(8px);
    max-width: 300px;
}

.yatra-tour-icon {
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.yatra-tour-details {
    flex: 1;
}

.yatra-tour-type {
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.yatra-tour-action {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    background: rgba(16, 185, 129, 0.9);
    border-radius: 24px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    transition: all 0.3s ease;
}

.yatra-tour-info:hover .yatra-tour-action {
    background: rgba(16, 185, 129, 1);
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .yatra-hero-media-badges {
        top: 10px;
        left: 10px;
        gap: 6px;
    }
    
    .yatra-media-badge {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .yatra-hero-media-switcher {
        bottom: 10px;
        left: 10px;
        gap: 6px;
        flex-wrap: wrap;
    }
    
    .yatra-media-switcher-btn {
        padding: 6px 10px;
        font-size: 11px;
        flex: 0 0 auto;
    }
    
    .yatra-media-switcher-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .yatra-hero-media-switcher {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    /* Responsive overlays */
    .yatra-youtube-play-button svg {
        width: 70px !important;
        height: 70px !important;
    }
    
    .yatra-tour-info {
        max-width: 250px;
        padding: 20px;
        gap: 12px;
    }
    
    .yatra-tour-icon svg {
        width: 60px !important;
        height: 60px !important;
    }
    
    .yatra-tour-title {
        font-size: 18px;
    }
    
    .yatra-tour-type {
        font-size: 14px;
    }
    
    .yatra-tour-action {
        font-size: 13px;
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    .yatra-hero-media-badges {
        top: 8px;
        left: 8px;
        gap: 4px;
    }
    
    .yatra-media-badge {
        padding: 3px 6px;
        font-size: 10px;
    }
    
    .yatra-hero-media-switcher {
        bottom: 8px;
        left: 8px;
        right: 8px;
        gap: 4px;
    }
    
    .yatra-media-switcher-btn {
        padding: 6px 10px;
        font-size: 10px;
        flex: 0 0 auto;
        justify-content: center;
    }
    
    .yatra-media-switcher-btn span {
        display: none;
    }
    
    .yatra-media-switcher-icon {
        width: 16px !important;
        height: 16px !important;
        margin: 0;
    }
    
    /* Smaller overlays for mobile */
    .yatra-youtube-play-button svg {
        width: 60px !important;
        height: 60px !important;
    }
    
    .yatra-tour-info {
        max-width: 200px;
        padding: 16px;
        gap: 10px;
    }
    
    .yatra-tour-icon svg {
        width: 50px !important;
        height: 50px !important;
    }
    
    .yatra-tour-title {
        font-size: 16px;
    }
    
    .yatra-tour-type {
        font-size: 13px;
    }
    
    .yatra-tour-action {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Hide side images for non-image media types */
.yatra-hero-side-images {
    transition: opacity 0.3s ease, width 0.3s ease;
}

.yatra-hero-side-images.yatra-media-non-image {
    display: none;
}

/* Make main image full width when side images are hidden */
.yatra-hero-images.yatra-media-full-width .yatra-hero-main-image {
    grid-column: 1 / -1;
}

/* Book Now Button Container - Right Side */
.yatra-hero-book-now-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 25;
    pointer-events: auto;
}

.yatra-hero-book-now-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--yatra-primary, #3b82f6);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.yatra-hero-book-now-btn:hover {
    background: var(--yatra-primary-dark, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* Responsive adjustments for Book Now button */
@media (max-width: 768px) {
    .yatra-hero-book-now-container {
        bottom: 10px;
        right: 10px;
    }
    
    .yatra-hero-book-now-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    /* Avoid overlap with the full-width media switcher */
    .yatra-hero-book-now-container {
        bottom: 10px;
        right: 10px;
        z-index: 30;
    }
}

.yatra-hero-book-now-btn.is-disabled,
.yatra-hero-book-now-btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Video Player and Tour Viewer modules are loaded separately */


.yatra-hero-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yatra-hero-discount-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-block;
    width: max-content;
    max-width: calc(100% - 24px);
    white-space: nowrap;
    background: #ef4444;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.yatra-hero-book-now-btn {
    background: #10b981;
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.yatra-hero-book-now-btn svg {
    flex-shrink: 0;
}

.yatra-hero-book-now-btn:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
    color: #fff;
}

.yatra-hero-side-images {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 500px;
    align-items: stretch;
}

.yatra-side-image-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    cursor: pointer;
    transition: transform 0.3s ease;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
}

.yatra-side-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yatra-side-image-item:hover {
    transform: scale(1.02);
}

.yatra-favorite-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #6b7280 !important;
    transition: all 0.3s ease !important;
    z-index: 100 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.yatra-favorite-btn:hover {
    background: #ffffff !important;
    color: #ef4444 !important;
    transform: scale(1.1) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.yatra-favorite-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2 !important;
    display: block !important;
    fill: none !important;
}

.yatra-favorite-btn svg path {
    stroke: currentColor !important;
}

.yatra-view-all-photos-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: #fff;
    color: #111827;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.yatra-view-all-photos-btn:hover {
    background: #f9fafb;
    color: #111827;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.yatra-view-all-photos-btn svg {
    width: 16px;
    height: 16px;
}


/* ============================================
   OLD HERO SECTION (keeping for reference)
   ============================================ */
.yatra-trip-hero {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 600px;
    max-height: 800px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--yatra-primary-darker, #1e3a8a) 0%, var(--yatra-primary, #3b82f6) 100%);
}

.yatra-trip-hero-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.yatra-trip-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.yatra-trip-hero-slide.active {
    opacity: 1;
    z-index: 1;
}

.yatra-trip-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yatra-trip-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 20px;
    z-index: 2;
}

.yatra-trip-hero-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    color: #fff;
    position: relative;
    text-align: left;
}

.yatra-trip-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    justify-content: flex-start;
}

.yatra-trip-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255,255,255,0.2);
}

.yatra-trip-hero-title {
    font-size: 3.75rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 20px 0;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
    letter-spacing: -0.02em;
    text-align: left;
}

.yatra-trip-hero-subtitle {
    font-size: 1.375rem;
    font-weight: 400;
    opacity: 0.95;
    margin: 0 0 32px 0;
    max-width: 800px;
    line-height: 1.6;
    text-align: left;
}

.yatra-trip-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0;
    justify-content: flex-start;
}

.yatra-hero-button {
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.yatra-hero-button-primary {
    background: #fff;
    color: var(--yatra-primary-darker, #1e3a8a);
    border-color: #fff;
}

.yatra-hero-button-primary:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.yatra-hero-button-secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

.yatra-hero-button-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
}

.yatra-gallery-count {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 500;
}

.yatra-hero-gallery-play {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 10;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--yatra-primary, #3b82f6);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.yatra-hero-gallery-play:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(0,0,0,0.3);
}

.yatra-hero-gallery-play svg {
    width: 32px;
    height: 32px;
}

.yatra-hero-gallery-play span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.yatra-gallery-play-btn {
    cursor: pointer;
    border: none;
    font-family: inherit;
}



.yatra-trip-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yatra-element-gap);
    align-items: center;
}

.yatra-trip-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #e5e7eb;
    border-radius: 20px;
    font-size: 14px;
}

.yatra-trip-tag-label {
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.yatra-trip-tag-value {
    color: #111827;
    font-weight: 500;
}

.yatra-trip-tag-value a {
    color: #059669;
    text-decoration: none;
    transition: color 0.2s ease;
}

.yatra-trip-tag-value a:hover {
    color: #047857;
    text-decoration: underline;
}


/* ============================================
   SPEC SHEET WRAPPER — white ring so hairline grid never bleeds into rounded corners
   (Gray “caps” / holes happen when line-color fills the grid box under border-radius.)
   ============================================ */
.yatra-spec-sheet {
    --yatra-spec-line: #d6d3d1;
    border: 1px solid var(--yatra-spec-line);
    border-radius: 12px;
    background: #fff;
    padding: 1px;
    box-sizing: border-box;
    overflow: hidden;
}

.yatra-spec-sheet--quick-facts {
    width: 100%;
    margin: 0;
}

/* Same as .yatra-trip-attributes .yatra-spec-sheet: inner card fills the padded shell */
.yatra-trip-quick-facts-section .yatra-spec-sheet--quick-facts {
    width: 100%;
}

.yatra-trip-attributes .yatra-spec-sheet--attributes-grid {
    width: 100%;
}

/* Inner grid: 1px gaps only — line color never touches the outer rounded clip */
.yatra-spec-sheet > .yatra-trip-quick-facts,
.yatra-spec-sheet > .yatra-attributes-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 1px;
    align-items: stretch;
    padding: 0;
    margin: 0;
    background: var(--yatra-spec-line, #d6d3d1);
    border: none;
    border-radius: 11px;
    overflow: hidden;
}

.yatra-spec-sheet > .yatra-attributes-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ============================================
   QUICK FACTS BAR — neutral “spec sheet” (no tinted icon wells)
   ============================================ */
.yatra-trip-quick-facts {
    width: 100%;
}

.yatra-quick-fact {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: none;
    border-radius: 0;
    transition: background-color 0.15s ease;
    min-width: 0;
    min-height: 100%;
    box-sizing: border-box;
    align-self: stretch;
}

.yatra-quick-fact:hover {
    background: #fafaf9;
}

.yatra-quick-fact-icon {
    width: auto;
    height: auto;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #57534e;
    flex-shrink: 0;
    overflow: visible;
}

.yatra-quick-fact-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex-shrink: 0;
    overflow: visible;
    opacity: 0.92;
}

.yatra-quick-fact-icon svg[fill="none"] {
    stroke: currentColor;
}

.yatra-quick-fact-icon svg[fill="currentColor"] {
    stroke: none;
    opacity: 1;
}

.yatra-quick-fact-icon .fa-solid,
.yatra-quick-fact-icon .fa-regular {
    font-size: 22px;
    line-height: 1;
    opacity: 0.92;
}

.yatra-quick-fact-content {
    flex: 1;
    min-width: 0;
    padding-top: 1px;
}

.yatra-quick-fact-label {
    font-size: 11px;
    color: #78716c;
    text-transform: none;
    letter-spacing: 0.01em;
    margin-bottom: 3px;
    font-weight: 500;
    line-height: 1.25;
    display: block;
}

.yatra-quick-fact-value {
    font-size: 15px;
    font-weight: 600;
    color: #1c1917;
    margin: 0;
    line-height: 1.35;
    display: block;
}

.yatra-trip-quick-facts .yatra-price-current {
    color: #059669;
    font-weight: 600;
}

.yatra-trip-quick-facts .yatra-price-original {
    color: #94a3b8;
    text-decoration: line-through;
    font-weight: 400;
    font-size: 0.88em;
    margin-left: 4px;
}

.yatra-trip-quick-facts .yatra-rating-display {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.yatra-trip-quick-facts .yatra-rating-number {
    font-weight: 700;
    color: #0f172a;
}

.yatra-trip-quick-facts .yatra-rating-stars {
    display: inline-flex;
    gap: 1px;
    font-size: 0.85rem;
    line-height: 1;
}

.yatra-trip-quick-facts .star-filled {
    color: #fbbf24;
}

.yatra-trip-quick-facts .star-empty {
    color: #cbd5e1;
}

.yatra-trip-quick-facts .yatra-review-count {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.yatra-quick-fact-price {
    font-size: 15px;
    font-weight: 600;
    color: #1c1917;
    line-height: 1.35;
    margin: 0;
    display: block;
}

.yatra-quick-fact-price-label {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 400;
    margin-top: 2px;
    display: block;
}

/* ============================================
   MAIN CONTAINER
   ============================================ */
.yatra-trip-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--yatra-section-gap);
    align-items: start;
    padding-top: 0;
}

/*
 * Responsive: collapse the trip-detail two-column grid to a single
 * column at tablet-portrait and below. Without this, the fixed
 * `1fr 400px` causes the booking sidebar to overflow the viewport
 * on phones — and because the sidebar is `position: sticky`, it
 * starts covering the hero gallery + section navigation as soon as
 * the user scrolls. Stacking puts the gallery/content first and the
 * booking card after, in normal document flow.
 */
@media (max-width: 1024px) {
    .yatra-trip-container {
        grid-template-columns: 1fr;
    }
    .yatra-trip-container .yatra-trip-sidebar,
    .yatra-trip-sidebar-column .yatra-trip-sidebar,
    .yatra-trip-sidebar {
        position: static;
        top: auto;
        order: 2;
    }
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.yatra-trip-main {
    min-width: 0;
}

/* Sidebar Column */
.yatra-trip-sidebar-column {
    min-width: 0;
    width: 100%;
}

.yatra-trip-sidebar-column .yatra-trip-sidebar {
    position: sticky;
    top: 0;
    height: fit-content;
}

.yatra-trip-section {
    background: #ffffff;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 24px;
    border: 1px solid #e5e7eb;
}

.yatra-trip-section-title {
    font-size: 28px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 24px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
}

.yatra-trip-section-title-icon {
    width: 24px;
    height: 24px;
    color: #6b7280;
    flex-shrink: 0;
}

/* ============================================
   OVERVIEW & HIGHLIGHTS
   ============================================ */
.yatra-trip-description {
    font-size: 17px;
    line-height: 1.8;
    color: #374151;
    margin-bottom: 40px;
}

.yatra-trip-description p {
    margin-bottom: 20px;
}

.yatra-trip-description p:last-child {
    margin-bottom: 0;
}

/* Lead / excerpt above full description (overview tab) */
.yatra-trip-short-description-lead {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #475569;
    font-weight: 500;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border-left: 4px solid var(--yatra-primary, #3b82f6);
}

@media (prefers-color-scheme: dark) {
    .yatra-trip-short-description-lead {
        color: #cbd5e1;
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        border-left-color: #60a5fa;
    }
}

@media (max-width: 768px) {
    .yatra-trip-short-description-lead {
        font-size: 1rem;
        padding: 16px;
        margin-bottom: 20px;
    }
}

.yatra-trip-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.yatra-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    border-left: 4px solid var(--yatra-primary, #3b82f6);
    transition: all 0.3s ease;
}

.yatra-highlight-item:hover {
    background: #f3f4f6;
    transform: translateX(4px);
}

.yatra-highlight-icon {
    width: 24px;
    height: 24px;
    color: var(--yatra-primary, #3b82f6);
    flex-shrink: 0;
    margin-top: 2px;
}

.yatra-highlight-text {
    flex: 1;
    font-size: 15px;
    color: #111827;
    margin: 0;
    line-height: 1.6;
}

/* ============================================
   KEY FEATURES GRID
   ============================================ */
.yatra-trip-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.yatra-feature-card {
    text-align: center;
    padding: 24px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.yatra-feature-card:hover {
    background: #fff;
    border-color: var(--yatra-primary, #3b82f6);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-4px);
}

.yatra-feature-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: var(--yatra-primary, #3b82f6);
}

.yatra-feature-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
}

.yatra-feature-desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   ITINERARY - New Timeline Design
   ============================================ */

/* Itinerary tab: consistently left-aligned (all viewports) */
.yatra-trip-section#itinerary,
.yatra-trip-section#itinerary .yatra-itinerary-timeline,
.yatra-trip-section#itinerary .yatra-itinerary-day,
.yatra-trip-section#itinerary .yatra-itinerary-day-content,
.yatra-trip-section#itinerary .yatra-entry-card,
.yatra-trip-section#itinerary .yatra-entry-info,
.yatra-trip-section#itinerary .yatra-entry-description,
.yatra-trip-section#itinerary .yatra-day-description {
    text-align: left;
}

.yatra-trip-section#itinerary .yatra-day-description p {
    text-align: left;
}

.yatra-trip-section#itinerary .yatra-entry-header {
    justify-content: flex-start;
}

.yatra-trip-section#itinerary .yatra-entry-meta,
.yatra-trip-section#itinerary .yatra-entry-included {
    justify-content: flex-start;
}

.yatra-trip-section#itinerary .yatra-gallery-title {
    justify-content: flex-start;
}

/* Section Header with Actions */
.yatra-section-header-with-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    text-align: left;
}

@media (min-width: 600px) {
    .yatra-section-header-with-actions {
        align-items: center;
    }
}

.yatra-section-header-with-actions .yatra-trip-section-title {
    margin-bottom: 0;
}

.yatra-itinerary-actions {
    display: flex;
    gap: 12px;
}

.yatra-toggle-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.yatra-toggle-all-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.yatra-toggle-all-btn svg {
    color: #6b7280;
}

.yatra-itinerary-timeline {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.yatra-itinerary-day {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.yatra-itinerary-day-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background 0.2s ease;
}

.yatra-itinerary-day-header:hover {
    background: #f3f4f6;
}

.yatra-day-badge {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--yatra-primary, #3b82f6);
    padding: 6px 14px;
    border-radius: 6px;
    white-space: nowrap;
}

.yatra-day-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    flex: 1;
}

.yatra-day-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.yatra-day-toggle:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.yatra-day-toggle .yatra-chevron-icon {
    transition: transform 0.25s ease;
    color: #6b7280;
    width: 20px;
    height: 20px;
}

.yatra-day-toggle svg {
    width: 20px;
    height: 20px;
    color: #6b7280;
    stroke: currentColor;
}

/* Expand/collapse days via `.is-day-expanded` (set in PHP for day 1; toggled in trip.js) */
.yatra-itinerary-day-content {
    padding: var(--yatra-element-gap);
}

.yatra-itinerary-day:not(.is-day-expanded) .yatra-itinerary-day-content {
    display: none;
}

.yatra-itinerary-day.is-day-expanded .yatra-itinerary-day-content {
    display: block;
}

.yatra-itinerary-day:not(.is-day-expanded) .yatra-day-toggle .yatra-chevron-icon {
    transform: rotate(-90deg);
}

.yatra-itinerary-day.is-day-expanded .yatra-day-toggle .yatra-chevron-icon {
    transform: rotate(0deg);
}

.yatra-day-description {
    margin-bottom: var(--yatra-element-gap);
    color: #4b5563;
    font-size: 15px;
    line-height: 1.6;
}

.yatra-toggle-all-btn .collapse-icon {
    display: none;
}

.yatra-toggle-all-btn.is-all-expanded .expand-icon {
    display: none;
}

.yatra-toggle-all-btn.is-all-expanded .collapse-icon {
    display: block;
}

/* Hidden image sources for itinerary lightbox collection */
.yatra-itinerary-trip-gallery {
    display: none;
}

/* Entry Timeline */
.yatra-entries-timeline {
    position: relative;
    padding-left: 32px;
}

.yatra-entries-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}

.yatra-entry-item {
    position: relative;
    margin-bottom: 20px;
}

.yatra-entry-item:last-child {
    margin-bottom: 0;
}

.yatra-entry-timeline-dot {
    position: absolute;
    left: -28px;
    top: 20px;
    width: 12px;
    height: 12px;
    background: var(--entry-color, var(--yatra-primary, #3b82f6));
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--entry-color, var(--yatra-primary, #3b82f6));
    z-index: 2;
}

.yatra-entry-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s;
}

.yatra-entry-card:hover {
    border-color: var(--entry-color, var(--yatra-primary, #3b82f6));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.yatra-entry-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}

.yatra-entry-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.yatra-entry-icon svg {
    width: 20px;
    height: 20px;
}

.yatra-entry-info {
    flex: 1;
    min-width: 0;
}

.yatra-entry-type {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

.yatra-entry-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.yatra-entry-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    background: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}

.yatra-entry-time svg {
    color: #9ca3af;
}

.yatra-entry-description {
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0 0 12px 0;
}

.yatra-entry-notes {
    display: block;
    padding: 10px 12px;
    margin: 0 0 12px 0;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: #78350f;
}

.yatra-entry-notes__head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: #b45309;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}

.yatra-entry-notes__head svg {
    color: #d97706;
}

.yatra-entry-notes__body {
    color: #78350f;
}

.yatra-entry-notes__body p {
    margin: 0 0 6px 0;
}

.yatra-entry-notes__body p:last-child {
    margin-bottom: 0;
}

.yatra-entry-cost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 8px;
    margin-bottom: 12px;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.yatra-entry-cost svg {
    flex-shrink: 0;
    color: white;
}

.yatra-entry-cost .yatra-cost-amount {
    font-weight: 700;
}

.yatra-entry-cost .yatra-cost-label {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
}

.yatra-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.yatra-entry-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.yatra-entry-meta-item svg {
    color: #9ca3af;
}

.yatra-entry-included {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.yatra-included-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #059669;
    background: #ecfdf5;
    padding: 4px 10px;
    border-radius: 4px;
}

.yatra-included-tag svg {
    color: #10b981;
}

/* Itinerary: Included / Excluded split layout */
.yatra-entry-inclusions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    margin-top: 12px;
}

.yatra-entry-inclusions-col {
    min-width: 0;
}

.yatra-entry-inclusions-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.yatra-entry-inclusions-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7280;
}

.yatra-entry-inclusions-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.yatra-entry-inclusions-empty {
    font-size: 12px;
    color: #9ca3af;
    background: #f9fafb;
    padding: 4px 10px;
    border-radius: 999px;
}

.yatra-excluded-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #b91c1c;
    background: #fef2f2;
    padding: 4px 10px;
    border-radius: 4px;
}

.yatra-excluded-tag svg {
    color: #ef4444;
}

@media (max-width: 640px) {
    .yatra-entry-inclusions {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Summary Day */
.yatra-itinerary-summary .yatra-day-badge {
    background: #8b5cf6;
}

.yatra-summary-content {
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
}

.yatra-summary-content p {
    font-size: 15px;
    color: #374151;
    margin-bottom: 16px;
}

.yatra-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.yatra-summary-list li {
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    color: #4b5563;
}

.yatra-summary-list li:last-child {
    border-bottom: none;
}

.yatra-summary-list li strong {
    color: #111827;
    font-weight: 600;
}

/* ============================================
   MOBILE STICKY SIDEBAR
   ============================================ */

/* Account for WordPress admin bar */
.admin-bar .yatra-mobile-sticky-sidebar {
    bottom: 32px;
}


@media screen and (max-width: 782px) {
    .admin-bar .yatra-mobile-sticky-sidebar {
        bottom: 46px;
    }
}

.yatra-mobile-sticky-sidebar.hidden {
    transform: translateY(100%);
    opacity: 0;
}

.yatra-mobile-sticky-content {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 8px;
    background: #ffffff;
    min-height: auto;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    position: relative;
    padding-top: 14px;
    padding-right: 56px; /* space for close button */
}

/* Row 1: Price and Date */
.yatra-mobile-row-1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0;
    width: 100%;
    overflow: visible;
}

/* Make the two top fields feel like one joined control */
.yatra-mobile-row-1 > .yatra-mobile-date-section,
.yatra-mobile-row-1 > .yatra-mobile-travelers-section {
    width: 100%;
    min-width: 0;
}

.yatra-mobile-row-1 .yatra-mobile-field-btn,
.yatra-mobile-row-1 .yatra-booking-field-select,
.yatra-mobile-row-1 .yatra-mobile-booking-field {
    width: 100%;
}

.yatra-mobile-row-1 > .yatra-mobile-date-section .yatra-mobile-field-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.yatra-mobile-row-1 > .yatra-mobile-travelers-section .yatra-booking-field-select,
.yatra-mobile-row-1 > .yatra-mobile-travelers-section .yatra-mobile-booking-field {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.yatra-mobile-row-1::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

/* Row 2: Total Price Only */
.yatra-mobile-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

/* Row 3: Date, Total, and Actions */
.yatra-mobile-row-3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Ensure correct order of elements */
.yatra-mobile-price-section {
    order: 2;
}

.yatra-mobile-date-section {
    order: 3;
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    touch-action: manipulation;
}

.yatra-mobile-travelers-section {
    order: 4;
    min-width: 0;
}

.yatra-mobile-travelers-section .yatra-mobile-travelers-range {
    display: block;
    width: 100%;
    font-size: 10px;
    line-height: 1.25;
    color: #6b7280;
    text-align: center;
    margin-top: 2px;
    white-space: nowrap;
}

.yatra-mobile-action-section {
    order: 6;
}

.yatra-mobile-trust-badge {
    order: 7;
}

.yatra-mobile-action-buttons {
    order: 8;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
}

/* Mobile Booking Fields */
.yatra-mobile-booking-field {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0 8px;
    box-sizing: border-box;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    max-height: 44px;
    flex-shrink: 0;
    touch-action: manipulation;
}

/* New: unified mobile field wrapper (used by date button wrapper) */
.yatra-mobile-field-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    height: 44px;
    padding: 0 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.yatra-mobile-field-btn:active {
    transform: translateY(0.5px);
}

.yatra-mobile-field-btn input {
    pointer-events: none; /* wrapper opens picker */
}

.yatra-mobile-field-btn .yatra-mobile-datepicker-input {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size:13px;
}

/* Flatpickr creates an altInput which becomes the visible field.
   Ensure it stretches inside our button wrapper. */
.yatra-mobile-field-btn .flatpickr-input,
.yatra-mobile-field-btn input.flatpickr-input,
.yatra-mobile-field-btn input.flatpickr-alt-input,
.yatra-mobile-field-btn input[type="text"] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.yatra-mobile-field-btn .yatra-mobile-field-icon {
    width: 18px;
    height: 18px;
}

.yatra-mobile-field-btn .yatra-mobile-arrow {
    flex-shrink: 0;
}

.yatra-mobile-field-btn .yatra-mobile-arrow {
    margin-left: auto;
}

/* Compact Mobile Date Picker — same vertical footprint as Adult / Check / Enquire */
.yatra-mobile-compact-datepicker {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0 6px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    max-height: 44px;
    flex-shrink: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.yatra-mobile-compact-datepicker:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.yatra-mobile-compact-datepicker .yatra-mobile-field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.yatra-mobile-compact-datepicker .yatra-mobile-icon {
    width: 14px;
    height: 14px;
}

.yatra-mobile-datepicker-input {
    border: none;
    background: transparent;
    font-size: 14px;
    line-height: 1.2;
    color: #374151;
    outline: none;
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin: 0;
    min-height: 0 !important;
    height: auto;
    max-height: 100%;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

/* If Flatpickr clones classes onto the altInput, ensure it still stretches */
.yatra-mobile-field-btn .yatra-mobile-datepicker-input.flatpickr-input,
.yatra-mobile-field-btn .flatpickr-input {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.yatra-mobile-datepicker-input::placeholder {
    color: #9ca3af;
}

.yatra-mobile-arrow {
    width: 12px;
    height: 12px;
    color: #6b7280;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.yatra-mobile-compact-datepicker:hover .yatra-mobile-arrow {
    transform: translateY(1px);
}

/* Mobile Date Picker - Match Right Sidebar Exactly */
.yatra-mobile-date-section .yatra-booking-field-select {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 0;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}

/* Mobile Traveler Picker (traveler-based) - reuse desktop component but tuned for bottom sticky bar */
.yatra-mobile-travelers-section .yatra-booking-field-select {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 10px;
    min-height: 44px;
    height: 44px;
    max-height: 44px;
    min-width: 0;
    width: 100%;
    position: relative;
    cursor: pointer;
}

.yatra-mobile-travelers-section .yatra-participants-display {
    padding: 0;
    font-size: 14px;
    color: #374151;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* In a bottom sticky bar, open the dropdown upward */
.yatra-mobile-participants.active .yatra-booking-quantity-selector,
.yatra-mobile-travelers-section .yatra-booking-quantity-selector {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 8px;
    max-height: min(60vh, 360px);
    overflow-y: auto;
}

.yatra-mobile-date-section .yatra-booking-field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.yatra-mobile-date-section .yatra-booking-select {
    border: none;
    background: transparent;
    font-size: 14px;
    color: #374151;
    outline: none;
    min-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
}

.yatra-mobile-date-section .yatra-booking-select::placeholder {
    color: #9ca3af;
}

.yatra-mobile-date-section .yatra-select-arrow {
    width: 16px;
    height: 16px;
    color: #6b7280;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.yatra-mobile-date-section .yatra-booking-field-select:hover .yatra-select-arrow {
    transform: translateY(1px);
}

/* Responsive adjustments for mobile date picker */
@media (max-width: 480px) {
    .yatra-mobile-date-section .yatra-booking-field-select {
        padding: 6px 8px;
        gap: 6px;
    }
    
    .yatra-mobile-date-section .yatra-booking-select {
        font-size: 12px;
        min-width: 60px;
    }
    
    .yatra-mobile-date-section .yatra-select-arrow {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 360px) {
    .yatra-mobile-date-section .yatra-booking-field-select {
        padding: 4px 6px;
        gap: 4px;
    }
    
    .yatra-mobile-date-section .yatra-booking-select {
        font-size: 11px;
        min-width: 50px;
    }
    
    .yatra-mobile-date-section .yatra-select-arrow {
        width: 12px;
        height: 12px;
    }
}

.yatra-mobile-field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.yatra-mobile-icon {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

/* Ensure SVG icons inside mobile field icon render consistently */
.yatra-mobile-field-icon svg,
.yatra-mobile-close-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    fill: none;
}

.yatra-mobile-datepicker,
.yatra-mobile-travelers-display {
    border: none;
    background: transparent;
    font-size: 12px;
    line-height: 1.2;
    color: #374151;
    outline: none;
    min-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.yatra-mobile-datepicker::placeholder {
    color: #9ca3af;
}

/* Mobile Quantity Controls */
.yatra-mobile-quantity-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.yatra-mobile-quantity-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 34px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.yatra-mobile-quantity-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.yatra-mobile-quantity-btn svg {
    width: 14px;
    height: 14px;
    color: #374151;
}

.yatra-mobile-quantity-input {
    width: 40px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    outline: none;
}

/* Mobile Check Button */
.yatra-mobile-check-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 10px;
    box-sizing: border-box;
    min-height: 36px;
    height: 36px;
    max-height: 36px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    background: var(--yatra-primary, #3b82f6);
    color: white;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
    flex-shrink: 0;
    touch-action: manipulation;
}

.yatra-mobile-check-btn:hover {
    background: var(--yatra-primary-dark, #2563eb);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.4);
}

/* Mobile Availability Compact */
.yatra-mobile-availability-compact {
    background: rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    text-align: center;
}

.yatra-mobile-availability-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.yatra-mobile-availability-count {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* Price Section */
.yatra-mobile-price-section {
    flex-shrink: 0;
    position: relative;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
}

.yatra-mobile-price-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.yatra-mobile-price-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.yatra-mobile-price-amount {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.yatra-mobile-price-original {
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
    text-decoration: line-through;
    line-height: 1;
}

.yatra-mobile-contact-pricing {
    color: #6b7280 !important;
    font-size: 16px !important;
}

/* Group Discount Badge */
.yatra-mobile-group-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    flex-shrink: 0;
}

.yatra-mobile-group-badge svg {
    color: #16a34a;
}

/* Discount Badge */
.yatra-mobile-discount-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #dc2626;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
    z-index: 1;
}


/* Trust Badge */
.yatra-mobile-trust-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 6px 12px;
    flex-shrink: 0;
}

.yatra-mobile-trust-badge svg {
    color: #16a34a;
    flex-shrink: 0;
}

.yatra-mobile-trust-badge span {
    font-size: 12px;
    font-weight: 600;
    color: #15803d;
    white-space: nowrap;
}

/* Info Bar */
.yatra-mobile-info-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    padding: 8px 16px;
    min-height: 32px;
}

/* Info Section */
.yatra-mobile-info-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: center;
}

.yatra-mobile-info-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

.yatra-mobile-info-item svg {
    color: #9ca3af;
    flex-shrink: 0;
}

.yatra-mobile-info-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: #9ca3af;
}

/* Action Section */
.yatra-mobile-action-section {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.yatra-mobile-book-btn,
.yatra-mobile-enquire-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.yatra-mobile-book-btn {
    background: var(--yatra-primary, #3b82f6);
    color: white;
}

.yatra-mobile-book-btn:hover {
    background: var(--yatra-primary-dark, #2563eb);
}

.yatra-mobile-enquire-btn {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 0 10px;
    box-sizing: border-box;
    min-height: 44px;
    height: 44px;
    max-height: 44px;
    font-size: 14px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

/* When Enquire is placed in the mobile sticky row-2 grid */
.yatra-mobile-row-2 .yatra-mobile-check-btn,
.yatra-mobile-row-2 .yatra-mobile-enquire-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    height: 44px;
    font-size: 14px;
}

@media (max-width: 480px) {
    /* Avoid cramped horizontal overflow; use clean two-row layout */
    .yatra-mobile-row-1 {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 0;
        width: 100%;
        overflow-x: visible;
    }

    /* If group badge exists, let it sit above fields */
    .yatra-mobile-group-badge {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .yatra-mobile-date-section {
        max-width: none;
        width: 100%;
        min-width: 0;
    }

    .yatra-mobile-travelers-section {
        width: 100%;
        min-width: 0;
    }

    /* Close button is absolutely positioned; don't reserve grid space for it */
}

.yatra-mobile-enquire-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #111827;
}

.yatra-mobile-btn-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Action Buttons */
.yatra-mobile-action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Close Button */
.yatra-mobile-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    position: relative;
}

.yatra-mobile-close-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.yatra-mobile-close-btn:active {
    transform: scale(0.95);
}

.yatra-mobile-close-icon {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.yatra-mobile-close-btn .yatra-mobile-close-icon {
    display: block;
    stroke: currentColor;
    fill: none;
}

/* Ultimate fallback if SVG icon isn't available */
.yatra-mobile-close-fallback {
    display: block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #6b7280;
    transform: translateY(-1px);
    user-select: none;
}

/* Hidden state for sidebar */
.yatra-mobile-sticky-sidebar.user-closed {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none;
}

.yatra-mobile-sidebar-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.yatra-mobile-sidebar-details.expanded {
    max-height: 60vh;
    overflow-y: auto;
}

.yatra-mobile-details-content {
    padding: 20px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .yatra-mobile-sticky-sidebar {
        background: #1f2937 !important;
        border-top-color: #374151 !important;
    }
    
    .yatra-mobile-sticky-content {
        background: #1f2937;
    }
    
    .yatra-mobile-booking-field {
        background: #374151;
        border-color: #4b5563;
    }
    
    .yatra-mobile-price-section {
        background: #374151;
        border-color: #4b5563;
    }
    
        
    .yatra-mobile-price-amount {
        color: #f9fafb;
    }
    
    .yatra-mobile-price-label {
        color: #9ca3af;
    }
    
    .yatra-mobile-price-original {
        color: #6b7280;
    }
    
    .yatra-mobile-datepicker,
    .yatra-mobile-travelers-display {
        color: #e5e7eb;
    }
    
    .yatra-mobile-datepicker::placeholder {
        color: #6b7280;
    }
    
    .yatra-mobile-icon {
        color: #9ca3af;
    }
    
    .yatra-mobile-quantity-btn {
        background: #4b5563;
        border-color: #6b7280;
    }
    
    .yatra-mobile-quantity-btn:hover {
        background: #6b7280;
        border-color: #9ca3af;
    }
    
    .yatra-mobile-quantity-btn svg {
        color: #d1d5db;
    }
    
    .yatra-mobile-quantity-input {
        color: #e5e7eb;
    }
    
    .yatra-mobile-trust-badge {
        background: #14532d;
        border-color: #166534;
    }
    
    .yatra-mobile-trust-badge svg {
        color: #22c55e;
    }
    
    .yatra-mobile-trust-badge span {
        color: #86efac;
    }
    
    .yatra-mobile-close-btn {
        background: #4b5563;
        border-color: #6b7280;
    }
    
    .yatra-mobile-close-btn:hover {
        background: #6b7280;
        border-color: #9ca3af;
    }
    
    .yatra-mobile-close-icon {
        color: #9ca3af;
    }
    
    .yatra-mobile-info-bar {
        background: #374151;
        border-top-color: #4b5563;
    }
    
    .yatra-mobile-info-item {
        color: #d1d5db;
    }
    
    .yatra-mobile-info-item svg {
        color: #9ca3af;
    }
    
    .yatra-mobile-enquire-btn {
        background: #4b5563;
        color: #e5e7eb;
        border-color: #6b7280;
    }
    
    .yatra-mobile-enquire-btn:hover {
        background: #6b7280;
        border-color: #9ca3af;
        color: #f9fafb;
    }
}

/* Responsive adjustments for three-row layout */
@media (max-width: 480px) {
    .yatra-mobile-sticky-content {
        padding: 8px;
        gap: 6px;
        padding-right: calc(8px + 56px); /* keep space for close button */
    }
    
    .yatra-mobile-row-1,
    .yatra-mobile-row-2,
    .yatra-mobile-row-3 {
        gap: 6px;
    }
    
    .yatra-mobile-booking-field {
        padding: 0 6px;
        min-height: 34px;
        height: 34px;
        max-height: 34px;
    }
    
    .yatra-mobile-compact-date,
    .yatra-mobile-compact-datepicker {
        padding: 0 6px;
        gap: 4px;
        min-height: 34px;
        height: 34px;
        max-height: 34px;
    }

    .yatra-mobile-check-btn,
    .yatra-mobile-enquire-btn {
        min-height: 34px;
        height: 34px;
        max-height: 34px;
    }
    
    .yatra-mobile-price-section {
        padding: 4px 6px;
    }
    
        
    .yatra-mobile-price-amount {
        font-size: 14px;
    }
    
        
    .yatra-mobile-datepicker {
        font-size: 11px;
        min-width: 40px;
    }
    
    .yatra-mobile-check-btn,
    .yatra-mobile-enquire-btn {
        padding: 0 6px;
        font-size: 10px;
    }
    
    .yatra-mobile-check-btn {
        gap: 3px;
    }
    
    .yatra-mobile-enquire-btn {
        gap: 3px;
    }
    
    .yatra-mobile-trust-badge {
        padding: 2px 4px;
    }
    
    .yatra-mobile-trust-badge span {
        font-size: 8px;
    }
    
    .yatra-mobile-close-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    /* Simple (per-trip) traveler stepper: keep tap targets and legible count */
    .yatra-mobile-booking-field:has(.yatra-mobile-quantity-controls) {
        min-height: 44px;
        height: 44px;
        max-height: none;
        padding: 0 8px;
    }

    .yatra-mobile-booking-field .yatra-mobile-quantity-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    .yatra-mobile-booking-field .yatra-mobile-quantity-input {
        min-width: 40px;
        width: 48px;
        font-size: 15px;
        font-weight: 700;
        color:#fff;
    }
}

/* Sticky bar traveler dropdown should open UP (bottom sticky UI) */
.yatra-mobile-travelers-section .yatra-booking-field-select,
.yatra-mobile-travelers-section .yatra-participants-select {
    position: relative;
    z-index: 2;
}

.yatra-mobile-participants .yatra-booking-quantity-selector,
.yatra-mobile-participants.active .yatra-booking-quantity-selector,
.yatra-mobile-travelers-section .yatra-booking-quantity-selector {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    z-index: 2000;
}

/* On mobile sticky bar, show travelers dropdown as a full-width panel */
.yatra-mobile-participants.active .yatra-booking-quantity-selector {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
}

/* Traveler-category dropdown opened from bottom bar: larger controls + readable counts */
.yatra-mobile-sticky-sidebar .yatra-mobile-travelers-section .yatra-participants-display,
.yatra-mobile-sticky-sidebar .yatra-mobile-participants-display {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.yatra-mobile-sticky-sidebar .yatra-booking-quantity-selector .yatra-quantity-row {
    padding: 12px 10px;
    gap: 10px;
}

.yatra-mobile-sticky-sidebar .yatra-booking-quantity-selector .yatra-quantity-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

.yatra-mobile-sticky-sidebar .yatra-booking-quantity-selector .yatra-quantity-row .yatra-quantity-input {
    width: 48px;
    min-width: 44px;
    height: 40px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

/* Extra small mobile screens */
@media (max-width: 360px) {
    .yatra-mobile-sticky-content {
        padding: 6px;
        gap: 4px;
    }
    
    .yatra-mobile-row-1,
    .yatra-mobile-row-2,
    .yatra-mobile-row-3 {
        gap: 4px;
    }
    
    .yatra-mobile-booking-field {
        padding: 0 4px;
        min-height: 32px;
        height: 32px;
        max-height: 32px;
    }

    .yatra-mobile-booking-field:has(.yatra-mobile-quantity-controls) {
        min-height: 42px;
        height: 42px;
        max-height: none;
        padding: 0 6px;
    }
    
    .yatra-mobile-compact-date,
    .yatra-mobile-compact-datepicker {
        padding: 0 4px;
        gap: 3px;
        min-height: 32px;
        height: 32px;
        max-height: 32px;
    }

    .yatra-mobile-check-btn,
    .yatra-mobile-enquire-btn {
        min-height: 32px;
        height: 32px;
        max-height: 32px;
    }
    
    .yatra-mobile-price-section {
        padding: 3px 4px;
    }
    
        
    .yatra-mobile-price-amount {
        font-size: 12px;
    }
    
        
    .yatra-mobile-datepicker {
        font-size: 10px;
        min-width: 35px;
    }
    
    .yatra-mobile-check-btn,
    .yatra-mobile-enquire-btn {
        padding: 0 4px;
        font-size: 9px;
    }
    
    .yatra-mobile-check-btn {
        gap: 2px;
    }
    
    .yatra-mobile-enquire-btn {
        gap: 2px;
    }
    
    .yatra-mobile-trust-badge {
        display: none; /* Hide trust badge on very small screens */
    }
    
    .yatra-mobile-close-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
}

/* MOBILE FIRST - Show by default, hide on desktop */
.yatra-mobile-sticky-sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 9999 !important;
    transform: translateY(0) !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    display: block !important;        /* MOBILE FIRST - Visible by default */
    visibility: visible !important;   /* MOBILE FIRST - Visible by default */
    opacity: 1 !important;           /* MOBILE FIRST - Visible by default */
    min-height: 70px !important;
    /* Allow traveler/date dropdowns to overflow upward */
    max-height: none !important;
    overflow: visible !important;
}

/* Hide on desktop - 769px and above */
@media only screen and (min-width: 769px) {
    .yatra-mobile-sticky-sidebar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translateY(100%) !important;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .yatra-trip-section#itinerary {
        padding: 24px 16px;
    }

    .yatra-trip-section#itinerary .yatra-trip-section-title {
        font-size: 1.25rem;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .yatra-section-header-with-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .yatra-itinerary-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .yatra-toggle-all-btn {
        align-self: flex-start;
        width: auto;
        max-width: 100%;
        justify-content: flex-start;
    }

    .yatra-itinerary-day-header {
        padding: 14px 16px;
        align-items: flex-start;
        gap: 12px;
    }

    .yatra-day-badge {
        flex-shrink: 0;
    }

    .yatra-day-title {
        font-size: 16px;
        line-height: 1.35;
        text-align: left;
        min-width: 0;
    }

    .yatra-itinerary-day-content {
        padding: 16px 14px;
        margin-left: 0;
    }

    .yatra-trip-section#itinerary .yatra-itinerary-day,
    .yatra-itinerary-day {
        padding-left: 0;
        margin-left: 0;
    }

    .yatra-entries-timeline {
        padding-left: 22px;
    }

    .yatra-entries-timeline::before {
        left: 6px;
    }

    .yatra-entry-timeline-dot {
        left: -22px;
    }

    .yatra-entry-header {
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .yatra-entry-time {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        margin-top: 8px;
        white-space: normal;
        flex-wrap: wrap;
    }

    .yatra-entry-card {
        padding: 16px 14px;
    }

    .yatra-entry-description {
        text-align: left;
    }

    .yatra-trip-section#itinerary .yatra-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

/* ============================================
   PRICING SECTION
   ============================================ */
.yatra-trip-pricing {
    display: grid;
    gap: 24px;
}

.yatra-pricing-card {
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s ease;
    background: #fff;
}

.yatra-pricing-card:hover {
    border-color: var(--yatra-primary, #3b82f6);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
    transform: translateY(-4px);
}

.yatra-pricing-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f3f4f6;
}

.yatra-pricing-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.yatra-pricing-amount {
    font-size: 36px;
    font-weight: 800;
    color: var(--yatra-primary, #3b82f6);
    margin: 0;
    line-height: 1;
}

.yatra-pricing-currency {
    font-size: 18px;
    font-weight: 400;
    color: #6b7280;
}

.yatra-pricing-details {
    list-style: none;
    padding: 0;
    margin: 24px 0 0 0;
}

.yatra-pricing-details li {
    padding: 12px 0;
    font-size: 15px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.yatra-pricing-details li:last-child {
    border-bottom: none;
}

.yatra-pricing-details-icon {
    width: 20px;
    height: 20px;
    color: #10b981;
    flex-shrink: 0;
}

/* ============================================
   INCLUDED/EXCLUDED
   ============================================ */
.yatra-included-excluded {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 24px;
}

.yatra-included-section,
.yatra-excluded-section {
    background: #ffffff;
    border-radius: 8px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.yatra-included-section {
    border-left: 4px solid #10b981;
}

.yatra-excluded-section {
    border-left: 4px solid #ef4444;
}

.yatra-included-section h3,
.yatra-excluded-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.yatra-included-section h3 {
    color: #047857;
}

.yatra-excluded-section h3 {
    color: #dc2626;
}

.yatra-included-list,
.yatra-excluded-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.yatra-included-list li,
.yatra-excluded-list li {
    padding: 12px 0;
    font-size: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid #e5e7eb;
    line-height: 1.5;
}

.yatra-included-list li:last-child,
.yatra-excluded-list li:last-child {
    border-bottom: none;
}

.yatra-included-list li {
    color: #065f46;
}

.yatra-excluded-list li {
    color: #991b1b;
}

.yatra-item-content {
    flex: 1;
}

.yatra-item-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.yatra-item-desc {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.yatra-included-icon,
.yatra-excluded-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.yatra-included-icon {
    color: #059669;
}

.yatra-excluded-icon {
    color: #dc2626;
}

/* Dark mode support */
.dark .yatra-included-section,
.dark .yatra-excluded-section {
    background: #1f2937;
    border-color: #374151;
}

.dark .yatra-included-section {
    border-left-color: #10b981;
}

.dark .yatra-excluded-section {
    border-left-color: #ef4444;
}

.dark .yatra-included-section h3 {
    color: #34d399;
}

.dark .yatra-excluded-section h3 {
    color: #f87171;
}

.dark .yatra-included-list li,
.dark .yatra-excluded-list li {
    border-bottom-color: #374151;
}

.dark .yatra-included-list li {
    color: #6ee7b7;
}

.dark .yatra-excluded-list li {
    color: #fca5a5;
}

.dark .yatra-item-desc {
    color: #9ca3af;
}

/* Responsive design */
@media (max-width: 768px) {
    .yatra-included-excluded {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .yatra-included-section,
    .yatra-excluded-section {
        padding: 20px;
    }
    
    .yatra-included-section h3,
    .yatra-excluded-section h3 {
        font-size: 16px;
    }
    
    .yatra-included-list li,
    .yatra-excluded-list li {
        font-size: 14px;
    }
}

/* ============================================
   GALLERY
   ============================================ */
.yatra-trip-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.yatra-trip-gallery-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 1.25rem 1rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.9375rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px dashed #e5e7eb;
}

.yatra-gallery-item {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
    background: #f3f4f6;
}

.yatra-gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.yatra-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.yatra-gallery-item:hover img {
    transform: scale(1.1);
}

/* ============================================
   GALLERY MODAL
   ============================================ */
.yatra-gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.yatra-gallery-modal.active {
    display: flex;
}

.yatra-gallery-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(5px);
}

.yatra-gallery-modal-content {
    position: relative;
    width: 95%;
    max-width: 1400px;
    height: 90vh;
    max-height: 900px;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* Account for WordPress admin bar */
.admin-bar .yatra-gallery-modal-content {
    margin-top: 32px;
    max-height: calc(90vh - 32px);
}

.yatra-gallery-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    margin:0;
    padding:0;
}

.yatra-gallery-modal-close:hover {
    background: rgba(255,255,255,0.2);
    transform: rotate(90deg);
}

.yatra-gallery-modal-prev,
.yatra-gallery-modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    margin:0;
    padding:0;
}

.yatra-gallery-modal-prev {
    left: 20px;
}

.yatra-gallery-modal-next {
    right: 20px;
}

.yatra-gallery-modal-prev:hover,
.yatra-gallery-modal-next:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-50%) scale(1.1);
}

.yatra-gallery-modal-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #000;
    overflow: hidden;
}

.yatra-gallery-modal-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.yatra-gallery-modal-image.loaded {
    opacity: 1;
}

.yatra-gallery-modal-loader {
    position: absolute;
    color: #fff;
    font-size: 16px;
    display: none;
}

.yatra-gallery-modal-loader.active {
    display: block;
}

.yatra-gallery-modal-info {
    padding: 16px 24px;
    background: rgba(0,0,0,0.8);
    border-top: 1px solid rgba(255,255,255,0.1);
}

.yatra-gallery-modal-counter {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.yatra-gallery-modal-thumbnails {
    padding: 16px;
    background: rgba(0,0,0,0.9);
    border-top: 1px solid rgba(255,255,255,0.1);
    max-height: 120px;
    overflow-x: auto;
    overflow-y: hidden;
}

.yatra-gallery-thumbnails-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.yatra-gallery-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.yatra-gallery-thumbnail:hover {
    opacity: 1;
    transform: scale(1.1);
}

.yatra-gallery-thumbnail.active {
    opacity: 1;
    border-color: var(--yatra-primary, #3b82f6);
}

.yatra-gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================
   MAP
   ============================================ */
.yatra-trip-map {
    width: 100%;
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 32px;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 16px;
    border: 1px solid #d1d5db;
    position: relative;
}

.yatra-map-placeholder {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border: 2px dashed #cbd5e1;
}

.yatra-map-placeholder p {
    margin: 0;
    padding: 20px;
    text-align: center;
    color: #64748b;
    font-weight: 500;
}

/* OpenStreetMap specific styles */
#yatra-openstreet-map {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.yatra-custom-marker {
    z-index: 1000 !important;
}

.yatra-marker-bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) rotate(-45deg);
    }
    40% {
        transform: translateY(-10px) rotate(-45deg);
    }
    60% {
        transform: translateY(-5px) rotate(-45deg);
    }
}

/* Dark mode support for map */
@media (prefers-color-scheme: dark) {
    .yatra-trip-map {
        background: #1e293b;
        border-color: #334155;
    }
    
    .yatra-map-placeholder {
        background: linear-gradient(135deg, #1e293b, #334155);
        border-color: #475569;
    }
    
    .yatra-map-placeholder p {
        color: #94a3b8;
    }
}

/* ============================================
   FAQ
   ============================================ */
.yatra-trip-faq {
    list-style: none;
    padding: 0;
    margin: 0;
}

.yatra-faq-item {
    border-bottom: 1px solid #e5e7eb;
    padding: 20px 0;
}

.yatra-faq-item:first-child {
    padding-top: 0;
}

.yatra-faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.yatra-faq-question {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 0.2s ease;
}

.yatra-faq-question:hover {
    color: #374151;
}

.yatra-faq-toggle {
    width: 20px;
    height: 20px;
    color: #6b7280;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.yatra-faq-item.active .yatra-faq-toggle {
    transform: rotate(45deg);
}

.yatra-faq-answer {
    font-size: 16px;
    line-height: 1.6;
    color: #4b5563;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease, margin 0.2s ease, padding 0.2s ease;
    margin: 0;
    padding: 0;
}

.yatra-faq-item.active .yatra-faq-answer {
    max-height: 1000px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

/* ============================================
   SIDEBAR - BOOKING CARD
   ============================================ */
.yatra-trip-sidebar {
    position: sticky;
    top: max(12px, env(safe-area-inset-top, 0px));
    height: fit-content;
    max-width: 100%;
    align-self: flex-start;
    transition: top 0.3s ease;
}

/* Account for WordPress admin bar */
.admin-bar .yatra-trip-sidebar {
    top: 32px; /* Admin bar height */
}

@media screen and (max-width: 782px) {
    .admin-bar .yatra-trip-sidebar {
        top: 46px; /* Mobile admin bar height */
    }
}

.yatra-booking-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
    position: relative;
}

.yatra-booking-price {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
}

.yatra-booking-card .yatra-group-discount-badge-minimal {
    margin-bottom: 10px;
    background: #f0f9ff;
    border-color: rgba(2, 132, 199, 0.22);
}

.yatra-booking-price-from {
    margin-bottom: 8px;
}

.yatra-booking-price-from-text {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.yatra-booking-price-original {
    font-size: 14px;
    color: rgba(107, 114, 128, 0.85);
    text-decoration: line-through;
    font-weight: 500;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(107, 114, 128, 0.65);
}

.yatra-booking-price-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    /* Keep badge inside the card: allow wrapping only when needed */
    flex-wrap: wrap;
    white-space: normal;
    max-width: 100%;
}

.yatra-booking-price-amount {
    font-size: 28px;
    font-weight: 700;
    color: #ef4444;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.yatra-booking-price-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 100%;
}

/* Allow wrapping on very small screens */
@media (max-width: 480px) {
    .yatra-booking-price-main {
        flex-wrap: wrap;
        white-space: normal;
    }
}

/* Booking Discount Badge */
.yatra-booking-discount-badge {
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Contact for pricing styling */
.yatra-contact-pricing {
    font-size: 18px !important;
    color: #ef4444 !important;
}

/* Group Discount Badge - Minimal */
.yatra-group-discount-badge-minimal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #0369a1;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #bae6fd;
    position: relative;
    z-index: 1;
}

.yatra-group-discount-badge-minimal svg {
    flex-shrink: 0;
}

/* Tooltip Styles */
.yatra-has-tooltip {
    cursor: help;
}

.yatra-has-tooltip .yatra-info-icon {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.yatra-has-tooltip:hover .yatra-info-icon {
    opacity: 1;
}

.yatra-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 0;
    min-width: 220px;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.yatra-has-tooltip:hover .yatra-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 999999;
}

.yatra-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #ffffff;
}

.yatra-tooltip-header {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    color: #111827;
}

.yatra-tooltip-content {
    padding: 8px;
}

.yatra-discount-tier {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 6px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.yatra-discount-tier:hover {
    background: #f3f4f6;
}

.yatra-tier-size {
    font-size: 12px;
    color: #4b5563;
    font-weight: 500;
}

.yatra-tier-discount {
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Group discount popover (booking sidebar + mobile sticky) — replaces full-width section */
.yatra-group-discount-popover {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 12px;
    z-index: 5;
}

.yatra-group-discount-popover--mobile {
    margin-bottom: 8px;
}

.yatra-mobile-group-discount-popover-wrap {
    width: 100%;
    padding: 0 2px 4px;
}

button[type="button"].yatra-group-discount-popover__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(2, 132, 199, 0.28);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #0369a1;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.yatra-group-discount-popover__trigger:hover,
.yatra-group-discount-popover__trigger:focus-visible {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.yatra-group-discount-popover__trigger-icon {
    display: flex;
    color: #0284c7;
}

.yatra-group-discount-popover__trigger-text {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.yatra-group-discount-popover__chev {
    display: flex;
    color: #0369a1;
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.yatra-group-discount-popover.is-open .yatra-group-discount-popover__chev {
    transform: rotate(180deg);
}

.yatra-group-discount-popover__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    min-width: 0;
    max-width: min(340px, calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow:
        0 14px 40px -12px rgba(15, 23, 42, 0.22),
        0 6px 16px -8px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 100020;
}

.yatra-group-discount-popover--mobile .yatra-group-discount-popover__panel {
    left: 0;
    right: 0;
    max-width: none;
}

.yatra-group-discount-popover:hover .yatra-group-discount-popover__panel,
.yatra-group-discount-popover:focus-within .yatra-group-discount-popover__panel,
.yatra-group-discount-popover.is-open .yatra-group-discount-popover__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.yatra-group-discount-popover__panel-inner {
    padding: 12px 14px 14px;
    max-height: min(420px, 55vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.yatra-group-discount-popover__head strong {
    display: block;
    font-size: 14px;
    color: #0f172a;
    margin-bottom: 4px;
}

.yatra-group-discount-popover__sub {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
}

.yatra-group-discount-popover__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yatra-group-discount-popover__tier {
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 10px 10px 8px;
    background: #fafafa;
}

.yatra-group-discount-popover__tier-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.yatra-group-discount-popover__range {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.yatra-group-discount-popover__value {
    font-size: 13px;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.yatra-group-discount-popover__cats {
    list-style: none;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px dashed #e2e8f0;
    font-size: 12px;
    color: #475569;
}

.yatra-group-discount-popover__cats li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
}

.yatra-group-discount-popover__cat-name {
    font-weight: 500;
}

.yatra-group-discount-popover__cat-val {
    font-weight: 600;
    color: #047857;
}

.yatra-group-discount-popover__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    font-size: 11px;
    line-height: 1.45;
    color: #64748b;
}

.yatra-group-discount-popover__note svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #94a3b8;
}

/* Applied Group Discount Display */
.yatra-applied-group-discount {
    margin-top: 12px;
    padding: 10px 12px;
    background: #ecfdf5;
    border: 1px solid #10b981;
    border-radius: 8px;
    display: none;
}

.yatra-applied-group-discount.active {
    display: block;
}

.yatra-applied-group-discount-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.yatra-applied-group-discount-icon {
    color: #10b981;
}

.yatra-applied-group-discount-title {
    font-size: 13px;
    font-weight: 600;
    color: #047857;
}

.yatra-applied-group-discount-amount {
    font-size: 14px;
    font-weight: 700;
    color: #059669;
    margin-left: auto;
}

.yatra-applied-group-discount-desc {
    font-size: 12px;
    color: #059669;
}

/* Pricing Mode Labels */
.yatra-quantity-price-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.yatra-pricing-mode-label {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.yatra-pricing-mode-group {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

.yatra-booking-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Participants Select */
.yatra-participants-select {
    position: relative;
}

.yatra-participants-display {
    flex: 1;
    padding: 14px 12px 14px 0;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
    user-select: none;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: auto;
    position: relative;
    z-index: 1;
    transition: color 0.2s ease;
}

.yatra-participants-select:hover .yatra-participants-display {
    color: var(--yatra-primary, #3b82f6);
}

/* Quantity Selector - Hidden by default */
.yatra-booking-quantity-selector {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    z-index: 1000;
    display: none;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.yatra-participants-select.active .yatra-booking-quantity-selector {
    display: block;
    animation: yatra-trip-dropdown-slide 0.2s ease-out;
}

@keyframes yatra-trip-dropdown-slide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enquiry form quantity selector */
.yatra-enquiry-participants.active .yatra-booking-quantity-selector {
    display: block;
}

.yatra-quantity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 12px;
    border-radius: 12px;
    transition: all 0.2s ease;
    gap: 16px;
    margin-bottom: 8px;
}

.yatra-quantity-row:hover {
    background-color: #f8fafc;
    transform: translateX(2px);
}

.yatra-quantity-row:not(:last-child) {
    border-bottom: none;
}

.yatra-quantity-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.yatra-quantity-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}

.yatra-quantity-subtitle {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.yatra-quantity-price {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #059669;
    margin-top: 2px;
    white-space: nowrap;
}

.yatra-booking-price-label-top {
    display: block;
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

/* Simple Travelers Input (Regular Pricing) */
.yatra-booking-field-group {
    margin-bottom: 16px;
}

.yatra-booking-field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.yatra-booking-travelers-simple {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    flex-wrap: wrap;
}

/* Quantity Controls Inline - Modern Clean Design */
.yatra-quantity-controls-inline {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.yatra-quantity-controls-inline:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    background: #ffffff;
}

.yatra-quantity-controls-inline:focus-within {
    border-color: var(--yatra-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.yatra-quantity-controls-inline .yatra-quantity-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #475569;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
}

.yatra-quantity-controls-inline .yatra-quantity-btn:hover:not(:disabled) {
    background: var(--yatra-primary, #3b82f6);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25);
    z-index: 2;
}

.yatra-quantity-controls-inline .yatra-quantity-btn:active:not(:disabled) {
    background: var(--yatra-primary-dark, #2563eb);
    color: #ffffff;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.yatra-quantity-controls-inline .yatra-quantity-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: #cbd5e1;
    background: #f1f5f9;
    box-shadow: none;
}

.yatra-quantity-controls-inline .yatra-quantity-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    transition: transform 0.2s ease;
    pointer-events: none;
}

.yatra-quantity-controls-inline .yatra-quantity-btn:hover:not(:disabled) svg {
    transform: scale(1.1);
}

.yatra-quantity-input-simple {
    width: 50px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    border: none;
    background: transparent;
    appearance: textfield;
    -moz-appearance: textfield;
    padding: 0 4px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.yatra-quantity-input-simple::-webkit-outer-spin-button,
.yatra-quantity-input-simple::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.yatra-quantity-input-simple:focus {
    outline: none;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.yatra-travelers-range,
.yatra-travelers-available {
    font-size: 12px;
    color: #6b7280;
    margin-left: auto;
}

/* Availability Info */
.yatra-availability-info {
    padding: 8px 12px;
    background: #ecfdf5;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
}

.yatra-availability-count {
    font-size: 13px;
    font-weight: 500;
    color: #059669;
}

/* Flexible Booking Info */
.yatra-flexible-booking-info {
    background: #f3f8ff;
    border-left: 3px solid rgba(59, 130, 246, 0.65);
}

.yatra-flexible-booking-info .yatra-availability-count {
    color: var(--yatra-primary-darker, #1e40af);
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
}

.yatra-availability-note {
    display: block;
    font-size: 12px;
    color: #6b7280;
    font-weight: 400;
}

/* Departure Dates List */
.yatra-departure-dates-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.yatra-departure-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

.yatra-departure-option:hover {
    border-color: var(--yatra-primary, #3b82f6);
    background: #f8fafc;
}

.yatra-departure-option.selected {
    border-color: var(--yatra-primary, #3b82f6);
    background: #eff6ff;
}

.yatra-departure-option.limited {
    border-color: #f59e0b;
}

.yatra-departure-option.limited.selected {
    background: #fffbeb;
}

.yatra-departure-option input[type="radio"] {
    display: none;
}

.yatra-departure-info {
    flex: 1;
}

.yatra-departure-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.yatra-departure-day {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

.yatra-departure-full {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.yatra-return-date {
    font-size: 12px;
    color: #6b7280;
}

.yatra-departure-meta {
    margin-top: 4px;
}

.yatra-departure-seats {
    font-size: 11px;
    color: #059669;
}

.yatra-departure-seats.limited {
    color: #f59e0b;
    font-weight: 500;
}

.yatra-departure-price {
    text-align: right;
}

.yatra-departure-original-price {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: line-through;
    display: block;
}

.yatra-departure-current-price {
    font-size: 16px;
    font-weight: 700;
    color: #059669;
}

.yatra-departure-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.yatra-departure-check svg {
    color: transparent;
    transition: color 0.2s ease;
}

.yatra-departure-option.selected .yatra-departure-check {
    background: var(--yatra-primary, #3b82f6);
}

.yatra-departure-option.selected .yatra-departure-check svg {
    color: #fff;
}

/* Scrollbar styling for departure list */
.yatra-departure-dates-list::-webkit-scrollbar {
    width: 4px;
}

.yatra-departure-dates-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.yatra-departure-dates-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.yatra-departure-dates-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Quantity Controls - Modern Clean Design */
.yatra-quantity-controls {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #f8fafc;
    padding: 3px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.yatra-quantity-controls:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    background: #ffffff;
}

.yatra-quantity-controls:focus-within {
    border-color: var(--yatra-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.yatra-quantity-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #475569;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
}

.yatra-quantity-row .yatra-quantity-btn:hover:not(:disabled) {
    background: var(--yatra-primary, #3b82f6);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25);
    z-index: 2;
}

.yatra-quantity-btn:active:not(:disabled) {
    background: var(--yatra-primary-dark, #2563eb);
    color: #ffffff;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.yatra-quantity-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: #cbd5e1;
    background: #f1f5f9;
    box-shadow: none;
}

.yatra-quantity-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    transition: transform 0.2s ease;
    pointer-events: none;
}

.yatra-quantity-btn:hover:not(:disabled) svg {
    transform: scale(1.1);
}

.yatra-quantity-row .yatra-quantity-input {
    width: 48px;
    height: 32px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: #0f172a;
    padding: 0 6px;
    cursor: default;
    min-width: 48px;
    border-radius: 8px;
    appearance: textfield;
    -moz-appearance: textfield;
    transition: all 0.2s ease;
    line-height: 32px;
}

.yatra-quantity-input::-webkit-outer-spin-button,
.yatra-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.yatra-quantity-input:focus {
    outline: none;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.yatra-quantity-note {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.yatra-booking-field-select {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid rgba(209, 213, 219, 0.9);
    border-radius: 8px;
    background: #fff;
    transition: all 0.3s ease;
    min-height: 46px;
    height: 46px;
    cursor: pointer;
}

.yatra-booking-field-select input[readonly] {
    cursor: pointer;
}

.yatra-booking-field-select:focus-within {
    border-color: var(--yatra-primary, #3b82f6);
}

.yatra-enquiry-field .yatra-booking-field-select:hover:not(:focus-within) {
    border-color: #cbd5e1;
    border-color: color-mix(in srgb, var(--yatra-primary, #3b82f6) 32%, #d1d5db);
}

.yatra-booking-field-icon {
    padding: 0 12px;
    display: flex;
    align-items: center;
    color: #6b7280;
    flex-shrink: 0;
    height: 100%;
}

.yatra-booking-field-icon svg {
    width: 18px;
    height: 18px;
}

.yatra-booking-select {
    flex: 1;
    padding: 12px 12px 12px 0;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #111827;
    font-family: inherit;
    appearance: none;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
}

.yatra-booking-select:focus {
    outline: none;
}

.yatra-booking-select option {
    padding: 8px;
}

/* Pro: date-as-dropdown — keep the <select> visually consistent with the
   flatpickr input it replaces. The shared .yatra-booking-select rule above
   already handles borders/appearance; this just sizes the control like the
   readonly input variant and hides the native focus ring. */
.yatra-booking-field-select.yatra-date-as-dropdown select.yatra-date-dropdown {
    width: 100%;
    min-width: 0;
    background-image: none;
    padding-right: 24px;
}
.yatra-mobile-field-btn select.yatra-mobile-date-dropdown {
    background-image: none;
    padding-right: 0;
}

/* Datepicker - Remove double border */
.yatra-datepicker,
.yatra-booking-field-select input.yatra-datepicker,
input.yatra-datepicker,
.yatra-enquiry-datepicker,
.yatra-enquiry-field .yatra-booking-field-select input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin:0;
    padding:0;
}

.flatpickr-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure enquiry form datepicker doesn't have double border */
.yatra-enquiry-field .yatra-booking-field-select .flatpickr-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.yatra-select-arrow {
    position: absolute;
    right: 12px;
    width: 20px;
    height: 20px;
    color: #6b7280;
    pointer-events: none;
    flex-shrink: 0;
}

.yatra-booking-enquiry-button {
    width: 100%;
    padding: 14px 24px;
    background: transparent;
    color: var(--yatra-primary, #3b82f6);
    border: 2px solid var(--yatra-primary, #3b82f6);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.yatra-booking-enquiry-button svg {
    flex-shrink: 0;
}

.yatra-booking-enquiry-button:hover {
    background: var(--yatra-primary, #3b82f6);
    color: #fff;
    border-color: var(--yatra-primary-dark, #2563eb);
}

.yatra-booking-button {
    width: 100%;
    padding: 16px 24px;
    background: var(--yatra-primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.yatra-booking-button svg {
    flex-shrink: 0;
}

.yatra-booking-button:hover {
    background: var(--yatra-primary-dark, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.yatra-booking-button:focus-visible,
.yatra-booking-enquiry-button:focus-visible,
.yatra-booking-field-select:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--yatra-primary, #3b82f6) 22%, transparent);
}

/* Compact Availability Alert */
.yatra-booking-availability-compact {
    padding: 8px 12px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 12px;
    color: #92400e;
    text-align: center;
    line-height: 1.4;
}

.yatra-booking-availability-compact strong {
    font-weight: 700;
    color: #78350f;
}


/* Single Trust Signal */
.yatra-booking-trust {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.yatra-booking-trust-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.yatra-booking-trust-icon svg {
    width: 18px;
    height: 18px;
    color: #10b981;
}

.yatra-booking-trust-text {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

.yatra-booking-trust-text strong {
    color: #111827;
    font-weight: 600;
}

/* ============================================
   ENQUIRY MODAL
   ============================================ */
.yatra-enquiry-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.yatra-enquiry-modal.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.yatra-enquiry-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.yatra-enquiry-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.yatra-enquiry-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    color: #6b7280;
    padding:0;
}

.yatra-enquiry-modal-close:hover {
    background: #e5e7eb;
    color: #111827;
    transform: rotate(90deg);
}

.yatra-enquiry-modal-close svg {
    width: 20px;
    height: 20px;
}

.yatra-enquiry-modal-header {
    padding: 32px 32px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.yatra-enquiry-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.yatra-enquiry-modal-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.yatra-enquiry-form {
    padding: 24px 32px 32px;
}

/* Enquiry form message box */
.yatra-enquiry-message {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.yatra-enquiry-message p {
    margin: 0;
}

.yatra-enquiry-message-success {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.yatra-enquiry-message-error {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.yatra-enquiry-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.yatra-enquiry-field {
    margin-bottom: 20px;
}

.yatra-enquiry-field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Enquiry form date and travelers selectors */
.yatra-enquiry-field .yatra-booking-field-select {
    margin-top: 0;
}

.yatra-enquiry-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.yatra-enquiry-required {
    color: #ef4444;
}

.yatra-enquiry-input,
.yatra-enquiry-textarea ,
.yatra-enquiry-input[type="text"],
.yatra-enquiry-input[type="email"],
.yatra-enquiry-input[type="tel"]{
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    color: #111827;
    background: #fff;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.yatra-enquiry-input:hover,
.yatra-enquiry-textarea:hover {
    border-color: #cbd5e1;
    border-color: color-mix(in srgb, var(--yatra-primary, #3b82f6) 28%, #d1d5db);
}

.yatra-enquiry-input:focus,
.yatra-enquiry-textarea:focus {
    outline: none;
    border-color: var(--yatra-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--yatra-primary, #3b82f6) 14%, transparent);
}

.yatra-enquiry-textarea {
    resize: vertical;
    min-height: 80px;
    height: 80px;
    line-height: 1.6;
}

/* Enquiry form responsive - handled in main responsive section below */

@media (max-width: 640px) {
    .yatra-enquiry-form-grid {
        grid-template-columns: 1fr;
    }
    
    .yatra-enquiry-field-group {
        grid-template-columns: 1fr;
    }
}

.yatra-enquiry-input::placeholder,
.yatra-enquiry-textarea::placeholder {
    color: #9ca3af;
}

.yatra-enquiry-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Match sidebar / Check Availability: same primary CTA class + flex row layout */
.yatra-enquiry-actions .yatra-booking-button.yatra-enquiry-submit {
    width: auto;
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

.yatra-enquiry-cancel {
    flex: 1;
    padding: 14px 24px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.yatra-enquiry-cancel svg {
    flex-shrink: 0;
}

.yatra-enquiry-cancel:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    border-color: color-mix(in srgb, var(--yatra-primary, #3b82f6) 38%, #9ca3af);
}

/* Standalone submit (no booking CTA class): full primary styling */
.yatra-enquiry-submit:not(.yatra-booking-button) {
    flex: 1;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    background: var(--yatra-primary, #3b82f6);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.yatra-enquiry-submit svg {
    flex-shrink: 0;
}

.yatra-enquiry-submit:not(.yatra-booking-button):hover {
    background: var(--yatra-primary-dark, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--yatra-primary, #3b82f6) 40%, transparent);
}

.yatra-enquiry-submit:not(.yatra-booking-button):active {
    transform: translateY(0);
}

.yatra-enquiry-actions .yatra-booking-button.yatra-enquiry-submit:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--yatra-primary, #3b82f6) 40%, transparent);
}

@media (max-width: 640px) {
    .yatra-enquiry-modal-content {
        max-width: 100%;
        border-radius: 12px;
    }

    .yatra-enquiry-modal-header {
        padding: 24px 20px 20px;
    }

    .yatra-enquiry-form {
        padding: 20px;
    }

    .yatra-enquiry-field-group {
        grid-template-columns: 1fr;
    }

    .yatra-enquiry-actions {
        flex-direction: column;
    }
}

/* ============================================
   ADDITIONAL SERVICES MODAL (Yatra Pro)
   Matches .yatra-enquiry-modal + booking / theme tokens
   ============================================ */
.yatra-services-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.yatra-services-modal.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.yatra-services-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.yatra-services-modal-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    animation: yatra-services-modal-in 0.28s ease-out;
}

@keyframes yatra-services-modal-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.yatra-services-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.yatra-services-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    color: #6b7280;
    padding: 0;
}

.yatra-services-modal-close:hover {
    background: #e5e7eb;
    color: #111827;
    transform: rotate(90deg);
}

.yatra-services-modal-close svg {
    width: 20px;
    height: 20px;
}

.yatra-services-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 72px 22px 32px;
    border-bottom: 1px solid #e5e7eb;
}

.yatra-services-modal-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--yatra-primary, #3b82f6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--yatra-primary, #3b82f6) 35%, transparent);
}

.yatra-services-modal-title-wrap {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.yatra-services-modal-title {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
}

.yatra-services-modal-subtitle {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.yatra-services-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 32px;
}

.yatra-services-modal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yatra-services-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 36px 16px;
    color: #6b7280;
    font-size: 14px;
}

.yatra-services-modal .yatra-spin {
    animation: yatra-services-spin 0.9s linear infinite;
}

@keyframes yatra-services-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.yatra-service-modal-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.yatra-service-modal-item:hover {
    border-color: color-mix(in srgb, var(--yatra-primary, #3b82f6) 45%, #e5e7eb);
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.yatra-service-modal-item.selected {
    border-color: var(--yatra-primary, #3b82f6);
    background: color-mix(in srgb, var(--yatra-primary, #3b82f6) 6%, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--yatra-primary, #3b82f6) 25%, transparent);
}

.yatra-service-modal-item.required {
    border-color: #fcd34d;
    background: #fffbeb;
}

.yatra-service-modal-item.required.selected {
    border-color: #f59e0b;
    background: #fef3c7;
}

.yatra-service-modal-item-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.yatra-service-modal-checkbox {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
}

.yatra-service-modal-checkbox input {
    width: 22px;
    height: 22px;
    accent-color: var(--yatra-primary, #3b82f6);
    cursor: pointer;
}

.yatra-service-modal-checkbox input:disabled {
    cursor: not-allowed;
    opacity: 0.85;
}

.yatra-service-modal-info {
    flex: 1;
    min-width: 0;
}

.yatra-service-modal-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}

.yatra-service-modal-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

.yatra-service-modal-badge.required {
    background: #fef3c7;
    color: #92400e;
}

.yatra-service-modal-description {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.45;
    margin: 0;
}

.yatra-service-modal-price {
    flex-shrink: 0;
    text-align: right;
}

.yatra-service-modal-price-amount {
    font-size: 17px;
    font-weight: 700;
    color: var(--yatra-primary, #3b82f6);
}

.yatra-service-modal-price-per {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.yatra-services-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 32px 22px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

.yatra-services-modal-total {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.yatra-services-total-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.yatra-services-total-amount {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.yatra-services-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.yatra-services-skip-btn {
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.yatra-services-skip-btn:hover:not(:disabled) {
    background: #f9fafb;
    border-color: #9ca3af;
}

.yatra-services-skip-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.yatra-services-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--yatra-primary, #3b82f6);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.yatra-services-continue-btn:hover:not(:disabled) {
    background: var(--yatra-primary-dark, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--yatra-primary, #3b82f6) 40%, transparent);
}

.yatra-services-continue-btn:active:not(:disabled) {
    transform: translateY(0);
}

.yatra-services-continue-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.yatra-services-empty {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
    font-size: 14px;
}

.yatra-services-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: #d1d5db;
}

@media (max-width: 640px) {
    .yatra-services-modal {
        padding: 12px;
    }

    .yatra-services-modal-content {
        border-radius: 14px;
        max-height: 92vh;
    }

    .yatra-services-modal-header {
        padding: 24px 56px 18px 20px;
    }

    .yatra-services-modal-title {
        font-size: 19px;
    }

    .yatra-services-modal-body {
        padding: 16px 20px;
    }

    .yatra-services-modal-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px 20px;
    }

    .yatra-services-modal-total {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
    }

    .yatra-services-modal-actions {
        width: 100%;
    }

    .yatra-services-skip-btn,
    .yatra-services-continue-btn {
        flex: 1;
        justify-content: center;
    }
}

.yatra-booking-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.yatra-booking-feature-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.yatra-booking-feature-icon svg {
    width: 20px;
    height: 20px;
    color: #10b981;
}

.yatra-booking-feature-content {
    flex: 1;
}

.yatra-booking-feature-title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.yatra-booking-feature-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

.yatra-booking-feature-link {
    color: var(--yatra-primary, #3b82f6);
    text-decoration: none;
    font-weight: 500;
}

.yatra-booking-feature-link:hover {
    text-decoration: underline;
}

/* ============================================
   WEATHER & CLIMATE
   ============================================ */
.yatra-weather-info {
    background: #f9fafb;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.yatra-weather-card {
    margin-bottom: 24px;
}

.yatra-weather-season {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.yatra-weather-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
    margin: 0;
}

.yatra-weather-details {
    display: grid;
    gap: 16px;
}

.yatra-weather-detail-item {
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.yatra-weather-detail-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.yatra-weather-detail-value {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* ============================================
   PACKING LIST
   ============================================ */
.yatra-packing-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.yatra-packing-category {
    background: #f9fafb;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.yatra-packing-category-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--yatra-primary, #3b82f6);
}

.yatra-packing-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.yatra-packing-items li {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
    padding-left: 24px;
    position: relative;
}

.yatra-packing-items li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: 700;
    font-size: 16px;
}

/* ============================================
   SIMILAR TRIPS - UNIFIED SPACING
   ============================================ */
.yatra-similar-section {
    /* Breathing room from reviews (or previous block); section already has bottom rhythm */
    padding-top: var(--yatra-section-gap);
    padding-bottom: var(--yatra-section-gap);
    background: #f8fafc;
    margin-top: 0;
    border-top: 1px solid var(--yatra-border-color, #e5e7eb);
}

/* Parent .yatra-similar-section already has unified max-width + horizontal padding (see .yatra-single-trip > rules).
   Higher specificity than common.css .yatra-similar-section-container legacy rule. */
.yatra-single-trip .yatra-similar-section > .yatra-similar-section-container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.yatra-similar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--yatra-element-gap);
}

.yatra-similar-section-title {
    display: flex;
    align-items: center;
    gap: var(--yatra-tiny-gap);
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.yatra-similar-section-icon {
    width: 32px;
    height: 32px;
    color: var(--yatra-primary, #3b82f6);
}

/* Carousel Navigation */
.yatra-carousel-nav {
    display: flex;
    gap: 8px;
}

.yatra-carousel-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    cursor: pointer;
    color: #374151;
    transition: all 0.2s;
}

.yatra-carousel-btn:hover:not(:disabled) {
    background: var(--yatra-primary, #3b82f6);
    border-color: var(--yatra-primary, #3b82f6);
    color: #fff;
}

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

/* Carousel Wrapper */
.yatra-carousel-wrapper {
    overflow: hidden;
    position: relative;
}

.yatra-carousel-track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s ease;
}

.yatra-carousel-item {
    flex: 0 0 calc(25% - 18px);
    min-width: 280px;
}

@media (max-width: 1200px) {
    .yatra-carousel-item {
        flex: 0 0 calc(33.333% - 16px);
    }
}

@media (max-width: 900px) {
    .yatra-carousel-item {
        flex: 0 0 calc(50% - 12px);
    }
}

@media (max-width: 600px) {
    .yatra-carousel-item {
        flex: 0 0 100%;
    }
    
    .yatra-carousel-nav {
        display: none;
    }
    
    .yatra-carousel-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .yatra-carousel-track::-webkit-scrollbar {
        display: none;
    }
    
    .yatra-carousel-item {
        scroll-snap-align: start;
    }
}

/* Grid uses same card styles as /trip page */
.yatra-similar-trips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.yatra-similar-trips-grid .yatra-trip-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.yatra-similar-trips-grid .yatra-trip-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.yatra-similar-trips-grid .yatra-trip-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #e5e7eb;
    flex-shrink: 0;
}

.yatra-similar-trips-grid .yatra-trip-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.yatra-similar-trips-grid .yatra-trip-card:hover .yatra-trip-image img {
    transform: scale(1.05);
}

.yatra-similar-trips-grid .yatra-discount-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ef4444;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

.yatra-similar-trips-grid .yatra-favorite-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6b7280 !important;
    transition: all 0.2s !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
}

.yatra-similar-trips-grid .yatra-favorite-btn:hover {
    background: #ffffff !important;
    color: #ef4444 !important;
    transform: scale(1.1) !important;
}

.yatra-similar-trips-grid .yatra-favorite-btn svg {
    width: 18px !important;
    height: 18px !important;
}

.yatra-similar-trips-grid .yatra-trip-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.yatra-similar-trips-grid .yatra-trip-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #6b7280;
    flex-wrap: wrap;
}

.yatra-similar-trips-grid .yatra-trip-separator {
    color: #d1d5db;
}

.yatra-similar-trips-grid .yatra-trip-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
    line-height: 1.4;
}

.yatra-similar-trips-grid .yatra-trip-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0 !important;
    margin-bottom: 12px;
}

.yatra-similar-trips-grid .yatra-highlight-badge {
    padding: 4px 10px;
    background: #eff6ff;
    color: var(--yatra-primary-darker, #1e40af);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.yatra-similar-trips-grid .yatra-trip-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.yatra-similar-trips-grid .yatra-rating-stars {
    display: flex;
    align-items: center;
    gap: 4px;
}

.yatra-similar-trips-grid .yatra-rating-value {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.yatra-similar-trips-grid .yatra-reviews-count {
    font-size: 12px;
    color: #6b7280;
}

.yatra-similar-trips-grid .yatra-trip-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
}

.yatra-similar-trips-grid .yatra-trip-price {
    display: flex;
    flex-direction: column;
}

.yatra-similar-trips-grid .yatra-original-price {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: line-through;
    margin-bottom: 2px;
}

.yatra-similar-trips-grid .yatra-current-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--yatra-primary, #3b82f6);
    line-height: 1;
}

.yatra-similar-trips-grid .yatra-price-note {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

.yatra-similar-trips-grid .yatra-card-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: var(--yatra-primary, #3b82f6);
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none !important;
    white-space: nowrap;
}

.yatra-similar-trips-grid .yatra-card-view-btn:hover {
    background: var(--yatra-primary-dark, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

@media (max-width: 1024px) {
    .yatra-similar-trips-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .yatra-similar-trips-grid {
        grid-template-columns: 1fr;
    }
    
    .yatra-similar-section {
        padding-top: var(--yatra-section-gap);
        padding-bottom: var(--yatra-section-gap);
        margin-top: 0;
    }
    
    .yatra-similar-section-title {
        font-size: 22px;
    }
    
    .yatra-similar-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 24px;
    }
}

/* Carousel Card Styles */
.yatra-carousel-item .yatra-trip-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.yatra-carousel-item .yatra-trip-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.yatra-carousel-item .yatra-trip-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #e5e7eb;
    flex-shrink: 0;
}

.yatra-carousel-item .yatra-trip-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.yatra-carousel-item .yatra-trip-card:hover .yatra-trip-image img {
    transform: scale(1.05);
}

.yatra-carousel-item .yatra-discount-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ef4444;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

.yatra-carousel-item .yatra-favorite-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6b7280 !important;
    transition: all 0.2s !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
}

.yatra-carousel-item .yatra-favorite-btn:hover {
    background: #ffffff !important;
    color: #ef4444 !important;
    transform: scale(1.1) !important;
}

.yatra-carousel-item .yatra-favorite-btn svg {
    width: 18px !important;
    height: 18px !important;
}

.yatra-carousel-item .yatra-trip-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.yatra-carousel-item .yatra-trip-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #6b7280;
    flex-wrap: wrap;
}

.yatra-carousel-item .yatra-trip-separator {
    color: #d1d5db;
}

.yatra-carousel-item .yatra-trip-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
    line-height: 1.4;
}

.yatra-carousel-item .yatra-trip-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0 !important;
    margin-bottom: 12px;
}

.yatra-carousel-item .yatra-highlight-badge {
    padding: 4px 10px;
    background: #eff6ff;
    color: var(--yatra-primary-darker, #1e40af);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.yatra-carousel-item .yatra-trip-location {
    color: #6b7280;
}

.yatra-carousel-item .yatra-trip-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.yatra-carousel-item .yatra-rating-stars {
    display: flex;
    align-items: center;
    gap: 4px;
}

.yatra-carousel-item .yatra-rating-value {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.yatra-carousel-item .yatra-reviews-count {
    font-size: 13px;
    color: #6b7280;
}

.yatra-carousel-item .yatra-trip-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
}

.yatra-carousel-item .yatra-trip-price {
    display: flex;
    flex-direction: column;
}

.yatra-carousel-item .yatra-original-price {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: line-through;
    margin-bottom: 2px;
}

.yatra-carousel-item .yatra-current-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--yatra-primary, #3b82f6);
    line-height: 1;
}

.yatra-carousel-item .yatra-price-note {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

.yatra-carousel-item .yatra-card-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: var(--yatra-primary, #3b82f6);
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none !important;
    white-space: nowrap;
}

.yatra-carousel-item .yatra-card-view-btn:hover {
    background: var(--yatra-primary-dark, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* ============================================
   REVIEWS SECTION - UNIFIED SPACING
   Outer width: see .yatra-single-trip .yatra-reviews-section (top of file). Inner fills the section.
   ============================================ */
.yatra-reviews-section {
    padding-top: var(--yatra-section-gap);
    padding-bottom: var(--yatra-section-gap);
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

/* Inner wrapper: use full content width of the section (no second max-width / no double horizontal inset) */
.yatra-single-trip .yatra-reviews-section > .yatra-reviews-section-container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.yatra-reviews-section .yatra-reviews-header {
    margin-bottom: var(--yatra-element-gap);
}

.yatra-reviews-section-title {
    display: flex;
    align-items: center;
    gap: var(--yatra-tiny-gap);
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.yatra-reviews-section-icon {
    width: 32px;
    height: 32px;
    color: #fbbf24;
}

.yatra-reviews-section .yatra-reviews-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--yatra-section-gap);
    align-items: start;
}

@media (max-width: 900px) {
    .yatra-reviews-section .yatra-reviews-container {
        grid-template-columns: 1fr;
        gap: var(--yatra-element-gap);
    }
}

/* Rating Distribution Styles */
.yatra-rating-distribution {
    margin-top: 24px;
}

.yatra-breakdown-star {
    font-size: 14px;
    color: #d1d5db;
    line-height: 1;
}

.yatra-breakdown-star.filled {
    color: #fbbf24;
}

.yatra-rating-distribution-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 16px 0;
}

.yatra-rating-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.yatra-rating-star-label {
    display: flex;
    gap: 1px;
    width: 80px;
    flex-shrink: 0;
}

.yatra-rating-bar {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.yatra-rating-bar-fill {
    height: 100%;
    background: var(--yatra-star, #fbbf24);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.yatra-rating-count {
    font-size: 13px;
    color: #6b7280;
    width: 24px;
    text-align: right;
    flex-shrink: 0;
}

/* No Reviews State */
.yatra-reviews-section .yatra-no-reviews-message {
    text-align: center;
    padding: 48px 24px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px dashed #d1d5db;
}

.yatra-no-reviews-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yatra-no-reviews-icon svg {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.yatra-reviews-section .yatra-no-reviews-message p {
    color: #6b7280;
    font-size: 15px;
    margin: 0;
}

/* Reviews List in Full Width Section */
.yatra-reviews-section .yatra-reviews-items {
    display: flex;
    flex-direction: column;
    gap: var(--yatra-element-gap);
}

.yatra-reviews-section .yatra-review-item {
    padding: var(--yatra-element-gap);
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

@media (max-width: 768px) {
    .yatra-reviews-section-title {
        font-size: 22px;
    }
}

/* ============================================
   BOOKING INFORMATION SECTION
   ============================================ */
.yatra-booking-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.yatra-booking-info-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    text-align: center;
    transition: all 0.3s ease;
}

.yatra-booking-info-card:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.yatra-booking-info-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    border-radius: 12px;
    color: var(--yatra-primary, #3b82f6);
}

.yatra-booking-info-icon svg {
    width: 28px;
    height: 28px;
}

.yatra-booking-info-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.yatra-booking-info-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

.yatra-booking-info-link {
    color: var(--yatra-primary, #3b82f6);
    text-decoration: none;
    font-weight: 500;
}

.yatra-booking-info-link:hover {
    text-decoration: underline;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.yatra-trip-testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.yatra-testimonial-card {
    background: #f9fafb;
    border-radius: 16px;
    padding: 28px;
    border-left: 4px solid var(--yatra-primary, #3b82f6);
    transition: all 0.3s ease;
}

.yatra-testimonial-card:hover {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}

.yatra-testimonial-rating {
    color: #fbbf24;
    font-size: 18px;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.yatra-testimonial-text {
    font-size: 15px;
    line-height: 1.8;
    color: #374151;
    margin: 0 0 20px 0;
    font-style: italic;
}

.yatra-testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.yatra-testimonial-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--yatra-primary, #3b82f6) 0%, var(--yatra-primary-darker, #1e40af) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
}

.yatra-testimonial-info {
    flex: 1;
}

.yatra-testimonial-name {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px 0;
}

.yatra-testimonial-location {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* ============================================
   REVIEW SECTION STYLES (Professional Design)
   ============================================ */
.yatra-reviews-header {
    margin-bottom: 32px;
}

.yatra-reviews-divider {
    height: 2px;
    background: var(--yatra-primary, #3b82f6);
    margin-top: 16px;
    width: 100%;
}

.yatra-reviews-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    margin-bottom: 40px;
}

/* Left: Overall Rating Summary */
.yatra-reviews-summary {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.yatra-overall-rating {
    text-align: center;
    padding-bottom: 32px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;
}

.yatra-overall-rating-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.yatra-overall-rating-score {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: 12px;
}

.yatra-rating-big {
    font-size: 56px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.yatra-rating-max {
    font-size: 24px;
    font-weight: 400;
    color: #6b7280;
}

.yatra-overall-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.yatra-star-icon {
    font-size: 28px;
    color: #d1d5db;
}

.yatra-star-icon.filled {
    color: var(--yatra-star, #fbbf24);
}

.yatra-star-icon.half {
    background: linear-gradient(
        90deg,
        var(--yatra-star, #fbbf24) 50%,
        #d1d5db 50%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.yatra-reviews-based-on {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Review Categories */
.yatra-review-categories {
    padding: 0;
}

.yatra-review-categories-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px 0;
}

.yatra-review-category {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.yatra-category-name {
    width: 120px;
    font-size: 14px;
    color: #374151;
    flex-shrink: 0;
}

.yatra-category-bar {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.yatra-category-bar-fill {
    height: 100%;
    background: #1e3a5f;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.yatra-category-score {
    width: 40px;
    font-size: 14px;
    color: #6b7280;
    text-align: right;
    flex-shrink: 0;
}

/* Right: Reviews List */
.yatra-reviews-list {
    min-width: 0;
}

.yatra-reviews-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.yatra-reviews-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.yatra-sort-label {
    font-size: 14px;
    color: #6b7280;
}

.yatra-sort-select {
    padding: 10px 36px 10px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.yatra-sort-select:focus {
    outline: none;
    border-color: var(--yatra-primary, #3b82f6);
}

.yatra-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.yatra-filter-btn:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}

/* Review Items */
.yatra-reviews-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.yatra-review-item {
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.yatra-review-item:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.yatra-review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.yatra-review-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.yatra-review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
}

.yatra-review-author-info {
    flex: 1;
    min-width: 0;
}

.yatra-review-author-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.yatra-review-author-name {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.yatra-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #ecfdf5;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    color: #059669;
}

.yatra-verified-badge .yatra-icon-xs {
    width: 12px;
    height: 12px;
}

.yatra-review-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}

.yatra-review-author-location {
    font-weight: 400;
    color: #6b7280;
}

.yatra-review-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.yatra-star-sm {
    font-size: 14px;
    color: #d1d5db;
}

.yatra-star-sm.filled {
    color: #fbbf24;
}

.yatra-review-rating-num {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.yatra-review-more-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.yatra-review-more-btn:hover {
    background: #f3f4f6;
    color: #6b7280;
}

.yatra-review-body {
    padding-left: 58px;
}

.yatra-review-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.yatra-review-content {
    font-size: 14px;
    line-height: 1.7;
    color: #4b5563;
    margin: 0;
}

/* Review Author Row - Legacy support */
.yatra-review-author-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

/* Load More */
.yatra-reviews-load-more {
    padding-top: 24px;
}

.yatra-load-more-btn {
    width: 100%;
    padding: 14px 24px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.yatra-load-more-btn:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}

.yatra-no-reviews-message {
    text-align: center;
    padding: 40px;
    background: #f9fafb;
    border-radius: 12px;
    color: #6b7280;
}

/* Responsive */
@media (max-width: 968px) {
    .yatra-reviews-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .yatra-reviews-summary {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 24px;
        background: #f9fafb;
        border-radius: 12px;
    }

    .yatra-overall-rating {
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 0;
        border-right: 1px solid #e5e7eb;
        padding-right: 24px;
    }

    .yatra-review-categories {
        padding-left: 24px;
    }
}

@media (max-width: 640px) {
    .yatra-reviews-summary {
        grid-template-columns: 1fr;
    }

    .yatra-overall-rating {
        border-right: none;
        padding-right: 0;
        padding-bottom: 24px;
        border-bottom: 1px solid #e5e7eb;
        margin-bottom: 24px;
    }

    .yatra-review-categories {
        padding-left: 0;
    }

    .yatra-reviews-toolbar {
        flex-wrap: wrap;
    }

    .yatra-reviews-sort {
        width: 100%;
    }

    .yatra-sort-select {
        flex: 1;
    }
}

.yatra-review-form-section {
    margin-top: 40px;
    padding-top: 40px;
    padding-bottom: var(--yatra-element-gap);
    border-top: 1px solid #e5e7eb;
}

.yatra-review-form-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 24px 0;
}

.yatra-review-login-notice,
.yatra-review-booking-notice,
.yatra-review-already-notice {
    padding: 20px 24px;
    background: #f3f4f6;
    border-radius: 12px;
    color: #4b5563;
    font-size: 15px;
}

.yatra-review-login-notice a {
    color: var(--yatra-primary, #3b82f6);
    font-weight: 600;
    text-decoration: none;
}

.yatra-review-login-notice a:hover {
    text-decoration: underline;
}

.yatra-review-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.yatra-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yatra-form-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.yatra-required {
    color: #ef4444;
}

.yatra-rating-field .yatra-star-rating-input {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 4px;
}

.yatra-star-rating-input input {
    display: none;
}

.yatra-star-label {
    font-size: 32px;
    color: #d1d5db;
    cursor: pointer;
    transition: color 0.2s;
}

.yatra-star-rating-input .yatra-star-label.selected,
.yatra-star-rating-input .yatra-star-label.hover {
    color: #fbbf24;
}

.yatra-star-rating-input input:disabled + .yatra-star-label {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Ensure stars are clickable */
.yatra-star-rating-input .yatra-star-label {
    position: relative;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
}

.yatra-field-hint {
    font-size: 12px;
    color: #9ca3af;
    margin: 0;
}

.yatra-form-input,
.yatra-form-textarea {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s;
}

.yatra-form-input:focus,
.yatra-form-textarea:focus {
    outline: none;
    border-color: var(--yatra-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.yatra-form-textarea {
    resize: vertical;
    min-height: 120px;
}

.yatra-review-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--yatra-primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: fit-content;
}

.yatra-review-submit-btn:hover {
    background: var(--yatra-primary-dark, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.yatra-review-moderation-notice {
    font-size: 13px;
    color: #6b7280;
    margin: 8px 0 0 0;
    font-style: italic;
}

.yatra-review-message {
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.yatra-review-message p {
    margin: 0;
    padding: 0;
}

.yatra-review-message-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.yatra-review-message-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Edit Review Notice */
.yatra-review-edit-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    margin-bottom: 20px;
    color: var(--yatra-primary-darker, #1e40af);
    font-size: 14px;
}

.yatra-review-edit-notice svg {
    flex-shrink: 0;
    color: var(--yatra-primary, #3b82f6);
}

.yatra-review-edit-notice p {
    margin: 0;
}

.yatra-loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: yatra-spin 0.8s linear infinite;
}

/* Review form responsive */
@media (max-width: 768px) {
    .yatra-review-summary {
        padding: 24px;
    }
    
    .yatra-review-summary-number {
        font-size: 36px;
    }
    
    .yatra-star-label {
        font-size: 28px;
    }
    
    .yatra-review-form-section {
        margin-top: 32px;
        padding-top: 32px;
    }
}

/* ============================================
   REQUIREMENTS & POLICIES
   ============================================ */
.yatra-requirements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.yatra-requirement-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.yatra-requirement-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.yatra-requirement-icon {
    width: 24px;
    height: 24px;
    color: var(--yatra-primary, #3b82f6);
}

.yatra-requirement-content {
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
    margin: 0;
}

/* ============================================
   ACCOMMODATION & TRANSPORTATION
   ============================================ */
.yatra-accommodation-transport {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 32px;
}

.yatra-accommodation-card,
.yatra-transport-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.yatra-accommodation-title,
.yatra-transport-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.yatra-accommodation-icon,
.yatra-transport-icon {
    width: 24px;
    height: 24px;
    color: var(--yatra-primary, #3b82f6);
}

.yatra-accommodation-details,
.yatra-transport-details {
    font-size: 15px;
    line-height: 1.8;
    color: #374151;
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .yatra-trip-container {
        grid-template-columns: 1fr;
        gap: var(--yatra-element-gap);
    }

    .yatra-trip-sidebar {
        position: static;
        order: -1;
    }
    
    .yatra-enquiry-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .yatra-trip-hero-title {
        font-size: 2.75rem;
    }

    .yatra-included-excluded {
        grid-template-columns: 1fr;
    }

    .yatra-accommodation-transport {
        grid-template-columns: 1fr;
    }

    .yatra-spec-sheet > .yatra-trip-quick-facts {
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        padding: 0;
    }

    .yatra-hero-images {
        grid-template-columns: 1fr;
    }

    /* Stack main + thumbs: fluid main height, strip is horizontal — do not keep desktop 500px column height */
    .yatra-hero-main-image {
        height: clamp(240px, 52vw, 440px);
    }

    .yatra-hero-side-images {
        flex-direction: row;
        overflow-x: auto;
        gap: 12px;
        height: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 4px;
    }

    .yatra-side-image-item {
        flex: 0 0 auto;
        min-width: 148px;
        width: 148px;
        height: 112px;
        max-height: 120px;
        flex-shrink: 0;
    }

    .yatra-side-image-item img {
        height: 100%;
        object-fit: cover;
    }

    .yatra-trip-hero-title-new {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .yatra-trip-hero {
        height: 65vh;
        min-height: 550px;
        max-height: 650px;
    }

    /* Enhanced mobile sticky navigation */
    .yatra-sticky-nav-container {
        gap: var(--yatra-tiny-gap);
        padding: 0 var(--yatra-container-padding);
        scroll-behavior: smooth;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .yatra-sticky-nav-container::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .yatra-sticky-nav-item {
        font-size: 12px;
        padding: 12px 8px;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: fit-content;
    }

    .yatra-sticky-nav-item svg {
        width: 16px;
        height: 16px;
    }

    .yatra-sticky-nav-label {
        display: none; /* Hide text on very small screens; icon + aria-label remain */
    }

    /* Show text on slightly larger mobile devices */
    @media (min-width: 480px) {
        .yatra-sticky-nav-label {
            display: inline;
        }
        .yatra-sticky-nav-item {
            padding: 12px 12px;
        }
    }

    /* Hide original sidebar on mobile, show sticky version */
    .yatra-trip-sidebar {
        display: none !important;
        position: static !important;
        order: unset !important;
    }

    .yatra-trip-main {
        width: 100%;
        max-width: none;
    }

    .yatra-trip-container {
        grid-template-columns: 1fr;
    }

    .yatra-trip-hero-title {
        font-size: 2.25rem;
    }

    .yatra-trip-hero-subtitle {
        font-size: 1.125rem;
    }

    .yatra-spec-sheet > .yatra-trip-quick-facts {
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        padding: 0;
    }

    .yatra-trip-quick-facts .yatra-rating-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .yatra-trip-hero-new {
        padding-top: var(--yatra-hero-mobile-padding-top, 16px);
        padding-bottom: var(--yatra-hero-mobile-padding-bottom, 20px);
        /* Horizontal padding comes from .yatra-single-trip > .yatra-trip-hero-new — avoid doubling */
    }

    .yatra-trip-hero-title-new {
        font-size: 1.75rem;
    }

    .yatra-hero-main-image {
        height: clamp(220px, 58vw, 400px);
    }

    .yatra-hero-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .yatra-hero-rating {
        flex-wrap: wrap;
        gap: 8px;
    }

    .yatra-hero-location,
    .yatra-hero-duration,
    .yatra-hero-season {
        font-size: 14px;
    }

    .yatra-hero-breadcrumb {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .yatra-hero-breadcrumb-current {
        font-weight: 400;
    }

    .yatra-hero-images {
        gap: 12px;
    }

    /* Keep savings badge top-right so it does not stack on media badges (top-left) */
    .yatra-hero-discount-tag {
        top: 12px;
        right: 12px;
        left: auto;
        padding: 8px 14px;
        font-size: 12px;
    }

    .yatra-hero-book-now-btn {
        padding: 12px 20px;
        font-size: 14px;
    }

    .yatra-sticky-nav-container {
        gap: var(--yatra-element-gap);
        padding: 0 var(--yatra-container-padding);
    }

    .yatra-sticky-nav-item {
        font-size: 13px;
        padding: 14px 0;
    }

    .yatra-sticky-nav-price {
        font-size: 16px;
    }

    .yatra-hero-side-images {
        flex-direction: row;
        overflow-x: auto;
        gap: 12px;
        -webkit-overflow-scrolling: touch;
        height: auto;
        min-height: 0;
        scrollbar-width: thin;
    }

    .yatra-side-image-item {
        flex: 0 0 auto;
        min-width: 132px;
        width: 132px;
        height: 100px;
        max-height: 108px;
    }

    .yatra-side-image-item img {
        height: 100%;
        object-fit: cover;
    }

    .yatra-hero-tags {
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px 0;
    }

    .yatra-tag {
        font-size: 11px;
        padding: 6px 12px;
    }

    .yatra-carbon-badge {
        margin-left: 0;
        width: 100%;
        margin-top: 8px;
    }

    .yatra-quick-fact {
        gap: 12px;
        padding: 12px 14px;
    }

    .yatra-quick-fact-icon svg {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }

    .yatra-quick-fact-label {
        font-size: 11px;
        margin-bottom: 4px;
    }

    .yatra-quick-fact-value {
        font-size: 15px;
    }

    .yatra-quick-fact-price {
        font-size: 15px;
    }

    .yatra-quick-fact-price-label {
        font-size: 11px;
        margin-top: 4px;
    }

    .yatra-hero-gallery-play {
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
    }

    .yatra-hero-gallery-play svg {
        width: 24px;
        height: 24px;
    }

    .yatra-hero-gallery-play span {
        font-size: 9px;
    }

    .yatra-gallery-modal-content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .yatra-gallery-modal-prev,
    .yatra-gallery-modal-next {
        width: 40px;
        height: 40px;
    }

    .yatra-gallery-modal-prev {
        left: 10px;
    }

    .yatra-gallery-modal-next {
        right: 10px;
    }

    .yatra-gallery-modal-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
    }
    
    /* Account for WordPress admin bar on mobile */
    .admin-bar .yatra-gallery-modal-close {
        top: 56px; /* 10px + 46px admin bar on mobile */
    }
    
    .admin-bar .yatra-gallery-modal-content {
        margin-top: 46px;
        max-height: calc(100vh - 46px);
    }

    .yatra-gallery-thumbnail {
        width: 60px;
        height: 60px;
    }

    .yatra-trip-section {
        padding: 32px 24px;
    }

    .yatra-trip-section-title {
        font-size: 24px;
    }

    .yatra-trip-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .yatra-trip-testimonials {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .yatra-trip-hero {
        padding-top: 20px;
    }

    .yatra-trip-hero-title {
        font-size: 1.875rem;
    }

    .yatra-trip-hero-title-new {
        font-size: 1.4rem;
        line-height: 1.25;
    }

    .yatra-hero-main-image {
        height: clamp(200px, 62vw, 360px);
        border-radius: 12px;
    }

    .yatra-hero-book-now-container {
        left: auto;
        right: 10px;
        bottom: 10px;
        width: auto;
    }

    .yatra-hero-book-now-btn {
        width: auto;
        
        justify-content: center;
        font-size: 13px;
        padding: 10px 16px;
    }

    .yatra-trip-section {
        padding: 24px 20px;
    }

    .yatra-trip-section#itinerary {
        padding: 20px 12px;
    }

    .yatra-trip-section-title {
        font-size: 22px;
    }

    .yatra-toggle-all-btn {
        font-size: 12px;
        padding: 10px 12px;
    }

    .yatra-itinerary-day-header {
        padding: 12px 12px;
    }

    .yatra-day-badge {
        font-size: 12px;
        padding: 5px 10px;
    }

    .yatra-day-title {
        font-size: 15px;
    }

    .yatra-itinerary-day-content {
        padding: 14px 10px;
        margin-left: 0;
    }

    .yatra-trip-section#itinerary .yatra-itinerary-day,
    .yatra-itinerary-day {
        padding-left: 0;
        margin-left: 0;
    }

    .yatra-entries-timeline {
        padding-left: 18px;
    }

    .yatra-entries-timeline::before {
        left: 4px;
    }

    .yatra-entry-timeline-dot {
        left: -18px;
        width: 10px;
        height: 10px;
    }

    .yatra-trip-section#itinerary .yatra-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .yatra-booking-card {
        padding: 24px;
    }

    .yatra-booking-price-amount {
        font-size: 42px;
    }

    .yatra-trip-gallery {
        grid-template-columns: 1fr;
    }

    .yatra-spec-sheet > .yatra-trip-quick-facts {
        grid-template-columns: 1fr;
        gap: 1px;
        padding: 0;
    }
}

/* ============================================
   UTILITIES
   ============================================ */
.yatra-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.yatra-badge-featured {
    background: #fef3c7;
    color: #92400e;
}

.yatra-badge-popular {
    background: #dbeafe;
    color: var(--yatra-primary-darker, #1e40af);
}

.yatra-badge-new {
    background: #d1fae5;
    color: #065f46;
}

.yatra-badge-limited {
    background: #fee2e2;
    color: #991b1b;
}

.yatra-badge-bestseller {
    background: #fce7f3;
    color: #9f1239;
}

/* ============================================
   TRIP AVAILABILITY SECTION
   ============================================ */
.yatra-availability-section {
    margin-bottom: 48px;
}

.yatra-availability-header {
    margin-bottom: 32px;
}

.yatra-availability-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 24px;
}

.yatra-availability-sort {
    flex-shrink: 0;
}

.yatra-availability-sort-select {
    padding: 10px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 200px;
}

.yatra-availability-sort-select:hover {
    border-color: var(--yatra-primary, #3b82f6);
}

.yatra-availability-sort-select:focus {
    outline: none;
    border-color: var(--yatra-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.yatra-availability-subtitle {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}

.yatra-availability-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.yatra-availability-filter-btn {
    padding: 10px 20px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.yatra-availability-filter-btn:hover {
    border-color: var(--yatra-primary, #3b82f6);
    color: var(--yatra-primary, #3b82f6);
    background: #eff6ff;
}

.yatra-availability-filter-btn.active {
    background: var(--yatra-primary, #3b82f6);
    border-color: var(--yatra-primary, #3b82f6);
    color: #fff;
}

/* Availability Card List */
.yatra-availability-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}

/* Availability Card */
.yatra-availability-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: visible;
    transition: all 0.2s ease;
    position: relative;
}

.yatra-availability-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.yatra-availability-card.open {
    border-color: #bfdbfe;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

/* Selected card state - highlighted with blue border */
.yatra-availability-card.selected {
    border-color: var(--yatra-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 10px 30px rgba(15, 23, 42, 0.08);
    background: #f0f9ff;
}

.yatra-availability-card.selected .yatra-availability-card-header {
    background: #eff6ff;
}

/* Card Header - Clean Modern Design */
.yatra-availability-card-header {
    position: relative;
    padding: 20px 24px;
    cursor: pointer;
    user-select: none;
    background: #f8fafc;
    transition: all 0.2s ease;
    border-bottom: 1px solid #e2e8f0;
}

.yatra-availability-card-header:hover {
    background: #f1f5f9;
}

/* Day Trip Date Header */
.yatra-card-date-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--yatra-primary-dark, #2563eb);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.yatra-card-date-header svg {
    width: 16px;
    height: 16px;
    color: var(--yatra-primary-dark, #2563eb);
}

/* Day Trip Grid - adjusted for time display */
.yatra-day-trip-grid .yatra-card-header-date {
    font-size: 18px;
    font-weight: 700;
}

.yatra-card-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto auto;
    gap: 20px;
    align-items: center;
}

/* Badges row: full width under optional day-trip date, above header grid (original → savings → urgency → status) */
.yatra-card-badges-container {
    position: static;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 14px 0;
    padding: 0;
    max-width: 100%;
    z-index: 1;
}

.yatra-card-date-header + .yatra-card-badges-container {
    margin-top: 2px;
}

.yatra-availability-badge-row__original {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    text-decoration: line-through;
    white-space: nowrap;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.yatra-card-badges-container .yatra-card-discount-badge {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* Urgency copy: same row as status, immediately before Available (no discount required) */
.yatra-card-badges-container .yatra-availability-urgency-message {
    display: inline-flex;
    align-items: center;
    
    padding: 5px 8px;
    background-color: #fef3c7;
    color: #92400e;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    text-align: left;
    box-shadow: 0 1px 2px rgba(146, 64, 14, 0.12);
}

.yatra-card-header-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.yatra-card-header-label {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.yatra-card-header-date {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 2px;
}

.yatra-card-header-location {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yatra-card-header-seats {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    margin-bottom: 4px;
}

.yatra-card-header-sub {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.2;
    font-weight: 400;
}

.yatra-card-header-price {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    min-width: 140px;
}

.yatra-card-price-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* Availability header: sale + label only (original / % live in .yatra-card-badges-container) */
.yatra-card-price-group.yatra-card-price-group--stack {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.yatra-sale-price {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    letter-spacing: -0.5px;
}

.yatra-price-label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 400;
    line-height: 1;
}

.yatra-card-discount-badge {
    padding: 6px 12px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.yatra-badge-discount {
    background: #16a34a;
    color: #fff;
}

.yatra-badge-higher {
    background: #ef4444;
    color: #fff;
}

.yatra-card-price-original {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: line-through;
    line-height: 1.2;
}

.yatra-card-price-sale {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.yatra-card-header-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #9ca3af;
    transition: all 0.2s ease;
}

.yatra-card-header-arrow:hover {
    color: #6b7280;
}

.yatra-availability-card.open .yatra-card-header-arrow {
    transform: rotate(180deg);
    color: var(--yatra-primary-dark, #2563eb);
}

/* Card Body */
.yatra-availability-card-body {
    display: none;
    padding: 16px;
    background: #fefefe;
    border-top: 1px solid #e2e8f0;
    overflow: visible;
    position: relative;
    border-radius:0 0 14px 14px;
}

.yatra-availability-card.open .yatra-availability-card-body {
    display: block;
}

.yatra-card-body-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yatra-card-tour-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.yatra-card-tour-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    line-height: 1.4;
}

.yatra-card-tour-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.yatra-card-tour-type {
    font-size: 13px;
    color: var(--yatra-primary, #3b82f6);
    font-weight: 500;
    line-height: 1.4;
}

.yatra-card-tour-separator {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.4;
}

.yatra-card-tour-location {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* Info Grid */
.yatra-card-info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
}

.yatra-card-info-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.yatra-card-info-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    color: var(--yatra-primary-dark, #2563eb);
}

.yatra-card-info-icon svg {
    width: 18px;
    height: 18px;
}

.yatra-card-info-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
}

.yatra-card-info-label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}

.yatra-card-info-value {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

/* Timeline */
.yatra-card-timeline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 10px;
    background: #f9fafb;
    border-radius: 8px;
    border: none;
}

.yatra-timeline-item {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.yatra-timeline-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-top: 20px;
}

.yatra-timeline-dot-start {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.yatra-timeline-dot-end {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.yatra-timeline-content {
    flex: 1;
}

.yatra-timeline-label {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
    line-height: 1.3;
}

.yatra-timeline-date {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
    line-height: 1.3;
}

.yatra-timeline-location {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.yatra-card-traveler-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yatra-card-action-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-top: 2px;
}

.yatra-card-action-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
}

.yatra-card-action-step-num {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--yatra-primary-dark, #2563eb);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.yatra-card-action-step-sep {
    color: #94a3b8;
    font-weight: 700;
}

.yatra-card-action-help {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
    margin-top: 0;
}

.yatra-card-traveler-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    line-height: 1.4;
}

.yatra-card-traveler-section .yatra-booking-field-select {
    width: 100%;
    border-color: #e5e7eb;
    border-radius: 12px;
    min-height: 52px;
    height: 52px;
}

.yatra-card-traveler-section .yatra-booking-field-select:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.yatra-card-traveler-section .yatra-booking-field-icon {
    color: var(--yatra-primary-dark, #2563eb);
}

/* Availability card traveler dropdown polish */
.yatra-availability-card .yatra-availability-participants {
    width: 100%;
}

.yatra-availability-card .yatra-availability-participants .yatra-booking-field-select {
    border-radius: 12px;
    border-color: #e5e7eb;
    background: #fff;
    min-height: 52px;
    height: 52px;
}

.yatra-availability-card .yatra-availability-participants .yatra-booking-field-icon {
    padding: 0 14px;
    color: var(--yatra-primary-dark, #2563eb);
}

.yatra-availability-card .yatra-availability-participants-display {
    padding: 0 42px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.yatra-availability-card .yatra-select-arrow {
    right: 14px;
    width: 18px;
    height: 18px;
    color: #64748b;
}

.yatra-availability-card .yatra-availability-quantity-selector {
    left: 0;
    right: 0;
    margin-top: 10px;
    border-radius: 14px;
    border-color: #e5e7eb;
    padding: 12px;
}

.yatra-availability-card .yatra-quantity-row {
    padding: 10px 8px;
    border-radius: 10px;
}

.yatra-availability-card .yatra-quantity-row:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 2px;
    padding-bottom: 10px;
}

/* Simple Travelers Display in Availability Cards */
.yatra-availability-travelers-simple {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.yatra-availability-travelers-simple .yatra-booking-field-icon {
    flex-shrink: 0;
}

.yatra-availability-travelers-simple .yatra-quantity-input-simple {
    width: 45px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    background: transparent;
    border: none;
}

.yatra-availability-travelers-simple .yatra-quantity-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.yatra-availability-travelers-simple .yatra-quantity-btn:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: var(--yatra-primary-dark, #2563eb);
}

.yatra-availability-travelers-simple .yatra-quantity-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.yatra-availability-travelers-simple .yatra-quantity-btn svg {
    width: 14px;
    height: 14px;
    color: #374151;
}

.yatra-availability-travelers-simple .yatra-travelers-label {
    font-size: 13px;
    color: #6b7280;
    margin-left: 4px;
}

/* Booking Row */
.yatra-card-booking-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eef2f7;
}

.yatra-card-total-box {
    flex: 1;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.yatra-card-total-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.yatra-card-total-note {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

.yatra-card-total-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--yatra-primary, #3b82f6);
    line-height: 1;
    white-space: nowrap;
    margin-left: auto;
}

button[type="button"].yatra-card-book-btn {
    flex: 1;
    padding: 12px 16px;
    background: var(--yatra-primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: left;
    text-decoration: none;
}

.yatra-card-book-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.yatra-card-book-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.yatra-card-book-btn-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.yatra-card-book-btn-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
}

.yatra-card-book-btn:hover:not(:disabled),
a.yatra-card-book-btn:hover {
    background: var(--yatra-primary-dark, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    color: #fff;
    text-decoration: none;
}

.yatra-card-book-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Availability Participants Select */
.yatra-availability-participants {
    position: relative;
    width: 100%;
    cursor: pointer;
}

.yatra-availability-participants-display {
    flex: 1;
    padding: 14px 12px 14px 0;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
    user-select: none;
    height: 100%;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.yatra-availability-participants:hover .yatra-availability-participants-display {
    color: var(--yatra-primary, #3b82f6);
}

.yatra-availability-quantity-selector {
    position: absolute;
    top: 100%;
    left: -12px;
    right: -12px;
    margin-top: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    z-index: 1000;
    display: none;
    max-height: 350px;
    overflow-y: auto;
}

.yatra-availability-participants.active .yatra-availability-quantity-selector {
    display: block;
    animation: yatra-trip-dropdown-slide 0.2s ease-out;
}

/* Responsive */
@media (max-width: 1024px) {
    .yatra-card-header-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    
    .yatra-card-header-price {
        grid-column: 1 / -1;
        align-items: flex-start;
    }
    
    .yatra-card-header-arrow {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    
    .yatra-card-body-content {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .yatra-availability-card-header {
        padding: 14px 16px;
    }
    
    .yatra-card-header-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .yatra-card-header-arrow {
        position: absolute;
        top: 14px;
        right: 16px;
    }
    
    .yatra-availability-card-body {
        padding: 14px;
    }
    
    .yatra-card-body-content {
        gap: 16px;
    }
    
    .yatra-card-body-left {
        gap: 10px;
    }
    
    .yatra-card-info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }
    
    .yatra-card-booking-row {
        flex-direction: column;
        margin-top: 12px;
        padding-top: 12px;
    }
    
    .yatra-card-book-btn {
        width: 100%;
    }
}

.yatra-availability-toggle {
    border: none;
    background: transparent;
    width: 100%;
    border-radius:12px;
}

/* Load More Section */
.yatra-availability-load-more {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
    flex: 1 1 0;
}

.yatra-summary-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.yatra-summary-value {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.yatra-summary-sub {
    font-size: 13px;
    color: #6b7280;
}

.yatra-summary-price {
    margin-left: auto;
    text-align: right;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 250px;
}

.yatra-summary-price div {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
}

.yatra-summary-original {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: line-through;
}

.yatra-summary-sale {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.yatra-summary-arrow {
    width: 14px;
    height: 14px;
    border-right: 2px solid #374151;
    border-bottom: 2px solid #374151;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.yatra-availability-item.open .yatra-summary-arrow {
    transform: rotate(-135deg);
}

.yatra-availability-details {
    display: none;
    border-top: 1px solid #e5e7eb;
    padding: 0 24px 24px;
    background: #f9fafb;
}

.yatra-availability-item.open .yatra-availability-details {
    display: block;
}

.yatra-availability-details-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
}

.yatra-details-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.yatra-details-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.yatra-details-subtitle {
    font-size: 14px;
    color: var(--yatra-primary, #3b82f6);
    font-weight: 600;
    margin: 0;
}

.yatra-details-timeline {
    border-left: 2px dashed #d1d5db;
    padding-left: 18px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.yatra-timeline-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.yatra-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-left: -25px;
    margin-top: 20px;
}

.yatra-timeline-dot.success {
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.yatra-timeline-dot.danger {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}

.yatra-timeline-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.yatra-timeline-meta {
    display: block;
    font-size: 13px;
    color: #6b7280;
}

.yatra-details-right {
    border-left: 1px solid #e5e7eb;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.yatra-details-price-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.yatra-details-price-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.yatra-details-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.yatra-details-price-note {
    font-size: 12px;
    color: #6b7280;
}

.yatra-availability-traveler-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yatra-availability-traveler-picker .yatra-booking-field-select {
    width: 100%;
}

 .yatra-availability-total-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.yatra-availability-total-price {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    flex: 1 1 50%;
}

.yatra-availability-total-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.yatra-availability-total-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.yatra-availability-total-amount {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.yatra-availability-book-btn {
    padding: 14px 18px;
    border-radius: 12px;
    border: none;
    background: var(--yatra-primary, #3b82f6);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    flex: 1 1 50%;
}

.yatra-availability-book-btn:hover {
    background: var(--yatra-primary-dark, #2563eb);
}

.yatra-availability-book-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .yatra-availability-total-row {
        flex-direction: column;
    }

    .yatra-availability-book-btn {
        width: 100%;
    }
}

.yatra-availability-book-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.yatra-availability-details-content {
    flex-direction: column;
}

@media (min-width: 900px) {
    .yatra-availability-summary {
        flex-wrap: nowrap;
    }

    .yatra-availability-details-content {
        flex-direction: row;
        gap: 32px;
    }

    .yatra-details-left {
        flex: 1 1 55%;
    }

    .yatra-details-right {
        flex: 1 1 45%;
    }
}

.yatra-availability-date-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yatra-availability-main-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.yatra-availability-day {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.yatra-availability-date {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}

.yatra-availability-year {
    font-size: 16px;
    font-weight: 500;
    color: #6b7280;
}

.yatra-availability-date-range {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.yatra-availability-date-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.yatra-availability-date-label {
    font-weight: 500;
    color: #6b7280;
    font-size: 12px;
}

.yatra-availability-date-value {
    font-weight: 600;
    color: #111827;
    font-size: 13px;
}

.yatra-availability-separator {
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
}

.yatra-availability-location-section {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.yatra-availability-location-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.yatra-availability-location-item svg {
    color: #6b7280;
    flex-shrink: 0;
}

.yatra-availability-location-value {
    font-weight: 600;
    color: #111827;
    font-size: 13px;
}

.yatra-availability-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    color: #6b7280;
}

.yatra-availability-duration {
    display: flex;
    align-items: center;
    gap: 6px;
}

.yatra-availability-duration-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #6b7280;
}

.yatra-availability-seats-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.yatra-availability-seats-info svg {
    color: #6b7280;
    flex-shrink: 0;
}

.yatra-availability-status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.yatra-availability-status-available {
    background: #d1fae5;
    color: #065f46;
}

.yatra-availability-status-limited {
    background: #fef3c7;
    color: #92400e;
}

.yatra-availability-status-waitlist {
    background: #fee2e2;
    color: #991b1b;
}

.yatra-availability-status-sold-out {
    background: #fee2e2;
    color: #991b1b;
}

.yatra-availability-status-blocked {
    background: #1f2937;
    color: #f9fafb;
}

.yatra-availability-status-closed {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

.yatra-availability-status-cancelled {
    background: #9ca3af;
    color: #ffffff;
}

/* Card Header Status Badge - Inline Design */
.yatra-badge-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Status badge colors - matching discount badge style */
.yatra-badge-status.yatra-badge-available {
    background: #10b981;
    color: #fff;
}

.yatra-badge-status.yatra-badge-limited {
    background: #f59e0b;
    color: #fff;
}

.yatra-badge-status.yatra-badge-sold-out {
    background: #dc2626;
    color: #fff;
}

.yatra-badge-status.yatra-badge-blocked {
    background: #1f2937;
    color: #fff;
}

.yatra-badge-status.yatra-badge-closed {
    background: #6b7280;
    color: #fff;
}

.yatra-badge-status.yatra-badge-cancelled {
    background: #9ca3af;
    color: #fff;
}

/* Status-Specific Card Designs - Left Border Only */
.yatra-availability-card.yatra-card-status-available {
    border-left: 4px solid #10b981;
}

.yatra-availability-card.yatra-card-status-available:hover {
    border-left-color: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.yatra-availability-card.yatra-card-status-limited {
    border-left: 4px solid #f59e0b;
}

.yatra-availability-card.yatra-card-status-limited:hover {
    border-left-color: #d97706;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.yatra-availability-card.yatra-card-status-sold-out {
    border-left: 4px solid #ef4444;
    opacity: 0.85;
}

.yatra-availability-card.yatra-card-status-sold-out:hover {
    border-left-color: #dc2626;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.yatra-availability-card.yatra-card-status-blocked {
    border-left: 4px solid #1f2937;
    opacity: 0.7;
}

.yatra-availability-card.yatra-card-status-blocked:hover {
    border-left-color: #111827;
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.15);
}

.yatra-availability-card.yatra-card-status-closed {
    border-left: 4px solid #6b7280;
    opacity: 0.8;
}

.yatra-availability-card.yatra-card-status-closed:hover {
    border-left-color: #4b5563;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.15);
}

.yatra-availability-card.yatra-card-status-cancelled {
    border-left: 4px solid #9ca3af;
    opacity: 0.75;
}

.yatra-availability-card.yatra-card-status-cancelled:hover {
    border-left-color: #6b7280;
    box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);
}

/* Right Column: Pricing & Booking */
.yatra-availability-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 24px;
    border-left: 1px solid #e5e7eb;
}

.yatra-availability-pricing-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.yatra-availability-discount-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.yatra-availability-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.yatra-availability-price-original {
    font-size: 14px;
    color: #9ca3af;
    text-decoration: line-through;
}

.yatra-availability-price-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.yatra-availability-price-sale {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}

.yatra-availability-price-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* Traveler Selector */
.yatra-availability-travelers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yatra-availability-traveler-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

/* Availability Participants Select - Same as sidebar - DUPLICATE REMOVED */

.yatra-availability-total-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: #fff;
    border: 2px solid var(--yatra-primary, #3b82f6);
    border-radius: 8px;
    margin-top: 4px;
}

.yatra-availability-total-label {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}

.yatra-availability-total-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--yatra-primary, #3b82f6);
}

.yatra-availability-book-btn {
    padding: 14px 24px;
    background: var(--yatra-primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
}

.yatra-availability-book-btn:hover:not(:disabled) {
    background: var(--yatra-primary-dark, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.yatra-availability-book-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .yatra-availability-item-main {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .yatra-availability-right {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #e5e7eb;
        padding-top: 24px;
    }
}

.yatra-availability-load-more {
    text-align: center;
    margin-top: 32px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.yatra-availability-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: #10b981;
    color: #fff;
    border: 2px solid #10b981;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.yatra-availability-load-more-btn:hover:not(:disabled) {
    background: #059669;
    border-color: #059669;
}

.yatra-availability-load-more-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.yatra-availability-load-more-btn svg {
    width: 18px;
    height: 18px;
}

.yatra-availability-count-info {
    font-size: 13px;
    color: #6b7280;
}

/* Spinner animation for load more */
.yatra-spinner {
    animation: yatra-spin 1s linear infinite;
}

/* Responsive */
@media (max-width: 1024px) {
    .yatra-availability-header-top {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .yatra-availability-sort-select {
        width: 100%;
    }
    
    .yatra-availability-item-main {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .yatra-availability-pricing-info {
        align-items: flex-start;
    }
    
    .yatra-availability-book-btn {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .yatra-availability-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    
    .yatra-availability-filter-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .yatra-availability-item {
        padding: 20px;
    }
    
    .yatra-availability-date {
        font-size: 20px;
    }
    
    .yatra-availability-price-sale {
        font-size: 24px;
    }
}

/* Price Section Styling */
.yatra-price-section {
    margin: 16px 0;
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
}

.yatra-price-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
}

.dark .yatra-price-section-title {
    color: #d1d5db;
}

/* Itinerary Costs Styling */
.yatra-price-itinerary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    color: #6b7280;
}

.yatra-price-itinerary span:first-child {
    font-weight: 500;
    color: #374151;
}

.yatra-price-itinerary span:last-child {
    font-weight: 600;
    color: #059669;
}

.dark .yatra-price-itinerary {
    color: #9ca3af;
}

.dark .yatra-price-itinerary span:first-child {
    color: #d1d5db;
}

.dark .yatra-price-itinerary span:last-child {
    color: #10b981;
}

/* Availability Fallback Styling */
.yatra-availability-empty-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.yatra-availability-empty-actions .yatra-btn {
    min-width: 140px;
}

.yatra-availability-empty .yatra-icon-xl {
    color: #10b981;
    margin-bottom: 16px;
}

.dark .yatra-availability-empty .yatra-icon-xl {
    color: #34d399;
}

/* Date Picker Customization */
.flatpickr-calendar {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
}

.flatpickr-day.selected {
    background: var(--yatra-primary, #3b82f6);
    border-color: var(--yatra-primary, #3b82f6);
}

.flatpickr-day:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.flatpickr-day.today {
    border-color: var(--yatra-primary, #3b82f6);
}

.flatpickr-day.disabled {
    color: #d1d5db;
}

/* Dark mode date picker */
.dark .flatpickr-calendar {
    background: #1f2937;
    border-color: #374151;
}

.dark .flatpickr-months {
    background: #1f2937;
}

.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
.dark .flatpickr-current-month input.cur-year {
    color: #f9fafb;
}

.dark .flatpickr-weekday {
    color: #9ca3af;
}

.dark .flatpickr-day {
    color: #f9fafb;
}

.dark .flatpickr-day:hover {
    background: #374151;
    border-color: #4b5563;
}

.dark .flatpickr-day.disabled {
    color: #4b5563;
}

/* Availability Empty Info */
.yatra-availability-empty-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0;
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.dark .yatra-availability-empty-info {
    background: #1f2937;
    border-color: #374151;
}

.yatra-availability-empty-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.yatra-availability-empty-info-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #10b981;
    color: white;
    border-radius: 8px;
    flex-shrink: 0;
}

.yatra-availability-empty-info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.yatra-availability-empty-info-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.yatra-availability-empty-info-value {
    font-size: 16px;
    color: #111827;
    font-weight: 600;
}

.dark .yatra-availability-empty-info-label {
    color: #9ca3af;
}

.dark .yatra-availability-empty-info-value {
    color: #f9fafb;
}

/* ============================================
   TRIP ATTRIBUTES SECTION — matches quick facts: hairline grid, neutral icons
   (Vertical spacing: unified block above — no extra padding-top here.)
   ============================================ */
.yatra-trip-attributes {
    --yatra-attr-divider: #d6d3d1;
}

.yatra-trip-attributes .yatra-section-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--yatra-attr-divider);
}

.yatra-trip-attributes .yatra-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #1c1917;
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.yatra-trip-attributes .yatra-section-description {
    font-size: 13px;
    line-height: 1.5;
    color: #78716c;
    margin: 0;
    max-width: 42em;
}

/* Layout + hairlines when wrapped by .yatra-spec-sheet (see SPEC SHEET WRAPPER block). */
.yatra-attributes-grid {
    margin-top: 0;
}

.yatra-attributes-filter-wrapper .yatra-attributes-grid {
    display: grid;
}

/* Scoped to single-trip attributes grid only — listing filters reuse class names with a different DOM (label + content stacked). */
.yatra-attributes-grid > .yatra-attribute-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: none;
    border-radius: 0;
    transition: background-color 0.15s ease;
    min-width: 0;
    min-height: 100%;
    box-sizing: border-box;
    align-self: stretch;
}

.yatra-attributes-grid > .yatra-attribute-item:hover {
    background: #fafaf9;
}

.yatra-attributes-grid .yatra-attribute-icon {
    width: auto;
    height: auto;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #57534e;
    border-radius: 0;
    flex-shrink: 0;
    overflow: visible;
}

.yatra-attributes-grid .yatra-attribute-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex-shrink: 0;
    overflow: visible;
    opacity: 0.92;
}

.yatra-attributes-grid .yatra-attribute-icon svg[fill="none"] {
    stroke: currentColor;
}

.yatra-attributes-grid .yatra-attribute-icon svg[fill="currentColor"] {
    stroke: none;
    opacity: 1;
}

.yatra-attribute-icon-img {
    width: 26px;
    height: 26px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.yatra-attributes-grid .yatra-attribute-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
}

.yatra-attributes-grid .yatra-attribute-content .yatra-attribute-name {
    font-size: 13px;
    font-weight: 600;
    color: #292524;
    margin-bottom: 3px;
    line-height: 1.35;
}

.yatra-attributes-grid .yatra-attribute-value {
    font-size: 13px;
    color: #57534e;
    margin-bottom: 0;
    word-wrap: break-word;
    line-height: 1.45;
}

.yatra-attributes-grid .yatra-attribute-value a {
    color: var(--yatra-primary-color, var(--yatra-primary, #3b82f6));
    text-decoration: none;
}

.yatra-attributes-grid .yatra-attribute-value a:hover {
    text-decoration: underline;
}

.yatra-color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid var(--yatra-border-color, #e5e7eb);
    vertical-align: middle;
    margin-right: 6px;
}

.yatra-attributes-grid .yatra-attribute-description {
    margin-top: 6px;
    font-size: 11px;
    color: #a8a29e;
    font-style: italic;
    line-height: 1.35;
}

/* ============================================
   BOOKING PAGE TRIP INFORMATION
   ============================================ */
.yatra-booking-info {
    margin: 20px 0;
    padding: 16px;
    background: var(--yatra-bg-card, #ffffff);
    border: 1px solid var(--yatra-border-color, #e5e7eb);
    border-radius: 8px;
}

.yatra-booking-info h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--yatra-text-primary, #1a1a1a);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--yatra-border-color, #e5e7eb);
}

.yatra-booking-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yatra-booking-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--yatra-border-light, #f3f4f6);
}

.yatra-booking-info-item:last-child {
    border-bottom: none;
}

.yatra-booking-info-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--yatra-text-secondary, #6b7280);
    flex: 1;
    min-width: 0;
    margin-right: 8px;
}

.yatra-booking-info-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--yatra-text-primary, #1a1a1a);
    text-align: right;
    flex-shrink: 0;
}

/* Dark Mode */
.dark .yatra-booking-info {
    background: var(--yatra-bg-card-dark, #1f2937);
    border-color: var(--yatra-border-color-dark, #374151);
}

.dark .yatra-booking-info h5 {
    color: var(--yatra-text-primary-dark, #f9fafb);
    border-bottom-color: var(--yatra-border-color-dark, #374151);
}

.dark .yatra-booking-info-item {
    border-bottom-color: var(--yatra-border-light-dark, #374151);
}

.dark .yatra-booking-info-name {
    color: var(--yatra-text-secondary-dark, #9ca3af);
}

.dark .yatra-booking-info-value {
    color: var(--yatra-text-primary-dark, #f9fafb);
}

/* Cancellation Policy Content */
.yatra-cancellation-policy-content p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--yatra-text-secondary, #6b7280);
    margin: 0 0 8px 0;
}

.yatra-cancellation-policy-content p:last-child {
    margin-bottom: 0;
}

.yatra-policy-more {
    font-size: 12px;
    font-style: italic;
    color: var(--yatra-text-muted, #9ca3af);
    margin-top: 8px;
}

/* Dark Mode */
.dark .yatra-cancellation-policy-content p {
    color: var(--yatra-text-secondary-dark, #9ca3af);
}

.dark .yatra-policy-more {
    color: var(--yatra-text-muted-dark, #6b7280);
}

/* ============================================
   IMPORTANT INFORMATION SECTION - SIMPLE & CLEAN
   ============================================ */

.yatra-important-info-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 32px;
}

.yatra-important-info-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--yatra-bg-card, #ffffff);
    border: 1px solid var(--yatra-border-color, #e5e7eb);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
}

.yatra-important-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.yatra-important-info-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yatra-primary-light, #eff6ff);
    color: var(--yatra-primary-color, var(--yatra-primary, #3b82f6));
    border-radius: 12px;
    font-size: 20px;
    flex-shrink: 0;
}

.yatra-important-info-content-wrapper {
    flex: 1;
}

.yatra-important-info-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--yatra-text-primary, #1a1a1a);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 0;
}

.yatra-important-info-title .yatra-icon-inline {
    display: none;
}

.yatra-important-info-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--yatra-text-secondary, #6b7280);
    margin: 0;
}

.yatra-important-info-content p {
    margin: 0 0 8px 0;
}

.yatra-important-info-content p:last-child {
    margin-bottom: 0;
}

/* Info Detail Rows */
.yatra-info-detail-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 6px 0;
}

.yatra-info-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.yatra-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: right;
}

/* Info Badge */
.yatra-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}

.yatra-badge-included {
    background: #d1fae5;
    color: #065f46;
}

/* Info Description */
.yatra-info-description {
    margin-top: 12px;
}

/* Icon Sizes */
.yatra-icon-tiny {
    width: 14px;
    height: 14px;
}

/* Icon Color Variations */
.yatra-icon-physical {
    background: #fef3c7;
    color: #d97706;
}

.yatra-icon-visa {
    background: #dbeafe;
    color: var(--yatra-primary-dark, #2563eb);
}

.yatra-icon-health {
    background: #fce7f3;
    color: #db2777;
}

.yatra-icon-policy {
    background: #fee2e2;
    color: #dc2626;
}

.yatra-icon-age {
    background: #e0e7ff;
    color: #6366f1;
}

.yatra-icon-accommodation {
    background: #d1fae5;
    color: #059669;
}

.yatra-icon-transport {
    background: #ddd6fe;
    color: #7c3aed;
}

/* Section Description */
.yatra-section-description {
    font-size: 15px;
    line-height: 1.6;
    color: #6b7280;
    margin: 12px 0 0 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .yatra-important-info-grid {
        gap: 16px;
    }
    
    .yatra-important-info-card {
        padding: 20px;
        gap: 16px;
        align-items: flex-start;
        text-align: left;
    }
    
    .yatra-important-info-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .yatra-important-info-title {
        font-size: 15px;
    }
    
    .yatra-info-detail-row {
        flex-direction: column;
        gap: 4px;
    }
    
    .yatra-info-value {
        text-align: left;
    }
    
    .yatra-important-info-content {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .yatra-important-info-card {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 12px;
    }

    .yatra-important-info-icon {
        margin: 0;
    }

    .yatra-important-info-title {
        text-align: left;
        justify-content: flex-start;
    }

    .yatra-important-info-content {
        text-align: left;
    }
}

/* ============================================
   BOOKING PAGE ATTRIBUTES
   ============================================ */
.yatra-booking-attributes {
    margin: 20px 0;
    padding: 16px;
    background: var(--yatra-bg-card, #ffffff);
    border: 1px solid var(--yatra-border-color, #e5e7eb);
    border-radius: 8px;
}

.yatra-booking-attributes h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--yatra-text-primary, #1a1a1a);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--yatra-border-color, #e5e7eb);
}

.yatra-booking-attributes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yatra-booking-attribute-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--yatra-border-light, #f3f4f6);
}

.yatra-booking-attribute-item:last-child {
    border-bottom: none;
}

.yatra-booking-attribute-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--yatra-text-secondary, #6b7280);
    flex: 1;
    min-width: 0;
    margin-right: 8px;
}

.yatra-booking-attribute-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--yatra-text-primary, #1a1a1a);
    text-align: right;
    flex-shrink: 0;
}

.yatra-booking-color-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid var(--yatra-border-color, #e5e7eb);
    vertical-align: middle;
}

/* Dark Mode */
.dark .yatra-booking-attributes {
    background: var(--yatra-bg-card-dark, #1f2937);
    border-color: var(--yatra-border-color-dark, #374151);
}

.dark .yatra-booking-attributes h5 {
    color: var(--yatra-text-primary-dark, #f9fafb);
    border-bottom-color: var(--yatra-border-color-dark, #374151);
}

.dark .yatra-booking-attribute-item {
    border-bottom-color: var(--yatra-border-light-dark, #374151);
}

.dark .yatra-booking-attribute-name {
    color: var(--yatra-text-secondary-dark, #9ca3af);
}

.dark .yatra-booking-attribute-value {
    color: var(--yatra-text-primary-dark, #f9fafb);
}

/* ============================================
   TRIP LISTING ATTRIBUTE FILTERS - MATCHES AGE SUITABILITY DESIGN
   ============================================ */

/* Input groups for number/date ranges */
.yatra-input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.yatra-input-group input.yatra-filter-input {
    width: 100%;
}

/* Attribute filter icons - match Age Suitability size */
.yatra-filter-icon[width="18"] {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}

/* Individual attribute items within Trip Attributes section */
.yatra-attribute-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f2;
}

.yatra-attribute-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.yatra-attribute-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.yatra-attribute-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yatra-attribute-icon img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}

.yatra-attribute-icon svg {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.yatra-attribute-name {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    line-height: 1.5;
}

.yatra-attribute-content {
    width: 100%;
    display: block;
}

.yatra-attribute-content input.yatra-filter-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.yatra-attribute-content .yatra-checkbox-group {
    width: 100%;
}

.yatra-attribute-content .yatra-input-group {
    width: 100%;
}

.yatra-attribute-content .yatra-input-group input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Dark mode for attribute items */
.dark .yatra-attribute-item {
    border-bottom-color: #374151;
}

.dark .yatra-attribute-icon svg {
    color: #9ca3af;
}

.dark .yatra-attribute-name {
    color: #e5e7eb;
}

/* Responsive Design */
@media (max-width: 768px) {
    .yatra-attr-filter {
        margin: 20px 0;
        border-radius: 12px;
    }
    
    .yatra-attr-filter__header {
        padding: 20px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    
    .yatra-attr-filter__title {
        font-size: 16px;
    }
    
    .yatra-attr-filter__reset {
        width: 100%;
        justify-content: center;
    }
    
    .yatra-attr-group {
        padding: 20px 20px;
    }
    
    .yatra-attr-icon {
        width: 36px;
        height: 36px;
    }
    
    .yatra-attr-icon img {
        width: 18px;
        height: 18px;
    }
    
    .yatra-attr-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .yatra-attr-range {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .yatra-attr-range__sep {
        display: none;
    }
}

/* Dark Mode - Professional Theme */
.dark .yatra-attr-filter {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .yatra-attr-filter:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.35);
}

.dark .yatra-attr-filter__header {
    background: #0f172a;
    border-bottom-color: #334155;
}

.dark .yatra-attr-filter__title {
    color: #f1f5f9;
}

.dark .yatra-attr-filter__reset {
    background: #1e293b;
    border-color: #475569;
    color: #cbd5e1;
}

.dark .yatra-attr-filter__reset:hover {
    background: #334155;
    border-color: #64748b;
    color: #f1f5f9;
}

.dark .yatra-attr-group {
    border-bottom-color: #334155;
}

.dark .yatra-attr-group:hover {
    background: #1a2332;
}

.dark .yatra-attr-group__label {
    border-bottom-color: #334155;
}

.dark .yatra-attr-icon {
    background: linear-gradient(135deg, var(--yatra-primary-darker, #1e3a8a) 0%, var(--yatra-primary-darker, #1e40af) 100%);
    border-color: var(--yatra-primary, #3b82f6);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.15);
}

.dark .yatra-attr-icon svg {
    color: #60a5fa;
}

.dark .yatra-attr-name {
    color: #f1f5f9;
}

.dark .yatra-attr-checkbox:hover {
    background: #1a2332;
}

.dark .yatra-attr-checkbox__box {
    border-color: #475569;
    background: #334155;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dark .yatra-attr-checkbox input[type="checkbox"]:checked + .yatra-attr-checkbox__box {
    background: var(--yatra-primary, #3b82f6);
    border-color: var(--yatra-primary, #3b82f6);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.dark .yatra-attr-checkbox:hover .yatra-attr-checkbox__box {
    border-color: #64748b;
    background: #475569;
}

.dark .yatra-attr-checkbox input[type="checkbox"]:checked:hover + .yatra-attr-checkbox__box {
    background: var(--yatra-primary-dark, #2563eb);
    border-color: var(--yatra-primary-dark, #2563eb);
}

.dark .yatra-attr-checkbox__label {
    color: #e2e8f0;
}

.dark .yatra-attr-range__sep {
    color: #64748b;
}

.dark .yatra-attr-input {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dark .yatra-attr-input:hover {
    border-color: #64748b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.dark .yatra-attr-input:focus {
    border-color: var(--yatra-primary, #3b82f6);
    background: #334155;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dark .yatra-attr-input::placeholder {
    color: #64748b;
}

/* Legacy compatibility - keeping minimal old styles */
.yatra-attribute-input-wrap input {
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--yatra-text-primary, #0f172a);
    padding: 0;
    outline: none;
}

.yatra-attribute-input-wrap input::placeholder {
    color: rgba(15, 23, 42, 0.35);
}

.yatra-attribute-input-separator {
    font-size: 22px;
    color: rgba(15, 23, 42, 0.2);
    font-weight: 200;
}

/* Responsive */
@media (max-width: 960px) {
    .yatra-attributes-panel__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .yatra-attributes-panel__body {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .yatra-attributes-panel__head {
        padding: 24px;
    }

    .yatra-attribute-input-row {
        flex-direction: column;
    }

    .yatra-attribute-input-separator {
        display: none;
    }
}

/* Dark Mode */
.dark .yatra-attributes-panel {
    background: #0b1120;
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

.dark .yatra-attributes-panel__head {
    background: linear-gradient(120deg, #020617 0%, #0f172a 60%, var(--yatra-primary-darker, #1e3a8a) 100%);
}

.dark .yatra-attribute-tile {
    background: rgba(15, 23, 42, 0.75);
}

.dark .yatra-attribute-tile:hover {
    background: rgba(15, 23, 42, 0.95);
}

.dark .yatra-attribute-tile__name {
    color: #e2e8f0;
}

.dark .yatra-attribute-tile__type {
    color: rgba(148, 163, 184, 0.8);
}

.dark .yatra-attribute-pill {
    background: rgba(15, 23, 42, 0.45);
    color: #cbd5e5;
    border-color: rgba(148, 163, 184, 0.2);
}

.dark .yatra-attribute-pill input:checked ~ span {
    color: #60a5fa;
}

.dark .yatra-attribute-input-row {
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(148, 163, 184, 0.2);
}

.dark .yatra-attribute-input-wrap label {
    color: rgba(148, 163, 184, 0.7);
}

.dark .yatra-attribute-input-wrap input {
    color: #f1f5f9;
}

.dark .yatra-attribute-input-wrap input::placeholder {
    color: rgba(148, 163, 184, 0.4);
}

.dark .yatra-attribute-input-separator {
    color: rgba(148, 163, 184, 0.2);
}

/* Legacy attribute styles below - keeping for backward compatibility */
.yatra-attribute-range-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
}

.yatra-attribute-input-group {
    flex: 1;
    min-width: 0;
}

.yatra-attribute-input-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #718096;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.yatra-attribute-input {
    width: 100%;
    padding: 10px 14px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
    transition: all 0.2s ease;
}

.yatra-attribute-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.yatra-attribute-range-separator {
    font-size: 16px;
    font-weight: 600;
    color: #a0aec0;
    margin-top: 20px;
}

/* Responsive Design for New Attribute Filter */
@media (max-width: 768px) {
    .yatra-attributes-filter-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 16px;
    }
    
    .yatra-attributes-filter-title {
        justify-content: center;
    }
    
    .yatra-attributes-filter-wrapper .yatra-attributes-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .yatra-attribute-card-header {
        padding: 16px;
        gap: 12px;
    }
    
    .yatra-attribute-icon-wrapper {
        width: 40px;
        height: 40px;
    }
    
    .yatra-attribute-icon-img {
        width: 24px;
        height: 24px;
    }
    
    .yatra-attribute-icon-svg {
        width: 20px;
        height: 20px;
    }
    
    .yatra-attribute-title {
        font-size: 14px;
    }
    
    .yatra-attribute-card-body {
        padding: 16px;
    }
    
    .yatra-attribute-range-inputs {
        flex-direction: column;
        gap: 12px;
    }
    
    .yatra-attribute-range-separator {
        display: none;
    }
}

@media (max-width: 480px) {
    .yatra-attributes-filter-wrapper {
        margin: 16px 0;
    }
    
    .yatra-attributes-filter-header {
        padding: 12px;
    }
    
    .yatra-attributes-filter-title h3 {
        font-size: 16px;
    }
    
    .yatra-attributes-clear-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .yatra-attribute-card-header {
        padding: 12px;
    }
    
    .yatra-attribute-card-body {
        padding: 12px;
    }
    
    .yatra-attribute-option {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .yatra-attribute-option-label {
        font-size: 13px;
    }
    
    .yatra-attribute-input {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Dark mode styles for attribute filters */
.dark .yatra-attribute-item {
    background: var(--yatra-bg-secondary-dark, #1f2937);
    border-color: var(--yatra-border-color-dark, #374151);
}

.dark .yatra-attribute-item:hover {
    background: var(--yatra-bg-card-dark, #1f2937);
    border-color: var(--yatra-primary-color-dark, #60a5fa);
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.15);
}

.dark .yatra-attribute-header {
    border-bottom-color: var(--yatra-border-color-dark, #374151);
}

.dark .yatra-attribute-svg-icon {
    color: var(--yatra-primary-color-dark, #60a5fa);
}

.dark .yatra-attribute-name {
    color: var(--yatra-text-primary-dark, #f9fafb);
}

.dark .yatra-attribute-options .yatra-checkbox-label {
    background: var(--yatra-bg-card-dark, #1f2937);
    border-color: var(--yatra-border-color-dark, #374151);
}

.dark .yatra-attribute-options .yatra-checkbox-label:hover {
    background: var(--yatra-primary-light-dark, var(--yatra-primary-darker, #1e3a8a));
    border-color: var(--yatra-primary-color-dark, #60a5fa);
    box-shadow: 0 1px 4px rgba(96, 165, 250, 0.25);
}

.dark .yatra-attribute-options .yatra-checkbox-label span {
    color: var(--yatra-text-primary-dark, #f9fafb);
}

.dark .yatra-attribute-options .yatra-checkbox-label .yatra-filter-count {
    background: var(--yatra-bg-secondary-dark, #374151);
    color: var(--yatra-text-muted-dark, #9ca3af);
}

.dark .yatra-attribute-options .yatra-price-inputs {
    background: var(--yatra-bg-card-dark, #1f2937);
    border-color: var(--yatra-border-color-dark, #374151);
}

.dark .yatra-attribute-options .yatra-price-input-label {
    color: var(--yatra-text-muted-dark, #9ca3af);
}

.dark .yatra-attribute-options .yatra-price-input {
    background: var(--yatra-bg-card-dark, #1f2937);
    border-color: var(--yatra-border-color-dark, #374151);
    color: var(--yatra-text-primary-dark, #f9fafb);
}

.dark .yatra-attribute-options .yatra-price-input:focus {
    border-color: var(--yatra-primary-color-dark, #60a5fa);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Dark Mode Styles for New Attribute Filter Design */

.dark .yatra-attributes-filter-header {
    background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
    border-color: #374151;
}

.dark .yatra-attributes-filter-icon {
    background: rgba(255, 255, 255, 0.1);
    color: #e9d5ff;
}

.dark .yatra-attributes-filter-title h3 {
    color: #f3f4f6;
}

.dark .yatra-attributes-clear-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f3f4f6;
}

.dark .yatra-attributes-clear-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.dark .yatra-attribute-card {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.dark .yatra-attribute-card:hover {
    border-color: #8b5cf6;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.2);
}

.dark .yatra-attribute-card-header {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-bottom-color: #374151;
}

.dark .yatra-attribute-icon-wrapper {
    background: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark .yatra-attribute-icon-svg {
    color: #a78bfa;
}

.dark .yatra-attribute-title {
    color: #f3f4f6;
}

.dark .yatra-attribute-type {
    color: #9ca3af;
}


.dark .yatra-attribute-option {
    background: #374151;
    border-color: #4b5563;
}

.dark .yatra-attribute-option:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.dark .yatra-attribute-option-indicator {
    background: #1f2937;
    border-color: #6b7280;
}

.dark .yatra-attribute-option input[type="checkbox"]:checked + .yatra-attribute-option-indicator {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

.dark .yatra-attribute-option-label {
    color: #e5e7eb;
}

.dark .yatra-attribute-range-inputs {
    background: #374151;
    border-color: #4b5563;
}

.dark .yatra-attribute-input-label {
    color: #9ca3af;
}

.dark .yatra-attribute-input {
    background: #1f2937;
    border-color: #4b5563;
    color: #f3f4f6;
}

.dark .yatra-attribute-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.dark .yatra-attribute-range-separator {
    color: #6b7280;
}

/* End of Attribute Filter Styles */


/* ============================================
   ITINERARY SECTION STYLES
   ============================================ */

/* Empty State */
.yatra-empty-itinerary {
    text-align: left;
    padding: 32px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.yatra-trip-section#itinerary .yatra-empty-itinerary {
    text-align: left;
}

.yatra-empty-state-icon {
    margin-bottom: 16px;
    color: #6b7280;
}

.yatra-empty-state-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
    text-align: left;
}

.yatra-empty-state-description {
    color: #6b7280;
    max-width: none;
    margin: 0;
    line-height: 1.6;
    text-align: left;
}

/* Gallery Styles - Itinerary Specific */
.yatra-entry-gallery {
    margin-top: 20px;
}

.yatra-gallery-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}

.yatra-gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    width: 100%;
}

.yatra-gallery-item-link {
    display: block;
    text-decoration: none;
}

.yatra-gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.2s ease;
    background: #f3f4f6;
}

.yatra-gallery-item:hover {
    opacity: 0.8;
}

.yatra-media-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.yatra-media-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Itinerary Specific Overlay Styles */
.yatra-entry-gallery .yatra-media-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.2s ease;
}

.yatra-entry-gallery .yatra-media-overlay:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Smaller YouTube button for itinerary gallery - same as hero */
.yatra-entry-gallery .yatra-youtube-play-button svg {
    width: 24px !important;
    height: 24px !important;
}

.yatra-entry-gallery .yatra-youtube-play-button svg circle {
    fill: rgba(255, 0, 0, 0.9) !important;
    stroke: white !important;
    stroke-width: 1px !important;
}

.yatra-entry-gallery .yatra-youtube-play-button svg path {
    fill: white !important;
}

/* Remove separate video section - videos now in gallery */
.yatra-entry-video {
    display: none;
}


/* Responsive styles */
@media (max-width: 768px) {
    .yatra-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        width: 100%;
    }
    
    .yatra-entry-gallery .yatra-media-overlay {
        width: 12px;
        height: 12px;
    }
    
    .yatra-entry-gallery .yatra-youtube-play-button svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .yatra-entry-gallery .yatra-youtube-play-button svg circle {
        fill: rgba(255, 0, 0, 0.9) !important;
        stroke: white !important;
        stroke-width: 0.5px !important;
    }
    
    .yatra-entry-gallery .yatra-youtube-play-button svg path {
        fill: white !important;
    }
}

@media (max-width: 480px) {
    .yatra-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        width: 100%;
    }
    
    .yatra-entry-gallery .yatra-media-overlay {
        width: 10px;
        height: 10px;
    }
    
    .yatra-entry-gallery .yatra-youtube-play-button svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    .yatra-entry-gallery .yatra-youtube-play-button svg circle {
        fill: rgba(255, 0, 0, 0.9) !important;
        stroke: white !important;
        stroke-width: 0.5px !important;
    }
    
    .yatra-entry-gallery .yatra-youtube-play-button svg path {
        fill: white !important;
    }
}


/* Responsive styles */
@media (max-width: 768px) {
    .yatra-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    
    .yatra-play-overlay {
        width: 40px;
        height: 40px;
    }
}

/* Trip Details Grid Styles */
.yatra-trip-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.yatra-detail-item {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.yatra-detail-item:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    transform: translateY(-2px);
}

.yatra-detail-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
    margin-bottom: 4px;
    flex-shrink: 0;
    min-width: 140px;
}

.yatra-detail-icon {
    width: 16px;
    height: 16px;
    color: #6b7280;
}

.yatra-detail-value {
    color: #111827;
    font-size: 0.95rem;
    line-height: 1.5;
    flex: 1;
}

.yatra-no-details {
    text-align: center;
    padding: 48px 24px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-top: 24px;
}

.yatra-no-details p {
    color: #6b7280;
    font-size: 1rem;
    margin: 0;
}

/* Responsive styles for trip details */
@media (max-width: 768px) {
    .yatra-trip-details-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 16px;
    }
    
    .yatra-detail-item {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .yatra-detail-label {
        min-width: auto;
        margin-bottom: 8px;
    }
    
    .yatra-detail-value {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .yatra-trip-details-grid {
        gap: 12px;
    }
    
    .yatra-detail-item {
        padding: 10px;
    }
    
    .yatra-no-details {
        padding: 32px 16px;
    }
}

/* Sticky Navigation Icon Styles */
.yatra-sticky-nav-icon {
    width: 18px;
    height: 18px;
    color: #6b7280;
    transition: color 0.2s ease;
}

.yatra-sticky-nav-item:hover .yatra-sticky-nav-icon {
    color: var(--yatra-primary, #3b82f6);
}

.yatra-sticky-nav-item.active .yatra-sticky-nav-icon {
    color: var(--yatra-primary, #3b82f6);
}

/* Hero Season Styles */
.yatra-hero-season {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 15px;
    font-weight: 500;
}

/* FAQ Toggle Button Styles */
.faq-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq-toggle-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

.faq-toggle-btn .toggle-icon {
    width: 16px;
    height: 16px;
    color: #6b7280;
}

.faq-toggle-btn .toggle-text {
    font-size: 14px;
    font-weight: 500;
}

/* ============================================
   SIMILAR ADVENTURES SECTION
   Custom styling for similar trips carousel cards
   ============================================ */

/* Similar Trips Card Container */
.yatra-similar-trip-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.yatra-similar-trip-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Similar Trips Image Section */
.yatra-similar-trip-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.yatra-similar-trip-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.yatra-similar-trip-card:hover .yatra-similar-trip-image img {
    transform: scale(1.05);
}

.yatra-similar-image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Similar Trips Discount Badge */
.yatra-similar-discount-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ef4444;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* Similar Trips Favorite Button */
.yatra-similar-favorite-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.yatra-similar-favorite-btn:hover {
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.yatra-similar-favorite-btn svg {
    color: #6b7280;
    transition: color 0.3s ease;
}

.yatra-similar-favorite-btn:hover svg {
    color: #ef4444;
}

/* Similar Trips Difficulty Overlay */
.yatra-similar-difficulty-overlay {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 5;
    backdrop-filter: blur(4px);
}

.similar-difficulty-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.similar-difficulty-icon.fa-solid,
.similar-difficulty-icon.fa-regular {
    width: auto;
    height: auto;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Similar Trips Content Section */
.yatra-similar-trip-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Similar Trips Destinations */
.yatra-similar-destinations {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #6b7280;
}

.similar-location-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #9ca3af;
}

.similar-destination-link {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.3s ease;
}

.similar-destination-link:hover {
    color: var(--yatra-primary, #3b82f6);
}

/* Similar Trips Title */
.yatra-similar-trip-title {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #111827;
}

.yatra-similar-title-link {
    color: #111827;
    text-decoration: none;
    transition: color 0.3s ease;
}

.yatra-similar-title-link:hover {
    color: var(--yatra-primary, #3b82f6);
}

/* Similar Trips Stats */
.yatra-similar-trip-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.yatra-similar-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.similar-stat-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #9ca3af;
}

/* Similar Trips Categories */
.yatra-similar-categories {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.yatra-similar-category-tag {
    background: #f3f4f6;
    color: #374151;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.yatra-similar-category-tag:hover {
    background: #e5e7eb;
    color: #111827;
}

/* Similar Trips Footer */
.yatra-similar-trip-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Similar Trips Price — compact single-line row, baseline-aligned */
.yatra-similar-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.yatra-similar-trip-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 2px;
    line-height: 1.25;
    color: #111827;
}

.yatra-similar-price-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.yatra-similar-price-amount {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.yatra-similar-price-contact {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.yatra-similar-original-price {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    text-decoration: line-through;
    margin-left: 0;
}

/* Similar Trips View Button */
.yatra-similar-view-btn {
    background: var(--yatra-primary, #3b82f6);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.yatra-similar-view-btn:hover {
    background: var(--yatra-primary-dark, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* ============================================
   SIMILAR ADVENTURES RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .yatra-similar-trip-card {
        margin-bottom: 16px;
    }
    
    .yatra-similar-trip-image {
        height: 160px;
    }
    
    .yatra-similar-trip-content {
        padding: 16px;
    }
    
    .yatra-similar-trip-title {
        font-size: 16px;
    }
    
    .yatra-similar-trip-stats {
        gap: 12px;
    }
    
    .yatra-similar-trip-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .yatra-similar-price {
        width: 100%;
    }
    
    .yatra-similar-view-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .yatra-similar-trip-image {
        height: 140px;
    }
    
    .yatra-similar-trip-content {
        padding: 12px;
    }
    
    .yatra-similar-trip-title {
        font-size: 15px;
        margin-bottom: 12px;
    }
    
    .yatra-similar-trip-stats {
        gap: 8px;
        font-size: 12px;
    }
    
    .yatra-similar-categories {
        margin-bottom: 16px;
    }
}

/* ============================================
   DOWNLOADS SECTION
   List view with download icons
   ============================================ */

/* Downloads Container */
.yatra-downloads-container {
    margin-top: 24px;
}

.yatra-downloads-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

/* Download Item - List View */
.yatra-download-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.yatra-download-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db;
}

/* Download Icon Section */
.yatra-download-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    flex-shrink: 0;
}

.yatra-download-file-icon {
    width: 28px;
    height: 28px;
    color: white;
}

/* Download Content */
.yatra-download-content {
    flex: 1;
    min-width: 0;
}

.yatra-download-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #111827;
}

.yatra-download-description {
    margin: 0 0 12px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}

/* Download Meta */
.yatra-download-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #9ca3af;
}

.yatra-download-file-size,
.yatra-download-file-type {
    background: #f3f4f6;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
}

/* Download Action */
.yatra-download-action {
    flex-shrink: 0;
    margin-left: auto;
}

.yatra-download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--yatra-primary, #3b82f6);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.yatra-download-btn:hover {
    background: var(--yatra-primary-dark, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    color: white;
}

.yatra-download-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.yatra-download-btn-disabled {
    background: #9ca3af;
    color: #6b7280;
    cursor: not-allowed;
    opacity: 0.7;
}

.yatra-download-btn-disabled:hover {
    background: #9ca3af;
    transform: none;
    box-shadow: none;
    color: #6b7280;
}

/* Responsive Design */
@media (max-width: 768px) {
    .yatra-downloads-list {
        gap: 12px;
    }
    
    .yatra-download-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    
    .yatra-download-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
    }
    
    .yatra-download-file-icon {
        width: 24px;
        height: 24px;
    }
    
    .yatra-download-action {
        margin-left: 0;
        width: 100%;
    }
    
    .yatra-download-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .yatra-download-item {
        padding: 12px;
    }
    
    .yatra-download-title {
        font-size: 15px;
    }
    
    .yatra-download-description {
        font-size: 13px;
    }
    
    .yatra-download-meta {
        font-size: 11px;
        gap: 8px;
    }
}

/* End of Downloads Section Styles */

/* ============================================
   SINGLE TRIP — Tab sections (moved from partials; token-based spacing)
   ============================================ */

/* --- What makes this trip special --- */
#what-makes-special .yatra-trip-special-container {
    margin: 0 auto;
}

#what-makes-special .yatra-trip-special-content {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 16px;
    padding: clamp(var(--yatra-container-padding), 5vw, 2.5rem);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

#what-makes-special .yatra-trip-special-content::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 70%);
    animation: yatra-special-float 6s ease-in-out infinite;
}

@keyframes yatra-special-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

#what-makes-special .yatra-special-features {
    position: relative;
    z-index: 1;
}

#what-makes-special .yatra-special-feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--yatra-small-gap);
    margin-bottom: var(--yatra-element-gap);
    padding: var(--yatra-small-gap);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

#what-makes-special .yatra-special-feature-item:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(251, 191, 36, 0.2);
}

#what-makes-special .yatra-special-feature-item:last-child {
    margin-bottom: 0;
}

#what-makes-special .yatra-special-feature-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #f59e0b;
    margin-top: 2px;
}

#what-makes-special .yatra-special-feature-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #78350f;
    font-weight: 500;
}

#what-makes-special .yatra-special-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--yatra-mini-gap);
    margin-top: var(--yatra-element-gap);
    padding: var(--yatra-tiny-gap) var(--yatra-element-gap);
    background: #f59e0b;
    color: #fff;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.3);
}

#what-makes-special .yatra-badge-icon {
    width: 16px;
    height: 16px;
}

#what-makes-special .yatra-special-features .yatra-no-content {
    color: #92400e;
    font-style: italic;
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
}

@media (prefers-color-scheme: dark) {
    #what-makes-special .yatra-trip-special-content {
        background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    }

    #what-makes-special .yatra-special-feature-item {
        background: rgba(30, 41, 59, 0.7);
    }

    #what-makes-special .yatra-special-feature-item:hover {
        background: rgba(30, 41, 59, 0.9);
    }

    #what-makes-special .yatra-special-feature-text {
        color: #fbbf24;
    }

    #what-makes-special .yatra-special-badge {
        background: #f59e0b;
        color: #451a03;
    }

    #what-makes-special .yatra-special-features .yatra-no-content {
        color: #fbbf24;
        background: rgba(30, 41, 59, 0.5);
    }
}

@media (max-width: 768px) {
    #what-makes-special .yatra-special-feature-item {
        padding: var(--yatra-tiny-gap);
        gap: var(--yatra-tiny-gap);
    }

    #what-makes-special .yatra-special-feature-icon {
        width: 20px;
        height: 20px;
    }

    #what-makes-special .yatra-special-feature-text {
        font-size: 0.9rem;
    }
}

/* --- Trip story --- */
#trip-story .yatra-trip-story-container {
    margin: 0 auto;
}

#trip-story .yatra-trip-story-content {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: clamp(var(--yatra-container-padding), 5vw, 2.5rem);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

#trip-story .yatra-trip-story-content::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: var(--yatra-element-gap);
    font-size: 120px;
    color: #e2e8f0;
    font-family: Georgia, serif;
    z-index: 0;
}

#trip-story .yatra-trip-story-text {
    position: relative;
    z-index: 1;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #475569;
}

#trip-story .yatra-trip-story-text p {
    margin-bottom: 1.5rem;
}

#trip-story .yatra-trip-story-text p:last-child {
    margin-bottom: 0;
}

#trip-story .yatra-trip-story-text h1,
#trip-story .yatra-trip-story-text h2,
#trip-story .yatra-trip-story-text h3 {
    color: #1e293b;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#trip-story .yatra-trip-story-text h1 { font-size: 1.875rem; }
#trip-story .yatra-trip-story-text h2 { font-size: 1.5rem; }
#trip-story .yatra-trip-story-text h3 { font-size: 1.25rem; }

#trip-story .yatra-trip-story-text ul,
#trip-story .yatra-trip-story-text ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

#trip-story .yatra-trip-story-text li {
    margin-bottom: 0.5rem;
    color: #475569;
}

#trip-story .yatra-trip-story-text blockquote {
    border-left: 4px solid var(--yatra-primary, #3b82f6);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #64748b;
}

#trip-story .yatra-trip-story-text strong {
    color: #1e293b;
    font-weight: 600;
}

#trip-story .yatra-trip-story-text em {
    color: #64748b;
    font-style: italic;
}

#trip-story .yatra-trip-story-meta {
    margin-top: var(--yatra-element-gap);
    text-align: center;
}

#trip-story .yatra-story-highlight {
    display: inline-flex;
    align-items: center;
    gap: var(--yatra-mini-gap);
    padding: var(--yatra-mini-gap) var(--yatra-small-gap);
    background: #fef3c7;
    border-radius: 20px;
    color: #92400e;
    font-size: 0.875rem;
    font-weight: 500;
}

#trip-story .yatra-story-icon {
    width: 16px;
    height: 16px;
}

#trip-story .yatra-trip-story-text > .yatra-no-content {
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

@media (prefers-color-scheme: dark) {
    #trip-story .yatra-trip-story-content {
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    }

    #trip-story .yatra-trip-story-content::before {
        color: #475569;
    }

    #trip-story .yatra-trip-story-text {
        color: #cbd5e1;
    }

    #trip-story .yatra-trip-story-text h1,
    #trip-story .yatra-trip-story-text h2,
    #trip-story .yatra-trip-story-text h3 {
        color: #f8fafc;
    }

    #trip-story .yatra-trip-story-text li {
        color: #cbd5e1;
    }

    #trip-story .yatra-trip-story-text blockquote {
        color: #94a3b8;
        border-left-color: #60a5fa;
    }

    #trip-story .yatra-trip-story-text strong {
        color: #f8fafc;
    }

    #trip-story .yatra-trip-story-text em {
        color: #94a3b8;
    }

    #trip-story .yatra-story-highlight {
        background: #451a03;
        color: #fbbf24;
    }

    #trip-story .yatra-trip-story-text > .yatra-no-content {
        color: #64748b;
    }
}

@media (max-width: 768px) {
    #trip-story .yatra-trip-story-text {
        font-size: 1rem;
    }

    #trip-story .yatra-trip-story-content::before {
        font-size: 80px;
        top: -10px;
        left: var(--yatra-tiny-gap);
    }
}

/* --- Testimonials tab --- */
.yatra-testimonials-content {
    margin-top: var(--yatra-section-gap);
}

.yatra-testimonial-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.yatra-testimonials-empty {
    text-align: center;
    padding: clamp(3rem, 10vw, 5rem) var(--yatra-container-padding);
    background: #f8fafc;
    border-radius: 16px;
    border: 2px dashed #e2e8f0;
}

.yatra-testimonials-empty-icon {
    margin-bottom: var(--yatra-element-gap);
}

.yatra-testimonials-empty-svg {
    width: 80px;
    height: 80px;
    color: #cbd5e1;
    margin: 0 auto;
}

.yatra-testimonials-empty-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: var(--yatra-tiny-gap);
}

.yatra-testimonials-empty-text {
    color: #64748b;
    margin-bottom: var(--yatra-section-gap);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.yatra-testimonials-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--yatra-mini-gap);
    background: var(--yatra-primary, #3b82f6);
    color: #fff;
    text-decoration: none;
    padding: var(--yatra-tiny-gap) var(--yatra-element-gap);
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.yatra-testimonials-empty-cta:hover {
    background: var(--yatra-primary-dark, #2563eb);
    color: #fff;
}

@media (prefers-color-scheme: dark) {
    .yatra-testimonials-empty {
        background: #1e293b;
        border-color: #334155;
    }

    .yatra-testimonials-empty-title {
        color: #f8fafc;
    }

    .yatra-testimonials-empty-text {
        color: #cbd5e1;
    }
}

@media (max-width: 768px) {
    .yatra-testimonials-empty {
        padding: clamp(2.5rem, 8vw, 3.75rem) var(--yatra-container-padding);
    }
}

/* --- FAQ accordion --- */
#faq .faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--yatra-element-gap);
    flex-wrap: wrap;
    gap: var(--yatra-small-gap);
}

#faq .faq-controls {
    display: flex;
    gap: var(--yatra-mini-gap);
}

#faq .faq-toggle-btn,
#faq .faq-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--yatra-tiny-gap);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#faq .faq-toggle-btn:hover,
#faq .faq-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

#faq .faq-toggle-btn svg,
#faq .faq-btn svg {
    flex-shrink: 0;
}

#faq .faq-btn-arrow {
    color: #9ca3af;
    transition: transform 0.3s ease;
}

#faq .faq-container {
    margin: 0 auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

#faq .faq-item {
    border-bottom: 1px solid #e5e7eb;
}

#faq .faq-item:last-child {
    border-bottom: none;
}

#faq .faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: var(--yatra-small-gap) var(--yatra-element-gap);
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

#faq .faq-question:hover {
    background: #f9fafb;
}

#faq .faq-item.active .faq-question {
    background: #f9fafb;
    font-weight: 600;
}

#faq .faq-arrow {
    color: #9ca3af;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: var(--yatra-tiny-gap);
}

#faq .faq-item.active .faq-arrow {
    color: #6b7280;
    transform: rotate(180deg);
}

#faq .faq-toggle-btn .collapse-icon {
    display: none;
}

#faq .faq-toggle-btn.is-all-expanded .expand-icon {
    display: none;
}

#faq .faq-toggle-btn.is-all-expanded .collapse-icon {
    display: block;
}

#faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: #f9fafb;
    padding: 0 var(--yatra-element-gap);
    color: #6b7280;
    line-height: 1.5;
    font-size: 14px;
}

#faq .faq-item.active .faq-answer {
    max-height: min(4000px, 200vh);
    padding: 0 var(--yatra-element-gap) var(--yatra-small-gap) var(--yatra-element-gap);
}

#faq .faq-answer p {
    margin: 0 0 var(--yatra-mini-gap) 0;
}

#faq .faq-answer p:last-child {
    margin-bottom: 0;
}

#faq .faq-answer ul,
#faq .faq-answer ol {
    margin: var(--yatra-mini-gap) 0;
    padding-left: var(--yatra-small-gap);
}

#faq .faq-answer li {
    margin-bottom: var(--yatra-micro-gap);
}

@media (max-width: 768px) {
    #faq .faq-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--yatra-tiny-gap);
    }

    #faq .faq-controls {
        width: 100%;
        justify-content: flex-start;
    }

    #faq .faq-question {
        padding: 14px var(--yatra-small-gap);
        font-size: 14px;
    }

    #faq .faq-answer {
        font-size: 13px;
    }

    #faq .faq-item.active .faq-answer {
        padding: 0 var(--yatra-small-gap) 14px var(--yatra-small-gap);
    }
}

/* ============================================
   MOBILE-INPUT HYGIENE (single-trip booking widget)
   ============================================
   Applied last so it wins specificity ties against earlier desktop
   rules without needing !important. Two concerns:

   1. iOS Safari auto-zoom: any <input>/<select>/<textarea> with
      computed font-size < 16px triggers a 1.25x viewport zoom on
      focus. The trip page's sticky booking widget often contains
      a date / traveler / discount field — zoom + scroll-jump
      breaks the user mid-typing.

   2. Tap-target comfort: bump the rendered control height to ~48px
      so thumbs in portrait have room. Apple HIG minimum is 44pt;
      48dp (Material) is more forgiving and matches the public
      booking form (booking.css).
   ============================================ */
@media (max-width: 768px) {
    .yatra-trip-sidebar input,
    .yatra-trip-sidebar select,
    .yatra-trip-sidebar textarea,
    .yatra-booking-card input,
    .yatra-booking-card select,
    .yatra-booking-card textarea {
        font-size: 16px;
        min-height: 48px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .yatra-trip-sidebar textarea,
    .yatra-booking-card textarea {
        min-height: 96px;
    }

    /*
     * The "Book now" / "Reserve" CTA in the booking card needs the
     * same comfortable size. Buttons inside the card sometimes
     * inherit smaller padding from utility classes.
     */
    .yatra-booking-card button,
    .yatra-booking-card .yatra-book-now-btn,
    .yatra-booking-card .yatra-trip-cta {
        min-height: 48px;
        font-size: 16px;
    }
}