/* ==========================================================================
   OHC Visibility Override — forces managed fields visible on their page
   ========================================================================== */
.ohc-force-show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   OHC Form Layout
   ========================================================================== */

#ohc-form-layout.ohc-form-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    align-items: stretch;
}

#ohc-form-layout .ohc-form-layout__main {
    min-width: 0;
}

#ohc-form-layout .ohc-form-layout__sidebar {
    min-width: 0;
    align-self: start;
}

/* ==========================================================================
   Progress Indicator
   ========================================================================== */

#ohc-form-layout .ohc-progress {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #646F47;
    border-radius: 50px;
    padding: 4px 4px 4px 12px;
    font-size: 14px;
    margin-bottom: 12px;
    width: max-content;
    line-height: 1;
}

#ohc-form-layout .ohc-progress__label {
    color: #646F47;
    font-weight: 600;
}

#ohc-form-layout .ohc-progress__numbers {
    color: #646F47;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 600;
    background-color: #646F4733;
    line-height: 1;
    font-size: 12px;
}

#ohc-form-layout .ohc-progress__current {
    color: #646F47;
}

#ohc-form-layout .ohc-progress__total {
    color: #646F47
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

#ohc-form-layout .ohc-sidebar {
    background: #646F47;
    padding: 32px 24px;
    color: #fff;
    position: sticky;
    top: 0px;
}

/* ==========================================================================
   Sidebar Steps
   ========================================================================== */

#ohc-form-layout .ohc-sidebar__steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 32px;
}

#ohc-form-layout .ohc-sidebar__step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
    position: relative;
}

#ohc-form-layout .ohc-sidebar__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 48px;
    left: 15px;
    width: 0;
    bottom: -8px;
    border-left: 2px dotted rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

#ohc-form-layout .ohc-sidebar__step.is-completed:not(:last-child)::after {
    border-left: 2px solid rgba(255, 255, 255, 0.6);
}

#ohc-form-layout .ohc-sidebar__step.is-completed:has(+ .ohc-sidebar__step.is-active):not(:last-child)::after {
    border-left: 2px solid #fff;
}

#ohc-form-layout .ohc-sidebar__step-indicator {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

#ohc-form-layout .ohc-sidebar__step-number {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
}

#ohc-form-layout .ohc-sidebar__step.is-active .ohc-sidebar__step-indicator {
    border-color: #fff;
    background: #fff;
}

#ohc-form-layout .ohc-sidebar__step.is-active .ohc-sidebar__step-number {
    color: #646F47;
}

#ohc-form-layout .ohc-sidebar__step.is-completed .ohc-sidebar__step-indicator {
    border-color: rgba(255, 255, 255, 0.6);
    background: transparent;
}

#ohc-form-layout .ohc-sidebar__step-check {
    width: 16px;
    height: 16px;
    display: none;
    stroke: rgba(255, 255, 255, 0.6);
}

#ohc-form-layout .ohc-sidebar__step.is-completed .ohc-sidebar__step-number {
    display: none;
}

#ohc-form-layout .ohc-sidebar__step.is-completed .ohc-sidebar__step-check {
    display: block;
}

#ohc-form-layout .ohc-sidebar__step-content {
    flex: 1;
    padding-top: 4px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

#ohc-form-layout .ohc-sidebar__step.is-active .ohc-sidebar__step-content {
    opacity: 1;
}

#ohc-form-layout .ohc-sidebar__step-title {
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 4px 0;
    color: #fff;
    line-height: 1.3;
}

#ohc-form-layout .ohc-sidebar__step-desc {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    color: #fff;
    line-height: 1.4;
}

/* ==========================================================================
   Sidebar Contact
   ========================================================================== */

#ohc-form-layout .ohc-sidebar__contact {
    margin-top: 8px;
}

#ohc-form-layout .ohc-sidebar__contact_inner,
#ohc-form-layout .ohc-sidebar__contact_inner_2 {
    padding: 16px;
}

#ohc-form-layout .ohc-sidebar__contact_inner {
    background: rgba(255, 255, 255, 0.1);
}

#ohc-form-layout .ohc-sidebar__contact_inner_2 {
    background: rgba(255, 255, 255, 0.05);
}

#ohc-form-layout .ohc-sidebar__contact-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: #fff;
    line-height: 1.3;
}

#ohc-form-layout .ohc-sidebar__contact-person {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

#ohc-form-layout .ohc-sidebar__contact-image-wrapper {
    position: relative;
    flex-shrink: 0;
}

#ohc-form-layout .ohc-sidebar__contact-image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}

#ohc-form-layout .ohc-sidebar__contact-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: #4CAF50;
    border: 2px solid #fff;
    border-radius: 50%;
}

#ohc-form-layout .ohc-sidebar__contact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#ohc-form-layout .ohc-sidebar__contact-info strong {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

#ohc-form-layout .ohc-sidebar__contact-info span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

#ohc-form-layout .ohc-sidebar__contact-methods {
    display: flex;
    flex-direction: column;
}

#ohc-form-layout .ohc-sidebar__contact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: opacity 0.2s ease;
}

#ohc-form-layout .ohc-sidebar__contact-link:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

#ohc-form-layout .ohc-sidebar__contact-link:nth-child(2) {
    padding-top: 8px;
}

#ohc-form-layout .ohc-sidebar__contact-link:hover {
    opacity: 0.85;
    color: #fff;
}

#ohc-form-layout .ohc-sidebar__contact-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: #fff;
}

#ohc-form-layout .ohc-sidebar__contact-link span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

#ohc-form-layout .ohc-sidebar__contact-link strong {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

#ohc-form-layout .af-page-wrap {
    display: none;
}

#ohc-form-layout .acf-field-page > .af-label,
#ohc-form-layout .acf-field-page > .acf-label {
    display: none;
}

#ohc-form-layout .ohc-step-header {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eee
}

#ohc-form-layout .ohc-step-header__title {
    font-size: 24px;
    font-weight: 400;
    color: #000;
    margin: 0 0 8px 0;
}

#ohc-form-layout .ohc-step-header__desc {
    font-size: 16px;
    color: #444444;
    margin: 0;
}

/* ==========================================================================
   Form Field Layouts
   ========================================================================== */

#ohc-form-layout .af-fields {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    flex: 1;
    align-content: start; /* Velden bovenaan */
}

#ohc-form-layout .af-field {
    width: 100%;
}

#ohc-form-layout .af-field-zip,
#ohc-form-layout .af-field-housenumber,
#ohc-form-layout .af-field-addition {
    flex: 0 0 calc(33% - 11px);
    width: auto;
    padding: 0px;
    border: 0px;
}

/* Hide quantity fields — stepper in checkbox handles this */
#ohc-form-layout .af-field[data-name$="_quantity"] {
    display: none !important;
}

/* ==========================================================================
   Form Fields - General Styling
   ========================================================================== */

/* Labels */
#ohc-form-layout .acf-label label,
#ohc-form-layout .af-label label {
    font-size: 14px;
    font-weight: 500 !important;
    color: #000;
    display: block;
    padding: 0;
}

/* Extra installaties label — top spacing between sections on step 2 */
#ohc-form-layout .af-field[data-name="install_additional_subscriptions"] > .af-label.acf-label {
    padding-top: 16px;
}

#ohc-form-layout .acf-label .description,
#ohc-form-layout .af-label .description {
    font-size: 13px;
    color: #888;
    font-weight: 400;
    margin-top: 2px;
}

/* Text Inputs */
#ohc-form-layout input[type="text"],
#ohc-form-layout input[type="number"],
#ohc-form-layout input[type="email"],
#ohc-form-layout input[type="tel"],
#ohc-form-layout textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 0px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

#ohc-form-layout input[type="text"]:focus,
#ohc-form-layout input[type="number"]:focus,
#ohc-form-layout input[type="email"]:focus,
#ohc-form-layout input[type="tel"]:focus,
#ohc-form-layout textarea:focus {
    outline: none;
    border-color: #646F47;
    box-shadow: 0 0 0 3px rgba(101, 112, 72, 0.1);
}

#ohc-form-layout input::placeholder,
#ohc-form-layout textarea::placeholder {
    color: #999;
}

/* Select Dropdowns */
#ohc-form-layout select {
    width: 100%;
    padding: 12px 40px 12px 12px;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: #333;
    font-family: inherit;
}

#ohc-form-layout select:focus {
    outline: none;
    border-color: #434441;
    box-shadow: 0 0 0 3px rgba(101, 112, 72, 0.1);
}

#ohc-form-layout select option[value=""] {
    color: #999;
}

/* Textarea */
#ohc-form-layout textarea {
    min-height: 120px;
    resize: vertical;
}

/* ==========================================================================
   True/False as Ja/Nee Button Toggle
   ========================================================================== */

#ohc-form-layout .acf-field-true-false {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
}

