/*
   Consent Manager - https://.com/consent-manager/

  Styles are at risked of being overridden by styles coming from the site the consent manager is used on.
  To help prevent this, global wrapper elements are prefixed with "#-"
*/

/* --------------------------------
  Global Styles - These elements exist in the main DOM and styling is limited to positioning and animation
-------------------------------- */
/* Wrapper (Global) */
#-wrapper {
              --boxShadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a;
              --fontFamily: "RegolaPro", sans-serif;
              --primaryColor: #152C46;
              --backgroundColor: #ffffff;
              --textColor: #152C46;
              --backdropBackgroundColor: #00000033;
              --backdropBackgroundBlur: 0px;
              --cookieIconColor: #152C46;
              --cookieIconBackgroundColor: #ffffff;
              position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  pointer-events: none;
  border: 0px;
  display: flex;
  justify-content: center;
  align-items: center
            }

/* Backdrop (Global) */
#-backdrop-global {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  border: 0px;
  display: none;
}

/* --------------------------------
  General Styles
-------------------------------- */

#-wrapper .st-button {
  color: #152C46;
  background-color: transparent;
  border: 1px solid rgba(21, 44, 70, 0.1);
  padding: 10px 20px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  border-radius: 10px;
}

#-wrapper .st-button--primary:hover {
  background-color: var(--backgroundColor);
  color: var(--primaryColor);
}

#-wrapper .st-button--secondary {
  background-color: var(--backgroundColor);
  color: var(--primaryColor);
}

#-wrapper .st-button--secondary:hover {
  background-color: var(--primaryColor);
  color: var(--backgroundColor);
}

/* --------------------------------
  Banner
-------------------------------- */
#-banner {
  box-sizing: border-box;
  pointer-events: none;
  user-select:none;
  border: 0px;
  width: 100%;
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0;
  animation: -slideInDown 350ms ease-out forwards;
  animation-delay: 0.3s;
}

#-banner .actions { display: none;}

/* --------------------------------
  Modal
-------------------------------- */
#-modal {
  display: none;
  pointer-events: auto;
  overflow: auto;
  width: 800px;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  border: 0px;
  transform: translate(0px, -20px);
  opacity: 0;
  animation: -slideInUp-center 350ms ease-out forwards;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  font-family: var(--fontFamily);
  color: #152C46;
  flex-direction: column;
  padding: clamp(20px,5vw,30px);
  background-color: var(--backgroundColor);
  border-radius: 10px;
  box-sizing: border-box;
}

/* --------------------------------
  Modal - Content
-------------------------------- */

#-modal section {
  flex: 1;
  margin-top: 32px;
}

#-modal section::-webkit-scrollbar {
  display: block; /* Force scrollbars to show */
  width: 5px; /* Width of the scrollbar */
}

#-modal section::-webkit-scrollbar-thumb {
  background-color: var(--textColor); /* Color of the scrollbar thumb */
  border-radius: 10px; /* Rounded corners for the thumb */
}

#-modal .cookie-type-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

/* --------------------------------
  Modal - Switches
-------------------------------- */
#-modal .switch {
  flex-shrink: 0;
  position: relative;
  display: inline-block;
  height: 34px;
  width: 74px;
  cursor: pointer;
}

#-modal .switch:focus-within {
  outline: 3px solid var(--primaryColor);
  outline-offset: 3px;
  border-radius: 25px;
}

#-modal .switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#-modal .switch input:disabled {
  cursor: not-allowed;
}

/* Unchecked Switch Styles */
#-modal .switch__pill {
  position: relative;
  display: block;
  height: 34px;
  width: 74px;
  background: var(--textColor);
  border-radius: 25px;
}

#-modal .switch__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  height: 30px;
  width: 30px;
  background: var(--backgroundColor);
  border-radius: 50%;
  transition: left 150ms ease-out;
}

#-modal .switch__off,
#-modal .switch__on {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  color: var(--backgroundColor);
  position: absolute;
  top: 6px;
  right: 11px;
  transition: right 150ms ease-out, opacity 150ms ease-out;
}

#-modal .switch__off {
  opacity: 1;
}

#-modal .switch__on {
  opacity: 0;
}

/* Checked Switch Styles */
#-modal .switch input:checked + .switch__pill {
  background: var(--primaryColor);
}

#-modal .switch input:checked ~ .switch__dot {
  left: calc(100% - 32px);
}

#-modal .switch input:checked ~ .switch__off {
  right: calc(100% - 32px);
  opacity: 0;
}

#-modal .switch input:checked ~ .switch__on {
  right: calc(100% - 34px);
  opacity: 1;
}

/* Disabled Switch Styles */
#-modal .switch input:disabled + .switch__pill {
  opacity: 0.65;
  cursor: not-allowed;
}

/* --------------------------------
  Modal - Footer
-------------------------------- */
#-modal footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 600px) {
  #-modal footer {
    flex-direction: row;
    align-items: center;
  }
}

#-modal footer a {
  margin-left: auto;
  padding: 14px 0px;
}

/* --------------------------------
  Backdrop
-------------------------------- */
#-backdrop {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--backdropBackgroundColor);
  backdrop-filter: blur(var(--backdropBackgroundBlur));
  pointer-events: all;
}

/* --------------------------------
  Animations
-------------------------------- */
@keyframes -fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes -slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes -slideInDown-center {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 20px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes -slideInDown-bottomCenter {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes -slideInUp-center {
  from {
    opacity: 0;
    transform: translate(0px, 20px);
  }
  to {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}