/* Custom styles beyond Tailwind CSS */
html {
    scroll-behavior: smooth;
}

/* Base Form Element Styles for Calculators */
.calc-input {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 text-gray-700 py-2 px-3 border;
}

.calc-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.calc-button {
    @apply w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors;
}

.result-card {
    @apply mt-6 bg-gray-50 rounded-lg p-6 border border-gray-200 shadow-inner hidden;
}

.result-value {
    @apply text-3xl font-bold text-primary mt-2;
}

.error-msg {
    @apply text-red-500 text-sm mt-2 hidden;
}