/* main.css — single-file stylesheet (hand-authored from here on). */
/* Generated once by concatenating the former per-component sheets. */
/* Third-party CSS (bootstrap, nouislider, jquery-ui) stays separate. */

/* ====================================================================== */
/* SOURCE: globalStyles.css */
/* ====================================================================== */

:root {
    /* Inspiration drawn from Dabea */
    --company-dark: rgb(6, 17, 72);
    --company-blue: rgb(45, 75,242);
    /* Set the actual color. A slightly darker variant of bs-primary */
    /* Set the raw RGB values (needed for Bootstrap's internal opacity calculations) */
    --bs-primary-rgb: 45, 75, 242;
    --bs-primary: rgb(45, 75, 242);

    /* Optional: Update links to match */
    --bs-link-color: rgb(45, 75, 242);
    --bs-link-hover-color: rgb(35, 60, 200); /* A bit darker for hover */
    /* Tell Bootstrap to use your color for all headings */
    --bs-heading-color: var(--company-dark);
    --bs-card-title-color: var(--company-dark);
    --bs-card-color: var(--company-dark);

    /* Overwrite this to actually apply custom font-family*/
    /*--bs-body-font-family: 'Lato', sans-serif;*/
}

/* Force .btn-primary to use your specific Company Blue shades */
.btn-primary {
    /* 1. Normal State */
    --bs-btn-bg: rgb(45, 75, 242);
    --bs-btn-border-color: rgb(45, 75, 242);

    /* 2. Hover State (Much Darker Blue) */
    /* Changed from (35, 65, 222) to (20, 50, 200) for better contrast */
    --bs-btn-hover-bg: rgb(20, 50, 200);
    --bs-btn-hover-border-color: rgb(20, 50, 200);

    /* 3. Active/Click State (Deep Navy Blue) */
    --bs-btn-active-bg: rgb(10, 35, 160);
    --bs-btn-active-border-color: rgb(10, 35, 160);

    /* 4. Disabled State */
    --bs-btn-disabled-bg: rgb(45, 75, 242);
    --bs-btn-disabled-border-color: rgb(45, 75, 242);

    /* Optional: Add a smooth transition so the color doesn't just "snap" */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.1s;
}

/* Optional: Make it physically "press" or "lift" to make it super obvious */
.btn-primary:hover {
    /* Adds a subtle lift effect */
    box-shadow: 0 4px 6px rgba(45, 75, 242, 0.25);
}

.btn-primary:active {
    box-shadow: none;
}

/* Optional: Fix the Outline version too */
.btn-outline-primary {
    --bs-btn-color: rgb(45, 75, 242);
    --bs-btn-border-color: rgb(45, 75, 242);

    --bs-btn-hover-bg: rgb(45, 75, 242);
    --bs-btn-hover-border-color: rgb(45, 75, 242);
    --bs-btn-active-bg: rgb(45, 75, 242);
    --bs-btn-active-border-color: rgb(45, 75, 242);
}


body {
    /*TODO: overvej font. Synes den nederste gør frontpage pænere, men den øverste gør de andre views pænere? hmm*/
    /*font-family: Arial, sans-serif;*/
    /*--font-primary: 'Inter', sans-serif;*/
    --font-primary: 'Lato', sans-serif;
    margin: 0;

    /* TODO vælg én */
    /* Lidt blå */
/*    background-color: rgb(242,243,249);*/
    /* Meget blå */
    background-color: rgb(235,239,247);
    /*background-color: #f0f0f0; !* Light grey background *!*/
    /*background-color: #f8f9fa; !* Light grey background *!*/

    --brand-color: #2c3e50;
    padding: 66px 0 0;
    color: var(--company-dark);
}

/*background-color: #f0f0f0;*/
/*background-color: rgb(242,243,249);*/
/*background-color: #f8f9fa;*/

.custom-shadow {
    box-shadow: rgba(0, 0, 0, 0.07) 0 1px 15px, rgba(0, 0, 0, 0.07) 0 1px 6px;
}

#root {
    background-color: transparent;
    width: 100%;
    min-height: 100vh;
}


.company-blue {
   color: rgb(45, 75, 242);
}

