/* Styling for the two widgets whose plugin JS/CSS the static export omits:
   the before/after comparison sliders and the mobile nav dropdown. */
.ppa-compare { position: relative; overflow: hidden; line-height: 0; user-select: none; cursor: ew-resize; }
.ppa-compare img { display: block; width: 100%; height: auto; }
.ppa-compare .ppa-compare-after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.ppa-compare-bar { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.45); pointer-events: none; }
.ppa-compare-grip { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 3px solid #fff; border-radius: 50%; background: rgba(8,44,104,.55); box-shadow: 0 0 10px rgba(0,0,0,.35); }
.ppa-compare-grip::before, .ppa-compare-grip::after { content: ''; position: absolute; top: 50%; margin-top: -5px; border: 5px solid transparent; }
.ppa-compare-grip::before { left: 6px; border-right-color: #fff; }
.ppa-compare-grip::after { right: 6px; border-left-color: #fff; }
.ppa-compare-label { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; padding: 6px 14px; border-radius: 4px; background: rgba(8,44,104,.78); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; pointer-events: none; }
.ppa-compare-label-before { left: 14px; }
.ppa-compare-label-after  { right: 14px; }

/* ---------------------------------------------------------------- popups --
   The skin (post-1591.css) already styles #elementor-popup-modal-1591 and its
   .dialog-* children, and popup.min.css ships too -- but the dialog library
   that supplies the base layout is an on-demand chunk the export omits.
   These are those base rules.  ppa-init.js builds the matching DOM. */
.dialog-widget.dialog-type-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none !important;
  align-items: center;
  justify-content: center;
}
.dialog-widget.dialog-type-lightbox.ppa-dialog-open { display: flex !important; }
.dialog-widget .dialog-widget-content { position: relative; display: flex; flex-direction: column; }
.dialog-widget .dialog-message { flex: 1 1 auto; }
/* popup.min.css hides the panel as inert markup with a rule of equal
   specificity that loads after this file, so this one has to shout. */
.dialog-widget [data-elementor-type="popup"] { display: block !important; }
.dialog-widget .dialog-close-button {
  position: absolute;
  top: 20px;
  inset-inline-end: 20px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  z-index: 9999;
}
.dialog-widget .dialog-close-button:hover { opacity: .75; }
body.ppa-dialog-lock { overflow: hidden; }

/* ------------------------------------------------------------ sub-menus --
   `.elementor-nav-menu ul { display: none }` ships with the widget because
   SmartMenus is supposed to open the sub-menus -- and SmartMenus only starts
   from the nav-menu handler chunk the export leaves out.  In a horizontal
   menu that is a hover, so it belongs here; ppa-init.js handles the tap in
   the stacked ones. */
.elementor-nav-menu--main .elementor-nav-menu > li { position: relative; }
.elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu {
  top: 100%;
  inset-inline-start: 0;
  z-index: 999;
}
.elementor-nav-menu--main .elementor-nav-menu > li:hover > ul.sub-menu,
.elementor-nav-menu--main .elementor-nav-menu > li:focus-within > ul.sub-menu { display: block; }

.elementor-nav-menu .menu-item-has-children > a .sub-arrow { display: inline-block; transition: transform .2s; }
.elementor-nav-menu--dropdown .menu-item-has-children.ppa-open > a .sub-arrow { transform: rotate(180deg); }