#ohc-form-layout .acf-field-true-false > .acf-label {
    flex: 1;
    margin-bottom: 0;
    padding: 0 !important;
}
#ohc-form-layout .acf-field-true-false > .acf-label label {
    padding: 0px;
    margin: 0px;
}

#ohc-form-layout .acf-field-true-false > .acf-input {
    flex-shrink: 0;
}

#ohc-form-layout .acf-field-true-false .acf-true-false {
    display: none;
}

#ohc-form-layout .ohc-toggle-buttons {
    display: flex;
    overflow: hidden;
}

#ohc-form-layout .ohc-toggle-btn {
    padding: 8px 16px;
    min-width: 125px;
    min-height: 48px;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    border-radius: 0px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
    font-family: inherit;
    box-sizing: border-box;
}

#ohc-form-layout .ohc-toggle-btn.is-active {
    border-color: #646F47;
}

#ohc-form-layout .ohc-toggle-btn:hover {
    background: #f5f5f5;
}

#ohc-form-layout .ohc-toggle-btn.is-active {
    background: #646F47;
    color: #fff;
}

#ohc-form-layout .ohc-toggle-btn.is-active:hover {
    background: #566139;
}

/* ==========================================================================
   Date Picker
   ========================================================================== */

#ohc-form-layout .acf-date-picker input.input {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

#ohc-form-layout .acf-date-picker input.input:focus {
    outline: none;
    border-color: #646F47;
    box-shadow: 0 0 0 3px rgba(101, 112, 72, 0.1);
}

/* ==========================================================================
   Image Upload Styling
   ========================================================================== */

#ohc-form-layout .acf-image-uploader,
#ohc-form-layout .acf-file-uploader {
    border: 2px dotted #aaa;
    padding: 24px;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
    background: #eee;
}

/* Upload area: cloud icon + styled text, fully CSS, native click preserved */
#ohc-form-layout .acf-image-uploader .hide-if-value,
#ohc-form-layout .acf-file-uploader .hide-if-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 16px 0;
}

/* Cloud icon via ::before on the container */
#ohc-form-layout .acf-image-uploader .hide-if-value::before,
#ohc-form-layout .acf-file-uploader .hide-if-value::before {
    content: '';
    display: block;
    width: 54px;
    height: 42px;
    background-image: url("data:image/svg+xml,%3Csvg width='54' height='42' viewBox='0 0 54 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.5 0C14.2125 0 7.5 6.7125 7.5 15C7.5 15.4594 7.51875 15.9188 7.56562 16.3688C3.08437 18.5625 0 23.1656 0 28.5C0 35.9531 6.04688 42 13.5 42H42C48.6281 42 54 36.6281 54 30C54 25.3219 51.3281 21.2812 47.4281 19.2938C47.8031 18.1781 48 16.9875 48 15.75C48 9.53437 42.9656 4.5 36.75 4.5C35.6719 4.5 34.6219 4.65 33.6281 4.94062C30.8813 1.9125 26.9156 0 22.5 0ZM12 15C12 9.19687 16.6969 4.5 22.5 4.5C26.0344 4.5 29.1562 6.24375 31.0594 8.91562C31.6875 9.80625 32.8688 10.1156 33.8531 9.64687C34.725 9.23437 35.7 9 36.7406 9C40.4719 9 43.4906 12.0188 43.4906 15.75C43.4906 17.0719 43.1156 18.3 42.4594 19.3406C42.075 19.95 42.0094 20.7094 42.2719 21.375C42.5344 22.0406 43.1156 22.5469 43.8187 22.7156C47.0812 23.5312 49.4906 26.4844 49.4906 29.9906C49.4906 34.1344 46.1344 37.4906 41.9906 37.4906H13.4906C8.52187 37.4906 4.49063 33.4594 4.49063 28.4906C4.49063 24.4875 7.10625 21.0844 10.7344 19.9219C11.8406 19.5656 12.4969 18.4219 12.2438 17.2875C12.075 16.5469 11.9906 15.7781 11.9906 14.9906L12 15ZM27 15C25.7531 15 24.75 16.0031 24.75 17.25V21.75H20.25C19.0031 21.75 18 22.7531 18 24C18 25.2469 19.0031 26.25 20.25 26.25H24.75V30.75C24.75 31.9969 25.7531 33 27 33C28.2469 33 29.25 31.9969 29.25 30.75V26.25H33.75C34.9969 26.25 36 25.2469 36 24C36 22.7531 34.9969 21.75 33.75 21.75H29.25V17.25C29.25 16.0031 28.2469 15 27 15Z' fill='%23666666'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* "Selecteer een bestand" text via ::after */
#ohc-form-layout .acf-image-uploader .hide-if-value::after,
#ohc-form-layout .acf-file-uploader .hide-if-value::after {
    content: 'Selecteer een bestand op uw computer';
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-decoration: underline;
    text-align: center;
    display: block;
}

/* Hide original text/buttons inside hide-if-value but keep them clickable */
#ohc-form-layout .acf-image-uploader .hide-if-value > p,
#ohc-form-layout .acf-image-uploader .hide-if-value > .acf-button,
#ohc-form-layout .acf-image-uploader .hide-if-value > .acf-basic-uploader {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Make hide-if-value position relative for the absolute overlay */
#ohc-form-layout .acf-image-uploader .hide-if-value,
#ohc-form-layout .acf-file-uploader .hide-if-value {
    position: relative;
}

#ohc-form-layout .acf-image-uploader:hover,
#ohc-form-layout .acf-file-uploader:hover {
    border-color: #646F47;
    background: #f5f7f2;
}

/* Selected file name display */
#ohc-form-layout .ohc-file-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f5f7f2;
    border: 1px solid #646F47;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    margin-top: 8px;
}
#ohc-form-layout .ohc-file-selected__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#ohc-form-layout .ohc-file-selected__remove {
    background: none;
    border: 1px solid #000;
    cursor: pointer;
    color: #000;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    margin-left: 12px;
    flex-shrink: 0;
}
#ohc-form-layout .ohc-file-selected__remove:hover {
    background: #000;
    color: #fff;
}

#ohc-form-layout .acf-image-uploader .image-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

#ohc-form-layout .acf-image-uploader .image-wrap img {
    max-width: 100%;
    height: auto;
    display: none;
}

#ohc-form-layout .acf-image-uploader .acf-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#ohc-form-layout .acf-image-uploader .image-wrap:hover .acf-actions {
    opacity: 1;
}

#ohc-form-layout .acf-image-uploader .acf-icon {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

#ohc-form-layout .acf-image-uploader .acf-icon:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   Radio Buttons
   ========================================================================== */

#ohc-form-layout .acf-radio-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#ohc-form-layout .acf-radio-list li label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

#ohc-form-layout .acf-radio-list li label:hover {
    border-color: #646F47;
}

#ohc-form-layout .acf-radio-list li label.selected {
    border-color: #646F47;
    background: #f5f7f2;
}

#ohc-form-layout .acf-radio-list input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #646F47;
    cursor: pointer;
}

/* ==========================================================================
   Checkbox Card Styling
   ========================================================================== */

#ohc-form-layout .acf-checkbox-list,
#ohc-form-layout .af-field-checkbox .acf-checkbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

#ohc-form-layout .acf-checkbox-list li {
    margin: 0;
}

#ohc-form-layout .acf-checkbox-list li label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    min-height: 56px;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    font-size: 14px;
    color: #333;
}

#ohc-form-layout .acf-checkbox-list li label:hover {
    border-color: #646F47;
}

#ohc-form-layout .acf-checkbox-list li label:has(input:checked) {
    border-color: #646F47;
    background: #f9faf7;
    color: #646F47;
    font-weight: 400;
}

/* Selected: icons, stepper, tooltip all green */
#ohc-form-layout .acf-checkbox-list li label:has(input:checked) .ohc-install-icon {
    filter: brightness(0) saturate(100%) invert(40%) sepia(15%) saturate(900%) hue-rotate(50deg) brightness(93%);
}

#ohc-form-layout .acf-checkbox-list li label:has(input:checked) .ohc-tooltip-trigger {
    color: #646F47;
}

#ohc-form-layout .acf-checkbox-list li label:has(input:checked) .ohc-qty-btn {
    border-color: #646F47 !important;
    color: #646F47;
}

/* Deselected: body text color */
#ohc-form-layout .acf-checkbox-list li label .ohc-install-icon {
    filter: brightness(0) saturate(100%) invert(25%) sepia(0%) saturate(0%) brightness(50%);
    transition: filter 0.2s ease;
}

#ohc-form-layout .acf-checkbox-list li label .ohc-tooltip-trigger {
    color: #666;
}

#ohc-form-layout .acf-checkbox-list li label .ohc-qty-btn {
    border-color: #999 !important;
    color: #666;
}

#ohc-form-layout .acf-checkbox-list input[type="checkbox"] {
    position: relative;
    width: 0px;
    height: 0px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #ccc;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    display: none;
}

