/* Campo cnt_offer_cards (ATE-83218) — tarjetas de módulos de afiliación.
   Look alineado con el mockup: icono, título, +precio€ junto al toggle.
   Revisión de maquetación Irene (ganesha) 2026-08-27: variables NEO en vez de
   hex/px, icono como <img>, precio unificado con el switch, tipografía por
   clases del sistema (h6-style / heading-font / bold-weight) en el markup. */

.gf-ocs {
    display: flex;
    flex-direction: column;
    /* Las tarjetas se reordenan según el ancho del propio bloque, no del
       viewport (ver @container al final). */
    container-type: inline-size;
    color: var(--color-base);
    /* Irene marcó eliminar el gap; se mantiene con variable del sistema porque
       sin él las tarjetas quedan pegadas (no hay otro espaciado entre .gf-ocs-card).
       Pendiente de su repassada. */
    gap: var(--spacing-40);
}

.gf-ocs-card {
    border: 1px solid var(--color-neutral-500);
    border-radius: var(--radius);
    padding: calc(var(--break-rem) / 1.3) var(--break-rem);
    background: var(--color-contrast);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gf-ocs-card--on {
    border-color: var(--color-racc-500);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.gf-ocs-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-30);
    width: 100%;
}

/* Título (h3, = etiqueta del campo) y descripción del campo: el espaciado
   entre ellos y con las tarjetas lo da el gap del .gf-ocs. */
.gf-ocs > h3,
.gf-ocs > p {
    margin: 0;
}

/* GF Styles Pro pone display:flex (fila) a `.gfield_checkbox > div`, y el bloque
   lleva gfield_checkbox por obligación (JS de precios de GF) → la descripción de
   la tarjeta se iba a la derecha. La tarjeta es un bloque: fila arriba (body) y
   descripción debajo. Especificidad 0,3,0 > 0,2,1 de su regla. */
.gf-ocs.gfield_checkbox > .gf-ocs-card {
    display: block;
}

/* Descripción de cada módulo, debajo de la fila icono/título/switch */
.gf-ocs-card-description {
    margin-top: var(--spacing-20);
}
.gf-ocs .gf-ocs-card-description p {
    margin: 0;
}

/* El icono es una <img> (no background por CSS) */
.gf-ocs-card-icon {
    max-width: 40px;
}

.gf-ocs-card-txt {
    flex: 1 1 auto;
    min-width: 0;
}
/* Es un <p>: el theme le pone margin-bottom:20px (.fusion-post-content p, 0,1,1)
   y descentra la fila → hace falta ganarle en especificidad. */
.gf-ocs .gf-ocs-card-txt {
    margin: 0;
    /* Sobre el campo nativo el título es el <label> de GF, que llega con
       line-height: 1 de gform-field-label; el diseño lo quiere como el <p> del
       theme (1.5), si no la fila queda más apretada y los títulos de dos líneas
       se juntan. */
    line-height: 1.5;
}
/* GF inyecta el importe dentro del título (span.ginput_price) porque el <p> lleva
   el id label_{form}_{field}_{n} que necesita para sumarlo al total. En la tarjeta
   el precio ya se muestra junto al switch, así que aquí se oculta; en el resumen de
   compra sí debe verse. */
.gf-ocs .gf-ocs-card-txt .ginput_price {
    display: none;
}

/* Unifica el precio (+xx€) con el switch, según el diseño */
.gf-ocs-switch-and-price {
    display: flex;
    align-items: center;
    gap: var(--spacing-30);
}

/* El switch vive en assets/css/switch.css (.gf-ocs-switch), compartido con
   cnt_offer_card (petición de Irene 2026-09-17: un solo CSS de switch). */

/* Móvil (diseño de Irene, pedido por Marta 2026-09-21): icono, precio y
   switch en la primera fila; el título debajo, a todo el ancho. */
@container (max-width: 480px) {
    .gf-ocs-card-body {
        flex-wrap: wrap;
    }
    .gf-ocs-card-icon {
        order: 1;
    }
    .gf-ocs-switch-and-price {
        order: 2;
        margin-left: auto;
    }
    .gf-ocs .gf-ocs-card-txt {
        order: 3;
        flex-basis: 100%;
    }
}

/* El importe de cada módulo en el "Resumen de la compra" lo pinta el theme copiando
   el <label> del checkbox, que lleva dentro el <span class="ginput_price"> de GF. En
   el panel (≈240 px) "+63,00 €" se partía y el símbolo € caía a la línea siguiente. */
.cnt_val_modulos li .ginput_price {
    white-space: nowrap;
}

/* ── Lista de módulos dentro del "Resumen de la compra" (summary-panel) ──────
   La pinta offer-card-summary.js con su propio markup (ul > li > span+span).
   Aquí se le da el MISMO layout que los ítems nativos del panel (.item):
   fila con etiqueta a la izquierda e importe a la derecha, sin viñetas.
   El padding lo hereda de .details, donde se inserta la lista. */
.summary-panel .cnt_oc_resumen_addons ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.summary-panel .cnt_oc_resumen_addons li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    padding: 0;
}
.summary-panel .cnt_oc_resumen_addons li + li {
    margin-top: 4px;
}