@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&family=Lexend+Deca:wght@100..900&display=swap');

:root {
    --appdata-font-header: "Lexend Deca", sans-serif;
    --appdata-font-content: "Golos Text", sans-serif;
    --appdata-bg-neutral: #f6faff;
    --appdata-bg-darkblue: #111827;
    --appdata-bg-darkblue-rgb: 17 24 39;
    --appdata-bg-darkblue-t: rgb(var(--appdata-bg-darkblue-rgb) / .90);
    --appdata-bg-lightblue: #edf4ff;
    --appdata-btn-primary: #111827;
    --appdata-btn-secondary: #64748B;
    --appdata-btn-neutral: #f6faff;
}

body {
    overflow-x: hidden;
}

html {
    overflow-x: clip;
}

button,
a,
[role="button"],
[onclick] {
    cursor: pointer;
}

a:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--appdata-font-header);
    font-weight: 700;
    color: var(--appdata-bg-darkblue);
}

p, span, ul,input, label, textarea {
    font-family: "Golos Text",sans-serif;
}

.btn {
    font-family: var(--appdata-font-header) !important;
}

.py-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.py-7 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.py-8 {
    padding-top: 6.25rem !important;
    padding-bottom: 6.25rem !important;
}


/*****************************************************************************
    Navbar
*****************************************************************************/

.navbar-appdata {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    z-index: 1000;
    opacity: 1;
    transform: translateY(0);
}

