.modal-backdrop-el {
    transition: opacity 300ms ease-out;
}
.modal-overlay.active .modal-backdrop-el {
    opacity: 0.4;
}

/* Modal card transition: Bottom sheet on mobile, centered scaling on desktop */
.modal-card-el {
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease-out;
}

button.text-brand-red {
    color: #b33927;
}

/* Mobile classes: default is transform: translateY(100%) */
@media (max-width: 767px) {
    .modal-card-el {
        transform: translateY(100%);
        opacity: 1 !important; /* Always fully opaque on mobile bottom sheet */
    }
    .modal-overlay.active .modal-card-el {
        transform: translateY(0);
    }
}

/* Desktop classes: default is transform: translateY(15px) scale(0.98), opacity: 0 */
@media (min-width: 768px) {
    .modal-card-el {
        transform: translateY(15px) scale(0.98);
        opacity: 0;
    }
    .modal-overlay.active .modal-card-el {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Burger menu icon animation */
.burger-line {
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, width 0.3s ease-in-out;
}
.mobile-menu-active .burger-line-1 {
    transform: rotate(45deg);
    transform-origin: center;
    margin-top: 4px;
}
.mobile-menu-active .burger-line-2 {
    transform: rotate(-45deg);
    transform-origin: center;
    margin-top: -6px;
}

/* Header glassmorphism and transition styles */
#main-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom-width: 1px;
    border-color: #f3f4f6;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
@media (min-width: 768px) {
    #main-header.scrolled {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}