*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0c0c0c;color:#fff;font-family:Arial,sans-serif}header{position:sticky;top:0;z-index:5;background:#111e;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:15px 6%;border-bottom:1px solid #292929}.logo{color:white;text-decoration:none;font-weight:900}.logo b,em{color:#e7b31a}nav{display:flex;gap:25px}nav a{color:#ddd;text-decoration:none}.pill,.btn{display:inline-block;padding:12px 18px;border-radius:30px;text-decoration:none;font-weight:800;border:0;cursor:pointer}.pill,.yellow{background:#e7b31a;color:#111}.red{background:#c62828;color:#fff}.hero{min-height:610px;padding:80px 8%;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;background:radial-gradient(circle at 80% 35%,#48160e,#0c0c0c 55%)}.tag{color:#e7b31a;font-weight:900;letter-spacing:2px}.hero h1{font-size:clamp(42px,7vw,78px);line-height:.98;margin:18px 0}.hero p{color:#bbb;font-size:17px}.herofood{height:360px;border-radius:35px;background:linear-gradient(145deg,#e72b20,#74100c);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;box-shadow:0 20px 60px #0008;transform:rotate(2deg);font-size:50px}.herofood strong{font-size:42px}.herofood small{font-size:15px;font-weight:bold}.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#171717;border-block:1px solid #292929}.stats div{text-align:center;padding:22px;border-right:1px solid #292929}.stats b{display:block;color:#e7b31a;font-size:25px}.stats span{color:#aaa}section{padding:75px 7%}.heading{text-align:center;max-width:700px;margin:auto auto 30px}.heading h2,.location h2,.contact h2{font-size:42px;margin:8px 0}.heading p,.location p,.contact p{color:#aaa}.tabs{display:flex;gap:8px;justify-content:center;overflow:auto;margin-bottom:25px}.tabs button{border:1px solid #444;background:#191919;color:#ddd;padding:10px 16px;border-radius:25px;cursor:pointer}.tabs button.active{background:#e7b31a;color:#111}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:#171717;border:1px solid #292929;border-radius:18px;padding:18px}.card h3{margin:0 0 6px}.desc{color:#999;font-size:14px;min-height:40px}.prices{display:flex;gap:8px;margin:12px 0}.prices button{flex:1;background:#262626;color:#fff;border:1px solid #444;padding:10px;border-radius:10px;cursor:pointer}.prices button:hover{background:#e7b31a;color:#111}.photos{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px;margin:auto}.photos img{width:100%;border-radius:16px}.location{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.map{min-height:260px;border-radius:25px;background:#191919;border:1px solid #333;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:50px}.map b{font-size:22px;margin-top:15px}.map small{font-size:14px;color:#aaa}.contact{text-align:center;background:#171717}.full{width:100%}#cart{position:fixed;right:-420px;top:0;width:min(400px,100%);height:100vh;background:#151515;z-index:20;padding:22px;transition:.3s;box-shadow:-15px 0 50px #0008;overflow:auto}#cart.open{right:0}.carthead{display:flex;justify-content:space-between}.carthead button{background:none;border:0;color:white;font-size:30px}.cartitem{border-bottom:1px solid #333;padding:13px 0}.total{display:flex;justify-content:space-between;font-size:20px;padding:18px 0}#clear{width:100%;background:none;color:#aaa;border:0;padding:12px}#fab{position:fixed;right:20px;bottom:20px;border:0;border-radius:50px;padding:15px 20px;background:#e7b31a;font-size:18px;font-weight:bold;z-index:10}footer{padding:30px 7%;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#aaa}footer b{color:#fff}footer a{color:#e7b31a}@media(max-width:750px){nav{display:none}.hero{grid-template-columns:1fr;padding:55px 6%}.herofood{height:270px}.stats{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.photos,.location{grid-template-columns:1fr}section{padding:55px 6%}.heading h2,.location h2,.contact h2{font-size:34px}.pill{padding:10px 13px}}/* PREMIUM HOMEPAGE UPGRADE */
header {
  padding: 18px 7%;
  background: rgba(10,10,10,.92);
  border-bottom: 1px solid rgba(231,179,26,.25);
}

.logo {
  font-size: 18px;
  letter-spacing: .5px;
}

nav a {
  transition: .25s;
}

nav a:hover {
  color: #e7b31a;
}

.pill {
  box-shadow: 0 8px 25px rgba(231,179,26,.18);
}

.hero {
  min-height: 680px;
  padding: 90px 8%;
  background:
    radial-gradient(circle at 78% 25%, rgba(198,40,40,.32), transparent 30%),
    radial-gradient(circle at 20% 80%, rgba(231,179,26,.10), transparent 28%),
    #090909;
}

