#banner-crop-editor[hidden] { display: none; }
.banner-crop-controls { border: 1px solid #ddd; padding: 16px; margin: 16px 0; min-width: 0; }
.banner-crop-controls label { display: block; margin: 12px 0; }
.banner-crop-controls input[type="range"] { display: block; width: 100%; padding: 0; }
.banner-crop-preview { background: #eee; }
.banner-crop-controls[data-device="mobile"] { max-width: 420px; }
.weselny-crop-frame {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    aspect-ratio: var(--crop-ratio, 3 / 1) !important;
    box-sizing: border-box !important;
}
/* Shared geometry: theme image rules must not change the selected crop. */
.weselny-crop-frame img.weselny-crop-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    object-fit: cover !important;
    object-position: var(--crop-x, 50%) var(--crop-y, 50%) !important;
    transform: scale(var(--crop-zoom, 1)) !important;
    transform-origin: var(--crop-x, 50%) var(--crop-y, 50%) !important;
    transition: none !important;
    animation: none !important;
}
.weselny-banner.weselny-crop-frame {
    --crop-ratio: 3 / 1;
    --crop-x: var(--banner-desktop-x, 50%);
    --crop-y: var(--banner-desktop-y, 50%);
    --crop-zoom: var(--banner-desktop-zoom, 1);
}
@media (max-width: 600px) {
    .weselny-banner.weselny-crop-frame {
        --crop-ratio: 16 / 9;
        --crop-x: var(--banner-mobile-x, 50%);
        --crop-y: var(--banner-mobile-y, 50%);
        --crop-zoom: var(--banner-mobile-zoom, 1);
    }
}

/* Scale the presentation with each preview, independently of the editor viewport. */
.banner-crop-stage { background:#fff; padding:0; }
#banner-crop-editor[data-banner-style="rounded"] .banner-crop-stage { padding:12px; }
.banner-crop-preview { container-type:inline-size; isolation:isolate; }
#banner-crop-editor[data-banner-style="rounded"] .banner-crop-preview { border-radius:18px; }
.banner-crop-preview::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg,#102d24d9,#102d2410 95%); }
#banner-crop-editor[data-banner-style="fog"] .banner-crop-preview::after { background:linear-gradient(180deg,rgba(16,35,29,.25) 0%,rgba(16,35,29,.38) 35%,rgba(255,255,255,.18) 60%,rgba(255,255,255,.8) 83%,#fff 100%); }
.banner-crop-preview .banner-crop-caption { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0; padding:2.5cqw; text-align:center; color:#fff; pointer-events:none; text-shadow:0 2px 16px #0003; }
.banner-crop-preview .banner-preview-eyebrow { display:block; color:#eddaaf; font-size:.9cqw; font-weight:700; letter-spacing:.16em; margin-bottom:1.25cqw; }
.banner-crop-preview .banner-preview-heading { display:block; max-width:76%; font-family:'Playfair Display',Georgia,serif; font-size:5.18cqw; font-weight:500; line-height:1.2; color:#fff; margin:0 0 1.25cqw; overflow-wrap:anywhere; }
.banner-crop-preview .banner-preview-subtitle { display:block; font-size:1.25cqw; line-height:1.6; color:#fff; }
.banner-preview-subtitle:empty { display:none; }
#banner-crop-editor[data-banner-style="fog"] .banner-crop-caption { padding-bottom:7cqw; }
.banner-crop-controls[data-device="mobile"] .banner-crop-caption { padding:5.6cqw; }
.banner-crop-controls[data-device="mobile"] .banner-preview-heading { max-width:100%; font-size:7.7cqw; margin-bottom:3.6cqw; }
.banner-crop-controls[data-device="mobile"] .banner-preview-eyebrow { font-size:2.56cqw; margin-bottom:3.6cqw; }
.banner-crop-controls[data-device="mobile"] .banner-preview-subtitle { font-size:3.6cqw; }
#banner-crop-editor[data-banner-style="fog"] [data-device="mobile"] .banner-crop-caption { padding:4.1cqw 4.6cqw 10.8cqw; }
#banner-crop-editor[data-banner-style="fog"] [data-device="mobile"] .banner-preview-heading { font-size:5.9cqw; margin-bottom:2.05cqw; }
#banner-crop-editor[data-banner-style="fog"] [data-device="mobile"] .banner-preview-eyebrow { font-size:2.05cqw; margin-bottom:2.05cqw; }
#banner-crop-editor[data-banner-style="fog"] [data-device="mobile"] .banner-preview-subtitle { font-size:3.08cqw; }

/* Keep theme typography colors from overriding the guest banner preview. */
#banner-crop-editor .banner-crop-caption .banner-preview-heading,
.wpnl-guest .weselny-banner.wpnl-has-photo .weselny-banner-content h1 { color:var(--banner-heading-color,#fff) !important; }
#banner-crop-editor .banner-crop-caption .banner-preview-subtitle,
.wpnl-guest .weselny-banner.wpnl-has-photo .weselny-banner-content p { color:var(--banner-subtitle-color,#fff) !important; }
#banner-crop-editor .banner-crop-caption .banner-preview-eyebrow,
.wpnl-guest .weselny-banner.wpnl-has-photo .weselny-banner-content .wpnl-eyebrow { color:var(--banner-eyebrow-color,#eddaaf) !important; }

.weselny-workspace .wpnl-banner-colors { border:0; padding:0; margin:0 0 32px; min-width:0; }
.weselny-workspace .wpnl-banner-colors legend { font-weight:600; font-size:18px; margin-bottom:14px; }
.weselny-workspace .wpnl-banner-color-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.weselny-workspace .wpnl-banner-color-options label { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; gap:12px; margin:0; padding:16px; min-width:0; border:1px solid #dfe7e1; border-radius:14px; background:#fff; color:#263b35; font-size:13px; font-weight:500; line-height:1.5; cursor:pointer; }
.weselny-workspace .wpnl-banner-color-options label:focus-within { border-color:#123f37; box-shadow:0 0 0 2px #123f3714; }
.weselny-workspace .wpnl-banner-color-options input[type="color"] { appearance:none; -webkit-appearance:none; display:block; flex:none; width:100% !important; min-width:0; max-width:none; height:48px !important; min-height:48px; margin:0 !important; padding:5px !important; border:1px solid #dfe7e1 !important; border-radius:9px !important; background:#f7f8f5; box-sizing:border-box; cursor:pointer; box-shadow:none; }
.weselny-workspace .wpnl-banner-color-options input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.weselny-workspace .wpnl-banner-color-options input[type="color"]::-webkit-color-swatch { border:1px solid #00000012; border-radius:5px; }
.weselny-workspace .wpnl-banner-color-options input[type="color"]::-moz-color-swatch { border:1px solid #00000012; border-radius:5px; }
.weselny-workspace #banner-colors-reset { min-height:40px; padding:9px 14px; border:1px solid #d0ddd5; border-radius:9px; background:transparent; color:#123f37; font-size:12px; font-weight:600; }
.weselny-workspace #banner-colors-reset:hover { background:#eaf0e9; filter:none; }
.weselny-workspace .wpnl-banner-colors p { margin:10px 0 0; color:#697a74; font-size:12px; line-height:1.6; }
@media(max-width:560px) {
 .weselny-workspace .wpnl-banner-color-options { grid-template-columns:1fr; gap:8px; }
 .weselny-workspace .wpnl-banner-color-options label { flex-direction:row; align-items:center; gap:16px; padding:12px 14px; }
 .weselny-workspace .wpnl-banner-color-options input[type="color"] { width:80px !important; flex:0 0 80px; }
}

/* The preview and guest banner share the same tint and fog settings. */
#banner-crop-editor .banner-crop-preview::after,
.wpnl-guest .weselny-banner.wpnl-has-photo::after {
 background:linear-gradient(0deg,rgba(var(--banner-overlay-color-rgb,16,45,36),.85),rgba(var(--banner-overlay-color-rgb,16,45,36),.063) 95%);
}
#banner-crop-editor[data-banner-style="fog"] .banner-crop-preview::after,
.wpnl-guest--fog .weselny-banner.wpnl-has-photo::after {
 background:linear-gradient(180deg,rgba(var(--banner-overlay-color-rgb,16,45,36),.25) 0%,rgba(var(--banner-overlay-color-rgb,16,45,36),.38) 35%,rgba(var(--banner-fog-color-rgb,255,255,255),.18) 60%,rgba(var(--banner-fog-color-rgb,255,255,255),.8) 83%,#fff 100%);
}