:root {

    --primary: #0f766e;

    --secondary: #14532d;

    --accent: #f59e0b;

    --background: #faf9f6;

    --text: #1e293b;

    --text-light: #64748b;

    --white: #ffffff;

    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    --radius: 0.75rem;

    --gold: #C19A6B;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Inter', system-ui, -apple-system, sans-serif;

    background-color: var(--background);

    color: var(--text);

    line-height: 1.5;

}



main {

    background-color: var(--background);

}



/* Header */

header {

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 100;

    /* Strong Shadow Replacement (Increased by 50%) */

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.23);

    border-bottom: none;

}



nav {

    max-width: 1200px;

    margin: 0 auto;

    padding: 1rem 2rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    font-size: 1.5rem;

    font-weight: 800;

    color: var(--primary);

    text-decoration: none;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

}



.navbar-motif {

    width: 100%;

    /* height: 32px; */

    display: none;

    background-image: url('../img/navbar-motif.png');

    background-repeat: repeat-x;

    background-position: center;

    background-size: auto 100%;

    margin-bottom: 0;

}



.nav-links a {

    color: var(--text);

    text-decoration: none;

    margin-left: 1.5rem;

    font-weight: 500;

    transition: color 0.2s;

    font-size: 1.05rem;

    font-family: 'Raleway', sans-serif;

}



/* Navbar Images */

.nav-logo {

    height: 69px;

    position: relative;

    z-index: 10;

    transition: height 0.3s ease;

}



.nav-badge {

    height: 69px;

    position: relative;

    z-index: 10;

    transition: height 0.3s ease;

}



/* Hero Section */

.hero {

    height: 80vh;

    background: url('../img/hero-custom.jpg') center/cover no-repeat;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: var(--white);

    margin-top: 0;

    margin-bottom: 4rem;

    position: relative;

    transition: background-image 1s ease-in-out;

}



.hero-with-overlay::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, var(--hero-overlay-opacity, 0.4));

    z-index: 1;

}



.hero-with-overlay .hero-content {

    position: relative;

    z-index: 2;

}



.hero-content h1 {

    font-size: 4rem;

    font-weight: 800;

    margin-bottom: 1rem;

    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);

    color: var(--white);

}



.hero-content p {

    font-size: 2rem;

    margin-bottom: 2rem;

    opacity: 0.9;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

}



.btn {

    display: inline-block;

    padding: 1rem 2rem;

    background-color: #0f766e;

    color: var(--white);

    text-decoration: none;

    border-radius: 2rem;

    font-weight: 600;

    transition: transform 0.2s, background-color 0.2s;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

    border: 1px solid #C19A6B;

}



.btn:hover {

    background-color: #0d6b63;

    transform: translateY(-2px);

}



/* Tours Grid */

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 2rem 4rem;

}



.section-title {

    text-align: center;

    margin-bottom: 3rem;

}



.section-title h2 {

    font-size: 2.5rem;

    color: var(--text);

    margin-bottom: 0.5rem;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

}



.tours-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

    gap: 2rem;

}



.tour-card {

    background: var(--white);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    display: flex;

    /* NEW: Flex layout */

    flex-direction: column;

    /* NEW: Vertical stacking */

    height: 100%;

    /* NEW: Full height */

}



.tour-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);

}



.tour-image-container {

    position: relative;

    height: 240px;

    overflow: hidden;

}



.tour-tag {

    position: absolute;

    top: 1rem;

    right: 1rem;

    background: #002035;

    color: #ffffff;

    padding: 0.25rem 0.75rem;

    border-radius: 2rem;

    font-size: 0.875rem;

    font-weight: 600;

    z-index: 10;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}



/* Diagonal Ribbon Styles */

.ribbon-wrapper {

    position: absolute;

    top: 0;

    left: 0;

    width: 85px;

    height: 85px;

    overflow: hidden;

    z-index: 10;

    pointer-events: none;

}



.ribbon {

    position: absolute;

    top: 15px;

    left: -30px;

    width: 120px;

    transform: rotate(-45deg);

    text-align: center;

    font-size: 0.7rem;

    font-weight: 700;

    padding: 5px 0;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.tour-image {

    height: 100%;

    width: 100%;

    object-fit: cover;

}



.tour-content {

    padding: 1.5rem;

    flex: 1;

    /* NEW: Content fills available space, pushing footer down */

    display: flex;

    /* NEW: Flex layout for content */

    flex-direction: column;

    /* NEW: Vertical stacking */

}



.tour-category {

    font-size: 0.875rem;

    color: var(--primary);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 0.5rem;

}



.tour-title {

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

    color: var(--text);

}



.tour-desc {

    color: var(--text-light);

    margin-bottom: 1.5rem;

    line-height: 1.6;

    white-space: pre-line;

}



.tour-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 1rem;

    border-top: 1px solid #e2e8f0;

    margin-top: auto;

    /* Push footer to the bottom */

}



