@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

:root {
  --color-pink: #fd31b5;
  --color-cyan: #11ffff;
  --color-orange: #ff461e;
}

/* Text unselectable */
body, .container, .menu-section, .cart-section { user-select: none; }
img { -webkit-user-drag: none; pointer-events: none; }

html, body {
  height: 100%;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(45deg, var(--color-pink), var(--color-cyan), var(--color-orange));
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

/* Container */
.container { max-width: 1600px; margin: 20px auto; padding: 40px; background: rgba(255,255,255,0.95); border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,0.2); display:flex; flex-direction:column; gap:30px; }

/* Discount toggle */
.discount-toggle { text-align:center; font-size:1.2rem; margin-bottom:20px; }
.toggle-group { display:flex; justify-content:center; gap:30px; margin-bottom:10px; }
.toggle { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle input[type="checkbox"] { display:none; }
.toggle .slider { width:20px; height:20px; border-radius:50%; background:#ddd; transition:0.3s; }
.toggle input:checked + .slider { background: var(--color-pink); }
#custom-discount-container { margin-top:10px; }
.hidden { display:none; }
#custom-discount { width:80px; padding:5px; border-radius:8px; border:1px solid #ccc; text-align:center; }

/* Menu Sections */
.menu-sections { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.menu-section { background:#fff; padding:20px; border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1); }
.menu-section h2 { text-align:center; font-size:1.5rem; color:var(--color-pink); border-bottom:2px solid var(--color-cyan); margin-bottom:15px; padding-bottom:10px; }
.menu-item { display:flex; justify-content:space-between; align-items:center; background:#f8f9fa; padding:10px; margin-bottom:10px; border-radius:12px; border:1px solid #ddd; transition: transform 0.2s, box-shadow 0.2s; }
.menu-item:hover { transform:translateY(-5px); box-shadow:0 8px 12px rgba(0,0,0,0.2); }
.add-to-cart { background:var(--color-orange); color:white; border:none; padding:6px 12px; cursor:pointer; border-radius:6px; transition: all 0.2s; }
.add-to-cart:hover { background:var(--color-pink); transform:scale(1.05); }

/* Cart Section */
.cart-section { background:#fff; padding:20px; border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1); margin-bottom:20px; }
.cart-section h2 { text-align:center; font-size:1.8rem; color:var(--color-orange); margin-bottom:15px; }
#cart-items { list-style:none; padding:0; margin:0; }
#cart-items li { display:grid; grid-template-columns:2fr 2fr 1fr auto; align-items:center; background:#f8f9fa; border:1px solid #ddd; border-radius:8px; padding:10px; margin-bottom:10px; font-size:1.1rem; gap:15px; }
#cart-items li span:first-child { font-weight:500; }
.quantity-controls { display:flex; align-items:center; gap:8px; }
.quantity-controls button { background:var(--color-pink); color:#fff; border:none; padding:6px 12px; border-radius:6px; cursor:pointer; transition: all 0.2s; }
.quantity-controls button:hover { background:var(--color-orange); transform:scale(1.05); }
.quantity-controls input { width:50px; padding:5px; text-align:center; border-radius:6px; border:1px solid #ccc; }
#cart-items li button:last-child { background:var(--color-cyan); color:#000; border:none; padding:6px 12px; border-radius:6px; cursor:pointer; transition:all 0.2s; }
#cart-items li button:last-child:hover { background:var(--color-orange); color:#fff; transform:scale(1.05); }
#total-container { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:20px; }
#total { font-weight:bold; font-size:1.5rem; color:var(--color-pink); }
#copy-total-btn { background:var(--color-cyan); color:#000; border:none; padding:6px 12px; border-radius:6px; cursor:pointer; transition:all 0.2s; }
#copy-total-btn:hover { background:var(--color-orange); color:#fff; transform:scale(1.05); }
.reload-button { background:var(--color-cyan); color:#000; border:none; padding:12px 24px; cursor:pointer; border-radius:8px; font-size:1.2rem; margin-top:20px; transition: all 0.2s; }
.reload-button:hover { background:var(--color-orange); color:#fff; transform:scale(1.05); }

/* Dark/Light Mode Button */
#theme-toggle-btn { position:fixed; top:20px; right:20px; z-index:999; background:var(--color-cyan); color:#000; border:none; padding:10px 14px; border-radius:50%; cursor:pointer; font-size:1.2rem; transition:all 0.3s; }
#theme-toggle-btn:hover { background:var(--color-orange); color:#fff; transform:scale(1.1); }

/* Dark Mode Styles */
body.dark-mode { background:#121212; color:#f0f0f0; }
body.dark-mode .container { background:#1e1e1e; }
body.dark-mode .menu-section,
body.dark-mode .cart-section { background:#2a2a2a; }
body.dark-mode .menu-item,
body.dark-mode #cart-items li { background:#333; border-color:#444; }
body.dark-mode .add-to-cart { background:#ff461e; }
body.dark-mode #copy-total-btn,
body.dark-mode .reload-button { background:#11ffff; }