*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Card promozionale storefront (Admin > Messaggi personalizzati) ── */
.promo-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border: 2px solid #fc070c;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}
.promo-card-body { flex: 1; min-width: 0; }
.promo-card-t1 { font-weight: 800; line-height: 1.15; }
.promo-card-t2 { font-weight: 600; margin-top: .25rem; line-height: 1.2; }
.promo-card-lines { list-style: none; margin: .85rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.promo-card-line { display: flex; align-items: center; gap: .6rem; font-size: 15px; color: #1A1A1A; }
.promo-card-ic { display: inline-flex; flex: 0 0 auto; }
.promo-card-logo { flex: 0 0 auto; }
.promo-card-logo img { display: block; width: 120px; height: 120px; object-fit: contain; border-radius: 14px; }

@media (max-width: 640px) {
    .promo-card { flex-direction: column-reverse; align-items: stretch; text-align: center; gap: .85rem; padding: 1.1rem; }
    .promo-card-line { justify-content: center; }
    .promo-card-logo img { width: 92px; height: 92px; margin: 0 auto; }
}

/* ── Fotocamera + ritaglio foto prodotto (Scatta foto) ── */
.mcam-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1rem; padding: 1rem;
}
.mcam-stage { position: relative; width: min(86vw, 70vh); aspect-ratio: 1; }
.mcam-video { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background: #111; }
.mcam-frame { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.9); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
.mcam-hint { color: #eee; font-size: 14px; text-align: center; }
.mcam-bar { display: flex; gap: .75rem; }
.mcam-btn { padding: 12px 22px; border-radius: 10px; border: 1px solid #888; background: #2a2a2a; color: #fff; font-weight: 600; cursor: pointer; }
.mcam-btn-primary { background: #fc070c; border-color: #fc070c; }
.mcam-cropwrap { display: flex; align-items: center; justify-content: center; }
.mcam-cropframe { position: relative; width: min(82vw, 60vh); aspect-ratio: 1; overflow: hidden; border-radius: 12px; border: 2px solid rgba(255,255,255,.9); touch-action: none; background: #111; }
.mcam-cropimg { position: absolute; top: 0; left: 0; user-select: none; cursor: grab; }
.mcam-zoomrow { display: flex; align-items: center; gap: .75rem; width: min(82vw, 60vh); color: #fff; }
.mcam-zoom { flex: 1; }

/* ── Editor Messaggi personalizzati (Admin) ── */
.adm-msg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.adm-color { width: 56px; height: 38px; padding: 2px; border: 1px solid #D9CFBA; border-radius: 8px; background: #fff; cursor: pointer; }
.adm-msg-line { padding: .75rem; border: 1px solid #EFE9DC; border-radius: 10px; margin-bottom: .6rem; }
@media (max-width: 900px) { .adm-msg-grid { grid-template-columns: 1fr; } }

/* Picker icona a griglia per i messaggi promo */
.icon-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.icon-pick {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #D9CFBA; border-radius: 9px; background: #fff; color: #4A4A4A; cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.icon-pick:hover { border-color: #fc070c; color: #fc070c; }
.icon-pick--on { border-color: #fc070c; background: #fff1f1; color: #fc070c; box-shadow: 0 0 0 1px #fc070c inset; }

:root {
    --gold: #E2231A;
    --gold-light: #E8D5A3;
    --gold-dark: #B0151B;
    --anthracite: #141414;
    --ivory: #FAF8F3;
    --ivory-dark: #F0EDE4;
    --white: #FFFFFF;
    --text-primary: #1A1A1A;
    --text-secondary: #6B6B6B;
    --border: #E0D9C8;
    --shadow: 0 2px 20px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 40px rgba(0,0,0,0.14);
    --radius: 12px;
    --radius-sm: 6px;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--ivory) !important;
    font-family: 'Georgia', serif;
    color: var(--text-primary);
    min-height: 100vh;
    /* Nessuno scroll orizzontale: i contenuti restano dentro la larghezza schermo.
       NB: 'clip' (non 'hidden') perché overflow-x:hidden sul root creerebbe un
       contesto di scroll che ROMPE position:sticky dei discendenti (header/catbar). */
    max-width: 100%;
    overflow-x: clip;
}

#app, [b-app], .page, main, article {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.content {
    padding: 0 !important;
    margin: 0 !important;
}

.top-row {
    display: none !important;
}

a, .btn-link {
    color: var(--gold-dark);
}

/* ── Layout ─────────────────────────────────────── */
.app-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    gap: 0;
}

.left-panel {
    background: var(--ivory);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: auto;
}

.right-panel {
    background: #e8e6e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
}

/* ── User bar ────────────────────────────────────── */
.user-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(201,168,76,0.2);
    margin-bottom: 0.25rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--anthracite);
    font-size: 14px;
    font-weight: 700;
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-email {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    font-family: 'Segoe UI', sans-serif;
}

/* Bottone tondo icona — usato per gear e simili */
.icon-btn-round {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 50%;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.18s;
    flex-shrink: 0;
}

    .icon-btn-round:hover {
        border-color: var(--gold);
        color: var(--gold);
        background: rgba(201,168,76,0.1);
    }

/* Variante per sfondo chiaro (preview controls) */
.preview-controls .icon-btn-round {
    border-color: var(--border);
    color: var(--text-secondary);
}

    .preview-controls .icon-btn-round:hover {
        border-color: var(--gold-dark);
        color: var(--gold-dark);
        background: rgba(154,122,46,0.08);
    }

.logout-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(201,168,76,0.3);
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

    .logout-btn:hover {
        border-color: var(--gold);
        color: var(--gold);
        background: rgba(201,168,76,0.08);
    }

/* ── Header ─────────────────────────────────────── */
.menu-header {
    background: var(--anthracite) !important;
    /* No extra left/top/right padding: the .left-panel--full container already pads the tab.
       Only keep a small vertical inner breathing room so the dark strip isn't razor-thin. */
    padding: 0.9rem 1rem;
    /* Stretch full width negating the parent padding, so the dark strip runs edge-to-edge. */
    margin: -1.25rem -1.5rem 0;
    display: flex !important;
    flex-direction: column;
    gap: 1.25rem;
}

.menu-header-top {
    display: flex !important;
    align-items: center;
    gap: 1.25rem;
}

.logo-area {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border: 2px dashed var(--gold);
    border-radius: var(--radius-sm);
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: default;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s;
}

    .logo-area:hover {
        border-color: var(--gold-light);
    }

    .logo-area img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.logo-placeholder {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--gold);
    font-size: 11px;
    font-family: 'Segoe UI', sans-serif;
    text-align: center;
}

.logo-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-sm);
}

.logo-overlay-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.logo-remove-btn {
    background: rgba(220,38,38,0.85);
    color: #fff;
}

    .logo-remove-btn:hover {
        background: #dc2626;
    }

.logo-change-btn {
    background: rgba(255,255,255,0.2);
    color: #fff;
    cursor: pointer;
}

    .logo-change-btn:hover {
        background: rgba(255,255,255,0.35);
    }

.hotel-info {
    flex: 1;
}

.hotel-name-input {
    font-family: 'Georgia', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--white) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(201,168,76,0.3) !important;
    width: 100%;
    padding: 4px 0;
    outline: none;
    box-shadow: none !important;
}

    .hotel-name-input::placeholder {
        color: rgba(255,255,255,0.3) !important;
    }

    .hotel-name-input:focus {
        border-top-color: var(--gold) !important;
    }

.menu-header-fields {
    display: flex !important;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.field-group {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 130px;
}

.field-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    font-family: 'Segoe UI', sans-serif;
}

.field-input {
    font-family: 'Segoe UI', sans-serif;
    font-size: 15px;
    color: var(--white) !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(201,168,76,0.25) !important;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    outline: none;
    box-shadow: none !important;
}

    .field-input:focus {
        border-color: var(--gold) !important;
    }

.btn-gold {
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-gold-outline {
    background: transparent !important;
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
}

    .btn-gold-outline:hover {
        background: rgba(201,168,76,0.1) !important;
    }

.btn-gold-fill {
    background: var(--gold) !important;
    color: var(--anthracite) !important;
    border: none !important;
}

    .btn-gold-fill:hover {
        background: var(--gold-light) !important;
    }

/* ── Categorie ───────────────────────────────────── */
.categories-wrapper {
    padding: 1.25rem 1.75rem 2rem;
    flex: 1;
}

.categories-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    align-items: start;
}
/* Expanded categories stay within their own grid cell (no full-width span) */
@media (max-width: 960px) {
    .categories-list {
        grid-template-columns: 1fr;
    }
}

/* Category order badge */
.category-order-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--anthracite);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    margin-right: 0.5rem;
}

.category-card {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

    .category-card:hover {
        box-shadow: var(--shadow-hover);
    }

    .category-card.drag-over {
        border-color: var(--gold) !important;
    }

.category-header {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    background: var(--ivory-dark) !important;
    cursor: pointer;
    user-select: none;
}

.drag-handle {
    color: var(--text-secondary);
    cursor: grab;
    font-size: 18px;
    opacity: 0.4;
    font-family: monospace;
}

.category-name {
    font-family: 'Georgia', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary) !important;
    white-space: nowrap;
}

.category-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.category-stats {
    font-size: 10px;
    font-family: 'Segoe UI', sans-serif;
    color: var(--gold-dark);
    font-weight: 600;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.cat-stat-sep {
    color: var(--border);
    font-weight: 400;
}

.category-name-input {
    font-family: 'Georgia', serif;
    font-size: 1.05rem;
    font-weight: 600;
    flex: 1;
    border: none !important;
    border-bottom: 2px solid var(--gold) !important;
    background: transparent !important;
    outline: none !important;
    padding: 2px 4px;
    box-shadow: none !important;
}

.category-actions {
    display: flex !important;
    gap: 4px;
}

.icon-btn {
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    color: var(--text-secondary);
    transition: all 0.15s;
    box-shadow: none !important;
}

    .icon-btn:hover {
        background: var(--ivory) !important;
        color: var(--text-primary) !important;
    }

    .icon-btn.danger:hover {
        background: #fef2f2 !important;
        color: #dc2626 !important;
    }

/* Icone più grandi per i prodotti */
.icon-btn-lg {
    font-size: 20px !important;
    padding: 6px 10px !important;
}

.chevron {
    font-size: 13px;
    color: var(--text-secondary);
    transition: transform 0.2s;
    display: inline-block;
}

    .chevron.open {
        transform: rotate(180deg);
    }

.category-option-row {
    padding: 0.5rem 1rem 0.25rem;
}

.category-option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #555);
    cursor: pointer;
    user-select: none;
}

/* ── Prodotti ────────────────────────────────────── */
.products-list {
    padding: 0.75rem 1rem 1.1rem;
    display: flex !important;
    flex-direction: column;
    gap: 0.6rem;
}

.product-row {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border) !important;
    background: var(--ivory) !important;
    transition: all 0.15s;
}

    .product-row:hover {
        border-color: var(--gold-light) !important;
    }

    .product-row.drag-over {
        border-color: var(--gold) !important;
        background: #fefae8 !important;
    }

/* Immagine prodotto grande */
.product-img-wrap {
    flex-shrink: 0;
    cursor: pointer;
}

.product-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--border);
    display: block;
}

.product-thumb-placeholder {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: var(--ivory-dark) !important;
    border: 1px dashed var(--border) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Testo prodotto — nome + descrizione */
.product-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.product-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary) !important;
    font-family: 'Segoe UI', sans-serif;
    cursor: pointer;
}

.product-desc {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: 'Segoe UI', sans-serif;
    font-style: italic;
    line-height: 1.3;
}

.product-name-input {
    font-size: 15px;
    font-weight: 600;
    border: none !important;
    border-bottom: 1px solid var(--gold) !important;
    background: transparent !important;
    outline: none !important;
    padding: 2px 4px;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: none !important;
    width: 100%;
}

.product-desc-input {
    font-size: 12px;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    background: var(--white) !important;
    outline: none !important;
    padding: 4px 8px;
    font-family: 'Segoe UI', sans-serif;
    font-style: italic;
    resize: none;
    color: var(--text-secondary);
    width: 100%;
    box-shadow: none !important;
}

    .product-desc-input:focus {
        border-color: var(--gold) !important;
    }

/* Checkbox pranzo/cena più grandi */
.meal-checks {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
}

.meal-check {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-family: 'Segoe UI', sans-serif;
}

    .meal-check input[type=checkbox] {
        width: 22px;
        height: 22px;
        accent-color: var(--gold-dark);
        cursor: pointer;
    }

.product-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.add-product-btn {
    margin-top: 0.4rem;
    width: 100%;
    padding: 9px;
    background: transparent !important;
    border: 1px dashed var(--border) !important;
    border-radius: var(--radius-sm);
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    color: var(--text-secondary) !important;
    cursor: pointer;
    transition: all 0.15s;
}

    .add-product-btn:hover {
        border-color: var(--gold) !important;
        color: var(--gold-dark) !important;
    }

.add-category-btn {
    width: 100%;
    padding: 14px;
    background: transparent !important;
    border: 2px dashed var(--border) !important;
    border-radius: var(--radius);
    font-family: 'Georgia', serif;
    font-size: 15px;
    color: var(--text-secondary) !important;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: all 0.2s;
}

    .add-category-btn:hover {
        border-color: var(--gold) !important;
        color: var(--gold-dark) !important;
    }

.divider {
    height: 1px;
    background: var(--border);
    margin: 0 1rem;
}

/* ── Preview destra ──────────────────────────────── */
.right-panel-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-family: 'Segoe UI', sans-serif;
}

