/* ====== RESET ====== */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #000 !important;
  color: #fff;
  overflow-x: hidden;
}
/* ====== BACKGROUND ====== */
.bg-glow {
  position: fixed;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(600px 600px at 15% 30%, rgba(140, 0, 255, 0.28), transparent 60%),
    radial-gradient(600px 600px at 85% 30%, rgba(0, 190, 255, 0.22), transparent 60%),
    radial-gradient(700px 700px at 50% 85%, rgba(0, 255, 160, 0.14), transparent 60%);
  filter: blur(22px);
  opacity: 0.9;
}

/* ====== TOP NAV ====== */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 10px 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.35));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ✅ zorgt dat menu ALTIJD binnen het scherm blijft */
.nav-inner {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;

  overflow-x: auto;
  white-space: nowrap;
  padding: 0 6px;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar {
  display: none;
}

.pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-weight: 600;
  font-size: 14px;
}

/* ====== WRAP ====== */
.wrap {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 14px 36px;
}

/* ====== HERO ====== */
.hero-card {
  border-radius: 26px;
  padding: 18px 16px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.hero-logo {
  border-radius: 26px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.hero-logo img {
  width: 100%;
  display: block;
}

.hero-pill {
  margin: 14px auto 14px;
  width: fit-content;          /* ✅ zorgt dat de pill niet “links blijft plakken” */
  display: flex;               /* ✅ niet inline-flex */
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #00ff7a !important;
  margin-right: 2px;
  display: inline-block !important;

animation: onlinePulse 1.6s ease-in-out infinite !important;

  box-shadow:
    0 0 10px rgba(0, 255, 122, 1) !important,
    0 0 28px rgba(0, 255, 122, 0.85) !important;
}

@keyframes onlinePulse {
  0% {
    transform: scale(0.75);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(0.75);
    opacity: 0.25;
  }
}

/* ====== SOCIAL TOP GRID ====== */
.social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.social-box {
  border-radius: 18px;
  padding: 12px 10px 10px;
  text-decoration: none;
  color: white;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}

/* ✅ extra NEON glow op socials boxen */
.social-box::before {
  content: "";
  position: absolute;
  inset: -60px;
  opacity: 0.85;
  filter: blur(20px);
  pointer-events: none;
  transform: translateZ(0);
}
.social-box.wa::before {
  background: radial-gradient(circle at 30% 30%, rgba(0, 255, 130, 0.55), transparent 60%);
}
.social-box.tg::before {
  background: radial-gradient(circle at 30% 30%, rgba(0, 180, 255, 0.55), transparent 60%);
}
.social-box.ig::before {
  background: radial-gradient(circle at 30% 30%, rgba(255, 0, 200, 0.50), transparent 60%);
}
.social-box.sg::before {
  background: radial-gradient(circle at 30% 30%, rgba(120, 150, 255, 0.55), transparent 60%);
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}

.social-name {
  text-align: center;
  margin-top: 6px;
  font-weight: 700;
  font-size: 13px;
  opacity: 0.95;
}

/* ====== ICONS (SVG) ====== */
.icon {
  width: 26px;
  height: 26px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.18));
}

/* WhatsApp */
.icon[data-icon="whatsapp"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M19.11 17.33c-.27-.14-1.58-.78-1.83-.87-.25-.09-.43-.14-.61.14-.18.27-.7.87-.86 1.05-.16.18-.32.2-.59.07-.27-.14-1.16-.43-2.2-1.36-.81-.72-1.36-1.61-1.52-1.88-.16-.27-.02-.42.12-.56.12-.12.27-.32.41-.48.14-.16.18-.27.27-.46.09-.18.05-.34-.02-.48-.07-.14-.61-1.48-.84-2.03-.22-.52-.44-.45-.61-.45h-.52c-.18 0-.48.07-.73.34-.25.27-.95.93-.95 2.27s.98 2.64 1.11 2.82c.14.18 1.92 2.93 4.66 4.11.65.28 1.16.45 1.56.58.65.21 1.24.18 1.7.11.52-.08 1.58-.65 1.8-1.28.22-.62.22-1.16.16-1.28-.07-.12-.25-.18-.52-.32zM16.02 3C8.84 3 3 8.83 3 16c0 2.3.6 4.46 1.66 6.34L3 29l6.88-1.8A12.93 12.93 0 0016.02 29C23.2 29 29 23.17 29 16S23.2 3 16.02 3zm0 23.6c-2.05 0-3.96-.6-5.58-1.64l-.4-.25-4.08 1.07 1.09-3.98-.26-.41A10.56 10.56 0 015.4 16C5.4 10.15 10.17 5.4 16.02 5.4c5.85 0 10.6 4.75 10.6 10.6 0 5.85-4.75 10.6-10.6 10.6z'/%3E%3C/svg%3E");
}

