:root {
    --primary-color: #1d1d1f;
    --text-color: #1d1d1f;
    --text-secondary: #86868b;
    --bg-color: #ffffff;
    --bg-gray: #f5f5f7;
    --border-color: #d2d2d7;
    --nav-height: 48px;
    --border-radius: 18px;
    --transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* WeChat & iOS Compatibility Reset */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Enhanced Mobile Reset for WeChat */
button, input, select, textarea {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border: none;
    background: transparent;
    font-family: inherit;
}

/* Flexbox collapsing fix */
.flex-child-fix {
    min-width: 0;
}

body {
    -webkit-text-size-adjust: 100%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 100px 0;
}

.bg-gray {
    background-color: var(--bg-gray);
}

.section-title {
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: -0.015em;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 980px;
    font-size: 17px;
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: #000000;
    transform: scale(1.02);
}

.btn-link {
    color: var(--primary-color); /* Hero link should be dark on light bg */
    background: transparent;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn-block {
    display: block;
    width: 100%;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.header-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    height: 100%;
}

.logo {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.nav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px;
}

.nav-list a {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.8;
}

.nav-list a:hover {
    opacity: 1;
    color: var(--primary-color);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    width: 20px;
    height: 12px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--text-color);
    transition: var(--transition);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    height: 0;
    background: white;
    overflow: hidden;
    transition: height 0.4s ease;
    z-index: 999;
}

.mobile-menu.active {
    height: calc(100vh - var(--nav-height));
}

.mobile-nav-list {
    padding: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    /* gap: 20px; - Removed for compatibility */
}

.mobile-nav-list > li {
    margin-bottom: 20px;
}

.mobile-nav-list > li:last-child {
    margin-bottom: 0;
}

.mobile-nav-list a {
    font-size: 24px;
    font-weight: 600;
}

/* Hero */
.hero {
    position: relative;
    padding-top: 120px;
    padding-bottom: 60px;
    text-align: center;
    overflow: hidden;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.hero-title {
    font-size: 56px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: 24px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    font-weight: 400;
}


.hero-cta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    gap: 20px;
    margin-top: 30px;
}

.hero-image-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.hero-image {
    width: 100%;
    height: auto;
    transition: transform 1s ease;
}

.hero:hover .hero-image {
    transform: scale(1.02);
}

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Highlights */
.highlights-scroll-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: auto;
    /* gap: 30px; - Removed for compatibility */
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    -webkit-scroll-snap-type: x mandatory;
    /* Hide scrollbar for cleaner look but allow scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Add margin to cards instead of gap for older WebKit support */
.highlights-scroll-container > .highlight-card {
    margin-right: 20px;
    /* Responsive width for mobile */
    min-width: 85vw; 
    width: 85vw;
}

@media (min-width: 768px) {
    .highlights-scroll-container > .highlight-card {
        min-width: 350px;
        width: 350px;
        margin-right: 30px;
    }
}

.highlights-scroll-container > .highlight-card:last-child {
    margin-right: 0;
}

.highlights-wrapper {
    position: relative;
    /* Removed display: flex; align-items: center; which was for arrows alignment */
    /* Wait, we need it back relative, but arrows are absolute */
}

.scroll-arrow {
    position: absolute;
    top: calc(50% - 10px); /* Moved up by 10px as requested */
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    cursor: pointer;
    z-index: 100;
    font-size: 20px;
    color: #1d1d1f;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 0;
    /* Removed pointer-events: none to prevent hover flickering issues when button is outside container */
}

/* On mobile/tablet, show arrows if user has a mouse (rare but possible), or just rely on touch.
   Actually, standard behavior is to hide arrows on touch devices and show on desktop.
   We will show arrows on devices larger than 768px (tablets landscape and desktops) PERMANENTLY.
   This removes all flickering caused by hover states. */

@media (min-width: 768px) {
    .scroll-arrow {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Responsive adjustments for arrows to prevent clipping on smaller desktop screens */
@media (max-width: 1300px) {
    .scroll-left {
        left: -20px !important;
    }
    .scroll-right {
        right: -20px !important;
    }
}

.scroll-arrow:hover {
    background: #1d1d1f;
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    border-color: #1d1d1f;
}

.scroll-arrow.disabled {
    opacity: 0.3 !important; /* Dimmed instead of hidden to prevent flickering/confusion */
    pointer-events: none !important;
    cursor: default;
}

/* Invisible bridge to prevent hover loss when moving from container to outside arrow */
.scroll-left::before {
    content: '';
    position: absolute;
    left: 100%;
    top: -20px;
    bottom: -20px;
    width: 60px; /* Adjusted width */
    background: transparent;
}

.scroll-right::before {
    content: '';
    position: absolute;
    right: 100%;
    top: -20px;
    bottom: -20px;
    width: 60px; /* Adjusted width */
    background: transparent;
}

.scroll-left {
    left: -60px;
}

.scroll-right {
    right: -60px;
}

.highlights-scroll-container::-webkit-scrollbar {
    display: none; /* WebKit */
}

.highlight-card {
    min-width: 350px;
    flex: 0 0 auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    scroll-snap-align: start;
    -webkit-scroll-snap-align: start;
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: var(--transition);
}

.highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.highlight-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.card-content {
    padding: 30px;
}

.card-content h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.card-content p {
    color: var(--text-secondary);
}

/* Map Section */
.map-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Mobile spacing optimizations */
@media (max-width: 768px) {
    .section {
        padding: 40px 0; /* Reduced from 100px for all sections on mobile */
    }
    
    .section-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    /* Specific tighter gap between highlights and map */
    #highlights {
        padding-bottom: 20px;
    }
    #map {
        padding-top: 20px;
    }
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.map-container:hover .map-image {
    transform: scale(1.02);
}

/* Itinerary - Modern Travel Style */
.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Vertical Line */
.timeline::before {
    display: block;
    content: '';
    position: absolute;
    left: 95px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e0e0e0;
}

.timeline-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 50px;
    margin-bottom: 60px;
    position: relative;
}

.timeline-date {
    position: relative;
    width: 80px;
    text-align: right;
    padding-top: 15px;
    z-index: 1;
    display: block;
    border: none;
    background: transparent;
}

.day-label {
    font-size: 14px;
    color: #999;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.day-number {
    font-size: 36px;
    font-weight: 800;
    color: #1d1d1f;
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: -1px;
    line-height: 1;
}

/* Dot on the line */
.timeline-item::after {
    content: '';
    position: absolute;
    left: 88px;
    top: 30px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 4px solid #1d1d1f;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 4px #fff;
}

.timeline-content {
    flex-grow: 1;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #f0f0f0;
    padding-bottom: 20px;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.timeline-text {
    padding: 30px 30px 10px 30px;
}

.timeline-text h3 {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 700;
    color: #264653;
}

.timeline-text p {
    color: #555;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.7;
}

/* Timeline Gallery - Flexbox Fallback for WeChat/Old Chrome */
.timeline-gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px; /* Negative margin to offset padding */
    padding: 0 30px 30px 30px;
}

.timeline-gallery img {
    width: calc(33.333% - 10px); /* 3 columns with gap */
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
    cursor: zoom-in;
    box-shadow: none;
    margin: 5px; /* Simulated gap */
    display: block;
}

/* Reset special grid layout */
.timeline-gallery img:nth-child(1) {
    /* No special handling needed for flex */
}

.timeline-gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 10;
}