.company-dark {
    color: var(--company-dark);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--company-dark);
}

    .pointer-cursor:hover {
        cursor: pointer;
    }

    .read-only-form .form-control {
        background-color: #e9ecef; /* Light grey background */
        cursor: not-allowed; /* Change cursor to indicate non-editable */
        pointer-events: none; /* Disable all pointer events */
    }

    /* In your read-only forms, keep switches looking “active” even when disabled */
    .read-only-form .form-check-input:disabled {
        /* cancel Bootstrap’s dimming */
        opacity: 1 !important;
        /* still show the “not-allowed” cursor */
        cursor: not-allowed;
        /* disable any focus glow */
        box-shadow: none;
    }

    /* When checked, keep the primary blue track and thumb */
    .read-only-form .form-check-input:disabled:checked {
        background-color: #0d6efd;       /* Bootstrap primary */
        border-color:    #0d6efd;
    }

    /* If you want the little knob (thumb) to stay white at 100% opacity */
    .read-only-form .form-check-input:disabled:checked::before {
        background-color: #fff;
        opacity: 1;
    }

    /* Optional: keep the label colour as you like */
    .read-only-form .form-check-label {
        color: #495057; /* e.g. default Bootstrap body-text colour */
    }

    /* force labels for disabled switches back to full opacity */
    .read-only-form .form-check-input:disabled + .form-check-label {
        opacity: 1 !important;
        color: #212529;            /* or whatever text color you prefer */
        cursor: not-allowed;       /* keeps the “no-click” cursor */
    }


    .modal.show {
        animation: fadeIn 0.3s;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .btn.action-button {
        background-color: #2c3e50;
        color: white;
        border: none;
    }

    .btn.action-button:hover {
        background-color: #34495e;
    }


    /* single-line ellipsis */
    .text-truncate-lines-1 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .text-truncate-lines-2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        text-overflow: ellipsis;
    }



    /* multi-line ellipsis (3 lines here, adjust as you like) */
    .text-truncate-lines-3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        text-overflow: ellipsis;
    }

    .payment-button {
        background: linear-gradient(135deg, #f8cdda 0%, #1d2b64 100%);
        border: none;
        border-radius: 999px;
        font-weight: 600;
        font-size: 1rem;
        padding: 0.50rem 1.50rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        cursor: pointer;
        display: inline-block;
        text-align: center;
        text-decoration: none;
    }

    .payment-button:hover {
        /* keep text white */
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    .payment-button:active {
        /* keep text white */
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    button.payment-button,
    button.payment-button:hover,
    button.payment-button:active,
    button.payment-button:focus {
        color: white !important;
    }

    /* 1. Make all .container’s stop growing past 1500px */
    .container {
        width: 100%;
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 2. If you want a little side-padding on small viewports */
    @media (max-width: 576px) {
        .container {
            padding-left: 1rem;
            padding-right: 1rem;
        }
    }

    .nice-lead {
        color: rgb(75, 85, 99);
        font-size: 20px;
        line-height: 32px
    }

    .nice-text {
        color: rgb(75, 85, 99);
        font-size: 18px;
        line-height: 32px
    }

    .hover-shadow {
        transition: box-shadow 0.3s ease;
    }

    .hover-shadow:hover {
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.08);
    }

.hover-shadow-subtle {
    transition: box-shadow 0.3s ease;
}

.hover-shadow-subtle:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.ai-icon {
    background: linear-gradient(135deg, #4f46e5, #8b5cf6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}


.hover-lift {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-block; /* Required for transform to work on inline elements */
    will-change: transform;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

/* --- Unified View Header Standard --- */

/* Base H1 for all main views */
.view-title {
    color: var(--company-dark);     /* Deep Navy: Authority */
    font-family: var(--font-primary);
    font-weight: 800;               /* Extra Bold: Institutional Trust */
    letter-spacing: -0.5px;         /* Tighter tracking: Modern Fintech feel */
    line-height: 1.2;
}

/* The Highlight Span (The "Subject" of the page) */
.view-title-highlight {
    color: var(--bs-primary);       /* Royal Blue: Action/Brand */
    position: relative;
    display: inline-block;          /* Required for absolute positioning of decorations */
}

/* --- Global App Loader --- */
#app-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8faff;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Start invisible and non-interactive */
    opacity: 0;
    pointer-events: none;

    /* Ensure transitions happen for both fade-in and fade-out */
    transition: opacity 0.4s ease-out;
}

/* The class that makes it visible */
#app-loader.show-loader {
    opacity: 1;
    pointer-events: auto; /* Re-enable clicks if needed (though usually it just covers) */
}

/* --- Overwrite Bootstrap Accordion Focus & Active states --- */
.accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Fjerner også Bootstraps standard lyseblå baggrundsfarve på åbne faner, hvis I vil beholde det helt rent */
.accordion-button:not(.collapsed) {
    box-shadow: none !important;
}

/* =========================================
   Smart Områdevælger (Area Tags & Pills)
   ========================================= */

/* Selve input containeren der ligner et form-felt */
.area-tag-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 52px; /* Giver plads til tags */
    padding: 0.375rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    cursor: text;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Genskab Bootstraps focus-glow når man klikker i containeren */
.area-tag-container:focus-within {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Ryste-animation ved ugyldigt input (kaldes i din JS) */
.area-tag-container.shake {
    animation: shakeError 0.4s cubic-bezier(.36,.07,.19,.97) both;
    border-color: #dc3545; /* Rød fejlfarve */
}

@keyframes shakeError {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Det usynlige tekstfelt indeni containeren */
.area-tag-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    flex-grow: 1;
    min-width: 150px;
    background: transparent;
    padding: 0.2rem 0;
    color: var(--company-dark);
}

.area-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* De valgte runde Tags (Pills) */
.area-tag {
    background-color: var(--bs-primary);
    color: #fff;
    padding: 0.25rem 0.6rem;
    border-radius: 50rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    animation: fadeIn 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.area-tag .remove-tag {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.area-tag .remove-tag:hover {
    opacity: 1;
}

.criteria-area-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.criteria-area-hint i {
    color: var(--bs-primary);
    font-size: 0.82rem;
    margin-top: 0.18rem;
    opacity: 0.78;
}

/* =========================================
   Quick-Select Knapper (Under inputtet)
   ========================================= */
.area-quick-btn {
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: var(--company-dark);
    border-radius: 50rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.area-quick-btn:hover {
    background-color: #f8faff;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* Når knappen er aktiv (valgt i din JS) */
.area-quick-btn.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* =========================================
   Cookie-samtykke banner
   ========================================= */
/* Bootstrap 5 har ingen responsive width-utils (w-lg-auto/w-sm-auto findes ikke),
   så knapperne styres her: fuld bredde stablet på mobil, auto-bredde i række fra sm. */
#cookie-consent-banner .cookie-actions {
    display: grid;
    gap: .5rem;
    width: 100%;
}

@media (min-width: 576px) {
    #cookie-consent-banner .cookie-actions {
        display: flex;
        width: auto;
        flex-shrink: 0;
    }
}

/* Subtle pulse for an icon to draw the eye without shouting for attention.
   Reusable utility (e.g. the live-scanner speed CTA's lightning bolt). */
@keyframes subtleIconPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.icon-pulse {
    animation: subtleIconPulse 2s infinite ease-in-out;
    transform-origin: center;
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .icon-pulse {
        animation: none;
    }
}

/* --- Premium Payment Modal --- */
.premium-modal {
    border-radius: 1.25rem;
    box-shadow: 0 20px 40px rgba(6, 17, 72, 0.15) !important;
}

.premium-gradient-bar {
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, var(--bs-primary, #2d4bf2), #00c6ff);
}

.fw-extrabold {
    font-weight: 800;
}

/* Feature list */
.feature-list li {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-list li:hover {
    transform: translateX(5px);
}
.feature-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
}

/* Social-proof avatar group (real avatar photos, same set as the landing page) */
.avatar-group .avatar-placeholder {
    width: 28px;
    height: 28px;
    object-fit: cover;
    background-color: #f8faff;
}
/* Overlap effect for the avatars (Bootstrap 5 ships negative margins disabled). */
.avatar-group .ms-n2 {
    margin-left: -0.6rem;
}

/* Let the Stripe buy button fill the width of its mount */
.stripe-mount-container iframe,
.stripe-mount-container > div {
    width: 100% !important;
}

@media (prefers-reduced-motion: reduce) {
    .feature-list li:hover {
        transform: none;
    }
}

/* Login modal: password step expands inline when the account has a password.
   The input stays in the DOM while collapsed so password managers detect the form. */
.login-password-collapse {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-password-collapse.open {
    max-height: 220px;
    opacity: 1;
    overflow: visible;
}

/* ====================================================================== */
/* SOURCE: views/views.css */
/* ====================================================================== */

/* View transition animations */
.view {
    margin: 0 auto;
    /*padding: 20px;*/
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    display: none; /* Default state: Hide all views to prevent "stacking" flash on load */
}

.view.active {
    opacity: 1;
    transform: translateY(0);
}

/* Back/forward navigations restore a saved scroll position. Replaying the
   fade/slide there makes the restored cards visibly stutter: the slide's
   translateY skews the anchor measurements used to re-apply the scroll,
   so each restore pass corrects against a moving target. viewManager adds
   this class to activate the view instantly on those navigations. */
.view.view-no-transition {
    transition: none;
}

/* Exception: Always show the landing page immediately */
#landing {
    display: block;
    opacity: 1;
    transform: none;
}

/* ====================================================================== */
/* SOURCE: header/header.css */
/* ====================================================================== */

/* header/header.css */

/* --- Navbar Container --- */
.navbar {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04); /* Slightly more defined border */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    transition: padding-top 0.3s ease, padding-bottom 0.3s ease, background-color 0.3s ease;
}

/* --- Brand / Logo --- */
.navbar-brand {
    color: var(--company-dark) !important;
    font-family: var(--font-primary, 'Lato', sans-serif);
    font-weight: 600; /* Extra bold for authority */
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
}

.navbar-brand img {
    margin-right: 12px;
    transition: transform 0.3s ease;
}

.navbar-brand:hover img {
    transform: rotate(-5deg) scale(1.05);
}

/* --- Navigation Links --- */
.navbar-nav .nav-link {
    font-family: var(--font-primary, 'Lato', sans-serif);
    color: #4b5563;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem !important;
    border-radius: 50rem;
    margin: 0 2px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    white-space: nowrap; /* FIX: Forces text to stay on one line */
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--bs-primary) !important;
    background-color: rgba(45, 75, 242, 0.04);
    transform: translateY(-1px);
}

.navbar-nav .nav-link i {
    color: var(--bs-primary);
    margin-right: 8px;
    font-size: 1.1em;
    transition: transform 0.2s ease;
}

.navbar-nav .nav-link:hover i {
    transform: scale(1.1);
}

@media (min-width: 992px) {
    .navbar .container {
        flex-wrap: nowrap;
    }

    .navbar-brand {
        flex: 0 0 auto;
    }

    #navMenu {
        flex: 1 1 auto;
        min-width: 0;
    }

    #navMenu .navbar-nav {
        flex: 1 1 auto;
        justify-content: flex-end;
        margin-left: 1rem !important;
        min-width: 0;
    }
}

/* --- Primary Action Button (Login) --- */
.navbar-nav .nav-item.dropdown:has(#navbar-name) {
    min-width: 0;
    max-width: 100%;
}

#navbar-name {
    font-weight: 600;
    padding: 0.6rem 1.8rem;
    border-radius: 50rem !important;
    background-color: var(--bs-primary);
    border: none;
    box-shadow: 0 4px 6px rgba(45, 75, 242, 0.2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: min(100%, 15rem);
    min-width: min(100%, 9.75rem);
}

#navbar-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#navbar-name.dropdown-toggle::after {
    flex-shrink: 0;
}

#navbar-name:hover, #navbar-name[aria-expanded="true"] {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(45, 75, 242, 0.3);
    background-color: var(--bs-btn-hover-bg, rgb(20, 50, 200));
}

#navbar-name:active {
    transform: translateY(0);
    box-shadow: 0 4px 6px rgba(45, 75, 242, 0.2);
}

/* --- Dropdown Menu --- */
.dropdown-menu {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    margin-top: 12px;
    animation: fadeInDropdown 0.2s ease-out;
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    border-radius: 0.5rem;
    padding: 0.7rem 1rem;
    color: var(--company-dark);
    font-weight: 500;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
}

.dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
    color: var(--bs-primary);
}

