:root {
    /* Brand colors */
    --color-brand: #14b8a6;
    --color-brand-50: #f0fdfa;
    --color-brand-100: #ccfbf1;
    --color-brand-500: #14b8a6;
    --color-brand-600: #0d9488;
    --color-brand-700: #0f766e;
    --color-brand-950: #042f2e;
    /* Accent colors */
    --color-accent-50: #fff7ed;
    --color-accent-100: #ffedd5;
    --color-accent-200: #fed7aa;
    --color-accent-400: #fb923c;
    --color-accent-500: #f97316;
    /* Layout */
    --site-container-width-sm: 960px;
    --site-container-width-md: 1120px;
    --site-container-width-lg: 1400px;
    --site-container-width-xl: 1600px;
    --site-container-width: var(--site-container-width-sm);
    --site-container-padding: 2rem;
}


.mobile-menu-icon {
    position: relative;
    display: block;
    width: 20px;
    height: 18px;
}

.mobile-menu-icon span {
    position: absolute;
    left: 0;
    top: 8px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 220ms ease, opacity 160ms ease;
}

.mobile-menu-icon span:first-child { transform: translateY(-6px); }
.mobile-menu-icon span:last-child { transform: translateY(6px); }

#mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:first-child {
    transform: rotate(45deg);
}

#mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

#mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:last-child {
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-icon span { transition: none; }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 56px;
}


@media (min-width: 640px) {
    :root {
        --site-container-padding: 3rem;
    }
}


@media (min-width: 768px) {
    :root {
        --site-container-width: var(--site-container-width-md);
        --site-container-padding: 4rem;
    }
}


@media (min-width: 1024px) {
    :root {
        --site-container-width: var(--site-container-width-lg);
        --site-container-padding: 6rem;
    }
}


@media (min-width: 1920px) {
    :root {
        --site-container-width: var(--site-container-width-xl);
        --site-container-padding: 8rem;
    }
}


.site-container {
    width: min(var(--site-container-width), calc(100% - var(--site-container-padding)));
    margin-inline: auto;
}


.site-container-wide {
    width: min(2400px, calc(100% - var(--site-container-padding)));
    margin-inline: auto;
}


/* =========================================================
   LOADER
========================================================= */

.loader-container {
    position: fixed;
    inset: 0;
    height: 100dvh;
    background-color: var(--loader-overlay);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}


.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--loader-border);
    border-bottom-color: var(--loader-accent);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}


@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* =========================================================
   PRICE SCROLLER
========================================================= */

.priceScroller {
    scroll-behavior: smooth;
    scrollbar-width: none;
}


.priceScroller::-webkit-scrollbar {
    display: none;
}


/*
    Pilene er almindelige HTML buttons.
    Det gør dem browser-kompatible og undgår
    Chrome's native ::scroll-button pile.
*/

.priceScrollerPrev,
.priceScrollerNext {
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}


.priceScrollerPrev:hover:not(:disabled),
.priceScrollerNext:hover:not(:disabled) {
    border-color: var(--color-brand-600);
    background-color: var(--color-brand-50);
    color: var(--color-brand-700);
}


.priceScrollerPrev:disabled,
.priceScrollerNext:disabled {
    opacity: .3;
    cursor: default;
}

[data-slider-prev][hidden],
[data-slider-next][hidden] {
    display: none !important;
}


/* =========================================================
   CMP PLATFORM
========================================================= */

[data-cmp-platform] {
    position: relative;
}


/* -----------------------------------------
   Navigation wrapper

   Indeholder:
   - venstre pil
   - scroller
   - højre pil
----------------------------------------- */

.cmpTabNavigation {
    position: relative;
    width: 100%;
    container-type: inline-size;
    container-name: cmp-tabs;
}


/* -----------------------------------------
   Tab scroller
----------------------------------------- */

.cmpTabScroller {
    --cmp-tab-width: min(70vw, 220px);
    position: relative;
    display: flex;
    width: 100%;
    gap: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: none;
    box-sizing: border-box;
    scrollbar-width: none;
}


.cmpTabScroller::-webkit-scrollbar {
    display: none;
}


