/* Navbar Styles - Transparent with White Text */
/* This file can be included in any page that uses the navbar */

/* Nav default — black at top, fading to transparent at the bottom */
#mainNav {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.55) 45%,
        rgba(0, 0, 0, 0.18) 80%,
        rgba(0, 0, 0, 0) 100%
    ) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: none !important;
    box-shadow: none !important;
}

.nav-brand {
    color: rgba(255, 255, 255, 1) !important;
}

.nav-link {
    color: rgba(255, 255, 255, 1) !important;
}

.nav-icon {
    color: rgba(255, 255, 255, 1) !important;
}

.nav-action {
    color: rgba(255, 255, 255, 1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Nav scroll effect - White background with shadow and black text when sticky */
#mainNav.nav-scrolled {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

#mainNav.nav-scrolled .nav-brand {
    color: rgba(17, 24, 39, 1) !important; /* text-gray-900 */
}

#mainNav.nav-scrolled .nav-link {
    color: rgba(17, 24, 39, 1) !important; /* text-gray-900 */
}

#mainNav.nav-scrolled .nav-link:hover {
    color: rgba(51, 98, 203, 1) !important; /* theme blue */
}

#mainNav.nav-scrolled .nav-icon {
    color: rgba(51, 98, 203, 1) !important; /* theme blue */
}

#mainNav.nav-scrolled .nav-action {
    color: rgba(17, 24, 39, 1) !important; /* text-gray-900 */
    border-color: rgba(203, 213, 225, 1) !important; /* border-gray-300 */
}

#mainNav.nav-scrolled .nav-action:hover {
    background: rgba(241, 245, 249, 1) !important; /* bg-gray-100 */
}

#mainNav.nav-scrolled span.font-semibold {
    color: rgba(17, 24, 39, 1) !important; /* text-gray-900 */
}

/* Only affect buttons directly inside navbar container, exclude quick-booking */
#mainNav.nav-scrolled .max-w-7xl > div > button:not(.quick-booking button),
#mainNav.nav-scrolled button.nav-action,
#mainNav.nav-scrolled #mobileMenuBtn {
    color: rgba(17, 24, 39, 1) !important;
    border-color: rgba(203, 213, 225, 1) !important;
}


/* Protect quick-booking elements from navbar styles - restore original styles */
/* Protect quick-booking elements from navbar styles - restore original styles */
.quick-booking button.category-chip {
    color: inherit !important;
    background-color: inherit !important;
    border-color: inherit !important;
}

.quick-booking button.category-chip.active {
    border-color: #059669 !important;
    background: #ecfdf3 !important;
    color: #065f46 !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15) !important;
}

/* Non-active category chip */
.quick-booking button.category-chip:not(.active) {
    border-color: rgb(254 243 199 / 1) !important; /* border-amber-100 */
    background-color: rgb(255 251 235 / 1) !important; /* bg-amber-50 */
    color: rgb(180 83 9 / 1) !important; /* text-amber-700 */
}

.quick-booking button[type="submit"] {
    background-color: #2563eb !important; /* bg-blue-600 */
    color: rgba(255, 255, 255, 1) !important;
    border-color: transparent !important;
}

.quick-booking button[type="submit"]:hover {
    background-color: #1d4ed8 !important; /* hover:bg-blue-700 */
}

.quick-booking input,
.quick-booking select {
    color: #111827 !important; /* text-gray-900 */
    background-color: #ffffff !important;
    border-color: #e5e7eb !important; /* border-gray-200 */
}

/* Protect all blue buttons from navbar styles - ensure they stay blue */
button.bg-blue-600,
a.bg-blue-600,
.bg-blue-600 button,
.bg-blue-600 a,
button[class*="bg-blue-600"],
a[class*="bg-blue-600"] {
    background-color: #2563eb !important; /* bg-blue-600 */
    color: rgba(255, 255, 255, 1) !important;
    border-color: transparent !important;
}

button.bg-blue-600:hover,
a.bg-blue-600:hover,
.bg-blue-600 button:hover,
.bg-blue-600 a:hover,
button[class*="bg-blue-600"]:hover,
a[class*="bg-blue-600"]:hover {
    background-color: #1d4ed8 !important; /* hover:bg-blue-700 */
}

/* Ensure all View Details and Submit buttons stay blue */
a[href*="/packages/"],
button[type="submit"]:not(.nav-action),
button#ctaSubmitBtn {
    background-color: #2563eb !important; /* bg-blue-600 */
    color: rgba(255, 255, 255, 1) !important;
    border-color: transparent !important;
}

a[href*="/packages/"]:hover,
button[type="submit"]:not(.nav-action):hover,
button#ctaSubmitBtn:hover {
    background-color: #1d4ed8 !important; /* hover:bg-blue-700 */
}