/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/blocks/accordion/style.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * WML Accordion – Frontend Styles
 * ----------------------------------------------------------
 * Provides frontend styles specific to the accordion block.
 * Reads CSS variables set by the editor.
 * Supports colors, typography, spacing, and radius.
 * Updates dynamically based on user settings.
 */
.wml-accordion-frontend {
  width: 100%;
  padding: 10px;
}
.wml-accordion-frontend .wml-accordion-item {
  border: 1px solid #ccc;
  border-radius: var(--accordion-radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.wml-accordion-frontend .wml-accordion-item.active {
  border-color: #0086d1;
}
.wml-accordion-frontend .wml-accordion-item .wml-accordion-header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: var(--accordion-padding);
  background-color: var(--accordion-header-bg);
  color: var(--accordion-header-color);
  font-size: var(--accordion-fontsize);
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.wml-accordion-frontend .wml-accordion-item .wml-accordion-header:hover {
  background-color: var(--accordion-header-bg-hover);
}
.wml-accordion-frontend .wml-accordion-item .wml-accordion-header .wml-title-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wml-accordion-frontend .wml-accordion-item .wml-accordion-header .wml-accordion-icon {
  font-size: 18px;
}
.wml-accordion-frontend .wml-accordion-item .wml-accordion-content {
  height: 0;
  overflow: hidden;
  color: black;
  padding: 0 var(--accordion-padding);
  background-color: var(--accordion-content-bg);
  transition: height 0.35s ease, padding 0.35s ease;
}
/*!**************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/blocks/tab/style.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * WML Tabs – Frontend Styles
 * ----------------------------------------------------------
 * Provides frontend styling for the WML Tabs block.
 * Utilizes CSS variables injected from the editor for full customization.
 * Supports active/disabled/locked tab states, animations, spacing,
 * background colors, radius, and flexible layout behavior.
 */
.wml-tab {
  position: relative;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
}
.wml-tab * {
  font-family: inherit;
  font-size: inherit;
}
.wml-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tab-btn-gap, 8px);
  margin-bottom: 12px;
}
.wml-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--tab-btn-bg, #f0f0f0);
  border: 1px solid var(--tab-border, #ddd);
  cursor: pointer;
  transition: all 0.25s ease;
}
.wml-tab-btn span {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.wml-tab-btn.active {
  background: var(--tab-btn-bg-active, #222);
  color: var(--tab-btn-color-active, #fff);
}
.wml-tab-btn.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}
.wml-tab-btn.is-locked {
  pointer-events: none;
  opacity: 0.7;
  cursor: not-allowed;
}
.wml-tab-btn i {
  font-size: 1.1em;
}
.wml-tab-panels {
  border-top: 1px solid var(--tab-border, #ddd);
}
.wml-tab-content {
  display: none;
  padding: 16px;
  background: var(--tab-content-bg, #fff);
}
.wml-tab-content.active {
  display: block;
}
.wml-tab-content.fade {
  animation: fade-in var(--tab-animation-duration, 220ms) ease;
}
.wml-tab-content.slide {
  animation: slide-down var(--tab-animation-duration, 220ms) ease;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/blocks/modal/style.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * WML Modal – Frontend Styles
 * ----------------------------------------------------------
 * Provides frontend styles specific to the modal block.
 * Reads CSS variables set by the editor.
 * Supports colors, spacing, radius, and animations.
 * Updates dynamically based on user settings and responsive layouts.
 */
/* ================= Variables ================= */
:root {
  --wml-modal-bg: #fff;
  --wml-modal-overlay-bg: rgb(0 0 0 / 70%);
  --wml-modal-border-radius: 6px;
  --wml-modal-box-shadow: 0 5px 20px rgb(0 0 0 / 30%);
  --wml-modal-close-color: #ff4d4d;
  --wml-modal-close-hover-bg: #ff4d4d;
  --wml-modal-close-hover-color: #fff;
  --wml-modal-padding: 50px 20px 20px 20px;
  --wml-modal-padding-mobile: 40px 15px 15px 15px;
  --wml-modal-overlay-z: 9999;
  --wml-modal-animation-duration: 300ms;
  --wml-modal-gap: 20px;
}
/* ================= Main Wrapper ================= */
.wml-modal-frontend {
  position: relative;
  display: inline-block;
}
.wml-modal-frontend__trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wml-modal-frontend__content {
  display: none;
}
/* ================= Overlay ================= */
.wml-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--wml-modal-overlay-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--wml-modal-overlay-z);
  opacity: 0;
  pointer-events: none;
  padding: var(--wml-modal-gap);
  transition: opacity var(--wml-modal-animation-duration) ease;
}
.wml-modal-overlay[data-modal-type=inline] {
  background: transparent;
  position: relative;
  inset: auto;
}
.wml-modal-overlay .wml-modal {
  background: var(--wml-modal-bg);
  border-radius: var(--wml-modal-border-radius);
  padding: var(--wml-modal-padding);
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--wml-modal-box-shadow);
  transform-origin: center center;
  transform: translateY(-50px) scale(0.98);
  opacity: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--wml-modal-animation-duration) ease, opacity var(--wml-modal-animation-duration) ease;
}
.wml-modal-overlay .wml-modal.fade {
  transform: translateY(-30px) scale(0.98);
}
.wml-modal-overlay .wml-modal.slide {
  transform: translateY(-100px) scale(0.98);
}
.wml-modal-overlay .wml-modal.zoom {
  transform: scale(0.8);
}
.wml-modal-overlay .wml-modal.flip {
  transform: rotateY(90deg);
}
.wml-modal-overlay .wml-modal.bounce {
  transform: translateY(-50px);
}
.wml-modal-overlay .wml-modal .wml-modal-cloned-content {
  flex: 1;
  overflow-y: auto;
  color: black;
}
.wml-modal-overlay .wml-modal .wml-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  font-size: 22px;
  font-weight: 600;
  color: var(--wml-modal-close-color);
  background: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 3px var(--wml-modal-close-color);
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
  z-index: 10;
}
.wml-modal-overlay .wml-modal .wml-modal-close:hover {
  background: var(--wml-modal-close-hover-bg);
  color: var(--wml-modal-close-hover-color);
  transform: scale(1.1);
}
.wml-modal-overlay.wml-open {
  opacity: 1;
  pointer-events: auto;
}
.wml-modal-overlay.wml-open .wml-modal.fade,
.wml-modal-overlay.wml-open .wml-modal.slide,
.wml-modal-overlay.wml-open .wml-modal.zoom,
.wml-modal-overlay.wml-open .wml-modal.flip,
.wml-modal-overlay.wml-open .wml-modal.bounce {
  transform: translateY(0) rotateY(0) scale(1);
  opacity: 1;
}
/* ================= Prevent Scroll ================= */
body.wml-modal-open {
  overflow: hidden;
}
/* ================= Responsive Adjustments ================= */
@media (width <= 1024px) {
  .wml-modal {
    padding: 40px 20px 20px;
  }
  .wml-modal .wml-modal-close {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }
}
@media (width <= 768px) {
  .wml-modal {
    width: 90%;
    max-height: 80vh;
    padding: var(--wml-modal-padding-mobile);
  }
  .wml-modal .wml-modal-close {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
}
@media (width <= 480px) {
  .wml-modal {
    padding: 30px 15px 15px;
  }
  .wml-modal .wml-modal-close {
    width: 26px;
    height: 26px;
    font-size: 16px;
  }
}
/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/blocks/icon-list/style.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * WML Icon List – Frontend Styles
 * ----------------------------------------------------------
 * Provides frontend styles specific to the accordion block.
 * Reads CSS variables set by the editor.
 * Supports colors, typography, spacing, and radius.
 * Updates dynamically based on user settings.
 */
.wml-icon-list {
  display: flex;
  flex-direction: column;
  gap: var(--item-gap);
}
.wml-icon-list .wml-icon-list-item {
  display: flex;
  align-items: var(--v-align);
  font-size: 16px;
}
.wml-icon-list .wml-icon-list-item i {
  font-size: var(--icon-size);
  color: var(--icon-color);
  margin-right: var(--icon-spacing);
}
.wml-icon-list .wml-icon-list-item .wml-icon-list-text {
  color: var(--text-color);
}
/*!******************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/blocks/counter/style.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************/
.wml-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wml-counter__number {
  font-weight: 700;
  line-height: 1;
  transition: all 0.3s ease;
}
.wml-counter__label {
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

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