/* === Global CSS Variables === */
:root {
  --red-color: #e60012;
  --black-color: #000000;
  --font-family-base: 'Assistant', sans-serif;
  --white-color: var(--white-color);

  --heading-color: #111;
  --text-color: #333;

  --h1-size: 48px;
  --h2-size: 40px;
  --p-size: 18px;
}

/* === Global Reset & Base === */
header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: white;
}

.container{
    max-width: 1300px;
}
body {
  font-family: var(--font-family-base);
  background-color: var(--white-color);
  color: var(--text-color);
  direction: rtl;
  text-align: right;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}


/* === Typography === */
h1 {
  font-size: var(--h1-size);
  font-weight: 800; /* Extra bold */
  color: var(--heading-color);
}

h2 {
  font-size: var(--h2-size);
  font-weight: 700; /* Bold */
  color: var(--heading-color);
}

p {
  font-size: var(--p-size);
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 1rem;
}
a:hover{
    color: var(--red-color);
}
.rtl {
  direction: rtl;
  text-align: right;
}

/* === Header Button Style === */

.btn-call {
  background-color: var(--black-color); /* black */
  color: #fff !important;
  border-radius: 50px;
  padding: 8px 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

.btn-call:hover {
  background: #000000bf;
  color:  var(--white-color);
}

.call-icon {
  height: 22px;
  width: auto;
  margin-right: 10px;
}

/* === Navbar === */
.navbar-nav .nav-link {
  padding: 0.5rem 1rem;
  font-weight: 500;
}

.navbar-brand img {
  max-height: 48px;
}

.header-top{
    gap: 45px;
}
#mainMenu ul li a{
    color: #000;
    font-weight: 600;
}
#mainMenu ul li a:hover{
    color: var(--red-color);
}
#mainMenu {
  display: none; /* Initially hidden */
}

#mainMenu.show {
  display: block; /* Visible when 'show' class is added */
}


