/**
 * Base layout CSS for the Expack Toolkit V2 Figma-component widgets.
 *
 * Every rule here replaces an inline `style="..."` attribute that used to be echoed directly from each
 * widget's render()/render_card() method. Moved out for two reasons:
 *   1. Packaging/maintainability — one file to scan/edit instead of hunting through 15 widget classes.
 *   2. It's how the accordion bug in ADR/session notes (2026-09-17) actually got introduced: an inline
 *      style is easy to add to one echo and forget on the next, and the browser's own UA stylesheet
 *      (button { white-space: nowrap }, min-width: auto, etc.) silently wins wherever one is missing.
 *      A real stylesheet makes every widget's full rule set reviewable in one place.
 *
 * Loaded via each widget's get_style_depends() (Elementor's per-widget CSS dependency list — only
 * enqueued on a page that actually places one of these widgets), registered once in expack-toolkit.php.
 * Colors/typography/spacing that are editable per-instance stay in each widget's Elementor Style-tab
 * controls (`{{WRAPPER}} ...` selectors, injected by Elementor itself) — this file only owns the
 * structural layout (display/flex/grid/position) that was never meant to be end-user-editable.
 *
 * SPECIFICITY NOTE (found 2026-09-17 via a Playwright screenshot review): every rule targeting a real
 * `<button>` element in this file is written as the class doubled (e.g.
 * `.expack-faq-accordion__trigger.expack-faq-accordion__trigger`), NOT a plain single class. Elementor's
 * site-wide Kit CSS ships `.elementor-kit-24 button { background-color: var(--e-global-color-secondary);
 * color: #fff; ... }` — a class+tag selector, specificity (0,1,1) — which beats a single plain class
 * selector, specificity (0,1,0), regardless of stylesheet load order. Without the doubled class, that
 * global button style silently painted every one of this plugin's buttons (FAQ accordion triggers, FAQ
 * tab-bar tabs, Industries prev/next, Contact form submit) as a solid brand-color pill, which is exactly
 * how the FAQ accordion looked before it was first fixed — the underlying cause was never actually the
 * missing layout CSS, it was this specificity gap, and it silently came back once the CSS was moved from
 * inline `style` (which always wins over an external stylesheet, doubled class or not) into this file.
 *
 * Section headers below match the widget class filenames for easy cross-reference.
 */

/* ---------------------------------------------------------------------------------------------------
   Shared render helpers (class-cta-link.php, class-cta-button.php) — used by several widgets above
--------------------------------------------------------------------------------------------------- */

.expack-cta-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

/* Synced to `.expack-button--link:hover/:focus` (class-button-widget.php's "Expack Link" variant, the
   same "text + trailing arrow, no background/border" style) — that variant hard-codes its dimmed hover
   color as a fixed `rgba(9, 88, 195, 0.7)` (70% of the Ex Blue token). `.expack-cta-link`'s own color is
   a per-widget *editable* Elementor control (`cta_color`, class-card-widget.php/class-faq-accordion-
   widget.php/class-services-accordion-widget.php), not a fixed value, so it can't just hard-code that
   same rgba — dimming via `opacity` instead reaches the same "70% of whatever the current color is"
   result without needing to know the color in this shared stylesheet. */
.expack-cta-link:hover,
.expack-cta-link:focus {
  opacity: 0.7;
}

.expack-cta-link__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.expack-cta-link__icon svg {
  width: 100%;
  height: 100%;
}

.expack-cta-link:hover .expack-cta-link__icon,
.expack-cta-link:focus .expack-cta-link__icon {
  transform: translateX(3px);
}

.expack-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.expack-cta-button__icon {
  display: inline-flex;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------------------------------
   class-card-widget.php (Expack_Card) — also used by Expack_Industries_Section's carousel cards
--------------------------------------------------------------------------------------------------- */

.expack-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.expack-card__image {
  display: block;
  width: 100%;
  height: 290px;
  object-fit: cover;
}

.expack-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  /* padding is per-instance ('default' 24px vs 'compact' 16px, class-card-sizing-trait.php) — stays
	   inline via $config['padding'] in render_card(). */
}

.expack-card__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.expack-card__title,
.expack-card__description {
  margin: 0;
}

/* ---------------------------------------------------------------------------------------------------
   class-hero-banner-widget.php (Expack_Hero_Banner)
--------------------------------------------------------------------------------------------------- */

.expack-hero-banner {
  display: flex;
  flex-direction: column;
}

.expack-hero-banner__panel {
  display: grid;
  align-items: end;
}

.expack-hero-banner__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* min-width:0 is required — .expack-hero-banner__panel is a CSS grid (grid-template-columns set by
	   the Content:Media ratio Elementor control, e.g. "50% 50%"), and a grid item's default min-width is
	   `auto`, which sizes it to its longest unbreakable content instead of respecting the column track.
	   With a long enough heading and no wrap opportunity, that pushed this column past its 50% track and
	   over the media column — confirmed via screenshot with the real (long) German heading text; every
	   earlier check used short placeholder text that never triggered it. Same root cause class as the
	   FAQ accordion's title-overflow bug (2026-09-17): a flex/grid item's intrinsic min-width silently
	   overrides how much room its own CSS otherwise asks for. */
  min-width: 0;
}

.expack-hero-banner__heading {
  overflow-wrap: break-word;
  margin: 0;
}

.expack-hero-banner__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.expack-hero-banner__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid transparent;
  text-decoration: none;
}

/* The button's own focus state (white border + blue background swap, same .expack-button--*:focus rules
   as :hover) is already a clear enough visible indicator on its own — the browser's native focus ring
   on top of that just looked like a second, mismatched border color (black ring vs. the white border). */
.expack-hero-banner__cta:focus,
.expack-hero-banner__cta:focus-visible {
  outline: none;
}

.expack-hero-banner__image,
.expack-hero-banner__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.expack-hero-banner__video-embed {
  position: relative;
  width: 100%;
  height: 100%;
}

.expack-hero-banner__video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.expack-hero-banner__cards {
  display: grid;
}

.expack-hero-banner__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

p:last-child {
  margin-bottom: 0;
}

/*
 * Hover state added per direct instruction/reference screenshot (not shown in Figma's static frames,
 * which never depict :hover): background flips to Ex Blue and both title/description turn white, arrow
 * stays put — the same "Ex Blue" token used throughout the style guide (Figma node 147:2008), not a new
 * color invented for this. Doubled-class selector + `!important` on the two Elementor-controlled color
 * properties: Elementor emits per-instance CSS as `.elementor-element-{id} .expack-hero-banner__card` /
 * `...__card-title` / `...__card-description` (specificity (0,2,0) from card_background_color/
 * card_text_color/card_description_color), which otherwise beats this file's rules regardless of
 * doubling, since Elementor's generated stylesheet loads after this one.
 */
