/* =============================================================
 * Peach UX — Chrome global (saldo pill + bottom nav)
 * Enqueue: peach-ux.php cuando is_user_logged_in().
 * Aplica en TODAS las páginas frontend (Elementor, PHP render, etc).
 * ============================================================= */

/* ----------------- Saldo pill (fixed top-right) ----------------- */

.peach-saldo-pill {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(228, 105, 121, 0.15);
    color: #E46979;
    border: 1px solid rgba(228, 105, 121, 0.35);
    border-radius: 20px;
    padding: 5px 12px 5px 8px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    text-decoration: none;
    line-height: 1.2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.18s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.peach-saldo-pill:hover,
.peach-saldo-pill:focus-visible {
    background: rgba(228, 105, 121, 0.25);
    color: #E46979;
    text-decoration: none;
    outline: none;
}

.peach-saldo-pill:active {
    transform: scale(0.97);
}

.peach-saldo-pill__icon {
    font-size: 14px;
    line-height: 1;
}

.peach-saldo-pill__amount {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .peach-saldo-pill {
        top: 10px;
        right: 10px;
        padding: 4px 10px 4px 7px;
        font-size: 12px;
    }
}

/* Si el admin bar de WP está visible, bajar el pill. */
body.admin-bar .peach-saldo-pill {
    top: calc(12px + 32px);
}
@media (max-width: 782px) {
    body.admin-bar .peach-saldo-pill {
        top: calc(10px + 46px);
    }
}

/* ----------------- Bottom nav (mobile only) ----------------- */

.peach-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .peach-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 95;
        background: rgba(15, 15, 15, 0.96);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid #2a2a2a;
        justify-content: space-around;
        padding: 6px 0 env(safe-area-inset-bottom, 8px);
        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        margin: 0;
        box-sizing: border-box;
    }

    body.peach-has-bottom-nav {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 8px));
    }
}

.peach-bnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px 4px;
    text-decoration: none;
    color: #737373;
    font-size: 10px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
    box-sizing: border-box;
}

.peach-bnav__item:hover,
.peach-bnav__item:focus-visible {
    color: #e5e5e5;
    text-decoration: none;
    outline: none;
}

.peach-bnav__item.is-active {
    color: #E46979;
}

.peach-bnav__icon {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.peach-bnav__icon svg {
    width: 22px;
    height: 22px;
    max-width: 100%;
    max-height: 100%;
    stroke: currentColor;
    fill: none;
}

.peach-bnav__item.is-active .peach-bnav__icon svg {
    fill: rgba(228, 105, 121, 0.18);
    stroke: currentColor;
}

.peach-bnav__label {
    font-weight: 500;
    letter-spacing: 0.1px;
}

.peach-bnav__item.is-active .peach-bnav__label {
    font-weight: 600;
}

/* ----------------- Support FAB — ocultar en mobile cuando hay bottom nav ----------------- */
/* La burbuja vive en peach-frontend.php (peach-support-fab + peach-support-popup).
 * En mobile colisiona con el bottom nav. El acceso a soporte queda en /mi-cuenta/ → Ajustes. */
@media (max-width: 768px) {
    body.peach-has-bottom-nav .peach-support-fab,
    body.peach-has-bottom-nav .peach-support-popup {
        display: none !important;
    }
}

/* ----------------- Support FAB — ocultar para usuarios con Tawk.to ----------------- */
/* Usuarios con 2+ compras pagadas tienen Tawk.to activo (peach-tawk.php).
 * En esos casos, ocultar la burbuja vieja en TODAS las resoluciones. */
body.peach-has-tawk .peach-support-fab,
body.peach-has-tawk .peach-support-popup {
    display: none !important;
}

/* ----------------- Wallet bar widget overrides (peach-frontend.php) ----------------- */
/* El shortcode [peach_wallet_bar] vive en el header (Elementor). Los dos elementos
 * que sobran:
 *   - Saldo + Recargar (logueado) — duplicado con la pill que ya tenemos.
 *   - Iniciar sesión — botón demasiado grande, rompe el header.
 * Acá los recortamos a algo que combine con el resto del UX. */
/* Logueado: la pill ya cubre la función en todas las resoluciones. */
body.logged-in .peach-wallet-widget {
    display: none !important;
}

/* Login link compacto, mismo lenguaje visual que la pill de saldo. */
.peach-wallet-login {
    padding: 5px 12px 5px 10px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
    gap: 6px !important;
    line-height: 1.2 !important;
}
.peach-wallet-login svg {
    width: 14px !important;
    height: 14px !important;
}
@media (max-width: 480px) {
    .peach-wallet-login {
        padding: 4px 10px 4px 8px !important;
        font-size: 12px !important;
    }
    .peach-wallet-login svg {
        width: 13px !important;
        height: 13px !important;
    }
}

/* ============================================================
 * Home feed (recs Fase 2) — solo logged + frontpage
 * ============================================================ */

.peach-home-feed {
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 16px;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #e5e5e5;
    box-sizing: border-box;
}

.peach-hf-section {
    margin-bottom: 28px;
}

.peach-hf-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #e5e5e5;
    line-height: 1.2;
}

