/* ==========================================================================
   MASMOVIL BUTTONS
   Kept compatible with the existing .button markup and buttonRipple.js.
   ========================================================================== */

.buttons-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    padding: 10px;
    gap: 16px;
}
button {
    box-sizing: unset;
    border: none;
    appearance: unset;
    text-rendering: unset;
    color: unset;
    letter-spacing: unset;
    word-spacing: unset;
    line-height: unset;
    text-transform: unset;
    text-indent: unset;
    text-shadow: unset;
    display: unset;
    text-align: unset;
    cursor: unset;
    background-color: unset;
    margin: unset;
    padding-block: unset;
    padding-inline: unset;
    border-width: unset;
    border-style: unset;
    border-color: unset;
    border-image: unset;
}
.button {
    position: relative;
    overflow: hidden;
    height: 32px;
    border-radius: var(--primitives-radius-sm);
    padding: 4px 24px;
    background: var(--components-button-primary-default-background);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    user-select: none;
    text-transform: uppercase;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms cubic-bezier(.2,.9,.2,1), filter 220ms ease, background 220ms ease;
    will-change: transform, box-shadow, filter;
}
.button[data-size="small"] {
    padding: 0 16px;
}
.button[data-size="x-small"] {
    padding: 0 8px;
}
.button:active {
    opacity: .85;
}
.button[data-style="icon"] {
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
    background: unset;
    padding: 0;
}
.button[data-style="icon"] img {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
}
.button[data-style="ghost"] {
    background: transparent;
    border: none;
}
.button[data-style="outlined"] {
    background: transparent;
    border: var(--primitives-border-width-thin) solid var(--semantic-border-high-contrast);
}
.button[data-style="green"] {
    background: var(--semantic-surface-action);
}
.button.fill-width {
    width: 100%;
    padding: 0;
}
.button .label,
.button .icon {
    position: relative;
    pointer-events: none;
    color: var(--components-button-primary-default-text);
}
.button input {
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    border: none;
}
.button .label {
    font-family: var(--font-secondary);
    font-size: var(--primitives-font-size-sm);
    font-weight: 800;
}
.button .icon {
    font-size: 16px;
    height: 16px;
}
input.button {
    color: var(--components-button-primary-default-text);
    text-align: center;
    font-family: var(--font-secondary);
    font-size: var(--primitives-font-size-sm);
    font-weight: 800;
    border: none;
}
.button[data-style="outlined"] .label,
.button[data-style="ghost"] .label,
.button[data-style="outlined"] .icon,
.button[data-style="ghost"] .icon {
    color: var(--semantic-text-on-brand);
}
.button[data-variant="lift"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(18, 18, 18, 0.12);
}
.button[data-variant="glow"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(18, 18, 18, 0.16), inset 0 0 18px rgba(18, 18, 18, 0.04);
}
.button[data-variant="scale"]:hover { transform: scale(1.035); }
.button[data-variant="tilt"]:hover {
    transform: rotate(-2deg) translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.button[data-variant="underline"] { position: relative; overflow: visible; }
.button[data-variant="underline"] .label { position: relative; }
.button[data-variant="underline"] .label::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    bottom: -6px;
    height: 2px;
    width: calc(100% - 20px);
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
    transform-origin: center;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1);
}
.button[data-variant="underline"]:hover .label::after { transform: translateX(-50%) scaleX(1); }
.button[data-variant="icon-pop"] .icon { transition: transform 220ms cubic-bezier(.2,.9,.2,1); }
.button[data-variant="icon-pop"]:hover .icon { transform: translateY(-4px) scale(1.07); }
.button[data-variant="pulse"]:hover { box-shadow: 0 0 0 6px rgba(18, 18, 18, 0.06); }
.button[data-click-variant] { position: relative; overflow: hidden; }
.button.click-anim { transition: transform 160ms cubic-bezier(.2,.9,.2,1); }
.ripple,
.button .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    transform: scale(0);
    opacity: 0.95;
    pointer-events: none;
    will-change: transform, opacity;
    animation: ripple 520ms ease-out forwards;
}
@keyframes ripple {
    to { transform: scale(1.8); opacity: 0; }
}
.button[data-click-variant="press"].click-anim {
    transform: scale(0.96);
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
@keyframes flashTap { 0%{filter:brightness(1)} 50%{filter:brightness(1.35)} 100%{filter:brightness(1)} }
.button[data-click-variant="flash"].click-anim { animation: flashTap 300ms linear; }
.button[data-click-variant="icon-tap"].click-anim .icon { transform: translateY(-6px) scale(1.18); }
@keyframes spinTap { 0%{transform:rotate(0)} 40%{transform:rotate(15deg)} 100%{transform:rotate(0)} }
.button[data-click-variant="spin"].click-anim { animation: spinTap 320ms cubic-bezier(.2,.9,.2,1); }
@keyframes bounceTap { 0%{transform:translateY(0)} 40%{transform:translateY(-8px)} 100%{transform:translateY(0)} }
.button[data-click-variant="bounce"].click-anim { animation: bounceTap 380ms cubic-bezier(.2,.9,.2,1); }