.preview-sticky {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.preview-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 210mm;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.preview-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* ── Mode toggle ─────────────────────────────────── */
.mode-toggle {
    display: flex;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid var(--gold-dark);
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.mode-btn {
    flex: 1;
    padding: 8px 14px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: none;
    background: #F5F0E8;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
}

    .mode-btn + .mode-btn {
        border-left: 2px solid var(--gold-dark);
    }

    .mode-btn:hover:not(.active) {
        background: #EDE6D6;
        color: var(--gold-dark);
    }

    .mode-btn.active {
        background: var(--anthracite);
        color: var(--gold);
        font-weight: 700;
        letter-spacing: 0.06em;
    }

/* ── Zoom controls ───────────────────────────────── */
.zoom-controls {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--white);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.zoom-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
    font-family: 'Segoe UI', sans-serif;
    user-select: none;
}

    .zoom-btn:hover {
        background: var(--ivory-dark);
        color: var(--anthracite);
    }

.zoom-label {
    font-size: 11px;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 38px;
    text-align: center;
    border-left: 1.5px solid var(--border);
    border-right: 1.5px solid var(--border);
    line-height: 30px;
    letter-spacing: 0.03em;
}

/* ── Settings panels (overlay + pannello) ────────── */
.panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(2px);
    z-index: 900;
}

.settings-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 901;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 12px 60px rgba(0,0,0,0.22);
    width: 360px;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

/* Popup dimensioni preview: scroll interno se piu' alto del viewport */
.settings-panel.preview-dims-panel {
    width: 380px;
    display: flex;
    flex-direction: column;
}
.settings-panel.preview-dims-panel .settings-panel-body {
    overflow-y: auto;
    max-height: calc(100vh - 6rem);
}
.preview-dims-help {
    font-size: 12px;
    color: #6B6B6B;
    line-height: 1.45;
    margin: 0 0 0.85rem 0;
    padding: 0.6rem 0.75rem;
    background: #FDECEC;
    border: 1px solid #E8D5A3;
    border-radius: 6px;
    font-family: 'Segoe UI', sans-serif;
}

.settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--anthracite);
    border-bottom: 2px solid var(--gold-dark);
}

.settings-panel-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.settings-close-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.15s;
}

    .settings-close-btn:hover {
        color: var(--gold);
        background: rgba(255,255,255,0.08);
    }

.settings-panel-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-height: 70vh;
    overflow-y: auto;
}

.settings-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-dark);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.settings-divider {
    height: 1px;
    background: var(--border);
    margin: 0.25rem 0;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.settings-row-check {
    justify-content: space-between;
}

.settings-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--gold-dark);
    cursor: pointer;
    flex-shrink: 0;
}

.settings-label {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

.settings-num-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.settings-num-btn {
    width: 22px;
    height: 26px;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
    user-select: none;
}

.settings-num-btn:hover {
    background: var(--ivory);
    border-color: var(--gold);
    color: var(--gold-dark);
}

.settings-num-btn:active {
    background: var(--gold-light);
}

.settings-num-input {
    width: 52px;
    padding: 5px 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--white);
    text-align: right;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}

    .settings-num-input::-webkit-outer-spin-button,
    .settings-num-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .settings-num-input:focus {
        outline: none;
        border-color: var(--gold-dark);
    }

    .settings-num-input.input-error {
        border-color: #D94040;
        background: #FFF5F5;
    }

.settings-px {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
}

.settings-error {
    font-size: 11px;
    color: #D94040;
    font-family: 'Segoe UI', sans-serif;
    margin-top: -4px;
    padding-left: 2px;
}

.settings-select {
    flex: 1;
    padding: 6px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
    color: var(--text-primary);
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.15s;
}

    .settings-select:focus {
        outline: none;
        border-color: var(--gold-dark);
    }

.font-preview-sample {
    font-size: 13px;
    color: var(--text-primary);
    padding: 8px 10px;
    background: var(--ivory-dark);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-top: -2px;
    font-style: italic;
    opacity: 0.85;
}

.settings-reset-btn {
    margin-top: 0.25rem;
    padding: 8px 14px;
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    align-self: flex-start;
}

    .settings-reset-btn:hover {
        border-color: var(--gold-dark);
        color: var(--gold-dark);
        background: rgba(154,122,46,0.06);
    }

/* ── Palette colori ──────────────────────────────── */
.color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.color-label {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
}

.color-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.color-swatch {
    width: 36px;
    height: 28px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 2px;
    background: transparent;
}

.color-hex {
    font-size: 11px;
    font-family: monospace;
    color: var(--text-secondary);
    min-width: 60px;
}

/* ── Foglio A4 con zoom wrapper ──────────────────── */
.a4-wrapper {
    transform-origin: top center;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /* L'altezza visiva si adatta allo scale */
    margin-bottom: calc((297mm * var(--scale, 0.9)) - 297mm);
}

/* ── Foglio A4 ───────────────────────────────────── */
.a4-sheet {
    /* Dimensioni lette dalle CSS var --page-w / --page-h impostate inline
       dal Razor a partire dalle const PreviewA4PortraitWidthMm etc. del @code.
       Cosi' le 4 combinazioni A4/A5 portrait/landscape sono tutte tweakable
       da un singolo punto in C#. Fallback a A4 portrait standard. */
    width: var(--page-w, 210mm);
    height: var(--page-h, 297mm);
    background: var(--pb, #FFFFFF);
    box-shadow: 0 4px 32px rgba(0,0,0,0.22);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

    .a4-sheet .print-area {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--pb, #FFFFFF);
    }

    .a4-sheet .menu-block {
        width: 100%;
        padding: 10mm 14mm;
        background: var(--pb, #FFFFFF);
        flex-shrink: 0;
    }

/* ── Modalità single: scorre su più pagine ───────── */
.a4-sheet.a4-multipage {
    height: auto;
    min-height: var(--page-h, 297mm);
    overflow: visible;
}

    .a4-sheet.a4-multipage .print-area {
        position: static;
        height: auto;
        overflow: visible;
    }

    /* Linea di confine pagina in preview: dietro al contenuto, non lo taglia.
       --page-h è impostato inline sul foglio (A4 portrait=297mm, landscape=210mm,
       A5 portrait=210mm, landscape=148mm). Una singola riga gold marca la fine di
       ogni pagina virtuale; il contenuto sopra ha z-index: 1 così resta leggibile. */
    .a4-sheet.a4-multipage::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background-image: repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--page-h, 297mm) - 12px),
            rgba(0, 0, 0, 0.05) calc(var(--page-h, 297mm) - 12px),
            rgba(0, 0, 0, 0.05) calc(var(--page-h, 297mm) - 2px),
            rgba(184, 151, 42, 0.75) calc(var(--page-h, 297mm) - 2px),
            rgba(184, 151, 42, 0.75) var(--page-h, 297mm)
        );
    }

    @media print {
        .a4-sheet.a4-multipage::before {
            display: none !important;
        }
    }

    /* Quando il JS di paginazione ha trasformato il foglio in una finestra
       di pagina, nasconde la riga di confine (ogni clone è già un foglio a sé). */
    .a4-sheet[data-paginated="1"]::before {
        display: none !important;
    }

    /* Cloni generati dal JS di paginazione: stessa resa del foglio base,
       con uno stacco visibile tra fogli (≈ simulazione del salto pagina PDF). */
    .a4-sheet-clone {
        position: relative;
    }


    /* Il contenuto va sopra la riga */
    .a4-sheet.a4-multipage .print-area > * {
        position: relative;
        z-index: 1;
    }

.print-spacer {
    flex-shrink: 0;
    background: var(--pb, #FFFFFF);
}

.print-separator {
    width: 100%;
    height: 1px;
    background: #CCCCCC;
    flex-shrink: 0;
}

/* ── Elementi print ──────────────────────────────── */
.print-gold-thick {
    height: 0;
    border-top: 2.5px solid var(--pa, #C81E1E);
    display: block;
}

.print-gold-thin {
    height: 0;
    border-top: 1px solid var(--pa, #D4B96A);
    display: block;
    opacity: 0.6;
}

.print-gap {
    height: 6px;
    display: block;
}

.print-gap-sm {
    height: 3px;
    display: block;
}

.print-header-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 4px 0;
}

.print-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}

.print-hotel-name {
    font-size: 16px;
    font-weight: bold;
    color: var(--ptm, #1A1A1A);
}

.print-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: start;
    text-align: left;
}

.print-header-center {
    justify-self: center;
    text-align: center;
}

.print-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--ptm, #1A1A1A);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.print-header-right {
    justify-self: end;
    text-align: right;
}

.print-table {
    font-size: 11px;
    font-weight: 700;
    color: var(--ptm, #1A1A1A);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.print-meal-section {
    margin-top: 6px;
}

.print-meal-section-dinner {
    margin-top: 10px;
    border-top: 0.5px solid var(--pts, #7A7469);
    opacity: 0.4;
    padding-top: 6px;
}

.print-meal-section-dinner {
    opacity: 1;
    border-top: 0.5px solid rgba(0,0,0,0.12);
}

.print-meal-title {
    font-size: 10px;
    font-weight: bold;
    color: var(--pmt, #C81E1E);
    letter-spacing: 0.15em;
    margin-bottom: 3px;
}

.print-meal-line {
    height: 0;
    border-top: 0.5px solid rgba(0,0,0,0.1);
    display: block;
    margin-bottom: 4px;
}

.print-cat-name {
    font-size: 11px;
    font-weight: bold;
    color: var(--ptm, #1A1A1A);
    margin-top: 6px;
    margin-bottom: 3px;
}

.print-single-row {
    margin-top: 4px;
    margin-bottom: 2px;
    color: var(--ptm, #1A1A1A);
    line-height: 1.4;
    font-weight: bold;
}

.print-single-row-cat {
    font-weight: bold;
}

.print-single-row--centered {
    text-align: center;
}

.print-cat-line {
    height: 0;
    border-top: 0.3px solid rgba(0,0,0,0.1);
    display: block;
    margin-bottom: 3px;
}

/* Griglia prodotti 4 colonne */
.print-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 3px 5px;
    margin-bottom: 2px;
    /* Lascia che il grid riempia naturalmente da col 1 ogni riga, senza
       riordinare le celle (auto-flow:row dense provoca posizionamenti
       inattesi quando alcuni card hanno altezze diverse). */
    grid-auto-flow: row;
}

.print-product-card {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 2px 0;
    /* In stampa evita di tagliare un card a meta' tra due pagine. In
       preview HTML non ha effetto ma e' fondamentale per il PDF reale. */
    break-inside: avoid;
    page-break-inside: avoid;
}

.print-product-img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.print-product-img-placeholder {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.print-product-info {
    flex: 1;
    min-width: 0;
}

.print-product-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--ptm, #1A1A1A);
    line-height: 1.3;
}

.print-product-desc {
    font-size: 8.5px;
    color: var(--pts, #7A7469);
    font-style: italic;
    line-height: 1.3;
    margin-top: 2px;
}

.print-checkbox {
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--pa, #C81E1E);
    border-radius: 3px;
    background: var(--pb, #FFFFFF);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Toast ───────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--anthracite);
    color: var(--white);
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    border-left: 3px solid var(--gold);
    z-index: 1000;
    animation: fadeInUp 0.3s ease;
    font-family: 'Segoe UI', sans-serif;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Login ───────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--anthracite);
}

.login-card {
    background: var(--ivory);
    border-radius: var(--radius);
    padding: 3rem 2.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.login-logo {
    width: 64px;
    height: 64px;
    background: var(--anthracite);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.login-title {
    font-family: 'Georgia', serif;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--anthracite);
    margin: 0;
}

.login-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
}

.login-error {
    width: 100%;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: 'Segoe UI', sans-serif;
}
.login-error.login-offline {
    background: #fdfaf3;
    border-color: #e8dfc4;
    color: #6f5a1c;
    line-height: 1.5;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-family: 'Segoe UI', sans-serif;
}

.login-input {
    font-family: 'Segoe UI', sans-serif;
    font-size: 15px;
    color: var(--text-primary);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.2s;
}

    .login-input:focus {
        border-color: var(--gold);
    }

.login-btn {
    width: 100%;
    padding: 13px;
    background: var(--gold);
    color: var(--anthracite);
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.5rem;
}

    .login-btn:hover {
        background: var(--gold-light);
    }

    .login-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 1100px) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .right-panel {
        position: static;
        height: auto;
        padding: 1.5rem 1rem;
    }
    /* NB: la vecchia regola `.a4-sheet { width: 100%; max-width: 210mm }`
       qui è stata rimossa: combinata col nuovo `.a4-wrapper { width: fit-content }`
       creava una dipendenza circolare (wrapper vuole le dimensioni dei figli,
       i figli volevano il 100% del wrapper) che azzerava la larghezza del
       foglio nel layout a colonna dell'Anteprima, rendendo la preview vuota
       a metà schermo. Il foglio ora usa la sua `width: 210mm` esplicita base. */
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Si è verificato un errore.";
    }

/* ── Footer ──────────────────────────────────────── */
.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 1rem 1.75rem;
    border-top: 1px solid rgba(201,168,76,0.15);
    margin-top: auto;
}

.footer-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.7;
}

.footer-text {
    font-size: 11px;
    font-family: 'Segoe UI', sans-serif;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.05em;
}

/* ── Login page ──────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--anthracite);
    padding: 1rem;
}

.login-card {
    background: var(--ivory);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.login-logo-wrap {
    margin-bottom: 0.75rem;
    width: 100%;
}

.login-app-logo {
    width: 100%; /* larga quanto il bottone ACCEDI */
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}

.login-title {
    font-family: 'Georgia', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--anthracite);
    margin: 0 0 4px;
}

