/* ==========================================
   AVENTURA MENU STUDIO
   BUFFET BUILDER
========================================== */

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

body{

    font-family:'Inter',sans-serif;

    background:#050505;

    color:#ffffff;

}

.container{

    width:min(1800px,95%);

    margin:auto;

    padding:45px;

}

/* ===========================
   HEADER
=========================== */

header{

    margin-bottom:45px;

}

header h1{

    font-size:4rem;

    font-weight:700;

    letter-spacing:-1px;

    margin-bottom:8px;

}

header p{

    font-size:1.15rem;

    color:#9ca3af;

}

/* ===========================
   BACK BUTTON
=========================== */

.back-button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:20px;

    color:#9ca3af;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:all .25s ease;

}

.back-button:hover{

    color:#ffffff;

    transform:translateX(-4px);

}

.back-button i{

    font-size:13px;

    transition:transform .25s ease;

}

.back-button:hover i{

    transform:translateX(-2px);

}

/* ===========================
   LAYOUT
=========================== */

.workspace{

    display:grid;

    grid-template-columns:360px minmax(440px,1.45fr) 340px;

    gap:40px;

    align-items:start;

    height:calc(100vh - 220px);

}

/* ===========================
   PANELS
=========================== */

.panel{

    display:flex;
    flex-direction:column;

    min-height:0;

}

.panel h2{

    font-size:2rem;

    margin-bottom:24px;

    font-weight:700;

}

/* ===========================
   BEO IMPORT
=========================== */

.beo-import{
    margin:0 0 24px;
    padding:20px;
    border:1px solid rgba(96,165,250,.35);
    border-radius:18px;
    background:linear-gradient(135deg,rgba(30,58,138,.30),rgba(15,23,42,.42));
}

.beo-import-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.beo-import h3{ font-size:1.05rem; margin:3px 0 0; }

.eyebrow{
    color:#93c5fd;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.12em;
}

.beo-copy{ color:#cbd5e1; font-size:.88rem; line-height:1.45; margin:12px 0 16px; }

.beo-status{
    flex:0 0 auto;
    padding:5px 9px;
    border-radius:999px;
    color:#bfdbfe;
    background:rgba(59,130,246,.18);
    font-size:.75rem;
    font-weight:600;
}

.beo-actions{ display:flex; flex-wrap:wrap; gap:10px; }

.file-button,
.beo-actions .secondary-btn{
    width:auto;
    min-height:40px;
    margin:0;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    cursor:pointer;
    font-size:.84rem;
    font-weight:700;
}

.file-button{ color:#dbeafe; background:#1d4ed8; }
.file-button:hover{ background:#2563eb; }
.beo-actions .secondary-btn:disabled{ cursor:not-allowed; opacity:.5; }

.beo-result{
    margin:14px 0 0;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.12);
    color:#bfdbfe;
    font-size:.82rem;
}

/* ===========================
   BUTTONS
=========================== */

.primary-btn,
.save-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    background:#2563eb;

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.primary-btn{

    margin-bottom:28px;

}

.save-btn{

    margin-top:26px;

}

.primary-btn:hover,
.save-btn:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

/* ===========================
   INPUTS
=========================== */

.buffet-name,
.search{

    width:100%;

    height:62px;

    padding:0 22px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.08);

    background:#111111;

    color:white;

    font-size:16px;

    transition:.25s;

    margin-bottom:22px;

}

.buffet-name:focus,
.search:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

/* ===========================
   SAVED BUFFETS
=========================== */

.buffet-list{

    display:flex;
    flex-direction:column;
    gap:18px;

    max-height:500px;
    overflow-y:auto;

    padding-right:8px;

}

.buffet-card{

    background:#111111;

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:20px;

    cursor:pointer;

    transition:.25s;

}

.buffet-card:hover{

    border-color:#2563eb;

    transform:translateX(4px);

}

.buffet-card.active{

    border:2px solid #2563eb;

    box-shadow:0 0 18px rgba(37,99,235,.15);

}

/* ===========================
   CURRENT BUFFET
=========================== */

.current-items{

    display:flex;
    flex-direction:column;
    gap:16px;

    max-height:500px;
    overflow-y:auto;

    padding-right:8px;

}

.menu-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#111111;

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:20px;

    transition:.25s;

    cursor:grab;

}