/* Telegram */
.icon[data-icon="telegram"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9.04 15.61 8.87 19c.34 0 .48-.14.66-.31l1.58-1.52 3.27 2.4c.6.33 1.02.16 1.17-.55l2.12-9.93c.2-.9-.33-1.27-.91-1.06L3.5 10.56c-.88.34-.87.83-.15 1.06l3.36 1.05 7.8-4.92c.37-.23.7-.1.42.13z'/%3E%3C/svg%3E");
}

/* Instagram */
.icon[data-icon="instagram"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 3.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 0 1 12 7.5zm0 2A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5zM17.75 6.25a.75.75 0 1 1-.75.75.75.75 0 0 1 .75-.75z'/%3E%3C/svg%3E");
}

/* Signal (chat bubble) */
.icon[data-icon="signal"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 3c-4.97 0-9 3.58-9 8 0 2.03.85 3.88 2.25 5.29L4 21l4.26-1.85C9.4 19.7 10.67 20 12 20c4.97 0 9-3.58 9-8s-4.03-9-9-9zm0 15c-1.17 0-2.28-.25-3.28-.7l-.47-.21-1.9.83.52-2-.33-.34C5.55 14.6 5 13.36 5 11c0-3.31 3.13-6 7-6s7 2.69 7 6-3.13 7-7 7z'/%3E%3C/svg%3E");
}

/* ====== SECTIONS ====== */
.section {
  margin-top: 22px;
}

.title {
  font-size: 54px;
  line-height: 1;
  margin: 18px 4px 14px;
  letter-spacing: -1px;
  opacity: 0.92;
}

/* MENU image only (zonder glascard) */
.media-only img {
  width: 100%;
  display: block;
  border-radius: 26px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65);
}

/* ====== PRIJS ====== */
.pricelist-card {
  width: 100%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.pricelist-card img {
  width: 100%;
  display: block;
  border-radius: 26px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65);
}

/* ✅ geen witte randen ooit */
img {
  background: transparent;
}

.pricelist-overlay {
  position: relative;
  margin-top: -44px;
  padding: 0 14px 14px;
}
.pl-sub {
  display: inline-block;
  font-weight: 700;
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 14px;
  border-radius: 999px;
}

/* ====== DELIVERY ====== */
.delivery-card {
  border-radius: 26px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.d-head {
  font-weight: 900;
  font-size: 20px;
  margin-bottom: 8px;
}
.d-line {
  opacity: 0.92;
  font-size: 17px;
  margin: 6px 0;
}
.divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 14px 0;
}

.cash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cash-text {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 18px;
}
.cash-strong {
  font-weight: 900;
}
.cash-soft {
  opacity: 0.9;
}
.cash-green {
  color: #00ff92;
  font-weight: 900;
  text-shadow: 0 0 16px rgba(0, 255, 146, 0.35);
}

.tikkie-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: white;
  font-weight: 800;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}

/* ====== CONTACT GRID (fix uitlijning) ====== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.contact-card {
  border-radius: 22px;
  padding: 14px;
  text-decoration: none;
  color: white;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.55);
  position: relative;
  overflow: hidden;
}

/* ✅ neon glow per app (onder) */
.contact-card::before {
  content: "";
  position: absolute;
  inset: -60px;
  opacity: 0.85;
  filter: blur(18px);
  pointer-events: none;
}
.contact-card.wa::before {
  background: radial-gradient(circle at 20% 30%, rgba(0, 255, 130, 0.55), transparent 60%);
}
.contact-card.tg::before {
  background: radial-gradient(circle at 20% 30%, rgba(0, 180, 255, 0.55), transparent 60%);
}
.contact-card.ig::before {
  background: radial-gradient(circle at 20% 30%, rgba(255, 0, 200, 0.50), transparent 60%);
}
.contact-card.sg::before {
  background: radial-gradient(circle at 20% 30%, rgba(120, 150, 255, 0.55), transparent 60%);
}

.cc-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* ✅ icon vakjes identiek + altijd dezelfde maat */
.cc-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.cc-icon .icon {
  width: 26px;
  height: 26px;
}

.cc-text {
  min-width: 0;
}
.cc-title {
  font-weight: 900;
  font-size: 18px;
  margin: 0;
}
.cc-sub {
  opacity: 0.7;
  font-weight: 600;
  font-size: 14px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer {
  margin-top: 16px;
  opacity: 0.35;
  text-align: center;
  font-weight: 700;
}

/* ====== MODAL ====== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.modal.open {
  display: block;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
}

.modal-box {
  position: relative;
  width: min(520px, calc(100% - 18px));
  margin: 12vh auto 0;
  border-radius: 22px;
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-title {
  font-weight: 900;
}
.modal-close {
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.07);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.modal-body {
  padding: 14px;
}
.modal-body img {
  width: 100%;
  display: block;
  border-radius: 16px;
}

.modal-actions {
  padding: 0 14px 14px;
}
.download-btn {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  color: white;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
/* ✅ force full black background overal */
body,
html {
  background: #000 !important;
}