/* =====================================================
ICStudio Digital Menu — STYLE 1 "MIDNIGHT NAVY + CRIMSON"
Paleta: #1C2440 · #242F49 · #384358 · #FFA586 · #B51A2B
===================================================== */
/* ===== SELF-HOSTED FONTS (local woff2, no Google Fonts network request) ===== */
/* DM Sans — variable font (weights 300–700) */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('../assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('../assets/fonts/dm-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — variable font (weights 300–700) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('../assets/fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ====== 0. ZAJEDNIČKA BAZA ====== */
:root {
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
--space-12: 3rem; --space-16: 4rem; --space-24: 6rem;
--space-32: 8rem;
--radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px;
--radius-xl: 32px; --radius-full: 9999px;
--container-xl: 1280px;
--container-pad: clamp(1rem, 5vw, 3rem);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 150ms; --dur-normal: 300ms; --dur-slow: 500ms;
/* === STYLE 1 PALETA (Midnight Navy + Crimson) === */
--s1-bg: #242F49;
--s1-bg-deep: #1C2440;
--s1-surface: #2E3A55;
--s1-surface-soft: rgba(255,255,255,0.06);
--s1-text: #EDF0FA;
--s1-text-soft: rgba(237,240,250,0.65);
--s1-btn: #4A7FBF;
--s1-accent: #7EAED9;
--s1-btn-text: #FFFFFF;
--s1-border: rgba(255,255,255,0.10);
--s1-divider: rgba(255,255,255,0.08);
--s1-font: 'DM Sans', 'Inter', system-ui, sans-serif;
/* === GLOBAL DESIGN TOKENS === */
--color-bg-glass: rgba(28,36,64,0.72);
--color-border-subtle: rgba(255,255,255,0.08);
--color-surface-glass: rgba(255,255,255,0.06);
--color-primary: #4F7EFF;
--color-success: #34D399;
--color-gold: #d4af37;
--shadow-glass: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
--shadow-elevated: 0 16px 48px rgba(0,0,0,0.45);
--blur-sm: blur(8px) saturate(150%);
--blur-md: blur(20px) saturate(180%);
--blur-lg: blur(40px) saturate(200%);
/* === ICON SYSTEM (Lucide + FontAwesome) ===
Gold-on-dark luxury palette. Override per-theme if needed. */
--s1-icon-xs: 14px;
--s1-icon-sm: 16px;
--s1-icon-md: 20px;
--s1-icon-lg: 24px;
--s1-icon-xl: 32px;
--s1-icon-color: var(--s1-text);
--s1-icon-muted: var(--s1-text-soft);
--s1-icon-accent: var(--s1-accent);
--s1-icon-gold: #d4af37; /* luxury gold — primary icon highlight */
--s1-icon-stroke: 1.5; /* Lucide SVG stroke-width */
}
/* ====== THEME OVERRIDES ====== */
/* DEFAULT THEME — explicit class; inherits all values from :root */
body.theme-default {
/* no variable overrides — uses :root values */
}
/* 1) EARTH THEME */
body.theme-earth {
--s1-bg: #122324;
--s1-bg-deep: #0C1617;
--s1-surface: #2F3A32;
--s1-text: #F3E9DD;
--s1-text-soft: #DB9F75;
--s1-btn: #804012;
--s1-btn-text: #F3E9DD;
--s1-accent: #DB9F75;
--s1-border: rgba(219, 159, 117, 0.15);
--s1-divider: rgba(219, 159, 117, 0.1);
--s1-surface-soft: rgba(47, 58, 50, 0.5);
}
/* 2) OCEAN THEME */
body.theme-ocean {
--s1-bg: #021024;
--s1-bg-deep: #010812;
--s1-surface: #052659;
--s1-text: #EFF8FF;
--s1-text-soft: #7DA0CA;
--s1-btn: #5483B3;
--s1-btn-text: #FFFFFF;
--s1-accent: #C1E8FF;
--s1-border: rgba(125, 160, 202, 0.15);
--s1-divider: rgba(125, 160, 202, 0.1);
--s1-surface-soft: rgba(5, 38, 89, 0.5);
}
/* 3) VIOLET DUSK THEME */
body.theme-violet {
--s1-bg: #3D2142;
--s1-bg-deep: #2A162D;
--s1-surface: #502D55;
--s1-text: #F8F4E9;
--s1-text-soft: #F6DBC0;
--s1-btn: #935073;
--s1-btn-text: #FFFFFF;
--s1-accent: #F6DBC0;
--s1-border: rgba(246, 219, 192, 0.15);
--s1-divider: rgba(246, 219, 192, 0.1);
--s1-surface-soft: rgba(80, 45, 85, 0.5);
}
/* 4) MARPLE THEME */
body.theme-marple {
--s1-bg: #351D24;
--s1-bg-deep: #211216;
--s1-surface: #CA2851;
--s1-text: #FFE3B3;
--s1-text-soft: #FFB173;
--s1-btn: #FF6766;
--s1-btn-text: #211216;
--s1-accent: #FFE3B3;
--s1-border: rgba(255, 177, 115, 0.2);
--s1-divider: rgba(255, 177, 115, 0.1);
--s1-surface-soft: rgba(202, 40, 81, 0.5);
}
/* 5) VISION PRO / SOFT LIGHT THEME (sa zadnjih slika) */
body.theme-soft-light {
--s1-bg: #F6F4F0;
--s1-bg-deep: #EBE6DD;
--s1-surface: #FFFFFF;
--s1-text: #2D3A40;
--s1-text-soft: #748A96;
--s1-btn: #085A48;
--s1-btn-text: #FFFFFF;
--s1-accent: #D97D54;
--s1-border: rgba(45, 58, 64, 0.1);
--s1-divider: rgba(45, 58, 64, 0.05);
--s1-surface-soft: rgba(255, 255, 255, 0.6);
}
/* ===== PREMIUM THEMES (6-10) ===== */
/* 6) ROYAL SMOKE — purple/violet luxury */
body.theme-royal-smoke {
--s1-bg: #2A1F38;
--s1-bg-deep: #1A1424;
--s1-surface: #3A2C4D;
--s1-text: #FFFFFF;
--s1-text-soft: #A89BBA;
--s1-btn: #6A0DAD;
--s1-btn-text: #FFFFFF;
--s1-accent: #9B59FF;
--s1-border: rgba(155, 89, 255, 0.15);
--s1-divider: rgba(155, 89, 255, 0.08);
--s1-surface-soft: rgba(155, 89, 255, 0.06);
}
/* 7) EMERALD ELEGANCE — deep green refined */
body.theme-emerald-elegance {
--s1-bg: #0F2A22;
--s1-bg-deep: #081F18;
--s1-surface: #1A3F33;
--s1-text: #FFFFFF;
--s1-text-soft: #8FB5A8;
--s1-btn: #00C896;
--s1-btn-text: #FFFFFF;
--s1-accent: #1FE8B2;
--s1-border: rgba(0, 200, 150, 0.18);
--s1-divider: rgba(0, 200, 150, 0.10);
--s1-surface-soft: rgba(0, 200, 150, 0.06);
}
/* 8) OBSIDIAN GLOW — purple-blue dark dramatic */
body.theme-obsidian-glow {
--s1-bg: #1A1240;
--s1-bg-deep: #0D0820;
--s1-surface: #261C57;
--s1-text: #FFFFFF;
--s1-text-soft: #9388B5;
--s1-btn: #3A0CA3;
--s1-btn-text: #FFFFFF;
--s1-accent: #5B2EE5;
--s1-border: rgba(91, 46, 229, 0.20);
--s1-divider: rgba(58, 12, 163, 0.12);
--s1-surface-soft: rgba(91, 46, 229, 0.07);
}
/* 9) NEON DUSK — cyan/teal electric */
body.theme-neon-dusk {
--s1-bg: #0A1F3D;
--s1-bg-deep: #051633;
--s1-surface: #143055;
--s1-text: #FFFFFF;
--s1-text-soft: #8FB5D4;
--s1-btn: #00D4FF;
--s1-btn-text: #020024;
--s1-accent: #5DEBFF;
--s1-border: rgba(0, 212, 255, 0.18);
--s1-divider: rgba(0, 212, 255, 0.10);
--s1-surface-soft: rgba(0, 212, 255, 0.07);
}
/* 10) DARK ELEGANT — navy refined minimalist */
body.theme-dark-elegant {
--s1-bg: #1F2535;
--s1-bg-deep: #141B2A;
--s1-surface: #2A3245;
--s1-text: #FFFFFF;
--s1-text-soft: #8898AB;
--s1-btn: #3D7EAB;
--s1-btn-text: #FFFFFF;
--s1-accent: #5BA0CC;
--s1-border: rgba(61, 126, 171, 0.18);
--s1-divider: rgba(61, 126, 171, 0.10);
--s1-surface-soft: rgba(61, 126, 171, 0.07);
}
/* Smooth transition when switching themes */
body, .s1-card, .s1-btn, .s1-btn-ghost, .s1-btn-danger,
.s1-input, .s1-select, .s1-textarea, .s1-modal, .s1-nav,
.s1-welcome__inner, .s1-cart-panel, .s1-drawer {
transition: background-color 320ms ease-out, color 320ms ease-out, border-color 320ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ====== RESET & BASE ====== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--s1-font);
background: var(--s1-bg);
color: var(--s1-text);
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--s1-font); }
/* ====== TYPOGRAPHY ====== */
.s1-title {
font-family: var(--s1-font);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.01em;
color: var(--s1-text);
}
.s1-title-lg {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
}
.s1-subtitle {
font-size: 0.875rem;
font-weight: 500;
color: var(--s1-text-soft);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.s1-body { font-size: 0.9375rem; color: var(--s1-text-soft); }
.s1-price {
font-weight: 700;
font-size: 1.125rem;
color: var(--s1-accent);
letter-spacing: -0.01em;
}
/* ====== LAYOUT ====== */
.container {
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* ====== CARD ====== */
.s1-card {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
-webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
overflow: hidden;
transition: transform var(--dur-normal) var(--ease-smooth),
box-shadow var(--dur-normal) var(--ease-smooth),
border-color var(--dur-normal);
}
.s1-card:hover {
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.26);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.45),
inset 0 2px 0 rgba(255, 255, 255, 0.26),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
/* ====== BUTTONS ====== */
.s1-btn {
background: var(--s1-btn);
color: var(--s1-btn-text);
font-family: var(--s1-font);
font-weight: 600;
font-size: 0.9375rem;
padding: var(--space-3) var(--space-6);
border: none;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: var(--space-2);
transition: transform var(--dur-normal) var(--ease-spring),
box-shadow var(--dur-normal) var(--ease-smooth);
}
.s1-btn:hover {
transform: scale(1.03);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.s1-btn:active { transform: scale(0.98); }
.s1-btn-ghost {
background: var(--s1-surface-soft);
color: var(--s1-text);
border: 1px solid var(--s1-border);
font-family: var(--s1-font);
font-weight: 500;
font-size: 0.875rem;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: var(--space-2);
transition: background var(--dur-fast) var(--ease-smooth);
}
.s1-btn-ghost:hover {
background: rgba(255,255,255,0.12);
}
.s1-btn-danger {
background: rgba(220,60,60,0.18);
color: #ffb3b3;
border: 1px solid rgba(220,60,60,0.25);
font-family: var(--s1-font);
font-weight: 500;
font-size: 0.875rem;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: var(--space-2);
transition: background var(--dur-fast);
}
.s1-btn-danger:hover { background: rgba(220,60,60,0.28); }
/* ====== NAV / HEADER ====== */
.s1-nav {
background: rgba(28, 36, 64, 0.72);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255,255,255,0.08);
position: sticky;
top: 0;
z-index: 100;
transition: box-shadow 0.25s ease;
}
.s1-nav--scrolled {
box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
.s1-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
padding: 0 var(--container-pad);
max-width: var(--container-xl);
margin: 0 auto;
}
.s1-nav__logo {
font-weight: 700;
font-size: 1.125rem;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: var(--space-2);
}
.s1-nav__logo-badge {
background: var(--s1-accent);
color: var(--s1-btn-text);
font-size: 0.6875rem;
font-weight: 700;
padding: 2px 8px;
border-radius: var(--radius-full);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.s1-nav__actions { display: flex; align-items: center; gap: var(--space-3); }
/* Mobile-first: hamburger visible by default, hidden on desktop */
#nav-hamburger { display: flex; }
/* Mobile-first: nav menu is a dropdown by default */
.s1-nav__menu {
display: flex;
position: absolute;
top: 56px;
left: 0;
right: 0;
background: rgba(28, 36, 64, 0.92);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255,255,255,0.08);
flex-direction: column;
padding: var(--space-4);
align-items: stretch;
gap: var(--space-3);
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: all 0.2s ease;
}
.s1-nav__menu.s1-open {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.s1-lang-switcher--nav { max-width: none; justify-content: center; }
/* Desktop: hamburger hidden, menu is an inline horizontal row */
@media (min-width: 901px) {
#nav-hamburger { display: none; }
.s1-nav__menu {
position: static;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: none;
flex-direction: row;
align-items: center;
padding: 0;
gap: var(--space-3);
box-shadow: none;
opacity: 1;
pointer-events: auto;
transform: none;
transition: none;
}
}
/* Cart button — circular pill */
.s1-cart-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.14);
color: var(--s1-text);
cursor: pointer;
transition: background 0.18s ease, transform 0.18s ease;
}
.s1-cart-btn:hover {
background: rgba(255,255,255,0.18);
transform: scale(1.06);
}
/* Badge — spring pop-in */
.s1-cart-btn__badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: var(--radius-full);
background: var(--s1-accent);
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
line-height: 18px;
text-align: center;
transform: scale(0);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
}
.s1-cart-btn__badge.s1-badge--visible {
transform: scale(1);
}
/* ====== CATEGORY TABS ====== */
.s1-tabs {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 10px var(--container-pad);
scrollbar-width: none;
-ms-overflow-style: none;
background: var(--s1-bg-deep);
border-bottom: 1px solid var(--s1-divider);
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.s1-tabs::-webkit-scrollbar { display: none; }
.s1-tab {
flex-shrink: 0;
height: 32px;
padding: 0 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 100px;
color: var(--s1-text-soft);
font-family: var(--s1-font);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: background var(--dur-fast), color var(--dur-fast),
border-color var(--dur-fast), box-shadow var(--dur-fast),
transform 120ms ease;
}
.s1-tab:hover {
background: rgba(255,255,255,0.12);
color: var(--s1-text);
border-color: rgba(255,255,255,0.18);
}
.s1-tab:active {
transform: scale(0.95);
}
.s1-tab.active {
background: var(--s1-btn);
color: var(--s1-btn-text);
border-color: transparent;
font-weight: 700;
box-shadow: 0 4px 14px rgba(229,62,62,0.38);
}
.s1-tab__icon {
font-size: 1rem;
line-height: 1;
display: inline-flex;
align-items: center;
}
/* ====== ITEM GRID ====== */
.s1-grid {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(2, 1fr);
padding: var(--space-4) var(--container-pad);
max-width: var(--container-xl);
margin: 0 auto;
position: relative;
z-index: 1;
}
@media (min-width: 768px) { .s1-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (min-width: 1200px){ .s1-grid { grid-template-columns: repeat(4, 1fr); } }
/* ====== MENU ITEM CARD — FOOD DELIVERY / LIQUID GLASS ====== */
.s1-item-card {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(28px) saturate(1.9) brightness(1.08);
-webkit-backdrop-filter: blur(28px) saturate(1.9) brightness(1.08);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 -1px 0 rgba(0, 0, 0, 0.18),
inset 1px 0 0 rgba(255, 255, 255, 0.08);
overflow: hidden;
display: block;
aspect-ratio: 3/4;
transition: transform var(--dur-normal) var(--ease-smooth),
box-shadow var(--dur-normal) var(--ease-smooth),
border-color var(--dur-normal);
position: relative;
}
/* Specular highlight — gornji rub kao staklo */
.s1-item-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
160deg,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.04) 40%,
transparent 65%
);
border-radius: inherit;
pointer-events: none;
z-index: 4;
}
/* Shimmer sweep na hover */
.s1-item-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 20%,
rgba(255, 255, 255, 0.10) 50%,
transparent 80%
);
transform: translateX(-120%) skewX(-12deg);
transition: transform 0.70s var(--ease-out-expo);
pointer-events: none;
z-index: 4;
}
.s1-item-card:hover {
transform: translateY(-5px);
border-color: rgba(255, 255, 255, 0.30);
box-shadow:
0 20px 56px rgba(0, 0, 0, 0.50),
inset 0 2px 0 rgba(255, 255, 255, 0.32),
inset 0 -1px 0 rgba(0, 0, 0, 0.18),
inset 1px 0 0 rgba(255, 255, 255, 0.12);
}
.s1-item-card:hover::after {
transform: translateX(180%) skewX(-12deg);
}
.s1-item-card.unavailable { opacity: 0.45; pointer-events: none; }
.s1-item-card__img-wrap {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--s1-bg-deep);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 16px 12px 50px;
}
/* Jak fade od dna slike prema tekstu */
.s1-item-card__img-wrap::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 65%;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.72) 100%
);
pointer-events: none;
z-index: 2;
}
.s1-item-card__img {
width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
object-position: center;
margin: 0 auto;
transition: transform var(--dur-slow) var(--ease-smooth);
}
.s1-item-card:hover .s1-item-card__img { transform: scale(1.04); }
/* zoom-out klasa — za pizze i sl. */
.s1-item-card__img--zoom-out { transform: scale(0.90); transform-origin: center center; }
.s1-item-card:hover .s1-item-card__img--zoom-out { transform: scale(0.93); }
.s1-item-card__no-img {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
background: linear-gradient(145deg, var(--s1-bg-deep) 0%, #1e2c4a 100%);
}
.s1-item-card__featured {
position: absolute;
top: var(--space-3);
left: var(--space-3);
background: var(--s1-accent);
color: var(--s1-btn-text);
font-size: 0.6875rem;
font-weight: 700;
padding: 3px 10px;
border-radius: var(--radius-full);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.s1-item-card__body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
padding: var(--space-2) var(--space-3) var(--space-3);
display: flex;
flex-direction: column;
gap: 2px;
}
.s1-item-card__name {
font-weight: 700;
font-size: 0.875rem;
color: #ffffff;
line-height: 1.25;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.s1-item-card__desc {
font-size: 0.75rem;
color: rgba(237, 240, 250, 0.75);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.s1-item-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--space-1);
}
.s1-item-card__allergens {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.s1-allergen-tag {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
background: rgba(255,255,255,0.08);
color: var(--s1-text-soft);
padding: 2px 6px;
border-radius: var(--radius-sm);
border: 1px solid var(--s1-border);
}
/* ====== SECTION HEADER ====== */
.s1-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-6) var(--container-pad) var(--space-2);
max-width: var(--container-xl);
margin: 0 auto;
}
.s1-section-divider {
border: none;
border-top: 1px solid var(--s1-divider);
margin: var(--space-4) var(--container-pad) 0;
}
/* ====== BADGE / STATUS ====== */
.s1-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.75rem;
font-weight: 600;
padding: 4px 10px;
border-radius: var(--radius-full);
}
.s1-badge--active { background: rgba(100,200,140,0.18); color: #7fcfa0; border: 1px solid rgba(100,200,140,0.25); }
.s1-badge--featured { background: rgba(212,175,55,0.15); color: #d4af37; border: 1px solid rgba(212,175,55,0.30); }
.s1-badge--inactive { background: rgba(150,150,150,0.15); color: rgba(200,200,200,0.7); border: 1px solid rgba(150,150,150,0.2); }
.s1-badge--info { background: var(--s1-surface-soft); color: var(--s1-text-soft); border: 1px solid var(--s1-border); }
.s1-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.s1-dot--green { background: #7fcfa0; }
.s1-dot--red { background: #cf7f7f; }
.s1-dot--pulse { animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
/* ====== TOAST / NOTIFICATION ====== */
.s1-toast-container {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
z-index: 9999;
pointer-events: none;
}
.s1-toast {
background: var(--s1-bg-deep);
color: var(--s1-text);
border: 1px solid var(--s1-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-size: 0.875rem;
font-weight: 500;
pointer-events: auto;
min-width: 240px;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
animation: toast-in var(--dur-normal) var(--ease-spring);
}
.s1-toast--success { border-left: 3px solid #7fcfa0; }
.s1-toast--error { border-left: 3px solid #cf7f7f; }
.s1-toast--info { border-left: 3px solid var(--s1-accent); }
@keyframes toast-in {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
/* ====== MODAL ====== */
.s1-modal-overlay {
position: fixed;
inset: 0;
background: rgba(10, 14, 25, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 500;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
animation: fadeIn var(--dur-normal) var(--ease-smooth);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.s1-modal {
background: rgba(20,28,50,0.92);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 24px 24px 0 0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 -20px 60px -10px rgba(0,0,0,0.6);
padding: var(--space-8);
width: 100%;
max-width: 520px;
max-height: 90vh;
overflow-y: auto;
animation: s1ModalIn 280ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes s1ModalIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.s1-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-6);
}
.s1-modal__close {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.10);
color: var(--s1-text-soft);
width: 36px; height: 36px;
flex-shrink: 0;
border-radius: 50%;
display: grid; place-items: center;
cursor: pointer;
transition: background var(--dur-fast), color var(--dur-fast);
}
.s1-modal__close:hover { background: rgba(255,255,255,0.12); color: var(--s1-text); }
/* ====== FORM ELEMENTS ====== */
.s1-form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.s1-form-group + .s1-form-group { margin-top: var(--space-4); }
.s1-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--s1-text-soft);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.s1-input, .s1-select, .s1-textarea {
background: var(--s1-surface);
color: var(--s1-text);
border: 1px solid var(--s1-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-family: var(--s1-font);
font-size: 0.9375rem;
width: 100%;
outline: none;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.s1-input::placeholder, .s1-textarea::placeholder { color: var(--s1-text-soft); }
.s1-input:focus, .s1-select:focus, .s1-textarea:focus {
border-color: var(--s1-accent);
box-shadow: 0 0 0 3px rgba(168,197,180,0.18);
}
.s1-select option { background: var(--s1-bg-deep); }
.s1-textarea { resize: vertical; min-height: 80px; }
.s1-toggle {
position: relative; display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer;
}
.s1-toggle input { display: none; }
.s1-toggle__track {
width: 44px; height: 24px;
background: rgba(255,255,255,0.12);
border-radius: var(--radius-full);
border: 1px solid var(--s1-border);
position: relative;
transition: background var(--dur-normal);
}
.s1-toggle__thumb {
position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px;
background: var(--s1-text-soft);
border-radius: 50%;
transition: transform var(--dur-normal) var(--ease-spring), background var(--dur-normal);
}
.s1-toggle input:checked ~ .s1-toggle__track { background: var(--s1-accent); border-color: var(--s1-accent); }
.s1-toggle input:checked ~ .s1-toggle__track .s1-toggle__thumb {
transform: translateX(20px);
background: var(--s1-btn-text);
}
.s1-toggle__label { font-size: 0.9375rem; font-weight: 500; color: var(--s1-text); }
/* ====== TABLE ====== */
.s1-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--s1-border); }
.s1-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.s1-table th {
background: var(--s1-bg-deep);
color: var(--s1-text-soft);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--s1-divider);
}
.s1-table td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--s1-divider);
color: var(--s1-text);
vertical-align: middle;
}
.s1-table tr:last-child td { border-bottom: none; }
.s1-table tr:hover td { background: var(--s1-surface-soft); }
/* ====== SIDEBAR ====== */
.s1-sidebar {
width: 260px;
flex-shrink: 0;
background: var(--s1-bg-deep);
border-right: 1px solid var(--s1-divider);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.s1-sidebar__logo {
padding: var(--space-6) var(--space-6) var(--space-4);
font-weight: 700;
font-size: 1.125rem;
letter-spacing: -0.01em;
border-bottom: 1px solid var(--s1-divider);
}
.s1-sidebar__nav { padding: var(--space-4) var(--space-3); flex: 1; }
.s1-sidebar__nav-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-3);
border-radius: var(--radius-md);
color: var(--s1-text-soft);
font-weight: 500;
font-size: 0.9375rem;
cursor: pointer;
transition: all var(--dur-fast) var(--ease-smooth);
border: none;
background: none;
width: 100%;
text-align: left;
text-decoration: none;
}
.s1-sidebar__nav-item:hover { background: var(--s1-surface-soft); color: var(--s1-text); }
.s1-sidebar__nav-item.active { background: var(--s1-surface-soft); color: var(--s1-text); font-weight: 600; }
.s1-sidebar__nav-item .nav-icon { font-size: 1.125rem; width: 24px; text-align: center; }
.s1-sidebar__footer {
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--s1-divider);
font-size: 0.75rem;
color: var(--s1-text-soft);
}
/* ====== ADMIN LAYOUT ====== */
.admin-layout { display: flex; min-height: 100vh; }
.admin-content {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.admin-topbar {
background: var(--s1-bg-deep);
border-bottom: 1px solid var(--s1-divider);
padding: 0 var(--space-4);
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 10;
}
.admin-main {
padding: var(--space-4);
flex: 1;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
/* ====== STAT CARDS ====== */
.s1-stat-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
.s1-stat-card {
background: var(--s1-surface);
border: 1px solid var(--s1-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.s1-stat-card__icon { font-size: 1.5rem; }
.s1-stat-card__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--s1-text-soft); }
.s1-stat-card__value { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--s1-text); line-height: 1; }
.s1-stat-card__sub { font-size: 0.8125rem; color: var(--s1-text-soft); }
/* ====== ENTRANCE ANIMATIONS ====== */
.s1-enter {
animation: s1-enter-anim var(--dur-slow) var(--ease-out-expo) both;
}
.s1-stagger-1 { animation-delay: 60ms; }
.s1-stagger-2 { animation-delay: 120ms; }
.s1-stagger-3 { animation-delay: 180ms; }
.s1-stagger-4 { animation-delay: 240ms; }
.s1-stagger-5 { animation-delay: 300ms; }
@keyframes s1-enter-anim {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ====== SEARCH BAR ====== */
.s1-search {
position: relative;
max-width: 400px;
}
.s1-search__icon {
position: absolute;
left: var(--space-4);
top: 50%;
transform: translateY(-50%);
color: var(--s1-text-soft);
font-size: 1rem;
pointer-events: none;
}
.s1-search input {
padding-left: 2.75rem;
}
/* ====== EMPTY STATE ====== */
.s1-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding: var(--space-16) var(--space-4);
text-align: center;
}
.s1-empty__icon { font-size: 3.5rem; opacity: 0.5; }
.s1-empty__title { font-weight: 600; font-size: 1.125rem; color: var(--s1-text); }
.s1-empty__sub { color: var(--s1-text-soft); font-size: 0.9375rem; }
/* ====== SCROLLBAR — globally hidden ====== */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }
/* ====== UTILITY ====== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.w-full { width: 100%; }
.text-center { text-align: center; }
.hidden { display: none !important; }
/* ====== RESPONSIVE SIDEBAR ====== */
/* Note: sidebar visibility and off-canvas behaviour is controlled by Block 9 below */
@media (min-width: 769px) {
.admin-main { padding: clamp(1.5rem, 3vw, 2.5rem); }
.admin-topbar { padding: 0 var(--space-8); }
.s1-stat-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
/* ====== IMAGE ITEM THUMB ====== */
.s1-thumb {
width: 41px;
height: 41px;
border-radius: var(--radius-sm);
object-fit: contain;
object-position: center;
background: transparent;
flex-shrink: 0;
}
.s1-thumb-placeholder {
width: 41px;
height: 41px;
border-radius: var(--radius-sm);
background: transparent;
display: grid;
place-items: center;
font-size: 1.25rem;
flex-shrink: 0;
}
/* ====== TYPE FILTER BAR ====== */
.s1-type-bar {
display: flex;
gap: var(--space-2);
padding: var(--space-4) var(--container-pad) 0;
max-width: var(--container-xl);
margin: 0 auto;
}
.s1-type-btn {
background: var(--s1-surface-soft);
border: 1px solid var(--s1-border);
color: var(--s1-text-soft);
font-family: var(--s1-font);
font-weight: 600;
font-size: 0.875rem;
padding: var(--space-2) var(--space-5);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--dur-fast);
}
.s1-type-btn.active, .s1-type-btn:hover {
background: var(--s1-btn);
color: var(--s1-btn-text);
border-color: var(--s1-btn);
}
/* ====== CATEGORY HERO ====== */
.s1-cat-hero {
background: #252b42;
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
display: flex;
flex-wrap: nowrap;
align-items: center;
padding: 8px 12px;
min-height: unset;
max-height: none;
max-width: var(--container-xl);
margin: 0 auto 12px;
box-sizing: border-box;
gap: 10px;
opacity: 0;
transform: translateY(8px);
transition: opacity 280ms ease-out, transform 280ms ease-out;
}
.s1-cat-hero.s1-cat-hero--visible {
opacity: 1;
transform: translateY(0);
}
.s1-cat-hero__icon-wrap {
width: 72px;
height: 72px;
min-width: 72px;
border-radius: 18px;
background: rgba(255,138,101,0.12);
border: 1px solid rgba(255,138,101,0.18);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #ff8a65;
transition: transform 200ms ease-out;
}
.s1-cat-hero__icon-wrap svg {
width: 36px;
height: 36px;
}
@media (hover: hover) {
.s1-cat-hero__icon-wrap:hover { transform: scale(1.03); }
}
.s1-cat-hero__info {
flex: 1;
min-width: 0;
padding-left: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.s1-cat-hero__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ff8a65;
margin: 0;
}
.s1-cat-hero__title {
font-size: 28px;
font-weight: 700;
color: #ffffff;
line-height: 1.1;
margin: 4px 0 0;
}
.s1-cat-hero__sub {
font-size: 14px;
font-weight: 400;
color: #8a92a8;
margin: 6px 0 0;
max-width: 480px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.s1-cat-hero__right {
display: flex;
align-items: center;
flex-shrink: 0;
padding-left: 20px;
}
.s1-cat-hero__counter {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255,255,255,0.06);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
}
.s1-cat-hero__counter svg {
width: 14px;
height: 14px;
color: #8a92a8;
flex-shrink: 0;
}
/* Mobile-first cat hero — compact inline strip */
.s1-cat-hero__icon-wrap { width: 38px; height: 38px; min-width: 38px; border-radius: 10px; }
.s1-cat-hero__icon-wrap svg { width: 19px; height: 19px; }
.s1-cat-hero__right { padding-left: 0; margin-left: auto; }
.s1-cat-hero__info { width: auto; flex: 1; padding-left: 0; margin-top: 0; min-width: 0; }
.s1-cat-hero__title { font-size: 16px; margin: 0; }
.s1-cat-hero__label { font-size: 9px; }
.s1-cat-hero__sub { display: none; }
@media (min-width: 768px) {
.s1-cat-hero { padding: 24px 28px; max-height: 180px; min-height: 140px; border-radius: 18px; gap: unset; margin-bottom: 24px; }
.s1-cat-hero__icon-wrap { width: 72px; height: 72px; min-width: 72px; border-radius: 18px; }
.s1-cat-hero__icon-wrap svg { width: 36px; height: 36px; }
.s1-cat-hero__right { padding-left: 20px; margin-left: unset; }
.s1-cat-hero__info { width: auto; padding-left: 20px; margin-top: 0; }
.s1-cat-hero__title { font-size: 28px; margin: 4px 0 0; }
.s1-cat-hero__label { font-size: 11px; }
.s1-cat-hero__sub { display: block; font-size: 14px; }
}
/* ====== EU ALLERGEN PANEL (unified legend + filter) ====== */
.s1-apanel {
max-width: var(--container-xl);
margin: 6px auto 0;
padding: 0 12px;
}
.s1-apanel__glass {
background: rgba(37, 43, 66, 0.72);
backdrop-filter: blur(24px) saturate(1.4);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
border-radius: 14px;
overflow: hidden;
}
.s1-apanel__bar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: none;
border: none;
padding: 12px 14px;
cursor: pointer;
text-align: left;
transition: background 180ms ease;
}
.s1-apanel__bar:hover { background: rgba(255, 255, 255, 0.04); }
.s1-apanel__bar-left { display: flex; align-items: center; gap: 8px; }
.s1-apanel__bar-icon { color: #ff8a65; flex-shrink: 0; }
.s1-apanel__bar-title {
font-family: var(--s1-font);
font-size: 13px;
font-weight: 500;
color: #ffffff;
}
.s1-apanel__bar-right { display: flex; align-items: center; gap: 8px; }
.s1-apanel__bar-badge {
padding: 4px 10px;
background: color-mix(in srgb, var(--s1-btn) 15%, transparent);
border-radius: 999px;
font-family: var(--s1-font);
font-size: 11px;
font-weight: 600;
color: var(--s1-btn);
white-space: nowrap;
}
.s1-apanel__bar-chevron {
color: #8a92a8;
transition: transform 280ms ease-out;
flex-shrink: 0;
}
.s1-apanel__bar[aria-expanded="true"] .s1-apanel__bar-chevron { transform: rotate(180deg); }
/* Expand/collapse via grid-template-rows trick */
.s1-apanel__body-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 320ms ease-out;
}
.s1-apanel__body-wrap.open { grid-template-rows: 1fr; }
.s1-apanel__body-inner {
overflow: hidden;
opacity: 0;
transition: opacity 200ms ease-out;
}
.s1-apanel__body-wrap.open .s1-apanel__body-inner {
opacity: 1;
transition-delay: 80ms;
}
/* ── Legend section ── */
.s1-apanel__legend-section { padding: 14px 14px 10px; }
.s1-apanel__section-label {
font-family: var(--s1-font);
font-size: 10px;
letter-spacing: 1.2px;
font-weight: 600;
color: #ff8a65;
text-transform: uppercase;
margin: 0 0 10px;
}
.s1-apanel__legend-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.s1-apanel__legend-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 9px 5px 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 999px;
}
.s1-apanel__legend-pill__emoji { font-size: 13px; line-height: 1; }
.s1-apanel__legend-pill__num { font-family: var(--s1-font); font-size: 10px; color: #8a92a8; }
.s1-apanel__legend-pill__name { font-family: var(--s1-font); font-size: 12px; font-weight: 500; color: #ffffff; }
/* ── Divider ── */
.s1-apanel__divider { height: 1px; background: rgba(255, 255, 255, 0.05); margin: 0 18px; }
/* ── Filter section ── */
.s1-apanel__filter-section { padding: 12px 14px 14px; }
.s1-apanel__filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; flex-wrap: wrap; gap: 6px; }
.s1-apanel__filter-title {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--s1-font);
font-size: 13px;
font-weight: 600;
color: #ffffff;
}
.s1-apanel__filter-title svg { color: #8a92a8; }
.s1-apanel__filter-reset {
background: none;
border: none;
font-family: var(--s1-font);
font-size: 12px;
font-weight: 500;
color: #8a92a8;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: color 150ms ease;
}
.s1-apanel__filter-reset:hover { color: #ffffff; }
.s1-apanel__filter-hint { font-family: var(--s1-font); font-size: 11px; color: #8a92a8; margin: 0 0 12px; }
.s1-apanel__filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.s1-apanel-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 10px 6px 7px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 999px;
font-family: var(--s1-font);
font-size: 12px;
font-weight: 500;
color: #ffffff;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
white-space: nowrap;
}
.s1-apanel-chip:hover { background: rgba(255, 255, 255, 0.09); }
.s1-apanel-chip.active { background: color-mix(in srgb, var(--s1-btn) 12%, transparent); border-color: var(--s1-btn); }
.s1-apanel-chip:active { transform: scale(0.96); }
.s1-apanel__filter-hidden-count { font-family: var(--s1-font); font-size: 11px; color: #8a92a8; margin: 10px 0 0; }
/* Backward-compat: allergen num badge still used in card allergen overlays */
.s1-allergen-num--badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
font-size: 0.575rem;
font-weight: 700;
color: var(--s1-text);
cursor: help;
transition: background 0.15s;
line-height: 1;
}
.s1-allergen-num--badge:hover { background: rgba(255,255,255,0.28); }
/* ── ALLERGEN ICON OVERLAY ON CARD ── */
.s1-item-card__allerg-row {
position: absolute;
bottom: 78px;
left: 8px;
z-index: 5;
display: inline-flex;
width: fit-content;
gap: 3px;
align-items: center;
cursor: pointer;
border: none;
background: none;
padding: 2px;
border-radius: 9px;
}
.s1-item-card__allerg-row:focus-visible {
outline: 2px solid #ff8a65;
outline-offset: 2px;
}
.s1-allerg-icon {
width: 22px;
height: 22px;
border-radius: 7px;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
user-select: none;
}
.s1-allerg-icon__img {
width: 14px;
height: 14px;
object-fit: contain;
filter: invert(1);
display: block;
}
.s1-allerg-more {
width: 22px;
height: 22px;
border-radius: 7px;
background: rgba(0,0,0,0.65);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
color: #8a92a8;
user-select: none;
}
/* ── ALLERGEN BOTTOM SHEET ── */
.s1-asheet-overlay {
position: fixed;
inset: 0;
background: rgba(10, 14, 25, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 600;
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease-out;
}
.s1-asheet-overlay.show { opacity: 1; pointer-events: all; }
.s1-asheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 601;
background: rgba(26, 31, 53, 0.78);
backdrop-filter: blur(28px) saturate(1.5);
-webkit-backdrop-filter: blur(28px) saturate(1.5);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 -20px 60px -10px rgba(0, 0, 0, 0.5);
border-radius: 22px 22px 0 0;
max-height: 70vh;
overflow-y: auto;
transform: translateY(100%);
transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.s1-asheet.show { transform: translateY(0); }
.s1-asheet__handle {
width: 36px;
height: 4px;
background: rgba(255,255,255,0.2);
border-radius: 2px;
margin: 10px auto 14px;
}
.s1-asheet__header { padding: 0 18px 12px; }
.s1-asheet__title { font-size: 16px; font-weight: 700; color: #ffffff; margin: 0; }
.s1-asheet__sub { font-size: 12px; color: #8a92a8; margin: 3px 0 0; }
.s1-asheet__list { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 18px; }
.s1-asheet__row {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 12px;
}
.s1-asheet__emoji-wrap {
width: 36px;
height: 36px;
flex-shrink: 0;
background: rgba(255,255,255,0.05);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.s1-asheet__icon-img {
width: 22px;
height: 22px;
object-fit: contain;
filter: invert(1);
display: block;
}
.s1-asheet__info { flex: 1; min-width: 0; }
.s1-asheet__name { display: block; font-size: 13px; font-weight: 600; color: #ffffff; }
.s1-asheet__code { display: block; font-size: 11px; color: #8a92a8; margin-top: 2px; }
.s1-asheet__footer { padding: 8px 18px 16px; }
.s1-asheet__close-btn {
width: 100%;
background: transparent;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 12px;
color: #ffffff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: var(--s1-font);
transition: background var(--dur-fast);
}
.s1-asheet__close-btn:hover { background: rgba(255,255,255,0.04); }
/* ====== WELCOME SCREEN ====== */
.s1-welcome {
position: fixed;
inset: 0;
z-index: 9999;
background: linear-gradient(150deg, #0f1528 0%, #1C2440 40%, #242F49 75%, #2a1520 100%);
box-shadow: inset 0 0 120px rgba(181,26,43,0.18);
display: flex;
align-items: flex-start;
justify-content: center;
overflow-x: hidden;
overflow-y: auto;
cursor: pointer;
}
.s1-welcome--out {
animation: welcomeOut 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.s1-welcome--gone {
display: none !important;
}
@keyframes welcomeOut {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1.04); }
}
/* Decorative orbs */
.s1-welcome__orb {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,0.04);
animation: orbFloat 8s ease-in-out infinite;
}
.s1-welcome__orb--1 {
width: 400px; height: 400px;
top: -120px; right: -100px;
animation-delay: 0s;
background: rgba(181,26,43,0.12);
}
.s1-welcome__orb--2 {
width: 300px; height: 300px;
bottom: -80px; left: -60px;
animation-delay: -3s;
background: rgba(255,165,134,0.07);
}
.s1-welcome__orb--3 {
width: 160px; height: 160px;
top: 40%; left: 12%;
animation-delay: -5s;
background: rgba(255,255,255,0.03);
}
@keyframes orbFloat {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-24px) scale(1.04); }
}
/* Content */
.s1-welcome__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-8) var(--space-6);
max-width: 420px;
width: 100%;
margin: auto;
animation: welcomeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes welcomeIn {
from { opacity: 0; transform: translateY(28px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.s1-welcome__logo-wrap {
width: 96px;
height: 96px;
border-radius: 28px;
background: rgba(255,255,255,0.1);
border: 1.5px solid rgba(255,255,255,0.22);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-6);
backdrop-filter: blur(8px);
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.s1-welcome__logo-icon {
font-size: 2.75rem;
line-height: 1;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.s1-welcome__text { margin-bottom: var(--space-6); }
.s1-welcome__subtitle {
font-family: var(--s1-font);
font-size: 0.8125rem;
font-weight: 500;
color: rgba(255,255,255,0.6);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: var(--space-2);
}
.s1-welcome__name {
font-family: var(--s1-font);
font-size: clamp(1.75rem, 7vw, 2.5rem);
font-weight: 700;
color: #fff;
line-height: 1.1;
margin: 0 0 var(--space-2);
text-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.s1-welcome__tagline {
font-family: var(--s1-font);
font-size: 0.9375rem;
font-weight: 400;
color: rgba(255,255,255,0.65);
margin: 0;
}
/* Stats row */
.s1-welcome__stats {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius-full);
padding: var(--space-3) var(--space-6);
}
.s1-welcome__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.s1-welcome__stat-num {
font-family: var(--s1-font);
font-size: 1.25rem;
font-weight: 700;
color: #fff;
line-height: 1;
}
.s1-welcome__stat-lbl {
font-size: 0.6875rem;
font-weight: 500;
color: rgba(255,255,255,0.55);
letter-spacing: 0.04em;
}
.s1-welcome__stat-div {
width: 1px;
height: 28px;
background: rgba(255,255,255,0.2);
}
/* CTA button */
.s1-welcome__cta {
display: inline-flex;
align-items: center;
gap: var(--space-3);
background: var(--s1-btn);
color: var(--s1-btn-text);
font-family: var(--s1-font);
font-size: 1rem;
font-weight: 700;
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-full);
padding: var(--space-4) var(--space-8);
cursor: pointer;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 28px color-mix(in srgb, var(--s1-btn) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.15);
transition: transform 0.15s, box-shadow 0.15s, background-color 0.32s;
letter-spacing: 0.01em;
margin-bottom: var(--space-4);
}
.s1-welcome__cta:hover,
.s1-welcome__cta:active {
transform: scale(1.04);
box-shadow: 0 8px 36px color-mix(in srgb, var(--s1-btn) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.2);
}
.s1-welcome__cta-arrow {
display: inline-flex;
align-items: center;
transition: transform 0.2s ease;
}
.s1-welcome__cta:hover .s1-welcome__cta-arrow {
transform: translateX(4px);
}
.s1-welcome__hint {
font-family: var(--s1-font);
font-size: 0.75rem;
color: rgba(255,255,255,0.5);
margin: 0;
letter-spacing: 0.05em;
animation: s1HintPulse 2.5s ease-in-out infinite;
}
@keyframes s1HintPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.8; }
}
/* ──────────────────────────────────────────────────────
TIME-OF-DAY WELCOME — illustration + period layers
────────────────────────────────────────────────────── */
/* CSS custom property for period accent — set by JS */
.s1-welcome { --s1-period-accent: #ff8a65; }
/* Background illustration */
.s1-welcome__bg-illus {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: brightness(0.35) saturate(1.1);
z-index: 0;
opacity: 0;
transition: opacity 0.6s ease;
}
/* Period accent color tint (radial glow — set inline by JS) */
.s1-welcome__period-tint {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
transition: background 0.8s ease-out;
}
/* Darkening vignette on top of illustration */
.s1-welcome__vignette {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(to bottom, rgba(13,17,36,0.65) 0%, transparent 35%, transparent 60%, rgba(13,17,36,0.85) 100%),
radial-gradient(ellipse at center, transparent 30%, rgba(13,17,36,0.45) 100%);
}
/* Film grain texture */
.s1-welcome__grain {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
/* Bump orb z-index above new background layers */
.s1-welcome__orb { z-index: 5; }
/* Bump inner content z-index above all decorative layers */
.s1-welcome__inner { z-index: 10; }
/* Period badge (small-caps label above greeting, colored with accent) */
.s1-welcome__period-badge {
display: inline-block;
font-family: var(--s1-font);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--s1-period-accent, #ff8a65);
margin: 0 0 var(--space-2);
min-height: 1em;
padding: 4px 12px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 100px;
transition: color 0.8s ease-out;
}
/* ── BREAKFAST: slow light-ray sweep */
.s1-welcome__light-ray {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: 0;
background: conic-gradient(
from 210deg at 75% -5%,
transparent 0deg,
rgba(255,183,77,0.07) 18deg,
transparent 36deg
);
transform-origin: 75% -5%;
transition: opacity 1s ease;
}
.s1-welcome--breakfast .s1-welcome__light-ray {
opacity: 1;
animation: s1WelcomeLightRay 20s ease-in-out infinite;
}
@keyframes s1WelcomeLightRay {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(10deg); }
}
/* ── DINNER: candle-like warm glow flicker */
.s1-welcome__candle-glow {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: 0;
background: radial-gradient(ellipse 70% 50% at 50% 85%, rgba(200,74,74,0.18) 0%, transparent 70%);
transition: opacity 1s ease;
}
.s1-welcome--dinner .s1-welcome__candle-glow {
animation: s1WelcomeCandleFlicker 4s ease-in-out infinite;
}
@keyframes s1WelcomeCandleFlicker {
0%,100% { opacity: 0.85; }
20% { opacity: 1; }
45% { opacity: 0.7; }
70% { opacity: 0.95; }
85% { opacity: 0.78; }
}
/* ── CLOSED: lower brightness + heightened grain + ambient glow */
.s1-welcome--closed .s1-welcome__bg-illus {
filter: brightness(0.32) saturate(1.1);
}
.s1-welcome--closed .s1-welcome__grain {
opacity: 0.06;
}
.s1-welcome--closed .s1-welcome__candle-glow {
background: radial-gradient(ellipse 60% 45% at 50% 88%, rgba(90,96,128,0.22) 0%, transparent 70%);
animation: s1CandleFlickerClosed 4s ease-in-out infinite;
}
@keyframes s1CandleFlickerClosed {
0%,100% { opacity: 0.70; }
30% { opacity: 0.90; }
55% { opacity: 0.55; }
75% { opacity: 0.80; }
}
.s1-welcome--closed .s1-welcome__tagline {
color: #ff8a65;
font-size: 1.0625rem;
font-weight: 500;
}
/* ── LATE NIGHT: drifting bokeh circles */
.s1-welcome__bokeh {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
overflow: hidden;
}
.s1-welcome__bokeh-dot {
position: absolute;
border-radius: 50%;
filter: blur(12px);
opacity: 0;
transition: opacity 1s ease;
}
.s1-welcome--lateNight .s1-welcome__bokeh-dot { opacity: 1; }
.s1-welcome__bokeh-dot--1 {
width: 90px; height: 90px;
background: rgba(123,142,201,0.25);
top: 18%; left: 12%;
animation: s1BokehDrift1 28s linear infinite;
}
.s1-welcome__bokeh-dot--2 {
width: 60px; height: 60px;
background: rgba(100,120,200,0.2);
top: 55%; right: 10%;
animation: s1BokehDrift2 35s linear infinite;
}
.s1-welcome__bokeh-dot--3 {
width: 110px; height: 110px;
background: rgba(80,100,180,0.15);
bottom: 20%; left: 30%;
animation: s1BokehDrift3 42s linear infinite;
}
.s1-welcome__bokeh-dot--4 {
width: 50px; height: 50px;
background: rgba(140,160,220,0.2);
top: 35%; right: 25%;
animation: s1BokehDrift4 22s linear infinite;
}
@keyframes s1BokehDrift1 {
0% { transform: translate(0,0); }
25% { transform: translate(60px,80px); }
50% { transform: translate(120px,-30px); }
75% { transform: translate(40px,100px); }
100% { transform: translate(0,0); }
}
@keyframes s1BokehDrift2 {
0% { transform: translate(0,0); }
33% { transform: translate(-80px,-60px); }
66% { transform: translate(-30px,90px); }
100% { transform: translate(0,0); }
}
@keyframes s1BokehDrift3 {
0% { transform: translate(0,0); }
20% { transform: translate(70px,-40px); }
60% { transform: translate(-50px,-80px); }
80% { transform: translate(30px,60px); }
100% { transform: translate(0,0); }
}
@keyframes s1BokehDrift4 {
0% { transform: translate(0,0); }
50% { transform: translate(-100px,70px); }
100% { transform: translate(0,0); }
}
/* ──────────────────────────────────────────────────────
FEATURED SUGGESTIONS CARD
────────────────────────────────────────────────────── */
.s1-welcome__featured {
width: 100%;
background: rgba(37,43,66,0.55);
backdrop-filter: blur(28px) saturate(1.4);
-webkit-backdrop-filter: blur(28px) saturate(1.4);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px;
padding: 14px 16px;
margin-bottom: var(--space-5);
box-sizing: border-box;
}
.s1-welcome__featured-label {
font-family: var(--s1-font);
font-size: 0.625rem;
letter-spacing: 1.2px;
font-weight: 600;
text-transform: uppercase;
color: var(--s1-period-accent, #ff8a65);
margin: 0 0 8px;
transition: color 0.8s ease-out;
}
.s1-welcome__featured-row {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 2px;
}
.s1-welcome__featured-row::-webkit-scrollbar { display: none; }
.s1-welcome__featured-item {
flex-shrink: 0;
width: 76px;
border-radius: 12px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
cursor: pointer;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 4px 6px;
transition: transform 0.15s, background 0.15s;
gap: 3px;
font-family: var(--s1-font);
color: inherit;
}
.s1-welcome__featured-item:hover { background: rgba(255,255,255,0.1); }
.s1-welcome__featured-item:active { transform: scale(0.96); }
.s1-welcome__featured-item__imgwrap {
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
border-radius: 8px;
margin-bottom: 2px;
flex-shrink: 0;
}
.s1-welcome__featured-item__img {
width: 56px; height: 56px;
object-fit: contain;
object-position: center;
border-radius: 8px;
}
.s1-welcome__featured-item .s1-img-fallback {
width: 56px; height: 56px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 1.75rem;
background: rgba(255,255,255,0.05);
}
.s1-welcome__featured-item__name {
font-size: 0.6875rem;
font-weight: 600;
color: #fff;
text-align: center;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 100%;
}
.s1-welcome__featured-item__price {
font-size: 0.6875rem;
font-weight: 700;
color: var(--s1-period-accent, #ff8a65);
transition: color 0.8s ease-out;
}
.s1-welcome__featured-closed {
display: flex; align-items: center; gap: 10px; justify-content: center; padding: 4px 0;
}
.s1-welcome__featured-closed-icon { font-size: 1.25rem; }
.s1-welcome__featured-closed-msg {
font-family: var(--s1-font);
font-size: 0.875rem;
font-weight: 500;
color: rgba(255,255,255,0.65);
margin: 0;
}
/* ── CLOSED INFO CARD */
.s1-welcome__closed-card {
background: rgba(255,255,255,0.05);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 16px;
padding: 14px 18px;
width: 100%;
margin-bottom: var(--space-4);
text-align: left;
}
.s1-welcome__closed-row {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--s1-font);
font-size: 0.8125rem;
color: rgba(255,255,255,0.60);
padding: 4px 0;
}
.s1-welcome__closed-row + .s1-welcome__closed-row {
border-top: 1px solid rgba(255,255,255,0.06);
margin-top: 4px;
padding-top: 8px;
}
.s1-welcome__closed-row--reopen {
color: #ff8a65;
font-weight: 600;
font-size: 0.875rem;
}
.s1-welcome__closed-reopen-txt {
animation: s1ClosedPulse 2.8s ease-in-out infinite;
}
@keyframes s1ClosedPulse {
0%,100% { opacity: 1; }
50% { opacity: 0.70; }
}
.s1-welcome__closed-browse-msg {
font-family: var(--s1-font);
font-size: 0.875rem;
color: rgba(255,255,255,0.65);
margin: 0 0 var(--space-3);
text-align: center;
}
/* ── CART CLOSED NOTE */
.s1-cart__closed-note {
display: none;
text-align: center;
font-family: var(--s1-font);
font-size: 0.75rem;
color: rgba(255,255,255,0.45);
padding: 6px 16px 2px;
}
.s1-cart__closed-note.visible {
display: block;
}
/* =====================================================
PHASE 2 — CART · UPSELL · TABLE SYSTEM
===================================================== */
/* ── CART BUTTON (nav) ── */
.s1-cart-btn {
position: relative;
background: var(--s1-btn);
color: var(--s1-btn-text);
border: none;
border-radius: var(--radius-full);
padding: var(--space-2) var(--space-4);
font-family: var(--s1-font);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: var(--space-2);
transition: transform var(--dur-fast), box-shadow var(--dur-fast);
flex-shrink: 0;
box-shadow: 0 2px 10px rgba(181,26,43,0.35);
}
.s1-cart-btn:hover { transform: scale(1.04); }
.s1-cart-btn__badge {
background: #fff;
color: var(--s1-btn);
font-size: 0.6875rem;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
/* ── TABLE INDICATOR (nav) ── */
.s1-table-indicator {
background: rgba(255,165,134,0.12);
border: 1px solid rgba(255,165,134,0.35);
color: var(--s1-accent);
font-family: var(--s1-font);
font-size: 0.8125rem;
font-weight: 600;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
cursor: pointer;
white-space: nowrap;
transition: background var(--dur-fast);
flex-shrink: 0;
}
.s1-table-indicator:hover { background: rgba(255,165,134,0.22); }
.s1-table-indicator--sm { font-size: 0.75rem; padding: 2px var(--space-2); }
/* ── ADD BUTTON on cards ── */
/* Bazni add gumb (koristi se i u modalu) */
.s1-add-btn {
background: var(--s1-btn);
color: var(--s1-btn-text);
border: none;
border-radius: var(--radius-full);
font-family: var(--s1-font);
font-weight: 600;
cursor: pointer;
transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.s1-add-btn:hover { transform: scale(1.02); }
.s1-add-btn:active { transform: scale(0.96); }
/* Kompaktni kružni + gumb na kartici */
.s1-card-add-btn {
flex-shrink: 0;
width: 34px !important;
height: 34px !important;
border-radius: 50% !important;
padding: 0 !important;
font-size: 1.4rem !important;
font-weight: 700 !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 0 !important;
}
.s1-card-add-btn.in-cart {
background: rgba(100,200,140,0.20) !important;
border: 1px solid rgba(100,200,140,0.45) !important;
color: #7fcfa0 !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
}
/* In-cart tick on card image */
.s1-in-cart-badge-img {
position: absolute;
top: var(--space-2);
right: var(--space-2);
background: var(--s1-btn);
color: #fff;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
}
/* ── MODAL CART ROW ── */
.s1-modal-cart-row {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--s1-divider);
}
.s1-add-cart-btn {
flex: 1;
height: 52px;
border-radius: 14px;
font-size: 0.9375rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.s1-add-cart-btn:active { transform: scale(0.97); }
.s1-add-cart-btn.loading { color: transparent; pointer-events: none; }
.s1-add-cart-btn.loading svg { opacity: 0; }
.s1-add-cart-btn.loading::after {
content: '';
position: absolute;
width: 20px; height: 20px;
border: 2.5px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: s1-spinner 0.65s linear infinite;
}
/* ── QTY CONTROLS ── */
.s1-qty-ctrl {
display: flex;
align-items: center;
background: rgba(255,255,255,0.08);
border-radius: 999px;
padding: 3px;
flex-shrink: 0;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
}
.s1-qty-btn {
background: none;
border: none;
color: #ffffff;
width: 44px;
height: 44px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
transition: background var(--dur-fast);
flex-shrink: 0;
}
.s1-qty-btn:hover { background: rgba(255,255,255,0.12); }
.s1-qty-val {
min-width: 32px;
text-align: center;
font-weight: 700;
font-size: 0.9375rem;
font-family: var(--s1-font);
color: #ffffff;
}
/* ── CART OVERLAY ── */
.s1-cart-overlay {
position: fixed;
inset: 0;
background: rgba(10, 14, 25, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 300;
}
/* ── CART DRAWER ── */
.s1-cart-drawer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 301;
background: var(--s1-bg-deep);
border-top: 2px solid color-mix(in srgb, var(--s1-accent) 35%, transparent);
border-radius: 20px 20px 0 0;
height: 100dvh;
max-height: 100dvh;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 380ms cubic-bezier(0.32,0.72,0,1);
box-shadow:
0 -8px 40px rgba(0, 0, 0, 0.7),
inset 0 0 0 1px color-mix(in srgb, var(--s1-accent) 8%, transparent);
}
.s1-cart-drawer.open { transform: translateY(0); }
@media (min-width: 640px) {
.s1-cart-drawer {
height: auto;
max-height: 85vh;
}
}
.s1-cart-drawer__handle {
width: 40px;
height: 4px;
background: color-mix(in srgb, var(--s1-accent) 40%, transparent);
border-radius: 2px;
margin: 12px auto 6px;
flex-shrink: 0;
}
@media (min-width: 640px) { .s1-cart-drawer__handle { display: none; } }
.s1-cart-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(212, 175, 55, 0.15);
flex-shrink: 0;
min-height: 60px;
}
.s1-cart-drawer__title {
display: flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-family: var(--s1-font);
font-size: 20px;
font-weight: 700;
}
.s1-cart-close-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(212, 175, 55, 0.1);
border: 1px solid rgba(212, 175, 55, 0.3);
color: #d4af37;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background var(--dur-fast), border-color var(--dur-fast);
}
.s1-cart-close-btn:hover { background: rgba(212, 175, 55, 0.2); border-color: rgba(212, 175, 55, 0.55); }
/* legacy table btn — always hidden, replaced by s1-cart-table-warning */
#cart-table-btn { display: none !important; }
/* ── CART TABLE WARNING BANNER ── */
.s1-cart-table-warning {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 16px 0;
padding: 12px;
background: color-mix(in srgb, var(--s1-btn) 8%, transparent);
border-left: 3px solid var(--s1-btn);
border-radius: 12px;
color: var(--s1-btn);
font-family: var(--s1-font);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
flex-shrink: 0;
}
.s1-cart-table-warning.hidden { display: none; }
.s1-cart-table-warning__link {
margin-left: auto;
font-size: 0.75rem;
font-weight: 600;
color: var(--s1-btn);
white-space: nowrap;
}
.s1-cart-items {
overflow-y: auto;
flex: 1;
padding: 10px 14px;
min-height: 80px;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.s1-cart-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 32px;
color: rgba(212, 175, 55, 0.5);
font-family: var(--s1-font);
font-size: 16px;
text-align: center;
}
.s1-cart-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 14px;
margin-bottom: 8px;
min-height: 80px;
}
.s1-cart-item:last-child { margin-bottom: 0; }
.s1-cart-item__img {
width: 56px;
height: 56px;
border-radius: 14px;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.5rem;
padding: 4px;
box-sizing: border-box;
}
.s1-cart-item__img img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.s1-cart-item__info { flex: 1; min-width: 0; }
.s1-cart-item__name { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffffff; }
.s1-cart-item__price { color: #d4af37; font-size: 15px; font-weight: 700; margin-top: 4px; }
.s1-cart-footer {
padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid rgba(212, 175, 55, 0.15);
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 12px;
background: rgba(10, 10, 14, 0.6);
}
/* ── TOTAL CARD ── */
.s1-cart-total-card {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(212, 175, 55, 0.06);
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 16px;
padding: 16px;
}
.s1-cart-total-card__label {
font-family: var(--s1-font);
font-size: 1rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.65);
}
.s1-cart-total-card__right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.s1-cart-total {
font-size: 1.625rem;
font-weight: 700;
color: #d4af37;
font-family: var(--s1-font);
letter-spacing: -0.02em;
}
.s1-cart-total-card__vat {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
font-family: var(--s1-font);
}
/* legacy row — kept for compat */
.s1-cart-total-row { display: none; }
.s1-cart-section-label {
font-size: 11px;
font-weight: 700;
color: rgba(212, 175, 55, 0.7);
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 8px;
font-family: var(--s1-font);
}
.s1-pay-methods { display: flex; gap: 8px; }
.s1-pay-btn {
flex: 1;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.55);
font-family: var(--s1-font);
font-weight: 600;
font-size: 13px;
padding: 14px 8px;
min-height: 52px;
border-radius: 14px;
cursor: pointer;
transition: all var(--dur-fast);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.s1-pay-btn__icon { flex-shrink: 0; }
.s1-pay-btn.active {
background: #d4af37;
border-color: #d4af37;
color: #0d0d0d;
font-weight: 700;
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
}
.s1-pay-btn:hover:not(.active) {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.20);
color: #ffffff;
}
.s1-pay-btn.active .s1-pay-btn__icon { stroke: #0d0d0d; }
.s1-pay-btn:hover:not(.active) .s1-pay-btn__icon { stroke: #ffffff; }
.s1-cart-actions { display: flex; flex-direction: column; gap: 10px; }
.s1-waiter-btn {
background: transparent;
border: 1px solid rgba(212, 175, 55, 0.45);
color: #d4af37;
font-family: var(--s1-font);
font-weight: 600;
font-size: 16px;
padding: 0 20px;
height: 52px;
min-height: 52px;
border-radius: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: border-color var(--dur-fast), background var(--dur-fast);
width: 100%;
}
.s1-waiter-btn:hover { border-color: rgba(212, 175, 55, 0.75); background: rgba(212, 175, 55, 0.07); }
.s1-waiter-btn:disabled { opacity: 0.5; cursor: default; }
.s1-order-btn {
background: #d4af37;
color: #0d0d0d;
border: none;
font-family: var(--s1-font);
font-weight: 700;
font-size: 16px;
height: 56px;
min-height: 56px;
padding: 0 20px;
border-radius: 14px;
cursor: pointer;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: transform var(--dur-fast), box-shadow var(--dur-fast), opacity var(--dur-fast);
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
}
.s1-order-btn:hover { transform: scale(1.02); box-shadow: 0 6px 28px rgba(212, 175, 55, 0.55); opacity: 0.92; }
.s1-order-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.s1-order-btn.loading { color: transparent; opacity: 0.8; cursor: default; transform: none !important; pointer-events: none; }
.s1-order-btn.loading svg { opacity: 0; }
.s1-order-btn.loading::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 2.5px solid rgba(0,0,0,0.25);
border-top-color: #0d0d0d;
border-radius: 50%;
animation: s1-spinner 0.65s linear infinite;
}
@keyframes s1-spinner { to { transform: rotate(360deg); } }
.s1-geo-note {
font-size: 0.8125rem;
color: rgba(212, 175, 55, 0.55);
text-align: center;
font-family: var(--s1-font);
animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
/* ── UPSELL BACKDROP ── */
.s1-upsell-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 14, 25, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 449;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
}
.s1-upsell-backdrop.show { opacity: 1; pointer-events: all; }
/* ── UPSELL POPUP — desktop: centered float ── */
/* Mobile-first: bottom sheet by default */
.s1-upsell {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: 100%;
transform: translateY(20px);
opacity: 0;
z-index: 450;
pointer-events: none;
transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.s1-upsell.s1-upsell--show {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.s1-upsell__handle {
display: block;
width: 36px;
height: 4px;
background: rgba(255,255,255,0.2);
border-radius: 2px;
margin: 10px auto 0;
}
/* Desktop: centered popup */
@media (min-width: 600px) {
.s1-upsell {
top: 50%;
bottom: auto;
left: 50%;
right: auto;
width: calc(100% - 2 * var(--container-pad));
max-width: 360px;
transform: translate(-50%, -50%) scale(0.95);
}
.s1-upsell.s1-upsell--show { transform: translate(-50%, -50%) scale(1); }
.s1-upsell__inner { border-radius: 20px !important; }
.s1-upsell__handle { display: none; }
}
.s1-upsell__inner {
background: rgba(37, 43, 66, 0.72);
backdrop-filter: blur(24px) saturate(1.4);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
padding: 0;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 20px 60px -10px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
/* ── HEADER ── */
.s1-upsell__header {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 18px 18px 12px;
}
.s1-upsell__emoji-wrap {
width: 44px;
height: 44px;
flex-shrink: 0;
background: rgba(255,138,101,0.12);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
}
.s1-upsell__emoji { font-size: 22px; line-height: 1; }
.s1-upsell__content { flex: 1; min-width: 0; }
.s1-upsell__label {
font-family: var(--s1-font);
font-size: 10px;
font-weight: 600;
color: #ff8a65;
letter-spacing: 1.2px;
text-transform: uppercase;
margin: 0 0 3px;
}
.s1-upsell__msg {
font-family: var(--s1-font);
font-weight: 700;
font-size: 15px;
color: #ffffff;
margin: 0;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.s1-upsell__sub {
font-family: var(--s1-font);
font-size: 11px;
color: #8a92a8;
margin: 2px 0 0;
}
.s1-upsell__close {
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: none;
color: #8a92a8;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--dur-fast);
}
.s1-upsell__close:hover { background: rgba(255,255,255,0.12); }
/* ── ITEMS LIST ── */
.s1-upsell__items {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 14px 14px;
}
.s1-upsell-item-btn {
display: flex;
align-items: center;
gap: 12px;
background: #1a1f35;
border: none;
border-radius: 14px;
padding: 10px;
cursor: pointer;
width: 100%;
text-align: left;
transition: background var(--dur-fast);
}
.s1-upsell-item-btn:hover { background: #1e2540; }
.s1-upsell-item-btn__img {
width: 44px;
height: 44px;
border-radius: 10px;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.3rem;
padding: 4px;
box-sizing: border-box;
}
.s1-upsell-item-btn__img img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.s1-upsell-item-btn__info { flex: 1; min-width: 0; }
.s1-upsell-item-btn__name { font-weight: 600; font-size: 14px; color: var(--s1-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.2; }
.s1-upsell-item-btn__price { font-size: 13px; color: var(--s1-accent); font-weight: 700; display: block; margin-top: 3px; }
.s1-upsell-item-btn__add {
width: 34px;
height: 34px;
border-radius: 12px;
background: var(--s1-btn);
color: var(--s1-btn-text);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
flex-shrink: 0;
transition: transform 120ms ease;
}
.s1-upsell-item-btn:active .s1-upsell-item-btn__add { transform: scale(0.92); }
/* ── SKIP LINK ── */
.s1-upsell__skip-wrap {
display: flex;
justify-content: center;
padding: 2px 14px 14px;
}
.s1-upsell__skip {
background: none;
border: none;
font-family: var(--s1-font);
font-size: 12px;
color: #8a92a8;
cursor: pointer;
padding: 8px 12px;
border-radius: 8px;
transition: color var(--dur-fast);
}
.s1-upsell__skip:hover { color: #ffffff; }
/* ── TABLE PICKER ── */
.s1-table-pick-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.s1-table-pick-btn {
background: var(--s1-surface);
border: 1.5px solid var(--s1-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-2);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
transition: all var(--dur-fast);
}
.s1-table-pick-btn:hover {
background: rgba(255,165,134,0.1);
border-color: rgba(255,165,134,0.4);
}
.s1-table-pick-btn.active {
background: rgba(181,26,43,0.16);
border-color: var(--s1-btn);
}
.s1-table-pick-btn__name { font-weight: 700; font-size: 0.875rem; color: var(--s1-text); font-family: var(--s1-font); }
.s1-table-pick-btn__seats { font-size: 0.6875rem; color: var(--s1-text-soft); }
.s1-table-pick-zone-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--s1-text-soft);
margin-bottom: var(--space-2);
font-family: var(--s1-font);
}
/* ── WELCOME TABLE BADGE ── */
.s1-welcome__table-badge {
background: rgba(255,165,134,0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,165,134,0.35);
color: var(--s1-accent);
font-family: var(--s1-font);
font-size: 0.9375rem;
font-weight: 600;
padding: var(--space-2) var(--space-5);
border-radius: var(--radius-full);
display: inline-block;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
/* ── ORDER CONFIRM MODAL ── */
.s1-order-confirm { text-align: center; }
/* =====================================================
PHASE 2 — TABLE ZONE DASHBOARD (sank.html)
===================================================== */
/* --- Header / layout --- */
.sank-header {
background: var(--s1-bg-deep);
border-bottom: 1px solid var(--s1-divider);
padding: 0 var(--container-pad);
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 50;
}
.sank-clock {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--s1-text);
font-variant-numeric: tabular-nums;
}
.sank-date {
font-size: 0.8125rem;
color: var(--s1-text-soft);
margin-top: 1px;
}
.sank-main {
padding: var(--space-6) var(--container-pad);
max-width: var(--container-xl);
margin: 0 auto;
}
/* --- Availability grid & category cards --- */
.sank-availability-grid {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(2, 1fr);
}
.sank-cat-card {
background: var(--s1-surface);
border: 1px solid var(--s1-border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
transition: background var(--dur-normal);
cursor: pointer;
user-select: none;
}
.sank-cat-card:hover { background: rgba(255,255,255,0.12); }
.sank-cat-card.all-off { opacity: 0.4; }
.sank-cat-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.sank-cat-icon { font-size: 1.75rem; }
.sank-cat-name { font-weight: 600; font-size: 0.9375rem; }
.sank-progress {
height: 4px;
background: rgba(255,255,255,0.12);
border-radius: var(--radius-full);
overflow: hidden;
margin-top: var(--space-1);
}
.sank-progress-fill {
height: 100%;
background: var(--s1-accent);
border-radius: var(--radius-full);
transition: width 0.4s var(--ease-smooth);
}
/* --- Item grid & rows --- */
.sank-item-grid {
display: grid;
gap: var(--space-3);
grid-template-columns: 1fr;
}
.sank-item-row {
background: var(--s1-surface);
border: 1px solid var(--s1-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
transition: background var(--dur-fast);
}
.sank-item-row:hover { background: rgba(255,255,255,0.12); }
.sank-item-row.unavail { opacity: 0.4; }
.sank-item-name { font-weight: 500; font-size: 0.9375rem; flex: 1; }
.sank-item-price { font-weight: 700; font-size: 0.9375rem; color: var(--s1-text); white-space: nowrap; }
/* --- Section title --- */
.sank-section-title {
font-weight: 700;
font-size: 1.25rem;
letter-spacing: -0.01em;
margin-bottom: var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
}
/* --- Filter tabs --- */
.sank-filter-tabs {
display: flex;
gap: var(--space-2);
margin-bottom: var(--space-6);
flex-wrap: wrap;
}
.sank-filter-tab {
background: var(--s1-surface-soft);
border: 1px solid var(--s1-border);
color: var(--s1-text-soft);
font-family: var(--s1-font);
font-weight: 600;
font-size: 0.875rem;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--dur-fast);
}
.sank-filter-tab.active, .sank-filter-tab:hover {
background: var(--s1-btn);
color: var(--s1-btn-text);
border-color: var(--s1-btn);
}
/* --- Misc --- */
.sank-cat-section { margin-bottom: var(--space-8); }
.sank-live-badge {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.8125rem;
font-weight: 600;
color: var(--s1-text-soft);
}
.sank-search-wrap { margin-bottom: var(--space-6); }
.sank-fullscreen-btn {
background: none;
border: 1px solid var(--s1-border);
color: var(--s1-text-soft);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
cursor: pointer;
font-size: 1rem;
transition: all var(--dur-fast);
}
.sank-fullscreen-btn:hover { background: var(--s1-surface-soft); color: var(--s1-text); }
.sank-toggle-all-btn {
font-size: 0.75rem;
font-weight: 600;
padding: 3px 10px;
border-radius: var(--radius-full);
border: 1px solid var(--s1-border);
background: var(--s1-surface-soft);
color: var(--s1-text-soft);
cursor: pointer;
transition: all var(--dur-fast);
}
.sank-toggle-all-btn:hover { background: rgba(255,255,255,0.15); color: var(--s1-text); }
/* --- Stats row --- */
.sank-stats-row {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
margin-bottom: var(--space-6);
}
.sank-stat-pill {
background: var(--s1-surface);
border: 1px solid var(--s1-border);
border-radius: var(--radius-full);
padding: var(--space-2) var(--space-4);
font-size: 0.875rem;
font-weight: 500;
display: flex;
align-items: center;
gap: var(--space-2);
}
@media (min-width: 641px) {
.sank-availability-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sank-item-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
.sank-zone-section { margin-bottom: var(--space-8); }
.sank-zone-header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--s1-divider);
}
.sank-zone-emoji { font-size: 1.5rem; }
.sank-zone-title { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; }
.sank-zone-stats { font-size: 0.8125rem; color: var(--s1-text-soft); margin-left: auto; }
.sank-tables-grid {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
/* Table card */
.sank-table-card {
background: var(--s1-surface);
border: 1.5px solid var(--s1-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
cursor: pointer;
transition: transform var(--dur-fast), box-shadow var(--dur-fast);
display: flex;
flex-direction: column;
gap: var(--space-2);
position: relative;
overflow: hidden;
min-height: 110px;
}
.sank-table-card:hover { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
.sank-table-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
border-radius: var(--radius-full) var(--radius-full) 0 0;
}
/* Status variants */
.sank-table-card--empty { opacity: 0.5; }
.sank-table-card--active::before { background: var(--s1-accent); }
.sank-table-card--waiter::before { background: #f59e0b; animation: pulseBar 1s ease-in-out infinite; }
.sank-table-card--served::before { background: #22c55e; }
.sank-table-card--payment::before { background: var(--s1-btn); }
@keyframes pulseBar { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.sank-table-card__head { display: flex; justify-content: space-between; align-items: flex-start; }
.sank-table-card__name { font-weight: 700; font-size: 1rem; color: var(--s1-text); }
.sank-table-card__seats { font-size: 0.6875rem; color: var(--s1-text-soft); }
.sank-table-card__status-badge {
font-size: 0.6875rem;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-full);
white-space: nowrap;
}
.sank-table-card--empty .sank-table-card__status-badge { background: rgba(255,255,255,0.06); color: var(--s1-text-soft); }
.sank-table-card--active .sank-table-card__status-badge { background: rgba(255,165,134,0.18); color: var(--s1-accent); }
.sank-table-card--waiter .sank-table-card__status-badge { background: rgba(245,158,11,0.2); color: #f59e0b; }
.sank-table-card--served .sank-table-card__status-badge { background: rgba(34,197,94,0.15); color: #22c55e; }
.sank-table-card--payment .sank-table-card__status-badge { background: rgba(181,26,43,0.2); color: #ff8090; }
.sank-table-card__waiter-ring { animation: ring 0.9s ease-in-out infinite; display: inline-block; }
@keyframes ring { 0%,100%{transform:rotate(-8deg);} 50%{transform:rotate(8deg);} }
.sank-table-card__footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.sank-table-card__total { font-weight: 700; color: var(--s1-accent); font-size: 0.9375rem; }
.sank-table-card__time { font-size: 0.6875rem; color: var(--s1-text-soft); }
/* Order detail panel */
.sank-order-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 400;
backdrop-filter: blur(4px);
}
.sank-order-panel {
position: fixed;
right: 0; top: 0; bottom: 0;
width: min(460px, 100%);
background: var(--s1-bg-deep);
border-left: 1px solid var(--s1-border);
z-index: 401;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
box-shadow: -8px 0 40px rgba(0,0,0,0.4);
}
.sank-order-panel.open { transform: translateX(0); }
.sank-order-panel__header {
padding: var(--space-5);
border-bottom: 1px solid var(--s1-divider);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.sank-order-panel__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); }
.sank-order-panel__footer {
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--s1-divider);
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
flex-shrink: 0;
}
.sank-order-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) 0;
border-bottom: 1px solid var(--s1-divider);
font-size: 0.875rem;
gap: var(--space-2);
}
.sank-order-row:last-child { border-bottom: none; }
.sank-order-row__qty {
background: var(--s1-surface);
border-radius: var(--radius-sm);
padding: 1px 8px;
font-weight: 700;
font-size: 0.8125rem;
color: var(--s1-accent);
flex-shrink: 0;
}
.sank-order-row__name { flex: 1; font-weight: 500; min-width: 0; }
.sank-order-row__total { font-weight: 700; color: var(--s1-accent); flex-shrink: 0; }
.sank-panel-action {
flex: 1;
min-width: 120px;
background: var(--s1-surface);
border: 1px solid var(--s1-border);
color: var(--s1-text);
font-family: var(--s1-font);
font-weight: 600;
font-size: 0.875rem;
padding: var(--space-3);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--dur-fast);
text-align: center;
}
.sank-panel-action:hover { background: rgba(255,255,255,0.12); }
.sank-panel-action--confirm { background: rgba(181,26,43,0.16); border-color: rgba(181,26,43,0.35); color: #ff8090; }
.sank-panel-action--served { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.3); color: #22c55e; }
.sank-panel-action--paid { background: rgba(255,165,134,0.12); border-color: rgba(255,165,134,0.3); color: var(--s1-accent); }
.sank-panel-action--cancel { background: rgba(100,100,100,0.1); border-color: rgba(255,255,255,0.12); color: var(--s1-text-soft); }
.sank-panel-action--confirm:hover { background: rgba(181,26,43,0.28); }
.sank-panel-action--served:hover { background: rgba(34,197,94,0.22); }
.sank-panel-action--paid:hover { background: rgba(255,165,134,0.22); }
.sank-panel-action--cancel:hover { background: rgba(255,255,255,0.08); }
.sank-pay-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
background: rgba(255,255,255,0.08);
border: 1px solid var(--s1-border);
border-radius: var(--radius-full);
padding: 2px 10px;
font-size: 0.8125rem;
font-weight: 600;
}
/* Waiter call alert row */
.sank-waiter-alert {
display: flex;
align-items: center;
gap: var(--space-3);
background: rgba(245,158,11,0.12);
border: 1px solid rgba(245,158,11,0.3);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-3);
}
.sank-waiter-alert__bell { font-size: 1.25rem; animation: ring 0.9s ease-in-out infinite; display: inline-block; }
.sank-waiter-alert__label { flex: 1; font-weight: 600; font-size: 0.9375rem; color: #f59e0b; }
.sank-waiter-alert__dismiss {
background: none;
border: 1px solid rgba(245,158,11,0.4);
color: #f59e0b;
border-radius: var(--radius-sm);
padding: 2px 10px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
font-family: var(--s1-font);
transition: background var(--dur-fast);
}
.sank-waiter-alert__dismiss:hover { background: rgba(245,158,11,0.15); }
/* === LANG SWITCHER === */
.s1-lang-switcher{
display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
margin-bottom:var(--space-5);
}
.s1-lang-btn{
background:var(--s1-surface-soft, rgba(255,255,255,0.08));
color:var(--s1-text-soft, rgba(255,255,255,0.6));
border:1px solid var(--s1-border, rgba(255,255,255,0.12));
border-radius:var(--radius-full, 9999px);
font:600 0.8125rem/1 var(--s1-font, system-ui, sans-serif);
padding:7px 14px; cursor:pointer;
transition:all var(--dur-fast,150ms) var(--ease-smooth,ease);
}
.s1-lang-btn:hover{ color:var(--s1-text,#fff); border-color:var(--s1-text-soft,rgba(255,255,255,0.4)); }
.s1-lang-btn.active{
background:var(--s1-btn,#fff); color:var(--s1-btn-text,#1C2440);
border-color:var(--s1-btn,#fff);
}
/* Kompaktna varijanta u navigaciji — mobile-first */
.s1-lang-switcher--nav{ margin-bottom:0; gap:4px; max-width:160px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.s1-lang-switcher--nav::-webkit-scrollbar{ display:none; }
.s1-lang-switcher--nav .s1-lang-btn{ padding:4px 8px; font-size:0.7rem; flex-shrink:0; }
@media (min-width: 641px) {
.s1-lang-switcher--nav{ max-width:unset; flex-wrap:wrap; overflow-x:visible; }
.s1-lang-switcher--nav .s1-lang-btn{ padding:5px 9px; font-size:0.75rem; flex-shrink:unset; }
}
/* Zastavice na dnu welcome screena */
.s1-lang-switcher--welcome{
position: static;
margin-top: var(--space-5);
margin-bottom: var(--space-5);
gap: 8px;
flex-wrap: nowrap;
justify-content: center;
}
.s1-lang-switcher--welcome .s1-lang-btn{
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px;
padding: 5px;
width: 40px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.s1-lang-switcher--welcome .s1-lang-btn svg{
width: 100%;
height: 100%;
display: block;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.s1-lang-switcher--welcome .s1-lang-btn:hover{
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.32);
transform: scale(1.08);
}
.s1-lang-switcher--welcome .s1-lang-btn.active{
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.5);
box-shadow: 0 0 0 2px rgba(255,255,255,0.55);
transform: scale(1.0);
}
/* === THEME SELECTOR (admin panel) === */
.s1-theme-group-title{
font: 600 0.75rem/1 var(--s1-font);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--s1-text-soft);
margin: var(--space-4) 0 var(--space-3);
}
.s1-theme-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.s1-theme-card{
position: relative;
width: 100%;
height: 100px;
border-radius: 14px;
border: 2px solid transparent;
background: var(--theme-bg, #1C2440);
cursor: pointer;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: left;
font-family: var(--s1-font);
overflow: hidden;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.s1-theme-card:hover{
transform: translateY(-2px);
border-color: rgba(255,255,255,0.15);
}
.s1-theme-card.is-active{
border-color: var(--theme-accent, #fff);
box-shadow: 0 0 0 3px rgba(255,255,255,0.06), 0 8px 20px rgba(0,0,0,0.35);
}
.s1-theme-card__swatches{
display: flex;
gap: 4px;
align-self: flex-start;
}
.s1-theme-card__swatch{
width: 18px;
height: 18px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.18);
}
.s1-theme-card__label{
font-size: 0.75rem;
font-weight: 600;
color: var(--theme-text, #fff);
text-shadow: 0 1px 2px rgba(0,0,0,0.45);
line-height: 1.2;
}
.s1-theme-card__check{
position: absolute;
top: 8px;
right: 8px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--theme-accent, #fff);
color: #000;
font-size: 0.75rem;
font-weight: 700;
display: none;
align-items: center;
justify-content: center;
}
.s1-theme-card.is-active .s1-theme-card__check{
display: flex;
}
.s1-theme-actions{
display: flex;
gap: var(--space-3);
margin-top: var(--space-3);
}
.s1-theme-preview-pill{
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.06);
border: 1px solid var(--s1-border);
border-radius: 999px;
padding: 6px 12px;
font: 500 0.75rem/1 var(--s1-font);
color: var(--s1-text-soft);
margin-bottom: var(--space-3);
}
.s1-theme-preview-pill.is-dirty{
background: rgba(255,165,134,0.12);
border-color: var(--s1-accent);
color: var(--s1-accent);
}
/* === ALLERGEN FILTER — replaced by .s1-apanel system (see EU ALLERGEN PANEL section) === */
/* Active filter indicator on item count */
.s1-afilter-active-badge{
display:inline-flex; align-items:center; gap:4px;
background:rgba(181,26,43,0.15);
border:1px solid rgba(181,26,43,0.4);
border-radius:var(--radius-full);
color:#ff6b7a; font-size:0.7rem; font-weight:700;
padding:2px 9px; margin-left:var(--space-2);
vertical-align:middle;
}
/* === SANK ORDERS === */
.sank-order-badge{
background:var(--s1-accent,#A8C5B4); color:#1C2440;
border-radius:9999px; font-size:0.7rem; font-weight:700;
padding:1px 7px; margin-left:6px;
}
.sank-order-card{
background:var(--s1-surface,#2a3450); border:1px solid var(--s1-border,rgba(255,255,255,0.1));
border-radius:var(--radius-lg,16px); padding:16px; margin-bottom:12px;
}
.sank-order-card.waiter{ border-color:#E8A05A; background:rgba(232,160,90,0.08); }
.sank-order-card.done{ opacity:0.45; }
.sank-order-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.sank-order-time{ font-size:0.8125rem; opacity:0.6; }
.sank-order-loc{ font-size:0.875rem; opacity:0.8; margin-bottom:10px; }
.sank-order-line{ display:flex; justify-content:space-between; font-size:0.9rem; padding:3px 0; }
.sank-order-total{ margin-top:8px; padding-top:8px; border-top:1px solid var(--s1-border,rgba(255,255,255,0.1)); font-size:0.9rem; }
.sank-order-actions{ margin-top:12px; }
.sank-order-done{
background:var(--s1-btn,#fff); color:var(--s1-btn-text,#1C2440);
border:none; border-radius:9999px; padding:7px 16px; font-weight:600; cursor:pointer;
}
/* === IMAGE FALLBACK === */
.s1-img-fallback{
width:100%; height:100%;
min-height:102px;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,
var(--s1-bg-deep,#1C2440) 0%,
var(--s1-surface,#2E3A55) 100%);
border-radius:inherit;
}
.s1-img-fallback span{
font-size:2.1rem; opacity:0.4;
filter:grayscale(0.3);
user-select:none;
}
/* Manji u listama/tablicama */
.sank-item-row .s1-img-fallback,
.s1-cart-item .s1-img-fallback{ min-height:31px; width:31px; height:31px; }
/* Admin thumbnail */
.s1-thumb.s1-img-fallback{ min-height:0; width:41px; height:41px; flex-shrink:0; background:transparent; }
/* Sank item thumbnail */
.s1-sank-item-img{ width:31px; height:31px; border-radius:var(--radius-sm,6px); object-fit:cover; flex-shrink:0; }
/* Modal image */
.s1-modal-img-wrap {
position: relative;
margin-bottom: var(--space-4);
aspect-ratio: 2.09;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 16px;
}
.s1-modal-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.s1-modal-img-overlay {
position: absolute;
inset: 0;
border-radius: 16px;
background: linear-gradient(to top, rgba(10,14,25,0.55) 0%, transparent 50%);
pointer-events: none;
}
/* Povećanje modal slika za Pulled Beef (bg4) i Big Burger (bg6) */
#modal-img-wrap[data-item-id="bg4"] .s1-modal-img,
#modal-img-wrap[data-item-id="bg6"] .s1-modal-img {
transform: scale(1.2);
}
/* ── CART MODIFIER DISPLAY ─────────────────────────────────────────────────── */
.s1-cart-item__mods {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 4px 0;
}
.s1-cart-item__mod {
font-size: 11px;
color: #ff8a65;
background: rgba(255,138,101,0.12);
border-radius: 999px;
padding: 3px 8px;
line-height: 1.5;
}
.s1-cart-item__mod b { color: #ff8a65; font-weight: 600; }
/* ── MODIFIER SHEET + CHAIN WIZARD (unified .s1-msheet system) ────────────── */
/* Backdrop for modifier panel */
.s1-msheet-overlay {
position: fixed;
inset: 0;
background: rgba(10, 14, 25, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 455;
opacity: 0;
pointer-events: none;
transition: opacity 200ms;
}
.s1-msheet-overlay.show { opacity: 1; pointer-events: all; }
/* Sheet panel (shared by modifier panel and chain wizard) */
.s1-msheet {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(100%);
width: 100%;
max-width: 420px;
max-height: 85vh;
background: rgba(26, 31, 53, 0.78);
backdrop-filter: blur(28px) saturate(1.5);
-webkit-backdrop-filter: blur(28px) saturate(1.5);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 -20px 60px -10px rgba(0, 0, 0, 0.5);
border-radius: 22px 22px 0 0;
display: flex;
flex-direction: column;
z-index: 456;
pointer-events: none;
transition: transform 280ms cubic-bezier(0.32,0.72,0,1);
}
.s1-msheet.show {
transform: translateX(-50%) translateY(0);
pointer-events: all;
}
@media (min-width: 600px) {
.s1-msheet {
border-radius: 20px;
top: 50%;
bottom: auto;
transform: translateX(-50%) translateY(-50%) scale(0.96);
opacity: 0;
transition: transform 280ms cubic-bezier(0.32,0.72,0,1), opacity 200ms;
}
.s1-msheet.show {
transform: translateX(-50%) translateY(-50%) scale(1);
opacity: 1;
}
}
/* Chain overlay backdrop (wraps .s1-msheet) */
.s1-chain-overlay {
position: fixed;
inset: 0;
background: rgba(10, 14, 25, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 460;
opacity: 0;
pointer-events: none;
transition: opacity 200ms;
display: flex;
align-items: flex-end;
justify-content: center;
}
.s1-chain-overlay.show { opacity: 1; pointer-events: all; }
.s1-chain-overlay .s1-msheet {
position: relative;
bottom: auto; left: auto; top: auto;
transform: translateY(100%);
opacity: 1;
max-width: 420px;
width: 100%;
transition: transform 280ms cubic-bezier(0.32,0.72,0,1);
pointer-events: all;
}
.s1-chain-overlay.show .s1-msheet { transform: translateY(0); }
@media (min-width: 600px) {
.s1-chain-overlay { align-items: center; }
.s1-chain-overlay .s1-msheet {
border-radius: 20px;
transform: scale(0.96);
opacity: 0;
transition: transform 280ms cubic-bezier(0.32,0.72,0,1), opacity 200ms;
}
.s1-chain-overlay.show .s1-msheet { transform: scale(1); opacity: 1; }
}
/* Drag handle */
.s1-msheet__handle {
width: 36px; height: 4px;
background: rgba(255,255,255,0.2);
border-radius: 2px;
margin: 10px auto 0;
flex-shrink: 0;
}
/* Header row */
.s1-msheet__header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px 12px;
flex-shrink: 0;
}
.s1-msheet__himg {
width: 48px; height: 48px;
border-radius: 14px;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
padding: 4px;
box-sizing: border-box;
}
.s1-msheet__himg img,
.s1-msheet__himg .s1-img-fallback {
width: 100%; height: 100%;
object-fit: contain;
object-position: center;
border-radius: 0;
display: flex; align-items: center; justify-content: center;
}
.s1-msheet__hinfo { flex: 1; min-width: 0; }
.s1-msheet__hname {
font-size: 15px;
font-weight: 700;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.s1-msheet__dots-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
}
.s1-msheet__dots { display: flex; gap: 4px; }
.s1-msheet__dot {
width: 20px; height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.1);
transition: background 0.2s;
flex-shrink: 0;
}
.s1-msheet__dot.active { background: var(--s1-btn); }
.s1-msheet__dot.done { background: #ff8a65; }
.s1-msheet__step-label { font-size: 11px; color: #8a92a8; }
.s1-msheet__hclose {
width: 32px; height: 32px;
background: rgba(255,255,255,0.06);
border: none;
border-radius: 10px;
color: #8a92a8;
font-size: 14px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.s1-msheet__hclose:hover { background: rgba(255,255,255,0.12); color: #ffffff; }
/* Section head */
.s1-msheet__section-head { padding: 14px 16px 10px; flex-shrink: 0; }
.s1-msheet__slabel {
font-size: 10px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #ff8a65;
margin-bottom: 4px;
}
.s1-msheet__question { font-size: 16px; font-weight: 700; color: #ffffff; line-height: 1.3; }
.s1-msheet__hint { font-size: 12px; color: #8a92a8; margin-top: 2px; }
/* Options scrollable area */
.s1-msheet__opts {
flex: 1;
overflow-y: auto;
padding: 0 14px 14px;
display: flex;
flex-direction: column;
gap: 8px;
scrollbar-width: thin;
}
@keyframes s1-shake {
0% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-2px); }
80% { transform: translateX(2px); }
100% { transform: translateX(0); }
}
.s1-msheet__opts--shake { animation: s1-shake 280ms ease-out; }
/* Option row */
.s1-mopt {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 12px;
cursor: pointer;
width: 100%;
text-align: left;
transition: border-color 0.15s, background 0.15s;
}
.s1-mopt:hover { background: rgba(255, 255, 255, 0.07); }
.s1-mopt--selected { background: color-mix(in srgb, var(--s1-btn) 12%, transparent); border-color: color-mix(in srgb, var(--s1-btn) 40%, transparent); }
.s1-mopt__icon {
width: 32px; height: 32px;
background: rgba(255,255,255,0.05);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.s1-mopt__icon--img { overflow: hidden; }
.s1-mopt__icon--img img,
.s1-mopt__icon--img .s1-img-fallback {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 0;
display: flex; align-items: center; justify-content: center;
}
.s1-mopt__info { flex: 1; min-width: 0; }
.s1-mopt__name { font-size: 14px; font-weight: 600; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s1-mopt__price { font-size: 12px; font-weight: 600; color: #ff8a65; display: block; margin-top: 1px; }
.s1-mopt__inc { font-size: 11px; color: #8a92a8; display: block; margin-top: 1px; }
/* Indicator: radio circle */
.s1-mopt__indicator {
width: 20px; height: 20px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.15);
flex-shrink: 0;
position: relative;
transition: border-color 0.15s;
}
.s1-mopt--selected .s1-mopt__indicator { border-color: var(--s1-btn); }
.s1-mopt--selected .s1-mopt__indicator::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 8px; height: 8px;
border-radius: 50%;
background: #ffffff;
}
/* Indicator: checkbox variant */
.s1-mopt__indicator--check { border-radius: 6px; }
.s1-mopt--selected .s1-mopt__indicator--check { background: var(--s1-btn); border-color: var(--s1-btn); }
.s1-mopt--selected .s1-mopt__indicator--check::after {
content: '✓';
width: auto; height: auto;
border-radius: 0;
background: none;
font-size: 12px;
color: #ffffff;
}
/* Footer */
.s1-msheet__footer {
flex-shrink: 0;
display: flex;
gap: 8px;
padding: 12px 14px;
padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
border-top: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(26, 31, 53, 0.85);
}
.s1-msheet__skip-btn {
flex-shrink: 0;
padding: 12px 18px;
background: transparent;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
color: #8a92a8;
font-family: var(--s1-font);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.s1-msheet__skip-btn:hover { border-color: rgba(255,255,255,0.2); color: #ffffff; }
.s1-msheet__cta-btn {
flex: 1;
padding: 14px;
background: var(--s1-btn);
border: none;
border-radius: 12px;
color: #ffffff;
font-family: var(--s1-font);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: transform 0.12s, opacity 0.15s;
}
.s1-msheet__cta-btn:active { transform: scale(0.96); }
.s1-msheet__cta-btn:disabled,
.s1-msheet__cta-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
/* ── (old chain wizard styles removed — replaced by .s1-msheet above) ────── */
.s1-chain-overlay-UNUSED { display: none; } /* placeholder so old refs don't break */
/* ── F4: CART SUGGESTION ─────────────────────────────────────────────────── */
.s1-cart-suggestion {
margin: 8px 14px 0;
background: color-mix(in srgb, var(--s1-accent) 4%, transparent);
border: 1px solid color-mix(in srgb, var(--s1-accent) 30%, transparent);
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
}
.s1-cart-sugg__body {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
}
.s1-cart-sugg__emoji { font-size: 1.3rem; flex-shrink: 0; }
.s1-cart-sugg__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.s1-cart-sugg__msg {
font-size: 0.72rem;
font-weight: 700;
color: var(--s1-accent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.s1-cart-sugg__item {
font-size: 0.72rem;
opacity: 0.65;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.s1-cart-sugg__add {
flex-shrink: 0;
width: 30px; height: 30px;
border-radius: 50%;
background: var(--s1-accent);
color: #fff;
border: none;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: transform var(--dur-fast);
}
.s1-cart-sugg__add:active { transform: scale(0.9); }
.s1-cart-sugg__dismiss {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(255,255,255,0.18);
color: var(--s1-text);
font-size: 0.65rem;
opacity: 0.5;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
/* ── F5: ZA KRAJ? PRE-SEND UPSELL ───────────────────────────────────────── */
.s1-final-upsell {
position: fixed;
bottom: 0; left: 0; right: 0;
max-width: 480px;
margin: 0 auto;
background: var(--s1-surface);
border-top: 3px solid var(--s1-accent);
border-radius: 20px 20px 0 0;
padding: 18px 20px 36px;
z-index: 470;
transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.s1-final-upsell.show { transform: translateY(0); }
.s1-final-upsell__label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.55;
margin-bottom: 10px;
}
.s1-final-upsell__item {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255,255,255,0.06);
border-radius: 12px;
padding: 10px 12px;
margin-bottom: 14px;
}
.s1-final-upsell__item-img {
width: 48px; height: 48px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.08);
font-size: 1.6rem;
}
.s1-final-upsell__item-img img { width: 100%; height: 100%; object-fit: cover; }
.s1-final-upsell__item-info { flex: 1; }
.s1-final-upsell__item-name { font-weight: 600; font-size: 0.9rem; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── MICRO-ANIMATIONS & FEEDBACK STATES ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ─── Cart badge bounce ─────────────────────────────────────────────────── */
@keyframes s1-badge-bounce {
0% { transform: scale(1); }
40% { transform: scale(1.38); filter: brightness(1.25); }
70% { transform: scale(0.88); filter: brightness(1); }
100% { transform: scale(1); filter: brightness(1); }
}
.s1-badge-bounce {
animation: s1-badge-bounce 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* ─── Cart icon shake ────────────────────────────────────────────────────── */
@keyframes s1-cart-shake {
0% { transform: rotate(0deg); }
20% { transform: rotate(-8deg); }
45% { transform: rotate(6deg); }
65% { transform: rotate(-3deg); }
80% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
.s1-cart-shake {
animation: s1-cart-shake 420ms ease-out;
}
/* ─── + button stronger tap feedback ────────────────────────────────────── */
.s1-add-btn:active {
transform: scale(0.88) !important;
background: #c1212d !important;
transition-duration: 100ms !important;
}
/* ─── Qty button active tap ──────────────────────────────────────────────── */
.s1-qty-btn:active {
transform: scale(0.82);
background: rgba(255,255,255,0.18);
transition-duration: 80ms;
}
/* ─── Item card entrance: use tighter timing ─────────────────────────────── */
.s1-item-card.s1-enter {
animation-duration: 320ms;
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
/* ─── Qty value pulse when value changes ─────────────────────────────────── */
@keyframes s1-qty-pulse {
0% { transform: scale(1); }
45% { transform: scale(1.22); }
100% { transform: scale(1); }
}
.s1-qty-val--pulse {
animation: s1-qty-pulse 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ─── Modifier indicator pop bounce ─────────────────────────────────────── */
/* Radio dot */
@keyframes s1-indicator-dot-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
60% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.s1-mopt--selected .s1-mopt__indicator:not(.s1-mopt__indicator--check)::after {
animation: s1-indicator-dot-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Checkbox tick */
@keyframes s1-indicator-check-pop {
0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
60% { transform: translate(-50%, -50%) scale(1.2) rotate(3deg); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}
.s1-mopt--selected .s1-mopt__indicator--check::after {
animation: s1-indicator-check-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* ─── Category tab smooth transition ─────────────────────────────────────── */
.s1-tab {
transition: background 220ms ease-out, color 220ms ease-out,
border-color 220ms ease-out, transform var(--dur-fast);
}
/* ─── Fly-to-cart particle (full styles set in JS, class for safety) ──────── */
.s1-fly-particle {
position: fixed;
z-index: 9999;
pointer-events: none;
border-radius: 50%;
background: var(--s1-btn);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
will-change: transform, opacity;
}
/* ─── Success overlay (shown after order sent) ───────────────────────────── */
.s1-success-overlay {
position: fixed;
inset: 0;
background: rgba(10,20,40,0.70);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 9000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
animation: fadeIn 220ms ease-out both;
}
.s1-success-circle {
width: 96px; height: 96px;
border-radius: 50%;
background: var(--s1-btn);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
animation: s1-circle-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes s1-circle-pop {
0% { transform: scale(0); opacity: 0; }
65% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.s1-success-circle svg { width: 48px; height: 48px; overflow: visible; }
.s1-success-circle svg polyline {
stroke: #34D399;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
stroke-dasharray: 55;
stroke-dashoffset: 55;
animation: s1-check-draw 400ms cubic-bezier(0.22,1,0.36,1) 260ms both;
}
@keyframes s1-check-draw { to { stroke-dashoffset: 0; } }
.s1-success-msg {
font-size: 18px;
font-weight: 700;
color: #ffffff;
font-family: var(--s1-font);
animation: s1-success-text-in 200ms ease-out 580ms both;
}
@keyframes s1-success-text-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes s1-success-fade-out {
from { opacity: 1; }
to { opacity: 0; pointer-events: none; }
}
.s1-success-overlay--out {
animation: s1-success-fade-out 300ms ease-out both !important;
}
/* ══ WAITER FAB ═══════════════════════════════════════════════════════════ */
/* Mobile-first: FAB higher above bottom nav */
.s1-fab-wrap {
position: fixed;
right: 20px;
bottom: calc(env(safe-area-inset-bottom, 0px) + 112px);
z-index: 450;
display: flex;
align-items: center;
gap: 12px;
}
@media (min-width: 768px) {
.s1-fab-wrap {
bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
}
/* Pulse ring */
.s1-fab-wrap::before {
content: '';
position: absolute;
right: 0; bottom: 0;
width: 56px; height: 56px;
border-radius: 50%;
border: 2px solid var(--s1-btn);
opacity: 0;
animation: s1FabPulse 2.5s ease-out infinite;
pointer-events: none;
}
@keyframes s1FabPulse {
0% { transform: scale(1); opacity: 0.6; }
70% { transform: scale(1.65); opacity: 0; }
100% { transform: scale(1.65); opacity: 0; }
}
.s1-fab {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--s1-btn);
border: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
0 4px 20px rgba(0,0,0,0.3),
0 2px 8px color-mix(in srgb, var(--s1-btn) 40%, transparent),
inset 0 1px 0 rgba(255,255,255,0.18);
transition: transform 120ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 200ms ease, background 200ms ease;
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
position: relative;
}
.s1-fab:active {
transform: scale(0.88);
transition-duration: 80ms;
}
.s1-fab:hover {
box-shadow:
0 6px 24px rgba(0,0,0,0.4),
0 4px 12px color-mix(in srgb, var(--s1-btn) 55%, transparent),
inset 0 1px 0 rgba(255,255,255,0.22);
}
.s1-fab--sent {
background: rgba(255,255,255,0.12);
opacity: 0.6;
pointer-events: none;
}
/* Tooltip — appears left of FAB on hover */
.s1-fab-tooltip {
background: rgba(20,28,50,0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 100px;
color: #fff;
font-family: var(--s1-font);
font-size: 0.8125rem;
font-weight: 600;
padding: 7px 14px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translateX(6px);
transition: opacity 200ms ease, transform 200ms ease;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.s1-fab-wrap:hover .s1-fab-tooltip,
.s1-fab-wrap:focus-within .s1-fab-tooltip {
opacity: 1;
transform: translateX(0);
}
/* ─── @supports fallback for no-backdrop-filter devices ─────────────────── */
@supports not (backdrop-filter: blur(20px)) {
.s1-modal-overlay { background: rgba(10, 14, 25, 0.82); }
.s1-modal { background: rgba(20, 28, 50, 0.98); }
.s1-cart-overlay { background: rgba(10, 14, 25, 0.82); }
.s1-cart-drawer { background: var(--s1-bg-deep); }
.s1-upsell-backdrop { background: rgba(10, 14, 25, 0.82); }
.s1-upsell__inner { background: rgba(37, 43, 66, 0.96); }
.s1-asheet-overlay { background: rgba(10, 14, 25, 0.82); }
.s1-asheet { background: rgba(26, 31, 53, 0.96); }
.s1-msheet-overlay { background: rgba(10, 14, 25, 0.82); }
.s1-msheet { background: rgba(26, 31, 53, 0.96); }
.s1-chain-overlay { background: rgba(10, 14, 25, 0.82); }
.s1-final-upsell { background: rgba(26, 31, 53, 0.96); }
.s1-success-overlay { background: rgba(10, 14, 25, 0.95); }
}
/* ─── Generic validation / error shake ──────────────────────────────────── */
.s1-shake {
animation: s1-shake 320ms ease-out;
}
/* ─── Screen-reader only utility ─────────────────────────────────────────── */
.s1-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.s1-final-upsell__items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.s1-final-upsell__item-price { font-size: 0.8rem; opacity: 0.65; margin-top: 2px; }
.s1-final-upsell__item--on { background: rgba(var(--s1-accent-rgb, 211,33,45), 0.12); border: 1px solid var(--s1-accent); }
.s1-final-upsell__item-add {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
border: 1.5px solid var(--s1-accent);
background: transparent;
color: var(--s1-accent);
font-size: 1.2rem;
font-weight: 700;
line-height: 1;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 150ms ease, color 150ms ease, transform 120ms cubic-bezier(0.34,1.56,0.64,1);
-webkit-tap-highlight-color: transparent;
}
.s1-final-upsell__item-add:active { transform: scale(0.85); }
.s1-final-upsell__item-add--on {
background: var(--s1-accent);
color: #fff;
}
.s1-final-upsell__confirm-btn { width: 100%; justify-content: center; }
.s1-final-upsell__actions { display: flex; flex-direction: column; gap: 8px; }
.s1-final-upsell__skip {
background: transparent;
border: none;
color: var(--s1-text);
font-size: 0.875rem;
opacity: 0.6;
cursor: pointer;
padding: 8px;
text-align: center;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ══════════════════════════════════════════════════════════════════════════
STICKY FILTER RAIL (glassmorphism) — spaja type-bar + kategorije u jedan
horizontalno-scrollabilan red. Aktivni state: underline + suptilan glow.
══════════════════════════════════════════════════════════════════════════ */
.s1-filter-rail {
position: sticky;
top: 56px; /* visina .s1-nav */
z-index: 50;
background: rgba(15, 18, 30, 0.62);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.s1-filter-rail__scroll {
display: flex;
align-items: center;
gap: var(--space-3);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 10px var(--container-pad);
max-width: var(--container-xl);
margin: 0 auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}
.s1-filter-rail__scroll::-webkit-scrollbar { display: none; }
.s1-filter-rail__sep {
flex-shrink: 0;
width: 1px;
height: 22px;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.22), transparent);
}
/* Reset unutarnjih kontejnera unutar rail-a (override starih pravila) */
.s1-filter-rail .s1-type-bar {
padding: 0; margin: 0; gap: 6px;
display: flex; flex-shrink: 0; max-width: none;
}
.s1-filter-rail .s1-tabs {
padding: 0; margin: 0; gap: 6px;
background: transparent; border: none;
flex-shrink: 0; overflow: visible;
}
/* Unificirani pill chip stil */
.s1-filter-rail .s1-type-btn,
.s1-filter-rail .s1-tab {
position: relative;
height: 32px;
padding: 0 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 100px;
color: var(--s1-text-soft);
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: none;
transform: none;
transition: background var(--dur-fast), color var(--dur-fast),
border-color var(--dur-fast), box-shadow var(--dur-fast),
transform 120ms ease;
}
.s1-filter-rail .s1-type-btn:hover,
.s1-filter-rail .s1-tab:hover {
background: rgba(255,255,255,0.12);
color: var(--s1-text);
border-color: rgba(255,255,255,0.18);
}
.s1-filter-rail .s1-type-btn:active,
.s1-filter-rail .s1-tab:active {
transform: scale(0.95);
}
.s1-filter-rail .s1-type-btn.active,
.s1-filter-rail .s1-tab.active {
background: var(--s1-btn);
color: var(--s1-btn-text);
border-color: transparent;
font-weight: 700;
box-shadow: 0 4px 14px rgba(229,62,62,0.38);
transform: none;
}
/* ─ EU Allergen Panel — responsive overrides ─ */
@media (min-width: 601px) {
.s1-apanel { padding: 0 var(--container-pad); margin-top: 8px; }
.s1-apanel__bar { padding: 14px 18px; }
.s1-apanel__legend-section { padding: 16px 18px 12px; }
.s1-apanel__filter-section { padding: 16px 18px 18px; }
.s1-apanel__filter-header { flex-wrap: nowrap; gap: unset; }
}
/* ============================================================
THEME-AWARE READABILITY OVERRIDES
Pretvara hardcoded #ff8a65 / #ffffff / #8a92a8 / #252b42
(originalno dizajnirane za default dark navy temu) u theme
varijable, da SVE teme — postojeće i premium — imaju ispravan
kontrast za cijene, alergene, kosaricu, upsell i modal.
============================================================ */
/* === CATEGORY HERO (iznad menija) === */
.s1-cat-hero { background: var(--s1-surface); border-color: var(--s1-border); }
.s1-cat-hero__icon-wrap {
background: var(--s1-surface-soft);
border-color: var(--s1-border);
color: var(--s1-accent);
}
.s1-cat-hero__label { color: var(--s1-accent); }
.s1-cat-hero__title { color: var(--s1-text); }
.s1-cat-hero__sub { color: var(--s1-text-soft); }
.s1-cat-hero__counter { background: var(--s1-surface-soft); color: var(--s1-text); }
.s1-cat-hero__counter svg { color: var(--s1-text-soft); }
/* === MODAL / ITEM DETAILS === */
.s1-modal { background: color-mix(in srgb, var(--s1-surface) 78%, transparent); }
.s1-modal__price, .s1-item-detail__price { color: var(--s1-accent); }
.s1-modal__title, .s1-item-detail__title { color: var(--s1-text); }
.s1-modal__desc, .s1-item-detail__desc { color: var(--s1-text-soft); }
/* === ALLERGEN PANEL (EU) === */
.s1-apanel__bar-icon { color: var(--s1-accent); }
.s1-apanel__bar-title { color: var(--s1-text); }
.s1-apanel__bar-badge { background: color-mix(in srgb, var(--s1-btn) 18%, transparent); color: var(--s1-btn); }
.s1-apanel__bar-chevron { color: var(--s1-text-soft); }
.s1-apanel__section-label { color: var(--s1-accent); }
.s1-apanel__legend-pill__num { color: var(--s1-text-soft); }
.s1-apanel__legend-pill__name { color: var(--s1-text); }
.s1-apanel__filter-title { color: var(--s1-text); }
.s1-apanel__filter-title svg { color: var(--s1-text-soft); }
.s1-apanel__filter-reset { color: var(--s1-text-soft); }
.s1-apanel__filter-reset:hover { color: var(--s1-text); }
.s1-apanel__filter-hint, .s1-apanel__filter-hidden-count { color: var(--s1-text-soft); }
.s1-apanel-chip { color: var(--s1-text); }
.s1-apanel-chip.active { background: color-mix(in srgb, var(--s1-btn) 12%, transparent); border-color: var(--s1-btn); }
.s1-asheet__title { color: var(--s1-text); }
.s1-asheet__sub { color: var(--s1-text-soft); }
.s1-asheet__name { color: var(--s1-text); }
.s1-asheet__code { color: var(--s1-text-soft); }
.s1-item-card__allerg-row:focus-visible { outline-color: var(--s1-accent); }
/* === CART PANEL === */
.s1-cart-panel, .s1-cart-drawer { background: var(--s1-bg-deep); color: var(--s1-text); }
.s1-cart-header, .s1-cart-footer { background: transparent; border-color: var(--s1-divider); }
.s1-cart-title, .s1-cart-header__title { color: var(--s1-text); }
.s1-cart-empty, .s1-cart-empty__title, .s1-cart-empty__sub { color: color-mix(in srgb, var(--s1-accent) 50%, transparent); }
.s1-cart-empty__title { color: var(--s1-text); }
.s1-cart-close-btn { background: color-mix(in srgb, var(--s1-accent) 10%, transparent); border-color: color-mix(in srgb, var(--s1-accent) 30%, transparent); color: var(--s1-accent); }
.s1-cart-close-btn:hover { background: color-mix(in srgb, var(--s1-accent) 20%, transparent); color: var(--s1-accent); }
.s1-cart-item { border-color: var(--s1-border); background: rgba(255, 255, 255, 0.03); }
.s1-cart-item__name { color: var(--s1-text); }
.s1-cart-item__price { color: var(--s1-accent); }
.s1-cart-item__qty-btn, .s1-cart-qty-btn { background: var(--s1-surface); color: var(--s1-text-soft); border-color: var(--s1-border); }
.s1-cart-item__qty-btn:hover, .s1-cart-qty-btn:hover { color: var(--s1-text); }
.s1-cart-total, .s1-cart-total__amount { color: var(--s1-accent); }
.s1-cart-total__label { color: var(--s1-text-soft); }
.s1-cart-subtotal { color: var(--s1-text-soft); }
.s1-pay-btn { background: var(--s1-surface-soft); color: var(--s1-text-soft); border-color: var(--s1-border); }
.s1-pay-btn.active { background: var(--s1-btn); color: var(--s1-btn-text); border-color: var(--s1-btn); }
.s1-pay-btn:hover:not(.active) { background: color-mix(in srgb, var(--s1-btn) 15%, transparent); color: var(--s1-text); border-color: color-mix(in srgb, var(--s1-btn) 40%, transparent); }
.s1-pay-btn.active .s1-pay-btn__icon { stroke: var(--s1-btn-text); }
.s1-pay-btn:hover:not(.active) .s1-pay-btn__icon { stroke: var(--s1-text); }
.s1-cart-remove-btn { color: var(--s1-text-soft); border-color: var(--s1-border); }
.s1-cart-remove-btn:hover { color: var(--s1-btn); border-color: var(--s1-btn); }
.s1-cart__closed-note { color: var(--s1-btn); border-left-color: var(--s1-btn); background: color-mix(in srgb, var(--s1-btn) 8%, transparent); }
/* === UPSELL === */
.s1-upsell, .s1-upsell-modal { background: var(--s1-bg-deep); color: var(--s1-text); }
.s1-upsell__title { color: var(--s1-text); }
.s1-upsell__sub, .s1-upsell__hint { color: var(--s1-text-soft); }
.s1-upsell__accent { color: var(--s1-accent); }
.s1-upsell-item-btn { background: var(--s1-surface); border-color: var(--s1-border); color: var(--s1-text); }
.s1-upsell-item-btn:hover { background: var(--s1-surface-soft); }
.s1-upsell-item-btn__name { color: var(--s1-text); }
.s1-upsell-item-btn__price { color: var(--s1-accent); }
.s1-upsell-add-btn, .s1-upsell__add { background: var(--s1-btn); color: var(--s1-btn-text); }
.s1-upsell__skip { color: var(--s1-text-soft); }
.s1-upsell__skip:hover { color: var(--s1-text); }
/* === WELCOME FEATURED PRICE === */
.s1-welcome__featured-item__price { color: var(--s1-accent); }
/* === ITEM CARD (grid) === */
.s1-item-card__price, .s1-price { color: var(--s1-accent); }
.s1-item-card__name, .s1-item-card__title { color: var(--s1-text); }
.s1-item-card__desc { color: var(--s1-text-soft); }
/* === SCROLLBAR === */
::-webkit-scrollbar-thumb:hover { background: var(--s1-surface); }
/* ============ ADMIN v2 — LAYOUT ============ */
/* Sidebar gradient background */
.s1-sidebar {
background: linear-gradient(180deg, var(--s1-bg-deep) 0%, var(--s1-bg) 100%);
}
/* Logo upgrade */
.s1-sidebar__logo {
font-size: 1.25rem;
}
.s1-sidebar__logo::after {
content: '';
display: block;
height: 2px;
width: 32px;
background: var(--s1-accent);
margin-top: var(--space-2);
border-radius: 2px;
opacity: 0.6;
}
/* Active nav item — visual indicator via ::before (see MOTION block) */
.s1-sidebar__nav-item.active {
padding-left: var(--space-3);
}
/* Nav item hover — translate + smooth transition */
.s1-sidebar__nav-item {
transition: background var(--dur-fast) var(--ease-smooth),
color var(--dur-fast) var(--ease-smooth),
transform 200ms var(--ease-smooth);
}
.s1-sidebar__nav-item:hover {
transform: translateX(2px);
}
/* Sidebar footer glass */
.s1-sidebar__footer {
background: var(--s1-surface-soft);
backdrop-filter: blur(8px);
}
/* Topbar upgrade — frosted glass */
.admin-topbar {
background: var(--s1-bg-deep);
backdrop-filter: blur(12px) saturate(1.4);
box-shadow: 0 1px 0 var(--s1-divider), 0 4px 16px rgba(0,0,0,0.15);
}
/* Page title */
#page-title {
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.02em;
}
/* Admin page hero block */
.admin-page-hero {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
background: var(--s1-surface-soft);
backdrop-filter: blur(20px) saturate(1.6);
border: 1px solid var(--s1-border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-6);
}
.admin-page-hero__icon {
font-size: 2.5rem;
opacity: 0.9;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: var(--s1-surface-soft);
border-radius: var(--radius-md);
border: 1px solid var(--s1-border);
flex-shrink: 0;
}
.admin-page-hero__title {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
}
.admin-page-hero__sub {
font-size: 0.9375rem;
color: var(--s1-text-soft);
margin-top: 2px;
}
.admin-page-hero__actions {
margin-left: auto;
display: flex;
gap: var(--space-3);
}
/* ============ ADMIN v2 — COMPONENTS ============ */
/* 1) STAT CARDS — glass upgrade (scoped to direct s1-stat-grid children) */
.s1-stat-grid > .s1-stat-card {
background: var(--s1-surface-soft);
backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
-webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
border: 1px solid rgba(255,255,255,0.16);
box-shadow:
0 8px 32px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.18);
position: relative;
overflow: hidden;
transition: transform var(--dur-normal) var(--ease-smooth),
box-shadow var(--dur-normal) var(--ease-smooth),
border-color var(--dur-normal);
}
.s1-stat-grid > .s1-stat-card:hover {
transform: translateY(-3px);
border-color: rgba(255,255,255,0.26);
box-shadow:
0 16px 48px rgba(0,0,0,0.45),
inset 0 2px 0 rgba(255,255,255,0.26);
}
.s1-stat-grid > .s1-stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--s1-accent);
opacity: 0.5;
transition: opacity var(--dur-normal);
z-index: 1;
}
.s1-stat-grid > .s1-stat-card:hover::before {
opacity: 1;
}
.s1-stat-grid > .s1-stat-card > .s1-stat-card__icon {
font-size: 1.5rem;
display: inline-flex;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.06);
border: 1px solid var(--s1-border);
margin-bottom: 0;
}
.s1-stat-grid > .s1-stat-card > .s1-stat-card__value {
font-size: 2.25rem;
font-weight: 700;
color: var(--s1-text);
line-height: 1;
font-variant-numeric: tabular-nums;
}
/* 2) TABLE — glass upgrade */
.s1-table-wrap {
background: var(--s1-surface-soft);
backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid var(--s1-border);
border-radius: var(--radius-lg);
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.s1-table th {
background: var(--s1-surface-soft);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--s1-text-soft);
border-bottom: 1px solid var(--s1-border);
padding: var(--space-4) var(--space-4);
}
.s1-table td {
padding: var(--space-4) var(--space-4);
border-bottom: 1px solid var(--s1-divider);
}
.s1-table tr {
transition: background var(--dur-fast) var(--ease-smooth);
}
.s1-table tr:hover td {
background: rgba(255,255,255,0.06);
}
/* 3) FORMS — glass upgrade */
.s1-input,
.s1-select,
.s1-textarea {
background: var(--s1-surface-soft);
backdrop-filter: blur(8px);
border: 1px solid var(--s1-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
transition: border-color var(--dur-fast),
background var(--dur-fast),
box-shadow var(--dur-fast);
}
.s1-input:focus,
.s1-select:focus,
.s1-textarea:focus {
border-color: var(--s1-accent);
background: rgba(255,255,255,0.08);
box-shadow: 0 0 0 3px rgba(var(--s1-accent-rgb, 255,165,134), 0.15);
outline: none;
}
.s1-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--s1-text-soft);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* 4) SEARCH — upgrade */
.s1-search {
position: relative;
display: flex;
align-items: center;
min-width: 280px;
}
.s1-search__icon {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--s1-text-soft);
font-size: 0.9rem;
}
.s1-search .s1-input {
padding-left: var(--space-8);
}
/* 5) BADGE ACCENT */
.s1-badge--accent {
background: rgba(var(--s1-accent-rgb, 255,165,134), 0.18);
color: var(--s1-accent);
border: 1px solid rgba(var(--s1-accent-rgb, 255,165,134), 0.35);
}
/* 6) DEV PRISTUP BOX */
.admin-dev-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4);
background: var(--s1-surface-soft);
backdrop-filter: blur(12px);
border: 1px solid var(--s1-border);
border-radius: var(--radius-md);
}
/* 7) EMPTY STATE — upgrade */
.s1-empty {
padding: var(--space-12) var(--space-6);
text-align: center;
background: rgba(255,255,255,0.03);
border: 1px dashed var(--s1-border);
border-radius: var(--radius-lg);
}
.s1-empty__icon {
font-size: 4rem;
opacity: 0.4;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}
/* 8) CATEGORIES ADMIN CARD (JS-generated) */
.s1-cat-card-admin {
padding: var(--space-5);
background: var(--s1-surface-soft);
backdrop-filter: blur(20px) saturate(1.6);
border: 1px solid var(--s1-border);
border-radius: var(--radius-lg);
transition: all var(--dur-normal) var(--ease-smooth);
}
.s1-cat-card-admin:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,0.2);
}
/* Dashboard category quick cards — distinct from stat-cards */
#dash-cat-grid > .s1-stat-card {
background: var(--s1-surface-soft);
backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid var(--s1-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
overflow: visible;
transition: transform var(--dur-normal) var(--ease-smooth),
border-color var(--dur-normal);
}
#dash-cat-grid > .s1-stat-card::before {
content: none;
}
#dash-cat-grid > .s1-stat-card:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,0.2);
}
#dash-cat-grid > .s1-stat-card > p {
margin: 0;
margin-top: var(--space-2);
}
/* ============ ADMIN v2 — MOTION & FINISH ============ */
/* 2) SIDEBAR NAV — stagger entrance */
.s1-sidebar__nav-item {
animation: s1-enter-anim var(--dur-normal) var(--ease-out-expo) both;
}
.s1-sidebar__nav-item:nth-child(1) { animation-delay: 0ms; }
.s1-sidebar__nav-item:nth-child(2) { animation-delay: 25ms; }
.s1-sidebar__nav-item:nth-child(3) { animation-delay: 50ms; }
.s1-sidebar__nav-item:nth-child(4) { animation-delay: 75ms; }
.s1-sidebar__nav-item:nth-child(5) { animation-delay: 100ms; }
.s1-sidebar__nav-item:nth-child(6) { animation-delay: 125ms; }
.s1-sidebar__nav-item:nth-child(7) { animation-delay: 150ms; }
.s1-sidebar__nav-item:nth-child(8) { animation-delay: 175ms; }
/* 3) STAT CARD VALUE — tabular-nums + pop */
.s1-stat-card__value {
font-variant-numeric: tabular-nums;
transition: transform 200ms var(--ease-spring);
}
.s1-stat-card__value.s1-pop {
animation: s1-stat-pop 400ms var(--ease-spring);
}
@keyframes s1-stat-pop {
0% { transform: scale(1); }
40% { transform: scale(1.08); }
100% { transform: scale(1); }
}
/* 4) BUTTON SHEEN — removed (position:relative/overflow:hidden can break modal-form layout) */
/* 5) SIDEBAR NAV ACTIVE — ::before animated indicator */
.s1-sidebar__nav-item {
position: relative;
}
.s1-sidebar__nav-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scaleY(0);
width: 3px;
height: 60%;
background: var(--s1-accent);
border-radius: 0 2px 2px 0;
transition: transform 250ms var(--ease-spring);
transform-origin: center;
}
.s1-sidebar__nav-item.active::before {
transform: translateY(-50%) scaleY(1);
}
/* Page transitions — only direct children of .admin-main */
.admin-main > [id^="page-"] {
animation: admin-page-in 400ms var(--ease-out-expo) both;
}
@keyframes admin-page-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* 7) MODAL OVERLAY — admin blur */
.s1-modal-overlay {
backdrop-filter: blur(8px) saturate(1.2);
-webkit-backdrop-filter: blur(8px) saturate(1.2);
}
/* 8) MOBILE — mobile-first off-canvas sidebar */
.s1-sidebar {
position: fixed;
left: -280px;
top: 0;
bottom: 0;
z-index: 200;
transition: left 300ms var(--ease-out-expo);
box-shadow: 4px 0 24px rgba(0,0,0,0.4);
}
.s1-sidebar.is-open {
left: 0;
}
.admin-content { width: 100%; }
.admin-page-hero {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.admin-page-hero__actions {
margin-left: 0;
width: 100%;
}
/* Very small screens: stat-grid 1 column */
.s1-stat-grid { grid-template-columns: 1fr; }
@media (min-width: 541px) {
.s1-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 901px) {
.s1-sidebar {
position: sticky;
left: auto;
top: 0;
bottom: auto;
z-index: auto;
transition: none;
box-shadow: none;
}
.admin-content { width: auto; }
.admin-topbar { padding: 0 var(--space-8); }
.admin-main { padding: clamp(1.5rem, 3vw, 2.5rem); }
.admin-page-hero { flex-direction: row; align-items: center; gap: var(--space-4); }
.admin-page-hero__actions { margin-left: auto; width: auto; }
.s1-stat-grid { grid-template-columns: repeat(4, 1fr); }
}
/* 9) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* 10) SCROLLBAR POLISH */
.admin-content::-webkit-scrollbar {
width: 10px;
}
.admin-content::-webkit-scrollbar-track {
background: transparent;
}
.admin-content::-webkit-scrollbar-thumb {
background: var(--s1-border);
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
}
.admin-content::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.2);
background-clip: padding-box;
}
/* Defensive: prevent accidental pseudo-elements over stat card text — removed, no longer needed */
/* =============================================================
ICON SYSTEM — Lucide SVG + FontAwesome utility classes
All sizes/colours driven by --s1-icon-* CSS variables.
Usage:
Lucide :
FA :
============================================================= */
/* Lucide: base styling applied to every rendered