/* ============================================
   YEONSKIN - Mobile-First Responsive Styles
   ============================================ */

:root {
  --morado-loto: #9C7DC0;
  --turquesa-agua: #7ED0C6;
  --rosa-nude: #D9A5A5;
  --blanco-puro: #FFFFFF;
  --gris-claro: #f9f9f9;
}

/* ============================================
   MOBILE OPTIMIZATIONS (Base - Mobile First)
   ============================================ */

/* Touch-Friendly Interactive Elements */
button, a, .btn {
  min-height: 44px;
  min-width: 44px;
}

/* Prevent horizontal scroll */
body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Container padding optimization */
.container {
  padding-left: 15px;
  padding-right: 15px;
}

/* ============================================
   NAVBAR MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 991.98px) {
  /* Navbar brand/logo smaller on mobile */
  .navbar-brand img,
  .navbar-yaonskin .navbar-brand img {
    height: 50px !important;
    width: auto;
  }
  
  /* Mobile menu items */
  .navbar-collapse {
    background: rgba(156, 125, 192, 0.98);
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }
  
  .navbar-nav {
    padding: 0.5rem 0;
  }
  
  .navbar .nav-link,
  .navbar-yaonskin .nav-link {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .navbar .nav-link:last-child {
    border-bottom: none;
  }
  
  /* Cart button mobile positioning */
  .carrito-btn {
    font-size: 1.4rem !important;
    padding: 0.5rem;
  }
  
  /* Navbar toggler larger */
  .navbar-toggler {
    padding: 0.5rem 0.75rem;
    font-size: 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
  }
}

/* ============================================
   CART PANEL MOBILE
   ============================================ */

@media (max-width: 575.98px) {
  #carritoPanel {
    width: 100% !important;
    right: -100% !important;
  }
  
  #carritoPanel.active {
    right: 0 !important;
  }
  
  .carrito-item img {
    width: 50px;
    height: 50px;
  }
  
  .carrito-item .info h6 {
    font-size: 0.9rem;
  }
  
  .carrito-item .info span {
    font-size: 0.85rem;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #carritoPanel {
    width: 85% !important;
  }
}

/* ============================================
   CAROUSEL MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  .carousel-item img {
    height: 250px !important;
    object-fit: cover;
  }
  
  .carousel-caption {
    padding: 1rem !important;
    border-radius: 12px !important;
  }
  
  .carousel-caption h5 {
    font-size: 1.3rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .carousel-caption p {
    font-size: 0.9rem !important;
    display: none; /* Hide on very small screens */
  }
  
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    padding: 12px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .carousel-item img {
    height: 350px !important;
  }
  
  .carousel-caption h5 {
    font-size: 1.8rem !important;
  }
  
  .carousel-caption p {
    font-size: 1rem !important;
  }
}

/* ============================================
   TYPOGRAPHY MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  h1, h1.main-title {
    font-size: 1.75rem !important;
    letter-spacing: 1px !important;
    margin-top: 2rem !important;
  }
  
  h2 {
    font-size: 1.3rem !important;
  }
  
  h3 {
    font-size: 1.1rem !important;
  }
  
  .lead {
    font-size: 1rem !important;
    padding: 0 1rem;
  }
  
  p {
    font-size: 0.95rem;
  }
}

/* ============================================
   PRODUCT CARDS MOBILE
   ============================================ */

@media (max-width: 575.98px) {
  .producto {
    padding: 15px !important;
    margin-bottom: 1.5rem;
    border-radius: 16px !important;
  }
  
  .producto img {
    height: 200px !important;
    border-radius: 12px !important;
  }
  
  .producto h2 {
    font-size: 1rem !important;
    margin-top: 12px !important;
  }
  
  .producto p {
    font-size: 0.85rem !important;
  }
  
  .off-badge {
    font-size: 0.8rem !important;
    padding: 6px 10px !important;
    top: 12px !important;
    right: 12px !important;
  }
  
  /* Price displays */
  .precio-original {
    font-size: 0.85rem !important;
  }
  
  .precio-descuento, .precio-final {
    font-size: 1.2rem !important;
  }
  
  /* Product grid - 1 column on mobile */
  .row.g-4 > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .producto img {
    height: 220px !important;
  }
}

