.loginscreen .logo-name {
    display: none !important;
}

.logo-name {
    background: none !important;
}

.logo-name img {
    margin: 20px 0 !important;
}

.welcome-section {
    text-align: center !important;
    padding: 4rem 0 !important;
}

body {
    background-color: white !important;
}

.logo-container {
    margin-bottom: 2.5rem !important;
}

#BillectaSymbol {
    margin: 0 auto 1.5rem !important;
    display: block !important;
}

#BillectaSymbol svg {
    width: 96px !important;
    height: 96px !important;
    transition: transform 0.3s ease !important;
}

#BillectaSymbol:hover svg {
    transform: scale(1.1) !important;
}

.welcome-section h3 {
    color: #004643 !important;
    margin-bottom: 1.5rem !important;
    font-size: 2rem !important;
    font-weight: 500 !important;
}

.tabs-container {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0,70,67,0.08) !important;
    margin: 0 auto !important;
    max-width: 600px !important;
    overflow: hidden !important;
}

.nav-tabs {
    border-bottom: 2px solid #f0f0f0 !important;
    padding: 0 !important;
    display: flex !important;
    width: 100% !important;
    background: rgba(0,70,67,0.03) !important;
}

.nav-tabs > li {
    flex: 1 !important;
    text-align: center !important;
    margin: 0 !important;
    position: relative !important;
}

.nav-tabs > li > a {
    color: #96bcb3 !important;
    padding: 1.25rem 1.5rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.nav-tabs > li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #004643 !important;
    transform: scaleX(0) !important;
    transition: transform 0.3s ease !important;
}

.nav-tabs > li:hover > a {
    color: #004643 !important;
    background: rgba(0,70,67,0.05) !important;
}

.nav-tabs > li.active > a {
    color: #004643 !important;
    background: white !important;
}

.nav-tabs > li.active > a::after {
    transform: scaleX(1) !important;
}

.tab-content {
    padding: 2rem !important;
}

.form-control {
    height: 48px !important;
    border-radius: 6px !important;
    border: 2px solid #e0e0e0 !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1.5rem !important;
    transition: all 0.3s ease !important;
}

.form-control:focus {
    border-color: #004643 !important;
    box-shadow: 0 0 0 3px rgba(0,70,67,0.1) !important;
}

.tabs-container .btn,
.modal .btn {
    height: 48px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-size: 1.25rem !important;
}

.tabs-container .btn-primary,
.tabs-container .btn-default,
.modal .btn-primary,
.modal .btn-default {
    background-color: #004643 !important;
    border-color: #004643 !important;
    color: white !important;
}

.tabs-container .btn-primary:hover,
.tabs-container .btn-primary:focus,
.tabs-container .btn-primary:active,
.tabs-container .btn-default:hover,
.tabs-container .btn-default:focus,
.tabs-container .btn-default:active,
.modal .btn-primary:hover,
.modal .btn-primary:focus,
.modal .btn-primary:active,
.modal .btn-default:hover,
.modal .btn-default:focus,
.modal .btn-default:active {
    background-color: #003633 !important;
    border-color: #003633 !important;
    color: white !important;
}

.bankid-section button.btn-primary {
    width: auto !important;
    min-width: 200px !important;
}

.bankid-section {
    text-align: center !important;
    padding: 1rem 0 !important;
}

.bankid-section img {
    margin-bottom: 2rem !important;
    transition: transform 0.3s ease !important;
}

.bankid-section img:hover {
    transform: scale(1.05) !important;
}

.help-link {
    color: #004643 !important;
    font-size: 0.9rem !important;
    text-decoration: underline !important;
    margin-top: -1rem !important;
    display: inline-block !important;
}

.help-link:hover {
    color: #003633 !important;
}

.large-spinner {
    margin: 2rem auto !important;
}

.signing-message {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: rgba(255,255,255,0.85) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.modal-content {
    border-radius: 8px !important;
    border: none !important;
}

.modal-header {
    background-color: #004643 !important;
    color: #fff !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 1.5rem !important;
}

.modal-body {
    padding: 2rem !important;
}

.modal-footer {
    border-top: 1px solid #f0f0f0 !important;
    padding: 1.5rem !important;
}

.form-group .help-wrapper {
    text-align: left !important;
    margin-top: -1rem !important;
    margin-bottom: 1rem !important;
}

.form-group .help-wrapper a {
    color: #004643 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 0 !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.form-group .help-wrapper a:hover {
    color: #003633 !important;
}

.form-group .help-wrapper a i {
    margin-right: 0.5rem !important;
    font-size: 1.1rem !important;
}

.form-group .help-wrapper a:hover i {
    transform: translateX(2px) !important;
    transition: transform 0.3s ease !important;
}