/* ==============================================
   CORRECCIÓN CARRITO MÓVIL - BOTONES MÁS ARRIBA
   - Evita interferencia con navegación inferior del móvil
   - Mejor accesibilidad en pantallas pequeñas
   ============================================== */

/* Ajustes para móviles - botones más arriba */
@media (max-width: 768px) {
  /* Carrito modal ajustado */
  .carrito-modal-modern {
    bottom: 0 !important;
    top: auto !important;
    padding-bottom: max(80px, env(safe-area-inset-bottom)) !important; /* Espacio extra para navegación del móvil */
  }
  
  .carrito-content-modern {
    max-height: calc(100vh - 120px - env(safe-area-inset-bottom)) !important; /* Reducir altura máxima */
    bottom: max(80px, env(safe-area-inset-bottom)) !important; /* Mover más arriba */
    top: auto !important;
    position: fixed !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  
  /* Footer del carrito más espacioso en la parte superior */
  .carrito-footer {
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    background: #f8f9fa !important;
    border-top: 2px solid #e9ecef !important;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15) !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
  }
  
  /* Botones principales más prominentes */
  .carrito-acciones-principales {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  
  /* Botón de transferencia */
  .btn-transferencia {
    order: 1 !important;
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 1.1em !important;
    font-weight: 400 !important;
    background: linear-gradient(135deg, #FFD700, #4a90e2) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3) !important;
    margin-bottom: 8px !important;
  }

  /* Botón de pagar con MercadoPago */
  .btn-pagar-mp {
    order: 2 !important;
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 1.1em !important;
    font-weight: 400 !important;
    background: linear-gradient(135deg, #FFD700, #FFC700) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3) !important;
    margin-bottom: 8px !important;
  }
  
  .btn-pagar-mp:hover {
    background: linear-gradient(135deg, #FFC700, #FFB700) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4) !important;
  }
  
  /* Botón vaciar más pequeño y secundario */
  .btn-vaciar-modern {
    order: 3 !important;
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 0.95em !important;
    background: transparent !important;
    color: #dc3545 !important;
    border: 2px solid #dc3545 !important;
    border-radius: 8px !important;
  }
  
  .btn-vaciar-modern:hover {
    background: #dc3545 !important;
    color: white !important;
  }
  
  /* Carrito body con más espacio para scroll */
  .carrito-body {
    max-height: calc(100vh - 280px) !important; /* Más espacio para los botones */
    overflow-y: auto !important;
    padding-bottom: 20px !important;
  }
}

@media (max-width: 480px) {
  /* Móviles pequeños - más espacio para navegación */
  .carrito-modal-modern {
    padding-bottom: max(100px, env(safe-area-inset-bottom) + 20px) !important;
  }
  
  .carrito-content-modern {
    max-height: calc(100vh - env(safe-area-inset-bottom)) !important;
    bottom: auto !important;
    top: 0 !important;
    width: 80% !important;
    margin: 0 !important;
    right: 0 !important;
  }
  
  .carrito-footer {
    padding: 18px 12px 14px !important;
  }
  
  .btn-pagar-mp {
    padding: 15px 18px !important;
    font-size: 1.05em !important;
  }
  
  .btn-vaciar-modern {
    padding: 10px 14px !important;
    font-size: 0.9em !important;
  }
  
  /* Carrito body aún más compacto */
  .carrito-body {
    max-height: calc(100vh - 300px) !important;
  }
}

@media (max-width: 375px) {
  /* iPhone SE y móviles muy pequeños */
  .carrito-modal-modern {
    padding-bottom: 110px !important;
  }
  
  .carrito-content-modern {
    max-height: 100vh !important;
    bottom: auto !important;
    top: 0 !important;
    width: 80% !important;
  }
  
  .carrito-footer {
    padding: 16px 10px 12px !important;
  }
  
  .carrito-acciones-principales {
    gap: 10px !important;
  }
  
  .btn-pagar-mp {
    padding: 14px 16px !important;
    font-size: 1em !important;
  }
  
  .btn-vaciar-modern {
    padding: 9px 12px !important;
    font-size: 0.85em !important;
  }
}

/* ==============================================
   MEJORAS ADICIONALES PARA ACCESIBILIDAD
   ============================================== */

@media (max-width: 768px) {
  /* Asegurar que los botones no se superpongan con navegación del sistema */
  .carrito-footer {
    background: rgba(248, 249, 250, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  
  /* Overlay del carrito menos intrusivo */
  .carrito-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Indicador visual de que hay más contenido arriba */
  .carrito-body::before {
    content: '' !important;
    position: sticky !important;
    top: 0 !important;
    height: 3px !important;
    background: linear-gradient(to right, transparent, #0078d4, transparent) !important;
    margin: 0 -16px 10px !important;
    opacity: 0.6 !important;
  }
  
  /* Scroll indicator */
  .carrito-productos {
    position: relative !important;
  }
  
  .carrito-productos::after {
    content: '↑ Desliza para ver más productos ↑' !important;
    position: sticky !important;
    bottom: 0 !important;
    background: linear-gradient(transparent, rgba(248, 249, 250, 0.9)) !important;
    text-align: center !important;
    padding: 10px !important;
    font-size: 0.8em !important;
    color: #6c757d !important;
    pointer-events: none !important;
  }
}

/* Prevenir zoom accidental en inputs dentro del carrito */
@media (max-width: 768px) {
  .carrito-content-modern input,
  .carrito-content-modern select,
  .carrito-content-modern textarea {
    font-size: 16px !important;
  }
}