/* === PREMIUM MOBILE RESPONSIVE STYLES (Consolidated) === /
/ Variables */
:root {
--mobile-padding: 1rem;
--mobile-section-padding: 2rem 1rem;
--mobile-font-size: 0.9rem;
--mobile-title-size: 1.8rem;
--mobile-subtitle-size: 1.1rem;
}

/* GLOBAL MOBILE OVERFLOW FIX */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
}

/* SPECIFIC DEVICE WIDTH FIXES 412px */
@media (max-width: 412px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; box-sizing: border-box; }
.container { width: 100%; max-width: 100%; padding: 0 0.5rem; margin: 0; box-sizing: border-box; }
}

/* === MOBILE NAVIGATION FIXES (Header) === */
@media (max-width: 768px) {
.navbar { height: 60px; padding: 0.5rem 0; }
.nav-container { padding: 0 1rem; }
.main-logo { width: 3.5rem; height: auto; max-height: 50px; object-fit: contain; }
.hamburger { display: flex; z-index: 1001; }

.nav-actions { gap: 0.5rem; }
.btn-booking { padding: 0.6rem 1.2rem; font-size: 0.9rem; display: inline-block; }

.nav-menu {
position: fixed; left: -100%; top: 60px; flex-direction: column;
background: rgba(16, 26, 20, 0.98); backdrop-filter: blur(15px);
width: 100%; text-align: center; transition: 0.3s;
box-shadow: 0 8px 32px rgba(24, 57, 43, 0.6);
border-top: 1px solid rgba(46, 204, 122, 0.2);
padding: 2rem 0; gap: 1.5rem;
}
.nav-menu.active { left: 0; }
.nav-menu .nav-item { margin: 0; padding: 0.5rem 0; }
.nav-link {
font-size: 1.1rem; padding: 0.8rem 1.5rem; display: block; border-radius: 8px; margin: 0 1rem;
}
}

/* MOBILE NAV VISIBILITY/TEXT CONTRAST */
@media (max-width: 768px) {
.nav-menu { background: rgba(0,0,0,0.95) !important; backdrop-filter: blur(20px) !important; }
.nav-menu .nav-link {
color: #ffffff !important; font-weight: 600 !important; font-size: 1.2rem !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; padding: 1rem 1.5rem !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important; transition: all 0.3s ease !important;
}
.nav-menu .nav-link:hover {
color: #eaeaea !important; background: rgba(255,255,255,0.08) !important; transform: translateX(10px) !important;
}
.nav-menu .nav-link.active {
color: #eaeaea !important; background: rgba(255,255,255,0.14) !important; border-left: 4px solid #eaeaea !important;
}
.nav-menu li { margin: 0 !important; width: 100% !important; }
.nav-menu.active {
display: flex !important; flex-direction: column !important; position: fixed !important; top: 60px !important; left: 0 !important;
width: 100% !important; height: calc(100vh - 60px) !important; z-index: 999 !important; padding: 2rem 0 !important;
}
}