.login-subtitle {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: 'Segoe UI', sans-serif;
    color: var(--anthracite);
    margin: 0.25rem 0 1.75rem;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.login-label {
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.login-input {
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: 'Segoe UI', sans-serif;
    color: var(--text-primary);
    background: var(--white);
    transition: border-color 0.15s;
    outline: none;
}

    .login-input:focus {
        border-color: var(--gold-dark);
    }

.login-error {
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
    color: #D94040;
    background: #FFF5F5;
    border: 1px solid #F5C2C2;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}

.login-btn {
    margin-top: 0.5rem;
    width: 100%;
    padding: 12px;
    background: var(--anthracite);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--gold);
    font-size: 14px;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .login-btn:hover:not(:disabled) {
        background: #262626;
    }

    .login-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.login-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(201,168,76,0.3);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.login-footer-brand {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    opacity: 1;
}

.login-brand-logo {
    width: 126px; /* 240 -25% -30% ≈ 126px */
    height: auto;
    object-fit: contain;
}

.login-footer-brand span {
    font-size: 12px;
    font-family: 'Georgia', serif;
    font-style: italic;
    color: var(--text-secondary);
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-pw {
    width: 100%;
    padding-right: 2.75rem;
}

.login-pw-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

    .login-pw-toggle:hover {
        color: var(--text-primary);
    }

.login-brand-link {
    text-decoration: none;
    transition: opacity 0.18s;
}

    .login-brand-link:hover {
        opacity: 0.7;
    }

/* ── Users page ──────────────────────────────────── */
.users-page-wrap {
    min-height: 100vh;
    background: var(--ivory, #FAF8F3);
    font-family: 'Segoe UI', sans-serif;
}

.users-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    font-family: 'Segoe UI', sans-serif;
}

.users-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 13px;
    font-family: 'Segoe UI', sans-serif;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

    .btn-back:hover {
        border-color: var(--gold-dark);
        color: var(--gold-dark);
    }

.users-title {
    font-family: 'Georgia', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.users-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

.users-card-title {
    font-family: 'Georgia', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.users-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.users-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.users-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.users-input, .users-select {
    padding: 9px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: 'Segoe UI', sans-serif;
    color: var(--text-primary);
    background: var(--white);
    outline: none;
    transition: border-color 0.15s;
}

    .users-input:focus, .users-select:focus {
        border-color: var(--gold-dark);
    }

.users-error {
    font-size: 12px;
    color: #D94040;
    background: #FFF5F5;
    border: 1px solid #F5C2C2;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}

.users-success {
    font-size: 12px;
    color: #2D8A4E;
    background: #F0FFF5;
    border: 1px solid #B2DFC4;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}

.btn-create {
    align-self: flex-start;
    padding: 10px 20px;
    background: var(--anthracite);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--gold);
    font-size: 13px;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

    .btn-create:hover:not(:disabled) {
        background: #262626;
    }

    .btn-create:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.users-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.users-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--ivory-dark);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.users-row-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.users-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--anthracite);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.users-email {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.users-role-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 2px;
}

.role-admin {
    background: var(--anthracite);
    color: var(--gold);
}

.role-user {
    background: var(--ivory);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.users-you {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
}

.btn-delete {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

    .btn-delete:hover {
        border-color: #D94040;
        color: #D94040;
        background: #FFF5F5;
    }

.users-loading, .users-empty {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    padding: 1rem;
}

/* ── Site footer (pagine normali) ────────────────── */
.site-footer {
    width: 100%;
    padding: 1.25rem 2rem 1.5rem;
    font-family: 'Segoe UI', sans-serif;
    background: #000;
    color: rgba(255,255,255,0.75);
}

.site-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
}

.site-footer-brand {
    display: flex;
    align-items: center;
}

.site-footer-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
}

.site-footer-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-footer-link {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

    .site-footer-link:hover {
        color: #fff;
    }

/* I link legali del footer sono <button> per aprire il modal: azzero lo stile bottone */
.site-footer-linkbtn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Segoe UI', sans-serif;
}

.site-footer-sep {
    color: rgba(255,255,255,0.25);
    font-size: 12px;
}

/* ── Popup documenti legali (privacy/cookie/termini) ── */
.policy-overlay { position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:1rem; animation:sf-fade .15s ease; }
.policy-modal { width:100%; max-width:760px; max-height:88vh; display:flex; flex-direction:column; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.policy-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; background:#141414; color:#fff; font-size:1.05rem; font-weight:800; }
.policy-close { background:none; border:none; color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; padding:0 .25rem; }
.policy-close:hover { color:#E2231A; }
.policy-body { overflow-y:auto; padding:1.25rem 1.5rem; font-family:'Segoe UI',sans-serif; font-size:14px; line-height:1.6; color:#222; }
.policy-body h1, .policy-body h2, .policy-body h3 { color:#141414; }
.policy-body a { color:#E2231A; }
.policy-body img { max-width:100%; height:auto; }

/* ── Gestione Email (admin) ── */
.em-form { display:grid; grid-template-columns:repeat(3, 1fr); gap:.9rem; margin-top:1rem; }
.em-field { display:flex; flex-direction:column; gap:5px; }
.em-col-2 { grid-column:span 2; }
.em-col-3 { grid-column:1 / -1; }
.em-check { display:inline-flex; align-items:center; gap:.5rem; font-size:14px; color:#1A1A1A; font-family:'Segoe UI',sans-serif; cursor:pointer; }
@media (max-width:680px) { .em-form { grid-template-columns:1fr; } .em-col-2, .em-col-3 { grid-column:auto; } }

.em-list { display:flex; flex-direction:column; gap:.75rem; }
.em-row { background:#fff; border:1px solid #E0D9C8; border-radius:10px; padding:.85rem 1rem; }
.em-row-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; cursor:pointer; }
.em-row-main { min-width:0; }
.em-subject { font-weight:700; color:#1A1A1A; font-family:'Segoe UI',sans-serif; }
.em-meta { font-size:12.5px; color:#777; margin-top:2px; word-break:break-word; }
.em-audience { display:inline-block; background:#F0EDE4; color:#444; border-radius:20px; padding:1px 9px; font-weight:700; font-size:11px; }
.em-status { flex:0 0 auto; align-self:center; white-space:nowrap; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:700; font-family:'Segoe UI',sans-serif; }
.em-status-Sent { background:#E4F5EA; color:#1E7C42; border:1px solid #B7E3C6; }
.em-status-Failed { background:#FBEAEA; color:#B83232; border:1px solid #F1C4C4; }
.em-status-Pending { background:#FFF4E0; color:#9A6B2E; border:1px solid #F0D9A8; }
.em-error { margin-top:.5rem; font-size:12.5px; color:#B83232; background:#FBEAEA; border:1px solid #F1C4C4; border-radius:8px; padding:6px 10px; word-break:break-word; }
.em-body-wrap { margin-top:.7rem; border:1px solid #E0D9C8; border-radius:8px; overflow:auto; max-height:420px; }
.em-body { padding:1rem 1.15rem; font-family:'Segoe UI',sans-serif; font-size:13.5px; line-height:1.55; color:#222; }
.em-body table { border-collapse:collapse; }
.em-body a { color:#E2231A; }
.em-row-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem; }

/* ── Editor prodotto: attributi piatto + foto in attesa ── */
.edit-attr-row { display:flex; flex-wrap:wrap; gap:.5rem; margin:.3rem 0 .25rem; }
.edit-attr-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1.5px solid #E0D9C8; border-radius:20px; font-size:13px; font-weight:600; font-family:'Segoe UI',sans-serif; color:#444; cursor:pointer; user-select:none; transition:all .15s; }
.edit-attr-chip input { accent-color:#C81E1E; }
.edit-attr-chip--on { background:#FBF1F0; border-color:#E2231A; color:#B0151B; }
.edit-img-thumb--ready { display:flex; align-items:center; justify-content:center; background:#E4F5E8; color:#1E7C42; font-size:1.6rem; font-weight:800; cursor:pointer; }
.edit-img-pending { font-size:12px; color:#1E7C42; margin-top:4px; flex-basis:100%; }

.site-footer-divider {
    height: 1px;
    background: rgba(255,255,255,0.12);
    width: 100%;
}

.site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    font-size: 12px;
}

.site-footer-copy {
    color: rgba(255,255,255,0.55);
    font-weight: 500;
}

.site-footer-powered {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.18s, opacity 0.18s;
}

    .site-footer-powered:hover {
        color: #fff;
        opacity: 1;
    }

    .site-footer-powered:hover .site-footer-powered-name {
        color: #fff;
    }

.site-footer-powered-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.site-footer-powered-name {
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.01em;
}

@media (max-width: 640px) {
    .site-footer-top,
    .site-footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Wrapper per pagine con footer globale */
.page-with-footer {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    .page-with-footer > .app-layout {
        flex: 1;
        min-height: auto;
    }

    .page-with-footer > .up-page {
        flex: 1;
    }

    .page-with-footer > .site-footer {
        flex-shrink: 0;
    }

/* ══════════════════════════════════════════════════════════════
   MAIN TAB BAR  – single fixed-height row
   ══════════════════════════════════════════════════════════════ */
.main-tab-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    background: var(--ivory);
    border-bottom: 2px solid var(--border);
    padding: 0 1.5rem;
    height: 52px;
    position: sticky;
    top: 58px; /* impilata sotto la StoreHeader (sticky top:0) */
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    gap: 0;
}
@media (max-width: 640px) { .main-tab-bar { top: 50px; } }

/* Freccia "torna alla dashboard" nella tab bar dell'editor */
.tab-back-btn { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin-right:.5rem; border:1.5px solid var(--border); border-radius:8px; background:#fff; color:#141414; cursor:pointer; transition:all .15s; }
.tab-back-btn:hover { background:#E2231A; border-color:#E2231A; color:#fff; }
/* Il bottone unificato dentro la tab bar: niente margin-bottom (sballerebbe il
   centraggio verticale nella barra alta 52px), solo un po' di aria a destra. */
.main-tab-bar .admin-back-btn { flex:0 0 auto; margin:0 .6rem 0 0; }

.tab-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    gap: 0;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 1.4rem;
    background: none;
    border: none;
    /* active indicator via inset shadow – avoids layout tricks with border-bottom */
    box-shadow: inset 0 -3px 0 transparent;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, box-shadow 0.15s;
    letter-spacing: 0.02em;
}

.tab-btn:hover {
    color: var(--gold-dark);
}

.tab-btn--active {
    color: var(--gold-dark);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--gold);
}

.tab-user-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Tab-bar specific overrides (light ivory background) ── */
.tab-user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--border);
    margin-left: 0.25rem;
}

.tab-user-email {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: 'Segoe UI', sans-serif;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Override ghost styles for buttons inside the tab bar */
.tab-bar-btn.icon-btn-round {
    color: var(--text-secondary);
    border-color: var(--border);
    background: transparent;
}

.tab-bar-btn.icon-btn-round:hover {
    color: var(--gold-dark);
    border-color: var(--gold);
    background: rgba(201,168,76,0.08);
}

.tab-bar-btn.logout-btn {
    color: var(--text-primary);
    border-color: var(--border);
    background: var(--white);
    font-weight: 600;
    font-size: 0.82rem;
}

.tab-bar-btn.logout-btn:hover {
    color: #b91c1c;
    border-color: #fca5a5;
    background: #fff1f2;
}

/* ── Menu tab: single-column full-width panel ── */
.menu-tab-panel {
    display: block;
    min-height: calc(100vh - 52px);
}

.left-panel--full {
    border-right: none;
    max-width: 100%;
    margin: 0;
    width: 100%;
    min-height: calc(100vh - 52px);
    padding: 1.25rem 1.5rem 3rem;
}

/* ── Anteprima tab: right-panel takes full page ── */
.right-panel--full {
    width: 100%;
    min-height: calc(100vh - 52px);
    background: #e8e6e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    overflow-y: auto;
}

/* keep app-layout compatible for any remaining uses */
.main-tab-bar ~ .app-layout,
.page-with-footer .app-layout {
    min-height: calc(100vh - 52px);
}

/* ══════════════════════════════════════════════════════════════
   PRODUCTS TAB
   ══════════════════════════════════════════════════════════════ */
.products-tab-content {
    padding: 1.25rem 1.5rem 3rem;
    width: 100%;
    margin: 0;
}

.products-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

/* ── Search bar ── */
.products-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.products-search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--text-secondary);
    pointer-events: none;
    flex-shrink: 0;
}

.products-search-input {
    width: 100%;
    padding: 0.55rem 2.4rem 0.55rem 2.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--white);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.products-search-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}

.products-search-clear {
    position: absolute;
    right: 0.6rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s;
}

.products-search-clear:hover { color: var(--text-primary); }

/* ── Category filter chips ── */
.products-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.products-filter-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.2rem;
}

.filter-chip {
    padding: 0.28rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    font-weight: 500;
}

.filter-chip:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
}

.filter-chip--active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(201,168,76,0.3);
}

.filter-chip-clear {
    padding: 0.28rem 0.8rem;
    border: 1px dashed var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.filter-chip-clear:hover { color: #c0392b; border-color: #c0392b; }

.products-tab-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.03em;
}

.products-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
    font-size: 1rem;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

.product-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.product-card-img {
    width: 100%;
    height: 140px;
    background: var(--ivory-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.15s;
}

.product-card-img-placeholder:hover {
    background: var(--ivory-dark);
}

.product-card-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.product-card-img:hover .product-card-img-overlay {
    opacity: 1;
}

.img-overlay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.15);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    backdrop-filter: blur(4px);
}

.img-overlay-btn:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.9);
    transform: scale(1.08);
}

.img-overlay-btn--danger:hover {
    background: rgba(200,40,40,0.65);
    border-color: rgba(255,100,100,0.8);
}

.product-card-body {
    padding: 0.75rem 0.875rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.product-card-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.3;
    cursor: default;
}

.product-card-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.3;
}

.product-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.product-cat-tag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(201,168,76,0.12);
    border: 1px solid rgba(201,168,76,0.35);
    color: var(--gold-dark);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.product-card-actions {
    display: flex;
    gap: 0.3rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════
   MENU TAB: product row read-only variant
   ══════════════════════════════════════════════════════════════ */
.product-row--menu .product-img-wrap {
    cursor: default !important;
}

/* Drag-handle visibile sui prodotti per indicare la possibilità di riordinare. */
.product-drag-handle {
    flex-shrink: 0;
    width: 22px;
    color: var(--text-secondary);
    cursor: grab;
    user-select: none;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    letter-spacing: -2px;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}
.product-row:hover .product-drag-handle { opacity: 1; color: var(--gold-dark); }
.product-drag-handle:active { cursor: grabbing; }

.product-row--drag-over {
    background: var(--ivory) !important;
    box-shadow: inset 0 2px 0 var(--gold);
}

/* Import button style */
.import-btn {
    background: linear-gradient(135deg, #f5f0e8, #ebe5d5) !important;
    border: 1px dashed var(--gold) !important;
    color: var(--gold-dark) !important;
    font-weight: 600 !important;
}

.import-btn:hover {
    background: linear-gradient(135deg, #ebe5d5, #ddd5c0) !important;
}

/* ══════════════════════════════════════════════════════════════
   IMPORT MODAL
   ══════════════════════════════════════════════════════════════ */
.import-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 94vw);
    max-height: 80vh;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.import-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--ivory);
}

.import-modal-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.import-modal-search {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.import-search-input {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--ivory);
    outline: none;
}

.import-search-input:focus {
    border-color: var(--gold);
}

.import-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.import-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.import-product-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    transition: background 0.1s;
}

.import-product-row:hover {
    background: var(--ivory-dark);
}

.import-product-row--selected {
    background: rgba(201,168,76,0.1);
}

.import-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
    flex-shrink: 0;
    cursor: pointer;
}

.import-product-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.import-product-img-placeholder {
    width: 44px;
    height: 44px;
    background: var(--ivory-dark);
    border: 1px solid var(--border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.import-product-info {
    flex: 1;
    min-width: 0;
}

.import-product-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.import-product-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
}

.import-modal-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--ivory);
}

.import-add-product-btn {
    margin-right: auto;
}

/* ── Outline button ── */
.btn-outline {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-outline:hover {
    background: var(--ivory-dark);
    color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════
   IMPERSONATE BANNER (admin remote support)
   ══════════════════════════════════════════════════════════════ */
.impersonate-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    background: linear-gradient(90deg, #141414 0%, #262626 100%);
    color: #E2231A;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid #1a1a1a;
}
.impersonate-banner-btn {
    padding: 0.3rem 0.85rem;
    border: 1px solid #E2231A;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #E2231A;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.impersonate-banner-btn:hover {
    background: #E2231A;
    color: #141414;
}

/* ══════════════════════════════════════════════════════════════
   OFFLINE / SYNC BANNER (bottom of page)
   ══════════════════════════════════════════════════════════════ */
.offline-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
    border-top: 1px solid transparent;
    flex-wrap: wrap;
}
.offline-banner--offline {
    background: #fdf3f2;
    color: #8e2a22;
    border-top-color: #e4c4c0;
}
.offline-banner--syncing {
    background: #fdfaf3;
    color: #B0151B;
    border-top-color: #e8dfc4;
}
.offline-banner--pending {
    background: #f7f3e8;
    color: #6f5a1c;
    border-top-color: #e8dfc4;
}
.offline-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b3382e;
    box-shadow: 0 0 0 3px rgba(179, 56, 46, 0.18);
    flex-shrink: 0;
}
.offline-banner-spinner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #e8dfc4;
    border-top-color: #C81E1E;
    animation: offline-spin 0.9s linear infinite;
    flex-shrink: 0;
}
@keyframes offline-spin { to { transform: rotate(360deg); } }
.offline-banner-pending {
    margin-left: auto;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(179, 56, 46, 0.12);
    color: #8e2a22;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.offline-banner-retry {
    margin-left: auto;
    padding: 0.25rem 0.7rem;
    border: 1px solid #C81E1E;
    border-radius: var(--radius-sm);
    background: #fff;
    color: #B0151B;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.offline-banner-retry:hover { background: var(--ivory); }
.offline-banner-error {
    flex-basis: 100%;
    font-size: 0.72rem;
    color: #b3382e;
    font-style: italic;
    margin-top: 0.15rem;
}

/* ══════════════════════════════════════════════════════════════
   DAY NAVIGATION (Menu tab header)
   ══════════════════════════════════════════════════════════════ */
.day-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.day-nav-input {
    width: auto;
    min-width: 150px;
}
/* Replace the browser-default (gray) calendar picker icon with a gold one
   so it matches the rest of the tab/icon palette. Works in Chromium-based
   browsers (Chrome, Edge, Opera). The data-URI is a single-stroke SVG of
   a calendar; %23C81E1E is the URL-encoded gold accent (#C81E1E). */
input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C81E1E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    opacity: 1;
    filter: none;
}
.day-nav-btn {
    height: 36px;
    min-width: 36px;
    padding: 0 0.55rem;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.day-nav-btn:hover {
    background: var(--ivory);
    border-color: var(--gold);
    color: var(--gold-dark);
}
.day-nav-btn--today {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.day-nav-btn--today.is-today {
    background: var(--gold);
    border-color: var(--gold-dark);
    color: #fff;
    cursor: default;
}
.day-nav-history {
    height: 36px;
    padding: 0 0.85rem;
    margin-left: 0.4rem;
    border: 1px solid var(--gold);
    background: #fff;
    color: var(--gold-dark);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1;
}
.day-nav-history:hover {
    background: var(--ivory);
}
.history-icon-svg {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
.history-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════
   CRONOLOGIA POPUP
   ══════════════════════════════════════════════════════════════ */
.history-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.history-modal {
    background: #fff;
    border-radius: var(--radius-md, 8px);
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--ivory);
}
.history-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--gold-dark);
    font-weight: 600;
}
.history-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
}
.history-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}
.history-hint {
    padding: 0.75rem 1.25rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    background: #fcfcfc;
}
.history-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

/* ── Search bar in cronologia (list mode) ─────────────────────── */
.history-search {
    position: relative;
    padding: 0.6rem 1.25rem 0.7rem;
    border-bottom: 1px solid var(--border);
    background: #fcfcfc;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.history-search-icon {
    position: absolute;
    left: calc(1.25rem + 0.55rem);
    pointer-events: none;
}
.history-search-input {
    flex: 1;
    height: 34px;
    padding: 0 1.8rem 0 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.history-search-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(184, 151, 42, 0.15);
}
.history-search-clear {
    position: absolute;
    right: calc(1.25rem + 0.4rem);
    width: 22px;
    height: 22px;
    border: none;
    background: var(--ivory);
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.history-search-clear:hover {
    background: var(--gold-light);
    color: var(--gold-dark);
}
.history-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    overflow-y: auto;
    flex: 1;
}
.history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid #f1efe8;
    gap: 1rem;
}
.history-row:last-child { border-bottom: none; }
.history-row--current {
    background: var(--ivory);
}
.history-row-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.history-row-date {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}
.history-row-weekday {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}
.history-row-badge {
    align-self: flex-start;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.2rem;
}
.history-row-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    align-items: center;
}

.history-context {
    padding: 0.85rem 1.25rem;
    background: linear-gradient(180deg, #fcf8ec 0%, #fdfaf3 100%);
    border-bottom: 1px solid var(--border);
}
.history-context-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.history-context-day {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold-dark);
    text-transform: capitalize;
    margin-top: 0.15rem;
}

.history-legend {
    padding: 0.65rem 1.25rem;
    background: #fafaf7;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.history-legend strong { color: var(--text-primary); }
.history-legend-icon {
    display: inline-block;
    width: 1.1rem;
    text-align: center;
    color: var(--gold-dark);
    font-weight: bold;
}

.history-row-busy-label {
    font-size: 0.7rem;
    color: var(--gold-dark);
    font-style: italic;
    margin-top: 0.15rem;
}
.history-row--busy { opacity: 0.6; }

.history-action-btn {
    height: 32px;
    padding: 0 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1;
}
.history-action-btn:hover:not(:disabled) {
    background: var(--ivory);
    border-color: var(--gold);
    color: var(--gold-dark);
}
.history-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.history-action-import {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold-dark);
    font-weight: 600;
}
.history-action-import:hover:not(:disabled) {
    background: var(--gold-dark);
    color: #fff;
    border-color: var(--gold-dark);
}
.history-action-delete {
    width: 32px;
    padding: 0;
    color: #b3382e;
    border-color: #e4c4c0;
    justify-content: center;
}
.history-action-delete:hover:not(:disabled) {
    background: #fdf3f2;
    color: #8e2a22;
    border-color: #b3382e;
}
.history-action-delete-filled {
    background: #b3382e;
    color: #fff;
    border-color: #8e2a22;
    font-weight: 600;
    padding: 0 0.95rem;
}
.history-action-delete-filled:hover:not(:disabled) {
    background: #8e2a22;
    color: #fff;
    border-color: #6f1e18;
}

/* ── Wizard step (import + delete confirm) ─────────────────────────── */
.history-wizard {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-y: auto;
}
.history-wizard-step {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold-dark);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.55rem;
}
.history-wizard-step--danger {
    color: #b3382e;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}
.history-wizard-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.history-wizard-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 600;
}
.history-wizard-source {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: var(--ivory);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.history-wizard-source-date {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.history-wizard-source-weekday {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}
.history-wizard-dest-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.history-wizard-date {
    width: auto;
    min-width: 180px;
    flex: 0 0 auto;
    /* Override del .field-input globale (white-on-dark): qui il popup ha
       sfondo chiaro, quindi il testo della data deve essere nero per
       leggersi. Bordo con accent oro per coerenza visuale. */
    color: #1a1a1a !important;
    background: #ffffff !important;
    border: 1px solid #d8c98a !important;
}
.history-wizard-date::-webkit-calendar-picker-indicator {
    filter: none;
    cursor: pointer;
}
.history-wizard-info {
    background: #f7f3e8;
    border: 1px solid #e8dfc4;
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.45;
}
.history-wizard-info strong {
    color: var(--gold-dark);
}
.history-wizard-info--warn {
    background: #fdf3f2;
    border-color: #e4c4c0;
    color: #8e2a22;
}
.history-wizard-info--warn strong { color: #8e2a22; }
.history-wizard-info--neutral {
    background: #f4f4ef;
    border-color: var(--border);
    color: var(--text-secondary);
}
.history-wizard-message {
    background: #fdf3f2;
    border: 1px solid #e4c4c0;
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    font-size: 0.92rem;
    color: var(--text-primary);
    line-height: 1.5;
}
.history-wizard-warning {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #8e2a22;
    font-style: italic;
}
.history-wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--border);
    padding-top: 0.85rem;
}

/* ══════════════════════════════════════════════════════════════
   ANTEPRIMA & STAMPA – two-column layout
   ══════════════════════════════════════════════════════════════ */
.anteprima-layout {
    display: flex;
    flex-direction: row;
    /* Altezza fissata al viewport (- tab bar) così le due colonne possono
       scrollare indipendentemente: la sidebar di config non segue lo scroll
       della preview. min-height + overflow:auto sui figli non basta perché
       il parent crescerebbe col contenuto e i figli userebbero lo scroll
       della pagina, non il proprio. */
    height: calc(100vh - 52px);
    align-items: stretch;
}

.anteprima-config-col {
    width: 300px;
    flex-shrink: 0;
    background: var(--ivory);
    border-right: 1px solid var(--border);
    padding: 1.25rem 1rem;
    overflow-y: auto;
    /* min-height:0 in flex-children consente all'overflow di lavorare
       quando il contenuto eccede l'altezza disponibile. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.anteprima-preview-col {
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: #e8e6e0;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    overflow: auto;
}

/* ── Config column header ── */
.config-panel-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    padding: 0.6rem 0 0.8rem;
    border-bottom: 2px solid var(--gold);
    margin-bottom: 0.2rem;
}

/* ── Config column sections ── */
.config-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
}

.config-section:last-child {
    border-bottom: none;
    padding-bottom: 1.5rem;
}

.config-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.profile-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.profile-select {
    flex: 1;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.profile-select:focus {
    outline: 2px solid var(--gold);
    outline-offset: -1px;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.profile-action-btn {
    /* flex-basis 50% - metà del gap = 2 bottoni per riga che riempiono
       l'intera larghezza disponibile (4 azioni → 2x2). */
    flex: 1 1 calc(50% - 0.18rem);
    min-width: 0;
    padding: 0.35rem 0.55rem !important;
    font-size: 0.78rem !important;
    margin: 0 !important;
    text-align: center;
    justify-content: center;
}

.profile-action-btn--danger {
    color: #b94343 !important;
    border-color: #d8a8a8 !important;
}

/* Override del .field-input globale (white-on-dark): nella modale "Nuovo
   profilo di anteprima" lo sfondo è chiaro (history-modal) e il testo deve
   essere nero per leggibilità. */
.profile-name-input {
    color: #1A1A1A !important;
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
}

.profile-name-input::placeholder {
    color: #9A9A9A !important;
}

/* Lista checkbox per la modale di export selettivo */
.export-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.export-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.export-checkbox-row:hover {
    background: rgba(184, 151, 42, 0.06);
}

.export-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--gold);
    cursor: pointer;
    flex-shrink: 0;
}

.export-checkbox-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.export-checkbox-desc {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.config-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.4;
}

.config-section-actions {
    flex-direction: row;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Language print selection */
.lang-print-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.1rem 0;
}

/* ── Preview toolbar ── */
.preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

/* ── Preview scroll area ── */
.preview-scroll-area {
    flex: 1;
    overflow: auto;
    padding: 1.5rem 1.5rem 2rem;
}

/* A5 format override */
/* Le vecchie regole .a5-format / .landscape-format hardcoded (148mm,
   297mm, 210mm ecc.) sono state RIMOSSE: ora le dimensioni vengono
   tutte da --page-w / --page-h, settate inline dal Razor a partire
   dalle const PreviewA4Portrait... in @code. Modificare i valori
   solo li' per calibrare la preview alla stampa. */

/* ══════════════════════════════════════════════════════════════
   IMPOSTAZIONI TAB
   ══════════════════════════════════════════════════════════════ */
.impostazioni-tab-content {
    padding: 2rem 2.5rem 3rem;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

.impostazioni-section {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem 2rem;
    box-shadow: var(--shadow);
}

.impostazioni-heading {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.impostazioni-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 600px;
}

/* Sezione branding hotel in tab Impostazioni: logo a sinistra, nome+tavolo a destra. */
.branding-settings-row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.branding-logo-cell {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.branding-logo-cell .logo-area--settings {
    width: 140px;
    height: 100px;
}
.branding-fields-cell {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.branding-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.impostazioni-field-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}
.branding-input {
    width: 100%;
    max-width: 420px;
    /* Override del .field-input globale (white-on-dark): la sezione
       Impostazioni ha sfondo chiaro, quindi il testo dell'input deve
       essere nero per leggersi. */
    color: #1a1a1a !important;
    background: #ffffff !important;
    border: 1px solid #d8c98a !important;
}
.branding-input::placeholder { color: #9a9a9a; }

.languages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.45rem;
}

.lang-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--ivory);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    user-select: none;
}

.lang-checkbox-row:hover {
    border-color: var(--gold);
    background: rgba(201,168,76,0.05);
}

.lang-checkbox-row--active {
    border-color: var(--gold);
    background: rgba(201,168,76,0.1);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.18);
}

.lang-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    cursor: pointer;
}

.lang-checkbox-row input[type="checkbox"] {
    accent-color: var(--gold);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

.lang-copies-wrap {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
}

.lang-copies-val {
    min-width: 1.6rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.lang-pagebreak-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.55rem 2.1rem;
    margin-top: -0.35rem;
    cursor: pointer;
}

.lang-pagebreak-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--gold);
    margin: 0;
}

.lang-pagebreak-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    user-select: none;
}

.lang-name {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-primary);
}

.impostazioni-enabled-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.impostazioni-enabled-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT TRANSLATIONS (in Products tab)
   ══════════════════════════════════════════════════════════════ */
.product-translations-toggle {
    border-top: 1px solid var(--border);
    padding-top: 0.4rem;
    margin-top: 0.2rem;
}

.translations-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.77rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0.2rem 0;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.15s;
}