/* Timeline Hotels */
.timeline-hotels {
    padding: 0 24px 24px 24px;
    display: flex;
    flex-direction: column; /* Stack categories vertically */
    gap: 15px;
}

.hotel-category {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* gap: 10px; - Replaced with margin for compatibility */
}

.hotel-category > * {
    margin-right: 10px;
    margin-bottom: 5px;
}

.hotel-category > *:last-child {
    margin-right: 0;
}

.hotel-label {
    font-size: 13px;
    color: #86868b;
    font-weight: 600; /* Slightly bolder */
    min-width: 70px; /* Align labels */
}

/* Hotel Tag Update */
.hotel-tag {
    font-size: 12px; /* Reduced size */
    background: #1d1d1f; /* Primary Color */
    color: #ffffff;
    padding: 6px 12px; /* Reduced padding for compactness */
    border-radius: 30px; /* More rounded pill shape */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    border: 1px solid rgba(255,255,255,0.1); /* Subtle border */
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    /* gap: 8px; Removed gap as icon is gone */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Stronger shadow */
    letter-spacing: 0.5px;
}

/* Icon removed as requested */
/* .hotel-tag::before { ... } */

/* Arrow removed as requested */
/* .hotel-tag::after { ... } */

.hotel-tag:hover {
    background: #000000;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    border-color: rgba(255,255,255,0.3);
}

