:root {
    /* RADIUS */
    --radius-sm: 4px;
    --radius-sm-rem: 0.25rem;
    --radius-md: 8px;
    --radius-md-rem: 0.5rem;
    --radius-lg: 12px;
    --radius-lg-rem: 0.75rem;
    --radius-xl: 16px;
    --radius-xl-rem: 1rem;
    --radius-full: 9999px;
    --radius-full-rem: 624.9375rem;
    --radius-sqr: 0px;
    --radius-sqr-rem: 0rem;

    /* SPACE */
    --space-base: 4px;
    --space-base-rem: 0.25rem;
    --space-025: 1px;
    --space-025-rem: 0.0625rem;
    --space-05: 2px;
    --space-05-rem: 0.125rem;
    --space-2: 8px;
    --space-2-rem: 0.5rem;
    --space-3: 12px;
    --space-3-rem: 0.75rem;
    --space-4: 16px;
    --space-4-rem: 1rem;
    --space-5: 20px;
    --space-5-rem: 1.25rem;
    --space-6: 24px;
    --space-6-rem: 1.5rem;
    --space-8: 32px;
    --space-8-rem: 2rem;
    --space-10: 40px;
    --space-10-rem: 2.5rem;
    --space-12: 48px;
    --space-12-rem: 3rem;
    --space-16: 64px;
    --space-16-rem: 4rem;
    --space-20: 80px;
    --space-20-rem: 5rem;

    /* BORDER */
    --border-sm: 1px;
    --border-sm-rem: 0.0625rem;
    --border-md: 1.5px;
    --border-md-rem: 0.0938rem;
    --border-lg: 2px;
    --border-lg-rem: 0.125rem;

    /* MOTION */
    --motion-duration-fast-1: 100ms;
    --motion-duration-fast-2: 150ms;
    --motion-duration-fast-3: 250ms;
    --motion-duration-medium-1: 300ms;
    --motion-duration-medium-2: 350ms;
    --motion-duration-medium-3: 400ms;
    --motion-duration-slow-1: 450ms;
    --motion-duration-slow-2: 500ms;
    --motion-duration-slow-3: 550ms;
    --motion-duration-long-1: 650ms;
    --motion-duration-long-2: 800ms;
    --motion-duration-long-3: 1000ms;

    --motion-easing-hard-enter: cubic-bezier(0, 1, 0.58, 1);
    --motion-easing-hard-exit: cubic-bezier(1, 0, 1, 0.47);
    --motion-easing-soft-enter: cubic-bezier(0, 0.38, 0.58, 1);
    --motion-easing-soft-exit: cubic-bezier(0.41, 0, 1, 0.81);
    --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);
    --motion-easing-hard-ease-in-out: cubic-bezier(0.8, 0, 0.2, 1);
    --motion-easing-soft-ease-in-out: cubic-bezier(0.66, 0, 0.46, 1);
}


a {
    text-underline-offset: 3px;
}

.baseAlert {
    position: relative;
    display: flex;
    align-items: start;
    padding: var(--space-3, 12px);
    gap: var(--space-2, 8px);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-secondary);
    font-family: var(--font-family-body);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.baseAlert__close,
.baseAlert__close:hover,
.baseAlert__close:focus {
    text-decoration: none;
    color: inherit;
    font-size: 18px;
}

.baseAlert i {
    margin-top: 4px;
}
.baseAlert.baseAlert--success {
    background-color: var(--action-success-lightest);
}
.baseAlert.baseAlert--success i {
    color: var(--action-success-darkest);
}

.baseAlert.baseAlert--warn {
    background-color: var(--action-warning-lightest);
}
.baseAlert.baseAlert--warn i {
    color: var(--action-warning-darkest);
}

.baseAlert.baseAlert--error {
    background-color: var(--action-error-lightest);
}
.baseAlert.baseAlert--error i {
    color: var(--action-error-darkest);
}

.baseAlert.baseAlert--important {
    background-color: var(--action-info-lightest);
}
.baseAlert.baseAlert--important i {
    color: var(--action-info-darkest);
}
.baseAlert.baseAlert--disclaimer {
    background-color: var(--background-secondary);
}
.baseAlert.baseAlert--disclaimer i {
    color: var(--text-quaternary);
}

.baseAlert--container.campaign-alert {
    font-size: 12px;
    line-height: 16px;
}

