/* Cookie Banner */
#cookie-banner {
  display: flex;
  justify-content: space-between;
  /* v1.58.0: stretch so the copy + button block fill the mobile column width
     (align-items:center shrank the <p> and forced an extra wrapped line). The
     desktop breakpoint re-centres for the single row. */
  align-items: stretch;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  color: #fff;
  /* v1.58.0: tightened for the compact banner (mobile <=140px / desktop <=64px
     targets). gap spaces the copy from the button block in the mobile column. */
  padding: 10px 16px;
  gap: 8px;
  text-align: center;
  z-index: 1000;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  display: none;
  margin: 0 auto;
  max-width: 1920px;
  transform: translateY(100%);
  animation: slideIn 1s ease-out forwards;
  flex-direction: column;
}



#cookie-banner p {
  margin: 0;
  text-align: left;
  font-size: 14px;
  color: #000;
  line-height: 1.4;
}

#cookie-banner p a {
  font-size: 14px;
  color: inherit;
  line-height: 1.5;
  transition: 0.3s all ease-in-out;
}

#cookie-banner p a:hover {
  opacity: 0.5;
  color: #000;
}

/* v1.58.0: the button area is a SINGLE row on every viewport — Manage Cookies
   (text link) then the Accept/Reject pair — so the compact banner clears the
   <=140px mobile target even when the fixed copy wraps to three lines. wrap is
   a safety net for very narrow screens. */
.btn-cookies-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
}

/* v1.58.0: Accept + Reject as a matched pair (identical padding + border-box)
   so the privacy-protective Reject is exactly as easy to reach as Accept
   (11 CCR §7004(a)(2) symmetric choice). */
.cookie-cta-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* v1.58.0: a floor width both buttons share so the "Accept"/"Reject" glyph-width
   difference cannot make one wider than the other — the pair is pixel-matched. */
.cookie-cta-row button {
  min-width: 96px;
}

.btn-cookies-container a.manage-cookies {
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s all ease-in-out;
  font-weight: bold;
  opacity: 0.7;
  color: #000;
  margin: 0;
  white-space: nowrap;
}

.btn-cookies-container a.manage-cookies:hover {
  opacity: 0.5;
  color: #000;
}

