/* ==========================================================================
   KOMA BUSINESS · cookie consent + privacy preferences
   Markup is injected once by assets/js/consent.js. Every selector is
   namespaced under .koma-consent-* so nothing here reaches page styles.

   Stacking: banner 990 (below the mobile-menu overlay 999 and header 1000,
   so an open menu covers it), Start Now modal 3000, preferences 3100.

   As in the Start Now modal, the backdrop and the dialog are siblings so
   the dialog's backdrop-filter samples the page, not a parent layer.
   ========================================================================== */

.koma-consent-banner,
.koma-consent-modal {
  --kc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kc-green: #019b4e;
  --kc-green-focus: #0aa859;
  --kc-text: #f2f2f2;
  --kc-muted: #9a9aa0;

  font-family: "Inter", sans-serif;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.koma-consent-banner[hidden],
.koma-consent-modal[hidden] {
  display: none;
}

/* Page scroll lock while preferences are open (viewport inherits body overflow) */
body.koma-consent-open {
  overflow: hidden;
}

/* Shared pieces
   ========================================================================== */

.koma-consent-eyebrow {
  margin: 0 0 8px;
  color: var(--kc-green-focus);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.koma-consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 220ms var(--kc-ease),
    border-color 220ms var(--kc-ease),
    color 220ms var(--kc-ease),
    filter 220ms var(--kc-ease);
}

.koma-consent-btn--primary {
  background: var(--kc-green);
  color: #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.koma-consent-btn--secondary {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.koma-consent-btn--text {
  padding: 0 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
}

.koma-consent-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--kc-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: rgba(154, 154, 160, 0.4);
  text-underline-offset: 3px;
  transition: color 200ms var(--kc-ease);
}

.koma-consent-btn:focus-visible,
.koma-consent-link:focus-visible,
.koma-consent-dialog__close:focus-visible {
  outline: 2px solid var(--kc-green-focus);
  outline-offset: 3px;
}

.koma-consent-link:focus-visible {
  border-radius: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .koma-consent-btn--primary:hover {
    filter: brightness(1.08);
  }

  .koma-consent-btn--secondary:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
  }

  .koma-consent-btn--text:hover {
    color: #ffffff;
  }

  .koma-consent-link:hover {
    color: #ffffff;
  }
}

/* First-visit banner
   ========================================================================== */

.koma-consent-banner {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 990;
  width: calc(100% - 48px);
  max-width: 680px;
  color: var(--kc-text);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(1, 155, 78, 0.07), rgba(1, 155, 78, 0) 55%),
    linear-gradient(180deg, rgba(18, 28, 26, 0.74) 0%, rgba(8, 13, 12, 0.84) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px -18px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition:
    opacity 260ms var(--kc-ease),
    transform 260ms var(--kc-ease);
}

.koma-consent-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-duration: 400ms;
}

.koma-consent-banner__inner {
  padding: 24px 26px 18px;
}

.koma-consent-banner__title {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.koma-consent-banner__text {
  margin: 0;
  color: var(--kc-muted);
  font-size: 14px;
  line-height: 1.55;
}

.koma-consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 18px;
}

.koma-consent-banner__choices,
.koma-consent-banner__more {
  display: flex;
  align-items: center;
  gap: 8px;
}

.koma-consent-banner__more {
  gap: 4px;
  margin-right: -4px;
}

/* Preferences dialog
   ========================================================================== */

.koma-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
}

.koma-consent-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 9, 8, 0.5);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
  opacity: 0;
  transition: opacity 240ms var(--kc-ease);
}

.koma-consent-modal.is-open .koma-consent-modal__backdrop {
  opacity: 1;
  transition-duration: 280ms;
}

/* Centering layer: presses that start and end here close the dialog */
.koma-consent-modal__viewport {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    16px
    calc(12px + env(safe-area-inset-bottom, 0px));
}