.expack-hero-banner__card.expack-hero-banner__card:hover {
  background-color: #0958c3 !important;
}

.expack-hero-banner__card:hover .expack-hero-banner__card-title {
  color: #ffffff !important;
}

.expack-hero-banner__card:hover .expack-hero-banner__card-description {
  color: rgba(255, 255, 255, 0.8) !important;
}

.expack-hero-banner__card-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.expack-hero-banner__card-description {
  margin: 0;
  line-height: 1.5;
  transition: color 0.15s ease;
}

/*
 * Now a flex row (text + trailing icon) instead of one text node with a literal "→" character — matches
 * how the other CTA-style widgets in this plugin (Service Card, Card, Industries Section) already render
 * their arrows, using the same bundled arrow-right.svg. Font-size/weight/color from Elementor's
 * card_title_typography/card_text_color controls (which target this exact class) still apply to the whole
 * row; `.expack-hero-banner__card-title-text` doesn't need its own font rule since it inherits them.
 */
.expack-hero-banner__card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 0.15s ease;
}

.expack-hero-banner__card-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 0.7em;
  height: 0.7em;
  color: inherit;
}

.expack-hero-banner__card-icon svg {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------------------------------
   class-service-card-widget.php (Expack_Service_Card)
--------------------------------------------------------------------------------------------------- */

.expack-service-card__image {
  display: block;
  object-fit: cover;
  flex-shrink: 0;
  width: 100%;
}

.expack-service-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  /* align-items:flex-start is required — without it this flex-column's default `stretch` forces the
	   CTA button (an inline-flex child that would otherwise size to its own content) to full width.
	   Confirmed against Figma node 303:7649 (2026-09-17): the "Mehr erfahren" button is content-width,
	   left-aligned, never a full-width bar. */
  align-items: flex-start;
}

.expack-service-card__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* width:100% here (not on __content, which is align-items:flex-start) keeps the title/description
	   wrapping to the card's full column width while the CTA button below stays content-width. */
  width: 100%;
}

.expack-service-card__title,
.expack-service-card__description {
  margin: 0;
}

.expack-service-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.expack-service-card__badge {
  padding: 6px 12px;
}

/* ---------------------------------------------------------------------------------------------------
   class-service-list-widget.php (Expack_Service_List) — wraps the header + a stack of
   Expack_Service_Card::render_card() rows (see that file's own CSS block above for `.expack-service-card`
   itself); this widget only owns the header text and the divider between rows.
--------------------------------------------------------------------------------------------------- */

.expack-service-list {
  display: flex;
  flex-direction: column;
  /* Default for the `rows_gap` Style-tab control (class-service-list-widget.php) - moved here from an
     inline `style` attribute (2026-09-19) so that control can actually override it; see that control's
     doc comment. */
  gap: 24px;
}

.expack-service-list__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expack-service-list__heading,
.expack-service-list__subtitle {
  margin: 0;
}

.expack-service-list__divider {
  height: 1px;
  width: 100%;
}

/* ---------------------------------------------------------------------------------------------------
   class-feature-card-widget.php (Expack_Feature_Card)
--------------------------------------------------------------------------------------------------- */

/*
 * Equal-height cards in a row (confirmed need 2026-09-17): `height: 100%` here relies on the direct grid/
 * flex parent giving each card's wrapper a stretched cross-axis size to fill — true for
 * Expack_Feature_List's `.expack-feature-list__grid` (a real CSS Grid, which stretches row items to a
 * shared height by default), but NOT true for this project's pre-existing hand-built rows: 4 separate
 * Expack_Feature_Card instances each wrapped in their own Elementor Container with a `_element_custom_width`
 * percentage — that per-card wrapper's own CSS-custom-property-driven height
 * (`.e-con { height: var(--height) }`, default `--height: auto`) sizes it to its own content regardless of
 * the row's align-items, so `height: 100%` has nothing meaningful to size against there. That's a content/
 * layout-authoring gap on the specific page using the old hand-built pattern, not a widget-code bug — the
 * fix for it is switching that section to Expack_Feature_List's real Grid instead of hand-placing 4
 * Container-wrapped Feature Cards, not something this stylesheet can patch generically.
 */
.expack-feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* padding/gap per size step ('default' vs 'compact') - moved here from an inline `style` attribute
     (2026-09-19) so a Style-tab "Padding"/"Gap" control targeting this same selector can actually
     override it; an inline style beats any stylesheet rule on the same selector regardless of source
     order, which previously made such a control a no-op. */
  padding: 32px;
  gap: 32px;
}

.expack-feature-card--compact {
  padding: 16px;
  gap: 12px;
}

.expack-feature-card__text {
  display: flex;
  flex-direction: column;
}

.expack-feature-card__title,
.expack-feature-card__description {
  margin: 0;
}

/* ---------------------------------------------------------------------------------------------------
   class-feature-list-widget.php (Expack_Feature_List) — wraps the header + a CSS grid of
   Expack_Feature_Card::render_card() rows (see that widget's own CSS block above for `.expack-feature-card`
   itself, including its equal-height fix).
--------------------------------------------------------------------------------------------------- */

.expack-feature-list {
  display: flex;
  flex-direction: column;
}

.expack-feature-list__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expack-feature-list__heading,
.expack-feature-list__subtitle {
  margin: 0;
}

.expack-feature-list__grid {
  display: grid;
}

/* Same reasoning as Expack_Service_Card's `layout_direction` (see its doc comment): the `columns` control's
   tablet/mobile defaults are hand-written media queries rather than Elementor's unreliable
   tablet_default/mobile_default, matching this section's confirmed Figma column counts (4 desktop / 2
   tablet / 1 mobile, docs/Design/Spec-Homepage.md §3.7). A real per-breakpoint edit in the widget's own
   Columns control still overrides these normally (higher specificity via the {{WRAPPER}} instance rule). */
