#fw-section-hero-57824a8d-938a-4976-909e-4671e35e9ef8 {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #89adff;
--color-background-rgb: 137, 173, 255;
--color-on-primary: #fafafa;
--color-on-primary-rgb: 250, 250, 250;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 172;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-custom-html-0b90ac80-1393-456b-9b9a-bc12801ef649 {

/*
 * 1. Base Container Styling
 * Sets up the dark background for the glass to sit on.
 */
body {
    background: #1a1a2e; /* Dark, deep navy/purple background */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/*
 * 2. The Main Glass Effect (.glass-calendar)
 * Key properties: backdrop-filter (blur), border (subtle edge),
 * box-shadow (inner/outer glow), and perspective for a light tilt.
 */
.glass-calendar {
    position: relative;
    width: 350px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.05); /* Very light, transparent white */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle white border */
    box-shadow: 
        0 4px 30px rgba(0, 0, 0, 0.2), /* Soft shadow underneath */
        inset 0 0 0 1px rgba(255, 255, 255, 0.05), /* Inner light frame */
        0 10px 20px rgba(0, 0, 0, 0.5); /* Stronger shadow for depth */
    
    /* THE GLASS EFFECT */
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    
    /* LIQUID GLOW/SPARKLE BASE */
    transform: perspective(1000px) rotateX(1deg); /* Slight tilt for realism */
    overflow: hidden; /* Important for containing the pseudo-elements */
}

/*
 * 3. Liquid Sparkle Effect (:before)
 * A large, transparent radial gradient positioned in the corner 
 * to mimic a bright, curved liquid reflection.
 */
.glass-calendar::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.3) 0%, /* Bright center */
        rgba(255, 255, 255, 0.0) 70% /* Fade out quickly */
    );
    border-radius: 50%;
    z-index: 10;
    pointer-events: none;
    animation: liquidGlow 15s infinite linear; /* Subtle movement */
}

/*
 * 4. General Calendar Element Styling
 * Sets up the typography for the dark background.
 */
.calendar-header h2, .calendar-header .year {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-header h2 {
    font-size: 2em;
    font-weight: 600;
}

.calendar-header .year {
    font-size: 1.2em;
    opacity: 0.6;
}

/*
 * 5. Day Styling
 */
.days {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.day {
    width: calc(100% / 7 - 10px); /* Adjust for 7 days in a row */
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    font-weight: 500;
}

.day:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 10px rgba(135, 206, 250, 0.3); /* Light blue hover glow */
}

/* * 6. Selected Day Styling (THE BRIGHT SPOT)
 * The 'selected' day has the strongest, most vibrant liquid glow.
 */
.day.selected {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-weight: 700;
    /* LIQUID GLOW BOX SHADOW */
    box-shadow: 
        0 0 10px 2px rgba(135, 206, 250, 0.7), /* Neon blue glow */
        0 0 20px 5px rgba(255, 255, 255, 0.5), /* Inner white highlight */
        inset 0 0 5px rgba(255, 255, 255, 0.8); /* Inner white shine */
    border: 1px solid rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

/* * 7. Keyframe Animation for the Liquid Glow
 * Creates a subtle, breathing, and moving glow effect.
 */
@keyframes liquidGlow {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(10px, 10px) rotate(90deg);
    }
    50% {
        transform: translate(0, 5px) rotate(180deg);
    }
    75% {
        transform: translate(-10px, 10px) rotate(270deg);
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

}
#fw-section-hero-video-d95573c7-0578-4f36-ba6e-8db7076d1c58 {
--color-primary: #ffffff;
--color-primary-rgb: 255, 255, 255;
--color-background: #fffefe;
--color-background-rgb: 255, 254, 254;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #FFFFFF;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #FFFFFF;
--color-background-brightness: 254;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-footer {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);

}