#ohc-form-layout .acf-checkbox-list input[type="checkbox"]:checked {
    background: #646F47;
    border-color: #646F47;
}

#ohc-form-layout .acf-checkbox-list input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#ohc-form-layout .af-field-installations .acf-checkbox-list,
#ohc-form-layout .af-field-install-additional-subscriptions .acf-checkbox-list {
    grid-template-columns: repeat(2, 1fr);
}

#ohc-form-layout .acf-checkbox-list::before,
#ohc-form-layout .acf-checkbox-list::after {
    display: none;
}

/* ==========================================================================
   Quantity Stepper (inside installation cards)
   ========================================================================== */

.ohc-quantity-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

#ohc-form-layout .ohc-qty-btn,
.ohc-qty-btn {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border: 1.5px solid #646F47 !important;
    border-radius: 50% !important;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #646F47;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.ohc-qty-btn:hover {
    background: #646F47;
    color: #fff;
}

.ohc-qty-value {
    min-width: 24px;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: #646F47;
    user-select: none;
}

/* ==========================================================================
   Tooltip (info icon on installation cards)
   ========================================================================== */

.ohc-tooltip-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.ohc-tooltip-trigger:hover {
    color: #646F47;
}

.ohc-tooltip-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: normal;
    width: max-content;
    max-width: 240px;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ohc-tooltip-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}

/* Hover show (desktop) */
.ohc-tooltip-trigger:hover .ohc-tooltip-bubble {
    opacity: 1;
    visibility: visible;
}

/* Click/tap show (mobile) */
.ohc-tooltip-bubble.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==========================================================================
   ACF Repeater inside Accordions
   ========================================================================== */

#ohc-form-layout .acf-repeater>table {
    background-color: transparent;
}

/* Hide default ACF repeater chrome */
#ohc-form-layout .acf-repeater > .acf-actions,
#ohc-form-layout .acf-repeater .acf-actions {
    display: none !important;
}

#ohc-form-layout .acf-repeater .acf-row-handle,
#ohc-form-layout .acf-repeater td.acf-row-handle {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
}

#ohc-form-layout .acf-repeater > .acf-table > thead,
#ohc-form-layout .acf-repeater .acf-table > thead {
    display: none !important;
}

/* Repeater rows: remove ACF default borders */
#ohc-form-layout .acf-repeater .acf-row {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
}

#ohc-form-layout .acf-repeater .acf-fields,
#ohc-form-layout .acf-repeater td.acf-fields {
    border: none !important;
    border-left: none !important;
    background: transparent !important;
}

#ohc-form-layout .acf-repeater .acf-table {
    border: none !important;
}

/* Table layout fallback: force vertical stack */
#ohc-form-layout .acf-repeater.-table > .acf-table,
#ohc-form-layout .acf-repeater.-table > .acf-table > tbody,
#ohc-form-layout .acf-repeater.-table > .acf-table > tbody > .acf-row,
#ohc-form-layout .acf-repeater.-table > .acf-table > tbody > .acf-row > td {
    display: block !important;
    width: 100% !important;
    border: none !important;
}

/* Block layout: clean field spacing */
#ohc-form-layout .acf-repeater.-block .acf-fields > .acf-field {
    border-top: none !important;
    padding: 16px 0 !important;
}

/* Block layout: full width fields (remove row-handle column space) */
#ohc-form-layout .acf-repeater.-block td.acf-fields {
    width: 100% !important;
}

/* ==========================================================================
   Transparent Parent Accordion (when quantity > 1)
   Makes the parent wrapper invisible so unit sections look like standalone items
   ========================================================================== */

/* Hide parent label (header) — high specificity to beat accordion label rules */
#ohc-form-layout .ohc-transparent-accordion.ohc-transparent-accordion > .af-label {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Hide parent accordion next button — units have their own next buttons */
#ohc-form-layout .ohc-transparent-accordion .ohc-accordion-next-wrapper {
    display: none !important;
}

/* Remove parent content chrome (no border, no padding, no background) */
#ohc-form-layout .ohc-transparent-accordion.ohc-transparent-accordion > .af-input,
#ohc-form-layout .ohc-transparent-accordion.ohc-transparent-accordion > .af-input.acf-input {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-top: none !important;
}

/* Remove parent wrapper border/shadow if any */
#ohc-form-layout .ohc-transparent-accordion.ohc-transparent-accordion {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

/* Remove parent-level info banner inside transparent parent — keep unit-level banners */
#ohc-form-layout .ohc-transparent-accordion > .af-input > .ohc-accordion-info {
    display: none !important;
}

/* Hide the ::before and ::after pseudo-elements on the parent label */
#ohc-form-layout .ohc-transparent-accordion.ohc-transparent-accordion > .af-label::before,
#ohc-form-layout .ohc-transparent-accordion.ohc-transparent-accordion > .af-label::after {
    display: none !important;
}

/* Force repeater table elements to block inside transparent parent */
#ohc-form-layout .ohc-transparent-accordion .acf-repeater .acf-table,
#ohc-form-layout .ohc-transparent-accordion .acf-repeater .acf-table > tbody,
#ohc-form-layout .ohc-transparent-accordion .acf-repeater .acf-row:not(.acf-clone),
#ohc-form-layout .ohc-transparent-accordion .acf-repeater td.acf-fields {
    display: block !important;
    width: 100% !important;
    border: none !important;
}
#ohc-form-layout .ohc-transparent-accordion .acf-repeater .acf-row:not(.acf-clone) + .acf-row:not(.acf-clone) {
    margin-top: 16px;
}

/* ==========================================================================
   Per-Unit Collapsible Sections (styled like standalone accordions)
   ========================================================================== */

/* Section wrapper — mimics accordion card appearance */
.ohc-unit-section {
    margin-bottom: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    overflow: hidden;
}
.ohc-unit-section.ohc-unit-open {
    border: 1px solid #646F47;
}
.ohc-unit-section:last-child {
    margin-bottom: 0;
}

/* Clickable header — matches accordion .af-label styling exactly */
.ohc-unit-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 16px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, opacity 0.3s ease;
    position: relative;
}

.ohc-unit-header:hover {
    background: #f9f9f9;
}

/* Indicator column — matches accordion .af-label::before (left column with border) */
.ohc-unit-header::before {
    content: '';
    align-self: stretch;
    width: 48px;
    min-width: 48px;
    display: block;
    order: -1;
    border-right: 1px solid #e0e0e0;
    margin-left: -16px;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7.5' stroke='%23ccc'/%3E%3C/svg%3E") center/16px 16px no-repeat;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Arrow — matches accordion .af-label::after */
.ohc-unit-header .ohc-unit-arrow {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    color: #666;
}

/* Title text */
.ohc-unit-header > span:not(.ohc-accordion-icons):not(.ohc-accordion-edit) {
    font-size: 14px;
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
    color: #333;
    flex: 1;
    text-align: left;
}

/* Collapsed state: hide content */
.ohc-unit-section .ohc-unit-content {
    display: none;
    padding: 20px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
}

/* Open state: show content, green accents */
.ohc-unit-section.ohc-unit-open .ohc-unit-content {
    display: block;
    border-top-color: #646F47;
}

.ohc-unit-section.ohc-unit-open .ohc-unit-header::before {
    border-right-color: #646F47;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5Z' stroke='%23646F47'/%3E%3Ccircle cx='8' cy='8' r='4' fill='%23646F47'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

.ohc-unit-section.ohc-unit-open .ohc-unit-header > span:not(.ohc-accordion-icons):not(.ohc-accordion-edit) {
    color: #646F47;
}

.ohc-unit-section.ohc-unit-open .ohc-unit-arrow {
    color: #646F47;
    transform: rotate(180deg);
}

/* Icons inside unit headers */
.ohc-unit-header .ohc-accordion-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ohc-unit-header .ohc-accordion-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Open state: icons turn green */
.ohc-unit-section.ohc-unit-open .ohc-unit-header .ohc-accordion-icon {
    filter: brightness(0) saturate(100%) invert(40%) sepia(15%) saturate(900%) hue-rotate(50deg) brightness(93%);
}

/* Fields inside unit sections */
.ohc-unit-content > .acf-field {
    border-top: none !important;
    padding: 10px 0 !important;
}

/* Unit next button wrapper */
.ohc-unit-next-wrapper {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
}

/* Unit next button — outline black style */
.ohc-unit-next-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: transparent !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: not-allowed;
    font-family: inherit;
    opacity: 0.5;
    transition: all 0.3s ease !important;
}

.ohc-unit-next-btn:not(:disabled) {
    cursor: pointer;
    opacity: 1;
}

.ohc-unit-next-btn:not(:disabled):hover {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* Complete state: green checkmark + grayed out header */
.ohc-unit-section.ohc-unit-complete .ohc-unit-header::before {
    border-right-color: #646F47;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat,
        radial-gradient(circle, #646F47 8px, transparent 8px) center no-repeat;
}
.ohc-unit-section.ohc-unit-complete:not(.ohc-unit-open) .ohc-unit-header {
    opacity: 1;
}

/* Show "wijzigen" on complete, closed unit-accordions (needs #ohc-form-layout to beat base display:none) */
#ohc-form-layout .ohc-unit-section.ohc-unit-complete:not(.ohc-unit-open) .ohc-unit-header .ohc-accordion-edit {
    display: inline;
}

/* ==========================================================================
   Field Spacing
   ========================================================================== */

#ohc-form-layout .af-field,
#ohc-form-layout .acf-field {
    margin-bottom: 0px;
}

#ohc-form-layout .af-field:last-child,
#ohc-form-layout .acf-field:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Validation Error Styling
   ========================================================================== */

#ohc-form-layout .acf-field.acf-error input,
#ohc-form-layout .acf-field.acf-error select,
#ohc-form-layout .acf-field.acf-error textarea {
    border-color: #dc3545;
}

