/* ============================================================================
   v2 Gutscheinshop - Blue-Cinema-Layout
   Akzentfarbe = --bookingPrimaryDark (Marke je Mandant, nie schwarz/weiss)
   Theme-agnostisch: laeuft auf darktheme.css (dunkel) UND hellen Mandanten (z.B. M435).
   Textfarbe = Kontrast zum --bookingBackground:
     - var(--textcolorSingle) ist bei hellen Mandanten #000 (schwarz auf weiss)
     - darktheme definiert es NICHT -> Fallback #fff (weiss auf dunkel)
   Muted/Border/Surface werden per color-mix aus Text + Hintergrund abgeleitet,
   damit sie auf beiden Themes sichtbar bleiben (frueher hartcodiertes weiss = auf
   hellem Hintergrund unsichtbar).
   ============================================================================ */
.voucher-shop-v2{
    --v2gsText:   var(--textcolorSingle, #fff);
    --v2gsMuted:  color-mix(in srgb, var(--textcolorSingle, #fff) 65%, var(--bookingBackground, #1c1f25));
    --v2gsBorder: color-mix(in srgb, var(--textcolorSingle, #fff) 22%, transparent);
    --v2gsSurface:      color-mix(in srgb, var(--textcolorSingle, #fff) 7%, transparent);
    --v2gsSurfaceHover: color-mix(in srgb, var(--textcolorSingle, #fff) 16%, transparent);
}

/* volle Breite wie v1 - keine Begrenzung/Zentrierung.
   margin 0: hebt die .row-Negativmargins (-15px) auf -> kein horizontaler Ueberlauf auf Mobile
   (sonst wird rechts abgeschnitten, z.B. die Warenkorb-Leiste) */
#giftCardDiv.contentContainer{
    padding: 24px 16px 48px;
    margin-left: 0;
    margin-right: 0;
}

/* alle Schritte auf gleiche Breite (960) + zentriert */
#tab1{
    max-width: 960px;
    margin: 0 auto;
}

/* Step-Anzeiger in Schritt 1 verstecken OHNE display:none (Container haelt die Tab-Trigger,
   die der Wizard zum Umschalten braucht) -> nur visuell kollabieren */
#bootstrap-wizard-1 .form-bootstrapWizard.wizard-steps-collapsed{
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0 !important;
    padding: 0;
    pointer-events: none;
}

/* Step-Anzeiger ueber die volle Breite + Abstand nach unten (wie Ticketverkauf v2).
   Core-Styles floaten/shrinken die Liste sonst nach links -> Flex-Layout erzwingen
   (li bleibt position:relative -> Verbindungslinien bleiben). */
#bootstrap-wizard-1 .form-bootstrapWizard{
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 10px 0 36px !important;
    padding: 0;
}
#bootstrap-wizard-1 ul.bootstrapWizard{
    display: flex !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
#bootstrap-wizard-1 ul.bootstrapWizard > li{
    flex: 1 1 0 !important;
    width: auto !important;
    float: none !important;
    position: relative;
}

/* Zahlung/Zusammenfassung zentrieren + breit (Bootstrap-offset-Grid schiebt sonst nach links) */
.voucher-bezahlung{
    display: flex;
    justify-content: center;
}

.tableGiftcardSummaryWrapper{
    float: none;
    width: 100%;
    max-width: 960px;
    margin: 0 auto !important;
}

/* Konto (Step 2 / Login-Step): KEINE eigene Breitenbegrenzung -> Login-Step rendert
   in voller Breite wie im Ticketverkauf (booking_wizard hat dort auch keinen Wrapper) */

/* Warenkorb-Total auf Step 1 (mehrere Gutscheine moeglich) */
.v2gs-cart-total{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding: 14px 20px;
    border-radius: 10px;
    background: var(--v2gsSurface);
    border: 1px solid var(--bookingPrimaryDark);
}
.v2gs-cart-total-label{
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--v2gsText);
    font-size: 16px;
    font-weight: 600;
}
.v2gs-cart-count{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--bookingPrimaryDark);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.v2gs-cart-total-val{
    color: var(--v2gsText);
    font-size: 16px;
}
.v2gs-cart-total-val strong{
    font-weight: 700;
}

/* Warenkorb: Gutschein entfernen */
.gs-remove-cell{
    width: 40px;
    white-space: nowrap;
}

/* Loeschen-Button wie im Ticketverkauf v2: Trash-Icon in Markenfarbe, transparenter Hintergrund */
.gs-remove-btn{
    background: transparent;
    border: 0;
    color: var(--bookingPrimary);
    font-size: 15px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity .15s;
}
.gs-remove-btn:hover{
    opacity: 1;
}

.v2gs-sep{
    border: 0;
    border-top: 1px solid var(--v2gsBorder);
    margin: 22px 0;
}

.v2gs-empty{
    text-align: center;
    padding: 40px 0;
    opacity: 0.8;
}

/* ---------- Kategorie-Tabs ---------- */
/* width:fit-content + margin:auto -> Box haengt an den Pills, ist aber zentriert.
   justify-content:center -> auf Mobile (Pills umbrechen) sind sie innen zentriert */
.v2gs-cats{
    display: flex;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--v2gsBorder);
    border-radius: 10px;
    margin: 0 auto 28px;
}

.v2gs-cat{
    background: transparent;
    border: 0;
    color: var(--v2gsMuted);
    font-size: 15px;
    font-weight: 600;
    padding: 9px 22px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.v2gs-cat:hover{
    color: var(--v2gsText);
}

.v2gs-cat.active{
    background: var(--bookingPrimaryDark);
    color: #fff;
}

/* ---------- Thumbnail-Carousel ---------- */
.v2gs-thumbs-row{
    display: flex;
    align-items: center;
    gap: 10px;
}

.v2gs-nav{
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: var(--v2gsSurface);
    color: var(--v2gsText);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.v2gs-nav:hover{
    background: var(--v2gsSurfaceHover);
}

.v2gs-thumbs-viewport{
    flex: 1 1 auto;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.v2gs-thumbs-viewport::-webkit-scrollbar{
    display: none;
}

/* nur der aktive Kategorie-Track ist sichtbar */
.v2gs-thumbs-track{
    display: none;
    gap: 12px;
    padding: 6px 2px;
}
.v2gs-thumbs-track.active{
    display: flex;
    /* zentriert wenn die Thumbnails passen; bei Ueberlauf am Anfang ausgerichtet (scrollbar, nichts abgeschnitten) */
    justify-content: safe center;
}

.v2gs-thumb{
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: var(--v2gsSurface);
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}

.v2gs-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.v2gs-thumb:hover{
    transform: translateY(-2px);
}

.v2gs-thumb.active{
    border-color: var(--bookingPrimaryDark);
    box-shadow: 0 0 0 2px var(--bookingPrimaryDark);
}

/* ---------- Detailansicht ---------- */
.v2gs-detail{
    display: flex;
    gap: 36px;
    align-items: flex-start;
}

.v2gs-detail-img{
    flex: 0 0 auto;
    width: 280px;
    height: 280px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--v2gsSurface);
}

.v2gs-detail-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.v2gs-detail-info{
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 6px;
}

.v2gs-line{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.v2gs-label{
    font-size: 17px;
    color: var(--v2gsText);
}

/* Wert-Eingabe */
.v2gs-wert-input{
    display: flex;
    align-items: center;
    gap: 10px;
}

.v2gs-cur{
    color: var(--v2gsMuted);
    font-size: 15px;
}

.v2gs-wert-field{
    width: 70px;
    text-align: center;
    background: transparent;
    border: 1px solid var(--v2gsBorder);
    border-radius: 6px;
    color: var(--v2gsText);
    font-size: 16px;
    padding: 6px 8px;
}
.v2gs-wert-field:focus{
    outline: none;
    border-color: var(--bookingPrimaryDark);
}
/* Spin-Buttons der Zahlenfelder ausblenden */
.v2gs-wert-field::-webkit-outer-spin-button,
.v2gs-wert-field::-webkit-inner-spin-button,
.v2gs-qty-field::-webkit-outer-spin-button,
.v2gs-qty-field::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
.v2gs-wert-field,
.v2gs-qty-field{
    -moz-appearance: textfield;
}

/* Slider */
.v2gs-slider-block{
    margin: 22px 0 4px;
}

.v2gs-slider{
    margin: 0 11px;
}

.v2gs-slider-minmax{
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 13px;
    color: var(--v2gsMuted);
}

/* Menge-Stepper */
.v2gs-qty{
    display: flex;
    align-items: center;
    border: 1px solid var(--v2gsBorder);
    border-radius: 8px;
    overflow: hidden;
}

.v2gs-qty-btn{
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--v2gsText);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
}
.v2gs-qty-btn:hover{
    background: var(--v2gsSurfaceHover);
}

.v2gs-qty-field{
    width: 46px;
    height: 38px;
    text-align: center;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--v2gsBorder);
    border-right: 1px solid var(--v2gsBorder);
    color: var(--v2gsText);
    font-size: 16px;
}
.v2gs-qty-field:focus{
    outline: none;
}

/* Total + Buy */
.v2gs-line-total{
    margin-top: 4px;
}

.v2gs-total{
    font-size: 16px;
    color: var(--v2gsText);
}
.v2gs-total strong{
    font-weight: 700;
}

.btn.v2gs-add{
    background: var(--bookingPrimaryDark);
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    padding: 11px 22px;
}
.btn.v2gs-add:hover,
.btn.v2gs-add:focus{
    background: color-mix(in srgb, var(--bookingPrimaryDark) 85%, #000);
    color: #fff;
}

/* ---------- noUiSlider-Optik (gleiche Technik wie v1 voucher.shop.css) ---------- */
#bootstrap-wizard-1 .v2gs-slider.noUi-target{
    height: 6px !important;
    background: var(--v2gsBorder);
    border: 0 !important;
    border-radius: 6px;
    box-shadow: none !important;
}

.v2gs-slider .noUi-connect{
    background: var(--bookingPrimaryDark);
}

/* Origin echte Hoehe geben -> Handle 'top:50%' hat einen Bezug (Library setzt height:0) */
.v2gs-slider.noUi-horizontal .noUi-origin{
    height: 100%;
}

/* runder Handle. Hart erzwungen (ID-Prefix + !important), damit Farbe UND Zentrierung sicher
   anliegen (Library-Defaults sonst staerker). vertikal mittig per festem top, unabhaengig von
   origin-Hoehe: 18px-Handle auf 6px-Bahn -> top = (6-18)/2 = -6px (box-sizing border-box).
   horizontal ueber 'right' (halbe Breite). */
#bootstrap-wizard-1 .v2gs-slider .noUi-handle{
    box-sizing: border-box !important;
    width: 18px !important;
    height: 18px !important;
    top: -6px !important;
    right: -9px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    background: var(--bookingPrimaryDark) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
    cursor: grab;
}
#bootstrap-wizard-1 .v2gs-slider .noUi-handle:after,
#bootstrap-wizard-1 .v2gs-slider .noUi-handle:before{
    content: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 680px){
    .v2gs-detail{
        flex-direction: column;
        align-items: stretch;
    }
    .v2gs-detail-img{
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /* Warenkorb-Leiste: Label ueber Total stapeln, damit auf schmalen Screens nichts abgeschnitten wird */
    .v2gs-cart-total{
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 14px;
    }
}