/* ── Photo Overlay Studio – Responsive Frontend Styles ─────────────────────
   Alle Farben laufen über CSS Custom Properties auf .pos-studio.
   Elementor setzt Farben als Inline-Style auf .pos-studio → automatisch
   höhere Spezifität als diese Stylesheet-Defaults.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Default-Werte der CSS-Variablen ────────────────────────────────────── */
/* Nur als Fallback – werden von Elementor-Inline-Styles überschrieben       */
.pos-studio {
    --pos-primary:          #2563eb;  /* Haupt-Button                        */
    --pos-primary-text:     #ffffff;
    --pos-secondary:        #e2e8f0;  /* Sekundär-Button                     */
    --pos-secondary-text:   #334155;
    --pos-ghost-border:     #cbd5e1;  /* Zurück-Button Rahmen                */
    --pos-ghost-text:       #475569;
    --pos-success:          #16a34a;  /* Erfolgs-Meldung                     */
    --pos-danger:           #dc2626;  /* Fehler-Meldung                      */
    --pos-facebook:         #1877f2;
    --pos-facebook-text:    #ffffff;
    --pos-whatsapp:         #25d366;
    --pos-whatsapp-text:    #ffffff;
    --pos-instagram:        #e1306c;
    --pos-instagram-text:   #ffffff;
    --pos-download:         #0f172a;  /* Download-Button                     */
    --pos-download-text:    #ffffff;
    --pos-radius:           12px;
    --pos-gap:              12px;
    --pos-btn-h:            48px;
}

/* ── Container ──────────────────────────────────────────────────────────── */
.pos-studio {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 16px 48px;
    color: #1e293b;
    box-sizing: border-box;
}
.pos-studio *, .pos-studio *::before, .pos-studio *::after {
    box-sizing: border-box;
}

/* ── Step visibility ────────────────────────────────────────────────────── */
.pos-step         { display: none; }
.pos-step--active { display: block; }

/* ── Step title ─────────────────────────────────────────────────────────── */
.pos-step-title {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    font-weight: 700;
    margin: 0 0 20px;
    color: #0f172a;
    line-height: 1.3;
}

/* ── Progress bar ───────────────────────────────────────────────────────── */
.pos-progress {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    width: 100%;
    gap: 4px;
}
.pos-progress-step {
    flex: 1;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    transition: background .3s;
}
.pos-progress-step.active { background: var(--pos-primary); }
.pos-progress-step.done   { background: var(--pos-success); }

/* ── Base button reset ──────────────────────────────────────────────────── */
.pos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--pos-btn-h);
    padding: 10px 22px;
    border-radius: var(--pos-radius);
    border: none;
    cursor: pointer;
    font-size: clamp(.875rem, 3vw, 1rem);
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity .2s, transform .12s, box-shadow .2s;
    line-height: 1.3;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    /* Prevent Elementor/theme global button styles from leaking in */
    letter-spacing: normal;
    text-transform: none;
}
.pos-btn:hover  { opacity: .88; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.pos-btn:active { transform: scale(.96); }

/* ── Button variants – all via CSS variables ────────────────────────────── */
.pos-btn--primary {
    background-color: var(--pos-primary) !important;
    color:            var(--pos-primary-text) !important;
}
.pos-btn--secondary {
    background-color: var(--pos-secondary) !important;
    color:            var(--pos-secondary-text) !important;
}
.pos-btn--ghost {
    background-color: transparent !important;
    border: 2px solid var(--pos-ghost-border) !important;
    color: var(--pos-ghost-text) !important;
}
.pos-btn--download {
    background-color: var(--pos-download) !important;
    color:            var(--pos-download-text) !important;
}
.pos-btn--facebook {
    background-color: var(--pos-facebook) !important;
    color:            var(--pos-facebook-text) !important;
}
.pos-btn--whatsapp {
    background-color: var(--pos-whatsapp) !important;
    color:            var(--pos-whatsapp-text) !important;
}
.pos-btn--instagram {
    background-color: var(--pos-instagram) !important;
    color:            var(--pos-instagram-text) !important;
}

@media (max-width: 400px) {
    .pos-btn { width: 100%; justify-content: center; }
}

/* ── Step 1 – source buttons ────────────────────────────────────────────── */
.pos-source-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pos-gap);
    margin-bottom: 20px;
}
@media (max-width: 360px) {
    .pos-source-buttons { grid-template-columns: 1fr; }
}

/* ── Camera stream ──────────────────────────────────────────────────────── */
#pos-camera-area {
    border-radius: var(--pos-radius);
    overflow: hidden;
    background: #000;
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}
#pos-video {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.pos-camera-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* ── Cropper ────────────────────────────────────────────────────────────── */
.pos-crop-wrapper {
    width: 100%;
    max-height: 72vh;
    overflow: hidden;
    background: #0f172a;
    border-radius: var(--pos-radius);
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.pos-crop-wrapper img {
    max-width: 100%;
    max-height: 72vh;
    display: block;
}

/* ── Step 3 – two-column on wider screens ───────────────────────────────── */
#pos-step-3 .pos-step-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}
@media (min-width: 640px) {
    #pos-step-3 .pos-step-inner {
        grid-template-columns: auto 1fr;
        gap: 28px;
    }
}