.translations-toggle-btn:hover { color: var(--gold-dark); }

.toggle-arrow {
    font-size: 0.6rem;
    opacity: 0.7;
}

.translations-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.translation-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.65rem;
    background: var(--ivory-dark);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.translation-lang-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold-dark);
}

.translation-fields {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.translation-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.btn-sm {
    padding: 0.2rem 0.55rem !important;
    font-size: 0.74rem !important;
    border-radius: 5px !important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT – all tabs
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet ≤ 960px ── */
@media (max-width: 960px) {
    .main-tab-bar { padding: 0 0.75rem; }
    .tab-btn { padding: 0 0.9rem; font-size: 0.84rem; }
    .tab-user-email { display: none; }

    .products-tab-content { padding: 1.25rem 1.25rem 2.5rem; }
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

    .left-panel--full { max-width: 100%; }

    .impostazioni-tab-content { padding: 1.5rem 1.5rem 2.5rem; }
}

/* ── Anteprima: switch a layout a colonna quando lo schermo non basta
   a mostrare sidebar (300px) + foglio A4 al 90% (~714px) + margini
   affiancati. Soglia 1100px così copre desktop a metà schermo (1920/2). */
@media (max-width: 1100px) {
    .anteprima-layout {
        flex-direction: column;
        /* Su mobile/tablet torniamo al flusso naturale: l'header + config +
           preview scrollano insieme; non c'è abbastanza spazio per due
           pannelli con scroll indipendenti. */
        height: auto;
        min-height: calc(100vh - 52px);
    }
    .anteprima-config-col {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 38vh;
        overflow-y: auto;
    }
    .anteprima-preview-col {
        flex: 1;
        /* Dare spazio sufficiente alla preview perché un foglio A4 al 90%
           è alto ~714px (~75% di un viewport 1080px). */
        min-height: 62vh;
        padding: 1rem;
    }
    .preview-toolbar { justify-content: space-between; }
    .preview-scroll-area { overflow-x: auto; }
}

/* ── Mobile ≤ 640px ── */
@media (max-width: 640px) {
    /* Tab bar */
    .main-tab-bar { padding: 0 0.4rem; height: 44px; }
    .tab-buttons {
        overflow-x: auto;
        scrollbar-width: none;
        flex-shrink: 1;
        min-width: 0;
    }
    .tab-buttons::-webkit-scrollbar { display: none; }
    .tab-btn { padding: 0 0.65rem; font-size: 0.78rem; }
    .tab-user-area { gap: 0.3rem; flex-shrink: 0; }
    .tab-user-info { display: none; }
    .logout-btn span.btn-label { display: none; }

    /* Products */
    .products-tab-content { padding: 0.75rem 0.75rem 2rem; }
    .products-tab-header { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }

    /* Menu */
    .left-panel--full { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* Anteprima */
    .anteprima-config-col { max-height: 38vh; }
    .anteprima-preview-col { padding: 0.5rem; min-height: 58vh; }

    /* Impostazioni */
    .impostazioni-tab-content { padding: 0.75rem; }
    .impostazioni-section { padding: 1rem; }
    .languages-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── Primary language badge (Impostazioni) ─────────── */
.impostazioni-primary-lang {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #FFF8E7 0%, #F9EEDA 100%);
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
}
.primary-lang-badge {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--anthracite);
    padding: 0.35rem 0.7rem;
    background: #fff;
    border-radius: 999px;
    border: 1px solid var(--gold-dark);
    white-space: nowrap;
}
.primary-lang-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* ── Product translations hint when no languages enabled ─── */
.product-translations-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-top: 0.75rem;
    background: #FAF7F0;
    border: 1px dashed var(--gold-dark);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.btn-link-gold {
    background: none;
    border: none;
    color: var(--gold-dark);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    text-decoration: underline;
}
.btn-link-gold:hover { color: var(--anthracite); }

/* ══════════════════════════════════════════════════════════════
   PRODUCT EDIT MODAL
   ══════════════════════════════════════════════════════════════ */
.product-edit-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 94vw);
    max-height: 92vh;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.product-edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--ivory);
}
.product-edit-modal-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.product-edit-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex: 1;
}
.product-edit-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--ivory);
}
.edit-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.edit-section-title {
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}
.edit-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.edit-field-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}
.edit-img-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.edit-img-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.edit-img-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ivory);
    cursor: pointer;
}
.edit-img-thumb--empty:hover {
    border-color: var(--gold);
}
.edit-img-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.edit-img-remove-btn {
    color: #c0392b;
    border-color: #c0392b;
}
.edit-img-remove-btn:hover {
    background: #c0392b;
    color: #fff;
}
.edit-category-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 160px;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--ivory);
}
.edit-category-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    padding: 0.15rem 0;
}
.edit-category-item:hover span {
    color: var(--gold-dark);
}
.edit-category-checkbox {
    accent-color: var(--gold);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}
