/* menu.css - Search bar, menu layout, menu grid, sections, items, options, side cart, mini cart */

/* Search Bar */
.search-container{
    max-width:600px;
    margin:30px auto;
    position:relative;
}

.search-input{
    width:100%;
    padding:18px 25px 18px 55px;
    border-radius:50px;
    border:2px solid var(--l);
    background:rgba(0,0,0,.3);
    color:#fff;
    font-size:16px;
    transition:all .3s;
}

.search-input:focus{
    outline:none;
    border-color:var(--accent-modern);
    box-shadow:0 0 30px rgba(255,71,87,.2);
}

.search-icon{
    position:absolute;
    left:22px;
    top:50%;
    transform:translateY(-50%);
    color:var(--m);
    font-size:20px;
}

.search-clear{
    position:absolute;
    right:22px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:var(--m);
    cursor:pointer;
    font-size:18px;
    display:none;
}

.search-clear.show{display:block;}

/* Menu Layout */
.menu-layout{
    display:grid;
    grid-template-columns:1fr;
    gap:30px;
    max-width:1400px;
    margin:0 auto;
    padding:30px 20px;
}

.menu-wrap{
    background:var(--bg);
    color:var(--t);
    border-radius:24px;
    padding:40px 30px;
    border:1px solid var(--l);
}

.menu-header{text-align:center;margin-bottom:30px;}

.menu-title{
    font-family:var(--handwriting);
    font-size:64px;
    margin:0 0 10px;
    letter-spacing:2px;
    font-weight:700;
    color:var(--t);
}

.menu-sub{margin:0;color:var(--m);font-size:16px;text-transform:uppercase;letter-spacing:3px;}

.toplines{
    margin:20px 0 30px;
    color:var(--m);
    font-size:14px;
    text-align:center;
    padding:20px;
    background:rgba(255,71,87,.1);
    border-radius:12px;
    border:1px solid rgba(255,71,87,.3);
}

.toplines .min{font-weight:900;color:var(--t);font-size:16px;}
.toplines .min span{color:var(--accent-modern);}

.menu-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    contain: layout style paint;
}

/* Optimisations performance */
.sec {
    contain: layout style;
    will-change: transform;
}

.item {
    contain: layout style paint;
}

