/* css/croptool/1.0/croptool_size_bar.css — Leiste + Größen-Layer im Croptool
 * (content_inc/croptool/1.0/layer_crop_art.php, Block .ccb--croptool)
 *
 * Baut auf css/crop_cart_box.css auf (Grundwerte .ccb, .ccb-option, .ccb-layer,
 * Größen-Tabelle, Punkte, Buttons) — hier steht nur, wo die Teile im Croptool sitzen.
 *
 *   >= 1024px  Glas-Leiste unten in der Live-Ansicht (Größe · Preis · Auswählen),
 *              Layer 380px breit von rechts, der ganze Raum rückt nach links
 *   <  1024px  schmale Leiste fest am unteren Bildschirmrand (eine Zeile: Größe · Preis · Auswählen),
 *              Layer als Sheet von unten über der Live-Ansicht, das Original bleibt sichtbar
 */

/* Container über der ganzen Live-Ansicht — fängt selbst keine Klicks ab */
.ccb.ccb--croptool {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    overflow: hidden;
    pointer-events: none;
}

.ccb--croptool .ct-bar,
.ccb--croptool .ccb-layer {
    pointer-events: auto;
}

/* ── Leiste ───────────────────────────────────────────────── */
.ccb--croptool .ct-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 16px 16px;
    border-top: 1px solid var(--ccb-glass-line);
    background: var(--ccb-glass);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    backdrop-filter: blur(22px) saturate(1.2);
    box-shadow: 0 -18px 40px rgba(20, 20, 19, 0.16);
}

.ccb--croptool .ct-bar .low_resolution_msg {
    grid-column: 1 / -1;
}

/* Zeile "Größe" als Knopf in der Leiste (ohne Trennlinie wie im Kasten) */
.ccb--croptool .ct-size {
    padding: 6px 4px;
    border-bottom: 0;
}

.ccb--croptool .ct-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ccb--croptool .ct-price .ccb-price-value {
    font-size: 24px;
}

/* Auswählen (.save_crop): volle Breite unter Größe + Preis */
.ccb--croptool .ct-save {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
}

.ccb--croptool .ct-save .ccb-btn {
    width: 100%;
    min-height: 54px;
    font-size: 17px;
}

.ccb--croptool .ct-save .ccb-btn svg {
    fill: currentColor;
}

/* ── Größen-Layer: mobil als Sheet von unten ───────────────── */
.ccb--croptool .ccb-layer {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.ccb--croptool .ccb-layer.is-open {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}


/* ── Größenwechsel weich (wie Raumvorschau: rp_stage.js → morphArt, .rp-art.is-morphing) ──
   js/croptool_size_bar.js setzt .is-morphing nur kurz (650 ms) auf .crop_live_box_inner —
   beim Ziehen des Ausschnitts bleibt die Live-Ansicht direkt an der Hand.
   Betroffen ist, was scaleLiveView() hart umsetzt (Zoom, Abstand, Hintergrundgröße). */
.crop_live_box_inner.is-morphing #crop_live_box {
    -webkit-transition: transform .6s cubic-bezier(.34, 1.2, .64, 1),
                        top .6s cubic-bezier(.34, 1.2, .64, 1),
                        margin-left .45s cubic-bezier(.16, 1, .3, 1),
                        opacity 1s ease;
    transition: transform .6s cubic-bezier(.34, 1.2, .64, 1),
                top .6s cubic-bezier(.34, 1.2, .64, 1),
                margin-left .45s cubic-bezier(.16, 1, .3, 1),
                opacity 1s ease;
}

.crop_live_box_inner.is-morphing #crop_live_bg {
    -webkit-transition: background-size .6s cubic-bezier(.34, 1.2, .64, 1), opacity 1s ease;
    transition: background-size .6s cubic-bezier(.34, 1.2, .64, 1), opacity 1s ease;
}

/* Vorschau-Box: nur der Abstand (margin, aus scaleLiveView) gleitet. Breite/Höhe NICHT —
   scaleLiveView() misst offsetWidth/offsetHeight direkt nach dem Wechsel. Das Bild selbst
   federt per transform (FLIP in js/croptool_size_bar.js), das ändert offsetWidth nicht. */
.crop_live_box_inner.is-morphing #crop_live_preview_box {
    -webkit-transition: margin .6s cubic-bezier(.34, 1.2, .64, 1);
    transition: margin .6s cubic-bezier(.34, 1.2, .64, 1);
}

@media (prefers-reduced-motion: reduce) {
    .crop_live_box_inner.is-morphing #crop_live_box,
    .crop_live_box_inner.is-morphing #crop_live_bg,
    .crop_live_box_inner.is-morphing #crop_live_preview_box {
        -webkit-transition: none;
        transition: none;
    }
}