/* 361px SPECIFIC HEADER REDUCTIONS */
@media (max-width: 361px) {
.navbar { padding: 0.5rem 0; }
.nav-container { padding: 0 0.3rem; }
.main-logo { width: 3rem; max-height: 40px; }
.nav-menu { padding: 1rem 0.5rem; }
.nav-link { font-size: 0.9rem; padding: 0.5rem 0.8rem; }
.btn-booking { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
}

/* === MOBILE HERO SECTION (Home) === */
@media (max-width: 768px) {
.container { width: 100%; max-width: 100%; padding: 0 1rem; box-sizing: border-box; }
.hero { min-height: 100vh; padding-top: 60px; }
.hero-content { padding: 2rem 1rem; text-align: center; }
.hero-title { font-size: 2.2rem; line-height: 1.2; margin-bottom: 1rem; }
.title-line { display: block; margin-bottom: 0.3rem; }
.hero-subtitle { font-size: 1rem; line-height: 1.5; margin-bottom: 1.5rem; padding: 0 0.5rem; }
.premium-badge { padding: 0.5rem 1rem; margin-bottom: 1rem; }
.badge-text { font-size: 0.8rem; }

.hero-features { grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0; }
.feature-item { padding: 0.8rem; font-size: 0.85rem; }
.feature-item i { font-size: 1.2rem; margin-bottom: 0.3rem; }

/* Booking Bar */
.hero-search-container { padding: 1rem; margin-top: 1rem; }
.hero-booking-bar { flex-direction: column; gap: 1rem; padding: 1.5rem; }
.hero-booking-bar .form-group { width: 100%; }
.hero-booking-bar label { font-size: 0.9rem; margin-bottom: 0.5rem; }
.hero-booking-bar input, .hero-booking-bar select { padding: 0.8rem 1rem; font-size: 0.9rem; }
.btn-search { width: 100%; padding: 1rem; font-size: 1rem; }

/* Hide hero dots on mobile for cleaner look */
.hero-slider-dots, .hero-dot { display: none !important; }
}

/* SMALL MOBILE HERO */
@media (max-width: 480px) {
.hero-title { font-size: 1.8rem; }
.hero-subtitle { font-size: 0.9rem; }
.hero-features { grid-template-columns: 1fr; gap: 0.8rem; }
.feature-item { padding: 0.6rem; font-size: 0.8rem; }
}

/* LANDSCAPE MOBILE HERO */
@media (max-height: 500px) and (orientation: landscape) {
.hero { min-height: 100vh; padding-top: 60px; }
.hero-content { padding: 1rem; }
.hero-title { font-size: 1.5rem; margin-bottom: 0.5rem; }
.hero-subtitle { font-size: 0.8rem; margin-bottom: 1rem; }
.hero-features { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 1rem 0; }
.feature-item { padding: 0.4rem; font-size: 0.7rem; }
.hero-search-container { padding: 0.5rem; }
.hero-booking-bar { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; padding: 1rem; }
.hero-booking-bar .form-group { flex: 1; min-width: 120px; }
}

/* === MOBILE ACCOMMODATIONS (Home) === */
@media (max-width: 768px) {
.premium-accommodations { padding: 2rem 1rem; }
.accommodations-grid { grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0; }

.accommodation-card {
min-height: 350px; border-radius: 15px; overflow: hidden; position: relative !important;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth hover /
}
.accommodation-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0,0,0,0.18); / no green highlight shift */
}