.tour-price {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--text);

}



.tour-duration {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--text-light);

    font-size: 0.875rem;

}







.loading {

    grid-column: 1 / -1;

    text-align: center;

    padding: 4rem;

    color: var(--text-light);

    font-size: 1.25rem;

}



/* Form Styles */

.form-group {

    margin-bottom: 1.5rem;

}



.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: 500;

    color: var(--text);

}



.form-control {

    width: 100%;

    padding: 0.75rem;

    border: 1px solid #e2e8f0;

    border-radius: 0.5rem;

    font-family: inherit;

    font-size: 16px;

    min-height: 48px;

}



.form-control:focus {

    outline: none;

    border-color: var(--primary);

}



/* Footer */

footer {

    background: #A68256;

    color: #e2e8f0;

    margin-top: 4rem;

}



.footer-content {

    max-width: 1200px;

    margin: 0 auto;

    padding: 3rem 2rem;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

}



.footer-section h3 {

    color: #ffffff;

    font-size: 1.125rem;

    font-weight: 600;

    margin-bottom: 1.5rem;

}



.footer-section p {

    color: #e8e8e8;

    line-height: 1.6;

    font-size: 0.875rem;

}



.footer-section ul {

    list-style: none;

}



.footer-section ul li {

    margin-bottom: 0.75rem;

}



.footer-section ul li a {

    color: #ffffff;

    text-decoration: none;

    transition: color 0.2s;

    font-size: 0.875rem;

    opacity: 0.9;

}



.footer-section ul li a:hover {

    color: var(--accent);

    opacity: 1;

}



.contact-info li {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

    color: #e8e8e8;

    font-size: 0.875rem;

    margin-bottom: 1.25rem;

}



.contact-info li svg {

    flex-shrink: 0;

    margin-top: 0.1rem;

    color: var(--accent);

}



.footer-bottom {

    border-top: 1px solid #8a6a45;

    padding: 1.5rem 2rem;

    text-align: center;

}



.footer-bottom p {

    color: #d4d4d4;

    font-size: 0.875rem;

    max-width: 1200px;

    margin: 0 auto;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

}



/* Footer Social Links */

.footer-social {

    display: flex;

    gap: 0.75rem;

    margin-top: 1rem;

}



.footer-social .social-link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    color: white;

    font-size: 1rem;

    transition: all 0.3s ease;

    text-decoration: none;

}



.footer-social .social-link:hover {

    transform: translateY(-3px);

    background: rgba(255, 255, 255, 0.25);

}



.footer-social .social-link.facebook:hover {

    background: #1877f2;

}



.footer-social .social-link.instagram:hover {

    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);

}



.footer-social .social-link.twitter:hover {

    background: #1da1f2;

}



.footer-social .social-link.youtube:hover {

    background: #ff0000;

}



.footer-social .social-link.linkedin:hover {

    background: #0077b5;

}



.footer-social .social-link.tiktok:hover {

    background: #000000;

}



/* Mobile Menu Button */

.mobile-menu-btn {

    display: none;

    flex-direction: column;

    justify-content: space-between;

    width: 30px;

    height: 21px;

    cursor: pointer;

    z-index: 101;

}



.mobile-menu-btn span {

    display: block;

    height: 3px;

    width: 100%;

    background-color: var(--primary);

    border-radius: 3px;

    transition: all 0.3s ease;

}



/* Responsive */

