.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
html, body, .hide-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}
html::-webkit-scrollbar, body::-webkit-scrollbar, .hide-scrollbar::-webkit-scrollbar {
    display: none !important;
}
body { min-height: 100dvh; }

/* Dark Mode Transition */
html { transition: background-color 0.3s ease, color 0.3s ease; }
html.dark { background-color: #0f1318; color: #e2e5ea; }

/* Glassmorphism Utility */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}
.dark .glass-card {
    background: rgba(26, 31, 39, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.glass-header {
    background: rgba(249, 249, 255, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
.dark .glass-header {
    background: rgba(15, 19, 24, 0.88);
}

/* Editorial Shadow for cards */
.editorial-shadow {
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.04);
}
.dark .editorial-shadow {
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 6px 16px rgba(0,0,0,0.15);
}

/* Custom Coffee Loader */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f9f9ff; z-index: 10000; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s; }
.dark #preloader { background-color: #0f1318; }
#preloader.fade-out { opacity: 0; visibility: hidden; }
.loader-text { position: absolute; bottom: -60px; width: 100%; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: #74372b; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; animation: pulse-text 2s infinite; }
.dark .loader-text { color: #e5a08a; }
@keyframes pulse-text { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.loader-container { width: 300px; height: 280px; position: relative; }
.coffee-header { width: 100%; height: 80px; position: absolute; top: 0; left: 0; background-color: #ddcfcc; border-radius: 10px; }
.coffee-header__buttons { width: 25px; height: 25px; position: absolute; top: 25px; background-color: #282323; border-radius: 50%; }
.coffee-header__buttons::after { content: ""; width: 8px; height: 8px; position: absolute; bottom: -8px; left: calc(50% - 4px); background-color: #615e5e; }
.coffee-header__button-one { left: 15px; }
.coffee-header__button-two { left: 50px; }
.coffee-header__display { width: 50px; height: 50px; position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); border-radius: 50%; background-color: #9acfc5; border: 5px solid #43beae; box-sizing: border-box; }
.coffee-header__details { width: 8px; height: 20px; position: absolute; top: 10px; right: 10px; background-color: #9b9091; box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091; }
.coffee-medium { width: 90%; height: 160px; position: absolute; top: 80px; left: calc(50% - 45%); background-color: #bcb0af; }
.coffee-medium:before { content: ""; width: 90%; height: 100px; background-color: #776f6e; position: absolute; bottom: 0; left: calc(50% - 45%); border-radius: 20px 20px 0 0; }
.coffe-medium__exit { width: 60px; height: 20px; position: absolute; top: 0; left: calc(50% - 30px); background-color: #231f20; }
.coffe-medium__exit::before { content: ""; width: 50px; height: 20px; border-radius: 0 0 50% 50%; position: absolute; bottom: -20px; left: calc(50% - 25px); background-color: #231f20; }
.coffe-medium__exit::after { content: ""; width: 10px; height: 10px; position: absolute; bottom: -30px; left: calc(50% - 5px); background-color: #231f20; }
.coffee-medium__arm { width: 70px; height: 20px; position: absolute; top: 15px; right: 25px; background-color: #231f20; }
.coffee-medium__arm::before { content: ""; width: 15px; height: 5px; position: absolute; top: 7px; left: -15px; background-color: #9e9495; }
.coffee-medium__cup { width: 80px; height: 47px; position: absolute; bottom: 0; left: calc(50% - 40px); background-color: #FFF; border-radius: 0 0 70px 70px / 0 0 110px 110px; }
.coffee-medium__cup::after { content: ""; width: 20px; height: 20px; position: absolute; top: 6px; right: -13px; border: 5px solid #FFF; border-radius: 50%; }
@keyframes liquid { 0% { height: 0px; opacity: 1; } 5% { height: 0px; opacity: 1; } 20% { height: 62px; opacity: 1; } 95% { height: 62px; opacity: 1; } 100% { height: 62px; opacity: 0; } }
.coffee-medium__liquid { width: 6px; height: 63px; opacity: 0; position: absolute; top: 50px; left: calc(50% - 3px); background-color: #74372b; animation: liquid 3s 1s linear infinite; }
.coffee-medium__smoke { width: 8px; height: 20px; position: absolute; border-radius: 5px; background-color: #b3aeae; }
@keyframes smokeOne { 0% { bottom: 20px; opacity: 0; } 40% { bottom: 50px; opacity: .5; } 80% { bottom: 80px; opacity: .3; } 100% { bottom: 80px; opacity: 0; } }
@keyframes smokeTwo { 0% { bottom: 40px; opacity: 0; } 40% { bottom: 70px; opacity: .5; } 80% { bottom: 80px; opacity: .3; } 100% { bottom: 80px; opacity: 0; } }
.coffee-medium__smoke-one { opacity: 0; bottom: 50px; left: 102px; animation: smokeOne 3s 4s linear infinite; }
.coffee-medium__smoke-two { opacity: 0; bottom: 70px; left: 118px; animation: smokeTwo 3s 5s linear infinite; }
.coffee-medium__smoke-three { opacity: 0; bottom: 65px; right: 118px; animation: smokeTwo 3s 6s linear infinite; }
.coffee-medium__smoke-for { opacity: 0; bottom: 50px; right: 102px; animation: smokeOne 3s 5s linear infinite; }
.coffee-footer { width: 95%; height: 15px; position: absolute; bottom: 25px; left: calc(50% - 47.5%); background-color: #41bdad; border-radius: 10px; }
.coffee-footer::after { content: ""; width: 106%; height: 26px; position: absolute; bottom: -25px; left: -8px; background-color: #000; }

/* Star Rating */
.star-rating .star { cursor: pointer; transition: transform 0.15s ease, color 0.15s ease; }
.star-rating .star:hover { transform: scale(1.2); }
.star-rating .star.active { color: #f59e0b; }
.star-rating .star.active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

/* Dietary toggle pills */
.diet-toggle { transition: all 0.2s ease; }
.diet-toggle.active { background: #006b2c; color: #fff; box-shadow: 0 4px 12px rgba(0, 107, 44, 0.25); }
.dark .diet-toggle.active { background: #4ade80; color: #0f1318; }