.traprenovatie-calculator [hidden] {
    display: none !important; /* Ensure conditional controls stay hidden even when another rule sets display:flex or display:grid. */
}

.traprenovatie-calculator {
    position: relative; /* Anchor the success confirmation over the calculator without changing its dimensions. */
    --tc-orange: #e87817; /* Use the site's orange as the main calculator background. */
    --tc-orange-dark: #c65f08; /* Use a darker orange for button hover feedback. */
    --tc-text: #222222; /* Use a neutral dark color for readable text. */
    --tc-border: rgba(0, 0, 0, 0.14); /* Keep field borders subtle on white backgrounds. */
    background: var(--tc-orange); /* Apply the main orange background around the full calculator. */
    border-radius: 14px; /* Soften the outer calculator box. */
    margin: 28px 0; /* Keep enough breathing room around the shortcode. */
    overflow: hidden; /* Keep all child backgrounds inside the rounded corners. */
}

.traprenovatie-calculator__inner {
    padding: 28px; /* Add comfortable spacing around all calculator content. */
}

.traprenovatie-calculator__header h2,
.traprenovatie-calculator__header p {
    color: #ffffff; /* Keep the header readable on the orange background. */
}

.traprenovatie-calculator__header h2 {
    margin: 0 0 8px; /* Keep the heading compact above the intro text. */
}

.traprenovatie-calculator__header p {
    margin: 0 0 22px; /* Separate the intro from the first form fields. */
}

.traprenovatie-calculator__grid {
    display: grid; /* Place the main fields next to each other on wider screens. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Give both main fields equal width. */
    gap: 16px; /* Keep consistent spacing between the main fields. */
}

.traprenovatie-calculator__field label {
    display: block; /* Keep each field label on its own line. */
    color: #ffffff; /* Keep labels readable on orange. */
    font-weight: 700; /* Make field labels easy to scan. */
    margin: 0 0 7px; /* Add a small gap between label and field. */
}

.traprenovatie-calculator input[type='number'],
.traprenovatie-calculator select {
    width: 100%; /* Let the fields fill their grid column. */
    min-height: 48px; /* Match modern contact-form field heights. */
    box-sizing: border-box; /* Prevent padding from expanding the total field width. */
    background: #ffffff; /* Keep form controls clean against the orange wrapper. */
    color: var(--tc-text); /* Use a readable text color inside fields. */
    border: 1px solid var(--tc-border); /* Give fields a subtle outline. */
    border-radius: 8px; /* Match the rounded style of the site form elements. */
    padding: 11px 13px; /* Give entered text comfortable inner spacing. */
    font: inherit; /* Reuse the site's typography automatically. */
}

.traprenovatie-calculator__options {
    display: grid; /* Stack all extras in a tidy vertical list. */
    gap: 10px; /* Keep the option rows separated without wasting space. */
    margin: 20px 0; /* Separate extras from the main fields and result area. */
}

.traprenovatie-calculator__option {
    display: flex; /* Align each checkbox with its text on one row. */
    align-items: center; /* Keep checkbox and text vertically centered. */
    gap: 10px; /* Add comfortable spacing between checkbox and label text. */
    background: rgba(255, 255, 255, 0.16); /* Add a subtle option row background on orange. */
    color: #ffffff; /* Keep option text readable. */
    border-radius: 8px; /* Match the rest of the form styling. */
    padding: 11px 13px; /* Make each option easy to click or tap. */
    cursor: pointer; /* Indicate that the full option row is interactive. */
}

.traprenovatie-calculator__option input {
    width: 18px; /* Keep checkboxes clearly visible. */
    height: 18px; /* Keep checkboxes clearly visible. */
    margin: 0; /* Remove browser-specific checkbox margins. */
}

.traprenovatie-calculator__result {
    background: #ffffff; /* Separate the result visually from the orange form area. */
    color: var(--tc-text); /* Use standard dark text inside the result card. */
    border-radius: 10px; /* Keep the result card consistent with the inputs. */
    padding: 20px; /* Give the total price enough visual emphasis. */
}