@media (max-width: 1440px) {
  .expack-feature-list__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .expack-feature-list__grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ---------------------------------------------------------------------------------------------------
   class-step-card-widget.php (Expack_Step_Card)
--------------------------------------------------------------------------------------------------- */

.expack-step-card {
  display: flex;
  flex-direction: column;
}

.expack-step-card__number {
  margin: 0;
}

.expack-step-card__text {
  display: flex;
  flex-direction: column;
}

.expack-step-card__title,
.expack-step-card__description {
  margin: 0;
}

/* ---------------------------------------------------------------------------------------------------
   class-step-list-widget.php (Expack_Step_List) — wraps the header + a stack of
   Expack_Step_Card::render_card() rows (see that widget's own CSS block above for `.expack-step-card`
   itself).
--------------------------------------------------------------------------------------------------- */

.expack-step-list {
  display: flex;
  flex-direction: column;
}

.expack-step-list__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expack-step-list__heading,
.expack-step-list__subtitle {
  margin: 0;
}

/* ---------------------------------------------------------------------------------------------------
   class-final-cta-widget.php (Expack_Final_Cta)
--------------------------------------------------------------------------------------------------- */

.expack-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  /* Confirmed missing 2026-09-17: background/text color previously changed instantly on hover (Elementor's
	   Style-tab Hover controls only ever write the `:hover` color rule itself, never a transition for it). */
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
  /* 0.13.0: instances with no `link` render as a real <button> (opens the shared popup) instead of a
	   <div> — reset the browser's native button chrome so it still looks identical to the <a> variant. */
  width: 100%;
  border: 0;
  font: inherit;
  cursor: pointer;
}

/*
 * Heading text "slide" hover — same technique as the icon slide just below, applied vertically: Figma's
 * prototype (node 947:16175) repeats the heading text twice inside an `overflow-clip` frame exactly one
 * line tall, with the second copy sitting directly one line below the first (only invisible because the
 * frame clips it, matching the icon's own off-frame-copy pattern). On hover the pair slides up by one
 * line-height so line 1 exits upward as line 2 enters — not a plain in-place color change.
 *
 * Two rendering bugs found and fixed 2026-09-17, in order:
 * 1. `top: 100%`/default `line-height: normal` let the two copies' effective line height disagree between
 *    browsers/font-loading timing, visibly misaligning them by a couple px during the slide.
 * 2. The first fix's `line-height: 1` (exactly one font-size, no extra leading) then clipped this Bold
 *    weight's own glyphs — confirmed via a real production screenshot showing a stray mark above the "g" in
 *    "Beratung", present even at rest, not just mid-hover: `line-height: 1` is tighter than this font's own
 *    natural ascender/descender space, so a glyph's ink can extend past its own 1-line-height box and get
 *    clipped oddly by the outer `overflow: hidden` instead of rendering cleanly.
 * Fixed by using `line-height: 1.3` (enough headroom for this font's ascenders/descenders — matches the
 * browser default `normal`'s usual ~1.2 with a small safety margin) consistently everywhere the offset is
 * calculated from: the outer frame's fixed height, copy 2's rest offset, and both copies' hover transform,
 * so all three measurements agree with each other regardless of what "normal" would have resolved to.
 */
.expack-final-cta__heading {
  position: relative;
  overflow: hidden;
  display: inline-block;
  line-height: 1.3;
  height: 1.3em;
}

.expack-final-cta__heading-copy {
  display: block;
  line-height: 1.3;
  transition: transform 0.25s ease;
}

.expack-final-cta__heading-copy--1 {
  transform: translateY(0);
}

.expack-final-cta__heading-copy--2 {
  position: absolute;
  top: 1.3em;
  left: 0;
  transform: translateY(0);
}

.expack-final-cta:hover .expack-final-cta__heading-copy--1,
.expack-final-cta:hover .expack-final-cta__heading-copy--2 {
  transform: translateY(-1.3em);
}

/*
 * Icon "slide" hover — see class-final-cta-widget.php's file-level doc comment for the Figma prototype
 * breakdown this replicates (node 947:16175's icon component: two stacked copies of the same arrow, one
 * off-frame, sliding along a diagonal on hover). `overflow: hidden` on the outer `__icon` span clips both
 * copies to the visible icon frame at rest; `icon_size`'s own Elementor Style control still targets
 * `.expack-final-cta__icon` for the frame's own width/height, unaffected by this.
 */
.expack-final-cta__icon {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.expack-final-cta__icon-copy {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.25s ease;
}

.expack-final-cta__icon-copy svg {
  width: 100%;
  height: 100%;
  display: block;
}

.expack-final-cta__icon-copy--1 {
  transform: translate(0, 0);
}

/* At rest, one full icon-size down-left of copy 1 (matches Figma's off-frame copy position exactly) —
   invisible only because the outer span clips it, not because of opacity/visibility. */
.expack-final-cta__icon-copy--2 {
  transform: translate(-100%, 100%);
}

.expack-final-cta:hover .expack-final-cta__icon-copy--1 {
  transform: translate(100%, -100%);
}

.expack-final-cta:hover .expack-final-cta__icon-copy--2 {
  transform: translate(0, 0);
}

/* ---------------------------------------------------------------------------------------------------
   class-stats-row-widget.php (Expack_Stats_Row)
--------------------------------------------------------------------------------------------------- */

.expack-stats-row__grid {
  display: grid;
}

.expack-stats-row__item {
  display: flex;
  flex-direction: column-reverse;
  min-height: 190px;
  justify-content: space-between;
}

/* ---------------------------------------------------------------------------------------------------
   class-icon-text-row-widget.php (Expack_Icon_Text_Row)
--------------------------------------------------------------------------------------------------- */

/* `height: 100%` chain (this rule + `.elementor-widget-container` right below) lets the row fill whatever
   height its Elementor container is stretched to (e.g. the contact-section grid's own `align-items:
   stretch`, matching the form column's taller height) instead of only being as tall as its own content —
   confirmed via real height measurement that the info column previously stopped ~160px short of the form
   card. `.expack-icon-text-row__item`'s existing `flex: 1 0 0` then divides that full height evenly across
   the 3 cards, per Figma's own `flex-[1_0_0]` on each card (node 402:2191). */
.expack-icon-text-row {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.elementor-widget-expack-icon-text-row.elementor-widget-expack-icon-text-row,
.elementor-widget-expack-icon-text-row.elementor-widget-expack-icon-text-row > .elementor-widget-container {
  height: 100%;
}

.expack-icon-text-row__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 0 0;
  text-decoration: none;
}

.expack-icon-text-row__text {
  display: flex;
  flex-direction: column;
}

.expack-icon-text-row__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------------------------------
   class-industries-section-widget.php (Expack_Industries_Section)
--------------------------------------------------------------------------------------------------- */

.expack-industries-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.expack-industries-section__header {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  padding: 32px;
  border-radius: 24px;
}

.expack-industries-section__header-text {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expack-industries-section__heading,
.expack-industries-section__subtitle {
  margin: 0;
}

/* Container bo góc bọc quanh cặp nút prev/next, matching Figma node 386:22054 (bg #ececec, radius/lg 12px,
   padding/sm 6px, gap/xs 4px) — previously the two buttons had no shared wrapper background/radius. */
.expack-industries-section__controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  flex-shrink: 0;
   background-color: #ECECEC;
}

.expack-industries-section__prev.expack-industries-section__prev,
.expack-industries-section__next.expack-industries-section__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  /* Same Kit-button specificity gap as the FAQ trigger (see the file-level SPECIFICITY NOTE) — this
	   widget only has a background_color Elementor control, no text-color one, so the arrow glyph
	   (&larr;/&rarr;) fell back to the Kit's forced white, making it invisible against the light-grey
	   default background. */
  color: #2a3851;
}

