:root {
    --color-primary: #4A4F66;
    --color-secondary: #1F243B;
    --color-accent: #EA8E2E;
    --color-text-light: #EAEAEA;
    --color-text-dark: #4A4F66;
    --color-background: #FAF9F6;
    --color-background-light: #ebebeb;
    --color-background-grey:#eaeaea;
    --color-background-footer: #1D2239;
    --color-background-forms: #F4F8FB;
    --color-card-bg: rgba(61, 67, 92, 0.51);
}

.form-control::placeholder {
    color: red;
}

.form-control:focus::placeholder {
    opacity: 0;
}

/* Formcontrol Payee Dark Theme */
.form-control-payee-dark {
    background-color: #4A4F66 !important;
    color: white !important;
    border: 1px solid #1f243a !important;
    border-radius: 4px;
    caret-color: white;
}

.form-control-payee-dark::placeholder {
    color: hsla(0, 0%, 100%, 1);
    opacity: 1; /* Safari fix */
}

input.form-control-payee-dark:-webkit-autofill,
textarea.form-control-payee-dark:-webkit-autofill,
select.form-control-payee-dark:-webkit-autofill,
input.form-control-payee-dark:-webkit-autofill:hover,
input.form-control-payee-dark:-webkit-autofill:focus,
input.form-control-payee-dark:-webkit-autofill:active,
textarea.form-control-payee-dark:-webkit-autofill:hover,
textarea.form-control-payee-dark:-webkit-autofill:focus,
textarea.form-control-payee-dark:-webkit-autofill:active {
    box-shadow: 0 0 0 1000px #4A4F66 inset !important;
    -webkit-text-fill-color: white !important;
    caret-color: white;
    border-color: #1f243a !important;
    transition: background-color 9999s ease-in-out 0s;
}

.form-control-payee-dark:focus {
    outline: none;
    border-color: #888 !important;
    box-shadow: none !important;
}

.form-label-payee-dark {
    color: rgb(255 255 255 / 100%) !important;
    transition: color 0.2s ease;
    margin-bottom: .5rem;
}
    /* När label flyger upp (input i focus) */
    .form-floating > .form-control-payee-dark:focus ~ .form-label-payee-dark,
    .form-floating > .form-control-payee-dark:not(:placeholder-shown) ~ .form-label-payee-dark,
    .form-floating > .form-control-payee-dark:-webkit-autofill ~ .form-label-payee-dark {
        color: rgb(255 255 255 / 65%) !important;
    }


.form-floating,
.form-control {
    font-size: .9rem;
}

.payee-fel-label {
    display: none;
    width:fit-content;
    margin: 15px 0;
    padding: .5rem;
    background-color: #ffd7d7;
    border: 1px solid #bbbbbb;
    border-radius: var(--bs-border-radius) !important;
    font-size:.9rem;
}

.payee-success-label {
    display: none;
    width: fit-content;
    margin: 15px 0;
    padding: .5rem;
    background-color: var(--bs-success-bg-subtle);
    border: 1px solid #bbbbbb;
    border-radius: var(--bs-border-radius) !important;
    font-size: .9rem;
}


main {
    overflow: hidden;
}

.modal-newaccount-dialog {

}

.modal {
    --bs-modal-bg: var(--color-secondary);
    --bs-modal-width: 640px;
}

.modal-header, .modal-footer {
    border: 0;
}

.payee-start-second-h {
    font-family: 'Dongle', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--color-text-light);
}

/*.modal-newaccount-content {
    background:pink;
}*/

.form-success{
    margin-top:1rem;
}

.modal-fordelar-dialog {

}


/*input[type="checkbox"] {
    width: 1.25rem;*/ /* större klickyta (~20px) */
    /*height: 1.25rem;
    accent-color: #0d6efd;*/ /* ersätt med Payees färg om annan */
    /*cursor: pointer;
}*/

.payee-modal-form-wrapper {
    display:flex;
    flex-direction: row;
    gap: 15px;
}

