/**
 * buttons.css — Mallorkinas Child Theme
 * Botones principales, secundarios, WooCommerce, filtros, wishlist.
 * Color primario detectado: #60123F
 */

/* =========================================================
   BOTÓN BASE
   ========================================================= */

.mk-btn,
.mk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--mk-btn-padding-y) var(--mk-btn-padding-x);
    font-family: var(--mk-font-main);
    font-size: var(--mk-btn-font-size);
    font-weight: var(--mk-btn-font-weight);
    line-height: 1.2;
    border-radius: var(--mk-btn-radius);
    border: var(--mk-btn-border);
    background-color: var(--mk-bg-card);
    color: var(--mk-text-main);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mk-btn-transition);
    white-space: nowrap;
    user-select: none;
    vertical-align: middle;
}

.mk-btn:hover:not(:disabled),
.mk-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--mk-shadow-md);
    text-decoration: none;
}

.mk-btn:active,
.mk-button:active {
    transform: translateY(0);
}

.mk-btn:disabled,
.mk-button:disabled,
.mk-btn[disabled],
.mk-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================
   BOTÓN PRIMARIO
   ========================================================= */

.mk-btn--primary,
.mk-button--primary {
    background-color: var(--mk-color-primary);
    color: var(--mk-text-on-primary);
    border-color: var(--mk-color-primary);
}

.mk-btn--primary:hover,
.mk-button--primary:hover {
    background-color: var(--mk-color-primary-hover);
    border-color: var(--mk-color-primary-hover);
    color: var(--mk-text-on-primary);
}

/* =========================================================
   BOTÓN SECUNDARIO (outline)
   ========================================================= */

.mk-btn--secondary,
.mk-button--secondary {
    background-color: transparent;
    color: var(--mk-color-primary);
    border-color: var(--mk-color-primary);
}

.mk-btn--secondary:hover,
.mk-button--secondary:hover {
    background-color: var(--mk-color-primary);
    color: var(--mk-text-on-primary);
}

/* =========================================================
   BOTÓN GHOST (sin borde)
   ========================================================= */

.mk-btn--ghost,
.mk-button--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--mk-text-main);
}

.mk-btn--ghost:hover,
.mk-button--ghost:hover {
    background-color: var(--mk-bg-section);
}

/* =========================================================
   TAMAÑOS
   ========================================================= */

.mk-btn--sm {
    padding: 8px 16px;
    font-size: var(--mk-font-size-xs);
}

.mk-btn--lg {
    padding: 16px 32px;
    font-size: var(--mk-font-size-base);
}

.mk-btn--full {
    width: 100%;
}

/* =========================================================
   BOTONES WOOCOMMERCE
   ========================================================= */

/* Botón añadir al carrito (tienda y producto) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--mk-btn-padding-y) var(--mk-btn-padding-x);
    font-family: var(--mk-font-main);
    font-size: var(--mk-btn-font-size);
    font-weight: var(--mk-btn-font-weight);
    border-radius: var(--mk-btn-radius);
    border: 1px solid var(--mk-color-primary);
    background-color: var(--mk-color-primary);
    color: var(--mk-text-on-primary);
    cursor: pointer;
    text-decoration: none;
    transition: var(--mk-btn-transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--mk-color-primary-hover);
    border-color: var(--mk-color-primary-hover);
    color: var(--mk-text-on-primary);
    transform: translateY(-1px);
    box-shadow: var(--mk-shadow-md);
    text-decoration: none;
}

/* Botón alt (secundario WooCommerce) */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--mk-color-primary);
    border-color: var(--mk-color-primary);
    color: var(--mk-text-on-primary);
}

/* Botón checkout */
.woocommerce .checkout-button,
.woocommerce #place_order {
    width: 100%;
    font-size: var(--mk-font-size-base);
    padding: 16px 24px;
}

/* =========================================================
   BOTÓN LOADING (estado de carga)
   ========================================================= */

.mk-btn--loading {
    position: relative;
    pointer-events: none;
}

.mk-btn--loading::after {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    display: inline-block;
    animation: mk-spin 0.8s linear infinite;
    margin-left: 8px;
}

@keyframes mk-spin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   BOTÓN FILTROS
   ========================================================= */

.mk-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--mk-radius-pill);
    border: 1px solid var(--mk-border-color);
    background: var(--mk-bg-card);
    font-size: var(--mk-font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: var(--mk-transition);
}

.mk-filter-btn.is-active,
.mk-filter-btn:hover {
    border-color: var(--mk-color-primary);
    background-color: var(--mk-color-primary);
    color: var(--mk-text-on-primary);
}

/* =========================================================
   FOCUS (accesibilidad)
   ========================================================= */

.mk-btn:focus-visible,
.mk-button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
    outline: 2px solid var(--mk-color-primary);
    outline-offset: 2px;
}