/* Figma's disabled prev/next state at either end of the carousel (node 386:22054, property1="6": last
   button pair shown at 40% opacity) — toggled via the native `disabled` attribute by the carousel script
   based on scroll position, not a fixed always-on style. */
.expack-industries-section__prev:disabled,
.expack-industries-section__next:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.expack-industries-section__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* Scrollbar is intentionally hidden — this carousel is navigated via the prev/next buttons above and
	   the progress-bar indicator below (per Figma), not a visible native scrollbar. Firefox/legacy Edge
	   read these two properties; WebKit/Blink need the ::-webkit-scrollbar rule further down. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* While actively being dragged (class toggled by the carousel script): the "grabbing" cursor and
	   `scroll-behavior: auto` (not `smooth`) — smooth-scroll fights a drag's continuous scrollLeft updates,
	   producing a laggy, rubber-banded feel instead of 1:1 tracking with the pointer. */
  user-select: none;
}

.expack-industries-section__track.expack-industries-section__track--dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.expack-industries-section__track::-webkit-scrollbar {
  display: none;
}

.expack-industries-section__indicator-track {
  position: relative;
  width: 736px;
  max-width: 100%;
  height: 2px;
  border-radius: 2px;
  margin: 0 auto;
  overflow: hidden;
  /* Confirmed via Figma node 449:2758 (2026-09-17) — was previously missing entirely, leaving the
	   progress bar invisible despite its Elementor color controls being set correctly. */
}

.expack-industries-section__indicator-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 2px;
  /* width/transform are computed live from scroll position by this widget's own inline <script>. */
}

/* ---------------------------------------------------------------------------------------------------
   class-faq-tab-bar-widget.php (Expack_Faq_Tab_Bar)
--------------------------------------------------------------------------------------------------- */

.expack-faq-tab-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.expack-faq-tab-bar__tab {
  flex: 0 0 auto;
  border: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------------------------------
   class-faq-accordion-widget.php (Expack_Faq_Accordion)
--------------------------------------------------------------------------------------------------- */

.expack-faq-accordion {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  column-gap: 20px;
  align-items: flex-start;
}

.expack-faq-accordion__column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  /* min-width:0 lets a column shrink below its content's natural width instead of overflowing its
	   flex-wrap row once a title is long enough to want to wrap. */
  min-width: 0;
}

.expack-faq-accordion__item {
  /* background-color/border-radius come from this widget's Elementor Style-tab controls
	   (card_background_color/card_border_radius selectors) — layout-only rules here. */
  width: 100%;
  box-sizing: border-box;
  /* min-width:0 is required on every flex item in the chain down to the title <span> — without it,
	   a flex item's default min-width:auto sizes it to its longest unbreakable content (the full title
	   string), overflowing the card instead of wrapping. */
  min-width: 0;
}

.expack-faq-accordion__title {
  margin: 0;
  width: 100%;
}

/* Doubled class — see the SPECIFICITY NOTE at the top of this file. Plain .expack-faq-accordion__trigger
   (specificity 0,1,0) loses to Elementor's site-wide Kit rule `.elementor-kit-24 button {...}`
   (specificity 0,1,1, sets a solid brand-color background + white text on every <button> on the site),
   which is exactly the "solid navy pill" look this widget had before its first fix — and which came back
   once this rule moved from an inline `style` attribute (which always wins) into this external
   stylesheet without accounting for that gap. */
.expack-faq-accordion__trigger.expack-faq-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-width: 0;
  /* white-space:normal overrides the browser's UA stylesheet default of `nowrap` on <button> — that
	   default silently disables wrapping on every descendant regardless of their own overflow-wrap/
	   word-break, which is what caused long titles to overflow past the toggle icon (2026-09-17). */
  white-space: normal;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.expack-faq-accordion__trigger-text {
  flex: 1 1 0%;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Doubled class — same reason as .expack-faq-accordion__trigger.expack-faq-accordion__trigger above.
   border-width/style are static defaults here so Elementor's own border-color selectors (tab_background_
   default / tab_border_color_active, single-class) can win; border used to be set inline on the <button>,
   which beat those Elementor color controls outright regardless of specificity. */
.expack-faq-accordion__tab.expack-faq-accordion__tab {
  box-sizing: border-box;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.expack-faq-accordion__tab:hover,
.expack-faq-accordion__tab:focus {
  border-width: 2px !important;
}

.expack-faq-accordion__tab:focus {
  border-color: #0958c3 !important;
  outline: none;
}

.expack-faq-accordion__toggle-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* Open/closed icon swap — toggled by this widget's own inline <script> setting element.hidden, kept
   here as the CSS half of that contract (the script only flips the attribute). */
.expack-faq-accordion__item:not(.is-open)
  .expack-faq-accordion__toggle-icon--minus,
.expack-faq-accordion__item.is-open .expack-faq-accordion__toggle-icon--plus {
  display: none;
}

.expack-faq-accordion__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.expack-faq-accordion__divider {
  height: 1px;
  width: 100%;
  /* background-color comes from this widget's Elementor "Divider color" control. */
}

.expack-faq-accordion__image {
  display: block;
  width: 100%;
  border-radius: 16px;
}

.expack-faq-accordion__description {
  margin: 0;
}

/* ---------------------------------------------------------------------------------------------------
   class-contact-form-widget.php (Expack_Contact_Form)
--------------------------------------------------------------------------------------------------- */

.expack-contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
}

.expack-contact-form__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expack-contact-form__heading,
.expack-contact-form__subtext {
  margin: 0;
}

.expack-contact-form__divider {
  height: 1px;
}

.expack-contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.expack-contact-form__row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.expack-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.expack-contact-form__field--half {
  flex: 1 1 200px;
}

.expack-contact-form__consent {
  display: flex;
  align-items: center;
  gap: 8px;
}

.expack-contact-form__checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.expack-contact-form__input,
.expack-contact-form__textarea {
  border: 0;
}

.expack-contact-form__input {
  padding: 10px 18px;
}

.expack-contact-form__textarea {
  padding: 12px 18px;
  resize: vertical;
}

.expack-contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  border: 0;
  cursor: pointer;
}

.expack-contact-grid-col.expack-contact-grid-col {
  flex: 1 1 0;
  min-width: 0;
} 