/* Arrow hover animation removed */
/* .hotel-tag:hover::after { ... } */

.hotel-tag:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background: white;
    width: 90%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    transform: scale(0.9);
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.modal-overlay.active .modal-container {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #1d1d1f;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    transition: background 0.2s;
    z-index: 10;
}

.modal-close:hover {
    background: rgba(0,0,0,0.2);
}

.modal-header {
    padding: 24px 24px 10px 24px;
}

.modal-header h3 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.modal-body {
    padding: 0 24px 24px 24px;
}

.modal-main-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
    transition: opacity 0.3s ease;
}

.modal-thumbnails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 5px; /* For scrollbar space if needed */
}

.modal-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
    transition: all 0.2s;
}

.modal-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-thumbnail.active {
    border-color: #1d1d1f;
    opacity: 1;
}

.modal-thumbnail:hover {
    opacity: 0.8;
}

.modal-body p {
    font-size: 15px;
    line-height: 1.6;
    color: #424245;
}

/* Badge Update */
.badge {
    display: inline-block;
    padding: 6px 12px;
    background: #e0f2f1; /* Light Teal */
    color: #00695c; /* Dark Teal */
    border-radius: 6px; /* Rounded rect */
    font-size: 13px;
    margin-right: 10px;
    font-weight: 600;
}



/* Accommodation */
.hotel-showcase {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    /* gap: 60px; */
}

.hotel-showcase > * {
    flex: 1;
    margin: 0 30px; /* 60px total gap */
}

.hotel-showcase > *:first-child {
    margin-left: 0;
}

.hotel-showcase > *:last-child {
    margin-right: 0;
}

.hotel-info h3 {
    font-size: 32px;
    margin-bottom: 20px;
}

.hotel-info p {
    color: var(--text-secondary);
    font-size: 18px;
    margin-bottom: 30px;
}

.feature-list li {
    margin-bottom: 10px;
    padding-left: 24px;
    position: relative;
}

.feature-list li::before {
    content: '•';
    color: var(--primary-color);
    position: absolute;
    left: 0;
    font-size: 20px;
    line-height: 1;
}

.hotel-image img {
    border-radius: var(--border-radius);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Inclusions */
.grid-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* gap: 30px; */
}

.grid-2 > * {
    flex: 1;
    margin: 0 15px; /* 30px total gap */
}

.grid-2 > *:first-child {
    margin-left: 0;
}

.grid-2 > *:last-child {
    margin-right: 0;
}

.list-box {
    background: white;
    padding: 40px;
    border-radius: var(--border-radius);
}

.list-box h3 {
    font-size: 24px;
    margin-bottom: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    gap: 10px;
}

.list-box.include h3 { color: #10b981; }
.list-box.exclude h3 { color: #ef4444; }

.list-box ul li {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
    color: var(--text-secondary);
}

.list-box ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d2d2d7;
}

/* Transport */
.transport-content {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.transport-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.transport-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.4); /* Increased transparency from 0.6 to 0.4 */
    backdrop-filter: blur(10px);
    color: white;
    padding: 40px;
}

