/* ============================================================
   ANNY — BUTTONS
   ============================================================
   Botones específicos del catálogo ANNY.

   IMPORTANTE:
   anny-base.css contiene estilos globales para button.
   Este archivo sobrescribe únicamente los componentes ANNY.
   ============================================================ */


/* ============================================================
   01 — BOTÓN AÑADIR AL CARRITO
   ============================================================ */

.anny-card__button {

    /* Estructura */

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 48px;

    padding: .75rem 1rem;

    box-sizing: border-box;


    /* Apariencia */

    background-color: var(--anny-cream-light);

    border: 1px solid var(--anny-secondary);

    border-radius: var(--anny-radius-sm);

    color: var(--anny-white);


    /* Tipografía */

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .82rem;

    font-weight:
        var(--anny-weight-ui);

    line-height: 1.2;

    letter-spacing: .04em;

    text-align: left;

    text-transform: uppercase;


    /* Interacción */

    cursor: pointer;

    overflow: hidden;

    isolation: isolate;

    transition:
        background-color var(--anny-transition),
        border-color var(--anny-transition),
        color var(--anny-transition),
        transform var(--anny-transition),
        box-shadow var(--anny-transition);

}


/* ============================================================
   02 — TEXTO DEL BOTÓN
   ============================================================ */

.anny-card__button-text {

    position: relative;

    z-index: 2;

    display: block;

    flex: 1;

    min-width: 0;

}


/* ============================================================
   03 — ICONO DEL BOTÓN
   ============================================================ */

.anny-card__button-icon {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    margin-left: .85rem;

    font-family:
        var(--anny-font-body),
        sans-serif;

    font-size: 1.1rem;

    font-weight: 400;

    line-height: 1;

    transition:
        transform var(--anny-transition),
        opacity var(--anny-transition);

}


/* ============================================================
   04 — HOVER
   ============================================================ */

.anny-card__button:hover {

    background-color: var(--anny-primary);

    border-color: var(--anny-primary);

    color: var(--anny-white);

    transform: translateY(-2px);

    box-shadow:
        var(--anny-shadow-soft);

}


/* ============================================================
   05 — HOVER ICONO
   ============================================================ */

.anny-card__button:hover
.anny-card__button-icon {

    transform: translateX(4px);

}


/* ============================================================
   06 — ACTIVE
   ============================================================ */

.anny-card__button:active {

    transform: translateY(0);

    box-shadow: none;

}


/* ============================================================
   07 — FOCUS
   ============================================================ */

.anny-card__button:focus {

    outline: 2px solid var(--anny-accent);

    outline-offset: 3px;

}


/* ============================================================
   08 — FOCUS SIN TECLADO
   ============================================================ */

.anny-card__button:focus:not(:focus-visible) {

    outline: none;

}


/* ============================================================
   09 — EFECTO DE CAPA HOVER
   ============================================================ */

.anny-card__button::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background-color: var(--anny-accent);

    opacity: 0;

    transform: translateX(-100%);

    transition:
        transform var(--anny-transition-slow),
        opacity var(--anny-transition);

}


/* ============================================================
   10 — ACTIVAR CAPA HOVER
   ============================================================ */

.anny-card__button:hover::before {

    opacity: .14;

    transform: translateX(0);

}


/* ============================================================
   11 — FLECHAS DE GALERÍA
   ============================================================ */

.anny-card__arrow {

    position: absolute;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    padding: 0;

    margin: 0;


    /* Apariencia */

    background-color:
        color-mix(
            in srgb,
            var(--anny-white) 94%,
            transparent
        );

    border: 1px solid var(--anny-border);

    border-radius: 50%;

    color: var(--anny-secondary);


    /* Tipografía */

    font-family:
        var(--anny-font-body),
        sans-serif;

    font-size: 1.45rem;

    font-weight: 400;

    line-height: 1;


    /* Interacción */

    cursor: pointer;

    opacity: 0;

    box-shadow:
        var(--anny-shadow-soft);

    transition:
        opacity var(--anny-transition-fast),
        background-color var(--anny-transition-fast),
        border-color var(--anny-transition-fast),
        color var(--anny-transition-fast),
        transform var(--anny-transition-fast),
        box-shadow var(--anny-transition-fast);

}


/* ============================================================
   12 — POSICIÓN FLECHA ANTERIOR
   ============================================================ */

.anny-card__arrow--prev {

    top: 50%;

    left: 12px;

    transform:
        translateY(-50%);

}


/* ============================================================
   13 — POSICIÓN FLECHA SIGUIENTE
   ============================================================ */

.anny-card__arrow--next {

    top: 50%;

    right: 12px;

    transform:
        translateY(-50%);

}


/* ============================================================
   14 — MOSTRAR FLECHAS AL PASAR SOBRE GALERÍA
   ============================================================ */

.anny-card__top:hover
.anny-card__arrow {

    opacity: 1;

}


/* ============================================================
   15 — HOVER FLECHA ANTERIOR
   ============================================================ */

.anny-card__top:hover
.anny-card__arrow--prev:hover {

    background-color: var(--anny-secondary);

    border-color: var(--anny-secondary);

    color: var(--anny-white);

    transform:
        translateY(-50%)
        scale(1.05);

    box-shadow:
        var(--anny-shadow-hover);

}


/* ============================================================
   16 — HOVER FLECHA SIGUIENTE
   ============================================================ */

.anny-card__top:hover
.anny-card__arrow--next:hover {

    background-color: var(--anny-secondary);

    border-color: var(--anny-secondary);

    color: var(--anny-white);

    transform:
        translateY(-50%)
        scale(1.05);

    box-shadow:
        var(--anny-shadow-hover);

}


/* ============================================================
   17 — FOCUS FLECHAS
   ============================================================ */

.anny-card__arrow:focus {

    outline: 2px solid var(--anny-accent);

    outline-offset: 2px;

}


/* ============================================================
   18 — FOCUS SIN TECLADO
   ============================================================ */

.anny-card__arrow:focus:not(:focus-visible) {

    outline: none;

}


/* ============================================================
   19 — DOTS DE GALERÍA
   ============================================================ */

.anny-card__dot {

    display: block;

    width: 6px;

    height: 6px;

    padding: 0;

    margin: 0;

    border: 1px solid var(--anny-secondary);

    border-radius: 50%;

    background-color: transparent;

    opacity: .45;

    cursor: pointer;

    transition:
        width var(--anny-transition-fast),
        background-color var(--anny-transition-fast),
        border-color var(--anny-transition-fast),
        opacity var(--anny-transition-fast),
        transform var(--anny-transition-fast);

}


/* ============================================================
   20 — DOT ACTIVO
   ============================================================ */

.anny-card__dot.is-active {

    width: 18px;

    border-color: var(--anny-primary);

    border-radius: 999px;

    background-color: var(--anny-primary);

    opacity: 1;

}


/* ============================================================
   21 — DOT HOVER
   ============================================================ */

.anny-card__dot:hover {

    border-color: var(--anny-primary);

    background-color: var(--anny-primary);

    opacity: 1;

    transform: scale(1.1);

}


/* ============================================================
   22 — REDUCIR MOVIMIENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .anny-card__button,
    .anny-card__button-icon,
    .anny-card__button::before,
    .anny-card__arrow,
    .anny-card__dot {

        transition: none;

    }

}