/**
 * MOBILE HEADER & CART FIXES
 * Version: 1.0.0
 * Fecha: 2025-01-24
 *
 * PROBLEMAS CORREGIDOS:
 * 1. Header muy pegado a la izquierda en mobile
 * 2. Botón de carrito se encima con botón flotante de ayuda
 */

/* =============================================
   1. FIX HEADER PADDING - Mobile First
   ============================================= */

/* Mobile: Más padding horizontal para evitar que esté pegado al borde */
.sp-navbar {
    padding-left: 1rem !important;  /* 16px - más espacio a la izquierda */
    padding-right: 1rem !important; /* 16px - más espacio a la derecha */
}

/* Tablet: Incrementar aún más */
@media (min-width: 576px) {
    .sp-navbar {
        padding-left: 1.5rem !important;  /* 24px */
        padding-right: 1.5rem !important; /* 24px */
    }
}

/* Desktop: Padding generoso */
@media (min-width: 768px) {
    .sp-navbar {
        padding-left: 2rem !important;  /* 32px */
        padding-right: 2rem !important; /* 32px */
    }
}

/* =============================================
   2. FIX BOTÓN FLOTANTE DE AYUDA - Reposicionar
   ============================================= */

/*
  PROBLEMA: El botón de ayuda está en bottom: 20px; right: 20px;
  El floating cart está en bottom: var(--sp-space-xl); right: var(--sp-space-md);

  SOLUCIÓN: Mover el botón de ayuda a la izquierda en mobile
*/

/* Seleccionar el botón de ayuda generado dinámicamente */
body > button.btn.btn-success:has(.bi-question-circle) {
    /* Mobile: Posicionar a la IZQUIERDA para evitar conflicto con carrito */
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;

    /* Estilos adicionales para mejorar la apariencia */
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(19, 98, 19, 0.3) !important;
    z-index: 999 !important; /* Ligeramente menor que floating cart (1000) */

    /* Gradiente verde oscuro */
    background: linear-gradient(135deg, #136213 0%, #0a4a0a 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;

    /* Transiciones suaves */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Icono del botón de ayuda */
body > button.btn.btn-success:has(.bi-question-circle) .bi-question-circle {
    font-size: 1.75rem !important;
    color: white !important;
}

/* Hover state - Efecto de elevación */
body > button.btn.btn-success:has(.bi-question-circle):hover {
    transform: scale(1.1) !important;
    box-shadow: 0 8px 24px rgba(19, 98, 19, 0.4) !important;
}

/* Active state - Presionado */
body > button.btn.btn-success:has(.bi-question-circle):active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 8px rgba(19, 98, 19, 0.3) !important;
}

/* Focus visible - Accesibilidad */
body > button.btn.btn-success:has(.bi-question-circle):focus-visible {
    outline: 3px solid white !important;
    outline-offset: 3px !important;
}

/* =============================================
   3. AJUSTE RESPONSIVE - Desktop
   ============================================= */

/* Desktop: Botón de ayuda a la IZQUIERDA, carrito a la DERECHA */
@media (min-width: 768px) {
    /* Botón de ayuda se mantiene a la IZQUIERDA en desktop */
    body > button.btn.btn-success:has(.bi-question-circle) {
        left: 32px !important;
        right: auto !important;
        bottom: 48px !important; /* Misma altura que el carrito para simetría */
    }

    /* Aumentar tamaño en desktop */
    body > button.btn.btn-success:has(.bi-question-circle) {
        width: 64px !important;
        height: 64px !important;
    }

    body > button.btn.btn-success:has(.bi-question-circle) .bi-question-circle {
        font-size: 2rem !important;
    }
}

/* Desktop grande: Más padding */
@media (min-width: 1024px) {
    body > button.btn.btn-success:has(.bi-question-circle) {
        left: 40px !important;
        bottom: 48px !important;
    }
}

/* =============================================
   4. PREVENIR CONFLICTOS EN MÓVILES PEQUEÑOS
   ============================================= */

/* Móviles muy pequeños (< 360px) */
@media (max-width: 359px) {
    /* Header: Padding mínimo pero suficiente */
    .sp-navbar {
        padding-left: 0.75rem !important;  /* 12px */
        padding-right: 0.75rem !important; /* 12px */
    }

    /* Botón de ayuda: Más pequeño */
    body > button.btn.btn-success:has(.bi-question-circle) {
        width: 48px !important;
        height: 48px !important;
        bottom: 16px !important;
        left: 16px !important;
    }

    body > button.btn.btn-success:has(.bi-question-circle) .bi-question-circle {
        font-size: 1.5rem !important;
    }
}

/* =============================================
   5. SAFE AREA (iPhone con notch)
   ============================================= */

/* Compensar por safe-area en dispositivos con notch */
@supports (padding: env(safe-area-inset-bottom)) {
    /* Botón de ayuda: Respetar safe area inferior */
    body > button.btn.btn-success:has(.bi-question-circle) {
        bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        left: calc(20px + env(safe-area-inset-left, 0px)) !important;
    }

    /* Desktop: También respetar safe area */
    @media (min-width: 768px) {
        body > button.btn.btn-success:has(.bi-question-circle) {
            bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
            left: calc(32px + env(safe-area-inset-left, 0px)) !important;
            right: auto !important;
        }
    }

    /* Desktop XL: También respetar safe area */
    @media (min-width: 1024px) {
        body > button.btn.btn-success:has(.bi-question-circle) {
            bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
            left: calc(40px + env(safe-area-inset-left, 0px)) !important;
        }
    }
}

/* =============================================
   6. ACCESIBILIDAD Y MOTION PREFERENCES
   ============================================= */

/* Reducir movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    body > button.btn.btn-success:has(.bi-question-circle) {
        transition: none !important;
    }

    body > button.btn.btn-success:has(.bi-question-circle):hover {
        transform: none !important;
    }
}

/* High contrast mode - Mejorar visibilidad */
@media (prefers-contrast: high) {
    body > button.btn.btn-success:has(.bi-question-circle) {
        border-width: 3px !important;
        border-color: white !important;
    }
}

/* =============================================
   7. PRINT - Ocultar botones flotantes
   ============================================= */

@media print {
    body > button.btn.btn-success:has(.bi-question-circle) {
        display: none !important;
    }
}

/* =============================================
   8. LANDSCAPE MODE - Ajustes específicos
   ============================================= */

/* Mobile landscape: Reducir tamaño para ahorrar espacio */
@media (max-height: 500px) and (orientation: landscape) {
    body > button.btn.btn-success:has(.bi-question-circle) {
        width: 48px !important;
        height: 48px !important;
        bottom: 12px !important;
        left: 12px !important;
    }

    body > button.btn.btn-success:has(.bi-question-circle) .bi-question-circle {
        font-size: 1.5rem !important;
    }
}

/* =============================================
   END OF MOBILE HEADER & CART FIXES
   ============================================= */