/* VipConfig v0.15.0 – Mobile Clean Rewrite
 * Ersetzt alle v0.14.x Versionen (v0.14.1–v0.14.9) durch eine einzige,
 * widerspruchsfreie Mobile-CSS-Schicht.
 *
 * Kernproblem der alten Versionen:
 *   v0.14.4 setzte left:50% + translateX(-50%) zur Zentrierung.
 *   v0.14.6+ versuchte das mit left:auto + transform:none rückgängig zu machen –
 *   aber nicht konsequent genug. Auf iPhone/Safari entstand ein Versatz weil
 *   left:50% relativ zum verschobenen Shopware-Container berechnet wurde.
 *
 * Lösung: Ausschließlich margin:auto für Zentrierung. Kein left/transform.
 * Layout only – kein cart/product/SVG/rendering business logic.
 */

/* ─── CSS-Variablen ────────────────────────────────────────────────────────── */
:root {
    --vc-gap:        16px;            /* Seitenabstand auf Mobile         */
    --vc-rail:       min(420px, calc(100vw - 2 * var(--vc-gap)));
    --vc-input-rail: min(380px, calc(100vw - 2 * var(--vc-gap)));
    --vc-touch:      44px;            /* Mindest-Tippfläche               */
}

/* ─── Scroll-Anker ─────────────────────────────────────────────────────────── */
.vipconfig-wrapper,
#vipconfig-modern-root {
    scroll-margin-top: 16px;
}

/* ─── Touch-Optimierung (alle Viewports) ──────────────────────────────────── */
.vipconfig-mobile-ready .vipconfig-layout-gallery input,
.vipconfig-mobile-ready #vipconfig-layout-search,
.vipconfig-mobile-ready #vipconfig-backengraving-text,
.vipconfig-mobile-ready textarea[id^="vipconfig-"],
.vipconfig-mobile-ready input[id^="vipconfig-"] {
    min-height: var(--vc-touch);
}

.vipconfig-mobile-ready .vipconfig-back-option,
.vipconfig-mobile-ready button[class*="vipconfig"],
.vipconfig-mobile-ready .vipconfig-layout-card,
.vipconfig-mobile-ready [data-vipconfig-layout-id],
.vipconfig-mobile-ready [data-layout-id] {
    touch-action: manipulation;
}

