/* ========================================================= SPACE MENU THEME: BYTE PUB Code: byte-pub Style: orbital cyber-pub, neon cyan + amber, dark metal Inspired by the supplied BYTE PUB visual identity. IMPORTANT: - This theme intentionally DOES NOT style .aiWaiter* - "Chiedi a SPACE" keeps its own native styling ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap'); body[data-theme="byte-pub"] { --byte-bg: #02070d; --byte-bg-2: #050c14; --byte-bg-3: #08111b; --byte-panel: #07111b; --byte-panel-2: #0a1621; --byte-panel-3: #0c1b28; --byte-panel-soft: rgba(10, 25, 38, .82); --byte-cyan: #10d9ff; --byte-cyan-2: #00aee8; --byte-cyan-soft: #78ebff; --byte-cyan-glow: rgba(16, 217, 255, .30); --byte-amber: #ff9d18; --byte-amber-2: #e36f0c; --byte-amber-soft: #ffc35c; --byte-amber-glow: rgba(255, 145, 20, .30); --byte-text: #f4f8fb; --byte-text-soft: #c4d0da; --byte-muted: #778c9d; --byte-line: rgba(55, 199, 239, .20); --byte-line-soft: rgba(255,255,255,.075); --byte-line-warm: rgba(255, 157, 24, .22); --byte-danger: #ff5e57; --byte-success: #5ff2ad; --byte-shadow: rgba(0,0,0,.62); --byte-r-xs: 6px; --byte-r-sm: 8px; --byte-r-md: 10px; --byte-r-lg: 12px; --byte-r-xl: 16px; --byte-pill: 999px; --byte-font-display: 'Orbitron', sans-serif; --byte-font-ui: 'Rajdhani', sans-serif; --byte-font-body: 'Inter', sans-serif; --space-page-accent: var(--byte-cyan) !important; --space-tag-icon-color: var(--byte-cyan-soft); margin: 0; min-height: 100%; color: var(--byte-text) !important; font-family: var(--byte-font-body) !important; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: radial-gradient(circle at 76% -8%, rgba(16,217,255,.11), transparent 32%), radial-gradient(circle at 12% 4%, rgba(255,137,10,.08), transparent 27%), linear-gradient(180deg, #06101a 0%, #02080e 42%, #01050a 100%) !important; } /* Micro-griglia tecnica, molto leggera */ body[data-theme="byte-pub"]::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(rgba(44,185,225,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(44,185,225,.02) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.18) 66%, transparent); } /* Bagliori ambientali */ body[data-theme="byte-pub"]::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 6% 32%, rgba(0,174,232,.07), transparent 24%), radial-gradient(circle at 96% 68%, rgba(255,111,12,.055), transparent 26%); } body[data-theme="byte-pub"] * { box-sizing: border-box; } body[data-theme="byte-pub"] img { max-width: 100%; } body[data-theme="byte-pub"] button, body[data-theme="byte-pub"] input, body[data-theme="byte-pub"] select, body[data-theme="byte-pub"] textarea { font: inherit; } body[data-theme="byte-pub"] a { color: inherit; } /* ========================================================= WRAP ========================================================= */ body[data-theme="byte-pub"] .wrap { max-width: 600px !important; margin: 0 auto !important; padding: 10px 16px !important; } /* ========================================================= MINI HEADER ========================================================= */ body[data-theme="byte-pub"] .miniHeader { position: fixed; top: calc(env(safe-area-inset-top) + 10px); left: 0; right: 0; z-index: 1000; } body[data-theme="byte-pub"] .miniInner { width: min(574px, calc(100% - 24px)); margin: 0 auto; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(180deg, rgba(9,24,36,.94), rgba(3,11,18,.94)) !important; border: 1px solid rgba(16,217,255,.24) !important; border-radius: var(--byte-r-lg) !important; box-shadow: 0 14px 30px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045), 0 0 22px rgba(16,217,255,.06) !important; backdrop-filter: blur(15px) saturate(135%) !important; -webkit-backdrop-filter: blur(15px) saturate(135%) !important; } body[data-theme="byte-pub"] .miniLeft, body[data-theme="byte-pub"] .miniRight { display: flex; align-items: center; } body[data-theme="byte-pub"] .miniLeft { gap: 9px; min-width: 0; } body[data-theme="byte-pub"] .miniRight { flex-shrink: 0; } body[data-theme="byte-pub"] .miniLogo { width: 38px !important; height: 38px !important; flex: 0 0 38px; overflow: hidden !important; border-radius: var(--byte-r-sm) !important; background: #03090e !important; border: 1px solid rgba(255,157,24,.42) !important; box-shadow: 0 6px 16px rgba(0,0,0,.50), 0 0 14px rgba(255,145,20,.10) !important; } body[data-theme="byte-pub"] .miniLogo img { width: 100%; height: 100%; object-fit: cover; } body[data-theme="byte-pub"] .miniTitle { min-width: 0; } body[data-theme="byte-pub"] .miniTitle b { display: block; margin: 0; overflow: hidden; color: var(--byte-text) !important; font-family: var(--byte-font-display) !important; font-size: .82rem !important; font-weight: 800 !important; line-height: 1.05; letter-spacing: .055em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; } body[data-theme="byte-pub"] .miniTitle span { display: block; margin-top: 4px; color: var(--byte-cyan) !important; font-family: var(--byte-font-ui) !important; font-size: .68rem !important; font-weight: 700 !important; line-height: 1; letter-spacing: .15em; text-transform: uppercase; } body[data-theme="byte-pub"] .miniPill { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 8px 12px; color: #031017 !important; background: linear-gradient(180deg, var(--byte-cyan-soft), var(--byte-cyan-2)) !important; border: 1px solid rgba(159,242,255,.42) !important; border-radius: var(--byte-r-sm) !important; box-shadow: 0 8px 18px rgba(0,0,0,.26), 0 0 17px rgba(16,217,255,.18) !important; font-family: var(--byte-font-ui) !important; font-size: .84rem !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; user-select: none; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; } body[data-theme="byte-pub"] .miniPill:hover, body[data-theme="byte-pub"] .miniPill:focus-visible { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 22px rgba(0,0,0,.32), 0 0 22px rgba(16,217,255,.28) !important; outline: none; } body[data-theme="byte-pub"] .miniDot { width: 7px; height: 7px; border-radius: 50%; background: #021015 !important; box-shadow: 0 0 0 3px rgba(0,0,0,.10); } /* ========================================================= MENU APP BAR ========================================================= */ body[data-theme="byte-pub"] #menuAppBar, body[data-theme="byte-pub"] .menuAppBar { color: var(--byte-text) !important; background: linear-gradient(180deg, rgba(6,18,28,.97), rgba(2,9,15,.97)) !important; border-bottom: 1px solid rgba(16,217,255,.16) !important; box-shadow: 0 8px 22px rgba(0,0,0,.28) !important; font-family: var(--byte-font-ui) !important; } body[data-theme="byte-pub"] .menuAppBarBtn { color: var(--byte-text-soft) !important; } body[data-theme="byte-pub"] .menuAppBarBtn:hover, body[data-theme="byte-pub"] .menuAppBarBtn:focus-visible { color: var(--byte-cyan-soft) !important; } body[data-theme="byte-pub"] .menuAppBarBtn.is-accent { color: #031018 !important; background: linear-gradient(180deg, var(--byte-cyan-soft), var(--byte-cyan-2)) !important; border: 1px solid rgba(137,237,255,.34) !important; border-radius: var(--byte-r-sm) !important; box-shadow: 0 8px 18px rgba(0,174,232,.20) !important; } /* ========================================================= HERO / COVER ========================================================= */ body[data-theme="byte-pub"] .hero { margin-bottom: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } body[data-theme="byte-pub"] .cover { position: relative; min-height: 288px !important; overflow: hidden !important; border-radius: var(--byte-r-xl) !important; background: var(--byte-panel) !important; border: 1px solid rgba(16,217,255,.22) !important; box-shadow: 0 22px 46px rgba(0,0,0,.58), 0 0 38px rgba(16,217,255,.08), inset 0 1px 0 rgba(255,255,255,.04) !important; } body[data-theme="byte-pub"] .cover::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 1px solid rgba(255,157,24,.12); border-radius: inherit; clip-path: polygon(0 0, 32% 0, 35% 2px, 65% 2px, 68% 0, 100% 0, 100% 100%, 0 100%); } body[data-theme="byte-pub"] .cover::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; z-index: 4; opacity: .85; background: linear-gradient( 90deg, transparent, var(--byte-amber) 18%, var(--byte-amber) 42%, transparent 49%, var(--byte-cyan) 58%, var(--byte-cyan) 82%, transparent ); box-shadow: 0 0 14px rgba(255,157,24,.22), 0 0 16px rgba(16,217,255,.20); } body[data-theme="byte-pub"] .coverMedia, body[data-theme="byte-pub"] .coverOverlay { position: absolute; inset: 0; } body[data-theme="byte-pub"] .coverMedia img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.12) saturate(1.12) brightness(.70); transform: scale(1.01); } body[data-theme="byte-pub"] .coverOverlay { background: radial-gradient(circle at 76% 16%, rgba(0,198,244,.16), transparent 38%), radial-gradient(circle at 22% 12%, rgba(255,137,10,.13), transparent 34%), linear-gradient(to top, rgba(1,6,10,.95) 0%, rgba(1,7,12,.52) 50%, rgba(1,7,12,.14) 100%) !important; } body[data-theme="byte-pub"] .coverTop { position: absolute; top: 15px; right: 15px; z-index: 5; } body[data-theme="byte-pub"] .coverBottom { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 5; } body[data-theme="byte-pub"] .coverChargeMain { color: var(--byte-cyan-soft) !important; font-family: var(--byte-font-ui) !important; text-transform: uppercase; letter-spacing: .09em; } body[data-theme="byte-pub"] .coverChargeBox { color: #160b00 !important; background: linear-gradient(180deg, var(--byte-amber-soft), var(--byte-amber-2)) !important; border: 1px solid rgba(255,218,149,.34) !important; border-radius: var(--byte-r-sm) !important; box-shadow: 0 0 18px rgba(255,145,20,.16) !important; } /* ========================================================= LANGUAGE ========================================================= */ body[data-theme="byte-pub"] .langDock { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; } body[data-theme="byte-pub"] .langBtn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 8px 11px; color: var(--byte-text-soft) !important; background: rgba(2,10,17,.66) !important; border: 1px solid rgba(16,217,255,.20) !important; border-radius: var(--byte-r-sm) !important; text-decoration: none !important; backdrop-filter: blur(10px) saturate(130%) !important; -webkit-backdrop-filter: blur(10px) saturate(130%) !important; font-family: var(--byte-font-ui) !important; font-size: .78rem !important; font-weight: 700 !important; letter-spacing: .09em; text-transform: uppercase; transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } body[data-theme="byte-pub"] .langBtn:hover, body[data-theme="byte-pub"] .langBtn:focus-visible { transform: translateY(-1px); color: var(--byte-text) !important; background: rgba(0,174,232,.10) !important; border-color: rgba(16,217,255,.42) !important; outline: none; } body[data-theme="byte-pub"] .langBtn.is-active { color: #031017 !important; background: linear-gradient(180deg, var(--byte-cyan-soft), var(--byte-cyan-2)) !important; border-color: rgba(151,241,255,.54) !important; box-shadow: 0 0 16px rgba(16,217,255,.18) !important; } body[data-theme="byte-pub"] .dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: currentColor; opacity: .95; } /* ========================================================= BRAND ========================================================= */ body[data-theme="byte-pub"] .brandBadge { display: flex; align-items: center; gap: 14px; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body[data-theme="byte-pub"] .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; border-radius: var(--byte-r-lg) !important; background: linear-gradient(145deg, rgba(16,217,255,.10), rgba(255,137,10,.08)), #020910 !important; border: 1px solid rgba(16,217,255,.34) !important; box-shadow: 0 12px 24px rgba(0,0,0,.50), 0 0 24px rgba(16,217,255,.10), inset 0 0 0 1px rgba(255,157,24,.08) !important; } body[data-theme="byte-pub"] .logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px !important; } body[data-theme="byte-pub"] .brandText { min-width: 0; } body[data-theme="byte-pub"] .brandText h1 { margin: 0 !important; color: var(--byte-text) !important; font-family: var(--byte-font-display) !important; font-size: clamp(2rem, 7vw, 3.75rem) !important; font-weight: 800 !important; line-height: .92 !important; letter-spacing: .045em; text-transform: uppercase; text-shadow: 0 0 10px rgba(16,217,255,.34), 0 0 28px rgba(16,217,255,.15), 0 4px 16px rgba(0,0,0,.62); } body[data-theme="byte-pub"] .brandText h1::after { content: ""; display: block; width: min(150px, 75%); height: 2px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--byte-amber), var(--byte-cyan), transparent); box-shadow: 0 0 10px rgba(255,145,20,.20), 0 0 12px rgba(16,217,255,.18); } body[data-theme="byte-pub"] .brandText p { margin: 9px 0 0 !important; color: var(--byte-text-soft) !important; font-family: var(--byte-font-ui) !important; font-size: .86rem !important; font-weight: 700 !important; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.50); } /* ========================================================= RESERVE BAR ========================================================= */ body[data-theme="byte-pub"] .reserveBar { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 16px); z-index: 950; width: min(566px, calc(100% - 24px)); display: flex; justify-content: center; pointer-events: none; transform: translateX(-50%); } body[data-theme="byte-pub"] .reserveBar button, body[data-theme="byte-pub"] #openReservation { width: 100%; min-height: 58px; padding: 14px 20px; pointer-events: auto; color: #170b00 !important; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.22), transparent 36%), linear-gradient(180deg, var(--byte-amber-soft), var(--byte-amber-2)) !important; border: 1px solid rgba(255,215,139,.38) !important; border-radius: var(--byte-r-lg) !important; box-shadow: 0 16px 32px rgba(0,0,0,.44), 0 0 28px rgba(255,145,20,.22) !important; font-family: var(--byte-font-display) !important; font-size: .96rem !important; font-weight: 800 !important; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: transform .20s ease, filter .20s ease, box-shadow .20s ease; } body[data-theme="byte-pub"] .reserveBar button:hover, body[data-theme="byte-pub"] .reserveBar button:focus-visible, body[data-theme="byte-pub"] #openReservation:hover, body[data-theme="byte-pub"] #openReservation:focus-visible { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 19px 36px rgba(0,0,0,.52), 0 0 34px rgba(255,145,20,.32) !important; outline: none; } /* ========================================================= DOCK / TABS / SEARCH ========================================================= */ body[data-theme="byte-pub"] .dock { position: sticky; top: calc(env(safe-area-inset-top) + 66px); z-index: 500; margin-top: 0 !important; margin-bottom: 18px !important; padding: 9px !important; background: linear-gradient(180deg, rgba(7,20,31,.92), rgba(2,10,16,.92)) !important; border: 1px solid rgba(16,217,255,.18) !important; border-radius: var(--byte-r-lg) !important; backdrop-filter: blur(15px) saturate(135%) !important; -webkit-backdrop-filter: blur(15px) saturate(135%) !important; box-shadow: 0 15px 34px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.035) !important; } body[data-theme="byte-pub"] .tabRow { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 8px !important; scrollbar-width: none; } body[data-theme="byte-pub"] .tabRow::-webkit-scrollbar { display: none; } body[data-theme="byte-pub"] .tab { flex: 0 0 auto; min-height: 40px; padding: 9px 13px !important; color: var(--byte-muted) !important; background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.065) !important; border-radius: var(--byte-r-sm) !important; font-family: var(--byte-font-ui) !important; font-size: .84rem !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } body[data-theme="byte-pub"] .tab:hover, body[data-theme="byte-pub"] .tab:focus-visible { color: var(--byte-cyan-soft) !important; background: rgba(16,217,255,.065) !important; border-color: rgba(16,217,255,.24) !important; outline: none; } body[data-theme="byte-pub"] .tab.is-active { color: #031017 !important; background: linear-gradient(180deg, var(--byte-cyan-soft), var(--byte-cyan-2)) !important; border-color: rgba(147,241,255,.46) !important; box-shadow: 0 7px 17px rgba(0,174,232,.18), 0 0 16px rgba(16,217,255,.12) !important; } body[data-theme="byte-pub"] .searchRow { padding: 2px !important; } body[data-theme="byte-pub"] .search { width: 100%; min-height: 49px; padding: 13px 15px !important; color: var(--byte-text) !important; caret-color: var(--byte-cyan); background: rgba(1,8,14,.78) !important; border: 1px solid rgba(16,217,255,.15) !important; border-radius: var(--byte-r-sm) !important; font-family: var(--byte-font-body) !important; font-size: .94rem !important; font-weight: 600; outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } body[data-theme="byte-pub"] .search::placeholder { color: rgba(168,190,205,.42) !important; font-family: var(--byte-font-ui) !important; font-size: .80rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } body[data-theme="byte-pub"] .search:focus { background: rgba(3,12,20,.96) !important; border-color: rgba(16,217,255,.48) !important; box-shadow: 0 0 0 4px rgba(16,217,255,.075), inset 0 1px 0 rgba(255,255,255,.045) !important; } /* ========================================================= SECTIONS ========================================================= */ body[data-theme="byte-pub"] .section { margin-top: 22px !important; } body[data-theme="byte-pub"] .secWrap { position: relative; } body[data-theme="byte-pub"] .section.is-in, body[data-theme="byte-pub"] .secWrap.is-in { opacity: 1 !important; transform: none !important; } body[data-theme="byte-pub"] .sectionHead { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px !important; padding: 8px 12px 9px !important; background: linear-gradient(90deg, rgba(0,174,232,.075), rgba(255,137,10,.025), transparent) !important; border: 0 !important; border-top: 1px solid rgba(16,217,255,.13) !important; border-bottom: 1px solid rgba(16,217,255,.16) !important; } body[data-theme="byte-pub"] .sectionHead::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--byte-amber); box-shadow: 0 0 10px rgba(255,145,20,.36); } body[data-theme="byte-pub"] .sectionHead::after { content: ""; position: absolute; right: 0; bottom: -1px; width: 82px; height: 1px; background: linear-gradient(90deg, transparent, var(--byte-cyan)); box-shadow: 0 0 8px rgba(16,217,255,.30); } body[data-theme="byte-pub"] .sectionHead b { display: block; color: var(--byte-text) !important; font-family: var(--byte-font-display) !important; font-size: clamp(1.12rem, 4.4vw, 1.62rem) !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: .055em; text-transform: uppercase; text-shadow: 0 0 14px rgba(16,217,255,.14); } /* ========================================================= PRODUCT CARDS ========================================================= */ body[data-theme="byte-pub"] .item, body[data-theme="byte-pub"] .menu-item { position: relative; display: flex; align-items: stretch; gap: 13px; margin-bottom: 12px !important; padding: 12px !important; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(16,217,255,.035), transparent 28%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--byte-panel) !important; border: 1px solid rgba(78,126,151,.24) !important; border-radius: var(--byte-r-lg) !important; box-shadow: 0 10px 24px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.025) !important; cursor: pointer; transition: transform .20s ease, border-color .20s ease, box-shadow .20s ease, background .20s ease; } body[data-theme="byte-pub"] .item::after, body[data-theme="byte-pub"] .menu-item::after { content: ""; position: absolute; right: 0; top: 16px; width: 1px; height: 34px; opacity: .55; background: linear-gradient(var(--byte-cyan), transparent); box-shadow: 0 0 8px var(--byte-cyan-glow); } body[data-theme="byte-pub"] .item:hover, body[data-theme="byte-pub"] .item:focus-within, body[data-theme="byte-pub"] .menu-item:hover, body[data-theme="byte-pub"] .menu-item:focus-within { transform: translateY(-2px); border-color: rgba(16,217,255,.32) !important; box-shadow: 0 16px 30px rgba(0,0,0,.48), 0 0 22px rgba(16,217,255,.07) !important; } body[data-theme="byte-pub"] .thumb { width: 96px !important; height: 96px !important; min-width: 84px !important; display: flex; align-items: center; justify-content: center; overflow: hidden !important; color: var(--byte-cyan) !important; background: linear-gradient(145deg, rgba(16,217,255,.07), rgba(255,137,10,.045)), #030a11 !important; border: 1px solid rgba(16,217,255,.18) !important; border-radius: var(--byte-r-md) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 7px 17px rgba(0,0,0,.30) !important; font-family: var(--byte-font-display) !important; font-size: 1.6rem !important; font-weight: 800 !important; } body[data-theme="byte-pub"] .thumb img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.07) saturate(1.05) brightness(.90); } body[data-theme="byte-pub"] .itemMain { flex: 1 1 auto; min-width: 0; } body[data-theme="byte-pub"] .itemTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } body[data-theme="byte-pub"] .name { margin: 0; color: var(--byte-text) !important; font-family: var(--byte-font-ui) !important; font-size: 1.18rem !important; font-weight: 700 !important; line-height: 1.02 !important; letter-spacing: .015em; overflow-wrap: anywhere; } body[data-theme="byte-pub"] .desc { margin-top: 7px !important; color: var(--byte-muted) !important; font-family: var(--byte-font-body) !important; font-size: .84rem !important; line-height: 1.55 !important; } body[data-theme="byte-pub"] .price { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 5px 8px; color: var(--byte-cyan) !important; background: rgba(0,174,232,.055) !important; border: 1px solid rgba(16,217,255,.12) !important; border-radius: var(--byte-r-sm) !important; font-family: var(--byte-font-ui) !important; font-size: .96rem !important; font-weight: 700 !important; letter-spacing: .025em; white-space: nowrap; } /* ========================================================= PRODUCT META / TAGS Compatible con il nuovo renderer compatto ========================================================= */ body[data-theme="byte-pub"] .meta { display: grid !important; gap: 5px !important; margin-top: 9px !important; padding-top: 8px !important; border-top: 1px solid rgba(102,131,147,.15) !important; } body[data-theme="byte-pub"] .itemMetaGroup { min-width: 0; } body[data-theme="byte-pub"] .itemMetaLine, body[data-theme="byte-pub"] .itemMetaAllergensLine { min-width: 0; } body[data-theme="byte-pub"] .itemMetaLineBody, body[data-theme="byte-pub"] .itemMetaAllergensBody { display: grid !important; grid-template-columns: max-content minmax(0, 1fr) !important; column-gap: 8px !important; align-items: baseline !important; min-width: 0; } body[data-theme="byte-pub"] .itemMetaLineBody > strong, body[data-theme="byte-pub"] .itemMetaAllergensBody > strong { color: #72899a !important; font-family: var(--byte-font-ui) !important; font-size: .67rem !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: .065em !important; text-transform: uppercase; } body[data-theme="byte-pub"] .itemMetaList { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 8px !important; min-width: 0; } body[data-theme="byte-pub"] .itemMetaTag { display: inline-flex; align-items: center; gap: 4px; min-height: 18px; padding: 0 !important; color: #aebdc7 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; font-family: var(--byte-font-body) !important; font-size: .71rem !important; font-weight: 500 !important; line-height: 1.25; } body[data-theme="byte-pub"] .itemMetaTag svg, body[data-theme="byte-pub"] .itemMetaInlineIcon, body[data-theme="byte-pub"] .menu-tag-icon { width: 12px !important; height: 12px !important; flex: 0 0 12px; color: var(--byte-cyan-soft) !important; --space-tag-icon-color: var(--byte-cyan-soft); } body[data-theme="byte-pub"] .itemMetaTag--3d { color: var(--byte-cyan-soft) !important; } body[data-theme="byte-pub"] .itemMetaTag--3d .itemMetaInlineIcon--3d { opacity: .92 !important; } body[data-theme="byte-pub"] .itemMetaGroup--allergens { margin-top: 2px !important; padding-top: 5px !important; border-top: 1px dashed rgba(103,146,169,.19) !important; } body[data-theme="byte-pub"] .itemMetaGroup--allergens-only { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; } body[data-theme="byte-pub"] .chip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 4px 8px !important; color: var(--byte-text-soft) !important; background: rgba(16,217,255,.045) !important; border: 1px solid rgba(16,217,255,.12) !important; border-radius: var(--byte-r-sm) !important; font-family: var(--byte-font-body) !important; font-size: .70rem !important; font-weight: 600 !important; } body[data-theme="byte-pub"] .itemUnavailable { display: inline-flex; align-items: center; margin-left: 7px; padding: 3px 7px; color: #ff837d !important; background: rgba(255,94,87,.08) !important; border: 1px solid rgba(255,94,87,.20) !important; border-radius: var(--byte-r-xs) !important; font-size: .67rem !important; font-weight: 800 !important; } body[data-theme="byte-pub"] .item-disabled { opacity: .48 !important; filter: grayscale(.45); } /* ========================================================= PRODUCT MODAL ========================================================= */ body[data-theme="byte-pub"] .menuModal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 18px; } body[data-theme="byte-pub"] .menuModal.is-open { display: flex; padding: 12px; } body[data-theme="byte-pub"] .menuModalBackdrop { position: absolute; inset: 0; background: rgba(0,5,10,.80) !important; backdrop-filter: blur(11px) saturate(118%) !important; -webkit-backdrop-filter: blur(11px) saturate(118%) !important; } body[data-theme="byte-pub"] .menuModalPanel { position: relative; width: min(100%, 570px); max-height: min(90vh, 900px); display: flex; flex-direction: column; overflow: hidden; color: var(--byte-text) !important; background: radial-gradient(circle at 100% 0%, rgba(16,217,255,.045), transparent 24%), linear-gradient(180deg, #091521, #040c13) !important; border: 1px solid rgba(16,217,255,.22) !important; border-radius: var(--byte-r-xl) !important; box-shadow: 0 30px 76px rgba(0,0,0,.76), 0 0 34px rgba(16,217,255,.085), inset 0 1px 0 rgba(255,255,255,.035) !important; } body[data-theme="byte-pub"] .menuModalClose { position: absolute; top: 13px; right: 13px; z-index: 15; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--byte-cyan-soft) !important; background: rgba(1,8,14,.72) !important; border: 1px solid rgba(16,217,255,.22) !important; border-radius: var(--byte-r-sm) !important; box-shadow: 0 8px 18px rgba(0,0,0,.32) !important; font-size: 1.45rem !important; line-height: 1; cursor: pointer; transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease; } body[data-theme="byte-pub"] .menuModalClose:hover, body[data-theme="byte-pub"] .menuModalClose:focus-visible { transform: rotate(90deg); color: #031017 !important; background: var(--byte-cyan) !important; border-color: transparent !important; outline: none; } body[data-theme="byte-pub"] .menuModalHero { position: relative; flex-shrink: 0; min-height: 250px; background: radial-gradient(circle at 70% 14%, rgba(16,217,255,.08), transparent 38%), linear-gradient(180deg, #0b1b29, #020910) !important; } body[data-theme="byte-pub"] .menuModalHero img, body[data-theme="byte-pub"] .menuModalPhoto { width: 100%; height: 100%; object-fit: cover; } body[data-theme="byte-pub"] .menuModalHero::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--byte-amber), var(--byte-cyan), transparent); opacity: .72; } body[data-theme="byte-pub"] .menuModalPhotoFx, body[data-theme="byte-pub"] .menuModalPhotoLight { mix-blend-mode: screen; opacity: .45; } /* Evita una scanline aggressiva sulla foto */ body[data-theme="byte-pub"] .menuModalPhotoScan { opacity: .12 !important; } /* Foto / 3D / AR */ body[data-theme="byte-pub"] .menuModalMediaTabs { background: rgba(1,8,13,.86) !important; border: 1px solid rgba(16,217,255,.16) !important; border-radius: var(--byte-pill) !important; box-shadow: 0 10px 22px rgba(0,0,0,.38), 0 0 18px rgba(16,217,255,.05) !important; backdrop-filter: blur(12px) saturate(135%) !important; -webkit-backdrop-filter: blur(12px) saturate(135%) !important; } body[data-theme="byte-pub"] .menuModalMediaTab, body[data-theme="byte-pub"] .menuModalMediaAction { color: #8fa5b5 !important; background: transparent !important; border-color: transparent !important; font-family: var(--byte-font-ui) !important; font-weight: 700 !important; letter-spacing: .035em; } body[data-theme="byte-pub"] .menuModalMediaTab.is-active { color: #031017 !important; background: linear-gradient(180deg, var(--byte-cyan-soft), var(--byte-cyan-2)) !important; box-shadow: 0 0 14px rgba(16,217,255,.16) !important; } body[data-theme="byte-pub"] .menuModalMediaAction { color: var(--byte-amber-soft) !important; } body[data-theme="byte-pub"] .menuModalMediaAction:hover, body[data-theme="byte-pub"] .menuModalMediaAction:focus-visible { color: #160b00 !important; background: linear-gradient(180deg, var(--byte-amber-soft), var(--byte-amber-2)) !important; } /* Corpo modal */ body[data-theme="byte-pub"] .menuModalContent, body[data-theme="byte-pub"] .menuModalBody, body[data-theme="byte-pub"] .menuModalScroll { color: var(--byte-text) !important; background: transparent !important; } body[data-theme="byte-pub"] .menuModalTitle, body[data-theme="byte-pub"] #menuModalTitle { color: var(--byte-text) !important; font-family: var(--byte-font-ui) !important; font-weight: 700 !important; letter-spacing: .01em; } body[data-theme="byte-pub"] .menuModalPrice, body[data-theme="byte-pub"] #menuModalPrice { color: var(--byte-cyan) !important; font-family: var(--byte-font-ui) !important; font-weight: 700 !important; } body[data-theme="byte-pub"] .menuModalDesc, body[data-theme="byte-pub"] #menuModalDescription { color: var(--byte-muted) !important; } body[data-theme="byte-pub"] .menuModalMeta { color: var(--byte-text-soft) !important; } body[data-theme="byte-pub"] .menuModalMeta .itemMetaLineBody > strong, body[data-theme="byte-pub"] .menuModalMeta .itemMetaAllergensBody > strong { color: #6f8797 !important; } body[data-theme="byte-pub"] .menuModalMeta .itemMetaTag { color: #b1c1cb !important; } /* Opzioni / varianti */ body[data-theme="byte-pub"] .menuModalGroup, body[data-theme="byte-pub"] .menuModalOptionGroup, body[data-theme="byte-pub"] .optionGroup, body[data-theme="byte-pub"] .menuOptionGroup { background: rgba(255,255,255,.018) !important; border: 1px solid rgba(16,217,255,.10) !important; border-radius: var(--byte-r-lg) !important; box-shadow: none !important; } body[data-theme="byte-pub"] .menuModalGroupTitle, body[data-theme="byte-pub"] .menuModalOptionTitle, body[data-theme="byte-pub"] .optionGroupTitle, body[data-theme="byte-pub"] .menuOptionGroupTitle { color: var(--byte-text) !important; font-family: var(--byte-font-ui) !important; font-weight: 700 !important; } body[data-theme="byte-pub"] .menuModalOption, body[data-theme="byte-pub"] .optionChoice, body[data-theme="byte-pub"] .menuOption { color: var(--byte-text-soft) !important; background: rgba(255,255,255,.022) !important; border: 1px solid rgba(255,255,255,.055) !important; border-radius: var(--byte-r-sm) !important; } body[data-theme="byte-pub"] .menuModalOption:hover, body[data-theme="byte-pub"] .optionChoice:hover, body[data-theme="byte-pub"] .menuOption:hover { border-color: rgba(16,217,255,.22) !important; background: rgba(16,217,255,.045) !important; } body[data-theme="byte-pub"] input[type="radio"], body[data-theme="byte-pub"] input[type="checkbox"] { accent-color: var(--byte-cyan); } /* 3D area */ body[data-theme="byte-pub"] .menuModal3DWrap { background: radial-gradient(circle at 50% 65%, rgba(16,217,255,.09), transparent 34%), linear-gradient(180deg, #05111b, #01070c) !important; } /* ========================================================= RESERVATION MODAL ========================================================= */ body[data-theme="byte-pub"] .reservationModal { color: var(--byte-text) !important; } body[data-theme="byte-pub"] .reservationBackdrop { background: rgba(0,5,10,.80) !important; backdrop-filter: blur(11px) saturate(118%) !important; -webkit-backdrop-filter: blur(11px) saturate(118%) !important; } body[data-theme="byte-pub"] .reservationPanel { color: var(--byte-text) !important; background: radial-gradient(circle at 100% 0%, rgba(16,217,255,.055), transparent 24%), linear-gradient(180deg, #081521, #030b12) !important; border: 1px solid rgba(16,217,255,.20) !important; border-radius: var(--byte-r-xl) !important; box-shadow: 0 28px 72px rgba(0,0,0,.72), 0 0 34px rgba(16,217,255,.07) !important; } body[data-theme="byte-pub"] .reservationPanel h2, body[data-theme="byte-pub"] .reservationTitle { color: var(--byte-text) !important; font-family: var(--byte-font-display) !important; font-weight: 800 !important; letter-spacing: .04em; text-transform: uppercase; } body[data-theme="byte-pub"] .reservationPanel p, body[data-theme="byte-pub"] .reservationSubtitle, body[data-theme="byte-pub"] .reservationHint { color: var(--byte-muted) !important; } body[data-theme="byte-pub"] .reservationPanel label { color: var(--byte-text-soft) !important; font-family: var(--byte-font-ui) !important; font-weight: 700 !important; } body[data-theme="byte-pub"] .reservationPanel input, body[data-theme="byte-pub"] .reservationPanel select, body[data-theme="byte-pub"] .reservationPanel textarea { color: var(--byte-text) !important; background: rgba(1,8,14,.80) !important; border: 1px solid rgba(16,217,255,.14) !important; border-radius: var(--byte-r-sm) !important; outline: none; } body[data-theme="byte-pub"] .reservationPanel input:focus, body[data-theme="byte-pub"] .reservationPanel select:focus, body[data-theme="byte-pub"] .reservationPanel textarea:focus { border-color: rgba(16,217,255,.46) !important; box-shadow: 0 0 0 4px rgba(16,217,255,.07) !important; } body[data-theme="byte-pub"] .reservationSlotsWrap, body[data-theme="byte-pub"] .reservationPrivacy, body[data-theme="byte-pub"] .privacy-container, body[data-theme="byte-pub"] .reservationPanel div:has(#privacy_accept) { background: rgba(255,255,255,.018) !important; border: 1px solid rgba(16,217,255,.10) !important; border-radius: var(--byte-r-lg) !important; } body[data-theme="byte-pub"] .reservationSlot { color: var(--byte-text-soft) !important; background: rgba(255,255,255,.022) !important; border: 1px solid rgba(255,255,255,.065) !important; border-radius: var(--byte-r-sm) !important; font-family: var(--byte-font-ui) !important; font-weight: 700 !important; box-shadow: none !important; transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease; } body[data-theme="byte-pub"] .reservationSlot:hover { transform: translateY(-1px); color: var(--byte-cyan-soft) !important; background: rgba(16,217,255,.055) !important; border-color: rgba(16,217,255,.22) !important; } body[data-theme="byte-pub"] .reservationSlot.is-active, body[data-theme="byte-pub"] .reservationSlot.selected { color: #031017 !important; background: linear-gradient(180deg, var(--byte-cyan-soft), var(--byte-cyan-2)) !important; border-color: rgba(149,241,255,.38) !important; box-shadow: 0 0 15px rgba(16,217,255,.15) !important; } body[data-theme="byte-pub"] .reservationSlot:disabled, body[data-theme="byte-pub"] .reservationSlot.is-disabled { opacity: .34; transform: none !important; color: #657887 !important; background: rgba(255,255,255,.018) !important; border-color: rgba(255,255,255,.045) !important; box-shadow: none !important; } body[data-theme="byte-pub"] .reservationSelectedSlot { color: var(--byte-text-soft) !important; background: rgba(16,217,255,.045) !important; border: 1px solid rgba(16,217,255,.10) !important; border-radius: var(--byte-r-sm) !important; } body[data-theme="byte-pub"] .reservationSelectedSlot strong { color: var(--byte-cyan) !important; } body[data-theme="byte-pub"] #r_submit, body[data-theme="byte-pub"] .reservationActionBtn { color: #170b00 !important; background: linear-gradient(180deg, var(--byte-amber-soft), var(--byte-amber-2)) !important; border: 1px solid rgba(255,217,146,.34) !important; border-radius: var(--byte-r-sm) !important; box-shadow: 0 12px 24px rgba(0,0,0,.30), 0 0 20px rgba(255,145,20,.14) !important; font-family: var(--byte-font-ui) !important; font-weight: 700 !important; } body[data-theme="byte-pub"] #r_submit:hover, body[data-theme="byte-pub"] #r_submit:focus-visible, body[data-theme="byte-pub"] .reservationActionBtn:hover, body[data-theme="byte-pub"] .reservationActionBtn:focus-visible { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 14px 28px rgba(0,0,0,.36), 0 0 24px rgba(255,145,20,.22) !important; outline: none; } body[data-theme="byte-pub"] .reservationActionBtn.is-secondary { color: var(--byte-cyan-soft) !important; background: rgba(16,217,255,.045) !important; border-color: rgba(16,217,255,.16) !important; box-shadow: none !important; } body[data-theme="byte-pub"] #reservationClose { color: var(--byte-cyan-soft) !important; background: rgba(1,8,14,.70) !important; border: 1px solid rgba(16,217,255,.18) !important; border-radius: var(--byte-r-sm) !important; box-shadow: none !important; } body[data-theme="byte-pub"] #reservationClose:hover, body[data-theme="byte-pub"] #reservationClose:focus-visible { color: #031017 !important; background: var(--byte-cyan) !important; } /* Success reservation */ body[data-theme="byte-pub"] .reservationSuccessCard { background: rgba(255,255,255,.022) !important; border: 1px solid rgba(16,217,255,.11) !important; border-radius: var(--byte-r-lg) !important; } body[data-theme="byte-pub"] .reservationSuccessTitle { color: var(--byte-cyan-soft) !important; font-family: var(--byte-font-display) !important; text-transform: uppercase; } body[data-theme="byte-pub"] .reservationSuccessText { color: var(--byte-muted) !important; } /* ========================================================= CUSTOMER ORDER / GENERIC PUBLIC SHEETS Intentionally excludes AI waiter ========================================================= */ body[data-theme="byte-pub"] #customerOrderSheet .customerOrderPanel, body[data-theme="byte-pub"] .customerOrderSheetPanel, body[data-theme="byte-pub"] .publicOrderSheetPanel { color: var(--byte-text) !important; background: radial-gradient(circle at 100% 0%, rgba(16,217,255,.05), transparent 22%), linear-gradient(180deg, #081521, #030b12) !important; border-color: rgba(16,217,255,.17) !important; } body[data-theme="byte-pub"] #customerOrderSheet button, body[data-theme="byte-pub"] .customerOrderSheetPanel button { border-radius: var(--byte-r-sm); } body[data-theme="byte-pub"] #customerOrderSheet input, body[data-theme="byte-pub"] #customerOrderSheet select, body[data-theme="byte-pub"] #customerOrderSheet textarea { color: var(--byte-text) !important; background: rgba(1,8,14,.82) !important; border-color: rgba(16,217,255,.13) !important; } /* ========================================================= FOOTER ========================================================= */ body[data-theme="byte-pub"] .footer { margin-top: 28px !important; padding: 50px 16px 110px !important; color: var(--byte-muted) !important; text-align: center !important; } body[data-theme="byte-pub"] .footer a { color: var(--byte-muted) !important; background: transparent !important; border: 1px solid rgba(16,217,255,.10) !important; border-radius: var(--byte-r-sm) !important; } body[data-theme="byte-pub"] .footer a:hover, body[data-theme="byte-pub"] .footer a:focus-visible { color: var(--byte-cyan-soft) !important; border-color: rgba(16,217,255,.26) !important; } body[data-theme="byte-pub"] .footer strong { color: var(--byte-text-soft) !important; } body[data-theme="byte-pub"] .footer .dot { background: var(--byte-cyan) !important; box-shadow: 0 0 9px rgba(16,217,255,.30) !important; } /* ========================================================= EMPTY / GENERIC STATES ========================================================= */ body[data-theme="byte-pub"] .emptyState, body[data-theme="byte-pub"] .menuEmpty, body[data-theme="byte-pub"] .noResults { color: var(--byte-muted) !important; background: rgba(255,255,255,.018) !important; border: 1px dashed rgba(16,217,255,.14) !important; border-radius: var(--byte-r-lg) !important; } body[data-theme="byte-pub"] .emptyState strong, body[data-theme="byte-pub"] .menuEmpty strong, body[data-theme="byte-pub"] .noResults strong { color: var(--byte-text-soft) !important; } /* ========================================================= SCROLLBAR ========================================================= */ body[data-theme="byte-pub"] ::-webkit-scrollbar { width: 8px; height: 8px; } body[data-theme="byte-pub"] ::-webkit-scrollbar-track { background: #01060a; } body[data-theme="byte-pub"] ::-webkit-scrollbar-thumb { background: rgba(16,217,255,.30); border-radius: 8px; } body[data-theme="byte-pub"] ::-webkit-scrollbar-thumb:hover { background: rgba(16,217,255,.50); } /* ========================================================= FOCUS ACCESSIBILITY ========================================================= */ body[data-theme="byte-pub"] :focus-visible { outline-color: rgba(16,217,255,.62); outline-offset: 2px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 640px) { body[data-theme="byte-pub"] .wrap { padding-left: 12px !important; padding-right: 12px !important; } body[data-theme="byte-pub"] .cover { min-height: 258px !important; border-radius: var(--byte-r-lg) !important; } body[data-theme="byte-pub"] .brandBadge { gap: 11px; } body[data-theme="byte-pub"] .logo { width: 70px !important; height: 70px !important; min-width: 70px !important; } body[data-theme="byte-pub"] .brandText h1 { font-size: clamp(1.72rem, 9.5vw, 2.8rem) !important; } body[data-theme="byte-pub"] .brandText p { font-size: .74rem !important; letter-spacing: .13em; } body[data-theme="byte-pub"] .dock { top: calc(env(safe-area-inset-top) + 74px); border-radius: var(--byte-r-lg) !important; } body[data-theme="byte-pub"] .item, body[data-theme="byte-pub"] .menu-item { gap: 11px; padding: 11px !important; border-radius: var(--byte-r-lg) !important; } body[data-theme="byte-pub"] .thumb { width: 92px !important; height: 92px !important; min-width: 76px !important; border-radius: var(--byte-r-md) !important; } body[data-theme="byte-pub"] .name { font-size: 1.10rem !important; } body[data-theme="byte-pub"] .desc { font-size: .82rem !important; } body[data-theme="byte-pub"] .price { min-height: 29px; padding: 4px 7px; font-size: .90rem !important; } body[data-theme="byte-pub"] .menuModal { align-items: flex-end; padding: 0 !important; } body[data-theme="byte-pub"] .menuModalPanel { width: 100%; max-width: none; max-height: 92vh; border-radius: var(--byte-r-xl) var(--byte-r-xl) 0 0 !important; } body[data-theme="byte-pub"] .menuModalHero { min-height: 220px; } body[data-theme="byte-pub"] .reservationModal { align-items: flex-end; padding: 0; } body[data-theme="byte-pub"] .reservationPanel { position: absolute; left: 10px; right: 10px; bottom: 0; width: auto; max-width: 720px; max-height: min(84vh, 820px); margin: 0 auto; padding: 24px 18px 20px !important; border-radius: var(--byte-r-xl) var(--byte-r-xl) 0 0 !important; transform: translateY(34px) scale(.985); } body[data-theme="byte-pub"] .reservationRow { flex-direction: column; gap: 15px; } body[data-theme="byte-pub"] #reservationClose { top: 12px; right: 12px; width: 36px; height: 36px; font-size: 1.35rem !important; } body[data-theme="byte-pub"] .reservationSlots { grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); } body[data-theme="byte-pub"] .reserveBar { width: calc(100% - 20px); bottom: calc(env(safe-area-inset-bottom) + 10px); } body[data-theme="byte-pub"] .reserveBar button, body[data-theme="byte-pub"] #openReservation { min-height: 54px; font-size: .88rem !important; } body[data-theme="byte-pub"] .footer { padding-bottom: 96px !important; } body[data-theme="byte-pub"] .itemMetaLineBody, body[data-theme="byte-pub"] .itemMetaAllergensBody { grid-template-columns: max-content minmax(0,1fr) !important; } } @media (max-width: 420px) { body[data-theme="byte-pub"] .miniInner { padding: 9px 10px; } body[data-theme="byte-pub"] .miniPill { padding: 8px 10px; font-size: .74rem !important; } body[data-theme="byte-pub"] .brandText h1 { font-size: 1.82rem !important; } body[data-theme="byte-pub"] .itemTop { gap: 7px; } body[data-theme="byte-pub"] .name { font-size: 1.04rem !important; } body[data-theme="byte-pub"] .itemMetaLineBody > strong, body[data-theme="byte-pub"] .itemMetaAllergensBody > strong { font-size: .64rem !important; } body[data-theme="byte-pub"] .itemMetaTag { font-size: .68rem !important; } } @media (max-width: 360px) { body[data-theme="byte-pub"] .thumb { width: 80px !important; height: 80px !important; min-width: 70px !important; } body[data-theme="byte-pub"] .item, body[data-theme="byte-pub"] .menu-item { gap: 9px; padding: 10px !important; } body[data-theme="byte-pub"] .brandText h1 { font-size: 1.60rem !important; } body[data-theme="byte-pub"] .itemMetaLineBody, body[data-theme="byte-pub"] .itemMetaAllergensBody { grid-template-columns: minmax(0,1fr) !important; row-gap: 2px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { body[data-theme="byte-pub"] *, body[data-theme="byte-pub"] *::before, body[data-theme="byte-pub"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ========================================================= BYTE PUB — PRODUCT MODAL OVERRIDES / SPECIFICITY FIX Correzioni per stili base che vincevano su: - .menuModalOptionName - .menuModalGroupHead - .chip.is-active ========================================================= */ /* Header gruppi opzioni */ body[data-theme="byte-pub"] .menuModalPanel .menuModalGroupHead, body[data-theme="byte-pub"] .menuModalPanel .menuModalOptionGroup .menuModalGroupHead, body[data-theme="byte-pub"] .menuModalPanel .menuModalGroup .menuModalGroupHead { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin: 0 !important; padding: 10px 12px !important; color: var(--byte-text) !important; background: linear-gradient(90deg, rgba(16,217,255,.055), rgba(255,157,24,.018), transparent) !important; border: 0 !important; border-bottom: 1px solid rgba(16,217,255,.10) !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; font-family: var(--byte-font-ui) !important; } body[data-theme="byte-pub"] .menuModalPanel .menuModalGroupHead strong, body[data-theme="byte-pub"] .menuModalPanel .menuModalGroupHead b, body[data-theme="byte-pub"] .menuModalPanel .menuModalGroupHead .menuModalGroupTitle { color: var(--byte-text) !important; font-family: var(--byte-font-display) !important; font-size: .74rem !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } /* Nome opzione */ body[data-theme="byte-pub"] .menuModalPanel .menuModalOptionName, body[data-theme="byte-pub"] .menuModalPanel label .menuModalOptionName, body[data-theme="byte-pub"] .menuModalPanel .menuModalOption .menuModalOptionName { color: var(--byte-text-soft) !important; font-family: var(--byte-font-body) !important; font-size: .84rem !important; font-weight: 600 !important; line-height: 1.35 !important; opacity: 1 !important; transform: none !important; text-shadow: none !important; } /* Prezzo extra */ body[data-theme="byte-pub"] .menuModalPanel .menuModalOptionPrice, body[data-theme="byte-pub"] .menuModalPanel .menuModalOptionExtra, body[data-theme="byte-pub"] .menuModalPanel .menuModalOptionDelta { color: var(--byte-cyan-soft) !important; font-family: var(--byte-font-ui) !important; font-size: .82rem !important; font-weight: 700 !important; opacity: .86 !important; } /* Riga singola opzione */ body[data-theme="byte-pub"] .menuModalPanel .menuModalOption, body[data-theme="byte-pub"] .menuModalPanel label.menuModalOption { margin: 6px !important; color: var(--byte-text-soft) !important; background: linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.012)) !important; border: 1px solid rgba(85,132,153,.18) !important; border-radius: var(--byte-r-sm) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; opacity: 1 !important; transform: none !important; } body[data-theme="byte-pub"] .menuModalPanel .menuModalOption:hover, body[data-theme="byte-pub"] .menuModalPanel label.menuModalOption:hover { background: rgba(16,217,255,.045) !important; border-color: rgba(16,217,255,.25) !important; } /* Checkbox / radio */ body[data-theme="byte-pub"] .menuModalPanel .menuModalOption input[type="checkbox"], body[data-theme="byte-pub"] .menuModalPanel .menuModalOption input[type="radio"] { accent-color: var(--byte-cyan) !important; } /* CHIP BASE dentro modal */ body[data-theme="byte-pub"] .menuModalPanel .chip, body[data-theme="byte-pub"] .menuModalPanel .menuModalMeta .chip { color: var(--byte-text-soft) !important; background: rgba(255,255,255,.026) !important; border: 1px solid rgba(89,135,155,.15) !important; border-radius: var(--byte-r-sm) !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; } /* FIX PRINCIPALE: sovrascrive il vecchio: .chip.is-active { background: rgba(255,255,255,.9)!important; ... } */ body[data-theme="byte-pub"] .menuModalPanel .chip.is-active, body[data-theme="byte-pub"] .menuModalPanel .menuModalMeta .chip.is-active, body[data-theme="byte-pub"] .menuModalPanel .menuModalGroup .chip.is-active, body[data-theme="byte-pub"] .menuModalPanel .menuModalOptionGroup .chip.is-active { color: #031017 !important; background: linear-gradient(180deg, var(--byte-cyan-soft), var(--byte-cyan-2)) !important; border-color: rgba(145,240,255,.48) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 6px 15px rgba(0,174,232,.18), 0 0 18px rgba(16,217,255,.12) !important; opacity: 1 !important; transform: none !important; } /* Icone interne chip attive */ body[data-theme="byte-pub"] .menuModalPanel .chip.is-active svg, body[data-theme="byte-pub"] .menuModalPanel .chip.is-active .menu-tag-icon { color: #031017 !important; --space-tag-icon-color: #031017 !important; } /* Stato selezionato opzione, se il renderer usa classi alternative */ body[data-theme="byte-pub"] .menuModalPanel .menuModalOption.is-active, body[data-theme="byte-pub"] .menuModalPanel .menuModalOption.is-selected, body[data-theme="byte-pub"] .menuModalPanel .menuModalOption.selected, body[data-theme="byte-pub"] .menuModalPanel label.menuModalOption:has(input:checked) { background: linear-gradient(90deg, rgba(16,217,255,.095), rgba(16,217,255,.025)) !important; border-color: rgba(16,217,255,.34) !important; box-shadow: inset 2px 0 0 var(--byte-cyan), 0 0 15px rgba(16,217,255,.055) !important; } body[data-theme="byte-pub"] .menuModalPanel label.menuModalOption:has(input:checked) .menuModalOptionName, body[data-theme="byte-pub"] .menuModalPanel .menuModalOption.is-active .menuModalOptionName, body[data-theme="byte-pub"] .menuModalPanel .menuModalOption.is-selected .menuModalOptionName { color: var(--byte-text) !important; } /* Elimina eventuali fondi chiari ereditati nei blocchi opzioni */ body[data-theme="byte-pub"] .menuModalPanel .menuModalGroup, body[data-theme="byte-pub"] .menuModalPanel .menuModalOptionGroup { background: linear-gradient(180deg, rgba(8,22,33,.82), rgba(3,12,19,.82)) !important; border: 1px solid rgba(16,217,255,.11) !important; border-radius: var(--byte-r-lg) !important; overflow: hidden !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important; } /* Separazione interna più pulita */ body[data-theme="byte-pub"] .menuModalPanel .menuModalGroupBody, body[data-theme="byte-pub"] .menuModalPanel .menuModalOptions { padding: 8px !important; } /* Titoli come "SALSE" più leggibili */ body[data-theme="byte-pub"] .menuModalPanel .menuModalGroupHead, body[data-theme="byte-pub"] .menuModalPanel .menuModalGroupTitle { text-shadow: 0 0 12px rgba(16,217,255,.07) !important; } /* Mobile */ @media (max-width: 640px) { body[data-theme="byte-pub"] .menuModalPanel .menuModalGroupHead { padding: 9px 11px !important; } body[data-theme="byte-pub"] .menuModalPanel .menuModalOptionName { font-size: .82rem !important; } body[data-theme="byte-pub"] .menuModalPanel .menuModalOptionPrice, body[data-theme="byte-pub"] .menuModalPanel .menuModalOptionExtra, body[data-theme="byte-pub"] .menuModalPanel .menuModalOptionDelta { font-size: .78rem !important; } } /* ========================================================= INTENTIONAL EXCLUSION ========================================================= Nessuna regola per: .aiWaiterFab .aiWaiterSheet .aiWaiter* Chiedi a SPACE mantiene il proprio design. ========================================================= */ /* ========================================================= SPACE CATEGORY TABS CONTRACT Shared animated indicator tokens. ========================================================= */ body[data-theme="byte-pub"] { --space-menu-tab-active-bg: linear-gradient(180deg, var(--byte-cyan-soft), var(--byte-cyan-2)); --space-menu-tab-active-color: #031017; --space-menu-tab-active-border: 1px solid rgba(147,241,255,.46); --space-menu-tab-active-shadow: 0 7px 17px rgba(0,174,232,.18), 0 0 16px rgba(16,217,255,.12); --space-menu-tab-active-radius: 999px; --space-menu-tab-active-transform: none; } /* SPACE THEME BUILDER:START */ /* SPACE Theme Builder · Byte Pub */ body[data-theme="byte-pub"] .menuTabsIndicatorSkin { border-radius: 8px !important; border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; } body[data-theme="byte-pub"] .tabRow, body[data-theme="byte-pub"] #tabs { padding-bottom: 9px !important; margin: 0px !important; padding: 9px !important; padding-right: 9px !important; padding-top: 9px !important; padding-left: 9px !important; } body[data-theme="byte-pub"] .dock, body[data-theme="byte-pub"] #dock { padding: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-left: 0px !important; padding-bottom: 0px !important; } body[data-theme="byte-pub"] .reservationFormStack { padding-right: 8px !important; padding-left: 8px !important; padding-bottom: 8px !important; padding-top: 8px !important; padding: 8px 8px !important; } /* SPACE THEME BUILDER:END */