.cc-root { font-family: 'Roboto', sans-serif; }
.cc-root *, .cc-root *:before, .cc-root *:after { box-sizing: border-box; }

/* ---- Consent modal (bottom-left card) ---- */
.cc-consent {
  position: fixed; left: 20px; bottom: 20px; z-index: 10000;
  width: 392px; max-width: calc(100vw - 40px);
  background: #fff; border-radius: 16px;
  box-shadow: 0 8px 32px rgba(20, 60, 150, .18);
}
.cc-consent__body { display: flex; flex-direction: column; gap: 24px; padding: 24px; }
.cc-title { margin: 0; font-size: 21px; line-height: 28px; font-weight: 700; color: #4e5a61; }
.cc-text { margin: 0; font-size: 16px; line-height: 24px; color: #4e5a61; }
.cc-text a { color: #1a9af3; font-weight: 700; text-decoration: none; }
.cc-btns { display: flex; flex-direction: column; gap: 8px; }
.cc-btns form { margin: 0; }

.cc-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; height: 48px; padding: 12px 24px;
  border: 0; border-radius: 4px; cursor: pointer;
  font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 700;
  color: #1a9af3; text-align: center; text-transform: uppercase;
}
.cc-btn--accent { background: #1a9af3; color: #fff; box-shadow: -1px 2px 0 0 #1479c2; }
.cc-btn--ghost { background: #fff; border: 1px solid #1a9af3; color: #1a9af3; box-shadow: -1px 2px 0 0 #d3d9db; }
.cc-btn:active { transform: translate(-1px, 2px); box-shadow: none; }

.cc-consent__footer {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 12px 24px; background: #eef2f3;
  border-radius: 0 0 16px 16px;
}
.cc-link {
  padding: 3px 10px; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; line-height: 18px; font-weight: 700;
  color: #1a9af3; text-decoration: none;
}

/* ---- Preferences modal (centered) ---- */
.cc-overlay {
  position: fixed; inset: 0; z-index: 10001; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(20, 33, 41, .55);
}
.cc-overlay.cc-open { display: flex; }
.cc-prefs {
  display: flex; flex-direction: column; width: 605px; max-width: 100%;
  max-height: calc(100vh - 40px); background: #fff; border-radius: 16px; overflow: hidden;
}
.cc-prefs__header {
  display: flex; align-items: center; flex: 0 0 auto; height: 72px; padding: 0 24px;
  border-bottom: 1px solid #d3d9db;
}
.cc-prefs__header h2 { flex: 1; margin: 0; font-size: 21px; line-height: 28px; font-weight: 700; color: #4e5a61; }
.cc-close { display: flex; padding: 8px; background: none; border: 0; cursor: pointer; }
.cc-icon { display: block; width: 24px; height: 24px; }
/* The <form> wraps the scrollable body + footer, so it must carry the
   column layout for the body to shrink and scroll instead of pushing the
   footer out of the (overflow-hidden) modal. */
.cc-prefs form { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; }
.cc-prefs__body { flex: 1 1 0%; min-height: 0; overflow-y: auto; padding: 16px 24px; }
.cc-prefs__intro-title { margin: 0 0 8px; font-size: 16px; line-height: 24px; font-weight: 500; color: #4e5a61; }
.cc-prefs__intro-text { margin: 0; font-size: 16px; line-height: 24px; color: #4e5a61; }
.cc-rows { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; }

.cc-row { background: #eef2f3; border-radius: 4px; }
.cc-row__head { display: flex; align-items: center; gap: 8px; padding: 16px; }
.cc-row__chevron {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 24px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer;
}
.cc-row__chevron-spacer { flex: 0 0 auto; width: 24px; height: 24px; }
.cc-arrow { display: block; width: 24px; height: 24px; }
.cc-arrow--up { display: none; }
.cc-row.cc-expanded .cc-arrow--down { display: none; }
.cc-row.cc-expanded .cc-arrow--up { display: block; }
.cc-row__name { flex: 1; min-width: 0; font-size: 14px; line-height: 18px; font-weight: 700; color: #4e5a61; }
/* Right-side controls: badge column + toggle, aligned across rows */
.cc-row__controls { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.cc-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-width: 96px; padding: 4px 8px;
  background: #1a9af3; border-radius: 24px;
  font-size: 11px; line-height: 16px; font-weight: 700; color: #fff; white-space: nowrap; text-transform: uppercase;
}
.cc-row__detail { display: none; padding: 0 16px 16px 52px; }
.cc-row.cc-expanded .cc-row__detail { display: block; }
.cc-row__desc { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: #4e5a61; }
.cc-services { margin: 0; padding: 0; list-style: none; }
.cc-services li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; color: #4e5a61; }
.cc-services li:before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #4e5a61; flex: 0 0 auto; }

/* toggle */
.cc-toggle { position: relative; display: inline-flex; flex: 0 0 auto; width: 42px; height: 24px; margin-bottom: 0 }
.cc-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-toggle__track {
  position: absolute; inset: 0; border-radius: 24px; background: #677889; transition: background .15s ease;
}
.cc-toggle__track:before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; transition: transform .15s ease;
}
.cc-toggle input:checked + .cc-toggle__track { background: #1a9af3; }
.cc-toggle input:checked + .cc-toggle__track:before { transform: translateX(18px); }
.cc-toggle input:disabled + .cc-toggle__track { background: #d3d9db; }
.cc-toggle input:disabled { cursor: not-allowed; }

.cc-prefs__footer {
  display: flex; gap: 8px; align-items: center; flex: 0 0 auto; padding: 16px 24px;
  border-top: 1px solid #d3d9db; flex-wrap: wrap;
}
.cc-prefs__footer .cc-footer-left { display: flex; gap: 8px; flex: 1; min-width: 0; }
.cc-prefs__footer .cc-btn { width: auto; }

/* ---- Toast ---- */
.cc-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 10002;
  display: flex; gap: 9px; align-items: center; max-width: calc(100vw - 40px);
  padding: 24px; background: #fff; border-radius: 8px;
  box-shadow: 0 8px 32px rgba(20, 60, 150, .18);
  font-size: 16px; line-height: 24px; color: #4e5a61;
}
.cc-toast .cc-icon { flex: 0 0 auto; }

@media (max-width: 640px) {
  .cc-consent { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .cc-prefs__footer { flex-direction: column; align-items: stretch; }
  .cc-prefs__footer .cc-footer-left { flex-direction: column; }
  .cc-prefs__footer .cc-btn { width: 100%; }
}

/* ---- Gated embed placeholder (map, video, etc. behind consent) ---- */
.cc-gated-placeholder {
  text-align: center;
  padding: 24px;
}
.cc-gated-placeholder__btn {
  color: #1a9af3;
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}