#ohc-form-layout .acf-field.acf-error input:focus,
#ohc-form-layout .acf-field.acf-error select:focus,
#ohc-form-layout .acf-field.acf-error textarea:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

#ohc-form-layout .acf-error-message {
    color: #dc3545;
    font-size: 13px;
    margin-top: 6px;
}
#ohc-form-layout .acf-error-message {
     background: #fee6e7;
}

/* Required Field Indicator */
#ohc-form-layout .acf-required {
    color: #000;
    margin-left: 0px;
}

/* ==========================================================================
   Form Buttons
   ========================================================================== */

#ohc-form-layout .af-submit {
    display: flex;
    gap: 12px;
    margin-top: 0px;
    padding: 0px;
    margin-left: auto;
}

#ohc-form-layout .af-next-button {
    margin-right: 0px;
    margin-left: auto;
}

#ohc-form-layout .af-previous-button,
#ohc-form-layout .af-next-button,
#ohc-form-layout .af-submit-button {
    background: #646F47;
    color: #fff;
    border: none;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
    border-radius: 0px;
}

#ohc-form-layout .af-previous-button:hover,
#ohc-form-layout .af-next-button:hover,
#ohc-form-layout .af-submit-button:hover {
    background: #566139;
}

#ohc-form-layout .af-previous-button:disabled,
#ohc-form-layout .af-next-button:disabled,
#ohc-form-layout .af-submit-button:disabled {
    background: #ccc;
    color: #888;
    cursor: not-allowed;
}

#ohc-form-layout .af-submit .af-previous-button[disabled] {
    display: none;
}

/* ==========================================================================
   Installation Accordion (Stap 3 & 4)
   ========================================================================== */

#ohc-form-layout .af-field-cv-ketel-details,
#ohc-form-layout .af-field-cv-hybrid-details,
#ohc-form-layout .af-field-heatpump-details,
#ohc-form-layout .af-field-airco-single-details,
#ohc-form-layout .af-field-airco-multi-details,
#ohc-form-layout .af-field-solar-boiler-details,
#ohc-form-layout .af-field-hrv-details,
#ohc-form-layout .af-field-ventilation-details,
#ohc-form-layout .af-field-cv-ketel-subscription-group,
#ohc-form-layout .af-field-cv-hybrid-subscription-group,
#ohc-form-layout .af-field-warmtepomp-subscription-group,
#ohc-form-layout .af-field-airco-single-subscription-group,
#ohc-form-layout .af-field-airco-multi-subscription-group,
#ohc-form-layout .af-field-other-installations-group {
    border: 1px solid #e0e0e0;
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

#ohc-form-layout .af-field-cv-ketel-details.is-accordion-open,
#ohc-form-layout .af-field-cv-hybrid-details.is-accordion-open,
#ohc-form-layout .af-field-heatpump-details.is-accordion-open,
#ohc-form-layout .af-field-airco-single-details.is-accordion-open,
#ohc-form-layout .af-field-airco-multi-details.is-accordion-open,
#ohc-form-layout .af-field-solar-boiler-details.is-accordion-open,
#ohc-form-layout .af-field-hrv-details.is-accordion-open,
#ohc-form-layout .af-field-ventilation-details.is-accordion-open,
#ohc-form-layout .af-field-cv-ketel-subscription-group.is-accordion-open,
#ohc-form-layout .af-field-cv-hybrid-subscription-group.is-accordion-open,
#ohc-form-layout .af-field-warmtepomp-subscription-group.is-accordion-open,
#ohc-form-layout .af-field-airco-single-subscription-group.is-accordion-open,
#ohc-form-layout .af-field-airco-multi-subscription-group.is-accordion-open,
#ohc-form-layout .af-field-other-installations-group.is-accordion-open {
    border-color: #646F47;
}

/* Accordion Header */
#ohc-form-layout .af-field-cv-ketel-details > .af-label,
#ohc-form-layout .af-field-cv-hybrid-details > .af-label,
#ohc-form-layout .af-field-heatpump-details > .af-label,
#ohc-form-layout .af-field-airco-single-details > .af-label,
#ohc-form-layout .af-field-airco-multi-details > .af-label,
#ohc-form-layout .af-field-solar-boiler-details > .af-label,
#ohc-form-layout .af-field-hrv-details > .af-label,
#ohc-form-layout .af-field-ventilation-details > .af-label,
#ohc-form-layout .af-field-cv-ketel-subscription-group > .af-label,
#ohc-form-layout .af-field-cv-hybrid-subscription-group > .af-label,
#ohc-form-layout .af-field-warmtepomp-subscription-group > .af-label,
#ohc-form-layout .af-field-airco-single-subscription-group > .af-label,
#ohc-form-layout .af-field-airco-multi-subscription-group > .af-label,
#ohc-form-layout .af-field-other-installations-group > .af-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 16px;
    background: #fff;
    cursor: pointer;
    margin: 0;
    user-select: none;
    transition: background-color 0.2s ease;
}

#ohc-form-layout .af-field-cv-ketel-details > .af-label:hover,
#ohc-form-layout .af-field-cv-hybrid-details > .af-label:hover,
#ohc-form-layout .af-field-heatpump-details > .af-label:hover,
#ohc-form-layout .af-field-airco-single-details > .af-label:hover,
#ohc-form-layout .af-field-airco-multi-details > .af-label:hover,
#ohc-form-layout .af-field-solar-boiler-details > .af-label:hover,
#ohc-form-layout .af-field-hrv-details > .af-label:hover,
#ohc-form-layout .af-field-ventilation-details > .af-label:hover,
#ohc-form-layout .af-field-cv-ketel-subscription-group > .af-label:hover,
#ohc-form-layout .af-field-cv-hybrid-subscription-group > .af-label:hover,
#ohc-form-layout .af-field-warmtepomp-subscription-group > .af-label:hover,
#ohc-form-layout .af-field-airco-single-subscription-group > .af-label:hover,
#ohc-form-layout .af-field-airco-multi-subscription-group > .af-label:hover,
#ohc-form-layout .af-field-other-installations-group > .af-label:hover {
    background: #f9f9f9;
}

#ohc-form-layout .af-field-cv-ketel-details > .af-label label,
#ohc-form-layout .af-field-cv-hybrid-details > .af-label label,
#ohc-form-layout .af-field-heatpump-details > .af-label label,
#ohc-form-layout .af-field-airco-single-details > .af-label label,
#ohc-form-layout .af-field-airco-multi-details > .af-label label,
#ohc-form-layout .af-field-solar-boiler-details > .af-label label,
#ohc-form-layout .af-field-hrv-details > .af-label label,
#ohc-form-layout .af-field-ventilation-details > .af-label label,
#ohc-form-layout .af-field-cv-ketel-subscription-group > .af-label label,
#ohc-form-layout .af-field-cv-hybrid-subscription-group > .af-label label,
#ohc-form-layout .af-field-warmtepomp-subscription-group > .af-label label,
#ohc-form-layout .af-field-airco-single-subscription-group > .af-label label,
#ohc-form-layout .af-field-airco-multi-subscription-group > .af-label label,
#ohc-form-layout .af-field-other-installations-group > .af-label label {
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: 'Rubik', sans-serif;
    flex: 1;
    cursor: pointer;
    margin-bottom: 0px;
}

/* Accordion Content */
#ohc-form-layout .af-field-cv-ketel-details > .af-input,
#ohc-form-layout .af-field-cv-hybrid-details > .af-input,
#ohc-form-layout .af-field-heatpump-details > .af-input,
#ohc-form-layout .af-field-airco-single-details > .af-input,
#ohc-form-layout .af-field-airco-multi-details > .af-input,
#ohc-form-layout .af-field-solar-boiler-details > .af-input,
#ohc-form-layout .af-field-hrv-details > .af-input,
#ohc-form-layout .af-field-ventilation-details > .af-input,
#ohc-form-layout .af-field-cv-ketel-subscription-group > .af-input,
#ohc-form-layout .af-field-cv-hybrid-subscription-group > .af-input,
#ohc-form-layout .af-field-warmtepomp-subscription-group > .af-input,
#ohc-form-layout .af-field-airco-single-subscription-group > .af-input,
#ohc-form-layout .af-field-airco-multi-subscription-group > .af-input,
#ohc-form-layout .af-field-other-installations-group > .af-input {
    display: none !important;
    padding: 20px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
}

