/**
 * custom-card-themes.css — Visual styles for custom eCard theme rendering.
 *
 * Provides paper textures, frame styles, page layouts, and decorative
 * elements. Colours, fonts, and decoration characters are injected via
 * CSS custom properties set by JavaScript at runtime from the theme preset.
 *
 * Required CSS custom properties (set on .custom-card-page):
 *   --cc-bg, --cc-paper, --cc-accent, --cc-text, --cc-heading-text,
 *   --cc-frame, --cc-frame-shadow, --cc-font-heading, --cc-font-body
 */

/* ── Paper texture base classes ─────────────────────────────── */

.custom-card-page {
    /* position/inset/overflow inherited from .page-face (card-viewer.css) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--cc-text);
    font-family: var(--cc-font-body);
}

.paper-linen {
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(0,0,0,0.018) 3px,
            rgba(0,0,0,0.018) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(0,0,0,0.018) 3px,
            rgba(0,0,0,0.018) 4px
        ),
        var(--cc-paper);
}

.paper-warm {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,200,140,0.15), transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(255,180,120,0.1), transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255,220,180,0.06), transparent 80%),
        var(--cc-paper);
}

.paper-cool {
    background:
        radial-gradient(ellipse at 25% 25%, rgba(180,210,240,0.14), transparent 55%),
        radial-gradient(ellipse at 75% 75%, rgba(160,200,230,0.1), transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(200,220,240,0.05), transparent 70%),
        var(--cc-paper);
}

.paper-spring {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(180,230,180,0.14), transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(255,240,180,0.1), transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(200,240,200,0.06), transparent 60%),
        var(--cc-paper);
}

.paper-lavender {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(200,170,230,0.14), transparent 55%),
        radial-gradient(ellipse at 70% 70%, rgba(220,190,240,0.08), transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(210,180,235,0.05), transparent 70%),
        var(--cc-paper);
}

.paper-parchment {
    background:
        repeating-linear-gradient(
            165deg,
            transparent,
            transparent 8px,
            rgba(160,120,60,0.025) 8px,
            rgba(160,120,60,0.025) 9px
        ),
        radial-gradient(ellipse at 50% 50%, rgba(200,170,110,0.1), transparent 70%),
        radial-gradient(ellipse at 20% 80%, rgba(180,150,80,0.06), transparent 50%),
        var(--cc-paper);
}

.paper-rose {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(240,160,180,0.14), transparent 55%),
        radial-gradient(ellipse at 70% 60%, rgba(255,200,210,0.08), transparent 50%),
        radial-gradient(ellipse at 50% 20%, rgba(255,180,200,0.05), transparent 60%),
        var(--cc-paper);
}


/* ── Page structure ─────────────────────────────────────────── */

.cc-page-inner {
    width: 100%;
    height: 100%;
    padding: 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
}


/* ══════════════════════════════════════════════════════════════
   GROUP OVERLAY PATTERNS
   Each occasion group gets a unique CSS pattern overlay that gives
   it a distinct visual identity beyond colour changes.
   ══════════════════════════════════════════════════════════════ */

/* Christmas — snowflake/star repeat pattern */
.cc-group-christmas::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle at 15% 20%, var(--cc-accent) 1px, transparent 1px),
        radial-gradient(circle at 85% 15%, var(--cc-accent) 0.8px, transparent 0.8px),
        radial-gradient(circle at 50% 50%, var(--cc-accent) 0.6px, transparent 0.6px),
        radial-gradient(circle at 25% 80%, var(--cc-accent) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, var(--cc-accent) 0.7px, transparent 0.7px),
        radial-gradient(circle at 10% 55%, var(--cc-accent) 0.5px, transparent 0.5px),
        radial-gradient(circle at 90% 45%, var(--cc-accent) 0.8px, transparent 0.8px),
        radial-gradient(circle at 40% 10%, var(--cc-accent) 0.6px, transparent 0.6px),
        radial-gradient(circle at 60% 90%, var(--cc-accent) 0.9px, transparent 0.9px);
    opacity: 0.3;
}
.cc-group-christmas::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(180deg, transparent 0%, transparent 92%, var(--cc-accent) 92%, var(--cc-accent) 92.5%, transparent 92.5%),
        linear-gradient(0deg, transparent 0%, transparent 92%, var(--cc-accent) 92%, var(--cc-accent) 92.5%, transparent 92.5%);
    opacity: 0.15;
}

/* Easter — soft polka-dot egg pattern */
.cc-group-easter::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 8px 10px at 20% 18%, var(--cc-accent) 45%, transparent 46%),
        radial-gradient(ellipse 6px 8px at 70% 25%, var(--cc-frame) 45%, transparent 46%),
        radial-gradient(ellipse 7px 9px at 40% 72%, var(--cc-accent) 45%, transparent 46%),
        radial-gradient(ellipse 5px 7px at 85% 65%, var(--cc-frame) 45%, transparent 46%),
        radial-gradient(ellipse 9px 11px at 12% 55%, var(--cc-frame) 45%, transparent 46%),
        radial-gradient(ellipse 6px 8px at 55% 88%, var(--cc-accent) 45%, transparent 46%),
        radial-gradient(ellipse 7px 9px at 90% 10%, var(--cc-accent) 45%, transparent 46%),
        radial-gradient(ellipse 5px 7px at 35% 40%, var(--cc-frame) 45%, transparent 46%);
    opacity: 0.16;
}
.cc-group-easter::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 50%, transparent 30%, var(--cc-accent) 31%, var(--cc-accent) 31.5%, transparent 32%);
    opacity: 0.08;
}

