/* FILE: /v2/delivery/style.css
   COSA FA: Stili UI delivery (cards, griglie prodotti, barra categorie, carrello sticky, drawer, modale prodotto).
   NOTA: Qui NON deve esserci PHP. Lo sfondo dinamico della hero viene gestito inline nella pagina.
*/

:root{
    --radius: 18px;
    --shadow-lg: 0 10px 34px rgba(0,0,0,.10);
    --shadow-md: 0 8px 24px rgba(0,0,0,.08);
    --brand: #0ea5e9;
    --brand-2: #6366f1;
    --ink-900:#0f172a;
    --ink-600:#475569;
    --bg:#f5f7fb;
    --card:#ffffff;
    --line:#e8eef7;
}

html{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    scroll-behavior:smooth;
}
body{ background:var(--bg); color:var(--ink-900); }

.navbar{ box-shadow:0 6px 24px rgba(0,0,0,.06); }

/* ✅ FIX: riduce comportamenti “zoom double-tap” */
*{
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* card bootstrap “base” */
.card{ border-radius:var(--radius); box-shadow:var(--shadow-md); border:0; }

/* utility */
.muted{ color:#7b8794; font-size:.95rem; }

/* ---- landing/choice (se ti serve anche in questa pagina) ---- */
.choice{
    display:flex; align-items:center; gap:14px;
    padding:16px;
    border:1px solid #eef1f7;
    border-radius: var(--radius);
    background:#fff;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    text-decoration:none !important;
    color:inherit;
}
.choice:hover{
    transform: translateY(-1px);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    border-color:#e1e6ef;
}
.ic{
    width:56px; height:56px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(99,102,241,.18));
}
.ic .material-icons{ font-size:30px; color: #2563eb; }
.ttl{ font-weight:900; letter-spacing:.2px; margin:0; }
.sub{ color:#94a3b8; margin:2px 0 0; } /* fix: var(--ink-300) non esisteva */

.badge-soft{
    display:inline-flex; align-items:center; gap:6px;
    padding:.25rem .55rem;
    border-radius:999px;
    background:#f1f5f9;
    color:#334155;
    font-size:.82rem;
    font-weight:700;
}
.badge-soft .material-icons{ font-size:16px; }

/* -------------------------
   HERO (solo stile statico)
   Sfondo dinamico gestito inline in pagina con background-image
-------------------------- */
.hero{
    background-size:cover;
    background-position:center;
    border-radius: var(--radius);
    min-height: 220px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.hero .inner{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:#fff; text-align:center; padding:24px;
}
.hero .center-brand{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero .logo-lg{
    width:130px; height:130px; border-radius:50%;
    background:#ffffff20;
    display:flex; align-items:center; justify-content:center;
    border:2px solid rgba(255,255,255,.45);
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.hero .logo-lg img{ max-width:85%; max-height:85%; object-fit: contain; display:block; }
.hero .logo-lg .material-icons{ font-size:54px; color:#fff; }
.hero .welcome{ font-size:1.05rem; opacity:.95; }

/* title */
.title{
    display:flex; align-items:center; gap:10px;
    font-weight:900; letter-spacing:.2px;
}
.title .material-icons{ font-size:26px; color:var(--brand); }

.cardx{
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 0;
}

/* barra categorie */
.catbar-wrap{
    position: sticky;
    top: 62px;
    z-index: 50;
    margin-top: 10px;
    padding-top: 10px;
    background: linear-gradient(to bottom, rgba(245,247,251,.98), rgba(245,247,251,.85));
    backdrop-filter: blur(10px);
}
.catbar{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding: 10px 6px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.catbar::-webkit-scrollbar{ display:none; }

.chip{
    border:1px solid var(--line);
    background:#fff;
    color: var(--ink-900);
    border-radius: 999px;
    padding: 10px 14px;
    font-weight:800;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(2,8,23,.05);
    transition: .18s ease;
    cursor: pointer;
    user-select:none;
}
.chip.active{
    border-color: transparent;
    color:#fff;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow: 0 10px 22px rgba(14,165,233,.25);
    transform: translateY(-1px);
}

.cat-section{ scroll-margin-top: 150px; margin-top: 18px; }
.cat-head{ display:flex; align-items:flex-end; justify-content:space-between; margin: 10px 2px 10px; }
.cat-name{ font-weight: 950; letter-spacing:.2px; font-size: 1.15rem; margin:0; }
.cat-desc{ margin:0; color: var(--ink-600); font-size: .92rem; }

/* ✅ GRID */
.grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
    align-items: stretch;
}
@media (max-width: 575.98px){
    .grid{ grid-template-columns: 1fr; }
    .p-img{ height: 168px; }
    .p-desc{ -webkit-line-clamp: 3; min-height: 52px; }
    .p-ing{ -webkit-line-clamp: 3; }
}
@media (min-width: 768px){ .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px){ .grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.p-card{
    background:#fff;
    border-radius: 18px;
    border: 1px solid var(--line);
    box-shadow: 0 10px 22px rgba(2,8,23,.05);
    overflow:hidden;
    transition: .18s ease;
    cursor: pointer;
    display:flex;
    flex-direction: column;
    height:100%;
}
.p-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(2,8,23,.08); }

.p-card.in-cart{
    border-color: rgba(14,165,233,.75);
    box-shadow: 0 14px 30px rgba(14,165,233,.12);
}

.p-img{
    width:100%;
    height: 138px;
    background: linear-gradient(120deg, rgba(14,165,233,.18), rgba(99,102,241,.18));
    position: relative;
    overflow:hidden;
}
.p-img img{ width:100%; height:100%; object-fit:cover; display:block; }

.p-mark{
    position:absolute;
    top:10px;
    right:10px;
    z-index:3;
    display:none;
    align-items:center;
    gap:6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    border:1px solid rgba(14,165,233,.25);
    box-shadow: 0 10px 20px rgba(2,8,23,.08);
    font-weight:950;
    color: var(--ink-900);
    backdrop-filter: blur(8px);
}
.p-mark .material-icons{ font-size:18px; color: var(--brand); }
.p-mark .q{ min-width:16px; text-align:center; }

.p-body{ padding: 12px; flex: 1 1 auto; }
.p-name{ font-weight: 900; font-size: 1.02rem; margin:0 0 4px 0; line-height:1.12; }
.p-desc{
    margin:0;
    color: var(--ink-600);
    font-size: .88rem;
    line-height:1.25;
    min-height: 34px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:hidden;
}
.p-ing{
    margin-top: 6px;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:hidden;
}

.p-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 10px 12px 12px;
    gap:10px;
    cursor: default;
    margin-top:auto;
}
.price{ font-weight: 950; font-size: 1.02rem; white-space: nowrap; }

.btn-add{
    border-radius: 999px;
    border: 0;
    padding: 9px 12px;
    color:#fff;
    font-weight: 900;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow: 0 10px 20px rgba(14,165,233,.22);
}
.qty-wrap{ display:flex; align-items:center; gap:8px; }
.btn-qty{
    width:36px;height:36px;
    border-radius: 999px;
    border:1px solid var(--line);
    background:#fff;
    font-weight: 900;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 18px rgba(2,8,23,.05);
}
.qty{ min-width: 18px; text-align:center; font-weight: 950; }

/* cartbar */
.cartbar{
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 100;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(2,8,23,.10);
    display:none;
}
.cartbar-inner{
    max-width: 1100px;
    margin: 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
}
.cart-mini{ display:flex; flex-direction:column; line-height:1.1; }
.cart-mini .t1{ font-weight: 950; }
.cart-mini .t2{ color: var(--ink-600); font-size:.92rem; }

.btn-checkout{
    border-radius: 16px;
    padding: 12px 14px;
    border:0;
    color:#fff;
    font-weight: 950;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow: 0 14px 26px rgba(14,165,233,.25);
    display:flex; align-items:center; gap:8px;
    white-space:nowrap;
}

/* overpage (Safari bounce) */
.bottom-cover{
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    height: calc(30px + env(safe-area-inset-bottom));
    background: #ffffff;
    z-index: 99;
    pointer-events: none;
}

/* drawer */
.drawer-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:120;
    background: rgba(2,8,23,.55);
}
.drawer{
    position:fixed;
    left:0; right:0;
    bottom: -110%;
    z-index:121;
    background:#fff;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    box-shadow: 0 -20px 50px rgba(2,8,23,.30);
    transition: .22s ease;
    max-height: 88vh;
    overflow:auto;
}
.drawer.open{ bottom: 0; }
.drawer-head{
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
    position: sticky;
    top:0;
    background:#fff;
    z-index: 5;
}
.drawer-title{ font-weight: 950; display:flex; align-items:center; gap:8px; }
.drawer-close{
    border:1px solid var(--line);
    background:#fff;
    border-radius: 999px;
    width: 40px; height: 40px;
    display:inline-flex; align-items:center; justify-content:center;
}
.line{ height: 6px; width: 54px; background: #e7eef8; border-radius: 999px; margin: 10px auto 0; }

.sum-card{ border:1px solid var(--line); border-radius: 16px; padding: 12px; background: #fafcff; }
.sum-row{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:10px;
    padding: 6px 0;
    border-bottom: 1px dashed #e8eef7;
}
.sum-row:last-child{ border-bottom:0; }
.sum-row .l{ color: var(--ink-600); }
.sum-row .r{ font-weight: 900; text-align:right; }

.sum-item{ display:flex; gap:10px; align-items:flex-start; }
.sum-thumb{
    width: 54px; height: 54px;
    border-radius: 14px;
    overflow:hidden;
    flex: 0 0 54px;
    background: linear-gradient(120deg, rgba(14,165,233,.18), rgba(99,102,241,.18));
    border:1px solid var(--line);
    box-shadow: 0 10px 18px rgba(2,8,23,.05);
}
.sum-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sum-main{ flex:1 1 auto; min-width: 0; }

.btn-ghost{
    border-radius: 14px;
    border:1px solid var(--line);
    background:#fff;
    font-weight: 900;
    padding: 10px 12px;
}

.stepper{ display:flex; justify-content:center; margin: 10px 0 16px; }
.stepper .dot{ width:10px; height:10px; border-radius:50%; background:#d7dde8; margin:0 6px; transition:.25s; }
.stepper .dot.active{ width:24px; border-radius:8px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); }
.step{ display:none; }
.step.active{ display:block; }
.grid-tight{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }

.btn-pill{ border-radius:999px; }
.btn-date{ border-radius:999px; white-space:normal; text-align:center; min-height:64px; }
.btn-date.two-line .day{ display:block; line-height:1.05; font-weight:900; }
.btn-date.two-line .date{ display:block; line-height:1.05; opacity:.9; }
#date-buttons .btn{ border-color:#e1e6ef; }
#date-buttons .btn.btn-primary{ border-color:transparent; box-shadow:0 8px 16px rgba(14,165,233,.25); }
#date-buttons .btn.btn-primary .day,
#date-buttons .btn.btn-primary .date{ color:#fff !important; }

.required:after { content:" *"; color:#ef4444; }

.pb-cart{ padding-bottom: calc(140px + env(safe-area-inset-bottom)); }

/* geobox */
.geo-box{
    margin-top: 10px;
    border:1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(2,8,23,.04);
    padding: 10px 12px;
    display:flex;
    align-items:flex-start;
    gap:10px;
}
.geo-ico{
    width:40px;height:40px;
    border-radius: 14px;
    background: rgba(14,165,233,.10);
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(14,165,233,.18);
    flex:0 0 40px;
}
.geo-ico .material-icons{ color: var(--brand); }
.geo-t1{ font-weight:950; margin:0; }
.geo-t2{ color: var(--ink-600); margin:0; font-size:.92rem; line-height:1.25; }
.geo-small{ color: #64748b; font-size:.82rem; margin-top:4px; }

/* modale prodotto */
.pmodal-backdrop{
    display:none;
    position:fixed; inset:0;
    background: rgba(2,8,23,.55);
    z-index: 140;
}
.pmodal{
    position:fixed;
    left:0; right:0;
    bottom:-120%;
    background:#fff;
    z-index:141;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    box-shadow: 0 -20px 50px rgba(2,8,23,.30);
    transition: .22s ease;
    max-height: 90vh;
    overflow:auto;
}
.pmodal.open{ bottom:0; }
.pmodal-head{
    padding: 12px 14px;
    border-bottom:1px solid var(--line);
    position: sticky; top:0; background:#fff; z-index:5;
    display:flex; align-items:center; justify-content:space-between;
}
.pmodal-title{ font-weight:950; display:flex; align-items:center; gap:8px; }
.pmodal-body{ padding: 12px 14px; }
.pmodal-img{
    width:100%;
    height: 210px;
    border-radius: 16px;
    overflow:hidden;
    background: linear-gradient(120deg, rgba(14,165,233,.18), rgba(99,102,241,.18));
    border:1px solid var(--line);
    box-shadow: 0 10px 22px rgba(2,8,23,.05);
}
.pmodal-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.psec{ margin-top: 14px; }
.psec h6{ font-weight:950; margin:0 0 8px; display:flex; align-items:center; gap:8px; }

.pill{
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:999px;
    padding: 6px 10px;
    font-weight:900;
    font-size:.82rem;
    color:#0f172a;
}
.pmodal-foot{
    position: sticky;
    bottom:0;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(10px);
    border-top:1px solid var(--line);
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
}
.pmodal-price{ font-weight:950; font-size: 1.05rem; white-space:nowrap; }
.pmodal-add{
    border-radius: 999px;
    border: 0;
    padding: 11px 14px;
    color:#fff;
    font-weight: 950;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow: 0 12px 22px rgba(14,165,233,.22);
    display:inline-flex; align-items:center; gap:8px;
    white-space:nowrap;
}
.pmodal-qty{
    display:flex; align-items:center; gap:10px;
    border:1px solid var(--line);
    border-radius: 999px;
    padding: 6px 10px;
    background:#fff;
    box-shadow: 0 10px 18px rgba(2,8,23,.05);
}
.pmodal-qty .q{ min-width: 22px; text-align:center; font-weight:950; }
.pmodal-qty button{
    width:34px;height:34px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    display:inline-flex; align-items:center; justify-content:center;
}