/* Phone-browser compatibility — loaded last. Keeps the site right on older iPhones (iOS 12–15 Safari) and older
   Android browsers (Chrome < 111, Samsung Internet, in-app browsers of Facebook/Instagram/TikTok). */

/* Taps: no grey flash, no double-tap zoom delay */
a, button, label, summary, select, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* iPhone zooms into any field with text under 16px — keep form text at 16px on touch screens */
@media (max-width: 900px), (pointer: coarse) {
  input, select, textarea, .search input, .sort-box select, .f-range input { font-size: 16px; }
}

/* Long words / URLs / model codes never push the page sideways */
.prose, .article, .card-name, .ph-info h1, .spec-row, .news-body, td, th { overflow-wrap: anywhere; word-break: normal; }

/* color-mix() → iOS < 16.2, Chrome < 111: plain colours instead of a see-through header */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .top { background: var(--surface); }
  .tabs { background: var(--bg); }
  .search input:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
  .thumb.on, .thumb:hover { box-shadow: 0 0 0 2px rgba(37, 99, 235, .35); }
}

/* aspect-ratio → iOS < 15: square / 16:9 boxes via the padding trick, so photos don't collapse */
@supports not (aspect-ratio: 1 / 1) {
  .card-img, .ph-stage, .cmp-img { position: relative; height: 0 !important; padding: 0 0 100% 0 !important; }
  .news-cover { height: 0; padding-bottom: 56.25%; }
  .card-img > *, .ph-stage > *, .cmp-img > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .news-cover > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .ph-video { height: 0; padding-bottom: 177.8%; }
}

/* Filter sheet (phones page): real visible height on iPhone (the address bar eats 100vh) + home-bar space */
@media (max-width: 900px) {
  .filters { top: auto; right: 0; bottom: 0; left: 0; max-height: 82vh; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  body.sheet-open::after { top: 0; right: 0; bottom: 0; left: 0; }
  body.sheet-open { overflow: hidden; }
}
@supports (height: 1dvh) {
  @media (max-width: 900px) { .filters { max-height: 82dvh; } }
}

/* Horizontal rails / tabs / tables scroll smoothly with a finger and don't drag the page */
.rail, .tabs, .cmp-table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* Very small phones (iPhone SE 1st gen, small Androids — 320px) */
@media (max-width: 360px) {
  .wrap { padding: 0 12px; }
  .grid { gap: 10px; }
  .card-body { padding: 8px 10px 12px; }
  .logo-text { font-size: .98rem; }
  .lang-switch { padding: 6px 10px; }
  .cmp-table th, .cmp-table td { padding: 8px 6px; font-size: .8rem; }
}

/* Landscape phones with a notch: keep content out from under it */
@media (orientation: landscape) and (max-height: 500px) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}

/* Placeholder may be smaller than the 16px field text (iOS zoom only looks at the field) — fits "مثلاً Galaxy A57" at 320px */
@media (max-width: 420px) { input::placeholder { font-size: 13.5px; } input { text-overflow: ellipsis; } }