/* ═══════════════════════════════════════════════════════════════ hp-search-responsive.css — NovaEstate Load in AFTER styles.css and search.css ═══════════════════════════════════════════════════════════════ */ :root { --m-blue: #0088FF; --m-ai: #CB30E0; --m-glass: rgba(255,255,255,.08); --m-glass-border: rgba(255,255,255,.12); --m-radius: 20px; --m-radius-sm: 14px; --m-sheet-ease: cubic-bezier(.32,.72,.24,1); } /* ═══ CRITICAL FIX: White space below footer ═══ */ html, body { height: auto !important; overflow-x: hidden; margin: 0; padding: 0; } body:not(.modal-open):not(.m-sheet-open) { position: static !important; top: auto !important; left: auto !important; right: auto !important; } body.modal-open { overflow: hidden !important; position: fixed !important; width: 100% !important; } body.m-sheet-open { overflow: hidden !important; position: fixed !important; width: 100% !important; } nova-footer { display: block !important; overflow: hidden; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ═══ FIX: Hero — NO overflow:hidden so dropdowns can extend below ═══ */ #hero { overflow: visible !important; } #hero .hero-bg { overflow: hidden; } /* ═══ FIX: Horizontal scroll on listings ═══ */ #listings, #listings .container, #listings-ladder { overflow: hidden !important; max-width: 100vw !important; } #listings-ladder > div { overflow: hidden !important; min-width: 0 !important; } .ad-slider-wrap { overflow: hidden !important; max-width: 100% !important; box-sizing: border-box !important; } .lpanel { overflow: hidden !important; min-width: 0 !important; box-sizing: border-box !important; } .pcard { min-width: 0 !important; box-sizing: border-box !important; } .nd-panel { overflow: hidden !important; box-sizing: border-box !important; } section { overflow-x: hidden; max-width: 100vw; } #ai_search_container { min-width: 0 !important; } /* ═══ FIX: Dropdown content z-index ═══ */ #hp-search-wrap .dropdown-content, #tSearch .dropdown-content, #tDdHost, #mDdHost { z-index: 99999 !important; } /* ═══ FIX: Hero stats bar glass ═══ */ .hero-stats { background: rgba(255,255,255,.08) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } /* ═══════════════════════════════════════════ SHARED OVERLAY STYLES (tablet + mobile) ═══════════════════════════════════════════ */ /* Backdrop */ .ov-backdrop { display: none; position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,0); backdrop-filter: blur(0); transition: background .25s ease, backdrop-filter .25s ease; } .ov-backdrop.open { display: flex !important; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); } /* Panel — centered (tablet), bottom-sheet (mobile) */ .ov-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.94); width: 420px; max-width: 92vw; max-height: 72vh; background: #fff; border-radius: 18px; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 24px 64px rgba(0,0,0,.2); opacity: 0; transition: transform .28s var(--m-sheet-ease), opacity .22s ease; } .ov-backdrop.open .ov-panel { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Mobile variant: bottom sheet */ .ov-panel.mob { top: auto; bottom: 0; left: 0; right: 0; transform: translateY(100%); max-height: 75vh; width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .ov-backdrop.mob.open .ov-panel.mob { transform: translateY(0); opacity: 1; } .ov-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; border-bottom: 1px solid #f0f0f0; position: sticky; top: 0; background: #fff; z-index: 2; border-radius: 18px 18px 0 0; } .ov-title { font-size: 15px; font-weight: 700; color: #111; } .ov-done { padding: 6px 16px; border-radius: 20px; background: var(--m-blue); color: #fff; border: none; font-size: 12px; font-weight: 600; cursor: pointer; } .ov-body { padding: 6px 8px 8px; } /* ── Overlay items ── */ .ov-hdr { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8E8E93; padding: 10px 12px 4px; } .ov-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; cursor: pointer; font-size: 13px; color: #111; transition: background .1s; margin: 2px 0; } .ov-item:active { background: #f3f4f6; } .ov-item.on { background: rgba(0,136,255,.05); } .ov-item.sub { padding-left: 26px; } .ov-circle { width: 16px; height: 16px; min-width: 16px; border-radius: 50%; border: 2px solid #D1D5DB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s; } .ov-circle.on { border-color: var(--m-blue); background: var(--m-blue); box-shadow: inset 0 0 0 3px #fff; } .ov-circle.sm { width: 14px; height: 14px; min-width: 14px; } .ov-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-lbl.on { color: var(--m-blue); font-weight: 600; } .ov-sub-hdr { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--m-blue); padding: 14px 12px 6px; border-top: 1px solid #f0f0f0; margin-top: 6px; } /* ── Bottom bar (clear / next / search) ── */ .ov-bar { position: sticky; bottom: 0; background: #fff; padding: 8px 4px; margin-top: 8px; border-top: 1px solid #f0f0f0; display: flex; flex-direction: column; gap: 6px; z-index: 2; } .ov-bar-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .ov-bar-clear { padding: 6px 12px; background: rgba(255,255,255,.6); border: 1px solid #ccc; border-radius: 30px; font-size: 11px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: inherit; color: #374151; } .ov-bar-next { padding: 6px 12px; background: var(--m-blue); color: #fff; border: none; border-radius: 30px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 4px; } .ov-bar-search { display: flex; align-items: center; gap: 5px; } .ov-search-input { flex: 1; padding: 7px 10px; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 12px; outline: none; font-family: inherit; min-width: 0; } .ov-search-input:focus { border-color: var(--m-blue); } .ov-search-clear { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #666; } /* ═══ Partner modal animations ═══ */ /* visibility delay .4s > pm-box transform .35s — box finishes before element disappears */ #partner-modal { display: flex !important; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .4s; } #partner-modal.open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; } #partner-modal::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; z-index: -1; } #partner-modal.open::before { opacity: 1; } #partner-modal .pm-box { transform: translateY(30px) scale(.96); opacity: 0; transition: transform .35s cubic-bezier(.32,.72,.24,1), opacity .3s ease; } #partner-modal.open .pm-box { transform: translateY(0) scale(1); opacity: 1; } #partner-modal .pm-close { transition: color .15s, transform .15s; } #partner-modal .pm-close:hover { color: #374151; transform: scale(1.15); } #partner-modal .pm-submit { transition: background .15s, transform .1s, opacity .2s; } #partner-modal .pm-submit:hover { background: #006fd6; transform: translateY(-1px); } #partner-modal .pm-submit:active { transform: scale(.98); } #partner-modal .pm-submit:disabled { opacity: .6; transform: none; } #partner-modal .pm-field input, #partner-modal .pm-field select { transition: border-color .2s, box-shadow .2s; } #partner-modal .pm-field input:focus, #partner-modal .pm-field select:focus { border-color: #0088FF; box-shadow: 0 0 0 3px rgba(0,136,255,.08); } #partner-modal .pm-success i { animation: pmCheckBounce .5s cubic-bezier(.34,1.56,.64,1); } @keyframes pmCheckBounce { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } #partner-modal .pm-success h3 { animation: pmFadeUp .4s ease .15s both; } #partner-modal .pm-success p { animation: pmFadeUp .4s ease .25s both; } @keyframes pmFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Partner modal tablet: bottom sheet */ @media (max-width: 1200px) and (min-width: 736px) { #partner-modal { padding: 0 !important; align-items: flex-end !important; } #partner-modal .pm-box { max-width: 100% !important; width: 100% !important; border-radius: 24px 24px 0 0 !important; max-height: 90vh; overflow-y: auto; padding: 28px 24px !important; transform: translateY(100%) !important; transition: transform .35s var(--m-sheet-ease), opacity .25s ease !important; } #partner-modal.open .pm-box { transform: translateY(0) !important; opacity: 1 !important; } } /* Partner modal mobile: bottom sheet */ @media (max-width: 735px) { #partner-modal { padding: 0 !important; align-items: flex-end !important; } #partner-modal .pm-box { max-width: 100% !important; width: 100% !important; border-radius: 22px 22px 0 0 !important; max-height: 90vh; overflow-y: auto; padding: 28px 20px !important; transform: translateY(100%) !important; transition: transform .35s var(--m-sheet-ease), opacity .25s ease !important; } #partner-modal.open .pm-box { transform: translateY(0) !important; opacity: 1 !important; } #partner-modal .pm-row { grid-template-columns: 1fr !important; } #partner-modal .pm-title { font-size: 20px !important; } #partner-modal .pm-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 50%; font-size: 18px; } } /* ═══════════════════════════════════════════ TABLET + MOBILE ELEMENTS — hidden on desktop ═══════════════════════════════════════════ */ #tSearch, #mPill, #mSheet, #mDdHost { display: none; } /* ═══ HEADER FIX — tablet widths ═══ */ @media (max-width: 1200px) and (min-width: 736px) { nova-header .nav-right, nova-header [class*="nav-right"], nova-header [style*="gap"] { gap: 6px !important; } nova-header .nav-enter, nova-header .nav-partner, nova-header [class*="nav-enter"], nova-header [class*="nav-partner"] { padding: 7px 12px !important; font-size: 12px !important; } nova-header .nav-sel-wrap, nova-header [class*="sel-wrap"] { font-size: 12px !important; } nova-header .nav-sel, nova-header select { font-size: 12px !important; } } /* ═══════════════════════════════════════════ FILTERS MODAL — ADAPTIVE for tablet + mobile ═══════════════════════════════════════════ */ @media (max-width: 1200px) { #filters-modal .fm-inner, .filters-modal-content { max-width: 100vw !important; width: 100% !important; max-height: 90vh !important; overflow-y: auto !important; margin: 0 !important; border-radius: 18px 18px 0 0 !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; } /* If filters-modal uses fixed-position center layout, override it */ #filters-modal.open { align-items: flex-end !important; } /* Make filter grids responsive */ #filters-container { max-width: 100% !important; } #filters-container .grid { grid-template-columns: repeat(2, 1fr) !important; } #filters-container > div[style*="flex"] { flex-wrap: wrap !important; gap: 16px !important; } /* Make filter dropdowns full width */ #filters-container button[class*="rounded-2xl"] { width: 100% !important; max-width: 100% !important; } #filters-container .relative { width: 100% !important; } /* Dropdown menus inside filters — position and size */ .dropdown-menu.open { max-width: 90vw !important; max-height: 40vh !important; } } @media (max-width: 735px) { #filters-modal .fm-inner, .filters-modal-content { border-radius: 16px 16px 0 0 !important; max-height: 92vh !important; padding: 16px !important; } #filters-container .grid { grid-template-columns: 1fr !important; } #filters-container > div[style*="flex"] { gap: 12px !important; } } /* ═══════════════════════════════════════════ TABLET: 736px – 1200px ═══════════════════════════════════════════ */ @media (max-width: 1200px) and (min-width: 736px) { #hp-search-wrap { display: none !important; } #ai_search_container { min-width: 0 !important; max-width: 100% !important; width: calc(100% - 28px) !important; } #tSearch { display: none !important; /* retired — tablet uses the mobile pill + sheet */ width: 100%; max-width: 880px; margin: 0 auto; padding: 14px 18px; /* ── Match desktop dark-glass style exactly ── */ background: rgba(15,15,25,.55) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 32px !important; box-shadow: 0 8px 40px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.06) inset !important; position: relative; z-index: 100; color: white; } /* Row 1: all 5 geo dropdowns in one line with dividers */ .ts-row1 { display: flex; align-items: center; gap: 0; padding-bottom: 4px; margin-bottom: 6px; } .ts-row1 .ts-dd { flex: 1; border-radius: 0; border-right: 1px solid rgba(255,255,255,.12); } .ts-row1 .ts-dd:last-child { border-right: none; } /* Row 2: buy/rent type + estate type + search actions */ .ts-row2 { display: flex; gap: 8px; align-items: center; } .ts-row2 .ts-dd { flex: 0 0 auto; border-right: 1px solid rgba(255,255,255,.1); padding-right: 10px; } .ts-row2 .ts-type-btn { flex-shrink: 0; } /* Row 3 is now merged into row 2 on tablet — hide it separately if present */ .ts-row3 { display: flex; align-items: center; gap: 8px; margin-left: auto; } .ts-dd { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; transition: background .12s; } .ts-dd:hover { background: rgba(255,255,255,.07); } .ts-dd img { width: 16px; height: auto; flex-shrink: 0; filter: none !important; opacity: 1; } .ts-dd-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .ts-dd i.fa-angle-down { font-size: 10px; color: rgba(255,255,255,.45); margin-left: 2px; flex-shrink: 0; } .ts-type-btn { display: flex; align-items: center; gap: 5px; padding: 9px 13px; border-radius: 20px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s; white-space: nowrap; flex-shrink: 0; } .ts-type-btn:hover { background: rgba(255,255,255,.15); } .ts-type-btn img { width: 16px; height: auto; filter: brightness(0) invert(1); opacity: .8; } .ts-filters-btn { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 20px; background: #0088FF; color: white; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: background .12s; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,136,255,.35); } .ts-filters-btn:hover { background: #006fd6; } .ts-filters-btn img { width: 16px; height: auto; filter: brightness(0) invert(1); } .ts-ai-btn { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 20px; background: linear-gradient(135deg, #7B2FBE 0%, #CB30E0 100%); border: none; color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 10px rgba(160,30,200,.3), inset 0 1px 0 rgba(255,255,255,.15); transition: background .15s, box-shadow .15s; white-space: nowrap; height: 38px; flex-shrink: 0; } .ts-ai-btn:hover { background: linear-gradient(135deg, #8E36D8 0%, #D93DF5 100%); box-shadow: 0 4px 18px rgba(160,30,200,.45); } .ts-ai-btn img { width: 15px; height: 15px; filter: brightness(0) invert(1); opacity: .95; flex-shrink: 0; } .ts-find-btn { display: flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 20px; background: #111; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; border: none; transition: background .12s; height: 38px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; outline: none; } .ts-find-btn:hover { background: #222; } .ts-find-btn:active { background: #111 !important; } #ai_search_container { min-width: 0 !important; max-width: 100% !important; width: calc(100% - 28px) !important; } } /* ═══════════════════════════════════════════ MOBILE + TABLET: ≤ 1200px (tablet now uses the mobile pill + sheet) ═══════════════════════════════════════════ */ @media (max-width: 1200px) { #hp-search-wrap { display: none !important; } /* ── Search pill ── */ #mPill { display: flex !important; align-items: center; gap: 11px; width: 100%; max-width: 420px; margin: 0 auto; padding: 11px 13px; background: rgba(15,15,25,.55); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,.18); border-radius: var(--m-radius); box-shadow: 0 8px 32px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.06) inset; cursor: pointer; color: white; position: relative; z-index: 100; -webkit-tap-highlight-color: transparent; transition: transform .12s ease; } #mPill:active { transform: scale(.97); } .mp-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--m-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; color: #fff; } .mp-body { flex: 1; min-width: 0; } .mp-title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-sub { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.48); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-ai { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #7B2FBE 0%, #CB30E0 100%); border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; box-shadow: 0 2px 8px rgba(160,30,200,.35); transition: box-shadow .15s, transform .1s; } .mp-ai img { filter: brightness(0) invert(1); opacity: .95; } .mp-ai:active { transform: scale(.93); box-shadow: 0 1px 4px rgba(160,30,200,.25); } /* ── Bottom sheet ── */ #mSheet { display: block !important; position: fixed; inset: 0; z-index: 9998; pointer-events: none; visibility: hidden; } #mSheet.open { pointer-events: auto; visibility: visible; } .ms-bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .28s ease; } #mSheet.open .ms-bg { opacity: 1; } .ms-panel { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 22px 22px 0 0; max-height: 92vh; min-height: 40vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateY(100%); transition: transform .36s var(--m-sheet-ease); padding-bottom: env(safe-area-inset-bottom, 14px); } #mSheet.open .ms-panel { transform: translateY(0); } .ms-head { position: sticky; top: 0; z-index: 3; background: #fff; padding: 10px 18px 11px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0f0f0; } .ms-handle { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 32px; height: 3.5px; background: #d4d4d4; border-radius: 2px; } .ms-title { font-size: 16px; font-weight: 700; color: #111; margin-top: 3px; } .ms-x { width: 30px; height: 30px; border-radius: 50%; background: #f3f4f6; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; color: #7a7a7a; } .ms-x:active { background: #e5e7eb; } .ms-body { padding: 6px 16px 16px; } .ms-bsctl { display: flex; border-radius: 11px; background: #f3f4f6; padding: 3px; margin-bottom: 16px; position: relative; overflow: hidden; } .ms-bsbtn { flex: 1; padding: 10px 0; text-align: center; font-size: 13.5px; font-weight: 600; color: #8e8e93; border: none; background: none; cursor: pointer; border-radius: 9px; position: relative; z-index: 1; transition: color .22s; } .ms-bsbtn.on { color: #111; } .ms-bshl { position: absolute; top: 3px; height: calc(100% - 6px); background: #fff; border-radius: 9px; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: left .28s var(--m-sheet-ease), width .28s var(--m-sheet-ease); z-index: 0; } .ms-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #a0a0a0; margin-bottom: 7px; padding-left: 2px; } .ms-row { display: flex; align-items: center; padding: 12px 13px; background: #f9f9f9; border-radius: var(--m-radius-sm); cursor: pointer; margin-bottom: 4px; border: 1px solid transparent; transition: background .1s, border-color .12s; } .ms-row:active { background: #f0f0f0; } .ms-row.sel { border-color: var(--m-blue); background: rgba(0,136,255,.03); } .ms-row-ic { width: 32px; height: 32px; border-radius: 8px; background: #efefef; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 11px; color: #8e8e93; font-size: 13px; } .ms-row.sel .ms-row-ic { background: rgba(0,136,255,.07); color: var(--m-blue); } .ms-row-info { flex: 1; min-width: 0; } .ms-row-nm { font-size: 13.5px; font-weight: 500; color: #222; } .ms-row-vl { font-size: 11.5px; color: #b0b0b0; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .ms-row.sel .ms-row-vl { color: var(--m-blue); font-weight: 500; } .ms-row-ch { color: #d1d5db; font-size: 11px; margin-left: 5px; } .ms-geo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 4px; } .ms-geo .ms-row { margin-bottom: 0; } /* Full-width applies to the "More locations" row and the odd-row span flag — NOT a positional :nth-child(5). The geo grid gained a (BR-only, usually hidden) Region row, so the 5th child is no longer the More-locations row; the positional rule made Settlement span full-width and broke the 2-col pairing. Match the same class/attr selector nova-search.js injects. */ .ms-geo .ms-row.ms-more, .ms-geo .ms-row[data-msrow-span="1"] { grid-column: 1 / -1; } .ms-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 10px 0 14px; } .ms-duobtn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: var(--m-radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: transform .08s; } .ms-duobtn:active { transform: scale(.97); } .ms-duobtn.tp { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .ms-duobtn.tp.sel { border-color: var(--m-blue); color: var(--m-blue); } .ms-duobtn.fl { background: var(--m-blue); color: #fff; } .ms-ai { background: linear-gradient(135deg, rgba(203,48,224,.04) 0%, rgba(0,136,255,.04) 100%); border: 1px solid rgba(203,48,224,.1); border-radius: var(--m-radius); padding: 13px; margin-bottom: 16px; } .ms-ai-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; } .ms-ai-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--m-ai); } .ms-ai-wrap { display: flex; align-items: center; background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; overflow: hidden; transition: border-color .18s; } .ms-ai-wrap:focus-within { border-color: var(--m-ai); box-shadow: 0 0 0 2px rgba(203,48,224,.06); } /* font-size:16px prevents iOS Safari from auto-zooming on focus (< 16px triggers zoom). touch-action:manipulation kills the additional double-tap zoom gesture. */ .ms-ai-in { flex: 1; border: none; outline: none; padding: 9px 11px; font-size: 16px; color: #374151; background: transparent; font-family: "Montserrat", sans-serif; touch-action: manipulation; } .ms-ai-in::placeholder { color: #c8c8c8; } .ms-ai-go { width: 34px; height: 34px; flex-shrink: 0; background: var(--m-ai); border: none; border-radius: 9px; margin: 3px; color: #fff; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ms-ai-go:active { background: #a824c0; } .ms-ai-status { display: none; align-items: center; gap: 7px; margin-top: 9px; font-size: 11.5px; color: #8e8e93; } .ms-ai-status.on { display: flex; } .ms-ai-cancel { margin-left: auto; background: none; border: 1px solid #e5e7eb; border-radius: 7px; padding: 3px 9px; font-size: 10.5px; color: #6b7280; cursor: pointer; } .ms-divider { height: 1px; background: #f0f0f0; margin: 12px 0; } .ms-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; background: #111; color: #fff; border: none; border-radius: var(--m-radius-sm); font-size: 14.5px; font-weight: 600; cursor: pointer; } .ms-cta:active { transform: scale(.98); } /* Staggered entry */ .ms-body > * { opacity: 0; transform: translateY(8px); } #mSheet.open .ms-body > * { animation: msIn .28s ease forwards; } @keyframes msIn { to { opacity: 1; transform: translateY(0); } } .ms-body > *:nth-child(1) { animation-delay: .04s; } .ms-body > *:nth-child(2) { animation-delay: .07s; } .ms-body > *:nth-child(3) { animation-delay: .10s; } .ms-body > *:nth-child(4) { animation-delay: .13s; } .ms-body > *:nth-child(5) { animation-delay: .16s; } .ms-body > *:nth-child(6) { animation-delay: .19s; } .ms-body > *:nth-child(7) { animation-delay: .22s; } .ms-body > *:nth-child(8) { animation-delay: .25s; } /* Mobile overlay variant uses .mob class */ .ov-backdrop.mob .ov-panel.mob { top: auto; left: 0; right: 0; bottom: 0; transform: translateY(100%); border-radius: 20px 20px 0 0; max-height: 75vh; width: 100%; max-width: 100%; padding-bottom: env(safe-area-inset-bottom, 0px); } .ov-backdrop.mob.open .ov-panel.mob { transform: translateY(0); opacity: 1; } } @media (max-width: 380px) { .ms-geo { grid-template-columns: 1fr; } /* single column → every row is full-width already; no positional override */ .ms-duo { grid-template-columns: 1fr; } }