/* ============================================
   BUTTONS MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  .btn {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
  }
  
  .btn-lg {
    padding: 0.85rem 1.5rem !important;
    font-size: 1rem !important;
  }
  
  .btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
  }
  
  /* Full width buttons on mobile */
  .btn-block-mobile {
    width: 100%;
    display: block;
  }
}

/* ============================================
   FORMS MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  .form-control, .form-select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 0.75rem !important;
  }
  
  .form-label {
    font-size: 0.9rem;
    font-weight: 600;
  }
}

/* ============================================
   SPACING & PADDING MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  /* Reduce section padding */
  section, .section {
    padding: 2rem 0 !important;
  }
  
  /* Card spacing */
  .card {
    margin-bottom: 1rem;
  }
  
  /* Row gutters smaller */
  .row.g-4 {
    --bs-gutter-y: 1rem;
    --bs-gutter-x: 1rem;
  }
}

/* ============================================
   TABLES MOBILE (Responsive)
   ============================================ */

@media (max-width: 767.98px) {
  .table-responsive {
    border: 0;
  }
  
  table {
    font-size: 0.85rem;
  }
  
  th, td {
    padding: 0.5rem !important;
  }
}

/* ============================================
   MODALS MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 0.5rem;
  }
  
  .modal-content {
    border-radius: 16px;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 1rem;
  }
  
  .modal-title {
    font-size: 1.2rem;
  }
  
  /* Modal de pago específico */
  .modal-pago-overlay {
    padding: 10px !important;
    align-items: flex-start !important;
  }
  
  .modal-pago-content {
    padding: 20px !important;
    width: 95% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    border-radius: 12px !important;
  }
  
  .modal-pago-content h3 {
    font-size: 1.3rem !important;
    margin-bottom: 15px !important;
  }
  
  /* Método de pago en mobile */
  .metodo-pago-container {
    padding: 12px !important;
    margin-bottom: 15px !important;
  }
  
  .metodo-pago-opciones {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .metodo-pago-opcion {
    min-width: 100% !important;
    padding: 10px !important;
  }
  
  .metodo-pago-opcion strong {
    font-size: 0.9rem !important;
  }
  
  .metodo-pago-opcion small {
    font-size: 0.7rem !important;
  }
  
  /* Form groups en modal */
  .modal-pago-content .form-group {
    margin-bottom: 12px !important;
  }
  
  .modal-pago-content label {
    font-size: 0.9rem !important;
    margin-bottom: 4px !important;
  }
  
  .modal-pago-content input,
  .modal-pago-content textarea {
    padding: 10px !important;
    font-size: 16px !important;
  }
  
  .modal-pago-content textarea {
    min-height: 80px;
  }
  
  /* Botones del modal */
  .modal-botones {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .btn-modal-cancelar,
  .btn-modal-pagar {
    width: 100% !important;
    min-width: 100% !important;
    padding: 12px !important;
    font-size: 0.95rem !important;
  }
  
  /* Hover effects para botones del modal */
  .btn-modal-cancelar:hover {
    background: #f5f5f5 !important;
    border-color: #999 !important;
  }
  
  .btn-modal-pagar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5) !important;
  }
  
  .btn-modal-pagar:active {
    transform: translateY(0);
  }
}

/* Small mobile (very small screens) */
@media (max-width: 375px) {
  .modal-pago-content {
    padding: 15px !important;
  }
  
  .modal-pago-content h3 {
    font-size: 1.1rem !important;
  }
  
  .metodo-pago-container {
    padding: 10px !important;
  }
}

/* Landscape mobile - Modal optimizations */
@media (max-width: 767.98px) and (orientation: landscape) {
  .modal-pago-overlay {
    align-items: flex-start !important;
    padding: 5px !important;
  }
  
  .modal-pago-content {
    max-height: 85vh !important;
    margin-top: 5px !important;
    padding: 15px !important;
  }
  
  .modal-pago-content h3 {
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
  }
  
  .modal-pago-content .form-group {
    margin-bottom: 8px !important;
  }
  
  .modal-pago-content input,
  .modal-pago-content textarea {
    padding: 8px !important;
  }
  
  .modal-pago-content textarea {
    min-height: 60px;
  }
}