/* -----------------------------------------
   NORMAL MODE

   Alle tabs deler hele baren ligeligt.
----------------------------------------- */

.cmpTabScroller > [data-cmp-tab] {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    scroll-snap-align: center;
}


/* -----------------------------------------
   SLIDER MODE

   Bliver kun aktiv når JavaScript tilføjer:
   .is-scrollable
----------------------------------------- */

.cmpTabScroller.is-scrollable {
    --cmp-arrow-space: 40px;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--cmp-arrow-space);
    scroll-padding-inline: var(--cmp-arrow-space);
}


.cmpTabScroller.is-scrollable > [data-cmp-tab] {
    flex: 0 0 var(--cmp-tab-width);
    width: var(--cmp-tab-width);
    min-width: var(--cmp-tab-width);
    overflow: visible;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}


/* =========================================================
   CMP JAVASCRIPT PILE
========================================================= */

.cmpTabArrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 24px;
    height: 24px;
    padding: 0;
    display: none;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #d4d4d8;
    background: white;
    color: #52525b;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}


.cmpTabNavigation:has(.cmpTabScroller.is-scrollable) .cmpTabArrow {
    display: grid;
}


.cmpTabArrowLeft {
    left: 12px;
}


.cmpTabArrowRight {
    right: 12px;
}


.cmpTabArrow:hover:not(:disabled) {
    border-color: var(--color-brand-600);
    background-color: var(--color-brand-50);
    color: var(--color-brand-700);
}


.cmpTabArrow:disabled {
    opacity: .3;
    cursor: default;
}


.cmpTabArrow i {
    display: block;
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}


/* =========================================================
   CMP ACTIVE TAB
========================================================= */

/* Normal mode */

.cmpTabScroller:not(.is-scrollable) [data-cmp-tab][aria-selected="true"] {
    border-color: var(--color-brand-600);
    color: var(--color-brand-700);
    background-color: var(--color-brand-50);
}


.cmpTabScroller:not(.is-scrollable) [data-cmp-tab][aria-selected="false"] {
    border-color: transparent;
    color: #52525b;
    background-color: transparent;
}


/* Slider mode - inactive */

.cmpTabScroller.is-scrollable [data-cmp-tab][aria-selected="false"] {
    color: #52525b;
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}


/* Slider mode - active */

.cmpTabScroller.is-scrollable [data-cmp-tab][aria-selected="true"] {
    color: var(--color-brand-700);
    border-color: var(--color-brand-600);
    background-color: var(--color-brand-50);
    box-shadow: none;
}


/* Neutraliser Tailwind hover på inactive tabs */

.cmpTabScroller.is-scrollable [data-cmp-tab][aria-selected="false"]:hover {
    color: #52525b;
    border-color: transparent;
    background-color: transparent;
}


.cmp-platform-panel {
    touch-action: pan-y;
}


/* =========================================================
   COMPARISON PLAN SCROLLER
========================================================= */

.comparisonPlanScroller {
    --comparison-card-width: min(90vw, 600px);
    position: relative;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-inline: calc((100% - var(--comparison-card-width)) / 2);
    scroll-padding-inline: calc((100% - var(--comparison-card-width)) / 2);
    scrollbar-width: none;
}


.comparisonPlanScroller::-webkit-scrollbar {
    display: none;
}


.comparisonPlanCard {
    flex: 0 0 var(--comparison-card-width);
    width: var(--comparison-card-width);
    min-width: var(--comparison-card-width);
    scroll-snap-align: center;
    scroll-snap-stop: always;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {
    .hero-image {
        display: none;
    }
}


@container cmp-tabs (max-width: 520px) {
    .cmpTabScroller.is-scrollable {
        gap: 0;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    .cmpTabScroller.is-scrollable > [data-cmp-tab] {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        scroll-snap-align: center;
    }

    .cmpTabScroller.is-scrollable [data-cmp-tab][aria-selected="true"] {
        width: 100%;
        background-color: var(--color-brand-50);
        border-color: var(--color-brand-600);
        color: var(--color-brand-700);
    }
}