.koma-consent-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  color: var(--kc-text);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(1, 155, 78, 0.08), rgba(1, 155, 78, 0) 62%),
    linear-gradient(180deg, rgba(22, 34, 31, 0.46) 0%, rgba(8, 14, 13, 0.58) 100%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 30px 80px -12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px) scale(0.995);
  transition:
    opacity 220ms var(--kc-ease),
    transform 260ms var(--kc-ease);
}

.koma-consent-modal.is-open .koma-consent-dialog {
  opacity: 1;
  transform: none;
  transition-duration: 360ms, 400ms;
}

.koma-consent-dialog:focus {
  outline: none;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .koma-consent-banner {
    background: linear-gradient(180deg, rgba(16, 24, 22, 0.97) 0%, rgba(8, 12, 11, 0.98) 100%);
  }

  .koma-consent-modal__backdrop {
    background: rgba(3, 9, 8, 0.78);
  }

  .koma-consent-dialog {
    background:
      radial-gradient(120% 70% at 50% -10%, rgba(1, 155, 78, 0.09), rgba(1, 155, 78, 0) 62%),
      linear-gradient(180deg, rgba(18, 26, 24, 0.95) 0%, rgba(8, 12, 11, 0.97) 100%);
  }
}

.koma-consent-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition:
    background-color 200ms var(--kc-ease),
    color 200ms var(--kc-ease),
    border-color 200ms var(--kc-ease);
}

.koma-consent-dialog__close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  fill: none;
}

@media (hover: hover) and (pointer: fine) {
  .koma-consent-dialog__close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
  }
}

/* Scrolls internally on short screens; close button and actions stay put */
.koma-consent-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 34px 34px 22px;
}

.koma-consent-dialog__title {
  margin: 0 0 10px;
  padding-right: 40px;
  color: #ffffff;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.koma-consent-dialog__intro {
  margin: 0;
  color: var(--kc-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.koma-consent-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.koma-consent-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name control"
    "desc desc";
  align-items: center;
  column-gap: 16px;
  padding: 10px 14px 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.36) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.koma-consent-category__name {
  grid-area: name;
  margin: 0;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.koma-consent-category__desc {
  grid-area: desc;
  margin: 2px 0 0;
  padding-right: 4px;
  color: var(--kc-muted);
  font-size: 14px;
  line-height: 1.55;
}

.koma-consent-category__control {
  grid-area: control;
  display: flex;
  align-items: center;
  gap: 8px;
}

.koma-consent-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.koma-consent-status svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Switch: a real checkbox (role="switch") laid over a 44×44 hit area */
.koma-consent-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 44px;
  flex: none;
}

.koma-consent-toggle input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.koma-consent-toggle input:disabled {
  cursor: not-allowed;
}

.koma-consent-toggle__track {
  position: relative;
  width: 44px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  transition:
    background-color 220ms var(--kc-ease),
    border-color 220ms var(--kc-ease);
}

.koma-consent-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #cfcfd3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition:
    transform 240ms var(--kc-ease),
    background-color 220ms var(--kc-ease);
}

.koma-consent-toggle input:checked + .koma-consent-toggle__track {
  border-color: rgba(1, 155, 78, 0.9);
  background: var(--kc-green);
}

.koma-consent-toggle input:checked + .koma-consent-toggle__track::after {
  background: #ffffff;
  transform: translateX(18px);
}

.koma-consent-toggle input:focus-visible + .koma-consent-toggle__track {
  outline: 2px solid var(--kc-green-focus);
  outline-offset: 3px;
}

/* Locked (Essential): visibly on, visibly not adjustable */
.koma-consent-toggle input:disabled + .koma-consent-toggle__track {
  border-color: rgba(1, 155, 78, 0.35);
  background: rgba(1, 155, 78, 0.32);
}

.koma-consent-toggle input:disabled + .koma-consent-toggle__track::after {
  background: rgba(255, 255, 255, 0.62);
}

