#estimator-tool {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
font-family: 'Inter', sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
#estimator-tool .vda-estimator-container {
max-width: 800px;
margin: 2rem auto;
background: white;
border-radius: 12px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
#estimator-tool .p-6 { padding: 1.5rem; }
#estimator-tool .mb-4 { margin-bottom: 1rem; }
#estimator-tool .mt-1 { margin-top: 0.25rem; }
#estimator-tool .mt-6 { margin-top: 1.5rem; }
#estimator-tool .text-center { text-align: center; }
#estimator-tool .text-2xl { font-size: 1.5rem; line-height: 2rem; }
#estimator-tool .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
#estimator-tool .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
#estimator-tool .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
#estimator-tool .font-bold { font-weight: 700; }
#estimator-tool .font-semibold { font-weight: 600; }
#estimator-tool .text-gray-800 { color: #1f2937; }
#estimator-tool .text-gray-600 { color: #4b5563; }
#estimator-tool .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
#estimator-tool .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
#estimator-tool .form-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #4a5568; }
#estimator-tool .form-input, #estimator-tool .form-select {
width: 100%;
padding: 0.5rem;
border-radius: 8px;
border: 1px solid #e2e8f0;
transition: all 0.2s;
}
#estimator-tool .form-input:focus, #estimator-tool .form-select:focus {
border-color: #4299e1;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
outline: none;
}
#estimator-tool .submit-btn {
width: 100%;
background-color: #22c55e;
color: white;
font-weight: 700;
padding: 0.75rem 1.5rem;
border-radius: 8px;
border: none;
cursor: pointer;
transition: background-color 0.2s;
}
#estimator-tool .submit-btn:hover { background-color: #16a34a; }
#estimator-tool .form-error { color: #ef4444; font-size: 0.875rem; text-align: center; margin-top: 0.5rem; display: none; }
#estimator-tool .form-error.show { display: block; }
#estimator-tool .hidden { display: none; }
#estimator-tool .border-b { border-bottom-width: 1px; border-color: #e5e7eb; }
#estimator-tool .border-t { border-top-width: 1px; border-color: #e5e7eb; }
#estimator-tool .bg-gray-50 { background-color: #f9fafb; }
#estimator-tool .fieldset-wrapper { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; background-color: #ffffff; } #estimator-tool .fieldset-wrapper.fieldset-alt { background-color: #f7f7eb; }
#estimator-tool .legend-text { padding: 0 0.5rem; font-weight: 600; color: #374151; }
#estimator-tool .grid-2-col { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; padding-top: 0.5rem; }
@media (min-width: 768px) {
#estimator-tool .grid-2-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#estimator-tool .col-span-2 { grid-column: span 2 / span 2; }
} #estimator-tool .note-text { font-size: 1.5rem; color: #6b7280; margin-top: 0.25rem; }
#estimator-tool .result-card { background: #3b82f6; color: yellow; border-radius: 10px; padding: 1rem; text-align: center; }
#estimator-tool .result-title { font-size: 1.25rem; font-weight: 600; opacity: 0.9; }
#estimator-tool .result-amount { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.5px; }
#estimator-tool .chart-container { border: 1px solid #e5e7eb; border-radius: 8px; background-color: white; }
#estimator-tool .chart-wrapper { max-width: 384px; margin-left: auto; margin-right: auto; }
#estimator-tool .total-cost-card { margin-top: 1.5rem; padding: 1rem; background-color: #dbeafe; border: 1px solid #bfdbfe; border-radius: 8px; text-align: center; }
#estimator-tool .total-cost-card .text-lg { color: #1e40af; }
#estimator-tool .total-cost-card .text-3xl { color: #1e3a8a; }
#estimator-tool .disclaimer { font-size: 0.875rem; color: #4b5563; text-align: center; padding: 1rem; background-color: #f3f4f6; border-top: 1px solid #e5e7eb; } #estimator-tool .calculation-breakdown {
font-size: 1.5rem;
opacity: 0.8;
margin-top: 0.25rem;
font-style: italic;
line-height: 1.2;
} #estimator-tool .chart-wrapper .chartjs-legend ul {
font-size: 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-left: 0;
margin: 0;
list-style: none;
}
#estimator-tool .chart-wrapper .chartjs-legend li {
display: flex;
align-items: center;
margin: 4px;
font-size: 1rem;
}