/* theSMS - Match original Next.js dark theme */ /* Google Fonts: loaded via in layout.php for better LCP (avoids render-blocking @import). */ :root { --hero-bg: #0a0a0a; --hero-card: #1a1a1a; --hero-border: #2a2a2a; --primary-300: #c4b5fd; --primary-400: #a78bfa; --primary-500: #8b5cf6; --primary-600: #7c3aed; --primary-700: #7c3aed; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-200: #e5e7eb; --text-primary: #ffffff; --text-on-primary: #ffffff; --header-bg: rgba(26, 26, 26, 0.8); /* Favourited heart: brand purple (aligns with --primary-500 / map marker accent in search.js) */ --shop-fav-on: var(--primary-500); /* Mobile chrome: sticky header + fixed bottom nav (see .header / .bottom-nav) */ --mobile-app-header-height: calc(5rem + var(--safe-area-top)); /* Rendered .header block (0.5rem + 3rem inner + 0.5rem + safe-area padding) - search filter bar aligns here on list + map */ --mobile-header-offset: calc(4rem + var(--safe-area-top)); --search-filters-bar-height: 4.25rem; /* Gap between search filter bar and Leaflet zoom controls (map view) */ --search-map-controls-gap: 0.5rem; --bottom-nav-height: 4.5rem; /* .main-content mobile padding - must match subtracts in .auth-page / .guest-gate fill */ --main-content-padding-top-mobile: 0.5rem; --main-content-padding-bottom-mobile: 4.75rem; /* Band between sticky header and fixed bottom nav (matches .auth-page / .guest-gate); use for full-height mobile panes */ --mobile-usable-viewport-height: calc( 100dvh - var(--mobile-app-header-height) - var(--bottom-nav-height) - var(--main-content-padding-top-mobile) - var(--main-content-padding-bottom-mobile) - env(safe-area-inset-bottom, 0px) ); /* Desktop fixed sidebar + main offset (was 20rem; ~⅔ for tighter rail) */ --sidebar-width-desktop: calc(20rem * 2 / 3); /* Mobile/tablet: horizontal rhythm with main, header, search (see max-width: 1023px rules) */ --page-inline-sm: 0.5rem; --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); /* Review cards, reply threads, forum posts - keep vertical rhythm aligned site-wide */ --thesms-review-list-gap: 1rem; --thesms-review-reply-gap: 1rem; --thesms-forum-post-gap: 0.75rem; /* Labels, text inputs, help text, and form CTAs — keep rhythm consistent site-wide */ --form-label-gap: 0.625rem; --form-help-gap: 0.5rem; --form-field-gap: 1.25rem; --form-actions-gap: 1rem; --form-actions-margin-top: 0.75rem; --form-btn-padding-y: 0.75rem; --form-btn-padding-x: 1.25rem; --form-control-padding-y: 0.625rem; --form-control-padding-x: 0.875rem; color-scheme: dark; } [data-theme="light"] { --hero-bg: #f3f4f6; --hero-card: #ffffff; --hero-border: #e5e7eb; --text-primary: #111827; --text-on-primary: #ffffff; --header-bg: rgba(255, 255, 255, 0.92); --gray-200: #111827; --gray-300: #4b5563; --gray-400: #6b7280; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #e5e7eb; --gray-800: #f3f4f6; color-scheme: light; } [data-theme="light"] .account-avatar-tab:hover { background: rgba(0, 0, 0, 0.06); } [data-theme="light"] .search-map-filter-hint { background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1); } [data-theme="light"] .search-map-filter-hint-text { color: var(--gray-500); } /* manipulation = no double-tap zoom on iOS/Android; pinch-zoom still works. Overrides below for swipe/drag. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; } /* Hide scrollbars site-wide; scrolling still works (touch, wheel, keys) */ * { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE / legacy Edge */ } *::-webkit-scrollbar { width: 0; height: 0; background: transparent; } html, body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--hero-bg); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } /* Auth logo - when no nav (login/signup) */ .auth-logo-wrap { display: flex; justify-content: center; padding: 1.5rem 1rem 0.5rem; } .auth-logo-wrap .logo { font-size: 1.5rem; } .auth-logo-wrap .logo img { height: 2.5rem; display: block; } .auth-logo-wrap--launch { padding-top: 2.5rem; padding-bottom: 1.5rem; } .auth-logo-wrap--launch .logo.logo-with-img img { height: 3.5rem; } .main-content-auth { padding-bottom: 2rem; } /* Layout - mobile first */ .main-wrapper { display: flex; flex-direction: column; min-height: 100vh; } @media (min-width: 1024px) { .main-wrapper { margin-left: var(--sidebar-width-desktop); } } .main-content { width: 100%; max-width: 56rem; margin: 0 auto; padding: 0.5rem 1rem 5rem; } @media (max-width: 1023px) { .main-content { padding-left: max(var(--page-inline-sm), var(--safe-area-left)); padding-right: max(var(--page-inline-sm), var(--safe-area-right)); padding-bottom: calc(var(--main-content-padding-bottom-mobile) + var(--safe-area-bottom)); } /* Keep shop-card column width unchanged vs previous 1rem main padding (feed absorbs extra inset) */ .main-content .feed { padding-left: var(--page-inline-sm); padding-right: var(--page-inline-sm); } } @media (min-width: 1024px) { .main-content { padding: 1rem 1.5rem 1rem; } } /* 404 - centered state, same typography family as help / empty */ .error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: min(70vh, 32rem); padding: 2rem 0 3rem; gap: 0.25rem; } .error-page-code { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); margin: 0 0 0.25rem; } .error-page-heading.section-title { margin-bottom: 0.5rem; } .error-page-desc { font-size: 0.875rem; color: var(--gray-400); max-width: 22rem; margin: 0 0 1.25rem; line-height: 1.55; } .error-page-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .error-page-secondary { margin: 0; font-size: 0.875rem; color: var(--gray-400); } /* Admin (/admin*): main column matches sidebar layout width - tables need horizontal space */ .main-content.main-content-admin { max-width: none; } /* Forum: room for sidebar + thread list (chat-app layout) */ .main-content.main-content-forum { max-width: min(100%, 72rem); } @media (min-width: 1100px) { .main-content.main-content-forum { max-width: min(100%, 86rem); } } /* Help hub + legal pages (/faq, /contact, /privacy, /terms): more horizontal inset on mobile than default main (0.5rem), lighter than admin inner padding (1.5rem) */ @media (max-width: 1023px) { .main-content.main-content-help { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } /* Shop detail: slightly wider mobile gutters than default main (0.5rem) */ .main-content:has(.shop-detail) { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } } /* Header - sticky, mobile */ .header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hero-border); padding: calc(0.5rem + var(--safe-area-top)) 1rem 0.5rem; } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; } @media (max-width: 1023px) { .header { padding-left: max(var(--page-inline-sm), var(--safe-area-left)); padding-right: max(var(--page-inline-sm), var(--safe-area-right)); } } .logo { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); text-decoration: none; } .logo:hover { opacity: 0.9; } .logo.logo-with-img img { height: 2.25rem; display: block; } .logo.logo-with-img .logo-fallback { font-size: 1.25rem; font-weight: 700; } .sidebar-logo .logo.logo-with-img img { height: 2rem; } .header-actions { display: flex; align-items: center; gap: 0.5rem; } .header-actions a, .header-actions button { padding: 0.5rem; color: var(--gray-400); background: none; border: none; cursor: pointer; border-radius: 0.375rem; text-decoration: none; } .header-actions a:hover, .header-actions button:hover { color: var(--text-primary); background: var(--hero-border); } .header-actions a.active { color: var(--primary-400); background: rgba(124, 58, 237, 0.1); } /* Mobile header favourites on /favourites: solid heart, no active pill (sidebar keeps pill) */ .header-actions a.header-fav-link.active, .header-actions a.header-fav-link.active:hover { color: var(--shop-fav-on); background: none; } .header-actions svg { width: 1.5rem; height: 1.5rem; } .header-actions .badge { position: absolute; top: -2px; right: -2px; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; font-size: 0.7rem; background: var(--primary-500); color: var(--text-on-primary); border-radius: 9999px; display: flex; align-items: center; justify-content: center; } /* Light/dark theme - Account page control + theme.js (data-theme on ) */ .theme-toggle-btn .theme-toggle-icon--sun, .theme-toggle-btn .theme-toggle-icon--moon { display: none; } [data-theme="dark"] .theme-toggle-btn .theme-toggle-icon--sun { display: inline-flex; } [data-theme="light"] .theme-toggle-btn .theme-toggle-icon--moon { display: inline-flex; } .theme-toggle-btn .theme-toggle-icon--sun svg, .theme-toggle-btn .theme-toggle-icon--moon svg { width: 1.5rem; height: 1.5rem; display: block; } .account-card-top-actions .theme-toggle-btn .theme-toggle-icon--sun svg, .account-card-top-actions .theme-toggle-btn .theme-toggle-icon--moon svg { width: 0.9rem; height: 0.9rem; } /* Desktop sidebar - hidden on mobile */ .sidebar { display: none; } @media (min-width: 1024px) { .header { display: none; } .sidebar { display: flex; flex-direction: column; width: var(--sidebar-width-desktop); position: fixed; inset: 0; z-index: 50; background: var(--hero-card); border-right: 1px solid var(--hero-border); padding-top: env(safe-area-inset-top, 0px); } .sidebar-logo { display: flex; align-items: center; justify-content: center; height: 4rem; padding: 0 1rem; border-bottom: 1px solid var(--hero-border); } .sidebar-logo .logo { font-size: 1.5rem; } .sidebar-nav { flex: 1; padding: 1.5rem 1rem; } .sidebar-nav a { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; color: var(--gray-400); text-decoration: none; border-radius: 0.5rem; margin-bottom: 0.125rem; font-size: 0.875rem; font-weight: 500; } .sidebar-nav a:hover { color: var(--text-primary); background: var(--hero-border); } .sidebar-nav a.active { color: var(--primary-400); background: rgba(124, 58, 237, 0.1); } .sidebar-nav svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } } /* Bottom nav - mobile only */ .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; min-height: calc(var(--bottom-nav-height) + var(--safe-area-bottom)); z-index: 50; background: var(--hero-card); border-top: 1px solid var(--hero-border); padding: 0.375rem 0.5rem calc(0.3125rem + var(--safe-area-bottom)); } @media (min-width: 1024px) { .bottom-nav { display: none; } } .bottom-nav-inner { display: flex; align-items: center; justify-content: space-around; width: 100%; } .bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 0.4375rem 0.25rem; color: var(--gray-400); text-decoration: none; font-size: 0.75rem; border-radius: 0.5rem; transition: color 0.2s; } .bottom-nav a:hover, .bottom-nav a.active { color: var(--primary-400); } .bottom-nav a.active { background: rgba(124, 58, 237, 0.1); } .bottom-nav svg, .bottom-nav a .nav-messages-icon-wrap svg { width: 1.5rem; height: 1.5rem; margin-bottom: 0; } .bottom-nav a .nav-messages-icon-wrap { margin-bottom: 0; } .bottom-nav .nav-messages-badge { top: -0.4rem; right: -0.65rem; } /* Mobile bottom nav: icons only (labels hidden; use aria-label on each link) */ .bottom-nav .bottom-nav-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Unread count badge (Messages - sidebar + bottom nav) */ .nav-messages-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } .sidebar-nav .nav-messages-icon-wrap { flex-shrink: 0; } .sidebar-nav .nav-messages-icon-wrap svg { width: 1.25rem; height: 1.25rem; } .nav-messages-badge { position: absolute; top: -0.35rem; right: -0.55rem; min-width: 1rem; height: 1rem; padding: 0 0.28rem; font-size: 0.5625rem; font-weight: 700; line-height: 1rem; text-align: center; background: #ef4444; color: var(--text-on-primary); border-radius: 9999px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-sizing: border-box; } .nav-messages-badge[hidden] { display: none !important; } /* Shop card */ .shop-card-wrap { background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.45rem; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); max-width: 24rem; margin: 0 auto 1rem; } .shop-card-photo { position: relative; height: 13rem; background: var(--gray-800); overflow: hidden; } .shop-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .shop-card-gallery { position: relative; } .shop-card-gallery[data-swipe-bound="1"] { cursor: grab; touch-action: pan-y; } .shop-card-gallery[data-swipe-bound="1"]:active { cursor: grabbing; } /* pan-y on imgs: * { touch-action: manipulation } does not inherit from gallery; without this, horizontal swipes on the img hit-target fail. */ .shop-card-gallery[data-swipe-bound="1"] .shop-card-photo-img { touch-action: pan-y; } .shop-card-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 0.2s; /* Invisible stacked slides must not cover nav, swipe, or links above them */ pointer-events: none; } .shop-card-photo-img.active { position: relative; opacity: 1; pointer-events: auto; z-index: 1; } .shop-card-dots { display: flex; justify-content: center; gap: 0.25rem; padding: 0.5rem; background: var(--hero-card); } .shop-card-dot { width: 6px; height: 6px; border-radius: 9999px; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; } .shop-card-dot:hover, .shop-card-dot.active { background: white; } .shop-card-desc-wrap { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0.375rem; } .shop-card-desc-wrap > .shop-card-desc { flex-shrink: 0; min-width: 0; } .shop-card-body > .shop-card-desc-wrap { padding-top: 0.2rem; margin-top: 22px; } .shop-card-posted + .shop-card-desc-wrap { margin-top: 0; } .shop-card-photo-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--gray-700), var(--gray-800)); display: flex; align-items: center; justify-content: center; color: var(--gray-400); } .shop-card-body { padding: 0.75rem 1rem 0.75rem; } .shop-card-header { margin-bottom: 0.5rem; } .shop-card-title-row { display: flex; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; } /* Top-align inline category pill with first line when title wraps (avoid vertical center vs multi-line link). */ .shop-card-title-row--has-inline-badge { align-items: flex-start; } /* Posted pill + rating stacked on the right (feed cards). */ .shop-card-title-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; flex-shrink: 0; align-self: flex-start; line-height: 1.2; } .shop-card-title-aside .shop-card-rating--under-posted { font-size: 0.8125rem; } .shop-card-title-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin-left: auto; align-self: flex-start; line-height: 1.125rem; margin-top: 0.15rem; } .shop-card-closed { padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; background: #dc2626; color: var(--text-on-primary); border-radius: 9999px; flex-shrink: 0; } .shop-card-closed--on-photo { position: absolute; top: 0.45rem; left: 0.45rem; z-index: 3; margin: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .shop-card-title { flex: 1; font-size: 1.125rem; font-weight: 600; color: var(--text-primary); text-decoration: none; min-width: 0; } .shop-card-title:hover { color: var(--primary-400); } .shop-card-fav { flex-shrink: 0; padding: 0.25rem; background: none; border: none; cursor: pointer; color: var(--gray-400); border-radius: 9999px; } @media (hover: hover) { .shop-card-fav:hover { background: var(--hero-border); } } .shop-card-fav.favorited { color: var(--shop-fav-on); } /* Double-tap heart overlay (Instagram-style) */ .shop-card-heart-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; pointer-events: none; z-index: 2; } .shop-card-heart-overlay-icon-wrap { display: flex; align-items: center; justify-content: center; } .shop-card-heart-overlay-icon-wrap svg { width: 5rem; height: 5rem; color: var(--shop-fav-on); filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); } .shop-card-heart-overlay--remove .shop-card-heart-overlay-icon-wrap svg { color: #e5e7eb; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)); } .shop-card-heart-overlay-icon-wrap.animate { animation: feed-heart-pop 0.9s ease-out forwards; } @keyframes feed-heart-pop { 0% { opacity: 1; transform: scale(0); } 15% { transform: scale(1.2); } 30% { transform: scale(1); } 100% { opacity: 1; transform: scale(1); } } .shop-card-heart-overlay-icon-wrap.animate svg { animation: feed-heart-fade 0.9s ease-out forwards; } @keyframes feed-heart-fade { 0%, 30% { opacity: 1; } 100% { opacity: 0; } } .shop-card-heart-overlay-hint { margin: 0; max-width: 14rem; padding: 0.5rem 0.75rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; text-align: center; color: #f9fafb; background: rgba(17, 24, 39, 0.92); border-radius: 0.5rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); opacity: 0; } .shop-card-heart-overlay--guest .shop-card-heart-overlay-hint { animation: shop-card-heart-hint 2.4s ease-out forwards; } @keyframes shop-card-heart-hint { 0%, 12% { opacity: 0; transform: translateY(0.25rem); } 22%, 78% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } } .shop-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; color: var(--gray-400); margin-bottom: 0.5rem; } .shop-card-meta-sep { color: var(--gray-600); } .shop-card-rating { font-weight: 600; color: var(--text-primary); white-space: nowrap; } .shop-card-rating-star { color: var(--primary-400); } .shop-card-rating-count { font-weight: 500; color: var(--gray-500); font-size: 0.8125rem; } .shop-card-rating-count-link { color: inherit; text-decoration: none; } .shop-card-rating-count-link:hover, .shop-card-rating-count-link:focus-visible { color: inherit; text-decoration: underline; text-decoration-color: var(--primary-400); text-underline-offset: 2px; } .shop-card-rating-score-link { color: var(--text-primary); text-decoration: none; } .shop-card-rating-score-link:hover, .shop-card-rating-score-link:focus-visible { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--primary-400); text-underline-offset: 2px; } button.shop-card-rating-score-link, button.staff-review-open { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; margin: 0; font: inherit; line-height: inherit; cursor: pointer; box-shadow: none; } button.shop-card-rating-score-link:focus-visible, button.staff-review-open:focus-visible { outline: 2px solid rgba(125, 211, 252, 0.55); outline-offset: 2px; border-radius: 0.15rem; } a.shop-card-rating--under-posted, button.shop-card-rating--under-posted { display: inline-flex; align-items: center; gap: 0.15rem; } .shop-card-location-trigger { display: inline-flex; align-items: center; gap: 0.375rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: inherit; font-size: inherit; text-align: left; } .shop-card-location-trigger:hover { color: var(--primary-300); } .shop-card-location-icon { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--primary-400); animation: shop-card-location-throb 2s ease-in-out infinite; } .shop-card-location-icon svg { width: 1rem; height: 1rem; } @keyframes shop-card-location-throb { 0%, 100% { color: var(--primary-400); } 50% { color: var(--gray-300); } } .shop-card-address { color: var(--gray-400); } .shop-card-location-trigger:hover .shop-card-address { color: var(--gray-300); } .shop-card-date { color: var(--gray-500); } /* Feed / search list: posted time between address and description */ .shop-card-posted { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--gray-500); margin: 0 0 0.375rem; } .shop-card-posted-icon { display: inline-flex; flex-shrink: 0; color: var(--primary-400); } .shop-card-posted-icon svg { width: 1rem; height: 1rem; } .shop-card-posted-text { color: var(--gray-500); } .shop-card-posted + .shop-card-desc-wrap .shop-card-desc { margin-top: 0.375rem; } .shop-card-directions { display: inline-flex; align-items: center; gap: 0.25rem; border: 0; background: transparent; color: var(--primary-400); font-size: 0.8125rem; padding: 0; cursor: pointer; } .shop-card-directions:hover { color: var(--primary-300); } .shop-card-directions svg { width: 1rem; height: 1rem; } .shop-card-desc-wrap.expandable { cursor: pointer; } .shop-card-desc-wrap.expandable:hover .shop-card-desc { color: var(--gray-300); } .shop-card-desc { font-size: 0.875rem; color: var(--gray-400); line-height: 1.5; margin-top: 0; margin-bottom: 0; white-space: pre-wrap; word-break: normal; /* Wrap at spaces only - keep whole words (avoid break-word, which can split mid-word in tight lines) */ overflow-wrap: normal; hyphens: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .shop-card-desc.expanded { display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; overflow: visible; margin-bottom: 1rem; } .shop-card-desc-wrap:not(.expandable) .shop-card-desc { margin-bottom: 0.75rem; } .shop-card-desc.truncated { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.75rem; } /* WYSIWYG roster / feed copy - block children (

, lists). Do not put -webkit-line-clamp on the outer .shop-card-desc (each block counts as one “line”). Do not put it on inner

either: in several engines it lays out as a single horizontal line and clips sideways. Truncated rich blurbs: normal block flow + max-height; parent clips overflow. */ .shop-card-desc.shop-card-desc--rich { white-space: normal; display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; overflow: visible; min-width: 0; max-width: 100%; overflow-wrap: break-word; } .shop-card-desc.shop-card-desc--rich.truncated:not(.expanded) { overflow: hidden; max-height: calc(0.875rem * 1.5 * 3); } .shop-card-desc.shop-card-desc--rich.expanded { display: block; overflow: visible; max-height: none; } .shop-card-desc--rich p { margin: 0.35em 0; } .shop-card-desc--rich p:first-child { margin-top: 0; } .shop-card-desc--rich p:last-child { margin-bottom: 0; } .shop-card-desc--rich a { color: var(--primary-400); text-decoration: none; font-weight: 500; overflow-wrap: break-word; } .shop-card-desc--rich a:hover { text-decoration: underline; } .shop-card-desc--rich ul, .shop-card-desc--rich ol { margin: 0.35em 0; padding-left: 1.25rem; } .shop-card-desc--rich strong, .shop-card-desc--rich b { font-weight: 600; color: var(--gray-300); } .shop-card-badge { display: inline-block; margin-top: 0.5rem; padding: 0.25rem 0.5rem; background: var(--hero-border); border-radius: 9999px; font-size: 0.75rem; color: var(--gray-300); margin-bottom: 1rem; } [data-theme="light"] .shop-card-action-demos .shop-card-badge--demo-overlay { /* Dark glass pill: keep light text in light theme (global badge uses dark gray on pale bg). */ color: #f3f4f6; } .shop-card-badge--inline-title { margin: 0 !important; flex-shrink: 0; align-self: flex-start; } .shop-card-badge--desc-top { margin: 0 !important; flex-shrink: 0; align-self: flex-start; } .shop-card-posted-pill { text-transform: none; letter-spacing: 0; } /* Shop card action row: four equal targets (messages, staff, view, favourite) - compact tap targets */ .shop-card-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.375rem; justify-items: center; padding-top: 0; } .shop-card-body > .shop-card-actions { margin-top: 0.5rem; padding-top: 0.4375rem; border-top: 1px solid var(--hero-border); background: transparent; width: 100%; box-sizing: border-box; } .shop-card-actions a, .shop-card-actions button { display: flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; min-height: 2.35rem; border-radius: 0.375rem; padding: 0; font-size: 1rem; text-decoration: none; border: none; cursor: pointer; box-sizing: border-box; background: transparent !important; color: var(--gray-200); transition: background-color 0.2s, color 0.2s, border-radius 0.2s ease; } .shop-card-actions a:focus-visible, .shop-card-actions button:focus-visible { border-radius: 9999px; background: var(--primary-700) !important; color: #fff; } @media (hover: hover) { .shop-card-actions a:hover, .shop-card-actions button:hover { border-radius: 9999px; background: var(--primary-700) !important; color: #fff; } } .shop-card-actions svg { width: 1.375rem; height: 1.375rem; flex-shrink: 0; } .shop-card-actions .shop-card-fav.favorited { color: var(--shop-fav-on); } /* Purple hover/focus pill: keep heart readable (same as other action icons → white) */ .shop-card-actions button.shop-card-fav.favorited:focus-visible { color: #fff !important; } @media (hover: hover) { .shop-card-actions button.shop-card-fav.favorited:hover { color: #fff !important; } } /* --- /dev/shop-card-action-demos - visual layout tests only --- */ .shop-card-action-demos { padding-bottom: 2rem; max-width: min(100%, 72rem); margin: 0 auto; padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; } .shop-card-action-demos-intro { margin-bottom: 2rem; padding: 0 0.25rem; } .shop-card-action-demos-title { font-size: 1.25rem; font-weight: 700; color: #f9fafb; margin: 0 0 0.5rem; } .shop-card-action-demos-lead, .shop-card-action-demos-url { font-size: 0.875rem; color: var(--gray-400); line-height: 1.5; margin: 0 0 0.5rem; } .shop-card-action-demos-code { font-size: 0.8125rem; background: var(--gray-800); padding: 0.1rem 0.35rem; border-radius: 0.25rem; color: #e5e7eb; } .shop-card-action-demos-block { margin-bottom: 2.75rem; } .shop-card-action-demos-label { font-size: 1rem; font-weight: 600; color: #f3f4f6; margin: 0 0 0.25rem; } .shop-card-action-demos-caption { font-size: 0.8125rem; color: var(--gray-500); margin: 0 0 0.75rem; line-height: 1.45; } .shop-card-action-demos .shop-card-demo-variant .shop-card-title { color: #fff; } /* B + C: four equal columns; favourite matches pill buttons */ .shop-card-action-demos .shop-card-demo-b .shop-card-actions, .shop-card-action-demos .shop-card-demo-c .shop-card-actions { grid-template-columns: repeat(4, 1fr); } .shop-card-action-demos .shop-card-demo-b .shop-card-actions .shop-card-fav, .shop-card-action-demos .shop-card-demo-c .shop-card-actions .shop-card-fav { display: flex; align-items: center; justify-content: center; height: 2.5rem; min-height: 2.5rem; padding: 0; border: none; cursor: pointer; background: var(--hero-border); color: var(--text-primary); border-radius: 0.75rem; transition: background-color 0.2s; } .shop-card-action-demos .shop-card-demo-b .shop-card-actions .shop-card-fav:hover, .shop-card-action-demos .shop-card-demo-c .shop-card-actions .shop-card-fav:hover { background: var(--gray-700); } .shop-card-action-demos .shop-card-demo-b .shop-card-actions .shop-card-fav.favorited, .shop-card-action-demos .shop-card-demo-c .shop-card-actions .shop-card-fav.favorited { color: var(--shop-fav-on); } .shop-card-action-demos .shop-card-demo-b .shop-card-title-actions:empty, .shop-card-action-demos .shop-card-demo-d .shop-card-title-actions:empty, .shop-card-action-demos .shop-card-demo-e .shop-card-title-actions:empty, .shop-card-action-demos .shop-card-demo-f .shop-card-title-actions:empty, .shop-card-action-demos .shop-card-demo-badge-in-title .shop-card-title-actions:empty { display: none; } /* D / E / F: circular action row (shared sizing) */ .shop-card-action-demos .shop-card-demo-d .shop-card-actions, .shop-card-action-demos .shop-card-demo-e .shop-card-actions, .shop-card-action-demos .shop-card-demo-f .shop-card-actions { grid-template-columns: repeat(4, 1fr); gap: 0.65rem; justify-items: center; } .shop-card-action-demos .shop-card-demo-d .shop-card-actions a, .shop-card-action-demos .shop-card-demo-d .shop-card-actions button, .shop-card-action-demos .shop-card-demo-e .shop-card-actions a, .shop-card-action-demos .shop-card-demo-e .shop-card-actions button, .shop-card-action-demos .shop-card-demo-f .shop-card-actions a, .shop-card-action-demos .shop-card-demo-f .shop-card-actions button { width: 2.75rem; height: 2.75rem; min-height: 2.75rem; border-radius: 9999px; padding: 0; } .shop-card-action-demos .shop-card-demo-d .shop-card-actions .shop-card-fav { display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: var(--hero-border); color: var(--gray-300); transition: background-color 0.2s, color 0.2s; } .shop-card-action-demos .shop-card-demo-d .shop-card-actions .shop-card-fav:hover { background: var(--gray-700); } .shop-card-action-demos .shop-card-demo-d .shop-card-actions .shop-card-fav.favorited { color: var(--shop-fav-on); } /* E: uniform neutral circles (roster matches others; no purple fill) */ .shop-card-action-demos .shop-card-demo-e .shop-card-actions a, .shop-card-action-demos .shop-card-demo-e .shop-card-actions button { display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; text-decoration: none; background: var(--hero-border) !important; color: var(--gray-200); transition: background-color 0.2s, color 0.2s; } .shop-card-action-demos .shop-card-demo-e .shop-card-actions a:hover, .shop-card-action-demos .shop-card-demo-e .shop-card-actions button:hover { background: var(--gray-700) !important; color: #fff; } .shop-card-action-demos .shop-card-demo-e .shop-card-actions .shop-card-fav.favorited { color: var(--shop-fav-on); } /* F: same as E + primary purple on icons (currentColor) */ .shop-card-action-demos .shop-card-demo-f .shop-card-actions a, .shop-card-action-demos .shop-card-demo-f .shop-card-actions button { display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; text-decoration: none; background: var(--hero-border) !important; color: var(--primary-400); transition: background-color 0.2s, color 0.2s; } .shop-card-action-demos .shop-card-demo-f .shop-card-actions a:hover, .shop-card-action-demos .shop-card-demo-f .shop-card-actions button:hover { background: var(--gray-700) !important; color: var(--primary-300); } .shop-card-action-demos .shop-card-demo-f .shop-card-actions .shop-card-fav.favorited { color: var(--shop-fav-on); } /* Demo-only: card corner radius (production .shop-card-wrap unchanged outside this page) */ .shop-card-action-demos .shop-card-demo-radius-sharp { border-radius: 0.125rem; } .shop-card-action-demos .shop-card-demo-radius-tight { border-radius: 0.1875rem; } .shop-card-action-demos .shop-card-demo-radius-mid { border-radius: 0.3rem; } .shop-card-action-demos .shop-card-demo-radius-soft { border-radius: 0.45rem; } /* Demo-only: smaller circular actions (modifiers on .shop-card-wrap) */ .shop-card-action-demos .shop-card-demo-actions-sm .shop-card-actions { gap: 0.5rem !important; } .shop-card-action-demos .shop-card-demo-actions-sm .shop-card-actions a, .shop-card-action-demos .shop-card-demo-actions-sm .shop-card-actions button { width: 2.35rem !important; height: 2.35rem !important; min-height: 2.35rem !important; } .shop-card-action-demos .shop-card-demo-actions-sm .shop-card-actions svg { width: 1.125rem !important; height: 1.125rem !important; } .shop-card-action-demos .shop-card-demo-actions-xs .shop-card-actions { gap: 0.4rem !important; } .shop-card-action-demos .shop-card-demo-actions-xs .shop-card-actions a, .shop-card-action-demos .shop-card-demo-actions-xs .shop-card-actions button { width: 2.05rem !important; height: 2.05rem !important; min-height: 2.05rem !important; } .shop-card-action-demos .shop-card-demo-actions-xs .shop-card-actions svg { width: 1rem !important; height: 1rem !important; } /* Massage / category pill placement */ .shop-card-action-demos .shop-card-badge--demo-overlay { position: absolute; z-index: 2; margin: 0 !important; background: rgba(17, 24, 39, 0.72) !important; backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .shop-card-action-demos .shop-card-badge--demo-bl { bottom: 0.45rem; left: 0.45rem; } .shop-card-action-demos .shop-card-badge--demo-tr { top: 0.45rem; right: 0.45rem; bottom: auto; left: auto; } .shop-card-action-demos .shop-card-badge--demo-bc { bottom: 0.45rem; left: 50%; transform: translateX(-50%); } .shop-card-action-demos .shop-card-demo-badge-in-title .shop-card-title-row { align-items: flex-start; } .shop-card-action-demos .shop-card-demo-badge-in-title .shop-card-badge--demo-title { margin: 0 !important; flex-shrink: 0; } .shop-card-action-demos .shop-card-demo-badge-in-meta .shop-card-meta { flex-wrap: wrap; align-items: center; } .shop-card-action-demos .shop-card-demo-badge-in-meta .shop-card-badge { margin: 0 0.5rem 0 0 !important; } .shop-card-action-demos .shop-card-demo-badge-above-actions { display: flex; justify-content: flex-end; margin: 0 0 0.4rem; } .shop-card-action-demos .shop-card-demo-badge-above-actions .shop-card-badge { margin: 0 !important; } .shop-card-action-demos .shop-card-demo-badge-above-actions-left { display: flex; justify-content: flex-start; margin: 0 0 0.4rem; } .shop-card-action-demos .shop-card-demo-badge-above-actions-left .shop-card-badge { margin: 0 !important; } .shop-card-action-demos-broadway-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 26rem); justify-content: start; margin-top: 0.75rem; } .shop-card-action-demos-broadway-grid--pair { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); max-width: 52rem; } .shop-card-action-demos-broadway-grid--triple { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); max-width: 72rem; } .shop-card-action-demos-broadway-grid--quad { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); max-width: 68rem; } .shop-card-action-demos-mini-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); margin: 0 0 0.5rem; } .shop-card-action-demos-fallback { color: var(--gray-400); max-width: 36rem; line-height: 1.5; } .shop-card-action-demos .shop-card-demo-actions-mid .shop-card-actions { padding-top: 0 !important; margin-bottom: 0.35rem; } /* Posted time in title row (pill slot), actions under photo, actions after posted row */ .shop-card-action-demos .shop-card-demo-time-pill { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 !important; flex-shrink: 0; align-self: flex-start; font-weight: 500; color: #d1d5db; } .shop-card-action-demos .shop-card-demo-time-pill time { color: inherit; } .shop-card-action-demos .shop-card-demo-time-pill-icon { display: inline-flex; color: var(--primary-400); } .shop-card-action-demos .shop-card-demo-time-pill-icon svg { width: 0.875rem; height: 0.875rem; } .shop-card-action-demos .shop-card-demo-actions-under-photo { padding: 0.5rem 1rem !important; margin: 0 !important; background: var(--gray-800); border-top: 1px solid var(--hero-border); border-bottom: 1px solid var(--hero-border); } .shop-card-action-demos .shop-card-demo-actions-after-posted { padding-top: 0 !important; margin: 0.2rem 0 0.32rem !important; } .shop-card-action-demos .shop-card-demo-actions-after-posted + .shop-card-desc-wrap .shop-card-desc { margin-top: 0.4rem; } .shop-card-action-demos .shop-card-demo-icon-set-filled .shop-card-actions a, .shop-card-action-demos .shop-card-demo-icon-set-filled .shop-card-actions button { background: rgba(167, 139, 250, 0.2); border-color: rgba(167, 139, 250, 0.38); color: #ddd6fe; } .shop-card-action-demos .shop-card-demo-icon-set-filled .shop-card-actions a:hover, .shop-card-action-demos .shop-card-demo-icon-set-filled .shop-card-actions button:hover { background: rgba(167, 139, 250, 0.28); border-color: rgba(167, 139, 250, 0.54); } .shop-card-action-demos .shop-card-demo-icon-set-compact .shop-card-actions { gap: 0.42rem; } .shop-card-action-demos .shop-card-demo-icon-set-compact .shop-card-actions a, .shop-card-action-demos .shop-card-demo-icon-set-compact .shop-card-actions button { border-radius: 0.625rem; } .shop-card-action-demos .shop-card-demo-actions-bottom-separated { margin: 0 !important; padding: 0.625rem 1rem 0.75rem !important; border-top: 1px solid var(--hero-border); background: rgba(17, 24, 39, 0.45); } .shop-card-action-demos .shop-card-demo-bottom-section-card { border-radius: 0.4rem; } .shop-card-action-demos .shop-card-demo-bottom-section-card .shop-card-photo { border-top-left-radius: 0.4rem; border-top-right-radius: 0.4rem; } .shop-card-action-demos .shop-card-demo-bottom-section-card .shop-card-demo-actions-bottom-separated { border-bottom-left-radius: 0.4rem; border-bottom-right-radius: 0.4rem; } .shop-card-action-demos .shop-card-demo-bottom-separated-v1 .shop-card-demo-actions-bottom-separated { border-top-color: rgba(75, 85, 99, 0.65); background: rgba(17, 24, 39, 0.36); } .shop-card-action-demos .shop-card-demo-bottom-separated-v2 .shop-card-demo-actions-bottom-separated { border-top-color: rgba(99, 102, 241, 0.45); background: linear-gradient(180deg, rgba(31, 41, 55, 0.58) 0%, rgba(30, 41, 59, 0.68) 100%); } .shop-card-action-demos .shop-card-demo-bottom-separated-v3 .shop-card-demo-actions-bottom-separated { border-top-color: rgba(167, 139, 250, 0.42); background: rgba(30, 41, 59, 0.62); padding-top: 0.54rem !important; } .shop-card-action-demos .shop-card-demo-time-sample-hint { font-size: 0.6875rem; color: var(--gray-500); margin: 0.35rem 0 0; line-height: 1.35; } .shop-card-action-demos .shop-card-action-demos-category-note { display: inline-block; font-size: 0.75rem; font-weight: 500; color: var(--gray-500); text-transform: lowercase; margin-right: 0.35rem; flex-shrink: 0; align-self: center; } /* Closed pill variations (demos only) */ .shop-card-action-demos .shop-card-closed--demo-outline { background: transparent !important; border: 1px solid #f87171; color: #fecaca !important; } .shop-card-action-demos .shop-card-demo-closed-banner { font-size: 0.75rem; font-weight: 500; padding: 0.4rem 1rem; margin: 0 0 0.5rem; width: 100%; box-sizing: border-box; background: rgba(220, 38, 38, 0.2); color: #fecaca; border-left: 3px solid #dc2626; border-radius: 0.125rem; } .shop-card-action-demos .shop-card-closed--demo-photo { position: absolute; top: 0.45rem; left: 0.45rem; z-index: 3; margin: 0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .shop-card-action-demos .shop-card-demo-closed-under-photo { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25rem 1rem; margin: 0; background: linear-gradient(90deg, rgba(127, 29, 29, 0.45), rgba(127, 29, 29, 0.15)); color: #fecaca; border-bottom: 1px solid rgba(220, 38, 38, 0.35); } /* D/E/F default demo circle size slightly reduced vs old 2.75rem */ .shop-card-action-demos .shop-card-demo-d .shop-card-actions a, .shop-card-action-demos .shop-card-demo-d .shop-card-actions button, .shop-card-action-demos .shop-card-demo-e .shop-card-actions a, .shop-card-action-demos .shop-card-demo-e .shop-card-actions button, .shop-card-action-demos .shop-card-demo-f .shop-card-actions a, .shop-card-action-demos .shop-card-demo-f .shop-card-actions button { width: 2.5rem; height: 2.5rem; min-height: 2.5rem; } .shop-card-action-demos .shop-card-demo-d .shop-card-actions svg, .shop-card-action-demos .shop-card-demo-e .shop-card-actions svg, .shop-card-action-demos .shop-card-demo-f .shop-card-actions svg { width: 1.25rem; height: 1.25rem; } /* Shop detail - constrain ALL SVGs inside shop-detail */ .shop-detail svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } @media (max-width: 1023px) { .shop-detail-hero-block { margin-left: calc(-1 * max(var(--page-inline-sm), env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(var(--page-inline-sm), env(safe-area-inset-right, 0px))); } } .shop-detail-hero { position: relative; height: 20rem; background: var(--gray-800); overflow: hidden; margin-bottom: 0; } .shop-detail-hero-inner { position: relative; height: 100%; isolation: isolate; } .shop-detail-hero-nav { position: absolute; inset: 0; z-index: 5; display: none; justify-content: space-between; align-items: center; padding: 0 0.5rem; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .shop-detail-hero-nav { display: flex; } } .shop-detail-hero-nav-btn { width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.45); background: rgba(0,0,0,0.45); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; cursor: pointer; pointer-events: auto; } .shop-detail-hero-nav-btn:hover { background: rgba(0,0,0,0.65); } .shop-detail-hero-nav-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .shop-detail-hero--clickable { cursor: pointer; } .shop-detail-hero--clickable:focus { outline: none; } .shop-detail-hero--clickable:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; } .shop-detail-hero img { width: 100%; height: 100%; object-fit: cover; } .shop-detail-hero-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--gray-700), var(--gray-800)); display: flex; align-items: center; justify-content: center; color: var(--gray-400); } .shop-detail-dots { display: flex; justify-content: center; gap: 0.375rem; padding: 0.5rem; background: var(--hero-bg); } .shop-detail-dots .shop-card-dot { flex-shrink: 0; } .shop-detail-info { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; } @media (max-width: 1023px) { .shop-detail-info { padding-top: 1rem; padding-bottom: 1.5rem; padding-left: 0; padding-right: 0; } } .shop-detail-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 0.625rem; row-gap: 0.5rem; margin-bottom: 0.5rem; } .shop-detail-title { font-size: 1.5rem; font-weight: 700; grid-column: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; } .shop-detail-header-right { display: flex; align-items: center; gap: 0.5rem; grid-column: 2; grid-row: 1; justify-self: end; } .shop-detail-rating-inline.shop-card-rating { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; margin: 0; border: none; background: none; cursor: pointer; transition: color 0.2s; font-size: 0.8125rem; text-decoration: none; } .shop-detail-rating-inline.shop-card-rating:hover, .shop-detail-rating-inline.shop-card-rating:focus-visible { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--primary-400); text-underline-offset: 2px; } .shop-detail-rating-inline.shop-card-rating .shop-card-rating-count { font-size: 0.75rem; } .shop-detail-header .shop-card-fav { flex-shrink: 0; padding: 0.25rem; border-radius: 9999px; } .shop-detail-header .shop-card-fav svg { width: 1.5rem; height: 1.5rem; } @media (max-width: 560px) { .shop-detail-summary { display: flex; flex-direction: column; } .shop-detail-header { display: contents; } .shop-detail-header-right { order: 3; justify-self: start; align-self: flex-start; margin-bottom: 0.5rem; } .shop-detail-title { order: 1; } .shop-detail-address { order: 2; margin-bottom: 0.5rem; } .shop-detail-desc { order: 4; } } .shop-detail-address { display: flex; align-items: flex-start; gap: 0.375rem; width: 100%; border: 0; background: transparent; padding: 0; text-align: left; font-size: 0.875rem; color: var(--gray-400); margin-bottom: 1rem; cursor: pointer; } .shop-detail-address:hover { color: var(--primary-300); } .shop-detail-address:hover .shop-detail-address-text { color: var(--gray-300); } .shop-detail-address .shop-card-location-icon { margin-top: 0.125rem; } .shop-detail-address svg { width: 1rem; height: 1rem; } .shop-detail-address-text { flex: 1; min-width: 0; line-height: 1.45; } .shop-detail-desc { color: #d1d5db; line-height: 1.6; margin: 0; } .shop-detail-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .shop-detail-actions .btn { flex: 1; min-width: 7rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 0.5rem; font-weight: 700; font-size: 1rem; text-decoration: none; border: none; cursor: pointer; transition: background 0.2s; } .shop-detail-actions .btn svg { width: 1.25rem; height: 1.25rem; } .btn-primary { background: var(--primary-600); color: var(--text-on-primary); } .btn-primary:hover { background: var(--primary-700); } .btn-secondary { background: var(--gray-600); color: var(--text-on-primary); } .btn-secondary:hover { background: var(--gray-700); } .btn-danger { background: #dc2626; color: var(--text-on-primary); } .btn-danger:hover { background: #b91c1c; } .btn-outline { background: transparent; color: var(--primary-400); border: 2px solid var(--primary-600); } .btn-outline:hover { background: rgba(124,58,237,0.1); } .shop-section { margin: 0; } .shop-section h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; } .shop-section-card { background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.75rem; padding: 1.5rem; } .shop-section-card h2 { margin-bottom: 1rem; } .shop-reviews-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-700); } .shop-reviews-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .shop-reviews-heading h2 { margin: 0; } .shop-reviews-heading .btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.9375rem; } .shop-reviews-heading .btn svg { width: 1.125rem; height: 1.125rem; } #shop-reviews:target, #shop-reviews:focus { outline: none; } .shop-reviews-status { font-size: 0.875rem; color: var(--gray-400); margin: 0 0 0.75rem; } .shop-reviews-status--muted { color: var(--gray-500); } .shop-review-item .staff-modal-review-meta { flex-direction: row; align-items: center; flex-wrap: wrap; } .shop-review-item .shop-review-datetime { margin-left: auto; font-size: 0.75rem; } .shop-review-item { background: rgba(17, 24, 39, 0.9); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.75rem; padding: 0.95rem 1rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); } .shop-review-item--highlight, #shop-reviews .shop-review-item:target { border-color: rgba(139, 92, 246, 0.65); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.45), 0 6px 18px rgba(0, 0, 0, 0.16); } .shop-review-item .staff-modal-review-meta { gap: 0.6rem; margin-bottom: 0.55rem; } .shop-review-item .staff-modal-review-stars { font-size: 0.94rem; font-weight: 700; letter-spacing: 0.04em; color: var(--primary-400); } .shop-review-item .shop-review-author { font-size: 0.9rem; font-weight: 600; color: var(--gray-200); } .shop-review-entity-row, .staff-modal-review-author-line, .staff-modal-review-reply-author, .shop-review-reply-author, .shop-review-item .shop-review-staff { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; min-width: 0; } .shop-review-reply-author, .staff-modal-review-reply-author { flex-wrap: nowrap; align-items: center; } .shop-review-item .shop-review-reply-author, .shop-review-item .staff-modal-review-reply-author { font-size: 0.8125rem; font-weight: 600; color: var(--gray-200); } .shop-review-reply-author .shop-review-entity-avatar, .staff-modal-review-reply-author .shop-review-entity-avatar { flex-shrink: 0; } .shop-review-reply-author .shop-review-reply-author-link, .staff-modal-review-reply-author .staff-modal-review-reply-author-link { display: inline-flex; align-items: center; min-width: 0; min-height: 1.35rem; line-height: 1.35rem; overflow-wrap: anywhere; } .shop-review-entity-row--unlisted, .shop-review-entity-row--unlisted .shop-review-author-link, .shop-review-entity-row--unlisted .shop-review-staff-link, .shop-review-entity-row--unlisted .shop-review-reply-author-link, .shop-review-entity-row--unlisted.forum-author-link, .member-public-review__entity.shop-review-entity-row--unlisted { text-decoration: line-through; opacity: 0.65; color: var(--gray-400); cursor: default; } .shop-review-entity-row--unlisted a, a.shop-review-entity-row--unlisted { pointer-events: none; } .shop-review-entity-avatar.entity-avatar-chip, .member-public-review__avatar.entity-avatar-chip { width: 1.35rem; height: 1.35rem; min-width: 1.35rem; font-size: 0.6rem; } .staff-modal-review-reply-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; } .shop-review-item .shop-review-datetime { margin-left: auto; font-size: 0.8rem; font-weight: 500; color: var(--gray-400); } .shop-review-item .shop-review-title { margin: 0 0 0.4rem; font-size: 0.95rem; line-height: 1.35; color: var(--gray-100); } .shop-review-item .shop-review-staff { margin: 0 0 0.45rem; font-size: 0.8rem; color: var(--gray-400); } .shop-review-item .staff-modal-review-text { margin-top: 0.15rem; font-size: 0.92rem; line-height: 1.6; color: var(--gray-200); } .shop-review-item .staff-modal-review-replies { margin-top: 0.7rem; padding-top: 0.65rem; border-top: 1px solid rgba(148, 163, 184, 0.2); } @media (max-width: 640px) { .shop-review-item { padding: 0.85rem 0.85rem; } .shop-review-item .staff-modal-review-meta { align-items: flex-start; } .shop-review-item .shop-review-datetime { width: 100%; margin-left: 0; } } .shop-reviews-load-sentinel { height: 1px; width: 100%; pointer-events: none; } .shop-reviews-load-actions { display: flex; justify-content: center; margin-top: 1rem; } .shop-reviews-load-actions[hidden] { display: none !important; } .shop-reviews-load-actions .shop-reviews-load-more-btn { min-width: 11rem; } .shop-reviews-load-more-status { font-size: 0.8125rem; color: var(--gray-400); margin: 0.5rem 0 0; min-height: 1.25rem; } .shop-review-title { font-weight: 600; color: var(--gray-200); margin: 0 0 0.35rem; font-size: 0.875rem; } .shop-review-staff { font-size: 0.75rem; color: var(--gray-500); margin: 0 0 0.35rem; } .shop-review-staff-label { color: var(--gray-500); } button.shop-review-staff-open { appearance: none; border: 0; background: transparent; padding: 0; margin: 0; font: inherit; cursor: pointer; text-align: inherit; } button.shop-review-staff-open:focus-visible { outline: 2px solid rgba(125, 211, 252, 0.55); outline-offset: 2px; border-radius: 0.15rem; } .shop-review-author { color: var(--gray-400); font-size: 0.8125rem; } a.shop-review-author-link, a.shop-review-staff-link, button.shop-review-staff-link, a.shop-review-reply-author-link, a.staff-modal-review-author-link, a.staff-modal-review-reply-author-link, a.shop-review-entity-row .shop-review-author-link, a.shop-review-entity-row .staff-modal-review-author-link, a.shop-review-entity-row .shop-review-reply-author-link, a.shop-review-entity-row .staff-modal-review-reply-author-link { color: var(--primary-400); text-decoration: none; } a.shop-review-author-link:hover, a.shop-review-staff-link:hover, button.shop-review-staff-link:hover, a.shop-review-reply-author-link:hover, a.staff-modal-review-author-link:hover, a.staff-modal-review-reply-author-link:hover, a.shop-review-entity-row:hover .shop-review-author-link, a.shop-review-entity-row:hover .staff-modal-review-author-link, a.shop-review-entity-row:hover .shop-review-reply-author-link, a.shop-review-entity-row:hover .staff-modal-review-reply-author-link { color: var(--primary-300); text-decoration: underline; } a.shop-review-entity-row { text-decoration: none; color: inherit; } .shop-review-reply-btn { font-size: 0.8125rem; padding: 0.35rem 0.75rem; } .shop-section-plain { background: transparent; border: none; border-radius: 0; padding: 0; } /* Shop detail - gallery grid */ .shop-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; } .shop-gallery-item { display: block; width: 100%; margin: 0; padding: 0; border: 1px solid var(--hero-border); border-radius: 0.625rem; overflow: hidden; background: var(--hero-bg); cursor: pointer; aspect-ratio: 4 / 3; transition: transform 0.12s ease, border-color 0.12s ease; } .shop-gallery-item:hover, .shop-gallery-item:focus-visible { transform: translateY(-2px); border-color: var(--primary-500, #6366f1); outline: none; } .shop-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Shop detail - staff All / Today / Tomorrow */ .shop-staff-tablist { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .shop-staff-tab { font-size: 0.8125rem; font-weight: 500; padding: 0.375rem 0.75rem; border-radius: 9999px; border: 1px solid var(--hero-border); background: var(--hero-card); color: var(--gray-400); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .shop-staff-tab:hover { color: var(--text-primary); border-color: var(--gray-600); } .shop-staff-tab[aria-selected="true"] { color: var(--text-primary); background: var(--gray-700); border-color: var(--gray-600); } .review-form-scope-tabs { margin-bottom: 1rem; } .review-form-staff-picker { display: flex; flex-direction: column; gap: 0.375rem; max-height: 14rem; overflow-y: auto; } .review-form-staff-option { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem 0.625rem; border: 1px solid var(--hero-border); border-radius: 0.5rem; background: var(--hero-card); color: var(--text-primary); cursor: pointer; text-align: left; font-size: 0.875rem; transition: border-color 0.15s, background 0.15s; } .review-form-staff-option:hover { border-color: var(--gray-600); } .review-form-staff-option[aria-checked="true"] { border-color: var(--primary-500); background: rgba(99, 102, 241, 0.12); } .review-form-staff-option .shop-review-entity-avatar.entity-avatar-chip { width: 2rem; height: 2rem; min-width: 2rem; font-size: 0.7rem; } .review-form-staff-option__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shop-staff-panel[hidden] { display: none !important; } .staff-roster-shift { color: var(--gray-400); font-size: 0.875rem; } .services-grid { display: grid; gap: 0.75rem; } .service-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--hero-border); border-radius: 0.5rem; } .service-name { font-weight: 500; color: var(--text-primary); } .service-right { text-align: right; } .opening-hours-list { display: flex; flex-direction: column; gap: 0.5rem; } .opening-hours-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; font-size: 0.875rem; border-radius: 0.5rem; } .opening-hours-day { color: var(--gray-400); text-transform: capitalize; } .opening-hours-time { color: var(--text-primary); } .opening-hours-list-compact { gap: 0.25rem; } .opening-hours-edit { display: flex; flex-direction: column; gap: 0.75rem; } .opening-hours-edit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; } .opening-hours-edit-day { min-width: 6rem; font-size: 0.875rem; color: var(--gray-400); } .opening-hours-edit-check { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--text-primary); } .opening-hours-edit-check input { margin: 0; } .opening-hours-time-in { width: 6rem; } .opening-hours-to-sep { font-size: 0.875rem; color: var(--gray-500); } .contact-methods-inline { display: flex; flex-direction: column; gap: 0.75rem; } .contact-method-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--hero-border); border-radius: 0.5rem; color: inherit; text-decoration: none; transition: background 0.2s; } .contact-method-item:hover { background: var(--gray-700); } .contact-method-item-text { cursor: default; } .contact-method-item-text:hover { background: var(--hero-border); } .contact-method-icon { flex-shrink: 0; display: flex; color: var(--primary-400); } .contact-method-icon svg { width: 1.25rem; height: 1.25rem; } .contact-method-label { display: block; font-size: 0.75rem; color: var(--gray-400); } .contact-method-value { font-weight: 500; } .service-duration { font-size: 0.875rem; color: var(--gray-400); } .service-desc { font-size: 0.875rem; color: var(--gray-400); } .service-price { font-weight: 600; text-align: right; } .services-group { margin-bottom: 1rem; } .services-group:last-child { margin-bottom: 0; } .services-group-title { font-size: 0.9375rem; font-weight: 600; color: var(--gray-400); margin: 0 0 0.5rem 0; } .services-section-desc { font-size: 0.875rem; color: var(--gray-500); margin: 0 0 0.75rem 0; line-height: 1.45; } .staff-grid { display: grid; gap: 1rem; } .staff-card { display: flex; align-items: center; gap: 1rem; cursor: pointer; transition: background 0.2s; padding: 1rem; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.75rem; cursor: pointer; transition: background 0.2s; text-decoration: none; color: inherit; } .staff-card:hover { background: rgba(42,42,42,0.5); } .staff-photo { width: 4rem; height: 4rem; border-radius: 9999px; background: var(--gray-700); overflow: hidden; flex-shrink: 0; } .staff-photo img { width: 100%; height: 100%; object-fit: cover; } .staff-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gray-400); } .staff-photo-placeholder svg { width: 2rem; height: 2rem; } .staff-card-photo-stack { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; max-width: 5rem; } .staff-photo-carousel { position: relative; } .staff-photo-carousel[data-swipe-bound="1"] { cursor: grab; touch-action: pan-y; } .staff-photo-carousel[data-swipe-bound="1"]:active { cursor: grabbing; } .staff-photo-carousel[data-swipe-bound="1"] .staff-carousel-img { touch-action: pan-y; } .staff-carousel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 0.2s; } .staff-carousel-img.active { position: relative; opacity: 1; } .staff-carousel-dots { display: flex; justify-content: center; gap: 0.2rem; padding: 0.25rem 0 0; margin: 0; } .staff-carousel-dot { width: 5px; height: 5px; border-radius: 9999px; background: rgba(255, 255, 255, 0.45); border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .staff-carousel-dot:hover, .staff-carousel-dot.active { background: white; } .hidden, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .staff-photo-upload-wrap { display: block; } .staff-photo-upload-wrap.is-file-dragging .staff-photos-drop-zone { border-color: rgba(99, 102, 241, 0.95); background: rgba(99, 102, 241, 0.08); } .staff-photos-drop-zone { border: 1px dashed color-mix(in srgb, var(--gray-400) 55%, transparent); border-radius: 0.75rem; padding: 0.65rem 0.85rem; margin-top: 0.65rem; text-align: center; background: var(--gray-800); transition: border-color 0.2s ease, background-color 0.2s ease; cursor: pointer; position: relative; } .staff-photos-drop-zone.is-uploading { pointer-events: none; opacity: 0.88; cursor: wait; } .staff-photos-drop-zone:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; } .staff-photos-drop-zone-title { margin: 0; font-weight: 600; color: var(--gray-200); font-size: 0.88rem; } .staff-photos-drop-zone-hint { margin: 0.45rem 0 0; color: var(--gray-500); font-size: 0.72rem; line-height: 1.35; } .staff-photo-upload-wrap--square .staff-photo-preview-item { width: 9.5rem; } .staff-photo-upload-wrap--square .staff-photo-order-hint { max-width: 9.5rem; } .staff-photo-upload-wrap--square .staff-photo-preview-thumb { width: 8rem; height: 8rem; } .staff-photo-preview-edit { position: absolute; bottom: -0.35rem; left: -0.35rem; z-index: 4; min-width: 1.75rem; min-height: 1.75rem; width: 1.75rem; height: 1.75rem; padding: 0; border: none; border-radius: 9999px; background: rgba(0, 0, 0, 0.72); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .staff-photo-preview-edit svg { flex-shrink: 0; width: 0.9rem; height: 0.9rem; stroke: #ffffff; color: #ffffff; } .staff-photo-preview-edit:hover { background: rgba(99, 102, 241, 0.95); } .account-business-photo-crop-preview { margin: 0 auto 0.75rem; } .account-business-photo-crop-preview .account-business-photo-crop-stage { margin-left: auto; margin-right: auto; } .account-business-photo-crop-preview--feed .account-business-photo-crop-stage { width: var(--account-preview-feed-card-width); max-width: 100%; border: none; background: transparent; } .account-business-photo-crop-preview--feed .account-shop-preview-page { padding-left: 0; padding-right: 0; } .account-business-photo-crop-preview--feed .shop-detail-hero { height: var(--account-preview-feed-photo-height); border-radius: 0.5rem; overflow: hidden; box-shadow: 0 0 0 1px var(--hero-border); } .account-business-photo-crop-preview--shop .account-business-photo-crop-stage { width: var(--account-preview-device-width); max-width: 100%; } .account-business-photo-crop-hero { width: 100%; max-width: none; min-width: 0; margin: 0; } .account-business-photo-crop-hero .shop-detail-hero { height: var(--account-preview-shop-hero-height); margin-bottom: 0; } .account-business-photo-crop-hero canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; } .account-business-photo-crop-hero canvas:active { cursor: grabbing; } .account-business-photo-crop-content { align-items: center; } #account-business-photo-crop-modal[data-crop-context="shop"].open .thesms-modal-wrap { width: auto; max-width: none; } #account-business-photo-crop-modal[data-crop-context="shop"].open .thesms-modal-body.account-business-photo-crop-body { width: fit-content !important; min-width: min(calc(100vw - 2rem), calc(var(--account-preview-device-width) + 3rem)); max-width: min(calc(100vw - 2rem), calc(var(--account-preview-device-width) + 3rem)) !important; } #account-business-photo-crop-modal[data-crop-context="feed"].open .thesms-modal-body.account-business-photo-crop-body { max-width: 32rem; } #account-business-photo-crop-modal.thesms-modal-root.open .thesms-modal-body.account-business-photo-crop-body { width: 100%; } .account-business-photo-crop-preview--staff-gallery .account-business-photo-crop-stage, .account-business-photo-crop-preview--staff-favorites .account-business-photo-crop-stage { width: var(--staff-photo-crop-stage-width, 360px); max-width: 100%; border: none; background: transparent; } .account-business-photo-crop-preview--staff-gallery .staff-photo-crop-preview-page, .account-business-photo-crop-preview--staff-favorites .staff-photo-crop-preview-page { padding-left: 0; padding-right: 0; } .account-business-photo-crop-preview--staff-gallery .staff-photo-crop-hero { height: var(--staff-photo-crop-gallery-height, 480px); border-radius: 0.5rem; overflow: hidden; box-shadow: 0 0 0 1px var(--hero-border); background: #0a0a0a; } .account-business-photo-crop-preview--staff-favorites .staff-photo-crop-hero { height: var(--account-preview-feed-photo-height, 13rem); border-radius: 0.5rem 0.5rem 0 0; overflow: hidden; box-shadow: 0 0 0 1px var(--hero-border); background: var(--gray-800); } .account-business-photo-crop-preview--staff-favorites .account-business-photo-crop-stage { width: var(--account-preview-feed-card-width, 24rem); } #staff-photo-crop-modal[data-crop-context="staff-gallery"].open .thesms-modal-body.account-business-photo-crop-body { max-width: min(calc(100vw - 2rem), 28rem); } #staff-photo-crop-modal[data-crop-context="staff-favorites"].open .thesms-modal-body.account-business-photo-crop-body { max-width: min(calc(100vw - 2rem), 32rem); } #staff-photo-crop-modal.thesms-modal-root.open .thesms-modal-body.account-business-photo-crop-body { width: 100%; } .staff-photo-preview { width: 4rem; height: 4rem; border-radius: 9999px; background: var(--gray-700); overflow: hidden; flex-shrink: 0; } .staff-photo-preview img { width: 100%; height: 100%; object-fit: cover; } .staff-photos-preview { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; padding-top: 0.35rem; } .staff-photos-preview .staff-photo-placeholder { width: 4rem; height: 4rem; border-radius: 9999px; } .account-shop-photos-controls { margin-top: 0.5rem; } .account-shop-photos-dropzone, .account-avatar-upload-dropzone { border: 1px dashed color-mix(in srgb, var(--gray-400) 55%, transparent); border-radius: 0.875rem; padding: 1rem; text-align: center; background: var(--gray-800); transition: border-color .2s ease, background-color .2s ease; cursor: pointer; } .account-shop-photos-dropzone.is-dragging, .account-avatar-upload-dropzone.is-dragging { border-color: rgba(99, 102, 241, 0.95); background: rgba(99, 102, 241, 0.08); } .account-shop-photos-dropzone-title, .account-avatar-upload-dropzone-title { margin: 0; font-weight: 600; color: var(--gray-200); } .account-shop-photos-dropzone-subtitle, .account-avatar-upload-dropzone-subtitle { margin: 0.25rem 0 0.75rem; color: var(--gray-400); font-size: 0.92rem; } .account-shop-photos-dropzone-hint, .account-avatar-upload-dropzone-hint { margin: 0.65rem 0 0; color: var(--gray-500); font-size: 0.78rem; } .account-shop-photos-list { margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; } .account-shop-photo-item { border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 0.75rem; background: rgba(17, 24, 39, 0.65); overflow: hidden; } .account-shop-photo-item.is-dragging { opacity: 0.5; } .account-shop-photo-thumb-wrap { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(2, 6, 23, 0.45); } .account-shop-photo-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .account-shop-photo-order { position: absolute; left: 0.5rem; bottom: 0.5rem; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(148, 163, 184, 0.45); border-radius: 999px; padding: 0.2rem 0.5rem; font-size: 0.75rem; color: #e5e7eb; z-index: 1; } .account-shop-photo-thumb-wrap .account-shop-photo-actions { position: absolute; top: 0.375rem; right: 0.375rem; z-index: 2; padding: 0.125rem 0.25rem; border-radius: 0.375rem; background: rgba(15, 23, 42, 0.78); border: 1px solid rgba(148, 163, 184, 0.28); } .account-feed-photo-preview-img { display: block; width: 100%; max-height: min(70vh, 560px); object-fit: contain; border-radius: 0.5rem; background: rgba(2, 6, 23, 0.45); } /* Account media previews: fixed canonical sizes (match live site; do not resize with viewport) */ :root { --account-preview-feed-card-width: 24rem; --account-preview-feed-photo-height: 13rem; --account-preview-shop-hero-height: 20rem; --account-preview-device-width: 390px; --account-preview-page-padding: 1rem; } .account-preview-device-toggle { display: inline-flex; align-items: center; gap: 0.125rem; background: color-mix(in srgb, var(--hero-border) 72%, transparent); border-radius: 9999px; padding: 0.125rem; } .account-preview-device-btn { border: none; border-radius: 9999px; background: transparent; color: var(--gray-500); font-size: 0.75rem; font-weight: 600; line-height: 1; padding: 0.375rem 0.625rem; cursor: pointer; transition: background 0.15s, color 0.15s; } .account-preview-device-btn:hover { color: var(--gray-300); } .account-preview-device-btn.active { background: color-mix(in srgb, var(--primary-500) 20%, var(--hero-border)); color: var(--primary-400); } .account-preview-device-toolbar { display: flex; justify-content: center; margin-bottom: 0.75rem; } .account-preview-device-toolbar--crop { margin-top: 0.25rem; } .account-feed-preview-modal-root .thesms-modal-wrap, .account-shop-slider-preview-modal-root .thesms-modal-wrap { width: auto; max-width: none; } .account-feed-preview-modal-root .thesms-modal-body { width: fit-content !important; min-width: calc(var(--account-preview-feed-card-width) + 3rem); max-width: calc(var(--account-preview-feed-card-width) + 3rem) !important; } .account-shop-slider-preview-modal-root .thesms-modal-body { width: fit-content !important; min-width: min(calc(100vw - 2rem), calc(var(--account-preview-device-width) + 3rem)); max-width: min(calc(100vw - 2rem), calc(var(--account-preview-device-width) + 3rem)) !important; } .account-feed-preview-modal, .account-shop-slider-preview-modal { align-items: center; } .account-feed-preview-modal .shop-card-wrap { width: var(--account-preview-feed-card-width); max-width: var(--account-preview-feed-card-width); min-width: var(--account-preview-feed-card-width); margin-left: auto; margin-right: auto; margin-bottom: 0; flex-shrink: 0; } .account-feed-preview-modal .shop-card-photo { height: var(--account-preview-feed-photo-height); } .account-shop-slider-preview-help { text-align: center; margin-bottom: 0.5rem; } .account-shop-preview-stage { width: var(--account-preview-device-width); max-width: 100%; margin-left: auto; margin-right: auto; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 0.875rem; overflow: hidden; background: var(--hero-bg); flex-shrink: 0; } .account-shop-preview-page { padding-left: var(--account-preview-page-padding); padding-right: var(--account-preview-page-padding); } .account-shop-preview-stage--bleed .account-shop-preview-page { padding-left: 0; padding-right: 0; } .account-shop-slider-preview-modal .account-shop-slider-preview-hero { width: 100%; max-width: none; min-width: 0; margin: 0; } .account-shop-slider-preview-modal .shop-detail-hero { height: var(--account-preview-shop-hero-height); } .staff-photo-preview-item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; flex-shrink: 0; width: 4.75rem; touch-action: manipulation; } .staff-photo-preview-item.is-dragging { opacity: 0.55; } .staff-photo-preview-thumb { position: relative; width: 4rem; height: 4rem; flex-shrink: 0; } .staff-photo-preview-media { width: 4rem; height: 4rem; border-radius: 9999px; overflow: hidden; background: var(--gray-700); cursor: grab; } .staff-photo-preview-media:active { cursor: grabbing; } .staff-photo-upload-wrap--square .staff-photo-preview-media, .staff-photo-preview-media.staff-photo-preview-media--square { width: 8rem; height: 8rem; border-radius: 0.5rem; } .staff-photo-upload-wrap--square .staff-photos-preview .staff-photo-placeholder { width: 8rem; height: 8rem; border-radius: 0.5rem; } .staff-photo-preview-media img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .staff-photo-preview-remove { position: absolute; top: -0.4rem; right: -0.4rem; z-index: 4; min-width: 1.75rem; min-height: 1.75rem; width: 1.75rem; height: 1.75rem; padding: 0; border: none; border-radius: 9999px; background: rgba(0, 0, 0, 0.72); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; line-height: 1; -webkit-tap-highlight-color: transparent; } .staff-photo-preview-remove svg { flex-shrink: 0; stroke: #ffffff; color: #ffffff; } .staff-photo-preview-remove:hover { background: rgba(220, 38, 38, 0.95); } .staff-photo-order-hint { font-size: 0.68rem; color: var(--gray-400); line-height: 1.2; text-align: center; max-width: 4.75rem; } .staff-photo-reorder-btns { display: flex; gap: 0.2rem; justify-content: center; } .staff-photo-move-up, .staff-photo-move-down { min-width: 1.85rem; min-height: 1.85rem; padding: 0.15rem; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 0.35rem; background: rgba(30, 41, 59, 0.85); color: #e5e7eb; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; -webkit-tap-highlight-color: transparent; } .staff-photo-move-up:hover:not(:disabled), .staff-photo-move-down:hover:not(:disabled) { border-color: rgba(99, 102, 241, 0.65); background: rgba(51, 65, 85, 0.95); } .staff-photo-move-up:disabled, .staff-photo-move-down:disabled { opacity: 0.35; cursor: not-allowed; } .staff-photo-move-up svg, .staff-photo-move-down svg { stroke: currentColor; } .staff-photo-preview-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gray-400); } .staff-photo-preview-placeholder svg { width: 2rem; height: 2rem; } .staff-photo-preview-placeholder.staff-scout-composite-wrap { display: block; padding: 0; overflow: hidden; } .staff-photo-preview-placeholder.staff-scout-composite-wrap .staff-scout-composite-img, .staff-photo-preview-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; } .staff-photos-preview .staff-photo-preview-placeholder img { border-radius: 9999px; } .staff-photo-upload-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .staff-info { flex: 1; min-width: 0; } .staff-name-row { display: flex; align-items: center; gap: 0.5rem; } .staff-name { font-weight: 500; } .staff-review-slot { margin-top: 0.25rem; } .staff-review-slot:empty, .staff-review-slot[hidden] { display: none !important; } .staff-meta { font-size: 0.875rem; color: var(--gray-400); } .staff-chevron { flex-shrink: 0; color: var(--gray-400); display: flex; align-items: center; } .staff-chevron svg { width: 1.25rem; height: 1.25rem; } .shop-detail-staff-actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-shrink: 0; align-self: center; } .shop-detail-staff-actions .shop-card-fav { flex-shrink: 0; } /* Auth pages - match Next.js login/signup */ /* Column wrapper: card + legal hint below (signup) - keeps card width, stacks terms outside the panel */ .auth-page-stack { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 28rem; } .auth-page { /* Fill the band between sticky header and fixed bottom nav; card aligned to top */ min-height: calc( 100dvh - var(--mobile-app-header-height) - var(--bottom-nav-height) - var(--main-content-padding-top-mobile) - var(--main-content-padding-bottom-mobile) - env(safe-area-inset-bottom, 0px) ); display: flex; align-items: flex-start; justify-content: center; padding: 1rem; } @media (min-width: 1024px) { .auth-page { min-height: calc(100dvh - 2rem); padding: 1rem 1.5rem; } } .auth-card { width: 100%; max-width: 28rem; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.5rem; padding: 1.5rem 2rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); } @media (min-width: 640px) { .auth-card { padding: 2rem; } } .auth-card-header { text-align: center; margin-bottom: 1.5rem; } .auth-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; } .auth-subtitle { font-size: 0.875rem; color: var(--gray-400); } .auth-form { display: flex; flex-direction: column; gap: var(--form-field-gap); } .auth-form > .auth-submit { margin-top: var(--form-actions-gap); } .auth-form .auth-field { gap: var(--form-label-gap); } .auth-form .auth-field .auth-label { margin: 0; } .auth-form .customer-only, .auth-form .business-only { display: flex; flex-direction: column; gap: var(--form-field-gap); } .auth-form .auth-field--username .auth-field-hint, .auth-form .auth-field--business-name .auth-field-hint, .auth-form .auth-field--confirm-password .auth-field-hint { min-height: 1.25rem; } .auth-form .auth-password-group { display: flex; flex-direction: column; gap: var(--form-help-gap); } .auth-form .auth-password-group .auth-password-strength { margin-top: var(--form-help-gap); margin-bottom: 0; } .auth-field { display: flex; flex-direction: column; gap: var(--form-label-gap); margin-bottom: 0; } .auth-field .auth-label { display: block; box-sizing: content-box; font-size: 0.875rem; font-weight: 500; color: #d1d5db; margin: 0; } .auth-input { width: 100%; padding: var(--form-control-padding-y) var(--form-control-padding-x); font-size: 1rem; background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 0.5rem; color: var(--text-primary); } .auth-input::placeholder { color: var(--gray-500); } .auth-input:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 2px rgba(124,58,237,0.2); } .auth-select { cursor: pointer; appearance: auto; } .auth-error { padding: 0.75rem 1rem; background: rgba(239,68,68,0.2); border: 1px solid rgba(239,68,68,0.3); border-radius: 0.5rem; color: #f87171; font-size: 0.875rem; } .auth-success a, .auth-success .auth-link { color: #047857; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } .auth-success a:hover, .auth-success .auth-link:hover { color: #065f46; } .auth-submit { width: 100%; padding: 0.75rem 1rem; background: var(--primary-600); color: var(--text-on-primary); font-weight: 500; border: none; border-radius: 0.5rem; cursor: pointer; transition: background 0.2s; } .auth-submit:hover { background: var(--primary-700); } .auth-submit:disabled { opacity: 0.5; cursor: not-allowed; } .auth-footer--back { margin-top: 1rem; } .auth-footer--back .forum-back-link { margin-inline: auto; } .error-page-actions .forum-back-row { margin-bottom: 0.75rem; } .auth-footer { text-align: center; color: var(--gray-400); font-size: 0.875rem; margin-top: 1.5rem; } .auth-footer-secondary { margin-top: 0.5rem; } .auth-footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; margin-top: 1.25rem; } .auth-footer-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--gray-400); text-decoration: none; } .auth-footer-link:hover { color: var(--primary-400); } .auth-footer-link svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* FAQ: text link (login, signup, guest messages/favourites) */ .auth-help-faq-link { display: inline-flex; align-items: center; justify-content: center; color: var(--primary-400); text-decoration: none; font-size: 0.875rem; font-weight: 500; border-radius: 9999px; padding: 0.35rem 0.65rem; transition: color 0.2s, background 0.2s; } .auth-help-faq-link:hover { color: var(--primary-300); background: rgba(139, 92, 246, 0.12); } .auth-help-faq-link:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; } .auth-link { color: var(--primary-400); text-decoration: none; } .auth-link:hover { color: var(--primary-400); } .oauth-banner { margin-bottom: 1rem; } .auth-field-hint { font-size: 0.75rem; margin: 0; color: var(--gray-500); min-height: 1.25em; } .auth-field-hint-ok { color: #34d399; } .auth-field-hint-warn { color: #fbbf24; } .auth-password-strength { margin-top: var(--form-help-gap); margin-bottom: 0; } .auth-password-strength-track { height: 4px; border-radius: 9999px; background: var(--hero-border); overflow: hidden; } .auth-password-strength-fill { display: block; height: 100%; width: 0; border-radius: 9999px; transition: width 0.2s ease, background 0.2s ease; background: var(--gray-500); } .auth-password-strength-fill.is-weak { background: #ef4444; } .auth-password-strength-fill.is-fair { background: #f59e0b; } .auth-password-strength-fill.is-good { background: #84cc16; } .auth-password-strength-fill.is-strong { background: #22c55e; } .auth-password-strength-label { display: block; font-size: 0.7rem; margin-top: 0.25rem; color: var(--gray-500); } .auth-social-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; } .auth-social-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--hero-border); background: var(--hero-border); color: var(--text-primary); font-size: 0.875rem; text-decoration: none; box-sizing: border-box; } a.auth-social-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--primary-500); } .auth-social-btn.disabled { opacity: 0.5; cursor: not-allowed; } .auth-divider { position: relative; margin: 0.5rem 0 1rem; text-align: center; } .auth-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--hero-border); } .auth-divider span { position: relative; padding: 0 0.5rem; background: var(--hero-card); color: var(--gray-400); font-size: 0.75rem; } .auth-password-wrap { position: relative; } .auth-password-wrap .auth-input { padding-right: 2.5rem; } .auth-password-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--gray-400); cursor: pointer; display: inline-flex; align-items: center; } .auth-password-toggle svg { width: 1.25rem; height: 1.25rem; } .auth-role-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; padding: 0.25rem; border-radius: 0.5rem; background: var(--hero-border); margin-bottom: 1rem; } .auth-role-btn { border: none; background: transparent; color: var(--gray-400); border-radius: 0.375rem; padding: 0.5rem; font-size: 0.875rem; cursor: pointer; } .auth-role-btn.active { background: var(--primary-600); color: var(--text-on-primary); } /* Signup role panels: stack fields with shared form rhythm */ .customer-only, .business-only { display: flex; flex-direction: column; gap: var(--form-field-gap); } /* Business signup intro copy (card header; toggled with business role) */ .auth-card-header .auth-business-intro { margin: 0; font-size: 0.875rem; color: var(--gray-400); line-height: 1.65; text-align: center; } .auth-business-intro { margin: 0; font-size: 0.875rem; color: var(--gray-400); line-height: 1.65; } .auth-business-intro p { margin: 0 0 0.5rem; } .auth-business-intro p:last-child { margin-bottom: 0; } .auth-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--form-field-gap); } /* Side-by-side fields: both columns share one row; :first-child label reset only applies to the left cell */ .auth-grid-2 .auth-field .auth-label { margin-top: 0; } /* Forms - legacy */ .form-section { max-width: 28rem; margin: 0 auto; padding: 2rem; } .form-section h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .form .field { display: flex; flex-direction: column; gap: var(--form-label-gap); margin-bottom: var(--form-field-gap); } .form .field:last-child { margin-bottom: 0; } .form label { display: block; font-size: 0.875rem; font-weight: 500; color: #d1d5db; margin: 0; } .form input, .form select, .form textarea { width: 100%; padding: var(--form-control-padding-y) var(--form-control-padding-x); font-size: 1rem; background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 0.5rem; color: var(--text-primary); } .form input::placeholder, .form textarea::placeholder { color: var(--gray-500); } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 2px rgba(124,58,237,0.2); } .form textarea { min-height: 80px; resize: vertical; } .form-footer { text-align: center; color: var(--gray-400); font-size: 0.875rem; margin-top: 1rem; } .form-footer a { color: var(--primary-400); } .error { color: #f87171; font-size: 0.875rem; margin-bottom: 0.5rem; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; font-size: 1rem; font-weight: 500; border-radius: 0.5rem; border: none; cursor: pointer; text-decoration: none; transition: background 0.2s; } .btn-block { width: 100%; padding: 0.75rem; } /* Empty / generic */ .empty { color: var(--gray-400); text-align: center; padding: 2rem; } .space-y-4 > * + * { margin-top: 1rem; } /* Home feed - fixed scroll-to-top / new-posts FAB (compact, tucked to viewport edge) */ .feed-scroll-fab { position: fixed; /* Hug the right chrome; safe-area keeps clear of notched devices */ right: max(0.375rem, env(safe-area-inset-right, 0px)); bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 0.5rem); z-index: 45; display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; background: var(--primary-600); color: var(--text-on-primary); border: none; border-radius: 9999px; cursor: pointer; box-shadow: 0 1px 6px rgba(124, 58, 237, 0.22); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, visibility 0.2s, background 0.2s, transform 0.2s; } @media (min-width: 1024px) { .feed-scroll-fab { width: 2rem; height: 2rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); right: max(0.5rem, env(safe-area-inset-right, 0px)); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.26); } } .feed-scroll-fab.visible { opacity: 1; visibility: visible; pointer-events: auto; } .feed-scroll-fab:hover { background: var(--primary-700); } .feed-scroll-fab-arrow { display: flex; align-items: center; justify-content: center; } .feed-scroll-fab-arrow svg { width: 0.8125rem; height: 0.8125rem; } @media (min-width: 1024px) { .feed-scroll-fab-arrow svg { width: 0.9375rem; height: 0.9375rem; } } .feed-scroll-fab-count { position: absolute; top: -0.12rem; right: -0.12rem; min-width: 0.8125rem; height: 0.8125rem; padding: 0 0.2rem; font-size: 0.5rem; font-weight: 700; line-height: 0.8125rem; text-align: center; background: #ef4444; color: var(--text-primary); border-radius: 9999px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); display: none; } .feed-scroll-fab-count.has-count { display: block; } @keyframes feed-scroll-fab-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.1); } } .feed-scroll-fab--pulse { animation: feed-scroll-fab-pulse 0.65s ease-out; } .section-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .badge { font-size: 0.7rem; padding: 0.15rem 0.4rem; background: var(--primary-600); color: var(--text-on-primary); border-radius: 0.25rem; margin-left: 0.5rem; } /* Messages - chat list + thread (mobile-first, WhatsApp-style list) */ .messages-layout { display: grid; grid-template-columns: 1fr; gap: 0; min-height: 60vh; } @media (min-width: 640px) { .messages-layout { grid-template-columns: minmax(280px, 34%) 1fr; gap: 1rem; min-height: calc(100vh - 8rem); } } /* Desktop: bound the messages layout to the viewport so the compose input stays pinned to the bottom and only the thread scrolls. Without this the grid grows to fit all messages and the whole page scrolls. */ @media (min-width: 1024px) { .messages-layout { height: calc(100dvh - 2rem); min-height: 0; } .messages-section .conversation-view { min-height: 0; max-height: 100%; } /* Admin support: list column matches detail column height (scroll inside list). */ .admin-support-layout.messages-layout .conversation-list { max-height: none; height: 100%; min-height: 0; } .admin-support-layout .conversation-view.admin-ticket-detail { height: 100%; max-height: 100%; } } /* Legacy sub-tabs (kept for admin/support templates that reuse classes) */ .messages-sub-tabs { display: flex; } .messages-sub-tab { flex: 1; padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; text-align: center; text-decoration: none; color: var(--gray-400); background: transparent; transition: color 0.15s, background 0.15s; } .messages-sub-tab:hover { color: var(--text-primary); background: var(--hero-border); } .messages-sub-tab.active { color: var(--text-primary); } .conversation-list .messages-sub-tabs .messages-sub-tab:first-child.active { background: var(--primary-600); color: var(--text-on-primary); } .conversation-list .messages-sub-tabs .messages-sub-tab:last-child.active { background: #b45309; color: var(--text-on-primary); } .conversation-list { display: flex; flex-direction: column; min-height: 0; } .messages-section .conversation-list { background: var(--hero-bg); border-radius: 0.75rem; border: 1px solid var(--hero-border); overflow: hidden; } .messages-chats-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--hero-card); border-bottom: 1px solid var(--hero-border); flex-shrink: 0; } .messages-chats-new-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: none; border-radius: 0.5rem; background: var(--primary-600, #4f46e5); color: #fff; cursor: pointer; flex-shrink: 0; } .messages-chats-new-btn:hover, .messages-chats-new-btn:focus-visible { background: var(--primary-500, #6366f1); } .messages-compose-panel { padding: 0.75rem 1rem; border-bottom: 1px solid var(--hero-border); background: var(--hero-card); flex-shrink: 0; } .messages-compose-panel .modal-label { margin-bottom: var(--form-label-gap); } .messages-search-item { display: flex; align-items: center; gap: 0.65rem; text-align: left; } .messages-search-item-label { display: flex; flex-direction: column; min-width: 0; flex: 1; } .messages-search-item-name { font-weight: 600; color: var(--text-primary); } .messages-search-item-sub { font-size: 0.8125rem; color: var(--gray-400); } .messages-search-item-avatar { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .messages-search-item-avatar--gen { display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #fff; } .member-public-pill--messages-open { border-color: rgba(99, 102, 241, 0.45); } .member-public-pill--messages-private { border-color: rgba(148, 163, 184, 0.35); opacity: 0.9; } .messages-chats-header-text { flex: 1; min-width: 0; } .messages-chats-title { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2; } .messages-chats-back { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-left: -0.25rem; color: var(--gray-300); border-radius: 0.5rem; flex-shrink: 0; } .messages-chats-back:hover { background: var(--hero-border); color: var(--text-primary); } .messages-chats-archived-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 500; color: var(--gray-400); text-decoration: none; flex-shrink: 0; } .messages-chats-archived-link:hover { color: var(--gray-200); } .messages-chats-archived-link svg { width: 1.125rem; height: 1.125rem; opacity: 0.85; } .messages-chats-empty { margin: 0; padding: 2rem 1.25rem; font-size: 0.9rem; color: var(--gray-500); line-height: 1.5; } .messages-chats-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Swipe row (mobile): iOS-style actions sit behind the sliding row */ .convo-swipe-host { --messages-swipe-w: 156px; position: relative; overflow: hidden; border-bottom: 1px solid var(--hero-border); touch-action: pan-y; } .convo-swipe-host:last-child { border-bottom: none; } .convo-swipe-actions { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; display: flex; width: var(--messages-swipe-w); align-items: stretch; } .convo-swipe-track { position: relative; z-index: 1; width: 100%; transform: translateX(0); transition: transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform; } .convo-swipe-host.convo-swipe-dragging .convo-swipe-track { transition: none; } .convo-swipe-btn { flex: 1; min-width: 0; border: none; padding: 0 0.35rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-primary); cursor: pointer; line-height: 1.2; display: flex; align-items: center; justify-content: center; } .convo-swipe-archive, .convo-swipe-unarchive { background: #54656f; } .convo-swipe-archive:hover, .convo-swipe-unarchive:hover { filter: brightness(1.08); } .convo-swipe-delete { background: #c62828; } .convo-swipe-delete:hover { filter: brightness(1.1); } @media (min-width: 640px) { .convo-swipe-host { touch-action: auto; } .convo-swipe-track { transform: none !important; } .convo-swipe-actions { display: none; } } /* Conversation list row (default: admin/support card rows) */ .convo-item { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 0.5rem; text-decoration: none; color: inherit; margin-bottom: 0.25rem; background: var(--hero-card); border: 1px solid var(--hero-border); border-left: 4px solid var(--primary-600); } .convo-item:hover { background: var(--hero-border); } .convo-item.active { background: rgba(124,58,237,0.1); border-color: var(--primary-600); } .convo-avatar-wrap { flex-shrink: 0; } .convo-avatar { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; display: block; } .convo-avatar-placeholder { width: 3rem; height: 3rem; border-radius: 9999px; background: var(--gray-700); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; color: var(--gray-400); } .convo-avatar-generated { width: 3rem; height: 3rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; color: var(--text-primary); } .convo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .convo-preview { display: flex; align-items: center; gap: 0.35rem; min-width: 0; font-size: 0.875rem; color: var(--gray-400); } .convo-preview-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .convo-preview-reactions { display: inline-flex; align-items: center; gap: 0.2rem; flex-shrink: 0; } .convo-info small { font-size: 0.75rem; color: var(--gray-500); } /* Messages app: flat chat list rows */ .messages-chats-list .convo-item { padding: 0.65rem 1rem; margin: 0; border: none; border-radius: 0; border-left: none; background: var(--hero-bg); width: 100%; min-width: 0; box-sizing: border-box; } .messages-chats-list .convo-swipe-track .convo-item { display: flex; } .messages-chats-list .convo-item:hover, .messages-chats-list .convo-item:focus-visible { background: var(--hero-card); outline: none; } .messages-chats-list .convo-item.active { background: rgba(124, 58, 237, 0.12); } .messages-chats-list .convo-item-archived .convo-name { opacity: 0.92; } .messages-chats-list .convo-avatar, .messages-chats-list .convo-avatar-placeholder, .messages-chats-list .convo-avatar-generated { width: 3.25rem; height: 3.25rem; font-size: 1.05rem; } .messages-chats-list .convo-info { gap: 0.2rem; } .convo-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; min-width: 0; } .convo-topline-main { display: flex; align-items: center; gap: 0.35rem; min-width: 0; flex: 1; } .convo-topline-main .convo-name { min-width: 0; } .convo-unread-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; padding: 0.1rem 0.4rem; font-size: 0.65rem; font-weight: 700; line-height: 1.15; border-radius: 999px; background: var(--primary-500); color: var(--text-on-primary); } .messages-chats-list .convo-item-has-unread .convo-preview-text { font-weight: 500; color: var(--gray-300); } .convo-name { font-size: 1rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .convo-time { flex-shrink: 0; font-size: 0.7rem; font-weight: 500; color: var(--gray-500); white-space: nowrap; } .messages-chats-list .convo-preview { font-size: 0.8125rem; line-height: 1.35; } /* Conversation view - chat bubbles */ .conversation-view { display: flex; flex-direction: column; background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 0.75rem; overflow: hidden; } .conv-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--hero-card); border-bottom: 1px solid var(--hero-border); flex-shrink: 0; } .conv-back { display: flex; padding: 0.5rem; color: var(--text-primary); border-radius: 0.5rem; } .conv-back:hover { background: var(--hero-border); } .conv-header-avatar-wrap { flex-shrink: 0; } .conv-header-avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; object-fit: cover; display: block; } .conv-header .conv-avatar-placeholder { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; background: var(--gray-700); color: var(--gray-400); font-weight: 600; } .conv-header .conv-avatar-generated { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; color: var(--text-primary); } .conv-header-title { flex: 1; min-width: 0; font-size: 1.125rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .conv-header-title-wrap { flex: 1; min-width: 0; } .messages-section .conv-header-title-wrap { padding-top: 0.125rem; } .conv-header-role { display: block; font-size: 0.75rem; font-weight: 500; color: var(--gray-400); margin-top: 0.125rem; } .message-list-wrap { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; } .message-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .message-date-sep { display: flex; justify-content: center; padding: 0.35rem 0 0.1rem; list-style: none; } .message-date-sep span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-400); background: var(--hero-card); border: 1px solid var(--hero-border); padding: 0.2rem 0.65rem; border-radius: 999px; } .message-row { display: flex; width: 100%; align-items: flex-start; gap: 0.5rem; } .message-row.message-sent { justify-content: flex-end; } .message-row.message-received { justify-content: flex-start; } .msg-content-wrap { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; max-width: min(20rem, 100%); min-width: 0; } .message-received .msg-content-wrap { align-items: flex-start; } .message-sent .msg-content-wrap { align-items: flex-end; } .msg-bubble { position: relative; max-width: 100%; padding: 0.5rem 0.85rem; border-radius: 1.1rem; cursor: pointer; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); } .message-sent .msg-bubble { background: var(--primary-600); color: var(--text-on-primary); border-bottom-right-radius: 0.35rem; } .message-received .msg-bubble { background: var(--hero-card); color: var(--text-primary); border: 1px solid var(--hero-border); border-bottom-left-radius: 0.35rem; } .msg-bubble::after { content: ""; position: absolute; bottom: 0; width: 10px; height: 12px; pointer-events: none; } .message-sent .msg-bubble::after { right: -6px; background: var(--primary-600); clip-path: polygon(0 0, 0 100%, 100% 100%); } .message-received .msg-bubble::after { left: -6px; background: var(--hero-card); clip-path: polygon(100% 0, 0 100%, 100% 100%); filter: drop-shadow(-1px 0 0 var(--hero-border)) drop-shadow(0 1px 0 var(--hero-border)); } .msg-quote { margin: 0 0 0.45rem 0; padding: 0.4rem 0.55rem 0.4rem 0.6rem; border: 0; border-left: 3px solid rgba(255, 255, 255, 0.5); border-radius: 0.4rem; font-size: 0.8125rem; line-height: 1.4; font-weight: 500; color: inherit; opacity: 0.95; background: rgba(0, 0, 0, 0.14); white-space: pre-wrap; word-break: break-word; max-width: 100%; box-sizing: border-box; } .message-received .msg-quote { border-left-color: rgba(124, 58, 237, 0.55); background: rgba(0, 0, 0, 0.05); color: var(--text-primary); opacity: 0.9; } .message-sent .msg-quote { border-left-color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.12); } .msg-text { font-size: 0.875rem; white-space: pre-wrap; word-break: break-word; margin: 0; } .msg-reactions { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; min-height: 1.2rem; } .msg-reactions[hidden] { display: none; } .msg-reaction-badge { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.38rem; border-radius: 999px; border: 1px solid var(--hero-border); background: rgba(255, 255, 255, 0.04); font-size: 0.75rem; line-height: 1; color: var(--gray-200); } .msg-reaction-badge.is-mine { border-color: rgba(167, 139, 250, 0.6); background: rgba(124, 58, 237, 0.24); } .msg-reaction-count { font-size: 0.68rem; color: var(--gray-300); } .convo-preview-reactions .msg-reaction-badge { padding: 0.05rem 0.28rem; font-size: 0.68rem; } .msg-meta-row { width: 100%; display: flex; align-items: center; gap: 0.45rem; } .message-sent .msg-meta-row { justify-content: flex-end; } .message-received .msg-meta-row { justify-content: flex-start; } .message-row.actions-open .msg-meta-row { flex-direction: column; gap: 0.2rem; } .message-row.message-sent.actions-open .msg-meta-row { align-items: flex-end; } .message-row.message-received.actions-open .msg-meta-row { align-items: flex-start; } .msg-time { font-size: 0.68rem; font-weight: 500; margin: 0; white-space: nowrap; letter-spacing: 0.01em; color: var(--gray-500); padding: 0 0.2rem; opacity: 0.85; } .msg-action-row { display: inline-flex; align-items: center; gap: 0.15rem; } .message-row.actions-open .msg-action-row { position: relative; bottom: auto; z-index: 1; padding: 0.2rem 0.35rem; gap: 0.1rem; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); animation: msg-action-pop 0.12s ease-out; transform-origin: center bottom; } .message-row.message-sent.actions-open .msg-action-row { right: auto; } .message-row.message-received.actions-open .msg-action-row { left: auto; } @keyframes msg-action-pop { from { opacity: 0; transform: translateY(4px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } .msg-reply-btn, .msg-emoji-btn, .msg-delete-btn { flex-shrink: 0; padding: 0.25rem 0.5rem; background: transparent; border: none; border-radius: 999px; color: var(--gray-300); cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 0.78rem; transition: background 0.12s, color 0.12s; } .msg-action-row .msg-reply-btn, .msg-action-row .msg-emoji-btn { display: none; } .message-row.actions-open .msg-action-row .msg-reply-btn, .message-row.actions-open .msg-action-row .msg-emoji-btn { display: flex; } .msg-emoji-btn { min-width: 1.6rem; padding: 0.25rem 0.35rem; font-size: 0.95rem; } .msg-delete-btn:hover { opacity: 1; color: var(--text-primary); background: rgba(248, 113, 113, 0.25); border-color: rgba(248, 113, 113, 0.45); } .msg-reply-btn:hover, .msg-emoji-btn:hover { color: var(--text-primary); background: var(--hero-border); } .msg-delete-btn svg { width: 0.875rem; height: 0.875rem; } .message-received .msg-delete-btn { display: none; } /* Compose bar — wraps the optional status note + the message form so they stay visually anchored together. On mobile this becomes position: fixed so the form is always locked above the bottom nav (was previously in-flow inside .conversation-view, which made it move with body scroll / iOS URL bar collapses, hence the "jumping"). */ .message-compose-bar { display: flex; flex-direction: column; flex-shrink: 0; } /* Message input - match Next.js */ .message-form { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); background: var(--hero-card); border-top: 1px solid var(--hero-border); flex-shrink: 0; } .msg-replying { flex: 1 0 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem 0.5rem 0.75rem; border: 1px solid var(--hero-border); border-left: 3px solid var(--primary-500); border-radius: 0.5rem; background: rgba(124, 58, 237, 0.08); margin: 0 0 0.1rem; } .msg-replying[hidden] { display: none; } .msg-replying-text { flex: 1; min-width: 0; font-size: 0.78rem; line-height: 1.3; color: var(--gray-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-replying-cancel { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: none; background: transparent; color: var(--gray-400); cursor: pointer; border-radius: 999px; padding: 0; transition: background 0.12s, color 0.12s; } .msg-replying-cancel:hover, .msg-replying-cancel:focus-visible { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); outline: none; } .msg-replying-cancel svg { width: 0.95rem; height: 0.95rem; } /* Messages: mobile = list OR thread, not both */ @media (max-width: 1023px) { /* Main already has padding-bottom for the fixed bottom nav; keep thread/list height within the header–nav band */ .messages-section .messages-layout { min-height: var(--mobile-usable-viewport-height); } } @media (max-width: 639px) { .main-content:has(.messages-section.messages-in-thread) { max-width: none; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } .messages-section.messages-in-thread { margin: 0; } .messages-section.messages-in-thread .messages-layout { min-height: calc( 100dvh - var(--mobile-app-header-height) - var(--bottom-nav-height) ); } .messages-section:not(.messages-in-thread) .conversation-view { display: none; } .messages-section:not(.messages-in-thread) .conversation-list { min-height: var(--mobile-usable-viewport-height); border-radius: 0; border-left: none; border-right: none; } .messages-section.messages-in-thread .conversation-list { display: none; } .messages-section.messages-in-thread .conversation-view { height: calc( 100dvh - var(--mobile-app-header-height) - var(--bottom-nav-height) ); min-height: 0; max-height: calc( 100dvh - var(--mobile-app-header-height) - var(--bottom-nav-height) ); border-radius: 0; border: none; } /* Lock the compose bar (note + form) above the fixed bottom nav. Using position: fixed (rather than relying on the parent flex column) means body scroll, iOS URL bar collapses, and reflows from 100dvh changes can't shift the form — it always sits exactly above the nav. */ .messages-section.messages-in-thread .message-compose-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom)); z-index: 30; background: var(--hero-card); border-top: 1px solid var(--hero-border); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18); } /* The form already had its own background + border-top + safe-area padding-bottom — those are now provided by the fixed bar, so the form itself becomes a transparent inner row. */ .messages-section.messages-in-thread .message-compose-bar .message-form { background: transparent; border-top: 0; padding: 0.75rem 1rem; } .messages-section.messages-in-thread .message-compose-bar .message-form-note { background: transparent; border-top: 0; } /* Reserve enough scroll-padding so the latest message isn't hidden behind the fixed compose bar. The `--message-compose-bar-height` variable is set by JS in messages.php (ResizeObserver on the bar) so the value adapts when the bar grows (e.g. when a status note appears for blocked or no-subscription threads). 4.5rem is a sensible fallback. */ .messages-section.messages-in-thread .message-list-wrap { padding-bottom: calc(var(--message-compose-bar-height, 4.5rem) + 0.5rem); scroll-padding-bottom: calc(var(--message-compose-bar-height, 4.5rem) + 0.5rem); } /* Admin support thread: keep composer anchored above fixed bottom nav */ .admin-support-layout .conversation-view { height: calc( 100dvh - var(--mobile-app-header-height) - var(--bottom-nav-height) ); min-height: 0; max-height: calc( 100dvh - var(--mobile-app-header-height) - var(--bottom-nav-height) ); border-radius: 0; border-left: none; border-right: none; } .admin-support-layout .message-list-wrap { padding-bottom: 0.5rem; } .admin-support-layout .message-form { position: sticky; bottom: 0; z-index: 2; } } @media (max-width: 1023px) { .conversation-view { max-height: var(--mobile-usable-viewport-height); min-height: 16rem; } .message-list-wrap { min-height: 0; -webkit-overflow-scrolling: touch; } } /* Conversation header menu (archive / delete) */ .conv-header-actions { position: relative; margin-left: auto; flex-shrink: 0; } .conv-menu-btn { display: flex; align-items: center; justify-content: center; padding: 0.5rem; background: transparent; border: none; border-radius: 0.5rem; color: var(--gray-400); cursor: pointer; } .conv-menu-btn:hover { background: var(--hero-border); color: var(--text-primary); } .conv-menu-dropdown { position: absolute; top: 100%; right: 0; margin-top: 0.25rem; min-width: 12rem; padding: 0.25rem; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 50; } .conv-menu-dropdown[hidden] { display: none; } .conv-menu-item { display: block; width: 100%; padding: 0.5rem 0.75rem; text-align: left; font-size: 0.875rem; color: var(--text-primary); background: none; border: none; border-radius: 0.375rem; cursor: pointer; } .conv-menu-item:hover { background: var(--hero-border); } .conv-menu-item-danger { color: var(--red-400, #f87171); } .conv-menu-item-danger:hover { background: rgba(248,113,113,0.15); } /* Thread status: block / flag / report history (business-customer) */ .conv-thread-banners { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--hero-bg); border-bottom: 1px solid var(--hero-border); flex-shrink: 0; } .conv-status-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; font-size: 0.8125rem; line-height: 1.4; padding: 0.5rem 0.65rem; border-radius: 0.375rem; border: 1px solid var(--hero-border); } .conv-status-banner-icon { display: inline-flex; flex-shrink: 0; color: var(--amber-400, #fbbf24); } .conv-status-banner-label { font-weight: 600; flex-shrink: 0; } .conv-status-banner-text { color: var(--gray-400); flex: 1 1 100%; } .conv-status-banner--blocked { border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); } .conv-status-banner--blocked .conv-status-banner-label { color: var(--red-400, #f87171); } .conv-status-banner--flagged { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.08); } .conv-status-banner--flagged .conv-status-banner-label { color: var(--amber-400, #fbbf24); } .conv-report-history { font-size: 0.8125rem; border: 1px solid var(--hero-border); border-radius: 0.375rem; padding: 0.35rem 0.5rem; background: var(--hero-card); } .conv-flag-history { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.08); } .conv-flag-history .conv-report-history-summary { color: var(--amber-400, #fbbf24); } .conv-report-history-summary { cursor: pointer; font-weight: 500; color: var(--gray-300); list-style: none; } .conv-report-history-summary::-webkit-details-marker { display: none; } .conv-report-history-list { margin: 0.5rem 0 0; padding: 0 0 0 1rem; list-style: disc; color: var(--gray-400); } .conv-report-history-list li { margin-bottom: 0.35rem; } .conv-report-history-list time { display: block; font-size: 0.75rem; color: var(--gray-500); } .conv-report-reason { display: block; white-space: pre-wrap; word-break: break-word; } .message-form input[type="text"] { flex: 1; padding: 0.55rem 1rem; background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 9999px; color: var(--text-primary); font-size: 1rem; } .message-form input::placeholder { color: var(--gray-500); } .message-form input:focus { outline: none; box-shadow: 0 0 0 2px var(--primary-500); } .msg-send-btn { display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.85rem; background: var(--primary-600); color: var(--text-on-primary); border: none; border-radius: 9999px; cursor: pointer; flex-shrink: 0; } .msg-send-btn:hover { background: var(--primary-700); } .message-form-note { margin: 0; padding: 0.35rem 1rem 0.85rem; font-size: 0.78rem; color: var(--gray-400); border-top: 1px solid var(--hero-border); background: var(--hero-card); } /* Account - Next.js parity */ .account-page { padding: 1rem; } @media (max-width: 1023px) { .account-page { padding-top: 1rem; padding-bottom: 1rem; padding-left: 0; padding-right: 0; } } .account-container { max-width: 56rem; margin: 0 auto; } .account-container.max-w-4xl { max-width: 56rem; } .account-space-y { display: flex; flex-direction: column; gap: 1.5rem; } .account-card { background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.75rem; padding: 1.5rem; position: relative; } .account-card--danger { border: 2px solid #dc2626; box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.25); } .account-card--danger .info-section-title { color: #fca5a5; } .account-card-top-actions { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2; display: flex; gap: 0.5rem; align-items: center; } .account-signout-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border-radius: 999px; min-width: 0; } .account-signout-icon { display: inline-flex; color: var(--gray-300); } .account-signout-icon svg { width: 0.9rem; height: 0.9rem; } .account-profile-header { text-align: center; margin-bottom: 1.5rem; } .account-business-title { font-size: 1.875rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem 0; } .account-profile-subtitle { color: var(--gray-400); margin: 0; } .account-avatar-wrap { display: flex; justify-content: center; margin-bottom: 1.5rem; } .account-avatar-wrap--profile { margin-bottom: 0; justify-content: flex-start; } .account-profile-header--business { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; text-align: left; } .account-profile-intro { min-width: 0; } .account-role-kicker { margin: 0 0 0.45rem 0; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-400); } .account-avatar { width: 5rem; height: 5rem; border-radius: 9999px; overflow: hidden; background: var(--primary-600); display: flex; align-items: center; justify-content: center; } .account-avatar img { width: 100%; height: 100%; object-fit: cover; } .account-avatar svg { width: 2.5rem; height: 2.5rem; color: var(--text-primary); } .account-avatar-placeholder { } .account-avatar-sm { width: 4rem; height: 4rem; } .account-avatar-sm svg { width: 2rem; height: 2rem; } .account-avatar-lg { width: 6rem; height: 6rem; } .account-avatar-generated { color: var(--text-primary); font-weight: 600; line-height: 1; } .account-avatar-sm.account-avatar-generated { font-size: 1.25rem; } /* Generated avatar text: auto-shrink by grapheme count (see avatar-gen-text in app.js / helpers.php) */ .avatar-gen-text { display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; margin: 0; text-align: center; overflow: hidden; max-width: 100%; letter-spacing: -0.02em; font-variant-emoji: emoji; } .account-avatar-generated.avatar-gen-text--len-1.avatar-gen-text--emoji { font-size: 2.15rem; transform: translateY(-0.03em); } .account-avatar-generated.avatar-gen-text--len-2.avatar-gen-text--emoji { font-size: 1.75rem; transform: translateY(-0.02em); } .account-avatar-generated.avatar-gen-text--len-3.avatar-gen-text--emoji, .account-avatar-generated.avatar-gen-text--len-4.avatar-gen-text--emoji { font-size: 1.35rem; } .account-avatar-generated.avatar-gen-text--len-1.avatar-gen-text--letters { font-size: 1.85rem; } .account-avatar-generated.avatar-gen-text--len-2.avatar-gen-text--letters { font-size: 1.55rem; } .account-avatar-generated.avatar-gen-text--len-3.avatar-gen-text--letters { font-size: 1.2rem; } .account-avatar-generated.avatar-gen-text--len-4.avatar-gen-text--letters { font-size: 0.95rem; letter-spacing: -0.04em; } .account-avatar-lg.account-avatar-generated.avatar-gen-text--len-1.avatar-gen-text--emoji { font-size: 2.35rem; } .account-avatar-lg.account-avatar-generated.avatar-gen-text--len-2.avatar-gen-text--emoji { font-size: 1.9rem; } .account-avatar-lg.account-avatar-generated.avatar-gen-text--len-3.avatar-gen-text--emoji, .account-avatar-lg.account-avatar-generated.avatar-gen-text--len-4.avatar-gen-text--emoji { font-size: 1.45rem; } .account-avatar-lg.account-avatar-generated.avatar-gen-text--len-1.avatar-gen-text--letters { font-size: 2rem; } .account-avatar-lg.account-avatar-generated.avatar-gen-text--len-2.avatar-gen-text--letters { font-size: 1.7rem; } .account-avatar-lg.account-avatar-generated.avatar-gen-text--len-3.avatar-gen-text--letters { font-size: 1.3rem; } .account-avatar-lg.account-avatar-generated.avatar-gen-text--len-4.avatar-gen-text--letters { font-size: 1rem; } .account-avatar-sm.account-avatar-generated.avatar-gen-text--len-1.avatar-gen-text--emoji { font-size: 1.45rem; } .account-avatar-sm.account-avatar-generated.avatar-gen-text--len-2.avatar-gen-text--emoji { font-size: 1.2rem; } .account-avatar-sm.account-avatar-generated.avatar-gen-text--len-3.avatar-gen-text--emoji, .account-avatar-sm.account-avatar-generated.avatar-gen-text--len-4.avatar-gen-text--emoji { font-size: 0.95rem; } .account-avatar-sm.account-avatar-generated.avatar-gen-text--len-1.avatar-gen-text--letters { font-size: 1.25rem; } .account-avatar-sm.account-avatar-generated.avatar-gen-text--len-2.avatar-gen-text--letters { font-size: 1.05rem; } .account-avatar-sm.account-avatar-generated.avatar-gen-text--len-3.avatar-gen-text--letters { font-size: 0.85rem; } .account-avatar-sm.account-avatar-generated.avatar-gen-text--len-4.avatar-gen-text--letters { font-size: 0.7rem; } .convo-avatar-generated.avatar-gen-text--len-1.avatar-gen-text--emoji, .conv-avatar-generated.avatar-gen-text--len-1.avatar-gen-text--emoji { font-size: 1.15rem; } .convo-avatar-generated.avatar-gen-text--len-2.avatar-gen-text--emoji, .conv-avatar-generated.avatar-gen-text--len-2.avatar-gen-text--emoji { font-size: 0.95rem; } .convo-avatar-generated.avatar-gen-text--len-3.avatar-gen-text--emoji, .convo-avatar-generated.avatar-gen-text--len-3.avatar-gen-text--emoji, .convo-avatar-generated.avatar-gen-text--len-4.avatar-gen-text--emoji, .conv-avatar-generated.avatar-gen-text--len-4.avatar-gen-text--emoji { font-size: 0.78rem; } .convo-avatar-generated.avatar-gen-text--len-1.avatar-gen-text--letters, .conv-avatar-generated.avatar-gen-text--len-1.avatar-gen-text--letters { font-size: 1rem; } .convo-avatar-generated.avatar-gen-text--len-2.avatar-gen-text--letters, .conv-avatar-generated.avatar-gen-text--len-2.avatar-gen-text--letters { font-size: 0.88rem; } .convo-avatar-generated.avatar-gen-text--len-3.avatar-gen-text--letters, .conv-avatar-generated.avatar-gen-text--len-3.avatar-gen-text--letters { font-size: 0.72rem; } .convo-avatar-generated.avatar-gen-text--len-4.avatar-gen-text--letters, .conv-avatar-generated.avatar-gen-text--len-4.avatar-gen-text--letters { font-size: 0.58rem; letter-spacing: -0.05em; } .entity-avatar-chip.avatar-gen-text--len-1.avatar-gen-text--emoji { font-size: 0.72rem; } .entity-avatar-chip.avatar-gen-text--len-2.avatar-gen-text--emoji { font-size: 0.6rem; } .entity-avatar-chip.avatar-gen-text--len-3.avatar-gen-text--emoji, .entity-avatar-chip.avatar-gen-text--len-4.avatar-gen-text--emoji { font-size: 0.5rem; } .entity-avatar-chip.avatar-gen-text--len-1.avatar-gen-text--letters { font-size: 0.62rem; } .entity-avatar-chip.avatar-gen-text--len-2.avatar-gen-text--letters { font-size: 0.55rem; } .entity-avatar-chip.avatar-gen-text--len-3.avatar-gen-text--letters { font-size: 0.48rem; } .entity-avatar-chip.avatar-gen-text--len-4.avatar-gen-text--letters { font-size: 0.4rem; } .forum-mention-item__avatar.avatar-gen-text--len-1.avatar-gen-text--emoji { font-size: 0.85rem; } .forum-mention-item__avatar.avatar-gen-text--len-2.avatar-gen-text--emoji { font-size: 0.7rem; } .forum-mention-item__avatar.avatar-gen-text--len-3.avatar-gen-text--emoji, .forum-mention-item__avatar.avatar-gen-text--len-4.avatar-gen-text--emoji { font-size: 0.58rem; } .forum-mention-item__avatar.avatar-gen-text--len-1.avatar-gen-text--letters { font-size: 0.7rem; } .forum-mention-item__avatar.avatar-gen-text--len-2.avatar-gen-text--letters { font-size: 0.6rem; } .forum-mention-item__avatar.avatar-gen-text--len-3.avatar-gen-text--letters { font-size: 0.5rem; } .forum-mention-item__avatar.avatar-gen-text--len-4.avatar-gen-text--letters { font-size: 0.42rem; } .account-avatar-upload-dropzone[hidden], .account-avatar-crop[hidden] { display: none !important; } .account-avatar-crop { margin-top: 0; } .account-avatar-crop-preview { position: relative; width: 280px; max-width: 100%; margin: 0 auto 0.75rem; border-radius: 9999px; overflow: hidden; box-shadow: 0 0 0 1px var(--hero-border); } .account-avatar-crop-preview canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; } .account-avatar-crop-preview canvas:active { cursor: grabbing; } .account-avatar-crop-zoom-label { display: block; font-size: 0.8125rem; color: var(--gray-400); margin-bottom: 0.35rem; } .account-avatar-crop-zoom { width: 100%; margin-bottom: 0.75rem; } .account-avatar-crop-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } .account-avatar-text-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.35rem; } .account-avatar-text-count { font-size: 0.75rem; color: var(--gray-500); } #account-avatar-modal.thesms-modal-root.open:has(.account-avatar-crop:not([hidden])) .thesms-modal-body { max-width: 32rem; } #panel-generated #account-avatar-save-generated { margin-top: 0.75rem; } .account-avatar-admin { background: var(--primary-600); } .account-avatar-editable { position: relative; display: inline-block; flex-shrink: 0; } .account-avatar-edit-btn { position: absolute; right: 0; bottom: 0; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--primary-600); border: 2px solid var(--hero-card); color: var(--text-on-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .account-avatar-edit-btn:hover { background: var(--primary-500); } .account-avatar-edit-btn svg { width: 0.875rem; height: 0.875rem; } .account-avatar-section { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; } .account-avatar-current { flex-shrink: 0; } .account-avatar-options { flex: 1; min-width: 0; } .account-avatar-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .account-avatar-tab { padding: 0.5rem 1rem; border-radius: 0.375rem; background: transparent; color: var(--gray-400); border: 1px solid var(--hero-border); cursor: pointer; font-size: 0.875rem; } .account-avatar-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); } .account-avatar-tab.active { background: var(--primary-600); color: var(--text-on-primary); border-color: var(--primary-500); } .account-avatar-panel { display: none; } .account-avatar-panel.active { display: block; } .account-avatar-upload-field { margin: 0; } #account-avatar-modal .modal-content { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: 0.75rem; align-items: start; } #account-avatar-modal #account-avatar-preview { grid-column: 1; grid-row: 1; margin-bottom: 0; } #account-avatar-modal #panel-upload { grid-column: 2; grid-row: 1; align-self: start; } #account-avatar-modal #account-avatar-tabs { grid-column: 1 / -1; grid-row: 2; margin-bottom: 0; } #account-avatar-modal #panel-generated { grid-column: 1 / -1; grid-row: 3; } @media (max-width: 640px) { #account-avatar-modal .modal-content { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; } #account-avatar-modal #account-avatar-preview, #account-avatar-modal #panel-upload, #account-avatar-modal #account-avatar-tabs, #account-avatar-modal #panel-generated { grid-column: 1; grid-row: auto; } } .account-avatar-emoji-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; } .account-avatar-emoji-btn { border: 1px solid var(--hero-border); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.03); color: var(--text-primary); font-size: 1.125rem; line-height: 1; padding: 0.55rem 0.25rem; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease; } .account-avatar-emoji-btn:hover { border-color: var(--primary-500); background: rgba(99, 102, 241, 0.14); transform: translateY(-1px); } .account-avatar-emoji-btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; } .account-avatar-color-input { width: 3rem; height: 2.25rem; padding: 0.125rem; border-radius: 0.375rem; border: 1px solid var(--hero-border); background: var(--gray-800); cursor: pointer; vertical-align: middle; } .account-avatar-color-hex { margin-left: 0.5rem; font-size: 0.875rem; color: var(--gray-400); vertical-align: middle; } .account-quick-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; font-size: 0.875rem; } .account-quick-stats[hidden] { display: none !important; } .account-quick-stats--left { justify-content: flex-start; } .account-quick-stat { display: flex; align-items: center; gap: 0.5rem; color: var(--gray-300); } .account-quick-stat-icon { display: inline-flex; color: var(--primary-400); } .account-quick-stat-icon svg { width: 1.25rem; height: 1.25rem; } .account-quick-stat-icon--handle { font-weight: 600; font-size: 1rem; line-height: 1; min-width: 1.25rem; justify-content: center; } .account-quick-stat-text { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; } .account-quick-stat--public-url .account-quick-stat-url-label { color: var(--gray-400); transition: color 120ms ease; } a.account-quick-stat--public-url { text-decoration: none; } a.account-quick-stat--public-url:hover .account-quick-stat-url-label, a.account-quick-stat--public-url:focus-visible .account-quick-stat-url-label { color: var(--primary-400); text-decoration: underline; } a.account-quick-stat--public-url:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: 0.25rem; } .account-quick-stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); } .account-profile-edit-form { display: flex; flex-direction: column; gap: var(--form-field-gap); width: 100%; } .account-profile-edit-form[hidden] { display: none !important; } .account-profile-edit-fields { display: grid; gap: var(--form-field-gap); grid-template-columns: 1fr; } @media (min-width: 640px) { .account-profile-edit-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .account-profile-edit-field { display: flex; flex-direction: column; gap: var(--form-label-gap); min-width: 0; } .account-profile-edit-field > .modal-label, .account-profile-edit-field > .info-section-help { margin: 0; } .account-profile-edit-field .modal-input { width: 100%; min-width: 0; } .account-profile-edit-actions { display: flex; flex-wrap: wrap; gap: var(--form-actions-gap); align-items: center; margin-top: var(--form-actions-margin-top); padding-top: 0.25rem; } .account-profile-edit-actions .btn, .info-section-save-cancel .btn, .modal-confirm-actions .btn { padding: var(--form-btn-padding-y) var(--form-btn-padding-x); font-size: 0.9375rem; line-height: 1.25; min-height: 2.75rem; } .account-at-a-glance { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--hero-border); } .account-at-a-glance-title { margin: 0 0 0.75rem 0; color: var(--gray-300); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .account-at-a-glance-grid { display: grid; grid-template-columns: 1fr; gap: 0.625rem; } .account-at-a-glance-item { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; border: 1px solid var(--hero-border); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.03); padding: 0.55rem 0.7rem; } .account-at-a-glance-label { color: var(--gray-400); font-size: 0.8125rem; } .account-at-a-glance-value { color: var(--text-primary); font-size: 0.875rem; font-weight: 500; text-align: right; border-radius: 999px; padding: 0.12rem 0.5rem; background: rgba(148, 163, 184, 0.15); border: 1px solid rgba(148, 163, 184, 0.25); } .account-at-a-glance-value.is-online, .account-at-a-glance-value.is-success { color: #86efac; background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.35); } .account-at-a-glance-value.is-offline { color: #fca5a5; background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.35); } .account-at-a-glance-value.is-warning { color: #fcd34d; background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.35); } .account-at-a-glance-item.is-online, .account-at-a-glance-item.is-success { border-color: rgba(34, 197, 94, 0.35); } .account-at-a-glance-item.is-offline { border-color: rgba(239, 68, 68, 0.35); } .account-at-a-glance-item.is-warning { border-color: rgba(245, 158, 11, 0.35); } @media (min-width: 768px) { .account-profile-header--business { flex-direction: row; align-items: flex-start; text-align: left; } } .account-profile-header-inline { display: flex; align-items: center; gap: 1rem; } .account-role-title { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.25rem 0; } .account-info-inner { } .account-actions-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; } @media (min-width: 768px) { .account-actions-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .account-actions-grid { grid-template-columns: repeat(3, 1fr); } } .account-action-card { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: rgba(59, 130, 246, 0.2); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 0.5rem; color: var(--primary-400); text-decoration: none; transition: background 0.2s, border-color 0.2s; } .account-action-card:hover { background: rgba(59, 130, 246, 0.3); } .account-action-card svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .info-section-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } /* Admin: title + description are siblings; default row + space-between put the blurb beside the heading. */ .admin-page .info-section-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1.25rem; } /* Staff reviews tab: title block + refresh icon top-right (matches account card actions pattern) */ .admin-page .admin-reviews-section-header { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; } .admin-page .admin-reviews-section-header .info-section-header-left { flex: 1; min-width: 0; max-width: min(72ch, 100%); } /* Staff reviews tab: consistent vertical rhythm between masthead, rules panel, filters, table */ .admin-page .admin-staff-reviews-card { display: flex; flex-direction: column; gap: 1.25rem; } .admin-page .admin-staff-reviews-card .admin-reviews-section-header { margin-bottom: 0; } .admin-page .admin-staff-reviews-card .admin-reviews-queue-toolbar { padding-top: 0.25rem; } /* Forum tab: same vertical rhythm as staff review moderation */ .admin-page .admin-forum-moderation-card { display: flex; flex-direction: column; gap: 1.25rem; } .admin-page .admin-forum-moderation-card .info-section-header { margin-bottom: 0; } .admin-page .admin-forum-moderation-card .info-section-header-left { max-width: min(72ch, 100%); } .admin-page .admin-forum-moderation-card .admin-forum-queue-toolbar { padding-top: 0.25rem; } /* Moderation cards: rules panel (utility classes like p-4 / space-y-3 are not defined in app.css) */ .admin-page .admin-staff-reviews-card .account-card-inner, .admin-page .admin-forum-moderation-card .account-card-inner { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--hero-border); box-sizing: border-box; } .admin-page .admin-staff-reviews-card .account-card-inner > .flex, .admin-page .admin-forum-moderation-card .account-card-inner > .flex { gap: 0.5rem 1.5rem; } /* Moderation masthead: single vertical rhythm for title + two lines of copy */ .admin-page .admin-staff-reviews-card .admin-reviews-section-header .info-section-header-left, .admin-page .admin-forum-moderation-card .info-section-header .info-section-header-left { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .admin-page .admin-staff-reviews-card .admin-reviews-section-header .info-section-header-left > .info-section-title + .info-section-desc, .admin-page .admin-forum-moderation-card .info-section-header-left > .info-section-title + .info-section-desc { padding-top: 0; } .admin-page .admin-staff-reviews-card .admin-reviews-section-header .info-section-header-left > .info-section-desc, .admin-page .admin-forum-moderation-card .info-section-header-left > .info-section-desc { margin: 0; } @media (max-width: 36rem) { .admin-page .admin-reviews-section-header { flex-direction: column; align-items: stretch; } .admin-page .admin-reviews-section-header .info-section-actions { align-self: flex-end; } } /* Reviews tab refresh: avoid cramped secondary + 1rem SVG shrink from .info-section-actions */ .admin-reviews-refresh-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; min-width: 2.5rem; min-height: 2.5rem; padding: 0; margin: 0; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: var(--gray-300); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .admin-reviews-refresh-btn:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.22); color: var(--text-primary); } .admin-reviews-refresh-btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; } .admin-page .admin-reviews-section-header .info-section-actions .admin-reviews-refresh-btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .admin-review-detail-panel { max-width: 36rem; width: 100%; max-height: min(85vh, 40rem); overflow: auto; box-sizing: border-box; } #admin-review-detail-body { white-space: pre-wrap; } .admin-prepaid-overlay { --admin-overlay-safe-top: env(safe-area-inset-top, 0px); --admin-overlay-safe-right: env(safe-area-inset-right, 0px); --admin-overlay-safe-bottom: env(safe-area-inset-bottom, 0px); --admin-overlay-safe-left: env(safe-area-inset-left, 0px); position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: max(1rem, var(--admin-overlay-safe-top)) max(1rem, var(--admin-overlay-safe-right)) max(1rem, var(--admin-overlay-safe-bottom)) max(1rem, var(--admin-overlay-safe-left)); box-sizing: border-box; } .admin-prepaid-overlay[hidden] { display: none !important; } .admin-prepaid-panel { width: 100%; max-width: 26rem; max-height: calc(100dvh - max(1rem, var(--admin-overlay-safe-top)) - max(1rem, var(--admin-overlay-safe-bottom))); overflow-y: auto; background: var(--hero-card); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; padding: 1.25rem; box-sizing: border-box; } .info-section-header-left { flex: 1; min-width: 0; } .info-section-title-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .info-section-title { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin: 0; } .info-section-desc { color: var(--gray-400); font-size: 0.875rem; margin: 0 0 0.375rem 0; } .info-section-desc--muted { color: var(--gray-500); font-size: 0.8125rem; line-height: 1.45; } /* Extra breathing room after page / section titles (title margins are often 0) */ .section-title + .info-section-desc, .info-section-title + .info-section-desc { padding-top: 0.35rem; } /* Forum list: intro line after masthead / alerts */ .forum-page .forum-app__inner > .forum-app__hint { padding-top: 0.35rem; } .info-section-help { color: var(--gray-500); font-size: 0.75rem; line-height: 1.45; margin: 0; } #account-glance-help { margin-top: 0.75rem; } .info-section-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; flex-shrink: 0; } .info-section-actions .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } .info-section-actions .btn svg { width: 1rem; height: 1rem; } .info-section-actions .account-signout-btn .account-signout-icon svg { width: 0.9rem; height: 0.9rem; } .info-section-save-cancel { display: flex; flex-wrap: wrap; gap: var(--form-actions-gap); align-items: center; } .info-section-view { } .info-section-field { margin-bottom: 1rem; } .info-section-field:last-child { margin-bottom: 0; } .account-location-field-help { margin-bottom: 0.75rem; } .account-location-autocomplete { position: relative; z-index: 3; } .account-location-map-wrap { margin-top: 0.75rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--gray-700); background: var(--gray-900); } .account-location-map-link { display: block; line-height: 0; } .account-location-map-img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: cover; } .account-location-map-embed { display: block; width: 100%; height: 220px; border: 0; } .account-location-map-wrap--edit { margin-top: 1.25rem; position: relative; z-index: 1; } .site-map-container { border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--gray-700); background: var(--gray-900); } .site-map-canvas { width: 100%; height: 220px; min-height: 220px; } .account-location-map-canvas { height: 380px; min-height: 380px; } .site-map-canvas .leaflet-container { width: 100%; height: 100%; background: var(--gray-900); font-family: inherit; } .site-map-container .leaflet-control-attribution { display: none !important; } .site-map-container .leaflet-control-zoom.leaflet-bar { display: flex; flex-direction: column; gap: 0.5rem; border: none !important; background: transparent !important; box-shadow: none !important; } .site-map-container .leaflet-control-zoom a { background-color: #7c3aed !important; color: #fff !important; border: 1px solid #6d28d9 !important; border-bottom: 1px solid #6d28d9 !important; border-radius: 0.25rem !important; margin: 0 !important; width: 30px !important; height: 30px !important; min-height: 30px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-size: 1.125rem !important; flex-shrink: 0 !important; } .site-map-container .leaflet-control-zoom a:hover { background-color: #8b5cf6 !important; color: #fff !important; } .site-map-container .leaflet-control-zoom a.leaflet-disabled { background-color: #4c1d95 !important; color: rgba(255, 255, 255, 0.45) !important; } .site-map-container .leaflet-container .leaflet-popup-content { margin: 0.75rem !important; padding: 0 !important; box-sizing: border-box !important; } .site-map-container .leaflet-container .leaflet-popup-content:has(.map-popup-pro) { width: min(17.5rem, calc(100vw - 4.5rem)) !important; } .site-map-container .leaflet-container .leaflet-popup-close-button { top: 0.2rem !important; right: 0.2rem !important; } .site-map-container .leaflet-container .leaflet-popup:has(.map-popup-pro) .leaflet-popup-close-button { top: 0.2rem !important; right: 0.2rem !important; } .site-map-container .leaflet-popup-content a { color: var(--primary-400); text-decoration: none; } .site-map-container .leaflet-popup-content a:hover { color: var(--primary-300); } .site-map-container .leaflet-popup-content a.shop-card-rating-score-link { color: var(--text-primary); } .site-map-container .leaflet-popup-content a.shop-card-rating-score-link:hover, .site-map-container .leaflet-popup-content a.shop-card-rating-score-link:focus-visible { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--primary-400); text-underline-offset: 2px; } .site-map-container .leaflet-popup-content a.shop-card-title { color: var(--text-primary); } .site-map-container .leaflet-popup-content a.shop-card-title:hover { color: var(--primary-300); } .site-map-container .leaflet-popup-content .map-popup-pro .shop-card-actions a { color: inherit; } .site-map-container .leaflet-popup-content .map-popup-pro .shop-card-actions a:hover { color: inherit; } .map-popup-pro--preview-only .map-popup-pro-control--disabled { pointer-events: none; cursor: default; } .map-popup-pro--preview-only .shop-card-title.map-popup-pro-title-link { color: var(--text-primary); cursor: default; } .info-section-account-login { margin-bottom: 1rem; } .info-section-account-login-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .info-section-divider { border: 0; border-top: 1px solid rgba(148, 163, 184, 0.2); margin: 1.25rem 0 1rem; } .info-section-label { display: block; font-size: 0.875rem; color: var(--gray-400); margin-bottom: 0.5rem; } .info-section-value { color: var(--text-primary); margin: 0; } .info-section-value p { margin: 0 0 0.5rem 0; } .info-section-value p:last-child { margin-bottom: 0; } .capitalize { text-transform: capitalize; } .info-section-edit .field { display: flex; flex-direction: column; gap: var(--form-label-gap); margin-bottom: var(--form-field-gap); } .info-section-edit .field:last-child { margin-bottom: 0; } .info-section-edit .field > .modal-label, .info-section-edit .field > .info-section-help.mb-0, .info-section-edit .field > .info-section-help:not(.mb-2) { margin: 0; } .field:has(.modal-label), .field:has(.modal-input), .field:has(.modal-textarea) { display: flex; flex-direction: column; gap: var(--form-label-gap); } .field:has(.modal-label) > .modal-label, .field:has(.modal-input) > .modal-label, .field:has(.modal-textarea) > .modal-label { margin: 0; } .services-preview-list { display: flex; flex-direction: column; gap: 0.5rem; } .services-preview-item { display: flex; justify-content: space-between; align-items: center; } .mr-2 { margin-right: 0.5rem; } .account-profile-grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; } .account-profile-label { font-size: 0.875rem; color: var(--gray-400); } .account-profile-value { color: var(--text-primary); } .account-signout-btn { background: rgba(148, 163, 184, 0.12); color: var(--gray-100); border: 1px solid rgba(148, 163, 184, 0.28); } .account-signout-btn:hover { background: rgba(148, 163, 184, 0.22); border-color: rgba(148, 163, 184, 0.42); } /* QR section (account) */ .account-qr-builder { display: flex; flex-direction: column; gap: 1rem; } .account-qr-desc { margin: 0 0 0.9rem 0; line-height: 1.5; } .account-qr-help { margin: 1rem 0 0 0; line-height: 1.45; } .account-qr-preset-field { margin-bottom: 0; } .account-qr-preset-field .modal-label { margin: 0; font-size: 0.78rem; color: var(--gray-400); } .account-qr-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; } .account-qr-design-details { border: 0; margin: 0; padding: 0; } .account-qr-design-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.55rem 0.65rem; font-size: 0.82rem; font-weight: 600; color: var(--gray-300); border: 1px solid var(--hero-border); border-radius: 0.65rem; background: rgba(255, 255, 255, 0.04); user-select: none; -webkit-tap-highlight-color: transparent; } .account-qr-design-summary::-webkit-details-marker { display: none; } .account-qr-design-summary::before { content: ''; display: inline-block; width: 0.45em; height: 0.45em; border-right: 2px solid var(--gray-500); border-bottom: 2px solid var(--gray-500); transform: rotate(-45deg); margin-top: -0.15em; flex-shrink: 0; transition: transform 0.15s ease; } .account-qr-design-details[open] .account-qr-design-summary::before { transform: rotate(45deg); margin-top: 0.1em; } .account-qr-design-details[open] .account-qr-design-summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; } .account-qr-design-details .account-qr-controls { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; margin-top: 0; } .account-qr-preset-btn { border: 1px solid var(--hero-border); background: rgba(255, 255, 255, 0.03); color: var(--gray-300); border-radius: 9999px; padding: 0.4rem 0.75rem; font-size: 0.82rem; line-height: 1; cursor: pointer; transition: all 0.15s ease; } .account-qr-preset-btn:hover { border-color: var(--primary-500); color: #fff; } .account-qr-preset-btn.is-active { background: rgba(59, 130, 246, 0.2); color: #fff; border-color: rgba(59, 130, 246, 0.55); } .account-qr-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 1rem; align-items: end; padding: 0.9rem; border: 1px solid var(--hero-border); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.02); } .account-qr-controls .field { margin-bottom: 0; } .account-qr-controls .modal-label { display: block; margin: 0 0 0.42rem 0; font-size: 0.78rem; color: var(--gray-400); } .account-qr-color-input { width: 3rem; height: 2rem; padding: 0.125rem; border-radius: 0.375rem; border: 1px solid var(--hero-border); background: var(--gray-800); cursor: pointer; } @media (max-width: 680px) { .account-qr-builder { gap: 0.85rem; } .account-qr-presets { flex-wrap: wrap; overflow: visible; gap: 0.45rem; } .account-qr-presets .account-qr-preset-btn { flex-shrink: 1; } .account-qr-controls { grid-template-columns: 1fr; gap: 0.65rem 0.75rem; padding: 0.75rem; } .account-qr-poster-preview { min-width: 0; padding: 1rem 0.85rem 0.95rem; } .qr-on-page { margin-top: 0.15rem; padding: 0.35rem 0; } } .qr-on-page { display: flex; justify-content: center; margin-top: 0.5rem; margin-bottom: 0.25rem; padding: 0.5rem 0; } .account-qr-poster-preview { width: min(100%, 560px); min-width: 320px; max-width: 100%; border-radius: 14px; padding: 1.4rem 1.35rem 1.2rem; transition: background 0.2s ease; display: grid; justify-items: center; row-gap: 0.85rem; } .account-qr-preview-name { margin: 0; font-size: clamp(1.375rem, 4.2vw, 1.875rem); text-align: center; font-weight: 700; line-height: 1.25; max-width: 95%; text-wrap: balance; overflow-wrap: anywhere; } .account-qr-email-hint { margin-top: 0.35rem; color: var(--gray-400); } .account-qr-email-row { margin-top: 0.35rem; } .account-qr-format-options { display: flex; flex-direction: column; gap: 0.65rem; } .account-qr-format-btn { margin: 0; } .account-qr-email-controls { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; } .account-qr-email-input { flex: 1 1 220px; min-width: 0; } .account-qr-email-status--ok { color: #22c55e; } .account-qr-email-status--err { color: #f87171; } .qr-on-page-img { display: block; max-width: 100%; height: auto; background: #fff; border-radius: 14px; padding: 1rem 1.15rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); } .account-qr-preview-footer { margin: 0; text-align: center; font-size: clamp(1rem, 3vw, 1.25rem); font-weight: 600; } .qr-actions-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; } /* Admin Connect & QR section */ .admin-connect-stats { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-bottom: 1.5rem; } .admin-connect-stat { display: flex; flex-direction: column; gap: 0.15rem; min-width: 7rem; padding: 0.75rem 1rem; border: 1px solid var(--hero-border); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.03); } .admin-connect-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); line-height: 1; } .admin-connect-stat-label { font-size: 0.78rem; color: var(--gray-400); } .admin-connect-qr-section { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--hero-border); } .admin-connect-qr-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; } .admin-connect-video-section { display: flex; flex-direction: column; gap: 0.75rem; } .admin-connect-video-player { max-width: 100%; border-radius: 0.5rem; display: block; background: #000; } .admin-connect-video-upload-row { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; } .admin-connect-video-input { flex: 1 1 200px; min-width: 0; } .admin-connect-video-progress { height: 4px; background: var(--hero-border); border-radius: 9999px; overflow: hidden; margin-top: 0.4rem; } .admin-connect-video-progress-bar { height: 100%; background: var(--primary-500); border-radius: 9999px; transition: width 0.2s ease; } @media (max-width: 680px) { .admin-connect-stats { gap: 0.5rem 0.75rem; } .admin-connect-stat { min-width: 5rem; padding: 0.6rem 0.75rem; } .admin-connect-stat-value { font-size: 1.25rem; } .admin-connect-qr-actions { flex-direction: column; align-items: stretch; } } /* Admin connect page editor */ .admin-cc-textarea { width: 100%; min-height: 7rem; resize: vertical; font-family: inherit; } .admin-cc-video-list { display: flex; flex-direction: column; gap: 0.75rem; } .admin-cc-video-row { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem; background: var(--surface-2, rgba(0,0,0,0.04)); border-radius: 0.5rem; } .admin-cc-video-row-fields { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .admin-cc-vid-status-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--text-secondary); cursor: pointer; } @media (max-width: 600px) { .admin-cc-video-row { flex-direction: column; } .admin-cc-video-row > .btn { align-self: flex-start; } } /* Account services (business) */ .account-services-list { display: flex; flex-direction: column; gap: 1.25rem; } .account-services-group { } .account-services-group-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; } .account-services-group-title { font-size: 1rem; font-weight: 600; color: var(--gray-300); margin: 0; } .account-services-group-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .account-services-group-header .btn-add-service-in-group { flex-shrink: 0; } .account-services-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .account-page-content-list { display: flex; flex-direction: column; gap: 1.25rem; } .account-page-content-group { } .account-page-content-group-title { font-size: 1rem; font-weight: 600; color: var(--gray-300); margin: 0 0 0.5rem; } .account-page-content-edit-block { border: 1px solid var(--gray-700); border-radius: 0.5rem; padding: 1rem; } .account-page-content-edit-block-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .account-page-content-edit-block-header .field { flex: 1; min-width: 12rem; margin: 0; } .account-page-content-edit-block-header .field > .modal-label { margin: 0; } .account-page-content-preview { color: var(--gray-300); line-height: 1.6; } .shop-page-content-block + .shop-page-content-block { margin-top: 1.5rem; } .shop-page-content-block-title { font-size: 1.25rem; font-weight: 600; color: var(--gray-200); margin: 0 0 0.75rem; } .account-page-content-editor .thesms-rich-editor .ql-container.ql-snow .ql-editor { min-height: 12rem; } .shop-page-content-section { margin-top: 0.5rem; } .shop-page-content { color: #d1d5db; line-height: 1.6; } .shop-page-content--rich { white-space: normal; overflow-wrap: break-word; max-width: 100%; } .shop-page-content--rich p { margin: 0.5em 0; } .shop-page-content--rich p:first-child { margin-top: 0; } .shop-page-content--rich p:last-child { margin-bottom: 0; } .shop-page-content--rich a { color: var(--primary-400); text-decoration: none; font-weight: 500; overflow-wrap: break-word; } .shop-page-content--rich a:hover { text-decoration: underline; } .shop-page-content--rich ul, .shop-page-content--rich ol { margin: 0.5em 0; padding-left: 1.25rem; } .shop-page-content--rich strong, .shop-page-content--rich b { font-weight: 600; color: var(--gray-300); } .account-service-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.75rem 1rem; background: var(--hero-border); border-radius: 0.5rem; } .account-service-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .account-service-name { font-weight: 500; color: var(--text-primary); } .account-service-meta { font-size: 0.875rem; color: var(--gray-400); } .account-service-actions { display: flex; gap: 0.25rem; flex-shrink: 0; align-items: center; } .account-service-actions .btn-edit-service:hover { color: var(--text-primary); } .account-service-actions .btn-delete-service:hover { color: #f87171; } .account-empty-state { margin: 0; } .btn-sm { padding: 0.5rem 0.875rem; font-size: 0.875rem; line-height: 1.25; } /* Text CTAs (Save, Cancel, Submit) — roomier than toolbar icon buttons */ .btn-sm.btn-primary, .btn-sm.btn-secondary, .btn-sm.btn-danger, .btn-sm.btn-outline { padding: var(--form-btn-padding-y) var(--form-btn-padding-x); font-size: 0.9375rem; min-height: 2.75rem; } .btn-ghost.btn-sm { padding: 0.375rem; min-height: 0; } .account-subscription-status { min-height: 2rem; margin-top: 0.75rem; } .account-post-usage { border-left: 3px solid var(--hero-border); padding-left: 1rem; } .account-subscription-summary { display: grid; gap: 0.875rem; padding: 1rem; border: 1px solid var(--hero-border); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.02); } .account-subscription-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .account-subscription-plan-label { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-400); font-weight: 600; } .account-subscription-plan-value { font-size: 1rem; color: var(--text-primary); font-weight: 700; } .account-subscription-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; } .account-subscription-meta-item { border: 1px solid var(--hero-border); border-radius: 0.625rem; padding: 0.625rem 0.75rem; background: rgba(255, 255, 255, 0.01); } .account-subscription-meta-label { display: block; font-size: 0.75rem; color: var(--gray-400); margin-bottom: 0.2rem; } .account-subscription-meta-value { font-size: 0.9rem; color: #fff; font-weight: 600; } .account-subscription-empty { margin: 0; font-size: 0.875rem; color: var(--gray-400); } .account-post-usage-summary { display: grid; gap: 0.5rem; } .account-post-usage-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--hero-border); border-radius: 0.625rem; background: rgba(255, 255, 255, 0.015); } .account-post-usage-label { font-size: 0.8rem; color: var(--gray-400); } .account-post-usage-state { color: #fff; font-size: 0.875rem; font-weight: 600; } .account-post-usage-note { margin: 0; color: var(--gray-400); font-size: 0.8125rem; line-height: 1.45; } .account-billing-history { border-top: 1px solid var(--hero-border); padding-top: 1.5rem; } .account-invoices-table-wrap { overflow-x: auto; } .billing-history-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .billing-history-table th, .billing-history-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--hero-border); } .billing-history-table th { color: var(--gray-400); font-weight: 500; } .billing-history-table td { color: var(--gray-300); } .billing-status { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 0.25rem; text-transform: capitalize; } .billing-status--paid { background: rgba(34, 197, 94, 0.2); color: #86efac; } .billing-status--succeeded { background: rgba(34, 197, 94, 0.2); color: #86efac; } .billing-status--open { background: rgba(234, 179, 8, 0.2); color: #fde047; } .billing-pdf-link { color: var(--primary-400); text-decoration: none; } .billing-pdf-link:hover { text-decoration: underline; } @media (max-width: 640px) { .account-subscription-meta-grid { grid-template-columns: 1fr; } } /* Subscription checkout - integrated with site UI */ .account-container--checkout { max-width: 32rem; } .subscription-checkout-card { padding: 0; overflow: hidden; } .subscription-checkout-header { padding: 1.5rem 1.5rem 0; } .subscription-checkout-title { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem 0; } .subscription-checkout-desc { font-size: 0.875rem; color: var(--gray-400); margin: 0; line-height: 1.5; } .subscription-checkout-debug { font-size: 0.75rem; color: var(--gray-500); margin: 0.75rem 0 0; } .subscription-checkout-form-wrap { position: relative; min-height: 420px; margin-top: 1rem; background: var(--hero-bg); border-top: 1px solid var(--hero-border); } .subscription-checkout-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: var(--hero-card); color: var(--gray-400); font-size: 0.875rem; } .subscription-checkout-loading[aria-hidden="true"] { display: none !important; } .subscription-checkout-loading-spinner { width: 2rem; height: 2rem; border: 2px solid var(--hero-border); border-top-color: var(--primary-500); border-radius: 50%; animation: subscription-spin 0.7s linear infinite; } @keyframes subscription-spin { to { transform: rotate(360deg); } } .subscription-checkout-loading-text { color: var(--gray-400); } .subscription-embedded-checkout { min-height: 420px; width: 100%; background: var(--hero-card); } .subscription-embedded-checkout[aria-hidden="true"] { visibility: hidden; } /* Stripe injects an iframe; keep it contained and matching our card */ .subscription-embedded-checkout iframe { border-radius: 0; max-width: 100%; } .subscription-checkout-footer { padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--hero-border); } .subscription-checkout-back { font-size: 0.875rem; color: var(--gray-400); text-decoration: none; } .subscription-checkout-back:hover { color: var(--primary-400); } .subscription-checkout-error { padding: 1.5rem; margin: 0; color: #f87171; font-size: 0.875rem; background: var(--hero-card); } /* Pricing Page */ .pricing-page { padding: 2rem 1rem; } .pricing-container { max-width: 56rem; margin: 0 auto; } .pricing-header { text-align: center; margin-bottom: 3rem; } .pricing-title { font-size: 2.25rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.5rem 0; } .pricing-subtitle { font-size: 1.125rem; color: var(--gray-400); margin: 0; } .pricing-subtitle strong { color: var(--primary-400); font-weight: 700; } .pricing-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-bottom: 4rem; justify-items: stretch; } /* Two columns only when there are multiple plan cards; single cards stay one column and centered on desktop */ @media (min-width: 768px) { .pricing-grid:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pricing-grid:not(:has(> :nth-child(2))) { justify-items: center; } .pricing-grid:not(:has(> :nth-child(2))) .pricing-card { width: 100%; max-width: 32rem; } } .pricing-card { background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 1rem; padding: 2rem; position: relative; display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s; } .pricing-card:hover { border-color: var(--gray-600); } .pricing-card.popular { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-500); } .pricing-popular-badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: var(--primary-600); color: var(--text-on-primary); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 9999px; } .pricing-card-header { margin-bottom: 2rem; } .pricing-card-name { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem 0; } .pricing-card-price { font-size: 3rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.35rem; margin-bottom: 0.5rem; } .price-currency { font-size: 1.5rem; font-weight: 600; color: var(--gray-400); align-self: flex-start; margin-top: 0.5rem; } .price-period { font-size: 1rem; font-weight: 500; color: var(--gray-400); } .pricing-card-desc { font-size: 0.875rem; color: var(--gray-400); margin: 0; } .pricing-card-body { flex: 1; display: flex; flex-direction: column; } .pricing-features { list-style: none; padding: 0; margin: 0 0 2rem 0; display: flex; flex-direction: column; gap: 1rem; flex: 1; } .pricing-features li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: var(--gray-300); } .pricing-features li svg { width: 1.25rem; height: 1.25rem; color: var(--primary-400); flex-shrink: 0; } .pricing-features li.disabled { color: var(--gray-500); } .pricing-features li.disabled svg { color: var(--gray-500); } .pricing-addons-header { text-align: center; margin-bottom: 2rem; } .pricing-addons-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem 0; } .pricing-addons-subtitle { font-size: 1rem; color: var(--gray-400); margin: 0; } .pricing-card.addon { padding: 1.5rem; } .pricing-card.addon .pricing-card-price { font-size: 2rem; } .pricing-card.addon .price-currency { font-size: 1rem; } @media (min-width: 768px) { .pricing-grid.addons:not(:has(> :nth-child(2))) .pricing-card.addon { max-width: 28rem; } } /* Subscription tiers (monthly / annual / cash) */ .pricing-setup-callout { text-align: center; max-width: 40rem; margin: 0 auto 2rem; padding: 1rem 1.25rem; border-radius: 0.75rem; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.22); color: var(--gray-300); font-size: 0.9375rem; line-height: 1.5; } .pricing-setup-callout strong { color: var(--gray-200); } .pricing-setup-callout-lead { margin: 0; } .pricing-setup-callout-note { margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--gray-400); } .pricing-inclusions .pricing-setup-callout--in-inclusions { max-width: none; margin: 1.25rem 0 0 0; } /* Home feed - business CTA (matches shop-card chrome, sits in feed column) */ .feed .home-feed-business-cta { max-width: 24rem; margin: 1.25rem auto 0; padding: 1.1rem 1.25rem 1.2rem; border-radius: 0.45rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.28); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .feed .home-feed-business-cta .info-section-title { font-size: 0.9375rem; line-height: 1.35; text-align: center; } .feed .home-feed-business-cta .btn { width: auto; min-width: 9rem; padding-left: 1.5rem; padding-right: 1.5rem; } /* Home feed - cards / list view toggle (compact, centered) */ .home-feed-toolbar { display: flex; justify-content: center; margin: 0 0 0.375rem; padding: 0; } .home-feed-toolbar--modal { margin-bottom: 0.5rem; } .home-feed-toolbar--inline { margin: 0; justify-content: flex-end; } .favorites-page .favorites-page-toolbar { margin-bottom: 0.75rem; } .favorites-page .favorites-page-toolbar.search-list-layout-toolbar { flex-direction: column; align-items: stretch; gap: 0; } .favorites-page-toolbar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.75rem; width: 100%; } .favorites-page-toolbar-start { justify-self: start; min-width: 0; } .favorites-page-toolbar-center { justify-self: center; } .favorites-page-toolbar-end { justify-self: end; display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; } .favorites-staff-filters-trigger { display: flex; align-items: center; } .favorites-staff-filters-trigger[hidden] { visibility: hidden; pointer-events: none; } .favorites-staff-filters-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; border: none; border-radius: 0.375rem; background: var(--hero-card); color: var(--gray-400); cursor: pointer; } .favorites-staff-filters-btn svg { width: 0.75rem; height: 0.75rem; } .favorites-staff-filters-btn:hover { color: var(--text-primary); background: var(--gray-700); } .favorites-staff-filters-panel { max-height: 0; overflow: hidden; transition: max-height 0.2s; } .favorites-staff-filters-panel[hidden] { display: none !important; } .favorites-staff-filters-panel.open { max-height: 24rem; } .favorites-staff-filters-content { padding: 0.5rem 0 0.75rem; } .favorites-staff-filters-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; } .favorites-staff-search-wrap { flex: 1 1 10rem; min-width: 0; } .favorites-staff-search-wrap input { font-size: 0.875rem; padding-top: 0.4375rem; padding-bottom: 0.4375rem; } [data-favorites-staff-only][hidden] { display: none !important; } .favorites-staff-shop-filter-wrap { display: flex; align-items: center; gap: 0.375rem; flex: 0 1 auto; min-width: 0; } .favorites-staff-shop-filter-label { font-size: 0.8125rem; color: var(--gray-400); white-space: nowrap; } .favorites-staff-shop-filter-select { min-width: 7.5rem; max-width: 100%; font-size: 0.8125rem; } .favorites-staff-availability-filter-wrap { display: flex; align-items: center; gap: 0.375rem; flex: 0 1 auto; min-width: 0; } .favorites-staff-availability-filter-wrap[hidden] { display: none !important; } .favorites-staff-availability-filter-label { font-size: 0.8125rem; color: var(--gray-400); white-space: nowrap; } .favorites-staff-availability-filter-select { min-width: 7.5rem; max-width: 100%; font-size: 0.8125rem; } .favorites-staff-filters-quick { margin-bottom: 0; padding-top: 0; } .favorites-staff-filters-chips .filter-chip { font-size: 0.8125rem; padding: 0.375rem 0.625rem; } .favorites-staff-sort-chip { gap: 0.25rem; } .favorites-staff-sort-chip:not(.active) .favorites-staff-sort-dir { display: none; } .favorites-staff-sort-dir { display: inline-flex; align-items: center; flex-shrink: 0; } .favorites-staff-sort-dir svg { width: 0.875rem; height: 0.875rem; } .favorites-staff-min-rating-wrap { font-size: 0.8125rem; } .favorites-staff-min-rating-select { min-width: 6.75rem; font-size: 0.8125rem; } .favorites-staff-filter-empty, .favorites-shops-filter-empty, .favorites-staff-none-empty, .favorites-shops-none-empty { margin-bottom: 1rem; } .favorites-staff-filter-empty[hidden], .favorites-shops-filter-empty[hidden], .favorites-staff-none-empty[hidden], .favorites-shops-none-empty[hidden] { display: none !important; } /* List layout sets display:flex on cards; keep filtered favourites hidden */ .shop-card-wrap[hidden], .feed--list .shop-card-wrap[hidden] { display: none !important; } .favorites-page .home-feed-toolbar { margin: 0; } .favorites-scope-toggle { display: inline-flex; align-items: center; gap: 0.0625rem; flex-shrink: 0; background: color-mix(in srgb, var(--hero-border) 72%, transparent); border-radius: 9999px; padding: 0.0625rem; box-sizing: border-box; } .favorites-scope-btn { display: inline-flex; align-items: center; justify-content: center; height: 1.125rem; padding: 0 0.625rem; border: none; border-radius: 9999px; background: transparent; color: var(--gray-500); font-size: 0.8125rem; font-weight: 500; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s; } .favorites-scope-btn:hover { color: var(--gray-400); } .favorites-scope-btn.active { background: color-mix(in srgb, var(--primary-500) 20%, var(--hero-border)); color: var(--primary-400); } @media (max-width: 639px) { .favorites-page-toolbar-row { grid-template-columns: auto 1fr auto; gap: 0.5rem; } .favorites-page-toolbar-start { min-width: 0; } .favorites-page-toolbar-center { justify-self: center; } .favorites-staff-shop-filter-wrap { flex: 1 1 100%; } .favorites-staff-shop-filter-select { flex: 1; min-width: 0; } .favorites-staff-availability-filter-wrap { flex: 1 1 100%; } .favorites-staff-availability-filter-select { flex: 1; min-width: 0; } } .favorites-panel { margin-bottom: 0; } .favorites-panel[hidden] { display: none !important; } .favorites-page .favorites-staff-feed { margin-bottom: 1rem; } .favorites-page #favorites-feed { margin-bottom: 0; } .favorites-staff-feed.space-y-4 > * + * { margin-top: 0.5rem; } .favorites-staff-card { cursor: pointer; } .favorites-staff-shop-link { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; max-width: 100%; color: var(--primary-400); text-decoration: none; font-size: inherit; } .favorites-staff-shop-link .entity-avatar-chip { width: 1.125rem; height: 1.125rem; min-width: 1.125rem; flex-shrink: 0; } .favorites-staff-shop-link-label { min-width: 0; } .favorites-staff-shop-link:hover { text-decoration: underline; } .favorites-staff-shop-link:hover .favorites-staff-shop-link-label { text-decoration: underline; } .favorites-staff-demographics { font-size: inherit; line-height: 1.3; color: var(--gray-400); } .feed--cards .favorites-staff-card .shop-card-meta { flex-direction: column; align-items: flex-start; gap: 0.125rem; } .favorites-staff-title-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; } .favorites-staff-card .shop-card-title-aside.favorites-staff-title-aside { display: flex; } .favorites-staff-card .favorites-staff-title-rating .shop-card-rating--under-posted { margin-top: 0; font-size: 0.8125rem; } .favorites-staff-card .favorites-staff-actions { display: flex; align-items: center; gap: 0.5rem; grid-template-columns: unset; } .favorites-staff-list-shift { display: block; min-width: 0; max-width: 100%; } .favorites-staff-shift-block { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 0.25rem; min-width: 0; max-width: 100%; line-height: 1.2; text-align: left; white-space: nowrap; } .favorites-staff-shift-day, .favorites-staff-shift-time { display: inline; line-height: 1.2; white-space: nowrap; } .favorites-staff-shift-day { color: var(--gray-300); font-size: 0.875rem; font-weight: 500; } .favorites-staff-shift-time { color: var(--gray-400); font-size: 0.8125rem; } .favorites-staff-card .favorites-staff-actions .shop-card-fav--list, .favorites-staff-card .favorites-staff-actions .shop-card-fav--card { flex-shrink: 0; margin-left: auto; } .feed--list .favorites-staff-card { align-items: flex-start; padding-top: 0.375rem; padding-bottom: 0.375rem; } .feed--list .favorites-staff-card .shop-card-photo { margin-top: 0.0625rem; } .feed--list .favorites-staff-card .shop-card-title-row { align-items: flex-start; } .feed--list .favorites-staff-card .favorites-staff-title-rating { display: none !important; } .feed--list .favorites-staff-card .shop-card-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "meta actions"; row-gap: 0; align-content: start; } .feed--list .favorites-staff-card .shop-card-header { align-self: start; } .feed--list .favorites-staff-card .favorites-staff-title-main { gap: 0; } .feed--list .favorites-staff-card .shop-card-title { line-height: 1.2; } .feed--list .favorites-staff-card .shop-card-meta { min-height: 0; gap: 0; align-self: center; } .feed--list .favorites-staff-card .shop-card-list-rating { min-height: 0; } .feed--list .favorites-staff-card .shop-card-list-rating .shop-card-rating { font-size: 0.75rem; } .feed--list .favorites-staff-card .favorites-staff-actions { justify-self: end; width: max-content; align-self: center; } .feed--list .favorites-staff-card .shop-card-contact { width: 2rem; height: 2rem; min-height: 2rem; } .feed--list .favorites-staff-card .shop-card-contact svg { width: 1.25rem; height: 1.25rem; } .feed--list .favorites-staff-card .favorites-staff-actions .shop-card-fav--list { margin-left: 0; } .feed--list .favorites-staff-card .favorites-staff-shift-day { font-size: 0.6875rem; font-weight: 500; } .feed--list .favorites-staff-card .favorites-staff-shift-time { font-size: 0.6875rem; } .feed--list .favorites-staff-card .favorites-staff-demographics { display: none; } .feed--list .favorites-staff-card .favorites-staff-shop-link { font-size: 0.75rem; line-height: 1.3; max-width: 100%; } .feed--list .favorites-staff-card .favorites-staff-shop-link-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-list-layout-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .search-list-toolbar-sort { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .home-feed-view-toggle { display: inline-flex; align-items: center; gap: 0.0625rem; background: color-mix(in srgb, var(--hero-border) 72%, transparent); border-radius: 9999px; padding: 0.0625rem; min-width: 5.75rem; } .home-feed-view-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 2.625rem; height: 1.125rem; padding: 0; border: none; border-radius: 9999px; background: transparent; color: var(--gray-500); cursor: pointer; transition: background 0.15s, color 0.15s; } .home-feed-view-btn:hover { color: var(--gray-400); } .home-feed-view-btn.active { background: color-mix(in srgb, var(--primary-500) 20%, var(--hero-border)); color: var(--primary-400); } .home-feed-view-btn svg { width: 0.75rem; height: 0.75rem; } .account-feed-preview-help { margin-bottom: 0.5rem; text-align: center; } .account-feed-preview-modal .account-feed-preview-feed { width: 100%; } .account-feed-preview-modal-root--list .thesms-modal-body { min-width: min(calc(100vw - 2rem), 34rem); max-width: min(calc(100vw - 2rem), 34rem) !important; } .account-feed-preview-modal-root--list .account-feed-preview-modal .shop-card-wrap { width: 100%; max-width: none; min-width: 0; } .shop-card-list-posted, .shop-card-fav--list, .shop-card-list-rating { display: none; } /* Home feed - compact list layout */ .feed--list .shop-card-wrap { display: flex; flex-direction: row; align-items: center; gap: 0.625rem; box-sizing: border-box; height: 5.0625rem; min-height: 5.0625rem; max-width: none; margin: 0 0 0.35rem; padding: 0.4375rem 0.625rem; box-shadow: none; } .feed--list .shop-card-photo { position: relative; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 9999px; overflow: visible; } .feed--list .shop-card-photo-img, .feed--list .shop-card-photo-placeholder { border-radius: 9999px; } .feed--list .shop-card-photo-img { pointer-events: none; } .feed--list .shop-card-photo-img:not(.active) { opacity: 0; } .feed--list .shop-card-photo-img.active { opacity: 1; } .feed--list .shop-card-photo-placeholder { width: 100%; height: 100%; min-height: 0; font-size: 0.625rem; } .feed--list .shop-card-photo-placeholder svg { width: 1.25rem !important; height: 1.25rem !important; } .feed--list .shop-card-photo-placeholder span { display: none; } .feed--list .shop-card-closed--on-photo { top: 0; left: 50%; transform: translate(-50%, -50%); font-size: 0.5625rem; padding: 0.1rem 0.3rem; line-height: 1.2; z-index: 3; white-space: nowrap; } .feed--list .shop-card-dots, .feed--list .shop-card-desc-wrap { display: none !important; } .feed--list .shop-card-body { flex: 1; min-width: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title posted" "meta actions"; align-items: center; column-gap: 0.625rem; row-gap: 0.125rem; } .feed--list .shop-card-list-posted { display: block; grid-area: posted; justify-self: end; align-self: start; font-size: 0.6875rem; line-height: 1.2; color: var(--gray-500); white-space: nowrap; } .feed--list .shop-card-header { grid-area: title; margin-bottom: 0; min-width: 0; align-self: center; } .feed--list .shop-card-title-row { display: flex; align-items: center; gap: 0.375rem; flex-wrap: nowrap; width: 100%; min-width: 0; } .feed--list .shop-card-title-row--has-inline-badge .shop-card-title-aside { display: none; } .feed--list .shop-card-title { flex: 1 1 auto; min-width: 0; font-size: 0.9375rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feed--list .shop-card-meta { grid-area: meta; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.125rem; min-height: 1.875rem; font-size: 0.75rem; line-height: 1.3; min-width: 0; align-self: center; } .feed--list .shop-card-meta > .shop-card-meta-sep, .feed--list .shop-card-meta > .shop-card-rating { display: none; } .feed--list .shop-card-list-rating { display: block; min-height: 1rem; } .feed--list .shop-card-list-rating .shop-card-rating { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; line-height: 1.2; white-space: nowrap; } .feed--list .shop-card-location-trigger { max-width: 100%; min-width: 0; } .feed--list .shop-card-address { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feed--list .shop-card-actions { grid-area: actions; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0.375rem; margin-top: 0; padding-top: 0; border-top: none; width: auto; } .feed--list .shop-card-fav--list { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0.125rem; margin: 0; width: auto; height: auto; min-height: 0; background: none !important; } .feed--list .shop-card-fav--list svg { width: 1.5rem; height: 1.5rem; } .feed--list .shop-card-view, .feed--list .shop-card-fav--card { display: none !important; } .feed--cards .shop-card-fav--list, .feed--cards .shop-card-list-rating { display: none !important; } .feed--list .shop-card-contact, .feed--list .shop-card-roster { width: 2.35rem; height: 2.35rem; min-height: 2.35rem; } .feed--list .shop-card-contact svg, .feed--list .shop-card-roster svg { width: 1.375rem; height: 1.375rem; } .feed--list .home-feed-business-cta { max-width: none; margin: 1.25rem 0 0; } .pricing-tiers { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; } @media (min-width: 900px) { .pricing-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } } .pricing-tier-card { background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 1rem; padding: 1.5rem 1.25rem; display: flex; flex-direction: column; min-height: 100%; } .pricing-tier-card--featured { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-500); position: relative; padding-top: 2rem; } .pricing-tier-best-badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: var(--primary-600); color: var(--text-on-primary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 9999px; white-space: nowrap; } .pricing-tier-discount { margin: 0 0 0.75rem 0; font-size: 0.8125rem; line-height: 1.45; display: flex; flex-direction: column; gap: 0.25rem; } .pricing-tier-was { text-decoration: line-through; color: var(--gray-500); font-weight: 500; } .pricing-tier-discount-save { color: #86efac; font-weight: 600; } .pricing-tier-card--contact { border-style: dashed; opacity: 0.98; } .pricing-tier-card--with-top-badge { position: relative; padding-top: 2rem; } .pricing-tier-cash-badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, #d97706 0%, #b45309 100%); color: #fffbeb; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 9999px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .pricing-tier-cash-s-dollar { font-weight: 800; margin: 0 0.02em; } .pricing-tier-monthly-year-total { font-size: 0.8125rem; color: var(--gray-400); margin: 0 0 0.5rem 0; line-height: 1.45; } .pricing-tier-ref-label { font-size: 0.8125rem; color: var(--gray-500); font-weight: 500; } .pricing-tier-cash-chat { font-size: 0.8125rem; color: var(--gray-400); font-style: italic; margin: 0 0 1rem 0; line-height: 1.45; } .pricing-tier-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-400); margin: 0 0 0.5rem 0; } .pricing-tier-amount { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); line-height: 1.15; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.35rem; margin: 0 0 0.35rem 0; } .pricing-tier-amount .price-period { font-size: 0.95rem; font-weight: 500; color: var(--gray-400); } .pricing-tier-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; color: #86efac; background: rgba(34, 197, 94, 0.15); border-radius: 9999px; padding: 0.2rem 0.55rem; margin: 0 0 0.35rem 0; width: fit-content; } .pricing-tier-note { font-size: 0.8125rem; color: var(--gray-400); margin: 0 0 1rem 0; line-height: 1.45; flex: 1; } .pricing-tier-micro { font-size: 0.8125rem; color: var(--gray-400); margin: 0 0 1rem 0; line-height: 1.4; } .pricing-tier-card .btn { margin-top: auto; } .pricing-inclusions { margin-bottom: 2rem; padding: 1.5rem 1.25rem; border-radius: 1rem; border: 1px solid var(--hero-border); background: rgba(0, 0, 0, 0.15); } /* Match single Post Credits card width (~half of .pricing-container) */ @media (min-width: 768px) { .pricing-inclusions { max-width: 28rem; margin-left: auto; margin-right: auto; } } .pricing-inclusions-title { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1rem 0; } .pricing-features--clean { gap: 0.75rem; } .pricing-features--clean li { font-size: 0.9375rem; color: var(--gray-200); } .pricing-inclusions .pricing-features { margin-bottom: 0; } /* Admin dashboard - full width inside .main-content-admin (not the global 56rem main cap) */ .admin-page { padding: 1rem 1.5rem 2rem; } .admin-page .admin-dashboard { max-width: none; width: 100%; margin-left: 0; margin-right: 0; } .admin-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--hero-border); } .admin-tabs a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--gray-400); text-decoration: none; transition: color 0.2s, background 0.2s; } .admin-tabs a:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); } .admin-tabs a.active { color: var(--primary-400); background: rgba(34, 197, 94, 0.1); } .admin-tabs a svg { flex-shrink: 0; } /* Admin primary nav (matches help-subnav) */ .admin-main-nav { margin-bottom: 0.25rem; } .admin-main-nav a span { white-space: nowrap; } .admin-subtabs-anchor { opacity: 0.95; } #feature-tickets, #feature-insights, #feature-options { scroll-margin-top: 1rem; } .admin-feature-add-form { margin-bottom: 0.65rem; } .admin-feature-add-fields { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; align-items: flex-end; } .admin-feature-add-field-grow { flex: 1; min-width: 12rem; } .admin-feature-add-btn { align-self: flex-end; } #feature-tickets .admin-subtabs { margin-bottom: 1rem; } .admin-feature-insights-h3 { font-size: 0.875rem; font-weight: 600; color: var(--gray-300); margin: 0 0 0.5rem 0; } .admin-feature-insights-card .admin-feature-topics { margin-top: 1.25rem; } .admin-feature-dnd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .admin-feature-dnd-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.5rem; } .admin-feature-dnd-item--dragging { opacity: 0.55; } .admin-feature-dnd-item--drop-before { box-shadow: inset 0 2px 0 0 var(--primary-400); } .admin-feature-dnd-handle { cursor: grab; color: var(--gray-500); padding: 0.2rem; flex-shrink: 0; touch-action: none; line-height: 0; } .admin-feature-dnd-handle:active { cursor: grabbing; } .admin-feature-dnd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .admin-feature-dnd-main .modal-input { padding: 0.4rem 0.55rem; font-size: 0.875rem; } .admin-feature-dnd-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.5rem; flex-shrink: 0; align-items: center; justify-content: flex-end; } .admin-feature-dnd-actions .btn-ghost { padding-left: 0.5rem; padding-right: 0.5rem; } .admin-config-status { display: grid; gap: 0.5rem; } .admin-config-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.5rem; font-size: 0.875rem; } .admin-config-row .status { font-weight: 500; } .admin-config-row .status.configured { color: #4ade80; } .admin-config-row .status.not-configured { color: var(--gray-500); } .admin-cron-status--ok { color: #4ade80; font-weight: 500; } .admin-cron-status--fail { color: #f87171; font-weight: 600; } .admin-cron-env-tag { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.4rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray-400); border: 1px solid var(--hero-border); border-radius: 0.25rem; } .admin-cron-table-row--error td { background: rgba(248, 113, 113, 0.06); } .admin-cron-runs { display: grid; gap: 0.5rem; } .admin-cron-run { border: 1px solid var(--hero-border); border-radius: 0.5rem; padding: 0.5rem 0.75rem; background: var(--hero-card); } .admin-cron-run--error { border-color: #f87171; background: rgba(248, 113, 113, 0.08); box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.2); } .admin-cron-run summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; } .admin-cron-run summary::-webkit-details-marker { display: none; } .admin-cron-run-status { font-weight: 600; font-size: 0.8125rem; } .admin-cron-run--error .admin-cron-run-status { color: #f87171; } .admin-cron-run:not(.admin-cron-run--error) .admin-cron-run-status { color: #4ade80; } .admin-cron-run-meta { font-size: 0.8125rem; color: var(--gray-400); } .admin-cron-run-output { margin: 0.5rem 0 0; padding: 0.5rem 0.65rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 14rem; overflow: auto; border-radius: 0.375rem; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--hero-border); color: var(--gray-300); } .admin-cron-run--error .admin-cron-run-output { color: #fca5a5; border-color: rgba(248, 113, 113, 0.45); } .admin-config-row .status.optional, .admin-config-row .optional { color: var(--gray-500); font-weight: 400; } .admin-config-hint { color: var(--gray-500); font-size: 0.8125rem; font-weight: 400; } /* Launch / billing toggles: title + copy left, switch top-right (switch-only label must not use pref-switch-row width:100%). */ .admin-page .admin-complimentary-section-header { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; } .admin-page .admin-complimentary-section-header .info-section-header-left { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; flex: 1; min-width: 0; max-width: min(72ch, 100%); } .admin-page .admin-complimentary-section-header .info-section-header-left > .info-section-desc { margin: 0; } .admin-page .admin-complimentary-section-header > label.pref-switch-row { width: auto; flex-shrink: 0; justify-content: flex-end; } @media (max-width: 36rem) { .admin-page .admin-complimentary-section-header { flex-direction: column; align-items: stretch; } .admin-page .admin-complimentary-section-header > label.pref-switch-row { align-self: flex-end; } } .admin-complimentary-schedule.is-inactive { opacity: 0.5; pointer-events: none; user-select: none; } .admin-complimentary-schedule.is-inactive .admin-countdown .launch-countdown-value { color: var(--gray-500); } .admin-complimentary-schedule.is-inactive input:disabled { cursor: not-allowed; } .admin-actions-cell { white-space: nowrap; } .admin-user-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; } .admin-section-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; } .admin-users-section-tabs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; } .admin-users-section-tabs-bar .admin-section-tabs { margin-bottom: 0; flex: 1 1 auto; min-width: 0; } .admin-users-section-tabs-bar .admin-users-add-btn { flex-shrink: 0; margin-left: auto; } .admin-businesses-section-tabs-bar, .admin-users-role-filters-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; } .admin-page .admin-businesses-list-card .admin-businesses-section-header { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; } .admin-page .admin-businesses-list-card .admin-businesses-section-header .info-section-header-left { flex: 1; min-width: 0; max-width: min(72ch, 100%); } .admin-page .admin-businesses-list-card .admin-businesses-section-header .info-section-actions { flex-shrink: 0; } .admin-businesses-section-tabs-bar .admin-section-tabs { margin-bottom: 0; flex: 1 1 auto; min-width: 0; } /* Admin → Businesses list card: intro hierarchy + readable line length (scoped) */ .admin-page .admin-businesses-list-card .admin-businesses-card-intro { max-width: min(72ch, 100%); } .admin-page .admin-businesses-list-card .admin-businesses-intro-lead { margin: 0 0 0.5rem 0; padding-top: 0.35rem; line-height: 1.55; color: var(--gray-300); } .admin-page .admin-businesses-list-card .admin-businesses-intro-list { margin: 0; padding: 0 0 0 1.15rem; color: var(--gray-400); font-size: 0.875rem; line-height: 1.55; list-style-type: disc; } .admin-page .admin-businesses-list-card .admin-businesses-intro-list li { margin: 0 0 0.45em 0; padding-left: 0.2rem; } .admin-page .admin-businesses-list-card .admin-businesses-intro-list li:last-child { margin-bottom: 0; } .admin-users-role-filters-bar .admin-role-filters { margin-bottom: 0; flex: 1 1 auto; min-width: 0; } .admin-businesses-list-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.25rem; margin-bottom: 1rem; padding-bottom: 0.25rem; } .admin-businesses-list-toolbar-search { flex: 1 1 14rem; min-width: min(100%, 14rem); max-width: 22rem; } .admin-businesses-list-toolbar-search .modal-label { margin-bottom: 0.25rem; } .admin-businesses-list-toolbar-filters { flex: 2 1 auto; min-width: min(100%, 16rem); } .admin-businesses-list-toolbar-filters .admin-role-filters { margin-bottom: 0; } .admin-businesses-list-toolbar-sort { flex: 0 1 auto; min-width: 0; } .admin-businesses-list-toolbar-sort .admin-analytics-filter-label { display: block; margin-bottom: 0.25rem; } .admin-businesses-list-status { flex: 1 1 100%; font-size: 0.75rem; line-height: 1.35; color: var(--gray-500); } .admin-businesses-list-status .admin-businesses-list-status-nums { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--gray-400); } .admin-biz-row-main.is-filtered-out, .admin-biz-row-details.is-filtered-out { display: none !important; } .admin-businesses-inline-stats, .admin-users-inline-stats { flex-shrink: 0; font-size: 0.75rem; line-height: 1.35; color: var(--gray-500); text-align: right; max-width: 100%; } .admin-businesses-inline-stats .admin-businesses-inline-stats-nums, .admin-users-inline-stats .admin-users-inline-stats-nums { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--gray-400); } .admin-users-bulk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.75rem; } .admin-users-bulk-toolbar .admin-users-bulk-count { min-width: 6.5rem; } .admin-table-select-col { width: 2.5rem; text-align: center; vertical-align: middle; } .admin-table-select-col input[type="checkbox"] { cursor: pointer; } .admin-businesses-inline-stats--attention { color: var(--gray-400); } .admin-businesses-inline-stats--attention .admin-businesses-inline-stats-nums:last-of-type { color: #c4b5fd; } .admin-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; padding-left: 0.5rem; padding-right: 0.5rem; } .admin-icon-btn svg { flex-shrink: 0; } .admin-icon-danger { color: var(--red-400, #f87171); } .admin-icon-danger:hover { color: var(--red-300, #fca5a5); } .admin-role-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; } .admin-business-cell { display: flex; align-items: center; gap: 0.65rem; min-width: 0; } .admin-business-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 9999px; flex-shrink: 0; border: 1px solid var(--hero-border); } .admin-business-thumb-placeholder { display: inline-block; width: 40px; height: 40px; border-radius: 9999px; background: var(--hero-border); flex-shrink: 0; } .admin-business-detail-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .admin-business-detail-avatar { width: 72px; height: 72px; object-fit: cover; border-radius: 9999px; border: 1px solid var(--hero-border); flex-shrink: 0; } .admin-business-help-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .admin-business-help-actions .btn svg { margin-right: 0.25rem; vertical-align: middle; } .admin-qr-block img { display: block; border-radius: 0.5rem; border: 1px solid var(--hero-border); background: white; padding: 0.5rem; } .admin-support-layout { min-height: 24rem; } .admin-support-layout .conversation-list { min-width: 12rem; padding: 0.5rem; min-height: 0; } @media (min-width: 640px) { .admin-support-layout.messages-layout { align-items: stretch; } .admin-support-layout .conversation-list { padding: 0.75rem 0.75rem 1rem; max-height: none; align-self: stretch; overflow-y: auto; -webkit-overflow-scrolling: touch; } } .admin-support-layout .conversation-list > .empty { padding: 1.5rem 1rem; margin: 0; text-align: center; color: var(--gray-500); font-size: 0.9rem; line-height: 1.45; } .admin-support-layout .conversation-view { min-width: 0; } /* Tickets detail: no conv-header / message-list-wrap - add body padding. messages-layout uses a fixed viewport height on wide screens; without min-height:0 + vertical scroll, overflow:hidden on .conversation-view clips the reply form below the fold. */ .admin-support-layout .conversation-view.admin-ticket-detail { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.15rem 1.35rem 1.5rem; } @media (min-width: 640px) { .admin-support-layout .conversation-view.admin-ticket-detail { padding: 1.35rem 1.65rem 1.65rem; } } .admin-support-layout .conversation-view.admin-ticket-detail .account-card { padding: 1rem 1.25rem; } .admin-support-layout .conversation-view > .empty { padding: 1.5rem 1.25rem; margin: 0; } .admin-support-layout.messages-layout { gap: 1rem; } @media (min-width: 640px) { .admin-support-layout.messages-layout { gap: 1.25rem; } } .account-card:has(.admin-support-layout) .info-section-header { margin-bottom: 1.5rem; } .admin-subtabs { display: flex; flex-wrap: wrap; gap: 0.65rem 1.25rem; align-items: center; } .admin-subtabs a { font-size: 0.875rem; color: var(--gray-400); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 0.375rem; } .admin-subtabs a:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); } .admin-subtabs a.active { color: var(--primary-400); background: rgba(34, 197, 94, 0.1); } .admin-ticket-type { display: inline-block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.35rem; border-radius: 0.25rem; margin-right: 0.35rem; vertical-align: middle; } .admin-ticket-type-feature { background: rgba(99, 102, 241, 0.25); color: #a5b4fc; } .admin-ticket-type-support { background: rgba(34, 197, 94, 0.2); color: #4ade80; } .admin-ticket-detail-head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .admin-ticket-detail-head-text { flex: 1; min-width: 0; } .admin-ticket-detail-title-row { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 0.25rem; } .admin-ticket-detail-title-row .conv-header-title { margin: 0; font-size: 1.125rem; } .admin-ticket-status-badge { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.5rem; border-radius: 0.375rem; border: 1px solid transparent; } .admin-ticket-status-badge--new { background: rgba(99, 102, 241, 0.22); color: #c4b5fd; border-color: rgba(139, 92, 246, 0.45); } .admin-ticket-status-badge--open { background: rgba(34, 197, 94, 0.18); color: #4ade80; border-color: rgba(34, 197, 94, 0.35); } .admin-ticket-status-badge--waiting { background: rgba(245, 158, 11, 0.18); color: #fbbf24; border-color: rgba(245, 158, 11, 0.4); } .admin-ticket-status-badge--closed { background: rgba(148, 163, 184, 0.15); color: var(--gray-400); border-color: var(--hero-border); } .admin-ticket-status-badge--archived { background: rgba(148, 163, 184, 0.12); color: var(--gray-500); border-color: var(--hero-border); } .admin-ticket-retention-notice { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); background: rgba(148, 163, 184, 0.1); color: var(--gray-400); } .admin-ticket-status-filters { display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; align-items: center; } .admin-ticket-status-filter { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; font-size: 0.8125rem; font-weight: 500; color: var(--gray-400); text-decoration: none; border-radius: 0.5rem; border: 1px solid var(--hero-border); background: rgba(255, 255, 255, 0.03); transition: background 0.15s, color 0.15s, border-color 0.15s; } .admin-ticket-status-filter:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); } .admin-ticket-status-filter.active { color: var(--primary-300); border-color: rgba(124, 58, 237, 0.55); background: rgba(124, 58, 237, 0.12); } .admin-ticket-status-filter-count { font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--gray-500); font-weight: 600; } .admin-ticket-status-filter.active .admin-ticket-status-filter-count { color: var(--gray-300); } .admin-ticket-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; width: 100%; } .admin-ticket-item .convo-info { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; width: 100%; } .admin-ticket-item .convo-preview { line-height: 1.4; } .admin-ticket-item-meta { color: var(--gray-500); font-size: 0.75rem; } .admin-support-layout .admin-ticket-item { padding: 1.125rem 1.25rem; border-left: 1px solid var(--hero-border); } .admin-ticket-status-row { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: center; } .admin-ticket-status-select { flex: 1; min-width: min(100%, 12rem); } .admin-ticket-field-spaced { margin-bottom: 1.5rem; } .admin-ticket-detail-meta { margin: 0 0 1.35rem; padding: 0.85rem 1rem; border-radius: 0.5rem; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--hero-border); } .admin-ticket-detail-meta-line { margin: 0 0 0.65rem; line-height: 1.5; font-size: 0.9375rem; color: var(--gray-300); } .admin-ticket-detail-meta-line:last-child { margin-bottom: 0; } .admin-ticket-detail-meta-line code { font-size: 0.8125rem; } .admin-ticket-message-body { background: var(--gray-800) !important; border: 1px solid var(--hero-border); padding: 1.125rem 1.25rem !important; } .admin-ticket-message-body-spaced { margin-bottom: 1.5rem !important; } .admin-ticket-message-body p { margin: 0; } .admin-ticket-save-note-btn { margin-top: 1rem; } .admin-ticket-section-title { margin: 1.5rem 0 0.85rem; } .admin-ticket-replies { list-style: none; padding: 0; margin: 0 0 1.35rem; } .admin-ticket-reply-item { margin-bottom: 0.75rem; padding: 1rem 1.125rem; border-radius: 0.5rem; background: var(--gray-800); border: 1px solid var(--hero-border); } .admin-ticket-reply-item:last-child { margin-bottom: 0; } .admin-ticket-reply-field { margin-top: 0.5rem; } .admin-ticket-reply-field .modal-textarea { margin-bottom: 0.35rem; } .admin-ticket-reply-email-row { display: flex; margin-top: 0.85rem; margin-bottom: 0.35rem; } .admin-ticket-send-reply-btn { margin-top: 1rem; } /* Admin message inbox - compose to businesses */ .admin-inbox-compose { padding: 1rem 1.15rem 1.25rem; background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 0.75rem; } .admin-inbox-compose-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .admin-inbox-compose-grid { display: grid; gap: 1rem 1.25rem; margin-bottom: 1rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .admin-inbox-compose-grid { grid-template-columns: 1fr auto; align-items: end; } .admin-inbox-compose-actions .modal-label { visibility: hidden; } } .admin-inbox-search-wrap .modal-label, .admin-inbox-compose-actions .modal-label { margin-bottom: 0.35rem; } .admin-inbox-search-field { position: relative; } .admin-inbox-search-results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 0.25rem; max-height: 14rem; overflow-y: auto; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .admin-inbox-search-item { display: block; width: 100%; text-align: left; padding: 0.65rem 0.85rem; border: none; background: transparent; color: var(--text-primary); font-size: 0.875rem; cursor: pointer; border-bottom: 1px solid var(--hero-border); } .admin-inbox-search-item:last-child { border-bottom: none; } .admin-inbox-search-item:hover, .admin-inbox-search-item:focus-visible { background: var(--hero-border); outline: none; } .admin-inbox-search-item.messages-search-item { display: flex; align-items: center; gap: 0.65rem; text-align: left; } .admin-inbox-search-empty { padding: 0.75rem 0.85rem; color: var(--gray-500); font-size: 0.875rem; } .admin-inbox-selected { display: none; flex-direction: column; gap: 0.65rem; margin-bottom: 1rem; padding: 0.65rem 0.85rem; background: rgba(124, 58, 237, 0.1); border: 1px solid rgba(124, 58, 237, 0.35); border-radius: 0.5rem; font-size: 0.875rem; } .admin-inbox-selected--show { display: flex; } .admin-inbox-selected-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .admin-inbox-selected-label { color: var(--gray-400); } .admin-inbox-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .admin-inbox-chip { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; padding: 0.25rem 0.35rem 0.25rem 0.65rem; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 9999px; font-size: 0.8125rem; color: var(--text-primary); } .admin-inbox-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; } .admin-inbox-chip-remove { flex-shrink: 0; width: 1.5rem; height: 1.5rem; padding: 0; border: none; border-radius: 9999px; background: transparent; color: var(--gray-400); font-size: 1.1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .admin-inbox-chip-remove:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); } .admin-inbox-search-item--added { opacity: 0.55; cursor: default; } .admin-inbox-compose-footer { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } @media (min-width: 640px) { .admin-inbox-compose-footer { flex-direction: row; flex-wrap: wrap; align-items: center; } } .admin-inbox-broadcast-btn { white-space: nowrap; } .admin-inbox-email-notice { padding: 1rem 1.15rem; border-radius: 0.5rem; border: 1px solid var(--hero-border); background: rgba(59, 130, 246, 0.07); } .admin-inbox-email-notice code { font-size: 0.8125rem; word-break: break-word; } .admin-biz-msg-log-table-wrap { max-height: min(50vh, 22rem); overflow: auto; } .admin-biz-msg-log-count { font-variant-numeric: tabular-nums; text-align: right; } .admin-biz-msg-log-details summary { list-style: none; cursor: pointer; color: var(--gray-300); font-size: 0.875rem; } .admin-biz-msg-log-details summary::-webkit-details-marker { display: none; } .admin-biz-msg-log-details summary::before { content: '▸ '; display: inline-block; margin-right: 0.2rem; color: var(--primary-400); } .admin-biz-msg-log-details[open] summary::before { content: '▾ '; } .admin-biz-msg-log-full { margin-top: 0.5rem; padding: 0.75rem; background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 0.375rem; font-size: 0.8125rem; font-family: inherit; max-height: 14rem; overflow-y: auto; } .admin-bar-chart { display: flex; flex-direction: column; gap: 0.5rem; max-width: 36rem; } .admin-bar-row { display: grid; grid-template-columns: minmax(5rem, 9rem) 1fr auto; gap: 0.5rem 0.75rem; align-items: center; font-size: 0.8125rem; } .admin-bar-label { color: var(--gray-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-bar-track { height: 0.65rem; background: var(--hero-border); border-radius: 0.25rem; overflow: hidden; } .admin-bar-fill { display: block; height: 100%; background: var(--primary-400); border-radius: 0.25rem; min-width: 0; transition: width 0.2s ease; } .admin-bar-fill-alt { background: #818cf8; } .admin-bar-count { color: var(--gray-400); font-variant-numeric: tabular-nums; text-align: right; min-width: 2rem; } .admin-inline-form { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; } .admin-feature-table .modal-input { font-size: 0.8125rem; padding: 0.35rem 0.5rem; } .table-wrap { overflow-x: auto; } .admin-stats-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; } @media (min-width: 640px) { .admin-stats-grid { grid-template-columns: repeat(3, 1fr); } } .admin-stat-card { background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.75rem; padding: 1.5rem; color: var(--text-primary); } .admin-stat-value { display: block; font-size: 2rem; font-weight: 700; color: var(--primary-400); } .admin-stat-label { font-size: 0.875rem; color: var(--gray-400); } .admin-stats-grid-4 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .admin-stats-grid-4 { grid-template-columns: repeat(4, 1fr); } } .admin-stats-grid-3 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 640px) { .admin-stats-grid-3 { grid-template-columns: repeat(3, 1fr); } } .admin-section { } /* Horizontal scroll: use .table-scroll alone or with .admin-table-wrap (admin lists). */ .table-scroll, .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; } .admin-table-wrap { margin-top: 0.75rem; } .admin-table-wrap--scroll-hint { border-radius: 0.5rem; border: 1px solid var(--hero-border); background: var(--hero-card); } .admin-table-scroll-hint { max-width: 42rem; line-height: 1.4; } .admin-table--sticky-first { min-width: 720px; } .admin-table--sticky-first th:first-child, .admin-table--sticky-first td:first-child { position: sticky; left: 0; z-index: 1; background: var(--hero-card); box-shadow: 6px 0 12px -8px rgba(0, 0, 0, 0.45); max-width: 16rem; } /* Sticky header row: improves long lists when scrolling the page (corner cell stacks above body). */ .admin-table-wrap .admin-table > thead > tr > th { position: sticky; top: 0; z-index: 2; background: var(--hero-card); box-shadow: inset 0 -1px 0 var(--hero-border); } .admin-table--sticky-first thead th:first-child { z-index: 4; box-shadow: inset 0 -1px 0 var(--hero-border), 6px 0 12px -8px rgba(0, 0, 0, 0.45); } .admin-subscription-ends { line-height: 1.35; } .admin-subscription-paid-through { min-width: 7.5rem; max-width: 12rem; } /* Admin → Businesses: readable columns, subscription fields grouped, counts aligned */ .admin-table--businesses { min-width: 56rem; table-layout: fixed; } .admin-table--businesses th, .admin-table--businesses td { vertical-align: top; } .admin-table--businesses .admin-col-billing { width: 9.5rem; word-wrap: break-word; overflow-wrap: anywhere; } .admin-table--businesses .admin-subscription-paid-through { width: 10.5rem; } .admin-table--businesses .admin-biz-credits-cell { width: 6.75rem; } .admin-table--businesses .admin-biz-credits-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; } .admin-table--businesses .admin-biz-credits-value { font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.25; } .admin-table--businesses .admin-col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 4.25rem; } .admin-table--businesses th.admin-col-num { text-align: right; } .admin-table--businesses th.admin-th-actions { width: 11rem; } .admin-table--businesses td.admin-actions-cell--biz { white-space: normal; } .admin-table--businesses .admin-actions-stack { display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; align-items: center; justify-content: flex-end; } .admin-table--businesses th:last-child, .admin-table--businesses td:last-child { text-align: right; } .admin-table--businesses.admin-table--sticky-first th:first-child, .admin-table--businesses.admin-table--sticky-first td:first-child { width: 13.5rem; min-width: 11rem; max-width: 15rem; box-sizing: border-box; } /* Admin → Businesses / Users: compact rows + expandable detail (no horizontal scroll). */ .admin-biz-list, .admin-user-list { margin-top: 0.75rem; border-radius: 0.5rem; border: 1px solid var(--hero-border); background: var(--hero-card); overflow: hidden; } .admin-table--businesses-expandable, .admin-table--users-expandable { width: 100%; min-width: 0; table-layout: auto; } .admin-table--businesses-expandable .admin-biz-th-expand, .admin-table--users-expandable .admin-user-th-expand { width: 2.75rem; padding-left: 0.5rem; padding-right: 0.25rem; } .admin-table--businesses-expandable .admin-biz-row-expand-cell, .admin-table--users-expandable .admin-user-row-expand-cell { width: 3.25rem; vertical-align: middle; } .admin-biz-row-toggle, .admin-user-row-toggle { color: var(--gray-400); } .admin-biz-row-chevron, .admin-user-row-chevron { display: inline-flex; transition: transform 0.15s ease; } .admin-biz-row-toggle[aria-expanded="true"] .admin-biz-row-chevron, .admin-user-row-toggle[aria-expanded="true"] .admin-user-row-chevron { transform: rotate(180deg); } .admin-biz-row-shop-cell { min-width: 0; } .admin-biz-row-type { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.2rem; } .admin-biz-type-badge { font-weight: 500; } .admin-biz-row-shop-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .admin-biz-row-slug { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-biz-row-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-width: 0; } .admin-biz-summary-line { word-break: break-word; } .admin-biz-summary-meta { line-height: 1.35; } .admin-biz-row-quick-actions, .admin-user-row-quick-actions { text-align: right; white-space: nowrap; vertical-align: middle; } .admin-biz-row-main, .admin-user-row-main { cursor: pointer; } .admin-biz-row-main td, .admin-user-row-main td { background: var(--hero-card); } .admin-biz-row-main:hover td, .admin-user-row-main:hover td { background: rgba(255, 255, 255, 0.035); } .admin-biz-row-main.is-expanded td, .admin-user-row-main.is-expanded td { border-bottom-color: transparent; } .admin-biz-row-details td, .admin-user-row-details td { padding: 0; border-bottom: 1px solid var(--hero-border); background: rgba(0, 0, 0, 0.12); } .admin-biz-detail-panel, .admin-user-detail-panel { padding: 0.75rem 1rem 1rem; } .admin-biz-detail-grid, .admin-user-detail-grid { display: grid; gap: 0.85rem 1.25rem; margin: 0 0 1rem; grid-template-columns: 1fr; } @media (min-width: 540px) { .admin-biz-detail-grid, .admin-user-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .admin-biz-detail-grid, .admin-user-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .admin-biz-detail-item, .admin-user-detail-item { margin: 0; min-width: 0; } .admin-biz-detail-item dt, .admin-user-detail-item dt { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); margin: 0 0 0.25rem; } .admin-biz-detail-item dd, .admin-user-detail-item dd { margin: 0; font-size: 0.875rem; line-height: 1.45; } .admin-biz-detail-item dd .btn, .admin-user-detail-item dd .btn { margin-top: 0.35rem; } .admin-biz-detail-email, .admin-user-detail-email { word-break: break-all; } .admin-biz-detail-actions { display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; align-items: center; padding-top: 0.25rem; border-top: 1px solid var(--hero-border); } .admin-page .admin-businesses-list-card .admin-biz-list + p { max-width: 42rem; line-height: 1.4; } .admin-biz-detail-item--wide { grid-column: 1 / -1; } .admin-biz-inline-edit { margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: 0.5rem; border: 1px solid var(--hero-border); background: rgba(0, 0, 0, 0.15); } .admin-biz-inline-edit-title { font-size: 0.8125rem; font-weight: 600; margin: 0 0 0.35rem; color: var(--gray-300); } .admin-biz-inline-edit-fields { display: grid; gap: 0.65rem; margin-bottom: 0.65rem; } @media (min-width: 540px) { .admin-biz-inline-edit-fields { grid-template-columns: 1fr 1fr; } } .admin-biz-inline-msg.text-red-400 { color: #f87171; } .admin-biz-inline-msg:not(.text-red-400) { color: var(--gray-400); } .admin-biz-detail-action-groups, .admin-user-detail-action-groups { display: flex; flex-direction: column; gap: 0.85rem; padding-top: 0.25rem; border-top: 1px solid var(--hero-border); } .admin-biz-action-group-label, .admin-user-action-group-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); margin: 0 0 0.4rem; } .admin-biz-action-group-btns, .admin-user-action-group-btns { display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; align-items: center; } .admin-biz-detail-actions { display: none; } @media (max-width: 639px) { .admin-table--businesses-expandable thead .admin-th-actions, .admin-biz-row-quick-actions, .admin-table--users-expandable thead .admin-th-actions, .admin-user-row-quick-actions { display: none; } .admin-biz-row-summary-meta, .admin-user-summary-meta { display: block; } } .admin-biz-row-owner-cell { min-width: 0; max-width: 16rem; vertical-align: middle; } .admin-biz-row-owner-email { display: block; overflow: hidden; text-overflow: ellipsis; } .admin-user-row-role-cell { vertical-align: middle; white-space: nowrap; } /* Admin → unified Manage panel (Users + Businesses) */ .admin-manage-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 860px) { .admin-manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-manage-sec--wide { grid-column: 1 / -1; } } .admin-manage-sec { border: 1px solid var(--hero-border); border-radius: 0.5rem; background: rgba(0, 0, 0, 0.15); padding: 0.85rem 1rem; min-width: 0; } .admin-manage-sec-title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-400); margin: 0 0 0.65rem; } .admin-biz-images-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; } .admin-biz-images-tab { appearance: none; border: 1px solid var(--hero-border); border-radius: 0.375rem; background: transparent; color: var(--gray-400); font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.65rem; cursor: pointer; } .admin-biz-images-tab:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); } .admin-biz-images-tab.active { color: var(--primary-400); background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.35); } .admin-biz-images-profile-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; } .admin-biz-images-avatar-preview { flex-shrink: 0; } .admin-biz-images-avatar-img { width: 72px; height: 72px; border-radius: 0.5rem; object-fit: cover; display: block; } .admin-biz-images-avatar-gen { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 0.5rem; font-size: 1.25rem; font-weight: 700; color: #fff; } .admin-biz-images-profile-actions { flex: 1; min-width: 12rem; } .admin-biz-images-color-input { width: 3rem; height: 2.25rem; padding: 0; border: 1px solid var(--hero-border); border-radius: 0.375rem; background: transparent; } .admin-biz-images-staff-item { border: 1px solid var(--hero-border); border-radius: 0.375rem; padding: 0.5rem 0.65rem; margin-bottom: 0.5rem; background: rgba(0, 0, 0, 0.12); } .admin-biz-images-staff-item summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; } .admin-biz-images-staff-item summary::-webkit-details-marker { display: none; } .admin-biz-images-staff-name { font-weight: 600; font-size: 0.875rem; } .admin-biz-images-staff-item[open] { padding-bottom: 0.75rem; } .admin-biz-images-staff-upload { margin-top: 0.65rem; } .admin-manage-sub-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); margin: 0.75rem 0 0.4rem; } .admin-manage-field-row { display: grid; grid-template-columns: 1fr; gap: 0.65rem; margin-bottom: 0.5rem; } @media (min-width: 560px) { .admin-manage-field-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .admin-manage-toggles { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; } .admin-manage-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--gray-300); } .admin-manage-check input { width: 1rem; height: 1rem; } .admin-manage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.4rem; } .admin-manage-btn-row { display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; align-items: center; } .admin-manage-inline-control { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center; } .admin-manage-inline-control .modal-input { flex: 1 1 auto; min-width: 8rem; } .admin-manage-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0 0 0.5rem; } .admin-manage-dl > div { min-width: 0; } .admin-manage-dl dt { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); margin: 0 0 0.1rem; } .admin-manage-dl dd { margin: 0; font-size: 0.8125rem; color: var(--gray-200); word-break: break-word; } .admin-manage-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; } .admin-manage-audit .admin-audit-action { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: var(--primary-300); } .admin-biz-billing-block { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--hero-border); } .admin-svc-rows { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; } .admin-svc-row, .admin-svc-add-fields { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .admin-svc-row .modal-input { font-size: 0.8125rem; } .admin-msg-ok { color: #4ade80; } .admin-msg-err { color: #f87171; } .admin-manage-loading { font-style: italic; } /* Admin → Users expandable list */ .admin-users-select-all-bar { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; margin-bottom: 0.25rem; } .admin-user-row-lead { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .admin-user-row-lead .admin-user-select-cb { margin: 0; } .admin-user-row-identity-cell { min-width: 0; } .admin-user-row-identity { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .admin-user-row-email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .admin-user-row-username { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-user-row-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-width: 0; } .admin-user-summary-meta { line-height: 1.35; } .admin-table--businesses .admin-email { max-width: 11rem; min-width: 0; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .admin-table th, .admin-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--hero-border); line-height: 1.45; } .admin-table th { color: var(--gray-400); font-weight: 600; } .admin-table tbody tr:hover td { background: rgba(255, 255, 255, 0.035); } .admin-table .admin-date { white-space: nowrap; color: var(--gray-400); } .admin-table .admin-email { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-table .admin-env-vars { font-size: 0.8125rem; color: var(--gray-400); word-break: break-word; max-width: 20rem; } .admin-table .admin-forum-excerpt-cell { max-width: 22rem; word-break: break-word; } .admin-forum-excerpt { white-space: normal; } .admin-tier { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; background: var(--hero-border); color: var(--gray-300); } .admin-tier-live { background: rgba(34, 197, 94, 0.2); color: #4ade80; } .admin-tier-hidden, .admin-tier-demo { background: rgba(148, 163, 184, 0.22); color: #cbd5e1; } .admin-tier-toggle { border: 1px solid transparent; cursor: pointer; font-weight: 600; min-width: 4.25rem; text-align: center; } .admin-tier-toggle:hover { filter: brightness(1.08); } .admin-tier-toggle:focus-visible { outline: none; border-color: rgba(148, 163, 184, 0.7); box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.25); } .admin-demo-sections { display: flex; flex-direction: column; gap: 1.25rem; } .admin-demo-section { padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .admin-demo-section:last-child { padding-bottom: 0; border-bottom: none; } .admin-demo-cli-list { margin: 0; padding-left: 1.25rem; } .admin-demo-cli-list li + li { margin-top: 0.35rem; } .admin-tier-pending { background: rgba(124, 58, 237, 0.2); color: #c4b5fd; margin-left: 0.35rem; vertical-align: middle; } .admin-tier-pro, .admin-tier-premium { background: rgba(34, 197, 94, 0.2); color: #4ade80; } .admin-stat-card-pending { border: 1px solid rgba(124, 58, 237, 0.45); box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.12); } .admin-pending-requests-callout { border: 1px solid rgba(124, 58, 237, 0.35); background: rgba(124, 58, 237, 0.08); } .admin-analytics-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .admin-analytics-grid { grid-template-columns: repeat(2, 1fr); } } .admin-analytics-card { background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.75rem; padding: 1.25rem; } .admin-analytics-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-primary); } .admin-analytics-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; margin: 0.5rem 0 1rem; padding-top: 0.25rem; border-top: 1px solid var(--hero-border); } .admin-analytics-toolbar { background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem; } .admin-analytics-toolbar--compact { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; } .admin-analytics-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.65rem; } .admin-analytics-filter-label { font-size: 0.75rem; font-weight: 600; color: var(--gray-500); } .admin-analytics-select { min-width: 11rem; max-width: 100%; } .admin-analytics-select--compact { min-width: 6.5rem; width: auto; padding: 0.35rem 1.75rem 0.35rem 0.5rem; font-size: 0.8125rem; line-height: 1.25; } .admin-analytics-date-input { padding: 0.35rem 0.5rem; font-size: 0.8125rem; width: auto; max-width: 9.5rem; } .admin-analytics-custom-dates { display: none; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .admin-analytics-custom-dates-visible { display: flex; } .admin-analytics-date-sep { color: var(--gray-500); font-size: 0.75rem; } .admin-analytics-toolbar-hint { margin-top: 0.75rem; line-height: 1.45; } .admin-analytics-data-note-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 2rem; min-height: 2rem; padding: 0.25rem; } .admin-analytics-data-note-icon { flex-shrink: 0; color: var(--gray-400); } .admin-analytics-chart-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 960px) { .admin-analytics-chart-grid { grid-template-columns: repeat(2, 1fr); } .admin-analytics-span-2 { grid-column: span 2; } } .admin-analytics-chart-card .admin-analytics-title { margin-bottom: 0.35rem; } .admin-analytics-chart-wrap { position: relative; width: 100%; height: 240px; } .admin-analytics-chart-tall { height: 300px; } .admin-list { list-style: none; padding: 0; margin: 0; } .admin-list li { padding: 0.25rem 0; color: var(--gray-300); } .admin-link { color: var(--primary-400); } .admin-link:hover { text-decoration: underline; } .admin-actions { } .admin-auth-options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.5rem 1.5rem; } .admin-auth-option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: var(--gray-300); } .admin-auth-option input { margin: 0; } /* Deprecated: use pref-ios-switch / pref-switch-row (see .agent/frontend.md). Kept for gradual migration. */ .admin-switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; color: var(--gray-300); cursor: pointer; line-height: 1.35; } .admin-switch-label { font-size: 0.875rem; flex: 1; min-width: 0; } .admin-switch-readonly, .pref-switch-row--readonly { cursor: default; opacity: 0.85; } .admin-auth-options-grid .pref-switch-row { margin: 0; } .admin-config-row .pref-ios-switch { flex-shrink: 0; } /* Moderation rules: compact inline day count */ .admin-mod-days-field { display: inline-flex; align-items: stretch; flex-shrink: 0; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .admin-mod-days-field:focus-within { border-color: rgba(34, 197, 94, 0.55); background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); } .admin-mod-days-input { box-sizing: border-box; width: 3.25rem; min-height: 2rem; padding: 0.35rem 0.4rem; font-size: 0.875rem; font-weight: 600; font-family: inherit; font-variant-numeric: tabular-nums; line-height: 1.25; text-align: center; color: var(--text-primary); background: transparent; border: none; border-radius: inherit; -moz-appearance: textfield; appearance: textfield; } .admin-mod-days-input:focus { outline: none; } .admin-mod-days-input::-webkit-outer-spin-button, .admin-mod-days-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .admin-breadcrumb { margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--gray-400); } .admin-breadcrumb a { color: var(--primary-400); } .admin-breadcrumb a:hover { text-decoration: underline; } .admin-detail-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .admin-detail-grid { grid-template-columns: repeat(2, 1fr); } } .admin-detail-block { background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.75rem; padding: 1.25rem; } .admin-detail-heading { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-primary); } .admin-dl { margin: 0; } .admin-dl dt { font-size: 0.75rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.75rem; } .admin-dl dt:first-child { margin-top: 0; } .admin-dl dd { margin: 0.25rem 0 0; color: var(--gray-300); } .admin-dl-inline { display: flex; flex-wrap: wrap; gap: 1rem 2rem; } .admin-dl-inline dt { margin-top: 0; } .admin-dl-inline dd { margin-top: 0; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .account-section-desc { color: var(--gray-400); font-size: 0.875rem; margin-bottom: 1rem; } .account-staff-list { display: flex; flex-direction: column; gap: 0.5rem; } .account-staff-item { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--hero-border); border-radius: 0.5rem; transition: background 0.2s, opacity 0.2s; } .account-staff-item:hover { background: rgba(42, 42, 42, 0.8); } .account-staff-info { flex: 1; min-width: 0; } .account-staff-actions { display: flex; gap: 0.25rem; align-items: center; } .account-staff-actions .staff-action-view:hover { color: #60a5fa; } .account-staff-actions .staff-action-archive:hover { color: #facc15; } .account-staff-actions .staff-action-delete:hover, .account-staff-actions .account-staff-remove:hover { color: #f87171; } .staff-photo-sm { width: 2.5rem; height: 2.5rem; border-radius: 9999px; flex-shrink: 0; overflow: hidden; } .staff-photo-sm img { width: 100%; height: 100%; object-fit: cover; } .btn-ghost { background: transparent; border: none; color: var(--gray-400); cursor: pointer; padding: 0.25rem; } .btn-ghost:hover { color: var(--text-primary); } .btn-ghost.btn-sm svg { width: 1rem; height: 1rem; } /* Staff page - matches Next.js Roster Management */ .staff-page-header { } .staff-page-title { font-size: 1.875rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; } .staff-page-subtitle { color: var(--gray-400); margin-bottom: 0; } .staff-post-section { margin-top: 1.5rem; gap: 1.5rem 2rem; padding: 0.5rem 0; } .staff-post-section .post-to-feed-btn { flex-shrink: 0; margin-right: 0.5rem; } .staff-post-section .post-stats { flex: 1; min-width: 0; margin-left: 0.5rem; } .post-to-feed-btn { display: inline-flex; align-items: center; gap: 0.5rem; } .post-to-feed-btn:disabled { opacity: 0.5; cursor: not-allowed; } .post-stats { font-size: 0.75rem; color: var(--gray-400); } .post-stats span { display: inline; } .post-stats .font-medium { font-weight: 500; } .staff-manage-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; } .staff-manage-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-left: auto; min-width: 0; } .staff-manage-search-wrap { width: 14rem; max-width: 100%; } .staff-manage-header .btn-primary { flex-shrink: 0; margin-left: auto; } /* Staff page tabs */ .staff-tabs-card { container-type: inline-size; container-name: staff-tabs-card; } .staff-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; } .staff-tab { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--hero-border); border: 1px solid var(--hero-border); border-radius: 0.5rem; color: var(--gray-400); font-size: 0.875rem; cursor: pointer; transition: all 0.2s; min-width: 0; } .staff-tab:hover { color: var(--text-primary); background: var(--gray-700); } .staff-tab.active { background: var(--primary-600); color: var(--text-on-primary); border-color: var(--primary-600); } .staff-tab svg { flex-shrink: 0; width: 1.125rem; height: 1.125rem; } /* Mobile: three equal columns; stack to full width when the card is too narrow */ @media (max-width: 639px) { .staff-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } } /* Narrow card: single column full-width (any viewport) */ @container staff-tabs-card (max-width: 22rem) { .staff-tabs { display: grid; grid-template-columns: 1fr; } .staff-tab { width: 100%; } } .staff-sub-tabs { display: flex; } .staff-sub-tab { flex: 1; padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; background: transparent; border: none; color: var(--gray-400); cursor: pointer; transition: color 0.15s, background 0.15s; } .staff-sub-tab:hover { color: var(--text-primary); background: var(--hero-border); } .staff-sub-tab.active { color: var(--text-primary); } .staff-sub-tab[data-subtab="current"].active { background: var(--primary-600); color: var(--text-on-primary); } .staff-sub-tab[data-subtab="archived"].active { background: #b45309; color: var(--text-on-primary); } .staff-sub-tab[data-subtab="deleted"].active { background: #dc2626; color: var(--text-on-primary); } /* Roster */ .staff-date-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-family: inherit; } .roster-date-primary { display: inline-flex; align-items: center; gap: 0.5rem; } .roster-date-controls { display: flex; align-items: center; gap: 0.5rem; } .roster-posting-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.25rem; margin-bottom: 0.75rem; } .roster-strip-card { background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 0.5rem; padding: 0.5rem 0.65rem; min-width: 0; } /* No active subscription: daily slot is not available (distinct from “used today”) */ .roster-strip-card--unavailable { border-style: dashed; border-color: rgba(251, 146, 60, 0.45); background: linear-gradient( 160deg, rgba(30, 27, 75, 0.35) 0%, rgba(15, 23, 42, 0.55) 100% ); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); } .roster-strip-card--unavailable .roster-strip-card-label { color: var(--gray-400); } .roster-strip-card-main--locked { color: #fb923c; font-weight: 600; font-size: 0.75rem; line-height: 1.35; } .roster-strip-card-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray-500); margin-bottom: 0.2rem; line-height: 1.2; } .roster-strip-card-main { font-size: 0.8125rem; font-weight: 600; line-height: 1.25; color: var(--gray-100); } .roster-strip-card-main--muted { color: var(--gray-500); font-weight: 500; } .roster-strip-card-main--ok { color: #4ade80; } .roster-strip-card-main--used { color: #fbbf24; } .roster-strip-pack-suffix { font-size: 0.85em; } .roster-strip-pack-main--with-cta { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; } .roster-strip-pack-left { min-width: 0; } .roster-strip-buy-cta { display: inline-flex; align-items: center; gap: 0.1rem; font-size: 0.75rem; font-weight: 600; line-height: 1.2; color: var(--primary-400); text-decoration: none; white-space: nowrap; } .roster-strip-buy-cta:hover { color: var(--primary-300); text-decoration: underline; } .roster-strip-buy-dollar { font-weight: 700; letter-spacing: -0.02em; } .roster-heading-row { margin-bottom: 1rem; } .roster-heading-row-top { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; } .roster-date-heading-group { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; } .roster-heading-row-top .roster-date-heading-group .roster-date-heading { margin: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .roster-heading-row-top .roster-date-controls { flex-shrink: 0; } .roster-date-heading-block { margin-top: 1rem; margin-bottom: 1rem; } .roster-date-heading { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.25rem 0; line-height: 1.3; } .roster-shop-visibility-btn[hidden] { display: none !important; } .roster-shop-visibility-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.5rem; border-radius: 0.5rem; background: var(--hero-bg); border: 1px solid var(--hero-border); color: var(--gray-300); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; } .roster-shop-visibility-btn:hover { color: var(--text-primary); border-color: var(--primary-500); } .roster-shop-visibility-btn--hidden { color: var(--gray-500); } .roster-shop-visibility-btn svg { width: 1.125rem; height: 1.125rem; display: block; } .roster-shop-visibility-btn:disabled { opacity: 0.55; cursor: not-allowed; } .roster-date-explicit { display: block; font-size: 1rem; color: var(--gray-400); font-weight: 500; } .roster-nav { padding: 0.5rem; font-family: inherit; } .roster-nav:disabled { opacity: 0.4; cursor: not-allowed; } .roster-for-icon { color: var(--primary-400); } .roster-for-icon svg { width: 1.25rem; height: 1.25rem; } .roster-today-btn { padding: 0.5rem 0.75rem; font-family: inherit; font-size: 0.875rem; border-radius: 0.5rem; background: var(--hero-bg); border: 1px solid var(--hero-border); color: var(--gray-400); cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; } .roster-today-btn:hover { color: var(--text-primary); background: var(--hero-border); } .roster-today-btn.roster-today-active { background: var(--primary-600); border-color: var(--primary-600); color: var(--text-on-primary); } .roster-nav-btn { padding: 0.5rem; font-family: inherit; border-radius: 0.5rem; background: var(--hero-bg); border: 1px solid var(--hero-border); color: var(--gray-400); cursor: pointer; transition: color 0.2s, background 0.2s; } .roster-nav-btn:hover { color: var(--text-primary); background: var(--hero-border); } .roster-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; } .roster-nav-btn svg { width: 1rem; height: 1rem; } /* Spacing: keep CTAs (Auto-fill, Add selected, etc.) clear of surrounding content */ .roster-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.25rem; } .roster-scheduled-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 1rem; background: rgba(124, 58, 237, 0.15); border: 1px solid var(--primary-500); border-radius: 0.5rem; } .roster-scheduled-banner-text { color: var(--gray-200); font-size: 0.875rem; } .roster-scheduled-banner-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .roster-cancel-scheduled-btn { flex-shrink: 0; } .roster-edit-scheduled-btn { flex-shrink: 0; } .roster-published-banner { padding: 0.75rem 1rem; margin-bottom: 1rem; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.4); border-radius: 0.5rem; } .roster-published-banner-text { color: var(--gray-200); font-size: 0.875rem; } .roster-publish-section { margin-top: 1.5rem; margin-bottom: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--hero-border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } /* Must follow .roster-publish-section: base rule would otherwise win on equal specificity. */ .roster-publish-section.roster-publish-section--compact { flex-direction: column; align-items: stretch; flex-wrap: nowrap; } .roster-publish-section.roster-publish-section--compact .roster-publish-hint { margin: 0 0 0.35rem 0; text-align: left; } .roster-publish-section.roster-publish-section--compact .roster-publish-btn { align-self: flex-end; } .roster-posting-strip + .roster-publish-section { margin-top: 0.5rem; } .roster-publish-status { font-size: 0.875rem; color: var(--gray-400); } .roster-publish-btn { display: inline-flex; align-items: center; gap: 0.5rem; } /* No active subscription: muted control + explicit copy (overrides .btn-primary when disabled) */ .roster-publish-btn.roster-publish-btn--needs-subscription, .roster-publish-btn.roster-publish-btn--needs-subscription:disabled { background: var(--gray-600); color: var(--gray-100); border: 1px solid var(--gray-500); opacity: 1; cursor: not-allowed; white-space: normal; text-align: center; line-height: 1.3; padding-top: 0.5rem; padding-bottom: 0.5rem; } .roster-publish-btn.roster-publish-btn--needs-subscription:hover, .roster-publish-btn.roster-publish-btn--needs-subscription:disabled:hover { background: var(--gray-600); color: var(--gray-100); } .roster-publish-btn.roster-publish-btn--needs-subscription .roster-publish-btn-label { font-size: 0.8125rem; font-weight: 500; } .roster-publish-btn.roster-publish-btn--needs-subscription svg { flex-shrink: 0; opacity: 0.75; } .publish-already-scheduled { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 0.5rem; padding: 0.75rem 1rem; } /* Publish modal: easy-to-tap time input on mobile */ .publish-scheduled-time-wrap { align-items: center; } .publish-scheduled-time-input { min-height: 2.75rem; font-size: 1rem; padding: 0.5rem 0.75rem; min-width: 8rem; } @media (max-width: 640px) { .publish-scheduled-time-input { min-height: 3rem; font-size: 1.125rem; } } .roster-toolbar-top { margin-bottom: 1rem; } .roster-toolbar-all-staff { margin-top: 1.5rem; margin-bottom: 1rem; padding: 0.25rem 0; } .roster-toolbar-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .roster-toolbar-actions .add-selected-roster-btn { margin-right: 0.25rem; } .roster-toolbar-actions .staff-search-wrap { margin-left: 0.25rem; } .staff-roster-wrapper { margin-top: 0.5rem; margin-bottom: 0.5rem; } .roster-toolbar-actions-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .roster-clear-day-btn[hidden] { display: none !important; } .roster-clear-day-btn { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--danger-400, #f87171); } .roster-clear-day-btn svg { flex-shrink: 0; } .roster-clear-day-btn:hover { background: rgba(127, 29, 29, 0.2); } .roster-auto-fill-btn { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0; white-space: normal; text-align: left; line-height: 1.25; } .roster-auto-fill-btn.roster-auto-fill-btn--blocked { opacity: 0.65; cursor: pointer; } .staff-list-max { max-width: 56rem; margin-left: auto; margin-right: auto; } .staff-search-wrap { position: relative; } .staff-search-wrap .roster-search-icon { left: 0.5rem; } .staff-search-wrap .roster-search-input { padding-left: 2rem; width: 12rem; } .staff-empty-icon { display: block; width: 4rem; height: 4rem; margin: 0 auto 1rem; color: var(--gray-600); } .staff-empty-icon svg { width: 100%; height: 100%; } .relative { position: relative; } .roster-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--gray-500); } .roster-search-icon + .roster-search-input { padding-left: 2.5rem; } .roster-search-icon svg { width: 1rem; height: 1rem; } .roster-search-input { width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.5rem; font-size: 0.875rem; background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 0.5rem; color: var(--text-primary); } .roster-search-input:focus { outline: none; border-color: var(--primary-500); } .roster-search-input::placeholder { color: var(--gray-500); } .staff-roster-list { display: flex; flex-direction: column; gap: 0.75rem; } .staff-roster-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--hero-border); border-radius: 0.5rem; transition: background 0.2s, opacity 0.2s; } .staff-roster-item:hover { background: var(--gray-700); } .staff-roster-item.is-reorder-highlight { background: color-mix(in srgb, var(--primary-500) 22%, var(--hero-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-500) 45%, transparent); } .staff-roster-item .staff-roster-photo { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: var(--gray-700); overflow: hidden; flex-shrink: 0; } .staff-roster-item .staff-roster-photo img { width: 100%; height: 100%; object-fit: cover; } .staff-roster-info { flex: 1; min-width: 0; } .staff-roster-name { font-weight: 500; } .staff-roster-time { font-size: 0.875rem; color: var(--gray-400); } .staff-roster-info .staff-review-inline { margin-top: 0.25rem; } .staff-roster-actions { display: flex; align-items: center; gap: 0.25rem; } .staff-roster-actions .btn-action, .staff-roster-actions .btn-ghost { padding: 0.375rem; color: var(--gray-400); background: transparent; border: none; cursor: pointer; border-radius: 0.375rem; } .staff-roster-actions .btn-action:hover, .staff-roster-actions .btn-ghost:hover { color: var(--text-primary); background: var(--gray-600); } .staff-roster-actions .btn-action.btn-remove:hover, .staff-roster-actions .btn-ghost.btn-remove:hover { color: #f87171; } .staff-roster-reorder { display: flex; flex-direction: column; gap: 0.125rem; margin-left: 0.25rem; } .staff-roster-reorder .btn-action { padding: 0.25rem; color: var(--gray-400); background: transparent; border: none; cursor: pointer; border-radius: 0.25rem; } .staff-roster-reorder .btn-action:hover { color: var(--primary-400); } .staff-roster-reorder .btn-action:disabled { opacity: 0.45; cursor: not-allowed; } /* Roster: narrow screens - stack elements */ @media (max-width: 480px) { .staff-date-row.roster-date-row { gap: 0.5rem; } .staff-date-row .roster-date-controls { justify-content: flex-start; } .staff-date-row .roster-today-btn { font-size: 0.8125rem; padding: 0.375rem 0.625rem; } .roster-date-heading { font-size: 1.25rem; } .roster-date-explicit { font-size: 0.9375rem; } .roster-toolbar.roster-toolbar-top, .roster-toolbar.roster-toolbar-all-staff { flex-direction: column; align-items: stretch; } .roster-toolbar-actions { flex-direction: column; align-items: stretch; } .roster-toolbar-actions .staff-search-wrap { margin-left: 0; } .roster-toolbar-actions .roster-search-input { width: 100%; } .staff-manage-header { flex-direction: column; align-items: stretch; } .staff-manage-actions { width: 100%; margin-left: 0; justify-content: stretch; flex-direction: column; align-items: stretch; } .staff-manage-search-wrap { width: 100%; } .staff-manage-header .btn-primary { margin-left: 0; width: 100%; justify-content: center; } .roster-scheduled-banner { flex-direction: column; align-items: stretch; } .roster-scheduled-banner-actions { justify-content: flex-start; } .roster-publish-section { flex-direction: column; align-items: stretch; } .roster-publish-btn { width: 100%; justify-content: center; } .staff-roster-item { flex-wrap: wrap; } .staff-roster-actions { flex-shrink: 0; } } .staff-all-staff-list { display: flex; flex-direction: column; gap: 0.75rem; } .staff-all-staff-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: var(--hero-border); border-radius: 0.5rem; transition: background 0.2s, opacity 0.2s; } .staff-all-staff-item:hover { background: var(--gray-700); } .staff-all-staff-left { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; } .staff-all-staff-left .staff-photo-sm { width: 2.5rem; height: 2.5rem; } .staff-all-staff-check-wrap { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; } .staff-all-staff-check-wrap input.add-to-roster-cb { position: absolute; opacity: 0; width: 1rem; height: 1rem; margin: 0; cursor: pointer; } .staff-all-staff-checkbox { width: 1.125rem; height: 1.125rem; border: 2px solid var(--gray-500); border-radius: 0.25rem; background: var(--hero-bg); flex-shrink: 0; } .staff-all-staff-check-wrap input:checked + .staff-all-staff-checkbox { background: var(--primary-500); border-color: var(--primary-500); } .staff-all-staff-check-wrap input:checked + .staff-all-staff-checkbox::after { content: ''; position: absolute; left: 0.35rem; top: 0.1rem; width: 0.35rem; height: 0.6rem; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .staff-all-staff-checkbox { position: relative; } .staff-all-staff-check-wrap input:focus-visible + .staff-all-staff-checkbox { outline: 2px solid var(--primary-400); outline-offset: 1px; } .add-selected-roster-btn { display: inline-flex; align-items: center; gap: 0.25rem; } .staff-add-to-roster { padding: 0.375rem 0.75rem; font-size: 0.875rem; } /* Weekly schedule tab */ .weekly-schedule-grid { display: grid; gap: 1rem; } .weekly-day-card { background: var(--hero-border); border-radius: 0.5rem; padding: 1rem; } .weekly-day-title { font-weight: 500; color: var(--text-primary); margin-bottom: 0.75rem; padding: 0.5rem 0; } .weekly-day-items { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; } .weekly-day-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; background: var(--gray-800); border-radius: 0.5rem; } .weekly-day-item .staff-photo-sm { width: 2.5rem; height: 2.5rem; } .weekly-day-item .flex-1 { flex: 1; min-width: 0; } .weekly-day-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .weekly-clear-day { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--danger-400, #f87171); } .weekly-clear-day svg { flex-shrink: 0; } .weekly-clear-day:hover { background: rgba(127, 29, 29, 0.2); } /* Weekly add modal - visual staff list */ .weekly-add-staff-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 22rem; min-height: 12rem; overflow-y: auto; padding: 0.25rem 0; } .weekly-add-staff-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; background: var(--hero-border); border-radius: 0.5rem; cursor: pointer; border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; } .weekly-add-staff-item:hover { background: var(--gray-700); } .weekly-add-staff-item:has(.weekly-add-staff-cb:checked) { border-color: var(--primary-500); } .weekly-add-staff-item input.weekly-add-staff-cb { width: 1rem; height: 1rem; margin: 0; cursor: pointer; accent-color: var(--primary-500); } .weekly-add-staff-photo { width: 2.5rem; height: 2.5rem; border-radius: 9999px; overflow: hidden; flex-shrink: 0; background: var(--gray-700); } .weekly-add-staff-photo img { width: 100%; height: 100%; object-fit: cover; } .weekly-add-staff-name { font-weight: 500; color: var(--text-primary); } .btn-ghost svg { width: 1rem; height: 1rem; } .account-empty-state { color: var(--gray-400); font-size: 0.875rem; padding: 1rem 0; } .text-gray-400 { color: var(--gray-400); } .text-gray-500 { color: var(--gray-500); } .text-gray-300 { color: var(--gray-300); } .text-gray-200 { color: var(--gray-200); } .text-white { color: var(--text-primary); } .text-sm { font-size: 0.875rem; } .text-base { font-size: 1rem; line-height: 1.5; } .text-lg { font-size: 1.125rem; line-height: 1.75; } .font-semibold { font-weight: 600; } .font-normal { font-weight: 400; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-7 { margin-bottom: 1.75rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .mt-2 { margin-top: 0.5rem; } .ml-1 { margin-left: 0.25rem; } .w-24 { width: 6rem; max-width: 100%; box-sizing: border-box; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .text-center { text-align: center; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } /* Layout utilities used in modals and forms */ .flex { display: flex; } .inline-flex { display: inline-flex; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .min-w-0 { min-width: 0; } .block { display: block; } .font-medium { font-weight: 500; } .text-xs { font-size: 0.75rem; } .cursor-pointer { cursor: pointer; } .mt-1 { margin-top: 0.25rem; } .mt-0\.5 { margin-top: 0.125rem; } .modal-checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; cursor: pointer; } /* Guest gated sections */ .guest-gate { display: flex; align-items: flex-start; justify-content: center; /* Match .auth-page horizontal / top rhythm so gate cards line up with auth cards */ padding: 1rem 1.5rem; } @media (max-width: 1023px) { .guest-gate { min-height: calc( 100dvh - var(--mobile-app-header-height) - var(--bottom-nav-height) - var(--main-content-padding-top-mobile) - var(--main-content-padding-bottom-mobile) - env(safe-area-inset-bottom, 0px) ); padding: 1rem; } /* Extra vertical padding from .account-page wrapper */ .account-page .guest-gate { min-height: calc( 100dvh - var(--mobile-app-header-height) - var(--bottom-nav-height) - var(--main-content-padding-top-mobile) - var(--main-content-padding-bottom-mobile) - 2rem - env(safe-area-inset-bottom, 0px) ); } } .guest-gate-card { width: 100%; max-width: 28rem; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.75rem; padding: 2rem; text-align: center; } .guest-gate-title { color: var(--text-primary); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; } .guest-gate-subtitle { color: var(--gray-400); margin-bottom: 1.25rem; line-height: 1.5; } /* Launch countdown (public launch gate; admin preview reuses .launch-countdown) */ .launch-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } .launch-countdown-item { border: 1px solid var(--hero-border); border-radius: 0.75rem; background: var(--hero-bg); padding: 0.9rem 0.5rem; text-align: center; } .launch-countdown-value { color: var(--primary-400); font-size: clamp(1.5rem, 6vw, 2.25rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; } .launch-countdown-label { margin-top: 0.35rem; color: var(--gray-400); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; } .launch-signup-qr { margin-top: 0.75rem; text-align: center; } .launch-signup-qr-link { display: inline-block; border-radius: 0.75rem; border: 1px solid var(--hero-border); background: #fff; padding: 0.5rem; line-height: 0; text-decoration: none; } .launch-signup-qr-link:hover { border-color: var(--primary-400); } .launch-signup-qr-img { display: block; width: 180px; height: 180px; } .launch-signup-qr-caption { margin-top: 1rem; margin-bottom: 1rem; } /* Help & legal hub (FAQ, contact, terms, privacy) - legal_page_nav partial */ .help-subnav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .help-subnav a { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 500; color: var(--gray-400); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid transparent; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .help-subnav a:hover { color: var(--gray-200); background: rgba(255, 255, 255, 0.04); } .help-subnav a.active { color: var(--primary-400); border-color: var(--hero-border); background: var(--hero-card); } .help-subnav a svg { width: 1rem; height: 1rem; flex-shrink: 0; } /* Help hub only: Privacy & Terms below FAQ / contact / feature content */ .help-legal-footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hero-border); text-align: center; } .help-legal-footer-inner { margin: 0; font-size: 0.8125rem; color: var(--gray-500); } .help-legal-footer a { color: var(--gray-400); text-decoration: none; } .help-legal-footer a:hover { color: var(--primary-400); text-decoration: underline; } .help-legal-footer-sep { margin: 0 0.35rem; opacity: 0.55; } /* Standalone legal pages (/privacy, /terms): compact nav, not part of Help subnav */ .legal-page-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.25rem 0; margin-bottom: 1.25rem; font-size: 0.8125rem; } .legal-page-nav-link { color: var(--gray-400); text-decoration: none; padding: 0.35rem 0.2rem; border-radius: 0.35rem; } .legal-page-nav-link:hover { color: var(--primary-400); text-decoration: underline; } .legal-page-nav-link:active { color: var(--primary-500); } .legal-page-nav-link.is-current { color: var(--primary-400); font-weight: 600; text-decoration: none; } .legal-page-nav-sep { color: var(--gray-600); margin: 0 0.15rem; user-select: none; } .site-footer.site-docs-footer { width: 100%; max-width: 56rem; margin-left: auto; margin-right: auto; padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, 0.08); } .site-footer.site-docs-footer .legal-page-nav { justify-content: center; margin-bottom: 0; } @media (max-width: 1023px) { body:not(.no-nav) .site-footer.site-docs-footer { padding-bottom: calc(1.25rem + var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); } } .auth-terms-hint { font-size: 0.75rem; line-height: 1.45; color: var(--gray-500); text-align: center; margin: 0 0 1rem 0; } .auth-terms-hint--stacked .auth-terms-hint-line { display: block; } .auth-terms-hint--below-card { margin-top: 1.25rem; margin-bottom: 0; padding: 0 0.25rem; max-width: 100%; } .auth-terms-hint .legal-page-nav { justify-content: center; margin-top: 0.65rem; margin-bottom: 0; } .auth-terms-hint .auth-terms-hint-line { margin: 0; } .legal-policy-page .legal-policy-sections { display: flex; flex-direction: column; gap: 2.25rem; } .legal-policy-page .legal-policy-sections > section > h2 { margin-bottom: 0.65rem; } .legal-policy-page .legal-policy-list { list-style-type: disc; list-style-position: outside; margin: 0.4rem 0 0 0; padding-left: 1.35rem; } .legal-policy-page .legal-policy-list li { margin: 0 0 0.5rem 0; padding-left: 0.4rem; line-height: 1.6; } .legal-policy-page .legal-policy-list li:last-child { margin-bottom: 0; } .legal-policy-page .legal-policy-list li::marker { color: var(--gray-500); } .legal-policy-page .legal-policy-operator-note { border-left: 3px solid rgba(245, 158, 11, 0.6); padding-left: 1rem; } /* FAQ page */ .faq-page { padding: 0.5rem 0 2rem; } .faq-section-title { color: var(--gray-300); font-size: 0.9375rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 1.5rem 0 0.75rem 0; } .faq-section-title:first-of-type { margin-top: 0; } .faq-list { margin: 0; } .faq-item { margin-bottom: 1.5rem; } .faq-item:last-child { margin-bottom: 0; } .faq-q { font-weight: 600; color: var(--text-primary); font-size: 1rem; margin: 0 0 0.5rem 0; } .faq-a { color: var(--gray-400); font-size: 0.9375rem; line-height: 1.5; margin: 0; padding-left: 0; } .contact-forms { display: flex; flex-direction: column; gap: 2.5rem; } .contact-form-block { padding-top: 0.5rem; } .contact-form-block:not(:first-child) { border-top: 1px solid var(--hero-border); padding-top: 2rem; } .contact-form .field { display: flex; flex-direction: column; gap: var(--form-label-gap); margin-bottom: var(--form-field-gap); } .contact-form .field:last-child { margin-bottom: 0; } .contact-form .field > .modal-label { margin: 0; } .contact-form .modal-textarea { min-height: 6rem; } .contact-form-status { margin-top: 0.75rem; font-size: 0.875rem; } .contact-form-status.success { color: var(--green-400, #4ade80); } .contact-form-status.error { color: var(--red-400, #f87171); } .contact-audience-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 0.5rem; } .contact-radio-label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; color: var(--gray-300); font-size: 0.9375rem; } .contact-radio-label input { accent-color: var(--primary-500, #22c55e); } .contact-topics-fieldset { border: 0; padding: 0; margin: 0; } .contact-topic-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem 1rem; margin-top: 0.5rem; } @media (min-width: 640px) { .contact-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .contact-topic-label { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; color: var(--gray-400); line-height: 1.4; } .contact-topic-label input { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--primary-500, #22c55e); } /* FAQ nested accordions */ .faq-accordion-stack { display: flex; flex-direction: column; gap: 0.75rem; } /* FAQ main page: Customer / Business - prominent headers, smooth motion, even spacing */ .faq-accordion-stack--flat { --faq-ease: cubic-bezier(0.4, 0, 0.2, 1); --faq-duration: 0.3s; gap: 0.75rem; } .faq-accordion-stack--flat .faq-audience { border-radius: 0.5rem; border: 1px solid transparent; background: transparent; transition: border-color var(--faq-duration) var(--faq-ease), background-color var(--faq-duration) var(--faq-ease), box-shadow var(--faq-duration) var(--faq-ease); } .faq-accordion-stack--flat .faq-audience:hover { background: rgba(255, 255, 255, 0.04); } .faq-accordion-stack--flat .faq-audience[open] { border-color: var(--hero-border); background: var(--hero-card); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); } .faq-accordion-stack--flat .faq-audience > .faq-audience-summary { padding: 0.875rem 1rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em; color: var(--gray-200); transition: color calc(var(--faq-duration) * 0.85) var(--faq-ease); } .faq-accordion-stack--flat .faq-audience:hover > .faq-audience-summary { color: var(--gray-100); } .faq-accordion-stack--flat .faq-audience[open] > .faq-audience-summary { color: var(--primary-400); } .faq-accordion-stack--flat .faq-audience > .faq-audience-summary::after { transition: transform var(--faq-duration) var(--faq-ease), border-color calc(var(--faq-duration) * 0.85) var(--faq-ease); } .faq-accordion-stack--flat .faq-audience[open] > .faq-audience-summary::after { border-right-color: var(--primary-400); border-bottom-color: var(--primary-400); } .faq-accordion-stack--flat .faq-audience-body { padding: 0.125rem 0.75rem 0.75rem; gap: 0.625rem; } .faq-accordion-stack--flat .faq-section { margin: 0 0 0.625rem; border-radius: 0.375rem; transition: border-color calc(var(--faq-duration) * 0.85) var(--faq-ease); } .faq-accordion-stack--flat .faq-section:last-child { margin-bottom: 0.25rem; } .faq-accordion-stack--flat .faq-section-body { padding: 0.125rem 0.25rem 0.5rem 0.625rem; } /* Nest Q list visually under topic title (flat FAQ page only) */ .faq-accordion-stack--flat .faq-section[open] > .faq-section-body { margin-top: 0.25rem; padding: 0.5rem 0.375rem 0.5rem 0.625rem; background: rgba(0, 0, 0, 0.32); border-radius: 0.25rem; border: 1px solid rgba(255, 255, 255, 0.06); } .faq-accordion-stack--flat .faq-qna > .faq-qna-summary { font-weight: 500; font-size: 0.9375rem; color: var(--gray-300); } .faq-accordion-stack--flat .faq-qna[open] > .faq-qna-summary { color: var(--gray-100); } .faq-accordion-stack--flat .faq-section > .faq-section-summary { transition: color calc(var(--faq-duration) * 0.85) var(--faq-ease), border-color calc(var(--faq-duration) * 0.85) var(--faq-ease); } .faq-accordion-stack--flat .faq-section > .faq-section-summary::after { transition: transform var(--faq-duration) var(--faq-ease); } .faq-accordion-stack--flat .faq-qna > .faq-qna-summary::after { transition: transform var(--faq-duration) var(--faq-ease); } .faq-audience { border: 1px solid var(--hero-border); border-radius: 0.5rem; background: var(--hero-card); overflow: hidden; } .faq-audience > .faq-audience-summary { list-style: none; padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; font-size: 1.0625rem; color: var(--gray-100); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .faq-audience > .faq-audience-summary::-webkit-details-marker { display: none; } .faq-audience > .faq-audience-summary::after { content: ''; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--gray-500); border-bottom: 2px solid var(--gray-500); transform: rotate(45deg); flex-shrink: 0; transition: transform 0.15s ease; } .faq-audience[open] > .faq-audience-summary::after { transform: rotate(-135deg); margin-top: 0.2rem; } .faq-audience-body { padding: 0 0.75rem 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .faq-section { border: 1px solid var(--hero-border); border-radius: 0.375rem; background: rgba(0, 0, 0, 0.22); } .faq-section > .faq-section-summary { list-style: none; padding: 0.625rem 0.875rem; cursor: pointer; font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.03em; color: var(--gray-300); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid transparent; } .faq-section > .faq-section-summary::-webkit-details-marker { display: none; } .faq-section > .faq-section-summary::after { content: ''; width: 0.4rem; height: 0.4rem; margin-top: 0; flex-shrink: 0; border-right: 2px solid var(--gray-600); border-bottom: 2px solid var(--gray-600); transform: rotate(45deg); transition: transform 0.15s ease, border-color 0.15s ease; } .faq-section[open] > .faq-section-summary { color: var(--gray-400); border-bottom-color: var(--hero-border); padding-bottom: 0.5rem; margin-bottom: 0.125rem; } .faq-section[open] > .faq-section-summary::after { transform: rotate(-135deg); border-right-color: var(--gray-500); border-bottom-color: var(--gray-500); } .faq-section-body { padding: 0 0.375rem 0.375rem 0.5rem; } .faq-qna { border-top: 1px solid var(--hero-border); background: transparent; } .faq-qna:first-child { border-top: 0; border-radius: 0.25rem 0.25rem 0 0; } .faq-qna:last-child { border-radius: 0 0 0.25rem 0.25rem; } .faq-qna > .faq-qna-summary { list-style: none; padding: 0.7rem 0.75rem 0.7rem 0.5rem; cursor: pointer; font-size: 0.95rem; font-weight: 600; color: var(--gray-100); line-height: 1.35; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .faq-qna > .faq-qna-summary::-webkit-details-marker { display: none; } .faq-qna > .faq-qna-summary::after { content: ''; width: 0.45rem; height: 0.45rem; margin-top: 0.4rem; flex-shrink: 0; border-right: 2px solid var(--gray-500); border-bottom: 2px solid var(--gray-500); transform: rotate(45deg); transition: transform 0.15s ease, border-color 0.15s ease; } .faq-qna[open] > .faq-qna-summary { color: var(--text-primary); } .faq-qna[open] > .faq-qna-summary::after { transform: rotate(-135deg); border-right-color: var(--primary-400); border-bottom-color: var(--primary-400); } .faq-qna-answer { padding: 0 0.75rem 0.9rem 0.5rem; color: var(--gray-400); font-size: 0.9375rem; line-height: 1.55; } .faq-qna-answer a { color: var(--primary-400); } /* Settings */ .settings-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; } @media (min-width: 768px) { .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .settings-card { display: block; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.75rem; padding: 1.25rem; text-decoration: none; } .settings-card h3 { color: var(--text-primary); margin-bottom: 0.35rem; font-size: 1rem; } .settings-card p { color: var(--gray-400); font-size: 0.875rem; } .settings-card:hover { border-color: var(--gray-600); } .settings-link-card { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--hero-border); border-radius: 0.75rem; padding: 1rem; text-decoration: none; color: inherit; background: var(--hero-card); } .settings-link-card:hover { background: var(--hero-border); } .settings-link-card h3 { color: var(--text-primary); font-size: 1rem; margin-bottom: 0.25rem; } .settings-link-card p { color: var(--gray-400); font-size: 0.875rem; } .settings-link-chevron { color: var(--gray-400); display: inline-flex; } .settings-link-chevron svg { width: 1.25rem; height: 1.25rem; } /* Email preferences page */ .email-preferences-list .email-pref-row { margin-bottom: 1.5rem; } .email-preferences-list .email-pref-row:last-of-type { margin-bottom: 0; } /* Account page - condensed notification grid (email + push columns) */ .notification-prefs-desc { margin-bottom: 0.75rem; } .notification-prefs { --notif-pref-cols: 2rem minmax(0, 1fr) 2.75rem 2.75rem; } .notification-prefs-colhead { display: grid; grid-template-columns: var(--notif-pref-cols); gap: 0.35rem 0.65rem; align-items: end; padding-bottom: 0.35rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--hero-border); } .notification-prefs-colhead-span:nth-child(1), .notification-prefs-colhead-span:nth-child(2) { min-height: 0; } .notification-prefs-col-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); text-align: center; } .notification-prefs-row { display: grid; grid-template-columns: var(--notif-pref-cols); gap: 0.35rem 0.65rem; align-items: center; padding: 0.35rem 0; } .notification-prefs-row + .notification-prefs-row { border-top: 1px solid rgba(148, 163, 184, 0.12); } .notification-prefs-row--master { border-top: none; padding-top: 0; } .notification-prefs-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary-400); } .notification-prefs-icon svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .notification-prefs-copy { min-width: 0; } .notification-prefs-copy--tight { font-size: 0.9375rem; color: var(--text-primary); cursor: pointer; line-height: 1.35; } .notification-prefs-title, .notification-prefs-title-sm { display: block; font-weight: 600; color: var(--text-primary); font-size: 0.9375rem; line-height: 1.3; cursor: pointer; } .notification-prefs-title-sm { cursor: default; } .notification-prefs-hint, .notification-prefs-micro { margin: 0.15rem 0 0; font-size: 0.75rem; color: var(--gray-400); line-height: 1.35; } .notification-prefs-copy--split .notification-prefs-micro { margin-top: 0.2rem; } .notification-prefs-sub { margin: 0.15rem 0 0.35rem; padding: 0.15rem 0 0.15rem 0.35rem; border-left: 2px solid rgba(124, 58, 237, 0.35); } .notification-prefs-sub .notification-prefs-row { border-top: none; padding: 0.28rem 0; } .notification-prefs-sub .notification-prefs-row + .notification-prefs-row { border-top: 1px solid rgba(148, 163, 184, 0.1); } .notification-prefs-td { display: flex; align-items: center; justify-content: center; } .notification-prefs-td--na { color: var(--gray-600); font-size: 0.85rem; user-select: none; } .notification-prefs-cb { width: 1.125rem; height: 1.125rem; cursor: pointer; accent-color: var(--primary-600); } .notification-prefs-divider { height: 1px; margin: 0.65rem 0 0.5rem; background: var(--hero-border); } .notification-prefs-devices { margin-top: 0.5rem; padding: 0.65rem 0 0; border-top: 1px dashed rgba(148, 163, 184, 0.2); } .notification-prefs-devices-line { margin: 0 0 0.35rem; font-size: 0.8125rem; color: var(--gray-400); } .notification-prefs-device-list { margin-bottom: 0.35rem; } .notification-prefs-device-actions { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; } .notification-prefs-feedback { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--gray-400); } @media (max-width: 480px) { .notification-prefs-colhead { display: none; } .notification-prefs { --notif-pref-cols: 1.75rem minmax(0, 1fr) 2.5rem 2.5rem; } } .email-pref-sublabel { margin-bottom: 0.75rem; } .email-pref-granular .email-pref-help { margin-left: 1.5rem; display: block; } .email-pref-granular .email-pref-option.mt-4 { margin-top: 1rem; } .pref-channel-card { border: 1px solid var(--hero-border); border-radius: 0.75rem; background: transparent; padding: 1rem; } .pref-channel-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; } .pref-channel-icon { display: inline-flex; flex-shrink: 0; color: var(--primary-400); } .pref-channel-icon svg { width: 1.25rem; height: 1.25rem; } .pref-channel-title { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; color: var(--text-primary); } .pref-channel-head .pref-channel-title { margin: 0; } .pref-channel-desc { margin: 0 0 1rem; color: var(--gray-400); font-size: 0.875rem; } .pref-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; } .pref-switch-copy { min-width: 0; flex: 1; } .pref-ios-switch { position: relative; display: inline-flex; flex-shrink: 0; } .pref-ios-switch-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pref-ios-switch-track { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px; border: 1px solid var(--hero-border); background: rgba(148, 163, 184, 0.22); transition: background-color 0.2s ease, border-color 0.2s ease; } .pref-ios-switch-track::after { content: ''; position: absolute; top: 1px; left: 1px; width: calc(1.5rem - 4px); height: calc(1.5rem - 4px); border-radius: 999px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.35); transition: transform 0.2s ease; } .pref-ios-switch-input:checked + .pref-ios-switch-track { background: var(--primary-600); border-color: var(--primary-500); } .pref-ios-switch-input:checked + .pref-ios-switch-track::after { transform: translateX(1.08rem); } .pref-ios-switch-input:focus-visible + .pref-ios-switch-track { outline: none; box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.35); } .pref-ios-switch-input:disabled + .pref-ios-switch-track { opacity: 0.55; cursor: not-allowed; } .account-notif-channels { display: flex; flex-direction: column; gap: 1rem; } .account-notif-granular { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hero-border); } .account-notif-device-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(148, 163, 184, 0.25); } .account-notif-device-list { margin: 0.35rem 0 0.5rem; } .account-notif-device-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pref-channel-only-badge { display: inline-block; margin-top: 0.2rem; padding: 0.1rem 0.45rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-400); border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 0.25rem; } .pref-switch-row--unavailable { opacity: 0.85; cursor: default; } /* Search page - filters bar */ .search-filters-bar { background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hero-border); z-index: 40; } .search-filters-inner { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; } @media (max-width: 1023px) { .search-filters-inner { padding-left: max(var(--page-inline-sm), env(safe-area-inset-left, 0px)); padding-right: max(var(--page-inline-sm), env(safe-area-inset-right, 0px)); padding-top: 0.75rem; padding-bottom: 0.75rem; } } .search-input-wrap { flex: 1; position: relative; } .search-input-wrap input { width: 100%; padding: 0.5rem 1rem 0.5rem 2.5rem; font-size: 1rem; background: var(--hero-border); border: 1px solid var(--hero-border); border-radius: 0.5rem; color: var(--text-primary); } .search-input-wrap input:focus { outline: none; border-color: var(--primary-500); } .search-input-wrap input::placeholder { color: var(--gray-500); } .search-input-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--gray-400); } .search-input-icon svg { width: 1.25rem; height: 1.25rem; } .search-view-toggle { display: flex; background: var(--hero-border); border-radius: 0.5rem; padding: 0.25rem; } .search-view-btn { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; background: none; border: none; color: var(--gray-400); cursor: pointer; border-radius: 0.375rem; } .search-view-btn:hover { color: var(--text-primary); } .search-view-btn.active { background: var(--primary-600); color: var(--text-on-primary); } .search-view-btn svg { width: 1rem; height: 1rem; } .search-filters-btn { padding: 0.75rem; background: var(--hero-border); border: none; border-radius: 0.5rem; color: var(--gray-400); cursor: pointer; } .search-filters-btn:hover { color: var(--text-primary); background: var(--gray-700); } .search-filters-btn svg { width: 1.25rem; height: 1.25rem; } .search-filters-btn-inner { position: relative; display: inline-flex; align-items: center; justify-content: center; } .search-filters-active-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-400); border: 2px solid var(--hero-border); box-sizing: content-box; } .search-filters-btn.has-active-filters { color: var(--primary-300); } .search-filters-panel { max-height: 0; overflow: hidden; transition: max-height 0.2s; } .search-filters-panel.open { max-height: 400px; } .search-filters-content { padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--hero-border); } @media (max-width: 1023px) { .search-filters-content { padding-left: max(var(--page-inline-sm), env(safe-area-inset-left, 0px)); padding-right: max(var(--page-inline-sm), env(safe-area-inset-right, 0px)); } } .search-filters-quick { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; padding-top: 0.25rem; } .search-filters-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1; min-width: 0; } .search-filters-quick .filter-clear-x { margin-left: auto; flex-shrink: 0; } .filter-chip { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; background: var(--hero-border); border: none; border-radius: 0.5rem; color: var(--gray-400); cursor: pointer; } .filter-chip.active { background: var(--primary-600); color: var(--text-on-primary); } @media (hover: hover) and (pointer: fine) { .filter-chip:hover:not(.active) { background: var(--primary-600); color: var(--text-on-primary); } } .filter-chip svg { width: 1rem; height: 1rem; } .search-min-rating-wrap { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .search-min-rating-label { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--gray-400); white-space: nowrap; } .search-min-rating-label svg { width: 1rem; height: 1rem; } .search-min-rating-select { min-width: 7.75rem; } .filter-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--gray-400); margin-bottom: 0.5rem; } .filter-types-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .filter-type { padding: 0.5rem 0.75rem; font-size: 0.875rem; background: var(--hero-border); border: none; border-radius: 0.5rem; color: var(--gray-400); cursor: pointer; } .filter-type.active, .filter-type:hover:not(.active) { background: var(--primary-600); color: var(--text-on-primary); } .filter-clear-x { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: var(--hero-border); color: var(--gray-400); cursor: pointer; } .filter-clear-x svg { width: 1rem; height: 1rem; } .filter-clear-x:hover { background: var(--gray-700); color: var(--text-primary); } .search-page { position: relative; } /* Search: no top main padding so list/map filter bar share the same vertical origin */ .main-content:has(.search-page) { padding-top: 0; } /* Map view: opaque top chrome (matches .header on other pages; avoids washed-out bar over full-viewport map) */ .main-content:has(.search-page.search-page--map) { max-width: none; } @media (min-width: 1024px) { .main-content:has(.search-page.search-page--map) { padding-left: 0; padding-right: 0; } } /* List + map share the same fixed search/filter chrome (map overlays full-viewport map) */ .search-page .search-filters-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 40; background: var(--hero-card); backdrop-filter: none; padding-top: env(safe-area-inset-top, 0px); } @media (max-width: 1023px) { .search-page .search-filters-bar { top: var(--mobile-header-offset); padding-top: 0; } /* Lock bar height so Leaflet zoom offset matches rendered chrome (avoids + overlap) */ .search-page .search-filters-inner { height: var(--search-filters-bar-height); box-sizing: border-box; } } /* Desktop: same content column for list + map; inner row matches .sidebar-logo (4rem) */ @media (min-width: 1024px) { :root { /* Match .sidebar-logo (4rem) so map zoom controls align with the rendered bar */ --search-filters-bar-height: 4rem; } .search-page .search-filters-bar { left: calc( var(--sidebar-width-desktop) + max(0px, (100vw - var(--sidebar-width-desktop) - 56rem) / 2) ); right: auto; width: min(56rem, calc(100vw - var(--sidebar-width-desktop))); padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .search-page .search-filters-inner { width: 100%; max-width: none; margin-left: 0; margin-right: 0; height: var(--search-filters-bar-height); padding: 0.5rem 1rem; box-sizing: border-box; } } /* List view: reserve filter bar height; scroll results in the pane below (matches map overlay chrome) */ @media (max-width: 1023px) { .main-content:has(.search-page:not(.search-page--map)) { padding-bottom: 0; overflow: hidden; height: calc(100dvh - var(--mobile-header-offset)); } html.thesms-connectivity-active .main-content:has(.search-page:not(.search-page--map)) { height: calc(100dvh - var(--mobile-header-offset) - var(--thesms-connectivity-offset)); } .search-page:not(.search-page--map) { display: flex; flex-direction: column; height: 100%; padding-top: var(--search-filters-bar-height); box-sizing: border-box; } .search-page:not(.search-page--map) .search-list-view { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom)); } } @media (min-width: 1024px) { .main-content:has(.search-page:not(.search-page--map)) { padding-bottom: 1rem; overflow: hidden; height: 100dvh; box-sizing: border-box; } .search-page:not(.search-page--map) { display: flex; flex-direction: column; height: 100%; padding-top: var(--search-filters-bar-height); box-sizing: border-box; } .search-page:not(.search-page--map) .search-list-view { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } } .search-list-view { padding: 1rem 0; } .search-empty-state { text-align: center; padding: 2rem 1rem; max-width: 24rem; margin: 0 auto; } /* Home / favourites full-page empty states (shared with search list empties) */ .feed-page-empty-state { padding: 2.5rem 1rem 3rem; } .feed-page-empty-state .btn-primary { margin-top: 0.25rem; } .favorites-page > .feed-page-empty-state { min-height: min(55vh, 24rem); display: flex; flex-direction: column; align-items: center; justify-content: center; } .search-empty-state-title { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; color: var(--gray-200); } .search-empty-state-hint { margin: 0 0 1rem; font-size: 0.875rem; color: var(--gray-500); line-height: 1.45; } .search-empty-clear-filters { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--text-on-primary); background: var(--primary-600); border: none; border-radius: 0.375rem; cursor: pointer; } .search-empty-clear-filters:hover { background: var(--primary-500); } .search-list-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .search-sort-label { font-size: 0.875rem; color: var(--gray-400); } .search-sort-select { padding: 0.375rem 0.75rem; font-size: 0.875rem; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.5rem; color: var(--gray-200); cursor: pointer; } .search-sort-select:focus { outline: none; border-color: var(--primary-500); } .search-map-view { position: fixed; inset: 0; z-index: 0; margin-top: 0; height: calc(100vh - 0px); min-height: 300px; } /* iPad / tablet touch: clip bottom-right so pins are not under rounded display corners (no layout gap) */ @media (min-width: 768px) and (pointer: coarse) { .search-page.search-page--map .search-map-container { clip-path: inset(0 1.25rem 1.25rem 0); } } /* Full-viewport map sits under OS chrome; Leaflet defaults to light grey (#ddd) so paint dark behind safe area + filters bar. */ .search-page.search-page--map::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top, 0px) + var(--search-filters-bar-height)); background: var(--hero-card); z-index: 35; pointer-events: none; } @media (max-width: 1023px) { .search-page.search-page--map::before { top: var(--mobile-header-offset); height: var(--search-filters-bar-height); } } @media (min-width: 1024px) { .search-page.search-page--map::before { left: calc( var(--sidebar-width-desktop) + max(0px, (100vw - var(--sidebar-width-desktop) - 56rem) / 2) ); right: auto; width: min(56rem, calc(100vw - var(--sidebar-width-desktop))); } } .search-map-view::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--hero-bg); z-index: 650; pointer-events: none; } @media (min-width: 1024px) { .search-map-view::before { left: var(--sidebar-width-desktop); } } .search-filters-bar { z-index: 40; } .search-map-container { width: 100%; height: 100%; border-radius: 0; overflow: hidden; } .search-map-container .leaflet-container { background: var(--hero-bg) !important; } /* Map: no matches hint (filters) */ .search-map-filter-hint { position: absolute; left: 50%; transform: translateX(-50%); z-index: 30; max-width: min(22rem, calc(100vw - 2rem)); margin-top: 0.5rem; top: calc(var(--mobile-header-offset) + var(--search-filters-bar-height)); padding: 0.75rem 1rem; background: rgba(17, 17, 17, 0.92); border: 1px solid var(--hero-border); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); text-align: center; } @media (min-width: 1024px) { .search-map-filter-hint { top: var(--search-filters-bar-height); } } .search-map-filter-hint-text { margin: 0 0 0.625rem; font-size: 0.875rem; color: var(--gray-300); line-height: 1.4; } .search-map-filter-hint-clear { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--text-on-primary); background: var(--primary-600); border: none; border-radius: 0.375rem; cursor: pointer; } .search-map-filter-hint-clear:hover { background: var(--primary-500); } .map-popup { min-width: 200px; } .map-popup a { color: var(--primary-400); text-decoration: none; } .map-popup-content { min-width: 280px; background: var(--gray-800); color: var(--text-primary); padding: 1rem; } .map-popup-name { font-weight: 600; font-size: 1.125rem; margin-bottom: 0.5rem; } .map-popup-addr, .map-popup-city, .map-popup-dist, .map-popup-status { font-size: 0.875rem; color: #d1d5db; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.25rem; } .map-popup-icon { display: inline-flex; width: 1rem; height: 1rem; } .map-popup-icon svg { width: 1rem; height: 1rem; } .map-popup-icon-primary { color: var(--primary-400); } .map-popup-icon-primary .map-popup-icon svg { color: var(--primary-400); } .text-green-400 { color: #4ade80; } .text-red-400 { color: #f87171; } .text-primary-400 { color: var(--primary-400); } .hover\:underline { text-decoration: none; } .hover\:underline:hover { text-decoration: underline; } .map-popup-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .map-popup-actions-three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; } .map-popup-btn { flex: 1; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.5rem 0.5rem; font-size: 0.75rem; background: var(--hero-border); color: var(--text-primary); border: none; border-radius: 0.375rem; cursor: pointer; text-decoration: none; } .map-popup-btn:hover { background: var(--gray-700); } .map-popup-btn svg { width: 1.25rem; height: 1.25rem; } .map-popup-btn-primary { background: var(--primary-600); color: var(--text-on-primary); } .map-popup-btn-primary:hover { background: var(--primary-500); } .map-popup-btn svg { width: 1rem; height: 1rem; } .map-popup-btn-primary svg { width: 1.25rem; height: 1.25rem; } .search-map-container .leaflet-top .leaflet-control { margin-top: 0 !important; } .search-map-container .leaflet-top.leaflet-left { top: calc(var(--mobile-header-offset) + var(--search-filters-bar-height) + var(--search-map-controls-gap)) !important; } @media (min-width: 1024px) { .search-map-container .leaflet-top.leaflet-left { /* Map is viewport-fixed; shift zoom past the desktop sidebar rail */ left: var(--sidebar-width-desktop) !important; top: calc(var(--search-filters-bar-height) + var(--search-map-controls-gap)) !important; } } html.thesms-connectivity-active .search-map-container .leaflet-top.leaflet-left { top: calc(var(--mobile-header-offset) + var(--thesms-connectivity-offset) + var(--search-filters-bar-height) + var(--search-map-controls-gap)) !important; } @media (min-width: 1024px) { html.thesms-connectivity-active .search-map-container .leaflet-top.leaflet-left { top: calc(var(--thesms-connectivity-offset) + var(--search-filters-bar-height) + var(--search-map-controls-gap)) !important; } } .search-map-container .leaflet-control-zoom.leaflet-bar { display: flex; flex-direction: column; gap: 0.5rem; border: none !important; background: transparent !important; box-shadow: none !important; } .search-map-container .leaflet-control-zoom a { background-color: #7c3aed !important; color: #fff !important; border: 1px solid #6d28d9 !important; border-bottom: 1px solid #6d28d9 !important; border-radius: 0.25rem !important; margin: 0 !important; width: 30px !important; height: 30px !important; min-height: 30px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-size: 1.125rem !important; flex-shrink: 0 !important; } .search-map-container .leaflet-control-zoom a:hover { background-color: #8b5cf6 !important; color: #fff !important; } .search-map-container .leaflet-control-zoom a.leaflet-disabled { background-color: #4c1d95 !important; color: rgba(255, 255, 255, 0.45) !important; } /* Map popup - professional design (aligns with site icons and shop cards) */ /* Leaflet sets .leaflet-container a { color: #0078A8 } - override to site purple / card title colors */ .search-map-container .leaflet-popup-content a { color: var(--primary-400); text-decoration: none; } .search-map-container .leaflet-popup-content a:hover { color: var(--primary-300); } .search-map-container .leaflet-popup-content a.shop-card-rating-score-link { color: var(--text-primary); } .search-map-container .leaflet-popup-content a.shop-card-rating-score-link:hover, .search-map-container .leaflet-popup-content a.shop-card-rating-score-link:focus-visible { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--primary-400); text-underline-offset: 2px; } .search-map-container .leaflet-popup-content a.shop-card-title { color: var(--text-primary); } .search-map-container .leaflet-popup-content a.shop-card-title:hover { color: var(--primary-400); } .map-popup-pro { min-width: 260px; max-width: 292px; /* Symmetric horizontal layout; close-button gutter only on title column (see .map-popup-pro-main) */ } .map-popup-pro-top { display: flex; align-items: flex-start; gap: 0.75rem; } .map-popup-pro-avatar-wrap { position: relative; flex-shrink: 0; width: 44px; height: 44px; } .map-popup-pro-avatar-wrap .shop-card-closed--on-photo { top: 0; left: 50%; transform: translate(-50%, -50%); font-size: 0.5625rem; padding: 0.1rem 0.3rem; z-index: 3; line-height: 1.2; white-space: nowrap; } .map-popup-pro-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 9999px; object-fit: cover; border: 1px solid var(--hero-border); display: block; } .map-popup-pro-avatar-wrap .map-popup-pro-avatar, .map-popup-pro-avatar-wrap .map-popup-pro-avatar-placeholder { width: 44px; height: 44px; box-sizing: border-box; } .map-popup-pro-avatar-placeholder { display: flex; align-items: center; justify-content: center; background: var(--gray-800); color: var(--gray-500); border-radius: 9999px; border: 1px solid var(--hero-border); } .map-popup-pro-avatar-ph-icon { width: 1.5rem; height: 1.5rem; } .map-popup-pro-main { flex: 1; min-width: 0; /* Leaflet close sits over wrapper top-right; reserve space only here so details + actions stay even */ padding-right: 2.75rem; box-sizing: border-box; } /* Badge, address, hours: full popup width - aligns with avatar left edge, not title column */ .map-popup-pro-details { width: 100%; margin-top: 0.25rem; display: flex; flex-direction: column; align-items: flex-start; } .map-popup-pro-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0; } .map-popup-pro-header--with-badge { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.35rem; width: 100%; } .map-popup-pro-header--with-badge .map-popup-pro-title { width: 100%; } .map-popup-pro-title { flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.25; } .map-popup-pro-title .shop-card-title { font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .map-popup-pro-title-link { /* kept for analytics.js map_shop_title */ text-decoration: none; } .map-popup-pro-header--with-badge .shop-card-badge--inline-title { margin: 0 !important; } .map-popup-pro-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; } .map-popup-pro-badges .shop-card-rating--inline-badge { font-size: 0.8125rem; } .map-popup-pro .shop-card-location-trigger.map-popup-pro-addr { display: grid; grid-template-columns: 1rem 1fr; gap: 0.375rem; align-items: start; justify-items: start; font-size: 0.8125rem; color: #9ca3af; margin: 0.25rem 0 0; padding: 0; line-height: 1.4; width: 100%; text-align: left; box-sizing: border-box; } .map-popup-pro .shop-card-location-trigger.map-popup-pro-addr .shop-card-location-icon { width: 1rem; display: inline-flex; align-items: flex-start; justify-content: center; flex-shrink: 0; } .map-popup-pro .shop-card-location-trigger.map-popup-pro-addr .shop-card-address { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; } .map-popup-pro-dist-away { margin: 0.35rem 0 0; padding: 0; font-size: 0.75rem; line-height: 1.35; color: var(--primary-400); font-weight: 500; } .text-emerald-400 { color: #34d399; } .text-rose-400 { color: #fb7185; } .map-popup-pro .shop-card-actions.map-popup-pro-actions { margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px solid var(--hero-border); width: 100%; box-sizing: border-box; } /* Map popup: light icons on action row (readability on grey-on-grey card) */ .map-popup-pro .shop-card-actions.map-popup-pro-actions a, .map-popup-pro .shop-card-actions.map-popup-pro-actions button { color: #f9fafb; } .map-popup-pro .shop-card-actions.map-popup-pro-actions a:hover, .map-popup-pro .shop-card-actions.map-popup-pro-actions button:hover { color: #fff; } .map-popup-pro .shop-card-actions.map-popup-pro-actions .shop-card-fav.favorited { color: var(--shop-fav-on); } .map-popup-pro .shop-card-actions.map-popup-pro-actions button.shop-card-fav.favorited:hover { color: #fff !important; } /* Leaflet popup link colour override - keep action row icons light */ .search-map-container .leaflet-popup-content .map-popup-pro .shop-card-actions a { color: #f9fafb; } .search-map-container .leaflet-popup-content .map-popup-pro .shop-card-actions a:hover { color: #fff; } /* Locate me - bottom-right; fixed on mobile so it stacks above .bottom-nav (z-index 50) */ .map-locate-control.leaflet-control { margin: 0 12px 4px 0 !important; border: none !important; box-shadow: none !important; background: none !important; min-width: 44px; min-height: 44px; } @media (max-width: 1023px) { .search-map-container .map-locate-control.leaflet-control { position: fixed !important; right: max(0.75rem, env(safe-area-inset-right, 0px)) !important; bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 0.75rem) !important; left: auto !important; top: auto !important; margin: 0 !important; z-index: 55; } } /* Tablet touch (e.g. iPad portrait): align locate with map corner clip */ @media (max-width: 1023px) and (min-width: 768px) and (pointer: coarse) { .search-map-container .map-locate-control.leaflet-control { right: max(1.25rem, env(safe-area-inset-right, 0px)) !important; bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 1.25rem) !important; } } /* Tablet touch landscape (sidebar layout, no bottom nav) */ @media (min-width: 1024px) and (pointer: coarse) { .search-map-container .map-locate-control.leaflet-control { position: fixed !important; right: max(1.25rem, env(safe-area-inset-right, 0px)) !important; bottom: max(1.25rem, var(--safe-area-bottom)) !important; left: auto !important; top: auto !important; margin: 0 !important; z-index: 55; } } .map-locate-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent !important; color: var(--text-primary) !important; border: none !important; border-radius: 0; cursor: pointer; box-sizing: border-box; text-decoration: none; transition: color 0.15s, opacity 0.15s; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); box-shadow: none !important; transform: none; line-height: 1; } .map-locate-btn:hover { background: transparent !important; color: var(--primary-400) !important; } @media (hover: hover) { .map-locate-btn:active { opacity: 0.85; } } .map-locate-btn.is-active { color: var(--primary-400) !important; } .map-locate-btn-crosshair { display: flex; align-items: center; justify-content: center; } .map-locate-btn-crosshair svg { width: 26px; height: 26px; flex-shrink: 0; } .map-locate-btn.locating { pointer-events: none; opacity: 0.7; } .map-locate-btn.locating .map-locate-btn-crosshair { display: none; } @keyframes map-locate-circle-dot { 0%, 100% { background: var(--primary-400); border-color: rgba(255, 255, 255, 0.85); } 50% { background: var(--primary-300); border-color: rgba(255, 255, 255, 0.92); } } @keyframes map-locate-circle-halo { 0%, 100% { transform: scale(1); opacity: 0.08; background: var(--primary-400); } 50% { transform: scale(1.18); opacity: 0.12; background: var(--primary-400); } } .map-locate-btn.locating::after { content: ''; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--text-primary); border-radius: 50%; animation: map-locate-spin 0.8s linear infinite; } @keyframes map-locate-spin { to { transform: rotate(360deg); } } /* Override Leaflet .leaflet-bar anchor sizing if class is ever re-added */ .search-map-container .map-locate-control.leaflet-bar a.map-locate-btn { width: 44px !important; height: 44px !important; line-height: 1 !important; } .search-map-container .map-locate-control a.map-locate-btn { width: 44px !important; height: 44px !important; } /* Your location on map - pulsing circle when location is shown */ .leaflet-div-icon.map-user-location-marker { background: transparent; border: none; } .map-user-location-pin { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; pointer-events: none; } .map-user-location-halo { position: absolute; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-400); opacity: 0.08; animation: map-user-location-pulse 2.4s ease-out infinite; } .map-user-location-dot { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-400); border: 2px solid rgba(255, 255, 255, 0.88); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); } @keyframes map-user-location-pulse { 0%, 100% { transform: scale(1); opacity: 0.08; } 50% { transform: scale(1.18); opacity: 0.12; } } @media (max-width: 1023px) { .map-user-location-halo { animation: map-locate-circle-halo 2.4s ease-out infinite; } .map-user-location-dot { animation: map-locate-circle-dot 2.4s ease-in-out infinite; } } .leaflet-popup-content-wrapper { background: var(--hero-card) !important; border: 1px solid var(--hero-border) !important; border-radius: 0.75rem !important; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45) !important; } .leaflet-popup-content { margin: 1rem !important; min-width: 0 !important; width: min(20rem, calc(100vw - 5rem)); } .leaflet-popup-tip { background: var(--hero-card) !important; box-shadow: none !important; } .leaflet-container .leaflet-popup { margin-bottom: 0.75rem; } /* Match .modal-close: size, corner radius, placement (search map popups) */ .leaflet-container .leaflet-popup-close-button { width: 2.25rem !important; height: 2.25rem !important; padding: 0 !important; /* Match .leaflet-popup-content margin so X lines up with inner chrome + fav button */ top: 1rem !important; right: 1rem !important; font-size: 1.5rem !important; line-height: 1 !important; font-weight: 300 !important; color: var(--gray-400) !important; background: transparent !important; border: none !important; border-radius: 0.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; transition: color 0.2s, background 0.2s !important; } .leaflet-container .leaflet-popup-close-button:hover { color: var(--text-primary) !important; background: var(--hero-border) !important; } /* Search map - overrides must follow generic .leaflet-container rules above (same specificity) */ .search-map-container .leaflet-container .leaflet-popup-content { margin: 0.75rem !important; padding: 0 !important; box-sizing: border-box !important; } .search-map-container .leaflet-container .leaflet-popup-content:has(.map-popup-pro) { width: min(17.5rem, calc(100vw - 4.5rem)) !important; } .search-map-container .leaflet-container .leaflet-popup-close-button { top: 0.2rem !important; right: 0.2rem !important; } /* Shop / map-popup-pro: close X tucked toward wrapper top-right */ .search-map-container .leaflet-container .leaflet-popup:has(.map-popup-pro) .leaflet-popup-close-button { top: 0.2rem !important; right: 0.2rem !important; } /* Compact “Your Location” popup - tighter padding, smaller close */ .search-map-container .leaflet-container .leaflet-popup-content:has(.map-popup-user-location) { margin: 0.35rem 0.45rem !important; width: auto !important; min-width: 0 !important; } .search-map-container .leaflet-container .leaflet-popup:has(.map-popup-user-location) .leaflet-popup-close-button { top: 0.2rem !important; right: 0.2rem !important; width: 1.625rem !important; height: 1.625rem !important; font-size: 1.125rem !important; line-height: 1 !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .map-popup-user-location { margin: 0; padding: 0.1rem 1.5rem 0.1rem 0; line-height: 1.3; } .map-popup-user-location-label { font-size: 0.875rem; font-weight: 600; color: var(--primary-400); } /* Search form */ .search-form { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .search-form input { flex: 1; padding: 0.5rem 1rem; font-size: 1rem; background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 0.5rem; color: var(--text-primary); } .search-form input::placeholder { color: var(--gray-500); } .search-form input:focus { outline: none; border-color: var(--primary-500); } /* Search results - legacy shop-card (used by JS-rendered results) */ .shop-grid { display: flex; flex-direction: column; gap: 1rem; } .shop-grid .shop-card { display: block; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.5rem; overflow: hidden; text-decoration: none; color: inherit; max-width: 24rem; margin: 0 auto; width: 100%; } .shop-grid .shop-thumb { height: 13rem; background: var(--gray-800) center/cover; } .shop-grid .shop-thumb-placeholder { background: linear-gradient(135deg, var(--gray-700), var(--gray-800)); } .shop-grid .shop-info { padding: 1rem; } .shop-grid .shop-info h3 { margin: 0; font-size: 1.125rem; font-weight: 600; } .shop-grid .shop-info .rating { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--gray-400); } /* Modals - match Next.js Modal component */ body.modal-open { overflow: hidden; position: fixed; width: 100%; height: 100%; } .thesms-modal-root { --modal-safe-top: env(safe-area-inset-top, 0px); --modal-safe-right: env(safe-area-inset-right, 0px); --modal-safe-bottom: env(safe-area-inset-bottom, 0px); --modal-safe-left: env(safe-area-inset-left, 0px); display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: max(1rem, var(--modal-safe-top)) max(1rem, var(--modal-safe-right)) max(1rem, var(--modal-safe-bottom)) max(1rem, var(--modal-safe-left)); background: rgba(0,0,0,0.8); } .thesms-modal-root.open { display: flex; } .thesms-modal-backdrop { position: absolute; inset: 0; z-index: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); cursor: pointer; } .thesms-modal-wrap { position: relative; z-index: 1; isolation: isolate; width: 100%; max-width: 28rem; max-height: calc(100dvh - max(1rem, var(--modal-safe-top)) - max(1rem, var(--modal-safe-bottom))); overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; } .thesms-modal-root.staff-viewer-open { /* Largest inline photo area that still leaves room for header + scrollable meta/reviews */ --staff-modal-photo-max-h: min(72dvh, calc(100dvh - 11rem)); } .thesms-modal-root.staff-viewer-open .thesms-modal-wrap { max-width: min(92vw, 720px); max-height: 92vh; overflow: hidden; } .thesms-modal-body { background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.75rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); width: 100%; overflow: hidden; } .thesms-modal-root.staff-viewer-open .thesms-modal-body { display: flex; flex-direction: column; max-height: 92vh; min-height: 0; } @media (max-width: 640px) { .thesms-modal-root.staff-viewer-open { padding: var(--modal-safe-top) 0 var(--modal-safe-bottom); align-items: stretch; } .thesms-modal-root.staff-viewer-open .thesms-modal-wrap { max-width: 100%; max-height: 100%; height: 100%; overflow: hidden; } .thesms-modal-root.staff-viewer-open .thesms-modal-body { border-radius: 0; border: none; max-height: 100%; height: 100%; } } /* Fullscreen photo lightbox (shop gallery + staff expand/focus) */ .thesms-modal-root.shop-photo-viewer-open, .thesms-modal-root.staff-photo-focus-open { padding: 0; align-items: stretch; justify-content: center; } .thesms-modal-root.shop-photo-viewer-open .thesms-modal-wrap, .thesms-modal-root.staff-photo-focus-open .thesms-modal-wrap { max-width: 100%; width: 100%; max-height: 100%; height: 100%; overflow: hidden; } .thesms-modal-root.shop-photo-viewer-open .thesms-modal-body, .thesms-modal-root.staff-photo-focus-open .thesms-modal-body { display: flex; flex-direction: column; min-height: 0; max-height: 100%; height: 100%; max-width: 100% !important; width: 100%; background: #0a0a0a; border: none; border-radius: 0; box-shadow: none; } .shop-photo-fullscreen { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; } .thesms-modal-root.shop-photo-viewer-open .shop-photo-fullscreen-close { position: fixed; top: max(0.5rem, calc(env(safe-area-inset-top, 0px) + 0.35rem)); right: max(0.5rem, calc(env(safe-area-inset-right, 0px) + 0.35rem)); z-index: 10001; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; } .thesms-modal-root.shop-photo-viewer-open .shop-photo-fullscreen-close:hover { background: rgba(0, 0, 0, 0.75); color: #fff; } .shop-photo-fullscreen-content.modal-content.staff-modal-content, .thesms-modal-root.staff-photo-focus-open .staff-modal-content { flex: 1 1 auto; min-height: 0; overflow: hidden; gap: 0; padding: 0; padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)); } .thesms-modal-root.shop-photo-viewer-open .shop-photo-fullscreen-stage.staff-modal-photo-large, .thesms-modal-root.shop-photo-viewer-open .staff-gallery-host.staff-modal-photo-large, .thesms-modal-root.staff-photo-focus-open .staff-modal-photo-large, .thesms-modal-root.staff-photo-focus-open .staff-gallery-host.staff-modal-photo-large { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; min-height: 12rem; margin-bottom: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; } .thesms-modal-root.shop-photo-viewer-open .staff-gallery-host.staff-modal-photo-large, .thesms-modal-root.staff-photo-focus-open .staff-gallery-host.staff-modal-photo-large { flex-direction: column; gap: 0; } .thesms-modal-root.shop-photo-viewer-open .staff-gallery-media, .thesms-modal-root.staff-photo-focus-open .staff-gallery-media { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .thesms-modal-root.shop-photo-viewer-open .staff-gallery-host .staff-gallery-viewport, .thesms-modal-root.staff-photo-focus-open .staff-gallery-viewport { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; align-items: center; } .thesms-modal-root.shop-photo-viewer-open .staff-gallery-track, .thesms-modal-root.staff-photo-focus-open .staff-gallery-track { height: 100%; align-items: stretch; } .thesms-modal-root.shop-photo-viewer-open .staff-gallery-slide, .thesms-modal-root.staff-photo-focus-open .staff-gallery-slide { height: 100%; align-items: stretch; } .thesms-modal-root.shop-photo-viewer-open .staff-gallery-slide-frame, .thesms-modal-root.staff-photo-focus-open .staff-gallery-slide-frame { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .thesms-modal-root.shop-photo-viewer-open .staff-gallery-slide-frame, .thesms-modal-root.staff-photo-focus-open .staff-gallery-slide-frame { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; } .thesms-modal-root.shop-photo-viewer-open .staff-gallery-slide-frame .staff-gallery-photo, .thesms-modal-root.staff-photo-focus-open .staff-gallery-slide-frame .staff-gallery-photo, .thesms-modal-root.shop-photo-viewer-open .staff-gallery-slide-frame img, .thesms-modal-root.staff-photo-focus-open .staff-gallery-slide-frame img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center center; } .thesms-modal-root.shop-photo-viewer-open .shop-photo-fullscreen-stage img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center center; } .thesms-modal-root.shop-photo-viewer-open .staff-modal-dots { flex-shrink: 0; margin-bottom: 0; padding-bottom: 0.25rem; } .modal-header { --modal-header-pad-x: 1.5rem; --modal-header-pad-y: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: var(--modal-header-pad-y) var(--modal-header-pad-x); border-bottom: 1px solid var(--hero-border); } /* Contact modal: pin close to top with avatar + title (same as other modals with single-line titles) */ .modal-header:has(.modal-contact-header) { align-items: flex-start; } .modal-header > :first-child { flex: 1; min-width: 0; } .modal-header h2, .modal-header .modal-contact-header h2 { font-size: 1.25rem; font-weight: 600; margin: 0; color: var(--text-primary); line-height: 1.3; } .modal-contact-header { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .modal-contact-header h2 { flex: 1; min-width: 0; } .modal-contact-avatar { width: 40px; height: 40px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .modal-contact-avatar--placeholder { display: inline-flex; align-items: center; justify-content: center; background: var(--hero-border); color: var(--gray-500); box-sizing: border-box; } .modal-contact-avatar--placeholder svg { flex-shrink: 0; } .modal-close { padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: none; border: none; color: var(--gray-400); cursor: pointer; border-radius: 0.5rem; transition: color 0.2s, background 0.2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } @media (hover: hover) and (pointer: fine) { .modal-close:hover { color: var(--text-primary); background: var(--hero-border); } } .modal-close svg { width: 1.25rem; height: 1.25rem; pointer-events: none; } .modal-close:active { color: var(--text-primary); background: var(--hero-border); } .staff-modal-header .modal-close:active { color: var(--text-primary); background: var(--hero-border); } .modal-content { --modal-inner-gap: 1.25rem; padding: 1.5rem; max-height: calc(90vh - 80px); overflow-y: auto; display: flex; flex-direction: column; gap: var(--modal-inner-gap); } .modal-content > * { margin-top: 0 !important; margin-bottom: 0 !important; } .modal-content > p, .modal-content .field > p, .modal-content .publish-already-scheduled > p { margin: 0; } .modal-content .form-section, .modal-content #publish-form-fields { display: flex; flex-direction: column; gap: var(--modal-inner-gap); } .modal-content .form-section > *, .modal-content #publish-form-fields > * { margin-top: 0 !important; margin-bottom: 0 !important; } .modal-content .field { display: flex; flex-direction: column; gap: var(--form-label-gap); } .modal-content .field[hidden] { display: none !important; } .modal-section { display: flex; flex-direction: column; gap: var(--form-field-gap); } .modal-section .modal-label { margin-bottom: 0; } .modal-loading { margin: 0; text-align: center; color: var(--gray-400); padding: 0.5rem 0; } .modal-empty-message { margin: 0; text-align: center; color: var(--gray-400); } .modal-message { margin: 0; color: var(--gray-300); } .modal-message--error { color: #fca5a5; } .modal-message--success { color: #86efac; } .modal-confirm-body { margin: 0; color: var(--gray-300); } .modal-confirm-actions { display: flex; gap: var(--form-actions-gap); flex-wrap: wrap; align-items: center; } /* JS modals (search, feed): same button weight/radius as shop cards & forms */ .thesms-modal-body .btn.btn-primary { font-weight: 600; } .thesms-modal-body .btn.btn-secondary { font-weight: 600; } .thesms-modal-body .btn.btn-danger { font-weight: 600; } .modal-label { display: block; font-size: 0.875rem; font-weight: 500; color: #d1d5db; margin-bottom: var(--form-label-gap); } .modal-content .modal-label { margin-bottom: 0; } .modal-input { width: 100%; padding: var(--form-control-padding-y) var(--form-control-padding-x); font-size: 1rem; font-family: inherit; background: var(--hero-border); border: 1px solid var(--hero-border); border-radius: 0.5rem; color: var(--text-primary); } .modal select.modal-input { cursor: pointer; } .modal-input:focus { outline: none; border-color: var(--primary-500); } .modal-input::placeholder { color: var(--gray-500); } .modal-textarea { width: 100%; padding: var(--form-control-padding-y) var(--form-control-padding-x); font-size: 1rem; font-family: inherit; background: var(--hero-border); border: 1px solid var(--hero-border); border-radius: 0.5rem; color: var(--text-primary); resize: vertical; min-height: 80px; } .modal-textarea:focus { outline: none; border-color: var(--primary-500); } .modal-textarea::placeholder { color: var(--gray-500); } .modal-divider { display: flex; align-items: center; margin: 0; } .modal-divider::before, .modal-divider::after { content: ''; flex: 1; height: 1px; background: var(--hero-border); } .modal-divider span { padding: 0 1rem; font-size: 0.875rem; color: var(--gray-400); } .modal-contact-methods { display: flex; flex-direction: column; gap: 0.5rem; } .modal-contact-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--hero-border); border-radius: 0.5rem; color: inherit; text-decoration: none; } .modal-contact-item:hover { background: var(--gray-700); } .modal-contact-item-static { cursor: default; } .modal-contact-item-static:hover { background: var(--hero-border); } .modal-contact-icon { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary-400); background: transparent; border: 0; box-shadow: none; } .modal-contact-icon svg { width: 1.65rem; height: 1.65rem; } .modal-contact-main { display: flex; flex-direction: column; min-width: 0; } .modal-contact-label { font-size: 0.875rem; color: var(--gray-400); } .modal-contact-value { font-weight: 500; word-break: break-word; } .modal-directions-icon { display: inline-flex; flex-shrink: 0; } .modal-directions-btn { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 0.5rem; margin-bottom: 0.75rem; text-decoration: none; font-weight: 500; transition: background 0.2s; } .modal-directions-google { background: rgba(59,130,246,0.2); border: 1px solid rgba(59,130,246,0.3); color: #60a5fa; } .modal-directions-google:hover { background: rgba(59,130,246,0.3); } .modal-directions-apple { background: rgba(107,114,128,0.2); border: 1px solid rgba(107,114,128,0.3); color: #d1d5db; } .modal-directions-apple:hover { background: rgba(107,114,128,0.3); } .roster-list { display: flex; flex-direction: column; gap: 0.5rem; } .roster-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: var(--hero-border); border-radius: 0.5rem; text-decoration: none; color: inherit; } .roster-item:hover { background: var(--gray-700); } .roster-item-clickable { cursor: pointer; outline: none; } .roster-item-clickable:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; } .roster-photo { width: 3rem; height: 3rem; border-radius: 9999px; background: var(--gray-700); overflow: hidden; flex-shrink: 0; } .roster-photo img { width: 100%; height: 100%; object-fit: cover; } .roster-info { flex: 1; min-width: 0; } .roster-name { font-weight: 500; min-width: 0; } .roster-time { font-size: 0.875rem; color: var(--gray-400); } .roster-info .staff-review-inline { margin-top: 0.25rem; } .staff-modal-photo { position: relative; width: 100%; max-height: var(--staff-modal-photo-max-h, min(72dvh, calc(100dvh - 11rem))); background: transparent; border-radius: 0.5rem; overflow: hidden; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; } .staff-modal-photo-large { /* Tall hero; meta + reviews scroll in .staff-modal-content */ flex-shrink: 0; min-height: var(--staff-modal-photo-max-h, min(72dvh, calc(100dvh - 11rem))); height: auto; max-height: var(--staff-modal-photo-max-h, min(72dvh, calc(100dvh - 11rem))); aspect-ratio: auto; } /* Main staff modal: hero height follows image (contain), not a fixed crop box */ .staff-modal-photo-large.staff-gallery-host { height: auto; min-height: 0; max-height: none; } .thesms-modal-root.staff-viewer-open:not(.staff-photo-focus-open) .staff-gallery-viewport, .thesms-modal-root.staff-viewer-open:not(.staff-photo-focus-open) .staff-gallery-slide-frame { min-height: 0; height: auto; } .thesms-modal-root.staff-viewer-open:not(.staff-photo-focus-open) .staff-gallery-slide-frame .staff-gallery-photo, .thesms-modal-root.staff-viewer-open:not(.staff-photo-focus-open) .staff-gallery-slide-frame img { width: auto; height: auto; max-width: 100%; max-height: var(--staff-modal-photo-max-h); object-fit: contain; object-position: center center; } .staff-modal-photo-large[data-swipe-nav-bound="1"] { cursor: grab; touch-action: pan-y; } .staff-modal-photo-large[data-swipe-nav-bound="1"]:active { cursor: grabbing; } /* Staff modal gallery carousel */ .staff-gallery-host { position: relative; display: flex; flex-direction: column; gap: 0.35rem; overflow: hidden; } .staff-gallery-media { position: relative; width: 100%; overflow: hidden; } .staff-gallery-viewport { width: 100%; min-height: var(--staff-modal-photo-max-h, min(72dvh, calc(100dvh - 11rem))); overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; container-type: inline-size; container-name: staff-gallery; } .thesms-modal-root.staff-photo-focus-open .staff-gallery-viewport { touch-action: pan-y; cursor: grab; } .staff-gallery-viewport:active { cursor: grabbing; } .staff-gallery-track { display: flex; flex-direction: row; align-items: stretch; will-change: transform; } .staff-gallery-slide { flex: 0 0 100cqw; width: 100cqw; max-width: 100cqw; box-sizing: border-box; display: flex; align-items: stretch; justify-content: center; min-height: 0; } .staff-gallery-slide-frame { width: 100%; height: 100%; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: var(--staff-modal-photo-max-h, min(72dvh, calc(100dvh - 11rem))); cursor: pointer; pointer-events: auto; } .thesms-modal-root.shop-photo-viewer-open .staff-gallery-slide-frame { cursor: default; } .staff-gallery-photo, .staff-gallery-slide-frame img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center center; user-select: none; -webkit-user-drag: none; } .staff-photo-focus-close { display: none; } .thesms-modal-root.staff-photo-focus-open.staff-viewer-open .modal-header, .thesms-modal-root.staff-photo-focus-open .staff-modal-meta, .thesms-modal-root.staff-photo-focus-open .staff-modal-bio, .thesms-modal-root.staff-photo-focus-open .staff-modal-reviews-block, .thesms-modal-root.staff-photo-focus-open .staff-modal-footer { display: none !important; } .thesms-modal-root.staff-photo-focus-open .staff-gallery-toolbar, .thesms-modal-root.shop-photo-viewer-open .staff-gallery-toolbar { flex-shrink: 0; padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px)); } .thesms-modal-root.staff-photo-focus-open .staff-photo-focus-close:not([hidden]) { position: fixed; top: max(0.5rem, calc(env(safe-area-inset-top, 0px) + 0.35rem)); right: max(0.5rem, calc(env(safe-area-inset-right, 0px) + 0.35rem)); z-index: 10001; display: inline-flex; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; touch-action: manipulation; -webkit-tap-highlight-color: transparent; pointer-events: auto; } @media (hover: hover) and (pointer: fine) { .thesms-modal-root.staff-photo-focus-open .staff-photo-focus-close:not([hidden]):hover { background: rgba(0, 0, 0, 0.75); color: #fff; } } .thesms-modal-root.staff-photo-focus-open .staff-photo-focus-close:not([hidden]):active { background: rgba(0, 0, 0, 0.75); color: #fff; } .thesms-modal-root.staff-photo-focus-open .staff-modal-dots { flex-shrink: 0; margin-bottom: 0; padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)); } .staff-modal-photo-nav { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 0.5rem; pointer-events: none; } .staff-modal-photo-nav-btn { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.45); background: rgba(0,0,0,0.45); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; } .staff-modal-photo-nav-btn:hover { background: rgba(0,0,0,0.65); } .staff-modal-photo-nav-btn svg { width: 1rem; height: 1rem; } .staff-modal-photo-nav-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .staff-modal-dots { display: flex; justify-content: center; gap: 0.25rem; padding: 0.5rem 0.25rem; margin-bottom: 0.5rem; flex-shrink: 0; } .staff-modal-dot { width: 6px; height: 6px; border-radius: 9999px; background: rgba(255, 255, 255, 0.5); border: none; cursor: pointer; padding: 0; } .staff-modal-dot:hover, .staff-modal-dot.active { background: white; } .staff-modal-photo:not(.staff-gallery-host) img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center center; } .staff-modal-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; flex-shrink: 0; position: relative; z-index: 2; container-type: inline-size; container-name: staff-modal-header; } .staff-modal-header-left { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; } .staff-modal-header-left h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .staff-modal-header-rating { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; flex-shrink: 0; margin-right: 0.5rem; } .staff-modal-header-rating .shop-card-rating-star, .staff-modal-header-rating .star { color: var(--primary-400); } .staff-modal-header-actions { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } @container staff-modal-header (max-width: 22rem) { .staff-modal-header-left { flex: 1 1 auto; max-width: 100%; } .staff-modal-header-actions { flex: 1 1 100%; justify-content: flex-start; } } .staff-modal-message-btn, .staff-modal-link-btn, .staff-modal-fav-btn { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 0.5rem; border: none; background: none; color: var(--gray-300); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s, background 0.2s; text-decoration: none; } .staff-modal-message-btn svg, .staff-modal-link-btn svg, .staff-modal-fav-btn svg { width: 1.25rem; height: 1.25rem; } .staff-modal-message-btn:hover, .staff-modal-link-btn:hover, .staff-modal-fav-btn:hover { color: var(--text-primary); background: var(--hero-border); } .staff-modal-fav-btn.favorited { color: var(--primary-400); } .staff-modal-link-btn:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; } .staff-modal-content { display: flex; flex-direction: column; gap: 0.75rem; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .staff-modal-head-nav { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .staff-modal-head-nav-arrow { width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; border: none; background: none; color: var(--gray-400); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; padding: 0; } .staff-modal-head-nav-arrow:hover { color: var(--text-primary); background: var(--hero-border); } .staff-modal-head-nav-arrow svg { width: 0.875rem; height: 0.875rem; } .staff-modal-footer { padding: 0.75rem 1.5rem; border-top: 1px solid var(--hero-border); flex-shrink: 0; } .staff-viewer-open .modal-content.staff-modal-content { max-height: none; padding-bottom: 1rem; scroll-padding-bottom: 1rem; } .staff-modal-actions { margin-top: 0.75rem; } .staff-modal-info-btn { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; font-size: 0.875rem; color: var(--primary-400); background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 0.375rem; text-decoration: none; transition: background 0.2s, color 0.2s; } .staff-modal-info-btn:hover { background: rgba(99, 102, 241, 0.25); color: var(--primary-300); } .staff-modal-meta { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; } .staff-modal-meta .label { display: block; font-size: 0.75rem; color: var(--gray-400); text-transform: uppercase; } .staff-modal-bio { font-size: 0.875rem; color: var(--gray-400); line-height: 1.5; margin-bottom: 1rem; } .staff-modal-reviews-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-700); text-align: left; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .staff-modal-reviews-block[hidden] { display: none !important; } .staff-modal-reviews-block--high { margin-top: 0; padding-top: 0; border-top: none; padding-bottom: 0.75rem; margin-bottom: 0; } .staff-modal-reviews-title { font-size: 0.875rem; font-weight: 600; color: var(--gray-300); margin-bottom: 0.5rem; flex-shrink: 0; } .staff-modal-reviews-list { display: flex; flex-direction: column; gap: var(--thesms-review-list-gap); } .staff-modal-review-item { font-size: 0.8125rem; padding: 0.75rem; background: rgba(255,255,255,0.04); border-radius: 0.5rem; } .staff-modal-review-summary { display: flex; flex-direction: column; gap: 0.35rem; } .staff-modal-review-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; font-size: 0.8125rem; } .staff-modal-review-item:not(.shop-review-item) .staff-modal-review-meta { flex-direction: column; align-items: flex-start; gap: 0.3rem; margin-bottom: 0.45rem; } .staff-modal-review-stars { color: var(--primary-400); letter-spacing: 0.02em; line-height: 1.2; } .staff-modal-review-author-line { font-weight: 600; color: var(--gray-200); line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; } .staff-modal-content a.shop-review-entity-row .shop-review-author-link, .staff-modal-content a.shop-review-entity-row .staff-modal-review-author-link, .staff-modal-content a.shop-review-entity-row .shop-review-staff-link, .staff-modal-content a.shop-review-entity-row .shop-review-reply-author-link, .staff-modal-content a.shop-review-entity-row .staff-modal-review-reply-author-link { color: var(--gray-200); } .staff-modal-content a.shop-review-entity-row:hover .shop-review-author-link, .staff-modal-content a.shop-review-entity-row:hover .staff-modal-review-author-link, .staff-modal-content a.shop-review-entity-row:hover .shop-review-staff-link, .staff-modal-content a.shop-review-entity-row:hover .shop-review-reply-author-link, .staff-modal-content a.shop-review-entity-row:hover .staff-modal-review-reply-author-link { color: var(--primary-400); text-decoration: underline; } .staff-modal-review-date-line { font-size: 0.75rem; color: var(--gray-500); line-height: 1.3; } .staff-modal-review-published { color: inherit; font: inherit; } .staff-modal-review-preview { margin: 0; color: var(--gray-300); line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; } .staff-modal-review-item.is-collapsed .staff-modal-review-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .staff-modal-review-summary-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .staff-modal-review-reply-count { color: var(--gray-400); font-size: 0.75rem; font-weight: 600; cursor: pointer; } .staff-modal-review-reply-count:hover { color: var(--primary-400); } .staff-modal-review-accordion-toggle { border: none; background: none; color: var(--primary-400); font-size: 0.75rem; font-weight: 600; padding: 0; cursor: pointer; } .staff-modal-review-accordion-toggle:hover { color: var(--primary-300); } .staff-modal-review-body { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* Expanded staff-modal replies */ .staff-modal-review-body .staff-modal-review-replies { margin-top: 0.75rem; } .staff-modal-review-body .staff-modal-review-reply-meta { margin-bottom: 0.5rem; } .staff-modal-review-body .staff-modal-review-reply-text { line-height: 1.55; } .staff-modal-review-text { color: var(--gray-300); margin: 0; line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; } .staff-modal-review-replies { margin-top: 0.6rem; padding-left: 0.75rem; margin-left: 0.15rem; border-left: 3px solid rgba(99, 102, 241, 0.4); display: flex; flex-direction: column; gap: var(--thesms-review-reply-gap); } .staff-modal-review-reply-item { margin: 0; padding: 0; border: none; } .staff-modal-review-reply-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-bottom: 0.25rem; font-size: 0.75rem; color: var(--gray-400); } .staff-modal-review-reply-role { font-weight: 600; color: var(--gray-300); flex-shrink: 0; } .staff-modal-review-reply-date { color: var(--gray-500); font-size: 0.72rem; margin-left: auto; } .staff-modal-review-reply-meta .staff-modal-review-reply-date { margin-left: auto; } @media (max-width: 380px) { .staff-modal-review-reply-meta .staff-modal-review-reply-date { margin-left: 0; width: 100%; } } .staff-modal-review-reply-text { margin: 0; color: var(--gray-300); font-size: 0.8rem; line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; } .modal-checkbox-row { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--gray-400); margin-top: 0.5rem; } .modal-checkbox-row input { margin-top: 0.2rem; } .staff-review-inline { margin-top: 0.25rem; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; line-height: 1; } .staff-review-score { color: var(--text-primary); font-weight: 600; } .staff-review-score-star { color: var(--primary-400); } .staff-review-sep { color: var(--gray-500); } .staff-review-link { appearance: none; border: 0; background: transparent; color: var(--primary-300); text-decoration: underline; text-underline-offset: 2px; font-size: 0.75rem; line-height: 1; padding: 0; cursor: pointer; } .staff-review-link:hover { color: var(--primary-200); } .staff-review-link:focus-visible { outline: 2px solid rgba(125, 211, 252, 0.55); outline-offset: 2px; border-radius: 0.15rem; } @media (orientation: landscape) { .thesms-modal-root.staff-viewer-open .thesms-modal-wrap { max-width: min(96vw, 1280px); } .thesms-modal-root.shop-photo-viewer-open .thesms-modal-wrap { max-width: 100%; width: 100%; } .thesms-modal-root.staff-viewer-open:not(.staff-photo-focus-open) { --staff-modal-photo-max-h: min(78dvh, calc(100dvh - 7rem)); } } /* Staff modal - tablet: wider shell, taller hero photo */ @media (min-width: 641px) and (max-width: 1023px) { .thesms-modal-root.staff-viewer-open { --staff-modal-photo-max-h: min(76dvh, calc(100dvh - 10rem)); } .thesms-modal-root.staff-viewer-open .thesms-modal-wrap { max-width: min(92vw, 720px); max-height: 94dvh; } .thesms-modal-root.staff-viewer-open .thesms-modal-body { max-height: 94dvh; } } @media (orientation: landscape) and (min-width: 641px) and (max-width: 1023px) { .thesms-modal-root.staff-viewer-open .thesms-modal-wrap { max-width: min(94vw, 900px); } .thesms-modal-root.staff-viewer-open:not(.staff-photo-focus-open) { --staff-modal-photo-max-h: min(82dvh, calc(100dvh - 6rem)); } } @media (max-width: 640px) { .thesms-modal-root.staff-viewer-open:not(.staff-photo-focus-open) { --staff-modal-photo-max-h: min(68dvh, calc(100dvh - 12rem)); } } /* Publish modal: stacked radio options */ .publish-when-options { display: flex; flex-direction: column; gap: 0.75rem; } .publish-when-options > label { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid var(--gray-600); cursor: pointer; transition: border-color 0.2s; } .publish-when-options > label:hover { border-color: var(--gray-500); } .publish-when-options > label:first-child { align-items: center; } .publish-when-options input[type="radio"], .publish-when-options input[type="checkbox"] { flex-shrink: 0; width: 1rem; height: 1rem; margin: 0; accent-color: var(--primary-500); } .publish-already-scheduled { display: flex; flex-direction: column; gap: 0.75rem; } .publish-scheduled-time-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Hide header/sidebar on certain pages */ body.no-nav .sidebar, body.no-nav .header, body.no-nav .bottom-nav { display: none !important; } body.no-nav .main-wrapper { margin-left: 0; } body.no-nav .main-content { padding-bottom: 1rem; } /* --- /dev/font-demos - typography preview only --- */ .font-demos { padding-bottom: 3rem; } .font-demos-intro { margin-bottom: 1.25rem; } .font-demos-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .font-demos-lead, .font-demos-url { font-size: 0.875rem; line-height: 1.55; color: var(--gray-400); max-width: 40rem; margin-bottom: 0.5rem; } .font-demos-code { font-size: 0.8125rem; background: var(--hero-card); border: 1px solid var(--hero-border); padding: 0.1rem 0.35rem; border-radius: 0.25rem; color: var(--gray-300); } .font-demos-toolbar { position: sticky; top: 0; z-index: 30; margin: 0 -1rem 1.25rem; padding: 0.75rem 1rem; background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hero-border); } @media (min-width: 1024px) { .font-demos-toolbar { margin-left: calc(-1 * var(--page-inline-sm, 1rem)); margin-right: calc(-1 * var(--page-inline-sm, 1rem)); } } .font-demos-fieldset { border: none; margin: 0; padding: 0; } .font-demos-legend { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-500); margin-bottom: 0.5rem; } .font-demos-radios { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; } .font-demos-radio-label { display: inline-flex; align-items: flex-start; gap: 0.4rem; padding: 0.35rem 0.55rem; border-radius: 0.5rem; border: 1px solid var(--hero-border); background: var(--hero-card); cursor: pointer; font-size: 0.8125rem; max-width: 100%; } .font-demos-radio-label:has(input:checked) { border-color: var(--primary-500); background: rgba(124, 58, 237, 0.12); } .font-demos-radio-label input { margin-top: 0.2rem; flex-shrink: 0; } .font-demos-radio-text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .font-demos-radio-name { font-weight: 600; color: var(--text-primary); } .font-demos-radio-note { font-size: 0.7rem; color: var(--gray-500); line-height: 1.3; } .font-demos-preview { padding: 1rem; border-radius: 0.75rem; border: 1px solid var(--hero-border); background: var(--hero-bg); margin-bottom: 2rem; } .font-demos-section-title { margin-bottom: 0.35rem; } .font-demos-body-sample { font-size: 0.9375rem; line-height: 1.6; color: var(--gray-300); margin-bottom: 1.25rem; max-width: 36rem; } .font-demos-grid { display: grid; gap: 1.25rem; } @media (min-width: 768px) { .font-demos-grid { grid-template-columns: 1fr 1fr; } .font-demos-col-wide { grid-column: 1 / -1; } } .font-demos-subhead { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); margin-bottom: 0.5rem; } .font-demos-button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .font-demos-field-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--gray-400); margin-bottom: 0.35rem; } .font-demos-input { width: 100%; max-width: 20rem; padding: 0.5rem 1rem; font-size: 1rem; background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 0.5rem; color: var(--text-primary); } .font-demos-input::placeholder { color: var(--gray-500); } .font-demos-input:focus { outline: none; border-color: var(--primary-500); } .font-demos-caption { margin-top: 0.75rem; font-size: 0.875rem; color: var(--gray-400); } .font-demos-preview.font-demos-preview--inter { font-family: 'Inter', system-ui, sans-serif; } .font-demos-preview.font-demos-preview--system-ui { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .font-demos-preview.font-demos-preview--dm-sans { font-family: 'DM Sans', system-ui, sans-serif; } .font-demos-preview.font-demos-preview--plus-jakarta-sans { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; } .font-demos-preview.font-demos-preview--manrope { font-family: 'Manrope', system-ui, sans-serif; } .font-demos-preview.font-demos-preview--outfit { font-family: 'Outfit', system-ui, sans-serif; } .font-demos-preview.font-demos-preview--nunito-sans { font-family: 'Nunito Sans', system-ui, sans-serif; } .font-demos-preview.font-demos-preview--ibm-plex-sans { font-family: 'IBM Plex Sans', system-ui, sans-serif; } .font-demos-preview.font-demos-preview--source-sans-3 { font-family: 'Source Sans 3', system-ui, sans-serif; } .font-demos-preview.font-demos-preview--lexend { font-family: 'Lexend', system-ui, sans-serif; } .font-demos-preview.font-demos-preview--sora { font-family: 'Sora', system-ui, sans-serif; } .font-demos-shop-card.shop-card-wrap { max-width: 22rem; } .font-demos-messages-slice .messages-layout.font-demos-messages-layout { display: block; min-height: unset; } .font-demos-messages-slice.messages-section .conversation-list { max-width: 22rem; } .font-demos-compare { margin-top: 0.5rem; } .font-demos-compare-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.35rem; } .font-demos-compare-lead { font-size: 0.8125rem; color: var(--gray-500); margin-bottom: 1rem; } .font-demos-compare-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .font-demos-compare-card { padding: 0.65rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--hero-border); background: var(--hero-card); } .font-demos-compare-name { display: block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); margin-bottom: 0.35rem; } .font-demos-compare-sample { font-size: 0.8125rem; line-height: 1.4; color: var(--gray-200); margin: 0; } .font-demos-compare-card--inter .font-demos-compare-sample { font-family: 'Inter', system-ui, sans-serif; } .font-demos-compare-card--system-ui .font-demos-compare-sample { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .font-demos-compare-card--dm-sans .font-demos-compare-sample { font-family: 'DM Sans', system-ui, sans-serif; } .font-demos-compare-card--plus-jakarta-sans .font-demos-compare-sample { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; } .font-demos-compare-card--manrope .font-demos-compare-sample { font-family: 'Manrope', system-ui, sans-serif; } .font-demos-compare-card--outfit .font-demos-compare-sample { font-family: 'Outfit', system-ui, sans-serif; } .font-demos-compare-card--nunito-sans .font-demos-compare-sample { font-family: 'Nunito Sans', system-ui, sans-serif; } .font-demos-compare-card--ibm-plex-sans .font-demos-compare-sample { font-family: 'IBM Plex Sans', system-ui, sans-serif; } .font-demos-compare-card--source-sans-3 .font-demos-compare-sample { font-family: 'Source Sans 3', system-ui, sans-serif; } .font-demos-compare-card--lexend .font-demos-compare-sample { font-family: 'Lexend', system-ui, sans-serif; } .font-demos-compare-card--sora .font-demos-compare-sample { font-family: 'Sora', system-ui, sans-serif; } /* Community forum - chat-style layout (Discord/Slack-inspired) */ .forum-app { --forum-rail-bg: rgba(0, 0, 0, 0.28); --forum-panel: #1a1b1e; --forum-panel-border: rgba(255, 255, 255, 0.07); --forum-hover: rgba(255, 255, 255, 0.045); } .forum-app__inner { max-width: none; } .forum-app__masthead { padding: 1rem 1.15rem 1.1rem; margin-bottom: 1.25rem; border-radius: 12px; border: 1px solid var(--forum-panel-border); background: var(--forum-rail-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .forum-app__masthead--simple { margin-bottom: 1rem; } .forum-app__masthead-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.25rem; } .forum-app__masthead-text { flex: 1 1 min(0, 40rem); min-width: min(100%, 12rem); display: flex; flex-direction: column; gap: 0.5rem; } .forum-app__title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: #f4f4f5; margin: 0; line-height: 1.2; } .forum-app__subtitle { font-size: 0.9rem; line-height: 1.5; color: var(--gray-500); margin: 0; max-width: 40rem; } .forum-app__masthead-actions { flex: 0 0 auto; padding-top: 0.2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; } .forum-app__cta { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; font-size: 0.9rem; font-weight: 600; border-radius: 8px; white-space: nowrap; } .forum-app__cta svg { width: 1.15rem; height: 1.15rem; } @media (max-width: 959px) { .forum-app__masthead-actions { flex: 1 1 100%; padding-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; align-items: stretch; justify-content: stretch; } .forum-app__masthead-actions .forum-app__cta:only-child { grid-column: 1 / -1; } .forum-app__cta { width: 100%; justify-content: center; } } .forum-app__notice { padding: 0.75rem 1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid var(--forum-panel-border); background: var(--forum-rail-bg); } .forum-app__notice-text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--gray-300); } .forum-app__notice-text--strong { font-weight: 600; color: #fecaca; } .forum-app__notice-muted { color: var(--gray-500); } .forum-app__notice-meta { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--gray-500); } .forum-app__notice--success { border-color: rgba(52, 211, 153, 0.28); background: rgba(16, 185, 129, 0.08); } .forum-app__notice--success .forum-app__notice-text { color: #a7f3d0; } .forum-app__notice--warn { border-color: rgba(251, 191, 36, 0.35); background: rgba(245, 158, 11, 0.08); } .forum-app__notice--warn .forum-app__notice-text { color: #fde68a; } .forum-app__notice--alert { border-color: rgba(248, 113, 113, 0.4); background: rgba(239, 68, 68, 0.09); } .forum-app__notice--alert .forum-app__notice-text { color: #fecaca; } .forum-app__hint { font-size: 0.875rem; color: var(--gray-500); margin: 0 0 1rem; line-height: 1.5; } .forum-app__hint--thread { margin-top: 1rem; } .forum-app__mentions { margin-bottom: 1rem; } .forum-mentions-panel { padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--forum-panel-border); background: var(--forum-rail-bg); } .forum-mentions-panel__title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); margin: 0 0 0.5rem; } .forum-mentions-panel__lead { font-size: 0.8125rem; color: var(--gray-400); margin: 0 0 0.65rem; line-height: 1.45; } .forum-mentions-panel__mark { margin-top: 0.75rem; } .forum-mentions-list__link { color: var(--primary-300); text-decoration: none; font-weight: 500; } .forum-mentions-list__link:hover { text-decoration: underline; text-underline-offset: 2px; } .forum-mentions-list__when { font-size: 0.75rem; color: var(--gray-500); margin-left: 0.35rem; } .forum-app__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; } @media (min-width: 960px) { .forum-app__grid { grid-template-columns: minmax(15.5rem, 17.5rem) minmax(0, 1fr); gap: 1.1rem 1.35rem; } } .forum-app__rail { min-width: 0; } .forum-app__rail-heading { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); margin: 0 0 0.65rem; } .forum-app__main { min-width: 0; border-radius: 12px; border: 1px solid var(--forum-panel-border); background: var(--forum-panel); overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } .forum-app__channel-head { display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--forum-panel-border); background: rgba(0, 0, 0, 0.15); } .forum-app__channel-hash { font-size: 1.25rem; font-weight: 800; color: var(--gray-600); opacity: 0.85; line-height: 1; } .forum-app__channel-titles { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .forum-app__channel-name { font-size: 0.95rem; font-weight: 700; text-transform: lowercase; letter-spacing: -0.01em; color: var(--gray-200); } .forum-app__channel-desc { font-size: 0.75rem; color: var(--gray-500); } .forum-thread-view__toolbar { margin-bottom: 1rem; } .forum-back-link--compact { padding: 0.4rem 0.75rem; font-size: 0.8125rem; border-radius: 8px; } .forum-guest-card { border-color: rgba(139, 92, 246, 0.22); background: linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, var(--hero-card) 100%); } .forum-guest-card__title { font-weight: 600; font-size: 1rem; color: var(--gray-200); margin: 0 0 0.5rem 0; } .forum-back-row { margin-top: 0; margin-bottom: 2.5rem; } .forum-back-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; font-weight: 500; color: var(--gray-400); text-decoration: none; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--hero-border); background: var(--hero-card); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .forum-back-link:hover { color: var(--primary-400); border-color: rgba(139, 92, 246, 0.35); background: rgba(139, 92, 246, 0.06); } @keyframes forum-skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .forum-skeleton-line { border-radius: 0.35rem; background: linear-gradient( 100deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.04) 90% ); background-size: 200% 100%; animation: forum-skeleton-shimmer 1.15s ease-in-out infinite; } .forum-skeleton-stack { display: flex; flex-direction: column; gap: 0.35rem; } .forum-thread-row--skeleton { pointer-events: none; cursor: default; display: flex; align-items: flex-start; gap: 0.5rem 0.75rem; padding: 0.55rem 0.65rem; } .forum-skeleton-hash { display: block; width: 1.35rem; height: 1.1rem; border-radius: 0.3rem; flex-shrink: 0; margin-top: 0.2rem; background: linear-gradient( 100deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.04) 90% ); background-size: 200% 100%; animation: forum-skeleton-shimmer 1.15s ease-in-out infinite; } .forum-thread-row--skeleton .forum-thread-row__main .forum-skeleton-line--title { width: min(70%, 22rem); height: 1rem; margin-bottom: 0.65rem; } .forum-thread-row--skeleton .forum-thread-row__main .forum-skeleton-line--meta { width: min(42%, 12rem); height: 0.75rem; } .forum-thread-detail-skeleton { display: flex; flex-direction: column; gap: 1rem; } .forum-skeleton-line--thread-title { width: min(88%, 28rem); height: 1.75rem; margin-bottom: 0.25rem; } .forum-skeleton-line--thread-meta { width: min(52%, 16rem); height: 0.8rem; margin-bottom: 0.5rem; } .forum-post--skeleton { pointer-events: none; align-items: flex-start; } .forum-skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: 999px; flex-shrink: 0; background: linear-gradient( 100deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.04) 90% ); background-size: 200% 100%; animation: forum-skeleton-shimmer 1.15s ease-in-out infinite; } .forum-skeleton-line--body { width: 100%; height: 0.8rem; margin-bottom: 0.45rem; } .forum-skeleton-line--body.short { width: 66%; } .forum-skeleton-line--body:last-child { margin-bottom: 0; } .forum-thread-list-msg, .forum-thread-detail-msg { margin: 0; padding: 1rem 1.15rem; } .forum-kbd { display: inline-block; padding: 0.1rem 0.35rem; font-size: 0.75rem; font-family: ui-monospace, monospace; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--forum-panel-border); border-radius: 0.25rem; color: var(--gray-300); } .forum-compose-card { border: 1px solid var(--hero-border); border-radius: 0.75rem; } .forum-compose-dock { border-radius: 12px; border: 1px solid var(--forum-panel-border); background: var(--forum-panel); padding: 0; overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } .forum-compose-dock__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--forum-panel-border); background: rgba(0, 0, 0, 0.15); } .forum-compose-dock__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray-500); } .forum-compose-dock__hint { font-size: 0.75rem; color: var(--gray-500); } .forum-compose-dock__hint .forum-kbd { vertical-align: middle; } .forum-compose-dock .forum-new-thread-form, .forum-compose-dock .forum-reply-form { display: flex; flex-direction: column; gap: 1.25rem; padding: 1rem 1rem 0; } .forum-compose-dock .forum-new-thread-form .field, .forum-compose-dock .forum-reply-form .field { display: flex; flex-direction: column; gap: 0.75rem; } .forum-compose-dock .forum-new-thread-form .field .modal-label, .forum-compose-dock .forum-reply-form .field .modal-label { margin-bottom: 0; } .forum-compose-dock__actions { padding: 0 1rem 1rem; } .forum-compose-dock__actions--split { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; } .forum-compose-dock__footer { padding: 0 1rem 1rem; font-size: 0.8125rem; color: var(--gray-500); } .forum-compose-dock .forum-compose-dock__actions { padding-top: 0; } .forum-compose-dock .thesms-rich-editor .ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; } .forum-compose-dock .thesms-rich-editor .ql-container.ql-snow { border-radius: 0 0 8px 8px; } /* Same rhythm as .modal-content forms when not using dock wrapper */ .forum-compose-card:not(.forum-compose-dock) .forum-new-thread-form, .forum-compose-card:not(.forum-compose-dock) .forum-reply-form { display: flex; flex-direction: column; gap: 1.25rem; } .forum-compose-card:not(.forum-compose-dock) .forum-new-thread-form .field, .forum-compose-card:not(.forum-compose-dock) .forum-reply-form .field { display: flex; flex-direction: column; gap: 0.75rem; } .forum-compose-card:not(.forum-compose-dock) .forum-new-thread-form .field .modal-label, .forum-compose-card:not(.forum-compose-dock) .forum-reply-form .field .modal-label { margin-bottom: 0; } .forum-app__filters.forum-section-head.forum-section-head--filter { margin-bottom: 0; padding: 0.85rem 0.9rem; border-radius: 10px; border: 1px solid var(--forum-panel-border); background: rgba(0, 0, 0, 0.2); box-shadow: none; } .forum-section-head.forum-section-head--filter { display: grid; grid-template-columns: 1fr; grid-template-areas: "search" "sort" "cats"; gap: 1rem 1.25rem; align-items: start; justify-content: stretch; padding: 1rem 1.1rem; border-radius: 0.65rem; border: 1px solid var(--hero-border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--hero-card) 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); margin-bottom: 1.25rem; } .forum-section-head.forum-section-head--filter .forum-category-filter--search { grid-area: search; min-width: 0; } .forum-section-head.forum-section-head--filter .forum-sort-filter { grid-area: sort; width: 100%; } .forum-section-head.forum-section-head--filter .forum-category-filter--multi { grid-area: cats; min-width: 0; } /* Keep filters single-column in the forum rail to avoid control overlap in the narrow desktop sidebar. */ .forum-category-filter, .forum-sort-filter { display: flex; flex-direction: column; gap: 0.35rem; } .forum-category-filter__label, .forum-sort-filter__label { margin-bottom: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500); } .forum-category-filter__select, .forum-sort-filter__select { min-width: 0; max-width: 100%; } .forum-category-filter--multi { border: 0; padding: 0; margin: 0; min-width: 0; } .forum-category-filter--multi .forum-category-filter__label { padding: 0; margin-bottom: 0.5rem; } .forum-category-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.25rem, 1fr)); gap: 0.4rem 0.65rem; align-items: center; } .forum-category-checkbox { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--gray-300); cursor: pointer; user-select: none; min-width: 0; } .forum-category-checkbox span { line-height: 1.25; } .forum-category-checkbox input { width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--primary-500, #8b5cf6); cursor: pointer; } .forum-category-filter__hint { margin: 0.35rem 0 0; font-size: 0.7rem; color: var(--gray-500); line-height: 1.3; } /* Wider search field on forum list - never force horizontal scroll on narrow viewports */ .forum-category-filter--search { min-width: 0; } .forum-category-filter--search .forum-category-filter__select { width: 100%; min-width: 0; max-width: 100%; } .forum-sort-filter__select { width: 100%; } .forum-thread-list--refreshing { opacity: 0.72; transition: opacity 0.15s ease; } .forum-category-pill { display: inline-block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 0.12rem 0.5rem; margin-bottom: 0.3rem; } .forum-thread-header__category { margin: 0 0 0.5rem; } .forum-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; } .forum-app__main .forum-thread-list { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0.4rem 0.5rem; } .forum-thread-list { display: flex; flex-direction: column; gap: 0.5rem; } .forum-thread-row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0.5rem 0.75rem; padding: 0.55rem 0.65rem; border-radius: 8px; border: none; background: transparent; text-decoration: none; color: inherit; transition: background 0.12s ease; } .forum-thread-row:hover { background: var(--forum-hover); } .forum-thread-row__icon { flex-shrink: 0; width: 1.35rem; text-align: center; font-size: 0.95rem; font-weight: 800; color: var(--gray-600); line-height: 1.45; opacity: 0.75; } .forum-thread-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .forum-thread-row__title { font-size: 0.98rem; font-weight: 600; color: #e4e4e7; margin: 0; line-height: 1.3; } .forum-thread-row:hover .forum-thread-row__title { color: #fff; } .forum-thread-row__meta { font-size: 0.78rem; color: var(--gray-500); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; line-height: 1.2; } .forum-thread-row__meta--head { font-size: 0.8rem; color: var(--gray-400); } .forum-thread-row__meta--stats { font-size: 0.72rem; color: var(--gray-500); margin-top: 0.15rem; opacity: 0.9; } .forum-thread-row__stat { white-space: nowrap; } .forum-thread-row__meta .forum-category-pill { margin: 0 0 0 0.15rem; } .forum-thread-row__dot { opacity: 0.5; } .forum-thread-row__aside { flex-shrink: 0; align-self: center; } .forum-stat-pill { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 0.2rem 0.45rem; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--gray-400); border: none; } .forum-empty-state { text-align: center; padding: 2.75rem 1.25rem; border: none; background: transparent; color: var(--gray-500); } .forum-empty-state__title { font-weight: 600; color: var(--gray-400); margin-bottom: 0.35rem; } .forum-empty-state__hint { font-size: 0.875rem; margin: 0; } .forum-thread-detail:not(.forum-thread-detail--loading) { border-radius: 12px; border: 1px solid var(--forum-panel-border); background: var(--forum-panel); overflow: hidden; margin-bottom: 1rem; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } .forum-thread-detail > .forum-app__notice { margin: 1rem 1rem 0; } .forum-thread-header { margin: 0; padding: 1.15rem 1.15rem 1rem; border-bottom: 1px solid var(--forum-panel-border); background: rgba(0, 0, 0, 0.12); } .forum-thread-header__title { font-size: 1.35rem; font-weight: 700; line-height: 1.25; margin: 0 0 0.45rem; color: #f4f4f5; letter-spacing: -0.02em; } .forum-thread-header__meta { font-size: 0.8125rem; color: var(--gray-500); margin: 0; } .forum-thread-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0; padding: 0.5rem 1.2rem; background: rgba(239, 68, 68, 0.06); border-bottom: 1px solid rgba(248, 113, 113, 0.15); } .forum-thread-admin__label { margin: 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); } .forum-thread-admin__delete { color: #fca5a5; } .forum-thread-follow { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.55rem 0.75rem; margin: 0; padding: 0.55rem 1.2rem 0.65rem; background: rgba(0, 0, 0, 0.06); } .forum-thread-follow--guest { justify-content: flex-start; } .forum-thread-follow__guest-msg { margin: 0; font-size: 0.8125rem; color: var(--gray-500); line-height: 1.4; } .forum-thread-follow__aside { display: inline-flex; align-items: center; gap: 0.15rem; margin-left: auto; flex-shrink: 0; } .forum-thread-follow__channels { display: inline-flex; align-items: center; gap: 0.15rem; } .forum-thread-follow__channel { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 6px; color: var(--gray-400); cursor: default; } .forum-thread-follow__channel svg { display: block; } .forum-thread-follow__channel--on { color: var(--primary-400); background: rgba(139, 92, 246, 0.14); } .forum-thread-follow__channel--off { color: var(--gray-500); opacity: 0.42; } .forum-thread-follow__channel--unknown { opacity: 0.55; } .forum-thread-follow__aside-divider { width: 1px; align-self: stretch; min-height: 1.25rem; background: var(--forum-panel-border); margin: 0 0.2rem 0 0.4rem; } .forum-thread-follow__icon-link { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: 6px; color: var(--gray-400); text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .forum-thread-follow__icon-link:hover, .forum-thread-follow__icon-link:focus-visible { background: rgba(139, 92, 246, 0.2); color: #fff; outline: none; } .forum-thread-follow__icon-link svg { display: block; } .forum-thread-follow__btn { flex-shrink: 0; } .forum-author-link { color: inherit; text-decoration: none; } .forum-author-link:hover, .forum-author-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; } .forum-post-stream { display: flex; flex-direction: column; gap: 0; padding: 0.2rem 0 0.35rem; } .forum-post-stream > .forum-post:not(.forum-post--continued):not(:first-child) { margin-top: var(--thesms-forum-post-gap); } .forum-post { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.45rem 1rem 0.6rem 0.85rem; margin: 0 0.35rem; border-radius: 8px; border: none; background: transparent; position: relative; } .forum-post:hover { background: var(--forum-hover); } .forum-post--op { background: rgba(139, 92, 246, 0.07); box-shadow: inset 3px 0 0 var(--primary-500); } .forum-post--op:hover { background: rgba(139, 92, 246, 0.1); } .forum-post__rail { width: 2.35rem; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; position: relative; } .forum-post__avatar { width: 2.35rem; height: 2.35rem; border-radius: 12px; background: linear-gradient(135deg, var(--primary-600), var(--primary-500)); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; color: var(--text-on-primary); letter-spacing: 0.02em; box-shadow: 0 0 0 2px rgba(26, 27, 30, 0.95); z-index: 1; } .forum-post__line { display: block; width: 2px; min-height: 1.35rem; margin-top: 0.35rem; border-radius: 999px; background: linear-gradient(180deg, rgba(113, 113, 122, 0.6) 0%, rgba(82, 82, 91, 0.2) 100%); } .forum-post__body { min-width: 0; flex: 1; } .forum-post--continued { margin-top: -0.15rem; padding-top: 0.2rem; } .forum-post--continued .forum-post__avatar { opacity: 0; pointer-events: none; } .forum-post__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-bottom: 0.38rem; } .forum-post__name { font-weight: 600; font-size: 0.9rem; color: #f4f4f5; } .forum-post--continued .forum-post__head { margin-bottom: 0.25rem; } .forum-post--continued .forum-post__name, .forum-post--continued .forum-role-badge, .forum-post--continued .forum-op-badge { display: none; } .forum-role-badge { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.12rem 0.4rem; border-radius: 4px; border: 1px solid var(--forum-panel-border); color: var(--gray-400); background: rgba(0, 0, 0, 0.2); } .forum-role-badge--business { border-color: rgba(52, 211, 153, 0.35); color: #6ee7b7; background: rgba(16, 185, 129, 0.08); } .forum-role-badge--member { border-color: rgba(96, 165, 250, 0.35); color: #93c5fd; background: rgba(59, 130, 246, 0.08); } .forum-role-badge--customer { border-color: rgba(96, 165, 250, 0.35); color: #93c5fd; background: rgba(59, 130, 246, 0.08); } .forum-role-badge--admin { border-color: rgba(167, 139, 250, 0.4); color: var(--primary-300); background: rgba(139, 92, 246, 0.1); } .forum-role-badge--staff { border-color: rgba(167, 139, 250, 0.38); color: #d8b4fe; background: rgba(139, 92, 246, 0.1); } .forum-author-achievements { display: inline-flex; align-items: center; gap: 0.12rem; } .forum-author-achievements--inline { margin-left: 0.15rem; } .forum-post__meta { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; margin: 0 0 0.5rem; } .forum-post__meta .forum-author-achievements--post { flex-basis: auto; margin: 0; } .forum-post__meta .forum-post__time { margin-left: auto; } .forum-post__meta .forum-post__edited { margin-left: 0; } /* Community tier stars (forum + public profile): verified = gold shop trust; contributor = green activity */ .community-tier-stars { display: inline-flex; align-items: center; gap: 0.2rem; line-height: 1; } .member-public-tier-stars { gap: 0.35rem; } .community-tier-star { display: inline-flex; align-items: center; justify-content: center; width: 1.05em; height: 1.05em; font-size: 1rem; line-height: 1; cursor: default; user-select: none; } .member-public-tier-stars .community-tier-star { font-size: 1.2rem; } .community-tier-star.is-earned::before { content: "★"; } .community-tier-star.is-locked::before { content: "☆"; opacity: 0.88; } .community-tier-star.is-locked { display: none; } .community-tier-star--verified.is-earned { color: #fbbf24; } .community-tier-star--verified.is-locked { color: rgba(251, 191, 36, 0.3); } .community-tier-star--conversation.is-earned { color: #a78bfa; } .community-tier-star--conversation.is-locked { color: rgba(167, 139, 250, 0.3); } .community-tier-star--contributor.is-earned { color: #4ade80; } .community-tier-star--contributor.is-locked { color: rgba(74, 222, 128, 0.28); } .community-tier-star--reviewer.is-earned { color: #38bdf8; } .community-tier-star--reviewer.is-locked { color: rgba(56, 189, 248, 0.28); } .forum-op-badge { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary-400); opacity: 0.95; } .forum-post__time { font-size: 0.72rem; color: var(--gray-500); margin-left: auto; } .forum-post--continued .forum-post__time { margin-left: 0; font-size: 0.69rem; } .forum-post__bubble { border-radius: 10px; padding: 0.5rem 0.65rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); } .forum-post:hover .forum-post__bubble { background: rgba(255, 255, 255, 0.045); } .forum-post--op .forum-post__bubble { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.3); } .forum-post-content { font-size: 0.9375rem; line-height: 1.62; color: #d4d4d8; word-break: break-word; } .forum-post-content a.forum-mention { color: var(--primary-400); text-decoration: none; font-weight: 500; } .forum-post-content a.forum-mention:hover { text-decoration: underline; } .forum-post-content a.forum-mention--shop { color: var(--primary-400); } .forum-post-content a.forum-mention--member { color: #a5b4fc; } .forum-post-content a.forum-mention-pill { display: inline-flex; align-items: center; gap: 0.3rem; vertical-align: baseline; padding: 0.05rem 0.35rem 0.05rem 0.2rem; margin: 0 0.05rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); text-decoration: none; } .forum-post-content a.forum-mention-pill:hover { background: rgba(255, 255, 255, 0.07); text-decoration: none; } .forum-mention-pill__label { font-weight: 500; } /* Site-wide inline avatar chips (reviews, mentions, entity links) - always circular. */ .entity-avatar-chip { border-radius: 999px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; line-height: 1; color: #fff; flex-shrink: 0; } .forum-mention-pill__avatar.entity-avatar-chip, .entity-avatar-chip.forum-mention-pill__avatar { width: 1.125rem; height: 1.125rem; min-width: 1.125rem; } .entity-avatar-chip.entity-avatar-chip--img img, .forum-mention-pill__avatar.entity-avatar-chip--img img { width: 100%; height: 100%; object-fit: cover; display: block; } .forum-field-wrap { position: relative; } .forum-mention-dropdown { position: absolute; left: 0; right: 0; top: 100%; margin-top: 0.25rem; max-height: 9.5rem; overflow-y: auto; z-index: 50; border-radius: 8px; border: 1px solid var(--forum-panel-border); background: #141416; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); } .forum-mention-item { display: block; width: 100%; text-align: left; padding: 0.55rem 0.85rem; border: none; border-bottom: 1px solid var(--forum-panel-border); background: transparent; color: var(--gray-200); font-size: 0.875rem; cursor: pointer; } .forum-mention-item:last-child { border-bottom: none; } .forum-mention-item:hover, .forum-mention-item--active { background: rgba(139, 92, 246, 0.14); color: var(--primary-300); } .forum-mention-item--empty { padding: 0.65rem 0.85rem; font-size: 0.8125rem; color: var(--gray-500); cursor: default; pointer-events: none; } .forum-compose-dock--v2 .forum-mention-dropdown, .forum-compose-dock--reply .forum-mention-dropdown, .forum-post-edit__mention-dropdown { z-index: 80; } .forum-compose-dock--reply .forum-reply-form .field, .forum-compose-dock--reply .forum-compose-dock__field { overflow: visible; } .forum-mention-item__name { font-weight: 500; } .forum-mentions-list { list-style: none; margin: 0; padding: 0; } .forum-mentions-list__item { margin-bottom: 0.5rem; } .forum-mention-item__kind { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gray-500); margin-top: 0.15rem; } .forum-mention-item__kind-label { text-transform: uppercase; } .forum-mention-item__handle { text-transform: none; letter-spacing: normal; font-weight: 500; } .forum-emoji-quick { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0 1rem; } .forum-emoji-quick__btn { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); border-radius: 999px; min-width: 2rem; height: 2rem; padding: 0 0.55rem; font-size: 1rem; line-height: 1; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease; } .forum-emoji-quick__btn:hover, .forum-emoji-quick__btn:focus-visible { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.4); transform: translateY(-1px); } .member-public-page .member-public-card { padding: 1.5rem; } .member-public-header { display: flex; gap: 1rem; align-items: flex-start; } .member-public-title-block { flex: 1; min-width: 0; } .member-public-header-actions { flex-shrink: 0; margin-left: auto; align-self: flex-start; } .member-public-message-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 9999px; border: 1px solid rgba(99, 102, 241, 0.45); background: rgba(99, 102, 241, 0.12); color: var(--text-primary); text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .member-public-message-btn svg { width: 1.25rem; height: 1.25rem; } .member-public-message-btn:hover, .member-public-message-btn:focus-visible { background: rgba(99, 102, 241, 0.22); border-color: rgba(129, 140, 248, 0.65); color: var(--text-primary); } .member-public-message-btn:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; } .member-public-avatar-wrap { position: relative; flex-shrink: 0; } .member-public-avatar, .member-public-avatar--gen, .member-public-avatar--placeholder { width: 80px; height: 80px; border-radius: 9999px; flex-shrink: 0; } .member-public-avatar { object-fit: cover; display: block; } .member-public-avatar--gen, .member-public-avatar--placeholder { display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 600; line-height: 1; color: var(--text-primary); overflow: hidden; } .member-public-avatar--placeholder { background: var(--gray-700); color: var(--gray-400); font-size: 1.25rem; } .member-public-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 0.85rem; margin-bottom: 0.35rem; } .member-public-name { margin-bottom: 0; } .member-public-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .member-public-pill { display: inline-flex; align-items: center; gap: 0.4rem; } .member-public-pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; color: currentColor; opacity: 0.95; } .member-public-pill-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .member-public-badges .member-public-pill-icon svg { fill: currentColor; stroke-width: 1.2; } .member-public-badges .member-public-pill-icon svg { fill: none; stroke-width: 1.9; } .member-public-badges .forum-role-badge { box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.35) inset; } .member-public-meta { font-size: 0.875rem; color: var(--gray-500); margin: 0.45rem 0 0; } .member-public-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; margin: 0.65rem 0 0; font-size: 0.875rem; } .member-public-summary__link { display: inline-flex; align-items: baseline; gap: 0.35rem; color: var(--gray-400); text-decoration: none; border-radius: 0.35rem; } .member-public-summary__link:hover, .member-public-summary__link:focus-visible { color: var(--primary-300); text-decoration: underline; } .member-public-summary__value { font-weight: 700; font-size: 1.05rem; color: var(--gray-200); } .member-public-summary__link:hover .member-public-summary__value, .member-public-summary__link:focus-visible .member-public-summary__value { color: var(--primary-200); } .member-public-summary__sep { color: var(--gray-600); user-select: none; } .member-public-section-anchor { scroll-margin-top: 5.5rem; } .member-public-achievements { border: 1px solid var(--hero-border); border-radius: 0.75rem; padding: 0.65rem 0.85rem; background: rgba(255, 255, 255, 0.02); text-align: left; } .member-public-achievements__summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0.35rem 0.65rem; } .member-public-achievements__summary::-webkit-details-marker { display: none; } .member-public-achievements__summary::before { content: "▸ "; color: var(--gray-500); transition: transform 0.15s ease; display: inline-block; } .member-public-achievements[open] .member-public-achievements__summary::before { transform: rotate(90deg); } .member-public-achievements__summary-label { font-size: 0.875rem; font-weight: 600; color: var(--gray-200); } .member-public-achievements__summary-meta { font-size: 0.8rem; color: var(--gray-500); } .member-public-achievements__body { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--hero-border); } .member-public-achievements__intro { margin: 0 0 0.85rem; text-align: left; } .member-badge-grid--achievements { margin-top: 0; } .member-public-feed__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.85rem; } .member-public-feed__filters { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; } .member-public-feed__filter { appearance: none; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(255, 255, 255, 0.04); color: var(--gray-300); font-size: 0.78rem; font-weight: 600; line-height: 1.2; padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer; } .member-public-feed__filter:hover { color: var(--gray-100); border-color: rgba(148, 163, 184, 0.35); } .member-public-feed__filter.is-active { background: var(--primary-600); border-color: var(--primary-600); color: var(--text-on-primary); } .member-public-feed__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .member-public-feed__item--review { list-style: none; } .member-public-feed__sentinel { height: 1px; margin-top: 0.5rem; } .member-public-feed__status, .member-public-feed__empty, .member-public-feed__error { margin: 0 0 0.75rem; } .member-public-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .member-public-activity__link { display: block; padding: 0.75rem 0.85rem; border: 1px solid var(--hero-border); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.02); text-decoration: none; color: inherit; } .member-public-activity__link:hover, .member-public-activity__link:focus-visible { border-color: rgba(139, 92, 246, 0.35); background: rgba(139, 92, 246, 0.06); } .member-public-activity__kind { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary-300); margin-bottom: 0.25rem; } .member-public-activity__title { display: block; font-size: 0.9rem; font-weight: 600; color: var(--gray-100); } .member-public-activity__excerpt { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--gray-400); line-height: 1.45; } .member-public-activity__when { display: block; margin-top: 0.4rem; font-size: 0.75rem; color: var(--gray-500); } .member-public-activity-empty { margin: 0; } .member-public-activity-details { border: 1px solid var(--hero-border); border-radius: 0.75rem; padding: 0.65rem 0.85rem; background: rgba(255, 255, 255, 0.02); } .member-public-activity-details__summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--gray-300); list-style: none; } .member-public-activity-details__summary::-webkit-details-marker { display: none; } .member-public-activity-details__summary::before { content: "▸ "; display: inline-block; transition: transform 0.15s ease; color: var(--gray-500); } .member-public-activity-details[open] .member-public-activity-details__summary::before { transform: rotate(90deg); } .member-public-stats--breakdown { margin-top: 0.75rem; } .member-public-reviews-more { margin-top: 0.75rem; } .member-badge-card__title { display: inline-flex; align-items: center; gap: 0.42rem; } .member-badge-card__title-icon { width: 1rem; height: 1rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.45); background: rgba(15, 23, 42, 0.6); display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 0.7rem; flex-shrink: 0; } .member-badge-card--verified .member-badge-card__title-icon::before { content: "★"; color: #fbbf24; font-size: 0.85rem; } .member-badge-card--verified:not(.is-earned) .member-badge-card__title-icon::before { content: "☆"; color: rgba(251, 191, 36, 0.38); } .member-badge-card--conversation .member-badge-card__title-icon::before { content: "★"; color: #a78bfa; font-size: 0.85rem; } .member-badge-card--conversation:not(.is-earned) .member-badge-card__title-icon::before { content: "☆"; color: rgba(167, 139, 250, 0.38); } .member-badge-card--contributor .member-badge-card__title-icon::before { content: "★"; color: #4ade80; font-size: 0.85rem; } .member-badge-card--contributor:not(.is-earned) .member-badge-card__title-icon::before { content: "☆"; color: rgba(74, 222, 128, 0.35); } .member-badge-card--reviewer .member-badge-card__title-icon::before { content: "★"; color: #38bdf8; font-size: 0.85rem; } .member-badge-card--reviewer:not(.is-earned) .member-badge-card__title-icon::before { content: "☆"; color: rgba(56, 189, 248, 0.35); } .member-badge-card--reviewer.is-earned { border-color: rgba(56, 189, 248, 0.5); background: rgba(14, 165, 233, 0.08); } .member-badge-card--reviewer.is-earned .member-badge-card__status { color: #7dd3fc; border-color: rgba(56, 189, 248, 0.45); background: rgba(14, 165, 233, 0.12); } .member-public-pill--verified { border-color: rgba(250, 204, 21, 0.45); color: #fde68a; } .member-public-reviews { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--thesms-review-list-gap); } .member-public-reviews-empty { margin: 0.75rem 0 0; font-size: 0.9rem; } .member-public-review { border: 1px solid var(--hero-border); border-radius: 0.75rem; padding: 0.85rem 0.95rem; background: rgba(255, 255, 255, 0.02); } .member-public-review--staff { border-color: rgba(129, 140, 248, 0.35); } .member-public-review__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .member-public-review__scope-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-400); border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 999px; padding: 0.1rem 0.45rem; } .member-public-review--staff .member-public-review__scope-badge { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.4); } .member-public-review__stars { color: var(--primary-400); letter-spacing: 0.04em; font-size: 0.85rem; font-weight: 700; } .member-public-review__when { font-size: 0.75rem; color: var(--gray-500); margin-left: auto; } .member-public-review__targets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-bottom: 0.45rem; } .member-public-review__with { font-size: 0.8rem; color: var(--gray-500); } .member-public-review__entity { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--gray-200); text-decoration: none; font-weight: 600; font-size: 0.875rem; } a.member-public-review__entity.shop-review-entity-row { color: var(--gray-200); cursor: pointer; } a.member-public-review__entity.shop-review-entity-row:hover { color: var(--primary-400); text-decoration: underline; } .member-public-review__entity--static { color: var(--gray-200); cursor: default; } .member-public-review__title { margin: 0 0 0.35rem; font-weight: 700; color: var(--gray-100); } .member-public-review__body { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--gray-300); } .account-profile-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; } .account-profile-tier-stars { gap: 0.25rem; } .account-community-profile-link { color: var(--primary-400); font-weight: 600; text-decoration: none; } .account-community-profile-link:hover { text-decoration: underline; } button.account-community-profile-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; } .member-public-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; } .member-public-stat-value { font-weight: 700; font-size: 1.25rem; color: var(--gray-200); } .member-public-stat-label { color: var(--gray-500); font-size: 0.875rem; } .member-badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-top: 1.1rem; } .member-public-page .info-section-title + .info-section-desc { margin-bottom: 0.65rem; } .member-badge-card { border: 1px solid var(--hero-border); background: rgba(255, 255, 255, 0.02); border-radius: 0.75rem; padding: 0.85rem 0.9rem; } .member-badge-card--verified.is-earned { border-color: rgba(250, 204, 21, 0.5); background: rgba(245, 158, 11, 0.09); } .member-badge-card--conversation.is-earned { border-color: rgba(167, 139, 250, 0.5); background: rgba(129, 140, 248, 0.1); } .member-badge-card--contributor.is-earned { border-color: rgba(74, 222, 128, 0.5); background: rgba(34, 197, 94, 0.08); } .member-badge-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .member-badge-card__title { margin: 0; color: var(--gray-100); font-weight: 700; font-size: 0.9rem; } .member-badge-card__status { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-300); border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 999px; padding: 0.12rem 0.4rem; } .member-badge-card--verified.is-earned .member-badge-card__status { color: #fde68a; border-color: rgba(250, 204, 21, 0.45); background: rgba(245, 158, 11, 0.12); } .member-badge-card--conversation.is-earned .member-badge-card__status { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.45); background: rgba(129, 140, 248, 0.12); } .member-badge-card--contributor.is-earned .member-badge-card__status { color: #86efac; border-color: rgba(74, 222, 128, 0.45); background: rgba(34, 197, 94, 0.12); } .member-badge-card__desc { margin: 0.45rem 0 0; font-size: 0.8rem; color: var(--gray-400); } .member-badge-card__count { margin: 0.6rem 0 0; color: var(--gray-300); font-size: 0.8rem; } .member-badge-card__count strong { color: var(--gray-100); } .member-badge-progress { margin-top: 0.55rem; width: 100%; height: 0.4rem; border-radius: 999px; background: rgba(148, 163, 184, 0.18); overflow: hidden; } .member-badge-progress > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(147, 51, 234, 0.95), rgba(59, 130, 246, 0.95)); } .member-badge-card.is-earned .member-badge-progress > span { background: linear-gradient(90deg, rgba(16, 185, 129, 0.95), rgba(52, 211, 153, 0.95)); } @media (max-width: 640px) { .member-badge-grid { grid-template-columns: 1fr; } } /* Quill editors (staff publish modal, forum, account page) */ .thesms-rich-editor-wrap--ready, .forum-field-wrap.thesms-rich-editor-wrap--ready { border-radius: 0.5rem; transition: box-shadow 160ms ease; } .forum-field-wrap.thesms-rich-editor-wrap--ready:focus-within { box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.28); } .account-page-content-editor.thesms-rich-editor-wrap--ready:focus-within { box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.28); border-radius: 0.5rem; } .thesms-rich-editor .ql-toolbar.ql-snow, .thesms-rich-editor .ql-container.ql-snow, .forum-field-wrap > .ql-toolbar.ql-snow { border-color: var(--hero-border); } .thesms-rich-editor .ql-toolbar.ql-snow, .forum-field-wrap > .ql-toolbar.ql-snow { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, var(--hero-card) 100%); border-radius: 0.5rem 0.5rem 0 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.1rem; padding: 0.4rem 0.5rem; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .thesms-rich-editor .ql-toolbar.ql-snow .ql-formats, .forum-field-wrap > .ql-toolbar.ql-snow .ql-formats { margin-right: 0.5rem; display: inline-flex; align-items: center; gap: 0.1rem; } .thesms-rich-editor .ql-toolbar.ql-snow .ql-formats + .ql-formats, .forum-field-wrap > .ql-toolbar.ql-snow .ql-formats + .ql-formats { padding-left: 0.5rem; border-left: 1px solid rgba(255, 255, 255, 0.08); } .thesms-rich-editor .ql-toolbar.ql-snow .ql-picker-label, .forum-field-wrap > .ql-toolbar.ql-snow .ql-picker-label { color: var(--gray-300); border-radius: 7px; } .thesms-rich-editor .ql-toolbar.ql-snow .ql-picker-label:hover, .forum-field-wrap > .ql-toolbar.ql-snow .ql-picker-label:hover { color: #e5e7eb; } .thesms-rich-editor .ql-toolbar.ql-snow .ql-picker-label.ql-active, .forum-field-wrap > .ql-toolbar.ql-snow .ql-picker-label.ql-active { color: var(--primary-300); } .thesms-rich-editor .ql-toolbar.ql-snow button, .forum-field-wrap > .ql-toolbar.ql-snow button { color: var(--gray-300); width: 2rem; height: 2rem; padding: 0.35rem; border-radius: 7px; transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease; } .thesms-rich-editor .ql-toolbar.ql-snow button:hover, .thesms-rich-editor .ql-toolbar.ql-snow button:focus-visible, .forum-field-wrap > .ql-toolbar.ql-snow button:hover, .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible { color: #e5e7eb; background-color: rgba(255, 255, 255, 0.07); } .thesms-rich-editor .ql-toolbar.ql-snow button.ql-active, .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active { color: var(--primary-300); background-color: rgba(139, 92, 246, 0.2); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.45); } .thesms-rich-editor .ql-toolbar.ql-snow button.ql-active:focus-visible, .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active:focus-visible { outline: 2px solid rgba(139, 92, 246, 0.5); outline-offset: 1px; } .thesms-rich-editor .ql-snow .ql-picker-options { background-color: var(--hero-card); border-color: var(--hero-border); } .thesms-rich-editor .ql-snow .ql-picker-item { color: var(--gray-300); } .thesms-rich-editor .ql-snow .ql-picker-item.ql-selected, .thesms-rich-editor .ql-snow .ql-picker-item:hover { color: var(--primary-300); } .thesms-rich-editor .ql-container.ql-snow { border-radius: 0 0 0.5rem 0.5rem; font-size: 1rem; color: #e5e7eb; background: var(--hero-card); } /* Snow ships dark body text on .ql-editor - force readable light text (quill.snow.css loads after app.css) */ .thesms-rich-editor .ql-container.ql-snow .ql-editor { min-height: 7rem; padding: 0.75rem 1rem; line-height: 1.55; color: #e5e7eb !important; background-color: var(--hero-card) !important; } .thesms-rich-editor .ql-editor.ql-blank::before { color: var(--gray-500); font-style: normal; left: 1rem; right: 1rem; } .thesms-rich-editor .ql-editor a { color: var(--primary-300); text-decoration: underline; text-underline-offset: 2px; } .thesms-rich-editor .ql-editor strong { color: #f3f4f6; } .thesms-rich-editor .ql-editor blockquote { margin: 0.35rem 0 0.5rem; padding: 0.4rem 0.65rem 0.4rem 0.75rem; border-left: 3px solid rgba(139, 92, 246, 0.55); background: rgba(139, 92, 246, 0.08); border-radius: 0 6px 6px 0; color: var(--gray-400); } .thesms-rich-editor .ql-editor ul, .thesms-rich-editor .ql-editor ol { padding-left: 1.35rem; margin: 0.35rem 0; } .thesms-rich-editor .ql-editor li { margin: 0.15rem 0; } .thesms-rich-editor .ql-editor img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 0.35rem 0; } /* Atomic @mention chips while composing forum replies/threads */ .thesms-rich-editor .ql-editor .ql-forum-mention { display: inline-flex; align-items: center; max-width: 100%; margin: 0 0.08rem; padding: 0.08rem 0.45rem 0.1rem; border-radius: 999px; font-size: 0.88em; font-weight: 600; line-height: 1.35; vertical-align: baseline; white-space: nowrap; user-select: none; -webkit-user-select: none; cursor: default; border: 1px solid transparent; } .thesms-rich-editor .ql-editor .ql-forum-mention--shop, .thesms-rich-editor .ql-editor .ql-forum-mention--business { color: #c4b5fd; background: rgba(139, 92, 246, 0.22); border-color: rgba(167, 139, 250, 0.35); } .thesms-rich-editor .ql-editor .ql-forum-mention--member { color: #93c5fd; background: rgba(59, 130, 246, 0.18); border-color: rgba(96, 165, 250, 0.32); } [data-theme="light"] .thesms-rich-editor .ql-editor .ql-forum-mention--shop, [data-theme="light"] .thesms-rich-editor .ql-editor .ql-forum-mention--business { color: #5b21b6; background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.28); } [data-theme="light"] .thesms-rich-editor .ql-editor .ql-forum-mention--member { color: #1d4ed8; background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.24); } /* Lighter toolbar glyphs; active = purple (quill.snow.css loads after app.css - !important beats its SVG defaults) */ .thesms-rich-editor .ql-toolbar.ql-snow .ql-stroke, .forum-field-wrap > .ql-toolbar.ql-snow .ql-stroke { stroke: #e5e7eb !important; } .thesms-rich-editor .ql-toolbar.ql-snow .ql-fill, .forum-field-wrap > .ql-toolbar.ql-snow .ql-fill { fill: #e5e7eb !important; } .thesms-rich-editor .ql-toolbar.ql-snow button:hover .ql-stroke, .thesms-rich-editor .ql-toolbar.ql-snow button:focus-visible .ql-stroke, .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-stroke, .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible .ql-stroke { stroke: #ffffff !important; } .thesms-rich-editor .ql-toolbar.ql-snow button:hover .ql-fill, .thesms-rich-editor .ql-toolbar.ql-snow button:focus-visible .ql-fill, .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-fill, .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible .ql-fill { fill: #ffffff !important; } .thesms-rich-editor .ql-toolbar.ql-snow button.ql-active .ql-stroke, .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--primary-300) !important; } .thesms-rich-editor .ql-toolbar.ql-snow button.ql-active .ql-fill, .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--primary-300) !important; } .thesms-rich-editor .ql-toolbar.ql-snow .ql-picker-label .ql-stroke, .forum-field-wrap > .ql-toolbar.ql-snow .ql-picker-label .ql-stroke { stroke: #e5e7eb !important; } .thesms-rich-editor .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke, .forum-field-wrap > .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke { stroke: #f3f4f6 !important; } .thesms-rich-editor .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke, .forum-field-wrap > .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--primary-300) !important; } /* Tooltips / color picker flyouts still use global .ql-snow rules below */ .thesms-rich-editor .ql-container.ql-snow .ql-stroke { stroke: var(--gray-400); } .thesms-rich-editor .ql-container.ql-snow .ql-fill { fill: var(--gray-400); } .thesms-rich-editor .ql-snow .ql-tooltip, .forum-field-wrap .ql-snow .ql-tooltip { background-color: #1f2128; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--gray-200); border-radius: 8px; padding: 0.45rem 0.55rem; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); z-index: 50; } .thesms-rich-editor .ql-snow .ql-tooltip input[type="text"], .forum-field-wrap .ql-snow .ql-tooltip input[type="text"] { color: #f3f4f6; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; padding: 0.35rem 0.5rem; min-width: 12rem; } .thesms-rich-editor .ql-snow .ql-tooltip a.ql-action, .thesms-rich-editor .ql-snow .ql-tooltip a.ql-remove, .forum-field-wrap .ql-snow .ql-tooltip a.ql-action, .forum-field-wrap .ql-snow .ql-tooltip a.ql-remove { color: var(--primary-300); } .thesms-rich-editor .ql-snow .ql-tooltip a.ql-action:hover, .thesms-rich-editor .ql-snow .ql-tooltip a.ql-remove:hover, .forum-field-wrap .ql-snow .ql-tooltip a.ql-action:hover, .forum-field-wrap .ql-snow .ql-tooltip a.ql-remove:hover { color: var(--primary-400); } /* Publish modal uses forum-field-wrap + forum Quill rules; slightly taller body for roster copy. */ #publish-modal .forum-field-wrap .thesms-rich-editor .ql-editor { min-height: 9rem; } .forum-post-content img { max-width: 100%; max-height: 22rem; width: auto; height: auto; border-radius: 0.5rem; margin: 0.5rem 0; cursor: zoom-in; transition: transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .forum-post-content img:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } .forum-post-content blockquote { margin: 0.35rem 0 0.65rem; padding: 0.45rem 0.65rem 0.45rem 0.75rem; border-left: 3px solid rgba(139, 92, 246, 0.6); background: rgba(139, 92, 246, 0.08); border-radius: 0 6px 6px 0; font-size: 0.86rem; color: var(--gray-400); line-height: 1.5; } .forum-post-content blockquote a { color: var(--primary-300); text-decoration: none; font-weight: 600; } .forum-post-content blockquote a:hover { text-decoration: underline; } .forum-post-content pre { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; padding: 0.6rem 0.8rem; overflow-x: auto; font-size: 0.82rem; color: #f3f4f6; margin: 0.4rem 0; } .forum-post-content code { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px; padding: 0.05rem 0.3rem; font-size: 0.85em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #f3f4f6; } .forum-post-content pre code { background: transparent; border: 0; padding: 0; } /* Thread list: Discord-style avatar + unread dot */ .forum-thread-row { align-items: flex-start; } .forum-thread-row__avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: linear-gradient(135deg, var(--primary-600), var(--primary-500)); color: var(--text-on-primary); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; margin-top: 0; } .forum-thread-row--skeleton .forum-thread-row__avatar { display: none; } .forum-thread-row--new .forum-thread-row__title { color: #fff; font-weight: 700; } .forum-thread-row__new-dot { display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--primary-400); margin-left: 0.4rem; vertical-align: middle; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22); } .forum-thread-row--new { background: linear-gradient(90deg, rgba(139, 92, 246, 0.04) 0%, transparent 70%); } .forum-thread-row--new:hover { background: rgba(139, 92, 246, 0.09); } /* Post actions (Reply / Copy link) */ .forum-post__actions { display: flex; gap: 0.3rem; position: absolute; top: 0.25rem; right: 0.25rem; opacity: 0; transform: translateY(-2px); transition: opacity 0.14s ease, transform 0.14s ease; background: rgba(20, 20, 22, 0.92); border: 1px solid var(--forum-panel-border); border-radius: 8px; padding: 0.18rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); pointer-events: none; } .forum-post { position: relative; } .forum-post:hover .forum-post__actions, .forum-post:focus-within .forum-post__actions { opacity: 1; transform: translateY(0); pointer-events: auto; } .forum-post-action { display: inline-flex; align-items: center; gap: 0.3rem; border: none; background: transparent; color: var(--gray-300); font-size: 0.72rem; font-weight: 500; padding: 0.3rem 0.45rem; border-radius: 6px; cursor: pointer; line-height: 1; transition: background 0.12s ease, color 0.12s ease; } .forum-post-action:hover, .forum-post-action:focus-visible { background: rgba(139, 92, 246, 0.2); color: #fff; outline: none; } .forum-post-action svg { display: block; } .forum-post-action--danger { color: #fca5a5; } .forum-post-action--danger:hover, .forum-post-action--danger:focus-visible { background: rgba(239, 68, 68, 0.18); color: #fecaca; } .forum-post-edit { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.15rem; } .forum-post-edit__label { font-size: 0.72rem; font-weight: 600; color: var(--gray-400); } .forum-post-edit__title { width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--forum-panel-border); background: rgba(0, 0, 0, 0.22); color: var(--forum-text, #ececee); padding: 0.45rem 0.6rem; font-size: 0.92rem; } .forum-post-edit__editor-wrap { border-radius: 10px; overflow: visible; border: 1px solid var(--forum-panel-border); } .forum-post-edit__editor-wrap > .ql-toolbar.ql-snow { flex-wrap: wrap; overflow: visible; } .forum-post-edit__actions { display: flex; flex-wrap: wrap; gap: 0.45rem; } @media (max-width: 720px), (hover: none) and (pointer: coarse) { .forum-post__actions { opacity: 1; transform: none; pointer-events: auto; position: static; background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: 0.35rem; justify-content: flex-start; } .forum-post-action { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--forum-panel-border); } } /* Flash highlight after anchor navigation */ @keyframes forumPostFlash { 0% { background: rgba(139, 92, 246, 0.28); box-shadow: inset 3px 0 0 var(--primary-500); } 100% { background: transparent; box-shadow: none; } } .forum-post--flash { animation: forumPostFlash 1.8s ease-out; } /* Reply-to pill */ .forum-reply-to { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 1rem; padding: 0.55rem 0.7rem; border-radius: 8px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.25); border-left: 3px solid var(--primary-500); } .forum-reply-to[hidden] { display: none; } .forum-reply-to__body { min-width: 0; flex: 1; font-size: 0.8125rem; color: var(--gray-300); line-height: 1.45; } .forum-reply-to__label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary-300); margin-right: 0.4rem; } .forum-reply-to__who { font-weight: 600; color: #e5e7eb; } .forum-reply-to__excerpt { display: block; color: var(--gray-500); margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .forum-reply-to__cancel { flex-shrink: 0; border: none; background: transparent; color: var(--gray-400); font-size: 1.2rem; width: 1.7rem; height: 1.7rem; border-radius: 999px; cursor: pointer; line-height: 1; transition: background 0.12s ease, color 0.12s ease; } .forum-reply-to__cancel:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } /* Compose tools bar */ .forum-compose-tools { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.75rem 0.75rem; border-top: 1px solid var(--forum-panel-border); background: rgba(0, 0, 0, 0.15); } .forum-tool-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--gray-300); width: 2rem; height: 2rem; border-radius: 8px; cursor: pointer; font-size: 1.05rem; line-height: 1; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .forum-tool-btn:hover, .forum-tool-btn:focus-visible { background: rgba(139, 92, 246, 0.16); border-color: rgba(139, 92, 246, 0.35); color: #fff; outline: none; } .forum-tool-btn__icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; } .forum-compose-tools__spacer { flex: 1; } .forum-char-count { font-size: 0.7rem; color: var(--gray-500); font-variant-numeric: tabular-nums; margin-right: 0.35rem; } .forum-char-count--warn { color: #fbbf24; } .forum-char-count--over { color: #f87171; font-weight: 700; } .forum-compose-tools__send { min-height: 2rem; padding: 0.35rem 1rem; font-size: 0.875rem; border-radius: 8px; } .forum-compose-tools__send:disabled { opacity: 0.45; cursor: not-allowed; } .forum-compose-tools__send--ready { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22); } /* Drop zone highlight */ .forum-drop-zone { position: relative; } .forum-drop-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border-radius: 8px; background: rgba(139, 92, 246, 0.18); border: 2px dashed var(--primary-400); z-index: 5; pointer-events: none; } .forum-drop-overlay__inner { color: #fff; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; padding: 0.5rem 1rem; background: rgba(15, 23, 42, 0.72); border-radius: 8px; } .forum-drop-zone--over .forum-drop-overlay { display: flex; } /* Emoji picker */ .forum-emoji-picker { position: fixed; z-index: 11000; width: min(22rem, calc(100vw - 1rem)); max-height: 25rem; background: #18181b; border: 1px solid var(--forum-panel-border); border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); display: none; flex-direction: column; overflow: hidden; font-size: 0.9rem; } .forum-emoji-picker--visible { display: flex; } .forum-emoji-picker__head { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--forum-panel-border); } .forum-emoji-picker__search { width: 100%; padding: 0.4rem 0.65rem; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--forum-panel-border); border-radius: 6px; color: #f3f4f6; font-size: 0.85rem; outline: none; } .forum-emoji-picker__search:focus { border-color: var(--primary-500); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.28); } .forum-emoji-picker__tabs { display: flex; gap: 0.1rem; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--forum-panel-border); overflow-x: auto; scrollbar-width: thin; } .forum-emoji-picker__tab { flex: 0 0 auto; border: none; background: transparent; width: 2rem; height: 2rem; border-radius: 6px; cursor: pointer; font-size: 1.05rem; transition: background 0.12s ease; } .forum-emoji-picker__tab:hover { background: rgba(255, 255, 255, 0.06); } .forum-emoji-picker__tab--active { background: rgba(139, 92, 246, 0.22); box-shadow: inset 0 -2px 0 var(--primary-400); } .forum-emoji-picker__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 0.45rem; overflow-y: auto; flex: 1; min-height: 10rem; } .forum-emoji-picker__btn { border: none; background: transparent; width: 100%; aspect-ratio: 1; border-radius: 6px; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0; transition: background 0.1s ease, transform 0.1s ease; } .forum-emoji-picker__btn:hover, .forum-emoji-picker__btn:focus-visible { background: rgba(139, 92, 246, 0.22); transform: scale(1.1); outline: none; } .forum-emoji-picker__empty { grid-column: 1 / -1; padding: 1.25rem 0.75rem; text-align: center; color: var(--gray-500); font-size: 0.85rem; } .forum-emoji-picker__foot { padding: 0.45rem 0.7rem; border-top: 1px solid var(--forum-panel-border); font-size: 0.72rem; color: var(--gray-500); letter-spacing: 0.02em; } /* Image lightbox */ .forum-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88); display: none; align-items: center; justify-content: center; z-index: 12500; padding: 1.5rem; cursor: zoom-out; } .forum-lightbox--visible { display: flex; } .forum-lightbox__img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); cursor: default; } .forum-lightbox__close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: none; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.4rem; cursor: pointer; line-height: 1; transition: background 0.12s ease; } .forum-lightbox__close:hover { background: rgba(255, 255, 255, 0.22); } html.forum-lightbox-open { overflow: hidden; } /* Mentions list avatar */ .forum-mention-item { display: flex !important; align-items: center; gap: 0.55rem; padding: 0.45rem 0.7rem !important; } .forum-mention-item__avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: linear-gradient(135deg, var(--primary-600), var(--primary-500)); color: var(--text-on-primary); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; overflow: hidden; } .forum-mention-item__avatar--img { background: var(--bg-muted, #f3f4f6); padding: 0; } .forum-mention-item__avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; } .forum-mention-item__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .forum-mention-item__kind { margin-top: 0 !important; } /* Toast */ .forum-toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translate(-50%, 1rem); background: rgba(15, 23, 42, 0.94); color: #f3f4f6; font-size: 0.85rem; font-weight: 500; padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--forum-panel-border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); z-index: 13000; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .forum-toast--show { opacity: 1; transform: translate(-50%, 0); } .forum-toast--error { background: rgba(127, 29, 29, 0.94); border-color: rgba(248, 113, 113, 0.5); } /* Mobile: sticky bottom compose + friendlier spacing */ @media (max-width: 720px) { .forum-compose-dock { position: sticky; bottom: 0; z-index: 40; border-radius: 12px 12px 0 0; border-bottom: 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45); } .forum-compose-dock__head { padding: 0.55rem 0.85rem; } .forum-compose-dock .thesms-rich-editor .ql-container.ql-snow .ql-editor { min-height: 4rem; max-height: 35vh; overflow-y: auto; } .forum-compose-tools { flex-wrap: wrap; } .forum-reply-to { margin: 0 0.75rem; } .forum-post__avatar { width: 2rem; height: 2rem; font-size: 0.6rem; } .forum-post { padding: 0.45rem 0.6rem 0.6rem 0.55rem; } .forum-post-content { font-size: 0.9rem; } .forum-thread-header__title { font-size: 1.15rem; } .forum-emoji-picker { width: calc(100vw - 1rem); max-height: 60vh; } .forum-emoji-picker__grid { grid-template-columns: repeat(7, 1fr); } } /* Dark-ish Quill tweaks for compact compose dock: reduce top border to merge with dock header */ .forum-compose-dock .thesms-rich-editor .ql-toolbar.ql-snow { border-top: 0; border-left: 0; border-right: 0; border-radius: 0; background: rgba(0, 0, 0, 0.12); } .forum-compose-dock .thesms-rich-editor .ql-container.ql-snow { border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; } /* ============================================================================= Community forum - v2 overhaul (chat-app inspired: Discord/Telegram/WhatsApp) - Real avatars (image or colour+initial) everywhere - Cleaner, readable thread list rows - Chat-bubble thread view with role-aware bubble colours - Flatter, tighter composer with sticky-mobile dock ============================================================================ */ /* Unified forum avatar component - circular like site-wide avatars. */ .forum-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: linear-gradient(135deg, var(--primary-600), var(--primary-500)); color: var(--text-on-primary, #fff); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; overflow: hidden; text-transform: uppercase; box-shadow: 0 0 0 2px rgba(26, 27, 30, 0.95); user-select: none; } .forum-avatar--xs { width: 1.4rem; height: 1.4rem; font-size: 0.58rem; flex-shrink: 0; } .forum-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: 0.65rem; } .forum-avatar--md { width: 2.25rem; height: 2.25rem; font-size: 0.72rem; } .forum-avatar--lg { width: 2.65rem; height: 2.65rem; font-size: 0.78rem; } .forum-avatar--xl { width: 5rem; height: 5rem; font-size: 2.85rem; line-height: 1; } .forum-avatar--img { background: rgba(255, 255, 255, 0.04); padding: 0; } .forum-avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Custom colour+text avatars (profile settings) - match messages/account, not default gradient tile. */ .forum-avatar[style*="background-color"], .forum-avatar[style*="background:"] { color: var(--text-primary); box-shadow: none; text-transform: none; } .forum-avatar.avatar-gen-text--len-1.avatar-gen-text--emoji { font-size: 1.35rem; line-height: 1; } .forum-avatar.avatar-gen-text--len-2.avatar-gen-text--emoji { font-size: 1.05rem; } .forum-avatar.avatar-gen-text--len-3.avatar-gen-text--emoji, .forum-avatar.avatar-gen-text--len-4.avatar-gen-text--emoji { font-size: 0.82rem; } .forum-avatar.avatar-gen-text--len-1.avatar-gen-text--letters { font-size: 0.95rem; } .forum-avatar.avatar-gen-text--len-2.avatar-gen-text--letters { font-size: 0.78rem; } .forum-avatar.avatar-gen-text--len-3.avatar-gen-text--letters { font-size: 0.65rem; } .forum-avatar.avatar-gen-text--len-4.avatar-gen-text--letters { font-size: 0.52rem; letter-spacing: -0.04em; } .forum-avatar--sm.avatar-gen-text--len-1.avatar-gen-text--emoji { font-size: 1rem; } .forum-avatar--sm.avatar-gen-text--len-2.avatar-gen-text--emoji { font-size: 0.82rem; } .forum-avatar--sm.avatar-gen-text--len-3.avatar-gen-text--emoji, .forum-avatar--sm.avatar-gen-text--len-4.avatar-gen-text--emoji { font-size: 0.65rem; } .forum-avatar--admin { box-shadow: 0 0 0 2px rgba(26, 27, 30, 0.95), 0 0 0 3px rgba(139, 92, 246, 0.55); } /* ---------- Thread list: cleaner rows with real avatars ---------- */ .forum-app__main .forum-thread-list { padding: 0.25rem 0.3rem 0.5rem; gap: 0.15rem; } .forum-thread-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.85rem; padding: 0.7rem 0.8rem; border-radius: 10px; background: transparent; text-decoration: none; color: inherit; transition: background 0.12s ease, transform 0.12s ease; } .forum-thread-row:hover { background: rgba(255, 255, 255, 0.04); } .forum-thread-row:active { transform: translateY(0.5px); } .forum-thread-row__main { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .forum-thread-row__title { font-size: 1rem; font-weight: 600; line-height: 1.3; color: #ececee; margin: 0; display: flex; align-items: center; gap: 0.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .forum-thread-row:hover .forum-thread-row__title { color: #fff; } .forum-thread-row__meta { margin: 0; font-size: 0.78rem; color: var(--gray-500); display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; line-height: 1.2; } .forum-thread-row__author { color: var(--gray-400); font-weight: 500; } .forum-thread-row__pill { margin: 0; } .forum-thread-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; flex-shrink: 0; text-align: right; } .forum-thread-row__time { font-size: 0.75rem; color: var(--gray-400); font-variant-numeric: tabular-nums; white-space: nowrap; } .forum-thread-row__stat { font-size: 0.7rem; color: var(--gray-600); white-space: nowrap; } .forum-thread-row--new .forum-thread-row__title { color: #fff; } .forum-thread-row--new .forum-thread-row__time { color: var(--primary-300); font-weight: 600; } .forum-thread-row__new-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--primary-400); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); flex-shrink: 0; } @media (max-width: 560px) { .forum-thread-row { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 0.35rem; column-gap: 0.75rem; padding: 0.65rem 0.7rem; } .forum-thread-row__side { grid-column: 2 / 3; grid-row: 2 / 3; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.6rem; text-align: left; } .forum-thread-row__title { font-size: 0.95rem; } .forum-thread-row__meta { font-size: 0.72rem; } } /* ---------- Thread detail: chat bubbles with real avatars ---------- */ .forum-thread-detail:not(.forum-thread-detail--loading) { border-radius: 14px; border: 1px solid var(--forum-panel-border); background: var(--forum-panel); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); overflow: hidden; } .forum-thread-header { padding: 1.1rem 1.2rem 0.9rem; border-bottom: 1px solid var(--forum-panel-border); background: linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, rgba(0, 0, 0, 0.08) 100%); } .forum-thread-header__title { font-size: 1.4rem; line-height: 1.22; letter-spacing: -0.015em; color: #f4f4f5; margin: 0 0 0.5rem; font-weight: 700; word-break: break-word; } .forum-thread-header__meta { font-size: 0.82rem; color: var(--gray-500); margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; } .forum-thread-header__author { color: var(--gray-300); font-weight: 600; } .forum-post-stream { display: flex; flex-direction: column; gap: 0; padding: 0.65rem 0 0.5rem; } .forum-post-stream > .forum-post:not(.forum-post--continued):not(:first-child) { margin-top: var(--thesms-forum-post-gap); } /* Individual post - chat bubble */ .forum-post { display: grid; grid-template-columns: 2.65rem minmax(0, 1fr); gap: 0.65rem; padding: 0.4rem 1rem 0.4rem 0.9rem; margin: 0; border-radius: 0; background: transparent; position: relative; align-items: flex-start; } .forum-post:hover { background: transparent; } .forum-post--op { background: rgba(139, 92, 246, 0.05); box-shadow: inset 2px 0 0 var(--primary-500); } .forum-post--op:hover { background: rgba(139, 92, 246, 0.07); } .forum-post__rail { width: 2.65rem; display: flex; flex-direction: column; align-items: center; position: relative; padding-top: 0.1rem; } .forum-post__rail .forum-avatar { width: 2.35rem; height: 2.35rem; font-size: 0.72rem; } .forum-post__line { display: block; width: 2px; flex: 1; min-height: 0.75rem; margin-top: 0.35rem; border-radius: 999px; background: linear-gradient(180deg, rgba(113, 113, 122, 0.45), rgba(82, 82, 91, 0.08)); } .forum-post--continued { padding-top: 0.05rem; padding-bottom: 0.15rem; } .forum-post--continued .forum-post__rail .forum-avatar { visibility: hidden; box-shadow: none; } .forum-post__body { min-width: 0; width: 100%; } .forum-post__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.55rem; margin-bottom: 0.3rem; } .forum-post__name { font-weight: 600; font-size: 0.92rem; color: #f4f4f5; letter-spacing: -0.005em; } .forum-post--business .forum-post__name { color: #a7f3d0; } .forum-post--admin .forum-post__name { color: var(--primary-300); } .forum-post__time { font-size: 0.72rem; color: var(--gray-500); margin-left: auto; font-variant-numeric: tabular-nums; } .forum-post__time--tail { display: inline-block; margin-left: 0.6rem; font-size: 0.68rem; vertical-align: baseline; opacity: 0.7; } /* The readable bubble */ .forum-post__bubble { width: 100%; box-sizing: border-box; border-radius: 14px; padding: 0.65rem 0.85rem 0.7rem; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.05); position: relative; transition: background 0.12s ease, border-color 0.12s ease; } .forum-post:hover .forum-post__bubble { background: rgba(255, 255, 255, 0.05); } .forum-post--op .forum-post__bubble { background: rgba(139, 92, 246, 0.13); border-color: rgba(139, 92, 246, 0.32); } .forum-post--business .forum-post__bubble { background: rgba(16, 185, 129, 0.1); border-color: rgba(52, 211, 153, 0.25); } .forum-post--admin .forum-post__bubble { background: rgba(139, 92, 246, 0.13); border-color: rgba(139, 92, 246, 0.32); } .forum-post--continued .forum-post__bubble { border-top-left-radius: 6px; } .forum-post-content { font-size: 0.95rem; line-height: 1.55; color: #e4e4e7; word-break: break-word; } .forum-post-content p { margin: 0 0 0.55rem; } .forum-post-content p:last-child { margin-bottom: 0; } .forum-post__removed { margin: 0; font-size: 0.9rem; color: var(--gray-400); font-style: italic; } .forum-post__removal-reason { margin: 0.55rem 0 0; font-size: 0.82rem; color: var(--gray-500); line-height: 1.45; } .forum-post__edited { font-size: 0.68rem; color: var(--gray-500); margin-left: 0.35rem; font-style: italic; } .forum-post--removed .forum-post__bubble { background: rgba(239, 68, 68, 0.08); border-color: rgba(248, 113, 113, 0.22); } .forum-post-edit__reason { width: 100%; box-sizing: border-box; margin-top: 0.35rem; margin-bottom: 0.5rem; min-height: 4.5rem; resize: vertical; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.2); color: #e4e4e7; padding: 0.5rem 0.65rem; font-size: 0.88rem; line-height: 1.45; } .forum-post-content strong { color: #f9fafb; } .forum-post-content a { color: var(--primary-300); text-underline-offset: 2px; } .forum-post-content blockquote { margin: 0.15rem 0 0.55rem; padding: 0.45rem 0.65rem; border-left: 3px solid rgba(139, 92, 246, 0.55); background: rgba(139, 92, 246, 0.07); border-radius: 0 8px 8px 0; color: var(--gray-400); font-size: 0.875rem; } .forum-post-content blockquote a { color: var(--primary-200); font-weight: 600; } .forum-post-content img { max-width: min(100%, 22rem); border-radius: 10px; display: block; margin: 0.45rem 0 0.25rem; cursor: zoom-in; border: 1px solid rgba(255, 255, 255, 0.08); } .forum-post-content ul, .forum-post-content ol { margin: 0.35rem 0 0.55rem 1.1rem; padding: 0; } .forum-post-content li { margin-bottom: 0.15rem; } .forum-post__actions { display: flex; gap: 0.25rem; margin-top: 0.35rem; opacity: 0; transition: opacity 0.12s ease; position: static; top: auto; right: auto; transform: none; pointer-events: none; background: transparent; border: 0; box-shadow: none; padding: 0; justify-content: flex-start; } .forum-post:hover .forum-post__actions, .forum-post:focus-within .forum-post__actions { opacity: 1; pointer-events: auto; } .forum-post-action { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--gray-400); background: transparent; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 0.18rem 0.55rem; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .forum-post-action:hover, .forum-post-action:focus-visible { background: rgba(139, 92, 246, 0.15); color: #fff; border-color: rgba(139, 92, 246, 0.45); outline: none; } .forum-post-action svg { width: 0.85rem; height: 0.85rem; } .forum-post--flash .forum-post__bubble { animation: forum-post-flash 1.6s ease-out; } @keyframes forum-post-flash { 0%, 30% { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.55); background: rgba(139, 92, 246, 0.2); } 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); } } /* ---------- Composer dock - flatter, chat-style ---------- */ .forum-compose-dock { border-radius: 14px; border: 1px solid var(--forum-panel-border); background: var(--forum-panel); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4); overflow: hidden; margin-top: 0.75rem; } /* The dock's "Message/hint" head is now sr-only in markup - no visible chrome */ .forum-compose-dock .forum-reply-form, .forum-compose-dock .forum-new-thread-form { padding: 0; gap: 0; } .forum-compose-dock .forum-reply-form .forum-compose-dock__field, .forum-compose-dock .forum-new-thread-form .field { padding: 0; } .forum-compose-dock .forum-reply-form .thesms-rich-editor, .forum-compose-dock .forum-new-thread-form .thesms-rich-editor { background: transparent; } .forum-compose-dock .thesms-rich-editor .ql-toolbar.ql-snow { background: rgba(0, 0, 0, 0.22); border: 0; border-bottom: 1px solid var(--forum-panel-border); padding: 0.35rem 0.55rem; } .forum-compose-dock .thesms-rich-editor .ql-container.ql-snow { border: 0; background: transparent; } .forum-compose-dock .thesms-rich-editor .ql-container.ql-snow .ql-editor { min-height: 3.25rem; max-height: 18rem; padding: 0.7rem 0.9rem; background: transparent !important; font-size: 0.95rem; line-height: 1.55; color: #ececee !important; } .forum-compose-dock .thesms-rich-editor .ql-editor.ql-blank::before { left: 0.9rem; right: 0.9rem; color: var(--gray-500); font-style: normal; opacity: 0.9; } .forum-compose-tools { padding: 0.45rem 0.6rem 0.55rem; border-top: 1px solid var(--forum-panel-border); background: rgba(0, 0, 0, 0.08); gap: 0.25rem; } .forum-tool-btn { width: 2.15rem; height: 2.15rem; border-radius: 999px; color: var(--gray-400); } .forum-tool-btn:hover, .forum-tool-btn:focus-visible { background: rgba(255, 255, 255, 0.06); border-color: transparent; color: #fff; } .forum-compose-tools__send { min-height: 2.15rem; padding: 0.4rem 1.1rem; border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; } .forum-compose-tools__send--ready { box-shadow: 0 4px 14px rgba(139, 92, 246, 0.45); } /* The quoted-reply pill inside the dock */ .forum-compose-dock .forum-reply-to { margin: 0.6rem 0.7rem 0; border-radius: 10px; } /* ---------- New thread form tweaks (keep title visible) ---------- */ .forum-compose-dock .forum-new-thread-form .field { padding: 0.65rem 0.85rem 0; } .forum-compose-dock .forum-new-thread-form .field + .field { padding-top: 0.35rem; } .forum-compose-dock .forum-new-thread-form .forum-compose-dock__field { padding: 0 0 0; } .forum-compose-dock .forum-new-thread-form .forum-compose-dock__field .forum-field-wrap { border-top: 1px solid var(--forum-panel-border); padding-top: 0.2rem; } /* ---------- Empty/loading states ---------- */ .forum-empty-state { padding: 3rem 1.25rem; color: var(--gray-500); } .forum-empty-state__title { font-size: 1rem; color: var(--gray-300); font-weight: 600; margin-bottom: 0.4rem; } /* ---------- Channel head refinement (Discord-style "#threads" header) ---------- */ .forum-app__channel-head { padding: 0.75rem 1rem; } .forum-app__channel-hash { color: var(--gray-500); font-size: 1.2rem; } .forum-app__channel-name { font-size: 0.95rem; font-weight: 600; color: #f4f4f5; } .forum-app__channel-desc { font-size: 0.75rem; color: var(--gray-500); } /* ---------- Masthead - calmer, reads better above the app ---------- */ .forum-app__masthead { padding: 0.9rem 1.1rem 1rem; margin-bottom: 1rem; background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), rgba(0, 0, 0, 0.2)); border-color: rgba(139, 92, 246, 0.2); } .forum-app__title { font-size: 1.5rem; letter-spacing: -0.025em; } .forum-app__subtitle { font-size: 0.875rem; } /* ---------- Mobile - sticky composer, tighter spacing ---------- */ @media (max-width: 720px) { .forum-app__masthead { padding: 0.75rem 0.9rem 0.85rem; } .forum-app__title { font-size: 1.25rem; } .forum-app__inner { padding-left: 0.5rem; padding-right: 0.5rem; } .forum-thread-detail:not(.forum-thread-detail--loading) { border-radius: 10px; } .forum-thread-header { padding: 0.85rem 0.9rem 0.7rem; } .forum-thread-header__title { font-size: 1.15rem; } .forum-post { grid-template-columns: 2.25rem minmax(0, 1fr); padding: 0.35rem 0.7rem 0.45rem 0.65rem; column-gap: 0.55rem; row-gap: 0; } .forum-post__rail { width: 2.25rem; } .forum-post__rail .forum-avatar { width: 2rem; height: 2rem; font-size: 0.62rem; } .forum-post-content { font-size: 0.92rem; line-height: 1.5; } /* Avatar + meta on row 1; bubble spans full post width on row 2 */ .forum-post:not(.forum-post--continued) .forum-post__body { display: contents; } .forum-post:not(.forum-post--continued) .forum-post__rail { grid-column: 1; grid-row: 1 / 3; align-self: start; } .forum-post:not(.forum-post--continued) .forum-post__head { grid-column: 2; grid-row: 1; align-self: start; gap: 0.15rem 0.45rem; margin-bottom: 0; } .forum-post:not(.forum-post--continued) .forum-post__bubble { grid-column: 1 / -1; grid-row: 2; width: 100%; padding: 0.55rem 0.7rem 0.6rem; border-radius: 12px; } .forum-post--continued .forum-post__bubble { padding: 0.55rem 0.7rem 0.6rem; border-radius: 12px; } .forum-post__actions { opacity: 1; } /* always visible on touch */ .forum-compose-dock { position: sticky; bottom: 0; z-index: 40; border-radius: 12px 12px 0 0; margin-top: 0.5rem; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5); } .forum-compose-dock .thesms-rich-editor .ql-container.ql-snow .ql-editor { min-height: 2.75rem; max-height: 35vh; font-size: 16px; /* avoid iOS zoom */ } .forum-compose-tools { padding: 0.4rem 0.5rem 0.5rem; } } /* Google Places Autocomplete panel above account cards / modals */ .pac-container, .thesms-places-dropdown { z-index: 12000; } .thesms-places-dropdown { box-sizing: border-box; margin-top: 2px; border-radius: 0.375rem; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); background: var(--gray-900, #111827); border: 1px solid var(--gray-700, #374151); } .account-location-autocomplete .thesms-places-dropdown { position: absolute; left: 0; right: 0; top: 100%; width: 100%; max-height: 240px; overflow-y: auto; } .thesms-places-item { cursor: pointer; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.35; } .thesms-places-item:hover, .thesms-places-item.pac-item-selected { background: rgba(139, 92, 246, 0.12); } /* ========================================================================= Forum: redesign (2026-04) - clean, modern Discourse-inspired list. All selectors scoped under .forum-app for specificity, so these rules win over earlier competing blocks without needing to delete legacy styles. ========================================================================= */ .forum-app { --forum-surface: #17181b; --forum-surface-hover: rgba(255, 255, 255, 0.035); --forum-surface-active: rgba(139, 92, 246, 0.09); --forum-border: rgba(255, 255, 255, 0.06); --forum-border-strong: rgba(255, 255, 255, 0.09); --forum-text: #e8e8ea; --forum-text-dim: #a1a1aa; --forum-text-muted: #71717a; --forum-rail-width: clamp(14rem, 20vw, 17rem); --forum-cat-general: #64748b; --forum-cat-shops: #8b5cf6; --forum-cat-roster: #14b8a6; --forum-cat-staff: #f59e0b; --forum-cat-new: #a78bfa; } /* Light theme: forum tokens assume dark panels; rail + “View” radios sit on the page background. */ [data-theme="light"] .forum-app .forum-section-head.forum-section-head--filter, [data-theme="light"] .forum-app .forum-app__filters.forum-section-head.forum-section-head--filter { background: var(--hero-card); border-color: var(--hero-border); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } [data-theme="light"] .forum-app .forum-category-filter__label, [data-theme="light"] .forum-app .forum-sort-filter__label { color: var(--gray-500); } [data-theme="light"] .forum-app .forum-category-checkbox { color: var(--gray-600); } [data-theme="light"] .forum-app .forum-category-checkbox:hover { background: rgba(15, 23, 42, 0.05); color: var(--text-primary); } [data-theme="light"] .forum-app .forum-category-checkbox:has(input:checked) { color: var(--text-primary); background: rgba(139, 92, 246, 0.14); } /* ---------- Container / grid ---------- */ .forum-app .forum-app__inner { max-width: 72rem; margin: 0 auto; } .forum-app .forum-app__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; } @media (min-width: 960px) { .forum-app .forum-app__grid { grid-template-columns: var(--forum-rail-width) minmax(0, 1fr); gap: 1.25rem; } } /* ---------- Masthead ---------- */ .forum-app .forum-app__masthead { padding: 0.9rem 1.15rem; margin-bottom: 0.85rem; border-radius: 14px; border: 1px solid var(--forum-border); background: radial-gradient(120% 120% at 0% 0%, rgba(139, 92, 246, 0.08) 0%, transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .forum-app .forum-app__masthead-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; } .forum-app .forum-app__masthead-text { gap: 0.5rem; } .forum-app .forum-app__title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: #f4f4f5; margin: 0; line-height: 1.15; } .forum-app .forum-app__subtitle { font-size: 0.825rem; line-height: 1.45; color: var(--forum-text-dim); margin: 0; max-width: 42rem; } .forum-app .forum-app__subtitle .forum-kbd { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: var(--forum-text); } .forum-app .forum-app__masthead-actions { padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; } .forum-app .forum-app__cta { padding: 0.55rem 1.05rem; font-size: 0.875rem; font-weight: 600; border-radius: 10px; box-shadow: 0 4px 18px rgba(139, 92, 246, 0.25); } .forum-app .forum-app__masthead-actions .forum-app__cta.btn-secondary { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); } .forum-app .forum-app__cta svg { width: 1rem; height: 1rem; } /* Simple masthead (e.g. /forum/new): same title + blurb vertical rhythm as list page */ .forum-app .forum-app__masthead--simple { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .forum-app .forum-app__masthead--simple .forum-app__subtitle { margin: 0; } /* Masthead sits on page chrome in light mode (not on dark --forum-surface like the thread panel). */ [data-theme="light"] .forum-app .forum-app__masthead { border-color: rgba(15, 23, 42, 0.1); background: radial-gradient(120% 120% at 0% 0%, rgba(139, 92, 246, 0.14) 0%, transparent 52%), linear-gradient(180deg, #ffffff 0%, #f4f4f8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(15, 23, 42, 0.06); } [data-theme="light"] .forum-app .forum-app__title { color: var(--text-primary); } [data-theme="light"] .forum-app .forum-app__subtitle { color: var(--gray-500); } [data-theme="light"] .forum-app .forum-app__subtitle .forum-kbd { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.12); color: var(--text-primary); } [data-theme="light"] .forum-app .forum-app__masthead-actions .forum-app__cta.btn-secondary { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } /* ---------- Notices / hints ---------- */ .forum-app .forum-app__notice { padding: 0.7rem 0.95rem; border-radius: 10px; margin: 0 0 0.85rem; border: 1px solid var(--forum-border); background: rgba(255, 255, 255, 0.02); } .forum-app .forum-app__notice-text { font-size: 0.85rem; } .forum-app .forum-app__hint { font-size: 0.8125rem; color: var(--forum-text-muted); margin: 0 0 0.85rem; padding: 0; line-height: 1.5; } .forum-app .forum-app__hint--inmain { margin: 0; padding: 0.55rem 1.15rem; border-bottom: 1px solid var(--forum-border); background: rgba(255, 255, 255, 0.015); color: var(--forum-text-muted); font-size: 0.78rem; } /* ---------- Sidebar rail ---------- */ .forum-app .forum-app__rail { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: 0.85rem; } .forum-app .forum-app__rail-heading { display: none; /* the filter card carries its own heading */ } .forum-app .forum-section-head.forum-section-head--filter, .forum-app .forum-app__filters.forum-section-head.forum-section-head--filter { display: flex; flex-direction: column; gap: 0.9rem; padding: 1rem; border-radius: 14px; border: 1px solid var(--forum-border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008)); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); margin-bottom: 0; } .forum-app .forum-category-filter, .forum-app .forum-sort-filter { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; width: 100%; } .forum-app .forum-category-filter__label, .forum-app .forum-sort-filter__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--forum-text-muted); margin: 0; padding: 0; } /* Search input pill */ .forum-app .forum-category-filter--search .forum-category-filter__select, .forum-app .forum-sort-filter__select { width: 100%; box-sizing: border-box; display: block; padding: 0.55rem 0.75rem; font-size: 0.875rem; color: var(--forum-text); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--forum-border-strong); border-radius: 10px; transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .forum-app .forum-category-filter--search .forum-category-filter__select:focus, .forum-app .forum-sort-filter__select:focus { outline: none; border-color: rgba(139, 92, 246, 0.55); background: rgba(0, 0, 0, 0.35); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18); } .forum-app .forum-category-filter--search .forum-category-filter__select::placeholder { color: var(--forum-text-muted); } /* Category checkboxes → pill toggles */ .forum-app .forum-category-filter--multi { border: 0; padding: 0; margin: 0; } .forum-app .forum-category-filter--multi .forum-category-filter__label { margin-bottom: 0.4rem; } .forum-app .forum-category-checkboxes { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; } .forum-app .forum-category-checkbox { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem 0.45rem 0.65rem; border-radius: 9px; font-size: 0.85rem; color: var(--forum-text-dim); cursor: pointer; user-select: none; transition: background 0.12s ease, color 0.12s ease; } .forum-app .forum-category-checkbox:hover { background: var(--forum-surface-hover); color: var(--forum-text); } .forum-app .forum-category-checkbox input { width: 0.95rem; height: 0.95rem; margin: 0; accent-color: var(--primary-500, #8b5cf6); cursor: pointer; flex-shrink: 0; } .forum-app .forum-category-checkbox span { line-height: 1.25; } .forum-app .forum-category-checkbox:has(input:checked) { background: var(--forum-surface-active); color: #fff; } /* Category dot */ .forum-app .forum-category-checkbox::before { content: ""; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 3px; height: 1.15rem; border-radius: 2px; background: var(--forum-cat-general); opacity: 0; transition: opacity 0.12s ease; } .forum-app .forum-category-checkbox:has(input:checked)::before { opacity: 1; } .forum-app .forum-category-checkbox:has(input[value="general"])::before { background: var(--forum-cat-general); } .forum-app .forum-category-checkbox:has(input[value="shops"])::before { background: var(--forum-cat-shops); } .forum-app .forum-category-checkbox:has(input[value="roster"])::before { background: var(--forum-cat-roster); } .forum-app .forum-category-checkbox:has(input[value="staff"])::before { background: var(--forum-cat-staff); } /* ---------- Main panel ---------- */ .forum-app .forum-app__main { min-width: 0; border-radius: 14px; border: 1px solid var(--forum-border); background: var(--forum-surface); overflow: hidden; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4); } .forum-app .forum-app__channel-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.95rem 1.15rem; border-bottom: 1px solid var(--forum-border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent); } .forum-app .forum-app__channel-hash { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 8px; background: rgba(139, 92, 246, 0.12); color: var(--primary-300, #c4b5fd); font-size: 1.05rem; font-weight: 800; line-height: 1; } .forum-app .forum-app__channel-titles { flex: 1; gap: 0.05rem; } .forum-app .forum-app__channel-name { font-size: 0.95rem; font-weight: 700; color: var(--forum-text); letter-spacing: -0.005em; text-transform: none; } .forum-app .forum-app__channel-desc { font-size: 0.75rem; color: var(--forum-text-muted); } .forum-app .forum-app__channel-head-actions { margin-left: auto; flex-shrink: 0; } .forum-channel-filters-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--forum-border, rgba(255, 255, 255, 0.12)); border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: var(--forum-text-muted, var(--gray-400)); cursor: pointer; } .forum-channel-filters-btn:hover { color: var(--forum-text, #f4f4f5); background: rgba(255, 255, 255, 0.08); } .forum-channel-filters-btn svg { width: 1.15rem; height: 1.15rem; } .forum-channel-filters-btn-inner { position: relative; display: inline-flex; align-items: center; justify-content: center; } .forum-channel-filters-active-dot { position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 9999px; background: var(--primary-400, #a78bfa); box-shadow: 0 0 0 2px rgba(15, 15, 20, 0.9); } .forum-channel-filters-btn.has-active-filters { color: var(--primary-300, #c4b5fd); border-color: rgba(139, 92, 246, 0.45); } .forum-channel-filters-panel { border-bottom: 1px solid var(--forum-border, rgba(255, 255, 255, 0.08)); background: rgba(0, 0, 0, 0.12); } .forum-channel-filters-panel:not([hidden]) { display: block; } .forum-channel-filters-panel__inner { padding: 0.85rem 1.15rem 1rem; } .forum-channel-filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.75rem 1rem; } .forum-channel-filter { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .forum-channel-filter--typeahead { position: relative; } .forum-channel-filter--date { grid-column: 1 / -1; } .forum-channel-filter-date-custom { margin-top: 0.5rem; } .forum-channel-filter-date-custom:not([hidden]) { display: block; } .forum-channel-filter-date-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 1rem; } .forum-channel-filter-date-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .forum-channel-filter-date-field__label { font-size: 0.7rem; font-weight: 600; color: var(--forum-text-muted, var(--gray-500)); } @media (max-width: 480px) { .forum-channel-filter-date-range { grid-template-columns: 1fr; } } .forum-channel-filter__label { margin: 0; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--forum-text-muted, var(--gray-500)); } .forum-channel-filter__label svg { width: 0.85rem; height: 0.85rem; vertical-align: -0.15em; margin-right: 0.15rem; } .forum-channel-filter__control { width: 100%; min-height: 2.25rem; } .forum-channel-filter-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 0.2rem); max-height: 11rem; overflow-y: auto; border: 1px solid var(--forum-border, rgba(255, 255, 255, 0.12)); border-radius: 8px; background: var(--forum-panel-bg, #18181b); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .forum-channel-filter-suggest:not([hidden]) { display: block; } .forum-channel-filter-suggest-item { display: block; width: 100%; padding: 0.5rem 0.65rem; border: 0; background: transparent; color: var(--forum-text, #f4f4f5); font-size: 0.8125rem; text-align: left; cursor: pointer; } .forum-channel-filter-suggest-item:hover, .forum-channel-filter-suggest-item:focus-visible { background: rgba(139, 92, 246, 0.15); outline: none; } .forum-channel-filter-suggest-item__meta { display: block; font-size: 0.7rem; color: var(--forum-text-muted, var(--gray-500)); margin-top: 0.1rem; } .forum-channel-filters-panel__actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; } .forum-channel-filters-panel__actions .btn-sm { display: inline-flex; align-items: center; gap: 0.35rem; } .forum-channel-filters-panel__actions .btn-sm svg { width: 0.9rem; height: 0.9rem; } [data-theme="light"] .forum-channel-filters-panel { background: rgba(15, 23, 42, 0.03); } [data-theme="light"] .forum-channel-filters-btn { background: #fff; border-color: rgba(15, 23, 42, 0.12); color: var(--gray-600); } [data-theme="light"] .forum-channel-filter-suggest { background: #fff; border-color: rgba(15, 23, 42, 0.12); } /* ---------- Thread list ---------- */ .forum-app .forum-app__main .forum-thread-list, .forum-app .forum-thread-list { display: flex; flex-direction: column; gap: 0; padding: 0.25rem 0.4rem 0.5rem; } .forum-app .forum-app__main .forum-thread-list.forum-thread-list--loading { padding: 0.5rem; gap: 0.25rem; } /* Row - grid: avatar | (title + meta) | (activity stack) */ .forum-app .forum-thread-row { display: grid !important; grid-template-columns: 2.5rem minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; gap: 0 0.9rem; padding: 0.7rem 0.75rem; border-radius: 10px; background: transparent; text-decoration: none; color: inherit; position: relative; transition: background 0.12s ease; } .forum-app .forum-thread-row__cover { position: absolute; inset: 0; z-index: 0; border-radius: inherit; } .forum-app .forum-thread-row__cover:focus-visible { outline: 2px solid var(--primary-400, #a78bfa); outline-offset: -2px; } .forum-app .forum-thread-row > :not(.forum-thread-row__cover) { position: relative; z-index: 1; pointer-events: none; } .forum-app .forum-thread-row .forum-author-link, .forum-app .forum-thread-row .forum-category-pill { pointer-events: auto; } .forum-app a.forum-category-pill { text-decoration: none; color: inherit; } .forum-app a.forum-category-pill:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); } .forum-app .forum-thread-row + .forum-thread-row { border-top: 1px solid var(--forum-border); border-radius: 0; } .forum-app .forum-thread-row:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; } .forum-app .forum-thread-row:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } /* Activity / review hub rows (no leading avatar column) */ .forum-app .forum-hub-activity-row, .forum-app .forum-hub-review-row { grid-template-columns: minmax(0, 1fr) auto; } .forum-app .forum-hub-activity-row .forum-thread-row__main, .forum-app .forum-hub-review-row .forum-thread-row__main { grid-column: 1; } .forum-app .forum-hub-activity-row .forum-thread-row__side, .forum-app .forum-hub-review-row .forum-thread-row__side { grid-column: 2; } .forum-app .forum-hub-activity-row .forum-thread-row__meta { flex-direction: column; align-items: flex-start; gap: 0.35rem; } .forum-app .forum-hub-activity-row__excerpt { width: 100%; min-width: 0; max-width: none; color: var(--forum-text-muted); font-size: 0.78rem; font-weight: 400; line-height: 1.4; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .forum-app .forum-thread-row__pill[data-activity-kind^="forum"]::before { background: var(--forum-cat-general); } .forum-app .forum-thread-row__pill[data-activity-kind="feed_post"]::before { background: var(--forum-cat-roster); } .forum-app .forum-thread-row__pill[data-activity-kind="review"]::before, .forum-app .forum-thread-row__pill[data-activity-kind="review_reply"]::before { background: var(--forum-cat-shops); } .forum-app .forum-thread-list--activity .forum-hub-activity-row { padding-top: 0.85rem; padding-bottom: 0.85rem; } .forum-app .forum-browse-view-fieldset { margin-bottom: 0.65rem; } .forum-app .forum-hub-section-title { text-align: left; margin: 1.25rem 0 0.35rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-400); } .forum-app .forum-hub-section-title:first-child { margin-top: 0.15rem; } .forum-app .forum-hub-reviews { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.15rem 0 0.5rem; } .forum-app .forum-hub-reviews-toolbar { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.85rem; } .forum-app .forum-hub-reviews-filter { appearance: none; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(255, 255, 255, 0.04); color: var(--gray-300); font-size: 0.78rem; font-weight: 600; line-height: 1.2; padding: 0.32rem 0.7rem; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .forum-app .forum-hub-reviews-filter:hover { color: var(--gray-100); border-color: rgba(148, 163, 184, 0.35); } .forum-app .forum-hub-reviews-filter.is-active { background: var(--primary-600); border-color: var(--primary-600); color: var(--text-on-primary); } .forum-app .forum-hub-reviews-list--flat { margin-top: 0.1rem; } .forum-app .forum-thread-list.forum-thread-list--reviews { padding: 0.35rem 0.5rem 0.75rem; gap: 0; } .forum-app .forum-hub-review-group { margin: 0 0 1.35rem; padding: 0 0 0.15rem; } .forum-app .forum-hub-review-group--collapsible > summary { list-style: none; cursor: pointer; } .forum-app .forum-hub-review-group--collapsible > summary::-webkit-details-marker { display: none; } .forum-app .forum-hub-review-group--collapsible > summary::after { content: ''; flex-shrink: 0; width: 0.45rem; height: 0.45rem; margin-left: auto; margin-top: 0.55rem; border-right: 2px solid var(--gray-400); border-bottom: 2px solid var(--gray-400); transform: rotate(45deg); transition: transform 0.15s ease; } .forum-app .forum-hub-review-group--collapsible[open] > summary::after { transform: rotate(-135deg); margin-top: 0.72rem; } .forum-app .forum-hub-review-group__summary { display: flex; align-items: flex-start; gap: 0.35rem; } .forum-app .forum-hub-review-group--collapsible .forum-hub-review-group__head { flex: 1; min-width: 0; margin-bottom: 0; border-bottom: none; padding-bottom: 0; } .forum-app .forum-hub-review-group--collapsible[open] .forum-hub-reviews-list { margin-top: 0.75rem; padding-top: 0.55rem; border-top: 1px solid var(--forum-border); } .forum-app .forum-hub-review-group + .forum-hub-section-title { margin-top: 0.5rem; padding-top: 0.85rem; border-top: 1px solid var(--forum-border); } .forum-app .forum-hub-review-group__head { display: flex; align-items: flex-start; gap: 0.65rem; margin: 0 0 0.75rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--forum-border); } .forum-app .forum-hub-group-avatar { flex-shrink: 0; margin-top: 0.05rem; } .forum-app .forum-hub-review-group__head-text { min-width: 0; flex: 1; } .forum-app .forum-hub-review-group__title { font-size: 0.95rem; font-weight: 600; margin: 0; padding: 0; border: none; color: var(--forum-text); line-height: 1.35; } .forum-app .forum-hub-review-group__stats { margin: 0.28rem 0 0; font-size: 0.78rem; color: var(--gray-400); line-height: 1.3; } .forum-app .forum-hub-review-stat { display: inline-flex; align-items: center; padding: 0.12rem 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(148, 163, 184, 0.18); color: var(--gray-300); font-weight: 500; } .forum-app .forum-hub-review-group__staff { font-weight: 650; color: var(--gray-100); } .forum-app button.forum-hub-staff-open { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; } .forum-app button.forum-hub-staff-open:hover { color: var(--primary-300); text-decoration: underline; } .forum-app .forum-hub-review-group__shop-line { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; font-size: 0.86rem; font-weight: 500; color: var(--gray-300); } .forum-app .forum-hub-group-avatar--shop { width: 1.55rem; height: 1.55rem; font-size: 0.62rem; } .forum-app .forum-hub-review-group__head--staff .forum-hub-review-group__title { display: flex; flex-direction: column; gap: 0.15rem; } .forum-app .forum-hub-review-group__sep { margin: 0 0.35rem; color: var(--gray-500); font-weight: 400; } .forum-app .forum-hub-review-meta { flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; } .forum-app .forum-hub-review-author { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; } .forum-app .forum-hub-review-meta-end { margin-left: auto; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 0.55rem; } .forum-app .forum-hub-review-reply-stat { font-size: 0.72rem; font-weight: 600; color: var(--primary-300, #c4b5fd); white-space: nowrap; } .forum-app .forum-hub-review-shop-line { margin-top: 0.15rem; } .forum-app .forum-hub-review-staff-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; } .forum-app .shop-review-staff-label { color: var(--gray-500); } .forum-app .forum-hub-reviews-list { display: flex; flex-direction: column; gap: var(--thesms-review-list-gap); } .forum-app .forum-hub-review-card { position: relative; display: block; } .forum-app .forum-hub-review-link-stretch { position: absolute; inset: 0; z-index: 0; border-radius: 0.75rem; text-decoration: none; } .forum-app .forum-hub-review-link-stretch:focus-visible { outline: 2px solid rgba(139, 92, 246, 0.55); outline-offset: 2px; } .forum-app .forum-hub-review-card:not(.forum-hub-review-card--shop-unlisted):hover .shop-review-item { border-color: rgba(139, 92, 246, 0.42); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2); } .forum-app .forum-hub-review-card--shop-unlisted { cursor: default; } .forum-app .forum-hub-review-item { margin: 0; position: relative; z-index: 1; pointer-events: none; } .forum-app .forum-hub-review-card .shop-review-author-link, .forum-app .forum-hub-review-card .shop-review-staff-link, .forum-app .forum-hub-review-card .forum-author-link { position: relative; z-index: 2; pointer-events: auto; } .forum-app .forum-hub-review-card .shop-review-author-link:hover, .forum-app .forum-hub-review-card .shop-review-staff-link:hover, .forum-app .forum-hub-review-card .forum-author-link:hover { text-decoration: underline; } .forum-app .forum-thread-row:hover { background: var(--forum-surface-hover); border-top-color: transparent; } .forum-app .forum-thread-row:hover + .forum-thread-row { border-top-color: transparent; } .forum-app .forum-thread-row:focus-visible { outline: none; background: var(--forum-surface-hover); box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.6); } /* Avatar column */ .forum-app .forum-thread-row > .forum-avatar { grid-column: 1; grid-row: 1; align-self: center; width: 2.5rem; height: 2.5rem; font-size: 0.75rem; border-radius: 999px; margin: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset; } /* Main column - title + meta stacked tightly */ .forum-app .forum-thread-row__main { grid-column: 2; grid-row: 1; display: flex !important; flex-direction: column; gap: 0.18rem; min-width: 0; align-self: center; } .forum-app .forum-thread-row__title { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: var(--forum-text); display: flex; align-items: center; gap: 0.45rem; min-width: 0; } .forum-app .forum-thread-row__title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; } .forum-app .forum-thread-row:hover .forum-thread-row__title { color: #fff; } .forum-app .forum-thread-row__new-dot { flex-shrink: 0; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--primary-400, #a78bfa); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22); margin-left: 0.1rem; align-self: center; } /* Anchor the unread dot beside the title text (not at end of flex container) */ .forum-app .forum-thread-row__title { justify-content: flex-start; } .forum-app .forum-thread-row__title-text { flex: 0 1 auto; } .forum-app .forum-thread-row__meta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem; line-height: 1.25; color: var(--forum-text-muted); min-width: 0; } .forum-app .forum-thread-row__author, .forum-app .forum-thread-row__author.forum-author-link { color: var(--forum-text-dim); font-weight: 500; text-decoration: none; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .forum-app .forum-thread-row__author.forum-author-link:hover { color: var(--primary-300); text-decoration: underline; text-underline-offset: 2px; } .forum-app .forum-thread-row__meta .forum-thread-row__meta-sep { width: 0.25rem; height: 0.25rem; border-radius: 999px; background: currentColor; opacity: 0.4; flex-shrink: 0; } /* Category pills - color-coded */ .forum-app .forum-category-pill, .forum-app .forum-thread-row__pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.12rem 0.55rem 0.14rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 999px; color: var(--forum-text); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--forum-border-strong); margin: 0; line-height: 1.3; white-space: nowrap; } .forum-app .forum-category-pill::before, .forum-app .forum-thread-row__pill::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--forum-cat-general); } .forum-app .forum-category-pill[data-cat="shops"]::before, .forum-app .forum-category-pill[data-category="shops"]::before { background: var(--forum-cat-shops); } .forum-app .forum-category-pill[data-cat="roster"]::before, .forum-app .forum-category-pill[data-category="roster"]::before { background: var(--forum-cat-roster); } .forum-app .forum-category-pill[data-cat="staff"]::before, .forum-app .forum-category-pill[data-category="staff"]::before { background: var(--forum-cat-staff); } .forum-app .forum-category-pill[data-cat="new"]::before, .forum-app .forum-category-pill[data-category="new"]::before { background: var(--forum-cat-new); } .forum-app .forum-category-pill[data-cat="new"], .forum-app .forum-category-pill[data-category="new"] { color: #c4b5fd; background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.32); } /* Fallback color-coding by text content when data-cat isn't set */ .forum-app .forum-thread-row__pill { color: var(--forum-text-dim); } /* Side column - activity + time, right-aligned, tight stack */ .forum-app .forum-thread-row__side { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.15rem; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; align-self: center; min-width: 4.5rem; } .forum-app .forum-thread-row__time { font-size: 0.76rem; font-weight: 500; color: var(--forum-text-dim); white-space: nowrap; } .forum-app .forum-thread-row__stat { font-size: 0.7rem; color: var(--forum-text-muted); white-space: nowrap; } /* Unread emphasis */ .forum-app .forum-thread-row--new { background: linear-gradient(90deg, rgba(139, 92, 246, 0.055), transparent 65%); } .forum-app .forum-thread-row--new:hover { background: rgba(139, 92, 246, 0.09); } .forum-app .forum-thread-row--new .forum-thread-row__title { color: #fff; font-weight: 700; } .forum-app .forum-thread-row--new .forum-thread-row__time { color: var(--primary-300, #c4b5fd); font-weight: 600; } /* Skeletons keep their look - just align nicely in the new grid */ .forum-app .forum-thread-row--skeleton { display: flex !important; align-items: center; gap: 0.85rem; padding: 0.8rem 0.85rem; } .forum-app .forum-thread-row--skeleton .forum-skeleton-avatar { width: 2.5rem; height: 2.5rem; } .forum-app .forum-thread-row--skeleton .forum-thread-row__main { flex: 1; gap: 0.4rem; } /* Empty state */ .forum-app .forum-empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--forum-text-muted); } .forum-app .forum-empty-state__title { font-size: 1rem; font-weight: 600; color: var(--forum-text); margin: 0 0 0.35rem; } .forum-app .forum-empty-state__hint { font-size: 0.875rem; margin: 0; color: var(--forum-text-muted); } /* ---------- Mobile ---------- */ @media (max-width: 640px) { .forum-app .forum-thread-row { grid-template-columns: 2.25rem minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.1rem 0.7rem; padding: 0.7rem 0.7rem; } .forum-app .forum-hub-activity-row, .forum-app .forum-hub-review-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; } .forum-app .forum-hub-activity-row .forum-thread-row__main, .forum-app .forum-hub-review-row .forum-thread-row__main { grid-column: 1; grid-row: 1; } .forum-app .forum-hub-activity-row .forum-thread-row__side, .forum-app .forum-hub-review-row .forum-thread-row__side { grid-column: 1; grid-row: 2; margin-top: 0.15rem; } .forum-app .forum-thread-row > .forum-avatar { grid-row: 1 / span 2; align-self: center; width: 2.25rem; height: 2.25rem; } .forum-app .forum-thread-row__main { grid-column: 2; grid-row: 1; } .forum-app .forum-thread-row__side { grid-column: 2; grid-row: 2; flex-direction: row; align-items: center; gap: 0.55rem; text-align: left; min-width: 0; justify-content: flex-start; margin-top: 0.15rem; } .forum-app .forum-thread-row__side .forum-thread-row__stat::before { content: "·"; margin-right: 0.55rem; opacity: 0.55; } .forum-app .forum-hub-review-meta { align-items: flex-start; } .forum-app .forum-hub-review-meta-end { flex-basis: 100%; width: 100%; margin-left: 0; justify-content: space-between; align-items: center; gap: 0.5rem; } .forum-app .forum-hub-review-meta-end .shop-review-datetime { width: auto; margin-left: 0; text-align: right; flex-shrink: 0; } .forum-app .forum-hub-review-meta-end .shop-review-datetime:only-child { margin-left: auto; } .forum-app .forum-app__rail { position: static; } } /* Forum rail + masthead CTAs: 2-column controls when stacked (mobile / small tablet) */ @media (max-width: 959px) { .forum-app .forum-app__masthead-actions { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; align-items: stretch; justify-content: stretch; } .forum-app .forum-app__masthead-actions .forum-app__cta:only-child { grid-column: 1 / -1; } .forum-app .forum-app__masthead-actions .forum-app__cta { width: 100%; justify-content: center; } .forum-app .forum-app__rail { gap: 0.55rem; } .forum-app .forum-browse-view-fieldset { margin-bottom: 0.35rem; } .forum-app .forum-browse-view-fieldset .forum-category-checkboxes, .forum-app .forum-app__filters .forum-category-filter--multi .forum-category-checkboxes, .forum-app #forum-rail-activity-only .forum-category-checkboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 0.35rem; } .forum-app .forum-app__filters.forum-section-head.forum-section-head--filter { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "search sort" "cats cats"; gap: 0.65rem 0.5rem; padding: 0.75rem 0.85rem; } .forum-app .forum-app__filters.forum-section-head.forum-section-head--filter .forum-category-filter--search { grid-area: search; } .forum-app .forum-app__filters.forum-section-head.forum-section-head--filter .forum-sort-filter { grid-area: sort; } .forum-app .forum-app__filters.forum-section-head.forum-section-head--filter .forum-category-filter--multi { grid-area: cats; } .forum-app .forum-app__rail .forum-category-checkbox { padding: 0.38rem 0.45rem 0.38rem 0.5rem; font-size: 0.8125rem; } } /* ========================================================================= Forum compose / reply dock - redesign (2026-04) Clean, modern, readable composer. Scoped under .forum-compose-dock--v2 so it wins over older rules without touching them. ========================================================================= */ .forum-compose-dock--v2 { margin-top: 1.5rem; border-radius: 14px; background: linear-gradient(180deg, rgba(139, 92, 246, 0.045) 0%, rgba(0, 0, 0, 0.12) 100%), #18181c; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 38px rgba(0, 0, 0, 0.45); padding: 0; overflow: visible; transition: border-color 180ms ease, box-shadow 180ms ease; } .forum-compose-dock--v2:focus-within { border-color: rgba(139, 92, 246, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 0 0 3px rgba(139, 92, 246, 0.18), 0 14px 44px rgba(0, 0, 0, 0.55); } /* Header: visible label + hint */ .forum-compose-dock--v2 .forum-compose-dock__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 1.1rem 0.5rem; background: transparent; border-bottom: 0; position: static; clip: auto; width: auto; height: auto; margin: 0; overflow: visible; white-space: nowrap; } .forum-compose-dock--v2 .forum-compose-dock__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(196, 181, 253, 0.95); display: inline-flex; align-items: center; gap: 0.45rem; } .forum-compose-dock--v2 .forum-compose-dock__label::before { content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; border-radius: 999px; background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); } .forum-compose-dock--v2 .forum-compose-dock__hint { font-size: 0.72rem; color: rgba(156, 163, 175, 0.85); } .forum-compose-dock--v2 .forum-compose-dock__hint .forum-kbd { display: inline-block; min-width: 1.1rem; padding: 0.05rem 0.28rem; margin: 0 0.08rem; font-size: 0.68rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #d1d5db; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); line-height: 1; vertical-align: baseline; } /* Form container - reply is a single field (tight), new-thread has multiple (breathing) */ .forum-compose-dock--v2 .forum-reply-form { display: flex; flex-direction: column; gap: 0; padding: 0 0.6rem 0.6rem; } .forum-compose-dock--v2 .forum-reply-form .field { gap: 0; margin: 0; } .forum-compose-dock--v2 .forum-new-thread-form { display: flex; flex-direction: column; gap: 0.9rem; padding: 0.25rem 1rem 0.6rem; } .forum-compose-dock--v2 .forum-new-thread-form .field { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; } .forum-compose-dock--v2 .forum-new-thread-form .modal-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(196, 181, 253, 0.85); margin-bottom: 0; } .forum-compose-dock--v2 .forum-new-thread-form .modal-input { background: #0f1013; border: 1px solid rgba(255, 255, 255, 0.08); color: #e5e7eb; border-radius: 10px; padding: 0.65rem 0.85rem; transition: border-color 120ms ease, background 120ms ease; } .forum-compose-dock--v2 .forum-new-thread-form .modal-input:focus { border-color: rgba(139, 92, 246, 0.5); background: #111216; outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12); } .forum-compose-dock--v2 .forum-compose-validation { margin: 0.1rem 0 0; font-size: 0.75rem; color: #c4b5fd; } .forum-compose-dock--v2 .forum-new-thread-form .modal-input[aria-invalid="true"] { border-color: rgba(167, 139, 250, 0.72); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14); } .forum-compose-dock--v2 .forum-compose-dock__footer { padding: 0 0.5rem 0.25rem; font-size: 0.72rem; color: rgba(156, 163, 175, 0.8); } /* "Replying to" quote pill - elevated and clearly not the editor */ .forum-compose-dock--v2 .forum-reply-to { margin: 0 0.5rem 0.6rem; padding: 0.55rem 0.75rem; border-radius: 10px; border: 1px solid rgba(139, 92, 246, 0.22); background: rgba(139, 92, 246, 0.08); box-shadow: inset 3px 0 0 #a78bfa; } .forum-compose-dock--v2 .forum-reply-to__label { color: #c4b5fd; } .forum-compose-dock--v2 .forum-reply-to__who { color: #e9e5ff; } /* The editor wrap: transparent - no nested rounded border. The outer card is the visual container; a thin rule separates toolbar/editor/actions. */ .forum-compose-dock--v2 .forum-field-wrap { position: relative; background: transparent; border: 0; border-radius: 0; overflow: visible; } .forum-compose-dock--v2 .forum-new-thread-form .forum-field-wrap { border-top: 0; box-shadow: none; } /* Quill toolbar - airy, clearer, integrated; hairline separator below it */ .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow { border: 0 !important; background: transparent !important; padding: 0.35rem 0.5rem 0.3rem !important; border-radius: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem; position: relative; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.06); pointer-events: none; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-formats { margin-right: 0.55rem !important; display: inline-flex; align-items: center; gap: 0.1rem; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-formats + .ql-formats { padding-left: 0.55rem; border-left: 1px solid rgba(255, 255, 255, 0.07); } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button { width: 2rem !important; height: 2rem !important; padding: 0.35rem !important; border-radius: 7px !important; color: #cbd5e1 !important; transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:hover, .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:focus-visible { background: rgba(255, 255, 255, 0.07) !important; color: #fff !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button.ql-active { background: rgba(139, 92, 246, 0.2) !important; color: var(--primary-500, #8b5cf6) !important; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.5) !important; } /* High-contrast glyphs + site purple (Quill snow defaults load after app.css) */ .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-stroke { stroke: #e5e7eb !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-fill { fill: #e5e7eb !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-fill.ql-stroke { fill: #e5e7eb !important; stroke: #e5e7eb !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:hover .ql-stroke, .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:focus-visible .ql-stroke { stroke: #ffffff !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:hover .ql-fill, .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:focus-visible .ql-fill { fill: #ffffff !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:hover .ql-fill.ql-stroke, .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:focus-visible .ql-fill.ql-stroke { fill: #ffffff !important; stroke: #ffffff !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--primary-500, #8b5cf6) !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--primary-500, #8b5cf6) !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button.ql-active .ql-fill.ql-stroke { fill: var(--primary-500, #8b5cf6) !important; stroke: var(--primary-500, #8b5cf6) !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-picker-label .ql-stroke { stroke: #e5e7eb !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke { stroke: #ffffff !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--primary-500, #8b5cf6) !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:focus-visible { outline: 2px solid rgba(167, 139, 250, 0.55) !important; outline-offset: 1px !important; } /* Editor body */ .forum-compose-dock--v2 .thesms-rich-editor .ql-container.ql-snow { border: 0 !important; background: transparent !important; border-radius: 0 !important; font-size: 0.9375rem; } .forum-compose-dock--v2 .thesms-rich-editor .ql-container.ql-snow .ql-editor { min-height: 4.5rem; max-height: 20rem; padding: 0.85rem 1rem 0.95rem !important; background: transparent !important; color: #e5e7eb !important; line-height: 1.55; } .forum-compose-dock--v2 .thesms-rich-editor .ql-editor.ql-blank::before { color: rgba(156, 163, 175, 0.72); font-style: normal; left: 1rem; right: 1rem; opacity: 1; } .forum-compose-dock--v2 .thesms-rich-editor .ql-container.ql-snow .ql-editor a { color: var(--primary-300) !important; } .forum-compose-dock--v2 .thesms-rich-editor .ql-container.ql-snow .ql-editor a:hover { color: var(--primary-400) !important; } /* Bottom action bar - emoji/attach on the left, counter + send on the right */ .forum-compose-dock--v2 .forum-compose-tools { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.4rem 0.2rem; border-top: 0; background: transparent; position: relative; } .forum-compose-dock--v2 .forum-compose-tools::before { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; top: 0; height: 1px; background: rgba(255, 255, 255, 0.06); pointer-events: none; } .forum-compose-dock--v2 .forum-tool-btn { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: transparent; border: 1px solid transparent; color: #d4d4d8; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease, transform 120ms ease; cursor: pointer; } .forum-compose-dock--v2 .forum-tool-btn:hover, .forum-compose-dock--v2 .forum-tool-btn:focus-visible { background: rgba(139, 92, 246, 0.14); color: #fff; border-color: rgba(167, 139, 250, 0.35); outline: none; transform: translateY(-1px); } .forum-compose-dock--v2 .forum-tool-btn__icon { font-size: 1.05rem; line-height: 1; } .forum-compose-dock--v2 .forum-compose-tools__spacer { flex: 1; } .forum-compose-dock--v2 .forum-compose-tools .btn { min-height: 2.25rem; border-radius: 999px; padding: 0.45rem 1.2rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; } .forum-compose-dock--v2 .forum-compose-tools .btn-secondary { color: #e5e7eb; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.08); } .forum-compose-dock--v2 .forum-compose-tools .btn-secondary:hover, .forum-compose-dock--v2 .forum-compose-tools .btn-secondary:focus-visible { color: #ffffff; background: rgba(139, 92, 246, 0.14); border-color: rgba(167, 139, 250, 0.35); } .forum-compose-dock--v2 .forum-char-count { font-size: 0.72rem; color: rgba(156, 163, 175, 0.75); font-variant-numeric: tabular-nums; padding: 0 0.55rem; } .forum-compose-dock--v2 .forum-char-count--warn { color: #fbbf24; } .forum-compose-dock--v2 .forum-char-count--over { color: #f87171; font-weight: 700; } .forum-compose-dock--v2 .forum-compose-tools__send { min-height: 2.25rem; padding: 0.45rem 1.25rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; color: #fff; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border: 0; box-shadow: 0 4px 14px rgba(139, 92, 246, 0.32); cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; } .forum-compose-dock--v2 .forum-compose-tools__send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45); filter: brightness(1.05); } .forum-compose-dock--v2 .forum-compose-tools__send:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } .forum-compose-dock--v2 .forum-compose-tools__send--ready { box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5); } /* Drop-zone overlay above the editor */ .forum-compose-dock--v2 .forum-drop-overlay { border-radius: 12px; } .forum-compose-dock--v2 .forum-drop-zone.is-dragover .forum-field-wrap { border-color: rgba(139, 92, 246, 0.7); background: rgba(139, 92, 246, 0.06); } /* Mobile polish */ @media (max-width: 640px) { .forum-compose-dock--v2 { margin-top: 1rem; border-radius: 12px; } .forum-compose-dock--v2 .forum-compose-dock__head { padding: 0.55rem 0.85rem 0.4rem; } .forum-compose-dock--v2 .forum-compose-dock__hint { display: none; } .forum-compose-dock--v2 .forum-reply-form, .forum-compose-dock--v2 .forum-new-thread-form { padding: 0 0.5rem 0.5rem; } .forum-compose-dock--v2 .thesms-rich-editor .ql-editor { min-height: 3.5rem; padding: 0.7rem 0.85rem 0.8rem !important; } .forum-compose-dock--v2 .forum-compose-tools { padding: 0.5rem 0.35rem 0.15rem; flex-wrap: wrap; row-gap: 0.35rem; } .forum-compose-dock--v2 .forum-compose-tools__send { padding: 0.4rem 1rem; min-height: 2.1rem; } } /* Reply composer: messaging-first UX inspired by modern forum/chat products. Kept scoped so thread-creation remains form-oriented. */ .forum-compose-dock--reply { margin-top: 1.1rem; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 8% -24%, rgba(167, 139, 250, 0.25), transparent 36rem), linear-gradient(180deg, rgba(35, 35, 44, 0.97) 0%, rgba(18, 18, 24, 0.985) 100%); border-color: rgba(167, 139, 250, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 16px 42px rgba(0, 0, 0, 0.42); } .forum-compose-dock--reply:focus-within { border-color: rgba(196, 181, 253, 0.58); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 3px rgba(139, 92, 246, 0.16), 0 20px 54px rgba(0, 0, 0, 0.52); } .forum-compose-dock--reply .forum-compose-dock__head { padding: 0.88rem 1rem 0.65rem; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .forum-compose-dock--reply .forum-compose-dock__label { color: #f8fafc; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; text-transform: none; } .forum-compose-dock--reply .forum-compose-dock__label::before { width: 0.48rem; height: 0.48rem; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16); } .forum-compose-dock--reply .forum-compose-dock__hint { color: rgba(226, 232, 240, 0.7); font-size: 0.72rem; } .forum-compose-dock--reply .forum-reply-form { padding: 0.72rem; display: flex; flex-direction: column; } .forum-compose-dock--reply .forum-field-wrap { /* Mention dropdown sits below the editor (top: 100%); must not clip it. */ overflow: visible; border: 0; border-radius: 0; min-height: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(19, 20, 27, 0.82) 0%, rgba(12, 13, 19, 0.92) 100%); box-shadow: none; } .forum-compose-dock--reply .thesms-rich-editor.ql-container.ql-snow { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-height: 0; border-radius: 0 !important; } .forum-compose-dock--reply .thesms-rich-editor .ql-editor { width: 100%; min-height: 7rem; padding: 0.85rem 0.9rem 0.95rem !important; color: #f5f7fb !important; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; } .forum-compose-dock--reply:focus-within .forum-field-wrap { border-color: transparent; box-shadow: none; } .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--forum-toolbar-gap, 0.06rem); flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; min-height: 2.35rem; padding: 0.38rem var(--forum-toolbar-pad-x, 0.5rem) 0.32rem !important; background: rgba(255, 255, 255, 0.015) !important; border-radius: 0 !important; border-bottom: 1px solid rgba(167, 139, 250, 0.14); overflow: hidden; box-sizing: border-box; } .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow .ql-formats { display: inline-flex; align-items: center; flex: 0 0 auto; margin: 0 var(--forum-toolbar-formats-gap, 0.22rem) 0 0; padding-left: 0; border-left: 0; } .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow .ql-formats + .ql-formats { padding-left: var(--forum-toolbar-formats-gap, 0.28rem); margin-left: 0; border-left: 1px solid rgba(255, 255, 255, 0.08); } .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button, .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn { width: var(--forum-toolbar-btn, 2rem) !important; height: var(--forum-toolbar-btn, 2rem) !important; min-width: 0; min-height: 0; padding: 0.22rem !important; border-radius: 6px !important; display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 var(--forum-toolbar-btn, 2rem); } .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button svg { width: var(--forum-toolbar-icon, 15px); height: var(--forum-toolbar-icon, 15px); display: block; } .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn__icon { font-size: var(--forum-toolbar-icon, 0.95rem); line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn__icon svg { width: var(--forum-toolbar-icon, 15px); height: var(--forum-toolbar-icon, 15px); } .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button:hover, .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible, .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active, .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn:hover, .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn:focus-visible { color: var(--primary-500, #8b5cf6) !important; background-color: rgba(139, 92, 246, 0.14) !important; } .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-stroke, .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible .ql-stroke, .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--primary-500, #8b5cf6) !important; } .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-fill, .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible .ql-fill, .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-fill, .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-fill.ql-stroke, .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible .ql-fill.ql-stroke, .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-fill.ql-stroke { fill: var(--primary-500, #8b5cf6) !important; stroke: var(--primary-500, #8b5cf6) !important; } .forum-compose-dock--reply .thesms-rich-editor .ql-editor.ql-blank::before { color: rgba(226, 232, 240, 0.58); left: 0.9rem; right: 0.9rem; line-height: 1.45; white-space: normal; } .forum-compose-dock--reply .forum-compose-tools { flex: 0 0 auto; justify-content: flex-end; gap: 0.75rem; padding: 0.55rem 0.12rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .forum-compose-dock--reply .forum-compose-tools::before { display: none; } .forum-compose-tools__left, .forum-compose-tools__right { display: inline-flex; align-items: center; gap: 0.48rem; } .forum-compose-tools:not(:has(.forum-compose-tools__left)) { justify-content: flex-end; } .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow .forum-compose-tools__left--toolbar { margin-left: 0; display: inline-flex; align-items: center; gap: var(--forum-toolbar-gap, 0.06rem); padding-left: 0.28rem; border-left: 1px solid rgba(255, 255, 255, 0.1); flex: 0 0 auto; } .forum-compose-dock--reply .forum-tool-btn { width: 2rem; height: 2rem; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: #e2e8f0; } .forum-compose-dock--reply .forum-tool-btn:hover, .forum-compose-dock--reply .forum-tool-btn:focus-visible { background: rgba(139, 92, 246, 0.22); border-color: rgba(196, 181, 253, 0.45); } .forum-compose-dock--reply .forum-char-count { color: rgba(226, 232, 240, 0.64); font-size: 0.73rem; padding: 0 0.2rem; flex-shrink: 0; } .forum-compose-dock--reply .forum-compose-tools__send { min-width: 6.1rem; min-height: 2.4rem; padding: 0.52rem 1.28rem; border-radius: 999px; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 8px 20px rgba(124, 58, 237, 0.34); } .forum-compose-dock--reply .forum-compose-tools__send:hover:not(:disabled) { box-shadow: 0 12px 24px rgba(124, 58, 237, 0.45); } @media (max-width: 640px) { .forum-compose-dock--reply { margin-top: 0.85rem; border-radius: 16px; } .forum-compose-dock--reply .forum-field-wrap { overflow: visible; } .forum-compose-dock--reply .forum-compose-dock__head { padding: 0.75rem 0.82rem 0.58rem; border-bottom-color: rgba(255, 255, 255, 0.06); } .forum-compose-dock--reply .forum-compose-dock__hint { display: none; } .forum-compose-dock--reply .forum-reply-form { padding: 0.56rem; } .forum-compose-dock--reply .forum-compose-tools { flex-wrap: nowrap; row-gap: 0; padding-top: 0.45rem; } .forum-compose-dock--reply .forum-compose-tools__right { margin-left: auto; flex-shrink: 0; } .forum-compose-dock--reply .forum-char-count { font-size: 0.68rem; } .forum-compose-dock--reply .forum-compose-tools__send { min-width: 5.35rem; min-height: 2.25rem; padding: 0.45rem 1rem; } } /* iOS zoom-on-focus: see site-wide rule at end of file (@media pointer: coarse). */ /* ========================================================================= Forum compose: rich-editor styling (2026-05) -------------------------------------------------------------------------- Quill 2 layout reminder:

...buttons + docked tools...
...
`.thesms-rich-editor` and `.ql-container.ql-snow` are the SAME element, so descendant selectors with a space between them never match. Several pre-existing rules using `.thesms-rich-editor .ql-container.ql-snow` are therefore dead - these replacement rules use working selectors and are scoped to `.forum-app` and `#publish-modal` (staff feed publish) so other editors stay unaffected. ========================================================================= */ /* Editor container is the SAME element as .thesms-rich-editor - kill Quill Snow's default 1px light border so .forum-field-wrap owns the only visible outline. */ .forum-app .thesms-rich-editor.ql-container.ql-snow, #publish-modal .thesms-rich-editor.ql-container.ql-snow { border: 0; background: rgba(7, 10, 22, 0.52); border-top: 1px solid rgba(139, 92, 246, 0.12); border-radius: 0; } /* Contenteditable. font-size >=16px prevents iOS Safari zoom-on-focus. */ .forum-app .thesms-rich-editor .ql-editor, #publish-modal .thesms-rich-editor .ql-editor { font-size: 16px; line-height: 1.55; color: #f5f7fb; padding: 0.85rem 0.95rem 1rem; } .forum-app .thesms-rich-editor .ql-editor.ql-blank::before, #publish-modal .thesms-rich-editor .ql-editor.ql-blank::before { color: rgba(226, 232, 240, 0.52); font-style: normal; left: 0.95rem; right: 0.95rem; } /* Fluid toolbar sizing: one inline row that fits the compose box width. */ .forum-app .forum-field-wrap, #publish-modal .forum-field-wrap { --forum-toolbar-btn: clamp(1.35rem, 4.6vw, 2rem); --forum-toolbar-icon: clamp(12px, 3.4vw, 16px); --forum-toolbar-gap: clamp(0.02rem, 0.3vw, 0.1rem); --forum-toolbar-pad-x: clamp(0.2rem, 1.4vw, 0.45rem); --forum-toolbar-formats-gap: clamp(0.12rem, 0.8vw, 0.4rem); } /* Toolbar: single row; scale controls down on narrow widths instead of clipping. */ .forum-app .forum-field-wrap > .ql-toolbar.ql-snow, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--forum-toolbar-gap); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 0.32rem var(--forum-toolbar-pad-x); background: rgba(0, 0, 0, 0.22); border: 0; border-bottom: 1px solid rgba(139, 92, 246, 0.18); border-radius: 0; overflow: hidden; } /* Quill groups its buttons in `.ql-formats` divs. Switch them to flex children that don't squish, with a tighter inter-group gap than Quill Snow's default 15px. */ .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-formats, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .ql-formats { display: inline-flex; align-items: center; flex: 0 0 auto; margin: 0 var(--forum-toolbar-formats-gap) 0 0; padding-left: 0; border-left: 0; } .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-formats + .ql-formats, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .ql-formats + .ql-formats { padding-left: var(--forum-toolbar-formats-gap); margin-left: 0; border-left: 1px solid rgba(255, 255, 255, 0.08); } .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-formats:last-of-type, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .ql-formats:last-of-type { margin-right: 0; } /* All toolbar buttons (Quill native + docked .forum-tool-btn) share size so the row is visually uniform. */ .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn { width: var(--forum-toolbar-btn); height: var(--forum-toolbar-btn); min-width: 0; min-height: 0; padding: 0.25rem; border: 0; background: transparent; border-radius: 6px; color: rgba(226, 232, 240, 0.82); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--forum-toolbar-btn); } .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button svg, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn svg, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button svg, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn svg { width: var(--forum-toolbar-icon); height: var(--forum-toolbar-icon); display: block; } .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:hover, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn:hover, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn:focus-visible, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button:hover, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn:hover, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn:focus-visible { background: rgba(139, 92, 246, 0.18); color: #f5f7fb; } /* Quill Snow paints stroke/fill on its SVG icons - recolour for dark theme. */ .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-stroke, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .ql-stroke { stroke: rgba(226, 232, 240, 0.82); } .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-fill, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-fill.ql-stroke, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .ql-fill, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .ql-fill.ql-stroke { fill: rgba(226, 232, 240, 0.82); } .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-stroke, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible .ql-stroke, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-stroke, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-stroke, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible .ql-stroke, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--primary-300, #c4b5fd); } .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-fill, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible .ql-fill, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-fill, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-fill.ql-stroke, .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-fill.ql-stroke, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-fill, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible .ql-fill, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-fill, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-fill.ql-stroke, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-fill.ql-stroke { fill: var(--primary-300, #c4b5fd); } .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-picker, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .ql-picker { color: rgba(226, 232, 240, 0.82); height: var(--forum-toolbar-btn); } .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-picker-label, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .ql-picker-label { padding: 0 calc(var(--forum-toolbar-gap) * 2); } /* Docked emoji/attach group - inline after Quill buttons (no margin-left:auto; that pushed controls to the right edge and clipped formatting buttons when the reply dock uses overflow:hidden). */ .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .forum-compose-tools__left--toolbar, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .forum-compose-tools__left--toolbar { margin-left: 0; display: inline-flex; align-items: center; gap: var(--forum-toolbar-gap); padding-left: var(--forum-toolbar-formats-gap); border-left: 1px solid rgba(255, 255, 255, 0.1); flex: 0 0 auto; } .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn__icon, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn__icon { font-size: var(--forum-toolbar-icon); line-height: 1; display: inline-flex; align-items: center; justify-content: center; } /* Touch devices: slightly larger targets when there is room (still fluid). */ @media (pointer: coarse) { .forum-app .forum-field-wrap, #publish-modal .forum-field-wrap { --forum-toolbar-btn: clamp(1.45rem, 5vw, 2.25rem); --forum-toolbar-icon: clamp(13px, 3.8vw, 17px); } .forum-app .forum-field-wrap > .ql-toolbar.ql-snow, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow { padding: 0.32rem var(--forum-toolbar-pad-x); } .forum-app .thesms-rich-editor .ql-editor, #publish-modal .thesms-rich-editor .ql-editor { /* iOS uses computed font-size of the focused element to decide whether to zoom - keep this >= 16px even when rems shift. */ font-size: max(16px, 1rem); padding: 0.85rem 0.9rem 0.95rem; } .forum-compose-dock--reply .forum-compose-tools, .forum-app .forum-new-thread-form .forum-compose-tools { padding: 0.5rem 0.55rem 0.6rem; gap: 0.5rem; } .forum-compose-dock--reply .forum-compose-tools__send, .forum-app .forum-new-thread-form .forum-compose-tools__send { min-height: 2.6rem; } } /* Narrow phones: tighten spacing; button size stays fluid via --forum-toolbar-btn. */ @media (max-width: 420px) { .forum-app .forum-field-wrap, #publish-modal .forum-field-wrap { --forum-toolbar-btn: clamp(1.28rem, 4.2vw, 1.75rem); --forum-toolbar-icon: clamp(11px, 3.1vw, 14px); --forum-toolbar-formats-gap: 0.1rem; --forum-toolbar-pad-x: 0.18rem; } .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-formats + .ql-formats, #publish-modal .forum-field-wrap > .ql-toolbar.ql-snow .ql-formats + .ql-formats { padding-left: 0.1rem; } .forum-app .thesms-rich-editor .ql-editor, #publish-modal .thesms-rich-editor .ql-editor { padding: 0.8rem 0.82rem 0.92rem; } } /* Wide compose areas: allow slightly larger controls. */ @media (min-width: 900px) { .forum-app .forum-field-wrap, #publish-modal .forum-field-wrap { --forum-toolbar-btn: clamp(1.75rem, 2.2vw, 2.15rem); --forum-toolbar-icon: clamp(14px, 1.4vw, 17px); } } /* --------------------------------------------------------------------------- Forum - light theme (data-theme on ; forum UI + body-mounted widgets) --------------------------------------------------------------------------- */ [data-theme="light"] .forum-app { --forum-rail-bg: rgba(15, 23, 42, 0.04); --forum-panel: #ffffff; --forum-panel-border: rgba(15, 23, 42, 0.1); --forum-hover: rgba(15, 23, 42, 0.055); --forum-surface: #f3f4f6; --forum-surface-hover: rgba(15, 23, 42, 0.06); --forum-surface-active: rgba(139, 92, 246, 0.12); --forum-border: rgba(15, 23, 42, 0.1); --forum-border-strong: rgba(15, 23, 42, 0.14); --forum-text: #111827; --forum-text-dim: #4b5563; --forum-text-muted: #6b7280; } [data-theme="light"] .forum-app .forum-app__masthead, [data-theme="light"] .forum-app__masthead { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(243, 244, 246, 0.98)); } [data-theme="light"] .forum-app .forum-app__masthead { background: radial-gradient(120% 120% at 0% 0%, rgba(139, 92, 246, 0.06) 0%, transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 244, 246, 0.96)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 rgba(15, 23, 42, 0.04); } [data-theme="light"] .forum-app .forum-app__title, [data-theme="light"] .forum-app__title { color: var(--text-primary); } [data-theme="light"] .forum-app .forum-app__main, [data-theme="light"] .forum-app__main { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08); } [data-theme="light"] .forum-app .forum-app__channel-head, [data-theme="light"] .forum-app__channel-head { background: rgba(15, 23, 42, 0.03); } [data-theme="light"] .forum-app .forum-app__notice, [data-theme="light"] .forum-app__notice { background: rgba(15, 23, 42, 0.03); } [data-theme="light"] .forum-app .forum-app__notice--success .forum-app__notice-text, [data-theme="light"] .forum-app__notice--success .forum-app__notice-text { color: #047857; } [data-theme="light"] .forum-app .forum-app__notice--warn .forum-app__notice-text, [data-theme="light"] .forum-app__notice--warn .forum-app__notice-text { color: #b45309; } [data-theme="light"] .forum-app .forum-app__notice--alert .forum-app__notice-text, [data-theme="light"] .forum-app__notice--alert .forum-app__notice-text { color: #b91c1c; } [data-theme="light"] .forum-app .forum-app__notice-text--strong, [data-theme="light"] .forum-app__notice-text--strong { color: #b91c1c; } [data-theme="light"] .forum-app .forum-app__filters.forum-section-head.forum-section-head--filter, [data-theme="light"] .forum-app__filters.forum-section-head.forum-section-head--filter { background: rgba(15, 23, 42, 0.03); } [data-theme="light"] .forum-app .forum-section-head.forum-section-head--filter, [data-theme="light"] .forum-section-head.forum-section-head--filter { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, var(--hero-card) 100%); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06); } [data-theme="light"] .forum-app .forum-category-filter--search .forum-category-filter__select, [data-theme="light"] .forum-app .forum-sort-filter__select { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); color: var(--forum-text); } [data-theme="light"] .forum-app .forum-category-filter--search .forum-category-filter__select:focus, [data-theme="light"] .forum-app .forum-sort-filter__select:focus { background: #fafafa; border-color: rgba(139, 92, 246, 0.45); } [data-theme="light"] .forum-app .forum-thread-row__title, [data-theme="light"] .forum-thread-row__title { color: #1f2937; } [data-theme="light"] .forum-app .forum-thread-row:hover .forum-thread-row__title, [data-theme="light"] .forum-thread-row:hover .forum-thread-row__title { color: #111827; } [data-theme="light"] .forum-app .forum-thread-row--new .forum-thread-row__title, [data-theme="light"] .forum-thread-row--new .forum-thread-row__title { color: #111827; } [data-theme="light"] .forum-app .forum-hub-review-group__staff { color: #111827; } [data-theme="light"] .forum-app .forum-hub-section-title { color: rgba(15, 23, 42, 0.55); } [data-theme="light"] .forum-app .forum-hub-review-card .shop-review-item { background: var(--hero-card); border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } [data-theme="light"] .forum-app .forum-hub-review-card:not(.forum-hub-review-card--shop-unlisted):hover .shop-review-item { border-color: rgba(109, 40, 217, 0.35); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1); } [data-theme="light"] .forum-app .forum-hub-review-stat { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.1); color: rgba(15, 23, 42, 0.65); } [data-theme="light"] .forum-app .forum-hub-review-reply-stat { color: #6d28d9; } [data-theme="light"] .forum-category-pill { color: rgba(15, 23, 42, 0.65); background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.1); } [data-theme="light"] .forum-app .forum-category-pill[data-cat="new"], [data-theme="light"] .forum-app .forum-category-pill[data-category="new"] { color: #6d28d9; background: rgba(139, 92, 246, 0.1); border-color: rgba(124, 58, 237, 0.22); } [data-theme="light"] .forum-stat-pill { background: rgba(15, 23, 42, 0.06); } [data-theme="light"] .forum-thread-detail:not(.forum-thread-detail--loading) { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08); } [data-theme="light"] .forum-thread-header { background: rgba(15, 23, 42, 0.03); } [data-theme="light"] .forum-thread-header__title { color: var(--text-primary); } [data-theme="light"] .forum-thread-follow { background: rgba(15, 23, 42, 0.03); } [data-theme="light"] .forum-post__name { color: var(--text-primary); } [data-theme="light"] .forum-post-content { color: #374151; } [data-theme="light"] .forum-post__bubble { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); } [data-theme="light"] .forum-post:hover .forum-post__bubble { background: rgba(15, 23, 42, 0.055); } [data-theme="light"] .forum-post__avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95); } [data-theme="light"] .forum-post__line { background: linear-gradient(180deg, rgba(100, 116, 139, 0.45) 0%, rgba(148, 163, 184, 0.15) 100%); } [data-theme="light"] .forum-role-badge { background: rgba(15, 23, 42, 0.05); } [data-theme="light"] .forum-post__actions { background: transparent; box-shadow: none; } [data-theme="light"] .forum-post-action:hover, [data-theme="light"] .forum-post-action:focus-visible { color: var(--primary-700); } [data-theme="light"] .forum-kbd, [data-theme="light"] .forum-app .forum-app__subtitle .forum-kbd { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.12); color: var(--gray-600); } [data-theme="light"] .forum-compose-dock { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08); } [data-theme="light"] .forum-compose-dock__head { background: rgba(15, 23, 42, 0.03); } [data-theme="light"] .forum-compose-tools { background: rgba(15, 23, 42, 0.03); } [data-theme="light"] .forum-tool-btn:hover, [data-theme="light"] .forum-tool-btn:focus-visible { color: var(--primary-700); } [data-theme="light"] .forum-reply-to__who { color: #1f2937; } [data-theme="light"] .forum-reply-to__cancel:hover { background: rgba(15, 23, 42, 0.06); color: #111827; } [data-theme="light"] .forum-mention-dropdown { background: #ffffff; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15); } [data-theme="light"] .forum-emoji-quick__btn { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.04); } [data-theme="light"] .forum-post-content pre { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.1); color: #111827; } [data-theme="light"] .forum-post-content code { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.08); color: #1f2937; } [data-theme="light"] .forum-skeleton-line, [data-theme="light"] .forum-skeleton-hash, [data-theme="light"] .forum-skeleton-avatar { background: linear-gradient( 100deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.09) 45%, rgba(15, 23, 42, 0.04) 90% ); } [data-theme="light"] .forum-guest-card__title { color: var(--text-primary); } [data-theme="light"] .forum-drop-overlay__inner { color: #111827; background: rgba(255, 255, 255, 0.92); } @media (max-width: 640px), (hover: none) and (pointer: coarse) { [data-theme="light"] .forum-post-action { background: rgba(15, 23, 42, 0.04); } } /* Quill inside forum - light surfaces (higher specificity than global Snow hacks) */ [data-theme="light"] .forum-app .thesms-rich-editor.ql-container.ql-snow { background: #fafafa; border-top-color: rgba(139, 92, 246, 0.2); } [data-theme="light"] .forum-app .thesms-rich-editor .ql-editor { color: #111827 !important; background-color: #fafafa !important; } [data-theme="light"] .forum-app .thesms-rich-editor .ql-editor.ql-blank::before { color: rgba(75, 85, 99, 0.55); } [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow { background: rgba(243, 244, 246, 0.98); border-bottom-color: rgba(139, 92, 246, 0.18); } [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button, [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn { color: #475569; } [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:hover, [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible, [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active, [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn:hover, [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .forum-tool-btn:focus-visible { color: #1e1b4b; } [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-stroke { stroke: #475569; } [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-fill, [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-fill.ql-stroke { fill: #475569; } [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-stroke, [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible .ql-stroke, [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--primary-600); } [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-fill, [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:focus-visible .ql-fill, [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-fill, [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button:hover .ql-fill.ql-stroke, [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow button.ql-active .ql-fill.ql-stroke { fill: var(--primary-600); } [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .ql-picker { color: #475569; } [data-theme="light"] .forum-app .forum-field-wrap > .ql-toolbar.ql-snow .forum-compose-tools__left--toolbar { border-left-color: rgba(15, 23, 42, 0.12); } [data-theme="light"] .forum-compose-dock--reply .thesms-rich-editor .ql-editor { color: #111827 !important; background-color: #fafafa !important; } [data-theme="light"] .forum-compose-dock--reply .thesms-rich-editor .ql-editor.ql-blank::before { color: rgba(75, 85, 99, 0.55); } [data-theme="light"] .forum-compose-dock--reply .forum-tool-btn { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.1); color: #334155; } [data-theme="light"] .forum-compose-dock--reply .forum-char-count { color: rgba(71, 85, 105, 0.75); } [data-theme="light"] .forum-compose-dock--v2 .forum-reply-to__who { color: #312e81; } [data-theme="light"] .forum-compose-dock--v2 .forum-compose-tools .btn-secondary { border-color: rgba(15, 23, 42, 0.14); color: #334155; background: rgba(255, 255, 255, 0.9); } [data-theme="light"] .forum-compose-dock--v2 .forum-compose-tools .btn-secondary:hover, [data-theme="light"] .forum-compose-dock--v2 .forum-compose-tools .btn-secondary:focus-visible { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.2); color: #111827; } [data-theme="light"] .forum-compose-dock--v2 { background: linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, rgba(255, 255, 255, 0.98) 100%), #ffffff; border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 38px rgba(15, 23, 42, 0.1); } [data-theme="light"] .forum-compose-dock--v2:focus-within { border-color: rgba(139, 92, 246, 0.45); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 0 0 3px rgba(139, 92, 246, 0.15), 0 14px 44px rgba(15, 23, 42, 0.12); } [data-theme="light"] .forum-compose-dock--v2 .forum-compose-dock__label { color: rgba(91, 33, 182, 0.92); } [data-theme="light"] .forum-compose-dock--v2 .forum-compose-dock__hint { color: rgba(71, 85, 105, 0.9); } [data-theme="light"] .forum-compose-dock--v2 .forum-compose-dock__hint .forum-kbd { color: #475569; background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.12); box-shadow: none; } [data-theme="light"] .forum-compose-dock--v2 .forum-compose-dock__footer { color: rgba(71, 85, 105, 0.88); } [data-theme="light"] .forum-compose-dock--v2 .forum-new-thread-form .modal-input { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); color: #111827; } [data-theme="light"] .forum-compose-dock--v2 .forum-new-thread-form .modal-input:focus { background: #fafafa; border-color: rgba(139, 92, 246, 0.45); } [data-theme="light"] .forum-compose-dock--v2 .forum-compose-validation { color: #5b21b6; } [data-theme="light"] .forum-compose-dock--v2 .forum-reply-to__label { color: var(--primary-600); } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow::after { background: rgba(15, 23, 42, 0.1); } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-formats + .ql-formats { border-left-color: rgba(15, 23, 42, 0.1); } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button { color: #475569 !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:hover, [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:focus-visible { background: rgba(15, 23, 42, 0.06) !important; color: #111827 !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button.ql-active { color: var(--primary-600, #7c3aed) !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-stroke { stroke: #475569 !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-fill, [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-fill.ql-stroke { fill: #475569 !important; stroke: #475569 !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:hover .ql-stroke, [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:focus-visible .ql-stroke { stroke: #111827 !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:hover .ql-fill, [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:focus-visible .ql-fill, [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:hover .ql-fill.ql-stroke, [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button:focus-visible .ql-fill.ql-stroke { fill: #111827 !important; stroke: #111827 !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--primary-600, #7c3aed) !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--primary-600, #7c3aed) !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow button.ql-active .ql-fill.ql-stroke { fill: var(--primary-600, #7c3aed) !important; stroke: var(--primary-600, #7c3aed) !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-picker-label .ql-stroke { stroke: #64748b !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke { stroke: #111827 !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--primary-600, #7c3aed) !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-container.ql-snow .ql-editor { color: #111827 !important; } [data-theme="light"] .forum-compose-dock--v2 .thesms-rich-editor .ql-editor.ql-blank::before { color: rgba(100, 116, 139, 0.75); } [data-theme="light"] .forum-compose-dock--v2 .forum-compose-tools::before { background: rgba(15, 23, 42, 0.1); } [data-theme="light"] .forum-compose-dock--v2 .forum-tool-btn { color: #475569; } [data-theme="light"] .forum-compose-dock--v2 .forum-tool-btn:hover, [data-theme="light"] .forum-compose-dock--v2 .forum-tool-btn:focus-visible { color: #312e81; } @media (max-width: 640px) { [data-theme="light"] .forum-compose-dock--reply .forum-field-wrap > .ql-toolbar.ql-snow { background: rgba(249, 250, 251, 0.98) !important; } [data-theme="light"] .forum-compose-dock { box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.1); } } /* Body-mounted forum widgets (not under .forum-app) */ [data-theme="light"] .forum-emoji-picker { background: #ffffff; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18); } [data-theme="light"] .forum-emoji-picker__search { background: rgba(15, 23, 42, 0.04); color: #111827; } [data-theme="light"] .forum-emoji-picker__tab:hover { background: rgba(15, 23, 42, 0.06); } [data-theme="light"] .forum-toast { background: rgba(255, 255, 255, 0.96); color: #111827; border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14); } /* iOS Safari zooms when the focused field’s computed font-size is under 16px. Minimum 16px on touch/coarse pointers; pinch-zoom is unchanged. */ @media (pointer: coarse) { :is( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]), select, textarea, .ql-editor, [contenteditable="true"] ) { font-size: max(16px, 1em) !important; } } /* Connectivity (public/js/offline.js) - offset chrome instead of covering it */ :root { --thesms-connectivity-offset: 0px; } .thesms-connectivity-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10050; padding: 0.5rem 1rem; padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)); font-size: 0.8125rem; font-weight: 500; text-align: center; color: #fff; pointer-events: none; box-sizing: border-box; } .thesms-connectivity-banner--offline { background: #7f1d1d; } .thesms-connectivity-banner--online { background: #14532d; } .thesms-connectivity-banner--syncing { background: #1e3a5f; } html.thesms-connectivity-active body { padding-top: var(--thesms-connectivity-offset); } html.thesms-connectivity-active .header { top: var(--thesms-connectivity-offset); } html.thesms-connectivity-active .search-page .search-filters-bar { top: calc(var(--mobile-header-offset) + var(--thesms-connectivity-offset)); } @media (min-width: 1024px) { html.thesms-connectivity-active .sidebar { top: var(--thesms-connectivity-offset); height: calc(100% - var(--thesms-connectivity-offset)); } html.thesms-connectivity-active .search-page .search-filters-bar { top: var(--thesms-connectivity-offset); } } .offline-fav-card { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 1rem; } .offline-fav-card__avatar { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .offline-fav-card__avatar--ph { display: block; background: var(--hero-border); } .offline-fav-card__title { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; } .offline-fav-card__addr { font-size: 0.875rem; color: var(--gray-400); margin: 0; } .offline-shop-shell__hero { width: 100%; max-height: 12rem; object-fit: cover; border-radius: 0.5rem; margin-bottom: 1rem; } .offline-shop-shell__addr { color: var(--gray-400); margin: 0 0 1rem; } .offline-shop-shell__hours { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.875rem; margin: 0 0 1rem; } .offline-shop-shell__hours dt { color: var(--gray-400); text-transform: capitalize; } .shop-offline-notice { margin-bottom: 0.75rem; } .offline-unavailable-actions { width: 100%; max-width: 20rem; } .offline-unavailable-actions .btn-primary { width: 100%; max-width: 14rem; } /* ── Language switcher (flag icon + dropdown) ───────────────────────────── */ .lang-switcher { position: relative; display: inline-flex; } .lang-switcher-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; cursor: pointer; border-radius: 0.375rem; color: var(--gray-400); line-height: 1; } .lang-switcher-flag { font-size: 1.25rem; line-height: 1; } .header-actions .lang-switcher-btn { padding: 0.5rem; } .header-actions .lang-switcher-btn:hover { color: var(--text-primary); background: var(--hero-border); } .lang-switcher-menu { position: absolute; z-index: 60; min-width: 11rem; padding: 0.375rem; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 0.625rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } .lang-switcher--header .lang-switcher-menu { top: calc(100% + 0.4rem); right: 0; } .lang-switcher-heading { margin: 0.25rem 0.5rem 0.375rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-400); } .lang-switcher-option { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem 0.625rem; background: none; border: none; border-radius: 0.4rem; cursor: pointer; text-align: left; font-size: 0.875rem; color: var(--text-primary); } .lang-switcher-option:hover { background: var(--hero-border); } .lang-switcher-option.is-active { color: var(--primary-400); font-weight: 600; } .lang-switcher-name { white-space: nowrap; } /* Sidebar variant: render like a nav row, menu floats above the button. */ .lang-switcher--sidebar { display: block; } .lang-switcher--sidebar .lang-switcher-btn { width: 100%; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; } .lang-switcher--sidebar .lang-switcher-btn:hover { color: var(--text-primary); background: var(--hero-border); } .lang-switcher--sidebar .lang-switcher-menu { bottom: calc(100% + 0.4rem); left: 0; right: 0; } .lang-switcher--sidebar .lang-switcher-flag { font-size: 1.1rem; } .sidebar-footer { padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--hero-border); } /* Auth / launch card footer: centred flag button, menu opens upward. */ .auth-card-footer-lang { display: flex; justify-content: center; margin-top: 0.75rem; } .lang-switcher--auth .lang-switcher-btn { padding: 0.375rem 0.5rem; color: var(--gray-400); border-radius: 0.375rem; } .lang-switcher--auth .lang-switcher-btn:hover { color: var(--text-primary); background: var(--hero-border); } .lang-switcher--auth .lang-switcher-menu { bottom: calc(100% + 0.4rem); left: 50%; transform: translateX(-50%); } /* Per-message chat translation */ .msg-text--decoding { opacity: 0.92; letter-spacing: 0.01em; } .msg-translate { margin: 0.15rem 0 0.35rem; line-height: 1; } .message-sent .msg-translate { text-align: right; } .msg-translate-btn { background: none; border: none; padding: 0; cursor: pointer; font-size: 0.72rem; font-weight: 600; color: var(--primary-400); } .msg-translate-btn:hover:not(:disabled) { text-decoration: underline; } .msg-translate-btn:disabled { opacity: 0.65; cursor: wait; } /* Admin SEO Google SERP preview */ .admin-seo-preview-controls { display: grid; gap: 1rem; margin-bottom: 1.25rem; max-width: 36rem; } .admin-seo-serp-badge { display: inline-block; margin-bottom: 0.75rem; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; background: var(--hero-card); border: 1px solid var(--hero-border); color: var(--gray-300); } .admin-seo-serp-badge--ok { color: #86efac; border-color: rgba(134, 239, 172, 0.35); } .admin-seo-serp-badge--blocked { color: #fca5a5; border-color: rgba(252, 165, 165, 0.35); } .admin-seo-serp-card { max-width: 36rem; padding: 1rem 1.1rem; border-radius: 0.75rem; background: #fff; color: #202124; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18); } .admin-seo-serp-breadcrumb { font-size: 0.8125rem; line-height: 1.3; color: #202124; margin-bottom: 0.35rem; } .admin-seo-serp-title { display: inline-block; font-size: 1.25rem; line-height: 1.3; color: #1a0dab; text-decoration: none; margin-bottom: 0.2rem; } .admin-seo-serp-title:hover { text-decoration: underline; } .admin-seo-serp-url { font-size: 0.875rem; line-height: 1.4; color: #006621; margin-bottom: 0.35rem; word-break: break-all; } .admin-seo-serp-desc { margin: 0; font-size: 0.875rem; line-height: 1.58; color: #4d5156; } /* Demo shop identity masking (Admin → Demo mode) */ .demo-shop-identity .demo-slug-blur { filter: blur(4px); user-select: none; } /* Connect card (/connect) */ .connect-page { --connect-surface-pad-x: 1.25rem; --connect-surface-pad-top: 1.35rem; --connect-surface-pad-bottom: 1.25rem; --connect-surface-header-gap: 0.75rem; --connect-surface-header-space: 0.85rem; --connect-surface-title-size: 1.55rem; --connect-surface-title-size-compact: 1.15rem; --connect-surface-max-width: 30rem; min-height: 100vh; min-height: 100dvh; margin: 0; background: #0a0812; color: #e5e7eb; display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: max(var(--page-inline-sm), env(safe-area-inset-top)) max(var(--page-inline-sm), env(safe-area-inset-right)) max(var(--page-inline-sm), env(safe-area-inset-bottom)) max(var(--page-inline-sm), env(safe-area-inset-left)); overflow-x: hidden; overflow-y: auto; } html[data-theme="light"] .connect-page { background: #e8eaf0; color: #1f2937; } .connect-ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse 72% 58% at 50% 40%, rgba(139, 92, 246, 0.32), transparent 62%), radial-gradient(ellipse 90% 60% at 50% -10%, rgba(124, 58, 237, 0.38), transparent 55%), radial-gradient(ellipse 70% 50% at 15% 85%, rgba(160, 94, 245, 0.22), transparent 50%), radial-gradient(ellipse 55% 45% at 88% 72%, rgba(91, 33, 182, 0.26), transparent 48%), linear-gradient(180deg, #0a0812 0%, #12101a 45%, #0a0812 100%); z-index: 0; } .connect-ambient::before, .connect-ambient::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(72px); will-change: transform, opacity; } .connect-ambient::before { width: min(72vw, 36rem); height: min(72vw, 36rem); left: 50%; top: 40%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(167, 139, 250, 0.42) 0%, rgba(124, 58, 237, 0.12) 42%, transparent 72%); animation: connect-ambient-pulse 9s ease-in-out infinite; } .connect-ambient::after { width: min(48vw, 22rem); height: min(48vw, 22rem); left: 18%; bottom: 8%; background: radial-gradient(circle, rgba(160, 94, 245, 0.28) 0%, transparent 70%); animation: connect-ambient-drift 14s ease-in-out infinite; } html[data-theme="light"] .connect-ambient { background: radial-gradient(ellipse 72% 58% at 50% 40%, rgba(124, 58, 237, 0.14), transparent 62%), radial-gradient(ellipse 90% 60% at 50% -10%, rgba(124, 58, 237, 0.16), transparent 55%), radial-gradient(ellipse 70% 50% at 15% 85%, rgba(160, 94, 245, 0.1), transparent 50%), linear-gradient(180deg, #e8eaf0 0%, #f3f4f6 50%, #e8eaf0 100%); } html[data-theme="light"] .connect-ambient::before { background: radial-gradient(circle, rgba(167, 139, 250, 0.22) 0%, rgba(124, 58, 237, 0.06) 42%, transparent 72%); } html[data-theme="light"] .connect-ambient::after { background: radial-gradient(circle, rgba(160, 94, 245, 0.14) 0%, transparent 70%); } .connect-spotlight { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle 24rem at 50% 40%, rgba(196, 181, 253, 0.24) 0%, rgba(124, 58, 237, 0.1) 38%, transparent 72%), radial-gradient(circle 14rem at 50% 40%, rgba(255, 255, 255, 0.14) 0%, transparent 68%); z-index: 0; animation: connect-spotlight-breathe 7s ease-in-out infinite; } html[data-theme="light"] .connect-spotlight { background: radial-gradient(circle 24rem at 50% 40%, rgba(167, 139, 250, 0.18) 0%, transparent 72%), radial-gradient(circle 14rem at 50% 40%, rgba(255, 255, 255, 0.55) 0%, transparent 68%); } @keyframes connect-ambient-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.72; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } } @keyframes connect-ambient-drift { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.65; } 33% { transform: translate(4%, -3%) scale(1.06); opacity: 0.85; } 66% { transform: translate(-3%, 4%) scale(0.96); opacity: 0.75; } } @keyframes connect-spotlight-breathe { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } } .connect-main { position: relative; z-index: 1; width: min(100%, var(--connect-surface-max-width)); max-width: var(--connect-surface-max-width); margin-inline: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex: 0 1 auto; } .connect-view { width: 100%; } .connect-scene { width: 100%; opacity: 0; transform: translateY(28px) scale(0.94); animation: connect-scene-enter 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards; } .connect-scene.is-visible { opacity: 1; } @keyframes connect-scene-enter { to { opacity: 1; transform: translateY(0) scale(1); } } .connect-card-stage { position: relative; perspective: 2000px; transform-style: preserve-3d; padding: 0.5rem 0 1.5rem; } .connect-card-floor-shadow { position: absolute; left: 5%; right: 5%; bottom: 0.5rem; height: 3.5rem; border-radius: 50%; background: radial-gradient(ellipse, rgba(124, 58, 237, 0.28) 0%, rgba(0, 0, 0, 0.55) 38%, transparent 68%); filter: blur(14px); transform: rotateX(82deg) scale(0.95); pointer-events: none; } html[data-theme="light"] .connect-card-floor-shadow { background: radial-gradient(ellipse, rgba(15, 23, 42, 0.28) 0%, transparent 68%); } .connect-card-tilt { transform-style: preserve-3d; will-change: transform; } .connect-card { --connect-thickness: 0.45rem; --connect-card-ratio: 1.75; position: relative; display: grid; width: 100%; height: auto; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; transform-style: preserve-3d; transition: transform 0.85s cubic-bezier(0.45, 0.05, 0.2, 1); -webkit-tap-highlight-color: transparent; transform: rotateX(8deg); } .connect-card.is-flipped { transform: rotateX(8deg) rotateY(180deg); } .connect-card:not(.is-flipped) .connect-card-back { pointer-events: none; } .connect-card.is-flipped .connect-card-front { pointer-events: none; } .connect-card-face { grid-area: 1 / 1; position: relative; width: 100%; min-height: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 1.35rem; overflow: hidden; transform-style: preserve-3d; } .connect-card-front { aspect-ratio: var(--connect-card-ratio) / 1; transform: translateZ(calc(var(--connect-thickness) / 2)); background: linear-gradient(155deg, #221c30 0%, #14111c 42%, #0c0a10 100%); box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.28), 0 0 0 2px rgba(0, 0, 0, 0.75) inset, 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 3px 0 #2a2438, 0 4px 0 #1a1524, 0 0 72px -16px rgba(124, 58, 237, 0.38), 0 50px 90px -24px rgba(0, 0, 0, 0.75), 0 24px 48px rgba(0, 0, 0, 0.45); } .connect-card-back { display: flex; flex-direction: column; justify-content: center; align-items: stretch; transform: rotateY(180deg) translateZ(calc(var(--connect-thickness) / 2)); background: linear-gradient(145deg, #1a1524 0%, #100e16 55%, #0a090e 100%); box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.22), 0 0 0 2px rgba(0, 0, 0, 0.75) inset, 0 3px 0 #2a2438, 0 0 72px -16px rgba(124, 58, 237, 0.32), 0 50px 90px -24px rgba(0, 0, 0, 0.75), 0 24px 48px rgba(0, 0, 0, 0.45); } .connect-card-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 -1px 0 rgba(0, 0, 0, 0.5) inset; pointer-events: none; } .connect-card-front::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(183, 134, 245, 0.35), transparent); opacity: 0.6; pointer-events: none; } html[data-theme="light"] .connect-card-front { background: linear-gradient(155deg, #ffffff 0%, #f8f7fc 45%, #ede9fe 100%); box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.14), 0 0 0 2px rgba(255, 255, 255, 0.95) inset, 0 3px 0 #e5e7eb, 0 50px 80px -24px rgba(15, 23, 42, 0.22), 0 20px 40px rgba(15, 23, 42, 0.12); } html[data-theme="light"] .connect-card-back { background: linear-gradient(145deg, #fafafa 0%, #f3f4f6 55%, #e5e7eb 100%); box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.12), 0 50px 70px -24px rgba(15, 23, 42, 0.16); } .connect-card-texture { position: absolute; inset: 0; opacity: 0.35; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); background-size: 180px 180px; mix-blend-mode: overlay; pointer-events: none; } .connect-card-gloss { position: absolute; inset: 0; background: linear-gradient( 125deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 28%, transparent 42%, transparent 100% ); pointer-events: none; } .connect-card-front-lotus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem 2.5rem; } .connect-card-front-lotus .connect-lotus { width: min(62%, 13rem); height: auto; } .connect-lotus { width: 100%; height: auto; display: block; overflow: visible; } @media (prefers-reduced-motion: no-preference) { .connect-lotus.play .connect-lotus-draw { stroke-dasharray: 100; animation: connect-lotus-trace 1.6s ease-in-out both, connect-lotus-fill 0.7s ease-out 1.5s both; } .connect-lotus.play #petalC { animation-delay: 0.15s, 1.65s; } .connect-lotus.play #petalML, .connect-lotus.play #petalMR { animation-delay: 0.3s, 1.8s; } .connect-lotus.play #petalOL, .connect-lotus.play #petalOR { animation-delay: 0.45s, 1.95s; } @keyframes connect-lotus-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes connect-lotus-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } } } .connect-card-back-inner { position: relative; z-index: 2; height: auto; padding: 1.2rem 1.2rem 0.65rem 1.4rem; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.65rem; box-sizing: border-box; pointer-events: auto; } .connect-card-no-flip { position: relative; z-index: 3; } .connect-card-back-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: stretch; width: 100%; } .connect-card-back-details { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 100%; padding-left: 0.5rem; } .connect-card-qr-col { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; text-align: center; } .connect-card-qr-link { display: block; flex: none; align-self: center; width: auto; height: auto; max-height: none; aspect-ratio: auto; text-decoration: none; cursor: pointer; } .connect-card-qr-frame { display: block; width: auto; height: auto; padding: 0.1rem; border-radius: 0.55rem; line-height: 0; overflow: hidden; box-sizing: border-box; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease; } .connect-card-qr-link:hover .connect-card-qr-frame, .connect-card-qr-link:focus-visible .connect-card-qr-frame { transform: scale(1.02); } .connect-card-qr-caption { margin: 0.35rem 0 0; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9ca3af; } .connect-card-qr { display: block; width: 9.25rem; height: 9.25rem; object-fit: contain; } .connect-card-back-name { margin: 0 0 0.2rem; font-size: 1.75rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; background: linear-gradient(135deg, #f5f3ff 0%, #c4b5fd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .connect-card-back-role { margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #a78bfa; } html[data-theme="light"] .connect-card-back-role { color: #7c3aed; } html[data-theme="light"] .connect-card-back-name { background: linear-gradient(135deg, #1f2937 0%, #6d28d9 100%); -webkit-background-clip: text; background-clip: text; } .connect-card-detail-row { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.3rem; padding: 0.28rem 0.35rem; width: 100%; border: 0; background: transparent; font: inherit; text-align: left; text-decoration: none; color: inherit; border-radius: 0.5rem; cursor: pointer; transition: background 0.15s ease; } .connect-card-detail-row:hover { background: rgba(124, 58, 237, 0.08); } .connect-card-detail-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; color: #a78bfa; } .connect-card-detail-icon svg { width: 1.125rem; height: 1.125rem; } .connect-card-detail-value { flex: 1; min-width: 0; font-size: 0.9rem; line-height: 1.35; overflow-wrap: anywhere; color: #e5e7eb; } .connect-card-detail-row-phone .connect-card-detail-value { white-space: nowrap; } html[data-theme="light"] .connect-card-detail-value { color: #374151; } .connect-card-detail-row:hover .connect-card-detail-value { color: #c4b5fd; } html[data-theme="light"] .connect-card-detail-row:hover .connect-card-detail-value { color: #6d28d9; } .connect-phone-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .connect-phone-modal[hidden] { display: none; } .connect-phone-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); } .connect-phone-modal-panel { position: relative; z-index: 1; width: min(100%, 20rem); padding: var(--connect-surface-pad-top) var(--connect-surface-pad-x) var(--connect-surface-pad-bottom); border-radius: 1rem; background: linear-gradient(160deg, #1a1524 0%, #0d0b12 100%); border: 1px solid rgba(167, 139, 250, 0.25); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); } html[data-theme="light"] .connect-phone-modal-panel { background: #fff; border-color: rgba(124, 58, 237, 0.2); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18); } .connect-phone-modal-number { margin: 0 0 1.15rem; font-size: 0.95rem; color: #a78bfa; } .connect-phone-modal-actions { display: flex; flex-direction: column; gap: 0.55rem; } .connect-phone-modal-btn { display: flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 2.85rem; padding: 0.65rem 1rem; border-radius: 0.65rem; font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .connect-phone-modal-btn-icon svg { width: 1.125rem; height: 1.125rem; } .connect-phone-modal-btn-primary { background: #7c3aed; color: #fff; } .connect-phone-modal-btn-primary:hover { background: #6d28d9; } .connect-phone-modal-btn-secondary { background: rgba(124, 58, 237, 0.12); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, 0.35); } html[data-theme="light"] .connect-phone-modal-btn-secondary { color: #6d28d9; background: rgba(124, 58, 237, 0.08); } .connect-phone-modal-btn-secondary:hover { background: rgba(124, 58, 237, 0.2); } body.connect-phone-modal-open { overflow: hidden; } .connect-card-back-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; width: 100%; flex: 0 0 auto; } .connect-card-cta { display: flex; align-items: center; justify-content: center; min-height: 2.15rem; padding: 0.45rem 0.4rem; border-radius: 0.55rem; font-size: 0.68rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; border: 1px solid rgba(167, 139, 250, 0.35); background: rgba(124, 58, 237, 0.12); color: #c4b5fd; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .connect-card-cta:hover, .connect-card-cta:focus-visible { background: rgba(124, 58, 237, 0.22); color: #ede9fe; } .connect-card-cta-primary { background: #7c3aed; border-color: #7c3aed; color: #fff; } .connect-card-cta-primary:hover, .connect-card-cta-primary:focus-visible { background: #6d28d9; border-color: #6d28d9; color: #fff; } html[data-theme="light"] .connect-card-cta { color: #6d28d9; background: rgba(124, 58, 237, 0.08); } html[data-theme="light"] .connect-card-cta:hover, html[data-theme="light"] .connect-card-cta:focus-visible { background: rgba(124, 58, 237, 0.14); color: #5b21b6; } html[data-theme="light"] .connect-card-cta-primary { color: #fff; } .connect-flip-hint { display: block; width: 100%; margin: 0.85rem 0 0; padding: 0; border: 0; background: none; font: inherit; text-align: center; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(156, 163, 175, 0.75); cursor: pointer; text-decoration: none; transition: color 0.15s ease; } .connect-flip-hint:hover, .connect-flip-hint:focus-visible { color: #a78bfa; text-decoration: underline; text-underline-offset: 0.2em; } .connect-flip-hint:focus-visible { outline: 2px solid rgba(167, 139, 250, 0.55); outline-offset: 3px; border-radius: 2px; } .connect-view[hidden] { display: none !important; } .connect-panel-card { position: relative; width: 100%; margin: 0; padding: var(--connect-surface-pad-top) var(--connect-surface-pad-x) var(--connect-surface-pad-bottom); border-radius: 1.35rem; background: linear-gradient(145deg, #1a1524 0%, #100e16 55%, #0a090e 100%); border: 1px solid rgba(196, 181, 253, 0.22); box-shadow: 0 0 72px -16px rgba(124, 58, 237, 0.32), 0 24px 48px rgba(0, 0, 0, 0.45); } html[data-theme="light"] .connect-panel-card { background: linear-gradient(145deg, #fafafa 0%, #f3f4f6 55%, #e5e7eb 100%); border-color: rgba(124, 58, 237, 0.12); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12); } .connect-surface-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--connect-surface-header-gap); margin: 0 0 var(--connect-surface-header-space); } .connect-surface-header--compact { margin-bottom: 0.25rem; } .connect-surface-title { flex: 1; min-width: 0; margin: 0; font-size: var(--connect-surface-title-size); line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; } .connect-surface-title--compact { font-size: var(--connect-surface-title-size-compact); letter-spacing: -0.02em; } .connect-surface-close { flex-shrink: 0; width: 2rem; height: 2rem; margin: 0; padding: 0; border: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.06); color: #9ca3af; font-size: 0.85rem; cursor: pointer; line-height: 1; } .connect-surface-close:hover { background: rgba(255, 255, 255, 0.12); color: #e5e7eb; } html[data-theme="light"] .connect-surface-close { background: rgba(15, 23, 42, 0.06); color: #6b7280; } html[data-theme="light"] .connect-surface-close:hover { background: rgba(15, 23, 42, 0.1); color: #111827; } .connect-panel-body { font-size: 0.92rem; line-height: 1.55; color: #d1d5db; } .connect-panel-body p { margin: 0 0 0.85rem; } .connect-panel-body p:last-child { margin-bottom: 0; } html[data-theme="light"] .connect-panel-body { color: #374151; } .connect-panel-lead { margin: 0 0 0.95rem; font-size: 0.88rem; line-height: 1.45; color: #9ca3af; } html[data-theme="light"] .connect-panel-lead { color: #6b7280; } .connect-panel-empty { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.5; color: #9ca3af; } .connect-video-list { margin: 0 0 1rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; } .connect-video-item { margin: 0; } .connect-video-trigger, .connect-video-soon { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.25rem; padding: 0.65rem 0.75rem; border-radius: 0.65rem; border: 1px solid rgba(167, 139, 250, 0.35); background: rgba(124, 58, 237, 0.12); text-align: left; } .connect-video-trigger { cursor: pointer; font: inherit; color: inherit; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .connect-video-trigger:hover, .connect-video-trigger:focus-visible { background: rgba(124, 58, 237, 0.22); border-color: rgba(196, 181, 253, 0.55); } .connect-video-soon { opacity: 0.72; border-style: dashed; } .connect-video-trigger-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(124, 58, 237, 0.28); color: #ede9fe; font-size: 0.72rem; line-height: 1; } .connect-video-trigger-icon-muted { background: rgba(124, 58, 237, 0.12); color: #9ca3af; } .connect-video-trigger-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .connect-video-trigger-title { font-size: 0.92rem; font-weight: 600; color: #ede9fe; } .connect-video-trigger-desc { font-size: 0.78rem; line-height: 1.35; color: #9ca3af; } html[data-theme="light"] .connect-video-trigger-title { color: #1f2937; } html[data-theme="light"] .connect-video-trigger-desc { color: #6b7280; } .connect-video-trigger-badge { flex-shrink: 0; padding: 0.2rem 0.55rem; border-radius: 9999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: #7c3aed; color: #fff; } .connect-video-trigger-badge-soon { background: rgba(124, 58, 237, 0.16); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.28); } .connect-panel-video, .connect-video-modal-player-wrap { position: relative; width: 100%; aspect-ratio: 720 / 640; max-height: min(calc(100dvh - 7rem), calc((100vw - 2.5rem) * 640 / 720)); margin: 0 0 0.85rem; border-radius: 0.65rem; overflow: hidden; background: #000; } .connect-panel-video-player, .connect-video-modal-player { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; } .connect-video-modal { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px)); } .connect-video-modal[hidden] { display: none; } .connect-video-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(4px); } .connect-video-modal-panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(100%, calc(100vw - 1rem), var(--connect-surface-max-width)); max-height: calc(100dvh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: var(--connect-surface-pad-top) var(--connect-surface-pad-x) var(--connect-surface-pad-bottom); border-radius: 1.35rem; background: linear-gradient(145deg, #1a1524 0%, #100e16 55%, #0a090e 100%); border: 1px solid rgba(196, 181, 253, 0.22); box-shadow: 0 0 72px -16px rgba(124, 58, 237, 0.32), 0 24px 48px rgba(0, 0, 0, 0.45); box-sizing: border-box; } html[data-theme="light"] .connect-video-modal-panel { background: linear-gradient(145deg, #fafafa 0%, #f3f4f6 55%, #e5e7eb 100%); border-color: rgba(124, 58, 237, 0.12); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12); } .connect-video-modal-panel .connect-surface-header { flex-shrink: 0; } .connect-video-modal-player-wrap { flex: 1 1 auto; min-height: 0; margin: 0; max-height: min(calc(100dvh - 6.5rem), calc((100vw - 1.5rem) * 640 / 720)); } body.connect-video-modal-open { overflow: hidden; } @media (max-width: 640px) { .connect-video-modal { padding: 0; align-items: stretch; } .connect-video-modal-panel { width: 100%; max-height: 100dvh; min-height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; padding-top: max(var(--connect-surface-pad-top), env(safe-area-inset-top, 0px)); padding-right: max(var(--connect-surface-pad-x), env(safe-area-inset-right, 0px)); padding-bottom: max(var(--connect-surface-pad-bottom), env(safe-area-inset-bottom, 0px)); padding-left: max(var(--connect-surface-pad-x), env(safe-area-inset-left, 0px)); } .connect-video-modal-player-wrap { flex: 1 1 auto; max-height: none; border-radius: 0; } } .connect-panel-cta { display: flex; width: 100%; margin-top: 1rem; min-height: 2.5rem; font-size: 0.82rem; } body.connect-page--section .connect-flip-hint { display: none; } @media (max-width: 767px) { .connect-card { transform: none; } .connect-card.is-flipped { transform: rotateY(180deg); } } @media (max-width: 640px) { .connect-scene { animation: connect-scene-enter 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards; } .connect-card-stage { padding: 0.25rem 0 1.25rem; } .connect-card-floor-shadow { bottom: 0.25rem; height: 2.75rem; left: 5%; right: 5%; } .connect-card-back-inner { padding: 1.05rem 0.9rem 0.7rem 1.1rem; gap: 0.55rem; justify-content: flex-start; } .connect-card-back-grid { grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; align-items: stretch; } .connect-card-back-details { width: auto; padding-left: 0.25rem; } .connect-card-qr-link { flex: none; height: auto; max-height: none; aspect-ratio: auto; width: auto; } .connect-card-qr-frame { width: auto; height: auto; } .connect-card-qr { width: 6.85rem; height: 6.85rem; object-fit: fill; transform: scale(1.06); transform-origin: center; } .connect-card-qr-caption { margin-top: 0.28rem; font-size: 0.56rem; } .connect-card-back-name { font-size: 1.35rem; margin-bottom: 0.15rem; } .connect-card-back-role { margin-bottom: 0.45rem; font-size: 0.62rem; } .connect-card-detail-row { margin-bottom: 0.28rem; padding: 0.28rem 0.1rem; gap: 0.45rem; } .connect-card-detail-icon { width: 1.25rem; height: 1.25rem; } .connect-card-detail-icon svg { width: 1rem; height: 1rem; } .connect-card-detail-value { font-size: 0.8rem; line-height: 1.3; } .connect-card-back-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; } .connect-card-cta { min-height: 2.35rem; font-size: 0.72rem; } .connect-card-front-lotus { padding: 1.25rem 1.75rem; } .connect-card-front-lotus .connect-lotus { width: min(56%, 9.5rem); } .connect-flip-hint { margin-top: 0.85rem; font-size: 0.65rem; } } @media (max-width: 640px) and (prefers-reduced-motion: no-preference) { .connect-lotus.play .connect-lotus-draw { animation-delay: 1s, calc(1.5s + 1s); } .connect-lotus.play #petalC { animation-delay: calc(0.15s + 1s), calc(1.65s + 1s); } .connect-lotus.play #petalML, .connect-lotus.play #petalMR { animation-delay: calc(0.3s + 1s), calc(1.8s + 1s); } .connect-lotus.play #petalOL, .connect-lotus.play #petalOR { animation-delay: calc(0.45s + 1s), calc(1.95s + 1s); } } @media (max-width: 380px) { .connect-card-back-grid { gap: 0.5rem; } .connect-card-qr { width: 6.25rem; height: 6.25rem; transform: scale(1.06); transform-origin: center; } .connect-card-detail-value { font-size: 0.74rem; } .connect-card-cta { font-size: 0.66rem; } } @media (prefers-reduced-motion: reduce) { .connect-scene { animation: none; opacity: 1; transform: none; } .connect-ambient::before, .connect-ambient::after, .connect-spotlight { animation: none; } .connect-ambient::before { opacity: 0.85; } .connect-card, .connect-card-tilt { transition: none; } .connect-lotus.play .connect-lotus-draw { animation: none; stroke-dashoffset: 0; fill-opacity: 1; } } /* ============================================================ */ /* === ADMIN MOBILE === */ /* All rules here are inside mobile breakpoints only. */ /* Desktop layout is unchanged. */ /* ============================================================ */ /* ---------------------------------------------------------- 1. Admin page padding – tighten horizontal gutters on mobile ---------------------------------------------------------- */ @media (max-width: 768px) { .admin-page { padding: 0.75rem 0.75rem 4rem; } } /* ---------------------------------------------------------- 2. Admin primary nav (help-subnav.admin-main-nav) Make horizontally scrollable on narrow screens so all tabs remain reachable without wrapping into multiple rows that consume too much vertical space. ---------------------------------------------------------- */ @media (max-width: 768px) { .admin-main-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0.25rem; padding-bottom: 0.5rem; margin-bottom: 0.75rem; } .admin-main-nav::-webkit-scrollbar { display: none; } .admin-main-nav a { flex-shrink: 0; white-space: nowrap; } } /* ---------------------------------------------------------- 3. Admin sub-tabs (analytics, support, etc.) ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-subtabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.25rem; } .admin-subtabs::-webkit-scrollbar { display: none; } .admin-subtabs a { flex-shrink: 0; } } /* ---------------------------------------------------------- 4. Stat cards – already responsive via admin-stats-grid Ensure 1-col on very small screens ---------------------------------------------------------- */ @media (max-width: 400px) { .admin-stats-grid, .admin-stats-grid-4, .admin-stats-grid-3 { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- 5. Admin table wrappers – ensure horizontal scroll These classes already have overflow-x: auto on desktop; this confirms the behaviour at narrow widths and adds a visual bottom-fade hint. ---------------------------------------------------------- */ @media (max-width: 768px) { .admin-table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Short-value cells: keep IDs, dates, statuses on one line */ .admin-table .admin-date, .admin-table td.whitespace-nowrap, .admin-table .text-xs.font-mono { white-space: nowrap; } /* Prevent the table itself from being squeezed beyond its natural width */ .admin-table { min-width: max-content; } /* Except the expandable business/user tables which are designed to fit */ .admin-table--businesses-expandable, .admin-table--users-expandable { min-width: 0; } } /* ---------------------------------------------------------- 6. Businesses list toolbar – stack on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-businesses-list-toolbar { flex-direction: column; align-items: stretch; gap: 0.65rem; } .admin-businesses-list-toolbar-search { max-width: 100%; flex: none; } .admin-businesses-list-toolbar-filters { min-width: 0; } .admin-businesses-list-toolbar-sort { display: flex; align-items: center; gap: 0.5rem; } .admin-businesses-list-toolbar-sort .admin-analytics-filter-label { display: inline; margin-bottom: 0; flex-shrink: 0; } .admin-businesses-list-toolbar-sort .modal-input { flex: 1; } } /* ---------------------------------------------------------- 7. Section tabs bar – keep inline but allow wrapping ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-users-section-tabs-bar, .admin-businesses-section-tabs-bar, .admin-users-role-filters-bar { flex-direction: column; align-items: flex-start; } .admin-users-section-tabs-bar .admin-users-add-btn { margin-left: 0; align-self: flex-start; } .admin-businesses-inline-stats, .admin-users-inline-stats { align-self: flex-start; } } /* ---------------------------------------------------------- 8. Bulk toolbar – wrap buttons on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-users-bulk-toolbar { flex-wrap: wrap; gap: 0.35rem 0.5rem; } } /* ---------------------------------------------------------- 9. Business / user expandable table rows on very narrow screens The quick-actions column is already hidden at ≤639px; also reduce column padding to preserve width budget. ---------------------------------------------------------- */ @media (max-width: 480px) { .admin-table--users-expandable th, .admin-table--users-expandable td { padding-left: 0.4rem; padding-right: 0.4rem; } } /* ---------------------------------------------------------- 10. Expanded row detail (manage panel) ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-manage-grid { gap: 0.5rem; } .admin-manage-sec { padding: 0.65rem 0.75rem; } .admin-manage-dl { grid-template-columns: 1fr; } .admin-manage-btn-row, .admin-manage-actions { flex-wrap: wrap; } .admin-manage-inline-control .modal-input { min-width: 0; } } /* ---------------------------------------------------------- 11. Analytics toolbar – stack on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-analytics-toolbar, .admin-analytics-toolbar-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .admin-analytics-controls { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .admin-analytics-select { min-width: 0; width: 100%; } .admin-analytics-date-input { width: 100%; } .admin-analytics-custom-dates { flex-direction: column; align-items: flex-start; } } /* ---------------------------------------------------------- 12. Analytics chart grid – single column on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-analytics-chart-grid { grid-template-columns: 1fr; } .admin-analytics-span-2 { grid-column: span 1; } .admin-analytics-grid { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- 13. Bar chart – shorten label column on mobile ---------------------------------------------------------- */ @media (max-width: 480px) { .admin-bar-row { grid-template-columns: minmax(3.5rem, 6rem) 1fr auto; } } /* ---------------------------------------------------------- 14. Support layout – stack conversation list + detail ---------------------------------------------------------- */ @media (max-width: 768px) { .admin-support-layout.messages-layout { flex-direction: column; min-height: 0; } .admin-support-layout .conversation-list { width: 100%; max-width: 100%; border-right: none; border-bottom: 1px solid var(--hero-border); max-height: 14rem; overflow-y: auto; } .admin-support-layout .conversation-view { width: 100%; max-width: 100%; } } /* ---------------------------------------------------------- 15. Ticket status filters – scrollable on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-ticket-status-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.25rem; } .admin-ticket-status-filters::-webkit-scrollbar { display: none; } .admin-ticket-status-filter { flex-shrink: 0; } .admin-ticket-detail-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .admin-ticket-title-row { flex-wrap: wrap; } } /* ---------------------------------------------------------- 16. Inbox compose grid – stack on narrow screens ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-inbox-compose-grid { grid-template-columns: 1fr; } .admin-inbox-compose-footer { flex-direction: column; align-items: stretch; } .admin-inbox-broadcast-btn { width: 100%; } } /* ---------------------------------------------------------- 17. Help actions button row in business detail ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-business-help-actions { flex-direction: column; align-items: stretch; } .admin-business-help-actions .btn { justify-content: center; text-align: center; } } /* ---------------------------------------------------------- 18. Config rows – wrap label + status on small screens ---------------------------------------------------------- */ @media (max-width: 480px) { .admin-config-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; } } /* ---------------------------------------------------------- 19. Feature DnD items – wrap actions below text on mobile ---------------------------------------------------------- */ @media (max-width: 480px) { .admin-feature-dnd-item { flex-wrap: wrap; } .admin-feature-dnd-actions { width: 100%; justify-content: flex-start; } } /* ---------------------------------------------------------- 20. Cron output – prevent horizontal overflow ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-cron-run-output { font-size: 0.6875rem; max-height: 10rem; } } /* ---------------------------------------------------------- 21. Admin prepaid overlay panel – full-screen on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-prepaid-overlay { padding: 0; align-items: flex-end; } .admin-prepaid-panel { max-width: 100%; max-height: 90dvh; border-radius: 0.75rem 0.75rem 0 0; } } /* ---------------------------------------------------------- 22. Admin-only modals – bottom sheet on mobile (Do not target #thesms-modal-root; shared public modals stay centred.) ---------------------------------------------------------- */ @media (max-width: 640px) { .thesms-modal-root.admin-shop-bundle-modal-root { padding: 0; align-items: flex-end; } .thesms-modal-root.admin-shop-bundle-modal-root .thesms-modal-wrap { max-width: 100%; max-height: 92dvh; height: auto; } .thesms-modal-root.admin-shop-bundle-modal-root .thesms-modal-body { border-radius: 0.75rem 0.75rem 0 0; border-bottom: none; } } /* ---------------------------------------------------------- 23. Admin page typography – ensure minimum font sizes ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-page { font-size: 0.875rem; } .admin-page .info-section-title { font-size: 1rem; } .admin-page .section-title { font-size: 1.25rem; } /* Prevent tiny monospace text from becoming unreadable */ .admin-page .text-xs { font-size: 0.75rem; } } /* ---------------------------------------------------------- 24. Fixed / hardcoded widths – convert to responsive The admin-table subscription cell has fixed min-width that can cause overflow; tighten on mobile. ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-subscription-paid-through { min-width: 0; } .admin-biz-images-profile-actions { min-width: 0; } } /* ---------------------------------------------------------- 25. Connect stats grid – 2-col on mobile (already 4-col desktop) ---------------------------------------------------------- */ @media (max-width: 480px) { .admin-connect-stats { grid-template-columns: repeat(2, 1fr); } } /* ---------------------------------------------------------- 27. Services / staff tables inside business detail These use .admin-table-wrap.table-scroll which already has overflow-x: auto. Add data-label card pattern for the services table at ≤480px. ---------------------------------------------------------- */ @media (max-width: 640px) { /* Inline-stats row wrap */ .admin-businesses-section-tabs-bar, .admin-users-section-tabs-bar { gap: 0.35rem 0.75rem; } } /* ============================================================ ADMIN MOBILE — PHASE 2: deeper structural fixes Phase 1 above handled nav scroll, table wrappers, layout direction toggles. Phase 2 fixes the visible readability problems: card padding, table forced-width, dense columns. ============================================================ */ /* ---------------------------------------------------------- P2-1. account-card padding: reduce from 1.5rem to 1rem on mobile so cards waste less horizontal space. ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-page .account-card { padding: 1rem; } } /* ---------------------------------------------------------- P2-2. Data tables: THE critical fix. .admin-table has width:100% which fights min-width:max-content (browsers resolve it as "at least 100%", so the table still squishes columns to fit the viewport). Fix: override width to auto + explicit min-width in pixels so the table is always at least wide enough to be readable, and the overflow-x:auto wrapper scrolls to show the rest. Excludes the expandable businesses/users tables (designed to fit the viewport — they use a different class). ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-table-wrap .admin-table:not(.admin-table--businesses-expandable):not(.admin-table--users-expandable), .table-scroll .admin-table:not(.admin-table--businesses-expandable):not(.admin-table--users-expandable) { width: auto; min-width: 520px; } /* Forum table (When|Type|Category|Thread|Author|Excerpt|Status|Actions) */ #admin-forum-table { min-width: 680px; } /* Reviews table (When|Shop/staff|Rating|Author|Excerpt|Status|Actions) */ #admin-reviews-table { min-width: 660px; } /* Email log (When|Status|Provider|Recipient|Subject|Audit) */ [data-admin-email-log-tbody] { /* target via parent table */ } .admin-page #admin-email-audit-log .admin-table { min-width: 640px; } /* Push log (When|Status|Provider|Recipient|Title|Audit) */ .admin-page #admin-push-log-section .admin-table { min-width: 640px; } /* Cron table (Job|Log file|Last run|Status) */ .admin-page .admin-cron-table { min-width: 420px; } } /* ---------------------------------------------------------- P2-3. Table cell padding: tighten on mobile so cell content has more room; keep it readable (not cramped). ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-table th, .admin-table td { padding: 0.4rem 0.6rem; font-size: 0.8125rem; } } /* ---------------------------------------------------------- P2-4. Businesses expandable table: card stack on mobile (no horizontal scroll; shop header + owner + billing below). ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-biz-list { overflow-x: hidden; } .admin-table--businesses-expandable { display: block; width: 100%; border-collapse: separate; border-spacing: 0; } .admin-table--businesses-expandable tbody { display: block; width: 100%; } .admin-table--businesses-expandable thead { display: none; } .admin-table--businesses-expandable .admin-biz-row-main, .admin-table--businesses-expandable .admin-biz-list-empty { display: block; width: 100%; box-sizing: border-box; } /* Respect [hidden] on detail rows (display:block above would keep them open). */ .admin-table--businesses-expandable .admin-biz-row-details[hidden] { display: none; } .admin-table--businesses-expandable .admin-biz-row-details:not([hidden]) { display: block; width: 100%; box-sizing: border-box; } .admin-page .admin-businesses-list-card { padding: 0.65rem; } .admin-businesses-list-card .admin-biz-list { margin-top: 0.5rem; } .admin-table--businesses-expandable .admin-biz-row-main { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-areas: "toggle shop" "owner owner" "summary summary"; column-gap: 0.4rem; row-gap: 0; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--hero-border); background: var(--hero-card); } .admin-table--businesses-expandable .admin-biz-row-main:hover { background: rgba(255, 255, 255, 0.035); } .admin-table--businesses-expandable .admin-biz-row-main > td { display: block; width: auto; max-width: none; min-width: 0; padding: 0; border-bottom: none; background: transparent; box-sizing: border-box; } .admin-table--businesses-expandable .admin-biz-row-main > td.admin-biz-row-expand-cell { grid-area: toggle; align-self: start; justify-self: start; } .admin-table--businesses-expandable .admin-biz-row-main > td.admin-biz-row-shop-cell { grid-area: shop; padding-bottom: 0.5rem; } .admin-table--businesses-expandable .admin-biz-row-main > td.admin-biz-row-owner-cell { grid-area: owner; padding-top: 0.4rem; margin-top: 0.1rem; border-top: 1px solid var(--hero-border); width: 100%; } .admin-table--businesses-expandable .admin-biz-row-main > td.admin-biz-row-owner-cell::before { content: "Owner"; display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); margin-bottom: 0.25rem; } .admin-table--businesses-expandable .admin-biz-row-main > td.admin-biz-row-summary-cell { grid-area: summary; padding-top: 0.4rem; margin-top: 0.1rem; border-top: 1px solid var(--hero-border); width: 100%; } .admin-table--businesses-expandable .admin-biz-row-main > td.admin-biz-row-summary-cell::before { content: "Billing & activity"; display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); margin-bottom: 0.35rem; } .admin-table--businesses-expandable .admin-biz-row-shop-text .admin-biz-row-slug { max-width: none; white-space: normal; overflow: visible; text-overflow: unset; } .admin-table--businesses-expandable .admin-biz-row-summary { gap: 0.45rem; width: 100%; } .admin-table--businesses-expandable .admin-biz-summary-line { font-size: 0.875rem; line-height: 1.4; word-break: normal; overflow-wrap: anywhere; } .admin-table--businesses-expandable .admin-biz-summary-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.45rem; align-items: center; line-height: 1.5; font-size: 0.8125rem; } .admin-table--businesses-expandable .admin-biz-summary-visibility { margin-top: 0.15rem; } .admin-table--businesses-expandable .admin-biz-row-details > td { display: block; width: 100%; max-width: none; padding: 0; box-sizing: border-box; } .admin-businesses-list-card .admin-biz-detail-panel { padding: 0.35rem 0.25rem 0.45rem; } .admin-businesses-list-card .admin-manage-grid { gap: 0.35rem; } .admin-businesses-list-card .admin-manage-sec { padding: 0.45rem 0.4rem; border-radius: 0.375rem; background: rgba(0, 0, 0, 0.08); } .admin-businesses-list-card .admin-manage-sec-title { margin-bottom: 0.35rem; } .admin-businesses-list-card .admin-biz-inline-edit { margin: 0 0 0.45rem; padding: 0; border: none; background: transparent; border-radius: 0; } .admin-businesses-list-card .admin-biz-owner-form { margin-top: 0.45rem; } .admin-table--businesses-expandable .admin-biz-list-empty > td { display: block; padding: 0.75rem; } } /* ---------------------------------------------------------- P2-5. Users expandable table: at ≤480px hide the Activity column (member since / last login). Role badge stays. ---------------------------------------------------------- */ @media (max-width: 480px) { .admin-table--users-expandable th:nth-child(4), .admin-table--users-expandable .admin-user-row-summary-cell { display: none; } } /* ---------------------------------------------------------- P2-6. Expanded detail panels: reduce inner padding and ensure all content is reachable on a 390px screen. ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-biz-detail-panel, .admin-user-detail-panel { padding: 0.75rem 0.5rem 0.75rem; } /* The inline-edit fields grid (name/slug) should be 1-col below 540px */ .admin-biz-inline-edit-fields { grid-template-columns: 1fr; } /* Action button groups: ensure wrapping and full width on very small screens */ .admin-biz-action-group-btns, .admin-user-action-group-btns { gap: 0.35rem; } .admin-biz-action-group-btns .btn, .admin-user-action-group-btns .btn { font-size: 0.8125rem; padding-left: 0.65rem; padding-right: 0.65rem; } } /* ---------------------------------------------------------- P2-7. info-section-actions: on mobile, action buttons in card headers should wrap below the title rather than shrink. ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-page .info-section-header { gap: 0.5rem; } .admin-page .info-section-actions { flex-wrap: wrap; gap: 0.4rem; } .admin-page .info-section-actions .btn { font-size: 0.8125rem; } } /* ---------------------------------------------------------- P2-8. Long monospace / URL strings: break them so they don't force the card wider than the viewport. ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-page .admin-env-vars, .admin-page .font-mono, .admin-page code, .admin-page .break-all { word-break: break-all; overflow-wrap: anywhere; } /* Canonical URL links in forms */ .admin-page a.break-all { word-break: break-all; } } /* ---------------------------------------------------------- P2-9. Admin business detail page (admin_business.php): the "Help this business" action buttons should be full-width stacked column on mobile. ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-business-detail .admin-business-help-actions { flex-direction: column; align-items: stretch; gap: 0.5rem; } .admin-business-detail .admin-business-help-actions .btn { justify-content: center; } } /* ---------------------------------------------------------- P2-10. Admin settings/config rows: the key=value env rows often have very long values. Wrap them. ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-page .admin-config-row { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.65rem 0.75rem; } .admin-page .admin-config-row-value { word-break: break-all; font-size: 0.8125rem; } } /* ---------------------------------------------------------- P2-11. Admin-page overall horizontal padding: reduce from the 1rem 1.5rem desktop value. (Phase 1 already sets this but did it at max-width:768px; tighten further at 480px.) ---------------------------------------------------------- */ @media (max-width: 480px) { .admin-page { padding-left: 0.5rem; padding-right: 0.5rem; } .admin-page .account-card { padding: 0.75rem; } } /* ---------------------------------------------------------- P2-12. Analytics charts: ensure the chart area is not clipped and labels are readable. ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-analytics-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-page .admin-analytics-stat-title, .admin-page .admin-analytics-stat-label { font-size: 0.75rem; } } /* ---------------------------------------------------------- P2-13. Support / messaging layout: ensure the compose area input and send button are usable at small sizes. ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-support-compose-row, .admin-support-reply-row { flex-direction: column; gap: 0.5rem; } .admin-support-compose-row .btn, .admin-support-reply-row .btn { align-self: flex-end; } } /* ---------------------------------------------------------- P2-14. Admin role-filter pills / section-tab pills: allow them to wrap on very small screens so they don't overflow. ---------------------------------------------------------- */ @media (max-width: 480px) { .admin-role-filters, .admin-section-tabs { flex-wrap: wrap; gap: 0.3rem; } .admin-role-filters .btn, .admin-section-tabs .btn, .admin-section-tabs a.btn { font-size: 0.75rem; padding: 0.3rem 0.6rem; } } /* ---------------------------------------------------------- P2-15. Scroll-shadow visual hint on scrollable table wrappers so the user knows there's more content to the right. Uses a subtle right-edge gradient overlay. ---------------------------------------------------------- */ @media (max-width: 640px) { .admin-table-wrap, .table-scroll { position: relative; } }