.payee-modal-form-floating {
    flex: 1;
    min-width:0;
}

.test span{
    color:#fff;
}

.payee-modal-text-bg {
    background-color: #4A4F66;
    padding: .25rem;
    border-radius:.25em;
}

#printableArea p, #printKvittens  p{
    color: var(--color-text-light);
}

.payee-printablearea-span {
    color: var(--color-text-light);
}

.payee-printable-area-wrapper-sm {
    display: flex;
    flex-direction: row;
    font-size: .95rem;
    gap: .65rem;
    margin:.25rem 0;
}


/* Login */
.section-login {
    padding: 50px 0;
    background-color: var(--color-secondary);
    min-height: 100vh;
}

.login-text {
    width: clamp(350px, 100%, 400px);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
}

.login-text a{
    text-decoration:none;
    font-weight:500;
    color:var(--color-accent);
}

.login-text a:hover {
    opacity:.8;
    transition:ease-in;
}

.login-text-description {
    font-size: 18px;
    line-height: 35px;
    color: #fff;
    margin: 0 0 2rem;
}

.account-text-container {
    display: flex;
    gap: 5px;
    flex-direction: column;
    margin: 25px 0;
    text-align: center;
    color: #4A4F66
}

.account-text-container a{
    color:var(--color-text-dark);
    text-decoration:none;
}

    .account-text-container a:hover {
        color: var(--color-text-light);
        text-decoration: none;
    }

/* Navs */
.admin-nav {
    background-color: #1A1E31;
    width: 250px;
    position: absolute;
    z-index: 99;
    padding-top:1rem;
    height:100%!important;
}

/*#adminNav {
    left: 0px;
    transition: left 1s ease-in-out;*/ /* Skapar animation */
/*}*/

.admin-nav-visible {
    left: 250px !important;
}

.admin-toggle {
    display: none;
    /* padding:5px 50px 0px 0;*/
    /*background:orange;*/
    text-decoration: none;
    width: fit-content;
    border-radius: 0 25px 0 0;
    margin: 0 1.5rem;
    color: #fff;
}

.bi{
    font-size:30px;
}
    
/* Mains */

.admin-main{
    overflow:hidden;
}

.sidebar {
    z-index: 9999;
}

.sidebar-payee {
    background: #1f243a !important; /* Alen: Vi får kolla om det är så smart att lägga bakgrundsfärgen på denna då vi har 2x andra element under med Boostrap main bakgrund också*/
}

.navbar-payee {
    background-color: transparent !important; /* Alen: Samma på denna, snyggas till och justeras så att färgsättning sätts enligt korrekt standard*/
    padding: 25px 0;
}

.navbar-toggler {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: .25em;
    top: 1.5rem!important;
    right: 1.25rem!important;
}

.input-group-append i {
    border-radius: 0 .25rem .25rem 0;
}

.payee-admin-card { 
    color: #1e1e1c;
    border-radius: 1rem;
    display: flex;
    flex-direction: row;
    gap: 20px;
    max-width: 1140px;
}

.payee-admin-card-content a,
.payee-admin-card-content p,
.payee-admin-card-content span,
.payee-admin-card-content ul li{
    font-size:.9rem;
    text-decoration:none;
}

.payee-admin-card-type {
    padding: .25rem;
    font-size: 14px;
    background: #1f243a;
    border-radius: .25em;
    display: flex;
    width: fit-content;
    color: #fff;
    margin: 20px 0;
}

.payee-admin-card-title{

}

.payee-admin-card-ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.payee-admin-card-ul li{
    padding:.25rem 0;
    font-size:.9rem;
}

.payee-admin-card-inner {
    flex: 0 0 250px; /* eller valfri fast bredd */
    background-color: var(--color-background-light);
    padding: 1rem;
    border-radius: .5rem;
}

.payee-admin-card-inner-spec {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px;
    height: fit-content;
    background-color: var(--color-secondary);
    border-radius: .5rem;
    color: var(--color-text-light);
    flex: 1; /* tar upp all resterande plats */
}

