/* Connect landing — overlay correction layer.
   Narrow scope: privacy consent + Cira coexistence only. */

html body [data-connect-consent-root],
html body [data-connect-consent-panel] {
  --consent-surface: #FFFDF8;
  --consent-ink: #171B1E;
  --consent-muted: #6B6862;
  --consent-line: rgba(91, 68, 43, .18);
  background: var(--consent-surface);
  color: var(--consent-ink);
  border-color: var(--consent-line);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(51, 38, 23, .18), inset 0 1px 0 rgba(255,255,255,.90);
}

html body :is([data-connect-consent-root], [data-connect-consent-panel]) :is(button, a) {
  background: #FFFDF8;
  color: #171B1E;
  border-color: rgba(91, 68, 43, .20);
  border-radius: 10px;
}

html body :is([data-connect-consent-root], [data-connect-consent-panel]) [data-allow] {
  background: linear-gradient(180deg, #242B30, #161C20);
  color: #FFF8EE;
  border-color: #1D2328;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

html body :is([data-connect-consent-root], [data-connect-consent-panel]) [data-allow]:hover {
  background: linear-gradient(180deg, #30383D, #1C2327);
}

html[data-theme="dark"] body [data-connect-consent-root],
html[data-theme="dark"] body [data-connect-consent-panel] {
  --consent-surface: #151E23;
  --consent-ink: #F7F0E7;
  --consent-muted: #B7B0A7;
  --consent-line: rgba(240,191,128,.13);
  background: #151E23;
  color: #F7F0E7;
  border-color: rgba(240,191,128,.13);
  box-shadow: 0 28px 78px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.035);
}

html[data-theme="dark"] body :is([data-connect-consent-root], [data-connect-consent-panel]) :is(button, a) {
  background: #192329;
  color: #F7F0E7;
  border-color: rgba(240,191,128,.14);
}

html[data-theme="dark"] body :is([data-connect-consent-root], [data-connect-consent-panel]) [data-allow] {
  background: linear-gradient(180deg, #30383D, #1C2327);
  color: #FFF8EE;
  border-color: rgba(240,191,128,.23);
}

/* A first-visit privacy decision has higher priority than a sales teaser. */
body.connect-consent-active :is(#cira-teaser, .cira-teaser) {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 640px) {
  html body [data-connect-consent-root] {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 15px;
    border-radius: 16px;
  }
}
