/* ============ BASE CSS VARIABLES (fallback for any theme) ============ */
:root {
  /* Core palette - overridden by themes.css [data-menu-theme] */
  --bg: #0a0a0e;
  --card: #14141a;
  --hover: #1a1a22;
  --txt: #f5f5f7;
  --sec: #a0a0b0;
  --brd: rgba(255,255,255,0.08);
  --acc: #00d4ff;  /* 💙 Cyan accent - default to ocean blue */
  --blue: #00a8cc; /* 💙 Ocean blue */
  --sand: #ffd700; /* ✨ Gold for prices */
  --primary: var(--acc);
  --header-bg: rgba(10,10,14,0.85);
  --header-text: var(--txt);
  --btn-bg: var(--card);
  --inp: rgba(255,255,255,0.05);
  --cat-ovl: linear-gradient(to top, rgba(10,10,14,0.85) 0%, rgba(10,10,14,0.3) 50%, transparent 100%);
  --sea: linear-gradient(180deg, #004e6e 0%, #0077b6 50%, #00b4d8 100%);
  --sh: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.2);
  --card-radius: 16px;
  --btn-radius: 50px;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Legacy data-theme support (deprecated - use data-menu-theme) */
html[data-theme="light"] {
  --bg: #f8f9fa; --card: #fff; --hover: #f0f1f3; --txt: #1a1a1e; --sec: #6c757d;
  --brd: rgba(0,0,0,0.08); --acc: #1a1a1e; --primary: #1a1a1e;
  --header-bg: rgba(248,249,250,0.92); --header-text: #1a1a1e;
  --sh: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --inp: rgba(0,0,0,0.03);
  --cat-ovl: linear-gradient(to top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--txt); line-height:1.5; transition:background .4s,color .4s; }

/* Header */
.header { position:fixed; top:0; width:100%; padding:16px 40px; display:flex; justify-content:space-between; align-items:center; z-index:1000; background:rgba(10,10,14,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--brd); }
[data-theme="light"] .header { background:rgba(248,249,250,.92); }
.logo { font-size:20px; font-weight:400; letter-spacing:2px; }
.tagline { font-size:12px; color:var(--sec); opacity:.8; margin-top:4px; }
.header-btns { display:flex; gap:10px; align-items:center; }
.btn { padding:10px 18px; border:1px solid var(--brd); background:var(--btn-bg, var(--card)); color:var(--txt); cursor:pointer; font-size:12px; letter-spacing:.5px; border-radius:var(--btn-radius, 50px); transition:all .3s ease; box-shadow:var(--sh, 0 2px 8px rgba(0,0,0,.15)); white-space:nowrap; }
.btn:hover { background:var(--hover); border-color:var(--acc); transform:translateY(-1px); }
.btn-primary { background:var(--primary, var(--acc)); color:var(--bg); border:none; font-weight:500; box-shadow:0 4px 16px rgba(0,212,255,0.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,212,255,0.5); }
.theme-toggle { width:42px; height:42px; border-radius:50%; border:1px solid var(--brd); background:var(--btn-bg, var(--card)); color:var(--acc, var(--txt)); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; transition:all .3s ease; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.theme-toggle:hover { border-color:var(--acc); box-shadow:0 4px 16px rgba(0,212,255,0.3); transform:rotate(180deg) scale(1.1); }
.hamburger { display:none; flex-direction:column; cursor:pointer; gap:5px; padding:9px 10px; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.45); border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.45); }
.hamburger span { width:24px; height:2.5px; background:#fff; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.6); }
.dropdown { position:fixed; top:80px; right:40px; background:var(--card); border:1px solid var(--brd); padding:16px; min-width:230px; border-radius:16px; display:none; flex-direction:column; gap:6px; z-index:1200; box-shadow:0 18px 50px rgba(0,0,0,.6); }
.dropdown.active { display:flex; }
.dropdown .btn { text-align:left; border:none; border-bottom:1px solid var(--brd); border-radius:10px; padding:12px 16px; }
.dropdown .btn:last-child { border-bottom:none; }

/* Main */
.main { margin-top:90px; padding:30px 40px; max-width:1400px; margin-left:auto; margin-right:auto; }
.sec { display:none; } .sec.active { display:block; animation:fadeIn .4s; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* Categories */
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cat-card { position:relative; height:280px; background:var(--card); border-radius:var(--card-radius, 16px); overflow:hidden; cursor:pointer; transition:all .35s ease; box-shadow:var(--sh); border:1px solid var(--brd); backdrop-filter:blur(8px); }
.cat-card:hover { transform:translateY(-4px); border-color:var(--acc); box-shadow:0 12px 40px rgba(0,212,255,0.25), 0 0 30px rgba(0,212,255,0.1); }
.cat-card img { width:100%; height:100%; object-fit:cover; opacity:1; transition:.5s; }
.cat-card:hover img { opacity:.9; transform:scale(1.03); }
.cat-overlay { position:absolute; inset:0; background:var(--cat-ovl); display:flex; flex-direction:column; justify-content:space-between; padding:24px; }
.cat-title { font-size:26px; font-weight:400; letter-spacing:1.5px; color:var(--txt); text-shadow:0 0 10px rgba(0,0,0,.8),0 0 20px rgba(0,0,0,.6),2px 2px 4px rgba(0,0,0,.9); }
.cat-arrow { font-size:28px; opacity:.9; color:var(--txt); }

/* Menu Section */
.menu-sec { display:none; } .menu-sec.active { display:block; animation:fadeIn .4s; }
.sec-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; padding-bottom:16px; border-bottom:1px solid var(--brd); }
.back-btn { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; font-weight:600; color:#fff; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.4); padding:9px 18px; border-radius:50px; box-shadow:0 4px 16px rgba(0,0,0,.45); backdrop-filter:blur(8px); transition:.25s; white-space:nowrap; }
.back-btn:hover { color:#fff; background:rgba(0,0,0,.7); border-color:var(--acc); transform:translateX(-3px); }
.tabs { display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap; }
.tab { padding:8px 16px; border:1px solid var(--brd); background:var(--btn-bg, var(--card)); cursor:pointer; border-radius:var(--btn-radius, 50px); font-size:13px; transition:all .3s ease; color:var(--txt); backdrop-filter:blur(4px); }
.tab:hover, .tab.active { border-color:var(--acc); background:var(--acc); color:#0a1628; box-shadow:0 4px 16px rgba(0,212,255,0.3); }
.items-grid { display:grid; gap:16px; }
.item { background:var(--card); padding:18px; border-radius:var(--card-radius, 14px); border:1px solid var(--brd); display:flex; gap:18px; align-items:center; cursor:pointer; transition:all .3s ease; box-shadow:var(--sh); backdrop-filter:blur(8px); }
.item:hover { background:var(--hover); border-color:var(--acc); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,212,255,0.2); }
.item img { width:90px; height:90px; border-radius:12px; object-fit:cover; flex-shrink:0; border:1px solid var(--brd); }
.item-info { flex:1; } .item-info h3 { font-size:17px; font-weight:400; margin-bottom:6px; }
.item-desc { font-size:13px; color:var(--sec); line-height:1.5; margin-bottom:8px; }
.item-meta { font-size:11px; color:var(--sec); opacity:.7; }
.item-right { text-align:right; min-width:100px; }
.item-price { font-size:20px; font-weight:600; margin-bottom:10px; color:var(--sand, var(--txt)); }
.add-btn { padding:12px 20px; background:var(--btn-bg, transparent); border:1px solid var(--brd); color:var(--txt); cursor:pointer; font-size:13px; font-weight:500; border-radius:var(--btn-radius, 50px); transition:all .3s ease; }
.add-btn:hover { background:var(--acc); color:#0a1628; border-color:var(--acc); box-shadow:0 4px 16px rgba(0,212,255,0.3); transform:translateY(-1px); }

/* Modals */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(10,22,40,.9); backdrop-filter:blur(10px); z-index:2000; justify-content:center; align-items:center; }
.modal.active { display:flex; animation:fadeIn .3s; }
.modal-box { background:var(--card); padding:30px; max-width:580px; width:92%; max-height:85vh; overflow-y:auto; border-radius:var(--card-radius, 18px); border:1px solid var(--brd); box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,212,255,0.1); backdrop-filter:blur(12px); }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--brd); }
.close-modal { font-size:26px; cursor:pointer; background:none; border:none; color:var(--txt); opacity:.7; transition:.3s; }
.close-modal:hover { opacity:1; transform:rotate(90deg); }
.cart-item { display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--brd); }
.qty-ctrl { display:flex; align-items:center; gap:10px; }
.qty-btn { width:30px; height:30px; border:1px solid var(--brd); background:var(--bg); color:var(--txt); cursor:pointer; border-radius:50%; font-size:14px; transition:.3s; }
.qty-btn:hover { background:var(--hover); }
.cart-total { margin-top:24px; padding-top:16px; border-top:2px solid rgba(255,255,255,.1); font-size:22px; text-align:right; font-weight:300; }
.order-opts { margin-top:24px; }
.order-opts h3 { margin-bottom:14px; font-size:15px; font-weight:400; }
.order-opts textarea, .order-opts select { width:100%; padding:14px; background:var(--inp); border:1px solid var(--brd); color:var(--txt); margin-bottom:12px; font-family:inherit; border-radius:10px; }
.chk-group { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.chk-group input { width:16px; height:16px; cursor:pointer; accent-color:var(--acc); }
.delivery-toggle { display:flex; gap:12px; margin-bottom:20px; }
.del-opt { flex:1; padding:16px; border:1px solid var(--brd); border-radius:12px; cursor:pointer; transition:.3s; text-align:center; background:var(--card); }
.del-opt:hover { border-color:var(--acc); transform:translateY(-2px); }
.del-opt.active { border-color:var(--blue); background:rgba(0,180,216,.1); }
.del-opt .icon { font-size:28px; margin-bottom:8px; }
.del-opt h4 { font-size:14px; font-weight:500; margin-bottom:4px; }
.del-opt p { font-size:11px; color:var(--sec); }

/* Cart Icon */
.cart-icon { position:fixed; bottom:30px; right:30px; width:58px; height:58px; background:var(--btn-bg, var(--card)); color:var(--txt); border-radius:50%; display:flex; justify-content:center; align-items:center; cursor:pointer; font-size:24px; z-index:999; border:1px solid var(--brd); box-shadow:var(--sh); transition:all .3s ease; backdrop-filter:blur(8px); }
.cart-icon:hover { border-color:var(--acc); box-shadow:0 0 20px rgba(0,212,255,0.3); transform:scale(1.1) translateY(-3px); }
.cart-count { position:absolute; top:-4px; right:-4px; background:#e63946; color:#fff; width:22px; height:22px; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:11px; font-weight:600; border:2px solid var(--bg); }

/* Booking */
.booking-form { display:none; } .booking-form.active { display:block; animation:fadeIn .4s; }
.form-group { margin-bottom:18px; } .form-group label { display:block; margin-bottom:6px; font-size:13px; color:var(--sec); }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:14px; background:var(--inp); border:1px solid var(--brd); color:var(--txt); font-family:inherit; border-radius:10px; }
.submit-btn { width:100%; padding:16px; background:var(--acc); color:var(--bg); border:none; cursor:pointer; font-size:13px; text-transform:uppercase; letter-spacing:1px; border-radius:10px; font-weight:500; transition:.3s; }
.submit-btn:hover { background:#fff; transform:translateY(-1px); }

/* Notifications */
.notif { position:fixed; top:90px; right:20px; background:var(--card); color:var(--txt); padding:14px 22px; border-radius:12px; display:none; z-index:3000; border:1px solid var(--brd); box-shadow:var(--sh); animation:slideIn .4s; font-size:14px; }
.notif.show { display:block; }
@keyframes slideIn { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }

/* Beach Modal */
.beach-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.85); backdrop-filter:blur(10px); z-index:3500; justify-content:center; align-items:center; }
.beach-modal.active { display:flex; animation:fadeIn .3s; }
.beach-box { background:var(--card); max-width:900px; width:95%; max-height:90vh; overflow-y:auto; border-radius:20px; border:1px solid var(--brd); box-shadow:0 24px 80px rgba(0,0,0,.8); position:relative; }
.beach-close { position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:none; background:rgba(0,0,0,.6); color:#fff; font-size:20px; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; transition:.3s; }
.beach-close:hover { background:rgba(0,0,0,.9); transform:rotate(90deg); }
.beach-head { padding:24px 30px; border-bottom:1px solid var(--brd); text-align:center; }
.beach-head h2 { font-size:24px; font-weight:300; letter-spacing:1px; margin-bottom:8px; }
.beach-head p { font-size:13px; color:var(--sec); }
.beach-map { padding:30px; position:relative; }
.sea-ind { width:100%; height:80px; background:var(--sea); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; position:relative; overflow:hidden; }
.sea-ind::before { content:'🌊'; font-size:40px; opacity:.8; animation:wave 2s ease-in-out infinite; }
.sea-ind span { position:absolute; color:#fff; font-size:18px; font-weight:500; letter-spacing:2px; text-shadow:0 2px 8px rgba(0,0,0,.3); }
@keyframes wave { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.beach-rows { display:flex; flex-direction:column; gap:16px; }
.beach-row { display:flex; align-items:center; gap:12px; }
.row-label { width:40px; font-size:14px; font-weight:600; color:var(--sand); text-align:center; }
.lounge-chairs { display:flex; gap:10px; flex:1; justify-content:center; }
.chair { width:50px; height:70px; background:linear-gradient(180deg,#f5deb3 0%,#d4a574 100%); border-radius:8px 8px 12px 12px; cursor:pointer; transition:.3s; border:2px solid transparent; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.chair::before { content:'🏖️'; font-size:20px; margin-bottom:4px; }
.chair span { font-size:11px; font-weight:600; color:#5a4a3a; }
.chair:hover { transform:translateY(-4px) scale(1.05); }
.chair.selected { border-color:var(--blue); background:linear-gradient(180deg,#90e0ef 0%,#00b4d8 100%); box-shadow:0 8px 24px rgba(0,180,216,.5); }
.chair.selected span { color:#fff; }
.chair.occupied { background:linear-gradient(180deg,#e0e0e0 0%,#b0b0b0 100%); cursor:not-allowed; opacity:.5; }
.chair.occupied::before { content:'❌'; }
.chair.occupied span { display:none; }
.beach-legend { display:flex; justify-content:center; gap:24px; margin-top:24px; padding-top:20px; border-top:1px solid var(--brd); }
.leg-item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sec); }
.leg-chair { width:30px; height:40px; border-radius:6px 6px 8px 8px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.leg-chair.av { background:linear-gradient(180deg,#f5deb3 0%,#d4a574 100%); }
.leg-chair.sel { background:linear-gradient(180deg,#90e0ef 0%,#00b4d8 100%); }
.leg-chair.occ { background:linear-gradient(180deg,#e0e0e0 0%,#b0b0b0 100%); }
.beach-acts { padding:24px 30px; border-top:1px solid var(--brd); display:flex; gap:12px; justify-content:flex-end; }
.beach-acts .btn { min-width:140px; }
.sel-loc { background:var(--inp); padding:16px; border-radius:10px; margin:0 30px 20px; display:none; }
.sel-loc.active { display:block; }
.sel-loc h4 { font-size:14px; font-weight:500; margin-bottom:4px; }
.sel-loc p { font-size:12px; color:var(--sec); }

/* Status Badge */
.status-badge { position:fixed; bottom:100px; right:30px; background:var(--card); border:1px solid var(--brd); padding:12px 20px; border-radius:12px; box-shadow:var(--sh); display:none; z-index:998; }
.status-badge.active { display:flex; align-items:center; gap:10px; animation:slideIn .4s; }
.status-dot { width:10px; height:10px; border-radius:50%; background:#f4a261; }
.status-badge.accepted .status-dot { background:#2a9d8f; }

/* Bigger Order Button */
.add-btn { padding:12px 20px; font-size:13px; font-weight:500; letter-spacing:.5px; }

/* Dish Detail Modal */
.dish-modal-box { max-width:520px; padding:0; overflow:hidden; }
.dish-modal-box .close-modal { position:absolute; top:12px; right:12px; z-index:10; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; display:flex; align-items:center; justify-content:center; }
.dish-media { width:100%; height:280px; background:var(--bg); position:relative; overflow:hidden; }
.dish-media img { width:100%; height:100%; object-fit:cover; }
.dish-media video { width:100%; height:100%; object-fit:cover; }
.dish-info { padding:24px; }
.dish-info h2 { font-size:22px; font-weight:400; margin-bottom:8px; }
.dish-meta { display:flex; gap:16px; margin-bottom:12px; font-size:13px; color:var(--sec); }
.dish-meta span { display:flex; align-items:center; gap:4px; }
.dish-badges { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.dish-badge { padding:4px 10px; border-radius:20px; font-size:11px; font-weight:500; }
.dish-badge.veg { background:rgba(76,175,80,.15); color:#4caf50; border:1px solid rgba(76,175,80,.3); }
.dish-badge.halal { background:rgba(33,150,243,.15); color:#2196f3; border:1px solid rgba(33,150,243,.3); }
.dish-desc { font-size:14px; color:var(--sec); line-height:1.6; margin-bottom:16px; }
.dish-allergens { font-size:12px; color:#f4a261; margin-bottom:16px; padding:8px 12px; background:rgba(244,162,97,.1); border-radius:8px; border:1px solid rgba(244,162,97,.2); }
.dish-price { font-size:28px; font-weight:300; margin-bottom:16px; }
.dish-order-btn { width:100%; padding:18px; font-size:16px; font-weight:600; letter-spacing:1px; border-radius:14px; }

/* Rating Modal */
.rating-modal-box { max-width:440px; }
.rating-content { padding:0 0 10px; }
.rating-content p { text-align:center; color:var(--sec); margin-bottom:16px; }
.star-rating { display:flex; justify-content:center; gap:8px; margin-bottom:20px; }
.star-rating .star { font-size:40px; cursor:pointer; color:var(--brd); transition:.2s; }
.star-rating .star.active { color:#f4a261; transform:scale(1.1); }
.star-rating .star:hover { color:#f4a261; transform:scale(1.15); }
.rating-content textarea { width:100%; padding:12px; background:var(--inp); border:1px solid var(--brd); color:var(--txt); border-radius:10px; font-family:inherit; margin-bottom:16px; }
.tip-section { background:var(--inp); padding:16px; border-radius:12px; border:1px solid var(--brd); }
.tip-section h3 { font-size:15px; font-weight:400; margin-bottom:12px; text-align:center; }
.tip-buttons { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:12px; }
.tip-btn { padding:10px 16px; border:1px solid var(--brd); background:var(--card); color:var(--txt); cursor:pointer; border-radius:50px; font-size:13px; transition:.3s; }
.tip-btn:hover, .tip-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.tip-custom { display:flex; align-items:center; gap:8px; justify-content:center; }
.tip-custom input { width:120px; padding:10px; background:var(--card); border:1px solid var(--brd); color:var(--txt); border-radius:10px; text-align:center; font-size:16px; }
.tip-custom span { color:var(--sec); font-size:18px; }

/* Language Selector */
.lang-select { padding: 8px 12px; background: var(--card); border: 1px solid var(--brd); color: var(--txt); border-radius: 8px; cursor: pointer; font-size: 12px; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 26px; }

/* Icons with labels */
.has-icon { display: inline-flex !important; align-items: center; gap: 6px; }
.has-icon .ic-label { display: inline-block; }
[data-icon] svg { display: inline-block; vertical-align: middle; }

/* Prevent icon duplication */
[data-icon-processed] svg { pointer-events: none; }

/* Filters */
.filters-bar { margin-bottom:16px; }
.filter-toggle { padding:10px 20px; border:1px solid var(--brd); background:var(--card); color:var(--txt); cursor:pointer; border-radius:50px; font-size:13px; transition:.3s; }
.filter-toggle:hover { background:var(--hover); }
.filter-options { display:none; flex-wrap:wrap; gap:10px; align-items:center; padding:14px 0; }
.filter-options.open { display:flex; animation:fadeIn .3s; }
.filter-chip { display:flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--brd); background:var(--card); border-radius:50px; cursor:pointer; font-size:13px; transition:.3s; white-space:nowrap; }
.filter-chip:hover { background:var(--hover); }
.filter-chip input[type="checkbox"] { accent-color:var(--blue); width:16px; height:16px; cursor:pointer; }
.filter-range { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sec); }
.filter-range input[type="range"] { width:120px; accent-color:var(--blue); cursor:pointer; }

/* Promo Input */
.promo-input { display:flex; gap:8px; margin-top:12px; margin-bottom:4px; }
.promo-input input { flex:1; padding:12px 16px; background:var(--inp); border:1px solid var(--brd); color:var(--txt); border-radius:10px; font-size:14px; font-family:monospace; letter-spacing:2px; }
.promo-input .btn { white-space:nowrap; }
.promo-result { padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:8px; background:var(--inp); border:1px solid var(--brd); }

/* Responsive */
@media (max-width:900px) {
  .cat-grid { grid-template-columns:repeat(2,1fr); }
  .cat-card { height:240px; }
  .cat-title { font-size:20px; }
}
@media (max-width:600px) {
  .header { padding:12px 16px; }
  .hamburger { display:flex; }
  .header-btns .btn:not(.theme-toggle) { display:none; }
  .main { padding:16px; margin-top:96px; }
  /* Push the section header (with the back button) clear of the fixed top bar —
     no dark strip behind it, just spacing so the header never overlaps it. */
  .menu-sec.active { padding-top:14px; }
  .sec-header { background:transparent; border-bottom:1px solid var(--brd); }
  .sec-header h2 { font-size:18px; }
  .back-btn { font-size:13px; padding:8px 14px; }
  .cat-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .cat-card { height:180px; }
  .cat-title { font-size:16px; }
  .item { flex-direction:column; align-items:flex-start; }
  .item img { width:100%; height:160px; }
  .item-right { width:100%; display:flex; justify-content:space-between; align-items:center; }
  .cart-icon { bottom:16px; right:16px; width:50px; height:50px; font-size:20px; }
  .beach-map { padding:16px; }
  .lounge-chairs { flex-wrap:wrap; }
  .chair { width:45px; height:60px; }
  .beach-acts { flex-direction:column; }
  .beach-acts .btn { width:100%; }
}

/* ============ ORDER TRACKER ============ */
.tracker-box { max-width:500px; }
.tracker-content { padding:0 8px 8px; }
.tracker-order-num { text-align:center; font-size:18px; font-weight:700; color:var(--accent,#e63946); margin-bottom:20px; }
.tracker-timeline { position:relative; padding-left:30px; margin-bottom:20px; }
.tracker-timeline::before { content:''; position:absolute; left:14px; top:10px; bottom:10px; width:2px; background:var(--sec,#666); }
.timeline-step { position:relative; padding:10px 0; opacity:0.4; transition:opacity .3s; }
.timeline-step.active { opacity:1; }
.timeline-step.current .timeline-dot { background:var(--accent,#e63946); box-shadow:0 0 0 4px rgba(230,57,70,0.3); transform:scale(1.3); }
.timeline-dot { width:12px; height:12px; border-radius:50%; background:var(--sec,#666); position:absolute; left:-22px; top:14px; transition:all .3s; }
.timeline-step.active .timeline-dot { background:var(--primary,#4ade80); }
.timeline-info { margin-left:4px; }
.timeline-info strong { display:block; font-size:15px; margin-bottom:2px; }
.timeline-info span { font-size:13px; color:var(--sec,#999); }
.tracker-item { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:14px; }
.tracker-total { font-size:16px; font-weight:700; text-align:right; padding:12px 0; border-top:2px solid var(--accent,#e63946); margin-top:4px; }
.tracker-waiter { padding:10px 12px; background:rgba(255,255,255,0.05); border-radius:8px; margin:12px 0; font-size:14px; }
.tracker-actions { margin-top:16px; }

/* ============ REVIEWS IN DISH MODAL ============ */
.dish-reviews-summary { display:flex; align-items:center; gap:8px; margin:12px 0 4px; padding:8px 12px; background:rgba(255,255,255,0.05); border-radius:8px; }
.review-stars, .review-stars-sm { display:inline-flex; gap:1px; }
.star-icon { color:#555; font-size:16px; }
.star-icon.filled { color:#f5a623; }
.review-count { font-size:13px; color:var(--sec,#999); }
.dish-reviews-list { max-height:200px; overflow-y:auto; }
.dish-review { padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.dish-review-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.review-author { font-size:12px; color:var(--sec,#999); }
.review-text { font-size:13px; color:var(--sec,#ccc); margin:0; }
.review-stars-sm .star-icon { font-size:12px; }

/* ============ REVIEW MODAL ============ */
.review-modal-box { max-width:500px; }
.review-content { padding:0 8px; }
.review-type-tabs { display:flex; gap:8px; margin-bottom:16px; }
.review-tab { flex:1; padding:10px; border:1px solid rgba(255,255,255,0.15); border-radius:8px; background:transparent; color:var(--text,#fff); cursor:pointer; font-size:14px; transition:all .2s; }
.review-tab.active { background:var(--accent,#e63946); border-color:var(--accent,#e63946); }
.review-tab-content { display:none; }
.review-tab-content.active { display:block; }
.review-select { width:100%; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); color:var(--text,#fff); font-size:14px; margin-bottom:12px; }
.review-name-input { width:100%; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); color:var(--text,#fff); font-size:14px; margin-top:8px; box-sizing:border-box; }

/* ============ PROMO POPUP ============ */
.promo-popup-box { max-width:420px; text-align:center; overflow:hidden; padding:0; }
.promo-popup-img { width:100%; max-height:220px; overflow:hidden; }
.promo-popup-img img { width:100%; height:auto; display:block; object-fit:cover; }
.promo-popup-content { padding:24px 20px 20px; }
.promo-popup-badge { display:inline-block; background:var(--accent,#e63946); color:#fff; padding:4px 16px; border-radius:20px; font-size:14px; font-weight:700; margin-bottom:12px; }
.promo-popup-content h2 { margin:0 0 8px; font-size:22px; }
.promo-popup-content p { color:var(--sec,#999); margin:0 0 16px; font-size:14px; }
.promo-popup-btn { width:100%; padding:14px; font-size:16px; }

/* Guest Registration */
.guest-reg-box { max-width:400px; }
.guest-reg-content { padding:8px 0; }
.guest-reg-content p { color:var(--sec); margin-bottom:16px; font-size:14px; }
.guest-input { width:100%; padding:12px 16px; border:1px solid var(--brd); background:var(--inp); color:var(--txt); border-radius:10px; font-size:14px; margin-bottom:10px; }

/* My Orders Button */
.btn-orders { background:var(--blue); color:#fff; border:none; font-weight:500; }
.btn-orders:hover { background:#0096b7; }

/* My Orders Modal */
.my-orders-box { max-width:520px; max-height:80vh; overflow-y:auto; }
.my-orders-content { padding:4px 0; }
.my-order-card { background:var(--hover); border-radius:12px; padding:16px; margin-bottom:10px; border-left:4px solid var(--blue); }
.my-order-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.my-order-head strong { font-size:15px; }
.my-order-date { font-size:12px; color:var(--sec); }
.my-order-items { font-size:13px; color:var(--sec); margin-bottom:8px; }
.my-order-foot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.my-order-status { font-size:13px; }
.my-order-total { font-weight:600; font-size:15px; }