.traprenovatie-calculator__result-label {
    font-weight: 700; /* Emphasize what the amount represents. */
}

.traprenovatie-calculator__result-price {
    font-size: clamp(32px, 5vw, 46px); /* Make the estimate the strongest visual element. */
    font-weight: 800; /* Give the total price strong emphasis. */
    line-height: 1.1; /* Keep the large number compact. */
    margin: 5px 0 8px; /* Separate the total from its label and note. */
}

.traprenovatie-calculator__result-note {
    font-size: 14px; /* Keep the explanatory note visually secondary. */
    opacity: 0.78; /* Reduce contrast slightly without hurting readability. */
}

.traprenovatie-calculator__breakdown {
    background: rgba(255, 255, 255, 0.12); /* Keep the breakdown subtle on the orange background. */
    border-radius: 8px; /* Match the overall calculator styling. */
    margin: 14px 0 18px; /* Separate the breakdown from the total and button. */
    padding: 12px 14px; /* Keep breakdown rows comfortably spaced. */
}

.traprenovatie-calculator__breakdown > div {
    display: flex; /* Place each description and amount on one row. */
    justify-content: space-between; /* Push the amount to the right for quick scanning. */
    gap: 16px; /* Avoid descriptions touching the price. */
    color: #ffffff; /* Keep breakdown text readable on orange. */
    padding: 5px 0; /* Give each breakdown line enough vertical spacing. */
}

.traprenovatie-calculator__button {
    display: inline-block; /* Let the call-to-action size to its content. */
    background: #ffffff; /* Use a white CTA for strong contrast against orange. */
    color: var(--tc-orange-dark); /* Use the site orange for button text. */
    border-radius: 8px; /* Match the form's rounded visual language. */
    padding: 13px 18px; /* Give the CTA a comfortable clickable area. */
    font-weight: 700; /* Make the CTA visually prominent. */
    text-decoration: none; /* Remove the default underline from the button link. */
    transition: transform 0.15s ease, box-shadow 0.15s ease; /* Add a subtle interactive hover response. */
}

.traprenovatie-calculator__button:hover,
.traprenovatie-calculator__button:focus {
    color: var(--tc-orange-dark); /* Keep text color stable on interaction. */
    transform: translateY(-1px); /* Give the button a subtle lift effect. */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); /* Add depth while hovering or focusing. */
}

@media (max-width: 700px) {
    .traprenovatie-calculator__inner {
        padding: 20px; /* Reduce outer spacing slightly on small screens. */
    }

    .traprenovatie-calculator__grid {
        grid-template-columns: 1fr; /* Stack the main fields on smaller screens. */
    }

    .traprenovatie-calculator__breakdown > div {
        align-items: flex-start; /* Keep longer descriptions readable on narrow screens. */
    }
}

.traprenovatie-calculator__stair {
    border-top: 1px solid rgba(255, 255, 255, 0.28); /* Separate each staircase without introducing another heavy card. */
    padding-top: 20px; /* Keep enough space above each staircase section. */
    margin-top: 20px; /* Separate staircase sections clearly. */
}

.traprenovatie-calculator__stair:first-child {
    border-top: 0; /* Avoid an unnecessary line above the first staircase. */
    padding-top: 0; /* Keep the first staircase aligned with the intro. */
    margin-top: 0; /* Keep the first staircase aligned with the intro. */
}

.traprenovatie-calculator__stair h3 {
    color: #ffffff; /* Keep staircase headings readable on the orange background. */
    margin: 0 0 14px; /* Keep the heading close to its fields. */
}

.traprenovatie-calculator__stair-actions {
    display: flex; /* Keep add and remove controls aligned neatly. */
    gap: 10px; /* Separate the staircase action buttons. */
    margin: 4px 0 20px; /* Keep the controls close to the staircase blocks. */
}

