/* Interruptor on/off COMPARTIDO por los campos del plugin (petición de Irene,
   ATE-83218 2026-09-17: un solo CSS de switch, no uno por campo).

   Lo usan (clases del html de Irene):
   - cnt_offer_cards: <label class="gf-ocs-switch"> + <input class="gf-ocs-input">
     + <div class="gf-ocs-slider">  → estado por :checked.
   - cnt_offer_card:  <button class="gf-oc-switch gf-ocs-switch" role="switch" aria-checked>
     + <span class="gf-ocs-slider"> → estado por aria-checked (lo cambia su JS).

   El "botón" redondo es el ::before del slider. Los fallbacks de las var() son
   para el preview del editor de GF, donde el style.css del theme (variables
   NEO) no está cargado. */

.gf-ocs-switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 48px;
    height: 28px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
}

/* Variante <button>: reset con !important porque el admin de WordPress (y el
   theme) estilan <button> con fondo, borde y alto propios. */
button.gf-ocs-switch,
button.gf-ocs-switch:hover,
button.gf-ocs-switch:focus,
button.gf-ocs-switch:active {
    width: 48px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.gf-ocs-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.gf-ocs-slider {
    position: absolute;
    inset: 0;
    background: var(--color-neutral-200, #d7dbdf);
    /* radius-huge (16px) > alto/2 → el navegador lo clampa a píldora. */
    border-radius: var(--radius-huge, 16px);
    transition: background .15s ease;
}
.gf-ocs-slider::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 22px;
    height: 22px;
    background: var(--color-contrast, #ffffff);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}

.gf-ocs-input:checked + .gf-ocs-slider,
.gf-ocs-switch[aria-checked="true"] .gf-ocs-slider {
    background: var(--color-racc-500, #ffcf00);
}
.gf-ocs-input:checked + .gf-ocs-slider::before,
.gf-ocs-switch[aria-checked="true"] .gf-ocs-slider::before {
    transform: translateX(20px);
}

.gf-ocs-input:focus-visible + .gf-ocs-slider,
.gf-ocs-switch:focus-visible .gf-ocs-slider {
    outline: 2px solid var(--color-base, #1a1a1a);
    outline-offset: 2px;
}

/* Defensa contra GF Styles Pro en móvil: pone margin-bottom:8px y
   display:block a TODOS los <span> de .ginput_container (el track del
   <button> es un span). */
@media only screen and (max-width: 641px) {
    .gf-ocs-switch .gf-ocs-slider {
        display: block !important;
        margin-bottom: 0 !important;
    }
}