/* IllumiWeb Builder — Minimal Structural CSS for Elements
   All visual styling (colors, fonts, borders, shadows) should be in the THEME.
   This file only contains structural rules elements need to function. */

/* ── Spacer / Separator ───────────────────────────────────────────── */
.iwb-spacer { display: block; }
.iwb-separator { display: block; }
.iwb-separator hr { border: none; border-top: 1px solid currentColor; }

/* ── Button wrap alignment ────────────────────────────────────────── */
.iwb-btn-wrap { display: flex; margin: 8px 0; }
.iwb-btn-wrap--center { justify-content: center; }
.iwb-btn-wrap--right  { justify-content: flex-end; }

/* ── Icon structural ──────────────────────────────────────────────── */
.iwb-icon { display: inline-block; }

/* ── Accordion / Tabs structural ──────────────────────────────────── */
.iwb-accordion-body { display: none; overflow: hidden; }
.iwb-accordion-item.is-open > .iwb-accordion-body { display: block; }
.iwb-tabs-nav { display: flex; list-style: none; padding: 0; margin: 0; }
.iwb-tab-panel { display: none; }
.iwb-tab-panel.is-active { display: block; }

/* ── Counter structural ───────────────────────────────────────────── */
.iwb-counter { text-align: center; }

/* ── Progress bar structural ──────────────────────────────────────── */
.iwb-progress { width: 100%; position: relative; }
.iwb-progress__bar { height: 100%; transition: width 1s ease; }

/* ── Gallery structural ───────────────────────────────────────────── */
.iwb-gallery { display: flex; flex-wrap: wrap; }
.iwb-gallery__item { overflow: hidden; }
.iwb-gallery__item img { width: 100%; height: auto; display: block; }

/* ── Carousel structural ──────────────────────────────────────────── */
.iwb-carousel { position: relative; overflow: hidden; }

/* ── Row overlay / content (for bg overlays and video bg) ─────────── */
.iwb-row__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.iwb-row__content { position: relative; z-index: 1; display: flex; flex-wrap: wrap; width: 100%; }

/* ── Entrance Animations (scroll-triggered) ───────────────────────── */
[data-iwb-anim] { opacity: 0; transition: opacity 0.01s; }
[data-iwb-anim].iwb-animated { animation-fill-mode: both; opacity: 1; }

@keyframes iwb-fadeIn      { from { opacity: 0; } to { opacity: 1; } }
@keyframes iwb-fadeInUp    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iwb-fadeInDown  { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iwb-fadeInLeft  { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes iwb-fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes iwb-zoomIn      { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes iwb-bounceIn    { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes iwb-flipInX     { from { opacity: 0; transform: perspective(400px) rotateX(90deg); } to { opacity: 1; transform: perspective(400px) rotateX(0); } }
@keyframes iwb-slideInUp   { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes iwb-slideInDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes iwb-slideInLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes iwb-slideInRight{ from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }