/**
* Start Order System - CSS
* Modern, minimal, full-screen design
*
* @package Food_Butik_Customizations
* @since 2.0.0
*/
/* ============================================
CSS VARIABLES
============================================ */
:root {
/* Colors */
--so-primary: var(--primary-color, #2563eb);
--so-primary-dark: #1d4ed8;
--so-primary-light: #3b82f6;
--so-bg-dark: #0f172a;
--so-bg-light: #f8f9fa;
--so-text-primary: #1e293b;
--so-text-secondary: #64748b;
--so-text-muted: #94a3b8;
--so-success: #059669;
--so-warning: #f59e0b;
--so-error: #dc2626;
--so-border: #e5e7eb;
/* Spacing */
--so-space-xs: 4px;
--so-space-sm: 8px;
--so-space-md: 12px;
--so-space-lg: 16px;
--so-space-xl: 20px;
--so-space-2xl: 24px;
--so-space-3xl: 32px;
--so-space-4xl: 48px;
/* Border Radius */
--so-radius-sm: 8px;
--so-radius-md: 12px;
--so-radius-lg: 16px;
--so-radius-xl: 20px;
--so-radius-2xl: 24px;
}
/* ============================================
BASE STYLES
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* When the Start Order template is active, body itself carries the
.start-order-page class and is locked to the viewport. Some themes/
plugins still leave residual content on (analytics tags,
skip-link landmarks, hidden admin bar shims) or push to a
default block layout that overflows past 100vh and produces a
phantom right-edge scrollbar. Pin both ends defensively.
Two selectors so we don't depend on :has() alone — if a browser
doesn't fire :has() (or one of the content scripts wraps body in a
container that breaks the dependency), the [data-start-order] hook
we set from JS still kicks in. */
html:has(body.start-order-page),
html[data-start-order] {
height: 100vh;
overflow: hidden;
}
body.start-order-page {
overflow: hidden !important;
}
.start-order-page {
font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
background: var(--so-bg-dark);
overflow: hidden;
height: 100vh;
position: fixed;
width: 100%;
}
/* Logo - Simple inline design */
.step-method .start-order-logo {
display: block;
position: relative;
text-align: center;
margin: 45px 0 115px;
background: transparent;
border-radius: 0;
box-shadow: none;
transition: all 0.3s ease;
}
.step-method .start-order-logo:hover {
transform: translateY(-2px);
opacity: 0.9;
}
.step-method .start-order-logo img {
display: block;
max-height: 75px;
width: auto;
max-width: 200px;
margin: 0 auto;
transition: all 0.3s ease;
}
/* Logo on location step - inline with back button */
.step-location .start-order-logo {
position: static;
transform: none;
padding: 0;
background: transparent;
box-shadow: none;
max-width: 120px;
margin: 0;
}
.step-location .start-order-logo img {
max-height: 32px;
max-width: 120px;
}
/* Theme-aware logo variants.
* The template renders both ![]()
and ![]()
* when the admin has uploaded separate logos. We toggle visibility based on the
* body's current theme class so runtime theme-toggle swaps the logo with no
* re-render. When only one logo exists (no .has-theme-split class on parent),
* the single ![]()
stays visible unconditionally.
*/
.start-order-logo.has-theme-split .start-order-logo__img {
display: none;
}
body.theme-dark .start-order-logo.has-theme-split .start-order-logo__img[data-theme="dark"],
body.theme-light .start-order-logo.has-theme-split .start-order-logo__img[data-theme="light"] {
display: block;
}
/* Hide WordPress admin bar */
.start-order-page #wpadminbar {
display: none !important;
}
.start-order-page.admin-bar {
margin-top: 0 !important;
}
.start-order-container {
width: 100%;
min-height: 100vh;
position: relative;
}
/* ============================================
LOADING SCREEN
============================================ */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--so-bg-dark);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.loading-screen.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-screen p {
margin-top: 16px;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
/* ============================================
ADDRESS BANNER
============================================ */
.address-banner {
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, var(--so-primary) 0%, var(--so-primary-light) 100%);
padding: var(--so-space-md) var(--so-space-lg);
border-radius: var(--so-radius-md);
margin-bottom: var(--so-space-lg);
animation: slideDown 0.3s ease;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.address-banner-icon {
font-size: 20px;
flex-shrink: 0;
}
.address-banner-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.address-label {
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.address-text {
font-size: 14px;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.address-change-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
color: #fff;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.address-change-btn:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.4);
}
.address-change-btn svg {
width: 14px;
height: 14px;
}
/* Mobile responsive */
@media (max-width: 640px) {
.address-banner {
padding: 10px 12px;
gap: 10px;
}
.address-banner-icon {
font-size: 18px;
}
.address-text {
font-size: 13px;
}
.address-change-btn {
padding: 6px 10px;
font-size: 12px;
}
.address-change-btn span {
display: none;
}
}
/* ============================================
STEP CONTAINER
============================================ */
.step-method {
padding-top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.step {
display: none;
height: 100vh;
padding: 0;
/* Remove padding for full-screen hero */
animation: fadeIn 0.4s ease;
overflow: hidden;
}
.step.active {
display: block;
}
.step-location {
/* Bottom padding is intentionally small in the resting state — the
80px reservation that used to live here was for the continue-bar,
but the bar is hidden until the user actually picks a branch. With
step-location pinned to min-height 100vh + overflow-y:auto, that
extra 80px alone was enough to push small content past the
viewport edge and produce a phantom scrollbar even on pages with
a single card. Bumped back up by the :has() rule below only while
the continue-bar is actually on screen. */
padding: 32px 24px 32px;
overflow-y: auto;
/* Only location step can scroll */
width: 100%;
}
/* When the continue-bar is visible, restore the bottom buffer so the
last card isn't hidden behind the bar. CSS variable kept in sync by
updateContinueBarHeight() in start-order.js. */
body:has(.continue-bar.visible) .step-location {
padding-bottom: calc(var(--fb-continue-bar-h, 92px) + 24px);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.step-content {
max-width: 1440px;
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
/* Method Panel - No background, full width */
.method-panel {
background: transparent;
border-radius: 0;
padding: 0;
max-width: 900px;
margin: 0 auto;
box-shadow: none;
position: relative;
z-index: 100;
}
.step-header {
text-align: center;
margin-bottom: 48px;
position: relative;
z-index: 100;
padding: 0;
}
.step-header::after {
display: none;
}
.step-title {
font-size: 36px;
font-weight: 700;
color: #ffffff;
margin: 0 0 12px 0;
line-height: 1.2;
letter-spacing: -1px;
}
.step-subtitle {
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
font-weight: 400;
max-width: 600px;
margin: 0 auto;
padding: 0;
background: transparent;
border-radius: 0;
display: block;
border: none;
}
/* ============================================
METHOD SELECTION (STEP 1)
============================================ */
/* Method Cards Container - Grid layout */
.method-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
width: 100%;
margin: 0;
padding: 0;
position: relative;
z-index: 100;
}
/* Remove bottom band */
.step-method::after {
display: none;
}
.method-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 48px 32px;
text-align: center;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: visible;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 260px;
}
.method-card::before {
display: none;
}
/* =====================
RESPONSIVE
===================== */
@media (max-width: 1024px) {
.method-panel {
max-width: 700px;
}
.step-header {
margin-bottom: 36px;
}
.step-title {
font-size: 30px;
}
.method-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--so-space-lg);
}
.method-card {
min-height: 220px;
padding: 36px 24px;
}
.method-icon {
width: 60px;
height: 60px;
}
.method-icon svg {
width: 44px;
height: 44px;
}
.method-title {
font-size: 17px;
}
}
@media (max-width: 768px) {
.step-method {
padding: 20px 16px;
overflow-y: auto;
}
.step-method .start-order-logo {
margin: 16px 0 20px;
}
.step-method .start-order-logo img {
max-height: 48px;
max-width: 140px;
}
.method-panel {
max-width: 100%;
}
.step-header {
margin-bottom: 20px;
}
.step-title {
font-size: 22px;
margin-bottom: 6px;
}
.step-subtitle {
font-size: 13px;
}
/* Mobile: stacked rows but compact — icon left, content right; all 3 fit on a phone screen */
/* Compound selectors used to outrank the base rules (.method-title, .method-card-content)
that are defined later in the file with text-align:center / align-items:center. */
.method-grid {
grid-template-columns: 1fr;
gap: 10px;
max-width: 100%;
}
.method-grid .method-card {
min-height: 0;
padding: 12px 14px;
flex-direction: row;
align-items: center;
justify-content: flex-start;
text-align: left;
border-radius: 14px;
gap: 14px;
}
.method-card .method-icon {
margin: 0;
width: 40px;
height: 40px;
flex-shrink: 0;
}
.method-card .method-card-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
flex: 1;
min-width: 0;
}
.method-card .method-title {
font-size: 15px;
text-align: left;
margin: 0;
line-height: 1.2;
width: 100%;
}
.method-card .method-description {
text-align: left;
margin: 0;
max-width: none;
line-height: 1.3;
/* Truncate to single line so the row stays compact */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.method-card .method-availability {
margin-top: 4px;
padding: 2px 8px;
white-space: nowrap;
align-self: flex-start;
}
}
.method-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.2);
}
.method-card:active {
transform: translateY(-4px);
transition-duration: 0.1s;
}
.method-card.selected {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.3);
}
.method-card.selected .method-icon {
transform: scale(1.05);
}
.method-card.selected .method-title {
color: #ffffff;
}
.method-icon {
width: 72px;
height: 72px;
margin: 0 0 24px 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border-radius: 0;
transition: all 0.25s ease;
position: relative;
flex-shrink: 0;
}
.method-icon svg {
width: 56px;
height: 56px;
color: rgba(255, 255, 255, 0.85);
transition: all 0.25s ease;
}
.method-card:hover .method-icon svg {
color: #ffffff;
transform: scale(1.08);
}
.method-title {
font-size: 18px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
margin: 0;
letter-spacing: 0;
transition: all 0.25s ease;
width: 100%;
text-align: center;
line-height: 1.3;
}
.method-card:hover .method-title {
color: #ffffff;
}
/* Method Card Content wrapper */
.method-card-content {
display: flex;
flex-direction: column;
align-items: center;
}
/* Method Description - Visible on desktop */
.method-description {
font-size: 14px;
/* WCAG AA: lifted from 0.55 → 0.75 for readable contrast on dark bg. */
color: rgba(255, 255, 255, 0.75);
margin: 8px 0 0 0;
line-height: 1.4;
text-align: center;
max-width: 180px;
}
.method-card:hover .method-description {
color: rgba(255, 255, 255, 0.92);
}
/* Method Availability Badge */
.method-availability {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 4px 10px 4px 8px;
font-size: 12px;
font-weight: 600;
color: #22c55e;
background: rgba(34, 197, 94, 0.1);
border-radius: 20px;
letter-spacing: 0.3px;
}
.method-availability::before {
content: '';
width: 6px;
height: 6px;
background: #22c55e;
border-radius: 50%;
animation: pulse-dot 1.5s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes pulse-dot {
0%,
100% {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
}
50% {
opacity: 0.7;
transform: scale(1.2);
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
}
}
.method-card:hover .method-availability {
background: rgba(34, 197, 94, 0.15);
}
/* Optional info line - Modern design */
.method-info-line {
position: fixed;
left: 0;
right: 0;
bottom: 48px;
z-index: 99;
text-align: center;
padding: 0 24px;
}
.method-info-line span {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: #94a3b8;
background: transparent;
padding: 0;
border-radius: 0;
box-shadow: none;
border: none;
}
/* ============================================
LOCATION SELECTION (STEP 2)
============================================ */
/* No Locations Available Warning */
.no-locations-warning {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 3px solid #f59e0b;
border-radius: 24px;
padding: 48px 32px;
margin: 0 auto 32px;
max-width: 700px;
text-align: center;
box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2);
animation: slideDown 0.5s ease;
}
.warning-icon-large {
width: 80px;
height: 80px;
background: #f59e0b;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}
.warning-icon-large svg {
width: 48px;
height: 48px;
color: #fff;
}
.no-locations-warning h3 {
font-size: 28px;
font-weight: 800;
color: #92400e;
margin: 0 0 16px 0;
letter-spacing: -0.5px;
}
.no-locations-warning p {
font-size: 16px;
color: #78350f;
margin: 0 0 12px 0;
line-height: 1.6;
}
.no-locations-warning p:last-of-type {
margin-bottom: 32px;
}
.no-locations-warning .suggestion {
font-size: 17px;
font-weight: 600;
color: #92400e;
}
.warning-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.warning-actions button {
padding: 14px 28px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}
.btn-secondary {
background: #fff;
color: #92400e;
border: 2px solid #f59e0b;
}
.btn-secondary:hover {
background: #fef3c7;
transform: translateY(-2px);
}
/* Delivery Warning Banner */
.delivery-warning-banner {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
border: 2px solid #fca5a5;
border-radius: 16px;
padding: 20px 24px;
margin: 0 auto 28px;
display: flex;
align-items: flex-start;
gap: 16px;
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.15);
animation: slideDownWarning 0.4s ease;
}
@keyframes slideDownWarning {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.warning-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background: #dc2626;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.warning-icon svg {
width: 28px;
height: 28px;
color: #fff;
}
.warning-content {
flex: 1;
}
.warning-content h4 {
font-size: 18px;
font-weight: 700;
color: #991b1b;
margin: 0 0 8px 0;
}
.warning-content p {
font-size: 15px;
color: #7f1d1d;
margin: 0 0 8px 0;
line-height: 1.5;
}
.warning-content p:last-child {
margin-bottom: 0;
}
.warning-suggestion {
font-weight: 600;
color: #991b1b;
}
.warning-close {
flex-shrink: 0;
width: 32px;
height: 32px;
background: rgba(220, 38, 38, 0.1);
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.warning-close:hover {
background: #dc2626;
}
.warning-close svg {
width: 18px;
height: 18px;
color: #dc2626;
}
.warning-close:hover svg {
color: #fff;
}
/* Compact Header Layout */
.location-header-compact {
background: #fff;
border-radius: 20px;
padding: 20px 28px;
margin-bottom: 28px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
border: 2px solid #f1f5f9;
}
.header-top {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 20px;
}
.header-title-group {
flex: 1;
}
.header-title-group .step-title {
font-size: 28px;
font-weight: 800;
color: #1e293b;
margin: 0;
line-height: 1.2;
letter-spacing: -1px;
}
.back-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
/* WCAG 2.5.5 / iOS HIG: 44px minimum tap target. */
min-height: 44px;
min-width: 44px;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.2s ease;
box-shadow: none;
flex-shrink: 0;
}
.back-button:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.back-button svg {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}
.back-button:hover svg {
transform: translateX(-2px);
}
/* Search input wrapper */
.search-input-wrapper {
flex: 1;
position: relative;
transition: all 0.3s ease;
}
.search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: rgba(255, 255, 255, 0.4);
pointer-events: none;
}
.search-input.pulse-highlight {
animation: pulse-border 0.6s ease-in-out 3;
}
@keyframes pulse-border {
0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
50% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3); }
}
.search-input {
width: 100% !important;
padding: 12px 48px 12px 42px !important;
border: none !important;
border-radius: 8px !important;
font-size: 14px !important;
transition: all 0.2s ease !important;
background: transparent;
font-weight: 400 !important;
/* Dark theme is the default (start-order-page starts as theme-dark
unless user toggles). Without an explicit color, browsers render
input text as black — unreadable against the dark search container.
.theme-light override below resets it to slate when light is active. */
color: #f1f5f9;
}
.search-input:focus {
outline: none;
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.4);
font-weight: 400;
}
.clear-search {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.1);
border: none;
cursor: pointer;
padding: 6px;
color: rgba(255, 255, 255, 0.6);
transition: all 0.2s ease;
border-radius: 50%;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
}
.clear-search:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.clear-search svg {
width: 16px;
height: 16px;
}
.locate-btn {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
padding: 10px 14px;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
}
.locate-btn:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
}
.locate-btn svg {
width: 18px;
height: 18px;
}
.locate-btn.loading {
opacity: 0.7;
pointer-events: none;
}
.locate-btn.loading svg {
animation: spin 1s linear infinite;
}
/* Map Container - Only show for delivery */
.map-container {
width: 100%;
height: 350px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
margin-bottom: 32px;
display: none;
/* Hidden by default */
}
/* Show map only when delivery method is selected */
body[data-selected-method="delivery"] .map-container {
display: block;
}
.google-map {
width: 100%;
height: 100%;
}
.map-overlay-info {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: #fff;
padding: 12px 24px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 10;
}
.map-info-text {
font-size: 14px;
color: #1a1a1a;
font-weight: 500;
}
/* Locations List */
.locations-section {
width: 100%;
margin: 0 auto;
}
/* Location Header Top - Back + Logo */
.location-header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.location-step-title {
font-size: 24px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 8px 0;
letter-spacing: -0.5px;
}
/* Search Bar Row - Always visible for delivery */
.search-bar-row {
display: flex;
gap: 8px;
background: #1a2332;
border-radius: 12px;
padding: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 12px;
}
.search-bar-row:focus-within {
border-color: rgba(255, 255, 255, 0.2);
}
/* Legacy classes kept for JS compatibility */
.search-bar-container {
display: none;
}
.search-bar-container.active {
display: flex;
}
.view-tabs.hidden {
display: none;
}
/* Search Toggle Button - Hidden (no longer needed) */
.search-toggle-btn {
display: none;
}
/* Toggle icon visibility */
.search-toggle-btn .icon-close {
display: none;
}
.search-toggle-btn.active .icon-search {
display: none;
}
.search-toggle-btn.active .icon-close {
display: block;
}
/* Simple Title */
.locations-simple-title {
font-size: 15px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
margin: 0 0 20px 0;
letter-spacing: 0;
}
/* Compact Controls Row */
.locations-controls {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
width: 100%;
}
/* View Tabs - Dark Theme Style */
.view-tabs {
display: flex;
gap: 0;
flex: 1;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 4px;
}
.view-tab {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
background: transparent;
border: none;
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 0.2s ease;
flex: 1;
border-radius: 8px;
}
.view-tab:first-child {
border-radius: 8px;
border-right: none;
}
.view-tab:last-child {
border-radius: 8px;
border-left: none;
}
.view-tab svg {
width: 18px;
height: 18px;
}
.view-tab:hover {
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.05);
}
.view-tab.active {
background: #2563eb;
color: #fff;
border-color: #2563eb;
z-index: 1;
}
.view-tab.active svg {
color: #fff;
}
/* View Content */
.view-content {
display: none;
width: 100%;
}
.view-content.active {
display: block;
}
/* Map View */
.locations-map {
width: 100%;
height: calc(100vh - 280px);
min-height: 500px;
max-height: 800px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
position: relative;
}
/* Google Maps InfoWindow - remove ALL default padding so image is flush */
.gm-style-iw-d {
overflow: hidden !important;
padding: 0 !important;
}
.gm-style-iw.gm-style-iw-c {
padding: 0 !important;
padding-top: 0 !important;
border-radius: 12px !important;
overflow: hidden !important;
}
/* Remove the inner content header padding */
.gm-style-iw-ch {
padding-top: 0 !important;
}
/* Hide Google Maps default close button only when custom one exists (image present) */
.gm-style-iw:has(.so-infowindow-has-image) button.gm-ui-hover-effect {
display: none !important;
}
.locations-list {
display: grid;
/* minmax(0, 1fr) instead of plain 1fr — `1fr` is shorthand for
`minmax(auto, 1fr)` and `auto` resolves to the column's min-content,
so a card with wider unbreakable text (e.g. the coming-soon overlay
pill) inflates its own column and shrinks its neighbours. Pinning
the min to 0 forces truly equal-width tracks. */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
/* Tablet: 2 columns */
@media (max-width: 1024px) {
.locations-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.location-card {
background: #fff;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
/* Pair with the grid's minmax(0, 1fr) — without this, an unbreakable
child (like the "ÇOK YAKINDA" overlay pill) would still inflate
the card past its 1fr share. */
min-width: 0;
}
.location-thumb {
overflow: hidden;
border-radius: 10px;
margin-bottom: 12px;
background: #f3f4f6;
}
.location-thumb img {
display: block;
width: 100%;
height: 140px;
object-fit: cover;
}
.location-thumb-placeholder {
width: 100%;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
background: #f3f4f6;
color: #9ca3af;
overflow: hidden;
}
.location-thumb-placeholder .food-icon {
width: 30px;
height: 30px;
flex-shrink: 0;
opacity: 0.55;
transform: rotate(var(--rot, 0deg));
}
.location-thumb-placeholder .food-icon--pizza { --rot: -6deg; }
.location-thumb-placeholder .food-icon--burger { --rot: 3deg; }
.location-thumb-placeholder .food-icon--fries { --rot: -3deg; }
.location-thumb-placeholder .food-icon--drink { --rot: 6deg; }
@media (max-width: 480px) {
.location-thumb-placeholder { gap: 10px; }
.location-thumb-placeholder .food-icon { width: 24px; height: 24px; }
}
/* Skeleton state */
.location-card.skeleton {
pointer-events: none;
border-color: #f3f4f6;
}
.location-card.skeleton .location-name,
.location-card.skeleton .location-distance,
.location-card.skeleton .location-address,
.location-card.skeleton .location-status {
visibility: hidden;
position: relative;
}
.location-card.skeleton .location-name::after,
.location-card.skeleton .location-distance::after,
.location-card.skeleton .location-address::after,
.location-card.skeleton .location-status::after {
content: '';
position: absolute;
inset: 0;
visibility: visible;
border-radius: var(--so-radius-sm);
background: linear-gradient(90deg, #f3f4f6 25%, var(--so-border) 37%, #f3f4f6 63%);
background-size: 400% 100%;
animation: fb-skeleton-shimmer 1.4s ease infinite;
}
@keyframes fb-skeleton-shimmer {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
.location-card:hover {
border-color: var(--so-primary);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.1);
}
/* Selected location — unmistakable visual feedback.
- Primary-tinted background (color-mix adapts automatically to theme)
- Primary-color ring that extends beyond the card
- Lift + colored shadow so the card visibly "pops"
- ::after pseudo-element renders a checkmark badge in the top-left,
no DOM change needed. */
.location-card.selected {
border-color: var(--primary-color, #2563eb) !important;
background: color-mix(in srgb, var(--primary-color, #2563eb) 6%, #ffffff);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--primary-color, #2563eb) 18%, transparent),
0 18px 36px -14px color-mix(in srgb, var(--primary-color, #2563eb) 40%, transparent),
0 6px 14px -6px rgba(15, 23, 42, 0.12);
transform: translateY(-3px);
z-index: 2; /* ensure ring isn't clipped by siblings */
}
/* Top-left checkmark badge — solid primary circle with white tick.
Positioned top-left so it doesn't collide with the existing favorite
star button in the top-right corner. */
.location-card.selected::after {
content: '';
position: absolute;
top: 12px;
left: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--primary-color, #2563eb)
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
center / 18px 18px no-repeat;
box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--primary-color, #2563eb) 50%, transparent);
animation: soSelectedPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
z-index: 3;
}
@keyframes soSelectedPop {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.15); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* Dark theme: lift the tinted background a touch + force legible text
colors. The default .location-name/.location-address are dark grey
(#1f2937 / #6b7280) which vanish against the primary-tinted dark
selected background. */
body.theme-dark .location-card.selected {
background: color-mix(in srgb, var(--primary-color, #2563eb) 15%, #1e293b);
}
body.theme-dark .location-card.selected .location-name,
body.theme-dark .location-card.selected .loc-hero-title,
body.theme-dark .location-card.selected .locations-title {
color: #f8fafc;
}
body.theme-dark .location-card.selected .location-address,
body.theme-dark .location-card.selected .location-hours,
body.theme-dark .location-card.selected .location-distance,
body.theme-dark .location-card.selected .locations-count {
color: rgba(248, 250, 252, 0.82);
}
/* Distance chip background needs a touch more contrast in the tinted state. */
body.theme-dark .location-card.selected .location-distance {
background: color-mix(in srgb, var(--primary-color, #2563eb) 25%, transparent);
}
/* Info button in dark tinted card — make sure icon stays visible. */
body.theme-dark .location-card.selected .location-info-btn {
background: rgba(255, 255, 255, 0.12);
color: #f8fafc;
}
body.theme-dark .location-card.selected .location-info-btn:hover {
background: rgba(255, 255, 255, 0.22);
}
/* Reduced motion: drop the bounce + lift, keep the visual ring & badge. */
@media (prefers-reduced-motion: reduce) {
.location-card.selected {
transform: none;
}
.location-card.selected::after {
animation: none;
}
}
.location-card.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.location-card.closed {
opacity: 0.7;
background: #f9fafb;
border-color: #d1d5db;
cursor: not-allowed;
position: relative;
}
.location-card.closed:hover {
border-color: #d1d5db;
transform: none;
box-shadow: none;
}
/* Coming-soon: tinted card with a clear "Çok yakında" treatment so it
reads as upcoming/exciting rather than as a temporary closure. Uses
a teal palette so it's distinct from amber (favorite) and red
(closed) — and stays away from purple tones. */
.location-card.coming-soon {
background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
border-color: #5eead4;
cursor: pointer;
position: relative;
}
.location-card.coming-soon:hover {
border-color: #14b8a6;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(13, 148, 136, 0.18);
}
.coming-soon-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(240, 253, 250, 0.55);
backdrop-filter: blur(1px);
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
z-index: 5;
pointer-events: none;
}
.coming-soon-overlay span {
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
color: #fff;
padding: 8px 20px;
border-radius: 20px;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.2px;
box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35);
}
.location-status.coming-soon,
.status-badge.coming-soon {
background: rgba(20, 184, 166, 0.12);
color: #0f766e;
}
.location-status.coming-soon .location-status-dot {
background: #14b8a6;
}
.location-hours.coming-soon-date {
color: #0f766e;
font-weight: 600;
}
.loc-info-coming-soon {
margin: 12px 0;
padding: 14px 14px 12px;
border-radius: 12px;
background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
border: 1px solid #5eead4;
}
.loc-info-coming-soon-headline {
display: flex;
align-items: flex-start;
gap: 10px;
color: #0f766e;
font-weight: 600;
font-size: 14px;
line-height: 1.4;
}
.loc-info-coming-soon-headline svg {
flex-shrink: 0;
margin-top: 1px;
color: #14b8a6;
}
.loc-info-coming-soon-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed rgba(20, 184, 166, 0.35);
color: #0f766e;
font-size: 13px;
}
.loc-info-coming-soon-row svg {
flex-shrink: 0;
color: #14b8a6;
}
.loc-info-coming-soon-note {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed rgba(20, 184, 166, 0.35);
font-size: 13px;
color: #4b5563;
line-height: 1.5;
}
.closed-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
z-index: 5;
pointer-events: none;
}
.closed-overlay span {
background: #ef4444;
color: white;
padding: 8px 20px;
border-radius: 20px;
font-weight: 600;
font-size: 14px;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.location-card.is-favorite {
border-color: #f59e0b;
background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
}
.favorite-btn {
position: absolute;
top: 12px;
right: 12px;
/* WCAG 2.5.5 / iOS HIG: 44x44 minimum touch target.
* Inner SVG (20x20) stays visually the same — extra space is padding. */
width: 44px;
height: 44px;
padding: 12px;
box-sizing: border-box;
border: none;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.favorite-btn:hover {
background: #fff;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.favorite-btn svg {
width: 20px;
height: 20px;
color: #9ca3af;
transition: all 0.2s ease;
}
.favorite-btn.active svg {
color: #f59e0b;
fill: #f59e0b;
}
.favorite-btn.loading {
opacity: 0.6;
pointer-events: none;
}
.favorite-btn.loading svg {
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.location-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
gap: 12px;
}
.location-info-btn {
border: none;
background: #f3f4f6;
color: #6b7280;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .2s ease;
}
.location-info-btn:hover {
background: #e5e7eb;
}
.location-name {
font-size: 18px;
font-weight: 600;
color: #1f2937;
flex: 1;
min-width: 0; /* allow ellipsis when inline status takes space */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.location-distance {
font-size: 13px;
color: #6b7280;
margin-top: 0;
display: flex;
align-items: center;
gap: 4px;
}
.location-address {
font-size: 14px;
color: #6b7280;
margin-top: 8px;
line-height: 1.4;
/* Cap address at 2 lines so cards line up across the grid — long
multi-segment addresses used to spill onto a third line and shift
the rest of the card down. */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.location-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}
.location-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
padding: 4px 10px;
border-radius: 12px;
}
/* Compact variant — shown inline next to the location name in the header.
Slightly smaller font & padding so it sits nicely beside the title
without dominating, and flex-shrink:0 so the name can still ellipsize. */
.location-status.location-status--inline {
font-size: 11px;
padding: 2px 8px;
gap: 4px;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.location-status.location-status--inline .location-status-dot {
width: 5px;
height: 5px;
}
.location-status.open {
color: #059669;
background: #d1fae5;
}
.location-status.closing {
color: #b45309;
background: #ffedd5;
}
.location-status.closed {
color: #dc2626;
background: #fee2e2;
}
.location-hours {
font-size: 13px;
color: #6b7280;
margin-top: 6px;
display: flex;
align-items: center;
gap: 4px;
}
.soon-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.soon-badge.closing {
color: #b45309;
background: #ffedd5;
}
.soon-badge.opening {
color: #1d4ed8;
background: #dbeafe;
}
.location-distance-warning {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
padding: 4px 8px;
border-radius: 12px;
color: #d97706;
background: #fef3c7;
cursor: help;
}
/* Distance tier badge — three absolute bands (≤5 km / 5–15 km / >15 km).
Replaces the old delivery-polygon-relative "Near limit" warning so the
pill makes sense for takeaway / dine-in too. */
.location-distance-tier {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 12px;
line-height: 1.2;
}
.location-distance-tier-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.location-distance-tier.close {
color: #047857;
background: #d1fae5;
}
.location-distance-tier.far {
color: #b45309;
background: #fef3c7;
}
.location-distance-tier.very-far {
color: #b91c1c;
background: #fee2e2;
}
.no-locations {
text-align: center;
padding: 60px 20px;
color: #666;
}
.no-locations svg {
width: 64px;
height: 64px;
color: #d1d5db;
margin-bottom: 16px;
}
.no-locations p {
font-size: 16px;
}
/* Modal */
.fb-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.fb-modal {
background: #fff;
border-radius: 16px;
width: 100%;
max-width: 560px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.fb-modal-close {
position: absolute;
top: 10px;
right: 12px;
width: 36px;
height: 36px;
border: none;
background: #f3f4f6;
color: #111827;
font-size: 22px;
border-radius: 8px;
cursor: pointer;
z-index: 10;
}
.fb-modal-close:hover {
background: #e5e7eb;
}
/* Location Info Modal - hero image fills top */
.location-info-modal {
max-width: 420px;
}
.location-info-modal .fb-modal-close {
background: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 50%;
width: 32px;
height: 32px;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.location-info-modal .fb-modal-close:hover {
background: rgba(0, 0, 0, 0.7);
}
.loc-info-hero {
width: 100%;
overflow: hidden;
}
.loc-info-hero img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.loc-info-body {
padding: 20px;
}
.loc-info-name-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.loc-info-name {
font-size: 22px;
font-weight: 700;
color: #111827;
margin: 0;
flex: 1;
}
.loc-info-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.loc-info-row svg {
flex-shrink: 0;
margin-top: 2px;
color: #6b7280;
}
.loc-info-row a {
color: #2563eb;
text-decoration: none;
font-weight: 500;
}
.loc-info-row a:hover {
text-decoration: underline;
}
.loc-info-row.loc-info-hours {
align-items: flex-start;
}
.loc-info-week {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
display: grid;
grid-template-columns: 1fr;
gap: 4px;
}
.loc-info-week li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 13px;
color: #4b5563;
padding: 4px 8px;
border-radius: 6px;
}
.loc-info-week li.is-today {
background: #fef3c7;
color: #111827;
font-weight: 600;
}
.loc-info-week li.is-closed-day .loc-info-time {
color: #dc2626;
font-weight: 500;
}
.loc-info-week .loc-info-day {
flex-shrink: 0;
}
.loc-info-week .loc-info-time {
text-align: right;
font-variant-numeric: tabular-nums;
}
.loc-info-methods {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #f3f4f6;
}
.loc-info-method-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #f3f4f6;
color: #374151;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
}
.fb-modal-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border-bottom: 1px solid #f3f4f6;
}
.fb-modal-thumb {
width: 56px;
height: 56px;
border-radius: 10px;
object-fit: cover;
}
.fb-modal-title {
font-size: 18px;
font-weight: 700;
color: #111827;
}
.fb-modal-body {
padding: 20px;
}
.fb-row {
margin-bottom: 16px;
font-size: 14px;
color: #374151;
line-height: 1.6;
}
.fb-row strong {
display: block;
margin-bottom: 4px;
color: #1f2937;
font-weight: 600;
}
.fb-row a {
color: #2563eb;
text-decoration: none;
}
.fb-row a:hover {
text-decoration: underline;
}
.phone-link {
font-weight: 500;
}
.hours-text {
font-weight: 500;
color: #1f2937;
}
/* Status badges in modal */
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
margin-top: 12px;
}
.status-badge.open {
background: #d1fae5;
color: #059669;
}
.status-badge.closed {
background: #fee2e2;
color: #dc2626;
}
.status-badge.closing {
background: #ffedd5;
color: #b45309;
}
.status-badge.opening {
background: #dbeafe;
color: #1d4ed8;
}
/* Methods list */
.methods-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.method-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #f3f4f6;
color: #374151;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
}
.fb-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.fb-badge.closing {
color: #b45309;
background: #ffedd5;
}
.fb-badge.opening {
color: #1d4ed8;
background: #dbeafe;
}
.location-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ============================================
CONTINUE BAR
============================================ */
.continue-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
border-top: 1px solid #e5e7eb;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
z-index: 100;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.continue-bar.visible {
transform: translateY(0);
}
.continue-content {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.selected-info {
flex: 1;
min-width: 0;
/* Allow text truncation */
}
.selected-location-name {
font-size: 17px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 6px;
line-height: 1.3;
display: flex;
align-items: center;
gap: 8px;
}
.selected-location-address {
font-size: 14px;
color: #64748b;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.continue-btn {
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
color: #fff;
border: none;
border-radius: 12px;
padding: 16px 32px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.continue-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}
.continue-btn:active {
transform: translateY(0);
}
.continue-btn svg {
width: 20px;
height: 20px;
}
.continue-btn.loading {
opacity: 0.7;
pointer-events: none;
}
/* ============================================
TOAST NOTIFICATIONS
============================================ */
/* =========================================================================
Toast notifications — bottom-center, solid fill, above continue bar.
--------------------------------------------------------------------------
Slides up from the bottom of the viewport. When `.continue-bar.visible`
is present anywhere on the page, the stack lifts itself above that bar
using :has() + a CSS variable so there's never an overlap.
========================================================================= */
.toast-container {
/* !important on positioning because some themes / page builders inject
generic `[id]` or `[class*="container"]` rules at high specificity
that can knock the stack back to top-right. */
position: fixed !important;
left: 50% !important;
right: auto !important;
top: auto !important;
bottom: 24px !important;
transform: translateX(-50%) !important;
z-index: 10000;
display: flex;
flex-direction: column-reverse; /* newest toast on top */
gap: 10px;
width: calc(100% - 40px);
max-width: 480px;
pointer-events: none; /* stack itself is non-interactive */
transition: bottom 0.3s ease;
}
/* Lift the whole stack above the continue bar while it's visible. The
fallback is sized for the current bar (content 48px + 20px padding top/
bottom ≈ 88px); if the bar's height ever changes, JS can update the
custom property on :root. */
body:has(.continue-bar.visible) .toast-container {
bottom: calc(var(--fb-continue-bar-h, 92px) + 16px);
}
.toast {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px 14px 16px;
border-radius: 14px;
width: 100%;
color: #fff;
font-weight: 500;
pointer-events: auto; /* individual toasts can be interacted with */
overflow: hidden;
animation: toastSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
/* Colored shadows are applied per-type below. */
}
@keyframes toastSlideUp {
from {
transform: translateY(120%) scale(0.92);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes toastSlideDown {
from {
transform: translateY(0) scale(1);
opacity: 1;
}
to {
transform: translateY(120%) scale(0.92);
opacity: 0;
}
}
/* Auto-dismiss progress bar — drains over ~3s (matches setTimeout in JS). */
.toast::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: rgba(255, 255, 255, 0.55);
transform-origin: left;
animation: toastProgress 3s linear forwards;
}
@keyframes toastProgress {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* Pulse used when a duplicate toast would have been queued — instead
the live toast briefly scales up and the progress bar restarts, so
the user knows their action registered without a duplicate stack. */
.toast--pulse {
animation: toastPulse 0.45s ease;
}
.toast--pulse::after {
/* Restart the progress bar by retriggering the animation when a
duplicate toast refreshes its dismiss timer. */
animation: none;
animation: toastProgress 3s linear forwards;
}
@keyframes toastPulse {
0% { transform: scale(1); }
35% { transform: scale(1.035); }
100% { transform: scale(1); }
}
/* ----- Type variants — solid gradient fill + matching colored shadow ----- */
.toast.success {
background: linear-gradient(135deg, #10b981, #059669);
box-shadow:
0 18px 40px -12px rgba(16, 185, 129, 0.5),
0 4px 12px -4px rgba(16, 185, 129, 0.3);
}
.toast.error {
background: linear-gradient(135deg, #ef4444, #dc2626);
box-shadow:
0 18px 40px -12px rgba(239, 68, 68, 0.5),
0 4px 12px -4px rgba(239, 68, 68, 0.3);
}
.toast.info {
background: linear-gradient(135deg, #3b82f6, #2563eb);
box-shadow:
0 18px 40px -12px rgba(59, 130, 246, 0.5),
0 4px 12px -4px rgba(59, 130, 246, 0.3);
}
.toast.warning {
background: linear-gradient(135deg, #f59e0b, #d97706);
box-shadow:
0 18px 40px -12px rgba(245, 158, 11, 0.5),
0 4px 12px -4px rgba(245, 158, 11, 0.3);
}
/* Icon wrapper — circular white-translucent chip on the colored background
so the icon stays crisp regardless of type. */
.toast-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
padding: 7px;
background: rgba(255, 255, 255, 0.22);
border-radius: 50%;
color: #fff;
}
.toast-icon svg {
width: 100%;
height: 100%;
stroke: #fff;
color: #fff;
}
.toast-message {
flex: 1;
font-size: 15px;
line-height: 1.4;
color: #fff;
font-weight: 500;
letter-spacing: -0.01em;
}
/* Reduce motion: drop bounce + progress-bar animation. */
@media (prefers-reduced-motion: reduce) {
.toast {
animation: none;
}
.toast::after {
animation-duration: 3s;
}
}
/* ============================================
QUICK CONTINUE CARD
============================================ */
.quick-continue-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: var(--border-radius, 16px);
padding: 24px;
margin-bottom: 32px;
display: flex;
align-items: center;
gap: 20px;
box-shadow:
0 10px 30px -10px rgba(102, 126, 234, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
color: white;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.quick-continue-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
pointer-events: none;
}
.quick-continue-card:hover {
transform: translateY(-2px);
box-shadow:
0 15px 40px -10px rgba(102, 126, 234, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
.quick-continue-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.quick-continue-icon svg {
width: 24px;
height: 24px;
}
.quick-continue-content {
flex: 1;
position: relative;
z-index: 1;
}
.quick-continue-content h3 {
font-size: 18px;
font-weight: 600;
margin: 0 0 8px 0;
color: white;
}
.quick-continue-content p {
font-size: 14px;
margin: 0;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
}
.quick-continue-content .quick-address {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin-top: 4px;
}
.quick-continue-btn {
flex-shrink: 0;
background: white;
color: #667eea;
border: none;
border-radius: var(--border-radius, 12px);
padding: 12px 24px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
}
.quick-continue-btn:hover {
background: #f8f9fa;
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.quick-continue-btn:active {
transform: scale(0.98);
}
.quick-continue-btn svg {
width: 20px;
height: 20px;
transition: transform 0.2s ease;
}
.quick-continue-btn:hover svg {
transform: translateX(3px);
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 768px) {
.step {
padding: 0;
}
.step-method {
padding-top: 0;
}
.step-method .start-order-logo img {
max-width: 120px;
}
.step-location {
padding: 20px 16px 60px;
overflow-y: auto;
/* Only location step can scroll on mobile */
height: 100vh;
}
.step-title {
font-size: 24px;
letter-spacing: -0.5px;
}
.step-subtitle {
font-size: 14px;
padding: 8px 16px;
}
.step-header {
margin-bottom: 20px;
padding-bottom: 0;
}
.step-header::after {
display: none;
}
.back-button {
padding: 10px 20px;
font-size: 14px;
}
.back-button svg {
width: 18px;
height: 18px;
}
/* Method grid mobile sizing handled by primary rule above */
/* Location header mobile */
.location-header-top {
gap: 12px;
}
.location-step-title {
font-size: 18px;
}
.locations-simple-title {
font-size: 16px;
}
.locations-controls {
flex-wrap: wrap;
gap: 8px;
}
.view-tabs {
flex: 1;
min-width: 200px;
}
.view-tab {
padding: 10px 16px;
font-size: 13px;
}
.search-toggle-btn {
width: 44px;
height: 44px;
}
.locations-map {
height: calc(100vh - 220px);
min-height: 400px;
max-height: 600px;
}
.locations-title::before {
width: 3px;
height: 24px;
}
.locations-header {
margin-bottom: 20px;
padding-bottom: 12px;
}
/* keep 3-column layout from primary 768px rule — no override needed */
.method-card {
padding: 40px 28px;
}
.location-header-compact {
padding: 16px 20px;
}
.header-top {
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.header-title-group .step-title {
font-size: 18px;
}
.header-title-group .step-subtitle {
font-size: 13px;
}
.back-button {
padding: 8px 16px;
font-size: 13px;
}
.location-header-compact .search-container {
flex-direction: row;
padding: 5px;
}
.search-input-wrapper {
min-width: 0;
}
.location-header-compact .search-input {
font-size: 14px;
padding: 11px 40px 11px 44px;
}
.search-icon {
left: 14px;
width: 18px;
height: 18px;
}
.location-header-compact .locate-btn {
padding: 11px 14px;
font-size: 13px;
}
.location-header-compact .locate-btn span {
display: none;
}
.location-header-compact .locate-btn svg {
width: 16px;
height: 16px;
}
.map-container {
height: 300px;
}
.locations-list {
grid-template-columns: 1fr;
}
/* Mobile continue bar — compact layout. Target total height ≤130px
including safe-area padding-bottom. Title/address stack, then a
full-width button sits below with a smaller gap. */
.continue-content {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 10px 14px;
}
.selected-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.selected-location-name {
font-size: 15px;
font-weight: 700;
margin-bottom: 0;
line-height: 1.25;
gap: 6px;
}
.selected-location-address {
font-size: 12.5px;
line-height: 1.3;
/* Single-line truncation so the bar stays short regardless of
however long the street name / user-typed address is. */
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.continue-btn {
width: 100%;
justify-content: center;
padding: 11px 20px;
font-size: 14.5px;
border-radius: 10px;
gap: 8px;
}
.continue-btn svg {
width: 18px;
height: 18px;
}
/* Mobile: tighter padding, fuller width, still anchored bottom-center.
Continue bar is taller on mobile because of safe-area padding, so we
bump the offset up a bit. */
.toast-container {
left: 16px;
right: 16px;
bottom: 20px;
transform: none;
width: calc(100% - 32px);
max-width: none;
}
/* Lift toasts well clear of the button — real measured bar height
plus a 20px safety margin so a tap on the bottom button never hits
the toast stack by mistake. JS keeps --fb-continue-bar-h in sync. */
body:has(.continue-bar.visible) .toast-container {
bottom: calc(var(--fb-continue-bar-h, 130px) + 20px);
}
.toast {
padding: 13px 16px 13px 14px;
}
.toast-message {
font-size: 14px;
}
}
@media (max-width: 480px) {
.step-title {
font-size: 22px;
}
/* Keep compact row layout from 768px rule; just trim a touch on tiny phones */
.method-grid .method-card {
padding: 10px 12px;
gap: 12px;
}
.method-card .method-icon {
width: 36px;
height: 36px;
}
/* Quick Continue - Mobile */
.quick-continue-card {
flex-direction: column;
text-align: center;
padding: 20px;
}
.quick-continue-content h3 {
font-size: 16px;
}
/* Continue Bar - Extra-small mobile (≤480px).
Even tighter than the 768px rule above — target ≤120px total. */
.continue-content {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 8px 12px;
}
.selected-location-name {
font-size: 14px;
margin-bottom: 0;
line-height: 1.2;
}
.selected-location-address {
font-size: 12px;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.continue-btn {
width: 100%;
justify-content: center;
padding: 10px 18px;
font-size: 14px;
border-radius: 10px;
}
.quick-continue-content p {
font-size: 13px;
}
.quick-continue-btn {
width: 100%;
justify-content: center;
}
}
/* ============================================
QUICK START MODAL (FULLSCREEN)
============================================ */
.quick-start-modal {
position: fixed;
inset: 0;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
animation: fadeInSimple 0.3s ease;
}
@keyframes fadeInSimple {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.quick-start-modal-content {
background: #ffffff;
border-radius: 24px;
padding: 48px 40px;
max-width: 600px;
width: 90%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
animation: slideUp 0.4s ease;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.quick-start-modal-icon {
font-size: 64px;
margin-bottom: 24px;
animation: pulse-glow 2s ease-in-out infinite;
}
.quick-start-modal-title {
font-size: 32px;
font-weight: 800;
color: #0f172a;
margin-bottom: 20px;
line-height: 1.2;
}
.quick-start-modal-message {
font-size: 18px;
line-height: 1.6;
color: #334155;
margin-bottom: 16px;
}
.quick-start-modal-message strong {
color: #2563eb;
font-weight: 700;
}
.quick-start-modal-question {
font-size: 16px;
color: #64748b;
margin-bottom: 32px;
font-weight: 500;
}
.quick-start-modal-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.quick-start-btn-primary {
border: none;
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
color: #fff;
padding: 16px 32px;
border-radius: 14px;
cursor: pointer;
font-weight: 700;
font-size: 17px;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.quick-start-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}
.quick-start-btn-primary:disabled {
opacity: 0.8;
cursor: wait;
transform: none;
}
.quick-start-btn-primary .spinner-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
animation: qs-pulse 1s ease-in-out infinite;
margin-right: 8px;
vertical-align: middle;
}
@keyframes qs-pulse {
0%, 100% { opacity: 0.4; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
.quick-start-btn-secondary {
border: 2px solid #e5e7eb;
background: #ffffff;
color: #64748b;
padding: 14px 32px;
border-radius: 14px;
cursor: pointer;
font-weight: 600;
font-size: 15px;
transition: all 0.2s ease;
}
.quick-start-btn-secondary:hover {
border-color: #cbd5e1;
background: #f8fafc;
color: #475569;
}
@media (max-width: 640px) {
.quick-start-modal-content {
padding: 36px 28px;
border-radius: 20px;
}
.quick-start-modal-icon {
font-size: 48px;
margin-bottom: 20px;
}
.quick-start-modal-title {
font-size: 24px;
margin-bottom: 16px;
}
.quick-start-modal-message {
font-size: 16px;
}
.quick-start-modal-question {
font-size: 14px;
margin-bottom: 24px;
}
.quick-start-btn-primary {
padding: 14px 24px;
font-size: 16px;
}
.quick-start-btn-secondary {
padding: 12px 24px;
font-size: 14px;
}
}
/* Old panel styles (kept for backward compatibility) */
.method-grid .quick-start-panel,
.quick-start-panel {
margin: 0 auto 24px;
padding: 20px 24px;
border: 2px solid #2563eb;
border-radius: 16px;
background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
display: flex;
align-items: center;
gap: 16px;
max-width: 900px;
}
.quick-start-icon {
font-size: 32px;
flex-shrink: 0;
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
.quick-start-message {
flex: 1;
font-size: 15px;
line-height: 1.5;
color: #1e293b;
}
.quick-start-message strong {
color: #0f172a;
font-weight: 700;
}
.quick-start-cta {
border: none;
background: #2563eb;
color: #fff;
padding: 12px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 700;
font-size: 15px;
transition: all 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
}
.quick-start-cta:hover {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}
.quick-start-divider {
position: relative;
text-align: center;
margin: 20px auto;
max-width: 900px;
}
.quick-start-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
}
.quick-start-divider span {
position: relative;
display: inline-block;
padding: 0 16px;
background: var(--bg-color, #f8f9fa);
color: #94a3b8;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
@media (max-width: 768px) {
.method-grid .quick-start-panel,
.quick-start-panel {
flex-direction: column;
text-align: center;
padding: 18px 20px;
gap: 14px;
}
.quick-start-icon {
font-size: 28px;
}
.quick-start-message {
font-size: 14px;
}
.quick-start-cta {
width: 100%;
padding: 14px 20px;
}
.quick-start-divider {
margin: 16px auto;
}
}
/* ============================================
Campaign Carousel
============================================ */
.campaigns-section {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.campaigns-header {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #92400e;
margin-bottom: 8px;
opacity: 0.8;
}
.campaigns-carousel {
position: relative;
}
.campaigns-track {
position: relative;
display: flex;
}
.campaign-slide {
display: none;
align-items: center;
gap: 8px;
padding: 10px 22px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
color: #92400e;
border-radius: 8px;
border: 1px solid #fbbf24;
box-shadow: 0 2px 4px rgba(251, 191, 36, 0.1);
cursor: pointer;
transition: all 0.2s ease;
width: 100%;
}
.campaign-slide.active {
display: flex;
}
.campaign-slide:hover {
background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
border-color: #f59e0b;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}
.campaign-slide:active {
transform: translateY(0);
}
.campaign-icon {
font-size: 18px;
line-height: 1;
flex-shrink: 0;
}
/* Foodbonus slide styling */
.campaign-slide.foodbonus-slide {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 1px solid #f59e0b;
}
.campaign-slide.foodbonus-slide:hover {
background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
border-color: #d97706;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.campaign-slide.foodbonus-slide .campaign-icon {
width: 18px;
height: 18px;
color: #f59e0b;
}
/* Whitelabel brand icon inside the carousel slide — keep crisp on the
warm gradient by giving it a tiny white halo. */
.campaign-slide.foodbonus-slide .campaign-icon.foodbonus-brand-icon {
width: 22px;
height: 22px;
padding: 2px;
background: #ffffff;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(146, 64, 14, 0.2);
object-fit: contain;
}
.campaign-slide.foodbonus-slide .campaign-title {
color: #92400e;
}
.campaign-slide.foodbonus-slide .campaign-min {
color: #92400e;
opacity: 0.8;
}
.campaign-subtitle {
font-size: 14px;
font-weight: 700;
color: #92400e;
line-height: 1.3;
}
.campaign-content {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.campaign-title {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.campaign-min {
font-size: 11px;
opacity: 0.8;
}
/* Navigation Buttons */
.campaign-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid #fbbf24;
border-radius: 50%;
color: #92400e;
font-size: 18px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.campaign-nav:hover {
background: #fff;
border-color: #f59e0b;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-50%) scale(1.1);
}
.campaign-nav:active {
transform: translateY(-50%) scale(0.95);
}
.campaign-nav.prev {
left: -8px;
}
.campaign-nav.next {
right: -8px;
}
/* Indicators */
.campaign-indicators {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 8px;
}
.campaign-indicators .indicator {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(146, 64, 14, 0.2);
transition: all 0.2s ease;
cursor: pointer;
}
.campaign-indicators .indicator.active {
background: #92400e;
width: 18px;
border-radius: 3px;
}
/* Foodbonus Section */
.foodbonus-section {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.foodbonus-badge {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 1px solid #f59e0b;
border-radius: 8px;
transition: all 0.2s ease;
}
.foodbonus-badge:hover {
background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}
.foodbonus-icon {
width: 20px;
height: 20px;
color: #f59e0b;
flex-shrink: 0;
}
.foodbonus-content {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.foodbonus-title {
font-size: 12px;
font-weight: 600;
color: #92400e;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.foodbonus-rate {
font-size: 14px;
font-weight: 700;
color: #92400e;
}
.foodbonus-min {
font-size: 11px;
color: #92400e;
opacity: 0.8;
}
/* Foodbonus in Modal */
.foodbonus-info {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border: 1px solid #fbbf24;
border-radius: 8px;
padding: 12px;
margin-bottom: 16px;
}
.foodbonus-info strong {
color: #92400e;
}
.foodbonus-details {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
}
.foodbonus-highlight {
font-size: 16px;
font-weight: 700;
color: #92400e;
}
.foodbonus-note {
font-size: 13px;
color: #92400e;
opacity: 0.8;
}
/* =========================================================================
Campaign & Foodbonus Modals — shared modern design
--------------------------------------------------------------------------
- Theme-driven (primary/secondary color vars, works in both light & dark).
- Clean neutral body; compact brand-accented header; high-contrast hero.
- `.fb-note-emoji` lets us inline the emoji without wrapping its own size
in line-height weirdness.
========================================================================= */
/* Tokens shared by both modals (fallback to existing primary/secondary).
Placed on .fb-modal so they don't leak to the rest of the page. */
.foodbonus-modal,
.campaign-modal {
--fb-modal-primary: var(--primary-color, #2563eb);
--fb-modal-secondary: var(--secondary-color, #3b82f6);
--fb-modal-on-primary: #ffffff;
--fb-modal-hero-bg: color-mix(in srgb, var(--fb-modal-primary) 8%, #ffffff);
--fb-modal-hero-border: color-mix(in srgb, var(--fb-modal-primary) 20%, #ffffff);
--fb-modal-note-bg: #f8fafc;
--fb-modal-note-border: #e2e8f0;
--fb-modal-text: #0f172a;
--fb-modal-text-muted: #475569;
max-width: 440px;
overflow: hidden; /* keeps header gradient clipped to rounded corners */
}
/* ----- Header (shared) ----- */
.foodbonus-header,
.campaign-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 28px 24px 24px;
background: linear-gradient(135deg, var(--fb-modal-primary) 0%, var(--fb-modal-secondary) 100%);
border-bottom: none;
color: var(--fb-modal-on-primary);
position: relative;
}
/* Make the default close button visible on the colored header. */
.foodbonus-modal .fb-modal-close,
.campaign-modal .fb-modal-close {
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.25);
}
.foodbonus-modal .fb-modal-close:hover,
.campaign-modal .fb-modal-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.foodbonus-header .fb-modal-title,
.campaign-header .fb-modal-title {
font-size: 20px;
font-weight: 700;
color: var(--fb-modal-on-primary);
text-align: center;
line-height: 1.25;
letter-spacing: -0.01em;
}
/* Header icons */
.foodbonus-icon-large {
width: 56px;
height: 56px;
color: var(--fb-modal-on-primary);
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}
/* Brand image variant — keep contrast on colored header with a soft white halo. */
.foodbonus-icon-large.foodbonus-brand-icon {
padding: 8px;
background: rgba(255, 255, 255, 0.95);
border-radius: 14px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
object-fit: contain;
}
.campaign-icon-large {
font-size: 48px;
line-height: 1;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}
/* ----- Hero discount card (shared) ----- */
.foodbonus-detail-card,
.campaign-detail-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 28px 24px;
margin-bottom: 18px;
background: var(--fb-modal-hero-bg);
border-radius: 14px;
border: 1px solid var(--fb-modal-hero-border);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.foodbonus-discount-big,
.campaign-discount-big {
font-size: 56px;
font-weight: 800;
color: var(--fb-modal-primary);
line-height: 1;
letter-spacing: -0.03em;
font-feature-settings: "tnum" 1;
}
.foodbonus-discount-label,
.campaign-discount-label {
font-size: 13px;
font-weight: 600;
color: var(--fb-modal-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 10px;
opacity: 0.85;
}
/* ----- Body notes ----- */
.foodbonus-note,
.campaign-note {
margin-top: 14px;
padding: 14px 16px;
background: var(--fb-modal-note-bg);
border: 1px solid var(--fb-modal-note-border);
border-left: 3px solid var(--fb-modal-primary);
border-radius: 8px;
font-size: 13.5px;
color: var(--fb-modal-text-muted);
line-height: 1.55;
}
.foodbonus-note strong {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
color: var(--fb-modal-text);
font-size: 14px;
}
.foodbonus-note p,
.campaign-note p {
margin: 0;
}
/* Inline emoji in note headings — sized & aligned consistently. */
.fb-note-emoji {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 16px;
line-height: 1;
flex-shrink: 0;
}
/* Referral note uses the secondary accent for variety. */
.referral-note {
border-left-color: var(--fb-modal-secondary);
}
/* ----- Campaign-specific row (valid methods) ----- */
.campaign-modal .fb-row {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
margin-top: 12px;
background: var(--fb-modal-note-bg);
border: 1px solid var(--fb-modal-note-border);
border-radius: 8px;
font-size: 14px;
color: var(--fb-modal-text);
}
.campaign-modal .fb-row strong {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--fb-modal-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.campaign-modal .fb-row span {
color: var(--fb-modal-text);
}
/* Dark theme — keep cards readable against darker modal surface. */
body.theme-dark .foodbonus-modal,
body.theme-dark .campaign-modal {
--fb-modal-hero-bg: color-mix(in srgb, var(--fb-modal-primary) 14%, #1e293b);
--fb-modal-hero-border: color-mix(in srgb, var(--fb-modal-primary) 35%, #1e293b);
--fb-modal-note-bg: #1e293b;
--fb-modal-note-border: #334155;
--fb-modal-text: #f1f5f9;
--fb-modal-text-muted: #cbd5e1;
}
body.theme-dark .foodbonus-modal .foodbonus-discount-big,
body.theme-dark .foodbonus-modal .foodbonus-discount-label,
body.theme-dark .campaign-modal .campaign-discount-big,
body.theme-dark .campaign-modal .campaign-discount-label {
color: color-mix(in srgb, var(--fb-modal-primary) 50%, #ffffff);
}
/* ============================================
Location Permission Modal
============================================ */
.location-permission-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 20px;
opacity: 1;
transition: opacity 0.3s ease;
}
.location-permission-content {
background: white;
border-radius: 24px;
padding: 40px 32px;
max-width: 440px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUpScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUpScale {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.location-permission-icon {
width: 80px;
height: 80px;
margin: 0 auto 24px;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}
.location-permission-icon svg {
width: 40px;
height: 40px;
color: white;
stroke-width: 2.5;
}
.location-permission-title {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin: 0 0 12px 0;
line-height: 1.3;
}
.location-permission-message {
font-size: 15px;
color: #64748b;
line-height: 1.6;
margin: 0 0 32px 0;
}
.location-permission-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.location-permission-btn-primary,
.location-permission-btn-secondary {
width: 100%;
padding: 16px 24px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.location-permission-btn-primary {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.location-permission-btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}
.location-permission-btn-primary:active:not(:disabled) {
transform: translateY(0);
}
.location-permission-btn-primary:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.location-permission-btn-primary svg {
width: 20px;
height: 20px;
stroke-width: 2.5;
}
.location-permission-btn-secondary {
background: #f1f5f9;
color: #64748b;
}
.location-permission-btn-secondary:hover {
background: #e2e8f0;
color: #475569;
}
.location-permission-btn-primary .loading-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.6s linear infinite;
margin-right: 8px;
}
@media (max-width: 768px) {
.location-permission-content {
padding: 32px 24px;
border-radius: 20px;
}
.location-permission-icon {
width: 64px;
height: 64px;
margin-bottom: 20px;
}
.location-permission-icon svg {
width: 32px;
height: 32px;
}
.location-permission-title {
font-size: 20px;
}
.location-permission-message {
font-size: 14px;
margin-bottom: 24px;
}
.location-permission-btn-primary,
.location-permission-btn-secondary {
padding: 14px 20px;
font-size: 15px;
}
}
/* ===== STEP 2 ENHANCEMENTS ===== */
/* Sort Options */
.sort-options {
display: flex;
gap: 8px;
margin-bottom: 12px;
padding: 0 4px;
flex-wrap: wrap;
}
.sort-btn {
display: inline-flex;
align-items: center;
gap: 5px;
/* WCAG 2.5.5: ensure sort chips meet the 44px touch target. */
min-height: 44px;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 22px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.sort-btn svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.sort-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.25);
}
.sort-btn.active,
.sort-btn[aria-current="true"],
.sort-btn[aria-current="page"],
.sort-btn[aria-pressed="true"] {
background: rgba(37, 99, 235, 0.2);
border-color: rgba(37, 99, 235, 0.6);
color: #93c5fd;
font-weight: 700;
box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.35);
}
/* Distance badge enhancement */
.location-distance {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 12px;
background: rgba(37, 99, 235, 0.1);
color: #3b82f6;
font-size: 13px;
font-weight: 600;
margin-top: 0;
}
.location-distance svg {
flex-shrink: 0;
color: #3b82f6;
}
/* Countdown badge animation */
.soon-badge {
display: inline-flex;
align-items: center;
gap: 5px;
}
.soon-badge svg {
flex-shrink: 0;
}
.soon-badge.closing {
animation: pulseBadge 2s ease-in-out infinite;
}
@keyframes pulseBadge {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.countdown-value {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* Skeleton loader improvements */
.location-card.skeleton {
pointer-events: none;
min-height: 180px;
}
.skeleton-thumb {
width: 100%;
height: 140px;
border-radius: 12px 12px 0 0;
background: linear-gradient(90deg, rgba(243,244,246,0.1) 25%, rgba(243,244,246,0.2) 50%, rgba(243,244,246,0.1) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
margin: -16px -16px 12px -16px;
width: calc(100% + 32px);
}
.skeleton-line {
border-radius: 6px;
background: linear-gradient(90deg, rgba(243,244,246,0.08) 25%, rgba(243,244,246,0.15) 50%, rgba(243,244,246,0.08) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Retry container */
.retry-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 60px 20px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
}
.retry-container svg {
opacity: 0.4;
}
.retry-container p {
font-size: 15px;
margin: 0;
}
.retry-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.retry-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.retry-btn:disabled {
opacity: 0.6;
cursor: wait;
}
.retry-btn svg {
opacity: 1;
}
/* Closed overlay enhancement */
.closed-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
z-index: 2;
pointer-events: none;
}
.closed-overlay span {
background: rgba(220, 38, 38, 0.9);
color: white;
padding: 6px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* Mobile responsive for sort options */
@media (max-width: 768px) {
.sort-options {
gap: 6px;
margin-bottom: 10px;
}
.sort-btn {
padding: 5px 10px;
font-size: 11px;
}
}
/* ===========================
Address Suggestions Dropdown
=========================== */
.address-suggestions-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
background: #1a2332;
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: none;
border-radius: 0 0 12px 12px;
max-height: 320px;
overflow-y: auto;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
animation: dropdownSlide 0.2s ease;
}
@keyframes dropdownSlide {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.address-dropdown-section {
padding: 4px 0;
}
.address-dropdown-section + .address-dropdown-section {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.address-dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px 6px;
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.address-dropdown-manage {
font-size: 11px;
color: var(--primary-color, #4f6ef7);
text-decoration: none;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.address-dropdown-manage:hover {
text-decoration: underline;
}
.address-dropdown-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 16px;
background: transparent;
border: none;
cursor: pointer;
transition: background 0.15s ease;
text-align: left;
color: rgba(255, 255, 255, 0.9);
font-family: inherit;
}
.address-dropdown-item:hover {
background: rgba(255, 255, 255, 0.08);
}
.address-dropdown-item.is-default {
background: rgba(79, 110, 247, 0.08);
}
.address-dropdown-item.is-default:hover {
background: rgba(79, 110, 247, 0.15);
}
.address-dropdown-item-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.06);
border-radius: 8px;
color: rgba(255, 255, 255, 0.5);
}
.address-dropdown-item.is-default .address-dropdown-item-icon {
background: rgba(79, 110, 247, 0.15);
color: var(--primary-color, #4f6ef7);
}
.address-dropdown-item-icon.recent-icon {
background: rgba(255, 255, 255, 0.04);
}
.address-dropdown-item-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.address-dropdown-item-label {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.address-dropdown-item-detail {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.address-dropdown-badge {
flex-shrink: 0;
font-size: 10px;
font-weight: 600;
color: var(--primary-color, #4f6ef7);
background: rgba(79, 110, 247, 0.15);
padding: 3px 8px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* ===========================
Save Address Prompt
=========================== */
.save-address-prompt {
background: rgba(79, 110, 247, 0.1);
border: 1px solid rgba(79, 110, 247, 0.2);
border-radius: 12px;
padding: 10px 14px;
margin-bottom: 12px;
animation: slideDown 0.3s ease;
}
/* slideDown keyframe defined above in ADDRESS BANNER section */
.save-address-prompt.fade-out {
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.save-address-prompt-content {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.save-address-prompt-text {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
}
.save-address-prompt-labels {
display: flex;
gap: 6px;
}
.save-label-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: all 0.2s ease;
}
.save-label-btn:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.save-address-dismiss {
margin-left: auto;
background: none;
border: none;
color: rgba(255, 255, 255, 0.4);
font-size: 18px;
cursor: pointer;
padding: 2px 6px;
line-height: 1;
}
.save-address-dismiss:hover {
color: rgba(255, 255, 255, 0.7);
}
/* Mobile responsive for address dropdown & save prompt */
@media (max-width: 640px) {
.address-suggestions-dropdown {
max-height: 260px;
}
.address-dropdown-item {
padding: 8px 12px;
gap: 10px;
}
.address-dropdown-item-icon {
width: 28px;
height: 28px;
}
.save-address-prompt {
position: relative;
}
.save-address-prompt-content {
flex-direction: column;
align-items: flex-start;
}
.save-address-prompt-labels {
width: 100%;
}
.save-label-btn {
flex: 1;
justify-content: center;
}
.save-address-dismiss {
position: absolute;
top: 6px;
right: 8px;
}
}
/* ============================================
FOCUS-VISIBLE STYLES (Accessibility)
============================================ */
.method-card:focus-visible,
.location-card:focus-visible,
.sort-btn:focus-visible,
.view-tab:focus-visible,
.start-order-page button:focus-visible,
.start-order-page input:focus-visible {
outline: 2px solid var(--so-primary);
outline-offset: 2px;
}
/* ============================================
MARKER DISTANCE LABELS
============================================ */
.marker-distance-label {
background: var(--so-bg-dark);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: var(--so-radius-sm);
white-space: nowrap;
margin-top: 4px;
}
/* ============================================
LIGHT MODE THEME
============================================ */
/* Base - Light background */
.start-order-page.theme-light {
background: #f0f2f5;
}
.theme-light .loading-screen {
background: #f0f2f5;
}
.theme-light .loading-spinner {
border-color: rgba(0, 0, 0, 0.1);
border-top-color: var(--so-primary);
}
.theme-light .loading-screen p {
color: rgba(0, 0, 0, 0.5);
}
/* Step Title & Subtitle */
.theme-light .step-title {
color: #1e293b;
}
.theme-light .step-subtitle {
color: #64748b;
}
/* Method Cards */
.theme-light .method-card {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.theme-light .method-card:hover {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.theme-light .method-card.selected {
background: rgba(255, 255, 255, 0.95);
border-color: var(--so-primary);
box-shadow: 0 0 0 1px var(--so-primary), 0 4px 12px rgba(37, 99, 235, 0.1);
}
.theme-light .method-card.selected .method-title {
color: #1e293b;
}
.theme-light .method-icon svg {
color: #374151;
}
.theme-light .method-card:hover .method-icon svg {
color: #111827;
}
.theme-light .method-title {
color: #1e293b;
}
.theme-light .method-card:hover .method-title {
color: #111827;
}
.theme-light .method-description {
color: #6b7280;
}
.theme-light .method-card:hover .method-description {
color: #4b5563;
}
/* Method Info Line */
.theme-light .method-info-line span {
color: #6b7280;
}
/* Location Step */
.theme-light .location-header-top {
border-bottom-color: rgba(0, 0, 0, 0.08);
}
.theme-light .location-step-title {
color: #1e293b;
}
.theme-light .locations-simple-title {
color: #6b7280;
}
/* Back Button */
.theme-light .back-button {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.12);
color: #374151;
}
.theme-light .back-button:hover {
background: var(--so-primary);
border-color: var(--so-primary);
color: #fff;
}
/* Search Bar */
.theme-light .search-bar-row {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.1);
}
.theme-light .search-bar-row:focus-within {
border-color: var(--so-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.theme-light .search-icon {
color: #9ca3af;
}
.theme-light .search-input {
color: #1e293b;
}
.theme-light .search-input::placeholder {
color: #9ca3af;
}
.theme-light .clear-search {
background: rgba(0, 0, 0, 0.06);
color: #6b7280;
}
.theme-light .clear-search:hover {
background: rgba(0, 0, 0, 0.1);
color: #374151;
}
/* Locate Button */
.theme-light .locate-btn {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
color: #374151;
}
.theme-light .locate-btn:hover {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.15);
}
/* View Tabs */
.theme-light .view-tabs {
background: rgba(0, 0, 0, 0.04);
}
.theme-light .view-tab {
color: #6b7280;
}
.theme-light .view-tab:hover {
color: #374151;
background: rgba(0, 0, 0, 0.04);
}
.theme-light .view-tab.active {
background: var(--so-primary);
color: #fff;
}
/* Sort Options */
.theme-light .sort-btn {
border-color: rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.03);
color: #6b7280;
}
.theme-light .sort-btn:hover {
background: rgba(0, 0, 0, 0.06);
color: #374151;
border-color: rgba(0, 0, 0, 0.15);
}
.theme-light .sort-btn.active {
background: rgba(37, 99, 235, 0.1);
border-color: rgba(37, 99, 235, 0.3);
color: var(--so-primary);
}
/* Location Cards - already light, but ensure consistency */
.theme-light .location-card {
background: #fff;
border-color: #e5e7eb;
}
/* Preserve the primary tint on selected cards in light theme — the
generic .theme-light .location-card rule above would otherwise force
white background and wash out the "selected" visual cue. */
.theme-light .location-card.selected {
background: color-mix(in srgb, var(--primary-color, #2563eb) 6%, #ffffff);
border-color: var(--primary-color, #2563eb);
}
/* Address Suggestions Dropdown */
.theme-light .address-suggestions-dropdown {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.theme-light .address-dropdown-section + .address-dropdown-section {
border-top-color: rgba(0, 0, 0, 0.06);
}
.theme-light .address-dropdown-header {
color: #9ca3af;
}
.theme-light .address-dropdown-item {
color: #1e293b;
}
.theme-light .address-dropdown-item:hover {
background: rgba(0, 0, 0, 0.04);
}
.theme-light .address-dropdown-item.is-default {
background: rgba(37, 99, 235, 0.05);
}
.theme-light .address-dropdown-item.is-default:hover {
background: rgba(37, 99, 235, 0.08);
}
.theme-light .address-dropdown-item-icon {
background: rgba(0, 0, 0, 0.04);
color: #6b7280;
}
.theme-light .address-dropdown-item-icon.recent-icon {
background: rgba(0, 0, 0, 0.03);
}
.theme-light .address-dropdown-item-label {
color: #1e293b;
}
.theme-light .address-dropdown-item-detail {
color: #6b7280;
}
/* Save Address Prompt */
.theme-light .save-address-prompt {
background: rgba(37, 99, 235, 0.06);
border-color: rgba(37, 99, 235, 0.15);
}
.theme-light .save-address-prompt-text {
color: #374151;
}
.theme-light .save-label-btn {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
color: #374151;
}
.theme-light .save-label-btn:hover {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.15);
color: #1e293b;
}
.theme-light .save-address-dismiss {
color: rgba(0, 0, 0, 0.3);
}
.theme-light .save-address-dismiss:hover {
color: rgba(0, 0, 0, 0.6);
}
/* Retry Container */
.theme-light .retry-container {
color: #6b7280;
}
/* Skeleton Loaders */
.theme-light .skeleton-thumb {
background: linear-gradient(90deg, #e5e7eb 25%, #d1d5db 50%, #e5e7eb 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
.theme-light .skeleton-line {
background: linear-gradient(90deg, #e5e7eb 25%, #d1d5db 50%, #e5e7eb 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
/* Quick Start Modal (fullscreen overlay) */
.theme-light .quick-start-modal {
background: linear-gradient(135deg, #e2e8f0 0%, #f0f2f5 100%);
}
/* Quick Start Divider */
.theme-light .quick-start-divider span {
background: #f0f2f5;
}
/* Marker Distance Labels */
.theme-light .marker-distance-label {
background: #1e293b;
color: #fff;
}
/* Mobile: method description override */
@media (max-width: 768px) {
.theme-light .method-description {
color: #6b7280;
}
}
/* ============================================
GOOGLE PLACES AUTOCOMPLETE DROPDOWN
============================================ */
/*
* Google Places native dropdown (pac-container) is suppressed because
* predictions are now rendered inline inside our unified custom dropdown
* (see .address-suggestions-dropdown). Kept here as a safety net — if any
* code path ever falls back to the Autocomplete widget, the pac-container
* would double-render over our dropdown.
*/
.pac-container {
display: none !important;
}
/* Suggestions section header ("powered by Google" small label) */
.address-dropdown-section--predictions .address-dropdown-header {
align-items: baseline;
}
.address-dropdown-powered {
font-size: 11px;
color: var(--so-text-muted, #94a3b8);
font-weight: 500;
letter-spacing: 0.02em;
}
/*
* Saved address rows: wraps the selectable item + inline action icons
* (star / trash). The item itself still has the full click target for
* selecting the address; the icons sit on the right and stop propagation.
*/
.address-dropdown-row {
display: flex;
align-items: stretch;
position: relative;
}
.address-dropdown-row .address-dropdown-item {
flex: 1 1 auto;
min-width: 0;
padding-right: 8px;
}
.address-dropdown-row-actions {
display: flex;
align-items: center;
gap: 4px;
padding: 0 10px;
opacity: 0.55;
transition: opacity 0.15s ease;
}
.address-dropdown-row:hover .address-dropdown-row-actions,
.address-dropdown-row:focus-within .address-dropdown-row-actions {
opacity: 1;
}
.address-dropdown-action {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--so-text-secondary, #64748b);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.address-dropdown-action:hover {
background-color: var(--so-bg-hover, #f1f5f9);
}
.address-dropdown-action:active {
transform: scale(0.93);
}
.address-dropdown-action:focus-visible {
outline: 2px solid var(--fb-focus, #2563eb);
outline-offset: 2px;
}
.address-dropdown-action--star.is-active {
color: #f59e0b;
}
.address-dropdown-action--star:hover {
color: #f59e0b;
}
.address-dropdown-action--delete:hover {
color: #dc2626;
background-color: #fef2f2;
}
.address-dropdown-action[aria-busy="true"] {
opacity: 0.5;
pointer-events: none;
}
.pac-item {
padding: 12px 16px;
border-top: 1px solid #f1f5f9;
cursor: pointer;
font-size: 15px;
line-height: 1.4;
color: var(--so-text-primary, #1e293b);
transition: background-color 0.15s ease;
}
.pac-item:first-child {
border-top: none;
}
.pac-item:hover,
.pac-item.pac-item-selected {
background-color: #f0f4ff;
}
.pac-item .pac-icon {
margin-right: 12px;
margin-top: 2px;
}
.pac-item .pac-item-query {
font-size: 15px;
font-weight: 600;
color: var(--so-text-primary, #1e293b);
}
.pac-item .pac-item-query + span {
font-size: 13px;
color: var(--so-text-secondary, #64748b);
margin-left: 4px;
}
.pac-container .pac-item:last-child {
border-radius: 0 0 16px 16px;
}
/* Google branding bar */
.pac-container::after {
padding: 8px 16px !important;
background-color: #fafbfc !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
border-radius: 0 0 16px 16px;
margin: 0 !important;
}
/* ============================================
FLOATING USER AREA
============================================ */
.so-user-area {
position: fixed;
top: 20px;
right: 24px;
z-index: 100;
transition: opacity 0.3s ease;
}
.so-user-status {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(8px);
padding: 6px 14px 6px 6px;
border-radius: 40px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
border: 1px solid rgba(0,0,0,0.06);
}
.so-user-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--so-primary, #2563eb), var(--so-primary-dark, #1d4ed8));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
flex-shrink: 0;
}
.so-user-name {
font-size: 14px;
font-weight: 600;
color: var(--so-text-primary, #1e293b);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.so-login-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 18px 9px 14px;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 40px;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(8px);
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
color: var(--so-text-primary, #1e293b);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.so-login-btn:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
transform: translateY(-1px);
}
.so-login-btn svg {
opacity: 0.7;
}
/* ============================================
LOGIN SIDEPANEL (PRO)
============================================ */
.so-login-overlay {
position: fixed;
inset: 0;
z-index: 10000;
pointer-events: none;
}
.so-login-overlay.open {
pointer-events: auto;
}
.so-login-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0);
transition: background 0.3s ease;
}
.so-login-overlay.open .so-login-backdrop {
background: rgba(15, 23, 42, 0.6);
}
.so-login-drawer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 440px;
background: #fff;
box-shadow: -12px 0 48px rgba(0, 0, 0, 0.2);
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.so-login-overlay.open .so-login-drawer {
transform: translateX(0);
}
.so-login-close {
position: absolute;
top: 20px;
right: 20px;
background: #f1f5f9;
border: none;
cursor: pointer;
color: var(--so-text-secondary, #64748b);
padding: 10px;
border-radius: 12px;
transition: all 0.2s;
z-index: 1;
}
.so-login-close:hover {
background: #e2e8f0;
color: var(--so-text-primary, #1e293b);
}
/* Hero Section — compact, restrained.
* Previous design used a tall 3-stop dark gradient with two 250-300px
* radial glows and an 80px primary icon — dramatic but ate ~220px of
* vertical space before the user saw a single input. Now: solid slate
* background, smaller 48px icon, tighter padding. Total height ~130px. */
.so-login-hero {
background: #0f172a;
padding: 24px 24px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.so-login-hero-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, var(--so-primary, #2563eb), #7c3aed);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
position: relative;
z-index: 1;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
/* Shrink the inner SVG proportionally — the inline markup hard-codes
40×40 which would overflow the new 48px wrapper. */
.so-login-hero-icon svg {
width: 26px;
height: 26px;
}
.so-login-hero-title {
font-size: 20px;
font-weight: 700;
color: #fff;
margin: 0 0 4px;
letter-spacing: -0.3px;
position: relative;
z-index: 1;
line-height: 1.25;
}
.so-login-hero-sub {
font-size: 13.5px;
color: rgba(255,255,255,0.62);
margin: 0;
position: relative;
z-index: 1;
line-height: 1.35;
}
/* Auth Options (Social + Email buttons) */
.so-auth-options {
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
.so-social-buttons {
display: flex;
flex-direction: column;
gap: 0;
}
/* Override Nextend Social Login — make buttons full-width stacked */
.so-social-buttons .nsl-container {
margin: 0 !important;
}
.so-social-buttons .nsl-container-buttons {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.so-social-buttons .nsl-container-buttons a {
display: block !important;
width: 100% !important;
text-decoration: none !important;
transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.so-social-buttons .nsl-container-buttons a:hover {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}
.so-social-buttons .nsl-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 52px !important;
border-radius: 14px !important;
font-size: 15px !important;
font-weight: 600 !important;
box-sizing: border-box !important;
}
.so-social-buttons .nsl-button-label-container {
text-align: center !important;
}
/* Email option button */
.so-email-option {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 15px;
border: 2px solid #e2e8f0;
border-radius: 14px;
background: #fff;
color: var(--so-text-primary, #1e293b);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.so-email-option:hover {
border-color: var(--so-primary, #2563eb);
color: var(--so-primary, #2563eb);
background: #f8fafc;
}
.so-email-option svg {
opacity: 0.6;
}
/* Email forms section */
.so-email-forms {
padding: 0;
}
.so-email-back {
display: flex;
align-items: center;
gap: 6px;
padding: 16px 32px;
background: none;
border: none;
border-bottom: 1px solid #f1f5f9;
color: var(--so-primary, #2563eb);
font-size: 13px;
font-weight: 600;
cursor: pointer;
width: 100%;
font-family: inherit;
transition: background 0.15s;
}
.so-email-back:hover {
background: #f8fafc;
}
/* Tabs */
.so-auth-tabs {
display: flex;
margin: 0;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.so-auth-tab {
flex: 1;
padding: 16px 0;
text-align: center;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--so-text-muted, #94a3b8);
background: none;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.so-auth-tab.active {
color: var(--so-primary, #2563eb);
border-bottom-color: var(--so-primary, #2563eb);
background: #fff;
}
.so-auth-tab:hover:not(.active) {
color: var(--so-text-primary, #1e293b);
background: #f1f5f9;
}
/* Auth form area */
.so-auth-content {
padding: 28px 32px 24px;
}
.so-login-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.so-login-field {
position: relative;
}
.so-input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--so-text-muted, #94a3b8);
pointer-events: none;
z-index: 1;
}
.so-login-input {
width: 100%;
padding: 16px 16px;
border: 2px solid #e2e8f0;
border-radius: 14px;
font-size: 15px;
font-family: inherit;
background: #fff;
transition: all 0.2s;
box-sizing: border-box;
}
.so-login-input.has-icon {
padding-left: 48px;
}
.so-login-input:focus {
outline: none;
border-color: var(--so-primary, #2563eb);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}
.so-login-input::placeholder {
color: var(--so-text-muted, #94a3b8);
}
.so-login-submit {
padding: 16px;
border: none;
border-radius: 14px;
background: linear-gradient(135deg, var(--so-primary, #2563eb) 0%, #1d4ed8 100%);
color: #fff;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
margin-top: 4px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.so-login-submit:hover {
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
transform: translateY(-2px);
}
.so-login-submit:active {
transform: translateY(0);
}
.so-login-submit:disabled {
opacity: 0.7;
cursor: wait;
transform: none;
box-shadow: none;
}
.so-login-error {
padding: 14px 16px;
background: linear-gradient(135deg, #fef2f2, #fff1f2);
border: 1px solid #fecaca;
border-radius: 12px;
color: #dc2626;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
/* Perks at bottom — 2x2 feature grid with colored icon chips.
* Replaces the older "inline-emoji + text + inner-borders" layout which
* looked busy and dated. Each perk is now a compact card with a tinted
* icon badge on the left and a subtle hover lift for affordance. */
.so-login-perks {
/* Single-column stack on all screen sizes. The sidebar drawer is
narrow (~420px on desktop) — a 2-column grid cramps labels onto
two lines ("Tjäna Sannebonus-poäng" breaking mid-word) which
reads worse than simply listing 4 items vertically. One tile per
row gives the labels room to breathe while still keeping the
section compact. */
display: grid;
grid-template-columns: 1fr;
gap: 8px;
padding: 18px 20px 22px;
border-top: 1px solid #eef2f7;
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
margin-top: auto;
}
.so-perk {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
font-size: 13px;
font-weight: 500;
color: #334155;
line-height: 1.3;
transition: transform 0.15s ease, box-shadow 0.15s ease,
border-color 0.15s ease;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
box-sizing: border-box;
}
.so-perk:hover {
transform: translateY(-1px);
border-color: #cbd5e1;
box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.08);
}
/* Colored icon chip — one tint per perk so the grid reads at a glance. */
.so-perk__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 10px;
color: #ffffff;
}
.so-perk__icon--star {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
box-shadow: 0 4px 10px -3px rgba(245, 158, 11, 0.45);
}
.so-perk__icon--pin {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
box-shadow: 0 4px 10px -3px rgba(239, 68, 68, 0.45);
}
.so-perk__icon--box {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
box-shadow: 0 4px 10px -3px rgba(59, 130, 246, 0.45);
}
.so-perk__icon--gift {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
box-shadow: 0 4px 10px -3px rgba(139, 92, 246, 0.45);
}
.so-perk__label {
flex: 1;
min-width: 0;
letter-spacing: -0.005em;
}
/* Dark theme — the drawer inherits the page theme; when dark, the perks
* need their own surface so they don't wash into the background. */
body.theme-dark .so-login-perks {
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
border-top-color: #1e293b;
}
body.theme-dark .so-perk {
background: #1e293b;
border-color: #334155;
color: #e2e8f0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
body.theme-dark .so-perk:hover {
border-color: #475569;
box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: reduce) {
.so-perk,
.so-perk:hover {
transform: none;
transition: none;
}
}
@media (max-width: 480px) {
.so-login-drawer { max-width: 100%; }
.so-login-hero { padding: 20px 18px 16px; }
.so-login-hero-icon { width: 42px; height: 42px; margin-bottom: 10px; }
.so-login-hero-icon svg { width: 22px; height: 22px; }
.so-login-hero-title { font-size: 18px; }
.so-login-hero-sub { font-size: 13px; }
.so-auth-content { padding: 24px 20px; }
.so-user-area { top: 12px; right: 12px; }
.so-user-name { display: none; }
.so-login-perks {
grid-template-columns: 1fr;
padding: 14px 16px 18px;
}
.so-perk {
padding: 10px 12px;
font-size: 12.5px;
}
.so-perk__icon {
width: 30px;
height: 30px;
border-radius: 8px;
}
}
/* ============================================
THEME TOGGLE (UNIFIED PILL WITH USER AREA)
============================================ */
/* User area = unified pill container */
.so-user-area {
display: flex;
align-items: center;
gap: 0;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
border-radius: 40px;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
/* Login button: remove own border/shadow, inherit from parent pill */
.so-user-area .so-login-btn {
border: none;
box-shadow: none;
background: transparent;
backdrop-filter: none;
border-radius: 40px 0 0 40px;
padding-right: 12px;
}
.so-user-area .so-login-btn:hover {
box-shadow: none;
transform: none;
background: rgba(0, 0, 0, 0.04);
}
/* Icon-only login button — symmetric square to the theme toggle on the
* other side of the pill, so the whole capsule reads as two equal slots
* with a divider between them. */
.so-user-area .so-login-btn.so-login-btn--icon-only {
width: 42px;
min-height: 38px;
padding: 0;
gap: 0;
font-size: 0; /* eliminates whitespace nodes if any */
display: flex;
align-items: center;
justify-content: center;
}
.so-user-area .so-login-btn.so-login-btn--icon-only svg {
width: 18px;
height: 18px;
opacity: 0.85;
}
/* User status (logged in): remove own border/shadow */
.so-user-area .so-user-status {
border: none;
box-shadow: none;
background: transparent;
backdrop-filter: none;
border-radius: 40px 0 0 40px;
}
/* Divider between login/user and toggle */
.theme-toggle-btn {
width: 42px;
height: 100%;
min-height: 38px;
border: none;
border-left: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 0;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
padding: 0;
position: relative;
flex-shrink: 0;
}
.theme-toggle-btn:hover {
background: rgba(0, 0, 0, 0.04);
}
.theme-toggle-btn:active {
background: rgba(0, 0, 0, 0.08);
}
.theme-toggle-btn .theme-icon {
width: 16px;
height: 16px;
color: #374151;
transition: opacity 0.3s ease, transform 0.3s ease;
position: absolute;
}
/* Dark mode: show sun icon */
.theme-dark .theme-icon-sun {
opacity: 1;
transform: rotate(0deg);
}
.theme-dark .theme-icon-moon {
opacity: 0;
transform: rotate(-90deg);
}
/* Light mode: show moon icon */
.theme-light .theme-icon-sun {
opacity: 0;
transform: rotate(90deg);
}
.theme-light .theme-icon-moon {
opacity: 1;
transform: rotate(0deg);
}
/* ---- Dark mode pill ---- */
.theme-dark .so-user-area {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.theme-dark .so-user-area .so-login-btn {
color: rgba(255, 255, 255, 0.9);
}
.theme-dark .so-user-area .so-login-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
.theme-dark .so-user-area .so-login-btn svg {
opacity: 0.9;
}
.theme-dark .theme-toggle-btn {
border-left-color: rgba(255, 255, 255, 0.12);
}
.theme-dark .theme-toggle-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
.theme-dark .theme-toggle-btn:active {
background: rgba(255, 255, 255, 0.15);
}
.theme-dark .theme-toggle-btn .theme-icon {
color: rgba(255, 255, 255, 0.85);
}
.theme-dark .so-user-area .so-user-status {
color: rgba(255, 255, 255, 0.9);
}
.theme-dark .so-user-area .so-user-name {
color: rgba(255, 255, 255, 0.9);
}
/* ============================================================
* Start Order — Stabilization fixes (appended)
* Covers: z-index scale, focus-visible, touch targets, iOS zoom,
* safe-area insets, color contrast, reduced motion, closed-branch
* cursor, landscape, visualViewport height, maps-unavailable banner.
* Kept at file end so it overrides earlier rules via cascade.
* ============================================================ */
:root {
--so-z-base: 1;
--so-z-sticky: 100; /* continue bar, sticky headers */
--so-z-dropdown: 500; /* address suggestions */
--so-z-overlay: 1000; /* backdrops */
--so-z-modal: 1100; /* standard modals */
--so-z-toast: 1200; /* toasts above modals */
--so-z-loading: 1300; /* full-screen loading */
--so-z-quickstart: 1400; /* quick-start intercepts everything */
}
/* Full-height containers: prefer the live viewport so iOS keyboard
* doesn't push the continue bar below the fold. */
.start-order-container,
.step-location,
.step-method,
.loading-screen,
.quick-start-modal {
min-height: var(--so-viewport-h, 100vh);
}
/* Safe-area insets for notch / home indicator on iOS. */
.start-order-container {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.continue-bar {
padding-bottom: max(16px, env(safe-area-inset-bottom));
z-index: var(--so-z-sticky);
}
/* Mobile: trim safe-area padding so the compact layout stays under
~130px. 8px floor is enough to clear the home-indicator on devices
that report a non-zero env(safe-area-inset-bottom). */
@media (max-width: 768px) {
.continue-bar {
padding-bottom: max(8px, env(safe-area-inset-bottom));
}
}
.start-order-header,
.so-header {
padding-top: env(safe-area-inset-top);
}
/* Restore a visible keyboard focus ring. Earlier rules use
* `outline:none` for aesthetics; :focus-visible only fires for
* keyboard navigation, so mouse clicks stay clean. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
outline: 2px solid #2563eb !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}
/* Off-screen branch cards skip paint/layout until they scroll into
* view — a cheap win for long lists (38+ branches) without touching
* the render path. Safe everywhere; older browsers ignore it. */
.location-card {
content-visibility: auto;
contain-intrinsic-size: 220px;
}
/* Closed branch cards: make the disabled-ness legible on hover. */
.location-card.closed,
.location-card[data-disabled="true"] {
cursor: not-allowed;
}
.location-card.closed:hover,
.location-card[data-disabled="true"]:hover {
transform: none;
}
/* Reduced motion — respect the OS preference. */
@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;
}
}
/* Maps failure banner (injected by window.fbGoogleMapsFailed). */
.so-maps-error-banner {
position: fixed;
top: env(safe-area-inset-top, 0);
left: 0;
right: 0;
padding: 12px 16px;
background: #fef3c7;
color: #92400e;
border-bottom: 1px solid #fcd34d;
font-size: 14px;
text-align: center;
z-index: var(--so-z-toast);
}
body.so-maps-unavailable .map-container,
body.so-maps-unavailable #locations-map {
display: none !important;
}
/* ---- Mobile (<= 768px): touch targets, iOS zoom prevention, contrast ---- */
@media (max-width: 768px) {
.back-button,
.locate-btn,
.search-toggle-btn,
.fb-modal-close,
.so-login-close {
min-height: 44px;
min-width: 44px;
padding: 10px 14px;
}
.search-clear,
.clear-search {
/* Mobile: 28×28 instead of 44×44. The search row itself is
already compact (~40px tall) so a 44px tap target would
overflow and dwarf the X. 28px is still thumb-reachable for
a non-critical "clear" action. */
min-height: 28px !important;
min-width: 28px !important;
width: 26px !important;
height: 26px !important;
padding: 4px !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
.search-clear svg,
.clear-search svg {
width: 14px !important;
height: 14px !important;
}
.continue-btn,
.method-card,
.location-card,
.so-login-submit {
min-height: 48px;
}
/* Prevent iOS Safari auto-zoom on input focus (<16px triggers zoom). */
input,
select,
textarea,
.search-input,
#so-login-username,
#so-login-password,
#so-register-email,
#so-register-password {
font-size: 16px !important;
}
/* Faded secondary text fails WCAG AA on mobile — lift it. */
.method-description,
.locations-simple-title,
.location-address {
color: rgba(0, 0, 0, 0.72);
}
.theme-dark .method-description,
.theme-dark .locations-simple-title,
.theme-dark .location-address {
color: rgba(255, 255, 255, 0.78);
}
}
/* ---- Landscape: avoid dead 100vh when keyboard is up on short screens. */
@media (orientation: landscape) and (max-height: 500px) {
.start-order-container,
.step-location {
min-height: auto;
}
.continue-bar {
position: static;
}
}
/* ---- Widescreen: keep content readable without gaping sides. */
@media (min-width: 1920px) {
.start-order-container {
max-width: 1680px;
margin-left: auto;
margin-right: auto;
}
.locations-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* ---- Back button: keep label visible on mobile; only hide on very narrow
* screens (<380px). JS already mirrors the label into aria-label, so the
* icon-only state stays screen-reader accessible. */
@media (max-width: 640px) {
.back-button .back-button-text,
.back-button span {
display: inline;
}
}
@media (max-width: 379px) {
.back-button .back-button-text,
.back-button span {
/* visually hide but keep accessible for any AT that still reads it */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.back-button {
gap: 0;
padding-left: 12px;
padding-right: 12px;
}
}
/* ---- Scoped keyboard-only focus ring for start-order widgets.
* Matches the task's requested selector list; augments the existing
* global focus-visible rule so these components get a consistent ring
* even when nested in containers that don't match .start-order-page. */
.start-order button:focus-visible,
.start-order a:focus-visible,
.start-order [tabindex="0"]:focus-visible,
.start-order-page button:focus-visible,
.start-order-page a:focus-visible,
.start-order-page [tabindex="0"]:focus-visible {
outline: 2px solid var(--fb-focus, #2563eb);
outline-offset: 2px;
}
/* ---- Explicit prefers-reduced-motion block for the class patterns
* used by start-order animations (fade-in, slide-down, transition-*).
* A broader `*`-based rule already exists above; this adds belt-and-
* braces coverage for inline/keyframe animations on those classes. */
@media (prefers-reduced-motion: reduce) {
.fade-in,
.slide-down,
[class*="transition"] {
animation: none !important;
transition: none !important;
}
}
/* Map view container needs relative positioning for absolutely-positioned
* overlays (e.g. future hint banners). */
#map-view {
position: relative;
}
/* =========================================================================
Wolt-unavailable recovery modal
--------------------------------------------------------------------------
Shown when the polygon says "yes" but Wolt API says "no courier". Offers
retry / pickup / change-address instead of a dead-end red toast.
========================================================================= */
.wolt-unavailable-modal {
max-width: 460px;
padding: 0;
overflow: hidden;
}
.wolt-unavailable-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 32px 28px 24px;
text-align: center;
background: linear-gradient(135deg,
color-mix(in srgb, #f59e0b 12%, #ffffff) 0%,
color-mix(in srgb, #f59e0b 4%, #ffffff) 100%);
border-bottom: 1px solid color-mix(in srgb, #f59e0b 20%, transparent);
}
.wolt-unavailable-icon {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: #ffffff;
box-shadow: 0 12px 24px -8px rgba(245, 158, 11, 0.5);
}
.wolt-unavailable-title {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.01em;
line-height: 1.25;
}
.wolt-unavailable-explanation {
margin: 0;
font-size: 14.5px;
line-height: 1.55;
color: #475569;
max-width: 360px;
}
.wolt-unavailable-reason {
margin: 4px 0 0;
padding: 10px 14px;
background: color-mix(in srgb, #f59e0b 10%, #ffffff);
border-left: 3px solid #f59e0b;
border-radius: 6px;
font-size: 13px;
color: #78350f;
line-height: 1.5;
text-align: left;
align-self: stretch;
}
.wolt-unavailable-actions {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px 24px 24px;
background: #ffffff;
}
.wolt-modal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 13px 18px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
border: 1.5px solid transparent;
transition: transform 0.15s ease, box-shadow 0.15s ease,
background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
letter-spacing: -0.005em;
}
.wolt-modal-btn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
}
.wolt-modal-btn--primary {
background: linear-gradient(135deg,
var(--primary-color, #2563eb) 0%,
var(--secondary-color, #3b82f6) 100%);
color: #ffffff;
box-shadow:
0 8px 20px -6px color-mix(in srgb, var(--primary-color, #2563eb) 50%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.wolt-modal-btn--primary:hover {
transform: translateY(-1px);
filter: brightness(1.05);
box-shadow:
0 12px 24px -6px color-mix(in srgb, var(--primary-color, #2563eb) 60%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.wolt-modal-btn--primary:focus-visible {
outline: 3px solid color-mix(in srgb, var(--primary-color, #2563eb) 40%, transparent);
outline-offset: 2px;
}
/* Secondary primary (2nd primary button, e.g. "Switch to pickup") —
same weight but flipped to light background so there are no
"which button is the main one?" stalemates. */
.wolt-modal-btn--primary + .wolt-modal-btn--primary {
background: #ffffff;
color: var(--primary-color, #2563eb);
border-color: color-mix(in srgb, var(--primary-color, #2563eb) 35%, #ffffff);
box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.08);
}
.wolt-modal-btn--primary + .wolt-modal-btn--primary:hover {
background: color-mix(in srgb, var(--primary-color, #2563eb) 6%, #ffffff);
border-color: var(--primary-color, #2563eb);
transform: translateY(-1px);
}
.wolt-modal-btn--ghost {
background: transparent;
color: #475569;
border-color: #e2e8f0;
}
.wolt-modal-btn--ghost:hover {
background: #f8fafc;
border-color: #cbd5e1;
color: #0f172a;
}
.wolt-modal-btn--ghost:focus-visible {
outline: 3px solid #cbd5e1;
outline-offset: 2px;
}
/* Dark theme: swap light surfaces to slate so the modal reads against
the dark page. */
body.theme-dark .wolt-unavailable-header {
background: linear-gradient(135deg,
color-mix(in srgb, #f59e0b 18%, #1e293b) 0%,
color-mix(in srgb, #f59e0b 6%, #1e293b) 100%);
border-bottom-color: color-mix(in srgb, #f59e0b 30%, transparent);
}
body.theme-dark .wolt-unavailable-title {
color: #f8fafc;
}
body.theme-dark .wolt-unavailable-explanation {
color: #cbd5e1;
}
body.theme-dark .wolt-unavailable-reason {
background: color-mix(in srgb, #f59e0b 14%, #1e293b);
color: #fde68a;
}
body.theme-dark .wolt-unavailable-actions {
background: #0f172a;
}
body.theme-dark .wolt-modal-btn--ghost {
color: #cbd5e1;
border-color: #334155;
}
body.theme-dark .wolt-modal-btn--ghost:hover {
background: #1e293b;
color: #f1f5f9;
border-color: #475569;
}
/* Reduced motion: drop transforms. */
@media (prefers-reduced-motion: reduce) {
.wolt-modal-btn,
.wolt-modal-btn:hover {
transform: none;
}
}
@media (max-width: 480px) {
.wolt-unavailable-modal {
max-width: calc(100% - 24px);
}
.wolt-unavailable-header {
padding: 24px 20px 18px;
}
.wolt-unavailable-title {
font-size: 18px;
}
.wolt-unavailable-explanation {
font-size: 14px;
}
.wolt-unavailable-actions {
padding: 16px 18px 18px;
}
}
/* =========================================================================
MOBILE COMPACTNESS — location step top area
--------------------------------------------------------------------------
Earlier attempt targeted `.step-title` / `.step-header` / `.locations-
controls > .sort-btn` — all wrong classes for this template. The actual
markup is:
.step-location
.location-header-top (Back + Logo)
h1.location-step-title ← "Välj plats för avhämtning"
.locations-section
h2.locations-simple-title ← "Välj en restaurang"
.address-banner
.search-bar-row (search input + Hitta mig button)
.locations-controls > .view-tabs (Lista | Karta)
.sort-options > .sort-btn (chips)
.view-content
Now targeting the correct selectors so every strip above the list/map
actually shrinks on mobile.
========================================================================= */
@media (max-width: 768px) {
.step-location {
padding: 12px 14px 60px !important;
}
/* Back + logo strip — tight, no thick bottom border eating space. */
.location-header-top {
margin-bottom: 10px !important;
padding-bottom: 10px !important;
gap: 12px !important;
}
/* Main title "Choose your location for …" */
.location-step-title {
font-size: 17px !important;
line-height: 1.2 !important;
margin: 0 0 4px 0 !important;
letter-spacing: -0.2px !important;
}
/* Sub-heading "Please select a restaurant" — quiet secondary. */
.locations-simple-title {
font-size: 13px !important;
margin: 0 0 10px 0 !important;
opacity: 0.7 !important;
}
/* Back button — the base rule enforces a 44×44px tap target per
WCAG, but on mobile that looks oversized next to a shrunk title.
We drop to 34px which is still tap-comfortable for the thumb. */
.back-button {
min-height: 34px !important;
min-width: 0 !important;
padding: 6px 12px !important;
font-size: 12px !important;
gap: 4px !important;
border-radius: 6px !important;
}
.back-button svg {
width: 14px !important;
height: 14px !important;
}
/* Address banner — tighter padding + shorter label. */
.address-banner {
padding: 10px 14px !important;
margin-bottom: 10px !important;
gap: 10px !important;
}
.address-banner-icon {
font-size: 16px !important;
}
.address-label {
font-size: 10px !important;
letter-spacing: 0.3px !important;
}
.address-text {
font-size: 12.5px !important;
line-height: 1.25 !important;
}
.address-change-btn {
padding: 6px 10px !important;
font-size: 12px !important;
}
/* Search row + "Hitta mig" / "Find me" button.
The row is a flex container that defaults to `align-items:
stretch`, so the input wrapper stretches to match whichever
child is tallest. Two earlier rules inflate the locate-btn on
mobile:
1. Line ~5516 `@media (max-width:768px) .locate-btn {
min-height: 44px; padding: 10px 14px; }` (WCAG tap target).
2. Line ~5545 `.search-input { font-size: 16px !important; }`
(iOS zoom prevention on focus).
We can't drop the 16px font (iOS auto-zooms on focus otherwise),
so we lock an explicit 38px height on both children and use
line-height + zero vertical padding to keep text centered. That
prevents the stretch and collapses the outer pill.
Specificity: `.search-bar-row > .locate-btn` is (0,2,1), beating
the earlier `.locate-btn` (0,1,0). Coupled with !important we
also out-rank the iOS-zoom `.search-input { 16px !important }`. */
.search-bar-row {
margin-bottom: 10px !important;
gap: 6px !important;
padding: 3px !important;
border-radius: 10px !important;
align-items: center !important;
min-height: 0 !important;
}
.search-bar-row > .search-input-wrapper {
min-height: 0 !important;
height: 38px !important;
display: flex !important;
align-items: center !important;
}
.search-bar-row .search-input-wrapper .search-input {
/* Font 14.5px to match surrounding UI rhythm. This IS below
iOS's 16px auto-zoom threshold — on focus, iOS Safari may
zoom the viewport ~10%. Accepted as a readability trade-off
per user feedback; if iOS users complain about the zoom,
revert to 16px here. */
font-size: 14.5px !important;
padding: 0 36px 0 38px !important;
height: 38px !important;
line-height: 38px !important;
}
.search-bar-row > .locate-btn {
padding: 0 12px !important;
font-size: 12.5px !important;
border-radius: 8px !important;
min-height: 0 !important;
min-width: 0 !important;
height: 38px !important;
line-height: 1 !important;
}
.search-bar-row > .locate-btn svg {
width: 16px !important;
height: 16px !important;
}
/* The absolutely-positioned .search-icon uses `top: 50%; transform
translateY(-50%)` — it stays centered on the fixed-height input
without additional overrides. */
/* List / Map tab row */
.locations-controls {
margin-bottom: 10px !important;
gap: 8px !important;
}
.view-tab {
padding: 8px 12px !important;
font-size: 12.5px !important;
}
.view-tab svg {
width: 14px !important;
height: 14px !important;
}
/* Sort chips (Recommended / Nearest / A-Z) — separate container. */
.sort-options {
gap: 6px !important;
margin-bottom: 10px !important;
}
.sort-options .sort-btn {
padding: 6px 12px !important;
font-size: 12px !important;
min-height: 32px !important;
}
.sort-options .sort-btn svg {
width: 13px !important;
height: 13px !important;
}
}
@media (max-width: 480px) {
/* Extra-tight on very small phones (≤480px). */
.step-location {
padding: 10px 12px 60px !important;
}
.location-header-top {
margin-bottom: 8px !important;
padding-bottom: 8px !important;
}
.location-step-title {
font-size: 16px !important;
}
.locations-simple-title {
font-size: 12px !important;
margin: 0 0 8px 0 !important;
}
.back-button {
min-height: 32px !important;
padding: 5px 10px !important;
font-size: 11.5px !important;
}
.back-button svg {
width: 13px !important;
height: 13px !important;
}
.address-banner {
padding: 8px 12px !important;
}
.address-text {
font-size: 12px !important;
}
/* Tighter search row on very small phones — 36px children inside a
2px frame = ~40px outer pill. Keeps iOS-zoom-safe 16px font. */
.search-bar-row {
padding: 2px !important;
}
.search-bar-row > .search-input-wrapper {
height: 36px !important;
}
.search-bar-row .search-input-wrapper .search-input {
padding: 0 34px 0 36px !important;
height: 36px !important;
line-height: 36px !important;
}
.search-bar-row > .locate-btn {
padding: 0 10px !important;
font-size: 12px !important;
height: 36px !important;
}
.view-tab {
padding: 7px 10px !important;
}
.sort-options .sort-btn {
padding: 5px 10px !important;
font-size: 11.5px !important;
min-height: 28px !important;
}
}