/* Darumadrop One / Montserrat are loaded via a <link> in App.razor's <head>
   (with a preconnect ahead of it), not @import here — @import forces the
   browser to fully fetch and parse this stylesheet before it even discovers
   the font CSS needs fetching too, serializing what could otherwise start
   downloading in parallel with everything else in <head>. */

/* Gochu isn't on Google Fonts (independent vendor, "Il mio Pane" bakery
   display font) — self-hosted from the file supplied directly. */
@font-face {
    font-family: 'Gochu';
    src: url('/fonts/Gochu.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-cream: #fbf4e9;
    --color-cream-2: #E5D9C3;
    --color-brown-900: #333333;
    --color-brown-700: color-mix(in srgb, #333333 60%, #C1AD8F 40%);
    --color-brown-500: color-mix(in srgb, #333333 35%, #C1AD8F 65%);
    --color-terracotta: #FF8736;
    --color-terracotta-dark: #CC824A;
    --color-gold: #FF9248;
    --color-white: #FFFFFF;
    --color-border: #C1AD8F;
    --shadow-soft: 0 10px 30px rgba(51, 51, 51, 0.12);
    --radius-md: 14px;
    --radius-lg: 22px;
}

* {
    box-sizing: border-box;
}

html {
    /* iOS Safari silently inflates font-size on text blocks it judges "too
       small to read comfortably" — the heuristic weighs each element's own
       text density/width, so a wide, text-dense table cell (e.g. Articoli
       with several items) gets boosted more than a short one (e.g. "Ritiro")
       sitting right next to it in the very same row. That mismatch is what
       makes one column look bigger even though every cell shares the exact
       same declared font-size. Chromium has no such heuristic, which is why
       this never shows up when checked outside an actual iPhone. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-cream);
    color: var(--color-brown-900);
    font-family: 'Montserrat', system-ui, sans-serif;
    scroll-behavior: smooth;
    /* Wide content (the admin table on mobile, etc.) must scroll inside its
       own overflow-x:auto container — this is the hard backstop so a stray
       wide element can never drag the whole page sideways and take the
       sticky header along with it. */
    overflow-x: clip;
}

/* Lock page scroll behind any full-screen overlay (bottom sheets, confirm
   modals) so scrolling/swiping over the backdrop moves only the overlay's
   own content, not the page underneath. */
body:has(.modal-overlay),
body:has(.sheet-overlay) {
    overflow: hidden;
}

h1, h2, h3, h4, .display {
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.5em;
    color: var(--color-brown-900);
    text-wrap: balance;
}

/* Darumadrop One is a single-weight novelty display face — reserved for the
   biggest, most prominent headline (the hero) where its chunky style reads
   as playful rather than clumsy. */
h1, .display {
    font-family: 'Darumadrop One', Georgia, serif;
    font-weight: 400;
}

/* Gochu (the bakery display font) carries the secondary section titles. */
h2 {
    font-family: 'Gochu', 'Darumadrop One', Georgia, serif;
}

/* h3/h4 stay in Montserrat: at product-card and admin-label sizes, a second
   decorative face reads as clutter rather than character. */
h3, h4 {
    font-family: 'Montserrat', system-ui, sans-serif;
}

/* Prevents the ~300ms double-tap-to-zoom delay on iOS/Android before a tap
   registers as a click, and sets an intentional tap-highlight color instead
   of the browser's default translucent grey flash. */
a, button, .btn, input, select, textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 135, 54, 0.18);
}

a {
    color: var(--color-terracotta-dark);
    text-decoration: none;
}

a:hover {
    color: var(--color-terracotta);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: 999px;
    padding: 0.75rem 1.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
    background: var(--color-terracotta);
    color: var(--color-white);
    box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
    background: var(--color-terracotta-dark);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--color-brown-700);
    border: 1.5px solid var(--color-brown-500);
}

.btn-outline:hover {
    background: var(--color-cream-2);
}

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

.btn-sm {
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-terracotta-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.link-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: none;
}

.card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

/* Quantity stepper buttons — shared by the cart page and the product
   detail page's "Aggiungi al carrello" quantity picker. */
.qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-cream-2);
    color: var(--color-brown-900);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.qty-btn:hover {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: var(--color-white);
}

.qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--color-cream-2);
    border-color: var(--color-border);
    color: var(--color-brown-900);
}

