@charset "UTF-8";

/**
 * vitelly® Enhancements - Frontend Styles
 * Styles für die Discount Buttons, Plan-Beschreibungen und Produktseiten-Elemente
 *
 * @package    vitelly Enhancements
 * @author     WWWIEBUSCH
 * @copyright  2025 WWWIEBUSCH. All rights reserved.
 * @link       https://wwwiebusch.com
 * @email      info@wwwiebusch.com
 *
 * vitelly® is a registered trademark.
 */

/* ============================================================================
   PREIS-ANZEIGE
   ============================================================================ */

/**
 * Container für die dynamische Preisanzeige
 * Ermöglicht sanfte Übergänge bei Preiswechsel durch Hover-Effekte
 */
.custom-price-display {
    font-family: inherit;
    transition: all 0.3s ease;
}

.custom-price-display .woocommerce-Price-amount {
    white-space: nowrap;
}

.custom-price-display .woocommerce-Price-currencySymbol {
    font-size: inherit;
    font-weight: inherit;
}

/**
 * Durchgestrichener Originalpreis in grau
 */
.woocommerce-Price-amount-original {
    color: gray !important;
}

/* ============================================================================
   ERSPARNIS-ANZEIGE
   ============================================================================ */

/**
 * Ersparnis-Text unter den Discount-Buttons
 * Zeigt "Du sparst: [Betrag]" an
 */
.wd-savings-text {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #000;
    line-height: 1.3em;
    margin-top: 0;
    text-align: center; /* Zentriere Text in allen Bildschirmgrößen */
}

.wd-savings-text .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
}

/**
 * Verstecke Ersparnis-Anzeige im Abo-Modus
 * Wenn Abo-Radio-Button ausgewählt ist, wird die Ersparnis ausgeblendet
 */
.bos4w-purchase-type[value="1"]:checked ~ .wd-dynamic-discounts .wd-savings-text {
    display: none !important;
}

.bos4w-purchase-type[value="1"]:checked ~ .wd-dynamic-discounts .wd-savings-wrapper {
    display: none !important;
}

/**
 * Entferne schwarzen Rahmen bei Abo-Auswahl
 * Buttons werden auf transparenten Hintergrund zurückgesetzt
 */