@media (max-width: 768px) {



    /* Navbar Adjustments */

    nav {

        padding: 0.5rem 1rem;

    }



    .nav-logo {

        height: 46px;

    }



    .nav-badge {

        display: none;

    }



    .navbar-motif {

        height: 20px;

    }



    /* Hero Adjustments */

    .hero {

        height: 50vh;

        margin-bottom: 2rem;

        background-position: center top;

    }



    .hero-content {

        width: 100%;

        max-width: 100%;

        padding: 0 1rem;

    }



    .hero-content h1 {

        font-size: 1.5rem !important;

        margin-bottom: 0.5rem !important;

        line-height: 1.2 !important;

    }



    .hero-content p {

        font-size: 1rem !important;

        margin-bottom: 1rem !important;

        line-height: 1.3 !important;

    }



    .hero .btn {

        padding: 0.75rem 1.5rem;

        font-size: 0.9rem;

    }



    .tours-grid {

        grid-template-columns: 1fr;

    }



    .footer-content {

        grid-template-columns: 1fr !important;

    }



    /* Mobile Navigation */

    .mobile-menu-btn {

        display: flex;

    }



    .nav-links {

        position: fixed;

        top: 0;

        right: -100%;

        height: 100vh;

        width: 70%;

        background-color: white;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        transition: right 0.3s ease-in-out;

        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);

        z-index: 100;

    }



    .nav-links.active {

        right: 0;

    }



    .nav-links a {

        margin: 1.5rem 0;

        font-size: 1.2rem;

    }



    /* Hamburger Animation */

    .mobile-menu-btn.active span:nth-child(1) {

        transform: translateY(9px) rotate(45deg);

    }



    .mobile-menu-btn.active span:nth-child(2) {

        opacity: 0;

    }





    .mobile-menu-btn.active span:nth-child(3) {

        transform: translateY(-9px) rotate(-45deg);

    }

}



/* Contact Buttons (Global) */

.contact-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.5rem 1rem;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    font-size: 0.9rem;

    transition: all 0.3s ease;

    border: 2px solid transparent;

    cursor: pointer;

}



.contact-btn i,

.contact-btn svg {

    margin-right: 0.5rem;

    font-size: 1.1rem;

}



.contact-btn.whatsapp {

    border-color: #25D366;

    color: #25D366;

    background: transparent;

}





.contact-btn.whatsapp:hover {

    background-color: #25D366;

    color: white;

}



/* Navbar Wizard Button (Standard Btn Style) */

.nav-wizard-btn {

    background-color: #0f766e;

    color: white !important;

    padding: 0.5rem 1.25rem;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    /* Match standard btn border and shadow */

    border: 1px solid #C19A6B;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);



    transition: transform 0.2s, background-color 0.2s;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    margin-left: 1rem;

}



.nav-wizard-btn:hover {

    transform: translateY(-2px);

    background-color: #0d6b63;

    color: white;

}



.nav-wizard-btn i {

    font-size: 0.9em;

}



/* Mobile Wizard Button Adjustments */

@media (max-width: 768px) {

    .nav-wizard-btn {

        margin-left: 0;

        margin-top: 1rem;

        width: 80%;

        justify-content: center;

        padding: 1rem;

        font-size: 1.1rem;

        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    }

}



/* Mobile Responsiveness for Planner Page */

@media (max-width: 768px) {



    /* Layout Adjustments */

    .planner-container {

        grid-template-columns: 1fr !important;

        padding: 0 1rem;

    }



    .wizard-content {

        padding: 1.5rem;

    }



    /* Headings */

    #step1 h1 {

        font-size: 1.75rem !important;

        line-height: 1.2;

    }



    #step1 h2 {

        font-size: 1.5rem;

        margin-top: 1rem;

    }



    /* Form Fields Alignment */

    .form-grid {

        display: flex;

        flex-direction: column;

        align-items: flex-start !important;

        gap: 1rem !important;

    }



    .form-grid .form-group {

        width: 100%;

        margin-bottom: 0.5rem;

    }



    .form-grid input,

    .form-grid select {

        width: 100% !important;

    }



    /* Participants Section */

    .participants-grid {

        display: flex;

        flex-direction: column;

        align-items: flex-start !important;

        gap: 1rem !important;

    }



    .participants-grid .form-group {

        width: 100%;

        display: flex;

        justify-content: space-between;

        align-items: center;

        flex-wrap: wrap;

    }



    .participants-grid .form-group label {

        margin-bottom: 0;

    }



    .participants-grid .form-group input {

        width: 50px !important;

    }



    /* Room Configuration */

    .add-room-controls {

        flex-direction: column;

        gap: 0.5rem;

    }



    .add-room-controls button {

        width: 100%;

    }



    #roomConfigSection>div[style*="flex"] {

        flex-direction: column !important;

        align-items: stretch !important;

    }



    #roomTypeSelect {

        width: 100% !important;

        margin-bottom: 0.5rem;

    }



    /* Summary Sidebar */

    .summary-sidebar {

        position: static;

        margin-top: 2rem;

        width: 100%;

    }



    .summary-card {

        padding: 1rem;

    }



    .wizard-steps {

        display: flex;

        justify-content: space-between;

        margin-bottom: 1.5rem;

        font-size: 0.8rem;

    }



    /* Dynamically created elements responsiveness */

    .day-card-header {

        flex-direction: column;

        align-items: flex-start !important;

        gap: 0.5rem;

    }



    .step-navigation-buttons {

        flex-direction: column-reverse;

        /* Stack buttons, Back on bottom */

        gap: 1rem;

    }



    .step-navigation-buttons button {

        width: 100%;

    }



    /* Review Page Mobile */

    .review-actions-container {

        flex-direction: column;

    }



    .review-actions-container button {

        width: 100%;

    }



    #childAgesInputs>div {

        width: 100%;

    }

}



