/* ============================================================
   BEL MIZEN — CRAV-STYLE REDESIGN (bold cream / red / yellow)
   Loads LAST on every page so it wins the cascade.
   Inspired by cravburgers.shop: warm cream canvas, huge red
   outlined display type, chunky brand blocks, big central food,
   sticker badges, and lively cursor-follow ingredients.
   ============================================================ */

:root{
  --crav-cream:#f3e6cf;
  --crav-cream2:#efe0c3;
  --crav-red:#e0342b;
  --crav-red2:#c62a22;
  --crav-yellow:#f5b400;
  --crav-ink:#1b1410;
  --crav-card:#fffdf6;
  --crav-line:#e6d3ab;
  --crav-shadow:0 22px 55px rgba(60,30,0,.16);
}

/* ---------- canvas ---------- */
body{
  background:
    radial-gradient(circle at 12% 8%, rgba(245,180,0,.14), transparent 30%),
    radial-gradient(circle at 92% 16%, rgba(224,52,43,.10), transparent 26%),
    radial-gradient(circle at 50% 105%, rgba(245,180,0,.12), transparent 30%),
    var(--crav-cream) !important;
  animation:none !important;
  color:var(--crav-ink);
}
body:before{ display:none !important; }

/* ---------- topbar ---------- */
.topbar{
  background:rgba(243,230,207,.9) !important;
  border-bottom:3px solid var(--crav-ink) !important;
  backdrop-filter:blur(14px);
}
.brandName{
  font-weight:950 !important;
  letter-spacing:-.03em;
  color:var(--crav-red) !important;
  font-size:26px !important;
}
nav a, .langBtn{
  color:var(--crav-ink);
  font-weight:900;
  border-radius:999px;
}
nav a:hover, .langBtn:hover{
  background:var(--crav-red) !important;
  color:#fff !important;
}
nav a[href="offers.html"]{
  background:var(--crav-yellow);
  color:var(--crav-ink);
  box-shadow:0 4px 0 var(--crav-ink);
}
nav a[href="offers.html"]:hover{ background:var(--crav-red) !important; color:#fff !important; }
.print-link{ background:var(--crav-yellow) !important; border-color:var(--crav-ink) !important; color:var(--crav-ink) !important; }

/* ---------- hero ---------- */
.hero{ min-height:84vh; }
.badge{
  background:var(--crav-yellow) !important;
  border:3px solid var(--crav-ink) !important;
  color:var(--crav-ink) !important;
  font-weight:950;
  border-radius:999px;
  box-shadow:0 5px 0 var(--crav-ink);
  transform:rotate(-3deg);
  padding:10px 18px !important;
}
.hero h1{
  font-weight:950;
  letter-spacing:-.05em;
  line-height:.9;
  color:var(--crav-ink);
}
.hero h1 b, .goldText{
  background:none !important;
  -webkit-text-fill-color:var(--crav-red) !important;
  color:var(--crav-red) !important;
  animation:none !important;
  -webkit-text-stroke:2px var(--crav-red);
  text-shadow:6px 6px 0 rgba(245,180,0,.35);
}
.hero p{ color:#4b3c2c; font-weight:600; }

.btn, button{
  border-radius:999px;
  font-weight:950;
  border:3px solid var(--crav-ink) !important;
  box-shadow:0 6px 0 var(--crav-ink) !important;
  transition:.15s;
}
.btn:hover, button:hover{ transform:translateY(-2px); box-shadow:0 8px 0 var(--crav-ink) !important; }
.btn:not(.ghost):not(.whatsapp), button:not(.ghost){
  background:var(--crav-red) !important; color:#fff !important;
}
.btn.ghost, .ghost{
  background:#fff !important; color:var(--crav-ink) !important;
}
.btn.whatsapp, .whatsapp{ background:#21c45a !important; color:#fff !important; }

/* ---------- hero food block ---------- */
.heroLogo{
  background:linear-gradient(150deg,var(--crav-red) 0%,var(--crav-red2) 55%,#8f1d17 100%) !important;
  border:4px solid var(--crav-ink) !important;
  border-radius:46px !important;
  box-shadow:0 20px 0 var(--crav-ink), var(--crav-shadow) !important;
  overflow:hidden;
}
.heroLogo:before{
  background:conic-gradient(from 0deg,transparent,#ffffff22,transparent,#f5b40055,transparent) !important;
}
.heroLogo img{ filter:drop-shadow(0 30px 40px rgba(0,0,0,.5)); }

/* ---------- sections & cards ---------- */
.section{
  background:var(--crav-card) !important;
  border:3px solid var(--crav-ink) !important;
  border-radius:30px !important;
  box-shadow:0 12px 0 rgba(27,20,16,.9) !important;
}
.section-title{
  font-weight:950; letter-spacing:-.04em; color:var(--crav-ink);
}
.section-title:after{
  content:""; display:block; width:90px; height:8px; margin-top:10px;
  background:repeating-linear-gradient(90deg,var(--crav-red) 0 18px, var(--crav-yellow) 18px 36px);
  border-radius:99px; border:2px solid var(--crav-ink);
}
.section-sub{ color:#5b4c39; font-weight:600; }

.subhead{
  background:linear-gradient(90deg,var(--crav-ink),#3a1408) !important;
  border:3px solid var(--crav-ink) !important;
  color:#fff !important;
}

.card, .cards article{
  background:#fff !important;
  border:3px solid var(--crav-ink) !important;
  border-radius:26px !important;
  box-shadow:0 8px 0 var(--crav-ink) !important;
  transition:.18s;
}
.card:hover{
  transform:translateY(-6px) rotate(-.4deg);
  box-shadow:0 14px 0 var(--crav-ink) !important;
}
.card h3{ color:var(--crav-ink); font-weight:950; letter-spacing:-.02em; }
.price{
  background:var(--crav-yellow) !important;
  color:var(--crav-ink) !important;
  border:3px solid var(--crav-ink) !important;
  border-radius:14px !important;
  font-weight:950;
  box-shadow:0 4px 0 var(--crav-ink);
}
.img{ border:3px solid var(--crav-ink) !important; border-radius:20px !important; background:#fff6d8 !important; }

/* offer cards pop */
.offerRibbon{
  background:var(--crav-red) !important; color:#fff !important;
  border:3px solid var(--crav-ink) !important; box-shadow:0 4px 0 var(--crav-ink);
  font-weight:950;
}

/* inputs */
.input,.select,textarea{
  border:3px solid var(--crav-ink) !important;
  border-radius:16px !important;
  background:#fff !important;
}
.input:focus,.select:focus,textarea:focus{
  border-color:var(--crav-red) !important;
  box-shadow:0 0 0 4px rgba(224,52,43,.18) !important;
}
.totals div,.line{ background:#fff7d8 !important; border:2px solid var(--crav-line) !important; }

/* floating WhatsApp */
.wa{
  background:#21c45a !important;
  border:3px solid var(--crav-ink) !important;
  box-shadow:0 6px 0 var(--crav-ink) !important;
  font-weight:950;
}

/* footer */
.footer{ color:#5b4c39; font-weight:700; }
.socials a{
  background:var(--crav-red) !important;
  border:3px solid var(--crav-ink) !important;
  box-shadow:0 4px 0 var(--crav-ink);
}

/* ---------- sticker badges (Crav flair) ---------- */
.cravSticker{
  position:absolute; z-index:3;
  background:var(--crav-yellow); color:var(--crav-ink);
  font-weight:950; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 14px; border:3px solid var(--crav-ink); border-radius:16px;
  box-shadow:0 5px 0 var(--crav-ink);
  transform:rotate(-6deg);
  animation:stickerWobble 4s ease-in-out infinite;
}
.cravSticker.alt{ background:var(--crav-red); color:#fff; transform:rotate(5deg); animation-delay:1.2s; }
@keyframes stickerWobble{ 0%,100%{transform:rotate(-6deg) translateY(0)} 50%{transform:rotate(-3deg) translateY(-8px)} }
.cravSticker.alt{ animation-name:stickerWobble2 }
@keyframes stickerWobble2{ 0%,100%{transform:rotate(5deg) translateY(0)} 50%{transform:rotate(2deg) translateY(-8px)} }

/* ---------- cursor-follow floaties: BIGGER + more visible ---------- */
.bmFloaties{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.bmFloat{
  position:absolute; height:auto;
  background:transparent !important;
  object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(60,20,0,.35));
  opacity:.95;
  will-change:transform;
}

/* keep readable on small screens */
@media (max-width:900px){
  .bmFloaties{ display:none; }
  .hero h1{ letter-spacing:-.04em; }
}
@media (prefers-reduced-motion: reduce){
  .cravSticker, .bmFloat{ animation:none !important; }
}

/* ---------- fly-to-cart dot ---------- */
.bmFlyDot{
  position:fixed; z-index:9999; width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%; pointer-events:none;
  background:var(--crav-yellow); border:3px solid var(--crav-ink);
  box-shadow:0 8px 20px rgba(60,20,0,.4);
  display:grid; place-items:center; overflow:hidden;
}
.bmFlyDot img{ width:100%; height:100%; object-fit:cover; }

/* offer add button feedback */
.offerAddBtn.added{ background:#21c45a !important; transform:scale(.94); }

/* ---------- scroll-reveal entrance ---------- */
@keyframes bmRise{ from{opacity:0; transform:translateY(28px) scale(.98)} to{opacity:1; transform:none} }
.bmRiseIn{ animation:bmRise .6s cubic-bezier(.22,.9,.3,1) both; }

/* ---------- card wobble on hover (Crav energy) ---------- */
.card:hover, .cards article:hover, .offerCard:hover{
  animation:bmCardPop .3s ease;
}
@keyframes bmCardPop{ 0%{transform:translateY(-6px) rotate(0)} 50%{transform:translateY(-9px) rotate(.5deg)} 100%{transform:translateY(-6px) rotate(-.4deg)} }

/* ---------- hero title entrance ---------- */
.hero h1{ animation:bmHeroIn .7s cubic-bezier(.2,.9,.3,1) both; }
@keyframes bmHeroIn{ from{opacity:0; transform:translateY(40px) skewY(2deg)} to{opacity:1; transform:none} }

/* ---------- section titles underline sweep ---------- */
.section-title{ position:relative; }

/* ---------- button press bounce ---------- */
.btn:active, button:active{ transform:translateY(2px) !important; box-shadow:0 2px 0 var(--crav-ink) !important; }

/* ---------- nav link slide-underline ---------- */
nav a{ position:relative; }
nav a:not([href="offers.html"]):after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:3px;
  background:var(--crav-red); border-radius:99px; transform:scaleX(0); transform-origin:left; transition:.25s;
}
nav a:not([href="offers.html"]):hover:after{ transform:scaleX(1); }

/* ---------- offer card image zoom ---------- */
.offerCard{ overflow:hidden; }
.offerCard .offerImg{ overflow:hidden; border-radius:20px; }
.offerCard .offerImg img{ transition:transform .5s cubic-bezier(.2,.9,.3,1); }
.offerCard:hover .offerImg img{ transform:scale(1.07) rotate(-1deg); }

@media (prefers-reduced-motion: reduce){
  .bmRiseIn, .hero h1, .card:hover, .offerCard:hover{ animation:none !important; }
}

/* ---------- steaming dish page background (very low opacity) ---------- */
body:after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url("../images/watermarks/steam-dish.webp") center 30%/cover no-repeat;
  opacity:.17;
}
body.darkMode:after{ opacity:.12; }

/* let the steaming dish breathe through panels */
.section{ background:rgba(255,253,246,.88) !important; }
.feature{ background:rgba(255,255,255,.86); }