/* ============================================================ amk-mobile-final.css (v2 — 2x3 grids, fixed FAB, smaller nav, header image) ============================================================ Replaces previous amk-mobile-final.css content. Stays enqueued LAST (after unified-cards.css) — load order already configured in functions.php. ============================================================ */ /* ============================================================ SAFETY — never let an ancestor transform break position:fixed. `position:fixed` is positioned relative to the viewport ONLY if no ancestor uses `transform`, `filter`, `perspective`, or `will-change: transform`. If any do, the element becomes "fixed relative to that ancestor" — which is why the floating post button stopped scrolling with the page. ============================================================ */ html, body { transform: none !important; perspective: none !important; filter: none !important; will-change: auto !important; } /* Common page wrappers that themes wrap content in */ #page, #main, .site, .site-content, main, article, .entry-content, .page-content { transform: none !important; filter: none !important; perspective: none !important; } /* ============================================================ MOBILE (≤768px) ============================================================ */ @media (max-width: 768px) { /* ────────────────────────────────────────────────────── 1. HIDE DESKTOP HEADER, SHOW MOBILE HEADER IMAGE ────────────────────────────────────────────────────── */ .amk-mobile-header { display: block !important; width: 100%; margin: 0; padding: 0; line-height: 0; background: #020814; } .amk-mobile-header img { display: block; width: 100%; height: auto; max-width: 100%; } /* ────────────────────────────────────────────────────── 2. ALL CARD GRIDS → 2 columns (3 rows happens automatically because JS now caps to 6 cards per page, so 6/2 = 3 rows.) ────────────────────────────────────────────────────── */ div.amk-grid, div.amk-grid.amk-cols-1, div.amk-grid.amk-cols-2, div.amk-grid.amk-cols-3, div.amk-grid.amk-cols-4, div.amk-grid.amk-cols-5, div.amk-grid.amk-cols-6, .amk-jobs-grid, .amk-matrimonial-grid, .mat-grid, .jobs-grid, .bride-grid, .groom-grid, .hiring-grid, .seeking-grid, .matrimonial-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 10px !important; box-sizing: border-box !important; justify-content: center !important; justify-items: stretch !important; float: none !important; } div.amk-grid > *, .amk-jobs-grid > *, .amk-matrimonial-grid > *, .mat-grid > *, .jobs-grid > *, .bride-grid > *, .groom-grid > *, .hiring-grid > *, .seeking-grid > *, .matrimonial-grid > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; float: none !important; box-sizing: border-box !important; } /* Classified cards → match job-card portrait shape */ .amk-card { position: relative !important; overflow: hidden !important; aspect-ratio: 3 / 4 !important; min-height: 320px !important; border-radius: 14px !important; background-color: #0e1726 !important; } .amk-card .amk-card__inner { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; perspective: none !important; border-radius: 14px !important; overflow: hidden !important; } .amk-card .amk-card__media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; z-index: 1 !important; } .amk-card .amk-card__content { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 12px 12px 14px !important; z-index: 2 !important; color: #fff !important; background: linear-gradient( to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.30) 75%, rgba(0,0,0,0) 100% ) !important; } .amk-card .amk-card__title { font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 0 4px !important; color: #fff !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .amk-card .amk-card__price { font-size: 14px !important; font-weight: 800 !important; color: #ff5050 !important; margin: 2px 0 4px !important; } .amk-card .amk-card__meta, .amk-card .amk-card__address { font-size: 11px !important; color: #f0f4ff !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .job-card { aspect-ratio: 3 / 4 !important; min-height: 320px !important; } /* ────────────────────────────────────────────────────── 3. PAGINATION — make sure JS pagination is visible The server pagination below grids should be hidden on mobile (JS replaces it with 6-per-page navigation). ────────────────────────────────────────────────────── */ nav.amk-pagination:not(.amk-pagination--js) { display: none !important; } .amk-pagination.amk-pagination--js { display: flex !important; width: 100% !important; margin: 14px 0 22px !important; padding: 0 10px !important; justify-content: center !important; } .amk-pagination.amk-pagination--js ul { display: flex !important; gap: 6px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; flex-wrap: wrap !important; justify-content: center !important; } .amk-pagination.amk-pagination--js a, .amk-pagination.amk-pagination--js .amk-pagination__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,0.15) !important; background: rgba(255,255,255,0.04) !important; color: #e6edf6 !important; text-decoration: none !important; font-size: 14px !important; font-weight: 600 !important; } .amk-pagination.amk-pagination--js .current { background: #00e0ff !important; border-color: #00e0ff !important; color: #000 !important; } .amk-pagination.amk-pagination--js .disabled { opacity: 0.35 !important; pointer-events: none !important; } /* ────────────────────────────────────────────────────── 4. BOTTOM NAV — smaller font, perfect emoji alignment ────────────────────────────────────────────────────── */ /* duplicate cleanup */ /* The emoji line */ /* BOTTOM-NAV CSS REMOVED — single source is functions.php */ /* The label line — SMALLER as requested */ /* BOTTOM-NAV CSS REMOVED — single source is functions.php */ /* Active tab */ /* duplicate cleanup */ /* Notification badge on Messages — hidden until JS sets a real count */ /* duplicate cleanup */ /* Body padding-bottom so content doesn't sit under fixed nav */ body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important; } /* ────────────────────────────────────────────────────── 5. FLOATING "+ POST FREE" — fixed, scrolls with viewport Sits just above the bottom-nav. ────────────────────────────────────────────────────── */ .floating-post-btn, .fab-post { position: fixed !important; right: 12px !important; left: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 76px) !important; width: auto !important; height: auto !important; padding: 8px 14px !important; border-radius: 22px !important; line-height: 1 !important; margin: 0 !important; background: #00e0ff !important; color: #000 !important; text-decoration: none !important; box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; z-index: 10000 !important; font-size: 0 !important; /* hide the ➕ emoji text */ transform: none !important; /* prevent any transition glitch */ } .floating-post-btn::before, .fab-post::before { content: "+ Post Free" !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; color: #000 !important; line-height: 1 !important; } .floating-post-btn::after, .fab-post::after { content: none !important; } /* ────────────────────────────────────────────────────── 6. PROFILE POPUP — keep above nav ────────────────────────────────────────────────────── */ .profile-popup { position: fixed !important; right: 10px !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important; background: #111 !important; padding: 6px !important; border-radius: 10px !important; z-index: 10001 !important; min-width: 160px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important; border: 1px solid rgba(255,255,255,0.08) !important; } .profile-popup a { display: block !important; color: #fff !important; padding: 10px 14px !important; text-decoration: none !important; border-radius: 6px !important; font-size: 14px !important; } /* ────────────────────────────────────────────────────── 7. PARENT WRAPPER NEUTRALIZERS ────────────────────────────────────────────────────── */ .entry-content, .page-content, .site-content, .site-main, main, article, .elementor-widget-container, .elementor-column, .wp-block-column, .vc_column-inner { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; float: none !important; } h2, body h2:has(+ .amk-grid.amk-cols-5), body h2:has(+ .amk-grid.amk-cols-6) { display: block !important; text-align: center !important; margin: 16px auto !important; width: auto !important; max-width: 100% !important; }/* MARQUEE CSS REMOVED — single source is functions.php */ } /* ============================================================ DESKTOP — hide mobile header, hide bottom nav etc. ============================================================ */ @media (min-width: 769px) { .amk-mobile-header { display: none !important; } /* BOTTOM-NAV CSS REMOVED — single source is functions.php */ .amk-card { aspect-ratio: auto; } } /* ============================================================ CHECKBOX VISIBILITY (carry-over from previous fix) ============================================================ */ input[type="checkbox"] { background-color: rgba(0, 0, 0, 0.4) !important; -webkit-appearance: none !important; appearance: none !important; } input[type="checkbox"]:checked, .amk-terms-check input[type="checkbox"]:checked { background: linear-gradient(135deg, #3fd3ff, #4d8ce2) !important; background-color: transparent !important; border-color: #7ff0ff !important; box-shadow: 0 0 12px rgba(63, 211, 255, 0.55) !important; } .amk-terms-check input[type="checkbox"]:checked::after { content: "" !important; position: absolute !important; left: 6px !important; top: 2px !important; width: 5px !important; height: 10px !important; border: solid #fff !important; border-width: 0 2.5px 2.5px 0 !important; transform: rotate(45deg) !important; background: transparent !important; } input[type="radio"] { -webkit-appearance: radio !important; appearance: radio !important; background-color: initial !important; accent-color: #3fd3ff !important; } /* ============================================================ ▸▸▸ APPEND TO END OF amk-mobile-final.css ▸▸▸ Fixes for the 4 issues just reported: 1. Mobile header image showing on desktop too 2. Profile menu link (handled in JS — uses AMK_AUTH.profileUrl) 3. Jobs page big gap + Matrimonial search row truncated 4. Hide "+ Post Free" FAB on Jobs & Matrimonial pages ============================================================ */ /* ────────────────────────────────────────────────────────── 1. MOBILE HEADER IMAGE — strict mobile-only with !important The earlier display:none in the desktop media query was being overridden by a default `.amk-mobile-header { display: block }` that wasn't scoped to mobile. Force it: hidden by default, shown ONLY when viewport ≤ 768px. ────────────────────────────────────────────────────────── */ .amk-mobile-header { display: none !important; /* default = hidden everywhere */ } @media (max-width: 768px) { .amk-mobile-header { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; background: #020814 !important; } .amk-mobile-header img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; } } /* ────────────────────────────────────────────────────────── 3a. JOBS PAGE — collapse the giant empty gap The empty gap is the page hero container that reserves ~50vh of space when the location dropdown panel is closed. Force the page sections to flow naturally. ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { body.amk-page-jobs .jobs-hero-search, body.amk-page-jobs .jobs-hero, body.amk-page-jobs .jobs-search, body.amk-page-jobs .amk-jobs-search, body.amk-page-jobs form.jobs-search { min-height: 0 !important; height: auto !important; padding: 12px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; /* tight, even spacing */ } /* Every direct field child = full width, no large gaps */ body.amk-page-jobs .jobs-hero-search > *, body.amk-page-jobs .jobs-hero > *, body.amk-page-jobs form.jobs-search > * { width: 100% !important; max-width: 100% !important; margin: 0 !important; flex: 0 0 auto !important; } /* Hide any empty spacers that reserve height */ body.amk-page-jobs .jobs-hero-search > *:empty, body.amk-page-jobs .jobs-hero > *:empty, body.amk-page-jobs *:empty[class*="spacer"], body.amk-page-jobs *:empty[class*="gap"] { display: none !important; } /* The Jobs page sub-tile menu (Dashboard / My Apps / etc) */ body.amk-page-jobs .jobs-submenu { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; padding: 10px !important; margin: 0 !important; } body.amk-page-jobs .jobs-submenu a { padding: 12px 6px !important; font-size: 11px !important; line-height: 1.2 !important; text-align: center !important; min-height: 0 !important; } /* The location-dropdown panel must NOT reserve space when closed */ body.amk-page-jobs .job-location-dropdown, body.amk-page-jobs .usa-location-dropdown { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; z-index: 50 !important; max-height: 60vh !important; overflow: auto !important; } body.amk-page-jobs .job-location-dropdown.open, body.amk-page-jobs .job-location-dropdown.is-open, body.amk-page-jobs .usa-location-dropdown.open, body.amk-page-jobs .usa-location-dropdown.is-open { display: block !important; } } /* ────────────────────────────────────────────────────────── 3b. MATRIMONIAL SEARCH — force 2×2 grid on mobile The row crammed 4 fields into one line. Truncated labels read "Name, edu / Bri / State or C / Search". Goal: 2 rows × 2 columns. ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Target ANY form/row on the matrimonial page that contains a search button — force grid 2x2 layout regardless of the wrapper's specific class name (which lives in a template we don't control). */ body.amk-page-matrimonial form, body.amk-page-matrimonial .mat-search, body.amk-page-matrimonial .matrimonial-search, body.amk-page-matrimonial .amk-mat-search, body.amk-page-matrimonial .mat-hero__search, body.amk-page-matrimonial [class*="search-row"], body.amk-page-matrimonial [class*="search-bar"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; padding: 10px !important; margin: 0 auto 14px !important; box-sizing: border-box !important; } /* Every input / select / button in those rows = full cell, readable */ body.amk-page-matrimonial form input, body.amk-page-matrimonial form select, body.amk-page-matrimonial form button, body.amk-page-matrimonial .mat-search input, body.amk-page-matrimonial .mat-search select, body.amk-page-matrimonial .mat-search button, body.amk-page-matrimonial .matrimonial-search input, body.amk-page-matrimonial .matrimonial-search select, body.amk-page-matrimonial .matrimonial-search button { width: 100% !important; min-width: 0 !important; height: 44px !important; padding: 0 12px !important; font-size: 14px !important; box-sizing: border-box !important; text-overflow: ellipsis !important; overflow: hidden !important; } /* Make the Search button stand out and span full width */ body.amk-page-matrimonial form button[type="submit"], body.amk-page-matrimonial .mat-search button[type="submit"], body.amk-page-matrimonial .matrimonial-search button[type="submit"] { background: #00e0ff !important; color: #000 !important; font-weight: 700 !important; border: none !important; } } /* ────────────────────────────────────────────────────────── 4. HIDE "+ POST FREE" FAB on Jobs / Matrimonial / Messages Each has its own post button — the global FAB is redundant and visually overlaps them. ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { body.amk-page-jobs .floating-post-btn, body.amk-page-jobs .fab-post, body.amk-page-matrimonial .floating-post-btn, body.amk-page-matrimonial .fab-post, body.amk-page-messages .floating-post-btn, body.amk-page-messages .fab-post, body.amk-page-profile .floating-post-btn, body.amk-page-profile .fab-post, body.amk-page-post .floating-post-btn, body.amk-page-post .fab-post, body.amk-page-login .floating-post-btn, body.amk-page-login .fab-post { display: none !important; } } /* ============================================================ ▸▸▸ APPEND to amk-mobile-final.css (after the v3 patches) ▸▸▸ Fixes for the 4 new issues: 1. Desktop USA map is too small — restore big size 3. Messages page conversation area on mobile — make chat fit viewport with composer (input + Send) visible ============================================================ */ /* ────────────────────────────────────────────────────────── 1. DESKTOP USA MAP — make it big again On the home page the map sits inside .amk-map-wrapper (or .usa-map-container). Earlier patches kept width:100% but the parent column may have collapsed to a narrow width. Force a generous min-height and max-width on desktop. ────────────────────────────────────────────────────────── */ @media (min-width: 769px) { .amk-map-wrapper, .usa-map-container, .amk-usa-map-section, .amk-usa__wrap { display: block !important; width: 100% !important; max-width: 1100px !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; } .amk-map-wrapper svg, .usa-map-container svg, .amk-usa-map-section svg, .amk-usa__wrap svg, svg#usa-map, svg.usa-map, svg[id*="usa"], svg[class*="usa-map"] { display: block !important; width: 100% !important; height: auto !important; max-width: 1100px !important; min-height: 520px !important; /* visible / big again */ margin: 0 auto !important; } /* Section heading above the map */ .amk-usa-map-section h2, .amk-usa-map-section h3 { text-align: center !important; margin: 24px auto 16px !important; } } /* ============================================================ ▸▸▸ APPEND TO amk-mobile-final.css ▸▸▸ This block REPLACES the earlier Messages-page rules ▸▸▸ in v4 (which made the chat 100% width — that's what ▸▸▸ the user is complaining about). ▸▸▸ ▸▸▸ Goal: a COMPACT, FIXED-SIZE chat container on mobile, ▸▸▸ NOT full screen. User list above, message log middle, ▸▸▸ composer (textarea + Send) at the bottom — all inside ▸▸▸ a bordered box with breathing room around it. ============================================================ */ @media (max-width: 768px) { /* Page wrapper — small side padding so the box doesn't touch the screen edges. */ body.amk-page-messages { overflow-x: hidden !important; padding-left: 8px !important; padding-right: 8px !important; } /* Generic page heading on /messages/ */ body.amk-page-messages > h1, body.amk-page-messages > h2, body.amk-page-messages .entry-title { font-size: 18px !important; text-align: center !important; margin: 12px 0 8px !important; } /* ════════════════════════════════════════════════════ THE CHAT BOX — fixed compact size, not 100% width ──────────────────────────────────────────────────── */ body.amk-page-messages .amk-chat, body.amk-page-messages .amk-chat__dialog, body.amk-page-messages .amk-modal__dialog { display: flex !important; flex-direction: column !important; /* COMPACT FIXED SIZE — leaves padding around the box */ width: calc(100% - 16px) !important; max-width: 360px !important; /* ← chat width cap */ height: 460px !important; /* ← chat height cap */ max-height: 70vh !important; min-height: 0 !important; margin: 12px auto 16px !important; /* centered */ padding: 0 !important; background: rgba(15, 23, 42, 0.7) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 14px !important; box-shadow: 0 8px 28px rgba(0,0,0,0.5) !important; overflow: hidden !important; box-sizing: border-box !important; top: auto !important; } /* ════════════════════════════════════════════════════ INBOX (two-column "user list + chat") on mobile Stacks: user list on top (small), chat below ──────────────────────────────────────────────────── */ body.amk-page-messages .amk-inbox { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 8px !important; width: calc(100% - 16px) !important; max-width: 360px !important; margin: 12px auto !important; padding: 0 !important; box-sizing: border-box !important; } body.amk-page-messages .amk-inbox__list { max-height: 120px !important; overflow-y: auto !important; padding: 6px !important; border-radius: 10px !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; font-size: 13px !important; } body.amk-page-messages .amk-inbox__item { padding: 8px 10px !important; font-size: 13px !important; } /* ════════════════════════════════════════════════════ CHAT HEADER (recipient name / "Chat with X") ──────────────────────────────────────────────────── */ body.amk-page-messages .amk-chat__header { flex: 0 0 auto !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 600 !important; background: rgba(255,255,255,0.04) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } /* ════════════════════════════════════════════════════ MESSAGE LOG — flex-grow, scrollable ──────────────────────────────────────────────────── */ body.amk-page-messages .amk-chat__log { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding: 8px !important; background: transparent !important; border: none !important; } body.amk-page-messages .amk-bubble { max-width: 85% !important; padding: 7px 10px !important; font-size: 13px !important; line-height: 1.35 !important; margin: 4px 0 !important; word-wrap: break-word !important; } /* ════════════════════════════════════════════════════ COMPOSER — pinned at bottom (textarea + Send) ──────────────────────────────────────────────────── */ body.amk-page-messages .amk-chat__composer { flex: 0 0 auto !important; display: grid !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto auto !important; gap: 6px !important; padding: 8px !important; background: rgba(255,255,255,0.04) !important; border-top: 1px solid rgba(255,255,255,0.08) !important; } /* Optional name row (spans both columns) */ body.amk-page-messages .amk-chat__composer #amkChatName, body.amk-page-messages .amk-chat__composer input[name="name"] { grid-column: 1 / -1 !important; height: 34px !important; padding: 0 10px !important; font-size: 13px !important; border-radius: 6px !important; } /* Textarea — fixed compact height */ body.amk-page-messages .amk-chat__composer textarea, body.amk-page-messages .amk-chat__composer input[type="text"]:not([name="name"]) { width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 8px 10px !important; font-size: 13px !important; resize: none !important; border-radius: 6px !important; box-sizing: border-box !important; } /* Send button */ body.amk-page-messages .amk-chat__composer button, body.amk-page-messages .amk-chat__composer [type="submit"] { height: 38px !important; padding: 0 14px !important; background: #00e0ff !important; color: #000 !important; font-weight: 700 !important; border: none !important; border-radius: 6px !important; font-size: 13px !important; cursor: pointer !important; white-space: nowrap !important; } } /* ============================================================ Desktop: keep messages layout untouched (don't shrink the chat on big screens). ============================================================ */ @media (min-width: 769px) { body.amk-page-messages .amk-chat, body.amk-page-messages .amk-chat__dialog, body.amk-page-messages .amk-modal__dialog { width: auto; max-width: 760px; height: auto; min-height: 420px; margin: 24px auto; } } /* ────────────────────────────────────────────────────────── 4. WP ADMIN BAR — hide for non-admins (CSS layer) Belt + suspenders: even if functions.php hook misfires, this hides the toolbar for everyone but admins. Combined with the PHP filter below, only Administrator role sees the gray bar. ────────────────────────────────────────────────────────── */ body:not(.role-administrator) #wpadminbar { display: none !important; } body:not(.role-administrator).admin-bar { margin-top: 0 !important; } body:not(.role-administrator).admin-bar html, html:not(.role-administrator-html) { margin-top: 0 !important; } /* ============================================================ ▸▸▸ APPEND TO amk-mobile-final.css ▸▸▸ v5 — fixes the two issues just reported: 1. Post Free Ad form: Seller Info fields & phone toggle all jammed in one row, each field showing only a few characters ("Jan", "666-6"). FIX: stack on mobile. 2. Messages page: still 100% width / no fixed box. FIX: wrap the whole page
in a compact card. ============================================================ */ /* ────────────────────────────────────────────────────────── 1. POST-AD FORM ON MOBILE — stack all flex rows The form has `.amk-flex-row` with `display: flex; gap: 36px` containing 3 fields side-by-side (Name | Mobile | Email). The phone-toggle JS injects ANOTHER child into the same row. On a 360px screen, 4 children × (4 × gap) = each gets ~70px. Solution: stack on mobile, full-width fields, toggle on its own line below the phone field. ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Every form row that uses .amk-flex-row OR .amk-inline-row OR .amk-row-inline becomes a single column stack. */ .amk-flex-row, .amk-inline-row, .amk-row-inline, #amkPostAdForm .amk-flex-row, #amkPostAdForm .amk-inline-row, #amkPostAdForm .amk-row-inline { display: flex !important; flex-direction: column !important; flex-wrap: wrap !important; gap: 12px !important; margin-bottom: 12px !important; width: 100% !important; padding: 0 12px !important; box-sizing: border-box !important; } /* Each column inside a row = full width */ .amk-flex-row > .amk-form__col, .amk-flex-row > .amk-form__row, .amk-inline-row > .amk-form__col, .amk-inline-row > .amk-form__row, .amk-row-inline > div, #amkPostAdForm .amk-form__col, #amkPostAdForm .amk-form__row { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* Inputs / selects / textareas inside the post form */ #amkPostAdForm input[type="text"], #amkPostAdForm input[type="tel"], #amkPostAdForm input[type="email"], #amkPostAdForm input[type="number"], #amkPostAdForm input.amk-input, #amkPostAdForm select, #amkPostAdForm .amk-input, #amkPostAdForm .amk-select, #amkPostAdForm .amk-textarea { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 44px !important; padding: 0 12px !important; font-size: 15px !important; box-sizing: border-box !important; text-overflow: clip !important; } #amkPostAdForm textarea, #amkPostAdForm .amk-textarea { height: auto !important; min-height: 90px !important; padding: 10px 12px !important; line-height: 1.4 !important; } /* Labels — readable, sit above field with small spacing */ #amkPostAdForm label { display: block !important; font-size: 13px !important; margin-bottom: 4px !important; line-height: 1.3 !important; white-space: normal !important; } /* ──────────────────────────────────────────────── Phone-toggle box: was being injected INTO the seller-info flex row. On mobile, force it onto its own line, full width, normal height. ──────────────────────────────────────────────── */ #amkShowPhoneWrap, .amk-toggle-row { display: flex !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; margin: 6px 12px 12px !important; padding: 10px 14px !important; box-sizing: border-box !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 10px !important; align-items: center !important; } #amkShowPhoneWrap .amk-toggle-label, .amk-toggle-row .amk-toggle-label { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; width: 100% !important; cursor: pointer !important; } /* Toggle visual track — keep compact */ #amkShowPhoneWrap .amk-toggle-track, .amk-toggle-row .amk-toggle-track { flex: 0 0 auto !important; width: 42px !important; height: 24px !important; } /* Text beside the toggle: name + sub on its own column */ #amkShowPhoneWrap .amk-toggle-text, .amk-toggle-row .amk-toggle-text { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } #amkShowPhoneWrap .amk-toggle-text__main, .amk-toggle-row .amk-toggle-text__main { font-size: 14px !important; font-weight: 600 !important; white-space: nowrap !important; line-height: 1.2 !important; } #amkShowPhoneWrap .amk-toggle-text__sub, .amk-toggle-row .amk-toggle-text__sub { font-size: 12px !important; color: rgba(255,255,255,0.6) !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Image uploader — readable on mobile */ #amkPostAdForm input[type="file"] { width: 100% !important; height: auto !important; padding: 10px !important; font-size: 13px !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 10px !important; background: rgba(255,255,255,0.04) !important; } /* Section title spacing */ #amkPostAdForm .amk-section__title, #amkPostAdForm h3 { font-size: 16px !important; margin: 16px 12px 8px !important; padding: 0 !important; } /* Terms checkbox row */ #amkPostAdForm .amk-terms-check { margin: 16px 12px !important; font-size: 13px !important; } /* Submit button row */ #amkPostAdForm .amk-form__actions { padding: 0 12px !important; margin-top: 14px !important; flex-wrap: wrap !important; gap: 8px !important; } #amkPostAdForm .amk-form__actions button, #amkPostAdForm .amk-form__actions .amk-btn-primary { width: 100% !important; height: 48px !important; font-size: 15px !important; } } /* ────────────────────────────────────────────────────────── 2. MESSAGES PAGE — fixed-size box on mobile The empty-state page (Image 1) has nothing matching .amk-chat / .amk-inbox in the DOM. We have to target the page's
/ .entry-content wrapper directly so the box is visible in both empty-state AND active-chat states. ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* The page
/ content area becomes the chat card */ body.amk-page-messages main, body.amk-page-messages .entry-content, body.amk-page-messages .page-content, body.amk-page-messages .site-main, body.amk-page-messages article { display: flex !important; flex-direction: column !important; /* COMPACT FIXED SIZE — visible margins around */ width: calc(100% - 24px) !important; max-width: 360px !important; height: 440px !important; max-height: 70vh !important; min-height: 320px !important; margin: 16px auto !important; padding: 0 !important; background: rgba(15, 23, 42, 0.7) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 14px !important; box-shadow: 0 8px 28px rgba(0,0,0,0.5) !important; overflow: hidden !important; box-sizing: border-box !important; } /* Inside the box, ALL children get to take full width */ body.amk-page-messages main > *, body.amk-page-messages .entry-content > *, body.amk-page-messages .page-content > *, body.amk-page-messages .site-main > *, body.amk-page-messages article > * { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Center the empty-state icon + text */ body.amk-page-messages main > div:only-child, body.amk-page-messages .entry-content > div:only-child { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 100% !important; padding: 20px !important; text-align: center !important; } /* If a chat IS active inside, behave like a flex chat */ body.amk-page-messages .amk-chat, body.amk-page-messages .amk-inbox { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Two-column inbox stacks */ body.amk-page-messages .amk-inbox { grid-template-columns: none !important; gap: 0 !important; } body.amk-page-messages .amk-inbox__list { max-height: 100px !important; overflow-y: auto !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; border-radius: 0 !important; background: rgba(255,255,255,0.03) !important; font-size: 12px !important; padding: 4px !important; flex: 0 0 auto !important; } body.amk-page-messages .amk-inbox__item { padding: 6px 10px !important; font-size: 12px !important; } /* Header */ body.amk-page-messages .amk-chat__header { flex: 0 0 auto !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 600 !important; background: rgba(255,255,255,0.04) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } /* Message log */ body.amk-page-messages .amk-chat__log { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding: 8px !important; background: transparent !important; border: none !important; } body.amk-page-messages .amk-bubble { max-width: 85% !important; padding: 7px 10px !important; font-size: 13px !important; line-height: 1.35 !important; margin: 4px 0 !important; } /* Composer pinned at bottom */ body.amk-page-messages .amk-chat__composer { flex: 0 0 auto !important; display: grid !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto auto !important; gap: 6px !important; padding: 8px !important; background: rgba(255,255,255,0.04) !important; border-top: 1px solid rgba(255,255,255,0.08) !important; } body.amk-page-messages .amk-chat__composer #amkChatName, body.amk-page-messages .amk-chat__composer input[name="name"] { grid-column: 1 / -1 !important; height: 34px !important; padding: 0 10px !important; font-size: 13px !important; } body.amk-page-messages .amk-chat__composer textarea, body.amk-page-messages .amk-chat__composer input[type="text"]:not([name="name"]) { width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 8px 10px !important; font-size: 13px !important; resize: none !important; box-sizing: border-box !important; } body.amk-page-messages .amk-chat__composer button, body.amk-page-messages .amk-chat__composer [type="submit"] { height: 38px !important; padding: 0 14px !important; background: #00e0ff !important; color: #000 !important; font-weight: 700 !important; border: none !important; border-radius: 6px !important; font-size: 13px !important; white-space: nowrap !important; } } /* Desktop guard — don't shrink anything on big screens */ @media (min-width: 769px) { body.amk-page-messages main, body.amk-page-messages .entry-content, body.amk-page-messages .page-content, body.amk-page-messages .site-main, body.amk-page-messages article { display: block; width: auto; max-width: none; height: auto; margin: 24px auto; background: transparent; border: none; box-shadow: none; } } /* ============================================================ ▸▸▸ APPEND TO amk-mobile-final.css ▸▸▸ v6 — three fixes: 1. Messages page: user list ON TOP, conversation BELOW 2. Light/dark mode: force same dark 3D look on every OS (overrides the prefers-color-scheme light variables in americanmarket.css line 87) 3. Profile button popup — works again (JS side handled by restoring id="amkProfileBtn" in functions.php) ============================================================ */ /* ────────────────────────────────────────────────────────── ISSUE 2 — FORCE DARK 3D MORPHISM ON EVERY OS / BROWSER The theme defines light-mode variables at line 87 of americanmarket.css. When iOS / Android are in light mode, those variables switch backgrounds to WHITE and text to near-black — but later !important overrides leave text white on white = invisible. Override the variables back to dark values so the WHOLE theme stays in 3D dark mode regardless of OS or browser. ────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: light) { :root { --amk-bg: #0b0f19 !important; --amk-surface: #121829 !important; --amk-border: rgba(255,255,255,0.08) !important; --amk-text: #e6e9f2 !important; --amk-muted: #a8b0c3 !important; --amk-price: #ef4444 !important; --amk-primary: #2563eb !important; --amk-primary-2:#1d4ed8 !important; --amk-accent: #10b981 !important; color-scheme: dark !important; } html, body { background: #020814 !important; color: #e6edf6 !important; } /* Inputs / form controls stay dark with white text */ input, select, textarea, button { background-color: #0e1626 !important; color: #fff !important; border-color: rgba(255,255,255,0.15) !important; -webkit-text-fill-color: #fff !important; } input::placeholder, textarea::placeholder { color: #8a93a6 !important; -webkit-text-fill-color: #8a93a6 !important; opacity: 1 !important; } /* Search hero card / glassmorphism boxes stay glass-dark */ .amk-hero3d, .amk-search, .amk-form3d, .amk-card__inner, .amk-cat__inner, .amk-card, .glass-input-box, .amk-authbox, .amk-authbox__form, .amk-modal__dialog { background-color: var(--amk-surface) !important; color: var(--amk-text) !important; border-color: rgba(255,255,255,0.08) !important; } /* Card titles / prices / metas — readable */ .amk-card__title, .amk-card__price, .amk-card__meta, .amk-card__address, .amk-card__category { color: #fff !important; } /* Generic prose / paragraphs */ p, span, label, h1, h2, h3, h4, h5, h6, li, div { color: inherit !important; } /* Headings stand out */ h1, h2, h3, h4, h5, h6 { color: var(--amk-text) !important; } /* Glow heading like BROWSE CLASSIFIEDS BY STATE */ .amk-glow-title, [class*="glow"] { color: #00e0ff !important; } } /* Same forced palette on Android dark/light edge cases */ html[data-theme="light"], html.light, body.light, body.theme-light { background: #020814 !important; color: #e6edf6 !important; } /* ────────────────────────────────────────────────────────── ISSUE 1 — MESSAGES PAGE on MOBILE USER LIST ON TOP. Click a user → conversation appears BELOW. The old layout had the empty-state chat ON TOP and the user list BELOW (and partly cut off). Reverse the visual order. ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Reset the previous "fixed compact box" rule — let main flow naturally on mobile so the inbox stacks above chat. */ body.amk-page-messages main, body.amk-page-messages .entry-content, body.amk-page-messages .page-content, body.amk-page-messages .site-main, body.amk-page-messages article { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 8px !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* If the page uses .amk-inbox (two-column layout) → stack: row 1 = inbox list, row 2 = chat */ body.amk-page-messages .amk-inbox { display: flex !important; flex-direction: column !important; gap: 10px !important; grid-template-columns: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* USER LIST = first (ON TOP), compact card */ body.amk-page-messages .amk-inbox__list { order: 1 !important; flex: 0 0 auto !important; width: 100% !important; max-height: none !important; background: rgba(15, 23, 42, 0.7) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 12px !important; padding: 6px !important; box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important; } body.amk-page-messages .amk-inbox__item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; font-size: 13px !important; border-radius: 8px !important; cursor: pointer !important; min-height: 56px !important; /* big touch target */ } body.amk-page-messages .amk-inbox__item:hover, body.amk-page-messages .amk-inbox__item:active, body.amk-page-messages .amk-inbox__item.is-active { background: rgba(0, 224, 255, 0.08) !important; } /* CHAT PANEL = second (BELOW user list), fixed compact card */ body.amk-page-messages .amk-chat { order: 2 !important; display: none !important; /* hidden until user taps an inbox item */ flex-direction: column !important; width: 100% !important; max-width: 100% !important; height: 420px !important; max-height: 65vh !important; min-height: 280px !important; margin: 0 !important; padding: 0 !important; background: rgba(15, 23, 42, 0.7) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 12px !important; box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important; overflow: hidden !important; box-sizing: border-box !important; } /* Reveal chat panel when a conversation is active */ body.amk-page-messages.has-active-chat .amk-chat { display: flex !important; } /* When chat is active on mobile, hide the inbox list so it's not squished */ body.amk-page-messages.has-active-chat .amk-inbox__list { display: none !important; } /* If no .amk-inbox, just the chat itself — same dimensions */ body.amk-page-messages > .amk-chat { margin: 8px auto !important; max-width: 100% !important; } /* Header */ body.amk-page-messages .amk-chat__header { flex: 0 0 auto !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 600 !important; background: rgba(255,255,255,0.04) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } /* Message log */ body.amk-page-messages .amk-chat__log { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding: 8px !important; background: transparent !important; border: none !important; } body.amk-page-messages .amk-bubble { max-width: 85% !important; padding: 7px 10px !important; font-size: 13px !important; line-height: 1.35 !important; margin: 4px 0 !important; } /* Composer pinned bottom */ body.amk-page-messages .amk-chat__composer { flex: 0 0 auto !important; display: grid !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto auto !important; gap: 6px !important; padding: 8px !important; background: rgba(255,255,255,0.04) !important; border-top: 1px solid rgba(255,255,255,0.08) !important; } body.amk-page-messages .amk-chat__composer #amkChatName, body.amk-page-messages .amk-chat__composer input[name="name"] { grid-column: 1 / -1 !important; height: 34px !important; padding: 0 10px !important; font-size: 13px !important; } body.amk-page-messages .amk-chat__composer textarea, body.amk-page-messages .amk-chat__composer input[type="text"]:not([name="name"]) { width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 8px 10px !important; font-size: 13px !important; resize: none !important; box-sizing: border-box !important; } body.amk-page-messages .amk-chat__composer button, body.amk-page-messages .amk-chat__composer [type="submit"] { height: 38px !important; padding: 0 14px !important; background: #00e0ff !important; color: #000 !important; font-weight: 700 !important; border: none !important; border-radius: 6px !important; font-size: 13px !important; white-space: nowrap !important; } /* Empty-state placeholder — keep visible but small */ body.amk-page-messages .amk-chat:empty::before, body.amk-page-messages .amk-chat__log:empty::before { content: "Select a conversation to start chatting"; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; height: 100% !important; color: rgba(255,255,255,0.4) !important; font-size: 13px !important; padding: 20px !important; } } /* ============================================================ ▸▸▸ APPEND TO amk-mobile-final.css ▸▸▸ v7 — Messages page on mobile: • User list visible by default (on top) • Conversation panel HIDDEN by default • Tap a user → conversation appears below the list ============================================================ */ @media (max-width: 768px) { /* Page container */ body.amk-page-messages main, body.amk-page-messages .entry-content, body.amk-page-messages .page-content, body.amk-page-messages .site-main, body.amk-page-messages article { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 10px !important; background: transparent !important; border: none !important; overflow: visible !important; box-sizing: border-box; } /* Inbox container — column flex so list goes on top, chat below */ body.amk-page-messages .amk-inbox { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ─── USER LIST (ALWAYS VISIBLE, ON TOP) ─── */ body.amk-page-messages .amk-inbox__list { order: 1 !important; display: block !important; flex: 0 0 auto !important; width: 100% !important; max-height: none !important; background: rgba(15, 23, 42, 0.7) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 12px !important; padding: 6px !important; box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important; } body.amk-page-messages .amk-inbox__item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; font-size: 13px !important; border-radius: 8px !important; cursor: pointer !important; min-height: 56px !important; background: transparent !important; transition: background-color .15s ease !important; } body.amk-page-messages .amk-inbox__item:hover, body.amk-page-messages .amk-inbox__item:active { background: rgba(0, 224, 255, 0.08) !important; } /* Highlight the currently-open conversation in the list */ body.amk-page-messages .amk-inbox__item.is-active, body.amk-page-messages .amk-inbox__item.active, body.amk-page-messages .amk-inbox__item.selected { background: rgba(0, 224, 255, 0.16) !important; } /* ─── CONVERSATION BOX (HIDDEN BY DEFAULT) ─── */ /* The chat panel only appears when a user is selected. We detect "selected" via two signals: a) the chat container has a class like .is-active, .has-conversation, .has-active, or .open (the chat plugin's JS often toggles one of these), OR b) the chat contains actual message bubbles (.amk-bubble or descendants of .amk-chat__log with children). Otherwise → display: none. */ body.amk-page-messages .amk-chat { order: 2 !important; display: none !important; /* HIDDEN by default */ flex-direction: column !important; width: 100% !important; max-width: 100% !important; height: 420px !important; max-height: 65vh !important; min-height: 280px !important; margin: 0 !important; padding: 0 !important; background: rgba(15, 23, 42, 0.7) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 12px !important; box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important; overflow: hidden !important; box-sizing: border-box !important; } /* Show the chat panel when ANY of these signals are present */ body.amk-page-messages .amk-chat.is-active, body.amk-page-messages .amk-chat.has-conversation, body.amk-page-messages .amk-chat.has-active, body.amk-page-messages .amk-chat.open, body.amk-page-messages .amk-chat.amk-show, body.amk-page-messages .amk-chat[data-thread-id]:not([data-thread-id=""]), body.amk-page-messages .amk-chat:has(.amk-bubble), body.amk-page-messages .amk-chat:has(.amk-chat__log:not(:empty)), body.amk-page-messages.has-active-chat .amk-chat { display: flex !important; } /* The empty-state placeholder ("Select a conversation...") that came pre-rendered with the page should NOT auto-show the chat. Hide any element that contains the empty-state text on mobile. (Saves space — the user list IS the way to start a conversation on mobile, no placeholder needed.) */ body.amk-page-messages .amk-chat__empty, body.amk-page-messages .amk-chat-empty, body.amk-page-messages [class*="empty-state"] { display: none !important; } /* Header inside the chat box */ body.amk-page-messages .amk-chat__header { flex: 0 0 auto !important; padding: 10px 14px !important; font-size: 13px !important; font-weight: 600 !important; background: rgba(255,255,255,0.04) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } /* Message log */ body.amk-page-messages .amk-chat__log { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding: 8px !important; background: transparent !important; border: none !important; } body.amk-page-messages .amk-bubble { max-width: 85% !important; padding: 7px 10px !important; font-size: 13px !important; line-height: 1.35 !important; margin: 4px 0 !important; } /* Composer (textarea + Send) pinned at bottom */ body.amk-page-messages .amk-chat__composer { flex: 0 0 auto !important; display: grid !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto auto !important; gap: 6px !important; padding: 8px !important; background: rgba(255,255,255,0.04) !important; border-top: 1px solid rgba(255,255,255,0.08) !important; } body.amk-page-messages .amk-chat__composer #amkChatName, body.amk-page-messages .amk-chat__composer input[name="name"] { grid-column: 1 / -1 !important; height: 34px !important; padding: 0 10px !important; font-size: 13px !important; } body.amk-page-messages .amk-chat__composer textarea, body.amk-page-messages .amk-chat__composer input[type="text"]:not([name="name"]) { width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 8px 10px !important; font-size: 13px !important; resize: none !important; box-sizing: border-box !important; } body.amk-page-messages .amk-chat__composer button, body.amk-page-messages .amk-chat__composer [type="submit"] { height: 38px !important; padding: 0 14px !important; background: #00e0ff !important; color: #000 !important; font-weight: 700 !important; border: none !important; border-radius: 6px !important; font-size: 13px !important; white-space: nowrap !important; } } /* ============================================================ ▸▸▸ APPEND TO amk-mobile-final.css ▸▸▸ Fixes 3 issues: 1. Header showing on mobile (was un-hidden by stray rule at americanmarket.css line 5507) 2. Location dropdown opening UNDER the SVG map on desktop 3. Location dropdown not opening / overflowing on mobile ============================================================ */ /* ────────────────────────────────────────────────────────── 1. HIDE THE DESKTOP HEADER ON MOBILE (re-assert) americanmarket.css line 5507 has: .amk-header { display: block !important; visibility: visible !important; ... } That overrides the mobile-hide rule. Re-assert here with a more specific media-query selector so it wins. ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { html body header, html body .site-header, html body .header, html body .amk-header, html body .menu-header { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; } } /* ────────────────────────────────────────────────────────── 2. LOCATION DROPDOWN — DESKTOP fix The usadropdown plugin portals the dropdown to and sets position:fixed via inline style. An earlier rule in this file forced position: absolute !important which broke the plugin's positioning and let the SVG map paint on top. Override that here: allow the plugin's fixed positioning + bump z-index much higher than the map. ────────────────────────────────────────────────────────── */ @media (min-width: 769px) { /* Honor the plugin's inline position:fixed — DO NOT force absolute */ .usa-location-dropdown { position: fixed !important; z-index: 2147483600 !important; /* near the int32 max */ } /* Wrapper still creates its own stacking context for the portal-fallback case. */ .usa-location-wrapper { position: relative !important; z-index: 2147483600 !important; isolation: isolate !important; } /* SVG map and its wrappers stay BELOW the dropdown */ .amk-map-wrapper, .usa-map-container, .amk-usa-map-section, .amk-usa__wrap { position: relative !important; z-index: 0 !important; } /* The SVG itself — also low z-index so labels don't poke through */ .amk-map-wrapper svg, .usa-map-container svg, .amk-usa-map-section svg, svg#usa-map, svg.usa-map { position: relative !important; z-index: 0 !important; } } /* ────────────────────────────────────────────────────────── 3. LOCATION DROPDOWN — MOBILE fix The plugin renders the dropdown at width:500px which is wider than a 360px phone screen. It also uses a 2-column grid (state list | city panel). Both break mobile UX. On mobile we: • Override the plugin's inline position:fixed and use a centered fixed overlay • Force the dropdown full-width (with side padding) • Stack the panels into ONE column (state list on top, cities below) • Increase touch-target size on rows • Cap height to viewport and let the inside scroll ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* The wrapper that holds the location input */ .usa-location-wrapper { position: relative !important; z-index: 99999 !important; isolation: isolate !important; } /* The dropdown — override the plugin's inline styles */ .usa-location-dropdown { position: fixed !important; top: 70px !important; /* under the URL bar / safe area */ left: 8px !important; right: 8px !important; width: auto !important; /* override plugin's 500px */ max-width: none !important; max-height: calc(100vh - 90px) !important; margin: 0 !important; padding: 0 !important; z-index: 2147483600 !important; background: #1a2233 !important; border: 1px solid #444 !important; border-radius: 12px !important; box-shadow: 0 12px 40px rgba(0,0,0,0.7) !important; overflow: hidden !important; box-sizing: border-box !important; /* Override the 2-column grid into a single column stack */ grid-template-columns: 1fr !important; grid-template-rows: auto 1fr !important; } /* When open, show as a flex column so panels stack vertically */ .usa-location-dropdown.open { display: flex !important; flex-direction: column !important; } /* State panel — top half, scrolls internally */ .usa-location-dropdown .state-panel { flex: 0 0 45% !important; max-height: 45% !important; border-right: none !important; border-bottom: 1px solid #333 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } .usa-location-dropdown .state-search { width: calc(100% - 16px) !important; margin: 8px !important; padding: 10px 12px !important; font-size: 14px !important; flex: 0 0 auto !important; box-sizing: border-box !important; } .usa-location-dropdown .state-list { flex: 1 1 auto !important; max-height: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } .usa-location-dropdown .state-item { padding: 12px 14px !important; font-size: 14px !important; min-height: 44px !important; /* touch-friendly */ line-height: 1.3 !important; } /* City panel — bottom half, scrolls internally */ .usa-location-dropdown .city-panel { flex: 1 1 auto !important; max-height: none !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } .usa-location-dropdown .city-header { padding: 10px 14px !important; font-size: 13px !important; font-weight: 600 !important; flex: 0 0 auto !important; border-bottom: 1px solid #333 !important; } .usa-location-dropdown .cities { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } .usa-location-dropdown .city-item { padding: 12px 14px !important; font-size: 14px !important; min-height: 44px !important; line-height: 1.3 !important; } /* The input itself — make sure it's clearly tappable */ .usa-location { height: 44px !important; font-size: 14px !important; padding: 0 12px !important; cursor: pointer !important; } /* SVG map stays in the back on mobile too */ .amk-map-wrapper, .usa-map-container, .amk-usa-map-section svg, svg#usa-map { position: relative !important; z-index: 0 !important; } } /* ============================================================ ▸▸▸ MOBILE FIXES v9 — append to amk-mobile-final.css ▸▸▸ ▸▸▸ THREE ISSUES FIXED: ▸▸▸ 1. New mobile brand header (SVG + tagline) ▸▸▸ 2. Light mode forced dark (3D morphism preserved) ▸▸▸ 3. SVG map shrinks properly on mobile ============================================================ */ /* ──────────────────────────────────────────────────────────── ISSUE 1 — MOBILE BRAND HEADER ──────────────────────────────────────────────────────────── */ /* Hidden on desktop by default */ .amk-m-header { display: none; } @media (max-width: 768px) { /* Hide the desktop header on mobile so it doesn't double up */ html body header.amk-header, html body .site-header, html body .menu-header { display: none !important; } /* The new compact mobile header — full-width dark glass */ .amk-m-header { display: block !important; width: 100% !important; margin: 0 !important; padding: 10px 14px 12px !important; background: linear-gradient(180deg, #020814 0%, #0a1428 100%) !important; border-bottom: 1px solid rgba(63, 211, 255, 0.18) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; box-sizing: border-box !important; text-align: center !important; position: relative !important; z-index: 100 !important; } .amk-m-header__link { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; text-decoration: none !important; color: inherit !important; } .amk-m-header__logo { display: block !important; width: 240px !important; max-width: 80vw !important; height: auto !important; margin: 0 auto !important; } .amk-m-header__tagline { font-size: 12px !important; font-weight: 500 !important; color: #7ff0ff !important; letter-spacing: 0.3px !important; margin-top: -2px !important; opacity: 0.9 !important; text-shadow: 0 1px 4px rgba(63, 211, 255, 0.35) !important; } } /* ──────────────────────────────────────────────────────────── ISSUE 2 — FORCE 3D MORPHISM DARK PALETTE IN LIGHT MODE When Android / iOS is in light mode, the theme's CSS variables flip to white values. Override them back to dark so the 3D-morphism look stays identical regardless of OS. ──────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: light) { :root { --amk-bg: #0b0f19 !important; --amk-surface: #121829 !important; --amk-border: rgba(255,255,255,0.08) !important; --amk-text: #e6e9f2 !important; --amk-muted: #a8b0c3 !important; --amk-price: #ef4444 !important; --amk-primary: #2563eb !important; --amk-primary-2: #1d4ed8 !important; --amk-accent: #10b981 !important; color-scheme: dark !important; } html, body { background: #020814 !important; color: #e6edf6 !important; } /* Form controls stay dark with white text */ input, select, textarea, button { background-color: #0e1626 !important; color: #fff !important; border-color: rgba(255,255,255,0.15) !important; -webkit-text-fill-color: #fff !important; } input::placeholder, textarea::placeholder { color: #8a93a6 !important; -webkit-text-fill-color: #8a93a6 !important; opacity: 1 !important; } /* 3D-morphism surfaces stay dark glass */ .amk-hero3d, .amk-search, .amk-form3d, .amk-card__inner, .amk-cat__inner, .amk-card, .glass-input-box, .amk-authbox, .amk-authbox__form, .amk-modal__dialog, .amk-m-header { background-color: var(--amk-surface) !important; color: var(--amk-text) !important; border-color: rgba(255,255,255,0.08) !important; } .amk-card__title, .amk-card__price, .amk-card__meta, .amk-card__address, .amk-card__category { color: #fff !important; } h1, h2, h3, h4, h5, h6 { color: var(--amk-text) !important; } .amk-glow-title, [class*="glow"] { color: #00e0ff !important; } } /* Same forced palette on Android edge cases */ html[data-theme="light"], html.light, body.light, body.theme-light { background: #020814 !important; color: #e6edf6 !important; } /* ──────────────────────────────────────────────────────────── ISSUE 3 — SVG MAP MOBILE SIZING Problem: The SVG map has intrinsic width/height that exceed the mobile viewport, so only the upper-left corner shows. Also the desktop rule sets min-height:520px which forces huge size even when the parent is 360px wide. Fix: scale the SVG to viewport width, clear min-height, apply to ALL pages (classified / jobs / matrimonial). ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Wrapper containers fill the mobile width with safe padding */ .amk-map-wrapper, .usa-map-container, .amk-usa-map-section, .amk-usa__wrap, .amk-map-container, .jobs-map, .mat-map { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 6px 4px !important; overflow: hidden !important; box-sizing: border-box !important; min-height: 0 !important; } /* The SVG itself — scale to viewport, auto-height, kill the desktop 520px min-height. */ .amk-map-wrapper svg, .usa-map-container svg, .amk-usa-map-section svg, .amk-usa__wrap svg, .amk-map-container svg, .jobs-map svg, .mat-map svg, svg#usa-map, svg#svg2, svg.usa-map, svg[id*="usa"], svg[class*="usa-map"] { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; } /* Section heading above the map */ .amk-usa-map-section h2, .amk-usa-map-section h3, .amk-map-container h3, .amk-map-heading { text-align: center !important; margin: 14px auto 8px !important; font-size: 14px !important; padding: 0 10px !important; } /* State labels inside the SVG — shrink to remain readable (these are SVG userSpace units, not CSS px) */ .amk-map-wrapper svg text, .usa-map-container svg text, .amk-map-container svg text, .jobs-map svg text, .mat-map svg text, svg#usa-map text, svg#svg2 text { font-size: 4px !important; } } /* ============================================================ ▸▸▸ MOBILE FIXES v10 — append to amk-mobile-final.css ▸▸▸ ▸▸▸ ⚠️ YOU MUST PASTE THIS INTO YOUR CSS FILE. ▸▸▸ If the brand header is showing on desktop, it ▸▸▸ means v9 was NEVER applied. Apply this v10 now. ▸▸▸ ▸▸▸ Fixes: ▸▸▸ 1. Hide new brand header on desktop (was showing ▸▸▸ because v9 CSS was never appended) ▸▸▸ 2. SVG map mobile scaling — stronger selectors ▸▸▸ so the map fits on phone screens ============================================================ */ /* ──────────────────────────────────────────────────────────── ISSUE 1 — HIDE NEW BRAND HEADER ON DESKTOP The new
is meant for mobile ONLY. Force hidden by default with high specificity. ──────────────────────────────────────────────────────────── */ /* Hidden EVERYWHERE by default — desktop, tablet, anything */ html body header.amk-m-header, .amk-m-header { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } /* ──────────────────────────────────────────────────────────── MOBILE ONLY — show the brand header ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Hide the desktop header on mobile so there's only ONE header */ html body header.amk-header, html body .site-header, html body .menu-header { display: none !important; } /* Show the new brand header — full-width dark glass */ html body header.amk-m-header, .amk-m-header { display: block !important; visibility: visible !important; height: auto !important; overflow: visible !important; width: 100% !important; margin: 0 !important; padding: 10px 14px 12px !important; background: linear-gradient(180deg, #020814 0%, #0a1428 100%) !important; border-bottom: 1px solid rgba(63, 211, 255, 0.18) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; box-sizing: border-box !important; text-align: center !important; position: relative !important; z-index: 100 !important; } .amk-m-header__link { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; text-decoration: none !important; color: inherit !important; } .amk-m-header__logo { display: block !important; width: 260px !important; max-width: 85vw !important; height: auto !important; margin: 0 auto !important; } .amk-m-header__tagline { font-size: 12px !important; font-weight: 500 !important; color: #7ff0ff !important; letter-spacing: 0.3px !important; margin-top: -2px !important; opacity: 0.9 !important; text-shadow: 0 1px 4px rgba(63, 211, 255, 0.35) !important; } } /* ──────────────────────────────────────────────────────────── ISSUE 2 — SVG MAP SIZING ON MOBILE (stronger version) The map SVG has intrinsic width / height attributes that exceed the mobile viewport. Force scale to 100% width and auto-height with very specific selectors that beat any existing rules. ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Wrapper containers — fill mobile width, no min-height */ html body .amk-map-wrapper, html body .usa-map-container, html body .amk-usa-map-section, html body .amk-usa__wrap, html body .amk-map-container, html body .jobs-map, html body .mat-map, html body section.amk-usa-map-section { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 6px 4px !important; overflow: hidden !important; box-sizing: border-box !important; min-height: 0 !important; height: auto !important; } /* The SVG — strongest possible selectors so the intrinsic width/height attrs are overridden. */ html body .amk-map-wrapper svg, html body .usa-map-container svg, html body .amk-usa-map-section svg, html body .amk-usa__wrap svg, html body .amk-map-container svg, html body .jobs-map svg, html body .mat-map svg, html body svg#usa-map, html body svg#svg2, html body svg.usa-map, html body svg[id*="usa"], html body svg[class*="usa-map"] { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; } /* Section heading above the map */ html body .amk-usa-map-section h2, html body .amk-usa-map-section h3, html body .amk-map-container h3, html body .amk-map-heading { text-align: center !important; margin: 14px auto 8px !important; font-size: 14px !important; padding: 0 10px !important; } /* State labels inside the SVG — SVG userSpace units */ html body .amk-map-wrapper svg text, html body .usa-map-container svg text, html body .amk-map-container svg text, html body .jobs-map svg text, html body .mat-map svg text, html body svg#usa-map text, html body svg#svg2 text { font-size: 4px !important; } } /* ──────────────────────────────────────────────────────────── FORCE 3D MORPHISM DARK PALETTE IN LIGHT MODE (Re-asserted from v9 — in case v9 was never applied.) ──────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: light) { :root { --amk-bg: #0b0f19 !important; --amk-surface: #121829 !important; --amk-border: rgba(255,255,255,0.08) !important; --amk-text: #e6e9f2 !important; --amk-muted: #a8b0c3 !important; --amk-price: #ef4444 !important; --amk-primary: #2563eb !important; --amk-primary-2: #1d4ed8 !important; --amk-accent: #10b981 !important; color-scheme: dark !important; } html, body { background: #020814 !important; color: #e6edf6 !important; } input, select, textarea, button { background-color: #0e1626 !important; color: #fff !important; border-color: rgba(255,255,255,0.15) !important; -webkit-text-fill-color: #fff !important; } input::placeholder, textarea::placeholder { color: #8a93a6 !important; -webkit-text-fill-color: #8a93a6 !important; opacity: 1 !important; } .amk-hero3d, .amk-search, .amk-form3d, .amk-card__inner, .amk-cat__inner, .amk-card, .glass-input-box, .amk-authbox, .amk-authbox__form, .amk-modal__dialog, .amk-m-header { background-color: var(--amk-surface) !important; color: var(--amk-text) !important; border-color: rgba(255,255,255,0.08) !important; } .amk-card__title, .amk-card__price, .amk-card__meta, .amk-card__address, .amk-card__category { color: #fff !important; } h1, h2, h3, h4, h5, h6 { color: var(--amk-text) !important; } } /* ✅ Fix USA Map responsive */ .amk-map-container svg, #amkUSAMap svg { width: 100% !important; height: auto !important; max-width: 100% !important; display: block; } /* ✅ Mobile specific fix */ @media (max-width: 768px) { .amk-map-container { overflow-x: hidden !important; padding: 0 10px; } .amk-map-container svg { width: 100% !important; height: auto !important; max-height: 320px; /* ✅ control height */ } } .amk-map-container { display: flex; justify-content: center; align-items: center; } /* ✅ FINAL RESPONSIVE MAP FIX */ .usa-map-container svg, .amk-usa__wrap svg { width: 100% !important; max-width: 100% !important; height: auto !important; } /* ✅ Mobile adjustment */ @media (max-width: 768px) { .amk-usa__wrap { padding: 10px !important; } .amk-usa__wrap svg { transform: scale(0.95); } } .amk-catdd__panel { display: none; } .amk-catdd.is-open .amk-catdd__panel { display: block; } /*Mobile single listing */ @media (max-width: 768px) { /* ✅ Keep slider full */ .amk-single .amk-sl-outer { width: 100% !important; height: 90vh !important; max-height: none !important; } /* ✅ Keep overlay ON TOP */ .amk-single .amk-sl-overlay { position: absolute !important; bottom: 0; top: auto !important; left: 50%; transform: translateX(-50%) translateY(0); width: 100% !important; max-height: 70%; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 16px; } /* ✅ FIX hidden state (slide up) */ .amk-single .amk-sl-overlay.is-hidden { transform: translateX(-50%) translateY(100%); opacity: 0; } /* ✅ slider height fix */ .amk-single .amk-sl-stage { height: 100% !important; position: absolute !important; } } @media (max-width: 768px) { .cookie-notice, #cookie-notice { flex-direction: column !important; text-align: center; padding: 16px !important; } } /* ✅ MOBILE: FULL WIDTH SVG MAP */ @media (max-width: 768px) { /* main map container */ .amk-map-container, .us-map, .map-wrapper { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* SVG itself */ svg { width: 100% !important; height: auto !important; display: block; } } @media (max-width: 768px) { .amk-section, .container, .wrap { padding-left: 10px !important; padding-right: 10px !important; } } @media (max-width: 768px) { section:has(svg) { padding: 0 !important; } section svg { width: 100vw !important; max-width: 100vw !important; } } /* ✅ FIX BOTTOM NAV FOR ALL MOBILE */ .amk-mobile-nav { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999; /* prevent Android issues */ transform: translateZ(0); -webkit-transform: translateZ(0); background: rgba(15, 22, 40, 0.95); backdrop-filter: blur(10px); } /* ✅ ensure body space (important) */ body { padding-bottom: 70px; } /* ✅ fix Android viewport issue */ html, body { height: auto !important; overflow-x: hidden; } @supports (-webkit-touch-callout: none) { .amk-mobile-nav { position: fixed !important; bottom: 0 !important; } }