/* Base styles for the new classes (Desktop default) */

.day-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1.5rem;

}



.step-navigation-buttons {

    display: flex;

    justify-content: space-between;

    margin-top: 2rem;

}



.review-actions-container {

    display: flex;

    gap: 1rem;

    margin-top: 1rem;

}



/* 3D Book Now Button - Added for Tour Details */

#bookNowBtn,

#submitBtn {

    /* Layout properties moved from inline style */

    width: 100%;

    text-align: center;

    display: block;

    padding: 1rem;

    font-size: 1.25rem;



    /* 3D Visual Styling */

    background-color: #C19A6B;

    /* Fallback */

    background: linear-gradient(to bottom, #d4b081, #a88456);

    /* Gradient for volume */

    color: white;

    font-weight: 800;

    /* Bolder text */

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

    /* Text depth */



    border: 1px solid #8e6c42;

    /* Darker border */

    border-bottom: 6px solid #6b4f2c !important;

    /* The 3D "side" - force strict override */

    border-radius: 1rem;

    /* Softer corners */



    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.2) !important;



    transition: all 0.1s ease-in-out;

    /* Fast snappy transition */

    position: relative;

    top: 0;

    margin-top: 1rem;

    touch-action: manipulation;

    /* Improves touch response */

}



#bookNowBtn:hover,

#submitBtn:hover {

    background: linear-gradient(to bottom, #dac09a, #b09169);

    /* Lighter on hover */

    transform: translateY(-2px);

    /* Lift effect */

    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.2) !important;

    border-bottom-width: 6px !important;

    /* Maintain thick bottom */

}



#bookNowBtn:active,

#submitBtn:active {

    background: linear-gradient(to bottom, #a88456, #d4b081);

    /* Inverted gradient or darker */

    transform: translateY(4px);

    /* Push down */

    border-bottom-width: 2px !important;

    /* Squash the 3D side */

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;

    /* Reduced shadow */

    border-bottom-color: #6b4f2c;

    /* Keep same color */

    outline: none;

}



/* Hotel Selection Styles */

#hotelSelectionContainer {

    margin-top: 2rem;

    margin-bottom: 2rem;

}



.selected-hotel-card {

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 0.75rem;

    padding: 1.5rem;

    display: flex;

    align-items: center;

    gap: 1.5rem;

    transition: all 0.3s ease;

}



.selected-hotel-card:hover {

    border-color: var(--primary);

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

}



.hotel-thumb {

    width: 100px;

    height: 100px;

    border-radius: 0.5rem;

    object-fit: cover;

}



.hotel-info-main {

    flex: 1;

}



.hotel-name-badge {

    background: var(--primary);

    color: white;

    padding: 0.25rem 0.75rem;

    border-radius: 1rem;

    font-size: 0.8rem;

    font-weight: 600;

    display: inline-block;

    margin-bottom: 0.5rem;

}



.change-hotel-btn {

    padding: 0.5rem 1rem;

    border: 1px solid var(--primary);

    color: var(--primary);

    background: transparent;

    border-radius: 0.5rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s;

}



.change-hotel-btn:hover {

    background: var(--primary);

    color: white;

}



/* Modal Styles */

.modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(5px);

    z-index: 1000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 2rem;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.modal-overlay.active {

    display: flex;

    opacity: 1;

}



.hotel-modal-content {

    background: white;

    width: 100%;

    max-width: 1000px;

    border-radius: 1rem;

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    max-height: 90vh;

    overflow-y: auto;

    position: relative;

    transform: translateY(20px);

    transition: transform 0.3s ease;

}



.modal-overlay.active .hotel-modal-content {

    transform: translateY(0);

}



.modal-header {

    padding: 1.5rem 2rem;

    border-bottom: 1px solid #e2e8f0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: sticky;

    top: 0;

    background: white;

    z-index: 10;

}



.close-modal {

    background: none;

    border: none;

    font-size: 1.5rem;

    cursor: pointer;

    color: var(--text-light);

}



.hotel-options-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 1.5rem;

    padding: 2rem;

}



