.tv-roadmap-path {
    position: relative;
    padding: 40px 0;
    max-width: 900px;
    margin: 0 auto;
}

/* Den vertikale linjen */
.tv-roadmap-path::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 4px;
    height: 100%;
    background: #e2e8f0;
    transform: translateX(-50%);
}

.tv-roadmap-step {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
}

/* Annenhver boks til høyre og venstre */
.tv-roadmap-step:nth-child(even) { left: 50%; }
.tv-roadmap-step:nth-child(odd) { left: 0; text-align: right; }

.tv-roadmap-content {
    background: #ffffff;
    padding: 25px;
    border-radius: 20px; /* Samme som dine andre bokser */
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border-top: 5px solid #6366F1; /* Din Indigo-farge */
}

.tv-roadmap-content:hover { transform: translateY(-5px); }

.tv-badge {
    background: #6366F1;
    color: white;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Status-farger */
.status-ferdig .tv-roadmap-content { border-top-color: #10b981; }
.status-forkastet .tv-roadmap-content { border-top-color: #ef4444; opacity: 0.7; }

/* Midt-prikken */
.tv-status-dot {
    position: absolute;
    top: 30px;
    width: 16px;
    height: 16px;
    background: #6366F1;
    border: 4px solid #fff;
    border-radius: 50%;
    z-index: 2;
}

.tv-roadmap-step:nth-child(odd) .tv-status-dot { right: -10px; }
.tv-roadmap-step:nth-child(even) .tv-status-dot { left: -10px; }

@media (max-width: 768px) {
    .tv-roadmap-path::before { left: 20px; }
    .tv-roadmap-step { width: 100%; left: 0 !important; text-align: left !important; padding-left: 50px; }
    .tv-status-dot { left: 12px !important; }
}

.tv-roadmap-path {
    max-width: 800px; /* Litt smalere for bedre oversikt */
    margin: 40px auto;
}

.tv-roadmap-step {
    padding: 10px 30px; /* Mindre vertikal padding */
}

.tv-roadmap-content {
    padding: 15px 20px; /* Kompakt innhold */
    border-radius: 15px;
    border-top: 4px solid #6366F1;
}

.tv-roadmap-content h3 {
    font-size: 1.1rem !important; /* Mindre tittel */
    margin: 10px 0 5px 0 !important;
}

.tv-roadmap-content p {
    font-size: 0.9rem !important; /* Mindre beskrivelse */
    line-height: 1.4;
    margin-bottom: 10px;
}

.tv-badge {
    font-size: 0.7rem;
    padding: 2px 10px;
    background: #EEF2FF;
    color: #6366F1;
    border: 1px solid #6366F1;
}

.tv-status-footer {
    font-size: 0.75rem;
    color: #64748b;
    border-top: 1px solid #f1f5f9;
    padding-top: 8px;
}

/* Gjør den vertikale linjen tynnere */
.tv-roadmap-path::before {
    width: 2px;
}

.tv-status-dot {
    width: 12px;
    height: 12px;
    top: 25px;
}

/* Container som skjuler skrollbar */
.tv-roadmap-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    cursor: grab;
}

.tv-roadmap-scroll-container {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 20px 50%; /* Gjør at vi kan sentrere første/siste kort */
    scrollbar-width: none; /* Skjul for Firefox */
    -ms-overflow-style: none; /* Skjul for IE/Edge */
}

.tv-roadmap-scroll-container::-webkit-scrollbar {
    display: none; /* Skjul for Chrome/Safari */
}

/* Selve kortene */
.tv-roadmap-card {
    min-width: 280px; /* Kompakt bredde */
    max-width: 280px;
    scroll-snap-align: center;
    position: relative;
}

.tv-roadmap-card-inner {
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-top: 5px solid #6366F1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Den horisontale linjen bak kortene */
.tv-roadmap-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #e2e8f0;
    z-index: -1;
}

.tv-roadmap-card h3 {
    font-size: 1.1rem !important;
    margin: 15px 0 10px 0 !important;
    color: #1e293b;
}

.tv-roadmap-card p {
    font-size: 0.85rem !important;
    color: #64748b;
    line-height: 1.5;
    flex-grow: 1;
}

.tv-badge {
    display: inline-block;
    background: #EEF2FF;
    color: #6366F1;
    padding: 3px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
}

.tv-status-footer {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #94a3b8;
}

/* Statusfarger */
.status-ferdig .tv-roadmap-card-inner { border-top-color: #10b981; }
.status-påbegynt .tv-roadmap-card-inner { border-top-color: #f59e0b; }
.status-forkastet .tv-roadmap-card-inner { border-top-color: #ef4444; opacity: 0.6; }

/* Container som styrer bredden */
.tv-roadmap-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

/* Selve skroll-området */
.tv-roadmap-scroll {
    display: flex !important; /* Tvinger horisontal layout */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 25px;
    padding: 30px 40%; /* Gir luft på sidene så første/siste kan sentreres */
    scrollbar-width: none; /* Skjul for Firefox */
    -ms-overflow-style: none; /* Skjul for IE */
}

.tv-roadmap-scroll::-webkit-scrollbar {
    display: none; /* Skjul for Chrome og Safari */
}

/* Kortene */
.tv-roadmap-card {
    min-width: 300px;
    max-width: 300px;
    scroll-snap-align: center;
    flex-shrink: 0; /* Hindrer kortene i å bli klemt sammen */
}

.tv-roadmap-inner {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-top: 5px solid #6366F1; /* Din Indigo-farge */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tv-date-badge {
    background: #EEF2FF;
    color: #6366F1;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    width: fit-content;
    border: 1px solid #6366F1;
}

.tv-roadmap-inner h3 {
    font-size: 1.15rem !important;
    margin: 15px 0 10px 0 !important;
    line-height: 1.3;
}

.tv-roadmap-inner p {
    font-size: 0.85rem !important;
    color: #64748b;
    line-height: 1.6;
    flex-grow: 1; /* Fyller ut tomrommet */
}

.tv-status-tag {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
}

/* Status-variasjoner */
.status-ferdig .tv-roadmap-inner { border-top-color: #10b981; }
.status-påbegynt .tv-roadmap-inner { border-top-color: #f59e0b; }
.status-forkastet .tv-roadmap-inner { border-top-color: #ef4444; opacity: 0.6; }

/* Container som gir plass til "strikk-effekt" */
.tv-roadmap-container {
    width: 100%;
    overflow: hidden;
    padding: 60px 0; /* Mer luft vertikalt */
    background: transparent;
}

/* Selve skroll-banen */
.tv-roadmap-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    
    /* "Overscroll-behavior" lager den elastiske strikk-følelsen i moderne nettlesere */
    overscroll-behavior-x: contain; 
    -webkit-overflow-scrolling: touch; /* Gir myk skroll på iPhone/iPad */
    
    /* Gir 50% luft på hver side slik at du kan skrolle kortene langt forbi midten */
    padding: 0 50vw; 
    
    gap: 40px;
    scroll-snap-type: x proximity; /* Gjør at kortene "haker" seg fast litt mykere enn 'mandatory' */
    scrollbar-width: none;
}

.tv-roadmap-scroll::-webkit-scrollbar {
    display: none;
}

/* Justering av kortene for å gjøre dem mer "flytende" */
.tv-roadmap-card {
    min-width: 320px;
    max-width: 320px;
    flex-shrink: 0;
    scroll-snap-align: center;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Subtil forstørrelse når du peker på et kort */
.tv-roadmap-card:hover {
    transform: scale(1.03) translateY(-10px);
}

.tv-roadmap-inner {
    background: #ffffff;
    border-radius: 24px; /* Enda rundere for moderne tech-look */
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    border-top: 6px solid #6366F1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* En tynn linje bak kortene som simulerer "veien" i roadmapen */
.tv-roadmap-scroll::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    z-index: -1;
}

/* Container som styrer visningen */
.tv-roadmap-container {
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    position: relative;
}

/* Skroll-området */
.tv-roadmap-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    
    /* Moderne skroll-oppførsel */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; /* Strikk-effekt i endene */
    
    /* Sentrerer "i dag" til venstre med god margin */
    padding-left: 10%; 
    padding-right: 50%; 
    
    gap: 30px;
    scrollbar-width: none;
}

.tv-roadmap-scroll::-webkit-scrollbar {
    display: none;
}

/* Kort-justeringer */
.tv-roadmap-card {
    min-width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center bottom; /* Gjør at den utvider seg oppover kontrollert */
}

/* Hover-effekt som ikke forsvinner ut av bildet */
.tv-roadmap-card:hover {
    transform: translateY(-10px) scale(1.02);
    z-index: 10;
}

.tv-roadmap-inner {
    background: #ffffff;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-top: 5px solid #6366F1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Hovedbeholder */
.tv-roadmap-v-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 50px auto;
    padding: 20px;
    font-family: inherit;
}

/* Den vertikale linjen i midten */
.tv-roadmap-v-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #e2e8f0;
    transform: translateX(-50%);
    z-index: 1;
}

/* Hvert steg i tidslinjen */
.tv-roadmap-v-step {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
    z-index: 2;
}

/* Venstre side */
.tv-roadmap-v-step.left {
    left: 0;
    text-align: right;
}

/* Høyre side */
.tv-roadmap-v-step.right {
    left: 50%;
    text-align: left;
}

/* Streken (Connectoren) inn mot linjen */
.tv-roadmap-v-connector {
    position: absolute;
    top: 50px;
    width: 30px;
    height: 2px;
    background: #6366F1; /* Din lilla farge */
}

.left .tv-roadmap-v-connector { right: 0; }
.right .tv-roadmap-v-connector { left: 0; }

/* Innholdet i kortet */
.tv-roadmap-v-content {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-top: 5px solid #6366F1;
    display: inline-block;
    width: 100%;
    max-width: 350px; /* Gjør kortene mer kompakte */
    transition: transform 0.3s ease;
}

.tv-roadmap-v-content:hover {
    transform: scale(1.02);
}

.tv-v-badge {
    background: #EEF2FF;
    color: #6366F1;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
}

.tv-roadmap-v-content h3 {
    margin: 15px 0 10px 0 !important;
    font-size: 1.1rem !important;
}

.tv-roadmap-v-content p {
    font-size: 0.85rem !important;
    color: #64748b;
    line-height: 1.5;
}

.tv-v-status {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
}

/* Responsivitet for mobil */
@media (max-width: 768px) {
    .tv-roadmap-v-line { left: 20px; }
    .tv-roadmap-v-step { width: 100%; left: 0 !important; text-align: left !important; padding-left: 50px; }
    .tv-roadmap-v-connector { left: 20px !important; width: 20px; }
    .tv-roadmap-v-content { max-width: 100%; }
}

/* --- STATUS-FARGER FOR KORTENE --- */

/* FERDIG (Grønn) */
.status-ferdig .tv-roadmap-v-content {
    border-top: 5px solid #10b981 !important;
}
.status-ferdig .tv-roadmap-v-connector {
    background: #10b981 !important;
}
.status-ferdig .tv-v-status {
    color: #059669;
}

/* PÅBEGYNT (Oransje/Rav) */
.status-påbegynt .tv-roadmap-v-content {
    border-top: 5px solid #f59e0b !important;
}
.status-påbegynt .tv-roadmap-v-connector {
    background: #f59e0b !important;
}
.status-påbegynt .tv-v-status {
    color: #d97706;
}

/* PLANLAGT (Din standard lilla) */
.status-planlagt .tv-roadmap-v-content {
    border-top: 5px solid #6366F1 !important;
}
.status-planlagt .tv-roadmap-v-connector {
    background: #6366F1 !important;
}

/* FORKASTET (Grå/Rødlig) */
.status-forkastet .tv-roadmap-v-content {
    border-top: 5px solid #94a3b8 !important;
    opacity: 0.7;
}
.status-forkastet .tv-roadmap-v-connector {
    background: #94a3b8 !important;
}