/* Footer */
.footer-btn {
  background-color: var(--black-color, #000);
  color: var(--white-color);
  border-radius: 50px;
  padding: 8px 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

.footer-btn:hover {
  background: #000000bf;
  color:  var(--white-color);
}
.footer-section {
  background-size: cover;
  background-position: center;
  position: relative;
}

.footer-inner {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;
}

.footer-form-wrapper {
    background: rgba(0, 0, 0, 0.65);
    padding: 35px 100px 35px 100px;
    max-width: 50%;
    align-content: start;
    width: 100%;
    display: flex;
    justify-content: end;
}
.footer-content{
    max-width: 492px;
    text-align: center;
}
.footer-heading {
  font-weight: 800;
  color: var(--white-color);
  margin-bottom: 10px;
  font-size: 36px;
  line-height: 40px;
}
.footer-cta-wrapper{
  display: flex;
  justify-content: center;
}
.footer-cta-btn {
  width: 350px;
  font-size: 24px;
  line-height: 45px;
  border-radius: 6px;
  border: 1px solid #fff;
  padding: 0 18px 0 18px; /* Add left padding for icon space */
  justify-content: center;
  position: relative; /* Required for absolute positioning inside */
  display: flex;
  align-items: center;
  color: var(--white-color);
  background-color: var(--black-color);
  text-decoration: none;
}

.footer-cta-btn:hover {
  background: #000000bf;
  color:  #fff;
}

.footer-cta-btn img {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; /* Adjust icon size as needed */
  height: auto;
}

.highlight-red {
  color: #F22121;
}
.form-middle-text{
  font-size: 22px;
  margin: 10px 0;
}

/* Contact Form 7 Fields */
.footer-form-wrapper .wpcf7-form input[type="text"],
.footer-form-wrapper .wpcf7-form input[type="tel"],
.footer-form-wrapper .wpcf7-form input[type="email"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: none;
  font-size: 18px;
  direction: rtl;
  text-align: right;
}

.footer-form-wrapper .wpcf7-submit {
  background-color: var(--red-color, #e60012);
  color: var(--white-color);
  font-weight: 700;
  padding: 0 12px;
  line-height: 45px;
  width: 100%;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s ease;
  font-size: 26px;
}

.footer-form-wrapper .wpcf7-submit:hover {
  background-color: #c4000f;
}
.footer-form-fields{
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.footer-form-fields .wpcf7-spinner {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.footer-form-fields form{
    max-width: 350px;
}
/* Bottom tag */
.footer-bottom {
  font-size: 26px;
  font-weight: 500;
}
.footer-bottom span{
    font-weight: 300;
}
.footer-top-tag {
  font-size: 20px;
  font-weight: 800;
  color: var(--white-color);
  margin-bottom: 10px;
}



/* Section-1 */
.banner-section {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* Reserve space with aspect ratio (image 1924x721) */
  aspect-ratio: 1924 / 721;
  padding: 277px 0 60px 0;
  direction: rtl;
  position: relative;
  z-index: 1;
  margin-bottom: -60px;
}

.banner-content-box {
  background-color: rgb(0 0 0 / 70%);
  max-width: 485px;
  padding: 0;
  margin-bottom: -61px;
  z-index: 1;
  position: relative;
}
.text-banner-content{
  /* Narrower side padding so the sub-headline fits on one line inside the
     485px box - it needs 432px and 35px sides only left 415px. */
  padding: 35px 20px 0 20px;
}
.banner-main-heading {
  font-size: 47px;
  color: var(--white-color);
  line-height: 60px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0;
}

.banner-sub-heading {
  font-size: 45px;
  line-height: 60px;
  color: var(--white-color);
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}

.banner-description {
  padding-top: 15px;
  border-top: 1px solid #FFFFFF;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  margin-bottom: 15px;
  /* Match the headings above it - without this the wrapped second line
     falls back to the RTL start edge instead of centring. */
  text-align: center;
}

.banner-button {
    display: flex;
    background-color: #e60023;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    padding: 12px 30px;
    line-height: normal;
    text-decoration: none;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    gap: 15px;
}
.banner-button:hover{
    background-color: #c4000f;
    color: #fff;
}
.banner-white-strip {
  width: 61%;
  height: 56px; /* adjust to match design */
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
}


/* Who we are section 2 */
.who-we-are-section {
  margin-top: 60px;
  padding-top: 75px;
  margin-bottom: 60px;
}

.who-we-are-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap; /* responsive */
}

.video-box {
  flex: 1 1 48%;
  max-width: 48%;
  position: relative;
}

.video-box img {
  width: 100%;
  height: auto;
}

.play-button {
  width: 80px;
  height: 80px;
  border: 4px solid white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.1); /* optional transparent bg */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.play-button::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 7px; /* centers triangle better */
}

.who-we-are-content {
  flex: 1 1 48%;
  max-width: 48%;
  text-align: right;
}

.section-tag {
  font-size: 22px;
  color: red;
  font-weight: 600;
  margin-bottom: 10px;
}

.who-we-are-heading {
  font-size: 50px;
  line-height: 60px;
  font-weight: 700;
  margin-bottom: 20px;
}

.who-we-are-description {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 30px;
}

.who-we-are-button {
  font-size: 22px;
  font-weight: 600;
  background: black;
  color: white;
  padding: 5px 25px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 4px;
}
.who-we-are-button:hover{
  background: #000000bf;
  color:  #fff;
}


/* Section 3 image gallery */
.our-work-swiper {
  padding: 20px 0;
}

.swiper-slide {
  /* transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(0.9); */
}

.swiper-slide-active {
  /* transform: scale(1.05); */
}

.swiper-slide img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.swiper-button-prev,
.swiper-button-next {
  background: rgba(0, 0, 0, 0.4);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 8px;
}

/* CTA Section 6 */

.cta-form-section {
  background-color: #f8f8f8;
}

.cta-bg-image {
  height: 100%;
  min-height: 400px;
  background-size: cover;
  background-position: center;
}

.cta-heading {
  font-size: 29px;
  font-weight: 800;
  line-height: 40px;
  margin-bottom: 15px;
  color: var(--white-color);
  text-align: center;
}

.cta-description {
  font-size: 25px;
  font-weight: 600;
  text-align: center;
}

/* Style the Contact Form 7 submit button */
.cta-form input[type="submit"] {
    background-color: #e60023;
    color: white;
    border: none;
    padding: 5px 30px;
    font-size: 24px;
    font-weight: 600;
    border-radius: 4px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    cursor: pointer;
}
.cta-form input[type="submit"]:hover{
  background-color: #c4000f;
}
.form-content-wrapper{
  max-width: 445px;
}
/* .footer-form-fields input[type="submit"]::after {
  content: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/left-arrow.png');
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
} */
.cta-textual-wrapper{
  background: #333333;
  align-content: flex-end;
  display: flex !important;
  flex-wrap: wrap;
  padding: 75px 109px;
}
.cta-form .wpcf7-form input[type="text"], .cta-form .wpcf7-form input[type="tel"], .cta-form .wpcf7-form input[type="email"]{
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: none;
  font-size: 18px;
  direction: rtl;
  text-align: right;
}


/* Video Gallery section 4 */
.vimeo-gallery-section {
  padding: 100px 20px;
}
.vimeo-gallery-section iframe {
  width: 100%;
  aspect-ratio: 9/16;
  /* height: auto; */
}

.video-card {
  position: relative;
}

.video-control {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
}



.who-we-are-video-inner{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: 100%;
  background: transparent;
}

.who-we-are-play-button{
  width: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.who-we-are-pause-button{
  width: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.who-we-are-video-inner > iframe{
  width: 100%;
  height: 100%;
}
.who-we-are-video-wrapper{
  width: 48%;
  position: relative;
  height: 392px;
}


/* Modules Section */
.modules-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    align-items: stretch;
}

.module-card {
    width: 278px;
    height: 358px;
    min-height: 423px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
    padding: 15px;
    cursor: pointer;
}

.module-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ==== IMAGE BOX ==== */
.module-image {
    width: 100%;
    height: 313px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #fff;
}

.module-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.modules-title{
  text-align: center;
  margin-bottom: 40px;
  font-size: 40px;
  font-weight: 700;
}
.modules-section{
  margin-bottom: 60px;
  padding: 0 60px;
}
/* ==== BODY AREA THAT STICKS TO BOTTOM ==== */
.module-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 1;
    padding-top: 15px;
}

/* ==== LOGO ==== */
.module-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.module-logo img {
    max-height: 32px;
    width: auto;
    display: block;
}

/* ==== NAME ==== */
.module-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    min-height: 40px;
    color: #444444;
    text-align: center;
}

/* ==== SEPARATOR ==== */
.module-separator {
    width: 40px;
    height: 3px;
    background: #d3d3d3;
    margin: 10px auto 14px;
    border-radius: 2px;
}

/* ==== PRICING ==== */
.module-pricing {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 8px;
    align-items: center;
}

.new-price {
    font-weight: bold;
    color: #000;
    font-size: 20px;
}

.old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 20px;
}

/* ==== BUTTON ==== */
.modules-button-wrapper {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.modules-button {
    display: inline-block;
    padding: 12px 24px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.modules-button:hover {
    background: #333;
}


.swiper-wrapper.justify-module-center {
  justify-content: center;
}
.modules-swiper {
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    padding: 0 20px 10px 20px !important;
} 
.modules-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.modules-swiper .swiper-button-prev,
.modules-swiper .swiper-button-next {
    width: 50px;
    height: 50px;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}

/* Custom arrows */
.modules-swiper .swiper-button-prev {
    background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/next-module-slider.svg');
    right: 0 !important; /* adjust spacing if needed */
}

.modules-swiper .swiper-button-next {
    background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/prev-module-slider.svg');
    left: 0px !important; /* adjust spacing if needed */
}

/* Remove default Swiper arrows */
.modules-swiper .swiper-button-prev::after,
.modules-swiper .swiper-button-next::after {
    display: none;
}

.journey-section {
    background-color: #F0F2F4;
    padding: 60px 0;
}

.journey-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.journey-heading {
    font-size: 40px;
    line-height: 40px;
    font-weight: bold;
}

.journey-description {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 30px;
}

.journey-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}

.journey-box {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: calc(23% - 18px); /* 4 per row with gap */
    text-align: right;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    position: relative;
}

/* Add the triangle */
.journey-box::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #fff;
}


.journey-number {
    font-size: 45px;
    line-height: 45px;
    font-weight: bold;
    color: #e60000;
    font-family: 'Rubik', sans-serif;
    margin-bottom: 10px;
}

.journey-box-heading {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.journey-box-description {
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

/* Reuse existing button class styling */
.journey-button-wrapper {
    text-align: center;
}


/* Kitchen Revolution */
.kitchen-revolution-section {
    background-color: #fff;
    direction: rtl;
    padding: 60px 20px;
}

.kitchen-main-header {
    font-size: 50px;
    line-height: 60px;
    font-weight: 800;
    margin-bottom: 20px;
}

.kitchen-description {
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
    margin-bottom: 20px;
    color: #333;
}

.kitchen-tagline {
    font-size: 26px;
    font-weight: 700;
    color: #000;
    line-height: 32px;
    margin-bottom: 30px;
}

.kitchen-icon-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 30px;
}

.kitchen-icon-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #000;
}

.kitchen-icon-desc {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #000;
}
.col-sm-6:last-of-type .kitchen-icon-box {
    margin: 0;
}
.kitchen-icon-box {
    max-width: 300px;
}
.kitchen-revolution-column-1{
  padding-left: 72px;
}

.kitchen-revolution-column-2 .col-sm-6:last-of-type {
    margin: 0;
}

/* Why Choose outdoor kitchen */
.why-outdoor-heading {
  font-size: 40px;
  font-weight: bold;
  color: #fff;
}
.outdoor-wrapper{
      padding-bottom: 30px;
}

.why-outdoor-description {
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 40px;
}

.why-outdoor-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}