.expack-cta-link__icon svg {
  width: 14px !important;
  height: 14px !important;
}

/* ---------------------------------------------------------------------------------------------------
   class-lazy-instagram-feed-widget.php (Expack_Lazy_Instagram_Feed)
--------------------------------------------------------------------------------------------------- */

.expack-lazy-instagram-feed__placeholder {
  /* min-height is per-instance (the widget's "Placeholder height" control) — stays inline. */
}

/* ---------------------------------------------------------------------------------------------------
   class-button-widget.php (Expack_Button) — Figma style-guide Button, node 147:2008.

   Doubled-class selectors throughout (per this file's SPECIFICITY NOTE above): Elementor's Kit CSS ships
   `.elementor-kit-24 a { color: #919191 }` (+ `:hover`), specificity (0,1,1), which otherwise beats a
   plain `.expack-button` single-class selector (0,1,0) whenever the widget renders as a real `<a>` (i.e.
   whenever a link URL is set).
--------------------------------------------------------------------------------------------------- */

.expack-button.expack-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid transparent;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

/* Whenever this widget renders a real <button> (e.g. the Hero secondary CTA's "scroll" behavior, vs. an
   <a> for "link"/"modal"), Elementor's Kit CSS ships `.elementor-kit-24 button:hover/:focus { border-
   width: 0 }` at specificity (0,2,1) — one point higher than this doubled class (0,2,0) because of the
   `:hover` pseudo-class — which silently zeroed the border back to 0 on hover/focus regardless of this
   file's own doubling. That's invisible on a white/neutral surface (no border to lose), but on the Hero
   banner — same blue as the black/white variants' own hover background — it made the secondary CTA
   disappear completely on hover: no border edge, blue-on-blue background. Re-assert border-width here. */
.expack-button.expack-button:hover,
.expack-button.expack-button:focus {
  border-width: 2px;
}

.expack-button.expack-button--medium {
  padding: 12px 20px;
}

.expack-button.expack-button--small {
  padding: 6px 10px;
}

.expack-button.expack-button--icon-left.expack-button--medium,
.expack-button.expack-button--icon-right.expack-button--medium {
  gap: 8px;
}

.expack-button.expack-button--icon-left.expack-button--small,
.expack-button.expack-button--icon-right.expack-button--small {
  gap: 4px;
}

.expack-button.expack-button__icon,
.expack-button .expack-button__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.expack-button .expack-button__icon--left {
  order: -1;
}

/* Ex Blue */
.expack-button.expack-button--blue {
  background-color: #0958c3;
  border-color: #0958c3;
  color: #ffffff;
}

.expack-button.expack-button--blue:hover,
.expack-button.expack-button--blue:focus {
  background-color: #101010;
  border-color: #101010;
  color: #ffffff;
}

/* Smash Balloon Instagram feed's own "Follow" button (Figma node 402:2223, fileKey 29QXYcXRTpPgjimE25c7mH)
   AND its "Load more" button (#sbi_load .sbi_load_btn) — Smash Balloon's own sbi-styles.css already treats
   these as the same visual component (identical base rule: `background:#333`/`#408bd1`, same padding/
   radius/transition), so both get synced to the Ex Blue button style together, not just Follow, so they
   don't look like foreign components next to the rest of the page. Smash Balloon renders each one's
   background via an inline `style` attribute (its own admin-configurable button-color setting, e.g.
   `style="background: rgb(64,139,209)"`) — inline styles beat any stylesheet selector regardless of
   specificity, so background-color needs `!important` to actually win, per direct instruction. color/
   border/box-shadow also get `!important`: Smash Balloon's own #sb_instagram-prefixed rules already tie
   this selector's specificity (both doubled to 0,2,0 via that ID+class prefix), and its `:hover`/`:focus`
   box-shadow "glow" effect (sbi-styles.css) needs to be explicitly zeroed, not just outweighed, since it's
   a different property than our hover background swap. */
#sb_instagram .sbi_follow_btn a,
#sb_instagram .sbi_follow_btn a:visited,
#sb_instagram #sbi_load .sbi_load_btn,
#sb_instagram #sbi_load .sbi_load_btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 12px 12px 16px !important;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid #0958c3;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  background-color: #0958c3 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

#sb_instagram .sbi_follow_btn a:hover,
#sb_instagram .sbi_follow_btn a:focus,
#sb_instagram #sbi_load .sbi_load_btn:hover,
#sb_instagram #sbi_load .sbi_load_btn:focus {
  background-color: #101010 !important;
  border-color: #101010;
  color: #ffffff !important;
  box-shadow: none !important;
}

#sb_instagram .sbi_follow_btn .fa,
#sb_instagram .sbi_follow_btn svg {
  width: 20px;
  height: 20px;
  font-size: 20px;
  margin: 0 !important;
}

/* Ex Black */
.expack-button.expack-button--black {
  background-color: #101010;
  border-color: #101010;
  color: #ffffff;
}

.expack-button.expack-button--black:hover,
.expack-button.expack-button--black:focus {
  background-color: #0958c3;
  border-color: #ffffff;
  color: #ffffff;
}

/* Ex White */
.expack-button.expack-button--white {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #2a3851;
}

.expack-button.expack-button--white:hover,
.expack-button.expack-button--white:focus {
  background-color: #0958c3;
  border-color: #ffffff;
  color: #ffffff;
}

/*
 * Expack Link — Figma's "Text/Blue" variant (chevrone-down icon reused, not a separate asset): no
 * background/border at any state (overrides the base rule's `border: 2px solid transparent` box model by
 * zeroing border-width too, so this variant doesn't reserve 2px of invisible border like the filled
 * variants do). Unlike Figma's own Text/* variants (which carry no horizontal padding), this project wants
 * the link to fit-content with a small side inset rather than sitting flush against the card edge, and
 * left-aligned rather than centered like the filled variants — a deliberate deviation from the raw Figma
 * spec per direct instruction, not a fidelity bug.
 */
.expack-button.expack-button--link {
  background-color: transparent;
  border-color: transparent;
  border-width: 0;
  justify-content: flex-start;
  padding-left: 4px;
  padding-right: 4px;
  color: #0958c3;
}

.expack-button.expack-button--link:hover,
.expack-button.expack-button--link:focus {
  background-color: transparent;
  border-color: transparent;
  /* Re-zero border-width: the shared `.expack-button.expack-button:hover,:focus { border-width: 2px }`
     fix (added for the filled variants losing their border to Elementor Kit's `button:hover/:focus`
     rule) has a `:hover`/`:focus` pseudo-class, giving it specificity (0,2,1) — one point higher than
     this variant's own resting `border-width: 0` (0,2,0, no pseudo-class) — so it silently reintroduced
     a 2px border on this borderless-by-design variant. */
  border-width: 0;
  color: rgba(9, 88, 195, 0.7);
}