/* TOAST */

.baseToast {
    /* TODO: Adjust if absolute to body / container */
    position: fixed;
    top: calc(var(--header-height) + 25px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: start;
    justify-content: space-between;
    padding: var(--space-3, 12px);
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--green-200);
    box-shadow: 0px 8px 12px 0px rgba(13, 13, 13, 0.1);
    color: var(--text-secondary);
    font-family: var(--font-family-body);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    width: 95%;
}

@media (min-width: 768px) {
    .baseToast {
        width: 720px;
    }
}
@media (min-width: 992px) {
    .baseToast {
        width: 940px;
    }
}
@media (min-width: 1200px) {
    .baseToast {
        width: 1140px;
    }
}
.baseToast i {
    margin-right: 8px;
    color: var(--text-secondary);
}

.baseToast i {
    margin-top: 4px;
}
.baseToast--success {
    background-color: var(--action-success-lightest);
}
.baseToast--success i {
    color: var(--action-success-darkest);
}

.baseToast--warn {
    background-color: var(--action-warning-lightest);
}
.baseToast--warn i {
    color: var(--action-warning-darkest);
}

.baseToast--error {
    background-color: var(--action-error-lightest);
}
.baseToast--error i {
    color: var(--action-error-darkest);
}

.baseToast--important {
    background-color: var(--action-info-lightest);
}
.baseToast--important i {
    color: var(--action-info-darkest);
}
.baseToast--disclaimer {
    background-color: var(--background-secondary);
}
.baseToast--disclaimer i {
    color: var(--text-quaternary);
}

/* BUTTONS */

/* TODO:DEL */
.btnContainer button {
    margin-bottom: 12px;
}

.tadBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-md, 8px);
    border: none;
    font-family: var(--font-family-title);
    font-style: normal;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.tadBtn:has(i) {
    gap: 5px;
}

.tadBtn:hover,
.tadBtn:focus,
.tadBtn:active {
    text-decoration: none;
}

/* primary color */
.tadBtn.tadBtn--primary {
    background: var(--cta-primary-default);
    color: var(--cta-primary-label);
}
.tadBtn.tadBtn--primary:hover {
    background: var(--cta-primary-hover);
}
.tadBtn.tadBtn--primary:focus {
    background: var(--cta-primary-hover);
    box-shadow:
        0px 0px 0px 4px var(--surface-highlight),
        0px 0px 0px 6px var(--cta-primary-pressed);
}
.tadBtn.tadBtn--primary:active {
    background: var(--cta-primary-pressed);
}

/* secondary color */
.tadBtn.tadBtn--secondary {
    border: 1.5px solid var(--cta-secondary-default);
    background-color: transparent;
    color: var(--cta-secondary-label);
}
.tadBtn.tadBtn--secondary:hover {
    border: 1.5px solid var(--cta-secondary-default);
    outline: 0.5px solid var(--cta-secondary-default);
    color: var(--cta-secondary-label-hovered);
}
.tadBtn.tadBtn--secondary:focus {
    border: 1px solid var(--cta-secondary-default);
    outline: 1px solid var(--cta-secondary-default);
    background: var(--surface-primary);
    box-shadow:
        0px 0px 0px 4px var(--surface-highlight),
        0px 0px 0px 6px var(--cta-primary-pressed);
}
.tadBtn.tadBtn--secondary:active {
    border: none;
    outline: 1.5px solid var(--cta-secondary-pressed);
}

/* tertiary */
.tadBtn.tadBtn--tertiary {
    background: var(--cta-tertiary-default);
    color: var(--cta-tertiary-label);
}
.tadBtn.tadBtn--tertiary:hover {
    background: var(--cta-tertiary-hover);
    color: var(--cta-tertiary-label-hovered);
}
.tadBtn.tadBtn--tertiary:focus {
    background: var(--cta-tertiary-focus);
    box-shadow:
        0px 0px 0px 4px var(--surface-highlight),
        0px 0px 0px 6px var(--cta-primary-pressed);
}
.tadBtn.tadBtn--tertiary:active {
    background: var(--cta-tertiary-pressed);
}

