/* ===================================================================
   Bali Pro Services — Mobile & Responsive Styles
   =================================================================== */


/* ============================================================
   max-width: 1200px
   ============================================================ */

@media (max-width: 1200px) {
  :root { --pc-wrap-vw: 94vw; }
}


/* ============================================================
   max-width: 1024px — Layout + Language Switcher + Mobile Menu
   ============================================================ */

@media (max-width: 1024px) {

  /* --- Layout --- */
  .pc-section { padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(32px, 6vw, 72px); }
  .pc-hero:is(.e-con, .elementor-section) { min-height: clamp(280px, 55vw, 480px); }

  /* --- Floating Language Switcher --- */
  .bps-lang-switcher {
    position: fixed !important;
    bottom: 25px !important;
    right: 25px !important;
    left: auto !important;
    top: auto !important;
    z-index: 99999 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    background: #000 !important;
    border: 2px solid #EEE !important;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .bps-lang-switcher .elementor-widget-container { margin: 0 !important; padding: 0 !important; line-height: 0 !important; }
  .bps-lang-switcher img { margin: 0 5px !important; display: inline-block !important; }

  /* --- Hamburger Icon --- */
  .elementor-menu-toggle,
  .elementor-menu-toggle i,
  .elementor-menu-toggle svg { color: #FFF !important; fill: #FFF !important; background: transparent !important; border: none !important; box-shadow: none !important; }
  .elementor-menu-toggle { position: relative !important; z-index: 99999 !important; }

  /* --- Fullscreen Mobile Menu --- */
  .elementor-nav-menu--dropdown {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #000 !important;
    padding-top: 0 !important;
    margin: 0 !important;
    z-index: 99990 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* --- List Structure --- */
  .elementor-nav-menu--dropdown > ul,
  .elementor-nav-menu--dropdown .elementor-nav-menu { width: 100% !important; padding: 0 !important; margin: 0 !important; list-style: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; }

  /* --- List Items --- */
  .elementor-nav-menu--dropdown li,
  .elementor-nav-menu--dropdown .menu-item { width: 100% !important; text-align: center !important; margin: 0 !important; border: none !important; background: transparent !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; position: relative !important; }

  /* --- Main Links --- */
  .elementor-nav-menu--dropdown a { font-size: 24px !important; font-weight: 900 !important; text-transform: uppercase !important; padding: 12px 0 !important; display: inline-block !important; color: #FFF !important; background: transparent !important; border: none !important; box-shadow: none !important; cursor: pointer !important; }

  /* --- Submenu: Static Flow --- */
  .elementor-nav-menu--dropdown ul.sub-menu { position: static !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; height: auto !important; background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 0 20px 0 !important; margin: 0 !important; visibility: visible !important; opacity: 1 !important; }

  /* --- Submenu Links --- */
  .elementor-nav-menu--dropdown ul.sub-menu a { font-size: 18px !important; color: #FFF !important; padding: 8px 0 !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; cursor: pointer !important; pointer-events: auto !important; position: relative !important; z-index: 10 !important; transition: color 0.2s ease !important; }

  .elementor-nav-menu--dropdown ul.sub-menu .current-menu-item > a { color: #87CEEB !important; }

  .elementor-nav-menu--dropdown ul.sub-menu a:hover,
  .elementor-nav-menu--dropdown ul.sub-menu a:focus { color: #87CEEB !important; }

  /* --- Submenu Icons --- */
  .elementor-nav-menu--dropdown ul.sub-menu a::before { content: "" !important; display: block !important; width: 20px !important; height: 20px !important; background-color: currentColor !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-size: contain !important; mask-size: contain !important; }

  .elementor-nav-menu--dropdown ul.sub-menu a[href*="airconpro"]::before { -webkit-mask-image: url('/wp-content/uploads/brand/icons/shop-icon-airconpro.svg'); mask-image: url('/wp-content/uploads/brand/icons/shop-icon-airconpro.svg'); }
  .elementor-nav-menu--dropdown ul.sub-menu a[href*="proclean"]::before { -webkit-mask-image: url('/wp-content/uploads/brand/icons/shop-icon-proclean.svg'); mask-image: url('/wp-content/uploads/brand/icons/shop-icon-proclean.svg'); }
  .elementor-nav-menu--dropdown ul.sub-menu a[href*="profix"]::before { -webkit-mask-image: url('/wp-content/uploads/brand/icons/shop-icon-profix.svg'); mask-image: url('/wp-content/uploads/brand/icons/shop-icon-profix.svg'); }
  .elementor-nav-menu--dropdown ul.sub-menu a[href*="testimonial"]::before { -webkit-mask-image: url('/wp-content/uploads/brand/icons/shop-icon-testimonial.svg'); mask-image: url('/wp-content/uploads/brand/icons/shop-icon-testimonial.svg'); }

  /* --- Hide Unwanted Pseudo-elements --- */
  .elementor-nav-menu--dropdown span.sub-arrow,
  .elementor-nav-menu--dropdown a::after,
  .elementor-nav-menu--dropdown > ul > li > a::before { display: none !important; }

  /* --- Packages CTA Button (mobile menu) --- */
  html body .elementor-nav-menu--dropdown li.menu-cta a { border: 2px solid #FFF !important; background-color: #87CEEB !important; color: #000 !important; border-radius: 5px !important; padding: 12px 24px !important; box-shadow: none !important; }
  html body .elementor-nav-menu--dropdown li.menu-cta a:hover,
  html body .elementor-nav-menu--dropdown li.menu-cta a:focus { background-color: #000 !important; color: #FFF !important; border: 2px solid #FFF !important; border-color: #FFF !important; box-shadow: none !important; outline: none !important; }

}


/* ============================================================
   max-width: 767px
   ============================================================ */

@media (max-width: 767px) {
  .pc-col { gap: 14px; }
  .pc-hero:is(.e-con, .elementor-section) { min-height: clamp(220px, 62vw, 380px); }
  .pc-hero__inner { padding-left: 16px; padding-right: 16px; }
}


/* ============================================================
   min-width: 1920px
   ============================================================ */

@media (min-width: 1920px) {
  :root { --pc-wrap-vw: 86vw; }
}