.btn-cookies-container button {
  padding: 9px 22px;
  background-color: var(--urge-cookie-accent, var(--urge-color-primary, #023649));
  color: white;
  border: none;
  cursor: pointer;
  height: 40px;
  font-size: 14px;
  transition: 0.3s all ease-in-out;
  width: auto;
  /* v1.58.0: border-box so Reject's 2px outline does not make it a different
     width from the borderless Accept — the pair stays exactly matched. */
  box-sizing: border-box;
  /* v1.59.1: flex-centre the label. The buttons have a fixed height:40px, and a
     child theme's inherited line-height (e.g. 1.75 → 24.5px) exceeds the content
     box in block layout and rides the text low. inline-flex + centre makes the
     label sit dead-centre regardless of the inherited line-height. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}




.btn-cookies-container button:hover {
  opacity: 0.7;
}

button#reject-cookies {
  background-color: transparent;
  border: 2px solid var(--urge-cookie-accent, var(--urge-color-primary, #023649));
  color: var(--urge-cookie-accent, var(--urge-color-primary, #023649));
}

@keyframes slideIn {
  0% {
    bottom: -100px;
    transform: translateY(100%);
  }
  100% {
    bottom: 0;
    transform: translateY(0);
  }
}

/* Modal */
.cookie-preferences-modal {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
}

.modal-content {
  background-color: white !important;
  padding: 20px;
  border-radius: 8px;
  width: 100%;
  max-width: 845px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.modal-content h2 {
  text-align: center;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 20px;
  border-bottom: 1px solid #ededed;
}

.modal-scrollable-content {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 10px;
  max-height: calc(80vh - 60px);
  margin-top: 20px;
}

.modal-content h3 {
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 20px;
  font-size: 16px;
}

.modal-content p {
  font-size: 14px;
  line-height: 1.6;
  margin: 15px 0;
}

.modal-content button {
  margin-top: 20px;
  padding: 10px 0;
  background-color: var(--urge-cookie-accent, var(--urge-color-primary, #023649));
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.modal-content button:hover {
  opacity: 0.8;
}

.modal-content .close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 10px;
}

.modal-content .close:hover,
.modal-content .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.cookie-preferences-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  flex-direction: column;
}

.cookie-preferences-btn button {
  padding: 10px 20px;
}

/* Accordion */
.cookie-accordion {
  margin-top: 20px;
  max-height: 400px;
}

.cookie-accordion-item {
  border-bottom: 1px solid #ebebeb;
}

.cookie-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
  background-color: #fff;
}

.cookie-accordion-btn {
  font-size: 16px;
  background-color: transparent !important;
  border: none;
  cursor: pointer;
  color: #212121 !important;
  font-weight: 500;
  display: flex;
  align-items: center;
  margin-top: 0;
}

.chevron-icon {
  margin-right: 10px;
  transition: transform 0.3s ease;
}

.cookie-always-active {
  font-size: 12px;
  color: var(--urge-cookie-accent, var(--urge-color-primary, #008000));
  margin-left: 10px;
}

.cookie-accordion-des p {
  background-color: #fff;
  margin: 0;
  padding: 0 10px 15px;
}

.cookie-accordion-body {
  display: none;
  padding: 10px;
  background-color: #f4f4f4;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  width: 95%;
  margin: 0px auto 20px;
}

.cookie-accordion-body p {
  display: flex;
}

.cookie-accordion-item.active {
  background-color: #fff;
}

.cookie-accordion-item.active .cookie-accordion-body {
  display: block;
  max-height: 200px;
}

.cookie-accordion-item.active .cookie-accordion-btn .chevron-icon {
  transform: rotate(180deg);
}

/* Settings Button */
.cookie-settings-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: var(--urge-cookie-accent, var(--urge-color-primary, #023649));
  color: white;
  border: none;
  padding: 10px;
  border-radius: 25px;
  cursor: pointer;
  z-index: 9999;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background-color 0.3s;
  display: none;
}

.cookie-settings-btn:hover {
  opacity: 0.7;
}

.cookie-settings-btn .icon-container {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.cookie-settings-btn .icon-container img {
  width: 100%;
  height: 100%;
}

/* Toggle */
.cookie-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}

.cookie-toggle input {
  width: 40px;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  background: #ccc;
  outline: none;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

.cookie-toggle input:checked {
  background: var(--urge-cookie-accent, var(--urge-color-primary, #4CAF50));
}

.cookie-toggle input::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 1px;
  left: 1px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

.cookie-toggle input:checked::before {
  transform: translateX(20px);
}

/* v1.7.0 (2026-06-09): row-layout variant for per-bucket toggle inputs
   inside the accordion bodies. Pairs a text label on the left with the
   toggle switch on the right. Used by the modal per-bucket toggles
   (Necessary / Functional / Analytics GA + GTM / Advertisement). */
.cookie-toggle--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-left: 0;
  padding: 8px 0;
  cursor: pointer;
}

.cookie-toggle--row + .cookie-toggle--row {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.cookie-toggle-label {
  font-size: 0.9rem;
  color: #000;
  margin-right: 12px;
}

.cookie-toggle input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Mobile */

@media (min-width: 992px) {
  #cookie-banner {
    flex-direction: row;
    align-items: center;
    /* v1.58.0: desktop <=64px target — one line of copy + a 40px button row. */
    padding: 10px 24px;
    gap: 24px;
  }

  #cookie-banner p {
    padding-right: 0;
  }

  .cookie-preferences-modal {
    padding: 20px;
  }

  .modal-content {
    width: 80%;
    max-height: 80vh;
  }

  .modal-content button {
    padding: 10px 20px;
  }

  .cookie-preferences-btn {
    flex-direction: row;
    gap: 20px;
  }

  .cookie-accordion {
    padding-right: 10px;
  }

  .cookie-accordion-item .cookie-accordion-header {
    padding: 10px;
  }

  .cookie-accordion-item .cookie-accordion-des p {
    padding: 0 30px 15px;
  }

  .btn-cookies-container {
    gap: 12px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }


  .modal-content .close {

    top: 10px;
    right: 15px;
  }
}

@media (min-width: 992px) {
  .btn-cookies-container button {
    width: auto;
  }
}

/* v1.23.5: subtle elevation on the filled cookie CTAs only (banner Accept, the
   modal Accept All + Save Preferences buttons). The floating button keeps its
   own shadow above; the Reject buttons and the transparent accordion toggles
   stay flat by being left out of this rule (id scope avoids the broad
   .modal-content button selector bleeding onto the accordion toggles). */
#accept-cookies,
#accept-all-preferences,
#save-cookie-preferences {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* v1.29.0: Global Privacy Control confirmation toast. Quiet, bottom-centre (the
   left edge holds the cookie settings icon and the bottom-right holds any chat
   launcher, so the centre is clear), auto-dismissing. Brand accent + the banner's
   soft-shadow language so it reads native to the consent UI. Hidden until
   consent.js adds .is-visible on the GPC auto-decline path; no dismiss button. */
.gpc-consent-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(10px);
  z-index: 99999;
  max-width: min(92vw, 440px);
  margin: 0;
  padding: 11px 18px;
  background-color: var(--urge-cookie-accent, var(--urge-color-primary, #023649));
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  border-radius: 8px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease;
}

.gpc-consent-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .gpc-consent-toast {
    transition: opacity 200ms ease;
    transform: translateX(-50%);
  }
  .gpc-consent-toast.is-visible {
    transform: translateX(-50%);
  }
}

/* v1.58.0: CCPA/CPRA "Your Privacy Choices" footer opt-out link
   (urge_render_privacy_choices()). Inline-flex so the official CPPA opt-out
   icon sits beside the label at ~text size (11 CCR §7015(b): icon
   approximately the same size as other footer icons). The link text colour
   inherits the footer so it reads native; the icon keeps its fixed official
   #0066FF/#fff. This is the always-available baseline — a child may restyle it
   to match its own footer without touching this rule. */
.urge-privacy-choices {
  /* v1.58.1: inline-flex + vertical-align:middle so the label + icon sit on the
     text midline of whatever footer row they land in — including an
     align-items:baseline row (Coastal, where the icon-link otherwise rides
     high) — and wrap as one inline unit at narrow widths (phi @360 no longer
     overflows). display + text-decoration are forced because host child footers
     style their own `a` (e.g. phi's `.foot-bottom .legal a { display:flex }`),
     and a drop-in compliance widget must render consistently in any footer;
     white-space keeps "Your Privacy Choices" + icon together. */
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
  gap: 6px;
  color: inherit;
  text-decoration: none !important;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.urge-privacy-choices:hover,
.urge-privacy-choices:focus-visible {
  /* v1.58.1: subtle, footer-agnostic hover — NOT an underline. A forced
     underline read wrong on an icon link and clashed with footers that hover by
     colour/opacity (phi flagged it). */
  opacity: 0.7;
}

.urge-privacy-choices__icon-wrap {
  display: inline-flex;
  align-items: center;
}

.urge-privacy-choices__icon {
  display: block;
  height: 1.1em;
  width: auto;
}

/* v1.59.0: fallback container for the GUARANTEED "Your Privacy Choices" link.
   Foundation emits this at the end of wp_footer only when the active theme did
   NOT place the link itself, so it lands OUTSIDE the footer markup on an unknown
   page background. It therefore carries its own quiet, self-contained chip — a
   light pill with its own text colour, a soft border + shadow — that stays
   legible on both light and dark pages. On the three existing children (and any
   theme that calls the helper) the explicit call renders in the footer instead
   and this never appears. */
.urge-privacy-choices-fallback {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 14px 16px;
}

.urge-privacy-choices-fallback .urge-privacy-choices {
  color: #1a1a1a !important;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}