/* ==========================================================================
   RESORT DETAIL PAGE STYLES (/assets/css/resort-page.css)
   VERSION 6.0 - AUDITED & REFINED BUILD
   ========================================================================== */

/* === Section-001: FOUNDATION & GENERAL LAYOUT === */
.hidden { display: none !important; }
main { max-width: 950px; margin: 20px auto; padding: 0 15px; overflow-x: hidden; }
main > section { 
    padding: 20px 15px; /* Reduced vertical padding */
    margin-bottom: 20px; 
    background-color: var(--card-background); 
    border: 1px solid #f0f0f0; 
    border-radius: 18px; /* Slightly more rounded */
}
main h2 { text-align: center; font-size: clamp(1.6rem, 4vw, 2rem); margin-bottom: 15px; }
main h3 { font-family: var(--font-family-body); font-size: 1.3rem; color: var(--text-color); margin-bottom: 10px; font-weight: bold; }

/* === Section-002: HERO & BREADCRUMBS === */
.hero-section { position: relative; width: 100%; height: 50vh; max-height: 400px; border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; text-align: center; color: white; padding: 0; margin-bottom: 0; border: none; }
.hero-section .hero-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%); z-index: 2; }
.hero-section .hero-content { position: relative; z-index: 3; padding: 25px; }
.hero-section h1 { font-size: clamp(2rem, 5vw, 3rem); color: white; text-shadow: 2px 2px 6px rgba(0,0,0,0.8); }
.hero-section .hero-subtitle { font-size: 1.1rem; opacity: 0.9; text-shadow: 1px 1px 4px rgba(0,0,0,0.8); }
.hero-section .cta-button { margin-top: 15px; background-color: var(--primary-color); color: var(--white-color); padding: 10px 25px; border-radius: 50px; font-size: 1rem; font-weight: bold; text-decoration: none; border: none; }
.hero-content .hero-meta-line {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; margin-top: 15px;}
@media (min-width: 768px) {.hero-content .hero-meta-line {flex-direction: row;}}

