/* v5.1.57 — focused fixes
 *
 *  1) Energy label: belt-and-suspenders hide the EU label that the
 *     valgusallikad-eu-energy-labels Core module renders on top of product
 *     images. The plugin itself now defers to the theme, but if it is forced
 *     on via filter or an older Core build is still installed, this rule
 *     prevents the doubled red "EU G" mark on cards and the single gallery.
 *
 *  2) Mobile category drawer: when the drawer is open, raise the drawer
 *     above the backdrop and guarantee the category dropdown is interactive.
 *     The previous build sometimes left .vlg-mobile-backdrop sitting in
 *     front of the drawer contents, which read as a "dead grey screen
 *     I cannot tap" after pressing "Kõik kategooriad".
 *
 *  3) Admin: make the top tabs sticky, drop the duplicate "Salvesta /
 *     Loobu" floating bar (a static submitbar already exists), and
 *     strengthen the active-tab indicator and section header so it is
 *     obvious which section of the site each card belongs to.
 */


/* ===== 1. Energy label duplicates ===== */

/* The Core EU energy labels plugin (fs-euel) wraps the product image with
   <span class="fs-euel-thumb-wrap"> and stamps a small badge inside.
   The theme already prints its own vlg-energy-badge in the card content,
   so on every product card the customer saw two labels stacked. Hide the
   plugin's image overlay everywhere. The theme badge remains. */
body.vlg-theme .fs-euel-thumb-wrap > .fs-euel-label,
body.vlg-theme .fs-euel-single-image-wrap > .fs-euel-label,
body.vlg-theme .fs-euel-loop-fallback {
  display: none !important;
}

/* If only the wrapper is left, behave like a plain inline-block container
   so the image keeps its original size. */
body.vlg-theme .fs-euel-thumb-wrap {
  display: inline-block !important;
  position: static !important;
}

/* Single-product gallery: keep the badge OFF the image. The summary card
   on the right still shows it next to the price. */
body.vlg-theme.single-product .vlg-product-gallery-card .vlg-energy-badge,
body.vlg-theme.single-product .vlg-product-gallery-card .vlg-energy-overlay,
body.vlg-theme.single-product .vlg-product-gallery-media .vlg-energy-badge,
body.vlg-theme.single-product .vlg-product-gallery-media .vlg-energy-overlay,
body.vlg-theme.single-product .vlg-mobile-featured-image .vlg-energy-badge,
body.vlg-theme.single-product .vlg-mobile-featured-image .vlg-energy-overlay,
body.vlg-theme.single-product .woocommerce-product-gallery .vlg-energy-badge,
body.vlg-theme.single-product .woocommerce-product-gallery .vlg-energy-overlay {
  display: none !important;
}


/* ===== 2. Mobile drawer + category dropdown ===== */

@media (max-width: 900px) {
  /* Backdrop sits behind the drawer. */
  body.vlg-theme .vlg-mobile-backdrop:not([hidden]) {
    z-index: 9990 !important;
    pointer-events: auto !important;
  }

  /* The drawer itself must be above the backdrop so its contents
     (including the category dropdown) receive taps. */
  body.vlg-theme .vlg-nav.is-open {
    z-index: 9999 !important;
  }

  /* When the user taps "Kõik kategooriad" the dropdown gets is-open;
     guarantee it is visible and tappable. Some older parts left it
     visibility:hidden which produced the "grey panel that does nothing"
     symptom the user reported. */
  body.vlg-theme .vlg-nav.is-open .vlg-category-menu.is-open .vlg-category-dropdown,
  body.vlg-theme .vlg-nav.is-open .vlg-category-button[aria-expanded="true"] + .vlg-category-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-height: none !important;
  }

  /* And the link items themselves. */
  body.vlg-theme .vlg-nav.is-open .vlg-category-menu.is-open .vlg-category-dropdown a,
  body.vlg-theme .vlg-nav.is-open .vlg-category-menu.is-open .vlg-category-dropdown button,
  body.vlg-theme .vlg-nav.is-open .vlg-category-button[aria-expanded="true"] + .vlg-category-dropdown a,
  body.vlg-theme .vlg-nav.is-open .vlg-category-button[aria-expanded="true"] + .vlg-category-dropdown button {
    pointer-events: auto !important;
  }

  /* Auto-open mode: when admin set the drawer to open categories
     immediately, do not require .is-open on the inner menu. */
  body.vlg-theme.vlg-mobile-auto-open-categories .vlg-nav.is-open .vlg-category-dropdown,
  body.vlg-theme.vlg-mobile-auto-open-categories .vlg-nav.is-open .vlg-cat-tree {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Visual cue on the toggle button when expanded. */
  body.vlg-theme .vlg-nav.is-open .vlg-category-button[aria-expanded="true"] {
    background: #fff7ed !important;
    border-color: rgba(242, 138, 0, .55) !important;
    color: #f28a00 !important;
  }
}


/* ===== 3. Admin: sticky tabs + single save bar + section indicator ===== */

.wp-admin .vlg-admin-wrap {
  /* Anchor for the sticky tabs and submitbar. */
  position: relative;
}