.why-outdoor-desc {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
}

.why-choose-outdoor-section{
  padding: 60px 20px;
}
.white-btn-border{
  border: 1px solid #fff;
}


/* Testimonials */
.testimonial-section{
  padding: 60px 20px;
}
.testimonial-heading {
  font-size: 40px;
  font-weight: 700;
}
.testimonial-wrapper{
  margin-top: 0;  
}
.testimonial-box {
  padding: 20px;
}

.testimonial-desc {
  font-size: 20px;
  font-weight: 400;
  margin: 15px 0;
  color: #333;
}

.testimonial-head {
  font-size: 20px;
  font-weight: 700;
  color: #000;
}



/* Images slider */
.our-work-gallery-section {
  padding: 60px 0 0px 0;
}
/* .our-work-swiper .swiper-slide {
  width: 1000px !important;
} */

.gallery-heading {
  font-size: 40px;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
  text-align: center;
}

.our-work-swiper {
  position: relative;
}

.our-work-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 200px; /* Fallback in case image fails to load */
    width: 80%; /* Show one full slide and part of neighbors */
  max-width: 100%;
}
.our-work-swiper .swiper-slide img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  border-radius: 0;
  display: block;
  cursor: grab;
}

/* Remove default Swiper arrow styling */
.gallery-nav.swiper-button-next::after,
.gallery-nav.swiper-button-prev::after {
  display: none !important;
  content: none !important;
}

/* Remove any dark backgrounds */
.gallery-nav.swiper-button-next,
.gallery-nav.swiper-button-prev {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Your custom SVG as background */
.gallery-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 36px !important;
  height: 36px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

/* Right arrow */
.swiper-button-next.gallery-nav {
  left: 11% !important;
  background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/previous-shadow-icon.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-top: 0 !important;
}

/* Left arrow */
.swiper-button-prev.gallery-nav {
  right: 11% !important;
  background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/next-shadow-icon.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-top: 0 !important;
}


.gallery-nav img {
  width: 100%;
  height: auto;
}


.vimeo-swiper {
  position: relative;
}

.vimeo-swiper .swiper-slide {
  height: 100%;
}
.touch-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: grab;
}
.vimeo-iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper img{
  width: auto !important;
}




.footer-form-fields form p {
    margin: 0;
}
.wpcf7-not-valid-tip{
    margin-top: -10px;
    text-align: right;
}
.wpcf7-response-output{
  text-align: right;

}
.footer-form-fields br {
  display: none;
}
.accessibility-privacy-links{
  font-size: 18px;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.accessibility-privacy-links a:hover{
  color: var(--red-color) !important;
}


/* Global Page */
.privacy-banner{
    min-height: 360px;
    padding: 16px;
    margin-bottom: 60px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}
.privacy-banner::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}
.page-content{
    margin-bottom: 80px;
}
.page-content ul {
    list-style: disc;
    margin-right: 16px;
}
.page-content h2, .page-content h3 {
    margin-top: 26px;
}
.page-content p {
    margin-bottom: 8px;
    line-height: 28px;
}
.page-content p a{
    color: #F22121;
}
.privacy-banner h1 {
    font-size: 50px;
    line-height: 56px;
    margin-bottom: 16px;
    color: #fff;
}
.privacy-banner-content{
    z-index: 9;
    position: relative;
}
.breadcrumbs {
    gap: 10px;
    margin-bottom: 0;
    list-style: none;
}
.breadcrumbs li {
    color: #fff;
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
}
.breadcrumbs li a{
    color: #F22121;
}
.privacy-links {
    gap: 20px;
    margin-top: 16px;
}
.privacy-links a{
    color: #F22121;
    text-decoration: underline;
}
.page-content a{
  color: #F22121;
}
.page-content ol li{
  margin-bottom: 8px;
}
.who-we-are-video-control{
  cursor: pointer;
}

/* Play button visible and clickable when video is paused */
.play-btn.video-control {
  opacity: 1 !important; /* Initially hidden */
  pointer-events: unset !important;
  transition: opacity 0.3s ease, pointer-events 0.3s ease;
}

.play-btn.video-control.paused {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.pause-button {
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pause-button.visible {
  display: block;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Adjust Swiper layout if needed due to filter addition */
.modules-section .swiper-slide {
    display: flex; /* Ensures cards are displayed correctly within slides */
    justify-content: center;
    align-items: center;
}

/* Base styling for the tab container */
.modules-tabs {
  display: flex; 
  list-style: none; 
  padding: 0;
  margin: 20px 0; 
  overflow: hidden;
  direction: rtl; 
  gap: 7px;
}
.module-tab {
  flex: 1;
  text-align: center;
  padding-bottom: 14px;
  cursor: pointer;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: none;
  position: relative;
}
.module-tab span{
  padding: 10px 19px;
  width: 100%;
  display: block;
  background: #F3F4F5;
}
.module-tab.active span{
  background: #000;
}

.module-tab:not(.active)::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #F3F4F5;
}


.module-tab.active {
  color: #fff; 
}

.module-tab.active::after {
  content: ''; 
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 5px; 
  background-color: #ff0000; 
}


/* ============================================
   PRODUCT MODAL - REDESIGNED
   ============================================ */

/* Modal Overlay */
.custom-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.9) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
  animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal Content Box */
.custom-popup-content {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border-radius: 24px;
  padding: 0;
  min-width: auto;
  width: 90%;
  max-width: 750px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.5),
    0 15px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.9);
  animation: modalSlideIn 0.4s ease;
}

/* Close Button */
.close-popup {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 24px;
  background: rgba(255,255,255,0.95);
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.close-popup:hover {
  background: var(--red-color, #e60012);
  color: #fff;
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 6px 20px rgba(230, 0, 18, 0.4);
}

/* Popup Body */
.popup-body {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

/* Product Image Section */
.popup-image {
  width: 45%;
  background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  position: relative;
  overflow: hidden;
}

.popup-image::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 60%);
  pointer-events: none;
}

.popup-image img {
  height: auto;
  max-height: 283px;
  width: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: transform 0.4s ease;
}

.popup-image:hover img {
  transform: scale(1.05);
}

.popup-gallery-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

/* Product Info Section */
.popup-info {
  flex: 1;
  padding: 35px 30px;
  width: 100%;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}

.popup-info h2 {
  margin: 0 0 20px 0;
  font-size: 28px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.3;
  position: relative;
  padding-bottom: 16px;
}

.popup-info h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--red-color, #e60012) 0%, #ff4d5a 100%);
  border-radius: 2px;
}