.dropdown-item:hover {
    background-color: #f0f6ff;
    color: var(--bs-primary);
}

/* --- Header Stats Ticker (Refined) --- */
#header-stats {
    /* More airy separator */
    border-left: 1px solid #e5e7eb;
    padding-left: 1rem;
    margin-left: 1rem !important;
    height: 44px; /* Slightly taller to prevent clipping */
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

/* The animated container */
#header-stats .position-relative {
    height: 100%;
    width: 9.5rem;
    min-width: 8.75rem;
    display: flex;
    align-items: center;
}

#stat-line {
    font-family: var(--font-primary, 'Lato', sans-serif);
    font-size: 0.95rem; /* Slightly larger text */
    color: #4b5563; /* Darker gray for better readability */
    width: 100%;

    /* Ensure flex alignment propagates */
    display: flex;
    align-items: center;
}

/* --- Mobile / Toggler --- */
.navbar-toggler {
    border: none;
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--company-dark);
    transition: background-color 0.2s;
}

.navbar-toggler:focus, .navbar-toggler:hover {
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0.05);
    outline: none;
}

/* Mobile Viewport Adjustments */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: white;
        padding: 1.5rem;
        border-radius: 1rem;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        margin-top: 1rem;
        border: 1px solid rgba(0,0,0,0.03);
    }

    #header-stats {
        display: none !important;
    }

    .navbar-nav .nav-link {
        margin: 5px 0;
        border-radius: 0.75rem;
        padding: 1rem !important;
    }

    .dropdown-menu {
        box-shadow: none;
        border: 1px solid #f0f0f0;
        margin-top: 0;
    }

    #navbar-name {
        max-width: 100%;
    }
}

/* --- Desktop Navbar Compression --- */
@media (min-width: 992px) {
    #navbar-name {
        width: auto !important;
    }

    .navbar-nav .nav-item.dropdown:has(#navbar-name) {
        flex: 0 1 auto;
        max-width: 15rem;
    }
}

/* --- Tablets & Small Laptops (992px - 1199.98px) --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Hide the stats ticker where the navbar cannot reliably fit all controls. */
    #header-stats {
        display: none !important;
    }
}

/* --- Tablets & Small Laptops (992px - 1199.98px) --- */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Slightly scale down the brand logo text */
    .navbar-brand {
        font-size: 1.25rem;
    }

    /* Reduce link paddings and font size to ensure they fit */
    .navbar-nav .nav-link {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        font-size: 0.9rem;
    }

    /* Reduce the gap before the login button */
    .navbar-nav .nav-item.dropdown.ms-lg-4 {
        margin-left: 0.5rem !important;
    }
}

/* --- Medium Laptops (1200px - 1400px) --- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #header-stats {
        display: flex !important;
    }

    .navbar-nav .nav-link {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        font-size: 0.9rem;
    }

    /* Slightly reduce the gap before the login button */
    .navbar-nav .nav-item.dropdown.ms-lg-4 {
        margin-left: 0.75rem !important;
    }

    .navbar-nav .nav-item.dropdown:has(#navbar-name) {
        max-width: 14.25rem;
    }

    #navbar-name {
        max-width: min(100%, 14.25rem);
    }
}

/* --- Wide Desktops (1400px+) --- */
@media (min-width: 1400px) {
    .navbar-nav .nav-item.dropdown:has(#navbar-name) {
        max-width: 16rem;
    }

    #navbar-name {
        max-width: min(100%, 16rem);
    }
}

/* ====================================================================== */
/* SOURCE: footer/footer.css */
/* ====================================================================== */

/* (empty) */

/* ====================================================================== */
/* SOURCE: landing/landing.css */
/* ====================================================================== */

/* --- Hero Section --- */
.landing-hero {
    background-color: var(--company-dark);
    color: #ffffff;
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Background Effect - pushed to back */
.landing-hero::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%);
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 0; /* IMPORTANT: Behind the text */
}

/* Content Container - brought to front */
.landing-hero .container {
    position: relative;
    z-index: 2; /* IMPORTANT: Above the ::after element */
}

.landing-hero h1 {
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: #ffffff; /* Explicitly force white */
}

.landing-hero .lead {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    font-size: 1.25rem;
}

