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

body{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background: #000;
    color: white;
    min-height: 100vh;
}

/*Header natin*/
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    background: white;
    color: #222;
}

.logo img{
    height: 40px;
    
}

/* New responsive header and layout rules */
:root{
    --accent: #cda34b; /* coffee/gold */
    --bg-dark: #0e0b09;
    --muted: #bfb7af;
}

body{
    background: linear-gradient(180deg, var(--bg-dark) 0%, #1b1816 100%);
    color: #f4f1ef;
}

/* Header layout */
header{
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(6px);
    padding: 12px 18px;
    gap: 12px;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}
.logo .brand{
    font-weight:700;
    color: var(--accent);
    font-size: 1.1rem;
}

.nav-wrap{
    display:flex;
    align-items:center;
    gap:12px;
}

.nav{
    display:none; /* mobile-first: hidden until toggled */
    position:absolute;
    top:64px;
    right:18px;
    background: rgba(0,0,0,0.6);
    padding: 12px 16px;
    border-radius:8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.nav a{
    display:block;
    color: #fff;
    text-decoration:none;
    padding:8px 0;
}
.nav a:hover{color:var(--accent)}

.nav-inline{
    display:flex;
    gap:18px;
    align-items:center;
}

.btn{
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
}
.btn.primary{
    background: linear-gradient(90deg,var(--accent), #e3b56a);
    color: #1b0f00;
    border: none;
}

.hamburger{
    width:40px;height:40px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;background:transparent;color:#fff;cursor:pointer
}

/* Simple page structure */
main{padding:24px;max-width:1100px;margin:18px auto;}
.hero{display:flex;flex-direction:column;gap:16px;padding:28px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));}
.hero h1{font-size:1.8rem;color:var(--accent)}
.hero-hero{position:relative;min-height:75vh;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:12px;margin-bottom:18px}
.hero-media{position:absolute;inset:0;background:#000;display:block; /* place video element here */;}
.hero-media > video{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,8,7,0.35), rgba(10,8,7,0.6));mix-blend-mode:multiply}
.hero-content{position:relative;z-index:4;padding:24px;display:flex;align-items:center;justify-content:center;width:100%}
.hero-inner{max-width:980px;text-align:center;color:#fff;padding:16px}
.hero-inner h1{font-size:clamp(2rem,6vw,4rem);margin-bottom:8px;letter-spacing:0.02em;color:var(--accent)}
.tagline{color:rgba(255,255,255,0.9);font-size:1.05rem;margin-bottom:18px}
.hero-ctas{display:flex;gap:12px;justify-content:center}

/* Make header transparent over hero */
header{position:relative;background:transparent;color:#fff;z-index:60}
header .btn{border-color:rgba(255,255,255,0.18);color:#fff}

@media(min-width:900px){
    .hero-hero{min-height:85vh}
    .hero-inner h1{font-size:clamp(3rem,5.6vw,5rem)}
}
.grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
.card{background:rgba(255,255,255,0.03);padding:16px;border-radius:10px}

.menu-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.menu-item{position:relative;overflow:hidden;border-radius:10px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,0.4);background:linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.06))}
.menu-item .img{width:100%;height:160px;background-size:cover;background-position:center;display:block}
.menu-item .menu-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:12px;background:linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0.0));opacity:0;transform:translateY(6px);transition:opacity .22s ease, transform .22s ease}
.menu-item .menu-overlay .meta{color:#fff}
.menu-item .menu-overlay .name{font-weight:700;font-size:1rem}
.menu-item .menu-overlay .price{color:var(--muted);font-size:0.95rem}
.menu-item:hover .menu-overlay,.menu-item:focus .menu-overlay,.menu-item:focus-within .menu-overlay{opacity:1;transform:none}
.menu-item:focus{outline:2px solid rgba(205,163,75,0.3);outline-offset:2px}

/* smaller image height on very small screens */
@media(max-width:420px){
    .menu-item .img{height:120px}
}

/* Login modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:220}
.modal{background:#fff;color:#1b1816;padding:18px;border-radius:10px;max-width:420px;width:100%;z-index:230}

/* Account menu in header */
.account-wrap{position:relative}
.account-menu{position:absolute;right:0;top:calc(100% + 8px);background:#1b1816;color:#fff;padding:8px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.5);display:flex;flex-direction:column;gap:8px}
.account-menu[hidden]{display:none !important}
.account-menu button{background:transparent;color:#fff;border-radius:6px;padding:8px 10px;border:1px solid rgba(255,255,255,0.04)}

/* Footer tweaks */
footer{background:transparent;padding:18px;color:var(--muted);text-align:center}

/* Login page small-panel overrides use .panel already styled inline; add full-page video container support styles */
/* (login.html uses local inline styles, style here ensures buttons match) */
.panel .btn{border-color:rgba(0,0,0,0.08);}

/* Login page styles */
.login-page{position:relative;min-height:100vh;overflow:hidden;background:linear-gradient(180deg,#0b0806,#1b1512);display:flex;flex-direction:column}
.login-bgvideo{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0.6}
.login-header{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:18px 22px}
.login-nav .nav-link{color:rgba(255,255,255,0.9);text-decoration:none;margin-left:14px}
.login-main{flex:1;display:flex;align-items:center;justify-content:center;z-index:10}
.login-panel{width:100%;max-width:420px;background:rgba(255,255,255,0.98);color:#1b1816;padding:28px;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.5);}
.login-panel h2{margin:0 0 6px;font-size:1.4rem}
.login-panel .muted{color:#666;margin-bottom:12px}
.field{display:flex;flex-direction:column;margin-bottom:12px}
.label{font-size:.9rem;color:#444;margin-bottom:6px}
.input{padding:12px;border-radius:8px;border:1px solid #ddd;font-size:1rem}
.actions-row{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.btn.large{padding:10px 14px;font-size:1rem}
.login-footer{z-index:10;padding:14px 18px;text-align:center;color:var(--muted);}
.login-footer .nav-link{color:var(--muted);text-decoration:none}

@media(max-width:520px){
    .login-panel{margin:20px;padding:20px}
    .login-header{padding:12px}
}
.modal h3{margin-bottom:8px}
.modal .field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.modal input{padding:10px;border-radius:8px;border:1px solid #ddd}
.modal .actions{display:flex;gap:8px;justify-content:flex-end}

/* Responsive: at larger widths show nav inline and hide mobile menu */
@media(min-width:768px){
    .nav{position:static;display:block;background:transparent;padding:0;box-shadow:none}
    .nav-inline{display:flex}
    .nav a{display:inline-block;padding:0}
    .hamburger{display:none}
}

/* small tweaks for very small screens */
@media(max-width:420px){
    .hero h1{font-size:1.4rem}
}

/* Toast / notice for login-required actions */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);z-index:80;display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#20140d,#2b1a12);color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.45);border:1px solid rgba(205,163,75,0.12);opacity:0;pointer-events:none;transition:opacity .26s ease,transform .26s ease}
.toast.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.toast .toast-inner{font-weight:700}

@media(min-width:768px){
    .toast{bottom:28px}
}

/* Notice modal for unimplemented features */
.notice-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:240}
.notice-modal{background:#fff;color:#1b1816;padding:18px;border-radius:10px;max-width:420px;width:100%;box-shadow:0 12px 36px rgba(0,0,0,0.5)}
.notice-modal h3{margin:0 0 8px}
.notice-modal p{color:#333}