.payee-admin-card-inner-spec-inner {
    /*background-color: var(--color-primary);*/
    padding: 0rem 0.625rem;
    border-radius: 0.3125rem;
}

.payee-admin-card-icon {
    width: 1.65rem;
    height: 1.65rem;
    color: white;
    margin-right: 0.4rem;
    font-size:.95rem;
}

.payee-admin-form-label{
    font-size:.75rem;
    color:var(--color-secondary);
    font-weight:500;
}

.payee-admin-form-item {
    background-color: var(--color-background-forms);
    border: 1px solid #d2d9de;
}

.payee-admin-form-item span {
    font-size:.95rem;
}

.payee-admin-form-select {
    padding: 0.625rem 1.25rem;
    height: 3.0625rem;
}

.payee-form-control-textarea {
   resize:none;
   overflow:hidden;
}


.payee-admin-msg-info-text {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    margin: 1rem .45rem;
}

.payee-admin-msg-info-text i {
    font-size: 1.25rem;
    vertical-align: middle; 
    margin-right: 0.25rem; 
    color:var(--color-accent);
}

.payee-admin-msg-info-text p{
    margin:0;
}

.payee-admin-msg-info-text a{
    text-decoration:none;
}


.payee-admin-table {
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--color-secondary) !important;
    border-radius: .5rem;
}

.payee-admin-table td{
    vertical-align:middle;
    border-bottom-width: 0;
    white-space:nowrap;
}


.payee-admin-table thead th {
    background-color: transparent!important;
    box-shadow: none !important;
    color: var(--color-text-light) !important;
    padding: 0.75rem 0.5rem !important;
    border-bottom-width: 1px !important;
}


.payee-img-responsive {
    width: clamp(150px, 100vw, 800px);
    height: auto;
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.payee-navmenu-icon {
    width: 1.65rem;
    height: 1.65rem;
    color: orange;
    margin-right: 0.4rem;
}

.payee-admin-switch-content {
    display: inline-flex;
    padding: 1.25rem 0.625rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    border-radius: 0.625rem;
    background: #F4F8FB;
    font-size: .9rem;
    border: 1px solid #d2d9de;
    margin:1rem 0;
}

.payee-user-info {
    background-color: var(--color-background-forms);
    border: 1px solid #d2d9de;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
}

.payee-user-info i{
    font-size:.95em;
    margin-right:5px;
}

.expand-inner {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    font-size:.9rem;
}

.payee-user-expanded .expand-inner {
    margin:10px 0;
    max-height: 800px;
    opacity: 1;
}

.expand-inner > div > i.bi-check-circle-fill {
    color: #376D54 !important; 
    font-size: 1.2rem;
}

.expand-inner > div > i.bi-x-circle-fill {
    color:var(--color-accent);
    font-size: 1.2rem;
}

.nav-link:focus, .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--color-primary);
}

.nav-link.manage-nav-link {
    color: var(--color-text-light)!important;
    font-size:.9rem;
}

.form-check-input {
    margin-top: 0!important;
}

.form-check-label{
    margin-left:.25rem!important;
}

.form-switch .form-check-input {
    width: 2.5rem;
    height: 1.35rem;
}

.form-check-input:checked {
    background-color: var(--color-secondary);
    border-color: var(--color-primary);
}

.payee-start-navmenu {
}

.payee-payout-navmenu{
}

.payee-reqpayout-navmenu {
}

.payee-ongoingpayments-navmenu {
}

.payee-accountmanage-navmenu {
}

.payee-logout-navmenu {
}

.payee-admin-section {
    padding: 100px 0;
}

.payee-admin-container {
    color: #1e1e1c; /*Ta bort efter användning*/
    --bs-gutter-x: 2.5rem!important;
}

.payee-admin-content{
    
}

.payee-admin-first-h {
    color: var(--color-secondary);
    font-weight: 700;
    margin: 2rem 0;
    font-family: 'Dongle', sans-serif;
    font-size: clamp(2.5rem, 4vw + 0.5rem, 3rem);
}