/* Mother's Day — rose petal / floral swirl overlay */
.cc-group-mothers-day::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 22px 18px at 12% 15%, var(--cc-accent), transparent 70%),
        radial-gradient(ellipse 18px 22px at 88% 20%, var(--cc-frame), transparent 70%),
        radial-gradient(ellipse 16px 20px at 20% 82%, var(--cc-frame), transparent 70%),
        radial-gradient(ellipse 20px 16px at 80% 78%, var(--cc-accent), transparent 70%),
        radial-gradient(ellipse 14px 18px at 50% 8%, var(--cc-accent), transparent 70%),
        radial-gradient(ellipse 18px 14px at 45% 92%, var(--cc-frame), transparent 70%);
    opacity: 0.15;
}
.cc-group-mothers-day::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse at 0% 0%, var(--cc-accent) 0%, transparent 35%),
        radial-gradient(ellipse at 100% 100%, var(--cc-accent) 0%, transparent 35%);
    opacity: 0.12;
}

/* Father's Day — subtle pinstripe / herringbone */
.cc-group-fathers-day::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 12px,
            var(--cc-frame) 12px,
            var(--cc-frame) 12.8px
        );
    opacity: 0.12;
}
.cc-group-fathers-day::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(180deg, var(--cc-accent) 0%, transparent 3%),
        linear-gradient(0deg, var(--cc-accent) 0%, transparent 3%);
    opacity: 0.2;
}

/* Valentine's Day — heart-shaped radial dots + rosy vignette */
.cc-group-valentines::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle 6px at 18% 22%, var(--cc-accent) 50%, transparent 51%),
        radial-gradient(circle 4px at 78% 18%, var(--cc-frame) 50%, transparent 51%),
        radial-gradient(circle 5px at 25% 75%, var(--cc-frame) 50%, transparent 51%),
        radial-gradient(circle 7px at 82% 80%, var(--cc-accent) 50%, transparent 51%),
        radial-gradient(circle 3px at 50% 12%, var(--cc-accent) 50%, transparent 51%),
        radial-gradient(circle 4px at 45% 55%, var(--cc-frame) 50%, transparent 51%),
        radial-gradient(circle 5px at 10% 48%, var(--cc-accent) 50%, transparent 51%),
        radial-gradient(circle 3px at 92% 50%, var(--cc-frame) 50%, transparent 51%);
    opacity: 0.18;
}
.cc-group-valentines::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 50%, transparent 40%, var(--cc-accent) 120%);
    opacity: 0.1;
}

/* Birthday — confetti burst pattern */
.cc-group-birthday::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(25deg, var(--cc-accent) 2px, transparent 2px) 10% 15% / 4px 14px no-repeat,
        linear-gradient(-35deg, var(--cc-frame) 2px, transparent 2px) 85% 10% / 4px 12px no-repeat,
        linear-gradient(50deg, var(--cc-accent) 2px, transparent 2px) 20% 78% / 3px 16px no-repeat,
        linear-gradient(-20deg, var(--cc-frame) 2px, transparent 2px) 75% 82% / 4px 10px no-repeat,
        linear-gradient(70deg, var(--cc-accent) 2px, transparent 2px) 55% 5% / 3px 12px no-repeat,
        linear-gradient(-55deg, var(--cc-frame) 2px, transparent 2px) 8% 45% / 4px 14px no-repeat,
        linear-gradient(40deg, var(--cc-accent) 2px, transparent 2px) 92% 55% / 3px 10px no-repeat,
        linear-gradient(-65deg, var(--cc-frame) 2px, transparent 2px) 42% 92% / 4px 12px no-repeat,
        radial-gradient(circle 3px at 30% 30%, var(--cc-accent) 50%, transparent 51%),
        radial-gradient(circle 2px at 65% 40%, var(--cc-frame) 50%, transparent 51%),
        radial-gradient(circle 3px at 50% 70%, var(--cc-accent) 50%, transparent 51%),
        radial-gradient(circle 2px at 15% 65%, var(--cc-frame) 50%, transparent 51%);
    opacity: 0.25;
}
.cc-group-birthday::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        conic-gradient(from 0deg at 50% -5%, var(--cc-accent) 0deg, transparent 8deg, transparent 352deg, var(--cc-accent) 360deg);
    opacity: 0.08;
}

/* Thank You — leaf vine / botanical trail */
.cc-group-thank-you::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 10px 16px at 8% 30%, var(--cc-accent) 40%, transparent 41%),
        radial-gradient(ellipse 8px 14px at 5% 42%, var(--cc-frame) 40%, transparent 41%),
        radial-gradient(ellipse 10px 16px at 10% 54%, var(--cc-accent) 40%, transparent 41%),
        radial-gradient(ellipse 8px 14px at 7% 66%, var(--cc-frame) 40%, transparent 41%),
        radial-gradient(ellipse 10px 16px at 92% 28%, var(--cc-accent) 40%, transparent 41%),
        radial-gradient(ellipse 8px 14px at 95% 40%, var(--cc-frame) 40%, transparent 41%),
        radial-gradient(ellipse 10px 16px at 90% 52%, var(--cc-accent) 40%, transparent 41%),
        radial-gradient(ellipse 8px 14px at 93% 64%, var(--cc-frame) 40%, transparent 41%);
    opacity: 0.16;
}
.cc-group-thank-you::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(90deg, var(--cc-accent) 0%, transparent 8%),
        linear-gradient(-90deg, var(--cc-accent) 0%, transparent 8%);
    opacity: 0.08;
}