/* High contrast text for the dark background */
.text-landing-highlight {
    color: #6ea8fe !important; /* Light blue that pops on Navy */
}

.landing-use-case-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 50rem;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.landing-use-case-chip:hover,
.landing-use-case-chip:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

.landing-use-case-chip i {
    color: #6ea8fe;
    font-size: 0.88rem;
}

/* --- Buttons --- */
.btn-hero-primary {
    background-color: var(--company-blue);
    border: 2px solid var(--company-blue);
    color: white;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-hero-primary:hover {
    background-color: white;
    color: var(--company-blue);
    border-color: white;
}

.btn-hero-outline {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-hero-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
    color: white;
}

/* --- Feature Cards --- */
.feature-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
    border-color: var(--company-blue);
}

.feature-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background-color: #f0f6ff;
    color: var(--company-blue);
    margin-bottom: 1.5rem;
}

.landing-founder-section {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(6, 17, 72, 0.06);
    border-bottom: 1px solid rgba(6, 17, 72, 0.06);
}

.landing-founder-portrait-frame {
    width: min(100%, 360px);
    aspect-ratio: 4 / 5;
    border-radius: 1.5rem;
    overflow: hidden;
    background: #f8faff;
    border: 1px solid rgba(6, 17, 72, 0.08);
    box-shadow: 0 24px 56px rgba(6, 17, 72, 0.12);
}

.landing-founder-portrait {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 24%;
}

.landing-founder-copy {
    max-width: 720px;
}

.landing-founder-copy h2 {
    color: var(--company-dark);
    line-height: 1.15;
}

.landing-founder-copy p {
    line-height: 1.8;
}

.landing-founder-eyebrow {
    color: var(--bs-primary);
    background: rgba(45, 75, 242, 0.08);
    border: 1px solid rgba(45, 75, 242, 0.12);
    font-weight: 800;
    font-size: 0.86rem;
}

.pricing-alert-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.check-list-item i {
    color: var(--company-blue);
}

/* Highlight for the "Exchange" feature (kun farven) */
.text-new-feature {
    color: #4ade80; /* Vibrant Green that pops on the Navy background */
}
/* Highlight for the "Exchange" feature */
.text-new-feature {
    color: #4ade80;
    position: relative;
    display: inline-block;
}

.text-new-feature::after {
    content: "POPULÆRT";
    position: absolute;
    top: -8px;
    right: -18px;
    background-color: #4ade80;
    color: var(--company-dark);
    font-size: 0.3em;
    padding: 2px 6px;
    border-radius: 50rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    transform: rotate(15deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    pointer-events: none;
}

.featured-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative; /* Essential for the absolute button on desktop */
}

@media (min-width: 768px) {
    .featured-header {
        display: block;     /* Switch to block to allow true centering */
        text-align: center; /* Centers the text */
    }

    .featured-header .btn-see-all {
        position: absolute; /* Take button out of flow */
        right: 0;           /* Stick to right */
        bottom: 0;          /* Align with bottom text line */
    }
}

/* --- Avatar Group Styling --- */
.landing-trust-row {
    color: rgba(255, 255, 255, 0.78);
}

.trust-avatar-group {
    padding-left: 0;
}

.trust-avatar {
    width: 34px;
    height: 34px;
    object-fit: cover;
    margin-left: -10px;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #f8faff;
}

/* Ensure the first avatar doesn't pull out of the container */
.trust-avatar-group .trust-avatar:first-child {
    margin-left: 0;
}

/* The final plus icon circle */
.trust-avatar-more {
    background-color: var(--bs-primary); /* Uses your defined royal blue */
    color: white;
    z-index: 1;
}

/* Hover effect so the user can see the hidden parts of the faces */
.trust-avatar:hover {
    transform: translateY(-3px);
    z-index: 10;
}

.landing-trust-copy {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.3;
}

.landing-trust-copy strong {
    color: #ffffff;
    font-weight: 800;
}

/* Container fade-in */
.trust-indicator-container {
    animation: fadeUpIn 0.8s ease forwards 0.3s;
    opacity: 0;
}

@keyframes fadeUpIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- structural fixes to prevent jitter in indexing counting animation --- */

/* * The wrapper box around the dynamic number.
 * Reserve enough inline space for Danish-formatted 4+ digit counts
 * without clipping or forcing "boligsogende" too close on mobile.
 */
#user-count-wrapper {
    min-width: 4.8ch;

    display: inline-block;

    /* Keep the animated number stable while leaving consistent room to the right */
    text-align: right;

    /* Modern optimization for animations changing content frequently */
    will-change: content;
}

/* * Apply browser-level fixes to make numbers behave as monospaced
 * as possible within their fixed-width wrapper, just in case.
 */
#user-count-number {
    font-variant-numeric: tabular-nums;
    -moz-font-variant-numeric: tabular-nums;
    -webkit-font-variant-numeric: tabular-nums;
}

/* --- Live Scanner Section --- */
#scanner-section {
    scroll-margin-top: 5.5rem;
}

.live-indicator {
    width: 8px;
    height: 8px;
    background-color: #4ade80; /* Success green */
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: pulse-green 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.reality-timeline {
    margin-top: 2rem;
}

.timeline-step {
    padding-bottom: 0.5rem;
}

.timeline-dot {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline-step:hover .timeline-dot {
    transform: translate(-25px, 4px) scale(1.2) !important;
}

/* --- Data Radar Card --- */
#scraped-count-wrapper {
    text-align: center;
}

#scraped-count-number {
    font-variant-numeric: tabular-nums;
    -moz-font-variant-numeric: tabular-nums;
    -webkit-font-variant-numeric: tabular-nums;
}

.scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.8), transparent);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
    animation: scan-down 3s infinite linear;
    z-index: 0;
    opacity: 0.5;
}

@keyframes scan-down {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { top: 110%; opacity: 0; }
}

/* --- Tilted "NYT" Badge for Scanner Pill --- */
.scanner-badge-wrapper {
    position: relative;
    /* overflow må ikke være hidden, ellers bliver badget klippet over! */
}

.scanner-badge-wrapper:hover .scanner-badge-action,
.scanner-badge-wrapper:focus .scanner-badge-action {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.3);
}

.scanner-badge-wrapper {
    max-width: 100%;
    white-space: nowrap;
}

.scanner-badge-label {
    min-width: 0;
}