.hero h1 {
  letter-spacing: -2px;
  text-shadow: 0 8px 35px rgba(0,0,0,.5);
}

.hero p {
  max-width: 570px;
  line-height: 1.7;
}

.hero .btn {
  margin-top: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s;
}

.hero .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0,0,0,.4);
}

.herofood {
  position: relative;
  min-height: 390px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.12), transparent 25%),
    linear-gradient(145deg, #a91f16, #3b0907 70%);
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.herofood:before {
  content: "🔥  BEST SELLER";
  position: absolute;
  top: 22px;
  left: 22px;
  padding: 8px 12px;
  border-radius: 20px;
  background: #e7b31a;
  color: #111;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
}

.herofood strong {
  letter-spacing: 3px;
  text-shadow: 0 8px 25px rgba(0,0,0,.5);
}

.stats {
  box-shadow: 0 -10px 40px rgba(0,0,0,.2);
}

.stats div {
  transition: .25s;
}

.stats div:hover {
  background: #1d1d1d;
}

section {
  position: relative;
}

.heading h2 {
  letter-spacing: -1px;
}

@media(max-width:750px) {
  .hero {
    min-height: auto;
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .hero h1 {
    letter-spacing: -1px;
  }

  .herofood {
    min-height: 280px;
  }

  .hero .btn {
    width: 100%;
    text-align: center;
    margin-top: 12px;
  }

  .stats b {
    font-size: 22px;
  }
}
/* PUNJABI CHAAP TRUCK — PREMIUM EDITORIAL STYLE */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* MAIN LOOK */

html {
  scroll-behavior: smooth;
}

body {
  background: #f3efe6;
  color: #111;
  font-family: "DM Sans", Arial, sans-serif;
}

/* HEADER */

header {
  background: rgba(243,239,230,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #171717;
  padding: 18px 6%;
}

.logo {
  color: #111 !important;
  font-weight: 900;
  letter-spacing: -.5px;
}

.logo b,
.logo em {
  color: #c82018;
}

nav {
  gap: 28px;
}

nav a {
  color: #111;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}

.pill {
  background: #c82018 !important;
  color: #fff !important;
  border-radius: 0;
  padding: 13px 20px;
}

/* HERO */

.hero {
  min-height: 720px;
  padding: 90px 7%;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 65px;
  align-items: center;

  background:
    radial-gradient(
      circle at 82% 45%,
      rgba(200,32,24,.10),
      transparent 30%
    ),
    #f3efe6;

  border-bottom: 1px solid #111;
}

/* SMALL LABEL */

.tag {
  color: #c82018;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* HUGE TYPOGRAPHY */

.hero h1 {
  max-width: 850px;
  margin: 10px 0 28px;

  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(64px, 9vw, 125px);
  line-height: .86;
  letter-spacing: -2px;
  text-transform: uppercase;

  color: #111;
}

.hero h1 span {
  color: #c82018;
}

.hero p {
  max-width: 560px;
  color: #555;
  font-size: 17px;
  line-height: 1.75;
}

/* HERO BUTTONS */

.hero .btn {
  display: inline-block;
  min-height: 52px;
  padding: 0 27px;

  border-radius: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;

  transition: .25s ease;
}

.hero .btn:hover {
  transform: translateY(-4px);
}

.hero .btn + .btn {
  margin-left: 8px;
}

/* YELLOW BUTTON BECOMES RED */

.yellow {
  background: #c82018 !important;
  color: #fff !important;
}

/* RED BUTTON */

.red {
  background: #111 !important;
  color: #fff !important;
}

/* HERO FOOD CARD */

.herofood {
  height: 460px;

  border-radius: 0 !important;

  background:
    linear-gradient(
      145deg,
      #d52b20 0%,
      #9d1712 55%,
      #5e0b08 100%
    ) !important;

  border: 1px solid #111;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;

  box-shadow:
    18px 18px 0 #111,
    0 30px 70px rgba(0,0,0,.20);

  transform: rotate(1.5deg);
  transition: .3s ease;
}

.herofood:hover {
  transform: rotate(0deg) translateY(-7px);
  box-shadow:
    12px 12px 0 #111,
    0 35px 80px rgba(0,0,0,.25);
}

.herofood strong {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(50px, 6vw, 82px);
  line-height: .9;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
}

.herofood small {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 2px;
}

/* STATS */

.stats {
  background: #111;
  border: 0;
}

.stats div {
  border-right: 1px solid #444;
  padding: 25px 15px;
}

.stats b {
  color: #fff;
  font-family: "Anton", Impact, sans-serif;
  font-size: 32px;
  letter-spacing: 1px;
}

.stats span {
  color: #aaa;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.5px;
}

/* ALL SECTIONS */

section {
  padding: 90px 7%;
}

/* SECTION HEADINGS */

.heading h2,
.location h2,
.contact h2 {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(45px, 6vw, 72px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #111;
}

.heading p,
.location p,
.contact p {
  color: #666;
  line-height: 1.7;
}

/* MENU TABS */

.tabs {
  margin-bottom: 35px;
}

.tabs button {
  background: transparent;
  color: #111;
  border: 1px solid #111;
  border-radius: 0;
  padding: 11px 20px;

  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tabs button.active {
  background: #111;
  color: #fff;
}

/* MENU CARDS */

.grid {
  gap: 28px;
}

.card {
  position: relative;
  background: #fff;
  border: 1px solid #111;
  border-radius: 0;
  padding: 28px;
  box-shadow: 8px 8px 0 #111;
  transition: .25s ease;
  overflow: hidden;
}

.card::before {
  content: "CHAAP TRUCK";
  display: block;
  color: #c82018;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 12px 12px 0 #c82018;
}

.card h3 {
  margin: 0 0 12px;
  font-family: "Anton", Impact, sans-serif;
  font-size: 31px;
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #111;
}

.desc {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  min-height: 45px;
}

.prices {
  display: flex;
  gap: 10px;
  margin: 20px 0 0;
}

.prices button {
  flex: 1;
  background: #f3efe6;
  color: #111;
  border: 1px solid #111;
  border-radius: 0;
  padding: 13px 10px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  transition: .2s ease;
}

.prices button:hover {
  background: #c82018;
  color: #fff;
  border-color: #c82018;
}
/* PHOTOS */

.photos {
  gap: 25px;
}

.photos img {
  border-radius: 0;
  border: 1px solid #111;
}

/* LOCATION */

.location {
  background: #111;
  color: #fff;
}

.location h2 {
  color: #fff;
}

.location p {
  color: #aaa;
}

.map {
  background: #f3efe6;
  color: #111;
  border: 0;
  border-radius: 0;
  min-height: 300px;
  box-shadow: 12px 12px 0 #c82018;
}

.map small {
  color: #555;
}

/* CONTACT */

.contact {
  background: #c82018;
  color: #fff;
}

.contact h2 {
  color: #fff;
}

.contact p {
  color: rgba(255,255,255,.82);
}

/* CART */

#cart {
  background: #111;
  color: #fff;
}

.cartitem {
  border-bottom: 1px solid #333;
}

.carthead button {
  color: #fff;
}

#clear {
  color: #aaa;
}

#fab {
  background: #c82018;
  color: #fff;
  border-radius: 0;
}

/* FOOTER */

footer {
  background: #111;
  color: #999;
  border-top: 1px solid #333;
}

footer b {
  color: #fff;
}

footer a {
  color: #c82018;
}

/* MOBILE */

@media (max-width: 800px) {

  header {
    padding: 15px 6%;
  }

  .hero {
    min-height: auto;
    padding: 70px 6% 65px;
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .hero h1 {
    font-size: clamp(58px, 17vw, 88px);
    line-height: .88;
  }

  .hero p {
    font-size: 16px;
  }

  .hero .btn {
    width: 100%;
    margin: 7px 0 !important;
  }

  .herofood {
    height: 330px;
    transform: none;
    box-shadow: 10px 10px 0 #111;
  }

  .herofood strong {
    font-size: 58px;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .stats div {
    border-bottom: 1px solid #444;
  }

  section {
    padding: 65px 6%;
  }

  .heading h2,
  .location h2,
  .contact h2 {
    font-size: 48px;
  }

  .card {
    padding: 22px;
  }

  .map {
    box-shadow: 8px 8px 0 #c82018;
  }
}



/* Styles for Dine-in/Packed and Pickup Time options */
.order-options {
    margin-bottom: 15px;
    padding-top: 15px;
    border-top: 1px solid #333;
}

.order-options label {
    display: block;
    margin-bottom: 5px;
    color: #ddd;
    font-size: 14px;
}

.radio-group {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #fff;
}

.order-options select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: #262626;
    color: #fff;
    border: 1px solid #444;
    margin-bottom: 15px;
    font-size: 16px;
    cursor: pointer;
}

.customer-name {
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 15px;
    border-top: 1px solid #333;
}
.customer-name label {
    display: block;
    margin-bottom: 5px;
    color: #ddd;
    font-size: 14px;
}
.customer-name input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: #262626;
    color: #fff;
    border: 1px solid #444;
    font-size: 16px;
}