/* =========================================================
   mobile-compat.css — PHASE 25
   Cross-browser + mobile polish (no feature changes)
   ========================================================= */

/* Prevent accidental horizontal scroll */
html {
  overflow-x: clip;
}
body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* iOS: avoid auto-zoom on focus (font-size < 16px) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Touch targets — interactive controls */
@media (max-width: 768px) {
  .product-cta-btn,
  .pp-add-cart-btn,
  .pp-order-telegram-btn,
  .pp-mobile-cta button,
  .adm-btn,
  .adm-btn-primary,
  .page-btn,
  .mobile-nav-item,
  .wishlist-btn,
  .compare-btn,
  button.action-btn,
  .nav-link,
  .filter-chip,
  .filter-chip-option {
    min-height: 44px;
    min-width: 44px;
  }

  /* Icon-only buttons still tappable */
  .wishlist-btn,
  .product-icon-btn,
  .quick-view-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Product mobile sticky CTA — safe area + stacking */
.pp-mobile-cta {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  z-index: 900;
  box-sizing: border-box;
}
.pp-mobile-cta button {
  flex: 1;
  min-height: 48px;
  font-size: 0.95rem;
  touch-action: manipulation;
}

/* Order modal — full usable on small screens */
.pp-order-modal {
  padding: max(0.75rem, env(safe-area-inset-top, 0px)) 0.75rem
    max(0.75rem, env(safe-area-inset-bottom, 0px));
  align-items: flex-end;
}
@media (min-width: 480px) {
  .pp-order-modal {
    align-items: center;
  }
}
.pp-order-modal .pp-order-card,
.pp-order-modal-card {
  width: 100%;
  max-width: 420px;
  max-height: min(90vh, 640px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Product grid: single column very small phones */
@media (max-width: 360px) {
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem;
  }
  .product-card .product-cta-btn .btn-label {
    font-size: 0.8rem;
  }
}

/* Avoid content hidden under mobile CTA */
@media (max-width: 768px) {
  body.pp-has-mobile-cta,
  .pp-page {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .product-card {
    min-width: 0;
  }
  .product-card .product-content {
    min-width: 0;
  }
  .product-card h3,
  .product-card .product-title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Compare table: contained horizontal scroll only */
.cmp-table-wrap,
.compare-table-wrap,
.adm-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.cmp-table-wrap table,
.compare-table-wrap table {
  min-width: 520px;
}

/* Admin drawer already present — ensure content doesn't overflow */
@media (max-width: 800px) {
  .adm-main {
    min-width: 0;
    max-width: 100vw;
  }
  .adm-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .adm-toolbar input,
  .adm-toolbar select {
    width: 100%;
    min-width: 0;
  }
}

/* Header / nav: prevent logo+actions overflow */
@media (max-width: 480px) {
  .top-bar,
  .navbar,
  .header-inner {
    gap: 0.35rem;
  }
  .logo img,
  .nav-logo img {
    max-height: 36px;
    width: auto;
  }
}

/* Forms full width on mobile */
@media (max-width: 768px) {
  .auth-form,
  .adm-login-card,
  .pp-review-form-card,
  .acc-form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .auth-form input,
  .adm-field input,
  .adm-field select,
  .adm-field textarea {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Tap highlight / manipulation */
a, button {
  -webkit-tap-highlight-color: rgba(45, 106, 79, 0.15);
  touch-action: manipulation;
}

/* Firefox flex min-size fix */
.products-grid > *,
.pp-related-grid > * {
  min-width: 0;
}

/* Safari sticky + backdrop fallback */
@supports not (backdrop-filter: blur(8px)) {
  .mobile-nav-menu,
  .pp-mobile-cta,
  .compare-bar-mobile {
    background: #fff;
  }
}

/* Landscape phones: reduce hero height pressure */
@media (max-height: 430px) and (orientation: landscape) {
  .hero,
  .hero-section {
    min-height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .preloader {
    display: none !important;
  }
}

/* Reduced motion already in style.css Phase 21 — reinforce */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Phase 21 — additional mobile / responsive harden
   ========================================================= */

/* Long Persian/English strings and URLs */
.product-card .product-title,
.product-card h3,
.pp-title,
.cmp-table td,
.article-body {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Large desktop: keep content readable */
@media (min-width: 1440px) {
  .container {
    max-width: 1280px;
  }
}

/* Admin / compare tables: controlled horizontal scroll only */
@media (max-width: 900px) {
  .adm-table-wrap,
  .cmp-table-scroll,
  .compare-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Filter drawer full-height mobile */
@media (max-width: 768px) {
  .filter-drawer,
  .filters-drawer,
  .mobile-filter-sheet {
    max-height: min(92vh, 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Order / auth buttons full width on narrow screens */
@media (max-width: 420px) {
  .pp-order-card .pp-order-submit,
  .auth-form button[type="submit"],
  .pp-mobile-cta {
    width: 100%;
  }
}