.scanner-badge-action {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50rem;
    padding: 0.2rem 0.55rem;
    line-height: 1;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.scanner-badge-action i {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 420px) {
    .scanner-badge-wrapper {
        gap: 0.35rem !important;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }

    .scanner-badge-label,
    .scanner-badge-action {
        font-size: 0.72rem !important;
    }

    .scanner-badge-action {
        padding: 0.18rem 0.42rem;
    }
}

.scanner-badge-wrapper:hover .scanner-badge-action i,
.scanner-badge-wrapper:focus .scanner-badge-action i {
    transform: translateY(2px);
}

.scanner-copy-highlight {
    color: var(--bs-primary);
    font-weight: 800;
    white-space: normal;
    display: inline;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--bs-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

.scanner-copy-highlight::after {
    content: none;
}

.scanner-highlighted-section {
    border-top: 1px solid rgba(6, 17, 72, 0.06);
}

.scanner-highlighted-eyebrow {
    background-color: #f8faff;
    border: 1px solid rgba(45, 75, 242, 0.1);
}

.scanner-highlighted-marquee-shell {
    position: relative;
    width: 100%;
    /* Native scroller; the auto-advance is JS driving scrollLeft (landing.js),
       so manual swipes and the infinite loop share one scroll position and
       can never desync. */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0 1rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.scanner-highlighted-marquee-shell::-webkit-scrollbar {
    display: none;
}

.scanner-highlighted-marquee {
    overflow: visible;
    width: max-content;
    min-width: 100%;
}

.scanner-highlighted-track {
    display: flex;
    width: max-content;
}

.scanner-highlighted-group {
    display: flex;
    flex: 0 0 auto;
    gap: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    width: max-content;
}

.scanner-highlighted-card {
    flex: 0 0 min(78vw, 340px);
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.scanner-highlighted-card-inner {
    display: block;
    height: 100%;
    color: inherit;
    background: #ffffff;
    border: 1px solid rgba(6, 17, 72, 0.08);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(6, 17, 72, 0.08);
}

.scanner-highlighted-card-inner-unavailable {
    cursor: pointer;
}

.scanner-highlighted-card-inner-unavailable:focus-visible {
    outline: 3px solid rgba(45, 75, 242, 0.28);
    outline-offset: 3px;
}

.scanner-highlighted-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #f8faff;
    overflow: hidden;
}

.scanner-highlighted-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanner-highlighted-badges {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    right: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.scanner-highlighted-live,
.scanner-highlighted-type {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    border-radius: 50rem;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(6, 17, 72, 0.16);
}

.scanner-highlighted-live {
    background: rgba(6, 17, 72, 0.76);
}

.scanner-highlighted-type {
    background: rgba(45, 75, 242, 0.86);
}

.scanner-highlighted-badges .badge-glass:hover {
    transform: none;
    filter: none;
}

.scanner-highlighted-body {
    padding: 1rem;
    min-height: 136px;
    transform: translate3d(0, 0, 0);
}

.scanner-highlighted-title {
    color: var(--company-dark);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scanner-highlighted-price {
    color: var(--bs-primary);
    font-weight: 900;
    font-size: 1rem;
    white-space: nowrap;
}

.scanner-highlighted-address {
    color: #6c757d;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scanner-highlighted-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--company-dark);
    font-size: 0.82rem;
    font-weight: 700;
}

.scanner-highlighted-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.scanner-highlighted-meta i {
    color: var(--bs-primary);
}

@media (prefers-reduced-motion: reduce) {
    /* Auto-advance is skipped in landing.js; drop the edge fade so nothing
       looks cut off in the manual swipe list. */
    .scanner-highlighted-marquee-shell {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (min-width: 768px) {
    .scanner-highlighted-card {
        flex-basis: 360px;
    }

    .scanner-highlighted-track {
        padding-inline: 0;
    }

    .scanner-highlighted-group {
        gap: 1.5rem;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}

.scanner-badge-wrapper::after {
    content: "NYT";
    position: absolute;
    top: -12px;
    right: -15px;
    background-color: #4ade80; /* Vibrant Green */
    color: var(--company-dark); /* Navy text */
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 50rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    transform: rotate(15deg); /* Playful tilt */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 10;
}



.faq-exchange-highlight {
    color: #4ade80;
    font-weight: 800;
}


.migration-banner-copy {
    max-width: 640px;
}

.migration-banner-copy h5 {
    color: var(--company-dark);
    letter-spacing: -0.3px;
}

.migration-banner-copy p {
    color: rgba(6, 17, 72, 0.78);
    line-height: 1.5;
    font-size: 0.95rem;
    font-weight: 500;
}

.migration-banner-eyebrow {
    color: var(--bs-primary);
    background: rgba(45, 75, 242, 0.08);
    border: 1px solid rgba(45, 75, 242, 0.12);
    border-radius: 50rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

/* ====================================================================== */
/* SOURCE: conversations/conversations.css */
/* ====================================================================== */

#conversations {
    background-color: rgb(235, 239, 247);
    min-height: calc(100vh - 66px);
}

.conversation-shell {
    min-height: 640px;
}

.conversation-shell .min-width-0 {
    min-width: 0;
}

.conversation-list-panel,
.conversation-thread-panel {
    background: #fff;
    border: 1px solid rgba(45, 75, 242, 0.08);
    border-radius: 1rem;
    box-shadow: 0 14px 34px rgba(6, 17, 72, 0.06);
}

.conversation-list-panel {
    overflow: hidden;
}

.conversation-list-item {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(6, 17, 72, 0.08);
    background: #fff;
    padding: 1rem;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.conversation-list-item:last-child {
    border-bottom: 0;
}

.conversation-list-item:hover,
.conversation-list-item.active {
    background: rgba(45, 75, 242, 0.05);
}

.conversation-list-item.active {
    box-shadow: inset 4px 0 0 var(--bs-primary);
}

.conversation-list-item.unread .conversation-title,
.conversation-list-item.unread .conversation-preview {
    font-weight: 800;
    color: var(--company-dark) !important;
}

.conversation-unread-count,
.conversation-unread-badge {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.38rem;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.conversation-navbar-visible-badge {
    box-shadow: 0 0 0 2px #fff;
}

.conversation-user-button-badge {
    margin-left: 0.45rem;
    background: #fff;
    color: #dc3545;
}

.conversation-mobile-menu-badge {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
}

@media (min-width: 992px) {
    .conversation-mobile-menu-badge {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .conversation-user-button-badge {
        display: none !important;
    }
}

.conversation-title,
.conversation-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-preview {
    font-size: 0.9rem;
    max-width: 100%;
}

.conversation-date {
    font-size: 0.78rem;
    white-space: nowrap;
}

.conversation-property-subtitle {
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.conversation-thread-panel {
    display: flex;
    flex-direction: column;
    min-height: 640px;
}

.conversation-thread-header {
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
}

/* Compact chat header: smaller title and thumbnail so it stays informative
   without eating vertical space. Thumbnail is scoped to the header so the
   inbox list rows keep their size. */
#conversation-active-title {
    font-size: 1.05rem;
}

.conversation-thread-header .chat-thumb-single {
    width: 42px;
    height: 42px;
}

.conversation-thread-header .chat-thumb-exchange-header img {
    width: 38px;
    height: 38px;
}

.conversation-mobile-back {
    display: none;
}

.conversation-header-action {
    margin-left: auto;
}

.conversation-listing-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--company-dark);
    background: rgba(45, 75, 242, 0.06);
    border: 1px solid rgba(45, 75, 242, 0.12);
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.conversation-listing-link:hover,
.conversation-listing-link:focus {
    color: var(--bs-primary);
    background: rgba(45, 75, 242, 0.10);
    border-color: rgba(45, 75, 242, 0.22);
}

.conversation-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
}

.conversation-message-row {
    display: flex;
    margin-bottom: 1rem;
}

.conversation-message-row.mine {
    justify-content: flex-end;
}

.conversation-message-row.theirs {
    justify-content: flex-start;
}

.conversation-message-bubble {
    max-width: min(78%, 620px);
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    box-shadow: 0 8px 18px rgba(6, 17, 72, 0.06);
}

.conversation-message-row.mine .conversation-message-bubble {
    background: var(--bs-primary);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}

.conversation-message-row.theirs .conversation-message-bubble {
    background: #fff;
    color: var(--company-dark);
    border: 1px solid rgba(6, 17, 72, 0.08);
    border-bottom-left-radius: 0.25rem;
}

.conversation-message-meta {
    font-size: 0.74rem;
    font-weight: 700;
    opacity: 0.72;
    margin-bottom: 0.35rem;
}

.conversation-message-text {
    white-space: pre-wrap;
    line-height: 1.55;
    /* Break long unbreakable strings (e.g. URLs) so they wrap instead of
       forcing a horizontal scrollbar inside the bubble. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.conversation-reply {
    border-top: 1px solid rgba(6, 17, 72, 0.08);
    padding: 1rem;
    background: #fff;
}

.chat-thumb-single {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    object-fit: cover;
    box-shadow: 0 5px 14px rgba(6, 17, 72, 0.12);
}

.chat-thumb-stack {
    position: relative;
    width: 64px;
    height: 52px;
}

.chat-thumb-stack img {
    width: 42px;
    height: 42px;
    border-radius: 0.75rem;
    object-fit: cover;
    position: absolute;
    box-shadow: 0 5px 14px rgba(6, 17, 72, 0.14);
    border: 2px solid #fff;
}

.chat-thumb-stack img:nth-child(1) {
    top: 0;
    left: 0;
    z-index: 1;
}

.chat-thumb-stack img:nth-child(2) {
    bottom: 0;
    right: 0;
    z-index: 2;
}

.chat-thumb-exchange-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.chat-thumb-exchange-header img {
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    object-fit: cover;
    box-shadow: 0 5px 14px rgba(6, 17, 72, 0.10);
}

.chat-exchange-icon {
    width: 28px;
    height: 28px;
    color: var(--bs-primary);
    background: rgba(45, 75, 242, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
}

@media (min-width: 992px) {
    /* Keep the chat pinned in view while the (potentially long) conversation list
       scrolls beside it. The panel fills the viewport height and only the messages
       scroll inside it, so the header and composer stay reachable. */
    #conversation-thread-column {
        position: sticky;
        top: 90px;
        align-self: flex-start;
        height: calc(100vh - 120px);
    }

    .conversation-thread-panel {
        height: 100%;
        min-height: 0;
    }
}

@media (max-width: 991.98px) {
    .conversation-shell {
        min-height: auto;
    }

    .conversation-thread-panel {
        min-height: calc(100vh - 120px);
    }

    .conversation-thread-header {
        /* Keep the header (with "Tilbage") pinned just below the fixed navbar
           so only the messages scroll. */
        position: sticky;
        top: 66px;
        z-index: 5;
        background: #fff;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    .conversation-mobile-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: -1;
    }

    .conversation-messages {
        max-height: none;
        min-height: 45vh;
    }

    .conversation-reply {
        /* Keep the composer ("Skriv en besked") pinned to the bottom of the
           viewport so it stays reachable while scrolling the thread. */
        position: sticky;
        bottom: 0;
        z-index: 5;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }
}

@media (max-width: 575.98px) {
    .conversation-header-action {
        width: 100%;
        margin-left: 0;
    }

    .conversation-listing-link {
        width: 100%;
        justify-content: center;
    }
}

/* ====================================================================== */
/* SOURCE: toast/toast.css */
/* ====================================================================== */

/* =========================================
   Modern Notification Toasts (Success/Error)
   ========================================= */

#success-container,
#error-container {
    /* Positioning: Floating centered capsule instead of full-width bar */
    position: fixed !important;
    top: 30px !important;
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 9999 !important;

    /* Sizing & Shape */
    width: auto !important;
    min-width: 380px;
    max-width: 90vw;
    border-radius: 16px !important; /* rounded-4 */
    border: none !important;
    padding: 0 !important; /* Let inner content handle padding */

    /* Glassmorphism & Depth */
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
            0 10px 40px -10px rgba(0,0,0,0.08),
            0 0 0 1px rgba(0,0,0,0.03) !important;

    /* Animation Entry */
    animation: toastSlideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Specific Styling for Success */
#success-container {
    border-left: 6px solid #10b981 !important; /* Green Accent */
}

/* Specific Styling for Error */
#error-container {
    border-left: 6px solid #ef4444 !important; /* Red Accent */
}

/* Inner Layout */
#success-container .d-flex,
#error-container .d-flex {
    padding: 1rem 1.5rem;
    align-items: center;
}

/* Text Styling */
#success-message,
#error-message {
    color: var(--company-dark);
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* Close Button Styling */
#success-message-remove,
#error-message-remove {
    background: transparent;
    opacity: 0.3;
    transition: opacity 0.2s, transform 0.2s;
    padding: 0.5rem;
    margin-left: 1rem;
    box-shadow: none !important;
}

#success-message-remove:hover,
#error-message-remove:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Animation Keyframes */
@keyframes toastSlideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

/* Override the utility.js 'fade-out' class with a matching exit animation */
.fade-out {
    opacity: 0 !important;
    transform: translate(-50%, -40px) scale(0.95) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ====================================================================== */
/* SOURCE: landing/tidly-landing.css */
/* ====================================================================== */

.tidly-landing {
    --tidly-ink: #0f172a;
    --tidly-muted: #64748b;
    --tidly-line: #e2e8f0;
    --tidly-blue: #2563eb;
    --tidly-blue-dark: #1d4ed8;
    --tidly-soft: #f8fafc;
    --tidly-mint: #dff9ee;
    margin-top: -66px;
    overflow: hidden;
    background: #fff;
    color: var(--tidly-ink);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.tidly-landing *, .tidly-landing *::before, .tidly-landing *::after { box-sizing: border-box; }
.tidly-landing h1, .tidly-landing h2, .tidly-landing h3, .tidly-landing p { margin-top: 0; }
.tidly-landing a { color: inherit; text-decoration: none; }

.tidly-site-nav {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.tidly-wordmark { color: var(--tidly-ink); font-size: 1.65rem; font-weight: 800; letter-spacing: -0.09em; }
.tidly-wordmark span { color: var(--tidly-blue); }
.tidly-nav-links { display: flex; gap: 2rem; margin-left: 5rem; }
.tidly-nav-links a, .tidly-nav-login { color: #475569; font-size: .86rem; font-weight: 600; transition: color .2s ease; }
.tidly-nav-links a:hover, .tidly-nav-login:hover { color: var(--tidly-blue); }
.tidly-nav-login { display: inline-flex; align-items: center; gap: .5rem; color: var(--tidly-ink); }
.tidly-nav-login i { color: var(--tidly-blue); font-size: .75rem; }

.tidly-hero { position: relative; padding: 4.5rem 0 6.5rem; background: linear-gradient(120deg, #fff 0%, #fff 60%, #f3f8ff 100%); }
.tidly-hero::before { content: ''; position: absolute; width: 660px; height: 660px; top: -280px; right: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(191, 219, 254, .55), rgba(239, 246, 255, 0) 68%); pointer-events: none; }
.tidly-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, .94fr) minmax(520px, 1.06fr); gap: 3.5rem; align-items: center; }
.tidly-eyebrow, .tidly-kicker { color: var(--tidly-blue); font-size: .73rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.tidly-eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.35rem; padding: .45rem .75rem; border: 1px solid #dbeafe; border-radius: 99px; background: rgba(239, 246, 255, .8); }
.tidly-eyebrow span { width: .5rem; height: .5rem; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .14); }
.tidly-hero h1 { max-width: 610px; margin-bottom: 1.4rem; color: var(--tidly-ink); font-size: clamp(3rem, 5vw, 5rem); font-weight: 800; letter-spacing: -.065em; line-height: .99; }
.tidly-hero h1 em { color: var(--tidly-blue); font-style: normal; }
.tidly-hero-lead { max-width: 540px; margin-bottom: 2rem; color: var(--tidly-muted); font-size: 1.08rem; line-height: 1.75; }
.tidly-hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.tidly-button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 48px; padding: .75rem 1.1rem; border: 0; border-radius: 10px; font-family: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.tidly-button:hover { transform: translateY(-2px); }
.tidly-button-primary { background: var(--tidly-blue); color: #fff !important; box-shadow: 0 11px 22px rgba(37, 99, 235, .22); }
.tidly-button-primary:hover { background: var(--tidly-blue-dark); color: #fff; box-shadow: 0 14px 26px rgba(37, 99, 235, .3); }
.tidly-button-quiet { color: #334155; background: #fff; border: 1px solid var(--tidly-line); }
.tidly-button-quiet i { color: var(--tidly-blue); font-size: .7rem; }
.tidly-hero-proof { display: flex; align-items: center; gap: .75rem; margin-top: 2.25rem; color: #64748b; font-size: .75rem; line-height: 1.45; }
.tidly-hero-proof p { margin: 0; }
.tidly-hero-proof strong { color: #334155; font-weight: 600; }
.tidly-proof-avatars { display: flex; padding-left: .35rem; }
.tidly-proof-avatars span { display: grid; width: 29px; height: 29px; margin-left: -.35rem; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: .65rem; font-weight: 700; }
.tidly-proof-avatars span:nth-child(1) { background: #0f766e; }.tidly-proof-avatars span:nth-child(2) { background: #f97316; }.tidly-proof-avatars span:nth-child(3) { background: #7c3aed; }

.tidly-inbox-preview { width: 100%; max-width: 650px; justify-self: end; overflow: hidden; border: 1px solid #dbe4f0; border-radius: 18px; background: #fff; box-shadow: 0 28px 70px rgba(15, 23, 42, .13), 0 5px 14px rgba(15, 23, 42, .04); }
.tidly-preview-topbar { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 1.25rem; border-bottom: 1px solid #edf2f7; }
.tidly-preview-brand { color: #334155; font-size: .78rem; font-weight: 700; }.tidly-preview-mark { display: inline-grid; width: 23px; height: 23px; margin-right: .38rem; place-items: center; border-radius: 7px; background: var(--tidly-blue); color: #fff; font-weight: 800; }
.tidly-preview-status { display: inline-flex; align-items: center; gap: .4rem; color: #94a3b8; font-size: .66rem; font-weight: 600; }.tidly-preview-status span { width: .42rem; height: .42rem; border-radius: 50%; background: #22c55e; }
.tidly-preview-body { display: grid; grid-template-columns: 42% 58%; min-height: 355px; }
.tidly-preview-list { padding: 1rem .65rem; border-right: 1px solid #edf2f7; background: #fbfdff; }.tidly-list-heading { display: flex; justify-content: space-between; padding: 0 .65rem .75rem; color: #64748b; font-size: .68rem; font-weight: 700; }.tidly-list-heading span { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 8px; background: #e0e7ff; color: #4f46e5; font-size: .62rem; }
.tidly-lead-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: .48rem; align-items: center; padding: .68rem .58rem; border-radius: 9px; }.tidly-lead-item.active { background: #eaf2ff; }.tidly-lead-item strong { display: block; overflow: hidden; color: #334155; font-size: .66rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }.tidly-lead-item p { overflow: hidden; margin: .18rem 0 0; color: #94a3b8; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }.tidly-lead-item time { align-self: start; color: #94a3b8; font-size: .52rem; }
.tidly-avatar { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 50%; font-size: .62rem; font-weight: 800; }.tidly-avatar.green { background: #d1fae5; color: #047857; }.tidly-avatar.peach { background: #ffedd5; color: #c2410c; }.tidly-avatar.blue { background: #dbeafe; color: #1d4ed8; }
.tidly-preview-thread { display: flex; flex-direction: column; min-width: 0; }.tidly-thread-header { display: flex; align-items: center; gap: .55rem; padding: .85rem 1rem; border-bottom: 1px solid #edf2f7; }.tidly-thread-header strong, .tidly-thread-header span { display: block; }.tidly-thread-header strong { color: #334155; font-size: .71rem; }.tidly-thread-header span { margin-top: .12rem; color: #94a3b8; font-size: .57rem; }.tidly-thread-header button { margin-left: auto; border: 0; background: transparent; color: #94a3b8; }
.tidly-thread-messages { display: flex; flex: 1; flex-direction: column; gap: .7rem; padding: 1.05rem; background: #fff; }.tidly-bubble { max-width: 88%; padding: .58rem .72rem; border-radius: 9px; font-size: .63rem; line-height: 1.5; }.tidly-bubble.customer { align-self: flex-start; background: #f1f5f9; color: #475569; border-bottom-left-radius: 2px; }.tidly-bubble.business { align-self: flex-end; background: var(--tidly-blue); color: #fff; border-bottom-right-radius: 2px; }.tidly-ai-note { align-self: center; color: #059669; font-size: .56rem; font-weight: 700; }.tidly-ai-note i { margin-right: .18rem; }
.tidly-thread-footer { display: flex; align-items: center; justify-content: space-between; padding: .65rem .85rem; border-top: 1px solid #edf2f7; }.tidly-thread-footer span { color: #059669; font-size: .56rem; font-weight: 700; }.tidly-thread-footer button { padding: .36rem .58rem; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #475569; font-family: inherit; font-size: .57rem; font-weight: 700; }

.tidly-section { padding: 7.5rem 0; }.tidly-section-intro { max-width: 650px; }.tidly-section-intro h2, .tidly-channels-copy h2, .tidly-try-copy h2, .tidly-control-card h2 { margin: .85rem 0 1.1rem; color: var(--tidly-ink); font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 750; letter-spacing: -.055em; line-height: 1.08; }.tidly-section-intro p, .tidly-channels-copy p, .tidly-try-copy p { max-width: 570px; color: var(--tidly-muted); font-size: 1rem; line-height: 1.75; }
.tidly-how-section { background: #fff; }.tidly-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3.25rem; }.tidly-steps article { position: relative; min-height: 270px; padding: 1.7rem; overflow: hidden; border: 1px solid var(--tidly-line); border-radius: 14px; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }.tidly-steps article:hover { transform: translateY(-4px); box-shadow: 0 18px 32px rgba(15, 23, 42, .07); }.tidly-step-number { position: absolute; top: 1.3rem; right: 1.45rem; color: #cbd5e1; font-size: .72rem; font-weight: 800; }.tidly-step-icon { display: grid; width: 45px; height: 45px; margin-bottom: 3.5rem; place-items: center; border-radius: 12px; background: #eff6ff; color: var(--tidly-blue); font-size: 1rem; }.tidly-steps h3 { margin-bottom: .55rem; font-size: 1rem; font-weight: 750; }.tidly-steps p { margin: 0; color: var(--tidly-muted); font-size: .84rem; line-height: 1.65; }

.tidly-channels-section { background: var(--tidly-soft); }.tidly-channels-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }.tidly-text-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: .65rem; color: var(--tidly-blue); font-size: .86rem; font-weight: 750; }.tidly-text-link i { font-size: .7rem; }.tidly-channel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }.tidly-channel-card { display: flex; min-height: 142px; flex-direction: column; justify-content: space-between; padding: 1.2rem; border: 1px solid #e5eaf0; border-radius: 13px; background: #fff; box-shadow: 0 2px 4px rgba(15, 23, 42, .02); }.tidly-channel-card > i { color: #64748b; font-size: 1.3rem; }.tidly-channel-card span { margin-top: 2rem; color: #334155; font-size: .88rem; font-weight: 750; }.tidly-channel-card small { margin-top: .28rem; color: #94a3b8; font-size: .63rem; }.tidly-channel-card.featured { border-color: #bfdbfe; background: linear-gradient(145deg, #fff, #eff6ff); }.tidly-channel-card.featured > i { color: var(--tidly-blue); }.tidly-channel-card.featured small { color: #16a34a; font-weight: 700; }

.tidly-control-section { padding: 5rem 0; background: #fff; }.tidly-control-card { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding: 3rem 3.5rem; border-radius: 18px; background: #0f1e3a; }.tidly-control-card h2 { margin-bottom: 0; color: #fff; font-size: clamp(1.8rem, 3vw, 2.65rem); }.tidly-control-card .tidly-kicker { color: #93c5fd; }.tidly-control-points { padding-top: 1.5rem; }.tidly-control-points p { display: flex; gap: .65rem; margin: .8rem 0; color: #d7e2f3; font-size: .84rem; line-height: 1.5; }.tidly-control-points i { color: #86efac; padding-top: .1rem; }

.tidly-try-section { padding-top: 2.5rem; background: #fff; }.tidly-try-card { display: grid; grid-template-columns: 1fr minmax(330px, .85fr); gap: 3rem; align-items: center; padding: 3.5rem; border: 1px solid #dbeafe; border-radius: 20px; background: linear-gradient(125deg, #f0f7ff, #fbfdff 65%); }.tidly-try-copy h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); }.tidly-connect-panel { padding: 1.75rem; border-radius: 14px; background: #fff; box-shadow: 0 16px 35px rgba(37, 99, 235, .12); }.tidly-connect-icon { display: grid; width: 42px; height: 42px; margin-bottom: 1.1rem; place-items: center; border-radius: 11px; background: #eff6ff; color: var(--tidly-blue); }.tidly-connect-panel h3 { margin-bottom: .45rem; color: #1e293b; font-size: 1.05rem; font-weight: 750; }.tidly-connect-panel p { min-height: 44px; margin-bottom: 1.2rem; color: var(--tidly-muted); font-size: .78rem; line-height: 1.55; }.tidly-connect-panel .tidly-button { width: 100%; }.tidly-connect-panel #email-connected-badge { margin: -.3rem 0 1rem; color: #059669; font-size: .72rem; font-weight: 700; }.tidly-connect-panel #email-connected-badge i { margin-right: .2rem; }
.tidly-closing { margin-top: 7.5rem; padding: 5.4rem 0; background: var(--tidly-blue); color: #fff; text-align: center; }.tidly-closing p { margin-bottom: 1.35rem; font-size: clamp(1.65rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.045em; }.tidly-button-light { background: #fff; color: var(--tidly-blue); box-shadow: 0 12px 20px rgba(15, 23, 42, .16); }
.tidly-footer-wordmark { color: var(--tidly-ink); font-family: 'Inter', system-ui, sans-serif; font-size: 1.65rem; font-weight: 800; letter-spacing: -.09em; }.tidly-footer-wordmark span { color: var(--tidly-blue); }

@media (max-width: 991.98px) {
    .tidly-hero { padding: 3.5rem 0 5rem; }.tidly-hero-grid, .tidly-channels-grid, .tidly-try-card, .tidly-control-card { grid-template-columns: 1fr; }.tidly-inbox-preview { justify-self: start; max-width: 650px; }.tidly-channels-grid { gap: 2.5rem; }.tidly-control-card { gap: .8rem; }.tidly-control-points { padding-top: 0; }.tidly-try-card { max-width: 650px; }.tidly-nav-links { margin-left: 0; }
}

@media (max-width: 767.98px) {
    .tidly-site-nav { height: 70px; }.tidly-nav-links { display: none; }.tidly-hero { padding-top: 3rem; }.tidly-hero h1 { font-size: clamp(2.75rem, 14vw, 4rem); }.tidly-hero-lead { font-size: 1rem; }.tidly-hero-actions { display: grid; grid-template-columns: 1fr; }.tidly-button { width: 100%; }.tidly-hero-proof { margin-top: 1.6rem; }.tidly-preview-body { grid-template-columns: 1fr; }.tidly-preview-list { display: none; }.tidly-inbox-preview { width: calc(100vw - 24px); }.tidly-section { padding: 4.75rem 0; }.tidly-steps { grid-template-columns: 1fr; margin-top: 2.25rem; }.tidly-steps article { min-height: 0; }.tidly-step-icon { margin-bottom: 2.2rem; }.tidly-channel-grid { gap: .65rem; }.tidly-channel-card { min-height: 118px; padding: 1rem; }.tidly-channel-card span { margin-top: 1.2rem; }.tidly-control-section { padding: 1.5rem 0 4.75rem; }.tidly-control-card { padding: 2rem 1.5rem; }.tidly-try-card { padding: 2rem 1.25rem; }.tidly-closing { margin-top: 4.75rem; padding: 4rem 0; }.tidly-preview-thread { min-height: 335px; }
}