/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */

/* =========================================================================
   Sprachauswahl (Flaggen) - FILTROTECH Anpassungen
   ------------------------------------------------------------------------- */

/* Russische Flagge im Dropdown: JTL gibt data-iso="rus" aus (Theme zielte auf "ru"/"RU"). */
.language-dropdown .dropdown-menu .link-lang[data-iso="rus"] {
    background-image: url("/gfx/flags/ru.svg");
}

/* Aktuelle Flagge in der Navbar = dezentes, abgerundetes Chip mit Umrandung.
   margin-right sorgt fuer gleichmaessigen Abstand zu Konto-/Warenkorb-Icon. */
.language-dropdown .nav-link-custom.dropdown-toggle {
    width: 34px !important;
    height: 24px !important;
    padding: 0 !important;
    margin-right: 12px !important;
    text-indent: -9999px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    overflow: hidden;
}
.language-dropdown .nav-link-custom.dropdown-toggle::after {
    display: none !important; /* Bootstrap-Caret aus -> sauberes Flaggen-Chip */
}
html[lang="ru"] .language-dropdown .nav-link-custom.dropdown-toggle {
    background-image: url("/gfx/flags/ru.svg") !important;
}

/* Dropdown: Flaggen UNTEREINANDER, abgerundet, dezenter Look.
   WICHTIG: display NUR ueber .show -> sonst bleibt das Menue dauerhaft offen. */
.language-dropdown .dropdown-menu {
    min-width: 0 !important;
    width: auto !important;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,60,75,.20);
    margin-top: 10px;
    overflow: hidden;
}
.language-dropdown .dropdown-menu.show {
    display: flex;
}
.language-dropdown .dropdown-menu .link-lang {
    width: 48px;
    height: 34px;
    margin: 0 !important;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.22);
    transition: transform .16s ease, box-shadow .16s ease;
}
.language-dropdown .dropdown-menu .link-lang:hover {
    transform: translateY(-1px) scale(1.07);
    box-shadow: 0 5px 14px rgba(0,0,0,.28);
}
.language-dropdown .dropdown-menu .link-lang.active {
    box-shadow: 0 0 0 2px #F8BF00, 0 2px 6px rgba(0,0,0,.25);
}

/* Mobil: kompaktes, rechtsbuendiges Kaertchen; Chip etwas kleiner. */
@media (max-width: 768px) {
    .language-dropdown .nav-link-custom.dropdown-toggle {
        width: 30px !important;
        height: 21px !important;
        margin-right: 8px !important;
    }
    .language-dropdown .dropdown-menu {
        max-width: 64px;
        left: auto !important;
        right: 8px !important;
        margin-left: auto;
        padding: 6px;
        gap: 6px;
        border-radius: 12px;
    }
    .language-dropdown .dropdown-menu .link-lang {
        width: 42px;
        height: 30px;
    }
}

/* =========================================================================
   USP-Leiste (Startseite): auf kleinen Bildschirmen ALLE Felder linksbuendig.
   Das Standard-Snippet zentriert nur das letzte Feld (Button) -> uneinheitlich.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ft-usp .ft-usp-item:last-child {
        justify-content: flex-start !important;
    }
}

/* =========================================================================
   Neuer Footer (Box 130 = volle Breite) + alte Template-Teile aufraeumen
   ------------------------------------------------------------------------- */
#footer-boxes { margin:0 !important; }
#footer-boxes > div { flex:0 0 100% !important; max-width:100% !important; padding:0 !important; }
#footer-boxes .box, #footer-boxes .box-normal { padding:0 !important; margin:0 !important; background:none !important; border:0 !important; }
#footer-boxes .box-title, #footer-boxes .box-normal-hr { display:none !important; }
/* Template-Widerrufsbutton ausblenden (unser Button steht in der Footer-Spalte) */
footer .withdrawal-link-wrapper { display:none !important; }
/* eigene Copyright-Leiste in der Footer-Box -> Template-Copyright + USt-Hinweis aus */
footer #copyright, footer .footnote-vat { display:none !important; }

/* Template-Hinweis auf der Versand-Seite ("Die Versandkosten koennen erst
   ermittelt werden...") - steht schon in unserer "Gut zu wissen"-Box. */
.container.page-shipping { display: none !important; }

