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

/* Link Boxen mit Hover Funktion*/
.copy-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -30px; /* Schwebt über der Box */
    left: 75%;
    transform: translateX(-50%);
    background-color: #ff4081; /* Pink für „Klicken zum Kopieren“ */
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    z-index: 10; /* Sicherstellen, dass der Tooltip darüber angezeigt wird */
}
.copied .copy-tooltip {
    background-color: #4CAF50; /* Grün für „Kopiert!“ */
}
.affiliate-link-item {
    position: relative;
    color: #B99F68;
    cursor: pointer;
    padding: 15px;
}
.affiliate-link-item:hover{
    background-color: #E3D4A6;
}
.affiliate-link-item:hover .copy-tooltip{
    visibility: visible;
    opacity: 1;
}


/* Affiliate Registration */
.affiliate-registration {
    font-family: Lato, sans-serif;
    text-align: center; /* Zentriert den Text */
    color: #666;
    line-height: 1.3em;
    font-size: 20px;
    font-weight: 400;
}
.with-arrows {
    font-weight: bold; /* Fettschrift */
    color: #666; /* Textfarbe */
    margin: 20px 0; /* Abstand nach oben und unten */
}
.with-arrows .arrow {
    color: #752726; /* Farbe der Pfeile */
    margin: 0 10px; /* Abstand zwischen Pfeilen und Text */
    font-size: 24px; /* Pfeile etwas größer machen */
    vertical-align: middle; /* Pfeile zentrieren */
}
.affiliate-registration input[type="radio"] {
    /*accent-color: #B99F68; /* Ändert die Hauptfarbe */
    appearance: none !important; /* Entfernt das standardmäßige Aussehen */
    -webkit-appearance: none !important; /* Für Safari */
    -moz-appearance: none !important; /* Für ältere Firefox-Versionen */
    width: 18px;
    height: 18px;
    border: 1px solid #B99F68 !important; /* Farbe des Rahmens */
    border-radius: 50%; /* Macht es rund */
    background-color: white; /* Hintergrundfarbe */
    cursor: pointer;
    position: relative;
}
.affiliate-registration input[type="radio"]:checked::before {
    content: ""; /* Leerer Inhalt für das Pseudo-Element */
    position: absolute; /* Absolut positioniert innerhalb des Radio-Buttons */
    top: 2px; /* Abstand vom oberen Rand */
    left: 2px; /* Abstand vom linken Rand */
    width: 14px; /* Größe des inneren Kreises */
    height: 14px;
    background-color: #B99F68; /* Farbe des inneren Kreises */
    border-radius: 50%; /* Rund machen */
}
.affiliate-registration input[type="checkbox"] {
    /* Stil für die Checkbox */
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #B99F68;
    border-radius: 4px; /* Optional: leicht abgerundet */
    background-color: white;
    cursor: pointer;
    position: relative;
}
/* Stil für die Checkbox, wenn sie aktiviert ist */
.affiliate-registration input[type="checkbox"]:checked {
    background-color: #B99F68;
    border-color: #B99F68;
}
.affiliate-registration input[type="checkbox"]:checked::before {
    content: "✔"; /* Check-Symbol */
    color: white;
    font-size: 14px;
    position: absolute;
    top: 1px;
    left: 3px;
}
.affiliate-registration label {
    display: flex;
    justify-content: center; /* Zentriert die Radio-Buttons */
    gap: 10px; /* Abstand zwischen Checkbox und Text */
    font-size: 18px; /* Schriftgröße des Textes */
    color: #666; /* Textfarbe */
    cursor: pointer; /* Zeigt Klickbarkeit an */
}
.affiliate-registration-radio-group {
    display: flex;
    justify-content: center; /* Zentriert die Radio-Buttons */
    gap: 10px;
}
#login-form,
#registration-form  {
    display: none;
    margin-top: 10px; /* Abstand zwischen Label und Eingabe */
    box-shadow: 0 0 5px #E3D4A6; /* Schimmer-Effekt */
    background-color: #E3D4A6;
    width: 90%;
    max-width: 800px;
    margin: auto;
    margin-top: 10px !important;
    padding: 15px;
}
#login-form input,
#registration-form input {
    display: block; /* Block-Level: Jedes Feld nimmt die ganze Zeile ein */
    width: 100%; /* Fülle die Breite des Containers */
    max-width: 400px;
    height: 30px; /* Einheitliche Höhe */
    padding: 10px; /* Innenabstand für Text */
    margin: 10px auto;
    margin-top: 5px !important;
    font-size: 18px; /* Schriftgröße */
    border: 1px solid #B99F68; /* Rahmen */
    border-radius: 4px; /* Abgerundete Ecken */
    box-sizing: border-box; /* Innenabstand und Rahmen zählen zur Gesamtbreite */
}
#login-form input:focus,
#registration-form input:focus {
    border-color: #B99F68; /* Rahmenfarbe beim Fokus */
    outline: none; /* Standard-Outline entfernen */
    box-shadow: 0 0 5px #E3D4A6; /* Schimmer-Effekt */
}
.affiliate-registration-button {
    width: 100%; /* Volle Breite */
    max-width: 400px;
    margin: 10px auto; /* Zentrierter Button */
    height: 40px;
    background-color: #B99F68; /* Hauptfarbe */
    color: white;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.affiliate-registration-button:hover {
    background-color: #D6BF8D; /* Dunklere Farbe beim Hover */
    border: 1px solid #B99F68; /* Rahmen */
    color: #666;
}



/* Affiliate Abrechnungs-pdf */
.affiliate-invoice-template-body {
    font-family: Helvetica, sans-serif;
    margin: 10mm 10mm; /* Oben/Unten: 25 mm, Links/Rechts: 20 mm */
}
.affiliate-invoice-template .align-left {
    text-align: left;
}
.affiliate-invoice-template .align-center {
    text-align: center;
}
.affiliate-invoice-template .align-right {
    text-align: right;
}
.affiliate-invoice-template .header {
    text-align: right;
}
.affiliate-invoice-template .header h1 {
    font-size: 20px;
    margin: 0;
    font-weight: 500;
}
.affiliate-invoice-template .header p {
    margin: 5px 0;
    font-size: 12px;
}
.affiliate-invoice-template .admin-address {
    display: inline-block;
    font-size: 10px;
}
.affiliate-invoice-template .admin-address hr {
    border: none;
    border-top: 1px solid #999;
    width: 100%;
}
.affiliate-invoice-template .address {
    margin-top: 0px;
    margin-bottom: 30px;
    font-size: 12px;
}
.affiliate-invoice-template .invoice-text {
    font-size: 12px;
}
.affiliate-invoice-template .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 12px;
}
.affiliate-invoice-template .table th,
.affiliate-invoice-template .table td {
    border: 1px solid #ddd;
    padding: 5px;
}
.affiliate-invoice-template .table th {
    background-color: #f2f2f2;
}
.affiliate-invoice-template .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    color: #888;
    background-color: #fff;
    text-align: center;
    margin: 10mm;
}
.affiliate-invoice-template .table-footer {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    table-layout: fixed; /* Erzwingt gleiche Breite */
}
.affiliate-invoice-template .table-footer td {
    width: 33.33%; /* Jede Spalte nimmt ein Drittel der Breite ein */
    border-top: 1px solid #ddd;
    vertical-align: top;
    padding: 5px;
}