.bos4w-purchase-type[value="1"]:checked ~ .wd-dynamic-discounts tbody tr.has-savings {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.bos4w-purchase-type[value="1"]:checked ~ .wd-dynamic-discounts tbody tr.has-savings .wd-button-wrapper {
    background: #faf5f2 !important;
}

/* ============================================================================
   RABATT & BUTTON BASIS-STYLING
   ============================================================================ */

.wd-dd-discount > .wd-discount-link {
    color: #fff !important;
}

.wd-dynamic-discounts table tr[href] {
    cursor: pointer;
}

.wd-dynamic-discounts tr {
    cursor: pointer;
}

.single-product .wd-dynamic-discounts tbody {
    justify-content: center;
}

/* ============================================================================
   PLAN-BESCHREIBUNGEN
   ============================================================================ */

/**
 * Styling der Beschreibungstexte (Einmalkauf/Abo)
 * mit roten Bulletpoints vor jedem Listeneintrag
 */
.description-offer span {
    font-size: 15px;
    line-height: 1em;
    display: block;
    padding: 0px 10px 10px 18px;
    position: relative;
}

/**
 * Roter Bulletpoint vor jedem Beschreibungstext
 */
.description-offer span:before {
    content: "";
    font-size: 30px;
    position: absolute;
    left: 2px;
    top: 3px;
    width: 7px;
    height: 7px;
    background: #cd0049;
    border-radius: 100%;
}

/**
 * Container für Plan-Beschreibungen
 * Hellblauer Hintergrund mit rosa Rahmen unten
 */
.description-offer {
    background: #faffff;
    padding: 10px !important;
    border-radius: 0px 0px 20px 20px;
    text-align: left;
    border: solid #cd0049;
    border-width: 0px 1px 1px 1px;
    margin: 0 !important;
    width: 100% !important;
}

/**
 * Styling für Produkte ohne Abo-Option
 * Zeigt alternative Überschrift und Beschreibungen
 */
.description-offer.single-only {
    border-radius: 20px;
    border-width: 1px;
}

.description-offer .single-only-heading {
    font-weight: 700;
    font-size: 16px;
    padding: 10px 10px 10px 10px;
    text-align: center;
}

/**
 * Verstecke Abo-Beschreibungen standardmäßig
 */
.description-offer.subscription {
    display: none;
}

/**
 * Warenkorb-spezifische Anpassungen
 */
.cart .description-offer {
    height: 100% !important;
    width: 100% !important;
    padding: 10px !important;
    margin: 0px !important;
    margin-top: -10px !important;
    padding-top: 20px !important;
}

/* ============================================================================
   SPEZIAL-FIXES
   ============================================================================ */

/**
 * Verhindere doppelte Anzeige der Discount-Tabelle
 * Verstecke duplizierte Tabelle falls sie erscheint
 */
div.wd-dynamic-discounts:nth-child(13) {
    display: none !important;
}

/**
 * Verstecke 5er-Mengenrabatt (falls vorhanden)
 */
.single-product .wd-dynamic-discounts tbody tr[data-min="5"] {
    display: none;
}

/* ============================================================================
   BOS4W ABO-INTEGRATION
   ============================================================================ */

/**
 * Anpassungen wenn Abo-Option ausgewählt ist
 * Zentriere Tabelle und zeige nur erste 2 Buttons
 */
.bos4w-purchase-type[value="1"]:checked ~ .wd-dynamic-discounts table {
    width: auto;
    margin: 0 auto;
}

.bos4w-purchase-type[value="1"]:checked ~ .wd-dynamic-discounts table tbody {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.bos4w-purchase-type[value="1"]:checked ~ .wd-dynamic-discounts table tr {
    display: inline-block;
    margin: 0;
}

.bos4w-purchase-type[value="1"]:checked ~ .wd-dynamic-discounts .wd-dd-discount {
    opacity: 1;
    visibility: visible;
    transition: none;
}

.bos4w-purchase-type[value="1"]:checked ~ .wd-dynamic-discounts tr:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.bos4w-purchase-type[value="1"]:checked ~ .wd-dynamic-discounts .wd-active {
    background-color: rgba(0, 0, 0, 0.03);
}

/**
 * Verstecke ab dem 3. Button im Abo-Modus
 */
.bos4w-purchase-type[value="1"]:checked ~ .wd-dynamic-discounts table tr:nth-child(n+3) {
    display: none;
}

/**
 * Verstecke BOS4W Standard-Text
 */
.bos4w-display-plan-text {
    display: none;
}

/* ============================================================================
   RADIO-BUTTON OPTIONSLEISTE (EINMALKAUF / ABO)
   ============================================================================ */

/**
 * Container für Radio-Button Auswahl
 * Beige Hintergrundfarbe mit abgerundeten Ecken oben
 */
.single-product .bos4w-display-options ul {
    margin: 0;
    display: flex;
    background: #faf5f2;
    border: none;
    padding: 0;
    width: 100%;
    text-align: left;
    border-radius: 20px 20px 0px 0px;
}

.single-product .bos4w-display-options ul li label {
    padding: 10px 10px;
    color: #000 !important;
    font-weight: 800;
    margin: 0;
}

.bos4w-display-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.bos-display-save-up-to {
    display: inline;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal !important;
}

/**
 * Aktive Option hervorheben
 * Weißer Hintergrund mit rosa Rahmen
 */
.single-product .bos4w-display-options ul li:has(label > input:checked) {
    background: #faffff !important;
    border: solid #cd0049;
    margin: 0;
    font-weight: 100;
    color: #1B1919;
    border-width: 1px 1px 0px 1px;
}

.single-product .bos4w-display-options ul li {
    border: solid #cd0049;
    border-width: 0px 0px 1px 0px;
    margin-bottom: 0;
}

.single-product .bos4w-display-options ul li:first-child {
    padding: 0;
    width: 50%;
    box-shadow: none;
    border-radius: 20px 0px 0px 0px;
}

.single-product .bos4w-display-options ul li:last-child {
    padding: 0;
    width: 50%;
    box-shadow: none;
    border-radius: 0px 20px 0px 0px;
}

/**
 * Verstecke BOS4W Dropdown-Menü (nutzen eigene Lösung)
 */
.single-product .bos4w-display-dropdown {
    display: none !important;
}

/* ============================================================================
   DISCOUNT-TABELLE & BUTTONS
   ============================================================================ */

.single-product .wd-dynamic-discounts {
    padding: 20px 0 0;
}

/**
 * Verstecke Tabellenkopf für cleaneres Design
 */
.single-product .wd-dynamic-discounts thead {
    display: none !important;
}

.single-product .wd-dynamic-discounts tbody {
    display: flex;
    width: 100%;
}

.single-product .wd-dynamic-discounts table {
    display: flex;
}

.single-product .wd-dynamic-discounts tbody td {
    display: block;
    border: none;
    text-align: center !important;
    padding: 0;
}

/**
 * Einzelne Button-Kachel
 * Transparenter Hintergrund, 24% Breite für 4 Buttons nebeneinander
 * margin-right für Abstand zwischen den Buttons
 */
.single-product .wd-dynamic-discounts tbody tr {
    width: 24%;
    border: none;
    margin-right: 1.33%; /* Abstand zwischen Buttons (gleichmäßig verteilt) */
    position: relative;
    background: transparent;
    border-radius: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-weight: 800;
    font-size: 20px;
    min-height: 111px;
    height: auto;
    overflow: visible; /* Badges können herausragen */
}

/**
 * Entferne margin-right beim letzten Button
 */
.single-product .wd-dynamic-discounts tbody tr:last-child {
    margin-right: 0;
}

/**
 * Button-Cell: Das TD das die gesamte Struktur enthält
 */
.single-product .wd-dynamic-discounts tbody tr .wd-button-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    border: none;
    overflow: visible;
}

/**
 * Button-Wrapper: Der eigentliche Button mit beigem Hintergrund
 * Enthält Menge, Preis und Rabatt-Badge
 */
.single-product .wd-dynamic-discounts tbody tr .wd-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    background: #faf5f2;
    border-radius: 20px;
    padding: 10px;
    min-height: 91px;
    position: relative; /* Für absolute Positionierung der Badges */
    overflow: visible; /* Badges können herausragen */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/**
 * Inhalts-DIVs innerhalb des Button-Wrappers
 */
.single-product .wd-dynamic-discounts tbody tr .wd-button-wrapper > div {
    background: transparent;
    border: none;
    display: block;
    text-align: center;
    padding: 0 10px;
}

/**
 * Ersparnis-Wrapper: Kommt unter den Button
 * Zeigt "Du sparst: [Betrag]" zentriert an
 */
.single-product .wd-dynamic-discounts tbody tr .wd-savings-wrapper {
    width: 100%;
    text-align: center;
    padding: 10px 10px 10px 10px;
    background: transparent;
}

/**
 * Leerer Ersparnis-Wrapper für Menge 1
 * Sorgt für einheitliche Höhe aller Buttons
 */
.single-product .wd-dynamic-discounts tbody tr .wd-savings-wrapper.wd-savings-empty {
    min-height: 1.3em; /* Entspricht line-height von .wd-savings-text */
    padding: 0 !important; /* Kein Padding für leeren Wrapper */
    margin: 0 !important; /* Kein Margin für leeren Wrapper */
}

/**
 * NEUERUNG: Schwarzer Rahmen für ALLE Buttons (inkl. Menge 1)
 * Sorgt für einheitliches Design über alle Mengenstufen
 * WICHTIG: margin-right beibehalten für Abstand zwischen Buttons
 */
.single-product .wd-dynamic-discounts tbody tr.has-savings {
    border: 1px solid #000 !important;
    border-radius: 20px !important;
    padding: 0 !important;
    margin-right: 1.33% !important; /* Abstand zwischen Buttons beibehalten */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    background: white !important;
    align-items: flex-start !important; /* Alignment zum oberen Rand */
}

/**
 * Letzter Button ohne rechten Margin
 */
.single-product .wd-dynamic-discounts tbody tr.has-savings:last-child {
    margin-right: 0 !important;
}

.single-product .wd-dynamic-discounts tbody tr.has-savings .wd-button-wrapper {
    border-radius: 20px;
    margin: 0 !important;
}

.single-product .wd-dynamic-discounts tbody tr.has-savings .wd-savings-wrapper {
    padding: 10px 10px 10px 10px !important;
}

.single-product .wd-dynamic-discounts tbody tr.has-savings .wd-button-cell {
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}

/* ============================================================================
   RABATT-BADGE (BLAUE BUBBLE)
   ============================================================================ */

/**
 * Rabatt-Badge als blaue runde Bubble mit Prozentangabe
 * ÄNDERUNG: Größe um 25% reduziert (30px statt 40px)
 * Positioniert rechts oben am Button
 */
.single-product .wd-dynamic-discounts tbody div.wd-dd-discount {
    position: absolute !important;
    top: -15px; /* Angepasst für kleinere Bubble */
    right: -7.5px; /* Angepasst für kleinere Bubble */
    background: #045892 !important;
    color: #fff !important;
    padding: 0 !important;
    width: 30px !important; /* 25% kleiner als 40px */
    height: 30px !important; /* 25% kleiner als 40px */
    line-height: 1 !important;
    font-size: 11px !important; /* Entsprechend angepasst */
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 100% !important;
    z-index: 10;
    opacity: 1 !important;
    visibility: visible !important;
}

/**
 * Text in der Bubble bleibt weiß
 */
.single-product .wd-dynamic-discounts tbody div.wd-dd-discount span,
.single-product .wd-dynamic-discounts tbody div.wd-dd-discount a {
    color: #fff !important;
}

/* ============================================================================
   "BELIEBT" BADGE
   ============================================================================ */

/**
 * "Beliebt" Badge - rosa, zentriert
 * DESKTOP: Oben am Button
 * MOBILE: Unten am beigen Button (siehe Media Query)
 */
.single-product .wd-dynamic-discounts tbody .wd-popular-badge {
    position: absolute !important;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #cd0049 !important;
    color: #fff !important;
    padding: 5px 10px !important;
    line-height: 1 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 12px !important;
    z-index: 10;
    white-space: nowrap;
}

.single-product .wd-dynamic-discounts tbody .wd-popular-badge span {
    color: #fff !important;
}

/* ============================================================================
   HOVER & AKTIV-EFFEKTE
   ============================================================================ */

/**
 * Produktpreis in rosa
 */
.single-product span.woocommerce-Price-amount.amount {
    color: #cd0049;
}

/**
 * "In den Warenkorb" Button in rosa
 */
.single_add_to_cart_button {
    background-color: #cd0049 !important;
}

/**
 * Hover & Active Effekte für Button-Wrapper
 * Rosa Hintergrund (#cd0049) bei Hover und Active-State
 */
.single-product .wd-dynamic-discounts tbody tr:hover .wd-button-wrapper,
.single-product .wd-dynamic-discounts tbody tr.wd-active .wd-button-wrapper {
    background: #cd0049;
    background-color: #cd0049;
}

/**
 * Text wird weiß bei Hover und Active
 */
.single-product .wd-dynamic-discounts tbody tr:hover .wd-button-wrapper,
.single-product .wd-dynamic-discounts tbody tr:hover .wd-button-wrapper *,
.single-product .wd-dynamic-discounts tbody tr.wd-active .wd-button-wrapper,
.single-product .wd-dynamic-discounts tbody tr.wd-active .wd-button-wrapper * {
    color: #fff;
}

/* ============================================================================
   CI-FARBEN
   ============================================================================ */

.bos4w-display-options label,
.wd-dynamic-discounts .amount,
.single-product .wd-dynamic-discounts thead th {
    color: #cd0049;
}

/* ============================================================================
   MOBILE ANSICHT (SMARTPHONES & TABLETS)
   ============================================================================ */

@media screen and (max-width: 767px) and (min-width: 100px) {
    #rowid #coloumnid {
        width: 50% !Important;
        display: inline-block !important;
    }

    .single-product .wd-dynamic-discounts thead th {
        font-size: 11px !important;
        padding: 5px !important;
    }

    .single-product .wd-dynamic-discounts tbody td {
        padding: 0 5px 5px 5px !important;
        font-size: 13px !important;
    }

    .single-product .bos4w-display-options ul li {
        font-size: 15px !important;
    }

    /**
     * MOBILE: "Beliebt" Badge an Unterkante des beigen Buttons
     * Statt oben wird es unten am Button-Wrapper positioniert
     */
    .single-product .wd-dynamic-discounts tbody .wd-popular-badge {
        top: auto;
        bottom: 0;
        transform: translateX(-50%) translateY(50%);
    }
}

/* ============================================================================
   VERALTETE/LEGACY STYLES
   Werden beibehalten für Kompatibilität
   ============================================================================ */

.single-product .bos4w-display-options ul li:after {
    display: block;
    text-align: left;
    color: #000;
    font-weight: 100;
    font-size: 14px;
    line-height: 1.2em;
}

.single-product .wd-dynamic-discounts thead tr {
    display: block;
}

.single-product .wd-dynamic-discounts thead th {
    display: block;
    border: none;
    font-size: 15px;
}