/* Cart line rows — shared by the cart page and the order-confirmation
   page's item editor. */
.cart-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 2rem 0;
}

.cart-line {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.25rem;
}

.cart-line__info {
    display: flex;
    flex-direction: column;
}

.cart-line__name {
    font-weight: 600;
}

.cart-line__price {
    font-size: 0.8rem;
    color: var(--color-brown-500);
}

.cart-line__qty {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cart-line__total {
    font-weight: 700;
    min-width: 5rem;
    text-align: right;
}

.remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    opacity: 0.6;
}

.remove-btn:hover {
    opacity: 1;
}

@media (max-width: 560px) {
    .cart-line {
        grid-template-columns: 1fr auto auto;
        gap: 0.6rem;
        padding: 0.85rem 1rem;
    }

    .cart-line__name {
        font-size: 0.92rem;
    }
}

input, textarea, select {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    border: 1.5px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-brown-900);
}

textarea {
    resize: none;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-terracotta);
}

select:hover, input[type="date"]:hover {
    border-color: var(--color-brown-500);
}

/* Browsers give <select> and <input type=date> their own unstyled native
   chrome (dropdown arrow / calendar icon) that the rules above can't touch
   — this replaces the arrow with a themed one and recolors the calendar
   icon so both actually look like part of the site instead of bare OS UI. */
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23CC824A' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 11px 7px;
}

input[type="date"] {
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(37%) sepia(74%) saturate(1088%) hue-rotate(346deg) brightness(91%) contrast(91%);
}

label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-brown-700);
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-unavailable {
    background: #efe0d0;
    color: #8a5a2f;
}

.badge-status {
    background: var(--color-cream-2);
    color: var(--color-brown-700);
}

.content {
    padding-top: 0;
}

h1:focus {
    outline: none;
}

.validation-message {
    color: #b3261e;
    font-size: 0.85rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.25rem;
    color: white;
    border-radius: var(--radius-md);
}

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

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.25s;
}

/* Admin area shared styles (used across Components/Pages/Admin/*) */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.panel {
    padding: 1.5rem;
    /* Grid items default to min-width:auto, which refuses to shrink below
       the widest thing inside them — a nowrap table's intrinsic content
       width. Without this, the table's own overflow-x:auto never gets a
       chance to clip/scroll: the panel just grows past the viewport first,
       and body's overflow-x:hidden then crops it invisibly instead of
       letting it scroll. */
    min-width: 0;
}

.panel h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.date-picker {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0 1.5rem;
}

.muted {
    color: var(--color-brown-500);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
}

.admin-table th {
    text-align: left;
    padding: 0.5rem 0.6rem;
    color: var(--color-brown-500);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--color-cream-2);
}

.admin-table td {
    padding: 0.6rem;
    border-bottom: 1px solid var(--color-cream-2);
}

.admin-table select {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

.admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-checkbox {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--color-brown-700);
    cursor: pointer;
}

.admin-checkbox input {
    width: auto;
}

.admin-form-card {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Shared by every form across the site (checkout, contact, login, admin
   edit forms, order self-edit) — previously each page redeclared its own
   copy in a scoped .razor.css, and pages with none (Login, Categorie,
   Prodotti) got no spacing at all. */
.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.4rem;
}

.form-row input,
.form-row textarea,
.form-row select {
    width: 100%;
}

.form-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Each column inside a split row needs its own label-above-input stack —
   .form-row's flex-column only applies to the split row itself, not to
   the columns nested inside it. */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-hint {
    margin: 0.5rem 0 1.4rem;
    font-size: 0.8rem;
    color: var(--color-brown-500);
}

.f-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .form-row--split {
        grid-template-columns: 1fr;
    }
}

.admin-image-preview {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    display: block;
}

.admin-image-error {
    color: #b3261e;
    font-size: 0.85rem;
    margin: 0.4rem 0 0;
}

.admin-table-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--color-brown-900);
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.7;
    padding: 0.2rem 0.4rem;
}

.icon-btn:hover {
    opacity: 1;
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.4rem;
}

.checkbox-label input {
    width: auto;
}

.login-page {
    display: flex;
    justify-content: center;
    padding: 4rem 1.25rem;
}

