/* FILE: /v2/include/css/06-sections.css
   COSA FA:
   Stili specifici delle sezioni funzionali /v2.
   Include landing servizi, menu prodotti, booking, delivery, VToken e WishMenu.
   Usa variabili template per supportare temi chiari/scuri.
*/

/* =========================
   LANDING SERVIZI
========================= */

.cm-service{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none !important;
    color:var(--cm-text) !important;
    background:linear-gradient(180deg, var(--cm-card) 0%, var(--cm-bg-soft) 100%);
    border:1px solid var(--cm-border);
    border-radius:20px;
    padding:12px;
    min-height:88px;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    position:relative;
    overflow:hidden;
}

.cm-service:hover{
    transform:translateY(-2px);
    box-shadow:var(--cm-shadow-md);
    border-color:var(--cm-line);
}

.cm-service::after{
    content:"";
    position:absolute;
    right:-20px;
    top:-20px;
    width:68px;
    height:68px;
    border-radius:999px;
    opacity:.10;
}

.cm-service.booking::after{ background:#0ea5e9; }
.cm-service.delivery::after{ background:#f97316; }
.cm-service.emenu::after{ background:#8b5cf6; }
.cm-service.vtoken::after{ background:#ec4899; }
.cm-service.member::after{ background:#eab308; }
.cm-service.wishmenu::after{ background:#ef4444; }

.cm-service-icon{
    width:50px;
    height:50px;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:color-mix(in srgb, var(--cm-primary) 12%, var(--cm-card));
    border:1px solid color-mix(in srgb, var(--cm-primary) 18%, var(--cm-border));
    flex:0 0 50px;
}

.cm-service-icon .material-icons{
    font-size:25px;
    color:var(--cm-primary-dark);
}

.cm-service-body{
    min-width:0;
    flex:1 1 auto;
}

.cm-service-title{
    display:block;
    margin:0;
    font-size:1rem;
    font-weight:900;
    line-height:1.1;
    color:var(--cm-text);
}

.cm-service-subtitle{
    display:block;
    margin:5px 0 0;
    font-size:.84rem;
    color:var(--cm-muted);
    line-height:1.2;
}

.cm-service-arrow{
    color:var(--cm-muted);
    flex:0 0 auto;
}

.cm-empty{
    background:var(--cm-bg-soft);
    border:1px solid var(--cm-line);
    color:var(--cm-text);
    border-radius:16px;
    padding:14px;
    font-weight:700;
    font-size:.92rem;
}

/* =========================
   EMENU / FILE MENU
========================= */

.emenu-file-wrap{
    background:var(--cm-card);
    color:var(--cm-text);
    border:1px solid var(--cm-border);
    border-radius:20px;
    box-shadow:var(--cm-shadow-md);
    overflow:hidden;
}

.emenu-file-top{
    padding:16px;
    border-bottom:1px solid var(--cm-line);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.emenu-file-frame{
    width:100%;
    min-height:75vh;
    border:0;
    display:block;
    background:var(--cm-card);
}

/* =========================
   MENU SEARCH
========================= */

.menu-search-wrap{
    margin:14px 0 10px;
}

.menu-search{
    position:relative;
}

.menu-search .material-icons{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--cm-muted);
    font-size:20px;
    pointer-events:none;
}

.menu-search input{
    width:100%;
    height:48px;
    border:1px solid var(--cm-line);
    border-radius:999px;
    padding:0 16px 0 44px;
    outline:none;
    box-shadow:none;
    background:var(--cm-card);
    color:var(--cm-text);
}

.menu-search input::placeholder{
    color:var(--cm-muted);
}

.menu-search input:focus{
    border-color:var(--cm-primary);
}

/* =========================
   PRODOTTI / CARD MENU
========================= */

.p-card{
    background:var(--cm-card);
    color:var(--cm-text);
    border-radius:18px;
    border:1px solid var(--cm-line);
    box-shadow:var(--cm-shadow-sm);
    overflow:hidden;
    transition:.18s ease;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    height:100%;
    position:relative;
}

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

.p-card.in-cart{
    border-color:color-mix(in srgb, var(--cm-primary) 75%, var(--cm-line));
    box-shadow:0 14px 30px color-mix(in srgb, var(--cm-primary) 14%, transparent);
}

.p-card-in-wishlist{
    border:2px solid var(--cm-primary) !important;
    box-shadow:0 10px 24px color-mix(in srgb, var(--cm-primary) 18%, transparent);
}

.p-card-in-wishlist .p-name{
    color:var(--cm-text);
}

.p-wishlist-badge{
    position:absolute;
    top:10px;
    right:10px;
    z-index:3;
    min-width:32px;
    height:32px;
    padding:0 9px;
    border-radius:999px;
    background:var(--cm-primary);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:.85rem;
    font-weight:800;
    box-shadow:0 8px 18px rgba(15,23,42,.22);
}

.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:color-mix(in srgb, var(--cm-card) 92%, transparent);
    border:1px solid color-mix(in srgb, var(--cm-primary) 25%, var(--cm-line));
    box-shadow:var(--cm-shadow-sm);
    font-weight:950;
    color:var(--cm-text);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.p-mark .material-icons{
    font-size:18px;
    color:var(--cm-primary);
}

.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;
    line-height:1.12;
    color:var(--cm-text);
}

.p-desc,
.p-ing{
    color:var(--cm-muted);
    line-height:1.25;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.p-desc{
    margin:0;
    font-size:.88rem;
    min-height:34px;
    -webkit-line-clamp:2;
}

.p-ing{
    margin-top:6px;
    font-size:.82rem;
    -webkit-line-clamp:2;
}

.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;
    color:var(--cm-text);
}

.btn-add{
    border-radius:999px;
    border:0;
    padding:9px 12px;
    color:#fff;
    font-weight:900;
    background:linear-gradient(90deg,var(--cm-primary),var(--cm-secondary));
    box-shadow:0 10px 20px color-mix(in srgb, var(--cm-primary) 22%, transparent);
}

.qty-wrap{
    display:flex;
    align-items:center;
    gap:8px;
}

.btn-qty{
    width:36px;
    height:36px;
    border-radius:999px;
    border:1px solid var(--cm-line);
    background:var(--cm-card);
    color:var(--cm-text);
    font-weight:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--cm-shadow-sm);
}

.qty{
    min-width:18px;
    text-align:center;
    font-weight:950;
}

/* =========================
   BOOKING
========================= */

.cm-booking-page .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
    gap:var(--cm-gap);
}

.cm-booking-page .grid-tight{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));
    gap:var(--cm-gap);
}

.cm-booking-page .grid-2{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--cm-gap);
}

