/* ========================================================= SPACE MENU THEME: STANDARD LIGHT Code: standard-light Style: clean iOS-inspired, warm white + soft orange ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); body[data-theme="standard-light"] { --sl-bg: #f7f7f8; --sl-bg-2: #fbfbfc; --sl-surface: rgba(255,255,255,.92); --sl-surface-solid: #ffffff; --sl-surface-soft: #f3f4f6; --sl-orange: #ff9f43; --sl-orange-2: #ff8a1f; --sl-orange-soft: #fff2e5; --sl-orange-glow: rgba(255,159,67,.18); --sl-text: #111827; --sl-text-soft: #374151; --sl-muted: #7b8492; --sl-line: rgba(17,24,39,.08); --sl-line-strong: rgba(17,24,39,.12); --sl-success: #16a34a; --sl-danger: #dc2626; --sl-r-xs: 10px; --sl-r-sm: 14px; --sl-r-md: 18px; --sl-r-lg: 22px; --sl-r-xl: 28px; --sl-pill: 999px; --sl-shadow-xs: 0 2px 8px rgba(15,23,42,.05); --sl-shadow-sm: 0 6px 18px rgba(15,23,42,.07); --sl-shadow-md: 0 12px 30px rgba(15,23,42,.09); --sl-shadow-lg: 0 24px 60px rgba(15,23,42,.12); --space-page-accent: var(--sl-orange) !important; --space-tag-icon-color: var(--sl-orange-2); margin: 0; min-height: 100%; color: var(--sl-text) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: radial-gradient(circle at 15% -10%, rgba(255,159,67,.10), transparent 30%), linear-gradient(180deg, #fbfbfc 0%, #f7f7f8 44%, #f4f5f7 100%) !important; } body[data-theme="standard-light"]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 92% 18%, rgba(255,185,110,.10), transparent 26%), radial-gradient(circle at 8% 72%, rgba(255,255,255,.85), transparent 34%); } body[data-theme="standard-light"] * { box-sizing: border-box; } body[data-theme="standard-light"] button, body[data-theme="standard-light"] input, body[data-theme="standard-light"] select, body[data-theme="standard-light"] textarea { font: inherit; } body[data-theme="standard-light"] a { color: inherit; } body[data-theme="standard-light"] .wrap { max-width: 620px !important; margin: 0 auto !important; padding: 12px 16px !important; } /* ========================================================= MINI HEADER ========================================================= */ body[data-theme="standard-light"] .miniHeader { position: fixed; top: calc(env(safe-area-inset-top) + 10px); left: 0; right: 0; z-index: 1000; } body[data-theme="standard-light"] .miniInner { width: min(586px, calc(100% - 24px)); margin: 0 auto; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(255,255,255,.76) !important; border: 1px solid rgba(255,255,255,.72) !important; border-radius: var(--sl-r-lg) !important; backdrop-filter: blur(16px) saturate(135%) !important; -webkit-backdrop-filter: blur(16px) saturate(135%) !important; box-shadow: 0 10px 28px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.88) !important; } body[data-theme="standard-light"] .miniLeft, body[data-theme="standard-light"] .miniRight { display: flex; align-items: center; } body[data-theme="standard-light"] .miniLeft { gap: 9px; min-width: 0; } body[data-theme="standard-light"] .miniLogo { width: 38px !important; height: 38px !important; flex: 0 0 38px; overflow: hidden !important; border-radius: 12px !important; background: #fff !important; border: 1px solid var(--sl-line) !important; box-shadow: var(--sl-shadow-xs) !important; } body[data-theme="standard-light"] .miniLogo img { width: 100%; height: 100%; object-fit: cover; } body[data-theme="standard-light"] .miniTitle { min-width: 0; } body[data-theme="standard-light"] .miniTitle b { display: block; overflow: hidden; color: var(--sl-text) !important; font-size: .86rem !important; font-weight: 800 !important; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } body[data-theme="standard-light"] .miniTitle span { display: block; margin-top: 3px; color: var(--sl-muted) !important; font-size: .69rem !important; font-weight: 600 !important; } body[data-theme="standard-light"] .miniPill { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 8px 12px; color: #fff !important; background: linear-gradient(180deg, #ffad61, var(--sl-orange-2)) !important; border: 1px solid rgba(255,255,255,.65) !important; border-radius: var(--sl-pill) !important; box-shadow: 0 8px 18px rgba(255,138,31,.18), inset 0 1px 0 rgba(255,255,255,.35) !important; font-size: .80rem !important; font-weight: 700 !important; transition: transform .20s ease, box-shadow .20s ease, filter .20s ease; } body[data-theme="standard-light"] .miniPill:hover, body[data-theme="standard-light"] .miniPill:focus-visible { transform: translateY(-1px) scale(1.015); filter: brightness(1.02); box-shadow: 0 11px 24px rgba(255,138,31,.24), inset 0 1px 0 rgba(255,255,255,.42) !important; outline: none; } body[data-theme="standard-light"] .miniDot { width: 7px; height: 7px; border-radius: 50%; background: #fff !important; box-shadow: 0 0 0 3px rgba(255,255,255,.16); } /* ========================================================= HERO ========================================================= */ body[data-theme="standard-light"] .hero { background: transparent !important; box-shadow: none !important; overflow: visible !important; } body[data-theme="standard-light"] .cover { position: relative; min-height: 290px !important; overflow: hidden !important; background: #fff !important; border: 1px solid rgba(255,255,255,.95) !important; border-radius: 30px !important; box-shadow: 0 20px 48px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.88) !important; } body[data-theme="standard-light"] .coverMedia, body[data-theme="standard-light"] .coverOverlay { position: absolute; inset: 0; } body[data-theme="standard-light"] .coverMedia img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.03) contrast(1.02) brightness(.94); } body[data-theme="standard-light"] .coverOverlay { background: linear-gradient(to top, rgba(17,24,39,.72) 0%, rgba(17,24,39,.26) 42%, rgba(17,24,39,.04) 76%, transparent 100%) !important; } body[data-theme="standard-light"] .coverBottom { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 5; } /* ========================================================= BRAND ========================================================= */ body[data-theme="standard-light"] .brandBadge { display: flex; align-items: center; gap: 14px; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body[data-theme="standard-light"] .logo { width: 82px !important; height: 82px !important; min-width: 82px !important; padding: 4px !important; display: flex; align-items: center; justify-content: center; overflow: hidden !important; background: rgba(255,255,255,.92) !important; border: 1px solid rgba(255,255,255,.9) !important; border-radius: 24px !important; box-shadow: 0 14px 32px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,1) !important; } body[data-theme="standard-light"] .logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px !important; } body[data-theme="standard-light"] .brandText h1 { margin: 0 !important; color: #fff !important; font-size: clamp(2rem, 7vw, 3.6rem) !important; font-weight: 800 !important; line-height: .96 !important; letter-spacing: -.035em; text-shadow: 0 4px 20px rgba(15,23,42,.28); } body[data-theme="standard-light"] .brandText p { margin: 8px 0 0 !important; color: rgba(255,255,255,.82) !important; font-size: .84rem !important; font-weight: 600 !important; text-shadow: 0 3px 14px rgba(15,23,42,.24); } /* ========================================================= LANGUAGE ========================================================= */ body[data-theme="standard-light"] .langDock { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; } body[data-theme="standard-light"] .langBtn { min-height: 36px; padding: 8px 11px; display: inline-flex; align-items: center; gap: 7px; color: var(--sl-text-soft) !important; background: rgba(255,255,255,.70) !important; border: 1px solid rgba(255,255,255,.85) !important; border-radius: var(--sl-pill) !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; box-shadow: 0 6px 18px rgba(15,23,42,.07) !important; font-size: .78rem !important; font-weight: 700 !important; transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; } body[data-theme="standard-light"] .langBtn:hover, body[data-theme="standard-light"] .langBtn:focus-visible { transform: translateY(-1px); color: var(--sl-orange-2) !important; background: rgba(255,255,255,.90) !important; outline: none; } body[data-theme="standard-light"] .langBtn.is-active { color: #fff !important; background: linear-gradient(180deg, #ffac5e, var(--sl-orange-2)) !important; box-shadow: 0 8px 20px rgba(255,138,31,.18) !important; } /* ========================================================= DOCK / TABS / SEARCH ========================================================= */ body[data-theme="standard-light"] .dock { position: sticky; top: calc(env(safe-area-inset-top) + 66px); z-index: 500; margin-bottom: 18px !important; padding: 9px !important; margin-top: 0 !important; background: rgba(255,255,255,.74) !important; border: 1px solid rgba(255,255,255,.9) !important; border-radius: 24px !important; backdrop-filter: blur(16px) saturate(135%) !important; -webkit-backdrop-filter: blur(16px) saturate(135%) !important; box-shadow: 0 14px 32px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.92) !important; } body[data-theme="standard-light"] .tabRow { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 8px !important; scrollbar-width: none; } body[data-theme="standard-light"] .tabRow::-webkit-scrollbar { display: none; } body[data-theme="standard-light"] .tab { flex: 0 0 auto; min-height: 40px; padding: 9px 14px !important; color: var(--sl-muted) !important; background: rgba(244,245,247,.82) !important; border: 1px solid rgba(17,24,39,.04) !important; border-radius: var(--sl-pill) !important; font-size: .84rem !important; font-weight: 700 !important; white-space: nowrap; transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; } body[data-theme="standard-light"] .tab:hover, body[data-theme="standard-light"] .tab:focus-visible { transform: translateY(-1px); color: var(--sl-orange-2) !important; background: #fff !important; box-shadow: var(--sl-shadow-xs) !important; outline: none; } body[data-theme="standard-light"] .tab.is-active { color: #fff !important; background: linear-gradient(180deg, #ffad62, var(--sl-orange-2)) !important; box-shadow: 0 8px 18px rgba(255,138,31,.18), inset 0 1px 0 rgba(255,255,255,.34) !important; } body[data-theme="standard-light"] .search { width: 100%; min-height: 48px; padding: 13px 15px !important; color: var(--sl-text) !important; caret-color: var(--sl-orange-2); background: rgba(247,248,249,.92) !important; border: 1px solid rgba(17,24,39,.06) !important; border-radius: 16px !important; outline: none; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; } body[data-theme="standard-light"] .search::placeholder { color: #a0a7b2 !important; } body[data-theme="standard-light"] .search:focus { background: #fff !important; border-color: rgba(255,159,67,.36) !important; box-shadow: 0 0 0 4px rgba(255,159,67,.10) !important; } /* ========================================================= SECTION HEAD ========================================================= */ body[data-theme="standard-light"] .section { margin-top: 22px !important; } body[data-theme="standard-light"] .sectionHead { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px !important; padding: 9px 12px !important; background: rgba(255,255,255,.52) !important; border: 1px solid rgba(255,255,255,.70) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 5px 16px rgba(15,23,42,.04) !important; } body[data-theme="standard-light"] .sectionHead::before { content: ""; width: 4px; align-self: stretch; flex: 0 0 4px; border-radius: var(--sl-pill); background: linear-gradient(180deg, #ffb66d, var(--sl-orange-2)); } body[data-theme="standard-light"] .sectionHead b { color: var(--sl-text) !important; font-size: clamp(1.12rem, 4.4vw, 1.55rem) !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -.025em; } /* ========================================================= PRODUCT CARDS ========================================================= */ body[data-theme="standard-light"] .item, body[data-theme="standard-light"] .menu-item { position: relative; display: flex; align-items: stretch; gap: 13px; margin-bottom: 12px !important; padding: 12px !important; overflow: hidden; background: rgba(255,255,255,.90) !important; border: 1px solid rgba(255,255,255,.96) !important; border-radius: 22px !important; box-shadow: 0 8px 24px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,1) !important; transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease; } body[data-theme="standard-light"] .item:hover, body[data-theme="standard-light"] .item:focus-within, body[data-theme="standard-light"] .menu-item:hover, body[data-theme="standard-light"] .menu-item:focus-within { transform: translateY(-2px) scale(1.003); border-color: rgba(255,159,67,.20) !important; box-shadow: 0 14px 32px rgba(15,23,42,.09), 0 0 0 1px rgba(255,159,67,.05) !important; } body[data-theme="standard-light"] .thumb { width: 96px !important; height: 96px !important; min-width: 84px !important; overflow: hidden !important; display: flex; align-items: center; justify-content: center; color: var(--sl-orange-2) !important; background: linear-gradient(145deg, #fff7ef, #fff) !important; border: 1px solid rgba(17,24,39,.05) !important; border-radius: 18px !important; box-shadow: 0 5px 16px rgba(15,23,42,.06) !important; } body[data-theme="standard-light"] .thumb img { width: 100%; height: 100%; object-fit: cover; } body[data-theme="standard-light"] .itemMain { flex: 1 1 auto; min-width: 0; } body[data-theme="standard-light"] .itemTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } body[data-theme="standard-light"] .name { color: var(--sl-text) !important; font-size: 1.12rem !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -.02em; } body[data-theme="standard-light"] .desc { margin-top: 7px !important; color: var(--sl-muted) !important; font-size: .84rem !important; line-height: 1.5 !important; } body[data-theme="standard-light"] .price { display: inline-flex; align-items: center; justify-content: center; min-height: 31px; padding: 5px 9px; color: var(--sl-orange-2) !important; background: var(--sl-orange-soft) !important; border: 1px solid rgba(255,159,67,.16) !important; border-radius: 12px !important; font-size: .94rem !important; font-weight: 800 !important; white-space: nowrap; } /* ========================================================= META / TAGS ========================================================= */ body[data-theme="standard-light"] .meta { display: grid !important; gap: 5px !important; margin-top: 9px !important; padding-top: 8px !important; border-top: 1px solid rgba(17,24,39,.06) !important; } body[data-theme="standard-light"] .itemMetaLineBody, body[data-theme="standard-light"] .itemMetaAllergensBody { display: grid !important; grid-template-columns: max-content minmax(0,1fr) !important; column-gap: 8px !important; align-items: baseline !important; } body[data-theme="standard-light"] .itemMetaLineBody > strong, body[data-theme="standard-light"] .itemMetaAllergensBody > strong { color: #99a1ac !important; font-size: .66rem !important; font-weight: 800 !important; line-height: 1.35 !important; letter-spacing: .045em; text-transform: uppercase; } body[data-theme="standard-light"] .itemMetaList { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 8px !important; } body[data-theme="standard-light"] .itemMetaTag { display: inline-flex; align-items: center; gap: 4px; min-height: 18px; padding: 0 !important; color: #58616e !important; background: transparent !important; border: 0 !important; font-size: .71rem !important; font-weight: 500 !important; } body[data-theme="standard-light"] .itemMetaTag svg, body[data-theme="standard-light"] .itemMetaInlineIcon, body[data-theme="standard-light"] .menu-tag-icon { width: 12px !important; height: 12px !important; flex: 0 0 12px; color: var(--sl-orange-2) !important; --space-tag-icon-color: var(--sl-orange-2); } body[data-theme="standard-light"] .itemMetaGroup--allergens { margin-top: 2px !important; padding-top: 5px !important; border-top: 1px dashed rgba(17,24,39,.10) !important; } body[data-theme="standard-light"] .itemMetaGroup--allergens-only { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; } body[data-theme="standard-light"] .chip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 4px 8px !important; color: var(--sl-text-soft) !important; background: rgba(247,248,249,.88) !important; border: 1px solid rgba(17,24,39,.06) !important; border-radius: var(--sl-pill) !important; font-size: .70rem !important; font-weight: 600 !important; } body[data-theme="standard-light"] .chip.is-active { color: #fff !important; background: linear-gradient(180deg, #ffad61, var(--sl-orange-2)) !important; border-color: transparent !important; box-shadow: 0 5px 14px rgba(255,138,31,.16), inset 0 1px 0 rgba(255,255,255,.25) !important; } /* ========================================================= PRODUCT MODAL ========================================================= */ body[data-theme="standard-light"] .menuModalBackdrop { background: rgba(17,24,39,.28) !important; backdrop-filter: blur(10px) saturate(115%) !important; -webkit-backdrop-filter: blur(10px) saturate(115%) !important; } body[data-theme="standard-light"] .menuModalPanel { color: var(--sl-text) !important; background: rgba(252,252,253,.97) !important; border: 1px solid rgba(255,255,255,.96) !important; border-radius: 28px !important; box-shadow: 0 30px 80px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,1) !important; } body[data-theme="standard-light"] .menuModalClose { color: var(--sl-text-soft) !important; background: rgba(255,255,255,.80) !important; border: 1px solid rgba(255,255,255,.92) !important; border-radius: 50% !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: 0 6px 18px rgba(15,23,42,.08) !important; transition: transform .20s ease, background .20s ease, color .20s ease; } body[data-theme="standard-light"] .menuModalClose:hover, body[data-theme="standard-light"] .menuModalClose:focus-visible { transform: scale(1.06); color: #fff !important; background: var(--sl-orange-2) !important; outline: none; } body[data-theme="standard-light"] .menuModalHero { background: linear-gradient(180deg, #fafafa, #f1f2f4) !important; } body[data-theme="standard-light"] .menuModalMediaTabs { background: rgba(255,255,255,.78) !important; border: 1px solid rgba(255,255,255,.92) !important; border-radius: var(--sl-pill) !important; backdrop-filter: blur(12px) saturate(125%) !important; -webkit-backdrop-filter: blur(12px) saturate(125%) !important; box-shadow: 0 8px 20px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.94) !important; } body[data-theme="standard-light"] .menuModalMediaTab, body[data-theme="standard-light"] .menuModalMediaAction { color: #7f8792 !important; background: transparent !important; border-color: transparent !important; font-weight: 700 !important; } body[data-theme="standard-light"] .menuModalMediaTab.is-active { color: #fff !important; background: linear-gradient(180deg, #ffad61, var(--sl-orange-2)) !important; box-shadow: 0 6px 16px rgba(255,138,31,.15), inset 0 1px 0 rgba(255,255,255,.25) !important; } body[data-theme="standard-light"] .menuModalMediaAction { color: var(--sl-orange-2) !important; } body[data-theme="standard-light"] .menuModalTitle, body[data-theme="standard-light"] #menuModalTitle { color: var(--sl-text) !important; font-weight: 800 !important; letter-spacing: -.025em; } body[data-theme="standard-light"] .menuModalPrice, body[data-theme="standard-light"] #menuModalPrice { color: var(--sl-orange-2) !important; font-weight: 800 !important; } body[data-theme="standard-light"] .menuModalDesc, body[data-theme="standard-light"] #menuModalDescription { color: var(--sl-muted) !important; } body[data-theme="standard-light"] .menuModalGroup, body[data-theme="standard-light"] .menuModalOptionGroup { overflow: hidden !important; background: rgba(255,255,255,.82) !important; border: 1px solid rgba(17,24,39,.06) !important; border-radius: 20px !important; box-shadow: 0 6px 18px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.9) !important; } body[data-theme="standard-light"] .menuModalGroupHead { padding: 10px 12px !important; color: var(--sl-text) !important; background: rgba(248,249,250,.72) !important; border-bottom: 1px solid rgba(17,24,39,.06) !important; font-weight: 800 !important; } body[data-theme="standard-light"] .menuModalOption, body[data-theme="standard-light"] label.menuModalOption { margin: 6px !important; color: var(--sl-text-soft) !important; background: rgba(248,249,250,.88) !important; border: 1px solid rgba(17,24,39,.06) !important; border-radius: 15px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } body[data-theme="standard-light"] .menuModalOption:hover, body[data-theme="standard-light"] label.menuModalOption:hover { transform: translateY(-1px); background: #fff !important; border-color: rgba(255,159,67,.20) !important; box-shadow: 0 5px 14px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,1) !important; } body[data-theme="standard-light"] .menuModalOptionName { color: var(--sl-text-soft) !important; font-size: .84rem !important; font-weight: 600 !important; opacity: 1 !important; } body[data-theme="standard-light"] .menuModalOptionPrice, body[data-theme="standard-light"] .menuModalOptionExtra, body[data-theme="standard-light"] .menuModalOptionDelta { color: var(--sl-orange-2) !important; font-weight: 700 !important; } body[data-theme="standard-light"] .menuModalOption:has(input:checked), body[data-theme="standard-light"] label.menuModalOption:has(input:checked), body[data-theme="standard-light"] .menuModalOption.is-active, body[data-theme="standard-light"] .menuModalOption.is-selected { background: var(--sl-orange-soft) !important; border-color: rgba(255,159,67,.26) !important; box-shadow: inset 3px 0 0 var(--sl-orange-2), 0 5px 14px rgba(255,138,31,.06) !important; } body[data-theme="standard-light"] input[type="radio"], body[data-theme="standard-light"] input[type="checkbox"] { accent-color: var(--sl-orange-2); } /* ========================================================= RESERVATION ========================================================= */ body[data-theme="standard-light"] .reservationBackdrop { background: rgba(17,24,39,.28) !important; backdrop-filter: blur(10px) saturate(115%) !important; -webkit-backdrop-filter: blur(10px) saturate(115%) !important; } body[data-theme="standard-light"] .reservationPanel { color: var(--sl-text) !important; background: rgba(252,252,253,.97) !important; border: 1px solid rgba(255,255,255,.96) !important; border-radius: 28px !important; box-shadow: 0 30px 80px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,1) !important; } body[data-theme="standard-light"] .reservationPanel h2, body[data-theme="standard-light"] .reservationTitle { color: var(--sl-text) !important; font-weight: 800 !important; letter-spacing: -.025em; } body[data-theme="standard-light"] .reservationPanel p, body[data-theme="standard-light"] .reservationSubtitle, body[data-theme="standard-light"] .reservationHint { color: var(--sl-muted) !important; } body[data-theme="standard-light"] .reservationPanel label { color: var(--sl-text-soft) !important; font-weight: 700 !important; } body[data-theme="standard-light"] .reservationPanel input, body[data-theme="standard-light"] .reservationPanel select, body[data-theme="standard-light"] .reservationPanel textarea { color: var(--sl-text) !important; background: rgba(248,249,250,.92) !important; border: 1px solid rgba(17,24,39,.07) !important; border-radius: 14px !important; outline: none; } body[data-theme="standard-light"] .reservationPanel input:focus, body[data-theme="standard-light"] .reservationPanel select:focus, body[data-theme="standard-light"] .reservationPanel textarea:focus { background: #fff !important; border-color: rgba(255,159,67,.34) !important; box-shadow: 0 0 0 4px rgba(255,159,67,.10) !important; } body[data-theme="standard-light"] .reservationSlot { color: var(--sl-text-soft) !important; background: rgba(248,249,250,.92) !important; border: 1px solid rgba(17,24,39,.06) !important; border-radius: 14px !important; font-weight: 700 !important; transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; } body[data-theme="standard-light"] .reservationSlot:hover { transform: translateY(-1px); color: var(--sl-orange-2) !important; background: #fff !important; box-shadow: var(--sl-shadow-xs) !important; } body[data-theme="standard-light"] .reservationSlot.is-active, body[data-theme="standard-light"] .reservationSlot.selected { color: #fff !important; background: linear-gradient(180deg, #ffad61, var(--sl-orange-2)) !important; border-color: transparent !important; box-shadow: 0 8px 18px rgba(255,138,31,.16) !important; } body[data-theme="standard-light"] #r_submit, body[data-theme="standard-light"] .reservationActionBtn { color: #fff !important; background: linear-gradient(180deg, #ffad61, var(--sl-orange-2)) !important; border: 1px solid rgba(255,255,255,.55) !important; border-radius: 16px !important; box-shadow: 0 10px 22px rgba(255,138,31,.18), inset 0 1px 0 rgba(255,255,255,.28) !important; font-weight: 800 !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } body[data-theme="standard-light"] #r_submit:hover, body[data-theme="standard-light"] .reservationActionBtn:hover { transform: translateY(-1px); filter: brightness(1.02); } /* ========================================================= RESERVE BAR ========================================================= */ body[data-theme="standard-light"] .reserveBar { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14px); z-index: 950; width: min(570px, calc(100% - 24px)); transform: translateX(-50%); pointer-events: none; } body[data-theme="standard-light"] .reserveBar button, body[data-theme="standard-light"] #openReservation { width: 100%; min-height: 58px; padding: 14px 20px; pointer-events: auto; color: #fff !important; background: linear-gradient(180deg, #ffad61, var(--sl-orange-2)) !important; border: 1px solid rgba(255,255,255,.60) !important; border-radius: 20px !important; box-shadow: 0 16px 34px rgba(255,138,31,.20), 0 6px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.34) !important; font-weight: 800 !important; transition: transform .20s cubic-bezier(.2,.8,.2,1), box-shadow .20s ease; } body[data-theme="standard-light"] .reserveBar button:hover, body[data-theme="standard-light"] #openReservation:hover { transform: translateY(-2px) scale(1.005); box-shadow: 0 18px 38px rgba(255,138,31,.26), 0 8px 20px rgba(15,23,42,.10) !important; } /* ========================================================= FOOTER ========================================================= */ body[data-theme="standard-light"] .footer { margin-top: 28px !important; padding: 46px 16px 110px !important; color: #9aa1ab !important; text-align: center !important; } body[data-theme="standard-light"] .footer a { color: var(--sl-text-soft) !important; background: rgba(255,255,255,.74) !important; border: 1px solid rgba(255,255,255,.88) !important; border-radius: var(--sl-pill) !important; box-shadow: var(--sl-shadow-xs) !important; } body[data-theme="standard-light"] .footer a:hover, body[data-theme="standard-light"] .footer a:focus-visible { color: var(--sl-orange-2) !important; } /* ========================================================= CUSTOMER ORDER / GENERIC SHEETS ========================================================= */ body[data-theme="standard-light"] #customerOrderSheet .customerOrderPanel, body[data-theme="standard-light"] .customerOrderSheetPanel, body[data-theme="standard-light"] .publicOrderSheetPanel { color: var(--sl-text) !important; background: rgba(252,252,253,.98) !important; border: 1px solid rgba(255,255,255,.92) !important; box-shadow: 0 24px 60px rgba(15,23,42,.16) !important; } body[data-theme="standard-light"] #customerOrderSheet input, body[data-theme="standard-light"] #customerOrderSheet select, body[data-theme="standard-light"] #customerOrderSheet textarea { color: var(--sl-text) !important; background: #f7f8f9 !important; border-color: rgba(17,24,39,.07) !important; border-radius: 14px !important; } /* ========================================================= EMPTY STATES ========================================================= */ body[data-theme="standard-light"] .emptyState, body[data-theme="standard-light"] .menuEmpty, body[data-theme="standard-light"] .noResults { color: var(--sl-muted) !important; background: rgba(255,255,255,.72) !important; border: 1px dashed rgba(17,24,39,.10) !important; border-radius: 20px !important; box-shadow: var(--sl-shadow-xs) !important; } /* ========================================================= SCROLLBAR ========================================================= */ body[data-theme="standard-light"] ::-webkit-scrollbar { width: 8px; height: 8px; } body[data-theme="standard-light"] ::-webkit-scrollbar-track { background: transparent; } body[data-theme="standard-light"] ::-webkit-scrollbar-thumb { background: rgba(118,126,138,.26); border-radius: 999px; } body[data-theme="standard-light"] ::-webkit-scrollbar-thumb:hover { background: rgba(118,126,138,.42); } /* ========================================================= GLOBAL MOTION ========================================================= */ body[data-theme="standard-light"] .section, body[data-theme="standard-light"] .menu-item, body[data-theme="standard-light"] .item, body[data-theme="standard-light"] .dock, body[data-theme="standard-light"] .sectionHead { animation: standardLightFadeUp .42s cubic-bezier(.2,.8,.2,1) both; } @keyframes standardLightFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 640px) { body[data-theme="standard-light"] .wrap { padding-left: 12px !important; padding-right: 12px !important; } body[data-theme="standard-light"] .cover { min-height: 258px !important; border-radius: 24px !important; } body[data-theme="standard-light"] .logo { width: 70px !important; height: 70px !important; min-width: 70px !important; border-radius: 20px !important; } body[data-theme="standard-light"] .logo img { border-radius: 17px !important; } body[data-theme="standard-light"] .brandText h1 { font-size: clamp(1.72rem, 9.5vw, 2.8rem) !important; } body[data-theme="standard-light"] .dock { top: calc(env(safe-area-inset-top) + 74px); border-radius: 20px !important; } body[data-theme="standard-light"] .item, body[data-theme="standard-light"] .menu-item { gap: 11px; padding: 11px !important; border-radius: 20px !important; } body[data-theme="standard-light"] .thumb { width: 92px !important; height: 92px !important; min-width: 76px !important; border-radius: 17px !important; } body[data-theme="standard-light"] .menuModal { align-items: flex-end; padding: 0 !important; } body[data-theme="standard-light"] .menuModalPanel { width: 100%; max-width: none; max-height: 92vh; border-radius: 26px 26px 0 0 !important; } body[data-theme="standard-light"] .reservationModal { align-items: flex-end; padding: 0; } body[data-theme="standard-light"] .reservationPanel { left: 10px; right: 10px; bottom: 0; border-radius: 26px 26px 0 0 !important; } body[data-theme="standard-light"] .reserveBar { width: calc(100% - 20px); bottom: calc(env(safe-area-inset-bottom) + 10px); } body[data-theme="standard-light"] .reserveBar button, body[data-theme="standard-light"] #openReservation { min-height: 54px; border-radius: 18px !important; } } @media (max-width: 420px) { body[data-theme="standard-light"] .miniInner { padding: 9px 10px; } body[data-theme="standard-light"] .miniPill { padding: 8px 10px; font-size: .74rem !important; } body[data-theme="standard-light"] .name { font-size: 1.04rem !important; } body[data-theme="standard-light"] .desc { font-size: .81rem !important; } body[data-theme="standard-light"] .itemMetaTag { font-size: .68rem !important; } } @media (max-width: 360px) { body[data-theme="standard-light"] .thumb { width: 80px !important; height: 80px !important; min-width: 70px !important; } body[data-theme="standard-light"] .itemMetaLineBody, body[data-theme="standard-light"] .itemMetaAllergensBody { grid-template-columns: minmax(0,1fr) !important; row-gap: 2px !important; } } /* ========================================================= STANDARD LIGHT — PRODUCT MODAL REFINEMENT Hero scura/fotografica + contenuto chiaro. ========================================================= */ /* Hero fotografica */ body[data-theme="standard-light"] .menuModalPanel .menuModalHero { position: relative; overflow: hidden !important; background: #111827 !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalHero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( to top, rgba(9,14,22,.88) 0%, rgba(9,14,22,.50) 34%, rgba(9,14,22,.12) 66%, rgba(9,14,22,.02) 100% ) !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalHero img, body[data-theme="standard-light"] .menuModalPanel .menuModalPhoto { filter: saturate(1.04) contrast(1.03) brightness(.93); } /* Il titolo che vive sopra la foto deve essere bianco */ body[data-theme="standard-light"] .menuModalPanel .menuModalHero .menuModalTitle, body[data-theme="standard-light"] .menuModalPanel .menuModalHero #menuModalTitle, body[data-theme="standard-light"] .menuModalPanel .menuModalHero .menuModalHeroTitle, body[data-theme="standard-light"] .menuModalPanel .menuModalHeroTitle { position: relative; z-index: 4; color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.45), 0 7px 24px rgba(0,0,0,.28) !important; } /* Se il titolo è in un overlay dedicato */ body[data-theme="standard-light"] .menuModalPanel .menuModalHeroText, body[data-theme="standard-light"] .menuModalPanel .menuModalHeroOverlay, body[data-theme="standard-light"] .menuModalPanel .menuModalOverlayInfo { position: relative; z-index: 4; } /* Prezzo sopra la foto */ body[data-theme="standard-light"] .menuModalPanel .menuModalHero .menuModalPrice, body[data-theme="standard-light"] .menuModalPanel .menuModalHero #menuModalPrice, body[data-theme="standard-light"] .menuModalPanel .menuModalHeroPrice { position: relative; z-index: 4; color: var(--sl-orange-2) !important; background: rgba(255,255,255,.94) !important; border: 1px solid rgba(255,255,255,.82) !important; border-radius: 15px !important; box-shadow: 0 8px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,1) !important; } /* Close più leggibile sopra immagini */ body[data-theme="standard-light"] .menuModalPanel .menuModalClose { z-index: 20 !important; color: #374151 !important; background: rgba(255,255,255,.92) !important; border: 1px solid rgba(255,255,255,.92) !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; box-shadow: 0 8px 20px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,1) !important; } /* Tabs foto / 3D / AR */ body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTabs { position: relative; z-index: 10; background: rgba(255,255,255,.90) !important; border: 1px solid rgba(255,255,255,.96) !important; box-shadow: 0 8px 22px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,1) !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction { color: #667085 !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab.is-active { color: #fff !important; background: linear-gradient(180deg, #ffad61, var(--sl-orange-2)) !important; } /* ========================================================= CONTENUTO SOTTO HERO ========================================================= */ body[data-theme="standard-light"] .menuModalPanel .menuModalContent, body[data-theme="standard-light"] .menuModalPanel .menuModalBody, body[data-theme="standard-light"] .menuModalPanel .menuModalScroll { color: var(--sl-text) !important; background: #fbfbfc !important; } /* Titolo fuori hero, se usato da qualche variante */ body[data-theme="standard-light"] .menuModalPanel .menuModalContent .menuModalTitle, body[data-theme="standard-light"] .menuModalPanel .menuModalBody .menuModalTitle, body[data-theme="standard-light"] .menuModalPanel .menuModalScroll .menuModalTitle { color: var(--sl-text) !important; text-shadow: none !important; } /* Meta */ body[data-theme="standard-light"] .menuModalPanel .menuModalMeta { color: var(--sl-text-soft) !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .itemMetaLineBody > strong, body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .itemMetaAllergensBody > strong { color: #8a94a3 !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .itemMetaTag { color: #4b5563 !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .itemMetaTag svg, body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .menu-tag-icon, body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .itemMetaInlineIcon { color: var(--sl-orange-2) !important; --space-tag-icon-color: var(--sl-orange-2); } /* Separatore meta più delicato */ body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .itemMetaGroup--allergens { border-top-color: rgba(17,24,39,.08) !important; } /* Descrizione */ body[data-theme="standard-light"] .menuModalPanel .menuModalDesc, body[data-theme="standard-light"] .menuModalPanel #menuModalDescription { color: #667085 !important; border-left: 2px solid rgba(255,159,67,.45) !important; padding-left: 12px !important; } /* ========================================================= OPZIONI / VARIANTI ========================================================= */ body[data-theme="standard-light"] .menuModalPanel .menuModalGroup, body[data-theme="standard-light"] .menuModalPanel .menuModalOptionGroup { background: #fff !important; border: 1px solid rgba(17,24,39,.07) !important; border-radius: 20px !important; box-shadow: 0 6px 18px rgba(15,23,42,.045), inset 0 1px 0 rgba(255,255,255,1) !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalGroupHead { color: var(--sl-text) !important; background: #f8f9fa !important; border-bottom: 1px solid rgba(17,24,39,.06) !important; font-weight: 800 !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalGroupHead strong, body[data-theme="standard-light"] .menuModalPanel .menuModalGroupHead b, body[data-theme="standard-light"] .menuModalPanel .menuModalGroupTitle { color: var(--sl-text) !important; opacity: 1 !important; } /* Riga opzione */ body[data-theme="standard-light"] .menuModalPanel .menuModalOption, body[data-theme="standard-light"] .menuModalPanel label.menuModalOption { margin: 6px !important; color: var(--sl-text-soft) !important; background: #f8f9fa !important; border: 1px solid rgba(17,24,39,.07) !important; border-radius: 15px !important; opacity: 1 !important; transform: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.90) !important; } /* Nome opzione */ body[data-theme="standard-light"] .menuModalPanel .menuModalOptionName, body[data-theme="standard-light"] .menuModalPanel label .menuModalOptionName { color: #344054 !important; opacity: 1 !important; font-size: .85rem !important; font-weight: 600 !important; } /* Prezzo opzione */ body[data-theme="standard-light"] .menuModalPanel .menuModalOptionPrice, body[data-theme="standard-light"] .menuModalPanel .menuModalOptionExtra, body[data-theme="standard-light"] .menuModalPanel .menuModalOptionDelta { color: #667085 !important; opacity: 1 !important; font-weight: 700 !important; } /* Hover */ body[data-theme="standard-light"] .menuModalPanel .menuModalOption:hover, body[data-theme="standard-light"] .menuModalPanel label.menuModalOption:hover { background: #fff !important; border-color: rgba(255,159,67,.25) !important; box-shadow: 0 6px 18px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,1) !important; } /* Selezione */ body[data-theme="standard-light"] .menuModalPanel .menuModalOption:has(input:checked), body[data-theme="standard-light"] .menuModalPanel label.menuModalOption:has(input:checked), body[data-theme="standard-light"] .menuModalPanel .menuModalOption.is-active, body[data-theme="standard-light"] .menuModalPanel .menuModalOption.is-selected, body[data-theme="standard-light"] .menuModalPanel .menuModalOption.selected { background: var(--sl-orange-soft) !important; border-color: rgba(255,159,67,.30) !important; box-shadow: inset 3px 0 0 var(--sl-orange-2), 0 5px 16px rgba(255,138,31,.07) !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalOption:has(input:checked) .menuModalOptionName, body[data-theme="standard-light"] .menuModalPanel .menuModalOption.is-active .menuModalOptionName, body[data-theme="standard-light"] .menuModalPanel .menuModalOption.is-selected .menuModalOptionName { color: var(--sl-text) !important; } /* Chip attive: evita vecchie regole ereditate poco leggibili */ body[data-theme="standard-light"] .menuModalPanel .chip { color: #4b5563 !important; background: #f3f4f6 !important; border: 1px solid rgba(17,24,39,.06) !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; } body[data-theme="standard-light"] .menuModalPanel .chip.is-active, body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .chip.is-active, body[data-theme="standard-light"] .menuModalPanel .menuModalGroup .chip.is-active { color: #fff !important; background: linear-gradient(180deg, #ffad61, var(--sl-orange-2)) !important; border-color: transparent !important; box-shadow: 0 5px 14px rgba(255,138,31,.16), inset 0 1px 0 rgba(255,255,255,.28) !important; opacity: 1 !important; transform: none !important; } /* ========================================================= MOBILE MODAL ========================================================= */ @media (max-width: 640px) { body[data-theme="standard-light"] .menuModalPanel { background: #fbfbfc !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalHero { min-height: 305px !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalHero .menuModalTitle, body[data-theme="standard-light"] .menuModalPanel .menuModalHero #menuModalTitle, body[data-theme="standard-light"] .menuModalPanel .menuModalHeroTitle { color: #fff !important; font-size: clamp(1.85rem, 8.8vw, 2.65rem) !important; line-height: .98 !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTabs { background: rgba(255,255,255,.94) !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalOptionName { font-size: .83rem !important; } } /* ========================================================= STANDARD LIGHT — MODAL FULL CONTRAST AUDIT Stato attivo/inattivo robusto contro gli stili base. ========================================================= */ /* ---------- MEDIA TABS: Foto / 3D / Vedi sul tavolo ---------- */ body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTabs { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 5px !important; color: #667085 !important; background: rgba(255,255,255,.96) !important; border: 1px solid rgba(17,24,39,.08) !important; border-radius: 999px !important; box-shadow: 0 8px 22px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,1) !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction { position: relative !important; min-height: 34px !important; padding: 8px 13px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; color: #667085 !important; -webkit-text-fill-color: #667085 !important; background: transparent !important; border: 0 !important; border-radius: 999px !important; opacity: 1 !important; filter: none !important; text-shadow: none !important; font-size: .78rem !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; box-shadow: none !important; transform: none !important; transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease !important; } /* eventuali span interni non devono ereditare colori sbagliati */ body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab *, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction * { color: inherit !important; -webkit-text-fill-color: currentColor !important; opacity: 1 !important; } /* Hover */ body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab:hover, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab:focus-visible { color: var(--sl-orange-2) !important; -webkit-text-fill-color: var(--sl-orange-2) !important; background: rgba(255,159,67,.09) !important; outline: none !important; } /* Stato attivo */ body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab.is-active, body[data-theme="standard-light"] .menuModalPanel button.menuModalMediaTab.is-active, body[data-theme="standard-light"] .menuModalPanel [role="tab"].menuModalMediaTab.is-active, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab[aria-selected="true"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: linear-gradient(180deg, #ffad61 0%, var(--sl-orange-2) 100%) !important; border-color: transparent !important; opacity: 1 !important; filter: none !important; text-shadow: 0 1px 2px rgba(120,55,0,.14) !important; box-shadow: 0 6px 16px rgba(255,138,31,.20), inset 0 1px 0 rgba(255,255,255,.30) !important; } /* Forza anche contenuti interni dello stato attivo */ body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab.is-active *, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab[aria-selected="true"] * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } /* CTA AR / Vedi sul tavolo */ body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction { color: #596273 !important; -webkit-text-fill-color: #596273 !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction:hover, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction:focus-visible { color: var(--sl-orange-2) !important; -webkit-text-fill-color: var(--sl-orange-2) !important; background: rgba(255,159,67,.09) !important; outline: none !important; } /* Se l'action viene marcata active/pending */ body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction.is-active, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction.is-pending { color: #8a4600 !important; -webkit-text-fill-color: #8a4600 !important; background: #fff0df !important; } /* Disabled */ body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab:disabled, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction:disabled, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab[aria-disabled="true"], body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction[aria-disabled="true"] { color: #b5bbc4 !important; -webkit-text-fill-color: #b5bbc4 !important; background: transparent !important; opacity: .72 !important; box-shadow: none !important; } /* Eventuali pseudo-elementi ereditati non devono coprire il testo */ body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab::before, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab::after, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction::before, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction::after { pointer-events: none !important; } /* ---------- HERO TITLE / PRICE ---------- */ body[data-theme="standard-light"] .menuModalPanel .menuModalHero .menuModalTitle, body[data-theme="standard-light"] .menuModalPanel .menuModalHero #menuModalTitle, body[data-theme="standard-light"] .menuModalPanel .menuModalHeroTitle { color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: 1 !important; filter: none !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalHero .menuModalPrice, body[data-theme="standard-light"] .menuModalPanel .menuModalHero #menuModalPrice, body[data-theme="standard-light"] .menuModalPanel .menuModalHeroPrice { color: var(--sl-orange-2) !important; -webkit-text-fill-color: var(--sl-orange-2) !important; opacity: 1 !important; } /* ---------- META ---------- */ body[data-theme="standard-light"] .menuModalPanel .menuModalMeta, body[data-theme="standard-light"] .menuModalPanel .menuModalMeta * { opacity: 1; } body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .itemMetaLineBody > strong, body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .itemMetaAllergensBody > strong { color: #7c8796 !important; -webkit-text-fill-color: #7c8796 !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .itemMetaTag, body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .itemMetaTagText { color: #4f5968 !important; -webkit-text-fill-color: #4f5968 !important; opacity: 1 !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .itemMetaTag svg, body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .menu-tag-icon, body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .itemMetaInlineIcon { color: var(--sl-orange-2) !important; --space-tag-icon-color: var(--sl-orange-2) !important; opacity: 1 !important; } /* ---------- DESCRIPTION ---------- */ body[data-theme="standard-light"] .menuModalPanel .menuModalDesc, body[data-theme="standard-light"] .menuModalPanel #menuModalDescription { color: #5f6978 !important; -webkit-text-fill-color: #5f6978 !important; opacity: 1 !important; } /* ---------- GROUP HEAD ---------- */ body[data-theme="standard-light"] .menuModalPanel .menuModalGroupHead, body[data-theme="standard-light"] .menuModalPanel .menuModalGroupHead *, body[data-theme="standard-light"] .menuModalPanel .menuModalGroupTitle { color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important; opacity: 1 !important; filter: none !important; } /* ---------- OPTIONS ---------- */ body[data-theme="standard-light"] .menuModalPanel .menuModalOption, body[data-theme="standard-light"] .menuModalPanel label.menuModalOption { color: #374151 !important; -webkit-text-fill-color: #374151 !important; opacity: 1 !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalOptionName, body[data-theme="standard-light"] .menuModalPanel label .menuModalOptionName { color: #344054 !important; -webkit-text-fill-color: #344054 !important; opacity: 1 !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalOptionPrice, body[data-theme="standard-light"] .menuModalPanel .menuModalOptionExtra, body[data-theme="standard-light"] .menuModalPanel .menuModalOptionDelta { color: #667085 !important; -webkit-text-fill-color: #667085 !important; opacity: 1 !important; } /* ---------- CHIP ---------- */ body[data-theme="standard-light"] .menuModalPanel .chip, body[data-theme="standard-light"] .menuModalPanel .chip * { color: #4b5563 !important; -webkit-text-fill-color: #4b5563 !important; opacity: 1 !important; } body[data-theme="standard-light"] .menuModalPanel .chip.is-active, body[data-theme="standard-light"] .menuModalPanel .chip.is-active *, body[data-theme="standard-light"] .menuModalPanel .menuModalMeta .chip.is-active, body[data-theme="standard-light"] .menuModalPanel .menuModalGroup .chip.is-active { color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: 1 !important; } /* ---------- CLOSE ---------- */ body[data-theme="standard-light"] .menuModalPanel .menuModalClose, body[data-theme="standard-light"] .menuModalPanel .menuModalClose * { color: #374151 !important; -webkit-text-fill-color: #374151 !important; opacity: 1 !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalClose:hover, body[data-theme="standard-light"] .menuModalPanel .menuModalClose:focus-visible { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ---------- MOBILE ---------- */ @media (max-width: 640px) { body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTabs { max-width: calc(100% - 24px) !important; padding: 5px !important; gap: 3px !important; } body[data-theme="standard-light"] .menuModalPanel .menuModalMediaTab, body[data-theme="standard-light"] .menuModalPanel .menuModalMediaAction { min-height: 34px !important; padding: 8px 11px !important; font-size: .75rem !important; } } /* ========================================================= STANDARD LIGHT — REAL MEDIA TAB SELECTORS I tab reali sono .chip dentro #menuModalMediaTabs. ========================================================= */ body[data-theme="standard-light"] #menuModalMediaTabs.menuModalMediaTabs { background: rgba(255,255,255,.96) !important; border: 1px solid rgba(17,24,39,.08) !important; box-shadow: 0 10px 28px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,1) !important; } body[data-theme="standard-light"] #menuModalMediaTabs .chip { color: #667085 !important; -webkit-text-fill-color: #667085 !important; background: transparent !important; border: 1px solid transparent !important; opacity: 1 !important; box-shadow: none !important; transform: none !important; } body[data-theme="standard-light"] #menuModalMediaTabs .chip:not(.is-active) { color: #667085 !important; -webkit-text-fill-color: #667085 !important; background: transparent !important; opacity: 1 !important; } body[data-theme="standard-light"] #menuModalMediaTabs .chip:hover, body[data-theme="standard-light"] #menuModalMediaTabs .chip:focus-visible { color: var(--sl-orange-2) !important; -webkit-text-fill-color: var(--sl-orange-2) !important; background: rgba(255,159,67,.09) !important; outline: none !important; } /* FIX DEFINITIVO TAB ATTIVO */ body[data-theme="standard-light"] #menuModalMediaTabs .chip.is-active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; transform: none !important; background: linear-gradient( 180deg, #ffad61 0%, var(--sl-orange-2) 100% ) !important; border-color: rgba(255,138,31,.12) !important; box-shadow: 0 6px 16px rgba(255,138,31,.22), inset 0 1px 0 rgba(255,255,255,.32) !important; } body[data-theme="standard-light"] #menuModalMediaTabs .chip.is-active *, body[data-theme="standard-light"] #menuModalMediaTabs .chip.is-active svg { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } /* AR resta leggibile ma non appare selezionato */ body[data-theme="standard-light"] #menuModalMediaTabs .menuModalTableARBtn:not(.is-active) { color: #596273 !important; -webkit-text-fill-color: #596273 !important; } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { body[data-theme="standard-light"] *, body[data-theme="standard-light"] *::before, body[data-theme="standard-light"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ========================================================= INTENTIONAL AI WAITER EXCLUSION Nessun override .aiWaiter* ========================================================= */ /* ========================================================= SPACE CATEGORY TABS CONTRACT Shared animated indicator tokens. ========================================================= */ body[data-theme="standard-light"] { --space-menu-tab-active-bg: linear-gradient(180deg, #ffad62, var(--sl-orange-2)); --space-menu-tab-active-color: #fff; --space-menu-tab-active-border: 1px solid transparent; --space-menu-tab-active-shadow: 0 8px 18px rgba(255,138,31,.18), inset 0 1px 0 rgba(255,255,255,.34); --space-menu-tab-active-radius: 999px; --space-menu-tab-active-transform: none; }