.pos-preview-col { display: flex; justify-content: center; }
#pos-preview-canvas {
    border-radius: var(--pos-radius);
    box-shadow: 0 4px 24px rgba(0,0,0,.22);
    width: min(280px, 42vw);
    height: auto;
    display: block;
}
@media (max-width: 639px) {
    #pos-preview-canvas { width: min(220px, 55vw); }
}

.pos-controls-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Overlay thumbnails ─────────────────────────────────────────────────── */
.pos-overlay-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 10px;
}
.pos-overlay-thumb {
    border-radius: 8px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    background: #f1f5f9;
    padding: 4px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.pos-overlay-thumb:hover { transform: translateY(-2px); }
.pos-overlay-thumb img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}
.pos-overlay-thumb span {
    font-size: .68rem;
    display: block;
    margin-top: 4px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pos-overlay-thumb.pos-selected {
    border-color: var(--pos-primary);
    box-shadow: 0 0 0 3px rgba(0,0,0,.12);
    background: #eff6ff;
}

/* ── Consent ────────────────────────────────────────────────────────────── */
.pos-consent-row { font-size: clamp(.82rem, 3vw, .9rem); line-height: 1.5; }
.pos-consent-row label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.pos-consent-row input[type="checkbox"] {
    width: 18px; height: 18px;
    flex-shrink: 0; margin-top: 2px;
    accent-color: var(--pos-primary);
    cursor: pointer;
}

/* ── Status ─────────────────────────────────────────────────────────────── */
#pos-save-status { min-height: 1.4em; font-size: .9rem; font-weight: 500; }
#pos-save-status.pos-ok    { color: var(--pos-success); }
#pos-save-status.pos-error { color: var(--pos-danger); }

/* ── Step nav ───────────────────────────────────────────────────────────── */
.pos-step-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ── Step 4 – Result ────────────────────────────────────────────────────── */
#pos-step-4 .pos-step-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}
@media (min-width: 540px) {
    #pos-step-4 .pos-step-inner { grid-template-columns: auto 1fr; gap: 28px; }
}

.pos-result-preview { display: flex; justify-content: center; }
.pos-result-preview img {
    width: min(340px, 80vw);
    height: auto;
    border-radius: var(--pos-radius);
    box-shadow: 0 4px 24px rgba(0,0,0,.22);
    display: block;
}

.pos-share-col { display: flex; flex-direction: column; gap: 14px; justify-content: center; }

/* ── Share button grid ──────────────────────────────────────────────────── */
.pos-share-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px)  { .pos-share-buttons { grid-template-columns: 1fr; } }
@media (min-width: 540px)  { .pos-share-buttons { grid-template-columns: 1fr; } }

/* ── Gallery ────────────────────────────────────────────────────────────── */
/* --cols kommt vom Widget (Standard 3) → wird 1:1 als Spaltenanzahl genutzt */
#pos-gallery-section { margin-top: 52px; }
.pos-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: 8px;
}
.pos-gallery-item { border-radius: calc(var(--pos-radius) / 1.5); overflow: hidden; background: #f1f5f9; }
.pos-gallery-item a { display: block; }
.pos-gallery-item img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    display: block; transition: transform .3s;
    /* Lazy load: browser handles fade-in via content-visibility */
    content-visibility: auto;
}
.pos-gallery-item:hover img { transform: scale(1.04); }

/* Responsive: fewer columns on small screens */
@media (max-width: 600px) { .pos-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 360px) { .pos-gallery-grid { grid-template-columns: repeat(1, 1fr) !important; } }

/* ── Facebook-Hinweis ───────────────────────────────────────────────────── */
.pos-facebook-hint {
    background: #e7f0fd;
    border: 1px solid #93b8f5;
    border-radius: var(--pos-radius);
    padding: 10px 14px;
    font-size: .85rem;
    color: #1e3a6e;
    line-height: 1.5;
}

/* ── Instagram-Hinweis ──────────────────────────────────────────────────── */
.pos-instagram-hint {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--pos-radius);
    padding: 10px 14px;
    font-size: .85rem;
    color: #92400e;
    line-height: 1.5;
}

/* ── Shared image view (pos_open= context) ──────────────────────────────── */
.pos-shared-teaser {
    font-size: clamp(.95rem, 3vw, 1.1rem);
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 16px;
    line-height: 1.4;
}

/* Both CTA buttons share the same full-width prominent style */
#pos-btn-create-own,
.pos-btn--fullwidth {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 1.05rem;
}

/* Spacing between share buttons grid and the "Neues Bild" button below */
.pos-new-image-nav {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

/* ── Crop confirm button – disabled state while Cropper initialises ─────── */
#pos-btn-crop-confirm:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── iOS download hint ──────────────────────────────────────────────────── */
.pos-download-wrap { display: contents; }  /* transparent wrapper in grid  */

/* Long-press instruction shown on iOS instead of download button */
.pos-ios-longpress {
    grid-column: 1 / -1;
    font-size: .88rem;
    line-height: 1.6;
    color: #1e293b;
    margin: 0;
    padding: 12px 14px;
    background: #fefce8;
    border-radius: 10px;
    border: 1px solid #fde68a;
}

/* ── Copy-Link Button ───────────────────────────────────────────────────── */
.pos-btn--copy {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    font-size: .88rem;
    font-weight: 500;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, color .15s;
    width: 100%;
}
.pos-btn--copy:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* ── Desktop Instagram inline hint ─────────────────────────────────────── */
.pos-hint-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pos-hint-link:hover {
    opacity: .8;
}