/**
 * uplitMD brand theme for CookieConsent v3.
 *
 * Ported from the cred.ai consent theme: same structural customizations
 * (3-column banner buttons, tight paddings, hairline shell), reskinned with
 * the uplitMD palette — hearth amber CTAs on deep indigo surfaces, Poppins UI
 * type, Newsreader for titles.
 */

#cc-main {
  --cc-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --cc-bg: #211d3a;
  --cc-primary-color: #fdf8f4;
  --cc-secondary-color: #cec3bd;

  --cc-btn-primary-bg: #f2b183;
  --cc-btn-primary-color: #2a1408;
  --cc-btn-primary-border-color: #f2b183;
  --cc-btn-primary-hover-bg: #d98b5a;
  --cc-btn-primary-hover-color: #2a1408;
  --cc-btn-primary-hover-border-color: #d98b5a;

  --cc-btn-secondary-bg: #2a2543;
  --cc-btn-secondary-color: #fdf8f4;
  --cc-btn-secondary-border-color: rgba(255, 246, 240, 0.26);
  --cc-btn-secondary-hover-bg: #332d52;
  --cc-btn-secondary-hover-color: #fdf8f4;
  --cc-btn-secondary-hover-border-color: rgba(255, 246, 240, 0.5);

  --cc-separator-border-color: rgba(255, 246, 240, 0.13);

  --cc-toggle-on-bg: #f2b183;
  --cc-toggle-off-bg: #423b66;
  --cc-toggle-on-knob-bg: #2a1408;
  --cc-toggle-off-knob-bg: #fdf8f4;

  --cc-toggle-readonly-bg: #2a2543;
  --cc-toggle-readonly-knob-bg: rgba(253, 248, 244, 0.6);
  --cc-toggle-readonly-knob-icon-color: #211d3a;

  --cc-link-color: #f2b183;
  --cc-link-hover-color: #d98b5a;

  --cc-modal-border-radius: 16px;
  --cc-btn-border-radius: 12px;

  --cc-cookie-category-block-bg: #1b1731;
  --cc-cookie-category-block-border: rgba(255, 246, 240, 0.13);
  --cc-section-category-border: rgba(255, 246, 240, 0.13);
  --cc-cookie-category-block-hover-bg: #242040;
  --cc-cookie-category-block-hover-border: rgba(255, 246, 240, 0.13);
  --cc-cookie-category-expanded-block-bg: #171429;

  --cc-overlay-bg: rgba(13, 11, 26, 0.75);
  --cc-footer-bg: #171429;
  --cc-footer-color: #cec3bd;
  --cc-footer-border-color: rgba(255, 246, 240, 0.13);
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Accept all carries the hearth gradient, the way site CTAs do. */
#cc-main .cm__btn[data-role="all"],
#cc-main .pm__btn[data-role="all"] {
  background: linear-gradient(135deg, #f2b183 0%, #d98b5a 100%);
  border-color: transparent;
}

#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="all"]:hover {
  background: linear-gradient(135deg, #d98b5a 0%, #f2b183 100%);
  border-color: transparent;
}

/* Footer opt-out links */
.uplit-consent-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  flex-direction: column;
}

a.uplit-consent-footer__link {
  text-decoration: none;
}

.uplit-consent-footer__link {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wf-body, #cec3bd);
  cursor: pointer;
  transition: color 0.15s var(--ease, ease);
}

.uplit-consent-footer__link:hover,
.uplit-consent-footer__link:focus {
  color: var(--wf-ink, #fdf8f4);
  background: none;
}

/*
 * Reject and Manage sit on a flat raised indigo with no border, so Accept
 * keeps the only visual emphasis.
 */
#cc-main .cm__btn[data-role="necessary"],
#cc-main .cm__btn[data-role="show"],
#cc-main .pm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="save"] {
  background: #2a2543;
  color: #fdf8f4;
  border: 0;
}

#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .cm__btn[data-role="show"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="save"]:hover {
  background: #332d52;
  border: 0;
}

/* Shorter, tighter banner buttons. */
#cc-main .cm__btns .cm__btn {
  min-height: 0;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.2;
}

/* Banner shell: hairline border, softer corner radius. */
#cc-main .cm {
  border: 1px solid rgba(255, 246, 240, 0.13);
  border-radius: 16px;
}

/* Tighter gap between the banner title and its copy (was 1.1em). */
#cc-main .cm__title + .cm__desc {
  margin-top: 0.55em;
}

/*
 * Accept / Reject / Manage as three equal columns. The buttons live in two
 * separate .cm__btn-group wrappers, so those are flattened with
 * display: contents and the buttons become the grid items.
 */
#cc-main .cm__btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#cc-main .cm__btn-group {
  display: contents;
}

#cc-main .cm__btns .cm__btn {
  width: 100%;
  margin: 0;
}

/* Banner copy: fluid on small screens, 14px from 480px up. */
#cc-main .cm__desc {
  color: #cec3bd;
  letter-spacing: -0.01em;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 3.73vw;
  font-weight: 300;
  line-height: 1.45;
}

@media (min-width: 480px) {
  #cc-main .cm__desc {
    font-size: 14px;
  }
}

/*
 * Even .9375rem padding on each banner region. The library pads the title and
 * description individually (0 20.8px / 0 20.8px 14px), so those are zeroed and
 * the spacing comes from the regions themselves.
 */
#cc-main .cm__texts,
#cc-main .cm__btns {
  padding: 0.9375rem;
}

#cc-main .cm__title,
#cc-main .cm__desc {
  padding: 0;
}

/* No divider or top padding between the banner copy and its buttons. */
#cc-main .cm__btns {
  border-top: 0;
  padding-top: 0;
}

/* Preferences modal matches the banner shell. */
#cc-main .pm--box {
  border: 1px solid rgba(255, 246, 240, 0.13);
  border-radius: 16px;
}

/*
 * Tighter toggle rows in the preferences modal: vertical padding only, so the
 * library's horizontal padding still reserves room for the arrow and toggle.
 */
#cc-main .pm__section--toggle .pm__section-title {
  /* The library's own min-height (58px) would keep the row tall regardless. */
  min-height: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Preferences modal title matches the banner title exactly. */
#cc-main .pm__title {
  font-size: 1.15em;
  line-height: 1.15;
}

/* Close button is just the X: no chrome, hearth on hover. */
#cc-main .pm__close-btn {
  background: none;
  border: 0;
  box-shadow: none;
}

#cc-main .pm__close-btn:hover,
#cc-main .pm__close-btn:focus-visible {
  background: none;
  border: 0;
}

#cc-main .pm__close-btn svg {
  stroke: currentColor;
  transition: stroke 150ms ease;
}

#cc-main .pm__close-btn:hover svg,
#cc-main .pm__close-btn:focus-visible svg {
  stroke: #f2b183;
}

/* No gap between the toggle list and the section that follows it. */
#cc-main .pm__section-toggles + .pm__section {
  margin-top: 0;
}

/* Intro section sits closer to the toggle list. */
#cc-main .pm__section:first-child {
  margin-bottom: 1rem;
}

/*
 * Expanding a section re-points --cc-cookie-category-block-border at
 * --cc-cookie-category-expanded-block-hover-bg, which otherwise falls back to
 * the library's light default.
 */
#cc-main .pm__section--toggle.is-expanded {
  --cc-cookie-category-block-border: rgba(255, 246, 240, 0.13);
}