/* Product Description */
.popup-description {
  margin: 10px 0;
  font-size: 16px;
  color: #444;
  line-height: 1.7;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
  border-radius: 12px;
  border-right: 4px solid var(--red-color, #e60012);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.popup-description strong {
  color: var(--red-color, #e60012);
  font-weight: 800;
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Pricing Section */
.popup-pricing {
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.popup-pricing .old-price {
  font-size: 20px;
  color: #999;
  text-decoration: line-through;
  font-weight: 600;
  order: 1;
}

.popup-pricing .new-price {
  font-size: 32px;
  font-weight: 800;
  color: var(--red-color, #e60012);
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
  padding: 10px 20px;
  border-radius: 12px;
  border: 2px solid #ffdddd;
  order: 2;
}

/* Quantity and Add to Cart Wrapper */
.qty-main-wrapper {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.quantity-cart-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Quantity Input */
.quantity-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

.quantity-wrapper label {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}

.quantity-wrapper input,
.quantity-input {
  width: 70px;
  padding: 12px 8px;
  text-align: center;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Assistant', sans-serif;
  transition: all 0.3s ease;
  background: #fff;
}

.quantity-wrapper input:focus,
.quantity-input:focus {
  outline: none;
  border-color: var(--red-color, #e60012);
  box-shadow: 0 0 0 4px rgba(230, 0, 18, 0.1);
}

/* Add to Cart Button */
.add-to-cart {
  flex: 1;
  min-width: 160px;
  padding: 16px 28px;
  background: linear-gradient(135deg, var(--red-color, #e60012) 0%, #c4000f 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  font-family: 'Assistant', sans-serif;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(230, 0, 18, 0.35);
  position: relative;
  overflow: hidden;
}

/* .add-to-cart::before {
  content: '🛒';
  margin-left: 10px;
  font-size: 20px;
} */
.add-to-cart::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  background-image: url("/wp-content/uploads/2025/12/grocery-store.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


.add-to-cart::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.5s ease;
}

.add-to-cart:hover::after {
  left: 100%;
}

.add-to-cart:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(230, 0, 18, 0.45);
}

.add-to-cart:active {
  transform: translateY(-1px);
}

/* Cart Buttons */
.cart-buttons-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 12px;
}

.view-cart,
.send-to-whatsapp {
  padding: 12px 24px;
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 10px;
  font-weight: 700;
  font-family: 'Assistant', sans-serif;
  transition: all 0.3s ease;
}

.view-cart:hover,
.send-to-whatsapp:hover {
  background: linear-gradient(135deg, var(--red-color, #e60012) 0%, #c4000f 100%);
  transform: translateY(-2px);
}

/* Gallery Section Layout */
.popup-gallery {
  display: flex;
  flex-direction: column;
  width: 50%;
}

/* Thumbnails Section */
.popup-thumbnails {
  margin-top: 16px;
}

.thumbnails-swiper {
  width: 100%;
}

.thumbnails-swiper .swiper-slide {
  width: 70px;
  height: 70px;
  cursor: pointer;
  opacity: 0.5;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.thumbnails-swiper .swiper-slide:hover {
  opacity: 0.8;
}

.thumbnails-swiper .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid var(--red-color, #e60012);
  box-shadow: 0 4px 12px rgba(230, 0, 18, 0.3);
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Swiper Navigation */
.popup-slider-prev.swiper-button-prev,
.popup-slider-next.swiper-button-next {
  width: 40px;
  height: 40px;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.popup-slider-prev.swiper-button-prev {
  background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/prev-module-slider.svg');
  left: 10px;
}

.popup-slider-next.swiper-button-next {
  background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/next-module-slider.svg');
  right: 10px;
}

/* Remove default Swiper arrows */
.popup-slider-prev.swiper-button-prev::after,
.popup-slider-next.swiper-button-next::after {
  display: none;
}

.qty-main-wrapper{
  display: flex;
  gap: 15px;
  justify-self: center;
}


/* Cart Item Layout */
#cart-items {
  max-width: 900px;
  margin: 40px auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 10px;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.cart-item-image img {
  width: 100px;
  height: auto;
}

.cart-item-details {
  flex: 1;
  padding: 0 20px;
}

.cart-item-details h3 {
  margin: 0;
  font-size: 18px;
}

.quantity-controls {
  display: flex;
  align-items: center;
}

.quantity-controls button {
  width: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600; 
  background-color: #000;
  color: white;
  border: none;
  cursor: pointer;
}

.quantity-controls input {
  width: 40px;
  text-align: center;
  margin: 0 10px;
}

.remove-item {
  background-color: #e60023;
  color: white;
  padding: 5px 10px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.cart-item-total {
  font-size: 18px;
  font-weight: bold;
}

/* Total Price */
#cart-total {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  justify-content: flex-end;
}

#cart-total strong {
  color: #000;
}

/* Cart Buttons */
.cart-buttons-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.view-cart,
.send-to-whatsapp {
  padding: 10px 20px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.view-cart:hover,
.send-to-whatsapp:hover {
  background-color: #000;
}
/* ============================================
   CART MODAL - REDESIGNED
   ============================================ */

/* Modal Overlay */
.cart-confirmation-modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.85) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal Content Box */
.cart-popup-content {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  padding: 0;
  max-height: 85vh;
  overflow: hidden;
  width: 92%;
  max-width: 520px;
  position: relative;
  border-radius: 20px;
  box-shadow: 
    0 25px 80px rgba(0, 0, 0, 0.4),
    0 10px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.8);
  animation: slideUp 0.4s ease;
}

/* Modal Header */
.cart-popup-content h2 {
  margin: 0;
  /* padding: 24px 30px 20px; */
  padding: 10px 55px 14px 24px;
  font-size: 26px;
  font-weight: 800;
  color: #1a1a1a;
  border-bottom: 2px solid #f0f0f0;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  border-radius: 20px 20px 0 0;
  position: relative;
}

.cart-popup-content h2::after {
  /* content: '🛒'; */
  content: "";
  display: inline-block;
  width: 26px;
  height: 27px;
  margin-left: 5px;
  background-image: url(https://landing.grillmaster.co.il/wp-content/uploads/2025/12/grocery-store-black.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* Close Button */
.close-cart-popup {
  position: absolute;
  top: 10px;
  left: 20px;
  background: #f5f5f5;
  border: none;
  font-size: 20px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.25s ease;
  z-index: 10;
}

.close-cart-popup:hover {
  background: var(--red-color, #e60012);
  color: #fff;
  transform: rotate(90deg);
}

/* Cart Main Wrapper - Scrollable Area */
.cart-main-wrapper {
  padding: 20px 30px 30px;
  max-height: 60vh;
  overflow-y: auto;
}

.cart-main-wrapper::-webkit-scrollbar {
  width: 6px;
}

.cart-main-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.cart-main-wrapper::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.cart-main-wrapper::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* Cart Items */
.cart-popup-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  margin-bottom: 14px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.25s ease;
}

.cart-popup-item:hover {
  border-color: #ddd;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.cart-popup-item:last-of-type {
  margin-bottom: 0;
}

/* Product Image in Cart */
.cart-popup-item > img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  background: #f5f5f5;
  flex-shrink: 0;
}

/* Product Details */
.cart-popup-item > div {
  flex: 1;
  min-width: 0;
}

.cart-popup-item strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
  line-height: 1.3;
}

/* Quantity Controls */
.cart-quantity-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.cart-popup-item .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%);
  border: 1px solid #ddd;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.cart-popup-item .icon-btn:hover {
  background: linear-gradient(180deg, #e60012 0%, #c4000f 100%);
  border-color: #c4000f;
}

.cart-popup-item .icon-btn:hover img {
  filter: brightness(0) invert(1);
}
.delete-btn:hover img {
  filter: none !important;
}
.cart-popup-item .icon-btn img {
  width: 12px;
  height: 12px;
  transition: filter 0.2s ease;
  filter: brightness(0); /* Make icons black */
}

.cart-quantity-icons input[type="number"] {
  width: 50px;
  height: 32px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Assistant', sans-serif;
  background: #fff;
}

.cart-quantity-icons input[type="number"]:focus {
  outline: none;
  border-color: var(--red-color, #e60012);
}

/* Delete Button */
.cart-popup-item .delete-btn {
  background: #fff5f5;
  border: 1px solid #ffdddd;
  border-radius: 8px;
  padding: 6px;
  margin-right: auto;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart-popup-item .delete-btn:hover {
  background: #ffe0e0;
  border-color: #ffcccc;
}

.cart-popup-item .delete-btn img {
  width: 18px;
  height: 18px;
}

/* Empty Cart Message */
.cart-main-wrapper > p {
  text-align: center;
  color: #888;
  font-size: 16px;
  padding: 40px 20px;
}

/* Total Section */
.cart-main-wrapper > div[style*="text-align"] {
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  color: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  margin-top: 20px;
  font-size: 18px;
}

/* WhatsApp Button (kept for backwards compatibility) */
.whatsapp-button-wrapper {
  text-align: center;
  margin-top: 16px;
}

.whatsapp-button {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.whatsapp-button:hover {
  background: linear-gradient(135deg, #1ebe5b 0%, #0e7a6b 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* Quantity +/- buttons (alternative style) */
.increase-quantity,
.decrease-quantity {
  background: linear-gradient(180deg, #333 0%, #1a1a1a 100%);
  border: none;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.increase-quantity:hover,
.decrease-quantity:hover {
  background: linear-gradient(180deg, #e60012 0%, #c4000f 100%);
}

.increase-quantity img,
.decrease-quantity img {
  width: 14px;
  height: auto;
  pointer-events: none;
  filter: brightness(0) invert(1);
}

.remove-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 14px;
  padding: 6px 8px;
  color: #e60012;
  transition: opacity 0.2s ease;
}

.remove-item:hover {
  opacity: 0.7;
}

.remove-item img {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.cart-action-btn {
  display: flex;
  gap: 15px;
  align-items: center;
}

.cart-confirmation-content {
  background: #fff;
  padding: 20px;
}
.header-cart-icon{
  cursor: pointer;
  display: inline-block;
}
.header-cart-icon img{
  width: 30px;
  margin-right: 20px;
}

.header-cart-icon {
  position: relative;
  display: inline-block;
}

/* .cart-count-badge {
  position: absolute;
  top: -8px;
  right: 7px;
  background-color: red;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 50%;
  font-weight: bold;
  display: none; 
} */

.cart-count-badge {
  position: absolute;
  top: -8px;
  right: 7px;
  background-color: red;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 50%;
  font-weight: bold;
  display: none;
  width: 25px;
  height: 25px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.cart-quantity-icons input[type=number] {
  -moz-appearance: textfield;
  text-align: center;
}

/* Chrome/Safari/Edge specific spinner removal */
.cart-quantity-icons input[type=number]::-webkit-inner-spin-button,
.cart-quantity-icons input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================
   CART USER FORM - STYLED
   ============================================ */

.cart-user-form {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #f0f0f0;
  position: relative;
}

.cart-user-form::before {
  content: 'פרטי התקשרות';
  position: absolute;
  top: -12px;
  right: 50%;
  transform: translateX(50%);
  background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cart-form-field {
  margin-bottom: 14px;
  position: relative;
}

.cart-form-field input {
  width: 100%;
  padding: 16px 20px;
  padding-right: 42px;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  font-size: 16px;
  font-family: 'Assistant', sans-serif;
  direction: rtl;
  text-align: right;
  box-sizing: border-box;
  transition: all 0.3s ease;
  background: #fff;
}

.cart-form-field input:focus {
  outline: none;
  border-color: var(--red-color, #e60012);
  box-shadow: 0 0 0 4px rgba(230, 0, 18, 0.1);
}

.cart-form-field input::placeholder {
  color: #aaa;
}

/* Input Icons */
/* .cart-form-field:nth-child(1)::before {
  content: '👤';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  z-index: 1;
} */
 .cart-form-field:nth-child(1)::before {
    z-index: 1;
    content: "";
    display: inline-block;
    width: 20px;
    height: 27px;
    margin-left: 5px;
    background-image: url('/wp-content/uploads/2025/12/user-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/* .cart-form-field:nth-child(2)::before {
  content: '📱';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  z-index: 1;
} */
  .cart-form-field:nth-child(2)::before {
    z-index: 1;
    content: "";
    display: inline-block;
    width: 20px;
    height: 27px;
    margin-left: 5px;
    background-image: url('/wp-content/uploads/2025/12/phone-call-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/* .cart-form-field:nth-child(3)::before {
  content: '✉️';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  z-index: 1;
} */
.cart-form-field:nth-child(3)::before{
  z-index: 1;
  content: "";
  display: inline-block;
  width: 20px;
  height: 27px;
  margin-left: 5px;
  background-image: url('/wp-content/uploads/2025/12/email-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* TOS & Marketing Consent Checkbox */
.cart-consent-wrapper {
  margin-top: 18px;
  margin-bottom: 6px;
}

.cart-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.cart-consent-label:hover {
  border-color: #ddd;
  background: #fff;
}

.cart-consent-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--red-color, #e60012);
  border-radius: 4px;
}

.cart-consent-text {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  text-align: right;
}

.cart-consent-text a {
  color: var(--red-color, #e60012);
  font-weight: 700;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.cart-consent-text a:hover {
  color: #c4000f;
}

.cart-submit-wrapper {
  margin-top: 20px;
}

.cart-submit-button {
  width: 100%;
  padding: 18px 24px;
  background: linear-gradient(135deg, #e60012 0%, #c4000f 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 800;
  font-family: 'Assistant', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(230, 0, 18, 0.35);
  position: relative;
  overflow: hidden;
}

.cart-submit-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.cart-submit-button:hover::before {
  left: 100%;
}

.cart-submit-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(230, 0, 18, 0.45);
}

.cart-submit-button:active {
  transform: translateY(-1px);
}

.cart-submit-button:disabled {
  background: linear-gradient(135deg, #ccc 0%, #aaa 100%);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.cart-submit-button:disabled::before {
  display: none;
}

.cart-form-message {
  margin-top: 16px;
  text-align: center;
  font-size: 15px;
  min-height: 24px;
  padding: 12px;
  border-radius: 10px;
  font-weight: 600;
}

.cart-form-message span[style*="green"] {
  display: block;
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  color: #155724 !important;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #c3e6cb;
}

.cart-form-message span[style*="red"] {
  display: block;
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  color: #721c24 !important;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #f5c6cb;
}

body.no-scroll {
  overflow: hidden;
}

.testimonial-box img {
    width: auto;
}

/* Make sure swiper-pagination is visible and styled */
.testimonial-pagination.swiper-pagination {
  display: flex !important;
  justify-content: center;
  margin-top: 20px;
  gap: 8px;
  position: relative; /* or absolute, depending on your layout */
  z-index: 10;
}

.testimonial-swiper{
  cursor: grab;
}

.testimonial-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #000;
  opacity: 1;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.testimonial-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #e60012;
}

.footer-form-checkbox {
  direction: rtl;

}
.footer-form-checkbox label {
  padding-right: 25px;
  font-size: 12px;
  line-height: 15px;
  text-align: right;
  display: flex;
  align-items: flex-start;
}
.footer-form-checkbox input{
  position: absolute;
  right: 0;
  top: 10px;
} 



/* .our-work-swiper .swiper-slide.swiper-slide-next {
    width: 50% !important;
}
.our-work-swiper .swiper-slide.swiper-slide-active {
    width: 50% !important;
}
.our-work-swiper  .swiper-slide.swiper-slide-prev {
    width: 20% !important;
} */


/* Force Slick track to use flex (for horizontal layout) */
.project-detail-slider .slick-track {
  display: flex !important;
}

/* Ensure each slide inherits height properly */
.project-detail-slider .slick-track .slick-slide {
  height: inherit !important;
}

/* Images inside slides */
.project-detail-slider .slick-slide > img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  max-height: 600px;
  display: block;
}
.project-detail-slider .slick-list.draggable{
  cursor: grab;
}
/* Add horizontal space between slides */
.project-detail-slider .slick-slide {
  margin: 0 10px;

}

/* Allow margins to be visible (prevent clipping) */
.project-detail-slider .slick-list {
  overflow: hidden;
}

/* Remove default slick arrow content */
.project-detail-slider .slick-arrow::before {
  content: none !important;
}

/* Custom arrow styles */
.project-detail-slider .slick-prev,
.project-detail-slider .slick-next {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 44px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Adjust arrow positions — can tweak depending on layout */
.project-detail-slider .slick-prev {
  left: 22%;
  background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/previous-shadow-icon.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  width: 40px;
  height: 40px;
  font-size: 0;
}

.project-detail-slider .slick-next {
  right: 22%;
  background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/next-shadow-icon.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  width: 40px;
  height: 40px;
  font-size: 0;
}

/* Bottom spacing for slider */
.project-detail-slider {
  margin-bottom: 10px;
}



/* Our kitchen Swipper */
.kitchen-swiper {
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    padding: 0 20px 10px 20px !important;
} 
.kitchen-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.kitchen-swiper .swiper-button-prev,
.kitchen-swiper .swiper-button-next {
    width: 50px;
    height: 50px;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}
.kitchen-swiper .swiper-button-next {
    background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/prev-module-slider.svg');
    left: 0px !important; 
}

/* Remove default Swiper arrows */
.kitchen-swiper .swiper-button-prev::after,
.kitchen-swiper .swiper-button-next::after {
    display: none;
}
.kitchen-swiper .swiper-button-prev {
    background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/next-module-slider.svg');
    right: 0 !important; 
}
.kitchen-swiper .module-image img{
  object-fit: cover;
  max-height: 250px;
}
.kitchen-swiper .module-image {
  align-items: start;
}
.kitchen-module-section{
  margin-bottom: 0;
  padding: 60px 0 0 0;
}


.cc-title {
	color: #fff !important;
}
.cc-body {
	font-size: 14px;
}

/* =========================================================
   Hero lead-form popup  (spec 4.1) - landing page only
   ========================================================= */
.hero-form-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.9) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  justify-content: center;
  align-items: flex-start;
  z-index: 10000;
  padding: 20px;
  direction: rtl;
  animation: modalFadeIn 0.3s ease;
}

.hero-form-popup.is-open {
  display: flex;
}

.hero-form-popup-content {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 52px 32px 32px;
  border-radius: 24px;
  background: linear-gradient(180deg, #1c1c1c 0%, #000000 100%);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5), 0 15px 40px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.4s ease;
  text-align: center;
}

.hero-form-popup-title {
  color: var(--white-color, #fff);
  font-family: var(--font-family-base);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 6px;
}

.hero-form-popup-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  line-height: 1.4;
  margin: 0;
}

/* Field styling mirrors the footer form. It is written out explicitly rather
   than reusing .footer-form-wrapper, whose panel layout (max-width 50%,
   100px padding, dark background) is meant for the footer only. */
.hero-form-popup .wpcf7-form input[type="text"],
.hero-form-popup .wpcf7-form input[type="tel"],
.hero-form-popup .wpcf7-form input[type="email"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  direction: rtl;
  text-align: right;
}

.hero-form-popup .wpcf7-submit {
  width: 100%;
  padding: 0 12px;
  border: none;
  border-radius: 5px;
  background-color: var(--red-color, #e60012);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 45px;
  cursor: pointer;
  transition: 0.3s ease;
}

.hero-form-popup .wpcf7-submit:hover {
  background-color: #c4000f;
}

.hero-form-popup .footer-form-fields {
  margin-top: 20px;
}

.hero-form-popup .footer-form-fields form {
  max-width: 100%;
  width: 100%;
}

.hero-form-popup .footer-form-checkbox {
  /* The consent input is position:absolute - anchor it to its own box,
     otherwise it jumps to the corner of the popup panel. */
  position: relative;
}

.hero-form-popup .footer-form-checkbox label {
  color: rgba(255, 255, 255, 0.75);
}

.hero-form-popup .wpcf7-response-output {
  color: var(--white-color, #fff);
  margin: 14px 0 0;
}

.hero-form-close {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  font-size: 19px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.hero-form-close:hover {
  background: var(--red-color, #e60012);
  color: #fff;
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 6px 20px rgba(230, 0, 18, 0.4);
}

/* The hero CTA is a link styled as a button - keep it looking identical
   whether it opens the popup or falls back to the bottom form. */
.banner-button.hero-form-trigger {
  cursor: pointer;
}

@media (max-width: 767px) {
  .hero-form-popup {
    padding: 12px;
  }

  .hero-form-popup-content {
    max-height: calc(100vh - 24px);
    padding: 48px 20px 24px;
    border-radius: 18px;
  }

  .hero-form-popup-title {
    font-size: 24px;
  }

  .hero-form-popup-text {
    font-size: 15px;
  }
}


/* =========================================================
   "עבודות שלנו" gallery - vertical grid, not a carousel (spec 4.2)
   Desktop 3 / tablet 2 / mobile 1.
   ========================================================= */
.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  direction: rtl;
}

.project-gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #f0f0f0;
}

.project-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  /* Uniform tiles - the migrated product shots are a different shape from the
     existing gallery photos. Change this ratio to restyle the whole grid. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.project-gallery-item:hover img {
  transform: scale(1.05);
}

/* Tablet - 2 per row */
@media (max-width: 991px) {
  .project-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Mobile - 1 per row */
@media (max-width: 575px) {
  .project-gallery-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* =========================================================
   "עבודות שלנו" gallery - "load more" pager (landing only)

   The button is built by initGalleryLoadMore() in landing.js rather than in
   the template, so the PHP stays untouched and, with JS unavailable, every
   figure simply remains visible exactly as before.

   ACCESSIBILITY FONT RESIZE
   One Click Accessibility (Pojo) does not carry <button> in its selector
   list - see the Section 4c note in accessibility.css, which records .cc-btn
   and .cc-lang-toggle sitting frozen for the same reason. A flat px
   font-size on this button therefore stays put while the counter <p> above
   it keeps growing, and by step 200 the label reads smaller than its own
   caption. accessibility.css fixes that by registering each theme button by
   class; this control is landing-only, so it rides the same --a11y-scale
   variable directly and the fix stays in this file. The `, 1` fallback covers
   any page where accessibility.css is not loaded.
   ========================================================= */
.project-gallery-item.is-gallery-hidden {
  display: none;
}

.gallery-load-more-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 35px;
  direction: rtl;
}

/* The <p> also picks up accessibility.css Section 3's `font-size: inherit
   !important`, which resolves to the same 16px * scale - so the base value
   here and the resized value agree instead of jumping between them. */
.gallery-load-more-count {
  margin: 0;
  font-size: calc(16px * var(--a11y-scale, 1));
  line-height: 1.55;
  font-weight: 500;
  color: #666;
}

/* Matches .modules-button / .who-we-are-button - the section-level CTA look.
   Padding, gap and the chevron are in em so the whole control grows with its
   label instead of the text outgrowing a fixed box. */
.gallery-load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  max-width: 100%;
  padding: 0.65em 1.9em;
  background: #000;
  color: #fff;
  font-family: inherit;
  font-size: calc(20px * var(--a11y-scale, 1));
  font-weight: 600;
  /* Unitless, so leading tracks the type. accessibility.css deliberately
     excludes buttons from its line-height pass because several theme buttons
     centre their label with line-height; this one centres with padding, so a
     unitless value is safe and stops the label colliding at higher steps. */
  line-height: 1.2;
  text-align: center;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.gallery-load-more-btn:hover,
.gallery-load-more-btn:focus-visible {
  background: #333;
  color: #fff;
}

.gallery-load-more-btn:focus-visible {
  outline: 2px solid #e60023;
  outline-offset: 3px;
}

.gallery-load-more-btn:active {
  transform: translateY(1px);
}

/* Chevron drawn in CSS so the button costs no extra image request. Sized in
   em so it keeps its proportion to the label at every resize step. */
.gallery-load-more-btn::after {
  content: "";
  flex: 0 0 auto;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.1em) rotate(45deg);
  transition: transform 0.3s ease;
}

.gallery-load-more-btn:hover::after {
  transform: translateY(0.05em) rotate(45deg);
}

/* Only the batch just revealed animates, so the grid never re-flashes. */
.project-gallery-item.is-gallery-revealed {
  animation: gm-gallery-fade-in 0.45s ease both;
}

@keyframes gm-gallery-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-gallery-item.is-gallery-revealed {
    animation: none;
  }

  .gallery-load-more-btn,
  .gallery-load-more-btn::after {
    transition: none;
  }
}

@media (max-width: 575px) {
  .gallery-load-more-wrapper {
    margin-top: 26px;
  }

  .gallery-load-more-count {
    font-size: calc(15px * var(--a11y-scale, 1));
  }

  .gallery-load-more-btn {
    width: 100%;
    padding: 0.67em 1.6em;
    font-size: calc(18px * var(--a11y-scale, 1));
  }
}


/* =========================================================
   Hero with the lead form inline (spec 4.1)

   Text on the right, form card on the left - the bullskitchens
   reference layout. Replaces the old CTA button + popup.
   Selectors are doubled (.banner-section.banner-with-form) so they
   beat the single-class .banner-section rules in the responsive file,
   which loads after this one.
   ========================================================= */
.banner-section.banner-with-form {
  /* Height of .banner-white-strip, which overlays the bottom of the hero.
     Adding it to the bottom padding centres the content in the space ABOVE
     the strip instead of in the full section box, so the card is not pushed
     one strip-height too low. Kept in step with the strip below. */
  --banner-strip-h: 56px;

  /* The fixed ratio was sized for a text-only hero; let it grow with
     the form instead of the form overflowing the background. */
  aspect-ratio: auto;
  min-height: 660px;
  /* The white strip is commented out of the landing template, so no space is
     reserved for it any more - symmetric padding centres the form card. */
  padding: 110px 0;
  display: flex;
  align-items: center;
}

/* The strip is 53px in this range. */
@media (max-width: 1020px) {
  .banner-section.banner-with-form {
    --banner-strip-h: 53px;
  }
}

.banner-section.banner-with-form > .container {
  width: 100%;
}

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

.banner-with-form .banner-content-box {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.banner-form-card {
  flex: 0 0 400px;
  max-width: 400px;
  padding: 28px 26px;
  border-radius: 14px;
  background: rgb(0 0 0 / 78%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  text-align: center;
  direction: rtl;
}

.banner-form-title {
  margin: 0 0 16px;
  color: #fff;
  /* !important beats the blanket "h2 {...!important}" rules in the
     responsive file, which otherwise force this to 35px / 30px. */
  font-size: clamp(20px, 4.4vw, 26px) !important;
  font-weight: 800;
  line-height: 1.25 !important;
  text-wrap: balance;
}

.banner-form-card .footer-form-fields {
  margin-top: 0;
}

.banner-form-card .footer-form-fields form {
  width: 100%;
  max-width: 100%;
}

.banner-form-card .wpcf7-form input[type="text"],
.banner-form-card .wpcf7-form input[type="tel"],
.banner-form-card .wpcf7-form input[type="email"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  direction: rtl;
  text-align: right;
}

.banner-form-card .wpcf7-submit {
  width: 100%;
  padding: 0 12px;
  border: none;
  border-radius: 5px;
  background-color: var(--red-color, #e60012);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 45px;
  cursor: pointer;
  transition: 0.3s ease;
}

.banner-form-card .wpcf7-submit:hover {
  background-color: #c4000f;
}

/* The consent input is position:absolute - give it its own anchor. */
.banner-form-card .footer-form-checkbox {
  position: relative;
}

.banner-form-card .footer-form-checkbox label {
  color: rgba(255, 255, 255, 0.75);
}

.banner-form-card .wpcf7-response-output {
  margin: 12px 0 0;
  color: #fff;
}

@media (max-width: 1199px) {
  .banner-form-card {
    flex-basis: 350px;
    max-width: 350px;
  }
}

/* Stack below the copy, so the headline still leads on small screens. */
@media (max-width: 991px) {
  .banner-section.banner-with-form {
    min-height: 0;
    padding: 110px 0 70px;
  }

  .banner-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  /* Stacked, both are capped and centred - left full width they stretch
     to ~765px on tablet portrait, which looks unformatted and drags the
     form inputs far wider than they need to be. */
  .banner-with-form .banner-content-box {
    width: 100%;
    max-width: 520px;
  }

  .banner-form-card {
    flex: 1 1 auto;
    width: 100%;
    max-width: 520px;
  }
}

@media (max-width: 600px) {
  .banner-section.banner-with-form {
    /* The strip is display:none at this width. */
    --banner-strip-h: 0px;
    padding: 50px 20px;
  }

  .banner-form-card {
    padding: 22px 18px;
    border-radius: 12px;
  }

}
/* Remove the problematic body filter only during grayscale mode */
body.pojo-a11y-grayscale {
  -webkit-filter: none !important;
  filter: none !important;
  overflow-x: hidden !important;
}

/* Reapply grayscale to the document root */
html:has(body.pojo-a11y-grayscale) {
  -webkit-filter: grayscale(100%) !important;
  filter: grayscale(100%) !important;
}

/* Change toolbar positioning only during grayscale mode */
body.pojo-a11y-grayscale #pojo-a11y-toolbar {
  position: fixed !important;
  z-index: 99999 !important;
}
.cc-slider, body.pojo-a11y-high-contrast .cc-slider, body.pojo-a11y-grayscale .cc-slider,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider{
  background: #ababff !important;
}
body.pojo-a11y-grayscale .wpcf7-not-valid-tip {
  color: #fff;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-btn{
  border: 1px solid #000 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider {
  background: gray !important;
}
body.pojo-a11y-high-contrast .cc-slider {
  background: gray !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider {
  background: gray !important;
}
body #cc-floater {
    bottom: unset !important;
    top: 12.5vw !important;
    left: 0.2vw !important;
    right: unset !important;
    width: 2.5vw !important;
    height: 2.5vw !important;
    line-height: 2.5vw;
    text-align: center !important;
    z-index: 999 !important;
}
body #cc-floater svg{
    width: 1.5vw !important;
    height: 1.5vw !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
body #pojo-a11y-toolbar{
    z-index: 9999 !important;
    top: 9vw !important;
}
body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
    font-size: 1.5vw !important;
    padding: 0.6vw !important;
}
body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg{
    width: 1.5vw !important;
}

@media(max-width: 767px){
    body #cc-floater{
        bottom: unset !important;
        top: 60vw !important;
        left: 2px !important;
        width: 7.5vw !important;
        height: 7.5vw !important;
        line-height: 7.5vw;
        padding: 4.5vw !important;
    }
    body #cc-floater svg {
        width: 5vw !important;
        height: 5vw !important;
    }
    body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
        font-size: 5.5vw !important;
        padding: 2vw !important;
    }
    body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg {
        width: 5.8vw !important;
    }
    body #pojo-a11y-toolbar {
        top: 48vw !important;
    }

    .cc-banner {
            padding: 16px !important;
    }
    .cc-pos-right {
        left: 50% !important;
        right: unset !important;
        bottom: 60px !important;
        width: 95%;
        transform: translateX(-50%);
    }
    .cc-btn{
        padding: 7px 9px !important;
    }
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input, textarea, select {
  border: 1px solid #000 !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder, textarea::placeholder{
  color: #000;
}

body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .submit-col .global-btn{
  border: 1px solid #000 !important;
}

body.pojo-a11y-high-contrast {
  background: #000;
}
/* body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .whatsapp-float svg{
  background: #000 !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .touch-layer {
  background: transparent !important;
}
body.pojo-a11y-high-contrast .touch-layer {
  background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .touch-layer{
  background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .kitchen-icon-box img {
  background: #fff !important;
}
body.pojo-a11y-high-contrast .kitchen-icon-box img {
  background: #fff !important;
}
body.pojo-a11y-high-contrast .banner-section .container {
  background: transparent !important;
}
body.pojo-a11y-high-contrast .banner-row {
  background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .banner-section .container {
  background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .banner-row {
  background: transparent !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .banner-section .container {
  background: transparent !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .banner-row {
  background: transparent !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) {
  background: #000;
}
body.pojo-a11y-high-contrast {
  background: #000;
} */