/* Pack Lightly Affiliate Bar. Brand tokens: teal #124F53, orange #F29B07,
   cream #FCEACF. Bricolage Grotesque (display) / Poppins (UI) / Karla (body),
   loaded site-wide by the theme. Prefix: .plab-

   The fixed position and the safe margin live inline on the element in bar.js,
   not here, so a stale LiteSpeed UCSS build can never strip them and leave the
   bar sitting in the middle of the page. See wordpress-cache-layers.md 3b. */

:root {
  --plab-teal:        #124F53;
  --plab-teal-dark:   #0d3d40;
  --plab-orange:      #F29B07;
  --plab-orange-dark: #d98905;
  --plab-cream:       #FCEACF;
  --plab-ink:         #1a1a1a;
  --plab-muted:       #5b6b69;
  --plab-radius:      16px;

  /* The chat widget is lifted above the bar on every viewport rather than the
     bar reserving space for it. Reserving 225px on desktop still left the chat
     pill drawn on top of the cream band, and on mobile it left ~116px for
     copy, which is not a bar. Lifting solves both and keeps one rule. */
  --plab-safe-right: 24px;
  --plab-fab-lift:   72px;
}

.plab-bar, .plab-bar * { box-sizing: border-box; }

.plab-bar {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  transform: translateY(120%);
  transition: transform .28s cubic-bezier(.16,.84,.44,1);
  will-change: transform;
}
.plab-bar.plab-in { transform: translateY(0); }
.plab-bar[hidden] { display: none !important; }

.plab-bar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 56px;
  padding: 8px 16px;
  padding-right: var(--plab-safe-right);
}

.plab-bar__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
}
.plab-bar__icon svg { width: 18px; height: 18px; }

.plab-bar__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Verplichte kenmerking. Klein maar altijd zichtbaar, want dit is het enige
   wat de lezer vertelt dat de knop betaald is: rel="sponsored" staat wel op de
   knop maar de bestemming zit in data-plab-href, dus die rel is uitsluitend een
   signaal voor Google. Eigen regel boven het label in plaats van in de zin,
   zodat hij niet meetelt in de twee regels die het label op mobiel heeft. */
.plab-bar__ad {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .62;
}

.plab-bar__label {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plab-bar__sub {
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Eigen regel voor de actie, zichtbaar op mobiel en desktop. Verschijnt en
   verdwijnt met de actie zelf, zodat een verlopen code geen gat in een zin
   achterlaat. */
.plab-bar__promo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
}
.plab-bar__terms {
  font-size: 11px;
  font-weight: 400;
  opacity: .7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The promo code sits inside the sentence, not in a box beside it. Only the
   code itself gets emphasis so it stays scannable without its own container. */
.plab-bar__code {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 5px;
}

/* Kopieerbaar. Een code die overgetypt moet worden wordt gegoogeld, en dan
   pakt een couponsite de last-click op je eigen bezoeker. */
.plab-bar__code--copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  position: relative;
  user-select: all;
}
.plab-bar__code--copy svg {
  width: 11px;
  height: 11px;
  opacity: .7;
  flex: 0 0 auto;
}
.plab-bar__code--copy:hover svg { opacity: 1; }

/* Bevestiging na het kopieren. Puur CSS via een class die 1,6s blijft staan,
   zodat er geen tweede stukje tekst uit de config hoeft te komen. */
.plab-bar__code--copy.plab-copied::after {
  content: 'copied';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--plab-teal);
  color: var(--plab-cream);
  white-space: nowrap;
  pointer-events: none;
}

.plab-bar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Anti-theme specificity: Astra styles bare <a> inside content wrappers.
   These are overlay controls, so visibility properties are forced. */
.plab-bar .plab-bar__cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--plab-orange) !important;
  color: #241700 !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.plab-bar .plab-bar__cta:hover {
  background: var(--plab-orange-dark) !important;
  transform: translateY(-1px);
}
.plab-bar__cta svg { width: 15px; height: 15px; }

/* Second action (destination pages: sleep AND do). Secondary in weight so there
   is still exactly one accent per frame. */
.plab-bar .plab-bar__cta--secondary {
  background: transparent !important;
  border: 1.5px solid currentColor;
  font-weight: 600;
}
.plab-bar .plab-bar__cta--secondary:hover { background: rgba(0,0,0,.06) !important; }

.plab-bar__close {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  opacity: .5;
  transition: opacity .15s ease, background .15s ease;
}
.plab-bar__close:hover { opacity: 1; background: rgba(0,0,0,.07); }
.plab-bar__close svg { width: 15px; height: 15px; }

