/* ===========================================================
   MENU.CSS – Ravintola Carlos (Lappeenranta)
   =========================================================== */

/* 🔹 Perus */
body {
  font-family: 'Montserrat', Arial, sans-serif;
  margin: 0;
  line-height: 1.6;
  background: #0b0b0b;
  color: #f5f5f5;
  font-size: 16px;
}

/* ==== ITEM ==== */
.item {
  margin-bottom: 18px;
  padding: 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,215,0,0.3);
  transition: transform 0.3s, box-shadow 0.3s;
  font-size: 15px;
}
.item:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 0 16px rgba(255,215,0,0.25);
}
.item strong {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.item .price {
  float: right;
  font-size: 16px;
  font-weight: 700;
  color: #FFD700;
}
.item em {
  font-size: 13px;
  color: #bbb;
}

/* ==== UUTUUS BANNER ==== */
.uutuus-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70px;
  width: 100%;
  background: linear-gradient(90deg, #FFD700, #FF8C00);
  font-size: 22px;
  font-weight: 800;
  color: #000;
  text-align: center;
  padding: 0 20px;
  margin-top: 60px;
  border-top: 1px solid rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(0,0,0,0.15);
  line-height: 1.3;
}
@media (max-width: 900px) {
  .uutuus-banner { font-size: 20px; padding: 0 15px; }
}
@media (max-width: 600px) {
  .uutuus-banner { font-size: 18px; padding: 0 10px; line-height: 1.4; }
}

/* ==== AIOLI BURGER BANNER (soft refresh) ==== */
.aioli-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  width: 100%;
  background: #0b0f14;              /* saf siyah yerine koyu antrasit */
  font-size: 20px;
  font-weight: 800;
  color: #fff !important;
  text-align: center;
  padding: 12px 16px;
  margin-top: 20px;
  border-radius: 10px;              /* çok hafif daha yumuşak */
  animation: varrasFlames 1.6s infinite alternate;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 12px rgba(255,170,60,0.28);
  text-shadow: 0 0 3px #ff5a3c, 0 0 8px #ffb24a, 0 0 14px #ffd36b;
  line-height: 1.4;
  flex-wrap: wrap;
}

