/**
 * FEF Call Leads — structural styles.
 * Colours/sizing are driven by Elementor controls; this file handles layout,
 * inline/stacked placement, the sticky-to-footer slide animation, and the
 * mobile "collapse to icon" positioning (inline vs. floating, plus where the
 * opened form appears relative to the icon).
 */
.fef-cl { width: 100%; }
/* .fef-cl-bar stacks two independent rows — .fef-cl-row (visual/input/
   button, or a custom template) and .fef-cl-status (below it, own line) —
   so the status message can never affect how the row's OWN children wrap
   amongst themselves. Background/border/padding/shadow (Style → Container)
   apply here, on the whole card. */
.fef-cl-bar {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
}
.fef-cl-bar * { box-sizing: border-box; }
.fef-cl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.fef-cl--stacked .fef-cl-row { flex-direction: column; align-items: stretch; }

.fef-cl-visual { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 1; }
.fef-cl-visual img, .fef-cl-visual svg { display: block; width: 100%; height: 100%; }

.fef-cl-input-wrap { flex: 1 1 auto; min-width: 0; }
.fef-cl-input { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 14px; }
.fef-cl-empty { color: #94a3b8; font-style: italic; margin: 0; }

/* Prefix / country code — "outside" (default) is a plain label beside the
   field, deliberately NOT fused into the input's own border/radius so it
   doesn't fight whatever border-radius/width the admin sets on the input.
   "inside" overlays it on the input's own left edge instead (the input
   gets left padding via the Width control's second selector). */
.fef-cl-input-prefixed { display: flex; align-items: center; gap: 6px; width: 100%; }
.fef-cl-input-prefix { flex: 0 0 auto; font-size: 14px; color: #64748b; white-space: nowrap; }
.fef-cl-input-prefixed .fef-cl-input { flex: 1 1 auto; min-width: 0; }
.fef-cl-input-prefix-select { cursor: pointer; }

.fef-cl-input-prefix-inside { position: relative; display: block; }
.fef-cl-input-prefix-inside .fef-cl-input-prefix {
    position: absolute;
    left: calc(10px + var(--fef-cl-prefix-x, 0px));
    top: 50%;
    transform: translateY(calc(-50% + var(--fef-cl-prefix-y, 0px)));
    z-index: 1;
}
.fef-cl-input-prefix-inside span.fef-cl-input-prefix { pointer-events: none; }
.fef-cl-input-prefix-inside select.fef-cl-input-prefix { border: none; background: transparent; appearance: none; -webkit-appearance: none; padding-right: 4px; }
.fef-cl-input-prefix-inside .fef-cl-input { width: 100%; padding-left: 60px; }

.fef-cl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    text-decoration: none;
    font-weight: 600;
    font-family: inherit;
    padding: 0 20px;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
.fef-cl-btn:active { transform: scale(.97); }
.fef-cl-btn-icon { display: inline-flex; align-items: center; line-height: 1; }
/* A plain column-flex child of .fef-cl-bar (below .fef-cl-row) — always
   its own line, inside the bar's own card, never affecting how .fef-cl-row
   wraps its own children. */
.fef-cl-status { display: block; width: 100%; font-size: 13px; margin-top: 8px; box-sizing: border-box; white-space: normal; word-wrap: break-word; }
.fef-cl-status:empty { display: none; margin-top: 0; }
.fef-cl-status.is-success { color: #16a34a; }
.fef-cl-status.is-error { color: #dc2626; }

/* ── Mobile: collapse to icon (opt-in, matchMedia-driven — see fef-call-leads.js
   for why this is a JS class toggle rather than a fixed @media query: the
   breakpoint itself is admin-configurable per widget instance). ── */
.fef-cl-mobi-trigger {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
/* Label Placement — "inside" (default) keeps the label as a normal flex
   child next to the icon (existing gap above); the 4 "outside" options
   pull it out into its own absolutely-positioned chip so it can carry its
   own background/border/shadow without stretching the round icon button. */
.fef-cl-mi-label-left .fef-cl-mobi-label,
.fef-cl-mi-label-right .fef-cl-mobi-label,
.fef-cl-mi-label-top .fef-cl-mobi-label,
.fef-cl-mi-label-bottom .fef-cl-mobi-label {
    position: absolute;
    white-space: nowrap;
}
.fef-cl-mi-label-left .fef-cl-mobi-label   { right: 100%; top: 50%; transform: translateY(-50%); margin-right: var(--fef-cl-mi-label-gap, 8px); }
.fef-cl-mi-label-right .fef-cl-mobi-label  { left: 100%; top: 50%; transform: translateY(-50%); margin-left: var(--fef-cl-mi-label-gap, 8px); }
.fef-cl-mi-label-top .fef-cl-mobi-label    { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: var(--fef-cl-mi-label-gap, 8px); }
.fef-cl-mi-label-bottom .fef-cl-mobi-label { top: 100%; left: 50%; transform: translateX(-50%); margin-top: var(--fef-cl-mi-label-gap, 8px); }
.fef-cl--mobi-collapse.fef-cl-mobi-active { position: relative; }
.fef-cl--mobi-collapse.fef-cl-mobi-active.fef-cl--sticky { position: fixed; }
.fef-cl--mobi-collapse.fef-cl-mobi-active .fef-cl-mobi-trigger { display: inline-flex; }
.fef-cl--mobi-collapse.fef-cl-mobi-active .fef-cl-bar { display: none; }
.fef-cl--mobi-collapse.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-bar { display: flex; }
.fef-cl--mobi-stack.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-row { flex-direction: column; align-items: stretch; }

/* ── Floating icon: .fef-cl itself becomes a small fixed box anchored to a
   screen corner (only while the mobile breakpoint actually matches — see
   the fef-cl-mobi-active gate). Offsets/gap come in as CSS vars from the
   matching Elementor controls (--fef-cl-mi-x/-y/-gap), so they stay fully
   responsive without any JS involvement. ── */
.fef-cl--mi-floating.fef-cl-mobi-active {
    position: fixed;
    z-index: 9994;
    width: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
}
.fef-cl--mi-floating.fef-cl-mobi-active.fef-cl--mi-anchor-h-right { right: var(--fef-cl-mi-x, 16px); }
.fef-cl--mi-floating.fef-cl-mobi-active.fef-cl--mi-anchor-h-left  { left: var(--fef-cl-mi-x, 16px); }
.fef-cl--mi-floating.fef-cl-mobi-active.fef-cl--mi-anchor-v-bottom { bottom: var(--fef-cl-mi-y, 16px); }
.fef-cl--mi-floating.fef-cl-mobi-active.fef-cl--mi-anchor-v-top    { top: var(--fef-cl-mi-y, 16px); }

/* ── Form open direction, relative to the icon. "replace" needs nothing
   here — the icon just hides and the bar (already the icon's sibling)
   takes over the same slot in normal flow, whether that slot is inline
   in the page or inside the floating fixed box above. ── */
.fef-cl--mi-open-bottom.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-bar,
.fef-cl--mi-open-top.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-bar,
.fef-cl--mi-open-left.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-bar,
.fef-cl--mi-open-right.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-bar {
    position: absolute;
    z-index: 1;
    width: max-content;
    min-width: 240px;
}
.fef-cl--mi-open-bottom.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-bar { top: 100%; left: 0; margin-top: var(--fef-cl-mi-gap, 8px); }
.fef-cl--mi-open-top.fef-cl-mobi-active.fef-cl-mobi-open    .fef-cl-bar { bottom: 100%; left: 0; margin-bottom: var(--fef-cl-mi-gap, 8px); }
.fef-cl--mi-open-left.fef-cl-mobi-active.fef-cl-mobi-open   .fef-cl-bar { right: 100%; top: 0; margin-right: var(--fef-cl-mi-gap, 8px); }
.fef-cl--mi-open-right.fef-cl-mobi-active.fef-cl-mobi-open  .fef-cl-bar { left: 100%; top: 0; margin-left: var(--fef-cl-mi-gap, 8px); }
/* Anchored to the right edge, a leftward/rightward popover should grow away
   from that edge rather than off-screen — flip the horizontal anchor. */
.fef-cl--mi-anchor-h-right.fef-cl--mi-open-bottom.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-bar,
.fef-cl--mi-anchor-h-right.fef-cl--mi-open-top.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-bar {
    left: auto; right: 0;
}

.fef-cl--mi-open-replace.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-mobi-trigger { display: none; }
.fef-cl--mi-open-replace.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-bar { position: relative; padding-right: 34px; }

.fef-cl-mobi-close {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%;
    z-index: 2;
}
.fef-cl--mi-open-replace.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-mobi-close { display: inline-flex; }

/* General "dismiss the whole widget" close button — works in any layout,
   desktop included. .fef-cl-bar needs position:relative for it to anchor
   correctly even when nothing else on the page has already set that. When
   the mobile "hide icon" close button is ALSO present at the same spot
   (top:6/right:6), shift this one over so they don't overlap. */
.fef-cl-bar { position: relative; }
.fef-cl-close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%;
    z-index: 3;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.fef-cl--mi-open-replace.fef-cl-mobi-active.fef-cl-mobi-open .fef-cl-close { right: 34px; }
.fef-cl-close-fx-scale:hover { transform: scale(1.15); }
.fef-cl-close-fx-rotate:hover { transform: rotate(90deg); }

/* The ✕ glyph is a separate inner element from its clickable container so
   the two can be positioned independently — by default it just inherits
   the container's own flex centering (0,0 offset); "Center Icon in
   Container" OFF swaps in a manual translate nudge instead. */
.fef-cl-close-icon { display: block; line-height: 1; }
.fef-cl-close-icon-offset { transform: translate(var(--fef-cl-close-icon-x, 0px), var(--fef-cl-close-icon-y, 0px)); }

.fef-cl--closable.fef-cl-closed { display: none !important; }

/* ── Visual (icon/image) visibility per device ── */
@media (max-width: 767px) {
    .fef-cl--hide-visual-m .fef-cl-visual { display: none !important; }
}
@media (min-width: 768px) {
    .fef-cl--hide-visual-d .fef-cl-visual { display: none !important; }
}

/* ── Sticky-to-footer + scroll trigger ── */
.fef-cl--sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9993;
    transform: translateY(110%) translate(var(--fef-cl-off-x, 0px), calc(-1 * var(--fef-cl-off-y, 0px)));
    transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}
.fef-cl--sticky.is-visible { transform: translateY(0) translate(var(--fef-cl-off-x, 0px), calc(-1 * var(--fef-cl-off-y, 0px))); }

/* "Icon Always Visible" (mobile) — opts the bar out of the scroll trigger's
   show/hide slide (permanently "shown"), but must NOT wipe out the Position
   Offset X/Y above — those are baked into the SAME transform property, so
   dropping to a bare `transform: none` here would silently zero them out
   too (a regression once actually hit: Offset X/Y "stopped working" the
   moment this rule shipped). Keep the offset, just drop the translateY.
   Scoped to .fef-cl-mobi-active (JS-driven matchMedia class, only present
   when the CONFIGURED mobile breakpoint actually matches) — an earlier,
   unscoped version of this rule applied at every viewport width, which
   silently killed the desktop "Hide Again on Scroll Up" behaviour too
   whenever the mobile icon setting (which defaults to ON) was combined
   with sticky-to-footer. */
.fef-cl--mi-ignore-scroll.fef-cl-mobi-active.fef-cl--sticky {
    transform: translate(var(--fef-cl-off-x, 0px), calc(-1 * var(--fef-cl-off-y, 0px))) !important;
}

/* Desktop's OWN independent "Always Visible" toggle — deliberately the
   mirror-image scope (:not(.fef-cl-mobi-active)) so the two "always
   visible" settings (mobile icon vs. desktop bar) can be turned on/off
   completely independently of each other. */
.fef-cl--desktop-always.fef-cl--sticky:not(.fef-cl-mobi-active) {
    transform: translate(var(--fef-cl-off-x, 0px), calc(-1 * var(--fef-cl-off-y, 0px))) !important;
}