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

/* --------------------------------
 Global Styles
-------------------------------- */
/* Wrapper (Global) */
#stcm-wrapper {
 --boxShadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a;
 --fontFamily: Helvetica Neue, Segoe UI, Arial, sans-serif;
 --primaryColor: #F9D000;
 --backgroundColor: #050505;
 --textColor: #F4F0DF;
 --backdropBackgroundColor: #00000077;
 --backdropBackgroundBlur: 0px;
 --iconColor: #050505;
 --iconBackgroundColor: #F9D000;
 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;
}

/* --------------------------------
Links
-------------------------------- */
#stcm-wrapper a {
 all: unset;
 display: inline-block;
 color: var(--primaryColor);
 text-decoration: underline;
}

#stcm-wrapper a:hover {
 cursor: pointer;
 color: var(--textColor);
}

/* --------------------------------
Focus Styles
-------------------------------- */
#stcm-wrapper a:focus,
#stcm-wrapper #stcm-banner button:focus,
#stcm-wrapper #stcm-modal button:focus,
#stcm-wrapper #stcm-icon:focus {
 outline: none;
 box-shadow: 0 0 0 2px var(--backgroundColor), 0 0 0 4px #ffffff;
 border-radius: 5px;
}

#stcm-wrapper #stcm-icon:focus {
 border-radius: 50%;
}

/* --------------------------------
General Styles
-------------------------------- */
#stcm-wrapper .stcm-button {
 color: var(--backgroundColor);
 background-color: var(--primaryColor);
 border: 2px solid var(--primaryColor);
 padding: 10px 20px;
 text-decoration: none;
 text-align: center;
 display: inline-block;
 font-size: 16px;
 line-height: 24px;
 cursor: pointer;
 border-radius: 5px;
}

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

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

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

/* --------------------------------
Banner
-------------------------------- */
#stcm-banner {
 font-family: var(--fontFamily);
 color: var(--textColor);
 background-color: var(--backgroundColor);
 box-sizing: border-box;
 padding: 32px;
 border-radius: 12px;
 pointer-events: auto;
 border: 0px;
 position: fixed;
 bottom: 16px;
 right: 16px;
 width: 600px;
 overflow: auto;
 max-width: calc(100% - 32px);
 max-height: calc(100vh - 32px);
 transform: translate(0, -20px);
 opacity: 0;
 animation: stcm-slide-down 350ms ease-out;
 animation-delay: 0.3s;
 box-shadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a;
}

#stcm-banner.stcm-loaded {
 opacity: 1;
 transform: none;
 animation: none;
}

#stcm-banner:focus {
 border-radius: 50%;
}

#stcm-banner.stcm-pos-center {
 top: 50%;
 left: 50%;
 bottom: auto;
 right: auto;
 position: fixed;
 transform: translate(-50%, calc(-50% - 20px));
 animation: stcm-slide-down-center 350ms ease-out forwards;
}

#stcm-banner.stcm-pos-bottom-left {
 bottom: 16px;
 left: 16px;
 position: fixed;
}

#stcm-banner.stcm-pos-bottom-center {
 bottom: 16px;
 left: 50%;
 position: fixed;
 transform: translate(-50%, -20px);
 animation: stcm-slide-down-bottom-center 350ms ease-out forwards;
}

#stcm-banner .stcm-preferences-button {
 display: flex;
 gap: 5px;
 border: none;
 padding: 15px 0px;
 background-color: transparent;
 color: var(--primaryColor);
 cursor: pointer;
 font-size: 16px;
}

#stcm-banner .stcm-preferences-button span {
 display: block;
 white-space: nowrap;
 text-decoration: none;
}

#stcm-banner .stcm-preferences-button span:hover {
 color: var(--textColor);
}

#stcm-banner p {
 font-size: 16px;
 line-height: 24px;
 color: var(--textColor);
 margin: 0px 0px 15px;
}

#stcm-banner a {
 display: inline-block;
 color: var(--primaryColor);
 text-decoration: underline;
 background-color: var(--backgroundColor);
}

#stcm-banner a:hover {
 color: var(--textColor);
}

#stcm-banner a.stcm-logo {
 display: flex;
 align-items: center;
 justify-content: center;
 fill: var(--primaryColor); /* passed down to svg > path */
 margin-left: auto;
 width: 48px;
 height: 48px;
 text-decoration: none;
}

#stcm-banner .stcm-actions {
 display: flex;
 gap: 16px;
 flex-direction: column;
 margin-top: 24px;
}

@media (min-width: 600px) {
 #stcm-banner .stcm-actions {
 flex-direction: row;
 align-items: center;
 }
}

#stcm-banner .stcm-actions-row {
 display: flex;
 gap: 16px;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 flex-grow: 1;
}