.loading-items {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Sections */
.sec{
    border:1px solid var(--l);
    border-radius:20px;
    background:rgba(255,255,255,.03);
    overflow:hidden;
    transition:all .3s ease;
}

.sec:hover{border-color:rgba(255,255,255,.3);}

.sec h2{
    margin:0;
    padding:20px 25px;
    font-size:18px;
    letter-spacing:2px;
    background:rgba(0,0,0,.2);
    border-bottom:1px solid var(--l);
    color:var(--t);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    cursor:pointer;
    user-select:none;
    transition:all .3s;
    text-transform:uppercase;
    font-weight:700;
}

.sec h2:hover{background:rgba(0,0,0,.3);}
.sec h2 span{color:var(--accent-modern);font-size:24px;}

.sec .secchev{
    opacity:.9;
    transition:transform .3s ease;
    font-size:14px;
}

.sec.collapsed .secchev{transform:rotate(0deg);}
.sec.collapsed .items{display:none;}
.sec:not(.collapsed) .secchev{transform:rotate(180deg);}
.sec:not(.collapsed) .items{
    display:block;
}

.items{padding:20px;}

.item{
    padding:20px;
    border-bottom:1px solid var(--l);
    position:relative;
    transition:all .3s;
    border-radius:12px;
}

.item:hover{background:rgba(255,255,255,.02);}

.item:last-child{border-bottom:none;}

.item.out-of-stock{
    opacity:0.4;
    pointer-events:none;
}

.item.out-of-stock::after{
    content:'INDISPONIBLE';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:var(--warning);
    color:#000;
    padding:8px 20px;
    border-radius:30px;
    font-size:12px;
    font-weight:900;
    z-index:10;
    letter-spacing:2px;
}

.item.hidden{display:none;}

.row{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
}

.name{font-weight:700;font-size:18px;display:block;margin-bottom:8px;color:var(--t);}
.desc{display:block;margin-top:8px;font-weight:400;color:var(--m);font-size:14px;line-height:1.5;}
.price{white-space:nowrap;font-weight:900;color:var(--t);font-size:20px;}

.addbtn{
    margin-top:15px;
    background:var(--accent-modern);
    color:#fff;
    border:none;
    border-radius:30px;
    padding:12px 25px;
    font-weight:700;
    cursor:pointer;
    transition:all .3s;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.addbtn:hover{
    background:var(--a-light);
    transform:translateY(-2px);
    box-shadow:0 5px 20px rgba(255,71,87,.4);
}

.addbtn:active{transform:translateY(0);}
.addbtn[disabled]{opacity:.5;cursor:not-allowed;transform:none;}

.addbtn-confirm{
    background:var(--success) !important;
    color:#fff;
}
.addbtn-confirm:hover{
    background:#27ae60 !important;
}

.item-options-panel{
    margin-top:12px;
    padding:12px;
    background:rgba(0,0,0,.15);
    border:1px solid var(--l);
    border-radius:12px;
}

.addbtn-cancel{
    transition:all .2s;
}
.addbtn-cancel:hover{
    background:rgba(255,255,255,.05);
    color:#fff;
}

.required-badge{
    display:inline-block;
    background:var(--accent-modern);
    color:#fff;
    font-size:10px;
    padding:4px 12px;
    border-radius:20px;
    margin-left:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.out-of-stock-badge{
    display:inline-block;
    background:var(--warning);
    color:#000;
    font-size:10px;
    padding:4px 12px;
    border-radius:20px;
    margin-left:10px;
    font-weight:700;
    text-transform:uppercase;
}

/* Options déroulantes */
.optwrap{
    margin-top:15px;
    border-radius:16px;
    overflow:hidden;
}

.opthead{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:15px 20px;
    border-radius:16px;
    border:1px solid var(--l);
    background:rgba(0,0,0,.2);
    color:#fff;
    font-weight:700;
    cursor:pointer;
    transition:all .3s;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.opthead:hover{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.3);}

.opthead.required{
    border-color:var(--accent-modern);
    background:rgba(255,71,87,.1);
}

.opthead.required::before{content:'! ';}

.chev{transition:transform .3s ease;font-size:12px;}

.optbody{
    margin-top:10px;
    padding:20px;
    border-radius:16px;
    border:1px solid var(--l);
    background:rgba(0,0,0,.1);
    display:none;
}

.optwrap.open .optbody{display:block;}
.optwrap.open .chev{transform:rotate(180deg);}

.grid2{display:grid;grid-template-columns:1fr;gap:15px;}

.grp{
    border:1px solid var(--l);
    border-radius:16px;
    padding:20px;
    background:rgba(255,255,255,.03);
}

.grp .gname{
    font-weight:700;
    font-size:13px;
    margin:0 0 15px;
    color:var(--accent-modern);
    text-transform:uppercase;
    letter-spacing:2px;
}

.ck{
    display:flex;
    gap:12px;
    align-items:center;
    margin:12px 0;
    font-size:14px;
    color:rgba(255,255,255,.9);
    cursor:pointer;
    padding:8px;
    border-radius:8px;
    transition:all .2s;
}

.ck:hover{background:rgba(255,255,255,.05);color:#fff;}
.ck input{transform:scale(1.3);cursor:pointer;accent-color:var(--accent-modern);}

.small{font-size:12px;opacity:.7;font-weight:400;}

.pm{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    margin:12px 0;
    padding:12px;
    background:rgba(255,255,255,.05);
    border-radius:10px;
}

.pm .label{font-size:14px;font-weight:600;}

.pm .ctrl{display:flex;gap:10px;align-items:center;}

.pm button{
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,.3);
    border-radius:10px;
    padding:8px 16px;
    font-weight:900;
    cursor:pointer;
    transition:all .2s;
    min-width:40px;
    font-size:16px;
}

.pm button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);}

.badge{min-width:35px;text-align:center;font-weight:900;font-size:16px;}

.optErr{
    display:none;
    margin-top:15px;
    color:#ff5a5a;
    font-weight:700;
    font-size:14px;
    padding:15px;
    background:rgba(255,90,90,.1);
    border-radius:10px;
    border-left:4px solid #ff5a5a;
}

.optErr.show{display:block;}

/* === Option Groups System === */
.opt-group-section{
    margin-bottom:18px;
    padding:18px;
    border-radius:14px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--l);
    transition:all .3s;
}
.opt-group-section:hover{border-color:rgba(255,255,255,.2);}
.opt-group-title{
    font-weight:700;
    font-size:14px;
    margin-bottom:12px;
    color:var(--t);
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.opt-group-title .opt-req{
    background:var(--accent-modern);
    color:#fff;
    font-size:10px;
    padding:3px 10px;
    border-radius:20px;
    font-weight:700;
    letter-spacing:1px;
}
.opt-group-title .opt-constraint{
    color:var(--m);
    font-size:11px;
    font-weight:400;
}
.opt-group-title .opt-free{
    color:var(--success);
    font-size:11px;
    font-weight:600;
}
.ck-price{
    margin-left:auto;
    color:var(--accent-modern);
    font-weight:700;
    font-size:13px;
    white-space:nowrap;
}
.pm .pm-price{
    color:var(--accent-modern);
    font-weight:700;
    font-size:12px;
}
.opt-summary{
    margin-top:12px;
    padding:10px 15px;
    background:rgba(255,71,87,.1);
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    color:var(--accent-modern);
    display:none;
}
.opt-summary.show{display:block;}

/* Side cart */
.sidecart{
    display:none;
    background:rgba(28,31,92,.98);
    border:1px solid var(--l);
    border-radius:24px;
    padding:30px;
    color:#fff;
    position:sticky;
    top:100px;
    height:fit-content;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
}

.sc-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    padding-bottom:20px;
    border-bottom:2px solid var(--l);
}