/* Thinking of You — dreamy cloud / soft glow */
.cc-group-thinking::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 60px 30px at 20% 15%, var(--cc-accent), transparent 70%),
        radial-gradient(ellipse 50px 25px at 75% 10%, var(--cc-frame), transparent 70%),
        radial-gradient(ellipse 45px 22px at 15% 85%, var(--cc-frame), transparent 70%),
        radial-gradient(ellipse 55px 28px at 80% 88%, var(--cc-accent), transparent 70%),
        radial-gradient(ellipse 40px 20px at 50% 50%, var(--cc-accent), transparent 80%);
    opacity: 0.14;
}
.cc-group-thinking::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 50%, var(--cc-accent) 0%, transparent 60%);
    opacity: 0.08;
}

/* Sympathy — serene minimal ripple */
.cc-group-sympathy::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 50%, transparent 20%, var(--cc-frame) 21%, var(--cc-frame) 21.4%, transparent 21.5%),
        radial-gradient(circle at 50% 50%, transparent 35%, var(--cc-frame) 35.5%, var(--cc-frame) 35.9%, transparent 36%),
        radial-gradient(circle at 50% 50%, transparent 50%, var(--cc-frame) 50.5%, var(--cc-frame) 50.9%, transparent 51%);
    opacity: 0.1;
}
.cc-group-sympathy::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg, transparent 0%, var(--cc-frame) 100%);
    opacity: 0.06;
}

/* Anniversary — art-deco geometric fans */
.cc-group-anniversary::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        conic-gradient(from 180deg at 0% 100%, var(--cc-accent) 0deg, transparent 30deg),
        conic-gradient(from 270deg at 100% 100%, var(--cc-accent) 0deg, transparent 30deg),
        conic-gradient(from 90deg at 0% 0%, var(--cc-accent) 0deg, transparent 25deg),
        conic-gradient(from 0deg at 100% 0%, var(--cc-accent) 0deg, transparent 25deg);
    opacity: 0.14;
}
.cc-group-anniversary::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 20px,
            var(--cc-accent) 20px,
            var(--cc-accent) 20.6px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent,
            transparent 20px,
            var(--cc-accent) 20px,
            var(--cc-accent) 20.6px
        );
    opacity: 0.07;
}


/* ══════════════════════════════════════════════════════════════
   ACCENT BANDS — decorative top/bottom colour strips per group
   ══════════════════════════════════════════════════════════════ */

.cc-accent-band {
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    z-index: 2;
}
.cc-accent-band--top {
    top: 0;
    height: 8px;
    background: linear-gradient(90deg, var(--cc-accent), var(--cc-frame), var(--cc-accent));
    border-radius: 0 0 2px 2px;
}
.cc-accent-band--bottom {
    bottom: 0;
    height: 8px;
    background: linear-gradient(90deg, var(--cc-accent), var(--cc-frame), var(--cc-accent));
    border-radius: 2px 2px 0 0;
}

/* Double-band variant for festive occasions */
.cc-accent-band--double-top {
    top: 0;
    height: 14px;
    background:
        linear-gradient(180deg,
            var(--cc-accent) 0%, var(--cc-accent) 40%,
            transparent 40%, transparent 55%,
            var(--cc-frame) 55%, var(--cc-frame) 100%
        );
}
.cc-accent-band--double-bottom {
    bottom: 0;
    height: 14px;
    background:
        linear-gradient(0deg,
            var(--cc-accent) 0%, var(--cc-accent) 40%,
            transparent 40%, transparent 55%,
            var(--cc-frame) 55%, var(--cc-frame) 100%
        );
}

/* Ribbon-style for special occasions */
.cc-accent-band--ribbon {
    top: 0; left: 0; right: 0;
    height: 32px;
    background: linear-gradient(180deg, var(--cc-accent) 0%, var(--cc-frame) 100%);
    opacity: 0.22;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
}


/* ── Frame styles ───────────────────────────────────────────── */

.cc-frame {
    position: absolute;
    inset: 6%;
    pointer-events: none;
}

/* Classic — elegant double border with corner accents */
.cc-frame--classic {
    border: 3px solid var(--cc-frame);
    box-shadow:
        inset 0 0 0 1.5px var(--cc-frame-shadow),
        0 0 0 1.5px var(--cc-frame-shadow),
        inset 0 0 12px var(--cc-frame-shadow);
    border-radius: 2px;
}
.cc-frame--classic::before,
.cc-frame--classic::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--cc-frame);
    opacity: 0.6;
}
.cc-frame--classic::before { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.cc-frame--classic::after { bottom: -4px; right: -4px; border-left: none; border-top: none; }

/* Gold border — luxurious thick accent with metallic glow */
.cc-frame--gold-border {
    border: 4px solid var(--cc-frame);
    box-shadow:
        inset 0 0 16px var(--cc-frame-shadow),
        0 0 12px var(--cc-frame-shadow),
        inset 0 0 0 6px rgba(255,255,255,0.08);
    border-radius: 3px;
    background: linear-gradient(135deg, transparent 30%, var(--cc-frame-shadow) 50%, transparent 70%);
}

/* Frost — dashed with icy glow and inner shimmer */
.cc-frame--frost {
    border: 2.5px dashed var(--cc-frame);
    box-shadow: 0 0 20px var(--cc-frame-shadow), inset 0 0 20px var(--cc-frame-shadow);
    border-radius: 6px;
}
.cc-frame--frost::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--cc-frame);
    border-radius: 4px;
    opacity: 0.3;
}

