body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
    color: #343a40;
}

:root {
    --primary-blue: #0d6efd;
    --primary-dark: #0a58ca;
}

.bg-primary { background-color: var(--primary-blue); }
.text-primary { color: var(--primary-blue); }
.border-primary { border-color: var(--primary-blue); }
.hover\:bg-primary-dark:hover { background-color: var(--primary-dark); }

.form-input, .form-select {
    border-radius: 0.5rem;
    border-color: #ced4da;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-input:focus, .form-select:focus {
    border-color: var(--primary-blue);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.tool-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.result-card-item {
    background-color: white;
    border-left: 4px solid var(--primary-blue);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border-radius: 0.5rem;
}

#results-section {
    opacity: 0;
    transform: translateY(20px);
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, max-height 0.7s ease-in-out;
}

#results-section.visible {
    opacity: 1;
    transform: translateY(0);
    max-height: 2000px;
}