/* Darmklachten Coupon Banner 1.3.2. All visual rules are component-scoped.
   Desktop: original one-row design. Tablet and phones: compact two-row layouts.
   No modifications to theme header, shop cards, or document typography. */
.dkcb-banner {
  --dkcb-ink:#073e52;
  position:fixed;
  top:0;left:0;right:0;
  z-index:99990;
  width:100%;box-sizing:border-box;
  background:linear-gradient(100deg,#e9f8f7 0%,#f5fbfc 50%,#e3f5f7 100%);
  border-bottom:1px solid #d6ecef;
  color:var(--dkcb-ink);
  font:inherit;font-size:14px;line-height:1.4;
}
.dkcb-banner *, .dkcb-banner *::before, .dkcb-banner *::after{box-sizing:border-box}
.dkcb-banner .dkcb-inner{
  position:relative;max-width:1320px;margin:0 auto;min-height:58px;
  padding:8px 46px 8px 38px;display:flex;align-items:center;
  justify-content:center;gap:13px;flex-wrap:wrap;
}
.dkcb-banner .dkcb-symbol{
  flex:0 0 36px;width:36px;height:36px;display:inline-flex;
  justify-content:center;align-items:center;border-radius:50%;background:#d0f0f0;color:#118c9c;
}
.dkcb-banner .dkcb-message{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:5px 7px;min-width:0}
.dkcb-banner .dkcb-heading{font-size:15px;font-weight:700;color:#063f53}
.dkcb-banner .dkcb-description{font-size:14px;color:#244f62}
.dkcb-banner .dkcb-code{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 9px;border:1px dashed #91cdd5;background:rgba(255,255,255,.75);
  border-radius:9px;color:#0a556b;cursor:pointer;font:inherit;font-size:12px;
  line-height:1.25;white-space:nowrap;min-width:0;
}
.dkcb-banner .dkcb-code-value{font-weight:700;letter-spacing:.035em;font-size:13px;min-width:0}
.dkcb-banner .dkcb-code svg{opacity:.65;flex:none}
.dkcb-banner .dkcb-timer{display:flex;align-items:center;gap:8px;white-space:nowrap}
.dkcb-banner .dkcb-timer-label{font-size:12px;color:#477381}
.dkcb-banner .dkcb-clock{
  display:inline-flex;min-width:96px;justify-content:center;padding:8px 10px;
  background:#fff;border:1px solid #d5e7ec;border-radius:8px;
  box-shadow:0 2px 8px rgba(26,100,117,.07);color:#094457;
  font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.045em;
}
.dkcb-banner .dkcb-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:0;
  padding:10px 19px;border-radius:999px;background:#07546b;color:#fff!important;
  text-decoration:none!important;font:inherit;font-size:13px;font-weight:700;
  white-space:nowrap;transition:background .15s ease;
}
.dkcb-banner .dkcb-cta-text{min-width:0}
.dkcb-banner .dkcb-cta:hover,.dkcb-banner .dkcb-cta:focus-visible{background:#08718b;color:#fff!important}
.dkcb-banner .dkcb-close{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0!important;margin:0;border:0;
  background:transparent;color:#6b8695;border-radius:50%;
  line-height:1!important;cursor:pointer;box-shadow:none;
}
.dkcb-banner .dkcb-close svg{display:block;flex:none;width:18px;height:18px}
.dkcb-banner .dkcb-close:hover{background:rgba(0,0,0,.05);color:#1d4b60;box-shadow:none}
.dkcb-banner .dkcb-code:focus-visible,.dkcb-banner .dkcb-close:focus-visible,.dkcb-banner .dkcb-cta:focus-visible{outline:2px solid #007b99;outline-offset:2px}
.dkcb-banner .dkcb-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Tablet, from 701px to 1100px: offer on line one, controls on line two. */
@media (min-width:701px) and (max-width:1100px){
  .dkcb-banner .dkcb-inner{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto auto 32px;
    grid-template-areas:
      "icon message message message close"
      ". code timer cta .";
    justify-content:stretch;align-items:center;
    gap:6px 10px;min-height:0;padding:9px 18px;
  }
  .dkcb-banner .dkcb-symbol{grid-area:icon;width:30px;height:30px;flex-basis:auto;justify-self:start}
  .dkcb-banner .dkcb-message{grid-area:message;justify-content:flex-start;min-width:0;gap:3px 6px}
  .dkcb-banner .dkcb-code{grid-area:code;justify-self:start}
  .dkcb-banner .dkcb-timer{grid-area:timer;justify-self:end}
  .dkcb-banner .dkcb-cta{grid-area:cta;justify-self:end;padding:8px 15px}
  .dkcb-banner .dkcb-close{grid-area:close;position:static;transform:none;justify-self:center;align-self:center}
  .dkcb-banner .dkcb-heading{font-size:14px}
  .dkcb-banner .dkcb-description{font-size:13px}
  .dkcb-banner .dkcb-clock{font-size:14px;padding:6px 8px}
}

/* Phones: exactly two compact rows. Keep actionable coupon, timer, and CTA. */
@media (max-width:700px){
  .dkcb-banner .dkcb-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:
      "message message close"
      "code timer cta";
    justify-content:stretch;align-items:center;
    column-gap:7px;row-gap:7px;min-height:0;
    padding:9px 12px 10px;
  }
  .dkcb-banner .dkcb-symbol{display:none}
  .dkcb-banner .dkcb-message{
    grid-area:message;display:block;justify-content:flex-start;
    min-width:0;max-height:2.85em;overflow:hidden;
    font-size:13px;line-height:1.38;
  }
  .dkcb-banner .dkcb-heading{display:inline;font-size:13px;line-height:inherit}
  .dkcb-banner .dkcb-heading::after{content:' '}
  .dkcb-banner .dkcb-description{display:inline;font-size:12.5px;line-height:inherit}
  .dkcb-banner .dkcb-close{
    grid-area:close;position:static;transform:none;
    justify-self:end;align-self:start;width:26px;height:26px;
  }
  .dkcb-banner .dkcb-close svg{width:17px;height:17px}
  .dkcb-banner .dkcb-code{
    grid-area:code;justify-self:stretch;min-width:0;width:100%;max-width:100%;
    padding:7px 8px;gap:5px;min-height:33px;border-radius:8px;
  }
  .dkcb-banner .dkcb-code-value{
    display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:12px;letter-spacing:0;
  }
  .dkcb-banner .dkcb-code svg{width:13px;height:13px}
  .dkcb-banner .dkcb-timer{grid-area:timer;justify-self:end;min-width:0}
  .dkcb-banner .dkcb-timer-label{display:none}
  .dkcb-banner .dkcb-clock{
    min-width:0;padding:7px 6px;min-height:33px;
    box-shadow:none;font-size:12px;font-weight:700;
    letter-spacing:0;border-radius:8px;
  }
  .dkcb-banner .dkcb-cta{
    grid-area:cta;justify-self:end;min-height:33px;
    max-width:100%;padding:7px 10px;gap:5px;font-size:11.5px;
    line-height:1.25;
  }
  .dkcb-banner .dkcb-cta-text{
    display:block;min-width:0;max-width:100px;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis;
  }
  .dkcb-banner .dkcb-cta-arrow{flex:none}
}
@media (max-width:370px){
  .dkcb-banner .dkcb-inner{padding:8px 9px;column-gap:5px;row-gap:6px}
  .dkcb-banner .dkcb-code{padding:6px 5px;gap:3px}
  .dkcb-banner .dkcb-code-value{font-size:11px}
  .dkcb-banner .dkcb-clock{padding:6px 4px;font-size:11px}
  .dkcb-banner .dkcb-cta{padding:6px 7px;gap:3px;font-size:11px}
  .dkcb-banner .dkcb-cta-text{max-width:78px}
}
@media(prefers-reduced-motion:reduce){.dkcb-banner .dkcb-cta{transition:none}}

/* The script sets the spacer height based on actual responsive banner height. */
.dkcb-banner[hidden]{display:none!important}
.dkcb-spacer{display:block;width:100%;height:0;pointer-events:none}