/* ==========================================================================
   EZZY CATERING — MODERN THEME OVERRIDE
   Load this file AFTER your existing template stylesheet(s) so these rules
   win the cascade. It does not touch any markup, IDs, names, or JS hooks —
   only visual treatment of the classes already in your blade components.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink: #16232F;
  --ink-soft: #253746;
  --cream: #FBF7EF;
  --cream-deep: #F2EBDC;
  --amber: #DB9A34;
  --amber-deep: #C17F1E;
  --sage: #5F7F63;
  --sage-deep: #4B6750;
  --text-body: #3D4750;
  --line: rgba(22,35,47,0.10);
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-soft: 0 2px 6px rgba(22,35,47,0.05);
  --shadow-lift: 0 24px 44px -20px rgba(22,35,47,0.28);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header .header-bottom.sticky-header{
  background: rgba(251,247,239,0.9) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
}
.header .logo img{ max-height: 40px; }

.header .main-nav > ul.menu > li.menu-item > a.menu-link{
  font-family: 'Inter', sans-serif !important;
  /*font-weight: 600 !important;*/
  color: var(--ink) !important;
  font-size: 12px;
  padding: 8px 14px !important;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.header .main-nav > ul.menu > li.menu-item > a.menu-link:hover,
.header .main-nav > ul.menu > li.dropdown:hover > a{
  background: var(--cream-deep);
  color: var(--ink) !important;
}
.header .dropdown-menu{
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lift) !important;
  padding: 8px !important;
}
.header .dropdown-menu li a{
  border-radius: 8px;
  padding: 8px 12px !important;
  font-family: 'Inter', sans-serif;
}
.header .dropdown-menu li a:hover{ background: var(--cream-deep); }

.header .user-login-wrapper .user-login{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  /*color: var(--ink) !important;*/
  border: 1px solid var(--ink);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  transition: all .25s ease;
}
.header .user-login-wrapper .user-login:hover{
  background: var(--ink);
  color: var(--cream) !important;
}

.header .cart-dropdown .dropdown-toggle{
  position: relative;
  color: var(--ink) !important;
}
.header .cart-dropdown .cart-count{
  background: var(--amber) !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
}

/* ==========================================================================
   SEARCH / HERO BLOCK
   ========================================================================== */
.component-search-block.search-block{
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 60px 0;
}
.component-search-block .banner.banner-overlay{
  position: absolute; inset: 0; overflow: hidden;
}
.component-search-block .banner.banner-overlay img{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) brightness(0.82);
}
.component-search-block .banner.banner-overlay .overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,35,47,0.55) 0%, rgba(22,35,47,0.35) 45%, rgba(22,35,47,0.75) 100%) !important;
  opacity: 1 !important;
}
.component-search-block .container{ position: relative; z-index: 2; }

.search-block-wrapper .title{
  font-family: 'Fraunces', serif !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: clamp(2rem, 4.2vw, 3.2rem) !important;
  text-align: center;
  line-height: 1.12;
  margin-bottom: 32px !important;
  text-wrap: balance;
}

.search-block-wrapper{
  max-width: 860px;
  margin: 0 auto;
}

/* Tabs */
.search-block-wrapper .nav.nav-tabs{
  border-bottom: none !important;
  background: transparent;
  display: flex;
  max-width: 860px;
  margin: 0 auto;
}
.search-block-wrapper .nav-tabs .nav-item.nav-link{
  flex: 1;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink) !important;
  background: var(--cream-deep) !important;
  border: none !important;
  /*border-radius: 14px 14px 0 0 !important;*/
  padding: 15px 0 !important;
  margin-right: 4px;
  border-bottom: 3px solid transparent !important;
  transition: all .2s ease;
}
.search-block-wrapper .nav-tabs .nav-item.nav-link:last-child{ margin-right: 0; }
.search-block-wrapper .nav-tabs .nav-item.nav-link.active{
  background: #fff !important;
  border-bottom-color: var(--amber) !important;
  color: var(--ink) !important;
}