/* tertiary-dark on-media*/
.blackbg {
    padding: 20px;
    background-color: black;
}
.tadBtn.tadBtn--on-media {
    border: 1.5px solid var(--cta-onmedia-default-border);
    background: var(--cta-onmedia-default-bg);
    color: var(--cta-onmedia-label);
}
.tadBtn.tadBtn--on-media:hover {
    outline: 2px solid var(--cta-onmedia-default-border);
    background: var(--cta-onmedia-hover);
    border-radius: var(--radius-md, 8px);
}

.tadBtn.tadBtn--on-media:focus {
    border-radius: var(--radius-sm, 4px);
    outline: 1.5px solid var(--cta-onmedia-default-border);
    background: var(--cta-onmedia-focus);
    box-shadow: 0px 0px 0px 4px var(--cta-primary-focus);
}
.tadBtn.tadBtn--on-media:active {
    outline: 1.5px solid var(--cta-onmedia-default-border);
    background: var(--cta-onmedia-pressed);
}

.tadBtn--text {
    text-decoration: underline;
    text-underline-offset: 4px;
    border: none;
    background: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--cta-primary-focus);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    /* white-space: nowrap; */
    border-radius: var(--radius-sm, 4px);
    padding: 4px;
    text-align: left;
}

.tadBtn--text:has(i),
.tadBtn--text:has(i) > span {
    text-decoration: none !important;
}
.tadBtn--text:hover {
    background: var(--statelayer-default);
    color: inherit;
}
.tadBtn--text:active {
    background: var(--statelayer-pressed);
}
.tadBtn--text:focus {
    background: var(--statelayer-focus);
    box-shadow:
        0px 0px 0px 4px var(--surface-highlight),
        0px 0px 0px 6px var(--cta-primary-pressed);
}
.tadBtn.tadBtn--text:hover,
.tadBtn.tadBtn--text:visited,
.tadBtn.tadBtn--text:focus {
    color: inherit;
    text-decoration: underline;
}

/* btn size */

.tadBtn.tadBtn--xl {
    padding: 0px var(--space-4, 16px);
    line-height: 32px;
    font-size: 20px;
    height: 52px;
}
.tadBtn.tadBtn--l {
    padding: 0px var(--space-4, 16px);
    line-height: 24px;
    font-size: 18px;
    height: 48px;
}
.tadBtn.tadBtn--m {
    padding: 0px var(--space-3, 12px);
    line-height: 24px;
    font-size: 16px;
    height: 44px;
}
.tadBtn.tadBtn--s {
    padding: 0 var(--space-3, 12px);
    line-height: 20px;
    font-size: 14px;
    height: 36px;
}
.tadBtn.tadBtn--xs {
    padding: 0 var(--space-2, 8px);
    line-height: 20px;
    font-size: 14px;
    border-radius: var(--radius-m, 8px);
    height: 34px;
}

/* Chevron Btn */
.chevronButton {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 99px;
    border: 1px solid var(--border-emphasis);
    background: var(--background-primary);
    color: var(--icon-neutral);
}

.chevronButton.disabled {
    pointer-events: none;
    opacity: 0.2;
}

/* RADIO */
.baseRadioButton {
    display: flex;
    align-items: center;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    margin: 0;
    cursor: pointer;
}
.baseRadioButton__dotContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--background-primary);
    border: 2px solid var(--border-emphasis);
    border-radius: 99px;
    margin-right: 10px;
}
.baseRadioButton__dot {
    width: 12px;
    height: 12px;
    border-radius: 99px;
    background: var(--border-emphasis);
}
.baseRadioButton > input[type='radio']:checked + .baseRadioButton__dotContainer {
    border-color: var(--brand-400);
}
.baseRadioButton > input[type='radio']:checked + .baseRadioButton__dotContainer .baseRadioButton__dot {
    background: var(--brand-400);
}

.baseRadioButton > input[type='radio']:not(:checked) + .baseRadioButton__dotContainer .baseRadioButton__dot {
    visibility: hidden;
}

.baseRadioButton:not(.checked):hover .baseRadioButton__dotContainer {
    border: 2px solid var(--border-hover);
}
.baseRadioButton:not(.checked):hover .baseRadioButton__dot {
    background-color: var(--border-hover);
}
.baseRadioButton.inactive .baseRadioButton__dotContainer {
    border: 2px solid var(--surface-tertiary);
}
.baseRadioButton.inactive .baseRadioButton__dot {
    background-color: var(--surface-tertiary);
}
.baseRadioButton.error .baseRadioButton__dotContainer {
    border: 2px solid var(--action-error-darkest);
}
.baseRadioButton.error .baseRadioButton__dot {
    background-color: var(--action-error-darkest);
}

