/*
 * iLectric Bottombar — compact responsive layout
 *
 *
 * Alleen breed ondersteunde CSS-technieken:
 * Grid, media queries, nth-child, opacity, transform en keyframes.
 */

:root {
  --z-bottombar: 1000;
  --il-bottombar-h: 104px;

  --il-open: #166534;
  --il-open-bg: #f0fdf4;
  --il-open-border: #86efac;

  --il-closed: #991b1b;
  --il-closed-bg: #fef2f2;
  --il-closed-border: #fecaca;

  --il-status-unknown: #475569;
  --il-status-unknown-bg: #f8fafc;
  --il-status-unknown-border: #cbd5e1;
}

/* ==========================================================================
   1. BAR EN HOOFDLAYOUT
   ========================================================================== */

.il-bottombar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-bottombar);

  display: none;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;

  padding:
    .55rem
    max(var(--pad-container, 1rem), var(--safe-right, 0px))
    max(.55rem, var(--safe-bottom, 0px))
    max(var(--pad-container, 1rem), var(--safe-left, 0px));

  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--il-border-light, #e8eaf0);
  box-shadow: 0 -6px 24px rgba(14, 30, 66, .08);
}

body.home .il-bottombar,
body.woocommerce.archive .il-bottombar,
body.single-product .il-bottombar {
  display: block;
}

body.home,
body.woocommerce.archive,
body.single-product {
  padding-bottom: var(
    --il-bottombar-current-h,
    calc(var(--il-bottombar-h) + var(--safe-bottom, 0px))
  ) !important;
}

/*
 * De actuele GenerateBlocks-markup bevat:
 * .il-bottombar__inner
 *   ├─ .il-bottombar__meta
 *   └─ .il-bottombar__actions
 */
.il-bottombar__inner {
  display: grid;
  grid-template-columns:
    minmax(18rem, .9fr)
    minmax(30rem, 1.6fr);
  align-items: center;
  gap: clamp(.75rem, 1.5vw, 1.5rem);

  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

/* ==========================================================================
   2. OPENINGSTATUS EN SOUNDBITES
   ========================================================================== */

.il-bottombar__meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: clamp(.55rem, 1vw, .9rem);

  min-width: 0;
  width: 100%;
  margin: 0;
}

.il-bottombar__status-slot,
.il-bottombar__status-slot .wp-block-shortcode {
  min-width: 0;
  margin: 0;
  line-height: 1;
}

