/* ==========================================================================
   POP THEME — The Tiffin Truck
   Pop-art / comic-book restyle. Loaded LAST so it overrides everything.
   Non-destructive: this is the only file to delete to revert.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Luckiest+Guy&display=swap');

:root{
  --pop-ink:#0B0B0B;
  --pop-paper:#FFF7E8;
  --pop-pink:#FF2D87;
  --pop-yellow:#FFE03D;
  --pop-cyan:#00CFFF;
  --pop-lime:#B6F227;
  --pop-purple:#7A2FF2;
  --pop-orange:#FF7A18;
  --pop-red:#FF3B2F;
  --pop-border:4px solid var(--pop-ink);
  --pop-shadow:8px 8px 0 var(--pop-ink);
  --pop-shadow-lg:14px 14px 0 var(--pop-ink);
}

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */

/* body has an INLINE style (cream gradient + opacity:0.89) — hence !important */
body{
  background-color:var(--pop-paper)!important;
  background-image:radial-gradient(rgba(11,11,11,.075) 1.6px, transparent 1.7px)!important;
  background-size:24px 24px!important;
  background-position:0 0!important;
  background-repeat:repeat!important;
  background-attachment:fixed!important;
  background-blend-mode:normal!important;
  opacity:1!important;
  color:var(--pop-ink)!important;
  font-size:15px;
  line-height:1.75em;
}