@keyframes varrasFlames {
  0%   { text-shadow: 0 0 2px #ff6a4d, 0 0 6px #ff8a3d, 0 0 10px #ffd36b; }
  50%  { text-shadow: 0 0 3px #ff9a3e, 0 0 10px #ffd36b, 0 0 16px #ff5a3c; }
  100% { text-shadow: 0 0 2px #ffd36b, 0 0 8px #ff6a4d, 0 0 14px #ff8a3d; }
}

@media (max-width: 900px) {
  .aioli-banner { font-size: 18px; padding: 10px 14px; }
}

@media (max-width: 600px) {
  .aioli-banner {
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 8px;
    animation: varrasFlames 2s infinite alternate;
  }
}

/* ==== FAQ ==== */
.carlos-faq {
  margin: 40px auto;
  max-width: 800px;
  padding: 0 20px 40px;
  overflow: visible !important;
}
.faq-item {
  border-bottom: 1px solid rgba(255,215,0,0.3);
  padding: 10px 0;
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  color: #FFD700;
  font-size: 18px;
  text-align: left;
  cursor: pointer;
  padding: 10px 0;
}
.faq-q:hover { color: #fff; }
.faq-a { padding: 0 0 10px 0; font-size: 15px; color: #ccc; }

/* ==== MOBILE NAV ==== */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #111;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding: 6px 0;
  border-top: 2px solid #FFD700;
  z-index: 9999;
  font-family: 'Montserrat', Arial, sans-serif;
}
.mobile-nav a {
  flex: 1;
  margin: 0 3px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-radius: 14px;
  padding: 8px 4px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  white-space: nowrap;
}
.mobile-nav a span { font-size: 18px; margin-bottom: 2px; }
.mobile-nav a:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(255,215,0,0.6);
}
.simple-btn {
  background: #222;
  border: 1px solid #FFD700;
  color: #FFD700;
}
.simple-btn:hover { background: #FFD700; color: #000; }
.call-btn {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  box-shadow: 0 0 10px rgba(0,114,255,0.4);
}
.call-btn:hover { box-shadow: 0 0 16px rgba(0,114,255,0.7); }
.map-btn {
  background: linear-gradient(135deg, #ff6a00, #ee0979, #ffd700);
}
.map-btn span { font-size: 16px; margin-bottom: 2px; }
.map-btn:hover { box-shadow: 0 0 16px rgba(255,0,128,0.7); }


/* ==== MENU CATEGORY SCROLL (Burger, Pizza, Kebabit jne.) ==== */
.nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
  z-index: 1000;
  border-bottom: 2px solid #FFD700;
  display: flex;
  align-items: center;
}
.nav-scroll {
  overflow-x: auto;
  white-space: nowrap;
  flex: 1;
}
.nav-scroll::-webkit-scrollbar { display: none; }

.nav-scroll ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 8px;
}
.nav-scroll ul li {
  flex: 0 0 auto;
  margin-right: 8px;
}
.nav-scroll ul li a {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 22px;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,215,0,0.4);
  transition: all 0.3s ease;
}
.nav-scroll ul li a:hover {
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  color: #000;
  box-shadow: 0 0 10px rgba(255,215,0,0.7);
}

/* 🔥 Burger (tai muu valittu kategoria) korostus */
.burger-fire {
  background: linear-gradient(135deg, #FF4500, #FF8C00);
  color: #fff !important;
  font-weight: 700;
  animation: flames 1s infinite alternate;
  box-shadow: 0 0 12px rgba(255,140,0,0.7);
}
@keyframes flames {
  0%   { text-shadow: 0 0 3px #FF6347, 0 0 6px #FF4500, 0 0 10px #FFD700; }
  50%  { text-shadow: 0 0 8px #FF8C00, 0 0 15px #FFD700, 0 0 20px #FF4500; }
  100% { text-shadow: 0 0 5px #FFD700, 0 0 12px #FF6347, 0 0 18px #FF4500; }
}
/* ============================================================
   🍪 COOKIE BANNER – yhteensopiva tumma/gold tyyli
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,215,0,0.25);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.6), inset 0 2px 10px rgba(255,215,0,0.05);
  color: #f1f1f1;
  font-family: 'Ubuntu', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 99999;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.5s ease;
}
.cookie-banner.visible {
  opacity: 1;
  transform: translateY(0);
}
.cookie-banner p {
  margin: 0 0 12px;
  color: #eaeaea;
  max-width: 780px;
}
.cookie-banner a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}
.cookie-banner a:hover {
  color: #ffcf40;
  text-shadow: 0 0 6px rgba(255,215,0,0.4);
}
.cookie-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
}
.cookie-btn.accept {
  background: linear-gradient(135deg,#ffe77a,#ffbf2f);
  color: #111;
  box-shadow: 0 4px 12px rgba(255,215,0,0.25);
}
.cookie-btn.accept:hover { transform: translateY(-2px); }
.cookie-btn.more {
  background: rgba(40,40,40,0.85);
  color: #ddd;
  border: 1px solid rgba(255,215,0,0.15);
}
.cookie-btn.more:hover {
  color: var(--gold);
  border-color: rgba(255,215,0,0.3);
  transform: translateY(-2px);
}
body.cookie-open {
  overflow: hidden;           /* 🔹 tıklanamaz alan */
  touch-action: none;
}
@media(max-width:600px){
  .cookie-banner{font-size:14px; padding:16px 14px 18px}
  .cookie-buttons{flex-direction:column; gap:8px; width:100%}
  .cookie-btn{width:100%}
}
.extras-box {
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,215,0,0.28);
  background: linear-gradient(180deg, rgba(255,215,0,0.03) 0%, rgba(0,0,0,0) 100%);
  font-size: 0.95rem;
  line-height: 1.5;
}

.extras-box h3 {
  margin-bottom: 14px;
  font-size: 1.35rem;
  font-weight: 600;
  color: #EAC46F;
  text-shadow: 0 0 6px rgba(255,215,0,0.25);
}

.extras-box p {
  margin: 8px 0;
}
.toppings-box {
  margin-top: 40px;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,0.25);
}

.toppings-box h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
  color: #E6C479;
}

.toppings-box p {
  margin: 6px 0;
  line-height: 1.5;
}
/* Sisältö ei jää mobiilinapin taakse */
@media (max-width: 900px) {
  body {
    padding-bottom: 90px;  /* mobile-nav yüksekliği kadar boşluk */
  }
}