.traprenovatie-calculator__secondary-button {
    background: transparent; /* Keep the secondary action visually lighter than the quote button. */
    color: #ffffff; /* Keep the secondary button readable on orange. */
    border: 1px solid rgba(255, 255, 255, 0.72); /* Use a subtle white outline for the secondary action. */
    border-radius: 8px; /* Match the rest of the calculator controls. */
    padding: 10px 14px; /* Give the secondary button a comfortable click area. */
    font: inherit; /* Reuse the site's typography. */
    font-weight: 700; /* Keep the action easy to scan. */
    cursor: pointer; /* Indicate that the secondary control is interactive. */
}

.traprenovatie-calculator__secondary-button:hover,
.traprenovatie-calculator__secondary-button:focus {
    background: rgba(255, 255, 255, 0.12); /* Add subtle hover feedback without overpowering the form. */
    color: #ffffff; /* Keep the text stable during interaction. */
}

.traprenovatie-calculator__breakdown-heading {
    display: block !important; /* Keep the staircase heading on its own row inside the breakdown. */
    font-weight: 800; /* Make each staircase divider easy to scan. */
    border-top: 1px solid rgba(255, 255, 255, 0.22); /* Separate the staircase breakdown groups. */
    margin-top: 7px; /* Add space before a new staircase breakdown. */
    padding-top: 10px !important; /* Give the divider enough breathing room. */
}

.traprenovatie-calculator__breakdown-heading:first-child {
    border-top: 0; /* Avoid a separator before the first staircase breakdown. */
    margin-top: 0; /* Keep the first breakdown compact. */
    padding-top: 0 !important; /* Keep the first breakdown compact. */
}

.traprenovatie-calculator__email-box {
    margin-top: 22px; /* Separate email delivery from the calculation result. */
}

.traprenovatie-calculator__email-box > label {
    display: block; /* Keep the email label on its own line. */
    color: #ffffff; /* Keep the email label readable on orange. */
    font-weight: 700; /* Match the calculator's other field labels. */
    margin-bottom: 7px; /* Add a small gap between label and field. */
}

.traprenovatie-calculator__email-row {
    display: grid; /* Keep the email field and send button aligned neatly. */
    grid-template-columns: 1fr; /* Let the email field span the full available width. */
}

.traprenovatie-calculator input[type='email'] {
    width: 100%; /* Let the email field fill its available column. */
    min-height: 48px; /* Match the existing calculator fields. */
    box-sizing: border-box; /* Keep padding inside the declared field width. */
    background: #ffffff; /* Keep the email field clean against orange. */
    color: var(--tc-text); /* Use readable dark text inside the email field. */
    border: 1px solid var(--tc-border); /* Match the existing calculator field border. */
    border-radius: 8px; /* Match the existing calculator field corners. */
    padding: 11px 13px; /* Match the existing calculator field spacing. */
    font: inherit; /* Reuse the site's typography. */
}

.traprenovatie-calculator__button {
    border: 0; /* Remove the default browser button border. */
    cursor: pointer; /* Make the quote button clearly interactive. */
}

.traprenovatie-calculator__button:disabled {
    opacity: 0.65; /* Show clearly when the quote is being submitted. */
    cursor: wait; /* Indicate that the email request is in progress. */
}

.traprenovatie-calculator__email-note {
    color: #ffffff; /* Keep the disclaimer readable on the orange background. */
    font-size: 13px; /* Keep supporting text visually secondary. */
    line-height: 1.5; /* Keep the disclaimer easy to read. */
    margin: 9px 0 0; /* Place the disclaimer directly beneath the email controls. */
}

.traprenovatie-calculator__message {
    font-weight: 700; /* Make delivery feedback easy to notice. */
    margin-top: 10px; /* Separate feedback from the disclaimer. */
}

.traprenovatie-calculator__message.is-success {
    color: #ffffff; /* Keep successful delivery feedback visible on orange. */
}