/* Tab panel / card */
.search-block-wrapper .tab-content{
  background: #fff;
  border-radius: 0 0 20px 20px;
  box-shadow: var(--shadow-lift);
  padding: 26px;
}
.search-block-wrapper .tab-pane form{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.search-block-wrapper .form-group-modern{
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
}
.search-block-wrapper .form-group-modern label{
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9AA3A9;
  margin-bottom: 6px;
}
.search-block-wrapper input[type="text"],
.search-block-wrapper input[type="number"],
.search-block-wrapper select.form-control{
  width: 100%;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--cream) !important;
  height: auto !important;
  box-shadow: none !important;
}
.search-block-wrapper input:focus,
.search-block-wrapper select:focus{
  outline: 2px solid var(--amber);
  outline-offset: 1px;
  border-color: var(--amber) !important;
}
.search-block-wrapper .btn.btn-primary{
  background: linear-gradient(135deg, var(--amber), var(--amber-deep)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 13px 30px !important;
  font-size: 0.92rem !important;
  box-shadow: 0 10px 22px -8px rgba(193,127,30,0.6);
  transition: transform .2s ease;
  white-space: nowrap;
}
.search-block-wrapper .btn.btn-primary:hover{ transform: translateY(-2px); }

/* ==========================================================================
   SERVICE / CARD BLOCK  (card.blade.php)
   ========================================================================== */
.component-service-block{ padding: 80px 0; background: var(--cream); }
.component-service-block h3.text-center{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--ink);
  margin-bottom: 10px;
}
.component-service-block p.text-center{
  color: #79828A;
  max-width: 560px;
  margin: 0 auto 40px;
}
.component-service-block .service-wrapper{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
  margin-bottom: 30px;
  height: 100%;
}
.component-service-block .service-wrapper:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}
.component-service-block .service-wrapper figure{
  margin: 0; height: 210px; overflow: hidden;
}
.component-service-block .service-wrapper figure img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.component-service-block .service-wrapper:hover figure img{ transform: scale(1.07); }
.component-service-block .service-wrapper .details{ padding: 22px 24px 26px; }
.component-service-block .service-wrapper .details h4{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--ink);
  margin-bottom: 10px;
}
.component-service-block .service-wrapper .details p{
  font-size: 0.9rem;
  line-height: 1.65;
  color: #697079;
  margin: 0;
}

/* ==========================================================================
   CTA BLOCK  (cta.blade.php)
   ========================================================================== */
.component-cta-block.cta-block{
  background: var(--ink) !important;
  position: relative;
  overflow: hidden;
  padding: 90px 0 !important;
  text-align: center;
}
.component-cta-block.cta-block::before{
  content: "";
  position: absolute; top: -120px; right: -120px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(219,154,52,0.25), transparent 70%);
}
.component-cta-block h2{
  font-family: 'Fraunces', serif !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem) !important;
  position: relative; z-index: 1;
  margin-bottom: 14px;
}
.component-cta-block p{
  color: #B9C2C9 !important;
  max-width: 640px;
  margin: 0 auto 30px;
  line-height: 1.75;
  position: relative; z-index: 1;
}
.component-cta-block .btn-wrapper{
  position: relative; z-index: 1;
  display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap;
}
.component-cta-block .theme-btn.btn-orange{
  background: linear-gradient(135deg, var(--amber), var(--amber-deep)) !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 30px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 12px 24px -10px rgba(193,127,30,0.55);
  transition: transform .2s ease;
}
.component-cta-block .theme-btn.btn-orange:hover{ transform: translateY(-2px); }
/* Second+ button in the loop reads as the secondary action */
.component-cta-block .btn-wrapper a.theme-btn.btn-orange ~ a.theme-btn.btn-orange{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  box-shadow: none !important;
}
.component-cta-block .btn-wrapper a.theme-btn.btn-orange ~ a.theme-btn.btn-orange:hover{
  background: rgba(255,255,255,0.1) !important;
}

/* ==========================================================================
   TESTIMONIALS  (testimonials.blade.php)
   ========================================================================== */