.login-card {
    padding: 2.5rem;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-error {
    color: #b3261e;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Shared bottom sheet — any "pick from a list" or "edit this" panel that
   wants more room than the centered .modal-card, or is more natural to
   reach with a thumb on mobile, opens as this instead. */
.sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(51, 51, 51, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.sheet {
    background: var(--color-white);
    width: 100%;
    max-width: 480px;
    border-radius: 22px 22px 0 0;
    padding: 1.5rem 1.5rem 2rem;
    max-height: 85vh;
    overflow-y: auto;
    animation: sheet-up 0.22s ease;
}

/* Edit-style sheets (many stacked fields) cap lower than the default —
   left at half the screen so the sheet reads as a panel, not a takeover,
   with its own scroll for whatever doesn't fit. */
.sheet--half {
    max-height: 50vh;
}

@keyframes sheet-up {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.sheet-head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--color-brown-900);
}

.sheet-close {
    position: relative;
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    cursor: pointer;
    flex-shrink: 0;
}

.sheet-close::before,
.sheet-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-brown-700);
}

.sheet-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.sheet-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.sheet-close:hover::before,
.sheet-close:hover::after {
    background: var(--color-brown-900);
}

/* Shared confirm-before-you-destroy-something modal — any cancel, clear,
   or delete action in the app uses this same overlay/card/actions markup. */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(51, 51, 51, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.modal-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    text-align: left;
}

.modal-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    color: var(--color-brown-900);
}

.modal-card p {
    margin: 0 0 1.5rem;
    font-size: 0.92rem;
    color: var(--color-brown-700);
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
}

/* Both buttons share the row equally instead of each claiming its natural
   (content-based) width — on a narrow phone that natural width is often
   enough to make the pair wrap onto two full-width stacked rows. flex: 1
   with min-width: 0 lets them shrink and wrap their own text internally
   instead, so "No" and "Yes" always stay side by side. */
.modal-actions .btn {
    flex: 1 1 0;
    min-width: 0;
}

.resource-cards {
    display: none;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
}

.resource-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 0.7rem 0.85rem;
}

/* Categories have no table fallback — dragging to reorder doesn't
   translate to a table row, so the card list is the only view at every
   width, same reasoning as .order-cards--admin. Single column (not a
   grid): drop targets above/below a dragged card need to stay unambiguous,
   which a multi-column layout would muddy. */
.resource-cards--admin {
    display: flex !important;
    flex-direction: column;
}

.reorder-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex-shrink: 0;
}

.reorder-buttons .icon-btn {
    font-size: 1rem;
    width: 34px;
    height: 34px;
    line-height: 1;
    background: var(--color-cream-2);
    border-radius: 8px;
}

.reorder-buttons .icon-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.form-row input.emoji-input {
    width: 4rem;
    font-size: 1.4rem;
    text-align: center;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.resource-group-title {
    margin: 1.5rem 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brown-500);
}

.resource-group-title:first-of-type {
    margin-top: 0;
}

.admin-table__group-row td {
    padding-top: 1.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brown-500);
    border-bottom: none;
}

.admin-table__group-row:first-child td {
    padding-top: 0.6rem;
}

@keyframes flash-highlight {
    0%, 100% { box-shadow: var(--shadow-soft); }
    30% { box-shadow: 0 0 0 3px var(--color-terracotta); }
}

.flash-highlight {
    animation: flash-highlight 1.5s ease;
}

.resource-card__thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 146, 72, 0.28), transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(255, 135, 54, 0.18), transparent 55%),
        var(--color-cream-2);
    overflow: hidden;
}

.resource-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resource-card__body {
    flex: 1;
    min-width: 0;
}

.resource-card__title {
    font-weight: 700;
    font-size: 0.92rem;
}

.resource-card__meta {
    font-size: 0.78rem;
    color: var(--color-brown-500);
    margin-top: 0.15rem;
}

.resource-card__actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.2rem;
}

.order-cards {
    display: none;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
}

.order-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 0.85rem 1rem;
}

.order-card__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.35rem;
    gap: 0.5rem;
}

.order-card__id {
    font-size: 0.78rem;
    color: var(--color-brown-500);
    font-weight: 700;
}

.order-card__slot {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-terracotta-dark);
}

