/* assets/css/components/floating-action-strip.css
 * @layer components — Floating Action Strip (bottom-center)
 *
 * Always-visible bottom strip with two CTAs:
 *   .vimta-fab          → the strip shell
 *   .vimta-fab__btn     → each half (--primary teal, --secondary warm)
 *   .vimta-fab__divider → hairline between halves
 *
 * Modal (inline form host):
 *   .vimta-fab-modal           → fullscreen overlay
 *   .vimta-fab-modal__backdrop → click-to-close scrim
 *   .vimta-fab-modal__panel    → centered card on desktop, fullscreen on mobile
 *
 * Token-driven, BEM, zero hardcoded values. Visibility is JS-managed via
 * IIFE 30 in navigation.js (handles open/close, focus trap, ESC, scroll lock).
 */

@layer components {

  .vimta-fab {
    position: fixed;
    inset-inline: 0;
    /* inset-block-end is set below as part of the entrance transition;
       the unready state sits a touch lower (--space-2xs) and the ready
       state lifts to --space-l. Animating inset-block-end avoids needing
       transform, which would break backdrop-filter on this element. */

    margin-inline: auto;
    inline-size: fit-content;
    max-inline-size: calc(100% - var(--space-l) * 2);
    display: inline-flex;
    align-items: stretch;
    padding: 0;

    /* Wrapper is just the shape + shadow — the two buttons fill it with
       solid brand colors. No backdrop blur needed because the strip is
       opaque end-to-end. */
    background: transparent;
    border-radius: var(--radius-full);
    box-shadow:
      0 1px 2px  color-mix(in oklch, var(--text-main) 18%, transparent),
      0 8px 24px color-mix(in oklch, var(--text-main) 22%, transparent),
      0 16px 48px color-mix(in oklch, var(--secondary) 18%, transparent);
    overflow: hidden;
    /* Sit below the cookie banner (--z-overlay) so the consent UI always
       wins. Above page content (--z-raised + dropdowns). When the cookie
       banner is dismissed, the FAB is naturally the topmost fixed element. */
    z-index: var(--z-sticky);
    /* Smooth entrance — hidden by default. JS adds .vimta-fab--ready
       once the user scrolls past the hero. We deliberately DO NOT use
       `transform` on this element because a transform creates a new
       stacking context that breaks `backdrop-filter` (the filter has
       nothing "behind" to filter once isolated). Entrance is driven by
       opacity + inset-block-end (a real layout property the browser can
       animate without isolating the element). */
    inset-block-end: calc(var(--space-l) - var(--space-2xs));
    opacity: 0;
    pointer-events: none;
    transition:
      opacity         var(--duration-default) var(--ease-default),
      inset-block-end var(--duration-default) var(--ease-default);
  }

  .vimta-fab--ready {
    opacity: 1;
    inset-block-end: var(--space-l);
    pointer-events: auto;
  }

  /* Suppress the FAB only while the cookie banner is actually visible —
     i.e. it has neither `is-pending` (pre-reveal, off-screen via critical CSS)
     nor `is-hidden` (post-dismiss). The earlier selector used `:not(.is-hidden)`
     alone, which matched the `is-pending` initial state and kept the FAB
     permanently hidden for visitors whose banner never moved to `is-hidden`. */
  body:has(.vimta-cookie-banner:not(.is-hidden):not(.is-pending)) .vimta-fab {
    opacity: 0;
    pointer-events: none;
  }

  /* Suppressed while the page's own CTA banner (or, as a fallback, the
     footer) is in view — the floating quote button shouldn't compete with
     the real call-to-action at the bottom of the page. JS toggles this via
     IntersectionObserver in IIFE 30. Overrides --ready, so it wins whenever
     both are present. */
  .vimta-fab--suppressed {
    opacity: 0;
    pointer-events: none;
  }

  .vimta-fab__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);

    padding: var(--space-m) var(--space-xl);
    border: 0;
    border-radius: 0;
    color: var(--white);
    font-family: inherit;
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    letter-spacing: 0.01em;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default);
  }

  .vimta-fab__btn--primary {
    background: var(--secondary);
  }

  @media (hover: hover) {
    .vimta-fab__btn--primary:hover {
      background: var(--secondary-hover);
    }
  }

  .vimta-fab__btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .vimta-fab__icon {
    flex-shrink: 0;
    inline-size: var(--icon-inline-m);
    block-size: var(--icon-inline-m);
    color: currentColor;
  }

  .vimta-fab__label {
    white-space: nowrap;
  }

  /* MOBILE — strip stretches edge-to-edge, safe-area inset */

  @media (max-width: 40em) {
    .vimta-fab {
      inset-inline: 0;
      margin-inline: auto;
      inline-size: fit-content;
      max-inline-size: calc(100% - var(--space-l) * 2);
      inset-block-end: max(var(--space-s), env(safe-area-inset-bottom));
    }

    .vimta-fab__btn {
      padding: var(--space-s) var(--space-l);
      font-size: var(--text-s);
    }

    .vimta-fab__label {
      white-space: nowrap;
    }
  }

  .vimta-fab-modal {
    position: fixed;
    inset: 0;

    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-l);

    opacity: 0;
    transition: opacity var(--duration-default) var(--ease-default);
  }

  .vimta-fab-modal[hidden] {
    display: none;
  }

  .vimta-fab-modal--open {
    opacity: 1;
  }

  .vimta-fab-modal__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in oklch, var(--text-main) 55%, transparent);
    cursor: pointer;

    backdrop-filter: var(--backdrop-blur-soft);
    -webkit-backdrop-filter: var(--backdrop-blur-soft);
  }

  .vimta-fab-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: var(--text-width-l, 56rem);
    max-block-size: calc(100dvh - var(--space-xl) * 2);
    background: var(--white);
    border-radius: var(--radius-l);
    box-shadow:
      0 24px 48px color-mix(in oklch, var(--text-main) 25%, transparent),
      0 8px 16px  color-mix(in oklch, var(--text-main) 10%, transparent);
    overflow: hidden;

    transform: scale(0.96);
    transition: transform var(--duration-default) var(--ease-default);
  }

  .vimta-fab-modal--open .vimta-fab-modal__panel {
    transform: scale(1);
  }

  .vimta-fab-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-l) var(--space-xl);
    border-block-end: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }

  .vimta-fab-modal__title {
    margin: 0;
    font-size: var(--heading-block);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    line-height: var(--leading-snug);
  }

  .vimta-fab-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default);
  }

  @media (hover: hover) {
    .vimta-fab-modal__close:hover {
      background: var(--neutral-ultra-light);
      color: var(--text-main);
      border-color: var(--border-default);
    }
  }

  .vimta-fab-modal__close:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .vimta-fab-modal__body {

    flex: 1;
    overflow-y: auto;
    padding: var(--space-l) var(--space-xl) var(--space-xl);

  }

  .vimta-fab-modal__body .contact-form,
  .vimta-fab-modal__body .feedback-form {
    max-inline-size: none;
    margin-inline: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  @media (max-width: 40em) {
    .vimta-fab-modal {
      padding: 0;
    }

    .vimta-fab-modal__panel {
      max-inline-size: none;
      max-block-size: 100dvh;
      block-size: 100dvh;
      border-radius: 0;
    }

    .vimta-fab-modal__header {
      padding: var(--space-m) var(--space-l);

      position: sticky;
      inset-block-start: 0;
      background: var(--white);
      z-index: 1;
    }

    .vimta-fab-modal__body {
      padding: var(--space-m) var(--space-l) var(--space-xl);
      /* Honour iOS safe-area at the bottom of the form. */
      padding-block-end: max(var(--space-xl), env(safe-area-inset-bottom));
    }
  }

  body.vimta-fab-modal-open {
    overflow: hidden;
  }

  @media (prefers-reduced-motion: reduce) {
    .vimta-fab,
    .vimta-fab-modal,
    .vimta-fab-modal__panel {
      transition: none;
    }
    .vimta-fab {
      transform: none;
    }
    .vimta-fab-modal__panel {
      transform: none;
    }
  }
}