.sc-head b{font-weight:900;font-size:22px;}

.sc-list{
    margin-top:20px;
    max-height:50vh;
    overflow:auto;
    padding-right:10px;
}

.sc-list::-webkit-scrollbar{width:6px;}
.sc-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px;}

.sc-item{
    display:flex;
    justify-content:space-between;
    gap:15px;
    font-size:14px;
    padding:15px 0;
    border-bottom:1px solid var(--l);
}

.sc-item:last-child{border-bottom:none;}
.sc-item .name{font-weight:700;font-size:15px;}
.sc-item .details{font-size:12px;color:var(--m);margin-top:5px;}

.sc-actions{display:flex;gap:15px;margin-top:25px;}

.sc-btn{
    flex:1;
    background:rgba(255,255,255,.1);
    border:1px solid var(--l);
    color:#fff;
    border-radius:12px;
    padding:15px;
    font-weight:700;
    cursor:pointer;
    transition:all .3s;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.sc-btn:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);}

.sc-btn.primary{
    background:var(--accent-modern);
    border-color:var(--accent-modern);
}

.sc-btn.primary:hover{background:var(--a-light);}
.sc-min{margin-top:20px;font-size:13px;text-align:center;color:var(--m);}
.sc-min span{color:var(--accent-modern);font-weight:900;}

/* === Mini Cart - uniquement sur page menu === */
.miniCart{
    position:fixed;
    z-index:99999;
    width:280px;
    max-width:90vw;
    background:rgba(28,31,92,.98);
    border:1px solid var(--l);
    border-radius:24px;
    color:#fff;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    right:20px;
    top:50%;
    transform:translateY(-50%);
    backdrop-filter:blur(20px);
    display:none;
}

.miniHead{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    background:rgba(0,0,0,.2);
    cursor:grab;
    user-select:none;
    border-bottom:1px solid var(--l);
    border-radius:24px 24px 0 0;
}

.miniHead:active{cursor:grabbing;}
.miniHead b{font-weight:900;font-size:18px;}

.miniBody{padding:20px;}

.miniLine{
    display:flex;
    justify-content:space-between;
    gap:15px;
    font-size:15px;
    margin-bottom:20px;
    padding-bottom:20px;
    border-bottom:1px solid var(--l);
}

.miniBtns{display:flex;gap:12px;}

.miniBtns button{
    flex:1;
    background:rgba(255,255,255,.1);
    border:1px solid var(--l);
    color:#fff;
    border-radius:12px;
    padding:15px;
    font-weight:700;
    cursor:pointer;
    transition:all .3s;
    font-size:13px;
    text-transform:uppercase;
}

.miniBtns button:hover{background:rgba(255,255,255,.2);}

.miniBtns .go{
    background:var(--accent-modern);
    border-color:var(--accent-modern);
}

.miniBtns .go:hover{background:var(--a-light);}
.miniSmall{margin-top:15px;font-size:12px;text-align:center;color:var(--m);}
.miniSmall span{color:var(--accent-modern);font-weight:900;}