/* Checkbox */
/* Requires hidden input to trigger checked */
.baseCheckbox {
    display: flex;
    align-items: center;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    margin: 0;
    cursor: pointer;
    text-transform: capitalize;
}
.baseCheckbox__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-emphasis);
    background: var(--background-primary);
    border-radius: 3px;
    font-size: 10px;
    color: white;
    margin-right: 10px;
    flex-shrink: 0;
}
.baseCheckbox.checked .baseCheckbox__icon,
#strictAgeRequirement:checked + .baseCheckbox__icon {
    background: var(--primary-default);
    border-color: var(--primary-default);
}

/* PILL */
.basePill {
    display: inline-block;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: var(--neutral-800);
    border: 1px solid var(--border-default);
    background: var(--surface-primary);
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
}

.basePill.basePill--default {
    border: 1px solid var(--border-default);
    background: var(--surface-primary);
}

.basePill.basePill--teal {
    background-color: var(--surface-highlight);
    border: 1px solid var(--brand-400);
}

.basePill__label {
    color: var(--text-secondary);

}
.basePill i {
    padding-left: 10px;
}

/* Toggle */
.segmentedToggle {
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-secondary);
    padding: var(--space-2, 8px);
    display: flex;
    gap: 8px;
    /* wrap in container of desired width */
    width: 100%;
}

.segmentedToggle__button {
    flex: 1 0 0;
    border-radius: var(--radius-md, 8px);
    display: flex;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    text-align: center;
    font-family: var(--font-family-title);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
}

.segmentedToggle__button {
    background: linear-gradient(to right, var(--surface-secondary) 50%, var(--cta-primary-default) 50%);
    background-size: 201% 100%;
    background-position: 0% 50%;
    color: var(--text-tertiary);
    /* transition: background-position 0.3s ease, color 0.3s ease; */
}

.segmentedToggle__button.selected {
    background-position: right bottom;
    color: var(--cta-primary-label);
}

.segmentedToggle__button:not(.selected):hover {
    background: var(--cta-tertiary-hover);
}

.segmentedToggle__button:nth-of-type(2) {
    background: linear-gradient(to left, var(--surface-secondary) 51%, var(--cta-primary-default) 49%);
    background-size: 200% 100%;
    background-position: 99% 50%;
}
.segmentedToggle__button:nth-of-type(2).selected {
    background-position: left bottom;
    background: linear-gradient(to left, var(--surface-secondary) 50%, var(--cta-primary-default) 50%);
    background-size: 200% 100%;
   color: var(--cta-primary-label);
}
/* TABS */

.baseTabs {
    display: flex;
    border-bottom: 1px solid var(--border-emphasis);
}

.baseTab {
    display: flex;
    height: 56px;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    color: var(--text-tertiary);
    font-family: var(--font-family-body);
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}

.baseTab.active {
    font-weight: 700;
    border-bottom: 2px solid var(--icon-neutral);
}

/* Carousel Component */
.baseCarousel {
    position: relative;
}

.baseCarousel__track {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    width: 100%;
    overflow: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 0px;
}

.baseCarousel__track > * {
    flex-shrink: 0;
    flex-grow: 0;
    scroll-snap-align: center;
}

.baseCarousel__control {
    display: flex;
    align-items: center;
    justify-content: center;
}

.baseCarousel__indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.baseCarousel__carouselButtons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.baseCarousel__indicator {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background-color: var(--surface-focus);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}
.baseCarousel__indicator.active {
    width: 24px;
    background-color: var(--surface-dark);
}

/* Hide scrollbars for WebKit browsers (Chrome, Safari, Edge) */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbars for Firefox */
.hide-scrollbar {
    scrollbar-width: none; /* For Firefox */
}

/* Hide scrollbars for Internet Explorer and Edge Legacy */
.hide-scrollbar {
    -ms-overflow-style: none; /* For Internet Explorer and Edge Legacy */
}

@media (min-width: 992px) {
    .baseCarousel__control {
        justify-content: space-between;
    }
    .baseCarousel__indicators {
        transform: translateX(44px);
    }
}