/* Allgemeine Einstellungen */
body {
    margin: 0;
    padding: 0;
    font-family: 'Nunito Sans', sans-serif;
    background-color: #000000;
    color: #AFAFAF;
    text-transform: uppercase;
    line-height: 1.5; /* Vergrößert die Zeilenhöhe */
}

/* Header */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px; /* Vergrößert die Abstände */
}

.logo {
    font-size: 1.875em; /* Vergrößert die Schrift */
    font-weight: 900;
    color: #FFFFFF;
}

.logo-img {
    height: 50px; /* Vergrößert das Logo */
}

/* Wrapper */
.wrapper {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 25px;
    min-height: 60vh; /* 125% der ursprünglichen Höhe */
}

.left, .right {
    flex: 1;
    min-width: 375px; /* Vergrößert die Spaltenbreite */
    padding: 50px; /* Vergrößert die Abstände */
}

/* Titel */
.title {
    font-size: 3em; /* Vergrößert die Schriftgröße */
    color: #FFFFFF;
    font-weight: 900;
    letter-spacing: 2.5px; /* Vergrößert den Buchstabenabstand */
    margin-bottom: 25px;
}

/* Wechselkurse */
.exchange-rates {
    display: flex;
    justify-content: left;
    gap: 20px; /* Vergrößert die Lücke zwischen den Kursen */
}

.rate {
    text-align: left;
}

.label {
    font-size: 1em; /* Vergrößert die Schriftgröße */
    text-transform: none;
    color: #505A6A;
    margin-bottom: 6.25px; /* Verkleinert den Abstand leicht */
}

.value {
    font-size: 1.875em; /* Vergrößert die Schriftgröße */
    color: #FFFFFF;
}

.amount {
    font-weight: 900;
}

.currency {
    font-weight: 300;
}

/* Login Formular */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 18.75px; /* Vergrößert den Abstand zwischen den Feldern */
    min-width: 350px;
}

.input-field {
    padding: 12.5px 25px; /* Vergrößert das Padding */
    background-color: #1B2029;
    border: none;
    border-radius: 999px;
    color: #FFFFFF;
    font-size: 1.25em; /* Vergrößert die Schriftgröße */
}

.input-field::placeholder {
    color: #505A6A;
}

