/**
 * POC theming for vanilla-cookieconsent to roughly match the fp brand
 * (see scss/variables/_variables.scss: $blue #016998 / $blue-hover #689AB9).
 * Refine once real design sign-off happens - see FUTU-822.
 */
#cc-main {
  --cc-btn-primary-bg: #016998;
  --cc-btn-primary-border-color: #016998;
  --cc-btn-primary-hover-bg: #689ab9;
  --cc-btn-primary-hover-border-color: #689ab9;
  --cc-btn-secondary-bg: #eef3f6;
  --cc-btn-secondary-hover-bg: #dfe8ed;
  --cc-toggle-on-bg: #016998;
  --cc-modal-border-radius: 0.5rem;
  --cc-btn-border-radius: 25px;
  --cc-font-family: inherit;
  --cc-font-family: L10,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

/* Consent modal (the initial banner, .cm__* - not .pm__*, which is the
   preferences modal): lay cm__texts and cm__btns out side by side instead
   of stacked, and let cm__body span full width instead of the library's
   default 55em/74em cap. Selector matches the library's own
   "#cc-main .cm--bar .cm__body" specificity (1 id, 2 classes) - our config
   always uses layout: 'bar', and a plain "#cc-main .cm__body" loses to that
   rule regardless of stylesheet order.
   Note: cm__texts/cm__btns don't need (and can't use) display:inline-flex -
   they're flex items of cm__body, and CSS blockifies any inline-level
   display on a flex item back to its block equivalent, so it's a no-op.
   flex-direction: row on the parent is what makes them sit side by side. */
#cc-main .cm--bar .cm__body {
  flex-direction: row;
  max-width: none;
  padding-top: 0;
  padding-bottom: 0;
}

/* Desktop only - the library's own mobile breakpoint is max-width:640px
   (see its "@media screen and (max-width:640px)" block), where cm__texts
   and cm__desc should keep their default top/bottom padding rather than
   our 0 override. */
@media screen and (min-width: 641px) {
  #cc-main .cm__texts {
    padding-top: 0;
  }

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

/* Category accordion headers (.pm__section-title) are also <button>
   elements styled with border-radius: var(--cc-btn-border-radius) in the
   library's own CSS, so they'd otherwise inherit our 25px pill radius too.
   Override with a literal value here rather than touching the shared
   variable, so real action buttons (Accept/Reject/Save) stay unaffected. */
#cc-main .pm__section-title {
  border-radius: var(--cc-modal-border-radius);
}

/* .pm__section--toggle (the category block wrapper) is styled with
   border-radius: var(--cc-btn-border-radius) too in the library's CSS
   (shared with the non-expandable .pm__section, which is deliberately
   left untouched here). Scoped to just --toggle, matching the same
   specificity as the library's own combined ".pm__section,
   .pm__section--toggle" rule so it wins without affecting .pm__section. */
#cc-main .pm__section--toggle {
  border-radius: var(--cc-modal-border-radius);
}

/* .pm__section-desc-wrapper (the expanded description panel below
   pm__section-title) also uses --cc-btn-border-radius by default; match
   it to the same --cc-modal-border-radius as pm__section-title above.
   Top corners stay squared off (library default) since this panel sits
   flush under the header. */
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  border-radius: var(--cc-modal-border-radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Preferences modal header: site logo instead of a text title. .pm__title
   is already display:flex;align-items:center (library default), so this
   only needs to constrain the logo's own size. */
#cc-main .fp-cc-pm-logo {
  height: 2.25rem;
  width: auto;
}

/* Floating "Manage consent preferences" relaunch trigger. Reuses the
   #ot-sdk-btn-floating id so the existing route-based show/hide rules
   (style.scss + cookie-settings.scss, unchanged) keep controlling
   display: none/block exactly as they did for OneTrust - this file only
   adds appearance, it must not redeclare `display` or it'll fight those
   rules on specificity. */
#ot-sdk-btn-floating.fp-cookie-consent-trigger {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 10px;
  background: #6aaae4;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Sizes OneTrust's own stock icon down to fit the button, preserving its
   29.176:36.562 aspect ratio (viewBox set in cookieconsent-init.js). */
#ot-sdk-btn-floating.fp-cookie-consent-trigger svg {
  width: 30px;
  height: 37px;
}

.section__toggle-wrapper {
  margin-bottom: 0;
}