.menu-item:hover{

    border-color:#2563eb;

    transform:translateX(4px);

}

/* ===========================
   MENU LIBRARY
=========================== */

.library{

    flex:1;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    gap:16px;

    padding-right:8px;

}

.library-item{

    display:flex;

    align-items:center;

    gap:18px;

    background:#111111;

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:18px 20px;

    min-height:90px;

    transition:.25s;

}

.library-text{

    flex:1;

    min-width:0;

}

.library-title{

    font-size:17px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:4px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.library-description{

    font-size:14px;

    font-weight:400;

    color:#9ca3af;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.library-item:hover{

    border-color:#2563eb;

}

.library-item button{

    width:42px;

    height:42px;

    border-radius:50%;

    border:none;

    background:#2563eb;

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:.25s;

}

.library-item button:hover{

    background:#1d4ed8;

    transform:scale(1.08);

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:#2f2f2f;

    border-radius:999px;

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:1400px){

.workspace{

    grid-template-columns:1fr;

    gap:30px;

}

.container{

    padding:30px;

}

header h1{

    font-size:3rem;

}

.panel h2{

    font-size:1.7rem;

}

}

/* ===========================
   TABLET
=========================== */

@media (max-width: 1400px){

.workspace{

    grid-template-columns:1fr 1fr;

    gap:30px;

}

}

/* ===========================
   MOBILE
=========================== */

@media (max-width: 768px){

.container{

    padding:20px;

}

header{

    text-align:center;

}

header h1{

    font-size:2.4rem;

}

header p{

    font-size:1rem;

}

.workspace{

    display:flex;

    flex-direction:column;

    gap:24px;

    height:auto;

}

.panel{

    display:flex;

    flex-direction:column;

    background:transparent;

    min-height:0;

}

.panel h2{

    font-size:1.5rem;

}

.primary-btn,
.save-btn{

    height:52px;

}

.buffet-card,
.menu-item,
.library-item{

    padding:16px;

}

.library-item button{

    width:40px;

    height:40px;

}

.preview-card{

    padding:18px;

}

}

.add-btn{

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:#2563eb;

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:.2s;

}

.add-btn:hover{

    background:#1d4ed8;

    transform:scale(1.05);

}

.remove-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#2563eb;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:22px;

    font-weight:600;

    transition:.25s;

    flex-shrink:0;

}

.remove-btn:hover{

    background:#1d4ed8;

    transform:scale(1.08);

}

.buffet-card h3{

    margin-bottom:8px;

    font-size:18px;

}

.buffet-card p{

    color:#8b97a8;

    font-size:14px;

}

.buffet-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:14px;

    width:100%;

}

.buffet-card-header > div{

    flex:1;

    min-width:0;

}

.buffet-card-header h3{

    white-space:nowrap;

}

.delete-buffet{

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:#2563eb;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    transition:.25s;

    flex-shrink:0;

    min-width:38px;

    padding:0;

}

.delete-buffet:hover{

    background:#1d4ed8;

    transform:scale(1.08);

}

