/* ==========================================================================
   Contact form (shortcode [contact-form]) — theme-only restyle
   The submit button and the "agree to terms" checkbox carry their OWN
   dedicated classes (added in the theme's blade partial via a str_replace
   on $form->renderForm(), no plugin file touched):
     - button:   contact-button theme-btn
     - checkbox: form-check-input theme-checkbox
   ========================================================================== */

/* ---- Submit button ----
   .theme-btn already gets its full pill/purple/hover styling for free from
   main.css (Niotech's own button class) — nothing to add here. */

/* ---- "Agree to terms" checkbox ----
   Niotech's own main.css already ships the custom-checkbox CSS below, but
   it targets `input[type=checkbox] ~ label`, expecting the <label> to be a
   SIBLING of the <input>. Botble's markup nests the input INSIDE the
   <label>, with a <span class="form-check-label"> as the actual sibling —
   so main.css's rule never matches and the checkbox ends up invisible
   (the input is hidden by main.css, and the fake box/dot never gets drawn).
   This re-implements the same design, scoped to .theme-checkbox and
   pointed at the real sibling: .form-check-label. */

.theme-checkbox {
    visibility: hidden;
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
}

.theme-checkbox:checked ~ .form-check-label:after {
    opacity: 1;
}

.theme-checkbox ~ .form-check-label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    display: block;
    line-height: 30px;
}

.theme-checkbox ~ .form-check-label:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 3.5px;
    background: var(--white);
    border: 1px solid var(--border-2);
    border-radius: 4px;
    height: 20px;
    width: 20px;
    text-align: center;
    z-index: 9;
    transition: 0.3s;
}

.theme-checkbox:checked ~ .form-check-label:before {
    background: var(--theme);
    border-color: var(--theme);
}

.theme-checkbox ~ .form-check-label:after {
    /* checkmark, drawn with the classic border-rotate trick (no icon font needed) */
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    width: 6px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: 0.2s;
    z-index: 10;
}