/* Schriftart einbinden */
@font-face {
    font-family: 'area-extrabold'; /* Name der Schriftart */
    src: url('<?php echo plugins_url('/card-grading/fonts/area-extrabold.otf'); ?>') format('opentype'); /* Pfad zur Schriftart-Datei */
    font-weight: normal;
    font-style: normal;
}

/* Schriftart einbinden */
@font-face {
    font-family: 'lostatsea'; /* Name der Schriftart */
    src: url('<?php echo plugins_url('/card-grading/fonts/lostatsea.otf'); ?>') format('opentype'); /* Pfad zur Schriftart-Datei */
    font-weight: normal;
    font-style: normal;
}

/* Allgemeine Schriftart für das Dokument */
body {
    font-family: 'area-extrabold', sans-serif; /* Setzt die Schriftart für das gesamte Dokument */
}

/* Eingabefelder */
form input[type="text"] {
    padding: 8px;
    margin: 5px 0;
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'area-extrabold', sans-serif; /* Schriftart für Texteingaben */
}

form input[type="submit"] {
    padding: 8px 16px;
    border: none;
    background-color: #0073aa;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'area-extrabold', sans-serif; /* Schriftart für Buttons */
}

form input[type="submit"]:hover {
    background-color: #005177;
}

/* CSS für den Titel Kartendetails */
.cgs-title {
    text-align: center; /* Zentriert den Titel */
    font-size: 24px; /* Passt die Schriftgröße an (optional) */
    margin-bottom: 20px; /* Abstand unter dem Titel (optional) */
    font-family: 'area-extrabold', sans-serif; /* Schriftart für den Titel */
}

/* Details Container */
.cgs-details {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center; /* Zentriert den gesamten Inhalt */
}

/* Detail-Block */
.cgs-detail-item {
    display: flex;
    justify-content: center; /* Zentriert die Detail-Einträge horizontal */
    align-items: center;
    margin-bottom: 5px;
    border-bottom: 1px solid #ddd; /* Horizontale Trennlinie für jeden Eintrag */
    padding-bottom: 5px;
    padding-top: 5px;
    box-sizing: border-box; /* Stellt sicher, dass Padding und Border in der Gesamtbreite enthalten sind */
}

/* Keine Trennlinie am letzten Detail-Block */
.cgs-detail-item:last-child {
    border-bottom: none;
}

/* Detail-Bezeichnung */
.cgs-detail-label {
    flex: 1;
    padding-right: 10px;
    font-weight: bold; /* Label fett darstellen */
    text-align: right; /* Text im Label rechtsbündig */
    font-family: 'area-extrabold', sans-serif;
}

/* Detail-Wert */
.cgs-detail-value {
    flex: 1;
    padding-left: 10px;
    text-align: left; /* Text im Wert linksbündig */
    font-family: 'area-extrabold', sans-serif !important;
    text-shadow: 0.1px 0.5px 0 rgba(0, 0, 0, 0.2); /* Optional: Dünner Schatten */
}

body .cgs-detail-value {
    font-family: 'area-extrabold', sans-serif !important;
}

/* Population Report Formatierung */
.cgs-population-report {
    font-family: 'area-extrabold', sans-serif; /* Schriftart für die Population Report */
    text-align: center; /* Zentriert den gesamten Population Report Text */
    margin-top: 20px; /* Abstand oben für bessere Lesbarkeit */
}

.cgs-population-report .label {
    font-weight: bold; /* Label fett darstellen */
    display: inline-block; /* Verhindert das Umfließen von Text */
    margin-right: 5px; /* Abstand zwischen Label und Wert */
}

.cgs-population-report .value {
    font-family: 'area-extrabold', sans-serif; /* Schriftart für den Wert */
    font-weight: normal; /* Kein Fett für den Wert */
}

/* Modal Style */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    overflow: auto; /* Enable scroll if needed */
    display: flex; /* Flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

/* Modal Style MASTER */
.modal {
    display: none; /* Hidden by default */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    padding-top: 60px;
}

.modal-content {
	  position: relative;
    max-width: 90vw; /* Maximum width 90% of the viewport width */
    max-height: 90vh; /* Maximum height 90% of the viewport height */
    margin: auto; /* Center the content */
    background: #fff; /* White background for the image */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Optional shadow for better visibility */
	  overflow: hidden; /* Ensures that zoom lens doesn't overflow */

}

.modal-content img {
    width: 100%;
    height: auto;
}

.zoom-lens {
    position: absolute;
    border: 1px solid #000;
    cursor: crosshair;
    width: 100px; /* Breite der Lupe */
    height: 100px; /* Höhe der Lupe */
    opacity: 0.5; /* Semi-transparent */
    background: rgba(255, 255, 255, 0.5); /* Semi-transparentes Weiß */
    pointer-events: none; /* Keine Interaktion mit der Lupe */
    display: none; /* Initial versteckt */
}