/* Affiliate Abrechnungsdetails */
.affiliate-billing-form {
    max-width: 800px;
    margin: 0 auto
}
.affiliate-form-field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.affiliate-form-row {
    width: 100%;
    margin: 0px !important;
    padding: 0px !important;
}
.affiliate-form-row.half-width {
    width: calc(50% - 5px);
}
.affiliate-form-row label {
    font-size: 14px;
    color: #999;
    position: relative;
    /*top: -8px;
    left: 10px;
    background-color: #fff;*/
    padding: 0px;
}
.affiliate-form-row input,
.affiliate-form-row select {
    width: 100%;
    color: #666666 !important;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%) !important;
    border: 1px solid #ddd !important;
    background-color: #fff !important;
    font-size: 18px !important;
    height: 41px !important;
    outline: 0 !important;
    vertical-align: middle !important;
    border-radius: 5px !important;
    padding: 15px !important;
    margin: 0px !important;
    box-sizing: border-box;
}
.affiliate-form-row select {
    /* Spezifische Anpassungen für das Dropdown, falls nötig */
    padding: 15px !important; /* Platz für das Icon */
    min-height: 50px;
    cursor: pointer;

}
.affiliate-form-row input:focus,
.affiliate-form-row select:focus {
    color: #666666 !important;
    box-shadow: 0 0px 5px #ccc !important;
    border: 1px solid #ddd !important;
    background-color: #fff !important;
}
.affiliate-form-row.locked input,
.affiliate-form-row.locked select {
    background-color: #f7f7f7;
    color: #aaa;
    border: 1px solid #ddd;
    cursor: not-allowed;
}
.affiliate-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #B99F68;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
}
.affiliate-button:hover {
    background-color: #B99F68;
}
#edit-billing-info.affiliate-button {
    margin-top: 0px;
}
.vat-error {
    color: red;
    font-size: 1em;
    margin-top: 5px;
    font-weight: bold;
}