.hotel-option-card {

    border: 1px solid #e2e8f0;

    border-radius: 0.75rem;

    overflow: hidden;

    transition: all 0.3s;

    cursor: pointer;

    position: relative;

    display: flex;

    flex-direction: column;

}



.hotel-option-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    border-color: var(--primary);

}



.hotel-option-card.selected {

    border: 2px solid var(--primary);

    background: #f0fdf4;

}



.hotel-option-header {

    height: 200px;

    overflow: hidden;

}



.hotel-option-header img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s;

}



.hotel-option-card:hover .hotel-option-header img {

    transform: scale(1.05);

}



.hotel-option-body {

    padding: 1.5rem;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.hotel-features {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin: 1rem 0;

}



.feature-tag {

    font-size: 0.75rem;

    background: #f1f5f9;

    padding: 0.25rem 0.5rem;

    border-radius: 4px;

    color: #475569;

}



.price-difference {

    background: #A68256;

    color: #ffffff;

    font-weight: 700;

    padding: 0.5rem;

    text-align: center;

    border-radius: 0.5rem;

    margin-top: auto;

}



.hotel-option-card.selected .price-difference {

    background: var(--primary);

    color: white;

}



@media (max-width: 768px) {

    .selected-hotel-card {

        flex-direction: column;

        align-items: flex-start;

    }



    .hotel-thumb {

        width: 100%;

        height: 150px;

    }



    .change-hotel-btn {

        width: 100%;

    }

}



/* Hotel Carousel */

.hotel-carousel-container {

    position: relative;

    width: 100px;

    height: 100px;

    border-radius: 0.5rem;

    overflow: hidden;

    flex-shrink: 0;

}



.hotel-carousel-slide {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: none;

}



.hotel-carousel-slide.active {

    display: block;

}



.carousel-nav-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(0, 0, 0, 0.5);

    color: white;

    border: none;

    cursor: pointer;

    font-size: 0.8rem;

    padding: 0.2rem 0.4rem;

    z-index: 2;

}



.carousel-prev {

    left: 0;

}



.carousel-next {

    right: 0;

}



/* In Modal Card Carousel */

.hotel-option-header .carousel-container {

    height: 100%;

    width: 100%;

    position: relative;

}



.hotel-option-header .carousel-slide {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: none;

    transition: transform 0.5s;

}



.hotel-option-header .carousel-slide.active {

    display: block;

}



.price-difference.discount {

    background: #dcfce7;

    color: #166534;

}



/* Split Date Input Styles */

.split-date-container {

    display: flex;

    gap: 0.5rem;

    align-items: flex-start;

}



.split-date-item {

    display: flex;

    flex-direction: column;

}



.split-date-input {

    text-align: center;

    padding: 0.75rem 0.5rem;

    border: 1px solid #e2e8f0;

    border-radius: 0.5rem;

    font-family: inherit;

    font-size: 1rem;

    transition: all 0.2s;

    width: 60px;

    /* Default width for DD/MM */

}



.split-date-input.year-input {

    width: 90px;

}



.split-date-input:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.1);

}



.split-date-separator {

    font-size: 1.5rem;

    color: #cbd5e1;

    font-weight: 300;

    margin-top: 0.25rem;

    align-self: flex-start;

    padding-top: 0.5rem;

}



.split-date-label {

    font-size: 0.75rem;

    color: var(--text-light);

    margin-bottom: 0.25rem;

    text-align: center;

}



@media (max-width: 480px) {

    .split-date-input {

        width: 100%;

    }



    .split-date-input.year-input {

        width: 100%;

    }



    .split-date-item {

        flex: 1;

    }

}



/* Filter Buttons Global Design */

.filter-btn {

    padding: 0.75rem 1.75rem;

    border: 2px solid var(--gold);

    background: transparent;

    color: #000;

    border-radius: 0;

    font-weight: 500;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

    cursor: pointer;

    transition: all 0.2s;

    letter-spacing: 1px;

    text-transform: uppercase;

    font-size: 0.85rem;

}



.filter-btn.active,

.filter-btn:hover {

    background: var(--gold);

    color: white;

    border-color: var(--gold);

}



/* Planner Booking Request Button Style */

.btn-book-planner {

    display: block;

    width: 100%;

    padding: 1rem 2rem;

    background-color: #2C9E65;

    color: var(--white);

    text-decoration: none;

    border-radius: 2rem;

    font-weight: 600;

    text-align: center;

    transition: transform 0.2s, background-color 0.2s;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

    border: 1px solid #C19A6B;

    margin-top: 1.5rem;

    font-size: 1.1rem;

    cursor: pointer;

}



.btn-book-planner:hover {

    background-color: #238052;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);


}