/* Kabadivala Scoped Custom CSS for Elementor Preserving 100% Visual Fidelity */

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

:root {
  --g: #087a3b;
  --dg: #07572e;
  --lg: #effaf0;
  --lime: #67bd31;
  --yellow: #ffd51e;
  --ink: #102632;
  --muted: #53666e;
  --blue: #edf7ff;
}

body, .elementor-page {
  font-family: 'Nunito Sans', Arial, sans-serif !important;
  color: var(--ink);
}

.caveat-font, .small-action, .hero-photo em, .pickup em, .final em {
  font-family: Caveat, cursive !important;
}

/* Header & Logo styling */
.kabadivala-logo {
  display: flex;
  flex-direction: column;
  line-height: .82;
  min-width: 180px;
  color: #063d27;
  text-decoration: none;
}
.kabadivala-logo b {
  font-size: 31px;
  font-weight: 900;
  letter-spacing: -2px;
}
.kabadivala-logo b span {
  color: var(--g);
}
.kabadivala-logo small {
  font-size: 6px;
  letter-spacing: .7px;
  font-weight: 900;
  margin-top: 6px;
}

/* WhatsApp & Action Buttons */
.kabadivala-whatsapp-btn, .kabadivala-btn {
  border: 0;
  background: linear-gradient(135deg, #0b9a48, #006b30);
  color: #fff !important;
  border-radius: 22px;
  font-weight: 900;
  padding: 11px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}
.kabadivala-btn.outline {
  background: #fff;
  border: 1.5px solid var(--g);
  color: var(--dg) !important;
}
.kabadivala-yellow-btn {
  background: var(--yellow);
  color: #111 !important;
  border: 0;
  border-radius: 11px;
  font-weight: 900;
  padding: 11px 19px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}

/* Category Grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.cat-grid article {
  border: 1px solid #e5efe6;
  background: #fff;
  padding: 7px;
  border-radius: 7px;
  min-width: 0;
}
.cat-grid img {
  width: 100%;
  height: 63px;
  object-fit: cover;
  border-radius: 4px;
}
.cat-grid b {
  font-size: 12px;
  margin-top: 3px;
  display: block;
}
.cat-grid small {
  font-size: 9px;
  line-height: 1.05;
  display: block;
  color: var(--muted);
}

/* 4-Step Process */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 11px;
  background: #fff9e4;
  border-radius: 10px;
  padding: 12px;
}
.steps article {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.steps i {
  font-style: normal;
  background: #20a74b;
  border-radius: 50%;
  padding: 8px 7px;
  color: #fff;
  font-weight: 900;
}
.steps article:nth-child(2) i { background: #f6b600; }
.steps article:nth-child(3) i { background: #10a8e7; }
.steps strong { font-size: 30px; color: var(--g); height: 39px; }

/* Hero photo height fix */
.hero-photo img, .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center;
}

/* Responsive Adjustments */
@media(max-width:900px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}
@media(max-width:560px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
}


/* How It Works Layout Fixes for Elementor */
.hiw-timeline-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  max-width: 1050px !important;
  margin: 45px auto !important;
  padding: 0 25px !important;
}

.hiw-step-col {
  flex: 1 1 22% !important;
  max-width: 25% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 10px 15px !important;
  box-sizing: border-box !important;
}

.hiw-promise-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  max-width: 820px !important;
  margin: 22px auto 0 !important;
}