.breadcrumbs { padding: 10px 0; margin-bottom: 20px; font-size: 0.9rem; background-color: transparent; border: none; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.breadcrumbs li:not(:last-child)::after { content: '›'; margin-left: 8px; color: #999; }

/* === Section-003: OVERVIEW & KEY INFO SECTIONS === */
.overview-section {margin-bottom: 20px;}
.overview-section, .suitable-for-section, .amenities-section { text-align: left; }
.overview-section h2 {font-size: 1.8rem; font-family: var(--font-family-body); font-weight: bold; color: var(--text-color);}
.overview-section .intro-text {text-align: left; line-height: 1.3;}
.overview-section .intro-text p {font-size: 1rem;}
.intro-text p { font-size: 1.05rem; line-height: 1.3; text-align: left; max-width: 800px; margin: 0 auto; color: #555; }
.pills-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ideal-for-pill { display: inline-flex; align-items: center; gap: 8px; background-color: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: 20px; padding: 6px 14px; font-size: 0.9em; font-weight: bold; }
/* ADD-ON: Inline Heading and Pills Layout */
.inline-heading-wrapper {display: flex; justify-content: left; align-items: left; flex-wrap: wrap; gap: 15px;}
.inline-heading-wrapper h3 {margin-top: 15px;}
/* ADD-ON: Inline Overview Heading */
.overview-section .intro-text {display: flex; align-items: left; flex-wrap: wrap; gap: 5px; justify-content: left;}
.overview-section .intro-text h3 {margin-bottom: 0; white-space: nowrap;}

#view-all-amenities-btn {display: block; width: fit-content; margin: 20px auto 20px auto; background-color: var(--primary-color); color: var(--white-color); border: none;}
#view-all-amenities-btn:hover {background-color: #e65100;}
.amenity-preview-item { display: inline-flex; align-items: center; gap: 8px; background-color: #f0f8ff; border: 1px solid #dbeafe; padding: 6px 14px; border-radius: 8px; font-size: 0.9em; }
.amenity-preview-item i { color: var(--accent-color); }
.amenities-section .small-cta-button { margin-top: 20px; }

/* === Section-004: LOCATION & DISTANCES === */
.location-section { background: transparent; border: none; padding: 0; }
.location-section h3 {text-align: center; margin-bottom: 15px;}
.location-container { max-width: 500px; margin: 0 auto 20px; background-color: var(--card-background); border: 1px solid #f0f0f0; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 15px;} /* Changed to flex */
.distance-list { display: flex; flex-direction: column; gap: 12px; } /* Reduced gap */
.distance-item { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; font-size: 1rem; }
.distance-item-icon { font-size: 1.2em; color: var(--accent-color); text-align: center; }
.distance-item-label { text-align: left; }
.location-address-block { text-align: center; font-style: normal; border-top: 1px solid #eee; padding-top: 15px;}
.location-address-block p { margin-bottom: 5px; } /* Reduced margin */
.location-address-block a { font-weight: bold; }
.location-address-block p::before {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f3c5"; display: inline-block; margin-right: 8px; color: var(--accent-color);}

/* === Section-005: CHOOSE YOUR STAY (ROOMS) === */
#room-options-section { background-color: #fdf5e8; border-color: #f5e9d3; }
.room-cards-container { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .room-cards-container { grid-template-columns: 1fr 1fr; } }
.room-card { background: var(--card-background); border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.07); overflow: hidden; display: flex; flex-direction: column; }
.room-card-image { height: 220px; overflow: hidden; position: relative; }
.room-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.room-card:hover .room-card-image img { transform: scale(1.05); }
.room-card-content { padding: 10px 15px; text-align: left; } /* Changed: Reduced padding */
.room-card-content h3 { font-size: 1.4em; text-align: left; margin-bottom: 5px; } /* Changed: Reduced margin-bottom */
.room-card-footer { padding: 15px; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.room-card-price { text-align: left; }
.room-card-price .discount-text { font-size: 0.9em; font-weight: bold; color: #d32f2f; display: block; line-height: 1.1; } /* Changed: Increased font-size */
.room-card-price .strikethrough-price { font-size: 1em; color: #888; text-decoration: line-through; display: block; line-height: 1; } /* Changed: Increased font-size */
.room-card-price .final-price { font-size: 1.3em; font-weight: 700; color: var(--primary-color); } /* Changed: Decreased font-size */

/* Section-005-B:  "Room Details" Section Styling */
.room-details-section {border: 1px solid var(--primary-color); border-radius: 12px; scroll-margin-top: 20px; padding: 10px 5px;} /* Reduced horizontal padding */
.room-details-section h3 {font-size: 1.5em; text-align: left; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; margin-bottom: 10px; padding-left: 10px; padding-right: 10px;}
.details-content-wrapper {position: relative; display: grid; grid-template-columns: 1fr; gap: 5px;}
.room-details-gallery {width: 100%; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; position: relative;}
.room-details-gallery .swiper-slide img {width: 100%; height: 100%; object-fit: cover;} /* Fixes stretched image */
.room-details-gallery .swiper-pagination-bullet-active {background-color: var(--primary-color);}
/* New Arrow Styling */
.room-details-gallery .swiper-button-next, .room-details-gallery .swiper-button-prev {background-color: rgba(255,255,255,0.8); border-radius: 50%; width: 36px; height: 36px; box-shadow: 0 2px 5px rgba(0,0,0,0.15); color: var(--primary-color); top: 50%; transform: translateY(-50%);}
.room-details-gallery .swiper-button-next::after, .room-details-gallery .swiper-button-prev::after {font-size: 0.9rem; font-weight: bold;} /* Makes arrow icon smaller */
.room-details-close-btn {position: absolute; top: -25px; right: 0px; background: rgba(0,0,0,0.4); color: white; border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 20px; cursor: pointer; z-index: 10; line-height: 30px; padding: 0;}
.room-details-pricing-grid {display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; margin: 0 10px;} /* Added horizontal margin */
.price-box {background-color: #fff; padding: 5px; text-align: center;}
.price-box:first-child {border-right: 1px solid #ddd;}
.price-box h4 {margin: 0 0 5px; font-size: 1em; color: var(--accent-color); font-weight: bold;}
.price-box .discount-text {font-size: 0.9em; font-weight: bold; color: #d32f2f; display: block; line-height: 1.1;}
.price-box .strikethrough-price {font-size: 1em; color: #888; text-decoration: line-through; display: block; line-height: 1;}
.price-box .final-price {font-size: 1.3em; font-weight: 700; color: var(--primary-color);}
.info-section {text-align: left; background-color: #f9f9f9; border-radius: 8px; padding: 5px; margin: 0 5px;} /* Added horizontal margin */
.info-section h4 {text-align: left; margin: 0 0 5px; font-size: 1.1em; color: var(--accent-color);}
.info-section-list {list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; line-height: 1.1;}
@media (min-width: 500px) {.info-section-list {grid-template-columns: 1fr 1fr;}}
.info-section-list li {display: flex; align-items: center; gap: 4px; font-size: 0.9em; background-color: var(--card-background); padding: 5px 5px; border-radius: 20px; border: 1px solid #adabab;}
.info-section-list li i {color: var(--accent-color); width: 20px; text-align: center;}
.room-details-note {padding: 15px; background-color: #fffbeb; border-left: 4px solid #facc15; font-size: 0.9em; text-align: left; margin-top: 5px; margin: 5px 5px 0 5px;} /* Added horizontal margin */
.room-details-actions {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px;}

/* === Section-006: PHOTO GALLERY, REVIEWS & OTHER CAROUSELS (UPGRADED) === */
.gallery-carousel-wrapper, .reviews-carousel-wrapper, .popular-stays-carousel-wrapper {
    position: relative;
    max-width: 950px;
    margin: 0 auto;
    padding: 0 5px; /* REDUCED horizontal padding for more content space */
    overflow: hidden; /* CRITICAL FIX: Prevents horizontal overflow on mobile */
}

.gallery-carousel, .reviews-carousel, .popular-stays-carousel {
    overflow: hidden; /* SwiperJS requirement */
}

/* Task 5: Responsive Gallery Height */
.gallery-carousel {height: auto; aspect-ratio: 16 / 10; border-radius: 12px;}
@media (min-width: 768px) {.gallery-carousel {height: 50vh; max-height: 450px; aspect-ratio: auto;}}

.gallery-carousel .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.reviews-carousel { padding-bottom: 40px; }
.popular-stays-carousel { padding-bottom: 40px; height: auto; } /* Let content define height */

/* --- NEW: Universal Swiper Button Styling for Detail Pages --- */
.gallery-carousel-wrapper .swiper-button-next, .gallery-carousel-wrapper .swiper-button-prev,
.reviews-carousel-wrapper .swiper-button-next, .reviews-carousel-wrapper .swiper-button-prev,
.popular-stays-carousel-wrapper .swiper-button-next, .popular-stays-carousel-wrapper .swiper-button-prev {
    color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.85); /* White background with slight transparency */
    border-radius: 50%; /* Makes it a circle */
    width: 38px;  /* Fixed width */
    height: 38px; /* Fixed height */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Subtle shadow for depth */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Adjust arrow icon size */
.gallery-carousel-wrapper .swiper-button-next::after, .gallery-carousel-wrapper .swiper-button-prev::after,
.reviews-carousel-wrapper .swiper-button-next::after, .reviews-carousel-wrapper .swiper-button-prev::after,
.popular-stays-carousel-wrapper .swiper-button-next::after, .popular-stays-carousel-wrapper .swiper-button-prev::after {
    font-size: 1rem; /* Smaller, cleaner arrow icon */
    font-weight: bold;
}

/* Hover effect */
.gallery-carousel-wrapper .swiper-button-next:hover, .gallery-carousel-wrapper .swiper-button-prev:hover,
.reviews-carousel-wrapper .swiper-button-next:hover, .reviews-carousel-wrapper .swiper-button-prev:hover,
.popular-stays-carousel-wrapper .swiper-button-next:hover, .popular-stays-carousel-wrapper .swiper-button-prev:hover {
    background-color: white;
    transform: scale(1.1);
}

/* Position arrows for popular stays carousel */
.popular-stays-carousel-wrapper .swiper-button-next, .popular-stays-carousel-wrapper .swiper-button-prev {
    top: 45%; /* Better vertical alignment */
}

/* === Section-007: FAQ SECTION (WITH MICRODATA) === */
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #eee; }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 15px 5px; cursor: pointer; text-align: left; }
.faq-question h3 { font-size: 1.1em; color: var(--text-color); margin: 0; font-weight: bold; pointer-events: none; }
.faq-question i { transition: transform 0.3s ease; pointer-events: none; }
/* FIX: Active state logic for auto-collapse */
.faq-item.active .faq-question i { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; }
.faq-answer-content { padding: 0 5px 15px; } /* Wrapper for padding transition */
.faq-item.active .faq-answer { max-height: 300px; }
.faq-answer p { line-height: 1.6; }

/* === Section-008: Rules Section  === */
.rules-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 800px; margin: 0 auto; }
@media (min-width: 768px) { .rules-list { grid-template-columns: 1fr 1fr; } }
.rules-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95em; text-align: left; }
.rules-list li i { color: var(--accent-color); margin-top: 5px; }
.rules-footer { margin-top: 20px; font-size: 0.9em; text-align: center; }

/* Section-009 REVIEWS Styling */
.enhanced-reviews-section {background-color: #f3f9ff; border: 1px solid #e0eaff; border-radius: 40px; padding-top: 25px; padding-bottom: 25px;}
.aggregate-rating-box {display: flex; align-items: center; justify-content: center; gap: 15px; background-color: var(--card-background); padding: 10px 25px; border-radius: 50px; margin: 0 auto 25px auto; max-width: 350px; border: 1px solid #eee; box-shadow: 0 4px 15px rgba(0,0,0,0.05);}
.aggregate-rating-box .rating-value {font-size: 2.8rem; font-weight: bold; color: var(--primary-color); line-height: 1;}
.rating-stars-and-count {text-align: left;}
.rating-stars-and-count .rating-stars {font-size: 1.2rem; color: #ffc107;}
.rating-stars-and-count p {font-size: 0.8rem; color: #777; margin: 0;}
.review-card {background-color: #fff; border: 1px solid #eee; border-radius: 12px; padding: 20px; height: auto; min-height: 150px; display: flex; flex-direction: column; justify-content: center; text-align: center;}
.review-body {font-style: italic; color: #555; margin-bottom: 15px; flex-grow: 1;}
.review-author {font-weight: bold;}
.reviews-carousel-wrapper, .popular-stays-carousel-wrapper {position: relative; max-width: 950px; margin: 0 auto; padding: 0 20px;}

/* Section-010 "Explore Nearby" Section Styling (Vibrant) */
#nearby-attractions-section {background-color: #f7f3f0; border-radius: 18px; padding: 25px 15px; text-align: center;}
#nearby-attractions-section h4 {font-family: var(--font-family-body); font-size: 1.3rem; color: var(--text-color); margin-bottom: 15px;}
.place-pill, .activity-pill {display: inline-flex; align-items: center; gap: 8px; border-radius: 20px; padding: 8px 15px; font-size: 0.9rem; font-weight: bold; text-decoration: none; transition: all 0.2s ease; border: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.05);}
.place-pill i, .activity-pill i {font-size: 1.1em; color: var(--accent-color); transition: color 0.2s ease;} /* Added transition for smooth color change */
/* Creative Color Scheme for Places to Visit */
.place-pill {background-color: #f0fdf4; color: #15803d;}
.place-pill:hover {background-color: #15803d; color: white; text-decoration: none; transform: translateY(-2px);}
.place-pill:hover i {color: white;} /* Icon turns white on hover */
/* Creative Color Scheme for Things to Do */
.activity-pill {background-color: #fee2e2; color: #b91c1c;}
.activity-pill:hover {background-color: #b91c1c; color: white; text-decoration: none; transform: translateY(-2px);}
.activity-pill:hover i {color: white;} /* Icon turns white on hover */
#nearby-attractions-section .cta-button {margin-top: 25px;}


/* Section-011 CAROUSAL Styling "You Might Also Like" Section UI */
#popular-stays-section {background-color: #fdf5e8; border: 1px solid #f5e9d3; border-radius: 40px; padding: 25px 15px; text-align: center;}
#popular-stays-section h2 {margin-bottom: 20px;}
.popular-stays-carousel-wrapper {position: relative; max-width: 950px; margin: 0 auto;}
.popular-stays-carousel {overflow: hidden; padding: 10px 0;}
.popular-stays-carousel .swiper-slide {height: auto;}
.popular-stays-carousel .resort-card {text-align: left;}
.popular-stays-carousel-wrapper .swiper-button-next, .popular-stays-carousel-wrapper .swiper-button-prev {color: var(--primary-color); top: 40%;}
.popular-stays-carousel-wrapper .swiper-button-next {right: -10px;}
.popular-stays-carousel-wrapper .swiper-button-prev {left: -10px;}


/* Section-012: AMENITIES MODAL STYLING */
#amenities-modal .modal-content {max-width: 700px; border-radius: 12px;}
#amenities-modal .modal-header h2 {text-align: center; margin-bottom: 20px;}
.modal-amenities-list {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px;}
.modal-amenity-item {display: flex; align-items: center; gap: 10px; background-color: #f9f9f9; padding: 12px; border-radius: 8px; font-size: 0.95rem;}
.modal-amenity-item i {color: var(--accent-color); width: 20px;}
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: var(--white-color); padding: 20px; border-radius: 8px; width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; position: relative; }
.modal-close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 2em; cursor: pointer; color: #999; }


/* Button Styles */
.small-cta-button { background-color: var(--primary-color); color: var(--white-color); border: none; padding: 10px 25px; border-radius: 50px; font-size: 1rem; font-weight: bold; cursor: pointer; text-decoration: none; display: inline-block; }
.small-cta-button:hover { background-color: #e65100; text-decoration: none; }
.small-cta-button.secondary-style { background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); }
.small-cta-button.secondary-style:hover { background-color: #fff8f5; }

/* ADD-ON: Modal & Form Styling */
.modal-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1001; transition: opacity 0.3s ease;}
.modal-content {background: var(--card-background); padding: 25px; border-radius: 12px; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.2);}
.modal-close-btn {position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 2rem; cursor: pointer; color: #999; line-height: 1;}
.modal-header {text-align: center; margin-bottom: 20px;}
.modal-header h2 {font-size: 1.8rem; margin-bottom: 5px;}
.modal-header p {color: #666; font-size: 0.95rem;}
.modal-form {display: flex; flex-direction: column; gap: 15px;}
.form-group {display: flex; flex-direction: column;}
.form-row {display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
.modal-form label {margin-bottom: 5px; font-size: 0.9rem; font-weight: bold; color: var(--text-color);}
.modal-form input[type="text"], .modal-form input[type="email"], .modal-form input[type="tel"], .modal-form input[type="number"], .modal-form input[type="date"], .modal-form textarea {width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem;}
.modal-form textarea {resize: vertical;}
.modal-form .cta-button {width: 100%; padding: 12px; font-size: 1.1rem; margin-top: 10px;}
.kids-age-container {display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: -5px;}
.kids-age-container label {grid-column: 1 / -1; margin-bottom: 0;}
.success-message {text-align: center; padding: 40px 20px;}
.success-message h3 {font-size: 2rem; color: #cc6e21;}