.payee-admin-second-h {
    color: var(--color-secondary);
    font-weight: 700;
    font-family: 'Dongle', sans-serif;
    font-size: clamp(2rem, 4vw + 0.5rem, 2rem);
}

.payee-admin-infobox {
    max-width: 600px;
    background: #f1f2f2;
    border-radius: .75rem;
    padding: 1rem;
    background-color: var(--color-background-forms);
    border: 1px solid #d2d9de;
}

.payee-admin-infobox p,
.payee-admin-infobox span,
.payee-admin-infobox a,
.payee-admin-infobox ul li{
    font-size:.9rem;
    margin:0;
    text-decoration:none;
}

.payee-admin-infobox ul {
    padding: 5px 20px;
    margin:0;
}

.payee-admin-infobox p > a{
    text-decoration:none;
    font-weight:500;
}

.payee-admin-content-body {

}

.payee-admin-content-footer {

}

.payee-admin-payer-info{
    display:flex;
    margin:1rem 0;
    gap:15px;
}

.payee-sec-policy h5,h6{
    font-weight:600;
}

.payee-sec-policy-bi {
    color: var(--bs-primary-bg-subtle); 
    font-size: 1.15rem;
    margin-right: .25rem;
}

.payee-sec-policy a{
    color:var(--color-accent);
    text-decoration:none;
}

.payee-sec-policy a:hover {
    opacity:.8;
}

.payee-admin-form-main{
    display:flex;
    flex-direction:row;
    gap:.5rem;
}

.payee-admin-form-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.payee-admin-form-item img {
    height: 250px;
    object-fit: cover;
    width: 100%;
    border-radius: 0.5rem;
}

.cert-help-inner {
    margin: 1rem 0;
}

.cert-help-inner p,
.cert-help-inner ul,
.cert-help-inner a {
    font-size: .95rem;
    text-decoration: none;
}