.edit-category-empty {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}
.edit-category-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.edit-translation-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    background: #FAF7F0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.edit-translation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* ── Confirm modal (delete) ───────────────────────── */
.confirm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, 94vw);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    z-index: 1002;
    overflow: hidden;
}
.confirm-modal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem 0.5rem;
}
.confirm-modal-icon { font-size: 1.5rem; }
.confirm-modal-title { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.confirm-modal-body {
    padding: 0.5rem 1.25rem 1.25rem;
    color: var(--text-secondary);
    line-height: 1.4;
    font-size: 0.9rem;
}
.confirm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--ivory);
}
.btn-danger-fill {
    background: #c0392b;
    color: #fff;
    border: 1px solid #a5281b;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-danger-fill:hover { background: #a5281b; }

/* ── Category translations bar (Menù tab) ──────────── */
.category-translations-bar {
    padding: 0.5rem 0.75rem;
    background: #FAF7F0;
    border-bottom: 1px solid var(--border);
}
.category-translations-body {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.category-translations-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 0.4rem;
}

/* ── Translation completion badge (Prodotti + Menù) ─── */
.translation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: #F5EED8;
    color: var(--gold-dark);
    border: 1px solid var(--gold-dark);
    white-space: nowrap;
    flex-shrink: 0;
    /* Shrink-to-content: don't stretch in column flex containers (product card body) */
    align-self: flex-start;
    width: fit-content;
    max-width: fit-content;
}
.translation-badge--full {
    background: linear-gradient(135deg, #E6F4EA 0%, #C8E6C9 100%);
    color: #1B5E20;
    border-color: #2E7D32;
}

/* Status filter chips (Senza categoria / Tradotto / Non tradotto) */
.filter-chip--status {
    border-style: dashed;
}
.filter-chip--status.filter-chip--active {
    border-style: solid;
}

/* Between sheets in preview (diverse lingue, cloni di paginazione o split
   pranzo/cena): stacco visibile che simula la separazione fisica dei fogli
   stampati. In stampa viene azzerato e rimpiazzato da un vero page-break. */
.a4-sheet--page-break {
    margin-top: 2.5rem;
}

@media print {
    .a4-sheet--page-break {
        margin-top: 0 !important;
        break-before: page;
        page-break-before: always;
    }
    .a4-sheet-clone {
        display: none !important;
    }
}

.preview-lang-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    background: #F5EED8;
    border: 1px solid var(--gold-dark);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold-dark);
    white-space: nowrap;
}

/* ── Meal page break (tra Pranzo e Cena quando la checkbox è attiva) ─── */
/* In anteprima simula il taglio fisico tra due fogli stampati:
   fine pagina → spazio vuoto visibile → inizio nuova pagina.
   La distanza viene calcolata in JS (paginateMealBreaks) così la cena
   inizia davvero all'altezza del foglio successivo, come nel PDF.
   In stampa il div viene azzerato e il break-before: page fa il lavoro. */
.meal-page-break {
    display: block;
    width: 100%;
    min-height: 3rem;
    margin: 0;
    border: 0;
    background: transparent;
    page-break-before: always;
    break-before: page;
    position: relative;
}

@media print {
    .meal-page-break {
        min-height: 0;
        height: 0;
    }
}

/* Tab icons: color fixed gold, never inherits from button text color */
.tab-icon {
    flex-shrink: 0;
    margin-right: 0.4rem;
    vertical-align: middle;
    display: inline-block;
}
.tab-btn .tab-icon,
.tab-btn--active .tab-icon { /* explicit = same → does not change color on active */
    color: inherit;
}
/* The SVG strokes/fills use a hardcoded #C81E1E so active/inactive look identical */

/* ============================================================================
   MiyakoDelivery — Storefront, carrello, ordini, form utente (delivery app)
   ============================================================================ */