.component-testimonial-block.testimonial-block{ padding: 80px 0; background: var(--cream); }
.component-testimonial-block h2{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  text-align: center;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--ink);
  margin-bottom: 8px;
}
.component-testimonial-block h6{ color: #79828A; font-weight: 400; margin-bottom: 40px; }
.component-testimonial-block h6 p{ font-size: 0.98rem; }

.owl-testimonials .testimonial{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-soft);
  margin: 6px;
  position: relative;
}
.owl-testimonials .testimonial::before{
  content: "\201C";
  font-family: 'Fraunces', serif;
  font-size: 3.2rem;
  color: var(--amber);
  line-height: 0.4;
  display: block;
  margin-bottom: 16px;
}
.owl-testimonials .testimonial p{
  font-size: 0.93rem;
  line-height: 1.7;
  color: #4B535B;
  margin: 14px 0 0;
}
.owl-testimonials .tes-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.owl-testimonials .tes-header .left-side{
  display: flex; align-items: center; gap: 12px;
}
.owl-testimonials .tes-header .left-side img{
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
}
.owl-testimonials .tes-header cite{
  font-style: normal; font-weight: 600; color: var(--ink); font-size: 0.92rem;
}
.owl-testimonials .rating .icon-star.filled{ color: var(--amber); }
.owl-testimonials .date{ font-size: 0.75rem; color: #9AA3A9; }

/* Owl nav/dots, if the plugin renders them */
.owl-testimonials.owl-theme .owl-dots .owl-dot span{
  background: var(--line) !important;
}
.owl-testimonials.owl-theme .owl-dots .owl-dot.active span{
  background: var(--amber) !important;
}

/* ==========================================================================
   BESTSELLERS / CATERER BLOCK  (bestsellers.blade.php)
   ========================================================================== */
.component-caterer-block.caterer-block{ padding: 80px 0; }
.component-caterer-block .title{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  text-align: center;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--ink);
  margin-bottom: 40px;
}
.component-caterer-block .caterer-wrapper{
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
  transition: transform .3s ease, box-shadow .3s ease;
  margin-bottom: 30px;
}
.component-caterer-block .caterer-wrapper:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}
.component-caterer-block .caterer-wrapper figure{ margin: 0; position: relative; height: 220px; overflow: hidden; }
.component-caterer-block .caterer-wrapper figure img{
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;
}
.component-caterer-block .caterer-wrapper:hover figure img{ transform: scale(1.07); }
.component-caterer-block .caterer-wrapper .details{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(180deg, transparent, rgba(22,35,47,0.85));
}
.component-caterer-block .caterer-wrapper .details h3{
  font-family: 'Fraunces', serif;
  color: #fff;
  font-size: 1.05rem;
  margin: 0 0 4px;
}
.component-caterer-block .caterer-wrapper .details .rating{
  color: #E7C97F; font-size: 0.85rem; font-weight: 600;
}
.component-caterer-block .caterer-wrapper .save{
  position: absolute; top: 14px; right: 14px;
}
.component-caterer-block .caterer-wrapper .save .wishlist-btn{
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(251,247,239,0.92);
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--amber-deep);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  cursor: pointer;
}

/* ==========================================================================
   FOOTER  (footer.blade.php)
   ========================================================================== */
.footer{
  background: var(--ink-soft) !important;
  color: #C7CFD5 !important;
  padding-top: 20px;
}
.footer .widget-about p{
  color: #A9B2B9 !important;
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 320px;
}
.footer .social-icons{ display: flex; gap: 10px; margin-top: 18px; }
.footer .social-icons .social-icon{
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.08) !important;
  display: flex; align-items: center; justify-content: center;
  color: #fff !important;
  transition: background .2s ease;
}
.footer .social-icons .social-icon:hover{ background: var(--amber) !important; }

.footer .widget.menu-list .widget-title{
  color: #fff !important;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.footer .widget.menu-list .widget-list li a{
  color: #A9B2B9 !important;
  font-size: 0.9rem;
  transition: color .2s ease;
}
.footer .widget.menu-list .widget-list li a:hover{ color: #fff !important; }

.footer .footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 20px;
  padding: 24px 0 !important;
}
.footer .footer-bottom .footer-copyright{
  color: #7C868D !important;
  font-size: 0.8rem;
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px){
  .search-block-wrapper .tab-pane form{ flex-direction: column; align-items: stretch; }
  .search-block-wrapper .btn.btn-primary{ width: 100%; }
  .component-cta-block .btn-wrapper{ flex-direction: column; align-items: center; }
}



/*addition for cards*/

.card-subtitle{

}

.first-tab{
  border-radius: 14px 0px 0px 0px !important;
}
.second-tab{
  border-radius: 0px !important;

}
.last-tab{
  border-radius: 0px 14px 0px 0px !important;

}

.btn-preorder{
  background: white;
  color: black;
  border-radius: 24px;
  padding: 10px;
}
.menu-block {
    & .list-item {
        a.activepill{
          background: orange;
            padding: 10px;
            color: white;
            border-radius: 10px;
        }
    }
}