.btn-login {
    padding: 12.5px 25px; /* Vergrößert das Padding */
    border: none;
    border-radius: 999px;
    background: linear-gradient(to right, #40DAFF, #206D80);
    color: #FFFFFF;
    font-size: 1.25em; /* Vergrößert die Schriftgröße */
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.btn-login:hover {
    background: #40DAFF;
    transform: scale(1.05);
}

/* Footer */
footer {
    padding: 25px; /* Vergrößert die Abstände */
    color: #505A6A;
    font-size: 1em; /* Vergrößert die Schriftgröße */
}

hr {
    border: none;
    border-top: 1px solid #FFFFFF;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-text {
    text-transform: none;
    font-size: 0.75em; /* Vergrößert die Schriftgröße */
    max-width: 50%;
}

.footer-flag {
    height: 25px; /* Vergrößert die Flagge */
}

.kurs-wymiany {
    margin-bottom: -37.5px!important; /* Beibehalten mit proportionaler Vergrößerung */
}

.column-align-vertical-center {
    align-content: center;
}

.column-align-horizontal-center {
    display: flex;
    justify-content: center; 
    align-items: center;
    flex-direction: column;
}

.content-small-width {
    max-width: 400px;
    /*ERR*/
    display: flex;
    justify-content: center;
}

.dashboard-wrapper {
    padding-top: 0px !important;
}

.dashboard-column {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .left, .right {
        padding: 10px; /* Reduziert das Padding für Mobilgeräte */
        min-width: auto;
    }

    .wrapper {
        flex-direction: column; /* Spalten untereinander anordnen */
        padding: 10px;
    }

    .title {
        font-size: 2em; /* Schriftgröße für Mobilgeräte anpassen */
    }

    .login-form {
        min-width: 100%; /* Formular passt sich an die Breite an */
    }

    .footer-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-text {
        max-width: 100%; /* Text nimmt volle Breite ein */
        font-size: 0.85em;
    }

    .footer-flag {
        margin-top: 10px;
    }

    .content-small-width {
        min-width: 100%;
    }

    .label {
        font-size: 0.9em;
    }

    .rate {
        font-size: 0.75em;
    }

    .kurs-wymiany {
        margin-bottom: -20.5px!important; /* Beibehalten mit proportionaler Vergrößerung */
    }

    .wrapper-mob {
        display: block;
        padding-bottom: 40px;
    }
}

/* ################## DASHBOARD ################## */

/* Kreditkarte */
.credit-card {
    background: linear-gradient(to top right, #206D80, #40DAFF);
    border-radius: 25px;
    padding: 40px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 200px;
    position: relative;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.left-column-width-reduc {
    max-width: 400px;
}

.card-logo {
    width: 50px;
    height: auto;
    position: absolute;
    top: 20px;
    right: 20px;
}

.card-number {
    font-size: 1.5em;
    letter-spacing: 2px;
    font-weight: 700;
    margin: 30px 0 10px;
    text-align: left;
}

.card-details {
    display: flex;
    justify-content: space-between;
    margin-bottom:-15px;
}

.card-owner, .card-expiry {
    display: flex;
    flex-direction: column;
}

.label-card {
    font-size: 0.8em;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: -15px;
}

.owner-name {
    font-size: 1em;
    font-weight: 900;
}

.expiry-date {
    font-size: 1em;
    font-weight: 900;
}

/* Dashboard Wrapper */
.dashboard-wrapper {
    padding-top: 0;
    display: flex;
    gap: 20px;
    min-height: 0vh !important;
}

.dashboard-column {
    padding-top: 0;
    padding-bottom: 0;
}

/* Kopieren-Bereich */
.copy-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    cursor: pointer;
    color: #AFAFAF; /* Hellgrauer Text */
    transition: color 0.3s ease; /* Sanfter Farbwechsel */
}

.copy-section:hover {
    color: #505A6A; /* Dunkleres Grau bei Hover */
}

.copy-icon {
    width: 18px;
    height: 18px;
}

.copy-label {
    font-size: 0.75em;
    text-transform: uppercase;
}

/* Wrapper für Kontostand und Veränderung */
.account-balance-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #FFFFFF; /* Weiße untere Border */
    margin-bottom: 20px;
}

/* Rechte Spalte: Kontostand */
.current-balance {
    flex: 1;
    text-align: right;
}

.balance-label {
    font-size: 0.9em; /* Etwas kleinere Schriftgröße */
    font-weight: 400; /* Normalgewicht */
    color: #AFAFAF; /* Hellgrau */
    margin-bottom: -35px; /* Abstand zum Wert */
}

.balance-value {
    font-size: 1.9em; /* Größerer Text für den Kontostand */
    font-weight: 700; /* Fett für den Betrag */
    color: #FFFFFF; /* Weißer Text */
    margin-bottom: -15px;
}

.balance-value .currency {
    font-weight: 400; /* Light für die Währung */
    margin-left: 5px; /* Abstand zum Betrag */
}

.orientation {
    font-size: 1.3em !important;
}

/* Navigation Wrapper */
.navigation-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Abstand zwischen den Spalten */
    margin-top: 20px;
}

/* Navigation Item */
.navigation-item {
    flex: 1;
    background-color: #1B2029; /* Dunkelgrauer Hintergrund */
    border: 1px solid #505A6A; /* Dunkelgrauer Rand */
    border-radius: 20px;
    color: #FFFFFF; /* Weiße Schrift */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Sanfte Übergänge */
    cursor: pointer;
    min-height: 80px;
    text-decoration: none!important;
}

.navigation-item:hover {
    background-color: #505A6A; /* Hellgrau bei Hover */
    border-color: #40DAFF; /* Neonblauer Rand bei Hover */
}

.navigation-label {
    font-size: 1em;
    font-weight: 700;
    text-align: left;
    margin: 0; /* Kein zusätzlicher Rand */
}

.navigation-icon {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 20px;
    right: 20px;
}

/* Admin-Container */
.admin-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Abstand zwischen den Buttons */
}

/* Admin-Buttons */
.admin-button {
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Icon und Text */
    background-color: #1B2029; /* Dunkelgrauer Hintergrund */
    border: 1px solid #505A6A; /* Dunkelgrauer Rand */
    border-radius: 15px;
    padding: 20px;
    color: #FFFFFF; /* Weiße Schrift */
    text-transform: uppercase;
    text-decoration: none; /* Entfernt Unterstreichung */
    font-size: 0.7em;
    font-weight: 300; /* Light */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Sanfte Übergänge */
    cursor: pointer;
}

.admin-button:hover {
    background-color: #505A6A; /* Hellgrau bei Hover */
    border-color: #40DAFF; /* Neonblauer Rand bei Hover */
}

.admin-icon {
    width: 24px;
    height: 24px;
}

/* Logout-Button */
.logout-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Icon und Text */
    margin-top: 20px; /* Abstand zu den oberen Buttons */
    cursor: pointer;
    text-decoration: none;
}