/* Warm glow — solid with radiating warmth */
.cc-frame--warm-glow {
    border: 3px solid var(--cc-frame);
    box-shadow:
        inset 0 0 24px var(--cc-frame-shadow),
        0 0 16px var(--cc-frame-shadow),
        0 0 32px var(--cc-frame-shadow);
    border-radius: 4px;
}

/* Spring — dotted with fresh inner border */
.cc-frame--spring {
    border: 2.5px dotted var(--cc-frame);
    box-shadow: 0 0 10px var(--cc-frame-shadow);
    border-radius: 8px;
}
.cc-frame--spring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1.5px solid var(--cc-frame);
    border-radius: 6px;
    opacity: 0.2;
}
.cc-frame--spring::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 1px solid var(--cc-frame);
    border-radius: 10px;
    opacity: 0.15;
}

/* Floral — triple-layer with rounded softness */
.cc-frame--floral {
    border: 3px double var(--cc-frame);
    box-shadow: 0 0 14px var(--cc-frame-shadow), inset 0 0 14px var(--cc-frame-shadow);
    border-radius: 10px;
}
.cc-frame--floral::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1.5px dotted var(--cc-frame);
    border-radius: 8px;
    opacity: 0.35;
}

/* Watercolour — soft diffuse edge with bleed */
.cc-frame--watercolour {
    border: 2px solid var(--cc-frame);
    box-shadow:
        0 0 24px var(--cc-frame-shadow),
        0 0 48px var(--cc-frame-shadow),
        inset 0 0 20px var(--cc-frame-shadow);
    border-radius: 12px;
    opacity: 0.85;
}

/* Botanical — thin with leafy inner detail */
.cc-frame--botanical {
    border: 2px solid var(--cc-frame);
    box-shadow: inset 0 0 10px var(--cc-frame-shadow);
    border-radius: 6px;
}
.cc-frame--botanical::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px dashed var(--cc-frame);
    border-radius: 4px;
    opacity: 0.3;
}

/* Sunshine — warm double with radiating glow */
.cc-frame--sunshine {
    border: 3px double var(--cc-frame);
    box-shadow:
        inset 0 0 20px var(--cc-frame-shadow),
        0 0 8px var(--cc-frame-shadow),
        0 0 24px var(--cc-frame-shadow);
    border-radius: 4px;
}

/* Pastel — very soft rounded with inner highlight */
.cc-frame--pastel {
    border: 2px solid var(--cc-frame);
    box-shadow: 0 0 16px var(--cc-frame-shadow), inset 0 0 8px rgba(255,255,255,0.3);
    border-radius: 14px;
}
.cc-frame--pastel::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--cc-frame);
    border-radius: 12px;
    opacity: 0.2;
}

/* Distinguished — strong formal with corner detail */
.cc-frame--distinguished {
    border: 4px solid var(--cc-frame);
    box-shadow: inset 0 0 0 2px var(--cc-frame-shadow);
    border-radius: 2px;
}
.cc-frame--distinguished::before,
.cc-frame--distinguished::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0.5;
}
.cc-frame--distinguished::before {
    top: 4px;
    left: 4px;
    border-top: 3px solid var(--cc-frame);
    border-left: 3px solid var(--cc-frame);
}
.cc-frame--distinguished::after {
    bottom: 4px;
    right: 4px;
    border-bottom: 3px solid var(--cc-frame);
    border-right: 3px solid var(--cc-frame);
}

/* Rustic — rough solid with worn texture */
.cc-frame--rustic {
    border: 3px solid var(--cc-frame);
    box-shadow: 0 0 8px var(--cc-frame-shadow);
    border-radius: 1px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 6px,
            var(--cc-frame-shadow) 6px,
            var(--cc-frame-shadow) 7px
        );
}

/* Festive — dashed bold with party glow */
.cc-frame--festive {
    border: 3.5px dashed var(--cc-frame);
    box-shadow:
        0 0 18px var(--cc-frame-shadow),
        inset 0 0 12px var(--cc-frame-shadow);
    border-radius: 6px;
}
.cc-frame--festive::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 2px solid var(--cc-frame);
    border-radius: 4px;
    opacity: 0.2;
}

/* Confetti — dotted playful with inner dash */
.cc-frame--confetti {
    border: 3px dotted var(--cc-frame);
    box-shadow: 0 0 14px var(--cc-frame-shadow);
    border-radius: 10px;
}
.cc-frame--confetti::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 2px dashed var(--cc-frame);
    border-radius: 8px;
    opacity: 0.25;
}

/* Sparkle — thin with dramatic spread */
.cc-frame--sparkle {
    border: 2px solid var(--cc-frame);
    box-shadow:
        0 0 22px var(--cc-frame-shadow),
        0 0 44px var(--cc-frame-shadow),
        inset 0 0 12px var(--cc-frame-shadow);
    border-radius: 8px;
}