/* ---------- style: cream (default) ---------- */
.plab-bar--cream { background: var(--plab-cream); border-top: 1px solid #ecd9b8; box-shadow: 0 -6px 24px rgba(18,79,83,.10); }
.plab-bar--cream .plab-bar__icon { background: rgba(18,79,83,.10); color: var(--plab-teal); }
.plab-bar--cream .plab-bar__label { color: var(--plab-teal); }
.plab-bar--cream .plab-bar__sub { color: #6b6151; }
.plab-bar--cream .plab-bar__ad { color: #8a7d68; }
.plab-bar--cream .plab-bar__promo { color: #6b4a08; }
.plab-bar--cream .plab-bar__code { background: var(--plab-teal); color: var(--plab-cream); }
.plab-bar--cream .plab-bar__cta--secondary { color: var(--plab-teal) !important; }
.plab-bar--cream .plab-bar__close { color: var(--plab-teal); }

/* ---------- style: teal ---------- */
.plab-bar--teal { background: var(--plab-teal); box-shadow: 0 -6px 24px rgba(18,79,83,.20); }
.plab-bar--teal .plab-bar__icon { background: rgba(252,234,207,.16); color: var(--plab-cream); }
.plab-bar--teal .plab-bar__label { color: #fff; }
.plab-bar--teal .plab-bar__sub { color: rgba(252,234,207,.80); }
.plab-bar--teal .plab-bar__ad { color: rgba(252,234,207,.72); }
.plab-bar--teal .plab-bar__promo { color: var(--plab-cream); }
.plab-bar--teal .plab-bar__code { background: rgba(252,234,207,.18); color: #fff; }
.plab-bar--teal .plab-bar__cta--secondary { color: var(--plab-cream) !important; }
.plab-bar--teal .plab-bar__cta--secondary:hover { background: rgba(255,255,255,.12) !important; }
.plab-bar--teal .plab-bar__close { color: var(--plab-cream); }
.plab-bar--teal .plab-bar__close:hover { background: rgba(255,255,255,.14); }

/* ---------- style: white ---------- */
.plab-bar--white { background: #fff; border-top: 2px solid var(--plab-teal); box-shadow: 0 -8px 28px rgba(18,79,83,.13); }
.plab-bar--white .plab-bar__icon { background: var(--plab-cream); color: var(--plab-teal); }
.plab-bar--white .plab-bar__label { color: var(--plab-teal); }
.plab-bar--white .plab-bar__sub { color: var(--plab-muted); }
.plab-bar--white .plab-bar__ad { color: var(--plab-muted); }
.plab-bar--white .plab-bar__promo { color: #6b4a08; }
.plab-bar--white .plab-bar__code { background: var(--plab-cream); color: #6b4a08; }
.plab-bar--white .plab-bar__cta--secondary { color: var(--plab-teal) !important; }
.plab-bar--white .plab-bar__close { color: var(--plab-muted); }

/* ---------- style: pill ---------- */
.plab-bar--pill { padding: 0 16px 16px; background: transparent; }
.plab-bar--pill .plab-bar__inner {
  background: var(--plab-teal-dark);
  border-radius: var(--plab-radius);
  padding: 8px 14px 8px 12px;
  min-height: 56px;
  max-width: 1000px;
  margin: 0 auto 0 0;
  box-shadow: 0 14px 40px rgba(13,61,64,.34);
}
@media (min-width: 861px) {
  .plab-bar--pill .plab-bar__inner { max-width: min(1000px, calc(100vw - 32px - var(--plab-safe-right))); }
}
.plab-bar--pill .plab-bar__icon { background: rgba(252,234,207,.14); color: var(--plab-cream); }
.plab-bar--pill .plab-bar__label { color: #fff; }
.plab-bar--pill .plab-bar__sub { color: rgba(252,234,207,.75); }
.plab-bar--pill .plab-bar__ad { color: rgba(252,234,207,.70); }
.plab-bar--pill .plab-bar__promo { color: var(--plab-cream); }
.plab-bar--pill .plab-bar__code { background: rgba(252,234,207,.18); color: #fff; }
.plab-bar--pill .plab-bar__cta--secondary { color: var(--plab-cream) !important; }
.plab-bar--pill .plab-bar__cta--secondary:hover { background: rgba(255,255,255,.12) !important; }
.plab-bar--pill .plab-bar__close { color: var(--plab-cream); }
.plab-bar--pill .plab-bar__close:hover { background: rgba(255,255,255,.14); }

/* ============================================================
   Mobile. The bar takes the full width; the chat FAB is lifted
   above it for as long as it is on screen. Reserving 88px on the
   right instead leaves ~116px for text, which is not enough for a
   headline or a thumb-sized button.
   ============================================================ */

.plab-narrow { display: none; }

@media (max-width: 860px) {
  .plab-bar__inner {
    padding: 9px 12px;
    gap: 10px;
    min-height: 60px;
  }
  .plab-bar__icon,
  .plab-wide { display: none; }
  .plab-narrow { display: inline; }

  /* Harde cap van twee regels. De subregel valt op mobiel helemaal weg: label
     plus subregel liep in de praktijk op tot vier regels en dan is de bar geen
     balk meer maar een blok. Alles wat op mobiel gezegd moet worden, inclusief
     een actiecode, hoort dus in label_mobile. */
  .plab-bar__sub { display: none; }
  .plab-bar__ad { font-size: 8px; letter-spacing: .08em; }
  .plab-bar__terms { display: none; }
  .plab-bar__promo { font-size: 11.5px; margin-top: 2px; }
  .plab-bar__label {
    font-size: 14px;
    white-space: normal;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 44px is the floor for a thumb target. */
  .plab-bar .plab-bar__cta { min-height: 44px; padding: 11px 18px; font-size: 14px; }
  .plab-bar__cta svg { display: none; }
  .plab-bar .plab-bar__cta--secondary { padding: 11px 14px; }

  .plab-bar__close {
    width: 40px;
    height: 44px;
    border-radius: 8px;
    margin-left: 2px;
    position: relative;
  }
  .plab-bar__close::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: currentColor;
    opacity: .22;
  }
  .plab-bar__close svg { width: 16px; height: 16px; }

  .plab-bar--pill { padding: 0 6px 8px; }
  .plab-bar--pill .plab-bar__inner { max-width: 100%; padding: 8px 8px 8px 10px; }

}

/* Lift the chat widget above the bar, on every viewport. #plcb-root is the
   chatbot plugin's fixed root. */
body.plab-open #plcb-root {
  transform: translateY(calc(-1 * var(--plab-fab-lift)));
  transition: transform .28s cubic-bezier(.16,.84,.44,1);
}
/* An open chat panel takes over the screen, so it must not be pushed. */
body.plab-open #plcb-root.plcb-open { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .plab-bar,
  body.plab-open #plcb-root { transition: none; }
  .plab-bar .plab-bar__cta:hover { transform: none; }
}