/* Affiliate Sales Dashboard und Statistiken*/
/* Grundlegendes Styling für das Affiliate-Dashboard */
.affiliate-sales-dashboard,
.affiliate-statistics,
.affiliate-invoices,
.affiliate-links {
    max-width: 100%;
    overflow-x: auto;
    padding: 0px;
}
.affiliate-sales-dashboard-table th,
.affiliate-sales-dashboard-table td,
.affiliate-statistics-table th,
.affiliate-statistics-table td,
.affiliate-invoices-table th,
.affiliate-invoices-table td,
.affiliate-links-table th,
.affiliate-links-table td {
    padding: 10px !important; /* Padding reduziert */
    line-height:25px;
}
.affiliate-sales-dashboard-table tr:hover,
.affiliate-statistics-table tr:hover,
.affiliate-invoices-table tr:hover,
.affiliate-links-table tr:hover {
    background-color: #f1f1f1;
}

.affiliate-invoices-table a {
    color: #B99F68;
}
.affiliate-invoices-table a i {
    color: #B99F68; 
    font-size: 25px; 
    transition: color 0.3s ease;
}

/* Tabelle für mobile Geräte optimieren */
@media (max-width: 900px) {
    .affiliate-sales-dashboard-table, 
    .affiliate-statistics-table, 
    .affiliate-invoices-table, 
    .affiliate-links-table {
        width: 100%;
        display: block;
        overflow-x: auto;
        border: 0px solid #eee !important;
    }
    .affiliate-sales-dashboard-table tbody,
    .affiliate-statistics-table tbody, 
    .affiliate-invoices-table tbody, 
    .affiliate-links-table tbody {
        width: 100%;
        display: block;
        overflow-x: auto;
        border-width: 10px !important;
    }
    .affiliate-sales-dashboard-table thead, 
    .affiliate-statistics-table thead, 
    .affiliate-invoices-table thead, 
    .affiliate-links-table thead {
        display: none; /* Tabellenkopf ausblenden */
    }
    .affiliate-sales-dashboard-table tr,
    .affiliate-statistics-table tr, 
    .affiliate-invoices-table tr, 
    .affiliate-links-table tr {
        display: block;
        margin-bottom: 15px;
        border: 2px solid #eee !important;
        box-shadow: 4px 4px 10px -6px rgba(0, 0, 0, 0.3);
    }
    .affiliate-sales-dashboard-table td.hide-on-mobile,
    .affiliate-statistics-table td.hide-on-mobile,
    .affiliate-invoices-table td.hide-on-mobile, 
    .affiliate-links-table td.hide-on-mobile {
        display: none;
    }
    .affiliate-sales-dashboard-table td,
    .affiliate-statistics-table td,
    .affiliate-invoices-table td, 
    .affiliate-links-table td {
        display: block;
        text-align: right;
        padding: 5px !important;
        border-bottom: 1px solid #eee;
        font-size: 15px;
        position: relative;
    }
    .affiliate-sales-dashboard-table td::before,
    .affiliate-statistics-table td::before, 
    .affiliate-invoices-table td::before, 
    .affiliate-links-table td::before {
        content: attr(data-label); /* Daten-Labels hinzufügen */
        float: left;
        font-weight: bold;
    }
}


/* Affiliate Sales Statistiken */
.grouping-link {
    color: #666;
    text-decoration: none;
    font-weight: normal;
    font-size: 13px
}
.grouping-link.active {
    color: #752726;
    font-weight: bold;
}
.separator {
    color: #666;
    padding: 0 10px;
}