/* Romantic — ornate double with soft glow */
.cc-frame--romantic {
    border: 3px double var(--cc-frame);
    box-shadow:
        inset 0 0 18px var(--cc-frame-shadow),
        0 0 14px var(--cc-frame-shadow);
    border-radius: 8px;
}
.cc-frame--romantic::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid var(--cc-frame);
    border-radius: 6px;
    opacity: 0.3;
}

/* Soft — barely-there border with dreamy diffuse glow */
.cc-frame--soft {
    border: 1.5px solid var(--cc-frame);
    box-shadow: 0 0 28px var(--cc-frame-shadow), 0 0 56px var(--cc-frame-shadow);
    border-radius: 10px;
}

/* Gentle — thin with subtle shadow */
.cc-frame--gentle {
    border: 1px solid var(--cc-frame);
    box-shadow: 0 0 10px var(--cc-frame-shadow), inset 0 0 10px var(--cc-frame-shadow);
    border-radius: 6px;
}
.cc-frame--gentle::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 0.5px solid var(--cc-frame);
    border-radius: 4px;
    opacity: 0.25;
}


/* ── Corner decorations — CSS L-brackets with SVG accent ──── */

.cc-corner {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    width: 40px;
    height: 40px;
}
.cc-corner::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cc-accent);
}
.cc-corner svg {
    position: absolute;
    width: 18px;
    height: 18px;
    color: var(--cc-accent);
    opacity: 0.5;
    filter: drop-shadow(0 1px 2px var(--cc-frame-shadow));
}
.cc-corner--tl {
    top: 5%; left: 5%;
    border-top: 3px solid var(--cc-accent);
    border-left: 3px solid var(--cc-accent);
}
.cc-corner--tl::before { top: -4px; left: -4px; }
.cc-corner--tl svg { top: 10px; left: 10px; }

.cc-corner--tr {
    top: 5%; right: 5%;
    border-top: 3px solid var(--cc-accent);
    border-right: 3px solid var(--cc-accent);
}
.cc-corner--tr::before { top: -4px; right: -4px; }
.cc-corner--tr svg { top: 10px; right: 10px; transform: scaleX(-1); }

.cc-corner--bl {
    bottom: 5%; left: 5%;
    border-bottom: 3px solid var(--cc-accent);
    border-left: 3px solid var(--cc-accent);
}
.cc-corner--bl::before { bottom: -4px; left: -4px; }
.cc-corner--bl svg { bottom: 10px; left: 10px; transform: scaleY(-1); }

.cc-corner--br {
    bottom: 5%; right: 5%;
    border-bottom: 3px solid var(--cc-accent);
    border-right: 3px solid var(--cc-accent);
}
.cc-corner--br::before { bottom: -4px; right: -4px; }
.cc-corner--br svg { bottom: 10px; right: 10px; transform: scale(-1); }

/* Group-specific corner variations */
.cc-group-christmas .cc-corner,
.cc-group-birthday .cc-corner {
    border-width: 4px;
    width: 48px; height: 48px;
    box-shadow: 0 0 6px var(--cc-frame-shadow);
}
.cc-group-valentines .cc-corner,
.cc-group-anniversary .cc-corner,
.cc-group-mothers-day .cc-corner {
    border-width: 2px;
    width: 44px; height: 44px;
}
.cc-group-valentines .cc-corner--tl,
.cc-group-anniversary .cc-corner--tl,
.cc-group-mothers-day .cc-corner--tl { border-top-left-radius: 6px; }
.cc-group-valentines .cc-corner--tr,
.cc-group-anniversary .cc-corner--tr,
.cc-group-mothers-day .cc-corner--tr { border-top-right-radius: 6px; }
.cc-group-valentines .cc-corner--bl,
.cc-group-anniversary .cc-corner--bl,
.cc-group-mothers-day .cc-corner--bl { border-bottom-left-radius: 6px; }
.cc-group-valentines .cc-corner--br,
.cc-group-anniversary .cc-corner--br,
.cc-group-mothers-day .cc-corner--br { border-bottom-right-radius: 6px; }
.cc-group-fathers-day .cc-corner {
    border-width: 3px;
    border-style: double;
}
.cc-group-sympathy .cc-corner,
.cc-group-thinking .cc-corner {
    border-width: 1px;
    opacity: 0.6;
    width: 32px; height: 32px;
}


/* ── Scatter decorations (SVG icons) ─────────────────────────── */

.cc-scatter {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.cc-scatter-item {
    position: absolute;
    width: 22px;
    height: 22px;
    color: var(--cc-accent);
    opacity: 0.28;
    animation: cc-float 14s ease-in-out infinite;
}
.cc-scatter-item svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 3px var(--cc-frame-shadow));
}
.cc-scatter-item:nth-child(1) { width: 26px; height: 26px; }
.cc-scatter-item:nth-child(2) { animation-delay: -3s; width: 19px; height: 19px; }
.cc-scatter-item:nth-child(3) { animation-delay: -6s; }
.cc-scatter-item:nth-child(4) { animation-delay: -9s; width: 17px; height: 17px; }
.cc-scatter-item:nth-child(5) { animation-delay: -2s; width: 20px; height: 20px; }
.cc-scatter-item:nth-child(6) { animation-delay: -7s; width: 24px; height: 24px; }
.cc-scatter-item:nth-child(7) { animation-delay: -4.5s; width: 18px; height: 18px; }
.cc-scatter-item:nth-child(8) { animation-delay: -10s; width: 23px; height: 23px; }