/* ════════════════════════════════════════════════════════════
   MOBIL < 1024px — schmale Leiste fest am unteren Bildschirmrand
   Eine Zeile: Größe · Preis · Auswählen. position: fixed + Safe-Area unten,
   damit "Auswählen" nie unter Home-Balken / Browser-Leiste rutscht und immer klickbar ist.
   Seite bekommt unten Platz in Leistenhöhe → der Raum wird am Ende nicht verdeckt.
   Ist der Größen-Layer offen, fährt die Leiste weg (sonst läge sie über "Übernehmen").
   ════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1023px) {

    .ccb--croptool .ct-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10050;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 6px 10px;
        padding: 8px 10px 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 24px rgba(20, 20, 19, 0.14);
        -webkit-transition: -webkit-transform .35s cubic-bezier(.16, 1, .3, 1);
        transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    }

    .ccb--croptool.has-layer .ct-bar {
        -webkit-transform: translateY(110%);
        transform: translateY(110%);
    }

    .ccb--croptool .ct-bar .low_resolution_msg {
        font-size: 12px;
        line-height: 1.35;
    }
    .ccb--croptool .ct-bar .low_resolution_msg svg {
        width: 18px;
        height: 18px;
        margin: 0;
    }

    /* Größe: nur Beschriftung + Wert + Pfeil, ohne Icon und Punkte */
    .ccb--croptool .ct-size {
        grid-template-columns: minmax(0, 1fr) 16px;   /* ohne Icon-Spalte */
        gap: 4px;
        min-width: 0;
        padding: 2px 0;
    }
    .ccb--croptool .ct-size .ccb-option-icon,
    .ccb--croptool .ct-size .ccb-option-sub {
        display: none;
    }
    .ccb--croptool .ct-size .ccb-option-label {
        font-size: 11px;
    }
    .ccb--croptool .ct-size .ccb-option-value {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ccb--croptool .ct-price .ccb-price-value {
        font-size: 18px;
    }
    .ccb--croptool .ct-price .ccb-price-note {
        display: none;
    }

    .ccb--croptool .ct-save {
        grid-column: auto;
    }
    .ccb--croptool .ct-save .ccb-btn {
        width: auto;
        min-height: 46px;
        padding: 0 16px;
        font-size: 15px;
        white-space: nowrap;
    }

    /* Größen-Layer: fast bildschirmhoch als Sheet von unten (nicht nur so hoch wie die Raumansicht),
       damit die lange Größen-Liste genug Platz zum Scrollen hat. Oben bleibt ein Streifen vom
       Croptool sichtbar; Fuß mit "Übernehmen" über der Safe-Area. */
    .ccb--croptool .ccb-layer {
        position: fixed;
        top: 8vh;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10060;
        box-shadow: 0 -18px 40px rgba(20, 20, 19, 0.25);
    }
    .ccb--croptool .ccb-layer .ccb-layer-foot {
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }

    /* Layer offen (js/croptool_size_bar.js): Raumansicht über den Cropper heben und deren
       clip-path (cropper_tool.css, Hochformat) aufheben — sonst liegt das Sheet unter dem
       Cropper bzw. wird oben abgeschnitten. */
    .crop_live_box_outer.ct-has-layer {
        position: relative;
        z-index: 10060;
        -webkit-clip-path: none !important;
        clip-path: none !important;
    }

    /* Platz unten in Leistenhöhe, damit der Raum am Ende nicht unter der Leiste liegt */
    .app_outer_wrapper {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}


/* ════════════════════════════════════════════════════════════
   DESKTOP >= 1024px
   ════════════════════════════════════════════════════════════ */
@media screen and (min-width: 1024px) {

    .ccb--croptool .ct-bar {
        left: 24px;
        right: 24px;
        bottom: 24px;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 20px;
        padding: 8px 10px 8px 6px;
        border: 1px solid var(--ccb-glass-line);
        box-shadow: 0 18px 40px rgba(20, 20, 19, 0.2);
    }

    .ccb--croptool .ct-size {
        padding: 8px 10px;
    }

    .ccb--croptool .ct-price .ccb-price-value {
        font-size: 26px;
    }

    .ccb--croptool .ct-save {
        grid-column: auto;
    }

    .ccb--croptool .ct-save .ccb-btn {
        width: auto;
        min-height: 56px;
        padding: 0 30px;
        font-size: 18px;
    }

    /* Layer 380px von rechts */
    .ccb--croptool .ccb-layer {
        left: auto;
        width: 380px;
        max-width: 100%;
        border-left: 1px solid var(--ccb-glass-line);
        box-shadow: -18px 0 40px rgba(20, 20, 19, 0.15);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    .ccb--croptool .ccb-layer.is-open {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    /* Ganzer Raum (Wand + Sofa + Bild) rückt nach links, solange der Layer offen ist.
       margin statt transform: scaleLiveView() setzt auf #crop_live_box schon transform: scale()
       und setzt top/left zurück — margin fasst es nicht an. */
    .crop_live_box_inner #crop_live_box {
        margin-left: 0;
    }

    .crop_live_box_inner.ct-has-layer #crop_live_box {
        margin-left: -190px;
    }
}