.order-card__name {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.order-card__meta {
    font-size: 0.78rem;
    color: var(--color-brown-500);
    margin-bottom: 0.5rem;
}

.order-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.order-card__checklist {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.5rem 0 0.75rem;
    padding: 0.6rem 0.7rem;
    background: var(--color-cream);
    border-radius: 10px;
}

.order-card__check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.order-card__check input {
    width: auto;
    flex-shrink: 0;
}

.order-card__check input:disabled {
    cursor: not-allowed;
}

/* Ricevuto: the checklist is shown but greyed out and non-interactive
   until an explicit "Conferma" — this is the "locked until confirmed"
   behavior, applied to the checklist rather than hiding it outright so the
   admin can still see what's in the order before confirming. */
.order-card--locked .order-card__checklist {
    opacity: 0.5;
}

.order-card__actions-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Unlike the plain .order-cards (Dashboard's read-only daily glance, mobile
   only), the admin order list has no table fallback any more — the
   checklist/action buttons don't translate to a table row, so cards are
   the only layout at every width. Grid instead of the single-column flex
   above so desktop doesn't waste the extra space on one narrow column. */
.order-cards--admin {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: start;
}

@media (max-width: 860px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
        scrollbar-color: var(--color-terracotta) var(--color-cream-2);
    }

    .admin-table::-webkit-scrollbar {
        height: 10px;
    }

    .admin-table::-webkit-scrollbar-track {
        background: var(--color-cream-2);
        border-radius: 999px;
    }

    .admin-table::-webkit-scrollbar-thumb {
        background: var(--color-terracotta);
        border-radius: 999px;
    }

    .admin-table::-webkit-scrollbar-thumb:hover {
        background: var(--color-terracotta-dark);
    }

    /* Tables with a card-list alternative (order lists, products,
       categories) hide the scrolling table entirely on mobile instead —
       .order-cards/.resource-cards below take over so nothing needs
       sideways scrolling at all. */
    .admin-table--has-cards {
        display: none;
    }

    .order-cards {
        display: flex;
    }

    .resource-cards {
        display: flex;
    }
}

/* Visible by default: JS progressively adds .reveal-hidden only to
   elements that are off-screen when it runs, then removes it as the
   user scrolls them into view. If JS never runs, content stays visible. */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.reveal-hidden {
    opacity: 0;
    transform: translateY(28px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---- Coming soon / surprise box ----------------------------------------
   Shared by the public pages, so these live here rather than in one page's
   scoped stylesheet. */

.badge-soon {
    background: #efe0d0;
    color: #8a5a2f;
    text-transform: none;
}

.badge-box {
    background: var(--color-cream-2);
    color: var(--color-brown-900);
}

.coming-soon-box {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-cream-2) 45%, var(--color-white));
    padding: 1.5rem 1.75rem;
    margin: 1.75rem 0;
}

.coming-soon-box__badge {
    display: inline-block;
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-terracotta-dark);
}

.coming-soon-box h2 {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
}

.coming-soon-box p {
    margin: 0;
    color: var(--color-brown-700);
}

.admin-success {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    background: #e8f2e2;
    color: #3c6130;
    font-weight: 500;
}

.weekday-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0.4rem 0;
}

.qty-input {
    width: 5rem;
}

.admin-table__actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Per-day pickup window in the admin day grid */
.day-window {
    white-space: nowrap;
}

.day-window input[type="time"] {
    width: 6.5rem;
    display: inline-block;
}

.day-window span {
    margin: 0 0.25rem;
}

.day-window .muted {
    display: inline-block;
    margin-top: 0.25rem;
}

/* ---- Admin: box schedule ------------------------------------------------
   Same idea as the Too Good To Go program screen: a row per weekday with a
   pickup toggle and its own window, then a separate list for one-off dates. */

.admin-page__intro {
    max-width: 60rem;
    margin: 0 0 1.5rem;
}

.admin-section {
    margin-top: 1.75rem;
    padding: 1.5rem 1.75rem;
}

.admin-section > h2 {
    margin: 0 0 0.35rem;
}

.week-list {
    margin: 1.25rem 0 0.5rem;
}

.week-row {
    display: grid;
    grid-template-columns: 9rem 10rem 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 1.1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.week-row:first-child {
    border-top: 0;
}

.week-row--closed {
    opacity: 0.65;
}

.week-row__day {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-brown-900);
}

.week-row__toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.week-row__state {
    font-size: 0.85rem;
    color: var(--color-brown-700);
}

.week-row__times {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.week-row__inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.week-row__inputs input[type="time"] {
    width: 7rem;
}

.week-row__note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-brown-500);
}

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.switch__track {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-border) 80%, #fff);
    border-radius: 999px;
    transition: background 0.15s ease;
    pointer-events: none;
}

.switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.switch input:checked + .switch__track {
    background: var(--color-terracotta-dark);
}

.switch input:checked + .switch__track::after {
    transform: translateX(20px);
}

.day-list {
    margin: 1rem 0 0;
}

.day-row {
    display: grid;
    grid-template-columns: 8rem 7rem 13rem 1fr auto;
    gap: 1.25rem;
    align-items: center;
    padding: 0.9rem 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.day-row:first-child {
    border-top: 0;
}

.day-row__date {
    font-weight: 600;
    text-transform: capitalize;
}

.day-row__times {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.day-row__times input[type="time"] {
    width: 6.2rem;
}

.day-row__boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
}

.day-row__box {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .week-row,
    .day-row {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
}

.week-days-ahead {
    max-width: 16rem;
    margin: 1rem 0 0.5rem;
}

/* ---- Admin: month calendar with per-day overrides ---------------------- */

.cal-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.cal-nav strong {
    text-transform: capitalize;
    min-width: 9rem;
    text-align: center;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
    max-width: 34rem;
}

.cal-head {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brown-500);
    text-align: center;
    padding-bottom: 0.35rem;
}

.cal-day {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
    border-radius: 12px;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.cal-day:hover {
    border-color: var(--color-terracotta-dark);
}

.cal-day--empty {
    border: 0;
    background: transparent;
    cursor: default;
}

.cal-day__num {
    font-weight: 600;
    font-size: 0.95rem;
}

.cal-day__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9dbf92;
}

.cal-day--closed .cal-day__dot {
    background: #c76a5d;
}

.cal-day--special {
    border-color: var(--color-terracotta-dark);
    box-shadow: inset 0 0 0 1px var(--color-terracotta-dark);
}

.cal-day--special .cal-day__dot {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-terracotta-dark);
}

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--color-brown-700);
}