.card-image { position: relative; width: 100%; height: 100%; overflow: hidden; }
.card-slider, .card-slide { position: relative; width: 100%; height: 100%; }
.card-slide { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.8s ease-in-out; }
.card-slide.active { opacity: 1; }
.card-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.card-badge { position: absolute; top: 1rem; left: 1rem; padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; z-index: 3; backdrop-filter: blur(10px); }
.card-overlay {
padding: 5rem 1.5rem 1.5rem 1.5rem !important; gap: 0.8rem; display: flex; flex-direction: column; justify-content: flex-end;
transform: translateY(0) !important; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 100% !important;
}
.overlay-content { margin-top: 2rem !important; }
.overlay-content h3 { font-size: 1.3rem; margin-bottom: 0.5rem; line-height: 1.3; color: #ffffff !important; margin-top: 0 !important; }
.overlay-content p { font-size: 0.9rem; margin-bottom: 1rem; line-height: 1.4; color: #ffffff !important; }
.amenities { gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.amenities span { font-size: 0.8rem; padding: 0.3rem 0.6rem; white-space: nowrap; }
.price .amount { font-size: 1.5rem; color: #ffffff !important; }
}

/* SMALL MOBILE ACCOMMODATIONS */
@media (max-width: 480px) {
.accommodation-card { min-height: 280px; border-radius: 12px; }
.card-badge { top: 0.8rem; left: 0.8rem; padding: 0.3rem 0.6rem; font-size: 0.65rem; }
.card-overlay {
padding: 5rem 1rem 1rem 1rem !important; gap: 0.6rem;
background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 50%, transparent 100%);
height: 100% !important; transform: translateY(0) !important;
}
.overlay-content h3 { font-size: 1.1rem; margin-bottom: 0.4rem; color: #ffffff !important; margin-top: 0 !important; }
.overlay-content p { font-size: 0.8rem; margin-bottom: 0.8rem; color: #ffffff !important; }
.amenities { gap: 0.4rem; margin-bottom: 0.8rem; }
.amenities span { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
.price .amount { font-size: 1.3rem; color: #ffffff !important; }
}

/* === MOBILE GALLERY (Home) === */
@media (max-width: 768px) {
.premium-gallery { padding: 2rem 1rem; }
.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.gallery-item { min-height: 200px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.gallery-item:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }
.gallery-overlay { padding: 1rem; }
.overlay-content h3 { font-size: 1rem; margin-bottom: 0.3rem; color: #ffffff !important; }
.overlay-content p { font-size: 0.8rem; color: #ffffff !important; }
.overlay-content i { font-size: 1.2rem; }
.gallery-cta { margin-top: 2rem; }
.gallery-cta .btn { padding: 1rem 2rem; font-size: 0.9rem; }
}
@media (max-width: 480px) {
.gallery-grid { grid-template-columns: 1fr; gap: 1rem; }
.gallery-item { min-height: 180px; }
}

/* === MOBILE ABOUT (Home) === */
@media (max-width: 768px) {
.about { padding: 2rem 1rem; }
.about-content { grid-template-columns: 1fr; gap: 2rem; }
.about-text { order: 2; }
.about-visual { order: 1; }
.about-feature { padding: 1rem; gap: 1rem; }
.about-feature .feature-icon { width: 50px; height: 50px; font-size: 1.3rem; }
.about-feature .feature-content h3 { font-size: 1.1rem; }
.about-feature .feature-content p { font-size: 0.9rem; }
}

/* === MOBILE ACTIVITIES (Home) === */
@media (max-width: 768px) {
.nature-activities { padding: 2rem 1rem; }
.activities-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.activity-card { min-height: auto; }
.activity-content { padding: 1.5rem; }
.activity-header h3 { font-size: 1.2rem; }
.activity-content p { font-size: 0.9rem; margin-bottom: 1rem; }
.activity-features { gap: 0.5rem; margin-bottom: 1rem; }
.activity-features span { font-size: 0.8rem; padding: 0.3rem 0.6rem; }
.activities-cta { padding: 2rem 1rem; margin-top: 2rem; }
.activities-cta .cta-content h3 { font-size: 1.3rem; }
.activities-cta .cta-content p { font-size: 0.9rem; }
.activities-cta .cta-buttons { flex-direction: column; gap: 1rem; }
}

/* === MOBILE TESTIMONIALS (Home) === */
@media (max-width: 768px) {
.premium-testimonials { padding: 2rem 1rem; }
.testimonials-showcase { grid-template-columns: 1fr; gap: 1.5rem; }
.testimonial-card { padding: 1.5rem; }
.testimonial-content p { font-size: 0.9rem; line-height: 1.6; }
.testimonial-author { margin-top: 1rem; }
.author-avatar { width: 50px; height: 50px; }
.author-info h4 { font-size: 1rem; }
.author-info span { font-size: 0.8rem; }
.testimonials-stats { grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.testimonials-stats .stat-number { font-size: 1.5rem; }
.testimonials-stats .stat-label { font-size: 0.8rem; }
}
@media (max-width: 480px) {
.testimonial-card { padding: 1rem; }
.testimonial-content p { font-size: 0.85rem; }
.author-avatar { width: 40px; height: 40px; }
.author-info h4 { font-size: 0.9rem; }
.author-info span { font-size: 0.75rem; }
.testimonials-stats { grid-template-columns: 1fr; gap: 1rem; }
}

/* === MOBILE CTA (Home) === */
@media (max-width: 768px) {
.premium-cta { padding: 2rem 1rem; }
.premium-cta .cta-content h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.premium-cta .cta-content p { font-size: 0.9rem; margin-bottom: 1.5rem; }
.cta-badge { padding: 0.5rem 1rem; margin-bottom: 1rem; }
.cta-features { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.cta-features .feature-item { padding: 0.8rem; font-size: 0.9rem; }
.premium-cta .cta-buttons { flex-direction: column; gap: 1rem; }
.premium-cta .cta-buttons .btn { width: 100%; padding: 1rem; font-size: 0.9rem; }
.cta-trust { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
.cta-trust .trust-item { padding: 0.8rem; font-size: 0.8rem; }
}

/* === MOBILE CONTACT PAGE === /
@media (max-width: 768px) {
.contact { padding: 2rem 0.5rem; }
.contact-grid { grid-template-columns: 1fr; gap: 2rem; width: 100%; margin: 0; }
.contact-info, .contact-form { padding: 0.8rem; width: 100%; margin: 0; overflow: hidden; }
.contact-details { gap: 1rem; width: 100%; }
.contact-item {
padding: 1rem; gap: 1rem; margin-bottom: 0.5rem; background: rgba(255,255,255,0.03);
border-radius: 12px; border: 1px solid rgba(46,204,122,0.1); transition: all 0.3s ease; width: 100%;
}
.contact-item:hover {
background: rgba(46,204,122,0.1); border-color: rgba(46,204,122,0.25);
transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); / softened to neutral */

.contact-icon {
width: 50px; height: 50px; font-size: 1.3rem; background: #086a39; color: #fff;
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
.contact-text h3 { font-size: 1.1rem; margin-bottom: 0.3rem; color: #000000; font-weight: 600; }
.contact-text p { font-size: 0.9rem; line-height: 1.4; word-break: break-word; }
.contact-text p br { display: block; content: ""; margin-top: 0.2rem; }

.contact-form h3 { font-size: 1.5rem; margin-bottom: 1.5rem; }
.form-row { grid-template-columns: 1fr; gap: 1rem; width: 100%; }
.form-group { width: 100%; margin: 0; }
.form-group input, .form-group select, .form-group textarea { padding: 0.8rem 0.8rem; font-size: 0.9rem; width: 100%; }
.contact-form .btn-primary { width: 100%; padding: 1rem; font-size: 0.9rem; }
.social-links { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; width: 100%; }


/* === MOBILE FACILITIES (Home/Facilities page) === */
@media (max-width: 768px) {
.facilities { padding: 2rem 0; width: 100vw; max-width: 100vw; overflow-x: hidden; }
.facilities .container { padding: 0 0.5rem; width: 100%; max-width: 100%; margin: 0; }
.facilities-grid { grid-template-columns: 1fr; gap: 0.8rem; width: 100%; padding: 0; margin: 0; }
.facility-card {
padding: 0.8rem; margin-bottom: 0.8rem; width: 100%;
border-radius: 8px; overflow: hidden;
}
.facility-image { height: 160px; margin-bottom: 0.8rem; width: 100%; overflow: hidden; border-radius: 6px; }
.facility-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.facility-icon { width: 45px; height: 45px; font-size: 1.1rem; margin-bottom: 0.6rem; }
.facility-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; line-height: 1.3; }
.facility-card p { font-size: 0.8rem; margin-bottom: 0.6rem; line-height: 1.4; }
.facility-features { text-align: left; margin: 0; padding: 0; }
.facility-features li { font-size: 0.75rem; padding: 0.1rem 0; line-height: 1.3; }
}
@media (max-width: 480px) {
.facilities { padding: 1rem 0; }
.facilities .container { padding: 0 0.3rem; }
.facility-card { padding: 0.6rem; margin-bottom: 0.6rem; }
.facility-image { height: 140px; margin-bottom: 0.6rem; }
.facility-icon { width: 40px; height: 40px; font-size: 1rem; margin-bottom: 0.5rem; }
.facility-card h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.facility-card p { font-size: 0.75rem; margin-bottom: 0.5rem; }
.facility-features li { font-size: 0.7rem; padding: 0.08rem 0; }
}

/* === MOBILE FOOTER (Footer) === */
@media (max-width: 768px) {
body { overflow-x: hidden; width: 100%; max-width: 100vw; }
.footer { padding: 2rem 1rem 1rem; width: 100%; max-width: 100vw; overflow-x: hidden; }
.footer-content { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1rem; width: 100%; }
.footer .my-footer-logo { display: flex; justify-content: center; margin-bottom: 2rem; width: 100%; }
.footer .main-logo { width: 12rem; height: auto; max-height: 6rem; object-fit: contain; transform: scale(1.2); transform-origin: center center; }
.footer-section { padding: 2rem 0; text-align: center; align-items: center; margin-bottom: 2rem; transition: all 0.3s ease; width: 100%; overflow: visible; }
.footer-section:first-child { padding-top: 1rem; margin-bottom: 1rem; }
.footer-section h4 {
font-size: 1.2rem; margin-bottom: 1.2rem; text-align: center;
border-bottom: 3px solid rgba(227,199,123,0.4); padding-bottom: 0.8rem; width: 100%; position: relative;
}
.footer-section h4::after { content: ''; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 50px; height: 3px; background: var(--emerald); border-radius: 2px; }
.footer-section p { font-size: 0.9rem; line-height: 1.6; text-align: center; margin: 1rem 0; padding: 0 1rem; color: #333; }
.footer-section ul { gap: 0.5rem; text-align: center; margin: 0; padding: 0; width: 100%; }
.footer-section ul li { text-align: center; padding: 0.4rem 0; margin-bottom: 0.3rem; border-radius: 6px; transition: all 0.3s ease; }
.footer-section ul li:hover { padding-left: 0; background: rgba(0,0,0,0.05); border-radius: 8px; }
.footer-section ul li a { font-size: 0.9rem; padding: 0.3rem 0; display: block; width: 100%; }

.footer-contact { margin: 1rem 0; text-align: center; }
.footer-contact p {
font-size: 0.9rem; margin-bottom: 0.8rem; justify-content: center; display: flex; align-items: center; gap: 0.2rem;
text-align: center; padding: 0 1rem; line-height: 1.4; width: 100%; flex-wrap: nowrap;
}
.footer-contact i { color: #086a39; font-size: 1.1rem; width: 24px; display: flex; align-items: center; justify-content: center; margin-right: 0.2rem; }

.social-links { justify-content: center; gap: 1rem; margin-top: 1rem; width: 100%; }
.social-links a { width: 40px; height: 40px; font-size: 1.1rem; flex-shrink: 0; }

/* Newsletter block is removed in HTML; keeping neutral styling if present */
.newsletter { text-align: center; width: 100%; }
.newsletter p { font-size: 0.9rem; margin-bottom: 1rem; padding: 0 0.5rem; line-height: 1.4; }
.newsletter-form { flex-direction: column; gap: 1rem; align-items: center; width: 100%; max-width: 100%; padding: 0 0.5rem; }
.newsletter-form input[type="email"] {
padding: 0.8rem 1rem; font-size: 0.9rem; text-align: center; width: 100%;
border: 2px solid rgba(8, 106, 57, 0.2); border-radius: 8px; background-color: rgba(255,255,255,0.05); color: #eee;
}
.newsletter-form input[type="email"]:focus {
outline: none; border-color: #086a39; background-color: rgba(255,255,255,0.1); box-shadow: 0 0 0 3px rgba(8,106,57,0.1);
}
.newsletter-form button {
padding: 0.7rem 0.8rem; font-size: 0.85rem; width: 75%; background: #086a39; border: none; border-radius: 8px; color: #fff; font-weight: 600;
display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin: 0 auto;
}
.newsletter-form button:hover { background: #0a8a4a; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(8,106,57,0.3); }

.footer-bottom { padding: 1rem; margin-top: 2rem; width: 100%; max-width: 100vw; overflow-x: hidden; }
.footer-bottom-content { flex-direction: column; gap: 1rem; text-align: center; width: 100%; }
.footer-bottom p { font-size: 0.8rem; }
.footer-links { gap: 1rem; justify-content: center; }
.footer-links a { font-size: 0.8rem; }
.scroll-to-top { position: fixed; bottom: 1rem; right: 1rem; width: 45px; height: 45px; font-size: 1.1rem; }
}

/* SMALLER FOOTER TWEAKS */
@media (max-width: 480px) {
.footer .main-logo { width: 10rem; max-height: 5rem; transform: none; }
.footer-content { padding: 1.5rem 0.8rem; gap: 1.5rem; }
}

/* === TOUCH/ACCESSIBILITY/HIGH DPI/PRINT === */
@media (hover: none) and (pointer: coarse) {
.nav-link:hover, .btn:hover, .gallery-item:hover, .accommodation-card:hover, .activity-card:hover, .testimonial-card:hover { transform: none; }
.gallery-item:active, .accommodation-card:active, .activity-card:active { transform: scale(0.98); }
.btn:active { transform: scale(0.95); }
.nav-link:active { background: rgba(255,255,255,0.15); }
}
@media (prefers-reduced-motion: reduce) {
.hero-title, .hero-subtitle, .feature-item, .gallery-item, .accommodation-card, .activity-card, .testimonial-card { animation: none; transition: none; }
.floating-elements, .floating-particles { animation: none; }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hero-background img, .gallery-item img, .accommodation-card img, .activity-card img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
}
@media print {
.navbar, .hero-search-container, .btn, .social-links, .scroll-to-top { display: none !important; }
.hero { min-height: auto; padding: 2rem 0; }
.hero-content, .hero-title { color: #000; }
.hero-subtitle { color: #333; }
}

/* === ROOM DETAIL PAGES: MOBILE === */
@media (max-width: 768px) {
.room-hero { min-height: 60vh; }
.image-slider { height: 60vh; }
.slide { background-size: cover; background-position: center; }
.room-content { padding: 2rem 1rem; text-align: center; }
.room-badge { padding: 0.5rem 1rem; font-size: 0.8rem; margin-bottom: 1rem; }
.room-title { font-size: 2rem; line-height: 1.2; margin-bottom: 0.5rem; }
.room-subtitle { font-size: 1rem; margin-bottom: 1rem; }
.room-price { margin-bottom: 1rem; }
.room-price .amount { font-size: 1.8rem; }
.room-price .period { font-size: 0.9rem; }

.room-details-section { padding: 2rem 1rem; }
.room-details-grid { grid-template-columns: 1fr; gap: 2rem; }
.room-info { padding: 1.5rem; }
.room-description h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.room-description p { font-size: 0.95rem; margin-bottom: 1rem; }

.room-amenities h3 { font-size: 1.4rem; margin-bottom: 1rem; }
.amenities-grid { grid-template-columns: 1fr; gap: 1rem; }
.amenity-item { padding: 1rem; }
.amenity-icon { width: 35px; height: 35px; font-size: 16px; }
.amenity-text h4 { font-size: 0.95rem; }
.amenity-text p { font-size: 0.85rem; }

.room-rules h3, .room-reviews h3 { font-size: 1.4rem; margin-bottom: 1rem; }
.rules-list li { padding: 0.8rem 0; font-size: 0.9rem; }

.review-item { padding: 1.5rem; margin-bottom: 1rem; }
.review-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.reviewer-info h4 { font-size: 1rem; }
.review-date { font-size: 0.8rem; }
.review-text { font-size: 0.9rem; }

.booking-sidebar { padding: 1.5rem; position: static; margin-top: 1rem; }
.booking-sidebar h3 { font-size: 1.4rem; margin-bottom: 1rem; }
.booking-form { gap: 1rem; }
.form-group label { font-size: 0.85rem; }
.form-group input, .form-group select, .form-group textarea {
padding: 0.8rem 0.8rem; font-size: 0.9rem; width: 100%; margin: 0;
}
.btn-book-now { padding: 1rem; font-size: 1rem; width: 100%; }

.slider-nav { width: 35px; height: 35px; font-size: 0.8rem; }
.slider-nav.prev { left: 10px; }
.slider-nav.next { right: 10px; }
.slider-controls { bottom: 1rem; }
.slider-dot { width: 8px; height: 8px; margin: 0 3px; }
}
@media (max-width: 480px) {
.room-hero { min-height: 50vh; }
.image-slider { height: 50vh; }
.room-content { padding: 1.5rem 1rem; }
.room-title { font-size: 1.6rem; }
.room-subtitle { font-size: 0.9rem; }
.room-price .amount { font-size: 1.5rem; }
.room-details-section { padding: 1.5rem 1rem; }
.room-info { padding: 1rem; }
.room-description h2 { font-size: 1.3rem; }
.room-description p { font-size: 0.9rem; }
.room-amenities h3, .room-rules h3, .room-reviews h3 { font-size: 1.2rem; }
.amenity-item { padding: 0.8rem; }
.amenity-icon { width: 30px; height: 30px; font-size: 14px; }
.amenity-text h4 { font-size: 0.9rem; }
.amenity-text p { font-size: 0.8rem; }
.booking-sidebar { padding: 1rem; }
.booking-sidebar h3 { font-size: 1.2rem; }
.form-group input, .form-group select, .form-group textarea { padding: 0.7rem 0.8rem; font-size: 0.85rem; }
.btn-book-now { padding: 0.8rem; font-size: 0.95rem; }
.slider-nav { width: 30px; height: 30px; font-size: 0.7rem; }
.slider-nav.prev { left: 5px; }
.slider-nav.next { right: 5px; }
}

/* TOUCH & ACCESSIBILITY for room pages */
@media (hover: none) and (pointer: coarse) {
.slider-nav:active { background: rgba(46,204,122,0.8); transform: scale(0.95); }
.amenity-item:active { background: rgba(46,204,122,0.15); transform: scale(0.98); }
.btn-book-now:active { transform: scale(0.98); background: #086a39; }
}


@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}

/* PRINT for room pages */
@media print {
.room-hero { min-height: auto; page-break-after: avoid; }
.image-slider { display: none; }
.room-content { color: #000; background: #fff; padding: 1rem; }
.room-details-section { background: #fff; color: #000; }
.booking-sidebar, .slider-nav, .slider-controls { display: none; }
}

@media (max-width: 768px) {
.accommodation-card {
min-height: unset; 
height: auto; 
display: flex;
flex-direction: column;
overflow: hidden; 
}
}

.accommodation-card .card-image {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
.accommodation-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}


.card-overlay {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
height: auto !important; 
padding: 1.25rem 1rem !important;
background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%);
transform: none !important;
}
.overlay-content { margin-top: 0 !important; }

/* Ensure text section is visible, not covered by overlay */
.card-content,
.accommodation-card .card-content {
position: relative;
z-index: 0;
padding: 0.9rem 1rem 1.1rem;
background: #fff;
color: #1b1b1b;
}


.accommodations-grid {
display: grid;
grid-template-columns: 1fr; 
gap: 1rem;
margin: 1rem 0 0.5rem;
}

/* Badges stay visible without pushing layout */
.card-badge,
.card-badge-text {
top: 0.6rem !important;
left: 0.6rem !important;
font-size: 0.68rem !important;
padding: 0.28rem 0.6rem !important;
border-radius: 999px !important;
}

/* Safety: containers never exceed viewport width */
.container { max-width: 100% !important; padding-left: 0.75rem; padding-right: 0.75rem; }
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }



@media (max-width: 412px) {
.accommodation-card .card-image { aspect-ratio: 16 / 11; } 
.accommodation-card .card-content { padding: 0.8rem 0.9rem 1rem; }
}


@media (hover: none) and (pointer: coarse) {
.accommodation-card:hover { transform: none; box-shadow: 0 12px 24px rgba(0,0,0,0.12); }
}



/* MOBILE ACCOMMODATION BUTTONS FIX */ @media (max-width: 768px) { /* Let cards grow naturally and stack content */ .accommodation-card { display: flex !important; flex-direction: column !important; height: auto !important; min-height: unset !important; overflow: hidden !important; position: relative !important; } /* Predictable media height using aspect-ratio */ .accommodation-card .card-image { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; } .accommodation-card .card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Make any overlay decorative only (don’t cover content) */ .card-overlay { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; height: auto !important; padding: 1rem .9rem !important; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)) !important; pointer-events: none !important; z-index: 1 !important; } .overlay-content { margin-top: 0 !important; } /* Ensure the text and buttons are visible and on top */ .accommodation-card .card-content { position: relative !important; z-index: 2 !important; padding: 12px 14px 14px !important; background: #fff !important; color: #1b1b1b !important; } /* Buttons: visible, tappable, and wrap nicely */ .explore-btn, .book-btn { display: inline-block !important; min-width: 44% !important; text-align: center !important; padding: 10px 12px !important; font-size: 15px !important; border-radius: 8px !important; margin-top: 10px !important; } .card-content .explore-btn { margin-right: 8px !important; } /* On wider phones, place buttons side by side cleanly */ @media (min-width: 420px) and (max-width: 768px) { .card-content { gap: 10px !important; } .card-content .explore-btn, .card-content .book-btn { width: calc(50% - 6px) !important; display: inline-block !important; } } /* Force one-column grid for mobile to avoid height conflicts */ .accommodations-row { grid-template-columns: 1fr !important; gap: 18px !important; } .accommodations-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; margin: 0 !important; } /* Badge sizing on small screens */ .card-badge-text { top: 10px !important; left: 10px !important; padding: 6px 10px !important; font-size: 12px !important; } /* Safe gutters to prevent horizontal scroll */ .premium-accommodations .container { padding-left: 12px !important; padding-right: 12px !important; } html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; } } /* VERY SMALL PHONES: slightly taller image for nicer crop */ @media (max-width: 412px) { .accommodation-card .card-image { aspect-ratio: 16 / 11 !important; } .accommodation-card .card-content { padding: 10px 12px 12px !important; } } /* Touch devices: keep neutral hover (no jump) */ @media (hover: none) and (pointer: coarse) { .accommodation-card:hover { transform: none !important; box-shadow: 0 12px 24px rgba(0,0,0,0.12) !important; } }