/* Themeable variables — adjust to your brand */
:root{
  --sccge-primary: #0A3858;     /* main brand color */
  --sccge-bg: #ffffff;          /* card bg */
  --sccge-text: #1F2937;        /* text color */
  --sccge-shadow: 0 10px 30px rgba(0,0,0,0.20);
}

/* Container fixed at bottom-left */
#sccge-consent-root {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
}

/* Card */
.sccge-banner {
  margin: 18px;
  max-width: 420px;
  background: var(--sccge-bg);
  color: var(--sccge-text);
  border-radius: 14px;
  box-shadow: var(--sccge-shadow);
  padding: 14px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", sans-serif;
}

/* Smaller typography */
.sccge-header {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.sccge-text {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.95;
}
.sccge-text a { color: var(--sccge-primary); text-decoration: underline; }

.sccge-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons */
.sccge-btn {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .02s ease, opacity .15s ease;
}

.sccge-accept {
  background: var(--sccge-primary);
  color: #fff;
  border: 1px solid var(--sccge-primary);
}
.sccge-accept:hover { opacity: .92; }

.sccge-decline {
  background: transparent;
  color: var(--sccge-primary);
  border: 1px solid var(--sccge-primary);
}
.sccge-decline:hover { background: rgba(10,56,88,0.06); }

@media (max-width: 480px){
  .sccge-banner { margin: 10px; max-width: calc(100vw - 20px); }
}