.il-opening-status {
  display: inline-flex;
  align-items: center;
  gap: .42rem;

  min-height: 28px;
  box-sizing: border-box;
  padding: .34rem .68rem;

  border: 1px solid;
  border-radius: 999px;

  font-size: .75rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.il-opening-status__dot {
  width: .5rem;
  height: .5rem;
  flex: 0 0 .5rem;
  border-radius: 50%;
  background: currentColor;
}

.il-opening-status--open {
  color: var(--il-open);
  background: var(--il-open-bg);
  border-color: var(--il-open-border);
}

.il-opening-status--closed {
  color: var(--il-closed);
  background: var(--il-closed-bg);
  border-color: var(--il-closed-border);
}

.il-opening-status--unknown {
  color: var(--il-status-unknown);
  background: var(--il-status-unknown-bg);
  border-color: var(--il-status-unknown-border);
}

/*
 * CSS-only soundbites.
 *
 * Belangrijk:
 * geen animation-fill-mode: both/backwards.
 * Daardoor blijven items met een toekomstige animation-delay werkelijk
 * onzichtbaar en verschijnen ze niet allemaal tegelijk.
 */
.il-bottom-soundbites {
  position: relative;
  display: block;

  min-width: 0;
  min-height: 1.45em;
  overflow: hidden;

  color: var(--il-text-muted, #475569);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.45;
}

.il-bottom-soundbites > .gb-text {
  position: absolute;
  inset: 0;

  display: block !important;
  width: 100%;
  max-width: 100%;
  margin: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;

  animation: il-soundbite-cycle 25s ease-in-out infinite;
}

.il-bottom-soundbites > .gb-text:nth-child(1) { animation-delay: 0s; }
.il-bottom-soundbites > .gb-text:nth-child(2) { animation-delay: 5s; }
.il-bottom-soundbites > .gb-text:nth-child(3) { animation-delay: 10s; }
.il-bottom-soundbites > .gb-text:nth-child(4) { animation-delay: 15s; }
.il-bottom-soundbites > .gb-text:nth-child(5) { animation-delay: 20s; }

@keyframes il-soundbite-cycle {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }

  2%,
  17% {
    opacity: 1;
    transform: translateY(0);
  }

  20%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* ==========================================================================
   3. CONTEXTUELE ACTIES
   ========================================================================== */

.il-bottombar__actions {
  min-width: 0;
  width: 100%;
}

.il-bottombar__ctx {
  display: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  gap: clamp(.4rem, .75vw, .7rem);
}

body.home .il-bottombar__ctx--home,
body.woocommerce.archive .il-bottombar__ctx--archive,
body.single-product .il-bottombar__ctx--product {
  display: grid;
  align-items: stretch;
}

body.home .il-bottombar__ctx--home {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.woocommerce.archive .il-bottombar__ctx--archive {
  grid-template-columns: minmax(0, 1fr);
}

body.single-product .il-bottombar__ctx--product {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.il-bottombar .il-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  margin: 0;
  padding: .62rem .85rem;

  border-width: 1px;
  border-style: solid;
  border-radius: 8px;

  font-size: .8rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: normal;

  box-shadow: none;
  transform: none;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.il-bottombar button.il-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
}

.il-bottombar .il-btn--primary {
  color: #fff !important;
  background: var(--il-accent, #0067c3);
  border-color: var(--il-accent, #0067c3);
}

.il-bottombar .il-btn--primary:hover,
.il-bottombar .il-btn--primary:focus-visible {
  color: #fff !important;
  background: var(--il-blue, #275da5);
  border-color: var(--il-blue, #275da5);
  box-shadow: 0 3px 10px rgba(0, 103, 195, .16);
}

.il-bottombar .il-btn--secondary {
  color: var(--il-contrast, #0e1e42) !important;
  background: #fff;
  border-color: var(--il-border, #e5e5e5);
}

.il-bottombar .il-btn--secondary:hover,
.il-bottombar .il-btn--secondary:focus-visible {
  color: var(--il-blue, #275da5) !important;
  background: var(--il-surface, #f9f9f9);
  border-color: var(--il-blue, #275da5);
  box-shadow: 0 3px 10px rgba(14, 30, 66, .08);
}

.il-bottombar .il-btn:focus-visible {
  outline: 2px solid var(--il-accent, #0067c3);
  outline-offset: 2px;
}

/* ==========================================================================
   4. TABLET
   ========================================================================== */

@media (max-width: 900px) {
  .il-bottombar {
    padding-top: .45rem;
  }

  .il-bottombar__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: .45rem;
  }

  .il-bottombar__meta {
    gap: .7rem;
  }

  body.single-product .il-bottombar__ctx--product {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   5. MOBIEL
   ========================================================================== */

@media (max-width: 560px) {
  :root {
    --il-bottombar-h: 94px;
  }

  .il-bottombar {
    padding:
      .42rem
      max(.55rem, var(--safe-right, 0px))
      max(.42rem, var(--safe-bottom, 0px))
      max(.55rem, var(--safe-left, 0px));

    box-shadow: 0 -4px 16px rgba(14, 30, 66, .07);
  }

  /*
   * Status en soundbite blijven op één regel.
   * De soundbite wordt dus niet meer op mobiel verborgen of naar een
   * afzonderlijke, hoge rij verplaatst.
   */
  .il-bottombar__meta {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .55rem;
    min-height: 26px;
  }

  .il-opening-status {
    min-height: 24px;
    padding: .27rem .5rem;
    gap: .34rem;
    font-size: .7rem;
  }

  .il-opening-status__dot {
    width: .43rem;
    height: .43rem;
    flex-basis: .43rem;
  }

  /*
   * De volledige servertekst blijft in het title-attribuut beschikbaar.
   * Visueel tonen we op mobiel alleen de toestand.
   */
  .il-opening-status__text {
    display: none;
  }

  .il-opening-status[data-state="open"]::after {
    content: "Open";
  }

  .il-opening-status[data-state="closed"]::after {
    content: "Gesloten";
  }

  .il-opening-status[data-state="unknown"]::after {
    content: "Status";
  }

  .il-bottom-soundbites {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 1.35em;
    font-size: .7rem;
    line-height: 1.35;
    text-align: left;
  }

  .il-bottombar__inner {
    gap: .4rem;
  }

  .il-bottombar__ctx {
    gap: .4rem;
  }

  body.home .il-bottombar__ctx--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.woocommerce.archive .il-bottombar__ctx--archive {
    grid-template-columns: minmax(0, 1fr);
  }

  body.single-product .il-bottombar__ctx--product {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .il-bottombar .il-btn {
    min-height: 39px;
    padding: .52rem .5rem;
    border-radius: 7px;
    font-size: .72rem;
  }
}

@media (max-width: 360px) {
  .il-bottombar__meta {
    gap: .4rem;
  }

  .il-opening-status {
    padding-inline: .42rem;
  }

  .il-bottom-soundbites {
    font-size: .66rem;
  }

  .il-bottombar .il-btn {
    font-size: .68rem;
  }
}

/* ==========================================================================
   6. PRODUCTPAGINA — CANONIEKE SCROLL- EN STATUSVARIANT
   --------------------------------------------------------------------------
   Gedrag op body.single-product:
   - vóór 140px scroll: bottombar onzichtbaar;
   - daarna: rustige fade/slide-in;
   - desktop/tablet: Offerte, Vraag stellen, Inruilen;
   - Bellen alleen wanneer de openingstatus 'open' is;
   - mobiel t/m 767px: alleen Open/Gesloten + soundbite.
   Vereist: il-bottombar-product-state.js.
   ========================================================================== */

/*
 * De bar blijft display:block zodat opacity en transform kunnen animeren.
 * Alleen productpagina's krijgen de scrollafhankelijke zichtbaarheid.
 */
body.single-product .il-bottombar {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;

  transition:
    opacity .55s ease,
    transform .55s ease,
    visibility 0s linear .55s;
}

body.single-product.il-bottombar--visible .il-bottombar {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* Bellen standaard verbergen. */
body.single-product .il-business-phone {
  display: none !important;
}

/* Bellen alleen beschikbaar wanneer de zaak geopend is. */
body.single-product.il-bottombar-is-open .il-business-phone {
  display: inline-flex !important;
}

/*
 * Desktop en tablet:
 * gesloten = 3 acties;
 * geopend = 4 acties.
 */
@media (min-width: 768px) {
  body.single-product .il-bottombar__ctx--product {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.single-product.il-bottombar-is-open .il-bottombar__ctx--product {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.single-product .il-product-offerte,
  body.single-product .il-product-vraag,
  body.single-product .il-product-inruil {
    display: inline-flex !important;
  }
}

/*
 * Mobiel:
 * geen actieknoppen; uitsluitend status links en soundbite rechts.
 */
@media (max-width: 767px) {
  body.single-product {
    --il-bottombar-h: 48px;
  }

  body.single-product .il-bottombar {
    padding:
      .42rem
      max(.7rem, var(--safe-right, 0px))
      max(.42rem, var(--safe-bottom, 0px))
      max(.7rem, var(--safe-left, 0px));
  }

  body.single-product .il-bottombar__inner {
    display: block !important;
    width: 100%;
    max-width: none;
  }

  body.single-product .il-bottombar__actions,
  body.single-product .il-bottombar__ctx--product {
    display: none !important;
  }

  body.single-product .il-bottombar__meta {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    align-items: center;
    gap: .75rem;

    width: 100%;
    min-width: 0;
    min-height: 28px;
    margin: 0;
  }

  body.single-product .il-bottombar__status-slot {
    display: block !important;
    justify-self: start;
    min-width: 0;
  }

  body.single-product .il-opening-status {
    min-height: 24px;
    padding: .27rem .5rem;
    gap: .34rem;
    font-size: .7rem;
  }

  body.single-product .il-opening-status__dot {
    width: .43rem;
    height: .43rem;
    flex-basis: .43rem;
  }

  body.single-product .il-opening-status__text {
    display: none;
  }

  body.single-product .il-opening-status[data-state="open"]::after {
    content: "Open";
  }

  body.single-product .il-opening-status[data-state="closed"]::after {
    content: "Gesloten";
  }

  body.single-product .il-opening-status[data-state="unknown"]::after {
    content: "Status";
  }

  body.single-product .il-bottom-soundbites {
    display: block !important;
    justify-self: stretch;

    width: 100%;
    min-width: 0;
    min-height: 1.35em;

    font-size: .7rem;
    line-height: 1.35;
    text-align: right;
  }

  body.single-product .il-bottom-soundbites > .gb-text {
    display: block !important;
    text-align: right;
  }
}

/* ==========================================================================
   7. VERMINDER BEWEGING
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .il-bottom-soundbites > .gb-text {
    display: none !important;
    animation: none !important;
    opacity: 0;
    transform: none;
  }

  .il-bottom-soundbites > .gb-text:first-child {
    position: static;
    display: block !important;
    opacity: 1;
  }

  .il-bottombar .il-btn,
  body.single-product .il-bottombar {
    transition: none;
  }
}

/* ==========================================================================
   BOTTOMBAR — aansluiting op globale designtokens
   ========================================================================== */

@media (min-width: 1025px) {
  :root {
    /*
     * Sluit aan op de globale definitie:
     * 48px bediening + verticale ruimte.
     */
    --il-bottombar-h: calc(48px + (2 * var(--gap-s)));
  }

  .il-bottombar {
    padding:
      var(--gap-s)
      max(var(--pad-container), var(--safe-right))
      max(var(--gap-s), var(--safe-bottom))
      max(var(--pad-container), var(--safe-left));

    background: rgba(255, 255, 255, 0.98);
    border-top: var(--border-light);
    box-shadow: var(--shadow-s);
  }

  /*
   * Dezelfde maximale paginabreedte als footer en overige brede content.
   */
  .il-bottombar__inner {
    grid-template-columns:
      minmax(28rem, 0.9fr)
      minmax(44rem, 1.35fr);

    gap: var(--space-m);

    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
  }

  .il-bottombar__meta {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--gap-m);
  }

  .il-opening-status {
    min-height: 36px;
    padding: 0.5rem 0.85rem;

    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
  }

  .il-opening-status__dot {
    width: 0.55rem;
    height: 0.55rem;
    flex-basis: 0.55rem;
  }

  .il-bottom-soundbites {
    min-height: 1.5em;

    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-normal);
  }

  .il-bottombar__ctx {
    gap: var(--gap-s);
  }

  .il-bottombar .il-btn {
    min-height: 48px;
    padding: 0.75rem 1rem;

    border-radius: var(--radius-s);

    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: var(--lh-tight);
  }
}