@keyframes cc-float {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.28; }
    25%      { transform: translateY(-5px) rotate(3deg); opacity: 0.35; }
    50%      { transform: translateY(-9px) rotate(-2deg); opacity: 0.32; }
    75%      { transform: translateY(-3px) rotate(4deg); opacity: 0.25; }
}

/* Page 1 (the user's photo) — tone scatter right down so it doesn't clash
   with the photograph. Scatter is already z-indexed behind the photo frame,
   but bright dove/candle/leaf icons poking out around the frame are noisy
   when a real photo is the star of the page. (#19) */
.cc-page-front .cc-scatter-item {
    opacity: 0.12;
    animation: cc-float-muted 18s ease-in-out infinite;
}
@keyframes cc-float-muted {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.12; }
    50%      { transform: translateY(-4px) rotate(-2deg); opacity: 0.16; }
}


/* ── Decorative dividers (SVG-based) ────────────────────────── */

.cc-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 5%;
    position: relative;
    z-index: 3;
    color: var(--cc-accent);
    opacity: 0.55;
}
.cc-divider svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.cc-divider-line {
    display: inline-block;
    width: 32px;
    height: 1.5px;
    background: var(--cc-accent);
    border-radius: 1px;
}
.cc-divider-long {
    display: inline-block;
    width: 80px;
    height: 1px;
    background: var(--cc-accent);
    border-radius: 1px;
}


/* ── Vignette overlay — subtle edge darkening for depth ─────── */
.cc-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,0.1) 100%);
}


/* ── Page 1 — Front cover (user photo + heading) ────────────── */

.cc-page-front .cc-photo-frame {
    width: 65%;
    max-width: 260px;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid var(--cc-frame);
    box-shadow:
        0 6px 20px var(--cc-frame-shadow),
        0 2px 6px rgba(0,0,0,0.1),
        inset 0 0 0 1px rgba(255,255,255,0.2);
    margin-bottom: 5%;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    flex-grow: 0;
}