/* Tema condiviso */
.md-page { min-height:100vh; background:#FAF8F3; font-family:'Segoe UI',sans-serif; }
.md-container { max-width:980px; margin:0 auto; padding:1.5rem 1.25rem 4rem; }
.md-narrow { max-width:520px; }
.md-h1 { font-family:'Georgia',serif; font-size:1.6rem; font-weight:700; color:#1A1A1A; margin:0; }
.md-h2 { font-family:'Georgia',serif; font-size:1.1rem; font-weight:700; color:#1A1A1A; margin:0 0 1rem; }
.md-muted { color:#6B6B6B; font-size:13px; }
.md-card { background:#fff; border:1.5px solid #E0D9C8; border-radius:12px; padding:1.5rem; box-shadow:0 2px 16px rgba(0,0,0,.06); }
.md-error { font-size:13px; color:#D94040; background:#FFF5F5; border:1px solid #F5C2C2; border-radius:6px; padding:9px 12px; }
.md-success { font-size:13px; color:#2D8A4E; background:#F0FFF5; border:1px solid #B2DFC4; border-radius:6px; padding:9px 12px; }

/* Bottoni */
.md-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 18px; border-radius:6px; font-size:14px; font-weight:700; font-family:'Segoe UI',sans-serif; cursor:pointer; border:none; transition:all .15s; text-decoration:none; }
.md-btn-primary { background:#141414; color:#E2231A; }
.md-btn-primary:hover:not(:disabled) { background:#262626; }
.md-btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.md-btn-gold { background:#E2231A; color:#141414; }
.md-btn-gold:hover:not(:disabled) { background:#b9982f; }
.md-btn-outline { background:transparent; border:1.5px solid #E0D9C8; color:#6B6B6B; }
.md-btn-outline:hover { border-color:#B0151B; color:#B0151B; }
.md-btn-danger { background:transparent; border:1.5px solid #E0D9C8; color:#6B6B6B; }
.md-btn-danger:hover { border-color:#D94040; color:#D94040; background:#FFF5F5; }
.md-btn-sm { padding:6px 12px; font-size:12px; }

/* Top bar storefront/dashboard */
.md-topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#141414; padding:.85rem 1.25rem; }
/* Email utente loggato, in alto a sinistra accanto al logo */
.md-user-email { display:inline-flex; align-items:center; gap:6px; color:#CFCAC0; font-size:13px; font-family:'Segoe UI',sans-serif; max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md-user-email svg { flex:0 0 auto; opacity:.8; }
.md-topbar-actions { margin-left:auto; }
@media (max-width:640px) { .md-user-email { max-width:34vw; font-size:12px; } }
.md-brand { font-family:'Georgia',serif; font-size:1.2rem; font-weight:700; color:#E2231A; text-decoration:none; }
.md-topbar-actions { display:flex; align-items:center; gap:.6rem; }
.md-cart-link { position:relative; display:inline-flex; align-items:center; gap:6px; color:#FAF8F3; text-decoration:none; font-size:14px; }
.md-cart-badge { background:#E2231A; color:#141414; border-radius:20px; font-size:11px; font-weight:700; padding:1px 7px; }
.md-topbar-link { color:#FAF8F3; text-decoration:none; font-size:13px; opacity:.85; }
.md-topbar-link:hover { opacity:1; color:#E2231A; }
/* Bottoni header con icona+etichetta (Dashboard / Esci) */
.md-topbar-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px; border:1.5px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#FAF8F3; font-size:13px; font-weight:600; font-family:'Segoe UI',sans-serif; text-decoration:none; cursor:pointer; transition:all .15s; }
.md-topbar-btn:hover { background:#E2231A; border-color:#E2231A; color:#fff; }
.md-topbar-btn-logout { border-color:rgba(226,35,26,.5); }
.md-topbar-btn-logout:hover { background:#E2231A; border-color:#E2231A; }

/* Form utente (UserForm) */
.uf-form { display:flex; flex-direction:column; gap:1rem; }
.uf-field { display:flex; flex-direction:column; gap:5px; }
.uf-label { font-size:12px; font-weight:600; color:#1A1A1A; letter-spacing:.04em; text-transform:uppercase; }
.uf-input { padding:9px 13px; border:1.5px solid #E0D9C8; border-radius:6px; font-size:14px; font-family:'Segoe UI',sans-serif; color:#1A1A1A; background:#fff; outline:none; transition:border-color .15s; width:100%; box-sizing:border-box; }
.uf-input:focus { border-color:#B0151B; }

/* Etichette attributi piatto (🥬 veg / 🌶️ piccante / +18) — sovrapposte
   in alto a DESTRA sull'immagine, impilate; piccole pill con ombra per
   leggibilità sopra la foto. */
.sf-prod-tags { position:absolute; top:8px; right:8px; z-index:2; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.sf-tag { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; font-family:'Segoe UI',sans-serif; padding:3px 9px; border-radius:20px; line-height:1.3; box-shadow:0 2px 8px rgba(0,0,0,.18); backdrop-filter:saturate(1.1); }
.sf-tag-spicy { background:#FBE7E5; color:#C0341D; border:1px solid #F2C2BB; }
.sf-tag-veg { background:#E4F5E8; color:#1E7C42; border:1px solid #BBE5C7; }
.sf-tag-adult { background:#2B2B2B; color:#fff; border:1px solid #000; letter-spacing:.02em; }

/* Tag "Nuovo" in alto a SINISTRA sull'immagine */
.sf-badge-new { position:absolute; top:8px; left:8px; z-index:2; display:inline-flex; align-items:center; gap:5px; background:#E2231A; color:#fff; font-family:'Segoe UI',sans-serif; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:4px 11px; border-radius:20px; box-shadow:0 3px 10px rgba(226,35,26,.4); }

/* Storefront catalogo */
.sf-cat { margin-bottom:2rem; }
.sf-cat-title { font-family:'Georgia',serif; font-size:1.25rem; font-weight:700; color:#1A1A1A; margin:0 0 1rem; padding-bottom:.5rem; border-bottom:2px solid #E2231A; }
.sf-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1rem; }
.sf-prod { background:#fff; border:1.5px solid #E0D9C8; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.sf-prod-media { position:relative; overflow:hidden; }
.sf-prod-img { display:block; width:100%; height:140px; object-fit:cover; background:#F0EDE4; }
.sf-prod-noimg { width:100%; height:140px; background:#F0EDE4; display:flex; align-items:center; justify-content:center; color:#E2231A; }
.sf-prod-noimg .md-icon { opacity:.55; }
.sf-prod-body { padding:.85rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.sf-prod-name { font-weight:700; color:#1A1A1A; font-size:15px; }
.sf-prod-desc { font-size:12px; color:#6B6B6B; flex:1; }
.sf-prod-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.3rem; }
.sf-price { font-weight:700; color:#B0151B; font-size:15px; }

/* Carrello */
.cart-row { display:flex; align-items:center; gap:1rem; padding:.75rem 0; border-bottom:1px solid #E0D9C8; }
.cart-row-img { width:54px; height:54px; border-radius:8px; object-fit:contain; background:#141414; flex-shrink:0; }
.cart-row-main { flex:1; min-width:0; }
.cart-row-name { font-weight:600; color:#1A1A1A; }
.cart-qty { display:inline-flex; align-items:center; border:1.5px solid #E0D9C8; border-radius:6px; overflow:hidden; }
.cart-qty button { width:28px; height:30px; border:none; background:#F0EDE4; cursor:pointer; color:#141414; font-weight:700; }
.cart-qty button:hover { background:#E6E0D0; }
.cart-qty span { min-width:30px; text-align:center; font-weight:600; }
.cart-total-row { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; font-size:1.15rem; font-weight:700; color:#1A1A1A; }

/* Tabella ordini / liste dashboard */
.ord-list { display:flex; flex-direction:column; gap:.75rem; }
.ord-card { background:#fff; border:1.5px solid #E0D9C8; border-radius:10px; padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ord-card-main { min-width:0; }
.ord-id { font-weight:700; color:#1A1A1A; }
.ord-meta { font-size:12px; color:#6B6B6B; }
.ord-badge { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; padding:3px 10px; border-radius:20px; }
.ord-badge-Ricevuto { background:#FFF4E0; color:#9A6B2E; }
.ord-badge-InPreparazione { background:#E8F0FF; color:#2E5A9A; }
.ord-badge-InConsegnaConFattorino { background:#E0F4FF; color:#2E7A9A; }
.ord-badge-Completato { background:#E8FFE8; color:#2D8A4E; }
.ord-badge-Annullato { background:#FFE8E8; color:#B83232; }
.dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.dash-tile { background:#fff; border:1.5px solid #E0D9C8; border-radius:12px; padding:1.5rem; text-decoration:none; color:#1A1A1A; transition:all .15s; display:block; }
.dash-tile:hover { border-color:#E2231A; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.dash-tile-title { font-family:'Georgia',serif; font-weight:700; font-size:1.05rem; margin-bottom:.35rem; }

/* ============================================================================
   MiyakoDelivery — Ottimizzazione mobile (storefront, carrello, ordini, dash)
   ============================================================================ */
@media (max-width: 640px) {
    .md-container { padding:1rem .85rem 3rem; }

    /* Top bar: brand più piccolo, azioni a capo se serve */
    .md-topbar { padding:.7rem .9rem; flex-wrap:wrap; gap:.5rem .75rem; }
    .md-brand { font-size:1.05rem; }
    .md-topbar-actions { gap:.5rem; flex-wrap:wrap; }
    .md-cart-link { font-size:13px; }
    .md-topbar-link { font-size:12px; }

    .md-h1 { font-size:1.3rem; }
    .md-h2 { font-size:1rem; }
    .md-card { padding:1.1rem; border-radius:10px; }
    .md-btn { padding:11px 16px; }

    /* Storefront: griglia prodotti a tutta larghezza, immagini più basse */
    .sf-grid { grid-template-columns:1fr; gap:.85rem; }
    .sf-cat-title { font-size:1.1rem; }
    .sf-prod { flex-direction:row; }
    .sf-prod-media { width:120px; flex-shrink:0; }
    .sf-prod-img, .sf-prod-noimg { width:100%; height:100%; min-height:118px; }
    .sf-prod-body { padding:.7rem .85rem; }

    /* Carrello: la riga va a capo invece di comprimersi.
       Nome a tutta larghezza, controlli (qtà/totale/rimuovi) sotto. */
    .cart-row { flex-wrap:wrap; gap:.6rem .75rem; position:relative; padding-right:34px; }
    .cart-row-main { flex:1 1 100%; order:1; }
    .cart-row-img { order:0; }
    .cart-qty { order:2; }
    .cart-row > div[style*="min-width:70px"] { order:3; margin-left:auto; }
    .cart-row > .md-btn-danger { position:absolute; top:.6rem; right:0; }
    .cart-total-row { font-size:1.05rem; }

    /* Ordini / dashboard */
    .ord-card { padding:.85rem 1rem; }
    .dash-grid { grid-template-columns:1fr; }
}

/* Schermi molto stretti */
@media (max-width: 380px) {
    .md-cart-link span:not(.md-cart-badge) { display:none; } /* solo icona carrello */
    .sf-prod { flex-direction:column; }
    .sf-prod-media { width:100%; }
    .sf-prod-img, .sf-prod-noimg { width:100%; height:130px; }
}

/* Login: padding ridotto e card a tutta larghezza su mobile */
@media (max-width: 640px) {
    .login-page { padding:1rem; }
    .login-card { padding:2rem 1.4rem; max-width:100%; }
    .login-title { font-size:1.3rem; }
}

/* ============================================================================
   MiyakoDelivery — Desktop e desktop grandi: lo storefront usa più larghezza
   (più colonne di prodotti) mantenendo strette le pagine form/carrello.
   ============================================================================ */
.md-container--shop { max-width: 1280px; }

/* Desktop grandi / ultra-wide: ancora più colonne, ma con un tetto per non
   stirare troppo le card. */
@media (min-width: 1700px) {
    .md-container--shop { max-width: 1560px; }
}

/* Tablet/desktop: card prodotto un filo più ariose */
@media (min-width: 700px) {
    .sf-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
}

/* ============================================================================
   MiyakoDelivery — Tema brand Sushi Miyako (nero / rosso / bianco)
   Override di contrasto: testo bianco sugli elementi a sfondo rosso.
   ============================================================================ */
:root { --brand-red:#E2231A; --brand-red-dark:#B0151B; --brand-black:#141414; }

/* Bottoni accento (rosso) → testo bianco */
.md-btn-gold { background:#E2231A; color:#fff; }
.md-btn-gold:hover:not(:disabled) { background:#B0151B; }
.md-cart-badge { background:#E2231A; color:#fff; }
.up-avatar { color:#fff; }

/* CTA primaria: nero con testo bianco, hover rosso (più leggibile del rosso su nero) */
.md-btn-primary { background:#141414; color:#fff; }
.md-btn-primary:hover:not(:disabled) { background:#E2231A; color:#fff; }

/* Badge ruolo admin: rosso su nero ok; assicuriamo leggibilità */
.up-badge-admin { background:#141414; color:#E2231A; }

/* Storefront: titolo categoria con sottolineatura rossa, prezzo rosso */
.sf-cat-title { border-bottom-color:#E2231A; }
.sf-price { color:#E2231A; }

/* Top bar nero pieno (#000) come lo sfondo del logo, sempre visibile (sticky) */
.md-topbar { background:#000000; position:sticky; top:0; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.md-brand { color:#E2231A; display:inline-flex; align-items:center; }
/* Logo del ristorante al posto del testo del brand */
.md-brand-logo { height:42px; width:auto; display:block; }
@media (max-width: 640px) { .md-brand-logo { height:34px; } }

/* ============================================================================
   MiyakoDelivery — Stepper quantità sulle card + barra categorie sticky in basso
   ============================================================================ */
/* Stepper quantità (− N +) nella card prodotto, 0..10 */
.sf-qty { display:inline-flex; align-items:center; border:1.5px solid #E0D9C8; border-radius:6px; overflow:hidden; }
.sf-qty button { width:30px; height:32px; border:none; background:#F0EDE4; cursor:pointer; color:#141414; font-weight:700; font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center; }
.sf-qty button:hover:not(:disabled) { background:#E2231A; color:#fff; }
.sf-qty button:disabled { opacity:.4; cursor:not-allowed; }
.sf-qty span { min-width:30px; text-align:center; font-weight:700; font-size:14px; }

/* Le sezioni categoria tengono conto di header+catbar sticky quando ci si salta sopra */
.sf-cat { scroll-margin-top: 118px; }

.md-container--withcatbar { padding-bottom: 1.5rem; }

/* Wrapper sticky: header + barra categorie restano SEMPRE visibili in cima durante lo scroll */
.sf-sticky-top { position: sticky; top: 0; z-index: 1000; }

/* Barra categorie in cima (sotto l'header), scorrevole orizzontalmente */
.sf-catbar { display:flex; gap:.5rem; overflow-x:auto; padding:.6rem .85rem; background:#141414; border-bottom:2px solid #E2231A; box-shadow:0 3px 14px rgba(0,0,0,.3); }
.sf-catbar::-webkit-scrollbar { height:6px; }
.sf-catbar::-webkit-scrollbar-thumb { background:#E2231A; border-radius:3px; }
.sf-catbar::-webkit-scrollbar-track { background:transparent; }
.sf-catbar-btn { flex:0 0 auto; white-space:nowrap; padding:7px 14px; border-radius:20px; border:1.5px solid #3a3a3a; background:#1d1d1d; color:#fff; font-size:13px; font-weight:600; font-family:'Segoe UI',sans-serif; cursor:pointer; transition:all .15s; }
.sf-catbar-btn:hover { background:#E2231A; border-color:#E2231A; color:#fff; }
/* Categoria attualmente in vista (scroll-spy): evidenziata in rosso */
.sf-catbar-btn--active { background:#E2231A; border-color:#E2231A; color:#fff; box-shadow:0 0 0 2px rgba(226,35,26,.35); }
/* Bottone "tutte le categorie" fissato all'inizio della barra */
.sf-catbar-trigger { flex:0 0 auto; position:sticky; left:0; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:38px; height:34px; border-radius:10px; border:1.5px solid #E2231A; background:#E2231A; color:#fff; cursor:pointer; transition:all .15s; }
.sf-catbar-trigger:hover { background:#b81a13; border-color:#b81a13; }
/* Spazio finale: l'ultima categoria non resta coperta dal badge privacy iubenda */
.sf-catbar-spacer { flex:0 0 auto; width:96px; height:1px; }

/* Footer sticky del carrello (in fondo): quantità + "Procedi al carrello" + totale */
.sf-cartbar { position:fixed; left:0; right:0; bottom:0; z-index:950; display:flex; align-items:center; gap:12px; padding:13px 18px; background:#E2231A; color:#fff; text-decoration:none; font-family:'Segoe UI',sans-serif; font-weight:700; box-shadow:0 -4px 16px rgba(0,0,0,.28); }
.sf-cartbar:hover { background:#c81d14; }
.sf-cartbar-badge { flex:0 0 auto; min-width:28px; height:28px; padding:0 8px; border-radius:14px; background:#fff; color:#E2231A; display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; }
.sf-cartbar-text { flex:1 1 auto; text-align:center; font-size:16px; letter-spacing:.3px; }
.sf-cartbar-total { flex:0 0 auto; font-size:16px; font-weight:800; white-space:nowrap; }
/* Spazio in fondo alla pagina così la barra non copre footer/ultimi contenuti */
.sf-with-cartbar { padding-bottom:64px; }

/* Bottone "Tutte le categorie" + selettore categorie a schermo intero */
.sf-catmenu-btn { display:inline-flex; align-items:center; gap:9px; margin-bottom:1.5rem; padding:11px 20px; border-radius:10px; border:1.5px solid #141414; background:#141414; color:#fff; font-size:15px; font-weight:700; font-family:'Segoe UI',sans-serif; cursor:pointer; transition:all .15s; }
.sf-catmenu-btn:hover { background:#E2231A; border-color:#E2231A; }
.sf-catmenu-overlay { position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:1rem; animation:sf-fade .15s ease; }
@keyframes sf-fade { from { opacity:0; } to { opacity:1; } }
.sf-catmenu-panel { width:100%; max-width:520px; max-height:88vh; display:flex; flex-direction:column; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.sf-catmenu-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; background:#141414; color:#fff; font-size:1.1rem; font-weight:800; letter-spacing:.02em; }
.sf-catmenu-close { background:none; border:none; color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; padding:0 .25rem; }
.sf-catmenu-close:hover { color:#E2231A; }
.sf-catmenu-list { overflow-y:auto; padding:.75rem; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.sf-catmenu-item { padding:14px 16px; border-radius:10px; border:1.5px solid #E0D9C8; background:#FAF6EE; color:#141414; font-size:15px; font-weight:600; font-family:'Segoe UI',sans-serif; text-align:left; cursor:pointer; transition:all .15s; }
.sf-catmenu-item:hover { background:#E2231A; border-color:#E2231A; color:#fff; }
@media (max-width:480px) { .sf-catmenu-list { grid-template-columns:1fr; } }

/* Ricerca prodotto nello storefront */
.sf-search { position:relative; display:flex; align-items:center; margin-bottom:1.5rem; }
.sf-search-icon { position:absolute; left:14px; color:#9A8F7A; pointer-events:none; }
.sf-search-input { width:100%; box-sizing:border-box; padding:12px 40px 12px 42px; border:1.5px solid #E0D9C8; border-radius:10px; font-size:15px; font-family:'Segoe UI',sans-serif; color:#1A1A1A; background:#fff; outline:none; transition:border-color .15s; }
.sf-search-input:focus { border-color:#E2231A; }
.sf-search-clear { position:absolute; right:10px; width:26px; height:26px; border:none; border-radius:50%; background:#F0EDE4; color:#555; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sf-search-clear:hover { background:#E2231A; color:#fff; }

/* Selettore lingua nell'header */
.md-lang-wrap { display:inline-flex; align-items:center; gap:5px; }
.md-lang-icon { font-size:15px; line-height:1; }
.md-lang-select { background:rgba(255,255,255,.08); color:#FAF8F3; border:1.5px solid rgba(255,255,255,.25); border-radius:8px; padding:6px 8px; font-size:13px; font-family:'Segoe UI',sans-serif; cursor:pointer; outline:none; }
.md-lang-select:hover { border-color:#E2231A; }
.md-lang-select option { color:#1A1A1A; }

/* ============================================================================
   MiyakoDelivery — Frecce "indietro" (navigazione semplice)
   ============================================================================ */
/* Login: freccia bianca in alto a sinistra, ben visibile sullo sfondo scuro */
.login-back {
    position: fixed;
    top: 1.1rem;
    left: 1.1rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    border: 2px solid #ffffff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    transition: all .15s;
}
.login-back:hover { background: #E2231A; border-color: #E2231A; }

/* Carrello (e pagine chiare): bottone indietro con freccia, rosso brand */
.md-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    padding: 8px 16px;
    background: #141414;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Segoe UI', sans-serif;
    cursor: pointer;
    transition: all .15s;
}
.md-back-btn:hover { background: #E2231A; }

/* ============================================================================
   MiyakoDelivery — Riepilogo carrello, zona e regole consegna
   ============================================================================ */
/* Gestione ordine: gruppo di bottoni stato (applicazione immediata) + notifica email */
.ord-status-group { display:flex; flex-wrap:wrap; gap:.5rem; }
.ord-status-btn { flex:0 0 auto; padding:8px 14px; border-radius:8px; border:1.5px solid #E0D9C8; background:#fff; color:#444; font-size:13px; font-weight:600; font-family:'Segoe UI',sans-serif; cursor:pointer; transition:all .15s; }
.ord-status-btn:hover:not(:disabled) { border-color:#E2231A; color:#E2231A; }
.ord-status-btn:disabled { opacity:.6; cursor:default; }
.ord-status-btn--active { background:#E2231A; border-color:#E2231A; color:#fff; }
.ord-status-btn--active:hover:not(:disabled) { color:#fff; }
.ord-notify-row { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.ord-chk { display:inline-flex; align-items:center; gap:.35rem; font-size:14px; color:#1A1A1A; cursor:pointer; }

.sum-row { display:flex; justify-content:space-between; padding:.35rem 0; font-size:15px; color:#1A1A1A; }
.sum-row-discount { color:#2D8A4E; font-weight:600; }
.sum-total { border-top:2px solid #E0D9C8; margin-top:.4rem; padding-top:.7rem; font-size:1.2rem; font-weight:800; }
.sum-hint { margin-top:.6rem; font-size:13px; color:#9A6B2E; background:#FFF7E8; border:1px solid #F0D9A8; border-radius:8px; padding:8px 12px; }

.delivery-zone-box { margin-top:.75rem; padding-top:.75rem; border-top:1px dashed #E0D9C8; }
.zone-opt { display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0; cursor:pointer; font-size:14px; }
.zone-opt input { margin-top:3px; }
.delivery-rules { margin-top:.75rem; background:#FBF1F0; border:1px solid #F3C9C5; border-radius:8px; padding:12px 14px; font-size:13px; color:#7a2a22; }
.delivery-rules ul { margin:.4rem 0 0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.25rem; }

/* ============================================================================
   MiyakoDelivery — Footer: contatti negozio
   ============================================================================ */
/* Riga contatti: logo Sushi a sinistra, contatti a destra */
.site-footer-contact { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1.5rem; padding:.25rem 0 1rem; }
.site-footer-contacts { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.5rem; }
.footer-logo-img { width:auto; max-width:170px; max-height:60px; height:auto; display:block; margin:0; }
.footer-contact-item { color:#e9e9e9; text-decoration:none; font-size:13.5px; transition:color .15s; display:inline-flex; align-items:center; gap:5px; }
.footer-contact-item:hover { color:#E2231A; }

/* Riga 3: link legali centrati, sotto il copyright */
.site-footer-links--center { justify-content:center; flex-wrap:wrap; padding-top:1rem; }

/* Link "Preferenze privacy" con icona iubenda inline (sempre renderizzata) */
.iub-pref-link { display:inline-flex; align-items:center; gap:6px; }
.iub-pref-ico { display:inline-flex; flex-shrink:0; line-height:0; }
.iub-pref-ico svg { display:block; }

@media (max-width:640px) {
    .site-footer-contact { flex-direction:column; align-items:center; text-align:center; gap:.6rem; }
    .site-footer-contacts { justify-content:center; flex-direction:column; gap:.4rem; }
    .footer-logo-img { margin:0 auto; }
}

/* ============================================================================
   MiyakoDelivery — Home: barra orari + banner promozioni
   ============================================================================ */
/* Orari: striscia rossa ben visibile sotto l'header */
.shop-hours { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem .9rem; background:#E2231A; color:#fff; padding:.6rem 1rem; font-size:15px; letter-spacing:.02em; }
.shop-hours-icon { font-size:1.1rem; }
.shop-hours-sep { opacity:.6; }
@media (max-width:640px){ .shop-hours { font-size:13.5px; } }

/* Avviso "solo contanti" in home */
.cash-only-banner { display:flex; align-items:center; gap:8px; background:#FFF7E8; border:1px solid #F0DCA8; color:#8A6D1E; border-radius:10px; padding:9px 14px; font-size:13.5px; font-weight:600; margin-bottom:1rem; }
.cash-only-banner svg { flex-shrink:0; color:#C79A2E; }

/* Locandina promozioni (immagine responsive) */
.promo-locandina { display:block; margin-bottom:.5rem; }
.promo-locandina img { display:block; width:100%; height:auto; border-radius:14px; }
.age-redeclare { display:block; margin:0 auto 1.5rem; background:none; border:none; color:#9A7A2E; font-size:12px; text-decoration:underline; cursor:pointer; padding:2px 6px; }
.age-redeclare:hover { color:#E2231A; }

/* Popup verifica età (+18) */
.age-gate-overlay { position:fixed; inset:0; z-index:1300; background:rgba(20,16,12,.78); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:1.25rem; animation:sf-fade .18s ease; }
.age-gate-panel { width:100%; max-width:440px; background:#fff; border-radius:18px; padding:2rem 1.75rem; text-align:center; box-shadow:0 26px 80px rgba(0,0,0,.5); border-top:5px solid #E2231A; }
.age-gate-logo { height:62px; width:auto; margin:0 auto .9rem; display:block; }
.age-gate-title { font-family:'Georgia',serif; font-size:1.55rem; font-weight:800; color:#141414; margin:0 0 .5rem; }
.age-gate-text { color:#4a4a4a; font-size:14.5px; line-height:1.5; margin:0 0 1.4rem; }
.age-gate-actions { display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.1rem; }
.age-gate-btn { padding:14px 18px; border-radius:12px; font-size:15.5px; font-weight:700; font-family:'Segoe UI',sans-serif; cursor:pointer; border:2px solid transparent; transition:all .15s; }
.age-gate-btn--yes { background:#E2231A; color:#fff; }
.age-gate-btn--yes:hover { background:#c01b14; transform:translateY(-1px); }
.age-gate-btn--no { background:#FAF6EE; color:#141414; border-color:#E0D9C8; }
.age-gate-btn--no:hover { background:#f0eada; }
.age-gate-note { color:#9a9a9a; font-size:11.5px; line-height:1.4; margin:0; }

/* Backup per categoria (admin) */
.bk-cat-grid { display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:.5rem; }
.bk-cat { display:inline-flex; align-items:center; gap:.45rem; padding:7px 12px; border:1.5px solid #E0D9C8; border-radius:9px; background:#FAF6EE; font-size:14px; font-weight:600; color:#1a1a1a; cursor:pointer; }
.bk-cat input { accent-color:#E2231A; }
.btn-outline.is-disabled { opacity:.5; pointer-events:none; }

/* Campanella notifiche (header) */
.nbell-wrap { position:relative; display:inline-flex; }
.nbell-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; transition:all .15s; }
.nbell-btn:hover { background:rgba(255,255,255,.14); }
.nbell-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#E2231A; color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #141414; }
.nbell-backdrop { position:fixed; inset:0; z-index:1190; }
.nbell-panel { position:absolute; top:46px; right:0; z-index:1200; width:340px; max-width:88vw; max-height:70vh; display:flex; flex-direction:column; background:#fff; color:#1a1a1a; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; }
/* Mobile/tablet: il pannello è fisso dentro al viewport (ancorato in alto a dx)
   così non esce fuori schermo a sinistra. */
@media (max-width:1024px) {
    .nbell-panel { position:fixed; top:62px; right:10px; left:auto; width:min(340px, calc(100vw - 20px)); max-width:none; max-height:75vh; }
}
.nbell-head { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid #eee7d6; font-size:1.02rem; }
.nbell-clear { background:none; border:none; color:#9A7A2E; font-size:12.5px; cursor:pointer; text-decoration:underline; }
.nbell-list { overflow-y:auto; }
.nbell-empty { padding:1.6rem 1rem; text-align:center; color:#9a9a9a; font-size:14px; }
.nbell-item { display:block; width:100%; text-align:left; padding:.7rem 1rem; border:none; border-bottom:1px solid #f1ece0; background:#fff; cursor:pointer; transition:background .12s; }
.nbell-item:hover { background:#FAF6EE; }
.nbell-item--unread { background:#FFF7F2; }
.nbell-item--unread:hover { background:#fdeee5; }
.nbell-item-title { font-weight:700; font-size:13.5px; color:#141414; }
.nbell-item-body { font-size:12.5px; color:#555; margin-top:1px; }
.nbell-item-time { font-size:11px; color:#a09a8c; margin-top:3px; }
.nbell-push-btn { margin:.6rem; padding:10px; border-radius:10px; border:1.5px solid #E2231A; background:#fff; color:#E2231A; font-weight:700; font-size:13.5px; cursor:pointer; }
.nbell-push-btn:hover:not(:disabled) { background:#E2231A; color:#fff; }
.nbell-push-on { margin:.6rem .6rem 0; padding:8px 10px; border-radius:8px; background:#F0FAF0; color:#2D8A4E; font-size:12.5px; text-align:center; }
.nbell-push-btn--off { border-color:#C9C2B4; color:#777; }
.nbell-push-btn--off:hover:not(:disabled) { background:#777; border-color:#777; color:#fff; }

/* Nasconde il pulsante/badge FLOTTANTE delle preferenze privacy di iubenda
   (ora riapribile dal link "Preferenze privacy" nel footer). Selettore mirato:
   colpisce solo elementi iubenda che sono "floating" → NON tocca il banner cookie
   del primo accesso né il link nel footer (che non contiene "floating"). */
#iubFloatingButton,
[class*="iub"][class*="floating"],
[id*="iub"][id*="floating"] { display:none !important; }

/* Stato notifiche push (Impostazioni admin) */
.settings-push-state { display:inline-block; padding:8px 12px; border-radius:8px; font-size:13.5px; font-weight:600; }
.settings-push-state--on { background:#F0FAF0; color:#2D8A4E; }

/* Toggle "Non disponibile" nel popup prodotto (rosso quando attivo) */
.edit-attr-chip--unavail { border-color:#E0C2C2; }
.edit-attr-chip--unavail-on { background:#FBE9E9 !important; border-color:#E2231A !important; color:#B0151B !important; font-weight:700; }

/* Codice ordine (10 caratteri) nella gestione ordini admin */
.ord-code { font-family:'Courier New', monospace; font-weight:700; letter-spacing:.06em; color:#141414; background:#F0EDE4; border-radius:5px; padding:1px 6px; }

/* Filtri rapidi storefront (sotto la ricerca) */
.sf-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin:-.5rem 0 1.25rem; }
.sf-filter { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:20px; border:1.5px solid #E0D9C8; background:#fff; color:#1a1a1a; font-size:13.5px; font-weight:600; font-family:'Segoe UI',sans-serif; cursor:pointer; transition:all .15s; }
.sf-filter:hover { border-color:#141414; }
.sf-filter--on { background:#141414; border-color:#141414; color:#fff; }
.sf-filter--on:hover { background:#E2231A; border-color:#E2231A; }
.sf-filter-clear { background:#fff; border-color:#E2231A; color:#E2231A; }
.sf-filter-clear:hover { background:#E2231A; border-color:#E2231A; color:#fff; }

.cart-edit-link { background:none; border:none; color:#9A7A2E; font-size:12px; text-decoration:underline; cursor:pointer; padding:0 2px; }
.cart-edit-link:hover { color:#E2231A; }

/* Omaggio nel carrello (birra/lattina sopra € 25) */
.cart-gift { border:2px dashed #E2231A; background:#FFF7F2; }
.cart-gift-head { display:flex; align-items:center; gap:.5rem; font-size:1.05rem; color:#141414; margin-bottom:.4rem; }
.cart-gift-icon { color:#E2231A; display:inline-flex; }
.cart-gift-badge { margin-left:auto; background:#E2231A; color:#fff; font-size:11px; font-weight:800; letter-spacing:.04em; border-radius:6px; padding:3px 8px; }
.cart-gift-text { color:#4a4a4a; font-size:14px; margin:.2rem 0 .6rem; }
.cart-gift select { max-width:260px; }

/* ============================================================================
   MiyakoDelivery — Editor orari di apertura (admin)
   ============================================================================ */
.hours-day { display:flex; align-items:flex-start; gap:1rem; padding:.7rem 0; border-bottom:1px solid #F0EDE4; }
.hours-day-name { flex:0 0 110px; font-weight:700; color:#1A1A1A; padding-top:6px; }
.hours-day-body { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.hours-range { display:inline-flex; align-items:center; gap:.35rem; background:#F7F4EF; border:1px solid #E0D9C8; border-radius:8px; padding:4px 8px; }
.hours-range input[type="time"] { border:1px solid #E0D9C8; border-radius:6px; padding:4px 6px; font-size:14px; font-family:'Segoe UI',sans-serif; }
.hours-x { background:transparent; border:none; color:#D94040; cursor:pointer; font-size:13px; line-height:1; padding:2px; }
.hours-x:hover { color:#b83232; }
.hours-closed { color:#9A6B2E; font-style:italic; font-size:13px; }
.hours-exc { background:#FBF9F4; border:1px solid #E0D9C8; border-radius:10px; padding:.85rem 1rem; margin-bottom:.75rem; }
.hours-exc-dates { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.6rem; }
.hours-exc-dates input[type="date"] { border:1px solid #E0D9C8; border-radius:6px; padding:5px 8px; font-size:14px; font-family:'Segoe UI',sans-serif; }
.hours-exc-ranges { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
@media (max-width:640px){ .hours-day { flex-direction:column; gap:.4rem; } .hours-day-name { padding-top:0; } }

/* Stato aperto/chiuso nella striscia orari */
.shop-status { font-weight:800; padding:2px 10px; border-radius:20px; font-size:13px; }
.shop-status-open { background:#fff; color:#1f8a4c; }
.shop-status-closed { background:#fff; color:#B83232; }

/* Dettaglio importi ordine (account / admin / delivery) */
.ord-bd { display:flex; justify-content:space-between; font-size:13px; padding:1px 0; color:#1A1A1A; }

/* ============================================================================
   MiyakoDelivery — Pagina ordine cliente (stato + timeline)
   ============================================================================ */
.ord-status-big { display:inline-block; font-size:1.1rem; font-weight:800; padding:8px 22px; border-radius:24px; }
.ord-steps { display:flex; justify-content:space-between; margin-top:1.25rem; position:relative; }
.ord-steps::before { content:""; position:absolute; top:9px; left:8%; right:8%; height:2px; background:#E0D9C8; z-index:0; }
.ord-step { display:flex; flex-direction:column; align-items:center; gap:.4rem; flex:1; position:relative; z-index:1; }
.ord-step-dot { width:18px; height:18px; border-radius:50%; background:#E0D9C8; border:2px solid #fff; }
.ord-step.done .ord-step-dot { background:#E2231A; }
.ord-step-lbl { font-size:11px; color:#6B6B6B; text-align:center; line-height:1.2; }
.ord-step.done .ord-step-lbl { color:#1A1A1A; font-weight:600; }

/* ════════════════════════════════════════════════════════════════════════════
   MiyakoDelivery — DESIGN REFINEMENT LAYER
   Pass front-end avanzato: elevazione a strati, micro-interazioni, focus
   accessibile, tipografia più nitida e coerenza brand (nero/rosso/bianco).
   Tocca SOLO proprietà visive/di interazione (ombre, transizioni, transform,
   outline, colore) — mai il layout — quindi non altera le strutture esistenti.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Brand semantico (alias chiari sui colori legacy) */
    --brand: #E2231A;
    --brand-600: #C81E16;
    --brand-700: #B0151B;
    --ink: #141414;
    --paper: #FAF8F3;
    --line: #E0D9C8;

    /* Tipografia: display elegante (serif) + UI nitida (sans) */
    --font-display: 'Georgia', 'Times New Roman', serif;
    --font-ui: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;

    /* Elevazione a strati: più naturale di un singolo blur piatto */
    --shadow-xs: 0 1px 2px rgba(20,20,20,.06);
    --shadow-sm: 0 1px 2px rgba(20,20,20,.05), 0 2px 8px rgba(20,20,20,.05);
    --shadow-md: 0 2px 6px rgba(20,20,20,.05), 0 10px 26px rgba(20,20,20,.09);
    --shadow-lg: 0 10px 24px rgba(20,20,20,.09), 0 24px 56px rgba(20,20,20,.14);
    --shadow-brand: 0 6px 22px rgba(226,35,26,.26);

    /* Movimento */
    --ease: cubic-bezier(.2,.7,.2,1);
    --dur: .18s;

    /* Anello di focus accessibile, coerente ovunque */
    --ring: 0 0 0 3px rgba(226,35,26,.32);
}

/* Icone inline (componente Icon) allineate al testo */
.md-icon { display:inline-block; vertical-align:-.15em; flex:0 0 auto; }

/* ── Rendering & basi ───────────────────────────────────────────────────── */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
::selection { background: rgba(226,35,26,.18); color: var(--ink); }

/* Scrollbar discreta su desktop */
@media (pointer: fine) {
    * { scrollbar-width: thin; scrollbar-color: #cfc7b4 transparent; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: #d9d1bd; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
    ::-webkit-scrollbar-thumb:hover { background: #c7bda3; }
}

/* ── Focus accessibile su tutti gli elementi interattivi ────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .md-btn:focus-visible,
.dash-tile:focus-visible, .sf-catbar-btn:focus-visible, .sf-catmenu-item:focus-visible,
.up-btn-create:focus-visible, .login-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Rispetta "riduci movimento" */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ── Tipografia: gerarchia più curata ───────────────────────────────────── */
.md-h1, .up-title, .login-subtitle, .impostazioni-heading, .dash-tile-title { letter-spacing: -.012em; }
.md-h1 { line-height: 1.16; }
.md-h2 { letter-spacing: -.008em; line-height: 1.25; }
.md-muted { line-height: 1.5; }

/* ── Bottoni: micro-interazione (lift + press) + ombra brand ────────────── */
.md-btn, .up-btn-create, .login-btn, .btn-gold, .btn-outline {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.md-btn:not(:disabled):hover { transform: translateY(-1px); }
.md-btn:not(:disabled):active { transform: translateY(0); }
.md-btn-primary { box-shadow: var(--shadow-sm); }
.md-btn-primary:not(:disabled):hover { box-shadow: var(--shadow-brand); }
.md-btn-gold:not(:disabled):hover, .md-btn-gold:not(:disabled):focus-visible { box-shadow: var(--shadow-brand); }
.md-back-btn { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.md-back-btn:hover { transform: translateX(-2px); }

/* ── Card, tile, contenitori: elevazione + lift al hover ────────────────── */
.md-card { box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.dash-tile { box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.dash-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.up-card { box-shadow: var(--shadow-sm); }

/* ── Storefront: card prodotto con lift e zoom immagine ─────────────────── */
.sf-prod { box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sf-prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #EBD7B8; }
.sf-prod-img { transition: transform .4s var(--ease); }
.sf-prod:hover .sf-prod-img { transform: scale(1.05); }
.sf-prod-name { letter-spacing: -.004em; }
.sf-catbar-btn, .sf-catbar-trigger { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.sf-catbar-btn:hover { transform: translateY(-1px); }
.sf-catmenu-item { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.sf-catmenu-item:hover { transform: translateY(-1px); }

/* ── Input/textarea/select: anello di focus morbido (non solo bordo) ─────── */
.md-input, .uf-input, .up-input, .up-select, .login-input, .product-name-input,
.product-desc-input, .sf-search-input {
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.md-input:focus, .uf-input:focus, .up-input:focus, .up-select:focus, .login-input:focus,
.product-name-input:focus, .product-desc-input:focus {
    box-shadow: var(--ring);
}

/* ── Badge/tag: tracking e nitidezza ────────────────────────────────────── */
.sf-tag, .ord-badge, .up-badge, .product-cat-tag { letter-spacing: .012em; }

/* ── Header & barre: separazione più morbida e profonda ─────────────────── */
.md-topbar { box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.30); }
.main-tab-bar { box-shadow: 0 4px 14px rgba(0,0,0,.06); }

/* ── Login: card più presente, con elevazione marcata ───────────────────── */
.login-card { box-shadow: var(--shadow-lg); }
.login-btn { box-shadow: var(--shadow-sm); }
.login-btn:not(:disabled):hover { box-shadow: var(--shadow-brand); }

/* ── Modali/overlay: entrata morbida + elevazione coerente ──────────────── */
.sf-catmenu-panel, .policy-modal, .up-modal, .product-edit-modal {
    box-shadow: var(--shadow-lg);
    animation: md-pop .2s var(--ease);
}
@keyframes md-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* ── Promo / orari: rifinitura ombra ────────────────────────────────────── */
.promo-banner { box-shadow: var(--shadow-sm); }
.shop-hours { box-shadow: 0 2px 10px rgba(226,35,26,.12); }

/* ── Allineamento icona+testo nei contenitori che prima avevano un'emoji ─── */
.dash-tile-title, .impostazioni-heading, .edit-section-title { display:flex; align-items:center; gap:9px; }
.footer-contact-item { display:inline-flex; align-items:center; gap:7px; }
.promo-emoji { display:inline-flex; align-items:center; justify-content:center; }
.shop-hours-icon { display:inline-flex; align-items:center; }
.edit-attr-chip { display:inline-flex; align-items:center; gap:5px; }
/* Chip "Novità" nell'editor: evidenziata quando attiva */
.edit-attr-chip--new.edit-attr-chip--on { background:#FDEAE8; border-color:#F3B3AD; color:#B0151B; }
/* Le icone dentro i bottoni ereditano il colore del testo del bottone */
.md-btn .md-icon, .btn-gold .md-icon, .btn-outline .md-icon, .up-btn-create .md-icon { vertical-align:-.18em; }