.hiw-promise-col {
  flex: 1 1 22% !important;
  max-width: 25% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .hiw-timeline-grid {
    gap: 20px !important;
  }
  .hiw-step-col {
    flex: 1 1 45% !important;
    max-width: 50% !important;
  }
  .hiw-promise-col {
    flex: 1 1 45% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 480px) {
  .hiw-step-col {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  .hiw-promise-col {
    flex: 1 1 50% !important;
    max-width: 50% !important;
  }
}

/* Hero Image Full Size & Object Fit Cover Fix */
.elementor-widget-image img {
  width: 100% !important;
  height: auto;
  max-width: 100%;
}

.why-hero img, .page-hero img, .wu-hero-img img {
  width: 100% !important;
  height: 100% !important;
  min-height: 320px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}


/* Text Editor & Container Paragraph Automatic Wrap Fix (Chrome Incognito, Firefox, Safari) */
.elementor-widget-text-editor, 
.elementor-widget-text-editor p, 
.elementor-text-editor, 
p, 
.entry-content p {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.hdr-nav-link a {
  white-space: nowrap !important;
  text-decoration: none !important;
}

.hdr-btn-action a, .hdr-btn-action span {
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* Ultimate Addons for Elementor / HFE Nav Menu Fixes */
.elementor-widget-navigation-menu, .elementor-widget-uael-nav-menu, .hfe-nav-menu {
  box-sizing: border-box !important;
}

/* Mobile Responsive Navigation Menu Collapse Rules (< 768px) */
@media (max-width: 768px) {
  /* Prevent raw text links from overflowing and wrap dropdown cleanly */
  .elementor-widget-navigation-menu, .elementor-widget-uael-nav-menu, .hfe-nav-menu {
    white-space: normal !important;
    width: 100% !important;
  }

  /* Force header container to stay in 1 row (Logo Left, Toggle/CTA Right) */
  .hdr-sec-main, header.elementor-element {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 15px !important;
  }

  /* Hide extra desktop email/phone pills on mobile to keep header clean */
  .hdr-btn-email, .hdr-btn-call {
    display: none !important;
  }

  /* Style Hamburger Toggle Icon Button */
  .elementor-menu-toggle, .hfe-nav-menu-icon, .uael-nav-menu-icon, .kabadivala-mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #087a3b !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    gap: 6px !important;
  }

  .kabadivala-mobile-toggle .k-hamburger-icon {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* Force Mobile Collapsed State by Default on Small Screens (< 900px) */
  @media (max-width: 900px) {
    .elementor-widget-navigation-menu ul.elementor-nav-menu:not(.k-menu-open):not(.elementor-active),
    .hfe-nav-menu ul.hfe-nav-menu:not(.k-menu-open):not(.elementor-active),
    .uael-nav-menu ul.uael-nav-menu:not(.k-menu-open):not(.elementor-active) {
      display: none !important;
    }

    .k-menu-open, ul.elementor-nav-menu.k-menu-open {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      background: #ffffff !important;
      box-shadow: 0 10px 25px rgba(0,0,0,0.12) !important;
      border-radius: 8px !important;
      margin-top: 10px !important;
      padding: 10px 0 !important;
      position: absolute !important;
      top: 100% !important;
      left: 0 !important;
      z-index: 9999 !important;
    }
  }

  /* Universal Heading/Text Links Mobile Collapse Rules (< 900px) */
  @media (max-width: 900px) {
    .kabadivala-nav-links-wrapper:not(.k-menu-open) {
      display: none !important;
    }

    .kabadivala-nav-links-wrapper.k-menu-open {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      width: 100% !important;
      background: #ffffff !important;
      box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
      border-radius: 8px !important;
      margin-top: 10px !important;
      padding: 15px !important;
      z-index: 99999 !important;
    }

    .kabadivala-nav-links-wrapper.k-menu-open a,
    .kabadivala-nav-links-wrapper.k-menu-open .elementor-widget-heading,
    .kabadivala-nav-links-wrapper.k-menu-open .elementor-widget-text-editor {
      display: block !important;
      width: 100% !important;
      padding: 10px 15px !important;
      border-bottom: 1px solid #f0f4f1 !important;
      font-size: 14px !important;
      font-weight: 800 !important;
      color: #102632 !important;
      text-decoration: none !important;
    }
  }


  .elementor-nav-menu--dropdown a, .hfe-nav-menu__container--responsive a {
    display: block !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid #f0f4f1 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #102632 !important;
    text-align: left !important;
  }

  .elementor-nav-menu--dropdown a:hover, .hfe-nav-menu__container--responsive a:hover {
    background: #edf8ef !important;
    color: #087a3b !important;
  }
}

/* ==========================================================================
   Pixel-Perfect Fixes for Responsive Menu Plugin
   ========================================================================== */

/* 1. Compact 40px Green Burger Button Positioned Beside Kabadivala Logo */
#responsive-menu-button, 
.responsive-menu-button {
  position: absolute !important;
  top: 12px !important;
  right: 15px !important;
  left: auto !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #087a3b !important; /* Kabadivala Green */
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(8, 122, 59, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
}

/* Reduce size and thickness of the 3 lines inside burger button */
#responsive-menu-button .responsive-menu-box {
  width: 20px !important;
  height: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0 !important;
}

#responsive-menu-button .responsive-menu-inner,
#responsive-menu-button .responsive-menu-inner::before,
#responsive-menu-button .responsive-menu-inner::after {
  width: 20px !important;
  height: 2.5px !important;
  background-color: #ffffff !important;
  border-radius: 2px !important;
  left: 0 !important;
}

/* 2. Sleek Compact Content-Fit Menu Drawer (Ends Right Below Search Button) */
#responsive-menu-container,
.responsive-menu-container,
#responsive-menu-container.is-active,
.responsive-menu-container.is-active {
  height: auto !important;
  min-height: unset !important;
  max-height: fit-content !important;
  bottom: auto !important;
  position: absolute !important;
  top: 70px !important;
  left: 4% !important;
  right: 4% !important;
  width: 92% !important;
  margin: 0 auto !important;
  padding: 15px 20px 20px 20px !important;
  border-radius: 16px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35) !important;
  z-index: 999999 !important;
  overflow: hidden !important;
}

#responsive-menu-container #responsive-menu-wrapper,
.responsive-menu-container .responsive-menu-wrapper {
  height: auto !important;
  min-height: unset !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#responsive-menu-container .responsive-menu-search-box,
#responsive-menu-container #responsive-menu-search-box {
  margin-bottom: 5px !important;
  margin-top: 15px !important;
}

/* ==========================================================================
   Firefox (Gecko Engine) & Cross-Browser Text Wrapping Fix
   ========================================================================== */
@-moz-document url-prefix() {
  .elementor-widget-text-editor,
  .elementor-widget-text-editor *,
  .elementor-text-editor,
  .elementor-widget-heading,
  .elementor-heading-title,
  p, span, div, a {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    min-width: 0 !important;
  }
}

.elementor-widget-text-editor,
.elementor-widget-text-editor *,
.elementor-text-editor,
.elementor-widget-heading,
.elementor-heading-title,
p, span, div {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* ==========================================================================
   FINAL FIX 1: Category Cards Clean Shape & Overlap Prevention (Image 3 Match)
   ========================================================================== */
.cat-grid article,
.cat-card,
.category-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1px solid #e5efe6 !important;
  border-radius: 10px !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Category Card Image Fix - Fixed height & static positioning */
.cat-grid article img,
.cat-card img,
.category-card img {
  width: 100% !important;
  height: 95px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  margin-bottom: 8px !important;
  position: static !important;
  top: 0 !important;
}

/* Category Card Bold Heading (Paper, Cardboard, etc.) */
.cat-grid article b,
.cat-grid article h3,
.cat-card b,
.cat-card h3,
.category-card b {
  position: static !important;
  top: 0 !important;
  margin-top: 4px !important;
  margin-bottom: 2px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #102632 !important;
  display: block !important;
}

/* Category Card Subtext (Books, news, Boxes, cartons, etc.) */
.cat-grid article small,
.cat-grid article p,
.cat-card small,
.category-card small {
  position: static !important;
  top: 0 !important;
  font-size: 11px !important;
  color: #53666e !important;
  display: block !important;
  margin-top: 2px !important;
}

/* ==========================================================================
   PRECISION SCOPED FIXES (Homepage, Why Us, Contact Page)
   ========================================================================== */

/* FIX 1: Why Us Page - "Made for every kind of recycler" Vertical Text Fix */
#wu_aud_sec,
.wu-aud-sec,
.elementor-element-wu_aud_sec {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

#wu_aud_intro,
.wu-aud-intro,
.elementor-element-wu_aud_intro,
.elementor-widget-heading:has(#wu_aud_intro_title),
#wu_aud_intro_title {
  min-width: 260px !important;
  width: 32% !important;
  flex: 0 0 32% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#wu_aud_intro h2,
#wu_aud_intro .elementor-heading-title,
#wu_aud_intro_title .elementor-heading-title {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  width: 100% !important;
  display: block !important;
}

@media (max-width: 900px) {
  #wu_aud_intro,
  .wu-aud-intro,
  .elementor-element-wu_aud_intro {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 100% !important;
    margin-bottom: 16px !important;
  }
}

/* FIX 2: Contact Page - Stack "Get in touch" & "Request a callback" vertically on Mobile */
@media (max-width: 900px) {
  #cnt_sec_split,
  .cnt-sec-split,
  .elementor-element-cnt_sec_split {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 15px !important;
  }

  #cnt_info_col,
  #cnt_form_col,
  .elementor-element-cnt_info_col,
  .elementor-element-cnt_form_col,
  #cnt_sec_split > .e-con,
  #cnt_sec_split > .elementor-element,
  .elementor-element-cnt_sec_split > .e-con,
  .elementor-element-cnt_sec_split > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-bottom: 24px !important;
  }
}

/* FIX 3: Homepage Clean Scoped Clearance (Without breaking badges/grids) */
.cat-grid article,
.cat-card,
.category-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #e5efe6 !important;
  border-radius: 10px !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.cat-grid article img,
.cat-card img,
.category-card img {
  width: 100% !important;
  height: 95px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  margin-bottom: 8px !important;
}