/* Synced to `.expack-cta-link` (class-cta-link.php's own "text + trailing arrow" helper — this variant
   exists specifically so Expack_Card/Expack_Industries_Section's plain-text CTA can use this widget's
   Type system, per the "Expack Link" comment in this file's own SPECIFICITY NOTE). At the shared
   `.expack-button__icon`'s 20px, the arrow sat visibly larger/lower than the 14px uppercase text next to
   it — 14px matches the icon to the text's own font-size instead of the filled pill variants' fixed icon
   size, and `align-items: center` on the wrapper alone isn't enough once the icon's box no longer matches
   the text's line-height, so the icon needs its own vertical nudge to sit on the same optical center. */
.expack-button.expack-button--link .expack-button__icon {
  width: 14px;
  height: 14px;
  align-self: center;
  transition: transform 0.15s ease;
}

.expack-button.expack-button--link:hover .expack-button__icon,
.expack-button.expack-button--link:focus .expack-button__icon {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------------------------------------------
   Homepage Contact Form (section-11-contact.php) — Elementor Pro's native `form` widget styled to match
   Figma node 890:6137 ("Contact form"). Tagged with the stable `expack-contact-form` CSS class (set via
   the widget's own "_css_classes" control) instead of the per-page-random `elementor-element-{id}` hash,
   so this rule set works no matter which page/template places the form. Every rule below replaces
   Elementor Pro Form's own default styling (grey label, plain white/grey-bordered input, orange
   `.elementor-button` from this Kit's global button style) — same doubled-class specificity pattern as
   the rest of this file, needed to beat the Kit's `.elementor-kit-24 button` global style.
   `.elementor-field-textual`'s `background-color` needs `!important`: Elementor generates a per-INSTANCE
   style rule for every form widget (`.elementor-2389 .elementor-element.elementor-element-fe3625f
   .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper)
   { background-color: #fff; }`, from that widget's own Style-tab "Field Background Color" default) at
   specificity (0,7,0) — chaining more `.expack-contact-form` repeats to out-specificity it is a losing
   arms race, since that ID-scoped selector's specificity changes with the widget/page it's placed on and
   can't be predicted from this shared stylesheet.
--------------------------------------------------------------------------------------------------- */

/*
 * `.expack-contact-form` collides with class-contact-form-widget.php's OWN unrelated widget, which also
 * uses that class name (on its own `<form>` element) and gives itself `padding: 32px` — since this
 * Elementor Pro form widget's outer wrapper carries the identical class, that rule was silently applying
 * here too, stacking on top of the wrapping "Contact form" container's own 32px padding (Style tab) for a
 * doubled 64px inset instead of Figma's single 32px. Scoped to `.elementor-widget-form` (Elementor's own
 * auto-added class, present only on this Elementor Pro instance, never on the other widget's plain
 * `<form>`) so this doesn't zero out that other widget's intentional padding if it's ever placed somewhere.
 */
.elementor-widget-form.expack-contact-form {
  padding: 0 !important;
}

/* `!important` needed (same root cause as `.elementor-field-textual`'s own `!important` fixes above):
   Elementor generates a per-INSTANCE rule from the form widget's own "Column Gap" Style-tab default (10px)
   — `.elementor-2389 .elementor-element.elementor-element-512e78e .elementor-field-group { padding-right:
   calc(5px); padding-left: calc(5px); margin-bottom: 10px; }` — at specificity (0,4,0), one class higher
   than this rule's (0,3,0), so it silently won regardless of doubling. Confirmed via real matched-rule
   inspection (not just reasoning) that this was still leaving 5px side padding + a 10px bottom gap under
   every field despite this rule already zeroing margin-bottom. */
.expack-contact-form.expack-contact-form .elementor-field-group {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 0 !important;
}

.expack-contact-form.expack-contact-form .elementor-field-label {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  color: #2a3851;
  margin-bottom: 4px;
}

.expack-contact-form.expack-contact-form
  .elementor-field-required
  .elementor-field-label::after {
  content: "\25CF";
  display: inline-block;
  font-size: 6px;
  color: #ff2323;
  margin-left: 2px;
  vertical-align: super;
}

/*
 * `border`/`border-radius` need `!important` too, same root cause as `background-color`'s comment just
 * above — but confirmed via real computed-style inspection (not just reasoning) that this one is worse than
 * the doubled-class fix accounts for: the Kit's global Form Fields style
 * (`.elementor-kit-24 input:not([type="button"]):not([type="submit"]), .elementor-kit-24 textarea,
 * .elementor-kit-24 .elementor-field-textual { border-radius: 0; border: 1px solid ... }`, post-24.css) has
 * its `input`-targeting branch at specificity (0,3,1) — the two `:not([type=...])` clauses each count as an
 * attribute selector, and the bare `input` tag adds a type-selector point our fully class-based (0,3,0)
 * selector doesn't have — so it wins over every single-line `<input>` field (Name/Unternehmen/Telefon/
 * E-Mail) despite matching fewer classes than us. The `textarea` (Nachricht) is unaffected — the Kit rule's
 * `textarea`-targeting branch is only (0,1,1), well below ours — which is exactly why only the 4 inputs
 * showed square corners in a real screenshot while the textarea didn't.
 */
.expack-contact-form.expack-contact-form .elementor-field-textual {
  background-color: #ececec !important;
  border: none !important;
  border-radius: 8px !important;
  height: 44px;
  padding: 10px 18px;
  font-family: "Host Grotesk", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #2a3851;
  box-shadow: none;
}

.expack-contact-form.expack-contact-form textarea.elementor-field-textual {
  height: 131px;
  padding: 12px 18px;
  resize: none;
}

.expack-contact-form.expack-contact-form .elementor-field-textual::placeholder {
  color: rgba(42, 56, 81, 0.5);
}

/* Same specificity gap as the base rule above — Kit's `input:focus:not(...):not(...)` branch also repaints
   background/border-color on focus, so pin them here too instead of leaving the field to flash to the
   Kit's own focus colors before our outline draws on top. */
.expack-contact-form.expack-contact-form .elementor-field-textual:focus {
  background-color: #ffffff !important;
  border: none !important;
  outline: 2px solid #0958c3;
  outline-offset: 1px;
}

/*
 * `row-gap` + `column-gap`, but `column-gap` alone is NOT gap-aware here: confirmed via a real bounding-box
 * measurement that adding it forced the two 50%-width columns to wrap onto separate rows instead of sitting
 * side by side — Elementor's own field-group column has a fixed `width: 50%` AND `flex-shrink: 0` (so
 * fields never get squished by content), so the browser can't shrink either column to make room for the
 * gap; with `flex-wrap: wrap` also set, it wraps instead of overflowing. Fixed by subtracting the gap from
 * each 50%-column's own width via `calc()` — same shape as this plugin's own `eb_grid_item()` Container
 * helper — so 50%+50%+16px still sums to exactly 100%.
 */
.expack-contact-form.expack-contact-form .elementor-form-fields-wrapper {
  row-gap: 16px;
  column-gap: 16px;
}

.expack-contact-form.expack-contact-form .elementor-field-group.elementor-col-50 {
  width: calc(50% - 8px) !important;
}

/*
 * `.elementor-field-label` and `.elementor-field-subgroup` are SIBLINGS here (both direct children of
 * `.elementor-field-type-acceptance`), not parent/child — `order` only works between flex siblings sharing
 * one flex container, so `display:flex` has to go on their shared parent, not on `.elementor-field-subgroup`
 * itself (which would only reorder the single `.elementor-field-option` span inside it).
 */
.expack-contact-form.expack-contact-form .elementor-field-type-acceptance {
  display: flex;
  align-items: center;
}

.expack-contact-form.expack-contact-form
  .elementor-field-type-acceptance
  .elementor-field-label {
  order: 2;
  text-transform: none;
  font-family: "Host Grotesk", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  margin-bottom: 0;
  margin-left: 8px;
  cursor: pointer;
}

.expack-contact-form.expack-contact-form
  .elementor-field-type-acceptance
  .elementor-field-subgroup {
  order: 1;
  flex-basis: auto;
  width: auto;
}

.expack-contact-form.expack-contact-form
  .elementor-field-type-acceptance
  .elementor-field-label
  a {
  color: #0958c3;
}

.expack-contact-form.expack-contact-form .elementor-acceptance-field {
  order: 1;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #0958c3;
  cursor: pointer;
}

.expack-contact-form.expack-contact-form .e-form__buttons {
  margin-top: 0;
}

/*
 * The widget's own "Button Align" setting defaults to "stretch", which adds
 * `.elementor-button-align-stretch ... .elementor-button { flex-basis: 100% }` on the wrapper — `width:
 * auto` alone can't beat a flex-basis, so it has to be reset here too for the button to size to its
 * content like Figma node 890:6137 shows, instead of spanning the full card width.
 */
.expack-contact-form.expack-contact-form .elementor-button.elementor-button {
  background-color: #0958c3;
  border: 2px solid #0958c3;
  border-radius: 8px;
  padding: 12px 12px 12px 16px;
  width: auto;
  flex-basis: auto;
  flex-grow: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Ex Blue's own hover swap (class-button-widget.php's `blue` variant) — was a one-off darker blue
   (#003277) instead of the shared Ex Blue hover token, so this button didn't match every other Ex Blue
   button on the page (Hero/Final CTA/Instagram Follow) once those were audited/synced. */
.expack-contact-form.expack-contact-form
  .elementor-button.elementor-button:hover {
  background-color: #101010;
  border-color: #101010;
}

.expack-contact-form.expack-contact-form .elementor-button-text {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: #ffffff;
}

.expack-contact-form.expack-contact-form .elementor-button-icon {
  color: #ffffff;
  font-size: 14px;
}

/* ---------------------------------------------------------------------------------------------------
   class-final-cta-modal.php (Expack_Final_Cta_Modal) — Figma node 826:15902
--------------------------------------------------------------------------------------------------- */

/* `align-items: center` — the popup rests in the exact middle of the screen (equal top/bottom/left/right
   space), per direct request; only the entrance animation still comes from below (the panel's own
   `transform: translateY(100%)` start state, just below). */
.expack-final-cta-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}

.expack-final-cta-modal.is-open {
  visibility: visible;
}

.expack-final-cta-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(16, 16, 16, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.expack-final-cta-modal.is-open .expack-final-cta-modal__backdrop {
  opacity: 1;
}

.expack-final-cta-modal__panel {
  position: relative;
  width: 100%;
  max-width: 697px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: 20px;
  border-radius: 24px;
  background-color: #ffffff;
  box-shadow:
    0 0 0 rgba(0, 0, 0, 0.08),
    0 8px 8px rgba(0, 0, 0, 0.08),
    0 16px 16px rgba(0, 0, 0, 0.08);
  /* Slide-up-from-bottom entrance, per direct instruction — the design itself is a static frame with no
	   motion spec, so this follows the same bottom-sheet convention as this plugin's other overlays. */
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.expack-final-cta-modal.is-open .expack-final-cta-modal__panel {
  transform: translateY(0);
}

.expack-final-cta-modal__form {
  display: flex;
  flex-direction: column;
}

.expack-final-cta-modal__header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  border-radius: 24px 24px 0 0;
  background-color: #0958c3;
}

.expack-final-cta-modal__header-text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* `!important` needed on both: the theme/Elementor Kit's own global heading style (applied to a bare
   `h2` selector at higher specificity than this plugin's own class-only rules) otherwise wins and washes
   the white text out to the Kit's default heading color — confirmed via screenshot, same class of bug as
   0.6.1's hero teaser card hover fix in this same file. */
.expack-final-cta-modal__title {
  margin: 0 !important;
  color: #ffffff !important;
  font-family: "Host Grotesk", sans-serif !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  line-height: normal !important;
}

.expack-final-cta-modal__subtitle {
  margin: 0;
  color: #ffffff !important;
  font-family: "Host Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 500;
}

/* `!important` on display/border/background/border-radius: the theme styles bare `button` elements with
   its own visible background/square corners at higher specificity than this class-only rule (same root
   cause as every other `!important` in this file) — confirmed via screenshot, the close button was showing
   a permanent dark square instead of only tinting on hover. */
.expack-final-cta-modal__close {
  display: flex !important;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.expack-final-cta-modal__close:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.expack-final-cta-modal__close svg {
  display: block;
  width: 14px;
  height: 14px;
}

.expack-final-cta-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: 0 0 24px 24px;
  background-color: #ffffff;
}

.expack-final-cta-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.expack-final-cta-modal__label {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #2a3851;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-transform: uppercase;
}

/* Figma's own required-dot ("Mono/Bullet": 15px, line-height 16px, -0.32 tracking) sits inside its own
   6×6 box, vertically centered against the label text next to it — plain inline text (this rule's previous
   shape) left the "•" glyph sitting low relative to the label's cap-height instead, per direct screenshot
   feedback. */
.expack-final-cta-modal__required-marker {
  display: inline-flex;
  align-items: end;
  justify-content: center;
  width: 6px;
  height: 6px;
  color: #ff2323;
  font-size: 15px;
  line-height: 16px;
  letter-spacing: -0.32px;
}

/* `!important` on border/border-radius/background: WordPress core and the active theme both style bare
   `input`/`textarea` elements (a visible border, square corners, white background) at higher specificity
   than this plugin's own class-only rule — same root cause as the title fix just above. */
.expack-final-cta-modal__input,
.expack-final-cta-modal__textarea {
  width: 100%;
  border: 0 !important;
  border-radius: 8px !important;
  background-color: #ececec !important;
  color: #2a3851;
  font-family: "Host Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 18px;
  box-sizing: border-box;
  outline: 2px solid transparent;
  outline-offset: 0;
  transition:
    outline-color 0.15s ease,
    background-color 0.15s ease;
}

.expack-final-cta-modal__input {
  height: 44px;
}

.expack-final-cta-modal__textarea {
  height: 131px;
  padding-top: 12px;
  resize: vertical;
}

/* Focus state (not shown in Figma's static frame — requested directly): a visible blue outline so keyboard
   and mouse users alike can tell which field is active, matching the brand blue used everywhere else. */
.expack-final-cta-modal__input:focus,
.expack-final-cta-modal__textarea:focus {
  background-color: #ffffff !important;
  outline-color: #0958c3;
}

/* Validation state — toggled by final-cta-modal.js alongside each field's error message, red matching the
   required-marker/error-text color already used in this modal and the inline Contact Form widget. */
.expack-final-cta-modal__input.has-error,
.expack-final-cta-modal__textarea.has-error {
  outline-color: #ff2323;
}

/* `flex-wrap: wrap` + the error's own `flex-basis: 100%` (below) forces the validation message onto its
   own line under the checkbox/label row on every screen size, instead of squeezing in beside them — this
   row is the one field-error target that isn't already a `flex-direction: column` wrapper. */
.expack-final-cta-modal__consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.expack-final-cta-modal__consent .expack-final-cta-modal__field-error {
  flex-basis: 100%;
  width: 100%;
}

/* `accent-color` tints the native checkbox's own checked-state fill to the brand blue (Figma node
   826:15854) without replacing it with a custom-drawn control — no checked/unchecked state asset needed. */
.expack-final-cta-modal__checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: #0958c3;
  cursor: pointer;
}

/* `!important` needed on both: the theme's own default paragraph/link color (higher specificity than this
   class-only rule) otherwise wins, which is why "Datenschutz" rendered the same muted grey as the
   surrounding sentence instead of the brand blue — confirmed via screenshot. */
.expack-final-cta-modal__consent-label {
  color: #2a3851 !important;
  font-family: "Host Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.expack-final-cta-modal__consent-link {
  color: #0958c3 !important;
  text-decoration: none;
}

.expack-final-cta-modal__consent-link:hover {
  text-decoration: underline;
}

/* `align-self: flex-end`, NOT flex-start — Figma's field column is `items-end`/`justify-end` (the button
   sits flush against the panel's right edge), confirmed against the design screenshot: an earlier flex-start
   here was a real bug, not a style choice.
   Every visual property below needs `!important`: the theme styles the bare `button` element itself
   (full width, `justify-content: space-between`, square corners) at higher specificity than this
   class-only rule — confirmed via screenshot, the button was rendering full-width/flat/text-and-icon
   pushed apart instead of a compact right-aligned pill, same root cause as every other fix in this file. */
.expack-final-cta-modal__submit {
  display: inline-flex !important;
  align-self: flex-end;
  width: auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 12px 12px 12px 16px !important;
  border: 2px solid #0958c3 !important;
  border-radius: 8px !important;
  background-color: #0958c3 !important;
  color: #ffffff !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

/* Ex Blue's own hover swap (class-button-widget.php's `blue` variant) — same fix as the homepage contact
   form's submit button (widgets.css, Homepage Contact Form section): this was a one-off darker blue
   (#003277) instead of the shared Ex Blue hover token, so the modal's button didn't match every other Ex
   Blue button on the site once those were audited/synced. */
.expack-final-cta-modal__submit:hover {
  background-color: #101010 !important;
  border-color: #101010 !important;
}

.expack-final-cta-modal__submit:active {
  transform: scale(0.97);
}

.expack-final-cta-modal__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.expack-final-cta-modal__submit-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.expack-final-cta-modal__submit-icon svg {
  width: 100%;
  height: 100%;
}

.expack-final-cta-modal__status {
  margin: 0;
  font-family: "Host Grotesk", sans-serif;
  font-size: 14px;
}

.expack-final-cta-modal__field-error {
  margin: 4px 0 0;
  color: #ff2323;
  font-size: 13px;
}

/* Figma node 947:52571 (mobile "Beratung anfordern" popup): a full-bleed bottom sheet, not the desktop
   card — square corners, no drop shadow, 16px header/body padding (not 32px), and the title drops from
   Heading/H1 (38px Bold) to Heading/H4 (26px SemiBold). */
@media (max-width: 600px) {
	.expack-final-cta-modal__panel {
		max-width: 100%;
		max-height: 100%;
		margin: 0 8px;
		border-radius: 0;
		box-shadow: none;
	}

	.expack-final-cta-modal__header {
		padding: 16px;
		border-radius: 0;
	}

	.expack-final-cta-modal__body {
		padding: 16px;
		border-radius: 0;
	}

	.expack-final-cta-modal__title {
		font-size: 26px !important;
		font-weight: 600 !important;
	}
}

/* ---------------------------------------------------------------------------------------------------
   Responsive fallbacks for controls that deliberately DON'T use Elementor's tablet_default/mobile_default
   (see class-service-card-widget.php's `layout_direction` control doc comment for the full root-cause
   explanation: a silent/unedited responsive default there renders without its @media wrapper and
   unconditionally overrides the desktop value at every viewport). Breakpoints match this site's actual
   Kit-configured values (confirmed via post-*.css output), not Elementor's stock 1024px/767px.
--------------------------------------------------------------------------------------------------- */

@media (max-width: 1440px) {
  .expack-service-card.expack-service-card {
    flex-direction: column;
  }
}

/* Accordion trigger <button>s (Services accordion, FAQ accordion): suppress the browser's default
   focus outline on mouse/touch clicks — it doesn't match the design and reads as a rendering glitch —
   while keeping a visible ring for keyboard navigation (`:focus-visible`), same blue used elsewhere in
   this file for focus states (contact form fields). */
.expack-services-accordion__trigger:focus,
.expack-faq-accordion__trigger:focus {
	outline: none;
}

.expack-services-accordion__trigger:focus-visible,
.expack-faq-accordion__trigger:focus-visible {
	outline: 2px solid #0958c3;
	outline-offset: 2px;
}