/* ===== AGREE CHECKBOX STYLES ===== */

/* Hide native inputs */
.wpcf7-form-control-wrap[data-name="agree"] input[type=checkbox],
.wpcf7-form-control-wrap[data-name="agree-thp"] input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    clip: rect(0, 0, 0, 0);
}

/* Focus ring */
.wpcf7-form-control-wrap[data-name="agree"] input[type=checkbox]:focus-visible + .agree-check,
.wpcf7-form-control-wrap[data-name="agree-thp"] input[type=checkbox]:focus-visible + .agree-thp-check {
    outline: 2px solid -webkit-focus-ring-color;
    outline-offset: 1px;
}

/* Custom box — shared */
.wpcf7-form-control-wrap[data-name="agree"] .agree-check,
.wpcf7-form-control-wrap[data-name="agree-thp"] .agree-thp-check {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--clr-main, #71bf44);
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
    flex-shrink: 0;
}

/* agree-thp-check overrides — relative positioning inside flex label */
.wpcf7-form-control-wrap[data-name="agree-thp"] .agree-thp-check {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-top: 3px;
}

/* Checkmark lines */
.wpcf7-form-control-wrap[data-name="agree"] .agree-check::before,
.wpcf7-form-control-wrap[data-name="agree"] .agree-check::after,
.wpcf7-form-control-wrap[data-name="agree-thp"] .agree-thp-check::before,
.wpcf7-form-control-wrap[data-name="agree-thp"] .agree-thp-check::after {
    content: '';
    position: absolute;
    height: 4px;
    background: var(--clr-accent, #71bf44);
    visibility: hidden;
}

/* Short leg */
.wpcf7-form-control-wrap[data-name="agree"] .agree-check::before,
.wpcf7-form-control-wrap[data-name="agree-thp"] .agree-thp-check::before {
    width: 70%;
    top: 60%;
    left: 40%;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Long leg */
.wpcf7-form-control-wrap[data-name="agree"] .agree-check::after,
.wpcf7-form-control-wrap[data-name="agree-thp"] .agree-thp-check::after {
    width: 150%;
    top: 20%;
    left: 110%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Checked state */
.wpcf7-form-control-wrap[data-name="agree"] input[type=checkbox]:checked + .agree-check::before,
.wpcf7-form-control-wrap[data-name="agree"] input[type=checkbox]:checked + .agree-check::after,
.wpcf7-form-control-wrap[data-name="agree-thp"] input[type=checkbox]:checked + .agree-thp-check::before,
.wpcf7-form-control-wrap[data-name="agree-thp"] input[type=checkbox]:checked + .agree-thp-check::after {
    visibility: visible;
}

/* ===== FORM-CHECK-ONE (agree) =====
   .form-check-one
     ├── span[data-name="agree"]  ← 16x16 checkbox
     └── div.truncate             ← text
*/
.form-check-one {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    cursor: pointer;
}

.form-check-one .truncate {
    flex: 1;
    min-width: 0;
   
    line-height: 1.5;
    font-weight: 400;
    color: inherit;
}

/* ===== AGREE-THP layout =====
   label (flex) built by JS or existing CF7 label
     ├── .agree-thp-check  ← visual box (relative)
     └── text / .wpcf7-list-item-label
*/
.wpcf7-form-control-wrap[data-name="agree-thp"] .wpcf7-list-item label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}

.wpcf7-form-control-wrap[data-name="agree-thp"] .wpcf7-list-item-label {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* ===== ERROR ===== */
.agree-thp-error {
    color: red;
    font-size: 0.9rem;
    margin-top: 4px;
}