/*
 * yappy-checkout.css
 *
 * Banner de checkout para el método de pago Yappy.
 * Estilo inspirado en Material Design 3 (M3).
 *
 * Convenciones:
 *   - Sin !important  (especificidad manejada por selectores)
 *   - Variables CSS para fácil personalización de tema
 *   - Transiciones con curvas de aceleración M3
 * =========================================================================*/


/* ===========================================================================
 * 0. Correcciones puntuales — NO se toca el layout del tema
 * =========================================================================*/

/* Tamaño del logo de Yappy junto al label del radio button */
body #payment ul.payment_methods li.wc_payment_method > label img {
    max-height:     36px;
    max-width:      120px;
    width:          auto;
    height:         auto;
    object-fit:     contain;
    vertical-align: middle;
}

/* Color del label siempre negro, sin importar si está seleccionado */
body #payment ul.payment_methods li.wc_payment_method > label {
    color: #212121;
}

/* ===========================================================================
 * Fin de correcciones puntuales
 * =========================================================================*/


/* ---------------------------------------------------------------------------
 * 1. Tokens de diseño (Custom Properties)
 * --------------------------------------------------------------------------*/

#yappy-info-banner {
    --yappy-primary:        #6a1b9a;   /* Purple 800 */
    --yappy-primary-dark:   #4a148c;   /* Purple 900 */
    --yappy-surface:        #f3e5f5;   /* Purple 50  */
    --yappy-on-surface:     #37003c;   /* Texto oscuro sobre fondo claro */
    --yappy-border:         #7b1fa2;   /* Purple 700 */
    --yappy-ripple:         rgba(106, 27, 154, 0.1);
    --yappy-shadow-1:       0 2px 4px  rgba(0, 0, 0, 0.12);
    --yappy-shadow-2:       0 1px 2px  rgba(0, 0, 0, 0.08);
    --yappy-radius:         8px;
    --yappy-ease-std:       cubic-bezier(0.4, 0, 0.2, 1);  /* M3 Standard    */
    --yappy-ease-enter:     cubic-bezier(0.0, 0, 0.2, 1);  /* M3 Decelerate  */
    --yappy-ease-exit:      cubic-bezier(0.4, 0, 1, 1);    /* M3 Accelerate  */
}


/* ---------------------------------------------------------------------------
 * 2. Estado colapsado (oculto)
 *    Se usa max-height + opacity en lugar de display:none
 *    para permitir transiciones CSS sin JavaScript adicional.
 * --------------------------------------------------------------------------*/

#yappy-info-banner {
    max-height:  0;
    overflow:    hidden;
    opacity:     0;
    margin-top:  0;
    transition:
        max-height  0.35s var(--yappy-ease-exit),
        opacity     0.25s var(--yappy-ease-exit),
        margin-top  0.35s var(--yappy-ease-exit);
}


/* ---------------------------------------------------------------------------
 * 3. Estado expandido / visible
 * --------------------------------------------------------------------------*/

#yappy-info-banner.yappy-banner--visible {
    max-height: 200px;   /* Suficiente para que el contenido no quede cortado */
    opacity:    1;
    margin-top: 14px;
    transition:
        max-height  0.38s var(--yappy-ease-enter),
        opacity     0.30s var(--yappy-ease-enter),
        margin-top  0.38s var(--yappy-ease-enter);
}


/* ---------------------------------------------------------------------------
 * 4. Superficie (card) del banner
 * --------------------------------------------------------------------------*/

.yappy-banner__surface {
    display:          flex;
    align-items:      flex-start;
    gap:              12px;
    padding:          14px 16px;
    background-color: var(--yappy-surface);
    border-left:      4px solid var(--yappy-border);
    border-radius:    0 var(--yappy-radius) var(--yappy-radius) 0;
    box-shadow:       var(--yappy-shadow-1), var(--yappy-shadow-2);
    position:         relative;
    overflow:         hidden;   /* Contiene la capa de estado (state layer) */
}

/* Capa de estado (M3 state layer) — hover sutil sobre toda la superficie */
.yappy-banner__surface::after {
    content:          '';
    position:         absolute;
    inset:            0;
    background-color: transparent;
    border-radius:    0 var(--yappy-radius) var(--yappy-radius) 0;
    pointer-events:   none;
    transition:       background-color 0.2s var(--yappy-ease-std);
}

.yappy-banner__surface:hover::after {
    background-color: var(--yappy-ripple);
}


/* ---------------------------------------------------------------------------
 * 5. Icono informativo
 * --------------------------------------------------------------------------*/

.yappy-banner__icon {
    display:     flex;
    flex-shrink: 0;
    color:       var(--yappy-primary);
    margin-top:  1px;
    line-height: 1;
}

.yappy-banner__icon svg {
    display: block;
}


/* ---------------------------------------------------------------------------
 * 6. Texto del mensaje
 * --------------------------------------------------------------------------*/

.yappy-banner__message {
    flex:           1;
    margin:         0;
    font-size:      0.9rem;
    line-height:    1.6;
    color:          var(--yappy-on-surface);
    font-weight:    500;
    letter-spacing: 0.01em;
}


/* ---------------------------------------------------------------------------
 * 7. Botón de cierre
 * --------------------------------------------------------------------------*/

.yappy-banner__close {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    width:            30px;
    height:           30px;
    padding:          0;
    margin-top:       -3px;
    border:           none;
    background-color: transparent;
    border-radius:    50%;
    cursor:           pointer;
    color:            var(--yappy-primary);
    transition:
        background-color 0.2s var(--yappy-ease-std),
        color            0.2s var(--yappy-ease-std),
        box-shadow       0.2s var(--yappy-ease-std);
}

.yappy-banner__close:hover {
    background-color: var(--yappy-ripple);
    color:            var(--yappy-primary-dark);
}

.yappy-banner__close:active {
    background-color: rgba(106, 27, 154, 0.18);
}

.yappy-banner__close:focus-visible {
    outline:          2px solid var(--yappy-primary);
    outline-offset:   2px;
    background-color: var(--yappy-ripple);
}

/* Evita que los clics en el SVG no lleguen al handler del botón padre */
.yappy-banner__close svg {
    display:        block;
    pointer-events: none;
}


/* ---------------------------------------------------------------------------
 * 8. Adaptación a pantallas pequeñas
 * --------------------------------------------------------------------------*/

@media screen and (max-width: 480px) {
    .yappy-banner__surface {
        flex-wrap: wrap;
        gap:       8px;
    }

    .yappy-banner__message {
        font-size: 0.85rem;
    }

    .yappy-banner__close {
        margin-left: auto;
        margin-top:  0;
    }
}


/* ---------------------------------------------------------------------------
 * 9. Soporte para preferencia de movimiento reducido
 * --------------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
    #yappy-info-banner,
    #yappy-info-banner.yappy-banner--visible {
        transition: none;
    }

    .yappy-banner__close,
    .yappy-banner__surface::after {
        transition: none;
    }
}