/* ============================================
   MOBILE UX FIXES - Critical E-commerce Flow
   ============================================ */

/* 1. Fix Bottom Navigation Overlap on Content */
@media (max-width: 991px) {
  /* Ensure all buttons and interactive elements are above bottom nav */
  .btn,
  a.btn,
  .sticky-buy-bar button,
  .fixed-bottom button,
  [class*="buy-now"],
  [class*="purchase"] {
    position: relative;
    z-index: 10;
    /* Minimum touch target size (WCAG AAA) */
    min-height: 44px;
    min-width: 44px;
    /* Ensure touch events work */
    -webkit-tap-highlight-color: rgba(243, 147, 33, 0.2);
    touch-action: manipulation;
  }

  /* Fix sticky buy buttons on product pages */
  .sticky-buy-bar,
  .fixed-bottom,
  [class*="sticky"][class*="bottom"] {
    bottom: 80px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important;
    z-index: 1035 !important;
  }

  /* Product cards: ensure buttons don't get cut off */
  .product-card,
  .product-card-v2,
  .product-card-v3 {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }

  /* Fix card footer buttons */
  .product-card-footer,
  .card-v2-footer,
  .product-card-v3 .card-footer-v3 {
    padding: 1rem !important;
    min-height: 70px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem;
  }

  /* Improve button tap areas */
  .product-card-footer .btn,
  .card-v2-footer button {
    flex: 1;
    min-height: 48px !important;
    font-size: 0.95rem !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 12px !important;
  }

  /* Keep hero carousel dots visually compact on tablet/mobile. */
  .ana-hero-quad .ana-slider-dots .ana-slider-dot {
    position: relative;
    min-width: 30px !important;
    min-height: 30px !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    flex: 0 0 30px !important;
  }

  .ana-hero-quad .ana-slider-dots .ana-slider-dot::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
  }

  .ana-hero-quad .ana-slider-dots .ana-slider-dot.active {
    width: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
  }

  /* Keep first-visit consent UI from fighting with fixed commerce/contact CTAs. */
  body.lj-cookie-banner-visible .tg-widget,
  body.lj-cookie-banner-visible .tg-float-btn,
  body.lj-cookie-banner-visible .sticky-purchase-bar,
  body.lj-cookie-banner-visible .mobile-checkout-bar,
  body.lj-cookie-banner-visible .fixed-bottom.d-lg-none {
    display: none !important;
  }

  /* Header and breadcrumb links need reliable mobile tap areas. */
  a.d-flex.align-items-center.text-decoration-none,
  .breadcrumb a,
  nav[aria-label="breadcrumb"] a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .breadcrumb a:first-child,
  nav[aria-label="breadcrumb"] a:first-child {
    min-width: 44px !important;
    justify-content: center !important;
  }

  /* Product card actions remain compact visually but meet touch target size. */
  .qx-card-v2__wishlist {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .qx-card-v2__buy-btn {
    min-width: 88px !important;
    min-height: 44px !important;
    padding: 0.625rem 0.875rem !important;
    justify-content: center !important;
  }

  .copy-btn,
  button.copy-btn,
  .iban-box .copy-btn,
  .bank-card .copy-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  .lj-cookie-banner__links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }

  .lj-cookie-banner__links a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .qx-product-title a,
  .qx-card-v2__title,
  .rp-view-all,
  .category-breadcrumb a,
  .main-category-header h2 a {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .form-check-input,
  .srv-qty-value,
  .nav-link {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .srv-qty-value {
    height: 44px !important;
  }

  .contact-page .form-check-label a,
  .contact-page .contact-info-value a,
  .legal-page a,
  .legal-content a,
  .legal-section a,
  a.hover-text-primary,
  a.stretched-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .footer-social-link {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .footer-column-title a,
  .footer-links a,
  .footer-contact-item a,
  .footer-legal-links a,
  .footer-legal-links button,
  .legal-action-link,
  .brand-credit {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .footer-links a,
  .footer-legal-links a,
  .footer-legal-links button {
    width: 100% !important;
  }

  .slick-dots li button {
    min-width: 24px !important;
    min-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    flex: 0 0 auto !important;
  }

  /* Fix price display - prevent overlap */
  .product-card-footer .price,
  .card-v2-footer .price {
    margin-bottom: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Checkout page fixes — ONLY target actual page containers */
  .checkout-container,
  .payment-container {
    padding-bottom: 150px !important;
  }

  /* === ALL CHECKOUT-PREFIXED ELEMENTS — Blanket reset === */
  /* Prevents future checkout-* classes from being affected by wildcard rules */
  [class*="checkout-section"],
  [class*="checkout-bar"],
  [class*="checkout-btn"] {
    padding-bottom: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
  }

  /* === CHECKOUT SECTION ELEMENTS === */
  .checkout-section-card {
    position: relative !important;
  }

  .checkout-section-header {
    align-items: center !important;
  }

  .checkout-section-icon {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    min-width: 28px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }

  /* === CHECKOUT BUTTON V3 — Specific fix === */
  .checkout-btn-v3 {
    padding: 0.875rem 1.5rem !important;
    min-height: 48px !important;
    max-height: 56px !important;
    border-radius: 0.75rem !important;
  }

  /* === STICKY CHECKOUT BAR — Override aggressive rules === */
  .mobile-checkout-bar {
    padding: 0.5rem 0.875rem !important;
    min-height: auto !important;
    min-width: auto !important;
    bottom: 76px !important;
    z-index: 1035 !important;
  }

  .mobile-checkout-bar .checkout-bar-btn {
    padding: 0.625rem 1rem !important;
    min-height: auto !important;
    min-width: auto !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    box-shadow: 0 3px 12px rgba(249, 115, 22, 0.25) !important;
    font-size: 0.8rem !important;
    border-radius: 0.625rem !important;
  }

  /* Stepper improvements */
  .checkout-stepper,
  .payment-stepper,
  [class*="stepper"] {
    padding: 1rem 0.5rem !important;
    gap: 0.5rem !important;
  }

  .checkout-stepper .step,
  .payment-stepper .step,
  [class*="stepper"] [class*="step"] {
    font-size: 0.75rem !important;
    padding: 0.5rem !important;
    min-width: 80px !important;
  }

  .checkout-stepper .step-number,
  .payment-stepper .step-number {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.85rem !important;
  }

  .checkout-stepper .step-label,
  .payment-stepper .step-label {
    font-size: 0.7rem !important;
    margin-top: 0.25rem !important;
  }

  /* Fix cart/checkout forms — exclude sticky bar inputs */
  form input:not(.mobile-checkout-bar input),
  form select:not(.mobile-checkout-bar select),
  form textarea:not(.mobile-checkout-bar textarea) {
    min-height: 48px !important;
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 0.75rem 1rem !important;
  }

  /* Fix modal buttons (sepet modalı etc.) */
  .modal-footer .btn,
  .modal .btn {
    min-height: 48px !important;
    min-width: 120px !important;
  }
}

/* 2. Mobile-specific spacing for main content */
@media (max-width: 991px) {
  main,
  .main-content,
  #app main {
    padding-bottom: 100px !important;
  }

  /* Shop/Product listing pages */
  .shop-container,
  .products-container,
  [class*="product"][class*="grid"] {
    padding-bottom: 100px !important;
  }

  /* Individual product details pages */
  .product-detail,
  .product-show,
  [class*="product-detail"] {
    padding-bottom: 120px !important;
  }
}

/* 3. Fix overlapping footer on mobile */
@media (max-width: 991px) {
  footer,
  .footer,
  [role="contentinfo"] {
    margin-bottom: 80px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* 4. Enhance button visibility and interaction */
@media (max-width: 991px) {
  /* Orange action buttons - primary CTA */
  .btn-primary,
  .btn-orange,
  [class*="btn-buy"],
  [class*="add-cart"] {
    background: #f39321 !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(243, 147, 33, 0.3) !important;
    border: none !important;
    transition: all 0.2s ease !important;
  }

  .btn-primary:active,
  .btn-orange:active,
  [class*="btn-buy"]:active,
  [class*="add-cart"]:active {
    transform: scale(0.96) !important;
    box-shadow: 0 2px 6px rgba(243, 147, 33, 0.4) !important;
  }

  /* Icon buttons - better tap target */
  .btn-icon,
  [class*="icon-button"],
  button[class*="icon"] {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* 5. Ensure z-index hierarchy */
@media (max-width: 991px) {
  /* Bottom nav should be topmost */
  #mobile-bottom-nav {
    z-index: 1040 !important;
  }

  body.modal-open #mobile-bottom-nav {
    z-index: 1020 !important;
    pointer-events: none !important;
  }

  /* Backdrops below bottom nav; do not catch decorative card overlays. */
  .modal-backdrop,
  .offcanvas-backdrop {
    z-index: 1030 !important;
  }

  /* Modals/sheets below bottom nav but above backdrop */
  .modal,
  [class*="bottom-sheet"],
  [class*="drawer"] {
    z-index: 1035 !important;
  }

  /* Sticky elements below modals */
  .sticky-top,
  [class*="sticky"] {
    z-index: 1020 !important;
  }

  /* Regular content */
  main,
  section,
  article {
    z-index: 1 !important;
  }
}