/* 3a. Sticky tabs row. WP admin bar is 32px on desktop, 46px on phones. */
.wp-admin .vlg-admin-wrap .vlg-admin-tabs-pro {
  position: sticky !important;
  top: 32px !important; /* below the WP admin bar */
  z-index: 50 !important;
  background: #fff !important;
  border: 1px solid #dbe5f1 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08) !important;
}

@media screen and (max-width: 782px) {
  .wp-admin .vlg-admin-wrap .vlg-admin-tabs-pro {
    top: 46px !important;
  }
}

/* When auto-fold is on, admin bar collapses; fall back to top:0. */
.wp-admin.no-admin-bar .vlg-admin-wrap .vlg-admin-tabs-pro {
  top: 0 !important;
}

/* 3b. Section indicator under the tabs — make it loud so the user always
   knows which area of the site the cards below belong to. */
.wp-admin .vlg-admin-wrap .vlg-admin-section-intro {
  position: sticky !important;
  top: 142px !important; /* 32px admin bar + ~110px grouped tab strip */
  z-index: 49 !important;
  margin: 12px 0 18px !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(242, 138, 0, .35) !important;
  background: linear-gradient(180deg, #fff7ed, #fff) !important;
  box-shadow: 0 8px 22px rgba(242, 138, 0, .10) !important;
}

.wp-admin .vlg-admin-wrap .vlg-admin-section-intro h2 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

.wp-admin .vlg-admin-wrap .vlg-admin-section-intro p {
  margin: 4px 0 0 !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.wp-admin .vlg-admin-wrap .vlg-admin-section-intro-icon {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(242, 138, 0, .35), 0 6px 14px rgba(242, 138, 0, .15) !important;
  font-size: 22px !important;
}

@media screen and (max-width: 782px) {
  .wp-admin .vlg-admin-wrap .vlg-admin-section-intro {
    top: 158px !important; /* 46px bar + ~112px grouped tab strip */
  }
}

/* 3c. Remove the duplicate floating "Muudatused on salvestamata" bubble.
   It overlapped the static submitbar and confused users about where to
   click "Salvesta". The static submitbar already covers both jobs once we
   pulse it on dirty state (see vlg-admin-submitbar.is-dirty below). */
.wp-admin .vlg-floating-save,
.wp-admin .vlg-floating-save.is-visible {
  display: none !important;
}

/* 3d. Static submitbar — keep it sticky, but call attention to it when the
   form is dirty. */
.wp-admin .vlg-admin-wrap .vlg-admin-submitbar.vlg-admin-submitbar-sticky {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 48 !important;
  padding: 12px 16px !important;
  border-top: 1px solid #dbe5f1 !important;
  background: rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: 0 -8px 22px rgba(15, 23, 42, .06) !important;
}

.wp-admin .vlg-admin-wrap .vlg-admin-submitbar.is-dirty {
  border-top-color: rgba(242, 138, 0, .55) !important;
  background: linear-gradient(180deg, #fff7ed, #fff) !important;
}

.wp-admin .vlg-admin-wrap .vlg-admin-submitbar.is-dirty .vlg-admin-submitbar-hint::before {
  content: "● " !important;
  color: #f28a00 !important;
  font-weight: 950 !important;
}

.wp-admin .vlg-admin-wrap .vlg-admin-submitbar.is-dirty .vlg-admin-submitbar-hint {
  color: #b25a00 !important;
  font-weight: 800 !important;
}

.wp-admin .vlg-admin-wrap .vlg-admin-submitbar.is-dirty .button-primary {
  animation: vlg-admin-pulse 1.6s ease-in-out infinite !important;
}

@keyframes vlg-admin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 138, 0, .35); }
  50% { box-shadow: 0 0 0 6px rgba(242, 138, 0, 0); }
}

/* 3e. Active tab indicator — make the orange "you are here" much stronger.
   The old style was a soft outline that disappeared on light backgrounds. */
.wp-admin .vlg-admin-wrap .vlg-admin-tabs-pro .vlg-admin-tab.is-active {
  background: linear-gradient(180deg, #fff7ed, #fff) !important;
  color: #f28a00 !important;
  position: relative !important;
}

.wp-admin .vlg-admin-wrap .vlg-admin-tabs-pro .vlg-admin-tab.is-active::after {
  content: "" !important;
  position: absolute !important;
  left: 12% !important;
  right: 12% !important;
  bottom: -1px !important;
  height: 3px !important;
  background: #f28a00 !important;
  border-radius: 999px 999px 0 0 !important;
}

/* On mobile widths the tabs grid wraps — give the active tab a more
   visible chip so it's easy to spot in the wrapped row. */
@media (max-width: 900px) {
  .wp-admin .vlg-admin-wrap .vlg-admin-tabs-pro .vlg-admin-tab.is-active {
    background: #f28a00 !important;
    color: #fff !important;
  }
  .wp-admin .vlg-admin-wrap .vlg-admin-tabs-pro .vlg-admin-tab.is-active::after {
    display: none !important;
  }
}