/* Affiliate Tabs */
.tab-links {
    display: flex;
    list-style: none;
    margin: 0px;
    padding: 0 !important;
    gap: 5px;
}
.tab-links li {
    list-style: none;
    cursor: pointer;
    margin-top: 10px;
    padding: 10px 20px;
    background: #E3D4A6;
    overflow: hidden;
    transition: background-color 0.3s, padding 0.3s, gap 0.3s;
}
.tab-links li.active {
    background: #B99F68;
    margin-top: 5px;
    color: #fff;
    font-weight: bold;
}
.tab-content {
    padding: 20px;
    border: 1px solid #E3D4A6;
    background: #fff;
}
.tab-content hr {
    border: 1px solid #E3D4A6;
}
.tab {
    display: none;
}
.tab.active {
    display: block;
}
/* Mobile-Ansicht */
@media (max-width: 900px) {
    .tab-links li {
        white-space: normal; /* Erlaubt mehrzeiligen Text */
        overflow: visible; /* Entfernt Textkürzung */
        line-height: 1.4;
        flex: 1 1 auto; /* Macht die Tabs flexibel */
        padding: 8px 10px; /* Reduziertes Padding */
        font-size: 16px; /* Kleinere Schriftgröße */
        align-items: center; /* Vertikale Zentrierung */
        text-align: center; /* Text zentrieren */
    }
}

/* Grundstil für alle Status */
span[class^="status-"] {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Abstand zwischen Icon und Text */
}
.status-paid {
    color: #538D91;
}
.status-paid::before {
    content: "\f4c0"; /* FontAwesome Unicode für fa-check-circle */
    font-family: "Font Awesome 5 Free"; /* FontAwesome Font-Familie */
    font-weight: 900; /* Für Solid Icons */
    color: #538D91;
}
.status-success {
    color: #B99F68;
}
.status-success::before {
    content: "\f005"; /* FontAwesome Unicode für fa-check-circle */
    font-family: "Font Awesome 5 Free"; /* FontAwesome Font-Familie */
    font-weight: 900; /* Für Solid Icons */
    color: #B99F68;
}
.status-trail::before {
    content: "\f252"; /* FontAwesome Unicode für fa-exclamation-triangle */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #E3D4A6;
}
.status-canceled {
    color: #752726;
}
.status-canceled::before {
    content: "\f071"; /* FontAwesome Unicode für fa-times-circle */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #752726;
}
.status-unknown::before {
    content: "\f057"; /* FontAwesome Unicode für fa-hourglass-half */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #666;
}




/* Admin Backend Tabelle */
.affiliate-admin {
    max-width: 95%;
    padding: 0px;
}
.affiliate-admin th{
    font-weight: bold;
}


/* Admin Backend Dashboard Kacheln */
.dashboard-kachel-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
    gap: 20px; /* Abstand zwischen den Kacheln */
    max-width: 768px;
}
.dashboard-kachel {
    background-color: #f0f0f0; /* Hintergrundfarbe der Kacheln */
    border: 1px solid #ccc; /* Rahmen der Kacheln */
    padding: 20px; /* Innenabstand der Kacheln */
    text-align: center; /* Textzentrierung */
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Schatteneffekt */
    width: 90%; /* Breite der Kacheln auf 50% reduziert */
    margin: 0 auto; /* Zentriert die Kacheln horizontal */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Sanfte Übergänge für Hover-Effekte */
    cursor: pointer; /* Mauszeiger als Hand über der Kachel */
}
.dashboard-kachel a {
    text-decoration: none; /* Unterstreichung der Links entfernen */
    color: #333; /* Textfarbe der Links */
    font-size: 1.6em; /* Schriftgröße der Links */
    display: block; /* Sorgt dafür, dass der Link die gesamte Kachel ausfüllt */
    height: 100%; /* Linkhöhe auf 100% setzen */
    width: 100%; /* Linkbreite auf 100% setzen */
}
.dashboard-kachel:hover {
    /*transform: translateY(-5px); /* Kachel leicht nach oben bewegen */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); /* Deutlicheren Schatten hinzufügen */
    background-color: #e0e0e0; /* Hellere Hintergrundfarbe bei Hover */
}


/* Admin Backend Dashboard Affiliate Liste Akkordeon */
.affiliate-details-row {
    background-color: #f8f8f8;
}
.affiliate-details-content {
    padding: 10px;
}