/* Tie the auth pages' submit button/link accent to the brand color instead
   of the theme's hardcoded blue (#2e4bf1/#63bbff) — see layouts/_theme-vars
   for how --primary-bg-color/--primary-bg-hover are computed. */
.fxt-template-layout7 .fxt-btn-fill {
    background-color: var(--primary-bg-color);
}

.fxt-template-layout7 .fxt-btn-fill:hover,
.fxt-template-layout7 .fxt-btn-fill:focus {
    background-color: var(--primary-bg-hover);
    border-color: var(--primary-bg-hover);
}

.fxt-template-layout7 .switcher-text,
.fxt-template-layout7 .switcher-text2 {
    color: var(--primary-bg-color);
}

/* "Recordarme": the theme's checkbox draws its tick with Font Awesome (not
   loaded here) and a hardcoded blue; draw the tick in CSS with the brand color.
   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: var(--primary-bg-color);
    border-color: var(--primary-bg-color);
}

.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: var(--primary-bg-color);
}

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