.calculator__birthday-message[data-astro-cid-6av5unpn]{background:var(--pico-color-jade-100);padding:1rem;border-radius:.5rem;margin-bottom:1rem;text-align:center;animation:fadeIn .5s ease-in}.calculator__birthday-message[data-astro-cid-6av5unpn] p[data-astro-cid-6av5unpn]{margin:0;font-size:1.1rem;font-weight:500;color:var(--pico-color-jade-700)}.calculator__birthday-icon[data-astro-cid-6av5unpn]{font-size:1.5rem;margin-right:.5rem}.calculator__next-birthday[data-astro-cid-6av5unpn]{text-align:center;margin-bottom:1.5rem;padding:.5rem;border-radius:.5rem;background:var(--pico-background-alt)}.calculator__next-birthday[data-astro-cid-6av5unpn] p[data-astro-cid-6av5unpn]{margin:0;font-weight:500}[data-astro-cid-6av5unpn][data-theme=dark] .calculator__birthday-message[data-astro-cid-6av5unpn]{background:var(--pico-color-jade-900)}[data-astro-cid-6av5unpn][data-theme=dark] .calculator__birthday-message[data-astro-cid-6av5unpn] p[data-astro-cid-6av5unpn]{color:var(--pico-color-jade-300)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.birthday-info[data-astro-cid-6av5unpn]{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--pico-background-alt)}.birthday-message[data-astro-cid-6av5unpn]{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.5rem;padding:.5rem;background:var(--pico-color-jade-100);border-radius:.5rem;animation:fadeIn .5s ease-in}.birthday-message[data-astro-cid-6av5unpn] p[data-astro-cid-6av5unpn]{margin:0;font-weight:500;color:var(--pico-color-jade-700)}.birthday-emoji[data-astro-cid-6av5unpn]{font-size:1.25rem}.birthday-countdown[data-astro-cid-6av5unpn]{text-align:center}.birthday-countdown[data-astro-cid-6av5unpn] p[data-astro-cid-6av5unpn]{margin:0;font-size:.95rem;color:var(--pico-color-dark)}[data-astro-cid-6av5unpn][data-theme=dark] .birthday-message[data-astro-cid-6av5unpn]{background:var(--pico-color-jade-900)}[data-astro-cid-6av5unpn][data-theme=dark] .birthday-message[data-astro-cid-6av5unpn] p[data-astro-cid-6av5unpn]{color:var(--pico-color-jade-300)}[data-astro-cid-6av5unpn][data-theme=dark] .birthday-countdown[data-astro-cid-6av5unpn] p[data-astro-cid-6av5unpn]{color:var(--pico-color-light)}[data-astro-cid-6av5unpn][data-theme=dark] .birthday-info[data-astro-cid-6av5unpn]{border-top-color:var(--pico-background-alt-dark)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}Update the birthday-info section in your HTML --> <div class="birthday-info" x-show="dob && !errors.dob"> <div class="birthday-message" x-show="birthdayMessage"> <span class="birthday-emoji" x-text="birthdayEmoji"></span> <p x-text="birthdayMessage"></p> </div> <div class="countdown-container" x-show="countdownTime"> <div class="countdown-header"> <span class="countdown-title">Next Birthday In</span> </div> <div class="countdown-units"> <div class="countdown-unit"> <span class="countdown-value" x-text="countdownTime.days">00</span> <span class="countdown-label">Days</span> </div> <div class="countdown-divider">:</div> <div class="countdown-unit"> <span class="countdown-value" x-text="countdownTime.hours">00</span> <span class="countdown-label">Hours</span> </div> <div class="countdown-divider">:</div> <div class="countdown-unit"> <span class="countdown-value" x-text="countdownTime.minutes">00</span> <span class="countdown-label">Minutes</span> </div> <div class="countdown-divider">:</div> <div class="countdown-unit"> <span class="countdown-value" x-text="countdownTime.seconds">00</span> <span class="countdown-label">Seconds</span> </div> </div> </div> </div> <!-- Add these styles --> <style> .countdown-container{background:var(--pico-background-alt);border-radius:1rem;padding:1.5rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;margin-top:1rem}.countdown-header[data-astro-cid-6av5unpn]{text-align:center;margin-bottom:1rem}.countdown-title[data-astro-cid-6av5unpn]{font-size:1.1rem;font-weight:500;color:var(--pico-color-jade-600);text-transform:uppercase;letter-spacing:.05em}.countdown-units[data-astro-cid-6av5unpn]{display:flex;justify-content:center;align-items:center;gap:.5rem}.countdown-unit[data-astro-cid-6av5unpn]{display:flex;flex-direction:column;align-items:center;min-width:4rem}.countdown-value[data-astro-cid-6av5unpn]{font-size:2rem;font-weight:700;font-family:var(--pico-font-mono);color:var(--pico-color-jade-600);line-height:1;padding:.5rem;background:var(--pico-background-color);border-radius:.5rem;min-width:3.5rem;text-align:center;box-shadow:inset 0 2px 4px #0000000d}.countdown-label[data-astro-cid-6av5unpn]{font-size:.75rem;font-weight:500;text-transform:uppercase;color:var(--pico-muted-color);margin-top:.25rem;letter-spacing:.05em}.countdown-divider[data-astro-cid-6av5unpn]{font-size:2rem;font-weight:700;color:var(--pico-color-jade-400);margin-top:-1rem}[data-astro-cid-6av5unpn][data-theme=dark] .countdown-container[data-astro-cid-6av5unpn]{background:var(--pico-background-alt-dark)}[data-astro-cid-6av5unpn][data-theme=dark] .countdown-title[data-astro-cid-6av5unpn]{color:var(--pico-color-jade-400)}[data-astro-cid-6av5unpn][data-theme=dark] .countdown-value[data-astro-cid-6av5unpn]{color:var(--pico-color-jade-400);background:var(--pico-background-color-dark)}[data-astro-cid-6av5unpn][data-theme=dark] .countdown-divider[data-astro-cid-6av5unpn]{color:var(--pico-color-jade-600)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.countdown-value[data-astro-cid-6av5unpn].changed{animation:pulse .3s ease-in-out}.calculator__empty-state[data-astro-cid-6av5unpn]{padding:2rem 1rem;text-align:center;animation:fadeIn .3s ease}.calculator__guide[data-astro-cid-6av5unpn]{max-width:400px;margin:0 auto}.calculator__guide-icon[data-astro-cid-6av5unpn]{font-size:3rem;margin-bottom:1.5rem}.pulse-animation[data-astro-cid-6av5unpn]{display:inline-block;animation:pulse 2s infinite}.calculator__guide-title[data-astro-cid-6av5unpn]{font-size:1.5rem;font-weight:600;color:var(--pico-color);margin-bottom:.5rem}.calculator__guide-text[data-astro-cid-6av5unpn]{color:var(--pico-muted-color);margin-bottom:1.5rem}.calculator__feature-list[data-astro-cid-6av5unpn]{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.calculator__feature-item[data-astro-cid-6av5unpn]{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--pico-card-background-color);border:1px solid var(--pico-card-border-color);border-radius:var(--pico-border-radius);transition:transform .2s ease}.calculator__feature-item[data-astro-cid-6av5unpn]:hover{transform:translate(4px)}.calculator__feature-icon[data-astro-cid-6av5unpn]{font-size:1.25rem;padding:.5rem;background:var(--pico-primary-background);border-radius:var(--pico-border-radius);line-height:1}.calculator__facts[data-astro-cid-6av5unpn]{margin-top:2rem;padding:1.5rem;background:var(--pico-card-sectionning-background-color);border-radius:var(--pico-border-radius);text-align:left}.calculator__facts-title[data-astro-cid-6av5unpn]{font-size:1rem;font-weight:600;color:var(--pico-color);margin:0 0 1rem}.calculator__facts-list[data-astro-cid-6av5unpn]{display:flex;flex-direction:column;gap:.75rem}.calculator__fact[data-astro-cid-6av5unpn]{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:var(--pico-muted-color)}.calculator__fact-icon[data-astro-cid-6av5unpn]{font-size:1.25rem}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}[data-astro-cid-6av5unpn][data-theme=dark] .calculator__feature-item[data-astro-cid-6av5unpn]{background:var(--pico-card-background-color)}[data-astro-cid-6av5unpn][data-theme=dark] .calculator__facts[data-astro-cid-6av5unpn]{background:var(--pico-background-alt-dark)}@media (max-width: 768px){.calculator__empty-state[data-astro-cid-6av5unpn]{padding:1rem}.calculator__feature-item[data-astro-cid-6av5unpn]{padding:.625rem}.calculator__facts[data-astro-cid-6av5unpn]{padding:1rem}}