/* ASYUT AQAR — phone layout that behaves like an app (2026-11-10).
   Phones only (≤560px); the desktop and tablet layouts are untouched. Display changes only — no content removed.
   Rollback: remove the <link> to this file. */
@media (max-width: 560px) {
  /* 1) Header: kept as is (logo, buttons, 3-column menu) — the owner prefers it */
  /* 2) Type scale like an app */
  body.page-home main h1 { font-size: 27px !important; line-height: 1.35 !important; }
  body.page-home main h2 { font-size: 21px !important; line-height: 1.45 !important; }
  body.page-home .section-heading p, body.page-home .ab-head p, body.page-home .hw-head p { font-size: 13.5px !important; line-height: 1.8 !important; }
  body.page-home .eyebrow { font-size: 12px !important; }
  body.page-home { --aa-section-y: 28px; }
  /* 3) Areas: one swipeable row */
  body .area-chips { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 7px !important; overflow: visible !important; }
  body .area-chip { flex: 0 0 auto; padding: 7px 12px !important; font-size: 12.5px !important; min-height: 0 !important; }
  /* 4) Partners: compact rows, all visible */
  body.page-home .home-partners-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  .ps-card { display: grid !important; grid-template-columns: 104px minmax(0, 1fr); }
  .ps-media { height: auto; min-height: 100%; aspect-ratio: auto; }
  .ps-tag { display: none !important; }
  .ps-body { padding: 10px 12px; gap: 3px; }
  .ps-body h3 { font-size: 15px !important; }
  .ps-body p { font-size: 12.5px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ps-body .ps-book { width: auto !important; align-self: flex-start; min-height: 0 !important; padding: 6px 14px !important; font-size: 12.5px !important; margin-top: 4px !important; }
  body.page-home .home-partners-cta { min-height: 36px !important; padding: 7px 14px !important; font-size: 12.5px !important; }
  /* 5) Sections hub: app icon grid */
  body .home-hub-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px 8px !important; }
  body .home-hub-card { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; text-align: center !important; align-items: center !important; display: flex !important; flex-direction: column; gap: 6px !important; min-height: 0 !important; }
  body .home-hub-card small { display: none !important; }
  body .home-hub-card b { font-size: 12px !important; line-height: 1.4 !important; }
  body .home-hub-icon { width: 54px !important; height: 54px !important; border-radius: 18px !important; font-size: 22px !important; margin: 0 !important; }
  /* 6) About: swipe the parties, compact values */
  .ab-head h2 { font-size: 22px !important; }
  .ab-mission { padding: 18px !important; border-radius: 20px !important; }
  .ab-mission h3 { font-size: 18px !important; margin-top: 8px !important; }
  .ab-mission p { font-size: 13.5px !important; }
  .ab-parties { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  .ab-party { display: block !important; padding: 12px !important; border-radius: 16px !important; }
  .ab-party .ab-icon { width: 36px; height: 36px; margin-bottom: 8px; }
  .ab-party .cx-ico { width: 18px; height: 18px; }
  .ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ab-value { display: block !important; padding: 14px !important; }
  .ab-value + .ab-value { border-top: 0 !important; }
  .ab-value:nth-child(n+3) { border-top: 1px solid var(--ab-line) !important; }
  .ab-value:nth-child(even) { border-inline-start: 1px solid var(--ab-line) !important; }
  .ab-value .ab-icon { width: 38px; height: 38px; }
  .ab-value strong { margin: 8px 0 2px !important; font-size: 15px !important; }
  .ab-value p, .ab-party p { font-size: 12.5px !important; line-height: 1.7 !important; }
  .ab-party strong { font-size: 15px !important; }
  /* 7) Launch + how: tighter */
  body .launch-campaign h2 { font-size: 21px !important; }
  .hw-head h2 { font-size: 22px !important; }
  .hw-panel { padding: 18px !important; border-radius: 20px !important; }
  /* 8) Quiet first screen: the assistant waits as an icon, install offer sits above the tab bar */

  /* 9) Home hero: shorter photo so the search shows sooner */
  body .hero.design-hero::before { height: 210px !important; }
  body .hero.design-hero .design-hero-content { padding-top: 140px !important; }
  body .hero.design-hero .design-hero-sub { font-size: 13.5px !important; line-height: 1.8 !important; }
  body .hero.design-hero .design-hero-lead { font-size: 16px !important; }

  /* 10) Every page: one type scale */
  body main h1 { font-size: 26px !important; line-height: 1.4 !important; }
  body main h1 > span { font-size: .85em !important; }
  body .section-heading h2, body main > section > h2, body .page-hero h2, body .info-hero h2,
  body .section-heading h1 { font-size: 21px !important; line-height: 1.45 !important; }
  body .page-hero p, body .info-hero p, body .companies-hero p, body .directory-hero p { font-size: 14px !important; line-height: 1.85 !important; }
  body .page-hero, body .info-hero { padding-block: 26px 22px !important; }

  /* 13) Info pages (about, advertise, guide, terms, privacy): same compact bar */
  body .info-topbar { display: flex !important; flex-direction: column; align-items: stretch !important; min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; gap: 8px !important; padding: 10px 14px 8px !important; }
  body .info-topbar .info-brand img { height: 34px !important; width: auto !important; }
  body .info-topbar nav { min-width: 0; width: 100%; box-sizing: border-box; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important; margin: 0 !important; padding: 0 !important; }
  body .info-topbar nav a { min-width: 0; padding: 8px 4px !important; font-size: 13px !important; border-radius: 12px; background: rgba(255,248,240,.08); white-space: nowrap; text-align: center; }
  body .info-hero h1, body main .info-hero h1 { font-size: 25px !important; }

  /* 14) Nothing may run past the screen edge: long titles and words wrap, media and tables shrink */
  html, body { max-width: 100%; overflow-x: clip; }
  body main h1, body main h2, body main h3, body .page-hero *, body .info-hero * { overflow-wrap: anywhere; word-break: normal; max-width: 100%; }
  body main img, body main video, body main iframe, body main canvas { max-width: 100%; }
  body main table { max-width: 100%; }

  /* 15) Category chips wrap instead of sliding sideways */
  body .mk-chips, body .chip-row, body .filter-chips, body .featured-hero-tabs { display: flex !important; flex-wrap: wrap !important; overflow: visible !important; white-space: normal !important; gap: 7px !important; }
  body .mk-chip { flex: 0 0 auto !important; font-size: 12.5px !important; padding: 7px 12px !important; }
}

/* ===== «تطبيق أسيوط عقار» install bar (2026-11-11) =====
   Phones: a slim bar at the very top of the page, like the browsers' own app suggestion; it scrolls away with the page. */
@media (max-width: 700px) {
  body .install-app-banner:not([hidden]) {
    position: relative !important; inset: auto !important; z-index: 5;
    display: flex !important; align-items: center; gap: 10px !important;
    width: auto !important; max-width: none !important; margin: 0 !important;
    padding: 10px 12px !important; border-radius: 0 !important;
    background: #FFF8F0 !important; border: 0 !important; border-bottom: 1px solid #EADBCB !important; box-shadow: none !important;
  }
  body .install-app-banner .install-dismiss { order: 0; width: 26px; height: 26px; padding: 0 !important; display: grid; place-items: center; font-size: 20px !important; color: #9F8D7C !important; }
  body .install-app-banner .install-app-icon { order: 1; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 2px 8px rgba(43,33,27,.18); }
  body .install-app-banner > span { order: 2; flex: 1; min-width: 0; display: grid; line-height: 1.45; }
  body .install-app-banner strong { font-size: 14px !important; color: #2B211B !important; }
  body .install-app-banner small { font-size: 11.5px !important; color: #75604F !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body .install-app-banner #installAppBtn { order: 3; flex: 0 0 auto; min-height: 34px !important; padding: 6px 18px !important; border-radius: 999px !important; font-size: 13px !important; width: auto !important; }
}
/* Desktop keeps its small toast; the icon just sits beside the text */
@media (min-width: 701px) {
  body .install-app-banner .install-app-icon { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px; }
}

/* iPhone / browser-menu guide */
.install-guide { width: min(420px, calc(100% - 32px)); padding: 22px; border: 0; border-radius: 22px; background: #FFFCF8; color: #2B211B; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.install-guide::backdrop { background: rgba(36,27,22,.55); }
.install-guide-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.install-guide-head img { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 2px 8px rgba(43,33,27,.18); }
.install-guide h2 { margin: 0 0 2px; font-size: 17px; }
.install-guide p { margin: 0; color: #75604F; font-size: 13px; line-height: 1.7; }
.install-guide ol { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: s; }
.install-guide li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #EFE4D9; font-size: 14px; line-height: 1.7; }
.install-guide-ico { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #F6ECE3; color: #9A5A3C; font-size: 20px; font-weight: 800; }
.install-guide-ico svg { width: 20px; height: 20px; }
.install-guide .btn { width: 100%; justify-content: center; }

/* Footer: permanent «ثبّت التطبيق» link */
body footer.footer-pro p.fp-install-row { margin: 4px 0 0 !important; }
body footer.footer-pro .fp-install { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  color: #F3ECE1 !important; background: rgba(255,248,240,.06); border: 1px solid rgba(233,176,143,.3); font: inherit; font-size: 13.5px; font-weight: 700; }
body footer.footer-pro .fp-install svg { width: 18px; height: 18px; color: #E9B08F; }
body footer.footer-pro .fp-install:hover { background: rgba(233,176,143,.14); }
body footer.footer-pro p.fp-install-row { grid-column: 1 / -1; }
body footer.footer-pro .fp-install { white-space: nowrap; }
body footer.footer-pro .fp-install svg { flex: 0 0 18px; }