.traprenovatie-calculator__message.is-error {
    background: #ffffff; /* Give errors enough contrast to stand out. */
    color: #9f1d1d; /* Use a conventional readable error color. */
    border-radius: 6px; /* Keep the error box consistent with the form. */
    padding: 8px 10px; /* Give error text enough breathing room. */
}

@media (max-width: 700px) {
    .traprenovatie-calculator__email-row {
        grid-template-columns: 1fr; /* Stack the email field and send button on small screens. */
    }

    .traprenovatie-calculator__email-row .traprenovatie-calculator__button {
        width: 100%; /* Make the mobile send button span the full form width. */
    }
}

.traprenovatie-calculator__option-note {
    margin-top: 8px; /* Keep the included-option note aligned with the other staircase options. */
    font-size: 14px; /* Keep supporting text compact and readable. */
    font-weight: 600; /* Make the included anti-slip message easy to notice. */
}


.traprenovatie-calculator__included-note {
    margin-top: 12px; /* Separate the included anti-slip information from the introductory copy. */
    padding: 10px 12px; /* Give the included feature enough visual breathing room. */
    background: rgba(255, 255, 255, 0.14); /* Keep the note integrated with the orange calculator design. */
    border-radius: 8px; /* Match the calculator's rounded visual language. */
    color: #ffffff; /* Keep the included feature readable on orange. */
    font-size: 14px; /* Keep the message compact while still noticeable. */
}

.traprenovatie-calculator.is-sent .traprenovatie-calculator__inner {
    visibility: hidden; /* Hide the complete calculator after sending while preserving its exact occupied height. */
    pointer-events: none; /* Prevent interaction with invisible controls after a successful send. */
}

.traprenovatie-calculator__success-overlay {
    position: absolute; /* Place the confirmation over the calculator without affecting layout dimensions. */
    inset: 0; /* Fill the exact calculator area so the message can be centered in it. */
    display: flex; /* Center the confirmation vertically and horizontally. */
    align-items: center; /* Center the confirmation vertically. */
    justify-content: center; /* Center the confirmation horizontally. */
    padding: 24px; /* Keep the message away from the calculator edges on small screens. */
    box-sizing: border-box; /* Keep padding inside the existing calculator dimensions. */
    text-align: center; /* Keep the short confirmation calm and easy to read. */
    color: #ffffff; /* Keep surrounding confirmation text readable on orange. */
}

.traprenovatie-calculator__success-overlay[hidden] {
    display: none !important; /* Keep the confirmation fully hidden until the email was sent successfully. */
}

.traprenovatie-calculator__success-overlay > div {
    max-width: 520px; /* Prevent the confirmation text from becoming too wide. */
}

.traprenovatie-calculator__success-overlay strong {
    display: block; /* Put the success headline on its own line. */
    color: #1f8a3b; /* Use green so successful delivery is immediately recognizable. */
    font-size: clamp(24px, 4vw, 36px); /* Make the success headline clearly visible. */
    line-height: 1.2; /* Keep the large confirmation compact. */
    margin-bottom: 10px; /* Separate the headline from the explanation underneath. */
}

.traprenovatie-calculator__success-overlay span {
    display: block; /* Keep the supporting success text neatly below the headline. */
    font-size: 16px; /* Keep the explanation readable without competing with the headline. */
    line-height: 1.55; /* Improve readability across multiple lines. */
}


.traprenovatie-calculator__led-options {
    display: grid; /* Keep the LED radio choices grouped as one clear option set. */
    gap: 8px; /* Separate the three LED choices without making the form feel crowded. */
    width: 100%; /* Let the LED choice group use the full available form width. */
}

.traprenovatie-calculator__option-title {
    display: block; /* Keep the LED group title on its own line above the radio choices. */
    color: #ffffff; /* Keep the LED group title readable on the orange background. */
    font-weight: 700; /* Match the weight of the other calculator field labels. */
    margin-bottom: 2px; /* Keep the title visually connected to its radio choices. */
}

