/* 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 ──────────────────────────────────── */
/* Display behavior is the Builder's job — bound to the live classes the
   JS toggles (is-open / is-active). Brand styling (colors, borders,
   spacing, chevron rotation) is the theme's job. */
.iwb-accordion__body { display: none; overflow: hidden; }
.iwb-accordion__item.is-open > .iwb-accordion__body { display: block; }

/* Question heading wraps the toggle button — strip the heading's intrinsic
   margins/sizing so it behaves as an accordion row, not a page heading. The
   button inherits font from the heading so H2/H3 sizing still reads visually. */
.iwb-accordion__heading { margin: 0; padding: 0; font: inherit; line-height: inherit; }
.iwb-accordion__toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 12px; padding: 16px 18px;
    background: none; border: 0; cursor: pointer; text-align: left;
    font: inherit; color: inherit;
}
.iwb-accordion__title { flex: 1 1 auto; }
.iwb-accordion__chevron { flex: 0 0 auto; transition: transform .2s ease; }
.iwb-accordion__item.is-open .iwb-accordion__chevron { transform: rotate(180deg); }
.iwb-accordion__body { padding: 0 18px 16px; }

/* Style variants (geometry/structure only; brand colors stay theme-owned). */
.iwb-accordion--bordered .iwb-accordion__item { border: 1px solid var(--iwb-accordion-border, #e2e8f0); border-radius: 8px; margin-bottom: 8px; }
.iwb-accordion--boxed .iwb-accordion__item { background: var(--iwb-accordion-bg, #f8fafc); border-radius: 8px; margin-bottom: 8px; }
.iwb-accordion--minimal .iwb-accordion__item { border-bottom: 1px solid var(--iwb-accordion-border, #e2e8f0); }

.iwb-tabs-nav { display: flex; list-style: none; padding: 0; margin: 0; }
.iwb-tab { display: none; }
.iwb-tab.is-active { display: block; }
/* Vertical orientation: nav sits beside panels */
.iwb-tabs--vertical { display: flex; align-items: flex-start; }
.iwb-tabs--vertical .iwb-tabs-nav { flex-direction: column; }

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

/* ── List structural ──────────────────────────────────────────────── */
/* The glyph IS the list — a check-list with no check is a bare <ul>, so the
   Builder owns the marker (structure). Color is the theme's job, read from
   --iwb-list-icon-color with a neutral fallback. */
.iwb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.iwb-list li { position: relative; display: flex; align-items: flex-start; gap: 10px; }

/* Auto glyph via Font Awesome 6 (free, solid weight) — only when the item
   has no explicit override icon (marked with iwb-list__li--has-icon). */
.iwb-list:not(.iwb-list--bullet):not(.iwb-list--numbered) li:not(.iwb-list__li--has-icon)::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    flex-shrink: 0;
    line-height: inherit;
    color: var(--iwb-list-icon-color, currentColor);
}
.iwb-list--check  li:not(.iwb-list__li--has-icon)::before { content: "\f00c"; } /* fa-check */
.iwb-list--arrow  li:not(.iwb-list__li--has-icon)::before { content: "\f054"; } /* fa-chevron-right */
.iwb-list--x      li:not(.iwb-list__li--has-icon)::before { content: "\f00d"; } /* fa-xmark */
.iwb-list--star   li:not(.iwb-list__li--has-icon)::before { content: "\f005"; } /* fa-star */

/* Explicit per-item override icon inherits the same color hook. */
.iwb-list__icon { flex-shrink: 0; line-height: inherit; color: var(--iwb-list-icon-color, currentColor); }

/* Bullet/numbered keep native markers (restore list semantics). */
.iwb-list--bullet   { list-style: disc inside; display: block; }
.iwb-list--numbered { list-style: decimal inside; display: block; }
.iwb-list--bullet li, .iwb-list--numbered li { display: list-item; }

/* ── 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); } }

/* ── Element layout geometry (structural) ─────────────────────────── */
/* These rules set ONLY layout geometry (flex/grid/gap/align/direction).
   Brand properties (color, font, border-color, radius, shadow) belong to
   the theme/token CSS. Grey-zone spacing is exposed via --iwb-* override
   vars with sensible fallbacks so the theme can tune without fighting. */

/* Icon Box — icon position relative to title/text */
.iwb-icon-box { display: flex; flex-direction: column; gap: var(--iwb-iconbox-gap, 12px); }
.iwb-icon-box__icon { display: flex; }
.iwb-icon-box--top    { flex-direction: column; }
.iwb-icon-box--left   { flex-direction: row; }
.iwb-icon-box--right  { flex-direction: row-reverse; }
.iwb-icon-box--left  .iwb-icon-box__icon,
.iwb-icon-box--right .iwb-icon-box__icon { flex-shrink: 0; }
/* Text alignment within the box */
.iwb-icon-box--top.iwb-icon-box--center { align-items: center; text-align: center; }
.iwb-icon-box--top.iwb-icon-box--right  { align-items: flex-end;  text-align: right; }
.iwb-icon-box--top.iwb-icon-box--left   { align-items: flex-start; text-align: left; }
/* When icon is beside title, align items to the top edge */
.iwb-icon-box--left, .iwb-icon-box--right { align-items: flex-start; }

/* 2.10.13 — icon glyph sizing + centering inside the box.
   The box align rules existed but nothing sized/positioned the icon itself,
   so glyphs rendered at inline default and centered boxes looked broken. */
.iwb-icon-box__icon { font-size: var(--iwb-iconbox-icon-size, 40px); line-height: 1; }
.iwb-icon-box__icon > i { display: inline-block; }
/* center the icon glyph when the box is centered/top */
.iwb-icon-box--top.iwb-icon-box--center .iwb-icon-box__icon { justify-content: center; width: 100%; }
.iwb-icon-box--top.iwb-icon-box--right  .iwb-icon-box__icon { justify-content: flex-end; width: 100%; }
.iwb-icon-box--top.iwb-icon-box--left   .iwb-icon-box__icon { justify-content: flex-start; }

/* Hero — centering + button row */
.iwb-hero { display: flex; }
.iwb-hero__inner { width: 100%; display: flex; flex-direction: column; gap: var(--iwb-hero-gap, 16px); }
.iwb-hero--center { align-items: center; }
.iwb-hero--center .iwb-hero__inner { align-items: center; text-align: center; }
.iwb-hero--left   { align-items: flex-start; }
.iwb-hero--left   .iwb-hero__inner { align-items: flex-start; text-align: left; }
.iwb-hero--right  { align-items: flex-end; }
.iwb-hero--right  .iwb-hero__inner { align-items: flex-end; text-align: right; }
.iwb-hero__btns { display: flex; flex-wrap: wrap; gap: var(--iwb-btn-row-gap, 12px); }
.iwb-hero--center .iwb-hero__btns { justify-content: center; }
.iwb-hero--right  .iwb-hero__btns { justify-content: flex-end; }

/* CTA — text alignment + button row */
.iwb-cta--center { text-align: center; }
.iwb-cta--left   { text-align: left; }
.iwb-cta--right  { text-align: right; }
.iwb-cta__btns { display: flex; flex-wrap: wrap; gap: var(--iwb-btn-row-gap, 12px); margin-top: var(--iwb-cta-btns-mt, 16px); }
.iwb-cta--center .iwb-cta__btns { justify-content: center; }
.iwb-cta--right  .iwb-cta__btns { justify-content: flex-end; }

/* Testimonial — card vs centered layout geometry */
.iwb-testimonial { display: flex; flex-direction: column; gap: var(--iwb-testimonial-gap, 12px); }
.iwb-testimonial--centered { align-items: center; text-align: center; }
.iwb-testimonial__author { display: flex; align-items: center; gap: 10px; }
.iwb-testimonial--centered .iwb-testimonial__author { justify-content: center; }
.iwb-testimonial__photo { flex-shrink: 0; }
.iwb-testimonial__author > div { display: flex; flex-direction: column; }
.iwb-testimonial__stars { display: flex; gap: 2px; }
.iwb-testimonial--centered .iwb-testimonial__stars { justify-content: center; }

/* Pricing column — internal vertical rhythm (grid is inline on the wrapper) */
.iwb-pricing-col { display: flex; flex-direction: column; gap: var(--iwb-pricing-gap, 12px); }
.iwb-pricing-col__price { display: flex; align-items: baseline; gap: 4px; }
.iwb-pricing-col__action { margin-top: auto; }