/* ================================
Mobile Badge + Card Overrides
Purpose: Replace icon badges with text badges,
refine mobile accommodation cards, and improve form/nav visibility
================================ */

/* Hide legacy icon-based badges */
.card-badge,
.premium-badge,
.luxury-badge {
display: none !important;
}

/* Badge text styling (desktop + mobile) */
.card-badge-text {
position: absolute;
top: 1rem;
left: 1rem;
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.8rem;
font-weight: 600;
font-family: 'Poppins', sans-serif;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
z-index: 50;
transition: transform 0.25s ease, box-shadow 0.25s ease;
cursor: default;
}

.premium-text {
background: linear-gradient(135deg, #2ecc7a, #27ae60);
color: #fff;
}

.luxury-text {
background: linear-gradient(135deg, #e3c77b, #d4af37);
color: #1a1a1a;
}

/* Card hover: keep elevation only (no green color shift) */
.accommodation-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.accommodation-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.accommodation-card:hover .card-badge-text {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Do NOT change badge gradient colors on hover (preference honored) /
.accommodation-card:hover .premium-text,
.accommodation-card:hover .luxury-text {
/ No gradient swap; only subtle elevation retained */

/* ================================
Mobile layout for accommodation cards
================================ */
@media screen and (max-width: 768px) {
.accommodation-card {
position: relative !important;
min-height: 450px !important;
height: auto !important;
border-radius: 15px !important;
overflow: hidden !important;
margin-bottom: 1.5rem !important;
display: block !important;
width: 100% !important;
}

.accommodation-card .card-badge-text {
position: absolute !important;
top: 1rem !important;
left: 1rem !important;
z-index: 50 !important;
padding: 0.4rem 0.8rem !important;
border-radius: 20px !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.accommodation-card .card-image {
position: relative !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}

.accommodation-card .card-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}

.accommodation-card .card-overlay {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 100% !important;
padding: 5rem 1.5rem 1.5rem 1.5rem !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
transform: translateY(0) !important;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.95) 0%,
rgba(0, 0, 0, 0.8) 40%,
rgba(0, 0, 0, 0.4) 70%,
transparent 100%
) !important;
}

.accommodation-card .overlay-content {
margin-top: auto !important;
padding-top: 0 !important;
color: #fff !important;
z-index: 10 !important;
}

.accommodation-card .overlay-content h3 {
color: #ffffff !important;
font-size: 1.3rem !important;
margin-bottom: 0.5rem !important;
margin-top: 0 !important;
text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}

.accommodation-card .overlay-content p {
color: #ffffff !important;
font-size: 0.9rem !important;
margin-bottom: 1rem !important;
text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

.accommodation-card .amenities {
gap: 0.5rem !important;
margin-bottom: 1rem !important;
flex-wrap: wrap !important;
display: flex !important;
}

.accommodation-card .amenities span {
color: #ffffff !important;
background: rgba(46, 204, 122, 0.25) !important;
padding: 0.3rem 0.6rem !important;
border-radius: 15px !important;
border: 1px solid rgba(46, 204, 122, 0.4) !important;
font-size: 0.75rem !important;
white-space: nowrap !important;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
backdrop-filter: blur(5px) !important;
}

.accommodation-card .price {
background: rgba(227, 199, 123, 0.25) !important;
padding: 0.8rem 1rem !important;
border-radius: 12px !important;
border: 1px solid rgba(227, 199, 123, 0.4) !important;
margin-bottom: 1.5rem !important;
backdrop-filter: blur(5px) !important;
display: inline-block !important;
}

.accommodation-card .price .amount {
color: #ffffff !important;
font-size: 1.4rem !important;
font-weight: 700 !important;
text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9) !important;
}

.accommodation-card .price .period {
color: #ffffff !important;
font-size: 0.9rem !important;
opacity: 0.9 !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}
}

/* Smaller phones */
@media screen and (max-width: 480px) {
.accommodation-card {
min-height: 380px !important;
margin-bottom: 1rem !important;
}
.accommodation-card .card-badge-text {
top: 0.8rem !important;
left: 0.8rem !important;
padding: 0.3rem 0.6rem !important;
font-size: 0.7rem !important;
}
.accommodation-card .card-overlay {
padding: 4rem 1rem 1rem 1rem !important;
}
.accommodation-card .overlay-content h3 {
font-size: 1.1rem !important;
margin-bottom: 0.4rem !important;
}
.accommodation-card .overlay-content p {
font-size: 0.8rem !important;
margin-bottom: 0.8rem !important;
}
.accommodation-card .amenities span {
font-size: 0.7rem !important;
padding: 0.25rem 0.5rem !important;
}
.accommodation-card .price {
padding: 0.6rem 0.8rem !important;
margin-bottom: 1rem !important;
}
.accommodation-card .price .amount {
font-size: 1.2rem !important;
}
.accommodation-card .price .period {
font-size: 0.8rem !important;
}
}

/* Ultra-small screens */
@media screen and (max-width: 360px) {
.accommodation-card {
min-height: 350px !important;
margin-bottom: 0.8rem !important;
}
.accommodation-card .card-overlay {
padding: 3.5rem 0.8rem 0.8rem 0.8rem !important;
}
.accommodation-card .overlay-content h3 { font-size: 1rem !important; }
.accommodation-card .overlay-content p { font-size: 0.75rem !important; }
.accommodation-card .amenities { gap: 0.3rem !important; }
.accommodation-card .amenities span {
font-size: 0.65rem !important;
padding: 0.2rem 0.4rem !important;
}
}

/* ================================
Buttons: Scope hover palettes (no global overrides)
================================ */
.navbar .btn-booking:hover,
.premium-cta .btn:hover,
.gallery-cta .btn:hover,
.activity-cta .btn-explore:hover,
.booking-form .btn-primary:hover,
.contact-form .btn-primary:hover,
.newsletter-form button:hover,
button[type="submit"]:hover,
.btn-send:hover,
.send-btn:hover {
background: #086a39 !important;
color: #ffffff !important;
box-shadow: 0 8px 28px rgba(8, 106, 57, 0.22) !important;
transform: translateY(-2px);
}

/* Keep pseudo-element accents subtle */
.navbar .btn-booking:hover::before,
.premium-cta .btn:hover::before,
.gallery-cta .btn:hover::before,
.activity-cta .btn-explore:hover::before,
.booking-form .btn-primary:hover::before,
.contact-form .btn-primary:hover::before,
.newsletter-form button:hover::before,
button[type="submit"]:hover::before {
background: rgba(8, 106, 57, 0.15) !important;
opacity: 0.25 !important;
}

/* ================================
Booking form: readability fixes
================================ */
.booking-form .input-wrapper input,
.booking-form .input-wrapper select,
.booking-form .input-wrapper textarea,
.booking-form input,
.booking-form select,
.booking-form textarea {
color: #000 !important;
background-color: rgba(255, 255, 255, 0.95) !important;
}

.booking-form .input-wrapper input::placeholder,
.booking-form .input-wrapper textarea::placeholder,
.booking-form input::placeholder,
.booking-form textarea::placeholder {
color: #666 !important;
opacity: 0.85 !important;
}

.booking-form select option {
color: #000 !important;
background-color: #fff !important;
}

.booking-form .input-wrapper input:focus,
.booking-form .input-wrapper select:focus,
.booking-form .input-wrapper textarea:focus,
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
color: #000 !important;
background-color: #fff !important;
}

/* Height harmonization for inline rows */
.booking-form .form-row .form-group {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}

.booking-form .input-wrapper {
flex: 1 !important;
display: flex !important;
align-items: stretch !important;
}

.booking-form .input-wrapper select,
.booking-form .input-wrapper textarea {
height: 3rem !important;
min-height: 3rem !important;
box-sizing: border-box !important;
}

.booking-form .input-wrapper textarea {
min-height: 3rem !important;
height: 3rem !important;
max-height: 3rem !important;
resize: none !important;
padding: 0.75rem 1.2rem !important;
line-height: 1.5 !important;
overflow-y: auto !important;
}

@media screen and (max-width: 768px) {
.booking-form .input-wrapper textarea {
min-height: 2.8rem !important;
height: 2.8rem !important;
max-height: 2.8rem !important;
padding: 0.6rem 1rem !important;
font-size: 0.95rem !important;
}
.booking-form .input-wrapper select {
height: 2.8rem !important;
min-height: 2.8rem !important;
}
}

@media screen and (max-width: 480px) {
.booking-form .input-wrapper textarea {
min-height: 2.5rem !important;
height: 2.5rem !important;
max-height: 2.5rem !important;
padding: 0.5rem 0.8rem !important;
font-size: 0.9rem !important;
}
.booking-form .input-wrapper select {
height: 2.5rem !important;
min-height: 2.5rem !important;
}
}

/* ================================
Booking summary: light theme readability
================================ */
.booking-summary,
.booking-summary h2,
.booking-summary .summary-content,
.booking-summary .summary-item,
.booking-summary .summary-item span,
.booking-summary #summary-checkin,
.booking-summary #summary-checkout,
.booking-summary #summary-nights,
.booking-summary #summary-rooms,
.booking-summary #summary-guests,
.booking-summary #summary-roomtype,
.booking-summary .summary-total,
.booking-summary .total-price,
.booking-summary .booking-features,
.booking-summary .booking-features h3,
.booking-summary .booking-features li {
color: #000 !important;
}

.booking-summary .summary-content {
background-color: rgba(255, 255, 255, 0.95) !important;
}

.booking-summary .booking-features li i {
color: #2ecc7a !important;
}

/* ================================
Mobile navigation drawer readability
================================ */
@media screen and (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;
text-shadow: none !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: 70px !important;
left: 0 !important;
width: 100% !important;
height: calc(100vh - 70px) !important;
z-index: 999 !important;
padding: 2rem 0 !important;
}
}

/* ================================
Testimonials slider (debug removed)
================================ /
.testimonials-slider-container {
position: relative !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 2rem 0 !important;
/ debug border removed */


.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(46, 204, 122, 0.9);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
color: #fff;
font-size: 1.2rem;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(46, 204, 122, 0.3);
}

.slider-btn:hover {
background: rgba(46, 204, 122, 1);
transform: translateY(-50%) scale(1.08);
box-shadow: 0 6px 25px rgba(46, 204, 122, 0.4);
}

.prev-btn { left: 1px; }
.next-btn { right: 1px; }

.testimonials-slider-container .testimonials-showcase {
display: flex !important;
overflow: hidden !important;
position: relative !important;
border-radius: 20px !important;
transition: transform 0.5s ease-in-out !important;
width: 100% !important;
grid-template-columns: unset !important;
gap: 0 !important;
margin-top: 0 !important;
}

.testimonial-slide {
min-width: 100% !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 2rem !important;
opacity: 0 !important;
transform: translateX(100%) !important;
transition: all 0.5s ease-in-out !important;
position: relative !important;
flex-shrink: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.testimonial-slide.active { opacity: 1 !important; transform: translateX(0) !important; }

.testimonial-slide .testimonial-card {
width: 100% !important;
position: relative !important;
margin: 0 !important;
flex: none !important;
}

.slider-dots {
display: flex;
justify-content: center;
gap: 0.8rem;
margin-top: 2rem;
}

.dot {
width: 12px; height: 12px; border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent;
}
.dot.active {
background: #2ecc7a; transform: scale(1.2); box-shadow: 0 0 15px rgba(46, 204, 122, 0.5);
}
.dot:hover { background: rgba(46, 204, 122, 0.7); transform: scale(1.1); }

@media screen and (max-width: 768px) {
.testimonials-slider-container { padding: 1rem 0 !important; margin: 0 1rem !important; }
.testimonials-slider-container .testimonials-showcase { grid-template-columns: unset !important; gap: 0 !important; }
.testimonial-slide { grid-template-columns: 1fr !important; gap: 1.5rem !important; min-width: 100% !important; }
.slider-btn { width: 40px !important; height: 40px !important; font-size: 1rem !important; }
.prev-btn { left: -20px !important; }
.next-btn { right: -20px !important; }
.slider-dots { margin-top: 1.5rem !important; gap: 0.6rem !important; }
.dot { width: 10px !important; height: 10px !important; }
}

@media screen and (max-width: 480px) {
.slider-btn { width: 35px; height: 35px; font-size: 0.9rem; }
.prev-btn { left: -15px; }
.next-btn { right: -15px; }
.testimonials-slider-container { margin: 0 0.5rem; }
}