#ohc-form-layout .is-accordion-open > .af-input.acf-input {
    display: block !important;
    border-top-color: #646F47;
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
}

/* Ensure inputs in open accordion are fully interactive */
#ohc-form-layout .is-accordion-open > .af-input.acf-input input,
#ohc-form-layout .is-accordion-open > .af-input.acf-input select,
#ohc-form-layout .is-accordion-open > .af-input.acf-input textarea {
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    border-radius: 0px !important
}

/* Open state - indicator becomes SVG circle-in-circle */
#ohc-form-layout .is-accordion-open > .af-label::before {
    border-right-color: #646F47 !important;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5Z' stroke='%23646F47'/%3E%3Ccircle cx='8' cy='8' r='4' fill='%23646F47'/%3E%3C/svg%3E") center/16px 16px no-repeat !important;
}

/* Open state - title green */
#ohc-form-layout .is-accordion-open > .af-label label {
    color: #646F47 !important;
}

/* Open state - icons green */
#ohc-form-layout .is-accordion-open > .af-label .ohc-accordion-icon {
    filter: brightness(0) saturate(100%) invert(40%) sepia(15%) saturate(900%) hue-rotate(50deg) brightness(93%);
}

/* Open state - arrow green */
#ohc-form-layout .is-accordion-open > .af-label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23657048' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* "wijzigen" text — only visible when accordion is complete and closed */
#ohc-form-layout .ohc-accordion-edit {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Rubik', sans-serif;
    color: #1a1a1a;
    margin-left: auto;
    white-space: nowrap;
    text-decoration: underline;
    display: none;
}

#ohc-form-layout .is-complete-accordion:not(.is-accordion-open) > .af-label .ohc-accordion-edit {
    display: inline;
}

/* Inner fields styling */
#ohc-form-layout .af-field-cv-ketel-details .acf-fields,
#ohc-form-layout .af-field-cv-hybrid-details .acf-fields,
#ohc-form-layout .af-field-heatpump-details .acf-fields,
#ohc-form-layout .af-field-airco-single-details .acf-fields,
#ohc-form-layout .af-field-airco-multi-details .acf-fields,
#ohc-form-layout .af-field-solar-boiler-details .acf-fields,
#ohc-form-layout .af-field-hrv-details .acf-fields,
#ohc-form-layout .af-field-ventilation-details .acf-fields,
#ohc-form-layout .af-field-cv-ketel-subscription-group .acf-fields,
#ohc-form-layout .af-field-cv-hybrid-subscription-group .acf-fields,
#ohc-form-layout .af-field-warmtepomp-subscription-group .acf-fields,
#ohc-form-layout .af-field-airco-single-subscription-group .acf-fields,
#ohc-form-layout .af-field-airco-multi-subscription-group .acf-fields,
#ohc-form-layout .af-field-other-installations-group .acf-fields {
    border: none;
    background: transparent;
    padding: 0;
}

#ohc-form-layout .af-field-cv-ketel-details .acf-field,
#ohc-form-layout .af-field-cv-hybrid-details .acf-field,
#ohc-form-layout .af-field-heatpump-details .acf-field,
#ohc-form-layout .af-field-airco-single-details .acf-field,
#ohc-form-layout .af-field-airco-multi-details .acf-field,
#ohc-form-layout .af-field-solar-boiler-details .acf-field,
#ohc-form-layout .af-field-hrv-details .acf-field,
#ohc-form-layout .af-field-ventilation-details .acf-field,
#ohc-form-layout .af-field-cv-ketel-subscription-group .acf-field,
#ohc-form-layout .af-field-cv-hybrid-subscription-group .acf-field,
#ohc-form-layout .af-field-warmtepomp-subscription-group .acf-field,
#ohc-form-layout .af-field-airco-single-subscription-group .acf-field,
#ohc-form-layout .af-field-airco-multi-subscription-group .acf-field,
#ohc-form-layout .af-field-other-installations-group .acf-field {
    padding: 0 !important;
    border: none;
    min-height: 0;
}

/* Accordion header icons */
#ohc-form-layout .ohc-accordion-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
#ohc-form-layout .ohc-accordion-icons .ohc-accordion-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Hide JS-created indicator and arrow (CSS pseudo-elements handle this now) */
#ohc-form-layout .ohc-accordion-indicator { display: none; }
#ohc-form-layout .ohc-accordion-arrow { display: none; }

/* Indicator complete state - green circle with checkmark (needs !important to beat default's attribute-selector specificity) */
#ohc-form-layout .is-complete-accordion > .af-label::before {
    border-right-color: #646F47 !important;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat,
        radial-gradient(circle, #646F47 8px, transparent 8px) center no-repeat !important;
}

/* Completed + closed accordion: gray out header elements except "wijzigen" */
#ohc-form-layout .is-complete-accordion:not(.is-accordion-open) > .af-label::before,
#ohc-form-layout .is-complete-accordion:not(.is-accordion-open) > .af-label label,
#ohc-form-layout .is-complete-accordion:not(.is-accordion-open) > .af-label .ohc-accordion-icons,
#ohc-form-layout .is-complete-accordion:not(.is-accordion-open) > .af-label .ohc-accordion-arrow {
    opacity: 0.55;
}

/* Accordion Info Banner */
#ohc-form-layout .ohc-accordion-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 16px;
    background: #F2F4FFF4;
    margin-bottom: 0px;
    font-size: 12px;
    color: #4a5568;
    line-height: 1.5;
    border: 1px solid ##4B6FF4;
}

#ohc-form-layout .ohc-accordion-info svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 3px;
}

#ohc-form-layout .ohc-accordion-info a {
    color: #4B6FF4;
    text-decoration: underline;
}

/* ==========================================================================
   Subscription Cards (Stap 4)
   ========================================================================== */

/* Subscription cards: 2-column grid */
#ohc-form-layout .ohc-subscription-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Each card: bordered box, no radius, no green bg */
#ohc-form-layout .ohc-subscription-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    background: #fff;
    transition: border-color 0.2s ease;
}

#ohc-form-layout .ohc-subscription-card:hover {
    border-color: #b0b89a;
}

/* Selected state: darker border only */
#ohc-form-layout .ohc-subscription-card.is-selected {
    border-color: #646F47;
}

/* Card header row: radio + title, with border-bottom */
#ohc-form-layout .ohc-subscription-card__radio-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

/* Fake radio circle */
#ohc-form-layout .ohc-subscription-card__radio {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    border: 2px solid #ccc;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

#ohc-form-layout .ohc-subscription-card.is-selected .ohc-subscription-card__radio {
    border-color: #646F47;
    border-width: 6px;
}

#ohc-form-layout .ohc-subscription-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#ohc-form-layout .ohc-subscription-card__title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

#ohc-form-layout .ohc-subscription-card__subtitle {
    font-size: 13px;
    color: #333;
    margin-bottom: 10px;
}

#ohc-form-layout .ohc-subscription-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 auto 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#ohc-form-layout .ohc-subscription-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #646F47;
    line-height: 1.4;
}

#ohc-form-layout .ohc-subscription-card__features svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Price box at bottom */
#ohc-form-layout .ohc-subscription-card__price-box {
    background: #f5f5f0;
    padding: 12px 16px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#ohc-form-layout .ohc-subscription-card__price-box .ohc-subscription-card__price {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
}

#ohc-form-layout .ohc-subscription-card__price-box .ohc-subscription-card__period {
    font-size: 13px;
    color: #666;
}

/* Subscription group content: reduce top padding so cards sit closer to header */
#ohc-form-layout [class*="subscription-group"] > .af-input {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* Mobile: stack cards */
@media (max-width: 600px) {
    #ohc-form-layout .ohc-subscription-cards {
        grid-template-columns: 1fr;
    }
}

/* Hide duplicate label inside subscription group */
#ohc-form-layout [class*="subscription-group"] > .af-input > .acf-fields > .acf-field-radio > .acf-label {
    display: none;
}

/* ==========================================================================
   Overige Installaties (Stap 4)
   ========================================================================== */

/* Show the ACF label with checkmark for other installations */
#ohc-form-layout .af-field-other-installations-group .acf-field-checkbox > .acf-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 8px;
}
#ohc-form-layout .af-field-other-installations-group .acf-field-checkbox > .acf-label::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: #646F47;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* Zero padding on other installations fields */
#ohc-form-layout .af-field-other-installations-group .acf-fields > .acf-field {
    padding: 0 !important;
}

