@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

.cu-form.cu-modern-one {
    --grid-gap: 16px;

    --submit-bg-color: #C22A2A;
    --submit-bg-color-hover: #a32222;

    --input-color: #222;

    --input-bg: #fff;
    --input-bg-hover: #fff;
    --input-bg-focus: #fff;

    --input-border: 1px solid #e0e0e0;
    --input-border-color-hover: #9e9e9e;
    --input-border-color-focus: #C22A2A;

    --label-color: #626262;

    --not-valid-color: #dc3232;

    border: 2px solid #e6e6e6;
    padding: 24px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
    position: relative;

    font-family: 'Ubuntu', sans-serif;
}

.cu-form.cu-modern-one:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.cu-form,
.cu-form * {
    box-sizing: border-box;
}

.cu-grid {
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cu-col-span-full {
    grid-column: 1/-1;
}

.cu-form label {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    margin-bottom: 8px;
}

.cu-form .wpcf7-form-control-wrap {
    margin-top: 8px;
    display: block;
}

.cu-form .cu-label-text {
    display: inline-block;
    margin-bottom: 4px;
}

.cu-form .cu-label-text,
.cu-form .wpcf7-list-item-label,
.cu-form .cu-form-subhead {
    color: var(--label-color);
}

.cu-form .required {
    color: #C22A2A;
    font-weight: bold;
}

.cu-form .cu-hr {
    background-color: var(--label-color);
    margin: 8px 0;
}

.cu-form .cu-form-subhead {
    display: block;
    margin-bottom: 8px;
}

.cu-form .wpcf7-form-control-wrap,
.cu-form .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
}

.cu-checkbox-container.cu-display-column .wpcf7-form-control,
.cu-radio-container.cu-display-column .wpcf7-form-control {
    display: flex;
    flex-direction: column;
}

.cu-checkbox-container label,
.cu-radio-container label {
    display: inline-flex;
    justify-content: space-between;
}

.cu-checkbox-container .wpcf7-list-item-label,
.cu-radio-container .wpcf7-list-item-label {
    margin-left: 6px;
}

/* Grotere checkbox en netjes gecentreerde tekst */
.cu-form .wpcf7-acceptance input[type="checkbox"] {
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

.cu-form .wpcf7-acceptance .wpcf7-list-item-label {
    margin-left: 10px;
}

.cu-form .wpcf7-list-item.first,
.cu-form .cu-display-column .wpcf7-list-item {
    margin-left: 0;
}

.cu-form .wpcf7-not-valid-tip {
    color: var(--not-valid-color);
    margin-top: 2px;
}

.cu-form .wpcf7-spinner {
    display: none;
}

.cu-form input,
.cu-form textarea,
.cu-form select,
.cu-form .wpcf7-submit {
    transition: all 0.3s ease;
}

.cu-form input[type="text"],
.cu-form input[type="email"],
.cu-form input[type="tel"],
.cu-form input[type="url"],
.cu-form textarea,
.cu-form select {
    background-color: var(--input-bg);
    border: var(--input-border);
    border-radius: 8px;
    color: var(--input-color);
    font-size: 1rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.cu-form input[type="text"]:hover,
.cu-form input[type="email"]:hover,
.cu-form input[type="tel"]:hover,
.cu-form input[type="url"]:hover,
.cu-form textarea:hover,
.cu-form select:hover {
    background-color: var(--input-bg-hover);
    border-color: var(--input-border-color-hover);
}

.cu-form input[type="text"]:focus,
.cu-form input[type="email"]:focus,
.cu-form input[type="tel"]:focus,
.cu-form input[type="url"]:focus,
.cu-form textarea:focus,
.cu-form select:focus {
    background-color: var(--input-bg-focus);
    border-color: var(--input-border-color-focus);
    box-shadow: 0 0 0 3px rgba(194, 42, 42, 0.2);
    transform: scale(1.02);
    color: var(--input-color);
}

.cu-form select option {
    color: #222;
}

/* Submit button styling — blijft binnen de border */
.cu-form .wpcf7-submit {
    background-color: #C22A2A;
    color: #ffffff;
    border-radius: 6px;
    padding: 12px 20px;
    width: 100%;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    background-size: 200% 200%;
    display: block;
    box-sizing: border-box; /* ✅ binnen border fix */
    margin: 0 auto;         /* ✅ zorgt dat hij binnen form blijft */
    max-width: 100%;
}

.cu-form .wpcf7-submit:hover,
.cu-form .wpcf7-submit:focus {
    background: linear-gradient(45deg, #C22A2A, #a32222);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.cu-form .wpcf7-submit:active {
    transform: scale(0.98);
}

.cu-form .cu-footer {
    padding: 0;
    margin: 0 auto; /* ✅ binnen form houden */
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}

.cu-form .submitting input.c6-submit {
    display: none;
}

.cu-form .submitting .wpcf7-spinner {
    display: inline-block;
}

.cu-form~div.wpcf7-response-output {
    color: var(--label-color);
    margin: 20px 0 0;
}

.cu-form .cu-col-span-6 {
    border: 2px solid #e6e6e6;
    border-radius: 8px;
    padding: 16px;
}

.cu-form .mm-tooltip-cf7-li {
    border: 2px solid #e6e6e6;
    border-radius: 8px;
    padding: 12px;
    display: block; /* zodat padding netjes werkt */
}

@media (min-width: 768px) {
    .cu-grid {
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .cu-col-span-1 {
        grid-column: span 1/span 1;
    }

    .cu-col-span-2 {
        grid-column: span 2/span 2;
    }

    .cu-col-span-3 {
        grid-column: span 3/span 3;
    }

    .cu-col-span-4 {
        grid-column: span 4/span 4;
    }

    .cu-col-span-5 {
        grid-column: span 5/span 5;
    }

    .cu-col-span-6 {
        grid-column: span 6/span 6;
    }

    .cu-col-span-7 {
        grid-column: span 7/span 7;
    }

    .cu-col-span-8 {
        grid-column: span 8/span 8;
    }

    .cu-col-span-9 {
        grid-column: span 9/span 9;
    }

    .cu-col-span-10 {
        grid-column: span 10/span 10;
    }

    .cu-col-span-11 {
        grid-column: span 11/span 11;
    }

    .cu-col-span-12 {
        grid-column: span 12/span 12;
    }
}

.cu-modern-one label {
    font-size: 15px;
}

.cu-modern-one .wpcf7-not-valid-tip {
    font-weight: 600;
    margin-top: 2px;
}

.cu-modern-one .wpcf7-spinner {
    display: none;
}

.cu-modern-one .submitting input[type="submit"] {
    display: none;
}

.cu-modern-one .submitting .wpcf7-spinner {
    display: inline-block;
}

.cu-modern-one ~ div.wpcf7-response-output {
    margin: 20px 0 0;
}

textarea[name="nk-pet-meds-details-1"],
textarea[name="nk-pet-meds-details-2"],
textarea[name="nk-pet-meds-details-3"],
textarea[name="bk-pet-meds-details-1"],
textarea[name="bk-pet-meds-details-2"],
textarea[name="bk-pet-meds-details-3"] {
  height: 60px;       /* zelfde als select */
  resize: none;       /* voorkomt slepen */
  padding-top: 10px;  /* tekst iets naar beneden centreren */
}