/**
 * Consent Setup (Banner Editor) — horizontal tab scroll + nav overlay
 * Does NOT affect Cookie Compliance (.prem-scanner-root).
 */

/* Tab list — CSS workspace, React bw-ws portal, and inline editor */
.consent-setup-shell aside.consent-setup-editor.consent-settings-panel .consent-setup-tabs.consent-tabs[role="tablist"],
html.cs-modal-embed .consent-setup-shell aside.consent-setup-editor .consent-setup-tabs.consent-tabs[role="tablist"],
.cs-workspace-ready .consent-setup-shell.cs-workspace-open aside.consent-setup-editor .consent-setup-tabs.consent-tabs[role="tablist"],
.bw-ws-root .bw-ws-builder aside.consent-setup-editor .consent-setup-tabs.consent-tabs[role="tablist"],
.bw-ws-root .bw-ws-builder .consent-setup-tabs.consent-tabs[role="tablist"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.consent-setup-shell aside.consent-setup-editor .consent-setup-tabs.consent-tabs[role="tablist"]::-webkit-scrollbar,
.bw-ws-root .bw-ws-builder .consent-setup-tabs.consent-tabs[role="tablist"]::-webkit-scrollbar {
  display: none;
}

.consent-setup-shell aside.consent-setup-editor .consent-setup-tabs.consent-tabs[role="tablist"] .consent-tab,
.consent-setup-shell aside.consent-setup-editor .consent-setup-tabs.consent-tabs[role="tablist"] .consent-setup-tab-btn,
.bw-ws-root .bw-ws-builder .consent-setup-tabs.consent-tabs[role="tablist"] .consent-tab,
.bw-ws-root .bw-ws-builder .consent-setup-tabs.consent-tabs[role="tablist"] .consent-setup-tab-btn {
  flex: 0 0 auto !important;
  width: 100px !important;
  min-width: 88px !important;
  max-width: none !important;
  white-space: nowrap !important;
}

/* Let the tab row scroll inside the editor column (vertical scroll stays on panel) */
.cs-workspace-ready .consent-setup-shell.cs-workspace-open
  aside.consent-setup-editor.consent-settings-panel,
.bw-ws-root .bw-ws-builder aside.consent-setup-editor.consent-settings-panel {
  overflow-x: visible !important;
}

/* ─── Z-index stack: workspace chrome < tab nav < modals < close ─── */
#cs-tabs-nav-layer-consent {
  z-index: 6200 !important;
}

#cs-tabs-nav-layer-consent .cs-tabs-nav-slot {
  z-index: 6200 !important;
}

#cs-tabs-nav-layer-consent .cs-tabs-nav-slot.is-visible {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
  width: 36px !important;
  padding: 0 6px;
}

#cs-tabs-nav-layer-consent .cs-tabs-nav-slot--prev.is-visible {
  justify-content: flex-start;
  background: linear-gradient(90deg, #ffffff 70%, rgba(255, 255, 255, 0));
  border-radius: 999px 0 0 999px;
  box-shadow: none;
  border: none;
}

#cs-tabs-nav-layer-consent .cs-tabs-nav-slot--next.is-visible {
  justify-content: flex-end;
  background: linear-gradient(270deg, #ffffff 70%, rgba(255, 255, 255, 0));
  border-radius: 0 5px 5px 0;
  box-shadow: none;
  border: none;
}

#cs-tabs-nav-layer-consent .cs-tabs-nav-btn {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

.cs-workspace-ready .consent-setup-shell.cs-workspace-open .consent-setup-header,
.cs-workspace-ready .consent-setup-shell.cs-workspace-open .consent-setup-topbar {
  position: relative;
  z-index: 6050;
}

/* Appearance color picker modal — above tab nav, below workspace close */
body:has(.consent-setup-shell .config-color-modal-backdrop) .config-color-modal-backdrop {
  z-index: 2147483640 !important;
  background: rgba(15, 23, 42, 0.48) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

body:has(.consent-setup-shell .config-color-modal-backdrop) .config-color-modal {
  z-index: 2147483641 !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: 420px !important;
  padding: 28px 28px 24px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(37, 98, 255, 0.06) !important;
}

body:has(.consent-setup-shell .config-color-modal-backdrop) .config-color-modal-title {
  margin: 0 0 18px !important;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: #0f172a !important;
}

body:has(.consent-setup-shell .config-color-modal-backdrop) .config-color-dialog-input {
  height: 140px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
}

body:has(.consent-setup-shell .config-color-modal-backdrop) .config-color-modal-done {
  width: 100% !important;
  min-height: 44px !important;
  margin-top: 20px !important;
  border: none !important;
  border-radius: 10px !important;
  background: #2562ff !important;
  color: #ffffff !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  cursor: pointer;
}

body:has(.consent-setup-shell .config-color-modal-backdrop) .config-color-modal-done:hover {
  background: #1d4ed8 !important;
}

/* Hide portaled tab scroll arrows while color modal is open */
body:has(.consent-setup-shell .config-color-modal-backdrop) #cs-tabs-nav-layer-consent,
body:has(.consent-setup-shell .config-color-modal-backdrop) #cs-tabs-nav-layer-consent .cs-tabs-nav-slot {
  z-index: 1 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Law confirm modal — same stacking as color picker */
body:has(.consent-setup-shell .cs-law-confirm-root) .cs-law-confirm-root {
  z-index: 2147483640 !important;
}

body:has(.consent-setup-shell .cs-law-confirm-root) #cs-tabs-nav-layer-consent,
body:has(.consent-setup-shell .cs-law-confirm-root) #cs-tabs-nav-layer-consent .cs-tabs-nav-slot {
  z-index: 1 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}