:root {
    /* Färgpalett */
    --rz-primary: #669933;
    --rz-primary-hover: #496525;
    --rz-secondary: #FCE6CA;
    --rz-body-background-color: #FCE6CA;
    --rz-text-color: #1E1E1E;
    --rz-link-color: #009DE0;
    --rz-link-hover-color: #0075a8;
    --rz-button-background: #009DE0;
    --rz-button-color: #ffffff;
    --rz-button-hover-background: #0075a8;
    --rz-panel-background-color: var(--rz-secondary);
    --rz-grid-header-background: #F5F0E6;
    --rz-grid-header-color: var(--rz-text-color);
}

/* ----------------------------
   Allmänt
----------------------------- */
body {
    background-color: var(--rz-body-background-color);
    color: var(--rz-text-color);
    font-family: "Segoe UI", sans-serif;
    margin: 0;
}

/* Tar bort linjer mellan header/body/footer */
.rz-layout {
    border: none !important;
}

.rz-header, .rz-body, .rz-footer {
    border: none !important;
    box-shadow: none !important;
}

/* ----------------------------
   Header (RadzenHeader)
----------------------------- */
.rz-header {
    background-color: #669933;
    color: white;
    padding: 0.5rem 1rem;
}

    .rz-header .rz-label {
        color: white;
        font-size: 1.3rem;
        font-weight: 600;
    }

.lang-toggle {
    background: transparent;
    border: none;
    font-size: 1.25rem; /* större emoji */
    cursor: pointer;
    line-height: 1;
}

/* ----------------------------
   Sidebar och meny
----------------------------- */
.rz-sidebar {
    background-color: #669933 !important;
    color: white !important;
    width: 220px;
}

/* Menyval */
.rz-navigation-item {
    background-color: #669933 !important;
    color: white !important;
    border: none !important; /* Tar bort svarta linjer */
    border-radius: 0;
}

.rz-navigation-item-link {
    background-color: #669933 !important;
    color: white !important;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    border: none !important;
    box-shadow: none !important;
}

.rz-navigation-item-icon {
    color: white !important;
    margin-right: 0.5rem;
}

.rz-navigation-item-text {
    color: white !important;
    font-weight: 500;
}

/* Hovereffekt */
.rz-navigation-item:hover, .rz-navigation-item-link:hover {
    background-color: #496525 !important;
    color: #C4DF95 !important;
}

    .rz-navigation-item:hover .rz-navigation-item-icon, .rz-navigation-item:hover .rz-navigation-item-text {
        color: #C4DF95 !important;
    }

/* Aktiv menyval */
.rz-navigation-item.rz-state-active, .rz-navigation-item.rz-state-active .rz-navigation-item-link {
    background-color: #496525 !important;
    color: #C4DF95 !important;
}

    .rz-navigation-item.rz-state-active .rz-navigation-item-icon, .rz-navigation-item.rz-state-active .rz-navigation-item-text {
        color: #C4DF95 !important;
    }

/* ----------------------------
   Toggle-knapp (RadzenSidebarToggle)
----------------------------- */
.rz-sidebar-toggle {
    background-color: transparent !important;
    color: white !important;
    border: none !important;
    box-shadow: none !important;
}

    .rz-sidebar-toggle .rz-button {
        background-color: transparent !important;
        color: white !important;
        border: none !important;
        box-shadow: none !important;
    }

    .rz-sidebar-toggle:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

/* ----------------------------
   Footer (RadzenFooter)
----------------------------- */
.rz-footer {
    background-color: #496525;
    color: white;
    padding: 1rem;
    text-align: center;
    border: none !important;
}

/* ----------------------------
   Knapp & komponenter
----------------------------- */
.rz-button, .rz-button.rz-primary {
    background-color: var(--rz-button-background);
    color: var(--rz-button-color);
    border-color: var(--rz-button-background);
}

    .rz-button:hover, .rz-button.rz-primary:hover {
        background-color: var(--rz-button-hover-background);
        border-color: var(--rz-button-hover-background);
    }

.rz-panel .rz-panel-titlebar {
    background-color: var(--rz-primary);
    color: white;
}

.rz-datatable .rz-column-header {
    background-color: var(--rz-grid-header-background);
    color: var(--rz-grid-header-color);
}

.soft-card {
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.hero-card::before {
    content: "";
    background: url('/spindra.png') no-repeat center center;
    background-size: 180px;
    opacity: 0.07;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-card {
    position: relative;
    z-index: 1;
}

.text-primary {
    color: #222;
}

.text-secondary {
    color: #555;
}

.btn-primary {
    background-color: #6aa84f;
    border: none;
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.5s ease-in-out;
    }

.inline-icon {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-right: 8px;
}

.card-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #222;
}

.center-logo {
    display: block;
    margin: 2rem auto;
    max-width: 150px; /* Anpassa efter bildens form */
    height: auto;
    opacity: 0.95;
}

.subtext {
    color: #444;
    font-weight: normal;
    display: block;
    margin-top: 0.25rem;
}

a.rz-button.custom-hover, a.rz-button.custom-hover:hover {
    font-size: 1.1rem;
}

    a.rz-button.custom-hover:hover {
        background-color: #1a83b1 !important;
        color: white !important;
    }

a.rz-link:hover .rz-link-text {
    text-decoration: none !important;
}

/* ----------------------------
   Sidebar
----------------------------- */
/* Vertikal layout: ikon överst, text under */
.rz-sidebar .rz-navigation-item-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    min-width: 76px;
}