/* Accordion */
.accordion {
    max-width: 800px;
    margin: 0 auto;
}

.accordion-item {
    border-bottom: 1px solid var(--border-color);
}

.accordion-header {
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    text-align: left;
    font-size: 20px;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out, visibility 0s 0.3s;
    color: var(--text-secondary);
    line-height: 1.6;
    will-change: grid-template-rows;
    overflow: hidden;
    visibility: hidden;
}

.accordion-body > div {
    overflow: hidden;
    min-height: 0;
}

.accordion-body > div > *:last-child {
    margin-bottom: 24px;
}

.accordion-item.active .accordion-body {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.3s ease-out, visibility 0s 0s;
}

.arrow {
    transition: transform 0.3s;
}

.accordion-item.active .arrow {
    transform: rotate(45deg);
}

/* Pricing Tabs */
.pricing-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /* gap: 15px; - Removed for compatibility */
    margin-bottom: 40px;
}

.pricing-tabs .tab-btn {
    margin: 0 7.5px;
}

.tab-btn {
    padding: 10px 30px;
    border-radius: 980px;
    border: none;
    background: #e5e5ea;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.tab-btn.active {
    background: var(--text-color);
    color: white;
}

.tab-btn:hover:not(.active) {
    background: #d1d1d6;
}

/* Date Grid */
.date-grid {
    display: none;
    /* grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); */
    /* gap: 20px; */
    animation: fadeIn 0.5s ease;
}

.date-grid.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    justify-content: flex-start; /* Align items to the start (left) */
    -webkit-box-pack: start;
    -ms-flex-pack: start;
}

.date-grid > .date-card {
    width: calc(25% - 20px); /* 4 columns for desktop */
    margin: 10px;
    flex-grow: 0; /* Prevent single items from stretching */
    min-width: 260px; /* Responsive wrapping */
}

/* Tablet/Small Desktop adjustments */
@media (max-width: 1100px) {
    .date-grid > .date-card {
        width: calc(33.333% - 20px); /* 3 columns */
    }
}

@media (max-width: 850px) {
    .date-grid > .date-card {
        width: calc(50% - 20px); /* 2 columns */
    }
}

@media (max-width: 600px) {
    .date-grid > .date-card {
        width: calc(100% - 20px); /* 1 column */
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Date Card */
.date-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    gap: 20px;
    transition: var(--transition);
    border: 1px solid transparent;
}

.date-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: var(--primary-color);
}

.card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    border-bottom: 1px solid #f5f5f7;
    padding-bottom: 15px;
}

.card-header .date {
    font-size: 18px;
    font-weight: 600;
}

.card-header .weekday {
    color: var(--text-secondary);
    font-size: 14px;
}

.price-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    /* align-items: center;  - Changed to left align for rows */
    -webkit-box-align: stretch; /* Stretch to fill width */
    -ms-flex-align: stretch;
    gap: 10px; /* Space between rows */
    padding: 10px 0;
}

.price-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
}

.price-row:last-of-type {
    border-bottom: none;
}

.price-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.price-section .price {
    font-size: 24px; /* Slightly smaller for dual display */
    font-weight: 700;
    color: var(--text-color);
}

.price-section .tag {
    align-self: center; /* Center the tag below prices */
    margin-top: 5px;
}