/* Checkbox list styling for other installations */
#ohc-form-layout .af-field-other-installations-group .acf-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

#ohc-form-layout .af-field-other-installations-group .acf-checkbox-list li {
    margin: 0;
}

#ohc-form-layout .af-field-other-installations-group .acf-checkbox-list li label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

#ohc-form-layout .af-field-other-installations-group .acf-checkbox-list li label:hover {
    border-color: #646F47;
}

#ohc-form-layout .af-field-other-installations-group .acf-checkbox-list li label:has(input:checked) {
    border-color: #646F47;
    background: #f9faf7;
}

#ohc-form-layout .af-field-other-installations-group .acf-checkbox-list input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #646F47;
    flex-shrink: 0;
}

/* Item wrapper - naam links, prijs rechts */
#ohc-form-layout .ohc-other-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    gap: 16px;
}

#ohc-form-layout .ohc-other-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#ohc-form-layout .ohc-other-item__name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

#ohc-form-layout .ohc-other-item__subtitle {
    font-size: 13px;
    color: #888;
    font-weight: 400;
}

#ohc-form-layout .ohc-other-item__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

#ohc-form-layout .ohc-other-item__amount {
    font-size: 18px;
    font-weight: 700;
    color: #646F47;
}

#ohc-form-layout .ohc-other-item__period {
    font-size: 12px;
    color: #888;
    font-weight: 400;
}

/* ==========================================================================
   0-meting Styling (alle subscription groups)
   ========================================================================== */

#ohc-form-layout .acf-field-message[data-name*="zero_measurement"] {
    margin-top: 20px;
    padding: 0;
    border: none;
    min-height: 0;
}

#ohc-form-layout .acf-field-message[data-name*="zero_measurement"] > .acf-label {
    display: none;
}

#ohc-form-layout .acf-field-message[data-name*="zero_measurement"] > .acf-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Title row above blue box */
#ohc-form-layout .ohc-zero-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

#ohc-form-layout .ohc-zero-title svg {
    stroke: #888;
}

/* 0-meting info box — same style as .ohc-accordion-info */
#ohc-form-layout .ohc-zero-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: #f0f4ff;
    border: 1px solid #4B6FF4;
    font-size: 12px;
    color: #4a5568;
    line-height: 1.5;
}

#ohc-form-layout .ohc-zero-body svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: #5b7bd5;
    margin-top: 2px;
}

#ohc-form-layout .ohc-zero-body p {
    margin: 0;
}

/* ==========================================================================
   Mobile Step Indicator
   ========================================================================== */

/* Hidden on desktop */
#ohc-form-layout .ohc-mobile-steps {
    display: none;
}

/* ==========================================================================
   Totals Bar (step 4 only)
   ========================================================================== */

#ohc-form-layout .ohc-totals-bar {
    background: #646F47;
    color: #fff;
    padding: 16px 24px;
    order: -1;
}

#ohc-form-layout .ohc-totals-bar__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #fff;
}

#ohc-form-layout .ohc-totals-bar__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#ohc-form-layout .ohc-totals-bar__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: transparent;
    font-size: 14px;
}
#ohc-form-layout .ohc-totals-bar__row:first-child {
    background: rgba(255, 255, 255, 0.1);
}

#ohc-form-layout .ohc-totals-bar__row span:last-child {
    font-weight: 700;
    font-size: 14px;
}

/* Both totals bars hidden by default, shown via .ohc-totals-visible class */
#ohc-form-layout .ohc-totals-bar--mobile {
    display: none;
}
#ohc-form-layout .ohc-totals-bar--desktop {
    display: none;
    background: transparent;
    padding: 0;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
#ohc-form-layout .ohc-totals-bar--desktop.ohc-totals-visible {
    display: block;
}

@media (max-width: 1024px) {
    #ohc-form-layout .ohc-totals-bar--desktop {
        display: none !important;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    #ohc-form-layout.ohc-form-layout {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 0;
    }

    /* Show mobile step indicator */
    #ohc-form-layout .ohc-mobile-steps {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        background: #646F47;
        padding: 20px 24px;
        grid-column: 1 / -1;
        order: -2;
    }

    /* Mobile totals bar: show on step 4 and 5 */
    #ohc-form-layout .ohc-totals-bar--mobile.ohc-totals-visible {
        display: block !important;
        order: unset !important;
        margin-bottom: -16px;
        margin-top: -16px;
        border: 1px solid #646F47;
        width:100%;
    }

    .ohc-mobile-step {
        display: flex;
        align-items: center;
    }

    /* Dashed line between steps */
    .ohc-mobile-step:not(:last-child)::after {
        content: '';
        width: 32px;
        height: 0;
        border-top: 2px dashed rgba(255, 255, 255, 0.4);
        margin: 0 4px;
    }
    .ohc-mobile-step.is-completed:not(:last-child)::after {
        border-top-style: solid;
        border-top-color: rgba(255, 255, 255, 0.6);
    }
    .ohc-mobile-step.is-completed:has(+ .ohc-mobile-step.is-active)::after {
        border-top-color: #fff;
        border-top-style: solid;
    }

    /* Circle */
    .ohc-mobile-step__circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        transition: all 0.3s ease;
    }

    .ohc-mobile-step__number {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.4);
        line-height: 1;
    }

    .ohc-mobile-step__check {
        width: 16px;
        height: 16px;
        display: none;
        stroke: rgba(255, 255, 255, 0.6);
    }

    /* Active state */
    .ohc-mobile-step.is-active .ohc-mobile-step__circle {
        background: #fff;
        border-color: #fff;
    }
    .ohc-mobile-step.is-active .ohc-mobile-step__number {
        color: #646F47;
    }

    /* Completed state */
    .ohc-mobile-step.is-completed .ohc-mobile-step__number {
        display: none;
    }
    .ohc-mobile-step.is-completed .ohc-mobile-step__check {
        display: block;
    }
    .ohc-mobile-step.is-completed .ohc-mobile-step__circle {
        border-color: rgba(255, 255, 255, 0.6);
    }

    /* Hide sidebar on mobile */
    #ohc-form-layout .ohc-form-layout__sidebar {
        display: none;
    }

    /* Main content takes full width */
    #ohc-form-layout .ohc-form-layout__main {
        padding-top: 24px;
    }

    /* All form fields 1 column (except step 5 grid) */
    #ohc-form-layout .af-fields:not(.ohc-step5-grid) {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    #ohc-form-layout .acf-fields > .acf-field {
        padding: 0 !important;
    }
    /* Restore padding inside accordion content on mobile */
    #ohc-form-layout [class*="-details"] .acf-fields > .acf-field,
    #ohc-form-layout [class*="-subscription-group"] .acf-fields > .acf-field,
    #ohc-form-layout .af-field-other-installations-group .acf-fields > .acf-field {
        padding: 16px 0 !important;
    }

    /* Step 1: postcode full width, huisnummer + toevoeging side by side via flex */
    #ohc-form-layout .af-fields:not(.ohc-step5-grid):has(.af-field-zip:not(.acf-hidden)) {
        display: flex !important;
        flex-wrap: wrap;
        gap: 16px;
    }
    #ohc-form-layout .af-field-zip {
        flex: 0 0 100%;
    }
    #ohc-form-layout .af-field-housenumber {
        flex: 1 1 0;
        min-width: 0;
    }
    #ohc-form-layout .af-field-addition {
        flex: 1 1 0;
        min-width: 0;
    }
    #ohc-form-layout .af-submit {
        flex: 0 0 100%;
        justify-content: flex-end;
    }

    /* Checkboxes 1 column on mobile */
    #ohc-form-layout .acf-checkbox-list,
    #ohc-form-layout .af-field-installations .acf-checkbox-list,
    #ohc-form-layout .af-field-install-additional-subscriptions .acf-checkbox-list {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    #ohc-form-layout.ohc-form-layout {
        padding: 0 16px 20px;
    }

    #ohc-form-layout .ohc-mobile-steps {
        margin: 0 -16px;
        padding: 16px 20px;
    }

    .ohc-mobile-step__circle {
        width: 32px;
        height: 32px;
    }

    .ohc-mobile-step:not(:last-child)::after {
        width: 24px;
    }

    #ohc-form-layout .acf-checkbox-list {
        grid-template-columns: 1fr;
    }

    /* True/false toggles: label above, buttons full width below */
    #ohc-form-layout .acf-field-true-false {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    #ohc-form-layout .acf-field-true-false > .acf-input {
        width: 100%;
    }
    #ohc-form-layout .ohc-toggle-buttons {
        width: 100%;
    }
    #ohc-form-layout .ohc-toggle-btn {
        flex: 1;
    }

}

/* ==========================================================================
   Accordion "Volgende" Buttons
   ========================================================================== */

#ohc-form-layout .ohc-accordion-next-wrapper {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
}

#ohc-form-layout .ohc-accordion-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

