.wcfsp-free-shipping-popup {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 340px;
    /* extra top padding to leave room for the close button */
    padding: 18px 18px 12px 14px;
    border-radius: 14px;
    border: 1px solid #c9e8d2;
    background: linear-gradient(135deg, #edf9f0 0%, #dff6e8 100%);
    color: #24563b;
    box-shadow: 0 12px 28px rgba(76, 129, 95, 0.18);
    opacity: 0;
    transform: translateY(0px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    position: fixed;
}

.wcfsp-free-shipping-popup.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.wcfsp-content {
    font-size: 16px;
    line-height: 1.4;
    flex: 1;
    /* increased right padding to avoid overlap with the close button */
    padding-right: 36px;
    padding-top: 2px;
}

.wcfsp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #cfeedd;
    font-size: 20px;
    flex-shrink: 0;
}

.wcfsp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    
    /* Forzar dimensiones simétricas y perfectas */
    width: 22px !important;
    height: 22px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    
    /* Resetear estilos heredados del tema */
    background: transparent !important;
    border: 1px solid #4f7a5e !important; /* Genera el contorno circular */
    border-radius: 50% !important;
    
    /* Alineación interna precisa del carácter */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 14px !important; /* Tamaño legible para la X */
    color: #4f7a5e !important;
    
    cursor: pointer;
    opacity: 0.8;
    z-index: 5;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

/* Efecto visual al pasar el cursor (Opcional) */
.wcfsp-close:hover {
    opacity: 1;
    background-color: rgba(79, 122, 94, 0.1) !important;
}