:root {
    --header-toggler-white: white;
    --header-toggler-transparent: transparent;
}

/* Custom navbar toggler styles */
.custom-toggler {
    border: none !important;
    padding: 0.25rem 0.75rem;
    background-color: var(--header-toggler-transparent) !important;
    position: relative;
}

.custom-toggler:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Three bars styling */
.toggler-icon {
    width: 24px;
    height: 24px;
    position: relative;
    transition: all 0.5s ease;
}

.toggler-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: var(--header-toggler-white);
    border-radius: 3px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.3s ease-in-out;
}

/* Position the bars */
.toggler-icon .bar1 {
    top: 0px;
}
.toggler-icon .bar2 {
    top: 10px;
}
.toggler-icon .bar3 {
    top: 20px;
}

/* Scrolled navbar bar colors */
.navbar.scrolled .toggler-icon span {
    background-color: var(--app-primary-color);
}

/* Animation for toggle state - hide bars when expanded */
.custom-toggler[aria-expanded="true"] .toggler-icon span {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Show bars when collapsed - they start invisible and fade in */
.custom-toggler[aria-expanded="false"] .toggler-icon span {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
}

/* Heart icon appearance */
.custom-toggler[aria-expanded="true"]::after {
    content: "\f004"; /* Font Awesome heart icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    font-size: 24px;
    color: var(--header-toggler-white);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
    animation: heart-appear 0.4s forwards;
}

/* Heart disappearance */
.custom-toggler[aria-expanded="false"]::after {
    content: "\f004"; /* Font Awesome heart icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    font-size: 24px;
    color: var(--header-toggler-white);
    top: 50%;
    left: 50%;
    animation: heart-disappear 0.3s forwards;
}

.navbar.scrolled .custom-toggler::after {
    color: var(--app-primary-color);
}

@keyframes heart-appear {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0);
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(0.5);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }
}

@keyframes heart-disappear {
    0% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(0.5);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0);
        opacity: 0;
    }
}