/* Stora ikoner */
.rz-sidebar .rz-panel-menu .rz-navigation-item-icon {
    font-size: 48px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-weight: 100;
}

/* Texten under ikonen */
.rz-navigation-item-text {
    font-size: inherit;
    white-space: normal;
    text-align: center;
}

/* Wrap text under ikon i sidomenyn */
.rz-sidebar .rz-navigation-item-text {
    font-size: 0.9rem;
    word-break: break-word;
    max-width: 76px;
}

.role-badge {
    margin-right: 0.25rem; /* ger lite horisontellt avstånd */
    margin-bottom: 0.25rem; /* om du har wrap på raderna */
}


/* ----------------------------
   Signup
----------------------------- */
.signup-hero {
    background: linear-gradient(135deg, var(--rz-primary) 0%, #6fa7ff 100%);
    color: white;
}

    .signup-hero .hero-wrap {
        display: flex;
        gap: 2rem;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .signup-hero .hero-text {
        max-width: 720px;
    }

    .signup-hero .cta-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .75rem;
    }

    .signup-hero .trust-row {
        display: flex;
        align-items: center;
        gap: .5rem;
        opacity: .9;
        margin-top: 1rem;
    }

    .signup-hero .hero-card {
        min-width: 320px;
        max-width: 420px;
        flex: 1 1 360px;
    }

.signup-card {
    background: #fff;
    border-radius: 14px;
}

.logo-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
}

    .logo-strip .logos {
        display: flex;
        gap: 2rem;
        align-items: center;
        flex-wrap: wrap;
        opacity: .8;
    }

    .logo-strip img {
        height: 28px;
    }

.benefits .benefit-card {
    text-align: left;
    border-radius: 14px;
}

.benefit-card i {
    font-size: 28px;
}

