.vda-calculator-container {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: #ffffff;
padding: 30px;
margin: 20px 0;
border-radius: 12px;
-webkit-border-radius: 12px; -moz-border-radius: 12px; border: 1px solid #e5e5e5;
box-shadow: 0 5px 25px rgba(0,0,0,0.07);
-webkit-box-shadow: 0 5px 25px rgba(0,0,0,0.07); -moz-box-shadow: 0 5px 25px rgba(0,0,0,0.07); } .vda-calculator-container h2 {
text-align: center;
color: #333;
margin-top: 0;
margin-bottom: 10px;
font-size: 1.5em;
}
.vda-calculator-container p {
text-align: center;
color: #666;
font-size: 1em;
margin-bottom: 25px;
} .vda-input-group {
margin-bottom: 15px;
position: relative;
}
.vda-input-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: #444;
}
.vda-input-group input[type="text"],
.vda-input-group input[type="tel"] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
box-sizing: border-box; font-size: 1em;
} #vda-unlock-btn,
#vda-calculate-base-btn,
#vda-recalculate-tncn-btn,
#vda-reset-btn {
width: 100%;
padding: 14px;
color: #fff;
border: none;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
font-size: 1.1em;
font-weight: 700;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
}
#vda-unlock-btn { background-color: #28a745; }
#vda-unlock-btn:hover { background-color: #218838; }
#vda-calculate-base-btn { background-color: #007bff; }
#vda-calculate-base-btn:hover { background-color: #0056b3; }
#vda-recalculate-tncn-btn { background-color: #ffc107; color: #212529; }
#vda-recalculate-tncn-btn:hover { background-color: #e0a800; }
#vda-reset-btn { background-color: #6c757d; margin-top: 20px; }
#vda-reset-btn:hover { background-color: #5a6268; } #vda-phone-step small {
font-size: .85em;
color: #888;
display: block;
text-align: center;
margin-top: 10px;
} .vda-results-wrapper {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #e5e5e5;
}
.vda-result-item {
margin-bottom: 12px;
background-color: #f8f9fa;
padding: 15px;
border: 1px solid #e5e5e5;
border-left: 4px solid #17a2b8;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.vda-result-item strong {
color: #333;
display: block;
font-size: 1em;
margin-bottom: 5px;
}
.vda-result-item span {
font-weight: 700;
color: #dc3545;
font-size: 1.3em;
display: block;
}
.vda-result-item small {
display: block;
margin-top: 8px;
font-style: italic;
color: #777;
font-size: .9em;
} .vda-separator {
border: 0;
border-top: 1px dashed #ccc;
margin: 25px 0;
}
#vda-tncn-recalc-step {
background-color: #fff9e6;
padding: 20px;
margin-top: 20px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border: 1px solid #ffecb3;
}
#vda-tncn-recalc-step h4 {
color: #333;
text-align: center;
margin-top: 0;
}
#vda-tncn-recalc-step .vda-tncn-intro {
font-size: 0.9em;
margin-bottom: 15px;
} .vda-realtime-value {
display: block;
text-align: right;
font-size: .9em;
color: #e74c3c;
font-weight: 700;
height: 1em;
margin-top: 4px;
}