/* ==========================================================
   Elementor WooCommerce Cart Button Widget — cart-button.css
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* ── Variables por defecto ────────────────────────────────── */
.ewcb-wrapper {
    --ewcb-size:        58px;
    --ewcb-font:        'DM Sans', sans-serif;
    --ewcb-transition:  .22s cubic-bezier(.4,0,.2,1);

    display: inline-flex;
    align-items: center;
    position: relative;
    font-family: var(--ewcb-font);
}

/* ── Enlace / Botón ───────────────────────────────────────── */
.ewcb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none !important;
    position: relative;
    background: #1a1a2e;
    color: #fff;
    cursor: pointer;
    border: none;
    outline: none;
    transition:
        background var(--ewcb-transition),
        transform var(--ewcb-transition),
        box-shadow var(--ewcb-transition);
}

/* ── Layouts ──────────────────────────────────────────────── */

/* Circular */
.ewcb-layout-circle .ewcb-btn {
    width: var(--ewcb-size);
    height: var(--ewcb-size);
    border-radius: 50%;
}

/* Redondeado */
.ewcb-layout-rounded .ewcb-btn {
    border-radius: 14px;
    padding: 14px 20px;
}

/* Cuadrado */
.ewcb-layout-square .ewcb-btn {
    width: var(--ewcb-size);
    height: var(--ewcb-size);
    border-radius: 10px;
}

/* Píldora */
.ewcb-layout-pill .ewcb-btn {
    border-radius: 100px;
    padding: 14px 22px;
}

/* ── Ícono ────────────────────────────────────────────────── */
.ewcb-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ewcb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    transition: color var(--ewcb-transition), transform var(--ewcb-transition);
    line-height: 1;
}

.ewcb-icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
    display: block;
    transition: transform var(--ewcb-transition);
}

.ewcb-icon i {
    line-height: 1;
}

/* ── Burbuja de cantidad ──────────────────────────────────── */
.ewcb-count {
    position: absolute;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--ewcb-font);
    text-align: center;
    padding: 0 4px;
    border-radius: 100px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 5;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity var(--ewcb-transition);
    box-shadow: 0 2px 6px rgba(229,57,53,.45);
}

/* Posiciones de la burbuja */
.ewcb-badge-top-right    .ewcb-count { top: -4px; right: -4px; }
.ewcb-badge-top-left     .ewcb-count { top: -4px; left: -4px; }
.ewcb-badge-bottom-right .ewcb-count { bottom: -4px; right: -4px; }
.ewcb-badge-bottom-left  .ewcb-count { bottom: -4px; left: -4px; }

/* Ocultar cuando carrito vacío */
.ewcb-empty .ewcb-count {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

/* Animación pop al cambiar */
@keyframes ewcb-badge-pop {
    0%   { transform: scale(0.5); }
    60%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.ewcb-count.ewcb-updated {
    animation: ewcb-badge-pop .35s cubic-bezier(.34,1.56,.64,1);
}

/* ── Monto ────────────────────────────────────────────────── */
.ewcb-amount {
    font-size: 15px;
    font-weight: 600;
    font-family: var(--ewcb-font);
    white-space: nowrap;
    color: #1a1a2e;
    transition: color var(--ewcb-transition), opacity var(--ewcb-transition);
    line-height: 1;
}

/* Monto abajo del ícono */
.ewcb-amount-below .ewcb-btn {
    flex-direction: column;
    gap: 6px;
}

/* Monto oculto si carrito vacío */
.ewcb-empty.ewcb-amount-hidden .ewcb-amount {
    opacity: 0;
    pointer-events: none;
}

/* ── Animaciones hover ────────────────────────────────────── */

/* Levantar */
.ewcb-hover-lift .ewcb-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* Escalar */
.ewcb-hover-scale .ewcb-btn:hover {
    transform: scale(1.08);
}

/* Sacudir */
@keyframes ewcb-shake {
    0%, 100% { transform: rotate(0deg); }
    15%       { transform: rotate(-12deg); }
    30%       { transform: rotate(10deg); }
    45%       { transform: rotate(-8deg); }
    60%       { transform: rotate(6deg); }
    75%       { transform: rotate(-4deg); }
    90%       { transform: rotate(2deg); }
}
.ewcb-hover-shake .ewcb-btn:hover .ewcb-icon {
    animation: ewcb-shake .5s ease;
}

/* Pulsar */
@keyframes ewcb-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(26,26,46,.4); }
    70%  { box-shadow: 0 0 0 12px rgba(26,26,46,0); }
    100% { box-shadow: 0 0 0 0 rgba(26,26,46,0); }
}
.ewcb-hover-pulse .ewcb-btn:hover {
    animation: ewcb-pulse .6s ease;
}

/* ── Tooltip ──────────────────────────────────────────────── */
.ewcb-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a1a2e;
    color: #fff;
    font-family: var(--ewcb-font);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding: 5px 12px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--ewcb-transition), transform var(--ewcb-transition);
    z-index: 100;
}

.ewcb-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a2e;
}

.ewcb-wrapper:hover .ewcb-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Focus (accesibilidad) ────────────────────────────────── */
.ewcb-btn:focus-visible {
    outline: 3px solid #6C63FF;
    outline-offset: 3px;
}

/* ── Animación de entrada ─────────────────────────────────── */
@keyframes ewcb-enter {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
}
.ewcb-wrapper {
    animation: ewcb-enter .35s cubic-bezier(.34,1.56,.64,1);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 767px) {
    .ewcb-amount {
        font-size: 13px;
    }
}