#ohc-form-layout .ohc-accordion-next-btn:hover {
    background: #1a1a1a;
    color: #fff;
}

#ohc-form-layout .ohc-accordion-next-btn:active {
    transform: scale(0.98);
}

#ohc-form-layout .ohc-accordion-next-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

#ohc-form-layout .ohc-accordion-next-btn:hover svg {
    transform: translateX(3px);
}

/* Complete text for last accordion */
#ohc-form-layout .ohc-accordion-complete-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f0f4ff;
    font-size: 14px;
    color: #4a5568;
}

#ohc-form-layout .ohc-accordion-complete-text svg {
    flex-shrink: 0;
    stroke: #5b7bd5;
}

@media (max-width: 600px) {
    #ohc-form-layout .ohc-accordion-next-wrapper {
        flex-direction: column;
    }
    
    #ohc-form-layout .ohc-accordion-next-btn {
        width: 100%;
        justify-content: center;
    }
    
    #ohc-form-layout .ohc-accordion-complete-text {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ==========================================================================
   Smooth Accordion Transitions
   ========================================================================== */

/* Smooth accordion content */
#ohc-form-layout .af-field-cv-ketel-details > .af-input,
#ohc-form-layout .af-field-cv-hybrid-details > .af-input,
#ohc-form-layout .af-field-heatpump-details > .af-input,
#ohc-form-layout .af-field-airco-single-details > .af-input,
#ohc-form-layout .af-field-airco-multi-details > .af-input,
#ohc-form-layout .af-field-solar-boiler-details > .af-input,
#ohc-form-layout .af-field-hrv-details > .af-input,
#ohc-form-layout .af-field-ventilation-details > .af-input,
#ohc-form-layout .af-field-cv-ketel-subscription-group > .af-input,
#ohc-form-layout .af-field-cv-hybrid-subscription-group > .af-input,
#ohc-form-layout .af-field-warmtepomp-subscription-group > .af-input,
#ohc-form-layout .af-field-airco-single-subscription-group > .af-input,
#ohc-form-layout .af-field-airco-multi-subscription-group > .af-input,
#ohc-form-layout .af-field-other-installations-group > .af-input {
    overflow: hidden;
}

/* Smooth label hover */
#ohc-form-layout .af-field-cv-ketel-details > .af-label:hover,
#ohc-form-layout .af-field-cv-hybrid-details > .af-label:hover,
#ohc-form-layout .af-field-heatpump-details > .af-label:hover,
#ohc-form-layout .af-field-airco-single-details > .af-label:hover,
#ohc-form-layout .af-field-airco-multi-details > .af-label:hover,
#ohc-form-layout .af-field-solar-boiler-details > .af-label:hover,
#ohc-form-layout .af-field-hrv-details > .af-label:hover,
#ohc-form-layout .af-field-ventilation-details > .af-label:hover,
#ohc-form-layout .af-field-cv-ketel-subscription-group > .af-label:hover,
#ohc-form-layout .af-field-cv-hybrid-subscription-group > .af-label:hover,
#ohc-form-layout .af-field-warmtepomp-subscription-group > .af-label:hover,
#ohc-form-layout .af-field-airco-single-subscription-group > .af-label:hover,
#ohc-form-layout .af-field-airco-multi-subscription-group > .af-label:hover,
#ohc-form-layout .af-field-other-installations-group > .af-label:hover {
    background: #f9f9f9;
}

/* Ultra smooth scroll */
html {
    scroll-behavior: auto; /* We handle scroll in JS now */
}

/* Smooth accordion content - increased duration */
#ohc-form-layout .af-field-cv-ketel-details > .af-input,
#ohc-form-layout .af-field-cv-hybrid-details > .af-input,
#ohc-form-layout .af-field-heatpump-details > .af-input,
#ohc-form-layout .af-field-airco-single-details > .af-input,
#ohc-form-layout .af-field-airco-multi-details > .af-input,
#ohc-form-layout .af-field-solar-boiler-details > .af-input,
#ohc-form-layout .af-field-hrv-details > .af-input,
#ohc-form-layout .af-field-ventilation-details > .af-input,
#ohc-form-layout .af-field-cv-ketel-subscription-group > .af-input,
#ohc-form-layout .af-field-cv-hybrid-subscription-group > .af-input,
#ohc-form-layout .af-field-warmtepomp-subscription-group > .af-input,
#ohc-form-layout .af-field-airco-single-subscription-group > .af-input,
#ohc-form-layout .af-field-airco-multi-subscription-group > .af-input,
#ohc-form-layout .af-field-other-installations-group > .af-input {
    overflow: hidden;
    will-change: max-height, opacity;
}

/* Smooth transitions for all interactive elements */
#ohc-form-layout .ohc-accordion-arrow,
#ohc-form-layout .ohc-accordion-indicator,
#ohc-form-layout .ohc-accordion-next-btn {
    will-change: transform, background-color, opacity;
}

/* ==========================================================================
   Form Layout - Bottom Aligned Buttons
   ========================================================================== */

#ohc-form-layout .ohc-form-layout__main {
    display: flex;
    flex-direction: column;
}

#ohc-form-layout .af-form {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#ohc-form-layout .af-fields {
    flex: 1;
}

#ohc-form-layout .af-submit {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 0;
    margin-top: auto;
}

/* ==========================================================================
   Form Layout - Default flex
   ========================================================================== */

#ohc-form-layout .af-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-content: flex-start;
}

/* ==========================================================================
   Step 1 Only: Grid layout when postcode fields are visible (desktop only)
   ========================================================================== */

@media (min-width: 1025px) {
    #ohc-form-layout .af-fields:not(.ohc-step5-grid):has(.af-field-zip:not(.acf-hidden):not([style*="display: none"])) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-content: start;
    }

    #ohc-form-layout .af-fields:not(.ohc-step5-grid):has(.af-field-zip:not(.acf-hidden)) .af-field {
        grid-column: 1 / -1;
        padding: 0px;
    }

    #ohc-form-layout .af-fields:not(.ohc-step5-grid):has(.af-field-zip:not(.acf-hidden)) .af-field-zip {
        grid-column: 1 / 2;
    }

    #ohc-form-layout .af-fields:not(.ohc-step5-grid):has(.af-field-zip:not(.acf-hidden)) .af-field-housenumber {
        grid-column: 2 / 3;
    }

    #ohc-form-layout .af-fields:not(.ohc-step5-grid):has(.af-field-zip:not(.acf-hidden)) .af-field-addition {
        grid-column: 3 / 4;
    }

    #ohc-form-layout .af-fields:not(.ohc-step5-grid):has(.af-field-zip:not(.acf-hidden)) .af-submit {
        grid-column: 1 / -1;
        justify-self: end;
        align-self: end;
        justify-content: space-between;
        width: 100%;
        border-top: 1px solid #e0e0e0;
    }

}

/* ==========================================================================
   Step 5: Grid layout for personal info fields
   ========================================================================== */

/* Default: all fields span full width */
#ohc-form-layout .af-fields.ohc-step5-grid > .af-field {
    grid-column: 1 / -1;
    padding: 0;
    border: none !important;
    border-top: none !important;
}

/* Totals bar: full width in step 5 grid */
#ohc-form-layout .af-fields.ohc-step5-grid > .ohc-totals-bar {
    grid-column: 1 / -1;
}
#ohc-form-layout .ohc-step5-grid .ohc-totals-bar--mobile.ohc-totals-visible {
    margin-top: 0;
}

/* Checkboxes align center in step 5 */
#ohc-form-layout .ohc-step5-grid > [data-name="agree_inspection"] .acf-true-false > label,
#ohc-form-layout .ohc-step5-grid > [data-name="agree_terms"] .acf-true-false > label {
    align-items: center !important;
}

/* Submit row: full width, Vorige left, Submit right */
#ohc-form-layout .af-fields.ohc-step5-grid > .af-submit {
    grid-column: 1 / -1;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-top: none;
    padding-top: 24px;
}

/* Submit button ("Aanvraag versturen") with paper plane icon */
#ohc-form-layout .af-fields.ohc-step5-grid > .af-submit input[type="submit"] {
    background-color: #646F47 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2L15 22L11 13L2 9L22 2Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px 16px !important;
    color: #fff !important;
    border: 2px solid #646F47 !important;
    border-radius: 0 !important;
    padding: 12px 44px 12px 24px;
    font-weight: 500;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

#ohc-form-layout .af-fields.ohc-step5-grid > .af-submit input[type="submit"]:hover {
    background-color: #4a5233 !important;
    border-color: #4a5233 !important;
}

