/* Checkout Tipo Cliente — CSS v1.1.0 */

/* ── Bloque selector tipo ────────────────────────────────── */
.ctc-tipo-selector {
    padding-bottom: 14px;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #e0e0e0;
}

.ctc-tipo-selector label.ctc-tipo-label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1em;
}

/* Contenedor de los radios */
.ctc-tipo-selector ul.woocommerce-RadioList,
.ctc-tipo-selector .woocommerce-input-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Cada opcion radio como boton pill */
.ctc-tipo-selector ul.woocommerce-RadioList li,
.ctc-tipo-selector .woocommerce-input-wrapper label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    padding: 8px 18px;
    border: 2px solid #ccc;
    border-radius: 24px;
    font-size: 0.95em;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

.ctc-tipo-selector ul.woocommerce-RadioList li:hover,
.ctc-tipo-selector .woocommerce-input-wrapper label:hover {
    border-color: #0085ba;
}

/* Pill activa */
.ctc-tipo-selector input[type="radio"]:checked + label,
.ctc-tipo-selector ul.woocommerce-RadioList input[type="radio"]:checked ~ span {
    border-color: #0085ba;
    background: #e8f4fb;
    color: #0085ba;
    font-weight: 600;
}

/* Ocultar el circulo del input radio nativo — solo visible el pill */
.ctc-tipo-selector input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ── Ocultar campos por defecto (evita flash antes del JS) ── */
/* Empresa es el predeterminado, asi que ocultamos persona fisica */
.ctc-field-persona,
.form-row.ctc-field-persona {
    display: none;
}

/* ── "(optional)" — se controla desde JS, pero esto evita flash ── */
.ctc-field-empresa .optional,
.ctc-field-persona .optional {
    transition: opacity 0.15s;
}