.traprenovatie-calculator__led-options .traprenovatie-calculator__option {
    margin: 0; /* Prevent stacked radio labels from inheriting unnecessary outer spacing. */
}

.traprenovatie-calculator__led-options input[type='radio'] {
    position: absolute; /* Keep the native radio input accessible while replacing its circular visual. */
    opacity: 0; /* Hide the native radio circle so the custom checkmark control is shown instead. */
    pointer-events: none; /* Let the full label remain the clickable target for the hidden radio input. */
}

.traprenovatie-calculator__led-options input[type='radio'] + span {
    display: flex; /* Keep the custom checkmark box and label text aligned on one row. */
    align-items: center; /* Vertically center the custom checkmark box with its text. */
    gap: 10px; /* Preserve the original spacing between the control and the label text. */
}

.traprenovatie-calculator__led-options input[type='radio'] + span::before {
    content: ''; /* Draw an empty checkbox-style control for unselected radio options. */
    display: inline-flex; /* Allow the checkmark to be centered inside the custom control. */
    align-items: center; /* Center the selected checkmark vertically. */
    justify-content: center; /* Center the selected checkmark horizontally. */
    width: 18px; /* Match the previous radio control size. */
    height: 18px; /* Match the previous radio control size. */
    flex: 0 0 18px; /* Prevent the control from shrinking next to longer labels. */
    box-sizing: border-box; /* Keep the border inside the declared control size. */
    border: 2px solid #ffffff; /* Keep the control clearly visible on the orange background. */
    border-radius: 4px; /* Use a checkbox-like shape because selection is now shown with a checkmark. */
    color: #ffffff; /* Keep the selected checkmark visible on the orange background. */
    font-size: 14px; /* Size the checkmark cleanly inside the 18px control. */
    font-weight: 800; /* Make the selected checkmark easy to recognize. */
    line-height: 1; /* Prevent font metrics from moving the checkmark off center. */
}

.traprenovatie-calculator__led-options input[type='radio']:checked + span::before {
    content: '\2713'; /* Show a checkmark instead of the browser's circular radio indicator. */
}

.traprenovatie-calculator__led-options input[type='radio']:focus-visible + span::before {
    outline: 2px solid #ffffff; /* Keep keyboard focus visible on the custom radio control. */
    outline-offset: 2px; /* Separate the focus ring from the control border. */
}

.traprenovatie-calculator__email-box > .traprenovatie-calculator__phone-label {
    margin-top: 10px; /* Add extra spacing between the email field and phone number label. */
}

.traprenovatie-calculator__email-intro {
    margin: 0 0 10px; /* Explain clearly what will happen with the entered email address */
}





.traprenovatie-calculator__email-heading {
    color: #ffffff; /* Keep the email action heading readable on the orange background. */
    font-size: 1.15rem; /* Make the email action heading stand out. */
    font-weight: 700; /* Match the visual weight of the calculator sections. */
    margin: 0 0 4px; /* Keep the green explanation visually attached to the heading. */
}

.traprenovatie-calculator__inbox-note {
    color: #ffffff; /* Keep the inbox delivery message white. */
    font-size: 0.9rem; /* Keep the delivery message compact. */
    font-weight: 400; /* Keep the delivery message at normal weight. */
    margin: 0 0 12px; /* Add clear spacing before the email address field. */
}

.traprenovatie-calculator__phone-row {
    display: grid; /* Keep the optional phone input aligned with the calculator fields. */
    grid-template-columns: 1fr; /* Let the phone number input use the full available width. */
}

.traprenovatie-calculator__send-row {
    margin-top: 12px; /* Place the send action clearly below the optional phone number. */
}

.traprenovatie-calculator__send-row .traprenovatie-calculator__button {
    width: 100%; /* Make the send button span the full form width. */
}