/* Tailwind Configuration Injector */
/* @config "./tailwind.config.js"; */

/* Material Icons Custom Styling */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* Custom Shadow Utility Classes */
.shadow-lifted {
    box-shadow: 0 10px 20px -5px rgba(255, 77, 109, 0.15), 0 8px 10px -6px rgba(255, 77, 109, 0.1);
}

.shadow-ambient {
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04);
}

/* Tailwind Custom Color Variables Backup */
:root {
    --color-primary: #b60e3d;
    --color-primary-fixed: #ffdadb;
    --color-primary-fixed-dim: #ffb2b8;
    --color-secondary: #a9362d;
    --color-secondary-fixed: #ffdad5;
    --color-tertiary: #5c5c59;
    --color-tertiary-fixed: #e4e2de;
    --color-background: #fcf9f8;
    --color-surface: #fcf9f8;
    --color-surface-variant: #e4e2e1;
    --color-on-surface: #1b1c1c;
    --color-on-surface-variant: #5a4042;
    --color-outline-variant: #e2bec0;
}

/* Custom Scrollbar Styling */
html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-background);
}

::-webkit-scrollbar-thumb {
    background: var(--color-outline-variant);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}
/* --- Footer --- */
footer {
    background-color: #1b1c1c;
    color: #ffffff;
    padding: 48px 0 24px;
    margin-top: auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 32px;
    margin-left: 12px;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

.footer-brand h3 {
    color: #ffdadb;
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 12px;
   
}

.footer-brand p {
    color: #e4e2e1;
    font-size: 14px;
    max-width: 320px;
   

}

.footer-links h4 {
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 12px;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: #e4e2e1;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #ffdadb;
}

.footer-bottom {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid #333;
    color: #888;
    font-size: 13px;
}
#warn {
    font-size: 16px;
    background-color: #e62566;
    color: white;
    border-radius: 12px;
    padding: 10px 18px;
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}