/* ============================================================================
   Worklane — Cookie Consent banner override
   Target plugin: beautiful-and-responsive-cookie-consent (cookieconsent.js)
   Markup: .cc-window.cc-banner .cc-type-opt-in .cc-theme-block .cc-bottom

   The plugin injects an inline `style` attribute with palette colors onto
   .cc-window — override everything with !important where specificity alone
   is insufficient. All values use design-token aliases from global.css.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. CONTAINER — fixed bottom bar, dark surface
   -------------------------------------------------------------------------- */
.cc-window.cc-banner {
  /* Reset plugin inline palette overrides */
  background: var(--color-base-elevated) !important;
  color: var(--color-contrast-muted) !important;
  border-color: var(--color-neutral-strong) !important;

  /* Layout */
  position: fixed !important;
  bottom: var(--spacing-50) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;

  /* Sizing */
  width: min(100% - 2.5rem, 40rem) !important;
  max-width: 40rem !important;

  /* Surface */
  border: 1px solid var(--color-neutral-strong) !important;
  border-radius: calc(var(--radius-md) * var(--radius-scale)) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: var(--spacing-50) !important;

  /* Inner layout — message + buttons row */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--spacing-40) !important;

  /* Typography reset */
  font-family: var(--font-sans) !important;
  font-size: var(--font-size-sm) !important;
  line-height: var(--lh-normal) !important;
}

/* --------------------------------------------------------------------------
   2. MESSAGE — body text + privacy link
   -------------------------------------------------------------------------- */
.cc-window.cc-banner .cc-message {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: var(--color-contrast-muted) !important;
  font-size: var(--font-size-sm) !important;
  line-height: var(--lh-relaxed) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Privacy Policy link inside the message */
.cc-window.cc-banner .cc-message .cc-link {
  color: var(--color-accent-1) !important;
  text-decoration: none !important;
  font-weight: var(--fw-medium) !important;
  transition: color var(--transition) !important;
}
.cc-window.cc-banner .cc-message .cc-link:hover {
  color: var(--color-accent-1-hover) !important;
  text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   3. BUTTON AREA — flex row, wrap at mobile
   -------------------------------------------------------------------------- */
.cc-window.cc-banner .cc-compliance {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--spacing-20) !important;
  flex: none !important;
}

/* --------------------------------------------------------------------------
   4. BUTTON BASE — shared reset for both cc-allow and cc-deny
   -------------------------------------------------------------------------- */
.cc-window.cc-banner .cc-btn {
  /* Reset plugin base */
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: calc(var(--radius-md) * var(--radius-scale)) !important;
  color: inherit !important;
  box-shadow: none !important;

  /* Worklane button geometry */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.25rem !important;
  padding: 0 var(--spacing-40) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: 1 !important;
  letter-spacing: var(--tracking-snug) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition) !important;
}
.cc-window.cc-banner .cc-btn:active {
  transform: translateY(1px) !important;
}

/* --------------------------------------------------------------------------
   5. ACCEPT (PRIMARY — emerald filled)
   -------------------------------------------------------------------------- */
.cc-window.cc-banner .cc-btn.cc-allow {
  background: var(--color-accent-1) !important;
  color: var(--color-accent-on) !important;
  border-color: var(--color-accent-1) !important;
}
.cc-window.cc-banner .cc-btn.cc-allow:hover {
  background: var(--color-accent-1-hover) !important;
  border-color: var(--color-accent-1-hover) !important;
}
.cc-window.cc-banner .cc-btn.cc-allow:active {
  background: var(--color-accent-1-active) !important;
  border-color: var(--color-accent-1-active) !important;
}

/* --------------------------------------------------------------------------
   6. DECLINE (GHOST — secondary / reject non-essential)
   -------------------------------------------------------------------------- */
.cc-window.cc-banner .cc-btn.cc-deny {
  background: transparent !important;
  color: var(--color-contrast-muted) !important;
  border-color: var(--color-neutral-strong) !important;
}
.cc-window.cc-banner .cc-btn.cc-deny:hover {
  color: var(--color-contrast) !important;
  background: var(--color-surface-2) !important;
  border-color: var(--color-neutral-strong) !important;
}

/* --------------------------------------------------------------------------
   7. REVOKE / SETTINGS TAB — small persistent tab at bottom corner
   -------------------------------------------------------------------------- */
.cc-revoke {
  background: var(--color-base-elevated) !important;
  color: var(--color-contrast-muted) !important;
  border: 1px solid var(--color-neutral-strong) !important;
  border-radius: calc(var(--radius-sm) * var(--radius-scale)) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--fw-medium) !important;
  padding: var(--spacing-20) var(--spacing-40) !important;
  cursor: pointer !important;
  transition: color var(--transition), background var(--transition) !important;
}
.cc-revoke:hover {
  color: var(--color-contrast) !important;
  background: var(--color-surface-2) !important;
}

/* --------------------------------------------------------------------------
   8. FOCUS — accessible ring on all interactive elements
   -------------------------------------------------------------------------- */
.cc-window.cc-banner .cc-btn:focus-visible,
.cc-revoke:focus-visible {
  outline: 2px solid var(--color-accent-1) !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE — full-width bar at ≤560px (mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .cc-window.cc-banner {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: calc(var(--radius-md) * var(--radius-scale))
                  calc(var(--radius-md) * var(--radius-scale))
                  0 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .cc-window.cc-banner .cc-compliance {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .cc-window.cc-banner .cc-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* --------------------------------------------------------------------------
   10. TABLET (768px) — preserve centered bar layout
   -------------------------------------------------------------------------- */
@media (min-width: 561px) and (max-width: 1024px) {
  .cc-window.cc-banner {
    width: min(100% - 2.5rem, 40rem) !important;
  }
}

/* --------------------------------------------------------------------------
   11. DISMISSED STATE — stop intercepting clicks when banner is invisible
   The plugin adds .cc-invisible (opacity:0) after the user accepts/rejects,
   but leaves the element in the DOM as position:fixed with pointer-events:auto.
   This intercepts any interactive control in the bottom ~154px of the viewport
   (e.g. the Terms checkbox and Continue button on /account/register/).
   Fix: disable pointer events and collapse visibility on the dismissed banner.
   SCOPE: strictly .cc-invisible only — the visible banner's Accept/Reject
   buttons are unaffected because they require the absence of .cc-invisible.
   -------------------------------------------------------------------------- */
.cc-window.cc-invisible {
  pointer-events: none !important;
  visibility: hidden !important;
}