/* ═══════════════════════════════════════════════════════════════ MyBoodaa Location Explore – Frontend v1.0 Cover Card → Fullscreen Split (Map + Place Cards) ═══════════════════════════════════════════════════════════════ */ /* ── Defaults (overridden by inline vars from PHP) ── */ .mble-wrapper { --mble-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; --mble-title-size: 28px; --mble-title-weight: 700; --mble-subtitle-size: 14px; --mble-overlay-opacity: 0.55; --mble-radius: 20px; --mble-accent: #2563eb; font-family: var(--mble-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mble-wrapper *, .mble-wrapper *::before, .mble-wrapper *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ═══════════════════════════════════════ COVER CARD ═══════════════════════════════════════ */ .mble-cover { width: 100%; border-radius: var(--mble-radius); overflow: hidden; position: relative; cursor: pointer; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #1a1a2e; transition: transform 0.35s cubic-bezier(.22, 1, .36, 1), box-shadow 0.35s ease; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); container-type: inline-size; container-name: mble-cover; } .mble-cover:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); } .mble-cover:active { transform: scale(0.98); } /* Gradient overlay */ .mble-cover__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, var(--mble-overlay-opacity)) 0%, rgba(0, 0, 0, calc(var(--mble-overlay-opacity) * 0.3)) 50%, transparent 100%); pointer-events: none; z-index: 1; } /* ── CONTENT OVERLAY ── */ .mble-cover__content { position: absolute; inset: 0; z-index: 2; padding: 30px; display: flex; flex-direction: column; justify-content: var(--mble-cover-align-y, flex-end); box-sizing: border-box; } .mble-cover__title { font-family: var(--mble-title-font, var(--mble-font)) !important; font-size: var(--mble-title-size, 28px) !important; font-weight: var(--mble-title-weight) !important; color: var(--mble-title-color, #ffffff) !important; line-height: var(--mble-title-lh, 1.1) !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); margin: 0 0 6px !important; } .mble-cover__subtitle { font-family: var(--mble-subtitle-font, var(--mble-font)) !important; font-size: var(--mble-subtitle-size, 14px) !important; font-weight: var(--mble-subtitle-weight, 400) !important; color: var(--mble-subtitle-color, rgba(255, 255, 255, 0.85)) !important; line-height: var(--mble-subtitle-lh, 1.4) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); margin: 0 !important; } /* Container queries for small placements */ @container mble-cover (max-width: 200px) { .mble-cover__content { padding: 10px; } .mble-cover__title { line-height: 1.2 !important; } .mble-cover__subtitle { display: none !important; } } @container mble-cover (min-width: 201px) and (max-width: 300px) { .mble-cover__content { padding: 14px; } } /* ═══════════════════════════════════════ FULLSCREEN MODAL Injected into by JS ═══════════════════════════════════════ */ .mble-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: calc(var(--mble-true-vh, 1vh) * 100); z-index: 999999; display: flex; flex-direction: column; overflow: hidden; background: #f5f5f7; font-family: var(--mble-font); -webkit-font-smoothing: antialiased; opacity: 0; visibility: hidden; transition: opacity 0.4s cubic-bezier(.22, 1, .36, 1), visibility 0.4s; } .mble-modal.mble-modal--open { opacity: 1; visibility: visible; } /* ── MAP SECTION (top half) ── */ .mble-modal__map-wrap { position: relative; flex: 0 0 auto; height: calc(var(--mble-true-vh, 1vh) * 45); max-height: calc(var(--mble-true-vh, 1vh) * 50); min-height: 200px; border-radius: 0 0 24px 24px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); z-index: 2; } .mble-modal__map { width: 100%; height: 100%; background: #e5e7eb; } /* Hide Google branding & replace with custom logo */ .mble-modal__map a[href*="maps.google"], .mble-modal__map a[href*="google.com/maps"] { display: none !important; } .mble-modal__map-wrap::after { content: var(--mble-logo-text, 'myboodaa location'); position: absolute; bottom: 32px; left: 12px; z-index: 3; font-family: var(--mble-logo-font, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif); font-size: var(--mble-logo-size, 13px); font-weight: var(--mble-logo-weight, 800); letter-spacing: -0.02em; color: var(--mble-logo-color, #1a1a1a); pointer-events: none; text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.7); } /* Google Maps zoom controls — remove white box, keep +/- only */ .mble-modal__map .gmnoprint > div { background: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; } .mble-modal__map .gmnoprint button { background: rgba(255, 255, 255, 0.85) !important; border-radius: 50% !important; width: 36px !important; height: 36px !important; margin: 4px 0 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .mble-modal__map .gmnoprint button:hover { background: rgba(255, 255, 255, 1) !important; } /* Hide the divider line between + and - */ .mble-modal__map .gmnoprint > div > div { display: none !important; } /* Close button – floating on map */ .mble-modal__close { position: absolute; top: var(--mble-close-top, 16px); bottom: var(--mble-close-bottom, auto); right: var(--mble-close-right, 16px); left: var(--mble-close-left, auto); width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: opacity 0.2s; outline: none !important; } .mble-modal__close:hover { opacity: 0.6; } .mble-modal__close svg { width: 24px !important; height: 24px !important; stroke: var(--mble-close-color, #111) !important; stroke-width: 2.5; fill: none; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)); } /* ── CONTENT SECTION (bottom half) ── */ .mble-modal__content { flex: 1 1 0; min-height: 0; max-height: 100%; padding: 20px 0 20px; background: #f5f5f7; z-index: 1; display: flex; flex-direction: column; overflow: hidden; -ms-overflow-style: none; scrollbar-width: none; font-family: var(--mble-modal-font, var(--mble-font)); font-size: var(--mble-modal-size, 15px); font-weight: var(--mble-modal-weight, 400); color: var(--mble-modal-color, #111); line-height: var(--mble-modal-lh, 1.4); } .mble-modal__content *, .mble-center-card__name, .mble-center-card__address, .mble-center-card__rating-num, .mble-modal__main-title, .mble-modal__main-subtitle { font-family: inherit; color: inherit; } /* Title bar — per-shortcode title/subtitle */ .mble-modal__title-bar { padding: 0 20px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin-bottom: 2px; } .mble-modal__main-title { font-size: 1.33em; font-weight: inherit; margin: 0 0 2px; line-height: 1.2; } .mble-modal__main-subtitle { font-size: 0.86em; font-weight: inherit; margin: 0; opacity: 0.8; line-height: 1.4; } /* Hide any stray scrollbar on content area */ .mble-modal__content::-webkit-scrollbar { display: none; } /* ── CENTER RICH CARD (Google Maps Style) ── */ .mble-center-card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; margin: 16px 20px 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); flex: 1 1 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mble-center-card__image { width: 100%; height: 140px; background-size: cover; background-position: center; background-color: #f3f4f6; flex-shrink: 0; border-radius: 16px 16px 0 0; } .mble-center-card__info { flex-shrink: 0; padding: 16px; display: flex; flex-direction: column; min-width: 0; } .mble-center-card__type { font-size: 0.73em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; opacity: 0.7; } .mble-center-card__name { font-size: 1.2em; font-weight: inherit; margin: 0 0 6px 0; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mble-center-card__rating { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } .mble-center-card__stars { color: #f59e0b; font-size: 0.93em; letter-spacing: 1px; } .mble-center-card__rating-num { font-size: 0.86em; font-weight: inherit; } .mble-center-card__reviews { font-size: 0.8em; opacity: 0.7; } .mble-center-card__address { font-size: 0.86em; font-weight: inherit; line-height: 1.4; margin: 0 0 12px 0; opacity: 0.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* btn removed — users should never leave the page */ /* ── PLACE CARD (Modern Background Style) ── */ .mble-place-card { flex-shrink: 0; width: 220px; height: 280px; border-radius: 20px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; cursor: pointer; scroll-snap-align: start; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease; display: flex; flex-direction: column; } .mble-place-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); } .mble-place-card.mble-place-card--active { box-shadow: 0 0 0 3px var(--mble-accent, #2563eb), 0 12px 30px rgba(37, 99, 235, 0.3); transform: translateY(-4px); } /* Gradient overlay to make text readable */ .mble-place-card__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.85) 100%); pointer-events: none; z-index: 1; } .mble-place-card__content { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: 16px; } .mble-place-card__header { flex: 1; display: flex; justify-content: flex-end; align-items: flex-start; } .mble-place-card__type { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #fff; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 4px 10px; border-radius: 20px; } .mble-place-card__footer { flex-shrink: 0; } .mble-place-card__name { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.25; margin: 0 0 6px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mble-place-card__rating { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; } .mble-place-card__stars { color: #fbbf24; font-size: 14px; line-height: 1; letter-spacing: 1.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .mble-place-card__rating-num { font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .mble-place-card__reviews { font-size: 11px; color: rgba(255, 255, 255, 0.7); } .mble-place-card__address { font-size: 12px; color: rgba(255, 255, 255, 0.85); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* ── MAP LOADING STATE ── */ .mble-map-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #e5e7eb; gap: 10px; z-index: 5; } .mble-map-spinner { width: 28px; height: 28px; border: 3px solid #d1d5db; border-top-color: var(--mble-accent, #2563eb); border-radius: 50%; animation: mble-spin 0.7s linear infinite; } @keyframes mble-spin { to { transform: rotate(360deg); } } .mble-map-loading span { font-size: 12px; color: #6b7280; } /* ── MAP ERROR STATE ── */ .mble-map-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fef2f2; gap: 8px; z-index: 5; padding: 20px; text-align: center; } .mble-map-error svg { width: 32px; height: 32px; stroke: #ef4444; fill: none; } .mble-map-error span { font-size: 13px; color: #991b1b; line-height: 1.4; } /* ── QUICK-ACTION PANEL ── */ .mble-action-panel { display: flex; justify-content: space-around; align-items: flex-start; padding: 0 20px 20px; gap: 8px; flex-shrink: 0; } .mble-action-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 8px 4px; min-width: 56px; transition: transform 0.2s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; outline: none !important; box-shadow: none !important; font-family: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .mble-action-btn:focus, .mble-action-btn:focus-visible, .mble-action-btn:focus-within, .mble-action-btn:hover { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; background: none !important; border: none !important; } .mble-action-btn:active { transform: scale(0.92); } .mble-action-btn__icon { width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); display: flex; align-items: center; justify-content: center; transition: background 0.2s, box-shadow 0.2s; position: relative; } .mble-action-btn__icon svg { width: 24px; height: 24px; stroke: #555; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mble-action-btn__label { font-size: 11px; font-weight: 600; color: #555; text-align: center; line-height: 1.2; font-family: inherit; } /* Active state for toggled button */ .mble-action-btn--active .mble-action-btn__icon { background: var(--mble-accent, #2563eb); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); } .mble-action-btn--active .mble-action-btn__icon svg { stroke: #fff; } .mble-action-btn--active .mble-action-btn__label { color: var(--mble-accent, #2563eb); } /* Loading state */ .mble-action-btn--loading .mble-action-btn__icon::after { content: ''; position: absolute; inset: -3px; border: 2px solid transparent; border-top-color: var(--mble-accent, #2563eb); border-radius: 50%; animation: mble-spin 0.7s linear infinite; } /* ── ACTION TOAST (floating pill) ── */ .mble-action-toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%) translateY(0); z-index: 1000000; background: rgba(30, 30, 30, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; text-align: center; padding: 10px 24px; border-radius: 100px; font-family: inherit; white-space: nowrap; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18); animation: mble-toastIn 0.35s cubic-bezier(.22, 1, .36, 1) both; pointer-events: none; } .mble-action-toast--out { animation: mble-toastOut 0.3s cubic-bezier(.4, 0, 1, 1) both; } @keyframes mble-toastIn { from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.92); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @keyframes mble-toastOut { from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } to { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.92); } } /* ═══════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════ */ .mble-modal--open .mble-modal__map-wrap { animation: mble-fadeDown 0.5s cubic-bezier(.22, 1, .36, 1) 0.05s both; } .mble-modal--open .mble-modal__content { animation: mble-fadeUp 0.5s cubic-bezier(.22, 1, .36, 1) 0.15s both; } @keyframes mble-fadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } @keyframes mble-fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════ */ @media (max-width: 480px) { .mble-modal__map-wrap { flex: 0 0 auto !important; height: calc(var(--mble-true-vh, 1vh) * 40); min-height: 180px; } .mble-modal__content { flex: 1 1 0; } .mble-place-card { width: 170px; } .mble-modal__close { width: 36px !important; height: 36px !important; } .mble-modal__close svg { width: 18px !important; height: 18px !important; } .mble-center-card { margin: 12px 16px 16px; } .mble-center-card__image { height: 100px; } .mble-center-card__info { padding: 12px; } .mble-action-panel { padding: 0 12px 16px; gap: 4px; } .mble-action-btn__icon { width: 46px; height: 46px; } .mble-action-btn__icon svg { width: 20px; height: 20px; } .mble-action-btn__label { font-size: 10px; } } /* Landscape / wide screens: side-by-side layout */ @media (min-width: 768px) and (orientation: landscape) { .mble-modal { flex-direction: row; } .mble-modal__map-wrap { flex: 1 1 55%; border-radius: 0; } .mble-modal__content { flex: 1 1 45%; padding-top: 24px; overflow-y: auto; } .mble-action-panel { padding: 0 20px 16px; gap: 12px; justify-content: flex-start; } } /* ── Elementor compatibility ── */ .elementor-widget-shortcode .mble-wrapper, .elementor-element .mble-wrapper { width: 100%; } .elementor-widget-shortcode .mble-cover, .elementor-element .mble-cover { max-width: 100%; }