.cm-booking-page .grid > .btn,
.cm-booking-page .grid-tight > .btn,
.cm-booking-page .grid-2 > .btn{
    width:100%;
}

#slots-wrap .btn{
    border-radius:999px;
}

.booking-block-alert{
    border-radius:14px;
    border:1px solid color-mix(in srgb, #ef4444 28%, var(--cm-line));
    background:color-mix(in srgb, #ef4444 10%, var(--cm-card));
    color:var(--cm-text);
    box-shadow:var(--cm-shadow-sm);
}

.booking-disabled{
    opacity:.6;
    pointer-events:none;
    user-select:none;
}

/* =========================
   DELIVERY / CART
========================= */

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

.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:var(--cm-card);
    color:var(--cm-text);
    border-top:1px solid var(--cm-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(--cm-muted);
    font-size:.92rem;
}

.btn-checkout{
    border-radius:16px;
    padding:12px 14px;
    border:0;
    color:#fff;
    font-weight:950;
    background:linear-gradient(90deg,var(--cm-primary),var(--cm-secondary));
    box-shadow:0 14px 26px color-mix(in srgb, var(--cm-primary) 25%, transparent);
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}

.bottom-cover{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:calc(30px + env(safe-area-inset-bottom));
    background:var(--cm-card);
    z-index:99;
    pointer-events:none;
}

/* =========================
   GEOBOX
========================= */

.geo-box{
    margin-top:10px;
    border:1px solid var(--cm-line);
    border-radius:16px;
    background:var(--cm-card);
    color:var(--cm-text);
    box-shadow:var(--cm-shadow-sm);
    padding:10px 12px;
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.geo-ico{
    width:40px;
    height:40px;
    border-radius:14px;
    background:color-mix(in srgb, var(--cm-primary) 10%, var(--cm-card));
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid color-mix(in srgb, var(--cm-primary) 18%, var(--cm-line));
    flex:0 0 40px;
}

.geo-ico .material-icons{
    color:var(--cm-primary);
}

.geo-t1{
    font-weight:950;
    margin:0;
}

.geo-t2{
    color:var(--cm-muted);
    margin:0;
    font-size:.92rem;
    line-height:1.25;
}

.geo-small{
    color:var(--cm-muted);
    font-size:.82rem;
    margin-top:4px;
}

/* =========================
   VTOKEN
========================= */

.kpi{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-bottom:12px;
}

.kpi .box{
    background:var(--cm-card);
    color:var(--cm-text);
    border:1px solid var(--cm-border);
    border-radius:16px;
    padding:14px;
    box-shadow:var(--cm-shadow-sm);
}

.kpi .box .t{
    color:var(--cm-muted);
    font-size:.9rem;
    font-weight:700;
}

.kpi .box .v{
    margin-top:4px;
    font-weight:900;
    font-size:1.35rem;
    line-height:1.1;
    color:var(--cm-text);
}

.cm-actions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    align-items:stretch;
}

.cm-actions.two-items{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.cm-actions .btn{
    width:100%;
    min-height:56px;
    border-radius:14px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
}

.statusline{
    margin-top:10px;
    display:flex;
    justify-content:flex-end;
}

.statuschip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    background:var(--cm-card);
    border:1px solid var(--cm-line);
    box-shadow:var(--cm-shadow-sm);
    color:var(--cm-muted);
    font-size:.86rem;
    line-height:1;
    white-space:nowrap;
}

.statuschip .material-icons{
    font-size:18px;
    opacity:.75;
}

.statuschip .dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#22c55e;
    display:inline-block;
}

.statuschip .sep{
    opacity:.45;
}

.movimenti-fixed-box{
    max-height:70vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.movimenti-scroll-area{
    max-height:42vh;
    overflow-y:auto;
    border:1px solid var(--cm-border);
    border-radius:12px;
}

.movimenti-scroll-area table{
    margin-bottom:0;
}

.movimenti-scroll-area thead th{
    position:sticky;
    top:0;
    background:var(--cm-card);
    color:var(--cm-text);
    z-index:2;
    border-bottom:1px solid var(--cm-border);
}

/* =========================
   WISHMENU
========================= */

.wishlist-bar{
    position:sticky;
    bottom:14px;
    z-index:1020;
    margin-top:14px;
}

.wishlist-pill{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:var(--cm-text);
    color:var(--cm-card);
    border-radius:999px;
    padding:10px 14px;
    box-shadow:0 14px 26px rgba(15,23,42,.22);
}

.wishlist-pill-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.wishlist-pill-left .material-icons{
    font-size:22px;
}

.wishlist-pill-title{
    font-weight:900;
    line-height:1;
}

.wishlist-pill-sub{
    font-size:.86rem;
    opacity:.84;
    margin-top:2px;
}

.wishlist-pill .btn{
    border-radius:999px;
    font-weight:900;
    white-space:nowrap;
}

.wishlist-drawer{
    position:fixed;
    left:50%;
    bottom:0;
    transform:translateX(-50%) translateY(100%);
    width:min(760px, calc(100vw - 20px));
    max-height:92vh;
    background:var(--cm-card);
    color:var(--cm-text);
    border-radius:24px 24px 0 0;
    box-shadow:0 -10px 40px rgba(2,6,23,.18);
    z-index:1060;
    transition:transform .25s ease;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.wishlist-drawer.show{
    transform:translateX(-50%) translateY(0);
}

.wishlist-drawer .line{
    width:68px;
    height:6px;
    border-radius:999px;
    background:var(--cm-line);
    margin:10px auto 0;
}

.wishlist-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid var(--cm-line);
}

.wishlist-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    color:var(--cm-text);
    font-size:1.05rem;
}

.wishlist-body{
    padding:16px;
    overflow:auto;
    max-height:calc(92vh - 220px);
    flex:1 1 auto;
}

.wishlist-item{
    border:1px solid var(--cm-line);
    border-radius:16px;
    padding:12px;
    background:var(--cm-card);
    color:var(--cm-text);
    margin-bottom:10px;
}

.wishlist-item:last-child{
    margin-bottom:0;
}

.wishlist-item-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.wishlist-item-name{
    font-weight:900;
    color:var(--cm-text);
}

.wishlist-item-meta{
    color:var(--cm-muted);
    font-size:.9rem;
    margin-top:3px;
}

.wishlist-item-actions{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
    flex-wrap:wrap;
}

.qty-box{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--cm-line);
    border-radius:999px;
    padding:4px;
    background:var(--cm-card);
    color:var(--cm-text);
}