.logout-icon {
    width: 24px;
    height: 24px;
}

.logout-label {
    font-size: 1em;
    font-weight: 300; /* Light */
    color: #FFFFFF; /* Weiße Schrift */
    text-transform: uppercase;
}

/* Wrapper für Transaktionsüberschrift */

.recent-transactions-title {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom:15px;
}

.recent-transactions-title h2 {
    font-size: 1.2em; /* Etwas kleiner als der Kontostand */
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.recent-transactions-icon {
    width: 24px;
    height: 24px;
    padding-left: 15px;
}

/* Liste der Transaktionen */
.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Abstand zwischen Transaktionen */
}

.transaction-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #1B2029; /* Dunkelgrau */
    border-radius: 15px;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.transaction-item:hover {
    background-color: #505A6A; /* Helleres Grau bei Hover */
}

.transaction-icon-circle {
    width: 40px;
    height: 40px;
    background-color: #505A6A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transaction-icon {
    width: 24px;
    height: 24px;
}

.transaction-details {
    flex-grow: 1;
    margin-left: 15px;
    color: #FFFFFF;
}

.transaction-recipient {
    font-size: 1em;
    font-weight: 700;
    margin: 0;
}

.transaction-meta {
    font-size: 0.9em;
    font-weight: 400;
    color: #AFAFAF; /* Hellgrau */
    margin: 0;
}

.transaction-amount {
    font-size: 1em;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.transaction-amount.positive {
    color: #56FF40; /* Neongrün */
}

.transaction-amount.negative {
    color: #FF4040; /* Rot */
}

.transaction-amount .currency {
    font-weight: 400; /* Dünn */
    margin-left: 5px;
}

/* Wrapper für den Link */
.all-transactions-link-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Abstand zur Transaktionsliste */
}

/* Link zu "Wszystkie transakcje" */
.all-transactions-link {
    font-size: 0.9em; /* Etwas kleiner für dezente Darstellung */
    font-weight: 300; /* Dünn */
    color: #FFFFFF; /* Weiß */
    text-decoration: none; /* Entfernt Unterstreichung */
    transition: color 0.3s ease; /* Sanfter Hover-Effekt */
}

.all-transactions-link:hover {
    color: #40DAFF; /* Neonblau bei Hover */
}

.padding-bottom {
    padding-bottom: 20px;
}

.back {
    height: 30px;
    width: 30px;
}

.order-rev {
    order: 3!important;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .dashboard-wrapper {
        flex-direction: column;
        padding: 10px;
    }

    .left, .right {
        padding: 10px;
    }

    .left {
        order: 2;
    }

    .right {
        order: 1;
    }

    .credit-card {
        max-width: auto;
        width: auto;
        height: auto;
        padding: 20px;
        border-radius: 20px;
    }

    .card-number {
        padding-top: 30px;
    }

    .label-card {
        font-size: 0.7em;
    }

    .navigation-wrapper {
        gap: 10px; /* Abstand zwischen den Spalten */
    }
}

/* Wrapper für Transferseite */
.transfer-wrapper {
    display: flex;
    gap: 20px;
    margin: 20px;
}

/* Header für die linke Spalte */
.transfer-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.transfer-icon {
    width: 40px;
    height: 40px;
}

.transfer-title {
    font-size: 1.5em;
    font-weight: 900;
    color: #FFFFFF;
    text-transform: uppercase;
}

/* Info-Box */
.info-box {
    display: flex;
    gap: 15px;
    padding: 20px;
    background-color: transparent;
    border: 1px solid #40DAFF;
    border-radius: 20px;
    color: #AFAFAF;
    line-height: 1.6;
    margin-bottom: 20px;
}

.info-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.info-text {
    font-size: 0.9em;
    color: #FFFFFF;
    text-transform: none;
}

/* Großes Eingabefeld für Betrag */
.large-input {
    font-size: 1.5em;
    font-weight: 700;
    background-color: #000000; /* Schwarzer Hintergrund */
    color: #FFFFFF;
    border-radius: 999px;
}

/* ################## TRANSFER MONEY ################## */
/* Info Box */
.info-box {
    display: flex;
    align-items: center;
    background-color: #1B2029;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
}

.info-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.info-title {
    font-size: 1.2em;
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    margin: 0;
}

/* Kontostand Anpassung */
.account-balance-wrapper.no-border {
    border-bottom: none;
}

.current-balance.left-aligned {
    text-align: left;
}

/* Warnung */
.warning-box {
    display: flex;
    align-items: flex-start;
    background-color: #1B2029;
    border: 1px solid #505A6A;
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
}