/* --------------------------------
Modal
-------------------------------- */
#stcm-modal {
 display: none;
 pointer-events: auto;
 overflow: auto;
 width: 800px;
 max-width: 100%;
 max-height: 100%;
 border: 0px;
 transform: translate(0px, -20px);
 opacity: 0;
 animation: stcm-slide-up-center 350ms ease-out forwards;
 box-shadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a;
 font-family: var(--fontFamily);
 color: var(--textColor);
 flex-direction: column;
 padding: 30px;
 background-color: var(--backgroundColor);
 border-radius: 12px;
 box-sizing: border-box;
}

/* --------------------------------
Modal - Header
-------------------------------- */
#stcm-modal header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 20px;
 gap: 16px;
}

#stcm-modal h1 {
 font-family: var(--fontFamily);
 color: var(--textColor);
 font-size: 24px;
 font-weight: 500;
 margin: 0px;
}

#stcm-modal .stcm-modal-close {
 display: inline-flex;
 border: none;
 padding: 13px;
 cursor: pointer;
 background: var(--backgroundColor);
 color: var(--primaryColor);
}

#stcm-modal .stcm-modal-close svg {
 fill: var(--primaryColor);
}

/* --------------------------------
Modal - Content
-------------------------------- */
#stcm-modal section {
 flex: 1;
 margin-top: 32px;
}

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

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

#stcm-modal p {
 font-size: 16px;
 line-height: 24px;
 color: var(--textColor);
 opacity: 0.6;
 margin: 0px 0px 15px;
}

#stcm-modal p:last-of-type {
 margin: 0px;
}

#stcm-modal fieldset {
 padding: 0px;
 border: none;
 margin: 0px 0px 32px;
}

#stcm-modal fieldset:last-of-type {
 margin: 0px;
}

#stcm-modal legend {
 padding: 0px;
 margin: 0px 0px 10px;
 font-weight: 700;
 color: var(--textColor);
 font-size: 16px;
}

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

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

#stcm-modal .stcm-toggle:focus-within {
 outline: none;
 box-shadow: 0 0 0 2px var(--backgroundColor), 0 0 0 4px #ffffff;
 border-radius: 25px;
}

#stcm-modal .stcm-toggle input {
 opacity: 0;
 position: absolute;
}

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

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

#stcm-modal .stcm-toggle-off,
#stcm-modal .stcm-toggle-on {
 text-transform: uppercase;
 font-size: 15px;
 font-weight: 500;
 color: var(--backgroundColor);
 position: absolute;
 top: 5px;
 right: 8px;
 transition: right 150ms ease-out, opacity 150ms ease-out;
}

#stcm-modal .stcm-toggle-off {
 opacity: 1;
}

#stcm-modal .stcm-toggle-on {
 opacity: 0;
}

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

#stcm-modal .stcm-toggle input:checked ~ .stcm-toggle-thumb {
 left: calc(100% - 32px);
}

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

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

#stcm-modal .stcm-toggle input:disabled + .stcm-toggle-track {
 opacity: 0.65;
 filter: grayscale(100%);
 cursor: not-allowed;
}

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

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

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

#stcm-modal footer a.stcm-credit-link {
 text-decoration: none;
}

#stcm-modal footer a.stcm-credit-link:hover {
 text-decoration: underline;
}

/* Cookie Icon */
#stcm-icon {
 display: none;
 position: fixed;
 bottom: 10px;
 left: 10px;
 justify-content: center;
 align-items: center;
 width: 60px;
 height: 60px;
 border-radius: 50%;
 padding: 0px;
 border: none;
 background-color: #ffffff;
 cursor: pointer;
 box-shadow: 0px 0px 6px 0px #0000001a;
 pointer-events: auto;
 animation: stcm-fade-in 0.3s ease-in-out forwards;
}

#stcm-icon.stcm-pos-bottom-right {
 left: auto;
 right: 10px;
}

#stcm-icon svg {
 /* Use colors defined inside the SVG so the cookie graphic is visible */
}

/* --------------------------------
Backdrop
-------------------------------- */
#stcm-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 stcm-fade-in {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}

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

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

@keyframes stcm-slide-down-bottom-center {
 from {
 opacity: 0;
 transform: translate(-50%, -20px);
 }
 to {
 opacity: 1;
 transform: translate(-50%, 0);
 }
}

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

/* --------------------------------
Animation - backdrop click feedback
-------------------------------- */
@keyframes stcm-nudge {
 0%, 100% { right: 16px; }
 10%, 30%, 50%, 70%, 90% { right: 20px; }
 20%, 40%, 60%, 80% { right: 12px; }
}

/* Apply to banner */
#stcm-banner.stcm-nudge {
 animation: stcm-nudge 1s ease-in-out;
}

/* Apply to modal */
#stcm-modal.stcm-nudge {
 animation: stcm-nudge 0.5s ease-in-out;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
 #stcm-banner.stcm-nudge,
 #stcm-modal.stcm-nudge {
 animation: stcm-pulse 0.5s ease-in-out;
 }
 
 @keyframes stcm-pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.85; }
 }
}