.pricing .pricing-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.pricing-list {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
}

    .pricing-list li {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

.price-tag {
    font-weight: 700;
    font-size: 2rem;
    line-height: 1; /* tajtare radavstånd */
    margin: 0;
}

    .price-tag .amount {
        margin-right: .25rem;
    }

    .price-tag .per {
        font-weight: 400;
        font-size: 1rem;
        color: var(--rz-text-secondary-color);
    }

/* Små hjälpklasser */
.block {
    display: block;
}

.benefit-header {
    display: flex;
    align-items: center;
    gap: .5rem; /* avstånd mellan ikon och text */
    margin-bottom: .5rem;
}

    .benefit-header h3 {
        margin: 0; /* ta bort default-top/bottom spacing */
    }

.pricing-cta {
    display: flex;
    flex-direction: column;
    gap: .25rem; /* jämnt litet vertikalt mellanrum */
}

.price-meta small {
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
    line-height: 1; /* tajtare */
    margin: 0;
}

.price-meta.left, .price-tag.left {
    text-align: left;
}

.price-meta.right {
    text-align: right;
}


/* ----------------------------
   Terms (screen)
----------------------------- */

/* Container */
.terms-card {
    overflow: hidden;
}

/* Layout: sidebar + content */
.terms-wrap {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
}

/* Sticky TOC (screen) */
.toc {
    position: sticky;
    top: 1rem;
    align-self: start;
}

    .toc .smallcaps {
        letter-spacing: .06em;
        text-transform: uppercase;
        font-size: .8rem;
    }

    .toc .w-100 {
        width: 100%;
    }

/* TOC look */
.toc-menu .rz-panelmenu-panel {
    border-radius: .75rem;
}

.toc-menu .rz-panelmenu-header {
    font-weight: 500;
}

/* Content */
.terms-content {
    min-width: 0;
}

.terms-section {
    scroll-margin-top: 90px;
}

.section-title {
    margin: 0 0 .5rem 0;
}

/* Divider (screen) */
.rz-divider {
    border: 0;
    border-top: 1px solid var(--rz-border, rgba(0,0,0,.5));
    margin: 1rem 0;
}

.unit-input {
    position: relative;
    display: block;
    width: 100%;
}

    .unit-input .rz-numeric {
        width: 100%;
    }

    /* lägga plats för suffixet så siffrorna inte hamnar under */
    .unit-input input.rz-inputtext {
        padding-right: 4.5rem; /* justera efter textlängd */
    }

/* själva suffixet inne i rutan, högerställd */
.unit-input__suffix {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: .875rem;
    font-style: italic;
    color: var(--rz-text-secondary);
}



/* Mobile */
@media (max-width: 992px) {
    .terms-wrap {
        grid-template-columns: 1fr;
    }

    .toc {
        position: static;
        margin-bottom: 1rem;
    }
}

/* ----------------------------
   Terms (print)
----------------------------- */
@media print {
    /* Vitt papper */
    @page {
        size: A4;
        margin: 10mm;
    }

    html, body, body * {
        background: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Dölj layoutdelar du inte vill skriva ut (om du inte redan gör det) */
    .no-print,
    .rz-sidebar, .rz-topbar, .rz-header, .rz-appbar, .rz-footer, .rz-toolbar,
    header, footer, nav, aside {
        display: none !important;
    }

    /* 🚫 Neutralisera Radzen-skalet som ger den beige ramen */
    .rz-body {
        background: #fff !important; /* slå ut temat (beige) */
        padding: 0 !important; /* ta bort reserverad sidebar-yta */
        margin: 0 !important;
        box-shadow: none !important;
    }

        .rz-body::before,
        .rz-body::after {
            display: none !important;
        }
    /* ifall temat ritar pseudo-ram */

    /* Platta ut huvudcontainrarna */
    .rz-content, .rz-main, .rz-page, .rz-surface, .rz-card, .rz-panel {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Fyll hela sidbredden – ta bort ev. max-width/centrering */
    .rz-content, .rz-main, .rz-page, .container, .rz-container, #terms-print {
        max-width: none !important;
        width: auto !important;
    }

    /* Själva printområdet (om du har dessa sedan tidigare – bra att behålla) */
    #terms-print {
        color: #000 !important;
    }

        #terms-print .terms-wrap {
            display: block !important;
        }

        #terms-print .toc {
            display: none !important;
        }

        #terms-print .terms-header {
            padding: 0 0 8px 0 !important;
            border: 0 !important;
        }

        #terms-print .terms-content, #terms-print .rz-p-4 {
            padding: 0 !important;
        }

        /* Sektioner/sidbrytningar */
        #terms-print .terms-section {
            break-inside: avoid;
            page-break-inside: avoid;
            margin: 0 0 12px 0 !important;
        }

        #terms-print .section-title {
            break-after: avoid;
        }

        /* Divider */
        #terms-print .rz-divider {
            border: 0;
            border-top: 1px solid rgba(0,0,0,.5) !important;
            margin: 10px 0 !important;
        }

    /* Neutralisera Radzens accentfärg i print */
    :root, html, body, .rz-body, #terms-print {
        --rz-text-selection-background-color: transparent !important;
        --rz-text-selection-color: inherit !important;
    }

    /* Säkerställ att ev. selection-stil inte målas i förhandsvisning */
    *::selection,
    *::-moz-selection {
        background: transparent !important;
        color: inherit !important;
    }

    /* Ta bort ev. pseudo-bakgrunder som kan nyttja variabeln */
    .rz-body::before,
    .rz-body::after,
    .rz-page::before,
    .rz-page::after {
        background: none !important;
    }

    [class^="rz-"]::before,
    [class^="rz-"]::after {
        content: none !important;
        display: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    .rz-layout::selection
    {
        background-color: white;
    }

    :root {
        --rz-secondary: #fff !important;
        --rz-body-background-color: #fff !important;
    }

    /* säkerställ att kroppen faktiskt använder variabeln */
    .rz-body,
    html,
    body {
        background: var(--rz-body-background-color) !important;
    }

        /* om temat målar pseudo-bakgrunder med --rz-secondary */
        .rz-body::before,
        .rz-body::after {
            background: none !important;
        }

    /******/
    /******/
    /******/

    /* Låt layouten flöda fritt över flera sidor */
    html, body,
    .rz-body, .rz-content, .rz-main, .rz-page,
    .terms-card, #terms-print {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important; /* <- viktigast */
        position: static !important;
    }

    /* Överstyr skärmregeln som klipper */
    .terms-card {
        display: block !important; /* ifall 'display: contents' testats tidigare */
        overflow: visible !important; /* slog ut overflow:hidden från skärm */
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
        background: transparent !important;
    }

    /* Grid -> kolumn i print (du har redan detta, men säkra) */
    #terms-print .terms-wrap {
        display: block !important;
    }

    /* Tillåt sidbrytningar inne i sektioner (annars kan en lång sektion tvinga allt på en sida) */
    #terms-print .terms-section {
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    #terms-print .section-title {
        break-after: avoid;
    }

    /* --- MULTI-PAGE FIX: neutralisera alla förfäder --- */
    #app, /* Blazors root-div */
    .rz-root,
    .rz-layout,
    .rz-application,
    .rz-content,
    .rz-main,
    .rz-page,
    .rz-body,
    .terms-card,
    #terms-print {
        display: block !important; /* flex/grid kan strula i print */
        position: static !important; /* sticky/fixed/absolute kan kapa sidor */
        overflow: visible !important; /* viktigast: låt innehåll rinna vidare */
        height: auto !important;
        max-height: none !important;
        transform: none !important; /* transforms kan bryta pagination i Chrome */
        contain: none !important; /* slå av CSS containment om temat använder det */
    }
}