/* Desktop step 5: 6-column grid */
@media (min-width: 1025px) {
    #ohc-form-layout .af-fields.ohc-step5-grid {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 16px 16px;
        align-content: start;
    }

    /* Row 1+2: Three columns (2+2+2) */
    #ohc-form-layout .af-fields.ohc-step5-grid > .af-field.ohc-col-2 {
        grid-column: span 2;
    }

    /* Row 3-5: Two columns (3+3) */
    #ohc-form-layout .af-fields.ohc-step5-grid > .af-field.ohc-col-3 {
        grid-column: span 3;
    }

    /* Half width (3 of 6) */
    #ohc-form-layout .af-fields.ohc-step5-grid > .af-field.ohc-col-half {
        grid-column: span 3;
    }
}

/* Mobile step 5: 2-column grid */
@media (max-width: 1024px) {
    #ohc-form-layout .af-fields.ohc-step5-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px;
    }

    #ohc-form-layout .af-fields.ohc-step5-grid > .af-field {
        grid-column: 1 / -1;
        padding: 0 !important;
    }

    /* Voorletters + Tussenvoegsel, Huisnummer + Toevoeging side by side on mobile */
    #ohc-form-layout .af-fields.ohc-step5-grid > .af-field.ohc-mob-half {
        grid-column: span 1;
    }
}

/* ==========================================================================
   Step 5: Agree fields — checkbox style (not toggle buttons)
   ========================================================================== */

/* Reduce spacing on agree fields */
.ohc-step5-grid > [data-name="agree_inspection"],
.ohc-step5-grid > [data-name="agree_terms"] {
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide the field title label ("Akkoord 0-meting *") — message text is shown instead */
.ohc-step5-grid > [data-name="agree_inspection"] > .acf-label,
.ohc-step5-grid > [data-name="agree_terms"] > .acf-label {
    display: none !important;
}

/* Hide the ACF switch UI + toggle buttons */
.ohc-step5-grid > [data-name="agree_inspection"] .acf-switch,
.ohc-step5-grid > [data-name="agree_terms"] .acf-switch,
.ohc-step5-grid > [data-name="agree_inspection"] .ohc-toggle-buttons,
.ohc-step5-grid > [data-name="agree_terms"] .ohc-toggle-buttons {
    display: none !important;
}

/* Show the native true/false with message text */
.ohc-step5-grid > [data-name="agree_inspection"] .acf-true-false,
.ohc-step5-grid > [data-name="agree_terms"] .acf-true-false {
    display: block !important;
}

/* Hide the actual checkbox, use ::before for visual circle */
#ohc-form-layout .ohc-step5-grid > [data-name="agree_inspection"] .acf-true-false > label,
#ohc-form-layout .ohc-step5-grid > [data-name="agree_terms"] .acf-true-false > label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    position: relative;
}

/* Hide native checkbox visually but keep it clickable for label association */
#ohc-form-layout .ohc-step5-grid > [data-name="agree_inspection"] .acf-switch-input,
#ohc-form-layout .ohc-step5-grid > [data-name="agree_terms"] .acf-switch-input,
#ohc-form-layout .ohc-step5-grid > [data-name="agree_inspection"] input[type="checkbox"],
#ohc-form-layout .ohc-step5-grid > [data-name="agree_terms"] input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
}

/* Custom circle via ::before on label — radio-button style */
#ohc-form-layout .ohc-step5-grid > [data-name="agree_inspection"] .acf-true-false > label::before,
#ohc-form-layout .ohc-step5-grid > [data-name="agree_terms"] .acf-true-false > label::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid #646F47;
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 1px;
    box-sizing: border-box;
}

/* Checked state: green border, white gap, green fill — uses .ohc-agree-checked class toggled by JS */
#ohc-form-layout .ohc-step5-grid > .ohc-agree-checked .acf-true-false > label::before {
    background: #646F47;
    border-color: #646F47;
    box-shadow: inset 0 0 0 3px #fff;
}

/* ==========================================================================
   Step 5: Date field — full width with icon
   ========================================================================== */
#ohc-form-layout [data-name="start_date"] .acf-input-wrap {
    position: relative;
}

#ohc-form-layout [data-name="start_date"] input {
    padding-left: 40px !important;
}

#ohc-form-layout [data-name="start_date"] .acf-input-wrap::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23657048' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   Step 5: Remarks — single line height
   ========================================================================== */
#ohc-form-layout [data-name="remarks"] textarea {
    min-height: auto !important;
    height: 44px !important;
    resize: vertical;
}

/* #ohc-form-layout .acf-field .acf-label {
    padding-top: 16px;
} */

/* Remove padding-top from accordion headers (they have their own padding) */
#ohc-form-layout [class*="-details"] > .af-label.acf-label,
#ohc-form-layout [class*="-subscription-group"] > .af-label.acf-label,
#ohc-form-layout [class*="-installations-group"] > .af-label.acf-label {
    padding-top: 0;
}

#ohc-form-layout .acf-spinner {
    right: 0px !important;
    bottom: 60px !important;
    position: absolute !important;
}

/* ==========================================================================
   Form Submit Buttons
   ========================================================================== */

#ohc-form-layout .af-submit {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 24px;
}

/* When both buttons exist: space between */
#ohc-form-layout .af-submit:has(.af-previous-button) {
    justify-content: space-between;
}

/* Step 1: Next button filled green (when previous is disabled) */
#ohc-form-layout .af-submit:has(.af-previous-button[disabled]) .af-next-button {
    background: #646F47 !important;
    color: #fff !important;
    border: 2px solid #646F47 !important;
    padding: 12px 24px;
    border-radius: 0 !important;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

#ohc-form-layout .af-submit:has(.af-previous-button[disabled]) .af-next-button:hover {
    background: #4a5233 !important;
    border-color: #4a5233 !important;
}

/* Step 1: Disabled state */
#ohc-form-layout .af-submit:has(.af-previous-button[disabled]) .af-next-button:disabled {
    background: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #fff !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Hide disabled previous button on step 1 */
#ohc-form-layout .af-submit .af-previous-button[disabled] {
    display: none;
}

/* Step 2+: Both buttons outline black */
#ohc-form-layout .af-submit:has(.af-previous-button) .af-previous-button,
#ohc-form-layout .af-submit:has(.af-previous-button) .af-next-button {
    background: transparent !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    padding: 12px 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

#ohc-form-layout .af-submit:has(.af-previous-button) .af-previous-button:hover,
#ohc-form-layout .af-submit:has(.af-previous-button) .af-next-button:hover {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* Disabled state - Step 1 */
#ohc-form-layout .af-submit:not(:has(.af-previous-button)) .af-next-button:disabled {
    background: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #fff !important;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Disabled state - Step 2+ */
#ohc-form-layout .af-submit:has(.af-previous-button) .af-next-button:disabled {
    background: transparent !important;
    border-color: #9ca3af !important;
    color: #9ca3af !important;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Submit button — default outline style (overridden on step 5) */
#ohc-form-layout .af-submit input[type="submit"] {
    background-color: transparent !important;
    background-image: none !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    padding: 12px 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

#ohc-form-layout .af-submit input[type="submit"]:hover {
    background-color: #1a1a1a !important;
    color: #fff !important;
}

/* Postcode error message */
.ohc-postcode-error {
    color: #dc3545;
    font-size: 13px;
    margin-top: 6px;
}

/* Extra installations disabled state */
#ohc-form-layout [data-name="install_additional_subscriptions"].is-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

#ohc-form-layout [data-name="install_additional_subscriptions"].is-disabled .af-label::after {
    content: ' (selecteer eerst een installatie)';
    font-size: 12px;
    font-weight: normal;
    color: #999;
}

/* Installation icons */
#ohc-form-layout [data-name="installations"] .acf-checkbox-list label,
#ohc-form-layout [data-name="install_additional_subscriptions"] .acf-checkbox-list label {
    display: flex;
    align-items: center;
    gap: 10px;
}

#ohc-form-layout .ohc-install-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}

#ohc-form-layout .ohc-install-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ==========================================================================
   Mijn Keuzes Summary
   ========================================================================== */

/* Hide the white summary card — replaced by green totals bar */
.ohc-summary {
    display: none !important;
}

.ohc-summary__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    color: #1a1a1a;
}

.ohc-summary__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.ohc-summary__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.ohc-summary__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ohc-summary__item--onetime {
    border-top: 1px dashed #ddd;
    padding-top: 12px;
    margin-top: 4px;
}

.ohc-summary__item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ohc-summary__item-name {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

.ohc-summary__item-name small {
    font-weight: 400;
    color: #888;
}

.ohc-summary__item-detail {
    font-size: 12px;
    color: #888;
}

.ohc-summary__item-price {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    flex-shrink: 0;
}

.ohc-summary__item-price small {
    font-weight: 400;
    color: #888;
}

.ohc-summary__totals {
    border-top: 2px solid #646F47;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ohc-summary__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ohc-summary__total-label {
    font-size: 13px;
    color: #555;
}

.ohc-summary__total-value {
    font-size: 16px;
    font-weight: 700;
    color: #646F47;
}

.ohc-summary__total-value small {
    font-size: 12px;
    font-weight: 400;
}