/* Grid layout (2 cols mobile, 3 medium, 4 desktop) */
.peach-hf-grid .peach-hf-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 600px) {
    .peach-hf-grid .peach-hf-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}
@media (min-width: 900px) {
    .peach-hf-grid .peach-hf-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Carrusel horizontal con scroll snap (Continúa viendo, Visto recientemente) */
.peach-hf-carousel .peach-hf-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.peach-hf-carousel .peach-hf-row::-webkit-scrollbar { display: none; }
.peach-hf-carousel .peach-hf-card {
    flex-shrink: 0;
    width: 140px;
    scroll-snap-align: start;
}
@media (min-width: 600px) {
    .peach-hf-carousel .peach-hf-card { width: 160px; }
}

/* Card (común a grid y carousel) */
.peach-hf-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color 0.15s ease, transform 0.12s ease;
}
.peach-hf-card:hover,
.peach-hf-card:focus-visible {
    border-color: #3a3a3a;
    color: inherit;
    text-decoration: none;
    outline: none;
}
.peach-hf-card:active { transform: scale(0.98); }

.peach-hf-card-thumb {
    aspect-ratio: 4 / 5;
    background: #111;
    position: relative;
    overflow: hidden;
}
.peach-hf-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.peach-hf-card-thumb-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #444;
}

.peach-hf-card-info {
    padding: 8px 10px 10px;
}
.peach-hf-card-model {
    font-size: 11px;
    color: #888;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.peach-hf-card-name {
    font-size: 12px;
    color: #e5e5e5;
    font-weight: 600;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}
.peach-hf-card-price {
    color: #E46979;
    font-weight: 700;
    font-size: 13px;
}

/* ♥ favorito sobre la thumbnail (override del .peach-fav-btn de buy-box) */
.peach-hf-card .peach-hf-fav {
    position: absolute !important;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(0, 0, 0, 0.55) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 13px;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.15s ease, transform 0.1s ease;
    width: auto;
}
.peach-hf-card .peach-hf-fav:hover {
    background: rgba(0, 0, 0, 0.78) !important;
    color: #fff !important;
}
.peach-hf-card .peach-hf-fav.is-favorite {
    background: #E46979 !important;
    color: #fff !important;
}
.peach-hf-card .peach-hf-fav .peach-fav-btn__off,
.peach-hf-card .peach-hf-fav .peach-fav-btn__on {
    line-height: 1;
    font-size: 13px;
}

/* Skeleton loaders */
.peach-hf-skeleton-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 28px;
}
@media (min-width: 600px) {
    .peach-hf-skeleton-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}
@media (min-width: 900px) {
    .peach-hf-skeleton-row {
        grid-template-columns: repeat(4, 1fr);
    }
}
.peach-hf-skeleton-card {
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    background: linear-gradient(90deg, #1a1a1a 0%, #242424 50%, #1a1a1a 100%);
    background-size: 200% 100%;
    animation: peach-hf-shimmer 1.4s linear infinite;
}
@keyframes peach-hf-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}