/* ========================================================= KHOONEHUB MOBILE UI Single mobile presentation layer ========================================================= */ :root { --mobile-bottom-nav-height: 68px; --mobile-header-height: 58px; --mobile-radius: 14px; } /* ========================================================= GLOBAL MOBILE SHELL ========================================================= */ .mobile-app-header, .mobile-bottom-nav { display: none; } @media (max-width: 768px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden; } body.mobile-shell-active { padding-bottom: calc( var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) ); } body.mobile-shell-active .sidebar, body.mobile-shell-active .sidebar-overlay, body.mobile-shell-active .mobile-menu-btn, body.mobile-shell-active .menu-toggle { display: none !important; } body.mobile-shell-active .layout { display: block !important; width: 100% !important; min-height: 100dvh !important; } body.mobile-shell-active .main, body.mobile-shell-active .main-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: calc(var(--mobile-header-height) + 12px) 12px calc(var(--mobile-bottom-nav-height) + 20px) 12px !important; box-sizing: border-box !important; } /* ===================================================== MOBILE HEADER ===================================================== */ .mobile-app-header { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; height: var(--mobile-header-height) !important; padding: env(safe-area-inset-top) 12px 0 12px !important; box-sizing: border-box !important; background: rgba(255,255,255,.96) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border-bottom: 1px solid rgba(0,0,0,.07) !important; z-index: 11000 !important; } .mobile-app-header__right, .mobile-app-header__left { display: flex !important; align-items: center !important; gap: 8px !important; } .mobile-app-header__menu, .mobile-app-header__action { width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 10px !important; background: #f4f4f4 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .mobile-app-header__title { font-size: 16px !important; font-weight: 800 !important; } /* ===================================================== BOTTOM NAV ===================================================== */ .mobile-bottom-nav { position: fixed !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: calc( var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) ) !important; min-height: var(--mobile-bottom-nav-height) !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; padding: 5px 7px env(safe-area-inset-bottom) !important; box-sizing: border-box !important; background: rgba(255,255,255,.97) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border-top: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 -5px 20px rgba(0,0,0,.08) !important; z-index: 11000 !important; transform: translate3d(0,0,0) !important; visibility: visible !important; opacity: 1 !important; } .mobile-bottom-nav__item { min-height: 52px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; border: 0 !important; background: transparent !important; text-decoration: none !important; font-size: 11px !important; font-weight: 700 !important; color: #777 !important; } .mobile-bottom-nav__icon { font-size: 20px !important; line-height: 1 !important; } .mobile-bottom-nav__item.active { color: #46b6a0 !important; } /* ===================================================== DASHBOARD TOOLBAR ===================================================== */ .mobile-dashboard-toolbar { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 7px !important; width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; } .mobile-dashboard-toolbar__button { min-width: 0 !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 11px !important; background: #fff !important; color: #333 !important; font-size: 11px !important; font-weight: 800 !important; box-shadow: 0 2px 7px rgba(0,0,0,.06) !important; } .mobile-dashboard-toolbar__button span:first-child { font-size: 18px !important; line-height: 1 !important; } .mobile-dashboard-toolbar__add { background: #46b6a0 !important; color: #fff !important; border-color: #46b6a0 !important; } /* ===================================================== MOBILE SEARCH BAR ===================================================== */ .mobile-dashboard-searchbar { display: none; width: 100%; margin: 0 0 10px; } .mobile-dashboard-searchbar.is-visible { display: block !important; } .mobile-dashboard-searchbar input { width: 100% !important; height: 44px !important; box-sizing: border-box !important; padding: 0 13px !important; border: 1px solid rgba(0,0,0,.12) !important; border-radius: 11px !important; background: #fff !important; font-size: 14px !important; } /* Original desktop search stays functional, but is visually hidden on mobile. */ body.mobile-shell-active .filters #search-input, body.mobile-shell-active .filters label[for="search-input"] { display: none !important; } /* ===================================================== FILTER PANEL ===================================================== */ body.mobile-shell-active .filters.mobile-filter-panel { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: min(310px, 84vw) !important; max-width: 310px !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; padding: 58px 13px 24px !important; box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; background: #fff !important; border-radius: 16px 0 0 16px !important; box-shadow: -8px 0 28px rgba(0,0,0,.17) !important; z-index: 12000 !important; transform: translateX(110%) !important; visibility: hidden !important; opacity: 0 !important; transition: transform .23s ease, opacity .2s ease, visibility .23s ease !important; } body.mobile-shell-active .filters.mobile-filter-panel.mobile-filters-open { transform: translateX(0) !important; visibility: visible !important; opacity: 1 !important; } body.mobile-shell-active .filters.mobile-filter-panel input, body.mobile-shell-active .filters.mobile-filter-panel select { min-height: 38px !important; height: 38px !important; padding: 5px 9px !important; font-size: 12px !important; border-radius: 8px !important; } body.mobile-shell-active .filters.mobile-filter-panel label { font-size: 11px !important; margin-bottom: 3px !important; } body.mobile-shell-active .filters.mobile-filter-panel .filter-group { margin-bottom: 8px !important; gap: 4px !important; } body.mobile-shell-active .filters.mobile-filter-panel button { min-height: 38px !important; height: 38px !important; padding: 5px 10px !important; font-size: 11px !important; border-radius: 8px !important; } /* Existing new-file button must NOT appear inside filter drawer */ body.mobile-shell-active .filters.mobile-filter-panel #new-file { display: none !important; } .mobile-filter-close { position: absolute !important; top: 11px !important; left: 11px !important; width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #f1f1f1 !important; color: #333 !important; font-size: 23px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ===================================================== FILTER BACKDROP ===================================================== */ .mobile-dashboard-filter-backdrop { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.36) !important; z-index: 11900 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .2s ease, visibility .2s ease !important; } .mobile-dashboard-filter-backdrop.is-visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ===================================================== PROPERTY CARDS ===================================================== */ body.mobile-shell-active .property-card { min-height: 0 !important; margin-bottom: 7px !important; padding: 8px !important; border-radius: 12px !important; } body.mobile-shell-active .property-card img { max-height: 105px !important; object-fit: cover !important; } body.mobile-shell-active .property-card h3, body.mobile-shell-active .property-card .property-title { margin: 2px 0 !important; font-size: 13px !important; line-height: 1.4 !important; } body.mobile-shell-active .property-card p, body.mobile-shell-active .property-card span { font-size: 11px !important; line-height: 1.35 !important; } body.mobile-shell-active .property-card .card-body, body.mobile-shell-active .property-card .property-info { padding: 5px 0 !important; } body.mobile-shell-active .property-card button { min-height: 33px !important; height: 33px !important; padding: 4px 8px !important; font-size: 10px !important; border-radius: 7px !important; } /* ===================================================== GENERIC MOBILE FORMS ===================================================== */ input, select, textarea { font-size: 16px; } button, a { -webkit-tap-highlight-color: transparent; } } /* ========================================================= VERY SMALL PHONES ========================================================= */ @media (max-width: 480px) { .mobile-dashboard-toolbar { gap: 5px !important; } .mobile-dashboard-toolbar__button { height: 42px !important; font-size: 10px !important; } body.mobile-shell-active .filters.mobile-filter-panel { width: 88vw !important; max-width: 300px !important; } body.mobile-shell-active .property-card { padding: 7px !important; } body.mobile-shell-active .property-card img { max-height: 95px !important; } } /* ========================================================= MOBILE MASTER - CLEAN DASHBOARD OVERRIDES ========================================================= */ @media (max-width: 768px) { /* The old top mobile header is not part of the current dashboard mobile shell. */ .mobile-app-header, #mobile-app-header-container { display: none !important; } /* One-column property cards on mobile. */ .property-grid, .properties-grid, .property-list, .files-grid, .dashboard-grid, .cards-grid { grid-template-columns: 1fr !important; } /* If the dashboard uses a generic grid container, force its direct cards into one column. */ .main .property-card, .main-content .property-card { width: 100% !important; max-width: none !important; } /* Filter drawer starts CLOSED. */ .mobile-filter-panel { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: min(310px, 86vw) !important; max-width: 86vw !important; margin: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; transform: translateX(110%) !important; visibility: hidden !important; opacity: 0 !important; z-index: 2100 !important; transition: transform .25s ease, opacity .2s ease, visibility .2s ease !important; } .mobile-filter-panel.mobile-filters-open { transform: translateX(0) !important; visibility: visible !important; opacity: 1 !important; } /* Filter backdrop */ .mobile-dashboard-filter-backdrop { position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, .42) !important; opacity: 0 !important; visibility: hidden !important; z-index: 2050 !important; transition: opacity .2s ease, visibility .2s ease !important; } .mobile-dashboard-filter-backdrop.is-visible { opacity: 1 !important; visibility: visible !important; } /* Compact filter controls */ .mobile-filter-panel input, .mobile-filter-panel select, .mobile-filter-panel button { min-height: 42px !important; } .mobile-filter-panel .filter-group, .mobile-filter-panel .form-group { margin-bottom: 10px !important; } /* Search drawer */ .mobile-dashboard-searchbar { position: relative; z-index: 1600; width: 100%; margin: 0 0 12px; } .mobile-dashboard-searchbar__inner { display: flex; align-items: center; gap: 8px; width: 100%; } .mobile-dashboard-searchbar input { flex: 1; min-width: 0; min-height: 44px; } .mobile-dashboard-searchbar button { width: 44px; height: 44px; flex: 0 0 44px; } /* Toolbar remains outside filter drawer. */ #mobile-dashboard-toolbar { position: relative !important; z-index: 1500 !important; } /* Compact property cards */ .property-card { min-height: 0 !important; height: auto !important; } } /* ================================================================ FINAL MOBILE TOOLBAR / FILTER LAYOUT ================================================================ */ @media (max-width: 768px) { /* -------------------------------------------------------------- 1. Hamburger / sidebar trigger is not part of mobile UX -------------------------------------------------------------- */ #mobile-app-menu, #menu-toggle, .menu-toggle, .mobile-menu-toggle, [data-mobile-menu-toggle] { display: none !important; } /* Keep sidebar itself available only as a legacy element, but never expose its trigger in the mobile application UI. */ .sidebar-overlay { display: none !important; } /* -------------------------------------------------------------- 2. Dashboard toolbar -------------------------------------------------------------- */ .mobile-dashboard-toolbar, #mobile-dashboard-toolbar { width: 100%; display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 8px !important; margin-bottom: 8px !important; } .mobile-dashboard-toolbar > * { flex: 1 1 0; min-width: 0; } /* -------------------------------------------------------------- 3. Search bar MUST be below the three buttons -------------------------------------------------------------- */ .mobile-dashboard-searchbar, #mobile-dashboard-searchbar { width: 100% !important; order: 2 !important; margin: 0 0 10px 0 !important; position: relative !important; box-sizing: border-box !important; } .mobile-dashboard-searchbar input, #mobile-dashboard-search-input { width: 100% !important; min-height: 46px !important; box-sizing: border-box !important; font-size: 16px !important; } /* -------------------------------------------------------------- 4. Filter drawer -------------------------------------------------------------- */ .mobile-filter-panel, .filters.mobile-filter-panel { width: min(92vw, 360px) !important; max-width: 360px !important; box-sizing: border-box !important; padding: 58px 14px 14px 14px !important; } /* * Filter controls: two columns. * This applies to common filter wrappers without changing * desktop CSS. */ .mobile-filter-panel .filters-grid, .mobile-filter-panel .filter-grid, .mobile-filter-panel .filter-fields, .mobile-filter-panel .filters-content, .mobile-filter-panel form, .mobile-filter-panel .filter-controls { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; box-sizing: border-box !important; } /* * If the existing filter fields are direct children of the panel, * use the same two-column layout. */ .mobile-filter-panel > .filter-group, .mobile-filter-panel > .filter-item, .mobile-filter-panel > label, .mobile-filter-panel > .form-group, .mobile-filter-panel > .field-group { min-width: 0 !important; } .mobile-filter-panel input, .mobile-filter-panel select, .mobile-filter-panel button { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .mobile-filter-panel input, .mobile-filter-panel select { min-height: 42px !important; font-size: 15px !important; } /* * Headings and full-width elements should occupy both columns. */ .mobile-filter-panel h1, .mobile-filter-panel h2, .mobile-filter-panel h3, .mobile-filter-panel .filter-title, .mobile-filter-panel .filter-header, .mobile-filter-panel .mobile-filter-close { grid-column: auto !important; } .mobile-filter-panel .filter-actions { grid-column: 1 / -1 !important; } /* On very narrow phones keep things readable. */ @media (max-width: 390px) { .mobile-filter-panel .filters-grid, .mobile-filter-panel .filter-grid, .mobile-filter-panel .filter-fields, .mobile-filter-panel .filters-content, .mobile-filter-panel form, .mobile-filter-panel .filter-controls { gap: 8px !important; } .mobile-filter-panel { padding: 12px !important; } } } /* ================================================================ FINAL MOBILE FILTER LAYOUT ================================================================ */ @media (max-width: 768px) { /* ------------------------------------------------------------ SEARCH CLOSE BUTTON ------------------------------------------------------------ */ .mobile-dashboard-searchbar #mobile-dashboard-search-close { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important; border: 1px solid var(--border) !important; border-radius: 10px !important; background: var(--bg-card) !important; cursor: pointer !important; } .mobile-dashboard-searchbar #mobile-dashboard-search-close::before, .mobile-dashboard-searchbar #mobile-dashboard-search-close::after { content: "" !important; position: absolute !important; width: 20px !important; height: 2px !important; border-radius: 2px !important; background: currentColor !important; } .mobile-dashboard-searchbar #mobile-dashboard-search-close::before { transform: rotate(45deg) !important; } .mobile-dashboard-searchbar #mobile-dashboard-search-close::after { transform: rotate(-45deg) !important; } /* ------------------------------------------------------------ FILTER ROWS همه فیلترها دو ستونه ------------------------------------------------------------ */ body.mobile-shell-active .filters.mobile-filter-panel .filter-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px !important; width: 100% !important; box-sizing: border-box !important; margin-bottom: 10px !important; } /* ------------------------------------------------------------ PRICE FILTERS حداقل/حداکثر قیمت و سایر فیلترهای مالی تک ستونه ------------------------------------------------------------ */ body.mobile-shell-active .filters.mobile-filter-panel #price-filter-row { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } /* ------------------------------------------------------------ PRICE INPUTS ------------------------------------------------------------ */ body.mobile-shell-active .filters.mobile-filter-panel #price-filter-row input { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------------ سایر کنترلهای فیلتر ------------------------------------------------------------ */ body.mobile-shell-active .filters.mobile-filter-panel .filter-row > input, body.mobile-shell-active .filters.mobile-filter-panel .filter-row > select { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------------ امکانات ساختار و استایل فعلی دستنخورده باقی میماند. فقط اجازه نمیدهیم قوانین عمومی filter-row روی آن اثر بگذارد. ------------------------------------------------------------ */ body.mobile-shell-active .filters.mobile-filter-panel .amenities, body.mobile-shell-active .filters.mobile-filter-panel .amenities-grid, body.mobile-shell-active .filters.mobile-filter-panel .features, body.mobile-shell-active .filters.mobile-filter-panel .features-grid { display: revert !important; } /* ------------------------------------------------------------ موبایلهای خیلی کوچک ------------------------------------------------------------ */ @media (max-width: 390px) { body.mobile-shell-active .filters.mobile-filter-panel .filter-row { gap: 8px !important; margin-bottom: 8px !important; } body.mobile-shell-active .filters.mobile-filter-panel input, body.mobile-shell-active .filters.mobile-filter-panel select { font-size: 14px !important; } } } /* ================================================================ FINAL REAL MOBILE FILTER STRUCTURE Based on actual dashboard.html structure ================================================================ */ @media (max-width: 768px) { /* ------------------------------------------------------------ SEARCH CLOSE BUTTON ------------------------------------------------------------ */ .mobile-dashboard-searchbar #mobile-dashboard-search-close { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important; border: 1px solid var(--border) !important; border-radius: 10px !important; background: var(--bg-card) !important; color: currentColor !important; font-family: Arial, sans-serif !important; font-size: 30px !important; font-weight: 400 !important; line-height: 1 !important; cursor: pointer !important; box-sizing: border-box !important; opacity: 1 !important; visibility: visible !important; } /* Search close X */ .mobile-dashboard-searchbar #mobile-dashboard-search-close::before, .mobile-dashboard-searchbar #mobile-dashboard-search-close::after { content: "" !important; position: absolute !important; width: 20px !important; height: 2px !important; border-radius: 2px !important; background: currentColor !important; display: block !important; } .mobile-dashboard-searchbar #mobile-dashboard-search-close::before { transform: rotate(45deg) !important; } .mobile-dashboard-searchbar #mobile-dashboard-search-close::after { transform: rotate(-45deg) !important; } /* ------------------------------------------------------------ FILTER ROW 1 + ROW 2 Actual HTML: .filter-row select/input select/input ... Therefore the ROW itself must be two-column grid. ------------------------------------------------------------ */ body.mobile-shell-active .filters.mobile-filter-panel .filter-row:not(.features):not(#price-filter-row) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 10px !important; row-gap: 10px !important; width: 100% !important; box-sizing: border-box !important; margin-bottom: 10px !important; } /* Every actual input/select occupies one grid cell */ body.mobile-shell-active .filters.mobile-filter-panel .filter-row:not(.features):not(#price-filter-row) > input, body.mobile-shell-active .filters.mobile-filter-panel .filter-row:not(.features):not(#price-filter-row) > select { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------------ PRICE ROW User specifically wants minimum/maximum price in single column. The entire price section therefore stays one column. ------------------------------------------------------------ */ body.mobile-shell-active .filters.mobile-filter-panel #price-filter-row { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; margin-bottom: 10px !important; box-sizing: border-box !important; } body.mobile-shell-active .filters.mobile-filter-panel #price-filter-row > input { display: block !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------------ SEARCH ROW INSIDE ORIGINAL FILTERS This is the old desktop search and remains hidden. ------------------------------------------------------------ */ body.mobile-shell-active .filters.mobile-filter-panel .filter-row:has(#search-input) { display: none !important; } /* ------------------------------------------------------------ FEATURES IMPORTANT: Existing features styling remains untouched. We explicitly prevent the two-column filter rule from affecting .features. ------------------------------------------------------------ */ body.mobile-shell-active .filters.mobile-filter-panel .filter-row.features { display: revert !important; } body.mobile-shell-active .filters.mobile-filter-panel .filter-row.features label { width: auto !important; min-width: 0 !important; } /* ------------------------------------------------------------ FILTER INPUT SIZE ------------------------------------------------------------ */ body.mobile-shell-active .filters.mobile-filter-panel .filter-row:not(.features) input, body.mobile-shell-active .filters.mobile-filter-panel .filter-row:not(.features) select { min-height: 42px !important; height: 42px !important; font-size: 14px !important; box-sizing: border-box !important; } /* ------------------------------------------------------------ SMALL PHONES ------------------------------------------------------------ */ @media (max-width: 390px) { body.mobile-shell-active .filters.mobile-filter-panel .filter-row:not(.features):not(#price-filter-row) { column-gap: 8px !important; row-gap: 8px !important; } body.mobile-shell-active .filters.mobile-filter-panel .filter-row:not(.features) input, body.mobile-shell-active .filters.mobile-filter-panel .filter-row:not(.features) select { font-size: 13px !important; } } } /* ============================================================ FINAL MOBILE FILTER CLOSE BUTTON ============================================================ */ .mobile-filter-panel > #mobile-filter-close { position: absolute !important top: 11px !important left: 11px !important width: 36px !important height: 36px !important min-width: 36px !important max-width: 36px !important min-height: 36px !important max-height: 36px !important padding: 0 !important margin: 0 !important display: flex !important align-items: center !important justify-content: center !important flex: 0 0 36px !important box-sizing: border-box !important border: 1px solid rgba(0,0,0,.10) !important border-radius: 50% !important background: #f1f1f1 !important color: #333 !important font-size: 0 !important line-height: 1 !important appearance: none !important -webkit-appearance: none !important z-index: 20 !important cursor: pointer !important } .mobile-filter-panel > #mobile-filter-close::before, .mobile-filter-panel > #mobile-filter-close::after { content: "" !important position: absolute !important top: 50% !important left: 50% !important width: 18px !important height: 2px !important margin: 0 !important border-radius: 2px !important background: currentColor !important display: block !important } .mobile-filter-panel > #mobile-filter-close::before { transform: translate(-50%, -50%) rotate(45deg) !important } .mobile-filter-panel > #mobile-filter-close::after { transform: translate(-50%, -50%) rotate(-45deg) !important } /* * Override the generic mobile filter rule that makes every * button 100% wide. */ .mobile-filter-panel > #mobile-filter-close { width: 36px !important min-width: 36px !important max-width: 36px !important height: 36px !important min-height: 36px !important max-height: 36px !important } /* ========================================================= MOBILE BOTTOM NAV LUXURY GREEN APP STYLE ========================================================= */ @media (max-width: 768px) { .mobile-bottom-nav { height: calc( 72px + env(safe-area-inset-bottom) ) !important; min-height: 72px !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; align-items: stretch !important; padding: 7px 8px env(safe-area-inset-bottom) !important; background: #46b6a0 !important; border: 0 !important; border-radius: 20px 20px 0 0 !important; box-shadow: 0 -6px 24px rgba(0, 0, 0, .12) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: hidden !important; } /* ----------------------------------------------------- NAV ITEMS ----------------------------------------------------- */ .mobile-bottom-nav__item { position: relative !important; min-height: 58px !important; height: 58px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 4px 4px !important; margin: 0 !important; border: 0 !important; border-radius: 16px !important; background: transparent !important; color: rgba(255,255,255,.72) !important; text-decoration: none !important; font-size: 11px !important; font-weight: 700 !important; cursor: pointer !important; transition: color .22s ease, transform .22s ease, background-color .22s ease !important; -webkit-tap-highlight-color: transparent !important; } /* ----------------------------------------------------- ICON CIRCLE ----------------------------------------------------- */ .mobile-bottom-nav__icon { position: relative !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; font-size: 19px !important; line-height: 1 !important; color: rgba(255,255,255,.76) !important; background: transparent !important; transition: background-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease !important; } /* ----------------------------------------------------- LABEL ----------------------------------------------------- */ .mobile-bottom-nav__label { display: block !important; line-height: 1.2 !important; white-space: nowrap !important; color: rgba(255,255,255,.72) !important; transition: color .22s ease, opacity .22s ease !important; } /* ----------------------------------------------------- ACTIVE ITEM ----------------------------------------------------- */ .mobile-bottom-nav__item.active { color: #ffffff !important; transform: translateY(-1px) !important; } .mobile-bottom-nav__item.active .mobile-bottom-nav__icon { color: #46b6a0 !important; background: #ffffff !important; box-shadow: 0 4px 12px rgba(0,0,0,.10) !important; transform: scale(1.04) !important; } .mobile-bottom-nav__item.active .mobile-bottom-nav__label { color: #ffffff !important; opacity: 1 !important; } /* ----------------------------------------------------- INACTIVE ITEMS ----------------------------------------------------- */ .mobile-bottom-nav__item:not(.active) .mobile-bottom-nav__icon { color: rgba(255,255,255,.72) !important; } .mobile-bottom-nav__item:not(.active) .mobile-bottom-nav__label { color: rgba(255,255,255,.72) !important; } /* ----------------------------------------------------- TOUCH FEEDBACK ----------------------------------------------------- */ .mobile-bottom-nav__item:active { transform: scale(.97) !important; } .mobile-bottom-nav__item:active .mobile-bottom-nav__icon { transform: scale(.94) !important; } /* ----------------------------------------------------- MORE BUTTON ----------------------------------------------------- */ .mobile-bottom-nav__item--action { appearance: none !important; -webkit-appearance: none !important; } /* ----------------------------------------------------- VERY SMALL SCREENS ----------------------------------------------------- */ @media (max-width: 360px) { .mobile-bottom-nav { padding-left: 5px !important; padding-right: 5px !important; } .mobile-bottom-nav__item { font-size: 10px !important; } .mobile-bottom-nav__icon { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; font-size: 18px !important; } } } /* ========================================================= MOBILE BOTTOM NAV FLOATING GLASS REFINEMENT ========================================================= */ @media (max-width: 768px) { .mobile-bottom-nav { right: 10px !important; left: 10px !important; bottom: calc( 8px + env(safe-area-inset-bottom) ) !important; width: auto !important; height: 58px !important; min-height: 58px !important; padding: 4px 6px !important; grid-template-columns: repeat(4, 1fr) !important; background: rgba(70, 182, 160, .88) !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 18px !important; box-shadow: 0 8px 28px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08) !important; backdrop-filter: blur(14px) saturate(125%) !important; -webkit-backdrop-filter: blur(14px) saturate(125%) !important; overflow: hidden !important; } .mobile-bottom-nav__item { min-height: 50px !important; height: 50px !important; gap: 2px !important; border-radius: 14px !important; font-size: 10px !important; } .mobile-bottom-nav__icon { width: 29px !important; height: 29px !important; min-width: 29px !important; min-height: 29px !important; font-size: 17px !important; transition: background-color .20s ease, color .20s ease, transform .20s ease, box-shadow .20s ease !important; } .mobile-bottom-nav__item.active .mobile-bottom-nav__icon { background: rgba(255,255,255,.96) !important; color: #46b6a0 !important; box-shadow: 0 3px 10px rgba(0,0,0,.12) !important; transform: scale(1.02) !important; } .mobile-bottom-nav__label { font-size: 10px !important; color: rgba(255,255,255,.70) !important; } .mobile-bottom-nav__item.active .mobile-bottom-nav__label { color: rgba(255,255,255,.98) !important; } .mobile-bottom-nav__item:active { transform: scale(.97) !important; } @media (max-width: 360px) { .mobile-bottom-nav { right: 7px !important; left: 7px !important; bottom: calc( 6px + env(safe-area-inset-bottom) ) !important; } .mobile-bottom-nav__icon { width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; font-size: 16px !important; } .mobile-bottom-nav__label { font-size: 9px !important; } } } /* ========================================================= MOBILE BOTTOM NAV FLOATING ACTIVE ORB ========================================================= */ @media (max-width: 768px) { .mobile-bottom-nav { right: 10px !important; left: 10px !important; bottom: calc( 8px + env(safe-area-inset-bottom) ) !important; width: auto !important; height: 58px !important; min-height: 58px !important; padding: 3px 6px !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; align-items: center !important; background: rgba(70, 182, 160, .84) !important; border: 1px solid rgba(255,255,255,.20) !important; border-radius: 18px !important; box-shadow: 0 8px 26px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.07) !important; backdrop-filter: blur(16px) saturate(125%) !important; -webkit-backdrop-filter: blur(16px) saturate(125%) !important; overflow: visible !important; } /* ----------------------------------------------------- ITEMS TRUE VERTICAL CENTER ----------------------------------------------------- */ .mobile-bottom-nav__item { position: relative !important; width: 100% !important; height: 52px !important; min-height: 52px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 14px !important; background: transparent !important; color: rgba(255,255,255,.68) !important; font-size: 10px !important; font-weight: 700 !important; text-decoration: none !important; transform: none !important; transition: color .22s ease, transform .22s ease !important; -webkit-tap-highlight-color: transparent !important; } /* ----------------------------------------------------- ICON NORMAL STATE ----------------------------------------------------- */ .mobile-bottom-nav__icon { position: relative !important; width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: transparent !important; color: rgba(255,255,255,.72) !important; font-size: 17px !important; line-height: 1 !important; box-shadow: none !important; transform: none !important; transition: background-color .24s ease, color .24s ease, transform .24s ease, box-shadow .24s ease !important; } /* ----------------------------------------------------- LABEL ----------------------------------------------------- */ .mobile-bottom-nav__label { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 1.15 !important; font-size: 10px !important; font-weight: 700 !important; color: rgba(255,255,255,.68) !important; white-space: nowrap !important; transition: color .22s ease, opacity .22s ease !important; } /* ----------------------------------------------------- ACTIVE ITEM ----------------------------------------------------- */ .mobile-bottom-nav__item.active { color: #ffffff !important; transform: none !important; } /* * Active icon becomes a green floating orb. * * It deliberately moves above the navigation surface, * creating the soft "curved / lifted" appearance. */ .mobile-bottom-nav__item.active .mobile-bottom-nav__icon { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin-top: -14px !important; margin-bottom: -1px !important; background: #46b6a0 !important; color: #ffffff !important; border: 2px solid rgba(255,255,255,.90) !important; box-shadow: 0 5px 13px rgba(0,0,0,.16) !important; font-size: 18px !important; transform: none !important; z-index: 2 !important; } .mobile-bottom-nav__item.active .mobile-bottom-nav__label { color: #ffffff !important; opacity: 1 !important; position: relative !important; z-index: 3 !important; } /* ----------------------------------------------------- SUBTLE ACTIVE GLOW ----------------------------------------------------- */ .mobile-bottom-nav__item.active .mobile-bottom-nav__icon::after { content: "" !important; position: absolute !important; inset: -5px !important; border-radius: 50% !important; background: rgba(70,182,160,.16) !important; z-index: -1 !important; } /* ----------------------------------------------------- TOUCH FEEDBACK ----------------------------------------------------- */ .mobile-bottom-nav__item:active { transform: scale(.97) !important; } .mobile-bottom-nav__item.active:active .mobile-bottom-nav__icon { transform: scale(.95) !important; } /* ----------------------------------------------------- SMALL SCREENS ----------------------------------------------------- */ @media (max-width: 360px) { .mobile-bottom-nav { right: 7px !important; left: 7px !important; } .mobile-bottom-nav__icon { width: 25px !important; height: 25px !important; min-width: 25px !important; min-height: 25px !important; font-size: 16px !important; } .mobile-bottom-nav__item.active .mobile-bottom-nav__icon { width: 35px !important; height: 35px !important; min-width: 35px !important; min-height: 35px !important; margin-top: -12px !important; } .mobile-bottom-nav__label { font-size: 9px !important; } } } /* ========================================================= MOBILE BOTTOM NAV FLOATING ACTIVE ORB ========================================================= */ @media (max-width: 768px) { .mobile-bottom-nav { right: 10px !important; left: 10px !important; bottom: calc( 8px + env(safe-area-inset-bottom) ) !important; width: auto !important; height: 58px !important; min-height: 58px !important; padding: 3px 6px !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; align-items: center !important; background: rgba(70, 182, 160, .84) !important; border: 1px solid rgba(255,255,255,.20) !important; border-radius: 18px !important; box-shadow: 0 8px 26px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.07) !important; backdrop-filter: blur(16px) saturate(125%) !important; -webkit-backdrop-filter: blur(16px) saturate(125%) !important; overflow: visible !important; } /* ----------------------------------------------------- ITEMS TRUE VERTICAL CENTER ----------------------------------------------------- */ .mobile-bottom-nav__item { position: relative !important; width: 100% !important; height: 52px !important; min-height: 52px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 14px !important; background: transparent !important; color: rgba(255,255,255,.68) !important; font-size: 10px !important; font-weight: 700 !important; text-decoration: none !important; transform: none !important; transition: color .22s ease, transform .22s ease !important; -webkit-tap-highlight-color: transparent !important; } /* ----------------------------------------------------- ICON NORMAL STATE ----------------------------------------------------- */ .mobile-bottom-nav__icon { position: relative !important; width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: transparent !important; color: rgba(255,255,255,.72) !important; font-size: 17px !important; line-height: 1 !important; box-shadow: none !important; transform: none !important; transition: background-color .24s ease, color .24s ease, transform .24s ease, box-shadow .24s ease !important; } /* ----------------------------------------------------- LABEL ----------------------------------------------------- */ .mobile-bottom-nav__label { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 1.15 !important; font-size: 10px !important; font-weight: 700 !important; color: rgba(255,255,255,.68) !important; white-space: nowrap !important; transition: color .22s ease, opacity .22s ease !important; } /* ----------------------------------------------------- ACTIVE ITEM ----------------------------------------------------- */ .mobile-bottom-nav__item.active { color: #ffffff !important; transform: none !important; } /* * Active icon becomes a green floating orb. * * It deliberately moves above the navigation surface, * creating the soft "curved / lifted" appearance. */ .mobile-bottom-nav__item.active .mobile-bottom-nav__icon { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin-top: -14px !important; margin-bottom: -1px !important; background: #46b6a0 !important; color: #ffffff !important; border: 2px solid rgba(255,255,255,.90) !important; box-shadow: 0 5px 13px rgba(0,0,0,.16) !important; font-size: 18px !important; transform: none !important; z-index: 2 !important; } .mobile-bottom-nav__item.active .mobile-bottom-nav__label { color: #ffffff !important; opacity: 1 !important; position: relative !important; z-index: 3 !important; } /* ----------------------------------------------------- SUBTLE ACTIVE GLOW ----------------------------------------------------- */ .mobile-bottom-nav__item.active .mobile-bottom-nav__icon::after { content: "" !important; position: absolute !important; inset: -5px !important; border-radius: 50% !important; background: rgba(70,182,160,.16) !important; z-index: -1 !important; } /* ----------------------------------------------------- TOUCH FEEDBACK ----------------------------------------------------- */ .mobile-bottom-nav__item:active { transform: scale(.97) !important; } .mobile-bottom-nav__item.active:active .mobile-bottom-nav__icon { transform: scale(.95) !important; } /* ----------------------------------------------------- SMALL SCREENS ----------------------------------------------------- */ @media (max-width: 360px) { .mobile-bottom-nav { right: 7px !important; left: 7px !important; } .mobile-bottom-nav__icon { width: 25px !important; height: 25px !important; min-width: 25px !important; min-height: 25px !important; font-size: 16px !important; } .mobile-bottom-nav__item.active .mobile-bottom-nav__icon { width: 35px !important; height: 35px !important; min-width: 35px !important; min-height: 35px !important; margin-top: -12px !important; } .mobile-bottom-nav__label { font-size: 9px !important; } } } /* KH MOBILE NAV FINAL FIX 20261004 */ /* Keep every navigation item vertically centered */ .mobile-bottom-nav { align-items: center !important; overflow: visible !important; } .mobile-bottom-nav__item { position: relative !important; height: 58px !important; min-height: 58px !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; gap: 2px !important; transform: none !important; } /* Normal icon */ .mobile-bottom-nav__item .mobile-bottom-nav__icon { position: relative !important; width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 27px !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; z-index: 3 !important; } /* Normal label */ .mobile-bottom-nav__item .mobile-bottom-nav__label { position: relative !important; display: block !important; height: 17px !important; line-height: 17px !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; font-size: 10px !important; font-weight: 700 !important; z-index: 3 !important; } /* ACTIVE ITEM */ .mobile-bottom-nav__item.active { color: #ffffff !important; overflow: visible !important; } /* Raised green circle */ .mobile-bottom-nav__item.active .mobile-bottom-nav__icon { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; flex: 0 0 40px !important; margin-top: -12px !important; margin-bottom: -1px !important; border-radius: 50% !important; background: #46b6a0 !important; color: #ffffff !important; border: 0 !important; box-shadow: 0 6px 14px rgba(0,0,0,.16) !important; z-index: 10 !important; } /* Active text */ .mobile-bottom-nav__item.active .mobile-bottom-nav__label { color: #ffffff !important; opacity: 1 !important; z-index: 10 !important; } /* Soft green upper curve behind the active circle */ .mobile-bottom-nav__item.active::before { content: "" !important; position: absolute !important; width: 52px !important; height: 52px !important; left: 50% !important; top: -5px !important; transform: translateX(-50%) !important; border-radius: 50% !important; background: #46b6a0 !important; z-index: 1 !important; pointer-events: none !important; } /* Make active circle visually continuous with the nav */ .mobile-bottom-nav__item.active .mobile-bottom-nav__icon, .mobile-bottom-nav__item.active .mobile-bottom-nav__label { position: relative !important; } /* Touch feedback */ .mobile-bottom-nav__item:active { transform: scale(.97) !important; } @media (max-width: 360px) { .mobile-bottom-nav__item .mobile-bottom-nav__icon { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; flex-basis: 26px !important; } .mobile-bottom-nav__item.active .mobile-bottom-nav__icon { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; flex-basis: 38px !important; margin-top: -10px !important; } } /* KH MOBILE NAV VISUAL FINAL 20261004 Final floating mobile navigation visual. Desktop UI is untouched. */ @media (max-width: 768px) { .mobile-bottom-nav { right: 10px !important; left: 10px !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; width: auto !important; height: 58px !important; min-height: 58px !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; padding: 0 8px !important; box-sizing: border-box !important; align-items: center !important; background: rgba(70, 182, 160, 0.88) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 20px !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08) !important; overflow: visible !important; } .mobile-bottom-nav__item { position: relative !important; width: 100% !important; height: 58px !important; min-height: 58px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 0 !important; margin: 0 !important; color: rgba(255, 255, 255, 0.72) !important; background: transparent !important; border: 0 !important; text-decoration: none !important; box-sizing: border-box !important; } .mobile-bottom-nav__icon { position: relative !important; width: 27px !important; height: 27px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; box-sizing: border-box !important; font-size: 18px !important; line-height: 1 !important; background: transparent !important; border: 0 !important; transition: width .22s ease, height .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease !important; } .mobile-bottom-nav__label { position: relative !important; margin: 0 !important; padding: 0 !important; font-size: 10px !important; line-height: 16px !important; font-weight: 700 !important; color: inherit !important; white-space: nowrap !important; } /* Active item: the green orb rises above the top edge. */ .mobile-bottom-nav__item.active { color: #ffffff !important; z-index: 5 !important; } .mobile-bottom-nav__item.active .mobile-bottom-nav__icon { width: 40px !important; height: 40px !important; margin-top: -20px !important; background: #46b6a0 !important; border: 2px solid rgba(255, 255, 255, 0.92) !important; box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18), 0 0 0 5px rgba(70, 182, 160, 0.16) !important; transform: translateY(-1px) !important; } .mobile-bottom-nav__item.active .mobile-bottom-nav__label { margin-top: -1px !important; color: #ffffff !important; } .mobile-bottom-nav__item:not(.active) .mobile-bottom-nav__icon { transform: translateY(0) !important; } .mobile-bottom-nav__item:active .mobile-bottom-nav__icon { transform: scale(.94) !important; } .mobile-bottom-nav__item.active:active .mobile-bottom-nav__icon { transform: translateY(-1px) scale(.95) !important; } }