/* Public consent controls: the website's charcoal, red and rounded button system. */
.syn-consent {
  box-sizing: border-box;
  font: 400 15px/1.65 "Open Sans", sans-serif;
  color: #dedede;
  background: linear-gradient(267deg, #161616 0%, #080808 100%);
  border: 1px solid #4d4d4d;
  border-top: 3px solid #dc3545;
  border-radius: 15px;
  padding: 28px;
  box-shadow: 0 16px 56px #0008;
  color-scheme: dark;
  overflow-wrap: anywhere;
}
.syn-consent *, .syn-consent *::before, .syn-consent *::after { box-sizing: border-box; }
.syn-consent .syn-consent-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fefefe;
}
.syn-consent .syn-consent-title {
  font: 600 24px/1.35 Poppins, "Open Sans", sans-serif;
  color: #fefefe;
  margin: 0 0 14px;
}
.syn-consent p { margin: 0 0 18px; }
.syn-consent .syn-consent-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 18px; }
.syn-consent .syn-consent-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 12px 20px;
  margin: 0;
  font: 600 15px/1.5 "Open Sans", sans-serif;
  border: 1px solid #dc3545;
  border-radius: 15px;
  cursor: pointer;
  color: #fff;
  background: #dc3545;
  transition: background-color .2s, border-color .2s;
}
.syn-consent .syn-consent-button:hover { background: #b92a38; border-color: #b92a38; }
/* Both first-level decisions have identical visual weight and target size. */
.syn-consent .syn-consent-decision { flex: 1 1 190px; }
.syn-consent .syn-consent-secondary { background: transparent; border-color: #999696; }
.syn-consent .syn-consent-secondary:hover { background: #292929; border-color: #fefefe; }
.syn-consent a { color: #dedede; text-decoration: underline; text-underline-offset: 4px; }
.syn-consent a:hover { color: #fff; text-decoration-color: #dc3545; }
.syn-consent .syn-consent-policies { font-size: 13px; margin-bottom: 0; }
.syn-consent :is(button, a, input):focus-visible,
#syn-consent-settings:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
#syn-consent-banner {
  position: fixed;
  z-index: 100000;
  bottom: 84px;
  left: 24px;
  right: 24px;
  width: auto;
  max-width: 800px;
  max-height: calc(100vh - 112px);
  max-height: calc(100dvh - 112px);
  margin: 0 auto;
  overflow: auto;
}
#syn-consent-settings {
  position: fixed;
  z-index: 99999;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: max(24px, env(safe-area-inset-left));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  font: 600 13px/1.5 "Open Sans", sans-serif;
  color: #fefefe;
  background: #181818;
  border: 1px solid #dc3545;
  border-radius: 15px;
  box-shadow: 0 4px 18px #0005;
  cursor: pointer;
  transition: background-color .2s;
}
#syn-consent-settings:hover { background: #292929; }
#syn-consent-settings svg { flex: none; width: 18px; height: 18px; color: #fefefe; }
#syn-consent-dialog {
  width: calc(100% - 40px);
  max-width: 680px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  overflow: auto;
}
#syn-consent-dialog::backdrop { background: #000b; backdrop-filter: blur(4px); }
.syn-consent .syn-consent-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 0;
  margin: 0 0 18px;
  border-top: 1px solid #4d4d4d;
  border-bottom: 1px solid #4d4d4d;
  color: #fefefe;
  font-weight: 600;
  cursor: pointer;
}
.syn-consent .syn-consent-option input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; accent-color: #dc3545; }
@media (max-width: 600px) {
  .syn-consent { padding: 20px; font-size: 14px; }
  .syn-consent .syn-consent-title { font-size: 21px; }
  .syn-consent .syn-consent-actions { gap: 10px; margin-top: 18px; }
  .syn-consent .syn-consent-button { width: 100%; flex-basis: 100%; font-size: 14px; }
  #syn-consent-banner { left: 12px; right: 12px; bottom: 76px; max-height: calc(100dvh - 100px); }
  #syn-consent-settings { left: 12px; bottom: max(16px, env(safe-area-inset-bottom)); }
  #syn-consent-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .syn-consent .syn-consent-button, #syn-consent-settings { transition: none; }
  #syn-consent-dialog::backdrop { backdrop-filter: none; }
}