/* Global Styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-light);
    line-height: 1.5;
}

/* Header Styles */
.site-header {
    background-color: var(--color-secondary);
    border: 1px solid transparent;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-nav {
    width: 100%;
    max-width: 1320px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100px;
}

.top-logo {
    width: clamp(6rem, 25vw, 8.5625rem);
    height: auto;
}

.center-logo {
    width: clamp(6rem, 25vw, 8.5625rem);
    height: auto;
    display: block;
    margin: 3rem auto;
}

/* Button Styles */

.button-group-payee-admin {
    display: flex;
    gap: 15px;
    flex-direction: column;
}


.button-group-payee {
    display: flex;
    gap: 15px;
    flex-direction: row;
}

    @media (max-width:768px){
        .button-group-payee{
            flex-direction:column;
            align-items:flex-start;
        }
    }

.button-group-payee a.btn-primary{
    text-decoration:none;
}

.btn-outline {
    border: 2px solid #fff;
    border-radius: 100px;
    padding: 17px 37px;
    color: #fff;
    font-weight: 700;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .btn-outline:hover {
        background-color: var(--color-primary) !important;
        color: var(--color-text-light) !important;
    }

.btn-accent {
    background-color: var(--color-accent);
    border: none;
    border-radius: 100px;
    padding: 17px 37px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-accent:hover {
        opacity: .8;
        color: var(--color-text-light) !important;
    }


.btn-primary {
    background-color: var(--color-primary);
    border: none;
    border-radius: 100px;
    padding: 17px 37px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration:none;
}

    .btn-primary:hover {
        opacity: .8;
        color: var(--color-text-light) !important;
    }

.btn-secondary {
    background-color: rgba(46, 52, 76, 0.5);
    border: none;
    border-radius: 50px;
    padding: 17px 30px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration:none;
}

.btn-secondary:hover {
    opacity: .8;
    color: var(--color-text-light) !important;
}


.btn-admin-accent {
    display: inline-block;
    width: fit-content;
    background-color: var(--color-accent);
    border: none;
    border-radius: 100px;
    padding: 12px 30px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: .95em;
    margin-top: 15px;
}

.btn-admin-accent:hover {
    opacity: .8;
    color: var(--color-text-light) !important;
}

.btn-admin-primary {
    display: inline-block;
    width: fit-content;
    background-color: var(--color-primary);
    border: none;
    border-radius: 100px;
    padding: 12px 30px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: .95em;
    text-decoration: none;
}

.btn-admin-primary:hover {
    opacity: .8;
    color: var(--color-text-light) !important;
}



.btn-admin-secondary {
    display: inline-block;
    width: fit-content;
    background-color: rgba(46, 52, 76, 0.5);
    border: none;
    border-radius: 100px;
    padding: 12px 30px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: .95em;
    text-decoration: none;
}

.btn-admin-secondary:hover {
    opacity: .8;
    color: var(--color-text-light) !important;
}

.btn-admin-sm {
    padding: 8px 22px!important;
    font-size: .85rem!important;
}

.btn-icon{
    width:2rem;
    height:2rem;
}

.expand-toggle-header {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

/* Hero Section */
.hero-container {
    width: 100%;
    max-width: 1320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}


.hero-title {
    font-family: 'Dongle', sans-serif;
    font-weight: 700;
    font-size: clamp(3.5rem, 5vw + 1rem, 6rem);
    font-optical-sizing: auto;
    color: var(--color-text-light);
    text-align: center;
    line-height: .8;
}


.hero-buttons {
    display: flex;
    gap: 17px;
    margin-top: 38px;
}

.login-prompt {
    margin-top: 25px;
    font-size: 16px;
    line-height: 35px;
}

.login-prompt a{
    text-decoration:none;
    font-size:.95rem;
}

.scroll-icon {
    width: 48px;
    margin-top: 25px;
    cursor:pointer;
}

.top-wave {
    padding: 0 0 50px 0;
}

/* Feature Sections */
.about-section {
    background-color: var(--color-primary);
    padding: 0 0 200px 0;
}

.title-holder{
    margin:40px 0;
}

.section-title {
    font-family: 'Dongle', sans-serif;
    font-weight: 700;
    font-size: clamp(3.5rem, 5vw + 1rem, 5.5rem);
    font-optical-sizing: auto;
    color: var(--color-accent);
    text-align: center;
    line-height: .8;
}


.section-dots {
    width: fit-content;
    display: block;
    margin: 0 auto;
}

.feature-container {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1189px;
    margin: 0 auto;
    padding: 7em 20px;
}

.feature-container-reverse {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1189px;
    margin: 0 auto;
    padding: 7em 20px;
    flex-direction:row-reverse;
}

.feature-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-header {
/*margin-bottom: 20px;*/
}

.features-text {
    width: clamp(350px, 100%, 700px);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
}

.feature-title {
    font-family: 'Dongle', sans-serif;
    font-size: clamp(2.75rem, 4vw + 0.5rem, 3.5rem);
    color: var(--color-text-light);
    margin: 0;
}

.feature-subtitle {
    font-size: 18px;
    margin-bottom:0;
}

.feature-description {
    font-size: 18px;
    line-height: 35px;
    color: #fff;
    margin: 0 0 15px;
}

.feature-image {
    width: 518px;
    height: auto;
    border-radius: 309px;
}

.round-container {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    perspective: 1000px;
    transition: transform 0.3s ease;
}

.round-container:hover .parallax {
    transform: scale(1.05) rotateZ(1deg);
}

.feature-image-parallax {
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
}

.feature-image-parallax img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Step Cards */
.steps-container {
    max-width: 1189px;
    margin: 200px auto 0;
    padding: 0 20px;
}


.section-subtitle {
    font-family: 'Dongle', sans-serif;
    font-weight: 700;
    font-size: calc(3.325rem + .9vw);
    font-optical-sizing: auto;
    color: var(--color-text-light);
    text-align: center;
    margin: 60px auto 0;
}


.step-card {
    display: flex;
    flex-direction: column; /* Stack items vertically by default (mobile-first) */
    align-items: center; /* Center items horizontally */
    gap: 2.5rem; /* Space between items */
    padding: 2.5rem; /* Inner spacing */
    width: 100%; /* Take full available width */
    max-width: 38.0625rem; /* Limit the width on larger screens */
    margin:50px auto 0 auto; /* Center the element horizontally */
    text-align: center; /* Center text */
    background-color: var(--color-card-bg);
    border-radius: 20px;
}

@media (min-width: 768px) {
    .step-card {
    flex-direction: row; /* Switch to horizontal layout on larger screens */
    align-items: flex-start; /* Align items to the top */
    text-align: left; /* Align text to the left */
    }
}


.step-icon {
    width: 96px;
    height: 96px;
}

.step-content {
    flex: 1;
}


.step-title {
    font-family: 'Dongle', sans-serif;
    font-size: 44px;
    color: var(--color-accent);
    margin: 0;
    line-height: 1;
}

.step-description {
    font-size: 18px;
    line-height: 30px;
    color: #fff;
    margin: 0;
}

/* Features Grid */

.features-grid-section {
    padding: 200px 0;
    background-color:var(--color-secondary);
}


.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 40px;
    max-width: 1142px;
    margin: 5rem auto;
    padding: 0 20px;
}


.feature-grid-item {
    background-color: var(--color-card-bg);
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}

.feature-icon {
    width: 96px;
    height: 96px;
    margin-bottom: 20px;
}

.feature-text {
    font-size: 16px;
    line-height: 35px;
    color: #fff;
    margin: 0;
}

/* FAQ Section */
.faq-section {
    padding: 200px 0;
    background-color: var(--color-primary);
}

.faq-container {
    background-color: var(--color-secondary);
    border-radius: 20px;
    max-width: 746px;
    margin: 0 auto;
    padding: 40px;
}

.faq-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.faq-icon {
    width: 96px;
    height: 96px;
}

.faq-title {
    color: var(--color-text-light);
    font-family: 'Dongle', sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

.faq-description {
    color: var(--color-accent);
    font-size: 18px;
    margin-top: 20px;
}

.faq-item {
    width: 100%;
    padding: 5px;
}

.faq-item-header {
    background-color: var(--color-primary);
    border-radius: 5px;
    border-bottom: 1px solid rgba(52, 59, 89, 1);
    min-height: 43px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.faq-item-title {
    color: #fff;
    font-weight: 700;
    margin: 0;
}

.faq-item-content {
    padding: 5px;
    color: #fff;
    font-weight: 400;
    line-height: 30px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}


.faq-item-content a{
    text-decoration:none;
    cursor:pointer;
}

.faq-item-content a:hover {
    opacity:.8;
}



/* Contact Section */
.contact-section {
    background-color: var(--color-secondary);
    padding: 200px 0;
}

.contact-form {
    max-width: 656px;
    margin: 0 auto;
    text-align: center;
}

.contact-description {
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    margin: 60px 0 40px 0;
}

.form-row {
    display: flex;
    gap: .75rem;
    margin-top: 4rem;
    flex-direction: row;
    flex-wrap: wrap;
}

.form-row > .form-floating {
    flex: 1 1 calc(50% - 0.75rem); /* för att ta hänsyn till gap */
    min-width: 0;
}

.form-input {
    flex: 1;
    border-radius: 5px;
    background-color: var(--color-primary);
    border: none;
    padding: 10px;
    color: #fff;
    line-height: 35px;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.form-input-error {
    border: 1px solid #EF5350!important;
}

.form-checkbox {
    display: flex;
    align-items: start;
    gap: .25rem;
    margin: 1.5rem 0;
    font-size: .95rem;
}

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


/*.form-checkbox input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 10px;
    background-color: darkorange;
}*/
.payee-modal-form-checkbox {
    appearance: none;
    -webkit-appearance: none;
    min-width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #1f243a;
    border-radius: 4px;
    background-color: #4A4F66;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.payee-modal-form-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid var(--color-text-light);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* Footer */
.site-footer {
    background-color: var(--color-background-footer);
    padding: 0 0 100px 0;
}

.footer-wave{
    padding:0 0 50px 0;
}

.footer-content {
    max-width: 851px;
    margin: 0 auto;
    display: flex;
    gap: 50px;
    margin-bottom:5rem;
}

.footer-nav {
    width: 20%;
}

.footer-title {
    color: var(--color-accent);
    font-family: 'Dongle', sans-serif;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 10px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li {
        margin: 10px 0;
    }

    .footer-links a {
        color: rgba(150, 156, 184, 1);
        text-decoration: none;
        font-size: 16px;
    }

    .footer-links a:hover {
        color:var(--color-accent);
    }

.footer-description {
    color: rgba(150, 156, 184, 1);
}

.footer-contact {
    width: 80%;
}

.footer-logo {
    width: 107px;
    margin: 75px auto 26px;
    display: block;
}

.footer-apps {
    text-align: center;
    color: rgba(150, 156, 184, 1);
    font-size: 16px;
    line-height: 25px;
    margin: 0 auto;
    max-width: 20rem;
}

.footer-links-bottom {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 14px;
    color: var(--color-accent);
    font-weight: 700;
}

.footer-links-bottom a{
    color:#EA8E2E;
    text-decoration:none;
}

/* Responsive Styles */

@media (max-width: 991px) {
    .site-header {
        padding: 100px 20px;
    }

    .round-container{
        width:100%;
        height:100%;
    }

    .feature-container, .feature-container-reverse {
        flex-direction: column-reverse;
    }

    .feature-image {
        width: 100%;
        max-width: 518px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .faq-container {
        padding: 20px;
        margin: 10px;
    }

    .faq-title {
        font-size: 40px;
    }

    .contact-section {
        padding: 100px 20px;
    }

    .contact-description {
        margin: 40px 0;
    }

    .form-row {
        flex-direction: column;
    }


    .footer-content {
        flex-direction: column;
        padding: 0 20px;
    }

    .footer-nav,
    .footer-contact {
        width: 100%;
    }

    .footer-logo {
        margin: 40px auto 26px;
    }
}


@media (max-width:480px) {
    .btn-accent, .btn-primary, .btn-secondary, .btn-outline {
        padding: 14px 32px;
    }

    .site-header {
        padding: 50px 20px 0;
    }

    .section-login{
        padding:0;
    }

    .payee-admin-section {
        padding: 50px 0;
    }

    .payee-admin-card {
        flex-direction: column;
    }

    .payee-admin-first-h{
        margin:1rem 0;
    }

    .payee-admin-payer-info{
        flex-direction:column;
    }

    .navbar-payee{
        padding:10px 0;
    }

    .top-logo {
        margin-left: 1.5rem !important;
        max-width: 75px;
    }

}


@media (max-width:767px) {
    .admin-nav {
        float:right;
        position:absolute;
        width: 100%;
        z-index: 99;
        left:0!important;
        padding:10px 0;
        height:auto!important;
    }
    .admin-toggle {
        display:block;
    }

    .admin-nav-menu-hidden {
        display: none;
    }
    .admin-nav-menu-visible {
        display: block;
    }

    #printableTable {
        display: none;
    }

    #adminToggle{
        vertical-align:middle;
        font-size:1.5rem;
        color:var(--color-primary);
        cursor:pointer;
    }

    .payee-admin-form-main{
        flex-direction:column;
    }
}

/*.nav-scrollable {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    z-index: 1000;
    transition: max-height 0.3s ease;
    background-color: inherit;
}

.navbar-toggler:checked + .nav-scrollable {
    max-height: 100vh;
    overflow-y: auto;
}*/

.text-light {
    color: var(--color-text-light);
}

.text-accent {
    color: var(--color-accent);
}

.text-white {
    color: #fff;
}

.text-orange {
    color: var(--color-accent);
}

.text-hero {
    color:var(--color-primary);
}

.bg-payee-light {
    background-color: var(--color-background-light );
}