/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/features/element-hide/style.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
.hide-on-mobile {
  display: none !important;
}

@media (min-width: 481px) and (max-width: 1024px) {
  .hide-on-tablet {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .hide-on-desktop {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-on-mobile {
    display: inherit !important;
  }
}
.blynex-responsive-panel {
  /* Panel header with icon */
  /* Custom responsive icon */
}
.blynex-responsive-panel > .components-panel__body-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blynex-responsive-panel > .components-panel__body-title .components-panel__icon {
  margin-right: 0;
  color: #1e1e1e; /* Match WordPress panel icon color */
}
.blynex-responsive-panel .blynex-responsive-icon {
  fill: currentColor;
  margin-right: 8px;
  width: 20px;
  height: 20px;
}

/* Dark Mode Support */
.is-dark-theme .blynex-responsive-panel > .components-panel__body-title .components-panel__icon {
  color: #f0f0f1; /* Light color for dark mode */
}
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/features/hover-effect/style.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* ========================
   Blynex Hover Effects
   ======================== */
/**
 * 1. Base Styles for Both Blocks
 * Applies to both Cover and Image blocks
 */
.wp-block-cover.blynex-hover-enabled,
.wp-block-image.blynex-hover-enabled {
  transition: all var(--blynex-hover-duration, 0.3s) ease !important;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  /**
   * 2. Hover State Styles
   * Only applied on frontend (editor has different handling)
   */
}
.wp-block-cover.blynex-hover-enabled:hover,
.wp-block-image.blynex-hover-enabled:hover {
  /* Zoom Effect */
  /* Fade Effect */
  /* Grayscale Effect */
  /* Blur Effect */
  /* Glow Effect */
}
.wp-block-cover.blynex-hover-enabled:hover.blynex-hover-zoom,
.wp-block-image.blynex-hover-enabled:hover.blynex-hover-zoom {
  transform: scale(var(--blynex-hover-scale, 1.05)) !important;
  z-index: 1; /* Prevents clipping during scale */
}
.wp-block-cover.blynex-hover-enabled:hover.blynex-hover-fade,
.wp-block-image.blynex-hover-enabled:hover.blynex-hover-fade {
  opacity: var(--blynex-hover-opacity, 0.8) !important;
}
.wp-block-cover.blynex-hover-enabled:hover.blynex-hover-grayscale,
.wp-block-image.blynex-hover-enabled:hover.blynex-hover-grayscale {
  filter: grayscale(var(--blynex-hover-grayscale, 80%)) !important;
}
.wp-block-cover.blynex-hover-enabled:hover.blynex-hover-blur,
.wp-block-image.blynex-hover-enabled:hover.blynex-hover-blur {
  filter: blur(var(--blynex-hover-blur, 2px)) !important;
}
.wp-block-cover.blynex-hover-enabled:hover.blynex-hover-glow,
.wp-block-image.blynex-hover-enabled:hover.blynex-hover-glow {
  box-shadow: 0 0 var(--blynex-hover-glow-spread, 15px) var(--blynex-hover-glow-color, rgba(255, 255, 255, 0.7)) !important;
}

/**
 * 3. Image Block Specific Styles
 * Needed because images are nested differently
 */
.wp-block-image.blynex-hover-enabled img {
  transition: inherit !important; /* Inherit from parent */
  backface-visibility: inherit;
  /* Hover states for nested image */
}
.blynex-hover-zoom .wp-block-image.blynex-hover-enabled img:hover {
  transform: scale(var(--blynex-hover-scale, 1.05)) !important;
}
.blynex-hover-grayscale .wp-block-image.blynex-hover-enabled img:hover {
  filter: grayscale(var(--blynex-hover-grayscale, 80%)) !important;
}
.blynex-hover-blur .wp-block-image.blynex-hover-enabled img:hover {
  filter: blur(var(--blynex-hover-blur, 2px)) !important;
}

/**
 * 4. Editor-Specific Styles
 * Shows effects constantly while editing
 */
/**
 * 5. Panel Styling
 * Styles for the settings panel in editor
 */
.blynex-hover-panel {
  /* Panel header with icon */
  /* Custom hover icon */
}
.blynex-hover-panel > .components-panel__body-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blynex-hover-panel > .components-panel__body-title .components-panel__icon {
  margin-right: 0;
  color: #1e1e1e; /* Match WordPress panel icon color */
}
.blynex-hover-panel .blynex-hover-icon {
  margin-right: 8px;
  width: 20px;
  height: 20px;
}

/**
 * 6. Dark Mode Support
 * Adjusts for WordPress dark mode
 */
.is-dark-theme .blynex-hover-panel > .components-panel__body-title .components-panel__icon {
  color: #f0f0f1; /* Light color for dark mode */
}

/*# sourceMappingURL=style-index.css.map*/