/* ==========================================================================
   My Custom GTranslate Switcher - Finale Version
   ========================================================================== */

/* Schritt 1: Aggressives Verbergen ALLER Google/GTranslate UI-Elemente */
iframe.goog-te-banner-frame, 
body > .skiptranslate,
body > div.VIpgJd-ZVi9od-aZ2wEe-wOHMyf, /* NEU: Versteckt das Google Ladesymbol */
#gtranslate_wrapper { /* Zielt auf unseren versteckten Container */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Verhindert das "Springen" der Seite */
body { 
    top: 0 !important; 
}

/* Schritt 2: Styling Ihres Shortcode-Containers */
#my-gtranslate-switcher {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    z-index: 99999 !important; /* Erhöht, um über anderen Elementen zu liegen */
}

#my-gtranslate-switcher .mctp-current-lang {
    cursor: pointer;
}

/* Das Dropdown-Menü */
.mctp-lang-options {
    display: none;
    position: absolute; /* Wird per JS positioniert */
    background-color: white;
    list-style: none;
    padding: 6px;
    margin: 0;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 99999 !important;
}

/* Design für Flaggen und Links */
#my-gtranslate-switcher img, 
.mctp-lang-options img {
    width: 32px !important;
    height: 32px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    display: block !important;
}

.mctp-lang-options li {
    padding: 3px;
}

.mctp-lang-options a {
    display: block;
    line-height: 0;
    transition: transform 0.2s ease-in-out;
}

.mctp-lang-options a:hover {
    transform: scale(1.1);
}