/* ===============================================================
   IMOTIMO MOBILE FIX v11 -- 2026-10-09
   Applies ONLY on <= 700px; desktop styling remains unchanged.
   Loaded AFTER index.php inline CSS to resolve conflicting rules.
   Requires the index.php included with v11 package.
   =============================================================== */
.im-mobile-menu-toggle { display: none; }

@media (max-width:700px) {
  html,body { width:100%; max-width:100%; overflow-x:clip; }
  body.imx-page .wrap { box-sizing:border-box; width:100%; max-width:100%; padding-inline:12px; }

  /* Compact logo + language + accessible toggle */
  body.imx-page header .bar {
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    grid-template-areas:"logo lang menu" "nav nav nav" !important;
    align-items:center !important;
    gap:10px 9px !important;
    min-height:0 !important;
    margin-top:10px;
    padding:11px !important;
    border:1px solid rgba(255,255,255,.65);
    border-radius:18px;
    background:rgba(255,255,255,.42);
    -webkit-backdrop-filter:blur(10px) saturate(120%);
    backdrop-filter:blur(10px) saturate(120%);
    box-shadow:0 8px 22px rgba(20,48,90,.13);
  }
  body.imx-page header .logo { grid-area:logo; min-width:0; }
  body.imx-page header .logo img { display:block; width:auto; height:40px; max-width:70px; }
  body.imx-page header .bar > form {
    grid-area:lang; min-width:0; width:100%; max-width:210px;
    margin:0 !important; justify-self:end;
  }
  body.imx-page header .bar > form select {
    display:block; width:100%; min-width:0; max-width:100%;
    height:44px; font-size:16px !important; padding:7px 10px !important;
    color:#213a59;
  }
  body.imx-page .im-mobile-menu-toggle {
    display:inline-flex !important; grid-area:menu; align-items:center; justify-content:center;
    gap:6px; min-width:78px; min-height:44px; padding:9px 10px;
    border:0; border-radius:11px; color:#fff; background:#1978e6;
    font:700 13px/1.2 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    cursor:pointer;
  }
  body.imx-page .im-mobile-menu-toggle .im-mobile-menu-icon { font-size:17px; }
  body.imx-page .im-mobile-menu-toggle:focus-visible { outline:3px solid #f9cf20; outline-offset:2px; }

  /* Always show 3 quick actions; rest open only on request */
  body.imx-page header .nav {
    grid-area:nav; display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px !important; padding:0 !important; margin:0 !important;
    width:100%; min-width:0;
  }
  body.imx-page header .nav > .btn {
    display:none !important;
    align-items:center; justify-content:center;
    flex:none !important; box-sizing:border-box !important;
    width:100% !important; min-width:0 !important; max-width:100% !important;
    min-height:44px; margin:0 !important;
    padding:8px 4px !important;
    font-size:12px !important; font-weight:750; line-height:1.25;
    white-space:normal !important; overflow-wrap:anywhere;
    text-align:center; border-radius:10px;
  }
  body.imx-page header .nav > .btn:nth-child(-n+3) { display:flex !important; }
  body.imx-page header .nav.is-open { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.imx-page header .nav.is-open > .btn { display:flex !important; }

  /* Search box, price/area pairs, and no right-side clipping */
  body.imx-page main.wrap { margin-top:10px; margin-bottom:22px; }
  body.imx-page .main-grid {
    display:grid !important; grid-template-columns:minmax(0,1fr) !important;
    width:100%; min-width:0; gap:12px !important; margin:12px 0 16px;
  }
  body.imx-page .main-grid > section,
  body.imx-page .main-grid > aside { min-width:0 !important; width:100%; }
  body.imx-page #smartSearch { width:100%; min-width:0; padding:13px !important; }
  body.imx-page #smartSearch .sc-row {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:9px !important;
    row-gap:9px !important;
    margin-bottom:9px;
  }
  body.imx-page #smartSearch .sc-row > .sc-field { min-width:0 !important; }
  body.imx-page #smartSearch .sc-row > .sc-field:nth-child(3) { grid-column:1 / -1; }
  body.imx-page #smartSearch .sc-label { font-size:12px; line-height:1.35; margin-bottom:5px; }
  body.imx-page #smartSearch .sc-input,
  body.imx-page #smartSearch .sc-select {
    display:block; box-sizing:border-box;
    width:100%; min-width:0; max-width:100%;
    height:44px; line-height:normal;
    font-size:16px !important;
  }
  body.imx-page #smartSearch > div[style*="display:flex"] {
    display:flex !important; flex-wrap:wrap; align-items:stretch !important;
    gap:8px !important;
  }
  body.imx-page #smartSearch .sc-toggle {
    justify-content:center; width:100%; min-height:42px;
    margin:0; text-align:center; font-size:13px;
  }
  body.imx-page #smartSearch .sc-actions {
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px !important; width:100%; margin:0; min-width:0;
    flex-direction:row !important;
  }
  body.imx-page #smartSearch .sc-actions button {
    box-sizing:border-box; width:100% !important; min-height:42px; margin:0;
    padding:9px 8px; font-size:14px;
  }

  body.imx-page .ticker-card { padding:11px !important; }
  body.imx-page #priceTickerText { font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
  body.imx-page #map { width:100%; max-width:100%; height:290px; }
  body.imx-page .iml-sidebar { width:100%; min-width:0; padding:13px !important; }
  body.imx-page .iml-sidebar > h2 { font-size:1.17rem !important; }
  body.imx-page .iml-property { max-width:100%; min-width:0; }
  body.imx-page .iml-property .iml-content { min-width:0; }
  body.imx-page .iml-property .iml-actions .iml-btn {
    box-sizing:border-box; flex:1 1 calc(50% - 7px);
    min-width:0; font-size:12px; min-height:42px;
  }
  body.imx-page .iml-property .iml-meta { overflow-wrap:anywhere; }
}

/* Very narrow devices; avoid tiny multi-column values. */
@media (max-width:355px) {
  body.imx-page header .nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.imx-page header .nav > .btn:nth-child(3) { grid-column:1 / -1; }
  body.imx-page header .nav.is-open > .btn:nth-child(3) { grid-column:auto; }
  body.imx-page header .bar > form select { font-size:14px !important; }
}