.cal-legend li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cal-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cal-legend__dot--open { background: #9dbf92; }
.cal-legend__dot--closed { background: #c76a5d; }

.cal-legend__dot--special {
    background: #9dbf92;
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-terracotta-dark);
}

.day-editor {
    width: 100%;
    max-width: 34rem;
    max-height: 85vh;
    overflow: auto;
}

/* Sheets are built for thumbs: on a phone they slide up from the bottom and
   stop at half the screen. On a desktop that reads as a clipped panel stuck
   to the bottom edge (long forms like "Modifica prodotto" vanish below the
   fold), so from tablet width up they become a normal centered dialog with
   the whole viewport available. */
@media (min-width: 900px) {
    .sheet-overlay {
        align-items: center;
        padding: 2rem;
    }

    .sheet,
    .sheet--half {
        max-width: 640px;
        max-height: min(85vh, 56rem);
        border-radius: var(--radius-lg);
        padding: 1.75rem 2rem 2rem;
        box-shadow: 0 24px 60px rgba(51, 51, 51, 0.28);
    }
}

/* ---- Admin: box list and composition editor --------------------------- */

.box-admin-list {
    margin: 1rem 0 0.5rem;
}

.box-admin-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.5rem;
    padding: 0.9rem 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.box-admin-row:first-child {
    border-top: 0;
}

.box-admin-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.box-admin-row__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.box-admin-row__stock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.box-admin-row__label {
    font-weight: 600;
    color: var(--color-brown-700);
}

.box-admin-row__qty {
    width: 4.5rem;
}

.box-admin-row__meta {
    font-size: 0.82rem;
    color: var(--color-brown-500);
}

@media (max-width: 1100px) {
    .box-admin-row {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .box-admin-row__actions,
    .box-admin-row__stock {
        flex-wrap: wrap;
    }
}

.box-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5rem auto;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.box-line__product {
    width: 100%;
    min-width: 0;
}

.box-line__qty {
    width: 100%;
}

.day-editor__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.day-editor__head h3 {
    margin: 0 0 0.5rem;
}

.day-editor__times {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.day-editor__times input[type="time"] {
    width: 7rem;
}

/* "In vendita" sits next to buttons, not in a form: the shared .checkbox-label
   margin-top (meant for stacked fields) pushed it out of line. */
.box-admin-row__actions .checkbox-label {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1;
    font-size: 0.9rem;
}

.box-admin-row__actions .checkbox-label input[type="checkbox"] {
    margin: 0;
    width: 1.05rem;
    height: 1.05rem;
}

/* Inside the box editor the checkbox is a field of its own, not a stacked form
   field: the shared 1.4rem gap made it float mid-row. */
.box-editor .checkbox-label {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1;
}

.box-editor .checkbox-label input[type="checkbox"] {
    margin: 0;
    width: 1.05rem;
    height: 1.05rem;
}

/* ---- Admin: box dashboard -------------------------------------------- */

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
}

.dash-kpi {
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dash-kpi__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brown-500);
}

.dash-kpi__value {
    font-size: 1.7rem;
    line-height: 1.1;
}

/* ---- Public menu: boxes are their own thing, before the shop -------- */

.menu-category--boxes {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}

.menu-header--products {
    margin-top: 0.5rem;
}

.box-contents {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.45rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 0.82rem;
    color: var(--color-brown-700);
}

.box-contents__label {
    color: var(--color-brown-500);
}

.box-contents a {
    color: var(--color-terracotta-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Home: boxes before the categories. Header on one line — title, pickup chip,
   "vedi tutte" — so the window is the first thing customers read. */
.section-boxes {
    padding: 2rem 1.25rem 0.5rem;
}

.section-boxes__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.section-boxes__titles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.section-boxes__overline {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracotta-dark);
}

.section-boxes__head h2 {
    margin: 0;
}

@media (max-width: 640px) {
    .section-boxes__head {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .section-boxes__titles {
        align-items: center;
    }
}

.box-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    color: var(--color-brown-700);
    white-space: nowrap;
}

.box-chip strong {
    color: var(--color-brown-900);
}

.box-chip__hint {
    color: var(--color-brown-500);
}

.section-boxes__all {
    color: var(--color-terracotta-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.section-boxes .product-grid {
    margin-top: 1.25rem;
}

/* Titolo di stacco tra la dashboard di sempre e il blocco box. */
.dashboard-section-title {
    margin: 2rem 0 1rem;
    font-size: 1.35rem;
}

/* ==========================================================================
   Finestre sovraimpressione: niente teste tagliate, X sempre raggiungibile
   --------------------------------------------------------------------------
   Tre problemi con una causa sola: il contenuto scorreva con la finestra
   invece che dentro di essa.

   1. Un dialog piu' alto dello schermo veniva centrato con flex: la parte
      sopra finiva fuori dallo schermo e non c'era modo di raggiungerla,
      nemmeno scorrendo.
   2. La X di chiusura scorreva via insieme al titolo, quindi chi era a meta'
      form non aveva modo di uscirne se non sbagliando.
   3. "Scegli file" restava il bottone grigio del browser, fuori posto in un
      form curato.
   ========================================================================== */

/* Da "sempre centrato" a "centrato se ci sta, altrimenti parte dall'alto":
   con align-items:center un figlio piu' alto del contenitore perde la testa. */
.modal-overlay {
    align-items: flex-start;
    overflow-y: auto;
}

.modal-card {
    /* i margini automatici centrano quando c'e' spazio e valgono zero quando
       non ce n'e': cosi' il dialog parte dall'alto e si scorre per intero */
    margin: auto;
    max-height: calc(100vh - 2.5rem);
    max-height: calc(100dvh - 2.5rem);
    overflow-y: auto;
}

.sheet-overlay {
    overflow-y: auto;
}

/* le distanze del padding servono anche alla testata agganciata */
.sheet {
    --sheet-pad-y: 1.5rem;
    --sheet-pad-x: 1.5rem;
}

/* La testata resta in cima mentre il resto scorre: la X e' sempre a portata
   di mano, dal primo campo all'ultimo. I margini negativi la portano a filo
   del bordo del pannello, superando il padding. */
.sheet-head {
    position: sticky;
    top: calc(-1 * var(--sheet-pad-y));
    z-index: 3;
    margin: calc(-1 * var(--sheet-pad-y)) calc(-1 * var(--sheet-pad-x)) 1rem;
    padding: var(--sheet-pad-y) var(--sheet-pad-x) 0.85rem;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-cream-2);
}

/* stessa cosa per l'editor del giorno, che vive dentro .modal-card */
.day-editor__head {
    position: sticky;
    top: -2rem;
    z-index: 3;
    margin: -2rem -2rem 1rem;
    padding: 2rem 2rem 0.85rem;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-cream-2);
}

@media (min-width: 900px) {
    /* da qui gli sheet diventano dialog centrati con un padding diverso */
    .sheet,
    .sheet--half {
        --sheet-pad-y: 1.75rem;
        --sheet-pad-x: 2rem;
    }
}

/* ---- il selettore di file ---- */

.form-row input[type="file"] {
    cursor: pointer;
    padding: 0.5rem;
    font-size: 0.88rem;
    color: var(--color-brown-700);
    background: var(--color-cream);
    border-style: dashed;
}

.form-row input[type="file"]::file-selector-button {
    margin-right: 0.7rem;
    padding: 0.45rem 0.85rem;
    border: none;
    border-radius: 8px;
    background: var(--color-terracotta);
    color: var(--color-white);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.form-row input[type="file"]::file-selector-button:hover {
    background: var(--color-terracotta-dark);
}

/* Icona cestino vettoriale. L'emoji usata prima veniva resa da Windows come
   glifo monocromatico, e cambia forma da un sistema all'altro: qui e' un SVG
   mascherato, quindi prende il colore del testo e non dipende dai font. */
.icon-trash {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Form a pannello: testata e piede fissi, scorre solo il corpo
   --------------------------------------------------------------------------
   Prima scorreva tutto il pannello, quindi la barra di scorrimento correva
   lungo l'intero popup e i pulsanti Salva/Annulla finivano sotto il bordo:
   per uscire bisognava scorrere fino in fondo. Ora il pannello e' una colonna
   di tre pezzi e la barra vive solo nel pezzo centrale.
   ========================================================================== */

.sheet--form {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    max-height: min(85vh, 46rem);
}

.sheet--form > .sheet-head {
    flex: 0 0 auto;
    /* non serve piu' agganciarla: non scorre */
    position: static;
    margin: 0;
    padding: 1.1rem 1.5rem 0.9rem;
    border-bottom: 1px solid var(--color-cream-2);
}

/* Prodotti e Categorie mettono i campi dentro un EditForm: e' il form
   l'elemento che deve fare da colonna, non il pannello. */
.sheet--form > form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sheet--form .sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: #d9c9b2 transparent;
}

/* barra discreta, e solo dove scorre davvero */
.sheet--form .sheet-body::-webkit-scrollbar {
    width: 8px;
}

.sheet--form .sheet-body::-webkit-scrollbar-track {
    background: transparent;
}

.sheet--form .sheet-body::-webkit-scrollbar-thumb {
    background: #ddd0bb;
    border-radius: 999px;
    border: 2px solid var(--color-white);
}

.sheet--form .sheet-body::-webkit-scrollbar-thumb:hover {
    background: #cbb99c;
}

/* i pulsanti restano a vista: si esce senza scorrere */
.sheet--form .f-actions {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.9rem 1.5rem;
    border-top: 1px solid var(--color-cream-2);
    background: var(--color-white);
    justify-content: flex-end;
}

@media (min-width: 900px) {
    .sheet--form > .sheet-head {
        padding: 1.25rem 2rem 1rem;
    }

    .sheet--form .sheet-body {
        padding: 1.5rem 2rem;
    }

    .sheet--form .f-actions {
        padding: 1rem 2rem;
    }
}

/* L'editor del giorno e' un .modal-card, non uno .sheet: stessa struttura
   a tre parti, cosi' i pulsanti restano a vista come nelle altre form. */
.sheet--form > .day-editor__head {
    flex: 0 0 auto;
    position: static;
    margin: 0;
    padding: 1.1rem 1.5rem 0.9rem;
    border-bottom: 1px solid var(--color-cream-2);
}

.sheet--form > .modal-actions {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.9rem 1.5rem;
    border-top: 1px solid var(--color-cream-2);
    background: var(--color-white);
}

@media (min-width: 900px) {
    .sheet--form > .day-editor__head { padding: 1.25rem 2rem 1rem; }
    .sheet--form > .modal-actions { padding: 1rem 2rem; }
}

/* ---- il richiamo al ritiro accanto al titolo delle box ---- */
.box-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: 0.82rem;
    color: var(--color-brown-700);
    white-space: nowrap;
}

.box-chip__label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9a8d7c;
}

.box-chip__day {
    background: var(--color-terracotta);
    color: var(--color-white);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 0.2rem 0.45rem;
}

.box-chip__time {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-brown-900);
}