/* Custom CSS for Halalsummer.com Hotel Template */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Color Palette (Example: Blue, White, Green) */
:root {
    --primary-color: #007bff; /* Bootstrap primary blue */
    --secondary-color: #28a745; /* Bootstrap success green */
    --light-color: #f8f9fa; /* Bootstrap light grey */
    --dark-color: #343a40; /* Bootstrap dark grey */
}

/* Header & Overview */
#overview h1 {
    color: var(--primary-color);
}

#overview .badge {
    font-size: 0.9em;
}

#overview .ratings span {
    display: block;
    margin-bottom: 5px;
    font-size: 0.95em;
}

/* Booking Panel */
#booking-panel .card-header {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
}

#booking-panel .btn-primary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

#booking-panel .btn-primary:hover {
    background-color: #218838; /* Darker green */
    border-color: #1e7e34;
}

#booking-panel .btn-info {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

#booking-panel .btn-info:hover {
    background-color: #0056b3;
    border-color: #004085;
}

.sticky-top {
    /* Ensure sticky panel works correctly */
    z-index: 1020; /* Below potential modals but above content */
}

/* Image Gallery */
.image-gallery-swiper {
    width: 100%;
    height: 400px; /* Adjust height as needed */
    margin-bottom: 1rem;
}

.image-gallery-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Features Tabs */
#features .nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-color: #dee2e6 #dee2e6 var(--primary-color);
}

#features .nav-tabs .nav-link {
    color: var(--dark-color);
}

/* SEO Content Sections */
#seo-content .card-header {
    background-color: var(--light-color);
    font-weight: bold;
}

#seo-content .fa-plus-circle {
    color: var(--secondary-color);
}

#seo-content .fa-minus-circle {
    color: #dc3545; /* Bootstrap danger red */
}

/* FAQ Accordion */
#faq .accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: #e7f1ff; /* Light blue background */
}

/* Footer */
footer {
    border-top: 1px solid #dee2e6;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    #booking-panel {
        margin-top: 2rem;
    }
    .sticky-top {
        position: static !important; /* Disable sticky on smaller screens */
    }
}

@media (max-width: 767.98px) {
    #overview h1 {
        font-size: 1.8rem;
    }
    .image-gallery-swiper {
        height: 300px;
    }
}