/* Base transitions for smooth changes */
body,
.navbar,
.nav-link,
.btn {
    transition: all 0.3s ease-in-out;
}

/* Essential for fixed navbar content to not be hidden by content above */
body {
    padding-top: 70px; /* Adjust based on your navbar's actual height */
}

/* Custom Navbar Styling and Fixed Positioning */
.navbar-custom {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;

    background-color: transparent !important;
    box-shadow: none !important;
}

.navbar-custom .navbar-brand {
    color: var(--bs-black) !important;
}
.navbar-custom .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.75);
    font-size: 0.8rem;
    text-transform: none !important;
}

/* NEW: Styling for Feather Icons inside nav-links and theme toggle */
.navbar-custom .navbar-nav .nav-link svg,
.navbar-custom #themeToggle svg {
    width: 16px; /* Ukuran ikon lebih kecil */
    height: 16px; /* Ukuran ikon lebih kecil */
    stroke-width: 2.5; /* Ketebalan garis ikon, bisa disesuaikan */
}

/* NEW: Jarak antara ikon dan teks */
.navbar-custom .navbar-nav .nav-link svg + span {
    margin-left: 0.5rem; /* Jarak antara ikon dan teks */
}

.navbar-custom .navbar-toggler-icon {
    filter: none; /* Dark icon for light transparent background */
}
.navbar-custom .vr {
    background-color: rgba(0, 0, 0, 0.5) !important;
}
.navbar-custom #themeToggle .fas {
    /* Ini untuk Font Awesome, tapi Anda pakai Feather. Akan dihapus/diabaikan */
    color: rgba(0, 0, 0, 0.75);
}
/* NEW: Warna ikon theme toggle untuk mode terang (awal) */
.navbar-custom #themeToggle svg {
    color: rgba(0, 0, 0, 0.75);
    stroke: rgba(
        0,
        0,
        0,
        0.75
    ); /* Feather Icons menggunakan 'stroke' untuk warna */
}

/* Hover and active states for nav links (transparent/light mode) */
.navbar-nav .nav-item .nav-link:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--bs-black) !important;
    border-radius: 0.5rem;
}

.navbar-nav .nav-item .nav-link.active {
    background-color: rgba(0, 0, 0, 0.15);
    color: var(--bs-black) !important;
    border-radius: 0.5rem;
}

/* Styling for the primary button (Register) */
.navbar-nav .nav-item .nav-link.btn-primary {
    background-color: #006655 !important;
    border-color: #006655 !important;
    color: var(--bs-white) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.navbar-nav .nav-item .nav-link.btn-primary:hover {
    background-color: #005243 !important;
    border-color: #005243 !important;
    color: var(--bs-white) !important;
    opacity: 1;
}

.navbar-custom.scrolled .navbar-nav .nav-item .nav-link.btn-primary,
.navbar-custom.scrolled .navbar-nav .nav-item .nav-link.btn-primary:hover,
.navbar-custom.scrolled .navbar-nav .nav-item .nav-link.btn-primary.active {
    background-color: #006655 !important;
    border-color: #006655 !important;
    color: var(--bs-white) !important;
}

/* Dark mode specific styles for desktop transparent state */
body.dark-only {
    background-color: #1a202c;
    color: #e2e8f0;
}
body.dark-only .navbar-custom .navbar-brand,
body.dark-only .navbar-custom .navbar-nav .nav-link {
    /* Removed #themeToggle .fas from here */
    color: var(
        --bs-white
    ) !important; /* White text for transparent navbar in dark mode */
}
/* NEW: Warna ikon theme toggle untuk mode gelap (awal) */
body.dark-only .navbar-custom #themeToggle svg {
    color: var(--bs-white) !important;
    stroke: var(--bs-white) !important;
}
body.dark-only .navbar-custom .navbar-toggler-icon {
    filter: invert(1); /* Ensure icon is visible in dark mode transparent */
}
body.dark-only .navbar-nav .nav-item .nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-white) !important;
}
body.dark-only .navbar-nav .nav-item .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--bs-white) !important;
}
body.dark-only .navbar-custom .vr {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Styles when navbar is scrolled (desktop or mobile when menu is closed) */
.navbar-custom.scrolled {
    background-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(0.8rem);
    -webkit-backdrop-filter: blur(0.8rem);
}
.navbar-custom.scrolled .navbar-brand,
.navbar-custom.scrolled .nav-link {
    /* Removed #themeToggle .fas from here */
    color: rgba(0, 0, 0, 0.78) !important;
}
/* NEW: Warna ikon theme toggle ketika di-scroll */
.navbar-custom.scrolled #themeToggle svg {
    color: rgba(0, 0, 0, 0.78) !important;
    stroke: rgba(0, 0, 0, 0.78) !important;
}
.navbar-custom.scrolled .navbar-toggler-icon {
    filter: none;
}