.tag {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.tag-hot { background: #fff0f0; color: #ff3b30; }
.tag-warn { background: #fff8e6; color: #ff9500; }
.tag-sale { background: #f5f5f7; color: #1d1d1f; }
.tag-normal { background: #f5f5f7; color: var(--text-secondary); }

.card-footer {
    margin-top: auto;
    text-align: center;
}

.seats {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

/* Pricing Buttons - Black Style */
.pricing-content .btn-primary {
    background-color: #1d1d1f;
    color: white;
}

.pricing-content .btn-primary:hover {
    background-color: #000000;
    transform: scale(1.02);
}

.pricing-content .btn-outline {
    background: transparent;
    border: 1px solid #1d1d1f;
    color: #1d1d1f;
}

.pricing-content .btn-outline:hover {
    background: #1d1d1f;
    color: white;
    transform: scale(1.02);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
}

.btn-outline:hover {
    border-color: var(--text-color);
    background: var(--text-color);
    color: white;
}

.text-center {
    text-align: center;
}

/* About Us */
.about-content {
    max-width: 800px;
    margin: 0 auto;
}

.about-text {
    font-size: 18px;
    line-height: 1.8;
    color: #424245;
    font-weight: 400;
}

/* Footer */
.footer {
    background: #f5f5f7;
    padding: 60px 0 30px;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-logo {
    font-weight: 600;
    font-size: 18px;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    font-size: 12px;
    color: var(--text-secondary);
}

.copyright {
    font-size: 12px;
    color: #999;
}

/* Discount Policy */
.policy-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.policy-card {
    flex: 1;
    min-width: 250px;
    background: #fff;
    padding: 30px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
}

.policy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.policy-icon {
    margin-bottom: 20px;
    color: #1d1d1f; /* Use main text color for minimalist look */
    display: flex;
    justify-content: center;
}

.policy-icon svg {
    stroke-width: 1.2px; /* Thinner stroke for Apple minimalist feel */
    width: 40px;
    height: 40px;
}

.policy-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #1d1d1f;
    font-weight: 600;
}

.policy-card p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .section-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
    
    .nav { display: none; }
    .menu-toggle { display: flex; }
    
    .hero-title { font-size: 40px; }
    .hero-subtitle { font-size: 18px; }
    
    /* Flexbox mobile stacking */
    .grid-2 { 
        flex-direction: column; 
    }

    .grid-2 > * {
        margin: 0 0 30px 0;
    }

    .grid-2 > *:last-child {
        margin-bottom: 0;
    }
    
    .hotel-showcase { 
        flex-direction: column; 
    }

    .hotel-showcase > * {
        margin: 0 0 40px 0;
    }

    .hotel-showcase > *:last-child {
        margin-bottom: 0;
    }

    .hotel-image { order: -1; }
    
    .timeline-item {
        flex-direction: column;
        /* gap: 20px; - Removed for compatibility */
        margin-bottom: 60px;
    }

    .timeline-item > * {
        margin-bottom: 20px;
    }

    .timeline-item > *:last-child {
        margin-bottom: 0;
    }
    
    /* Hide timeline vertical line and dots on mobile */
    .timeline::before,
    .timeline-item::after {
        display: none;
    }
    
    .timeline-date {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; /* Ensure horizontal layout */
        width: 100%;
        flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        align-items: baseline;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        gap: 10px;
        text-align: left;
        padding-top: 0;
        margin-bottom: 5px;
    }
    
    .day-number {
        font-size: 32px;
    }
    
    .timeline-content {
        margin-left: 0;
        width: 100%;
    }

    .timeline-text {
        padding: 20px;
    }

    .timeline-gallery {
        padding: 0 20px 20px 20px;
    }
    
    .transport-img { height: 300px; }

    /* Mobile Hotel Tag Optimization */
    .timeline-hotels {
        padding: 0 15px 15px 15px; /* Reduced padding */
        gap: 10px; /* Reduced gap between categories */
    }

    .hotel-category > * {
        margin-right: 5px; /* Reduced margin */
        margin-bottom: 5px;
    }
    
    .hotel-label {
        width: 100%; /* Label takes full width on very small screens if needed, or just block */
        display: block;
        margin-bottom: 5px;
    }
    
    .hotel-tag {
        padding: 4px 10px; /* Even smaller on mobile */
        font-size: 11px;
    }
}