/* "Recordarme": the theme's checkbox draws its tick with an icon font and
   sits misaligned with its label; draw the tick in CSS instead.
   Brand orange (#FA8118, --primary-bg-color in layouts/layout).
   The input stays focusable (visually hidden, not display:none). */
.fxt-template-layout7 .fxt-checkbox-area {
    margin-bottom: 20px;
}

.fxt-template-layout7 .checkbox {
    padding-left: 0;
    margin: 0;
}

.fxt-template-layout7 .checkbox input[type="checkbox"] {
    display: block;
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.fxt-template-layout7 .checkbox label {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding-left: 28px;
    color: #6c757d;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
}

.fxt-template-layout7 .checkbox label:before {
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    margin: -9px 0 0;
    border: 1.5px solid #c4c4c4;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.fxt-template-layout7 .checkbox label:after {
    content: "";
    top: 50%;
    left: 6px;
    width: 6px;
    height: 10px;
    margin: -7px 0 0;
    padding: 0;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s ease-in-out;
}

.fxt-template-layout7 .checkbox input[type="checkbox"]:checked + label::before {
    background-color: #FA8118;
    border-color: #FA8118;
}

.fxt-template-layout7 .checkbox input[type="checkbox"]:checked + label::after {
    font-family: inherit;
    content: "";
    left: 6px;
    top: 50%;
    transform: rotate(45deg) scale(1);
}

.fxt-template-layout7 .checkbox label:hover:before {
    border-color: #FA8118;
}

.fxt-template-layout7 .checkbox input[type="checkbox"]:focus-visible + label::before {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
    border-color: #FA8118;
}