.zoom-result {
    position: absolute;
    border: 1px solid #000;
    background: #fff;
    z-index: 10; /* Über anderen Inhalten */
    width: 200px; /* Breite des Vergrößerungsergebnisses */
    height: 200px; /* Höhe des Vergrößerungsergebnisses */
    display: none; /* Initial versteckt */
    background-repeat: no-repeat;
    overflow: hidden; /* Überlauf verbergen */
}

/* Close Button Style */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}



/* Platzhalterbild-Stil */
.placeholder-image {
    pointer-events: none; /* Verhindert, dass das Bild angeklickt werden kann */
    opacity: 0.6; /* Optional: Macht das Bild visuell unterscheidbar */
}

/* Container für die Bilder der Zertifikate */
.cgs-certificate-images {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.cgs-certificate-images img {
    max-width: 300px; /* Maximale Breite auf 300px begrenzen */
    height: auto; /* Höhe automatisch skalieren */
    cursor: pointer;
}

.cgs-detail-value {
    position: relative;
    display: inline-block;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-icon {
    background-color: #0b70fa; /* Blaue Hintergrundfarbe */
    color: #fff; /* Weiße Schriftfarbe */
    border-radius: 50%; /* Macht das Element rund */
    width: 15px; /* Breite des Icons */
    height: 15px; /* Höhe des Icons gleich der Breite für ein perfektes Kreis */
    display: flex; /* Flexbox für zentriertes Fragezeichen */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    font-weight: bold;
    cursor: help;
    margin-left: 3px; /* Abstand zum Text verringert */
    font-size: 12px; /* Größe des Fragezeichens angepasst */
    border: 1px solid #000; /* Schwarzer Rand um den blauen Kreis */
    vertical-align: middle; /* Verschiebt das Icon leicht nach oben */
    position: relative; /* Positionierung für feinere Anpassungen */
    top: -10px; /* Feine Anpassung, um das Icon höher zu positionieren */
    line-height: 1; /* Verhindert zusätzliche Höhen durch Zeilenhöhe */

}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 220px; /* Breite des Tooltips */
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Positionierung des Tooltips */
    left: 50%;
    margin-left: -110px; /* Zentriert den Tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.grading-icon {
    width: 20px; /* Oder eine andere Größe, die zu deinem Design passt */
    height: auto;
    vertical-align: middle; /* Sorgt dafür, dass das Icon in der Mitte der Zeile ausgerichtet wird */
    margin-left: 5px; /* Abstand zwischen der Bewertung und dem Icon */
}

/* Popup Style */
.popup {
    display: none; /* Versteckt das Popup standardmäßig */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Halbtransparenter Hintergrund */
}

.popup-content {
    position: absolute;
    max-width: 80%;
    max-height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.overlay {
    display: none; /* Versteckt das Overlay standardmäßig */
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
}

.flag-icon {
    width: 20px; /* Größe der Flaggen */
    height: 20px; /* Größe der Flaggen */
    margin-right: 5px;
    vertical-align: middle;
	  margin-right: 8px; /* Abstand zwischen Flagge und Sprachname */
    position: relative; /* Positionierung für Tooltip */
}

.flag-icon::after {
    content: attr(title); /* Tooltip-Text */
    position: absolute;
    left: 50%;
    top: 120%; /* Position des Tooltips unter dem Bild */
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0; /* Startwert der Sichtbarkeit des Tooltips */
    visibility: hidden; /* Startwert der Sichtbarkeit des Tooltips */
    transition: opacity 0s, visibility 0s; /* Sofortige Anzeige ohne Verzögerung */
    pointer-events: none; /* Verhindert, dass der Tooltip selbst interagiert */
}

.flag-icon:hover::after {
    opacity: 1; /* Sichtbarkeit des Tooltips bei Hover */
    visibility: visible; /* Sichtbarkeit des Tooltips bei Hover */
}

.language-name {
    font-size: 14px; /* Schriftgröße für den Sprachtext */
    vertical-align: middle;
    font-family: 'area-extrabold', sans-serif !important;
	  text-shadow: 0.1px 0.5px 0 rgba(0, 0, 0, 0.2);
}

/* Container-Style für zentriertes Layout */
.grading-container {
    margin-top: 50px;
}

/* Stil für Titel (h1 und h2) */
.grading-title {
    margin-bottom: 20px;
}

/* Stil für Labels innerhalb von Form-Elementen */
.grading-form-label {
    font-weight: bold;
}

/* Stil für Buttons */
.grading-btn {
    margin-top: 10px;
}