@media (hover: hover) and (pointer: fine) {
  .koma-consent-toggle input:not(:disabled):not(:checked):hover + .koma-consent-toggle__track {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.14);
  }
}

.koma-consent-dialog__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 34px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.koma-consent-dialog__actions [data-consent-action="save"] {
  margin-left: auto;
}

/* Footer "Cookie preferences" trigger: matches .site-footer__nav a
   ========================================================================== */

.koma-consent-footer-link {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-footer, #a6a6a6);
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .koma-consent-footer-link:hover {
    color: var(--text-bright, #ffffff);
  }
}

/* Mobile: tuned separately, not a scaled-down desktop
   ========================================================================== */

@media (max-width: 600px) {
  .koma-consent-banner {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 24px);
    border-radius: 18px;
  }

  .koma-consent-banner__inner {
    padding: 16px 16px 8px;
  }

  .koma-consent-eyebrow {
    margin-bottom: 6px;
    font-size: 10.5px;
  }

  .koma-consent-banner__title {
    margin-bottom: 4px;
    font-size: 17px;
  }

  .koma-consent-banner__text {
    font-size: 13px;
    line-height: 1.5;
  }

  .koma-consent-banner__actions {
    display: block;
    margin-top: 14px;
  }

  .koma-consent-banner__choices .koma-consent-btn {
    flex: 1 1 auto;
    padding: 0 14px;
  }

  .koma-consent-banner__more {
    justify-content: space-between;
    margin: 4px -4px 0 -12px;
  }

  .koma-consent-modal__viewport {
    padding-left: 12px;
    padding-right: 12px;
  }

  .koma-consent-dialog {
    border-radius: 20px;
  }

  .koma-consent-dialog__close {
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
  }

  .koma-consent-dialog__body {
    padding: 22px 16px 16px;
  }

  .koma-consent-dialog__title {
    margin-bottom: 8px;
    padding-right: 44px;
    font-size: 24px;
  }

  .koma-consent-dialog__intro {
    font-size: 13.5px;
    line-height: 1.5;
  }

  .koma-consent-categories {
    gap: 8px;
    margin-top: 16px;
  }

  .koma-consent-category {
    column-gap: 10px;
    padding: 6px 8px 12px 14px;
    border-radius: 14px;
  }

  .koma-consent-category__desc {
    margin-top: 0;
    font-size: 13px;
    line-height: 1.5;
  }

  .koma-consent-dialog__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 16px 16px;
  }

  .koma-consent-dialog__actions .koma-consent-btn {
    padding: 0 12px;
  }

  .koma-consent-dialog__actions [data-consent-action="save"] {
    grid-column: 1 / -1;
    margin-left: 0;
  }
}

/* Narrow phones: the two banner choices stack rather than squeeze */
@media (max-width: 340px) {
  .koma-consent-banner__choices {
    flex-direction: column;
    align-items: stretch;
  }

  .koma-consent-dialog__actions {
    grid-template-columns: 1fr;
  }
}

/* Short phones (e.g. 375×667): tighten vertical rhythm */
@media (max-width: 600px) and (max-height: 700px) {
  .koma-consent-dialog__body {
    padding-top: 18px;
  }

  .koma-consent-dialog__title {
    font-size: 22px;
  }

  .koma-consent-categories {
    margin-top: 14px;
  }
}

/* Reduced motion: appear/disappear without movement
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .koma-consent-banner,
  .koma-consent-banner.is-visible {
    transform: translate(-50%, 0);
    transition: none;
  }

  .koma-consent-modal__backdrop,
  .koma-consent-dialog,
  .koma-consent-modal.is-open .koma-consent-modal__backdrop,
  .koma-consent-modal.is-open .koma-consent-dialog {
    transform: none;
    transition: none;
  }

  .koma-consent-btn,
  .koma-consent-link,
  .koma-consent-dialog__close,
  .koma-consent-toggle__track,
  .koma-consent-toggle__track::after {
    transition: none;
  }
}