::selection{background:var(--pop-pink);color:#fff;}

a{color:var(--pop-pink);text-decoration:none;transition:color .18s ease;}
a:hover{color:var(--pop-purple);text-decoration:none;}

img{filter:saturate(1.3) contrast(1.08);}

/* Global pop scrollbar */
::-webkit-scrollbar{width:14px;height:14px;}
::-webkit-scrollbar-track{background:var(--pop-paper);border-left:3px solid var(--pop-ink);}
::-webkit-scrollbar-thumb{background:var(--pop-pink);border:3px solid var(--pop-ink);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:var(--pop-yellow);}

h1,h2,h3,h4,h5,h6{
  position:relative;
  font-family:'Luckiest Guy','Bungee',cursive!important;
  font-weight:400!important;
  line-height:1.18em!important;
  color:var(--pop-ink)!important;
  letter-spacing:.01em;
  text-transform:none;
}
h4,h5,h6,.modal-title,.footer-widget h6{font-family:'Bungee','Luckiest Guy',sans-serif!important;}

/* --------------------------------------------------------------------------
   2. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */

.main-header{
  padding-top:0!important;
}
.main-header .header-upper{
  background-color:var(--pop-yellow)!important;
  border-bottom:5px solid var(--pop-ink)!important;
  box-shadow:0 9px 0 rgba(11,11,11,.85)!important;
  padding:0 18px;
}
.main-header .header-upper .auto-container{max-width:100%!important;padding-left:20px;padding-right:20px;}

.main-menu .navigation > li > a{
  color:var(--pop-ink)!important;
  font-family:'Bungee',sans-serif!important;
  font-size:12px!important;
  text-transform:uppercase!important;
  letter-spacing:.07em!important;
  padding:34px 0 30px!important;
  line-height:1.4!important;
}
.main-menu .navigation > li > a::after{
  content:'';
  position:absolute;
  left:50%;right:50%;bottom:20px;
  height:5px;
  background:var(--pop-pink);
  border-radius:6px;
  transition:left .22s ease, right .22s ease, background .22s ease;
}
.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a{
  color:var(--pop-ink)!important;
}
.main-menu .navigation > li:hover > a::after,
.main-menu .navigation > li.current > a::after{
  left:2px;right:2px;
  background:var(--pop-ink);
}

/* dropdowns */
.main-menu .navigation > li > ul{
  background:var(--pop-cyan)!important;
  border:var(--pop-border)!important;
  border-radius:14px!important;
  box-shadow:var(--pop-shadow)!important;
  padding:8px!important;
  margin-top:-4px!important;
}
.main-menu .navigation > li > ul > li > a{
  color:var(--pop-ink)!important;
  font-family:'Bungee',sans-serif!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  border-radius:8px!important;
}
.main-menu .navigation > li > ul > li > a:hover{
  background:var(--pop-yellow)!important;
  color:var(--pop-ink)!important;
}

/* Mobile nav burger */
.mobile-nav-toggler{
  background:var(--pop-pink)!important;
  border:3px solid var(--pop-ink)!important;
  border-radius:12px!important;
  box-shadow:5px 5px 0 var(--pop-ink)!important;
  color:#fff!important;
  padding:10px 14px!important;
}
.mobile-nav-toggler .icon{color:#fff!important;}

/* Sticky header */
.sticky-header{
  background-color:var(--pop-cyan)!important;
  border-bottom:5px solid var(--pop-ink)!important;
  box-shadow:0 8px 0 rgba(11,11,11,.8)!important;
}
.sticky-header .main-menu .navigation > li > a{color:var(--pop-ink)!important;}
.sticky-header .logo img{filter:none!important;}

/* --------------------------------------------------------------------------
   3. HERO / BANNER
   -------------------------------------------------------------------------- */

/* Homepage hero: markup uses .slider-container (no .slide), so the theme's
   220px padding never applies and the banner collapsed to 158px. Give it a stage. */
.banner-section-three{
  background-color:var(--pop-ink)!important;
  min-height:min(92vh,860px);
}
.banner-section-three .slider-container{
  position:relative;
  background-color:var(--pop-ink)!important;
  min-height:min(92vh,860px);
}
.banner-section-three .video-wrapper{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.banner-section-three video{
  width:100%!important;
  height:100%!important;
  object-fit:cover;
  display:block;
  filter:saturate(1.35) contrast(1.12)!important;
}

.image-overlay{
  background-image:radial-gradient(circle at 50% 42%, rgba(255,45,135,.42), rgba(11,11,11,.72))!important;
}
/* Logo card — BOTH logos are 100% white artwork, so the card must be dark */
.image-overlay > img{
  background:var(--pop-ink)!important;
  border:6px solid var(--pop-yellow)!important;
  box-shadow:14px 14px 0 var(--pop-pink)!important;
  transform:rotate(-3deg);
  padding:18px;
  border-radius:10px;
}
.banner-section-three .button-box,
.banner-section-three .video-btn,
.banner-section-three .video-btn2{
  position:absolute!important;
  left:0;right:0;bottom:6%!important;
  top:auto!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  text-align:center;
}
.banner-section-three .button-box{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;}
.banner-section-three .video-btn .btn,
.banner-section-three .video-btn2 .btn{width:auto!important;display:inline-block!important;}

/* Inner-page hero titles */
.page-title{
  background-color:var(--pop-purple)!important;
  background-blend-mode:multiply!important;
  border-bottom:6px solid var(--pop-ink)!important;
}
.page-title .pattern-layer{background-image:none!important;height:auto!important;}
.page-title h2{
  color:var(--pop-yellow)!important;
  font-size:clamp(38px,7vw,66px)!important;
  text-shadow:5px 5px 0 var(--pop-ink)!important;
  text-transform:uppercase!important;
  letter-spacing:.02em;
}
.page-breadcrumb{border:none!important;}
.page-breadcrumb li{color:#fff!important;font-family:'Bungee',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.06em;}
.page-breadcrumb li a{color:var(--pop-yellow)!important;}
.page-breadcrumb li + li::before{color:var(--pop-pink)!important;}

/* Other banner variants */
.banner-section .content-column h1{
  font-family:'Luckiest Guy',cursive!important;
  color:#fff!important;
  text-shadow:4px 4px 0 var(--pop-ink)!important;
}
.banner-section-two .content-column h1{font-family:'Luckiest Guy',cursive!important;}

/* --------------------------------------------------------------------------
   4. SECTION TITLES
   -------------------------------------------------------------------------- */

/* eyebrow — inline style="color:tomato" hence !important */
.sec-title .title{
  display:inline-block!important;
  color:var(--pop-ink)!important;
  background:var(--pop-cyan)!important;
  border:3px solid var(--pop-ink)!important;
  border-radius:999px!important;
  box-shadow:5px 5px 0 var(--pop-ink)!important;
  font-family:'Bungee',sans-serif!important;
  font-size:12px!important;
  text-transform:uppercase!important;
  letter-spacing:.1em!important;
  line-height:1.4!important;
  padding:7px 16px!important;
  margin-bottom:16px;
  transform:rotate(-1.5deg);
}
.sec-title h2,
.sec-title h3{
  color:var(--pop-ink)!important;
  text-transform:uppercase!important;
  font-size:clamp(30px,4.6vw,52px)!important;
  text-shadow:3px 3px 0 var(--pop-yellow), 7px 7px 0 rgba(11,11,11,.92)!important;
  margin-top:8px;
}
/* spans are inline-styled tomato in the markup */
.sec-title h2 span,
.sec-title h3 span,
.sec-title span{color:var(--pop-red)!important;}
.sec-title .text{
  color:#2b2b2b!important;
  font-size:15px!important;
  font-weight:500;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.sec-title.centered{text-align:center;}
.sec-title.light h2,
.sec-title.light h3,
.sec-title.light .text{color:var(--pop-ink)!important;}
.sec-title{margin-bottom:45px!important;}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn,
.theme-btn,
.book-now-btn,
.book-now-btn2,
.order-btn,
.btn-tomato,
.btn-primary,
.side-list a,
.contact-form .submit-btn{
  font-family:'Bungee',sans-serif!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
  font-size:13px!important;
  line-height:1.3!important;
  background-color:var(--pop-yellow)!important;
  color:var(--pop-ink)!important;
  border:3px solid var(--pop-ink)!important;
  border-radius:999px!important;
  box-shadow:6px 6px 0 var(--pop-ink)!important;
  padding:15px 30px!important;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease!important;
  cursor:pointer;
}
.btn:hover,
.theme-btn:hover,
.book-now-btn:hover,
.book-now-btn2:hover,
.order-btn:hover,
.btn-tomato:hover,
.btn-primary:hover{
  background-color:var(--pop-pink)!important;
  color:#fff!important;
  border-color:var(--pop-ink)!important;
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 var(--pop-ink)!important;
}
.btn:active,
.theme-btn:active,
.order-btn:active{
  transform:translate(3px,3px)!important;
  box-shadow:2px 2px 0 var(--pop-ink)!important;
}

/* the <span class="reservation-btn"> inside those buttons */
.reservation-btn{
  background:none!important;
  border:none!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  color:inherit!important;
  font-family:'Bungee',sans-serif!important;
  font-size:inherit!important;
}
.reservation-btn:hover{background:none!important;color:inherit!important;}

/* text-only links that look like buttons */
.theme-btn{color:var(--pop-pink)!important;}

/* --------------------------------------------------------------------------
   6. CARDS — gallery, specials, testimonials, products
   -------------------------------------------------------------------------- */

.gallery-block .inner-box,
.gallery-block-two .inner-box,
.gallery-block .inner-box .image-box{
  background:#fff!important;
  border:4px solid var(--pop-ink)!important;
  border-radius:8px!important;
  box-shadow:9px 9px 0 var(--pop-ink)!important;
  transition:transform .2s ease, box-shadow .2s ease!important;
}
.gallery-block:hover .inner-box,
.gallery-block-two:hover .inner-box{
  transform:translate(-4px,-4px) rotate(-1.4deg)!important;
  box-shadow:14px 14px 0 var(--pop-pink)!important;
}
.gallery-block .inner-box .overlay-box,
.gallery-block .inner-box .overlay-inner{
  background:rgba(255,45,135,.86)!important;
  border-radius:4px!important;
}
.gallery-block .inner-box .icon.flaticon-plus{
  background:var(--pop-yellow)!important;
  border:4px solid var(--pop-ink)!important;
  color:var(--pop-ink)!important;
  border-radius:50%!important;
  width:56px!important;height:56px!important;
  line-height:48px!important;
  font-size:24px!important;
}
.gallery-section .masonry-item{margin-bottom:26px;}

/* product / specials cards */
.beverage-block .inner-box,
.recipe-block .inner-box,
.products .inner-box{
  background:#fff!important;
  border:4px solid var(--pop-ink)!important;
  border-radius:10px!important;
  box-shadow:9px 9px 0 var(--pop-ink)!important;
  padding:14px 14px 22px!important;
  transition:transform .18s ease, box-shadow .18s ease!important;
}
.beverage-block:hover .inner-box,
.recipe-block:hover .inner-box{
  transform:translate(-4px,-4px) rotate(1deg)!important;
  box-shadow:14px 14px 0 var(--pop-cyan)!important;
}
.beverage-block .inner-box .image{background-color:var(--pop-pink)!important;border-radius:6px!important;}
.beverage-block .inner-box .lower-content .title,
.recipe-block .inner-box .lower-content .title{
  font-family:'Bungee',sans-serif!important;
  text-transform:uppercase!important;
  color:var(--pop-ink)!important;
  font-size:15px!important;
  letter-spacing:.03em;
}

/* Testimonials */
.testimonial-block .inner-box{
  background:#fff!important;
  border:4px solid var(--pop-ink)!important;
  border-radius:20px!important;
  box-shadow:12px 12px 0 var(--pop-cyan)!important;
  padding:34px 26px!important;
  transform:rotate(-1deg);
  transition:transform .2s ease!important;
}
.testimonial-block:hover .inner-box{transform:rotate(1deg) translateY(-4px)!important;}
.testimonial-block .inner-box .author-image{
  border:4px solid var(--pop-ink)!important;
  background:var(--pop-yellow)!important;
  box-shadow:6px 6px 0 var(--pop-pink)!important;
  width:120px!important;height:120px!important;
}
.testimonial-block .inner-box .text{
  color:var(--pop-ink)!important;
  font-style:normal!important;
  font-weight:500!important;
  font-size:15px!important;
}
.testimonial-block .inner-box .designation{
  font-family:'Bungee',sans-serif!important;
  color:var(--pop-pink)!important;
  text-transform:uppercase!important;
  font-size:12px!important;
  letter-spacing:.08em;
}
.owl-dots .owl-dot span{background:var(--pop-pink)!important;border:3px solid var(--pop-ink)!important;}
.owl-dots .owl-dot.active span{background:var(--pop-yellow)!important;}

/* Circular "Breakfast served" panel */
.box-inner{
  background:var(--pop-orange)!important;
  border:5px solid var(--pop-ink)!important;
  box-shadow:var(--pop-shadow-lg)!important;
}

/* --------------------------------------------------------------------------
   7. FORMS
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea{
  background:#fff!important;
  color:var(--pop-ink)!important;
  border:3px solid var(--pop-ink)!important;
  border-radius:14px!important;
  box-shadow:6px 6px 0 rgba(11,11,11,.18)!important;
  padding:14px 18px!important;
  font-family:'Poppins',sans-serif!important;
  font-size:15px!important;
  transition:box-shadow .15s ease, border-color .15s ease!important;
}
input:focus,textarea:focus{
  outline:none!important;
  border-color:var(--pop-pink)!important;
  box-shadow:6px 6px 0 var(--pop-pink)!important;
}
input::placeholder,textarea::placeholder{color:#6b6b6b!important;}
.form-group{margin-bottom:22px;}

/* --------------------------------------------------------------------------
   8. MODALS (populated by INLINE <style> blocks — !important required)
   -------------------------------------------------------------------------- */

.modal{background-color:rgba(11,11,11,.72)!important;}
.modal-content{
  background-color:var(--pop-paper)!important;
  border:5px solid var(--pop-ink)!important;
  border-radius:20px!important;
  box-shadow:16px 16px 0 var(--pop-pink)!important;
  overflow:hidden;
}
.modal-header{
  background:var(--pop-yellow)!important;
  border-bottom:4px solid var(--pop-ink)!important;
}
.modal-title{
  color:var(--pop-ink)!important;
  font-family:'Bungee',sans-serif!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
  font-size:20px!important;
  padding-left:8px!important;
}
.modal .close{
  color:var(--pop-ink)!important;
  background:var(--pop-pink)!important;
  border:3px solid var(--pop-ink)!important;
  border-radius:50%!important;
  width:40px;height:40px;
  line-height:32px!important;
  font-size:22px!important;
  text-shadow:none!important;
  opacity:1!important;
}
.modal .close:hover{background:var(--pop-cyan)!important;color:var(--pop-ink)!important;}
.location-section h3{
  color:var(--pop-pink)!important;
  font-family:'Bungee',sans-serif!important;
  text-transform:uppercase!important;
  font-size:17px!important;
}
.location-section p{color:#333!important;}
.divider{background-color:var(--pop-ink)!important;width:4px!important;}

/* --------------------------------------------------------------------------
   9. FOOTER (inline style="background:url(...)" — hence !important)
   -------------------------------------------------------------------------- */

.main-footer{
  background-color:var(--pop-ink)!important;
  background-image:none!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:cover!important;
  border-top:8px solid var(--pop-pink)!important;
  padding-top:10px;
}
.main-footer .pattern-layer-one{background-image:none!important;}
.main-footer .widgets-section{padding-top:70px!important;}
.main-footer .footer-widget h6{
  color:var(--pop-yellow)!important;
  font-family:'Bungee',sans-serif!important;
  text-transform:uppercase!important;
  letter-spacing:.09em!important;
  font-size:13px!important;
  border-bottom:4px solid var(--pop-pink)!important;
  display:inline-block;
  padding-bottom:8px;
}
.main-footer .footer-widget .text,
.main-footer .contact-list li,
.main-footer .footer-list li{color:#efe9dd!important;}
.main-footer a{color:var(--pop-cyan)!important;}
.main-footer a:hover{color:var(--pop-pink)!important;text-decoration:underline;}
.main-footer .social-list li a{
  background:var(--pop-yellow)!important;
  border:3px solid var(--pop-ink)!important;
  color:var(--pop-ink)!important;
  border-radius:50%!important;
  width:44px;height:44px;
  line-height:38px!important;
  box-shadow:5px 5px 0 var(--pop-pink)!important;
  transition:transform .12s ease!important;
}
.main-footer .social-list li a:hover{transform:translate(-3px,-3px)!important;background:var(--pop-cyan)!important;}
.main-footer .copyright{
  border-top:3px dashed rgba(255,255,255,.35)!important;
  color:#cfcac0!important;
  font-family:'Bungee',sans-serif;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.main-footer .copyright a{color:var(--pop-yellow)!important;}
.main-footer img{position:static!important;height:auto!important;max-width:100%!important;}

/* --------------------------------------------------------------------------
   10. MISC BLOCKS
   -------------------------------------------------------------------------- */

/* Preloader — background-COLOR only: the shorthand would wipe the tiffin.gif loader */
.preloader{background-color:var(--pop-yellow)!important;}

/* Header logo punch-up — white wordmark needs a dark chip on the yellow bar */
.logo img{transition:transform .2s ease!important;}
.logo:hover img{transform:rotate(-4deg) scale(1.04)!important;}
.main-header .mobile-nav-logo,
.sticky-header .logo img,
.mobile-menu .mobile-nav-logo{
  background:var(--pop-ink)!important;
  border:3px solid var(--pop-ink)!important;
  border-radius:10px!important;
  padding:8px 14px!important;
  box-shadow:5px 5px 0 var(--pop-pink)!important;
  filter:none!important;
}

/* side / mobile menu */
.mobile-menu,.menu-box,.side-navigation,.search-popup{
  background:var(--pop-yellow)!important;
}
.menu-box .navigation li a,
.side-navigation li a{
  color:var(--pop-ink)!important;
  font-family:'Bungee',sans-serif!important;
  text-transform:uppercase!important;
  border-bottom:3px solid var(--pop-ink)!important;
}
.menu-box .navigation li a:hover,
.side-navigation li a:hover{color:var(--pop-pink)!important;background:var(--pop-cyan)!important;}

/* timing / list blocks */
.timing-list li,.side-list li{
  border:3px solid var(--pop-ink)!important;
  border-radius:10px!important;
  background:#fff!important;
  margin-bottom:10px!important;
}

/* section-level halftone accents */
.takeaway-section,.specials-section,.gallery-section,.testimonial-section,
.about-section,.contact-section,.menu-section,.reservation-section{
  position:relative;
}
.sec-title .centered{text-align:center;}

/* The image column is pulled -120px LEFT over the text column. With the larger
   pop headings the text ran under the photo and got clipped. Keep them clear. */
@media only screen and (min-width:1200px){
  .juice-section .image-column .inner-column{margin-left:-40px!important;}
  .juice-section .content-column .inner-column{padding-right:70px;}
}

/* Testimonials: 1170px-wide card reads better with a set measure */
.testimonial-block .inner-box{max-width:940px;margin-left:auto;margin-right:auto;}
.testimonial-block .inner-box .text{max-width:760px;margin-left:auto;margin-right:auto;}
.testimonial-section .owl-item{padding-left:0;padding-right:0;}

/* generic content text */
.text,p{color:#2b2b2b;}

/* --------------------------------------------------------------------------
   11. RESPONSIVE
   -------------------------------------------------------------------------- */

@media only screen and (max-width:1100px){
  .main-menu .navigation > li > a{font-size:11px!important;padding:26px 0 24px!important;}
}

@media only screen and (max-width:767px){
  body{font-size:14px;background-size:20px 20px!important;}
  .main-header .header-upper{padding:0 6px;}
  .main-menu .navigation > li > a{font-size:11px!important;padding:18px 0 16px!important;}
  .main-menu .navigation > li > a::after{bottom:8px;}
  .image-overlay > img{transform:rotate(-2deg) scale(.85)!important;box-shadow:9px 9px 0 var(--pop-pink)!important;}
  .banner-section-three .button-box{gap:12px;bottom:4%!important;}
  .btn,.theme-btn,.book-now-btn,.book-now-btn2,.order-btn{
    padding:13px 22px!important;font-size:12px!important;
    box-shadow:5px 5px 0 var(--pop-ink)!important;
  }
  .sec-title h2,.sec-title h3{text-shadow:2px 2px 0 var(--pop-yellow),5px 5px 0 rgba(11,11,11,.92)!important;}
  .gallery-block .inner-box,.beverage-block .inner-box,.recipe-block .inner-box,
  .testimonial-block .inner-box{box-shadow:7px 7px 0 var(--pop-ink)!important;}
  .testimonial-block .inner-box{transform:none!important;padding:26px 18px!important;}
  .modal-content{border-width:4px!important;box-shadow:8px 8px 0 var(--pop-pink)!important;}
  .location-container{flex-direction:column;}
  .divider{width:auto!important;height:3px!important;margin:14px 0!important;}
  .page-title{padding:130px 0 90px!important;}
}