/* Using Inter font from Google Fonts, linked in the HTML */
body {
    font-family: 'Inter', sans-serif;
    /* A new, softer pink background color */
    background-color: #FFF0F5; /* Lavender Blush */
    position: relative;
    overflow: hidden; /* Hide overflow from animations */
}

/* --- Animated Background Elements --- */
/* We use a pseudo-element for the animated background so it doesn't affect the main content's layout or performance. */

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: repeat;
    opacity: 0.5;
    animation: float 35s linear infinite;
    /* A simple heart SVG, color is a soft pink */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbcfe8'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
    background-size: 80px;
}


/* Keyframes for the floating animation */
@keyframes float {
    0% { transform: translate(0, 0); }
    25% { transform: translate(20px, -20px); }
    50% { transform: translate(0, -40px); }
    75% { transform: translate(-20px, -20px); }
    100% { transform: translate(0, 0); }
}


/* --- Original Styles --- */

/* Custom focus ring color to match the theme */
.focus\:ring-pink-500:focus {
    --tw-ring-color: #ec4899;
}

/* Custom button shadow style */
#calculateBtn {
    box-shadow: 0 4px 14px 0 rgba(236, 72, 153, 0.39);
}

#calculateBtn:hover {
    box-shadow: 0 6px 20px 0 rgba(236, 72, 153, 0.45);
}

/* Add a subtle fade-in animation for the result and error divs */
#result.hidden, #error.hidden {
    display: none;
    opacity: 0;
}

#result, #error {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Toggle Switch Styles --- */
.toggle-checkbox:checked ~ .toggle-bg {
    background-color: #ec4899; /* pink-500 */
}

.toggle-checkbox:checked ~ .dot {
    transform: translateX(100%);
}


/* Hide the number input spinners for a cleaner look */
/* For Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type=number] {
  -moz-appearance: textfield;
}