.cc-page-front .cc-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.cc-page-front .cc-photo-frame--placeholder {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--cc-paper, #fff) 65%, var(--cc-accent, #c89bb5) 35%),
        color-mix(in srgb, var(--cc-paper, #fff) 90%, var(--cc-accent, #c89bb5) 10%));
}

.cc-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--cc-accent, #6b1f3a);
    text-align: center;
    padding: 0.5rem;
}

.cc-photo-placeholder-icon {
    width: 36%;
    max-width: 56px;
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cc-photo-placeholder-icon svg {
    width: 60%;
    height: 60%;
    fill: var(--cc-accent, #6b1f3a);
    opacity: 0.85;
}

.cc-photo-placeholder-text {
    font-family: var(--cc-font-body, inherit);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--cc-text, #333) 75%, var(--cc-accent, #6b1f3a) 25%);
    opacity: 0.75;
}

.cc-page-front .cc-front-text {
    font-family: var(--cc-font-heading);
    color: var(--cc-heading-text);
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    text-align: center;
    line-height: 1.2;
    position: relative;
    z-index: 3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.06);
}


/* ── Page 2 — Inside left (themed message) ──────────────────── */

.cc-page-inside-left .cc-themed-heading {
    font-family: var(--cc-font-heading);
    color: var(--cc-heading-text);
    font-size: clamp(1.3rem, 3.5vw, 2rem);
    text-align: center;
    margin-bottom: 5%;
    position: relative;
    z-index: 3;
    text-shadow: 0 1px 1px rgba(0,0,0,0.04);
}

.cc-page-inside-left .cc-divider {
    font-size: 1.4em;
    opacity: 0.5;
    margin-bottom: 5%;
    position: relative;
    z-index: 3;
    letter-spacing: 0.3em;
}

.cc-page-inside-left .cc-themed-message {
    font-family: var(--cc-font-body);
    color: var(--cc-text);
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    line-height: 1.75;
    text-align: center;
    white-space: pre-line;
    max-width: 82%;
    position: relative;
    z-index: 3;
}


/* ── Page 3 — Inside right (user's message) ─────────────────── */

.cc-page-inside-right .cc-user-to {
    font-family: var(--cc-font-heading);
    color: var(--cc-heading-text);
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    margin-bottom: 4%;
    position: relative;
    z-index: 3;
}

.cc-page-inside-right .cc-user-message {
    font-family: var(--cc-font-body);
    color: var(--cc-text);
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    line-height: 1.75;
    text-align: center;
    white-space: pre-line;
    max-width: 82%;
    position: relative;
    z-index: 3;
}

.cc-page-inside-right .cc-user-from {
    font-family: var(--cc-font-heading);
    color: var(--cc-heading-text);
    font-size: clamp(0.95rem, 2.5vw, 1.3rem);
    margin-top: 6%;
    position: relative;
    z-index: 3;
}


/* ── Page 4 — Back cover (branding) ─────────────────────────── */

.cc-page-back-cover {
    background: var(--cc-paper);
}

.cc-page-back-cover .cc-branding {
    text-align: center;
    position: relative;
    z-index: 3;
}

.cc-page-back-cover .cc-branding-name {
    font-family: var(--cc-font-heading);
    color: var(--cc-heading-text);
    font-size: clamp(1.3rem, 3.5vw, 2rem);
    margin-bottom: 4%;
}

.cc-page-back-cover .cc-branding-tagline {
    font-family: var(--cc-font-body);
    color: var(--cc-text);
    font-size: clamp(0.8rem, 2vw, 1rem);
    opacity: 0.7;
    line-height: 1.5;
}

.cc-page-back-cover .cc-branding-url {
    font-family: var(--cc-font-body);
    color: var(--cc-accent);
    font-size: clamp(0.75rem, 1.8vw, 0.9rem);
    margin-top: 4%;
    opacity: 0.6;
}


/* ── Creator page styles ────────────────────────────────────── */

.cc-creator-form {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cc-finishing-panel {
    max-width: none;
    margin: 0;
}

.preview-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.customize-container {
    position: relative;
    z-index: 5;
}

.ad-ecard-top,
.ad-slot {
    position: relative;
    z-index: 1;
}

.preview-column .viewer-hint {
    margin: 0;
}

.cc-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cc-field-group label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-dark, #2d3a4a);
}

.cc-field-group select,
.cc-field-group input[type="text"],
.cc-field-group input[type="email"],
.cc-field-group textarea {
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(45,58,74,0.18);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    background: #fff;
    transition: border-color 0.2s;
}

.cc-field-group select:focus,
.cc-field-group input:focus,
.cc-field-group textarea:focus {
    outline: none;
    border-color: var(--primary, #e67e73);
    box-shadow: 0 0 0 3px rgba(230,126,115,0.12);
}

.cc-field-group textarea {
    resize: vertical;
    min-height: 80px;
}

.cc-preset-native-select {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0 !important;
}

.cc-preset-picker {
    position: relative;
    margin-bottom: 1rem;
    z-index: 10;
}

.cc-preset-picker.is-open {
    z-index: 10000;
}

.cc-preset-toggle,
.cc-preset-option {
    width: 100%;
    border: 1px solid rgba(45,58,74,0.18);
    background: #fff;
    color: var(--text-dark, #2d3a4a);
    font: inherit;
    text-align: left;
}

.cc-preset-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1rem;
    gap: 0.75rem;
    align-items: center;
    min-height: 44px;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    font-size: 0.9rem;
    cursor: pointer;
}

.cc-preset-toggle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-preset-toggle-icon {
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.55;
    transform: rotate(45deg) translateY(-2px);
}

.cc-preset-options {
    position: absolute;
    z-index: 10001;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    max-height: min(420px, 70vh);
    overflow-y: auto;
    border: 1px solid rgba(45,58,74,0.18);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(45,58,74,0.18);
}

.cc-preset-heading {
    padding: 0.8rem 0.9rem 0.35rem;
    color: var(--text-dark, #2d3a4a);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cc-preset-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.15rem;
    gap: 0.75rem;
    align-items: center;
    min-height: 42px;
    padding: 0.7rem 0.9rem;
    border-width: 0 0 1px;
    border-radius: 0;
    font-size: 0.86rem;
    line-height: 1.3;
    cursor: pointer;
}

.cc-preset-option:last-child {
    border-bottom: 0;
}

.cc-preset-option:hover,
.cc-preset-option:focus-visible,
.cc-preset-option.selected {
    background: rgba(230,126,115,0.08);
}

.cc-preset-option-text {
    min-width: 0;
}

.cc-preset-radio {
    grid-column: 2;
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid rgba(45,58,74,0.35);
    border-radius: 999px;
    justify-self: end;
}

.cc-preset-option.selected .cc-preset-radio {
    border-color: var(--primary, #e67e73);
    box-shadow: inset 0 0 0 3px #fff;
    background: var(--primary, #e67e73);
}

.cc-mobile-more-options-note {
    display: none;
    margin: 0.35rem 0 0;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: rgba(230,126,115,0.08);
    color: var(--text-muted, #667085);
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Upload area */
.cc-upload-area {
    border: 2px dashed rgba(45,58,74,0.2);
    border-radius: 14px;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
}

.cc-upload-area:hover,
.cc-upload-area.cc-upload-dragover {
    border-color: var(--primary, #e67e73);
    background: rgba(230,126,115,0.04);
}

.cc-upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.cc-upload-label {
    font-size: 0.92rem;
    color: #5f6b7a;
}

.cc-upload-label strong {
    color: var(--primary, #e67e73);
}

.cc-upload-preview {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    margin: 0.75rem auto 0;
    display: none;
    object-fit: cover;
}

.cc-upload-preview.visible {
    display: block;
}

/* Hide the "or drag and drop" helper copy on touch devices where it's meaningless. */
@media (hover: none) and (pointer: coarse) {
    .cc-upload-drag-hint {
        display: none;
    }
}

/* Photo controls (aspect-ratio presets) shown after a photo is uploaded. */
.cc-photo-controls {
    display: none;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}
.cc-photo-controls.visible { display: flex; }

.cc-aspect-btn {
    padding: 0.3rem 0.75rem;
    border: 1.5px solid rgba(45,58,74,0.18);
    border-radius: 999px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    color: #5f6b7a;
    cursor: pointer;
    transition: all 0.15s;
}
.cc-aspect-btn:hover { border-color: var(--primary, #e67e73); color: var(--primary, #e67e73); }
.cc-aspect-btn.active {
    background: var(--primary, #e67e73);
    border-color: var(--primary, #e67e73);
    color: #fff;
}

.cc-photo-adjust {
    margin-top: 0.7rem;
    padding: 0.75rem;
    border: 1px solid rgba(45,58,74,0.12);
    border-radius: 12px;
    background: rgba(255,255,255,0.78);
}

.cc-photo-adjust-help {
    margin: 0 0 0.65rem;
    color: #5f6b7a;
    font-size: 0.82rem;
    line-height: 1.35;
}

.cc-photo-adjust-row {
    display: grid;
    grid-template-columns: 4rem 1fr;
    align-items: center;
    gap: 0.65rem;
    margin: 0.55rem 0;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 800;
}

.cc-photo-adjust-row input[type="range"] {
    width: 100%;
    min-width: 0;
}

.cc-photo-adjust-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.7rem;
}

.cc-mobile-photo-tools {
    display: none;
}

@media (max-width: 1023px) {
    .cc-photo-adjust {
        display: none;
    }

    .cc-mobile-photo-tools {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        margin: 0.55rem auto 0;
        padding: 0.55rem 0.6rem;
        flex-wrap: wrap;
        color: #7c2d12;
        background: linear-gradient(135deg, #fff7ed, #ffedd5);
        border: 1.5px solid rgba(251,146,60,0.55);
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(154,82,30,0.12);
        font-size: 0.78rem;
        font-weight: 800;
    }

    .cc-mobile-photo-tools[hidden] {
        display: none;
    }

    .cc-mobile-photo-tool {
        border: 1px solid rgba(154,82,30,0.24);
        border-radius: 999px;
        background: #fff;
        color: #7c2d12;
        padding: 0.28rem 0.65rem;
        font: inherit;
        font-weight: 800;
        line-height: 1.2;
    }

    .cc-mobile-photo-tools__hint {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* Live preview container */
.cc-live-preview {
    margin: 1.5rem auto;
    max-width: 480px;
}

.cc-live-preview .card-viewer-wrapper {
    min-height: 400px;
}

/* Character counter */
.cc-char-count {
    font-size: 0.78rem;
    color: #8a94a2;
    text-align: right;
}

.cc-char-count.cc-char-warn {
    color: #e67e73;
}

/* Send group */
.cc-send-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.cc-send-group .cta {
    width: 100%;
    text-align: center;
}

/* Error / success messages */
.cc-msg {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    display: none;
}

.cc-msg--error {
    background: rgba(220,53,69,0.08);
    color: #c0392b;
    border: 1px solid rgba(220,53,69,0.15);
}

.cc-msg--success {
    background: rgba(40,167,69,0.08);
    color: #1e7e34;
    border: 1px solid rgba(40,167,69,0.15);
}

.cc-msg.visible {
    display: block;
}


/* ── Responsive adjustments ─────────────────────────────────── */

@media (max-width: 767px) {
    .cc-mobile-more-options-note {
        display: block;
    }

    .customize-container > .cc-setup-panel {
        order: 1;
    }

    .customize-container > .preview-column {
        order: 2;
    }

}

@media (min-width: 768px) {
    .customize-container > .preview-column {
        order: 1;
    }

    .customize-container > .cc-setup-panel {
        order: 2;
    }
}

@media (min-width: 1024px) {
    .customize-container {
        align-items: start;
    }

    .customize-container > .preview-column {
        grid-column: 1;
        grid-row: 1;
    }

    .customize-container > .cc-setup-panel {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }

    .preview-column > .cc-finishing-panel {
        display: grid;
        grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(110px, 1fr));
        gap: 1rem;
        padding: 1.25rem;
        width: 100%;
    }

    .preview-column > .cc-finishing-panel > .cc-page3-group {
        grid-column: 1;
        grid-row: span 2;
    }

    .preview-column > .cc-finishing-panel > .cc-extra-field {
        grid-column: span 1;
    }

    .preview-column > .cc-finishing-panel > #btn-create {
        grid-column: 3 / span 2;
        align-self: end;
        margin-top: auto;
    }

    .preview-column > .cc-finishing-panel > #create-status {
        grid-column: 1 / -1;
        margin: 0;
    }

    .preview-column > .cc-finishing-panel .form-input,
    .preview-column > .cc-finishing-panel .form-textarea,
    .preview-column > .cc-finishing-panel .cc-preset-picker {
        margin-bottom: 0;
    }

    .preview-column > .cc-finishing-panel .form-textarea {
        min-height: 74px;
    }
}

@media (max-width: 600px) {
    .cc-corner { font-size: 1.1em; }
    .cc-scatter-item { font-size: 0.8em; }

    .cc-preset-toggle {
        min-height: 40px;
        padding: 0.58rem 0.75rem;
        font-size: 0.82rem;
    }

    .cc-preset-options {
        position: static;
        max-height: 62vh;
        border-radius: 10px;
        margin-top: 0.35rem;
    }

    .cc-preset-heading {
        padding: 0.7rem 0.75rem 0.25rem;
        font-size: 0.7rem;
    }

    .cc-preset-option {
        grid-template-columns: minmax(0, 1fr) 1rem;
        min-height: 38px;
        padding: 0.58rem 0.75rem;
        font-size: 0.78rem;
        line-height: 1.28;
    }

    .cc-preset-radio {
        width: 0.95rem;
        height: 0.95rem;
    }

    .cc-page-front .cc-photo-frame {
        width: 60%;
        max-width: 200px;
    }
}