/**
 * Clever Elements - Product Add to Cart widget.
 *
 * DaiscomIA 2026-09-25: layout del formulario (input de cantidad + boton) y
 * alineacion, mediante las clases del control Layout/Alignment del widget.
 */

/* Vertical: el boton va debajo del input de cantidad. */
.ce-atc-layout-column .elementor-atc .ce-atc-form {
    display: block;
}

.ce-atc-layout-column .elementor-atc .ce-atc-form .elementor-button {
    margin-top: var(--ce-atc-gap, 10px);
}

/* Horizontal: el boton va al lado del input de cantidad. */
.ce-atc-layout-row .elementor-atc .ce-atc-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ce-atc-gap, 10px);
}

.ce-atc-layout-row .elementor-atc .ce-atc-form .elementor-button {
    margin-top: 0;
    width: auto;
}

/* Alineacion en horizontal (clases del control Alignment). */
.ce-atc-layout-row.elementor-atc--align-center .elementor-atc .ce-atc-form {
    justify-content: center;
}

.ce-atc-layout-row.elementor-atc--align-right .elementor-atc .ce-atc-form {
    justify-content: flex-end;
}

.ce-atc-layout-row.elementor-atc--align-justify .elementor-atc .ce-atc-form {
    justify-content: space-between;
}

/* ---- Animaciones del boton al hacer click (Animate.css-like) ---- */
.ce-atc-anim-pulse,
.ce-atc-anim-bounce,
.ce-atc-anim-flash,
.ce-atc-anim-shake,
.ce-atc-anim-tada,
.ce-atc-anim-wobble,
.ce-atc-anim-jello,
.ce-atc-anim-rubberBand,
.ce-atc-anim-heartBeat,
.ce-atc-anim-swing,
.ce-atc-anim-zoomIn,
.ce-atc-anim-fadeIn,
.ce-atc-anim-slideInUp,
.ce-atc-anim-bounceIn {
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-timing-function: ease;
}

.ce-atc-anim-pulse { animation-name: ce-atc-pulse; }
.ce-atc-anim-bounce { animation-name: ce-atc-bounce; }
.ce-atc-anim-flash { animation-name: ce-atc-flash; }
.ce-atc-anim-shake { animation-name: ce-atc-shake; }
.ce-atc-anim-tada { animation-name: ce-atc-tada; }
.ce-atc-anim-wobble { animation-name: ce-atc-wobble; }
.ce-atc-anim-jello { animation-name: ce-atc-jello; }
.ce-atc-anim-rubberBand { animation-name: ce-atc-rubberBand; }
.ce-atc-anim-heartBeat { animation-name: ce-atc-heartBeat; }
.ce-atc-anim-swing { animation-name: ce-atc-swing; }
.ce-atc-anim-zoomIn { animation-name: ce-atc-zoomIn; }
.ce-atc-anim-fadeIn { animation-name: ce-atc-fadeIn; }
.ce-atc-anim-slideInUp { animation-name: ce-atc-slideInUp; }
.ce-atc-anim-bounceIn { animation-name: ce-atc-bounceIn; }

@keyframes ce-atc-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes ce-atc-bounce {
    0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
    40%, 43% { transform: translateY(-12px); }
    70% { transform: translateY(-6px); }
    90% { transform: translateY(-2px); }
}

@keyframes ce-atc-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

@keyframes ce-atc-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}

@keyframes ce-atc-tada {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes ce-atc-wobble {
    0% { transform: translateX(0%); }
    15% { transform: translateX(-15%) rotate(-5deg); }
    30% { transform: translateX(10%) rotate(3deg); }
    45% { transform: translateX(-8%) rotate(-3deg); }
    60% { transform: translateX(5%) rotate(2deg); }
    75% { transform: translateX(-3%) rotate(-1deg); }
    100% { transform: translateX(0%); }
}

@keyframes ce-atc-jello {
    0%, 100% { transform: skewX(0) skewY(0); }
    22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

@keyframes ce-atc-rubberBand {
    0% { transform: scale(1, 1); }
    30% { transform: scale(1.25, 0.75); }
    40% { transform: scale(0.75, 1.25); }
    50% { transform: scale(1.15, 0.85); }
    65% { transform: scale(0.95, 1.05); }
    75% { transform: scale(1.05, 0.95); }
    100% { transform: scale(1, 1); }
}

@keyframes ce-atc-heartBeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

@keyframes ce-atc-swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0); }
}

@keyframes ce-atc-zoomIn {
    0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    50% { opacity: 1; }
    100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes ce-atc-fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes ce-atc-slideInUp {
    0% { opacity: 0; transform: translate3d(0, 40%, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ce-atc-bounceIn {
    0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    20% { transform: scale3d(1.1, 1.1, 1.1); }
    40% { transform: scale3d(0.9, 0.9, 0.9); }
    60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
    80% { transform: scale3d(0.97, 0.97, 0.97); }
    100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@media (prefers-reduced-motion: reduce) {
    .ce-atc-button[class*="ce-atc-anim-"] {
        animation: none !important;
    }
}