/* Focus states for better accessibility */
@media (max-width: 767.98px) {
  .modal-pago-content input:focus,
  .modal-pago-content textarea:focus {
    outline: 3px solid #667eea !important;
    outline-offset: 2px;
    border-color: #667eea !important;
  }
  
  .metodo-pago-opcion:has(input:checked) {
    background: #e8ecff !important;
    border-color: #667eea !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
  }
}

/* ============================================
   FOOTER MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  footer {
    text-align: center;
    padding: 2rem 1rem !important;
  }
  
  footer .col-md-4,
  footer .col-md-3 {
    margin-bottom: 1.5rem;
  }
  
  footer h5 {
    font-size: 1.1rem;
  }
  
  footer p, footer a {
    font-size: 0.9rem;
  }
}

/* ============================================
   IMAGES MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Banner images */
  .banner img,
  .hero-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ============================================
   UTILITY CLASSES MOBILE
   ============================================ */

/* Hide on mobile */
@media (max-width: 767.98px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Show only on mobile */
.show-mobile {
  display: none !important;
}

@media (max-width: 767.98px) {
  .show-mobile {
    display: block !important;
  }
  
  .show-mobile-inline {
    display: inline !important;
  }
  
  .show-mobile-flex {
    display: flex !important;
  }
}

/* Text alignment mobile */
@media (max-width: 767.98px) {
  .text-center-mobile {
    text-align: center !important;
  }
  
  .text-left-mobile {
    text-align: left !important;
  }
}

/* ============================================
   SHOPPING CART PAGE MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  .carrito-producto {
    flex-direction: column;
    text-align: center;
  }
  
  .carrito-producto img {
    width: 100% !important;
    max-width: 200px;
    margin: 0 auto 1rem;
  }
  
  .cantidad-control {
    justify-content: center;
    margin: 1rem 0;
  }
}

/* ============================================
   CHECKOUT PAGE MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  .checkout-summary {
    margin-top: 2rem;
    position: static !important;
  }
  
  .payment-method {
    padding: 1rem !important;
  }
  
  .payment-method img {
    max-width: 80px !important;
  }
}

/* ============================================
   PRODUCT DETAIL PAGE MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  .producto-galeria {
    margin-bottom: 2rem;
  }
  
  .producto-info {
    padding: 1rem;
  }
  
  .producto-precio {
    font-size: 1.8rem !important;
  }
  
  .producto-descripcion {
    font-size: 0.95rem;
  }
}

/* ============================================
   NEWSLETTER / BULLETIN MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  .boletin-card {
    padding: 1rem !important;
  }
  
  .boletin-titulo {
    font-size: 1.1rem !important;
  }
  
  .boletin-content {
    font-size: 0.9rem;
  }
}

/* ============================================
   ACCESSIBILITY MOBILE
   ============================================ */

/* Larger touch targets for accessibility */
@media (max-width: 767.98px) {
  a, button, input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Focus visible for keyboard navigation */
  *:focus-visible {
    outline: 3px solid var(--turquesa-agua);
    outline-offset: 2px;
  }
}

/* ============================================
   LANDSCAPE PHONE OPTIMIZATIONS
   ============================================ */

@media (max-width: 767.98px) and (orientation: landscape) {
  .carousel-item img {
    height: 200px !important;
  }
  
  .navbar-brand img {
    height: 40px !important;
  }
  
  .modal-dialog {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* ============================================
   TABLET OPTIMIZATIONS
   ============================================ */

@media (min-width: 768px) and (max-width: 991.98px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  h1, h1.main-title {
    font-size: 2rem !important;
  }
  
  .producto img {
    height: 230px !important;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Reduce animations on mobile for better performance */
@media (max-width: 767.98px) {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  
  /* Optimize animations */
  .producto:hover {
    transform: translateY(-5px) !important;
  }
  
  /* Reduce shadow complexity */
  .producto,
  .card,
  .navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {
  /* Add dark mode styles if needed in future */
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .navbar,
  .carrito-btn,
  #carritoPanel,
  footer,
  .carousel-control-prev,
  .carousel-control-next {
    display: none !important;
  }
  
  body {
    background: white !important;
  }
  
  .producto {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}