/* ─── Tablet (≤991px) ──────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .vipconfig-wrapper {
        width: 100%;
        max-width: 100%;
    }

    #vipconfig-preview-sticky-shell {
        position: relative !important;
        top: auto !important;
        z-index: auto;
        margin-bottom: 14px;
    }

    .vipconfig-layout-gallery,
    #vipconfig-text-config-shell,
    #vipconfig-backengraving-shell,
    #vipconfig-modern-root [class*="vipconfig"] {
        max-width: 100%;
        box-sizing: border-box;
    }

    #vipconfig-layout-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #vipconfig-layout-category-filter {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    #vipconfig-layout-category-filter > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #vipconfig-backengraving-options {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .vipconfig-back-option {
        min-height: var(--vc-touch);
        width: 100%;
    }
}

/* ─── Mobil (≤767px) – Haupt-Containment ─────────────────────────────────── */
@media (max-width: 767.98px) {

    /* 1. Viewport vor horizontalem Überlauf schützen */
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* 2. Konfigurator-Wurzel – volle Breite, kein Überlauf */
    #vipconfig-modern-root,
    #vipconfig-wrapper,
    .vipconfig-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
        /* KEIN left/transform – das war die Ursache des Versatzes */
    }

    /* 3. Alle Haupt-Panels: zentrierter Rail, AUSSCHLIESSLICH margin:auto */
    #vipconfig-preview-sticky-shell,
    #vipconfig-layout-headline,
    #vipconfig-category-slider,
    #vipconfig-text-config-shell,
    #vipconfig-backengraving-shell,
    #vipconfig-backengraving-real,
    .vipconfig-selected-layout-preview {
        /* Zentrierung NUR über margin – kein left, kein transform */
        width: var(--vc-rail) !important;
        max-width: var(--vc-rail) !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* 4. Vorschau-Panel: Überlauf verstecken, leichtes Padding */
    #vipconfig-preview-sticky-shell,
    .vipconfig-selected-layout-preview {
        overflow: hidden !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 5. Übrige Panels: Überlauf sichtbar (Pfeile etc.) */
    #vipconfig-layout-headline,
    #vipconfig-category-slider,
    #vipconfig-text-config-shell,
    #vipconfig-backengraving-shell,
    #vipconfig-backengraving-real {
        overflow: visible !important;
    }

    /* 6. SVG-Vorschau: 100% des Panels, kein Versatz */
    #vipconfig-main-svg-preview,
    #vipconfig-main-svg-preview[data-vipconfig-preview],
    [data-vipconfig-wrapper] [data-vipconfig-preview] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        min-height: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        /* Kein left/transform hier – war Ursache für Rechts-Versatz */
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* 7. SVG-Element innerhalb der Vorschau */
    #vipconfig-main-svg-preview > svg,
    #vipconfig-main-svg-preview[data-vipconfig-preview] > svg,
    [data-vipconfig-wrapper] [data-vipconfig-preview] > svg {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 auto !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* 8. Überschriften: umbrechen statt den Viewport aufweiten */
    #vipconfig-preview-sticky-shell h2,
    #vipconfig-layout-headline h2,
    #vipconfig-layout-headline p,
    #vipconfig-text-config-shell h3,
    #vipconfig-backengraving-shell h3,
    #vipconfig-backengraving-real h3,
    #vipconfig-backengraving-shell .vipconfig-back-subline,
    #vipconfig-backengraving-real p {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        white-space: normal !important;
    }

    #vipconfig-preview-sticky-shell h2 {
        font-size: clamp(20px, 6.5vw, 28px) !important;
        letter-spacing: clamp(2px, 1.1vw, 5px) !important;
        line-height: 1.2 !important;
    }

    #vipconfig-layout-headline h2 {
        font-size: clamp(22px, 7.5vw, 32px) !important;
        letter-spacing: clamp(3px, 1.4vw, 7px) !important;
        line-height: 1.18 !important;
    }

    #vipconfig-layout-headline p {
        font-size: clamp(13px, 4vw, 17px) !important;
        letter-spacing: clamp(1px, .5vw, 2px) !important;
        line-height: 1.45 !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    #vipconfig-text-config-shell h3 {
        font-size: clamp(21px, 6.8vw, 30px) !important;
        letter-spacing: clamp(3px, 1.3vw, 6px) !important;
    }

    #vipconfig-backengraving-shell h3,
    #vipconfig-backengraving-real h3 {
        font-size: clamp(18px, 5.5vw, 26px) !important;
        letter-spacing: clamp(2px, .9vw, 5px) !important;
        line-height: 1.22 !important;
    }

    #vipconfig-backengraving-shell .vipconfig-back-subline,
    #vipconfig-backengraving-real p {
        font-size: clamp(14px, 4.2vw, 18px) !important;
        letter-spacing: clamp(1px, .65vw, 3px) !important;
        line-height: 1.5 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* 9. Motiv-Slider: Dropdown + Grid */
    #vipconfig-category-slider .vipconfig-category-row,
    #vipconfig-category-select,
    #vipconfig-layout-category-filter {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Motiv-Slider-Reihe: Platz für Pfeile links/rechts */
    #vipconfig-category-slider .vipconfig-motif-slider-row,
    #vipconfig-category-slider > div[style*="display:flex"] {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding-left: 42px !important;
        padding-right: 42px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #vipconfig-motif-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .vipconfig-motif-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
    }

    /* Navigations-Pfeile */
    #vipconfig-motif-prev,
    #vipconfig-motif-next {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;  /* Nur vertikale Mitte – kein X-Versatz */
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        font-size: 24px !important;
        line-height: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 20 !important;
        background: #fff !important;
        color: #222 !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
    }

    #vipconfig-motif-prev { left: 0 !important; right: auto !important; }
    #vipconfig-motif-next { right: 0 !important; left: auto !important; }

    #vipconfig-motif-prev.is-inactive,
    #vipconfig-motif-next.is-inactive {
        opacity: .35 !important;
    }

    /* 10. Eingabefelder – zentrierter Rail */
    #vipconfig-motif-fields,
    #vipconfig-text-config-shell,
    #vipconfig-backengraving-real {
        text-align: center !important;
    }

    #vipconfig-motif-fields > *,
    #vipconfig-motif-fields label,
    #vipconfig-motif-fields input,
    #vipconfig-motif-fields textarea,
    #vipconfig-motif-fields select,
    #vipconfig-text-config-shell form,
    #vipconfig-text-config-shell fieldset,
    #vipconfig-text-config-shell .form-group,
    #vipconfig-text-config-shell .form-row,
    #vipconfig-text-config-shell .form-floating,
    #vipconfig-text-config-shell .input-group,
    #vipconfig-text-config-shell label,
    #vipconfig-text-config-shell input,
    #vipconfig-text-config-shell textarea,
    #vipconfig-text-config-shell select,
    #vipconfig-backengraving-text-wrap,
    #vipconfig-backengraving-real-text,
    #vipconfig-backengraving-real-textarea,
    #vipconfig-backengraving-text {
        display: block !important;
        width: var(--vc-input-rail) !important;
        max-width: var(--vc-input-rail) !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    #vipconfig-motif-fields label,
    #vipconfig-text-config-shell label,
    #vipconfig-backengraving-real-text label {
        text-align: left !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 6px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #vipconfig-motif-fields input,
    #vipconfig-motif-fields textarea,
    #vipconfig-text-config-shell input,
    #vipconfig-text-config-shell textarea,
    #vipconfig-backengraving-text,
    #vipconfig-backengraving-real-textarea {
        min-height: var(--vc-touch) !important;
        font-size: 16px !important; /* verhindert iOS-Zoom */
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 11. Rückseitengravur-Buttons */
    #vipconfig-backengraving-options,
    .vipconfig-backengraving-real-buttons {
        width: var(--vc-input-rail) !important;
        max-width: var(--vc-input-rail) !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .vipconfig-back-option,
    .vipconfig-backengraving-real-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: clamp(16px, 5vw, 21px) !important;
        letter-spacing: clamp(1.5px, .8vw, 4px) !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 12. Rückseitentext: Sichtbarkeit via :has() */
    #vipconfig-backengraving-real-text {
        display: none !important;
    }

    #vipconfig-backengraving-real:has(.vipconfig-backengraving-real-btn[data-back="1"].is-active) #vipconfig-backengraving-real-text {
        display: block !important;
    }

    #vipconfig-backengraving-real-textarea {
        min-height: 90px !important;
        height: 90px !important;
        resize: vertical !important;
    }
}

/* ─── Sehr kleine Phones (≤575px) ─────────────────────────────────────────── */
@media (max-width: 575.98px) {

    #vipconfig-layout-list {
        grid-template-columns: 1fr !important;
    }

    .vipconfig-mobile-ready .vipconfig-layout-gallery,
    .vipconfig-mobile-ready #vipconfig-text-config-shell,
    .vipconfig-mobile-ready #vipconfig-backengraving-shell {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .vipconfig-mobile-ready input,
    .vipconfig-mobile-ready textarea,
    .vipconfig-mobile-ready select,
    .vipconfig-mobile-ready button {
        font-size: 16px !important; /* verhindert iOS-Zoom */
    }
}