.qty-box button{
    width:34px;
    height:34px;
    border:none;
    background:var(--cm-bg-soft);
    color:var(--cm-text);
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.qty-box strong{
    min-width:28px;
    text-align:center;
}

.event-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border-radius:999px;
    background:color-mix(in srgb, var(--cm-primary) 12%, var(--cm-card));
    color:var(--cm-primary-dark);
    border:1px solid color-mix(in srgb, var(--cm-primary) 22%, var(--cm-line));
    font-weight:800;
    font-size:.92rem;
    margin-top:10px;
}

.event-desc{
    color:var(--cm-muted);
    margin-top:8px;
}

.wallet-alert{
    border:1px dashed var(--cm-line);
    border-radius:16px;
    padding:12px 14px;
    background:var(--cm-bg-soft);
    color:var(--cm-text);
}

.wishlist-empty{
    text-align:center;
    color:var(--cm-muted);
    padding:26px 10px;
}

.cta-inline{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
}

.cta-inline .btn{
    border-radius:999px;
    font-weight:800;
}

.wishlist-footer{
    border-top:1px solid var(--cm-line);
    padding:14px 16px;
    background:var(--cm-card);
    color:var(--cm-text);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.wishlist-footer .btn{
    border-radius:999px;
    font-weight:900;
}