/* Header customization: right-align nav while keeping logo left */
.navbar.container {
    --gap: 1rem;
    position: relative;
}

/* Smooth transitions for mobile menu */
.navbar .collapse {
    transition: opacity 0.2s ease-in-out;
}

.navbar .dropdown-menu {
    transition: all 0.2s ease-in-out;
}

.navbar-nav .nav-link {
    transition: color 0.2s ease;
}

/* make touch targets larger */
.navbar-nav .nav-link {
    padding: 12px 8px;
}

/* dropdown caret rotation when open */
.nav-link .caret-icon {
    display: inline-block;
    margin-left: 6px;
    transition: transform 220ms ease;
}

.dropdown.show > .nav-link .caret-icon,
.nav-link[aria-expanded="true"] .caret-icon {
    transform: rotate(45deg);
}

/* rotate caret when collapse is open */
.nav-item.dropdown #destinationsCollapse.show ~ .nav-link .caret-icon,
.nav-item.dropdown .nav-link[aria-expanded="true"] .caret-icon {
    transform: rotate(180deg);
}

.navbar .container-fluid.align-items-center {
	display: flex;
	align-items: center;
	gap: var(--gap);
}

/* Collapse area should sit to the right of the logo */
@media (min-width: 993px) {
    .navbar.container .container-fluid.align-items-center > .collapse,
    .navbar.container .container-fluid > .collapse,
    .navbar .collapse {
        display: flex !important;
        justify-content: flex-end !important;
        flex: 1 1 auto !important;
    }

    /* ensure nav items sit to the right */
    .navbar.container .container-fluid.align-items-center .navbar-nav,
    .navbar .navbar-nav {
        display: flex !important;
        align-items: center !important;
        gap: 2rem !important;
        justify-content: flex-end !important;
    }
}

/* paynow sits special on the far right */
.paynow-box {
	margin-left: 0.25rem;
	background: #ff1f1f;
	color: #fff !important;
	padding: 12px 18px;
	border-radius: 8px;
	font-weight: 800;
	text-align: center;
}

/* Mobile responsive styles */
@media (max-width: 992px) {
    /* Basic navbar structure */
    .navbar.container {
        padding: 0.5rem 1rem;
    }
    
    .navbar .container-fluid.align-items-center {
        padding: 0;
    }

    /* Collapse area - hidden by default, smooth slide when shown */
    .navbar .collapse {
        position: absolute !important;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        padding: 0.5rem 1rem;
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        z-index: 1000;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transform-origin: top center;
        transition: max-height 320ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease, transform 220ms ease;
    }

    /* When bootstrap adds .show we expand the container */
    .navbar .collapse.show {
        max-height: 1000px; /* large enough for our menu */
        opacity: 1;
        transform: translateY(0);
    }

    /* Navigation items */
    .navbar-nav {
        flex-direction: column !important;
        gap: 0.4rem !important;
        width: 100%;
        padding: 0.4rem 0 !important;
        align-items: stretch; /* left-align items for readability */
    }

    /* Dropdown adjustments (mobile accordion behavior) */
    .navbar .dropdown-menu {
        position: static !important;
        box-shadow: none;
        border: none;
        background: transparent;
        margin: 0;
        padding: 0;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 260ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease;
    }

    /* Use the .show class on the dropdown to expand - works when toggled via JS */
    .navbar .dropdown.show .dropdown-menu {
        background: #ffffff; /* clear white so items are visible */
        border-radius: 8px;
        padding: 0.25rem 0;
        max-height: 600px;
        opacity: 1;
        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    }

    /* Disable hover-triggered dropdowns on mobile */
    .navbar .dropdown:hover .dropdown-menu {
        display: none;
    }

    /* Pay Now button */
    .collapse .paynow-box {
        display: inline-flex;
        padding: 12px 16px;
        border-radius: 8px;
        width: 100%;
        justify-content: center;
        margin: 0.4rem 0;
        font-size: 15px;
    }

    /* hide the old plus sign ornament on mobile to reduce clutter */
    .plus-sign { display: none !important; }

    /* ensure caret is visible and sized for mobile */
    .caret-icon { font-size: 18px; margin-left: 8px; }

    .d-lg-block.ms-auto .paynow-box {
        display: none;
    }
    
    /* Toggle button */
    .navbar-toggler {
        padding: 0.5rem;
        border: none;
        outline: none !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    /* Tighter header on mobile */
    .navbar { padding: 0.5rem 0; }
    .navbar-brand img { height: 56px; }
}

/* Desktop: hide inline paynow in collapse */
@media (min-width: 993px) {
    .collapse .paynow-box {
        display: none;
    }
}

/* Dropdown menu styling */
.navbar .dropdown-menu {
    display: none;
    position: absolute;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
    min-width: 200px;
}

.navbar .dropdown:hover .dropdown-menu {
    display: block;
}

.navbar .dropdown-menu .nav-item {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
}

.navbar .dropdown-menu .nav-link {
    padding: 0.6rem 1.25rem;
    color: #333333;
    font-weight: 500;
    transition: background-color 0.18s, color 0.18s;
    display: block;
    width: 100%;
}

.navbar .dropdown-menu .nav-link:hover {
    background-color: #fff4f4;
    color: #ff1f1f;
}

/* active/selected destination */
.navbar .dropdown-menu .nav-link.active,
.navbar .dropdown-menu .nav-link.active:hover {
    background-color: #fff0ef;
    color: #ff1f1f;
}

/* desktop dropdown: ensure white background and larger min-width */
@media (min-width: 993px) {
    .navbar .dropdown-menu {
        display: none;
        position: absolute;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        padding: 0.4rem 0;
        min-width: 320px;
    }

    .navbar .dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* Make the destinations collapse behave as a desktop dropdown when large */
@media (min-width: 993px) {
    .nav-item.dropdown { position: relative; }
    #destinationsCollapse {
        position: absolute !important;
        top: 100%;
        left: 0;
        right: auto;
        display: none !important;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.09);
        padding: 0.35rem 0;
        min-width: 320px;
        z-index: 1050;
    }

    .nav-item.dropdown:hover > #destinationsCollapse {
        display: block !important;
    }

    /* ensure items inside look consistent */
    #destinationsCollapse .dropdown-item {
        padding: 0.6rem 1.25rem;
        color: #333;
        display: block;
    }
}

/* small tweaks */
.navbar-brand img {
    height: 48px;
    width: auto;
}