/* Styles for hover/active when scrolled */
.navbar-custom.scrolled .navbar-nav .nav-item .nav-link:hover:not(.active),
.navbar-custom.scrolled .navbar-nav .nav-item .nav-link.active {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--bs-black) !important;
}

/* Media queries for responsive adjustments (Mobile Menu) */
@media (max-width: 991.98px) {
    .navbar-collapse {
        padding: 1rem;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);

        /* Default background for collapsed menu (light theme, NOT SCROLLED) */
        background-color: var(--bs-light) !important;
    }

    body.dark-only .navbar-collapse {
        background-color: var(--bs-dark) !important;
    }

    /* NEW: Collapsed menu follows the glass navbar when navbar IS SCROLLED */
    .navbar-custom.scrolled .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.8) !important;
        box-shadow: none !important;
        backdrop-filter: blur(0.8rem) !important;
        -webkit-backdrop-filter: blur(0.8rem) !important;
    }

    /* NEW: Text color for collapsed menu */
    /* Default text color for light theme menu (when not scrolled) */
    .navbar-collapse .nav-link,
    .navbar-collapse #themeToggle {
        /* Target theme toggle inside collapsed menu */
        color: var(--bs-dark) !important;
    }
    /* Text color for dark theme menu (when not scrolled) */
    body.dark-only .navbar-collapse .nav-link,
    body.dark-only .navbar-collapse #themeToggle {
        color: var(--bs-white) !important;
    }
    /* NEW: Text color for collapsed menu when navbar IS SCROLLED */
    .navbar-custom.scrolled .navbar-collapse .nav-link,
    .navbar-custom.scrolled .navbar-collapse #themeToggle {
        color: rgba(0, 0, 0, 0.78) !important;
    }

    /* NEW: Hover/Active states for collapsed menu */
    /* Light theme hover/active (when not scrolled) */
    .navbar-collapse .navbar-nav .nav-item .nav-link:hover:not(.active) {
        background-color: rgba(0, 0, 0, 0.1) !important;
        color: var(--bs-dark) !important;
    }
    .navbar-collapse .navbar-nav .nav-item .nav-link.active {
        background-color: rgba(0, 0, 0, 0.15) !important;
        color: var(--bs-dark) !important;
    }
    /* Dark theme hover/active (when not scrolled) */
    body.dark-only
        .navbar-collapse
        .navbar-nav
        .nav-item
        .nav-link:hover:not(.active) {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: var(--bs-white) !important;
    }
    body.dark-only .navbar-collapse .navbar-nav .nav-item .nav-link.active {
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: var(--bs-white) !important;
    }
    /* NEW: Hover/Active when collapsed menu is open AND navbar IS SCROLLED */
    .navbar-custom.scrolled
        .navbar-collapse
        .navbar-nav
        .nav-item
        .nav-link:hover:not(.active) {
        background-color: rgba(0, 0, 0, 0.08) !important;
        color: var(--bs-black) !important;
    }
    .navbar-custom.scrolled
        .navbar-collapse
        .navbar-nav
        .nav-item
        .nav-link.active {
        background-color: rgba(0, 0, 0, 0.12) !important;
        color: var(--bs-black) !important;
    }

    .navbar-nav .nav-item .nav-link {
        padding: 0.75rem 1rem !important;
        font-size: 1rem;
        text-transform: none !important;
    }

    .navbar-nav .nav-item .nav-link.btn-primary {
        margin-top: 0.5rem;
        width: 100%;
        text-align: center;
    }

    .navbar-nav .nav-item .vr {
        display: none !important;
    }
    #themeToggle {
        width: 100%;
        text-align: center;
        padding: 0.75rem 1rem !important;
        margin-top: 0.5rem !important;
    }
    /* Specific fix for toggler icon (hamburger) */
    /* Default icon color when transparent (light theme) */
    .navbar-custom:not(.scrolled) .navbar-toggler-icon {
        filter: none; /* Dark icon */
    }
    /* Default icon color when transparent (dark theme) */
    body.dark-only .navbar-custom:not(.scrolled) .navbar-toggler-icon {
        filter: invert(1); /* Light icon */
    }
    /* Icon color when scrolled */
    .navbar-custom.scrolled .navbar-toggler-icon {
        filter: none !important;
    }
    /* Icon color when collapsed menu is open */
    /* This should follow the .navbar-collapse text color for consistency */
    .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
        filter: none !important; /* Dark icon for light menu */
    }
    body.dark-only .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
        filter: invert(1) !important; /* Light icon for dark menu */
    }
    /* When navbar is scrolled, the toggler icon should stay dark on glass white */
    .navbar-custom.scrolled
        .navbar-toggler:not(.collapsed)
        .navbar-toggler-icon {
        filter: none !important;
    }
}