.warning-icon {
    width: 30px;
    height: 30px;
    margin-right: 15px;
}

.warning-text {
    font-size: 0.9em;
    color: #FFFFFF;
    line-height: 1.5;
    text-transform: none; /* Kein Uppercase */
}

/* Formular */
.transfer-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width:80%;
}

/* Geldbetrag-Feld */
.input-large.no-label {
    font-size: 2.5em; /* Großere Schrift */
    height: auto; /* Passt sich dynamisch an */
    background-color: #000000; /* Schwarzer Hintergrund */
    border: none; /* Keine Border */
    color: #FFFFFF; /* Weißer Text */
    text-align: center; /* Zentriert den Text */
    padding: 20px 0; /* Abstand oben und unten */
    border-radius: 999px; /* Abgerundete Ecken */
}

.input-large.no-label::placeholder {
    color: #505A6A; /* Hellgrauer Platzhalter */
    font-weight: 700; /* Fett */
    font-size: 1em;
}

.btn-green {
    padding: 12.5px 25px; /* Vergrößert das Padding */
    border: none;
    border-radius: 999px;
    background: linear-gradient(to right, #65FF40, #338020);
    color: #FFFFFF;
    font-size: 1.25em; /* Vergrößert die Schriftgröße */
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease; 
}

.btn-red {
    padding: 12.5px 25px; /* Vergrößert das Padding */
    border: none;
    border-radius: 999px;
    background: linear-gradient(to right, #FF4040, #802020);
    color: #FFFFFF;
    font-size: 1.25em; /* Vergrößert die Schriftgröße */
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease; 
}

.border-green {
    border-color: #65FF40!important;
}

.border-red {
    border-color: #FF4040;
}

/* ###################### TRANSAKTIONSINFORMATIONEN ###################### */

/* Container für Transaktionsdetails */
.transaction-container {
    max-width: 900px;
    margin: 20px auto;
    background-color: #1B2029; /* Dunkelgrauer Hintergrund */
    border: 1px solid #AFAFAF; /* Hellgrauer Rand */
    border-radius: 30px;
    padding: 20px 30px;
    color: #FFFFFF;
    text-transform: none; /* Keine Uppercase-Schrift */
}

/* Timestamp */
.timestamp {
    text-align: right;
    font-size: 0.9em;
    color: #AFAFAF; /* Hellgrau */
    margin-bottom: 20px;
}

/* Header: Sender, Betrag, Empfänger */
.transaction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.payer, .payee {
    text-align: left;
}

.amount {
    text-align: center;
}

.labelinfo {
    font-size: 0.9em;
    color: #AFAFAF; /* Hellgrau */
    margin-bottom: 5px;
}

.valueinfo {
    font-size: 1.2em;
    font-weight: 700;
}

/* Betrag */
.amount-value {
    font-size: 2em;
    font-weight: 700;
}

.currency {
    font-weight: 400;
    margin-left: 5px;
}

/* Details */
.transaction-infodetails {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.detail {
    flex: 1 1 300px;
}

.detail .labelinfo {
    font-size: 0.9em;
    color: #AFAFAF;
    margin-bottom: -20px;
}

.detail .valueinfo {
    font-size: 1em;
    font-weight: 700;
}

/* Footer */
.transaction-footer {
    margin-top: 30px;
}

.reference {
    font-size: 0.9em;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.account-numbers {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.account-numbers .left, .account-numbers .right {
    font-size: 1em;
    font-weight: 700;
    color: #FFFFFF;
    padding: 0px;
}

.transaction-id {
    font-size: 0.9em;
    color: #AFAFAF; /* Hellgrau */
    text-align: left;
    word-wrap: break-word; /* Zeilenumbruch für lange IDs */
}

.main {
    padding: 20px;
}

.nadawcyodbiorcy {
    margin-bottom: -20px;
}

/* Mobile-Anpassungen */
@media (max-width: 768px) {
    .transaction-header {
        flex-direction: column; /* Elemente untereinander anordnen */
        align-items: flex-start; /* Elemente links ausrichten */
        gap: 0px; /* Abstand zwischen den Elementen */
    }

    .order-one-mob {
        order:1;
    }

    .order-two-mob {
        order: 2;
    }
}

.error-message {
    color: #FF4040;
    font-size: 0.9em;
    margin-top: 10px;
}

.error {
    color: #FF4040;
    font-size: 0.9em;
    margin-top: 10px;
}

.success {
    color: #65FF40;
    font-size: 0.9em;
    margin-top: 10px;
}