.secondary-btn{

    width:100%;

    height:58px;

    margin-top:14px;

    border:2px solid #2563eb;

    background:transparent;

    color:#2563eb;

    border-radius:18px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.secondary-btn:hover{

    background:#2563eb;

    color:white;

}

.dragging{

    opacity:.5;

    background:#1d4ed8;

}

/* ===========================
   MENU LIBRARY HELP TEXT
=========================== */

.library h3{

    margin-top:4px;

    margin-bottom:12px;

    font-size:1.35rem;

}

.library p{

    margin-bottom:24px;

    line-height:1.6;

    color:#d1d5db;

}

/* ==========================================
   LIGHT STUDIO THEME
========================================== */
:root{--studio-blue:#00658f;--studio-blue-dark:#004f70;--studio-blue-soft:#eaf4f8;--studio-ink:#11181c;--studio-muted:#65737a;--studio-line:#d7e1e5;--studio-canvas:#f5f8f9}
body{background:#fff;color:var(--studio-ink)}
.container{width:min(1600px,calc(100% - 48px));padding:54px 0 70px}
header{margin-bottom:32px;padding-bottom:30px;border-bottom:1px solid var(--studio-line)}
header h1{font-size:clamp(3rem,5vw,4.8rem);letter-spacing:-.055em;line-height:.98}
header p{color:var(--studio-muted)}
.back-button{color:var(--studio-blue)}.back-button:hover{color:var(--studio-blue-dark)}
.workspace{grid-template-columns:360px minmax(440px,1.45fr) 340px;gap:18px;height:calc(100vh - 250px)}
.panel{padding:24px;border:1px solid var(--studio-line);border-radius:20px;background:var(--studio-canvas)}
.panel h2{margin-bottom:20px;font-size:1.6rem}
.primary-btn,.save-btn,.library-item button,.add-btn,.remove-btn,.delete-buffet{background:var(--studio-blue)}
.primary-btn:hover,.save-btn:hover,.library-item button:hover,.add-btn:hover,.remove-btn:hover,.delete-buffet:hover{background:var(--studio-blue-dark)}
.secondary-btn{border-color:var(--studio-blue);color:var(--studio-blue)}.secondary-btn:hover{background:var(--studio-blue);color:#fff}
.buffet-name,.search{height:54px;border-color:var(--studio-line);border-radius:13px;background:#fff;color:var(--studio-ink)}
.buffet-name:focus,.search:focus{border-color:var(--studio-blue);box-shadow:0 0 0 4px rgba(0,101,143,.09)}
.beo-import{border-color:#b9d5df;background:var(--studio-blue-soft)}
.eyebrow{color:var(--studio-blue)}.beo-copy{color:var(--studio-muted)}.beo-status{background:#fff;color:var(--studio-blue)}
.file-button{background:var(--studio-blue);color:#fff}.file-button:hover{background:var(--studio-blue-dark)}
.beo-result{border-top-color:#cbdde4;color:var(--studio-blue-dark)}
.buffet-card,.menu-item,.library-item{border-color:var(--studio-line);border-radius:14px;background:#fff}
.buffet-card:hover,.menu-item:hover,.library-item:hover{border-color:var(--studio-blue)}
.buffet-card.active{border-color:var(--studio-blue);box-shadow:0 0 0 3px rgba(0,101,143,.1)}
.library-title{color:var(--studio-ink)}.library-description,.buffet-card p,.library p{color:var(--studio-muted)}
::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#b8c6cb}
.dragging{background:var(--studio-blue-soft)}
@media(max-width:1400px){.workspace{grid-template-columns:1fr 1fr;height:auto}.panel:nth-child(2){grid-row:span 2}}
@media(max-width:768px){.container{width:min(100% - 28px,1600px);padding:28px 0 50px}header{text-align:left}.workspace{display:flex}.panel{padding:19px}}

/* Traditional site navigation and mobile refinements. */
.site-nav{position:relative;min-height:70px;padding:0 max(24px,calc((100% - 1520px)/2));display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--studio-line);background:#fff}
.site-brand{color:var(--studio-ink);font-size:15px;font-weight:750;text-decoration:none;letter-spacing:-.02em}.site-nav-links{display:flex;align-items:center;gap:6px}.site-nav-links a{padding:10px 13px;border-radius:9px;color:var(--studio-muted);font-size:13px;font-weight:650;text-decoration:none;white-space:nowrap}.site-nav-links a:hover,.site-nav-links a.active{background:var(--studio-blue-soft);color:var(--studio-blue)}
.site-logo{position:absolute;left:calc(50% - 3px);top:50%;width:52px;height:52px;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%)}.site-logo img{width:100%;height:100%;display:block;object-fit:contain;filter:brightness(0)}
.site-brand{display:inline-flex;align-items:center;gap:9px}.site-back-arrow{color:var(--studio-ink);font-family:Arial,sans-serif;font-size:20px;font-weight:700;line-height:1}
@media(max-width:768px){.site-nav{min-height:64px;padding:11px 18px;align-items:flex-start;flex-direction:column;gap:7px}.site-logo{display:none}.site-nav-links{width:100%;overflow-x:auto}.site-nav-links a{padding:8px 10px}.beo-import-heading{flex-direction:column}.beo-actions>*{width:100%!important}.buffet-name,.search{font-size:16px}.current-items,.buffet-list{max-height:none}.library{max-height:520px}}

/* Mobile-first Buffet Builder workflow; desktop remains unchanged. */
@media(max-width:768px){
    .container{width:min(100% - 24px,1600px);padding:24px 0 44px}
    header{margin-bottom:18px;padding-bottom:20px}
    header h1{font-size:2.25rem;letter-spacing:-.04em}
    header p{margin-top:7px;font-size:.95rem;line-height:1.45}
    .workspace{gap:14px}
    .workspace>main{order:1}
    .workspace>aside:last-child{order:2}
    .workspace>aside:first-child{order:3}
    .panel{padding:17px;border-radius:16px}
    .panel h2{margin-bottom:16px;font-size:1.35rem}
    .beo-import{margin-bottom:18px;padding:16px;border-radius:14px}
    .beo-import-heading{gap:10px}
    .beo-import h3{font-size:1rem;line-height:1.35}
    .beo-copy{margin:10px 0 14px;font-size:.82rem}
    .beo-status{align-self:flex-start}
    .beo-actions{display:grid;grid-template-columns:1fr;gap:8px}
    .file-button,.beo-actions .secondary-btn{min-height:48px}
    .buffet-name,.search{height:52px;margin-bottom:16px;padding:0 16px;border-radius:12px}
    .current-items,.buffet-list,.library{gap:10px;padding-right:0}
    .menu-item,.buffet-card,.library-item{min-height:0;padding:14px;border-radius:12px}
    .library-item{flex:0 0 auto;align-items:flex-start;gap:10px;padding:14px 12px 14px 14px}
    .library-text{padding:1px 0;min-width:0}
    .library-title{
        font-size:15px;
        line-height:1.35;
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
    }
    .library-description{
        margin-top:3px;
        font-size:13px;
        line-height:1.4;
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
    }
    .library-item button,.add-btn{width:32px;height:32px;flex:0 0 32px;font-size:18px}
    .remove-btn{width:40px;height:40px;flex:0 0 40px}
    .primary-btn,.save-btn,.secondary-btn{height:52px;border-radius:12px}
    .primary-btn{margin-bottom:18px}
    .save-btn{margin-top:18px}
    .secondary-btn{margin-top:10px}
    .library{max-height:460px}
}

/* Final phone safeguards. */
@media(max-width:768px){
    html,body{max-width:100%;overflow-x:hidden}
    .container{width:100%;padding-inline:16px}
    .site-nav{padding-inline:16px}
    .site-brand,.site-nav-links a{display:inline-flex;align-items:center;min-height:44px}
    .panel,.buffet-card,.menu-item,.library-item,.preview-card{width:100%;min-width:0}
    .beo-actions{grid-template-columns:1fr}
    .beo-actions>*{width:100%;min-height:48px}
    .buffet-card *,.menu-item *,.library-item *,.preview-card *{overflow-wrap:anywhere}
    .library-item button,.add-btn{width:44px;height:44px;min-width:44px;flex-basis:44px}
    .remove-btn,.delete-buffet{min-width:44px;min-height:44px}
}