/* =========================================================================
   Kopfleiste schlanker (Wunsch User 2026-08-19)
   Die Hoehe der oberen Leiste wird allein vom Logo bestimmt (90 px Bild +
   ~19 px Innenabstand = 109 px). Logo und Suchfeld werden verkleinert,
   Warenkorb, Konto und Sprachflagge bleiben unveraendert.
   Nur Desktop (>= lg), die Mobilleiste hat ihr eigenes Layout.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .hide-navbar .navbar-brand { padding-top: 5px; padding-bottom: 5px; margin-right: 32px; }
  .hide-navbar .navbar-brand img { height: 62px; width: auto; max-width: none; }

  /* Suchfeld an die geringere Hoehe angleichen */
  .hide-navbar .input-group .form-control.ac_input { height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
  .hide-navbar .input-group .btn,
  .hide-navbar .input-group .input-group-append .btn { height: 38px; padding-top: 5px; padding-bottom: 5px; }
}

/* ===== Zahlarten im Bestellvorgang (03.11.2026) ===== */
#fieldset-payment .checkout-payment-method {
    border: 1px solid #dde4ea; border-radius: 10px; background: #fff;
    padding: .7rem 1rem; margin-bottom: .6rem; transition: border-color .15s, box-shadow .15s;
}
#fieldset-payment .checkout-payment-method:hover { border-color: #8fb3c4; }
#fieldset-payment .checkout-payment-method:has(> .custom-control > input[name="Zahlungsart"]:checked) {
    border-color: #0b5a73; box-shadow: 0 0 0 2px rgba(11,90,115,.15); background: #f6fafc;
}
#fieldset-payment .checkout-payment-method > .custom-control.custom-radio { display: block; margin: 0; width: 100%; }
#fieldset-payment .checkout-payment-method .custom-control-label {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; row-gap: .15rem;
    width: 100%; min-height: 34px; cursor: pointer;
}
#fieldset-payment .checkout-payment-method .custom-control-label::before,
#fieldset-payment .checkout-payment-method .custom-control-label::after { top: 50%; transform: translateY(-50%); }
#fieldset-payment .ift-pm-logo,
#fieldset-payment .ppc-checkout-payment-method .custom-control-label > img:first-of-type {
    flex: 0 0 112px; width: 112px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    object-fit: contain; object-position: center;
}
#fieldset-payment .ift-pm-logo img { max-width: 112px; max-height: 30px; object-fit: contain; }
#fieldset-payment .ift-pm-logo i { font-size: 1.7rem; color: #0b5a73; line-height: 1; }
#fieldset-payment .ift-pm-logo .fa-cc-visa { color: #1a1f71; margin-right: .3rem; }
#fieldset-payment .ift-pm-logo .fa-cc-mastercard { color: #eb001b; }
#fieldset-payment .ift-pm-title,
#fieldset-payment .ppc-checkout-payment-method .custom-control-label { font-weight: 600; color: #22313a; }
#fieldset-payment .checkout-payment-method-note { flex-basis: 100%; padding-left: calc(112px + 1rem); font-weight: 400; color: #6b7a86; }
#fieldset-payment .checkout-payment-method-note:empty,
#fieldset-payment .checkout-payment-method-note small:empty { display: none; }
@media (max-width: 575.98px) {
    #fieldset-payment .ift-pm-logo,
    #fieldset-payment .ppc-checkout-payment-method .custom-control-label > img:first-of-type { flex-basis: 70px; width: 70px; }
    #fieldset-payment .checkout-payment-method-note { padding-left: calc(70px + 1rem); }
}

#fieldset-payment .checkout-payment-method { flex: 0 0 100%; max-width: 100%; }
/* PayPal-Unteroptionen (vom Plugin per JS eingefuegt) */
#fieldset-payment .ift-pm-logo .ppc-option-img { margin: 0 !important; max-width: 112px; max-height: 30px; overflow: hidden; display: inline-flex !important; align-items: center; }
#fieldset-payment .ift-pm-logo .funding-name { display: none !important; }
#fieldset-payment #za_ppc_paylater .ift-pm-title { font-size: 0; }
#fieldset-payment #za_ppc_paylater .ift-pm-title::after { content: "Sp\e4 ter bezahlen"; font-size: 1rem; }