.navbar-appdata.scrolled-up {
    position: fixed;
    top: 0;
    background-color: var(--appdata-bg-darkblue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    opacity: 1;
}

.navbar-appdata.hidden {
    transform: translateY(-100%);
    opacity: 0;
}

.navbar-appdata .nav-link {
    font-family: "Lexend Deca",sans-serif;
    font-weight: 600;
    color: #1B262C;
}

    .navbar-appdata .nav-link:hover {
        color: #485566!important;
    }

.navbar-brand-appdata .navbar-logo-appdata {
    display: block; 
    height: 40px; 
    width: auto; 
    min-width: 0; 
    flex: 0 0 auto; 
}

    @media (max-width: 576px) {
        .navbar-brand-appdata .navbar-logo-appdata {
            height: 26px; /* välj 24–28px efter smak */
        }
    }

.navbar-logo-appdata path {
    transition: fill 0.3s ease-in-out;
}

.navbar-appdata .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-item.dropdown > .nav-link[aria-expanded="true"] + .dropdown-menu {
    font-family: "Lexend Deca",sans-serif;
    background: var(--appdata-bg-lightblue);
}


/*****************************************************************************
    Buttons
*****************************************************************************/

    .btn-group-appdata {
        display: flex;
        gap: .625rem;
    }

    .btn-appdata {
        font-family: var(--appdata-font-header) !important;
        font-size: 1rem;
        font-weight: 500;
        padding: 0.75rem 1.5rem;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .btn-primary-appdata {
        background-color: var(--appdata-btn-primary);
        color: white;
    }

        .btn-primary-appdata:hover {
            background-color: #38424c;
        }

    .btn-secondary-appdata {
        background-color: var(--appdata-btn-secondary);
        color: white;
    }

        .btn-secondary-appdata:hover {
            background-color: #485566;
        }

    .btn-neutral-appdata {
        background-color: var(--appdata-btn-neutral);
        color: var(--appdata-bg-darkblue);
    }

        .btn-neutral-appdata:hover {
            background-color: #485566;
        }


    .btn-send-appdata {
        background-color: var(--bo-bg-green);
        color: var(--bo-bg-white);
    }

        .btn-send-appdata:hover {
            background-color: #00a97a;
        }


    .btn-outline-custom-appdata {
        border: 1px solid var(--bo-bg-darkblue);
        color: #1B262C;
        font-weight: 500;
        transition: color 2s;
    }

        .btn-outline-custom-appdata:hover {
            background-color: var(--bo-bg-white);
        }

    .btn-scroll-appdata {
        font-family: var(--appdata-font-header) !important;
        font-size: 1rem;
        font-weight: 500;
        background-color: #64748B; /* Din knappfärg */
        color: #fff;
        padding: 1em 1.5rem;
        position: relative;
        display: inline-block;
        text-align: center;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .btn-scroll-appdata:hover {
            background-color: #485566;
        }

        .btn-scroll-appdata::after {
            content: "";
            position: absolute;
            bottom: -10px; /* Flyttar pilen under knappen */
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 12.5px solid transparent;
            border-right: 12.5px solid transparent;
            border-top: 10px solid #64748B; /* Samma färg som knappen */
            transition: all 0.2s ease;
        }

        .btn-scroll-appdata:hover::after {
            border-top: 10px solid #485566; /* Samma färg som knappen */
        }


/*****************************************************************************
    Sections / Components / Blocks
*****************************************************************************/

    .section-hero-appdata {
        position: relative;
        height: 100vh;
        background-image: url('/images/hero-bg-bo.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--appdata-bg-lightblue);
    }

    .hero-header-appdata {
        color: #1B262C;
        text-shadow: none;
        font-weight: 800;
    }

    .hero-header-appdata-right {
    color: #64748B;
    font-family:var(--appdata-font-header);
    font-size:2.5rem;
    }

    .hero-lead-appdata {
        line-height: 1.875rem;
        font-size: 1.0625rem;
        color: #111827;
        font-weight: 400;
    }

    .section-dblue-appdata,
    .section-lblue-appdata,
    .section-neutral-appdata {
        padding: 10vh 0;
    }

    .section-faq-appdata {
        padding:25vh 0;
        background: var(--appdata-bg-neutral);
    }

    .section-lblue-appdata {
        background: var(--appdata-bg-lightblue);
    }

    .section-dblue-appdata {
        background: var(--appdata-bg-darkblue);
    }

    .section-neutral-appdata {
        background: var(--appdata-bg-neutral);
    }


    .section-header-wrapper-appdata {
        padding:3rem 0;
    }

    .section-header-appdata {
        font-size: 2.5rem;
    }

    @media (max-width:568px){
        .section-header-appdata{
            font-size:2rem;
            font-weight:800;
        }
    }

    .section-header-inner-secondary-appdata {
        font-family: var(--appdata-font-header);
        color: #64748B;
    }

    .section-linker-icon-appdata {
        width: 1.45rem;
        height: 1.45rem;
    }

    .text-blue-appdata {
        color: #64748B !important;
    }

    .icon-contact-appdata {
        width: 2.57188rem;
        height: 2.57188rem;
    }

    .col-lead-appdata {
        font-size: 1.0625rem;
        color: #64748B;
        font-weight: 600;
    }

    .col-secondary-appdata {
        font-size: 1.0625rem;
        line-height: 1.875rem;
    }

    .col-ul-appdata {
        padding: 0;
    }

        .col-ul-appdata li {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
            align-items: center;
            list-style: none;
            font-size: 1.0625rem;
        }

        .col-ul-appdata span {
            width: 22px;
        }


.services-ul-appdata{
    padding:0;
    flex-wrap:wrap;
}

.services-ul-appdata > li {
display: flex;
flex: 0 0 calc((90% - 1rem) / 3); /* 1rem = 2 * 0.5rem (2 mellanrum per rad) */
flex-direction: column;
flex-wrap: wrap;
gap: .65rem;
align-items: center;
list-style: none;
background: var(--appdata-bg-lightblue);
text-align: center;
font-weight:500;
}


@media (max-width: 576px) {
    .services-ul-appdata > li {
        flex: 0 0 calc((100% - 1rem) / 2); /* 1rem = 2 * 0.5rem (2 mellanrum per rad) */
    }
}

.services-ul-appdata li svg{
    width:48px;
}


.appdata-form-checkbox {
    appearance: auto; 
    accent-color: var(--appdata-bg-darkblue); 
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .25rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

        .appdata-form-checkbox:hover {
            box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
        }

        .appdata-form-checkbox:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(0,123,255,0.4);
        }

    .form-checkbox a {
        color: var(--appdata-bg-darkblue);
        text-decoration: none;
    }

        .form-checkbox a:hover {
            color: #485566;
        }


/*****************************************************************************
    Accordion
*****************************************************************************/

    .accordion-appdata .accordion-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--appdata-bg-lightblue);
        color: var(--appdata-bg-darkblue);
        font-weight: 600;
        padding: 1rem 1.25rem;
        border: none;
        box-shadow: none;
        transition: background-color 0.2s ease;
    }

        .accordion-appdata .accordion-button:not(.collapsed) {
            background-color: var(--appdata-btn-secondary);
            color: white;
        }

    .accordion-appdata .accordion-body {
        background-color: #f2faff;
        color: #333;
        padding: 1rem 1.25rem;
    }

    .accordion-appdata .icon-appdata svg {
        width: 24px;
        height: 24px;
        transition: transform 0.3s ease;
    }

    .accordion-appdata .accordion-button.collapsed .icon-appdata svg {
        transform: rotate(0deg);
    }

    .accordion-appdata .accordion-button:not(.collapsed) .icon-appdata svg {
        transform: rotate(180deg);
    }

    .accordion-button.no-default-appdata::after {
        display: none;
    }


/*****************************************************************************
    Slider
*****************************************************************************/

    .hero-slider-appdata {
        width: 100%;
        max-width: 400px;
        position: relative;
        overflow: hidden; /* Nyckeln för att låta overlay synas */
        cursor:pointer;
    }

    .hero-slide-appdata {
        position: relative;
        overflow: hidden; /* Klipper bara bilden, inte overlay */
    }

        .hero-slide-appdata img {
            width: 22.5rem; /* Ändra vid behov för att justera storlek */
            height: 100%;
            object-fit: cover;
            border-radius: 12rem;
            margin: 0 auto;
            display: block;
        }

    @media (max-width:576px){
        .hero-slide-appdata img{
            width:17.5rem;
        }
    }

    .swiper-wrapper {
        display: flex;
    }

    .swiper-slide {
        flex: 0 0 100%; /* Tar hela bredden */
    }

.hero-slide-overlay {
    position: absolute;
    bottom: 2.5rem;
    right: 0;
    color: var(--appdata-bg-lightblue);
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    text-align: left;
    --r: 30px; 
    width: 300px;
    aspect-ratio: 1.85;
    background: var(--appdata-bg-darkblue);
    border-top-right-radius: var(--r);
    mask: radial-gradient(var(--r) at 0 100%,#0000 100%,#000 calc(100% + 1px)) 100% 100%/var(--r) var(--r) no-repeat, linear-gradient(0,#0000 var(--r),#000 0);
}


        .hero-slide-overlay p {
            margin: .5rem 0;
            font-size: 1rem;
        }

        .hero-slide-overlay .slide-link {
            display: inline-flex;
            align-items: center;
            font-weight: 600;
            color: var(--appdata-bg-lightblue);
            text-decoration: none;
            gap: .5rem;
            font-family:var(--appdata-font-content);
        }

            .hero-slide-overlay .slide-link svg {
                width: 6px;
                height: auto;
                flex-shrink: 0;
            }

                .hero-slide-overlay .slide-link:hover{
                    opacity:.8;
                }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        content: none !important;
    }

    .swiper-navigation-custom {
        position: absolute;
        right: -.55rem;
        bottom: 1.5rem;
        display: flex;
        gap: 1rem;
        z-index: 1;
        background: pink;
        width: 6rem;
    }

        .swiper-navigation-custom .swiper-button-prev,
        .swiper-navigation-custom .swiper-button-next {
            background: transparent;
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }


/*****************************************************************************
    ScrollTop
*****************************************************************************/

.scrolltop-appdata {
    position: fixed;
    right: 2rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    z-index: 1000;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--appdata-bg-darkblue);
    color: var(--appdata-bg-neutral);
    box-shadow: 0 6px 4px rgba(0,0,0,.12);
    cursor: pointer;
    transform: scale(.9);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .scrolltop-appdata.visible {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }

    .scrolltop-appdata:hover {
        box-shadow: 0 8px 4px rgba(0,0,0,.16);
    }

    .scrolltop-appdata:focus-visible {
        outline: 2px solid #111827;
        outline-offset: 2px;
    }

@media (prefers-reduced-motion: reduce) {
    .scrolltop-appdata {
        transition: none;
    }
}

@media (max-width: 576px) {
    .scrolltop-appdata {
        bottom: calc(3rem + env(safe-area-inset-bottom, 0));
    }
}

/*****************************************************************************
    Footer
*****************************************************************************/

    .footer-appdata {
        background-color: var(--appdata-bg-neutral);
        padding-top: 6rem;
        padding-bottom: 3rem;
        position: relative;
    }

        .footer-appdata .footer-inner {
            background-color: transparent;
            border-radius: 1.5rem;
            color: white;
        }

        .footer-appdata i {
            font-size: 1.2rem;
        }

        .footer-appdata h6 {
            font-weight: 700;
            font-size: 1rem;
        }

    .header-footer-appdata {
        color: var(--appdata-bg-darkblue);
    }

    .footer-appdata-logo svg {
        width: 225px;
    }

    .hr-footer-appdata {
        color: #111827 !important;
        max-width: 4rem;
        border: 0.0625rem solid #111827 !important;
        opacity: 1;
    }

    .footer-navlinks-appdata,
    .footer-navlinks-appdata a {
        cursor: pointer;
        list-style-type: none;
        margin: 0;
        padding: 0;
        color: var(--appdata-bg-darkblue);
        text-decoration: none;
        display: inline-block;
        margin-bottom: 0.5rem;
        transition: color 0.2s;
        font-weight: 500;
    }

        .footer-navlinks-appdata a {
            font-family: var(--appdata-font-header);
        }

        .footer-navlinks-appdata > li a:hover {
            color: #969CB8 !important;
        }

    .icon-wrapper-footer-appdata {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
    }

        .icon-wrapper-footer-appdata svg {
            width: 2rem;
            height: 2rem;
            display: block;
        }


    .btn-footer-appdata {
        padding: 0.5rem 1rem;
        font-weight: 500;
        border: 1px solid var(--appdata-bg-darkblue);
        background: none;
        color: var(--appdata-bg-darkblue);
    }

        .btn-footer-appdata:hover {
            background-color: var(--appdata-bg-lightblue);
        }



/*****************************************************************************
    General code
*****************************************************************************/

    .row-bo {
        padding: 10vh 0;
        align-items: center;
    }

    .row-form-bo {
        display: flex;
        gap: .75rem;
        flex-direction: row;
        flex-wrap: wrap;
    }

        .row-form-bo > .form-floating.full-width {
            flex: 1 1 100%;
        }

        .row-form-bo > .form-floating {
            flex: 1 1 calc(50% - 0.75rem);
            min-width: 0;
        }


    .form-container-bo {
        max-width: 655px;
        margin: 0 auto;
        text-align: center;
        padding: 0 0 15vh;
    }

    .section-hero-appdata .container { 
        position: relative;
        z-index: 2;
    }

    .dropdown-toggle::after {
        content: none;
    }

    .chevron-icon {
        width: 12px;
        height: 7px;
        margin-left: .5em;
        transition: transform 0.3s ease;
        stroke: var(--appdata-btn-secondary);
    }

    .dropdown-toggle[aria-expanded="true"] .chevron-icon {
        transform: rotate(180deg);
    }

    .appdata-ibox-dev {
        display: inline-flex;
        padding: 2.5rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        border-radius: 2.5rem;
        background: #E7F0FF;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    }

    .appdata-ibox-dev-icon {
        width: 6rem;
        height: 6rem;
        aspect-ratio: 1 / 1;
    }


    #navbarLogo {
        position: relative;
        display: block;
    }

        #navbarLogo path.reveal {
            fill: #edf4fe;
            clip-path: inset(0 100% 0 0);
        }


    #spinner {
        display: none;
        margin-left: 10px;
        vertical-align: middle;
    }

        #spinner::after {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 3px solid #ccc;
            border-top: 3px solid #0078D7;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }


    .form-actions-appdata {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    @media (min-width: 768px) {
        .form-actions-appdata {
            flex-direction: row;
            align-items: center;
        }

        .contact-content-appdata {
            margin-top: 0;
            margin-left: 1rem;
            max-width: 300px;
        }
    }


    .contact-content-appdata {
        display: none; 
        opacity: 0;
        transform: translateY(-10px);
        background: #E7F0FF; 
        padding: 0.625rem 0.9375rem; 
        border-radius: 0.5rem;
        font-family: var(--appdata-font-content);
        font-size: .9rem;
        align-items: center;
        gap: 0.5rem;
        position: relative;
        overflow: hidden;
        --progress-width: 100%;
    }

        /* Progressbar */
        .contact-content-appdata::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background: rgba(0,123,255,0.7);
            width: var(--progress-width);
            transition: width 0s; 
        }

        /* Statusfärger */
        .contact-content-appdata.success {
            background-color: #d4edda;
            color: #155724;
        }

        .contact-content-appdata.error {
            background-color: #f8d7da;
            color: #721c24;
        }


    .appdata-ibox-parent {
        padding: 1rem;
        border-radius: 1rem;
    }

    .appdata-keep-h-xs {
        display: block;
        width: 100%;
    }

    @media (max-width: 576px) {
        .appdata-keep-h-xs {
            height: clamp(180px, 45vw, 260px); 
            object-fit: cover; 
            object-position: center; 
            border-radius: 1rem;
        }
    }