/**
 * card-viewer.css — Flipbook + PostcardViewer styles
 */

/* ── Shared viewer wrapper ──────────────────────────────────── */
.card-viewer-wrapper {
    min-height: clamp(580px, 72vh, 900px);
    max-height: 88vh;
    overflow: hidden;
    perspective: 2000px;
    width: 100%;
    background: linear-gradient(180deg, rgba(255,252,249,.96) 0%, rgba(247,235,241,.9) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 16px;
    border: 1px solid rgba(222,187,176,.45);
    box-shadow: 0 18px 42px rgba(137,89,106,.14);
}

/* ── Perspective / 3D book structure ────────────────────────── */
.perspective-container {
    perspective: 2000px;
    width: 100%;
    flex-grow: 1;
    /* Avoid flex+abs layout reporting 0 height before first stable layout pass */
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    overflow: visible;
}

.book-stage {
    width: 460px;
    height: 620px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -310px;
    margin-left: -230px;
    transform-style: preserve-3d;
    /* Scale is driven by JS (autoScale); a transition here animates 1 → scale and looks like a “shrink” bug on mobile */
    transition: none;
    z-index: 20;
    cursor: pointer;
}

.book-spine {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left center;
}
.book-spine.spread    { transform: translateX(50%); }
.book-spine.view-back { transform: translateX(100%) rotateY(-180deg); }

.leaf-right-base {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    z-index: 0;
}
.leaf-right-base.z-index-fix { z-index: 20 !important; }
.book-spine.view-back .leaf-right-base { z-index: 20; }

.leaf-left-flip {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}
.leaf-left-flip.flipped { transform: rotateY(-180deg); }

/* ── Page faces ─────────────────────────────────────────────── */
.page-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px -1px rgba(0,0,0,.15), inset 0 0 20px rgba(0,0,0,.02);
    background: #fff;
}

.page-front      { border-radius: 0 8px 8px 0; z-index: 2; }
.page-back       { transform: rotateY(180deg); border-radius: 8px 0 0 8px; z-index: 1; }
.page-static     { border-radius: 0 8px 8px 0; z-index: 1; }
.page-back-cover { transform: rotateY(180deg); border-radius: 8px 0 0 8px; z-index: 0; }

/* Outer box: fixed inset inside page face; JS scales .viewer-message-inner to fit (no scroll). */
.viewer-message {
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 9%;
    right: 9%;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    color: #222;
    pointer-events: none;
    z-index: 10;
}

.viewer-message-inner {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: center;
    font-family: 'Varela Round', 'Quicksand', sans-serif;
    font-size: 1.75rem;
    line-height: 1.28;
    text-shadow: 0 1px 2px rgba(255,255,255,.85);
}

/* ── Portrait mode (toggled by JS via .portrait-mode class) ── */
.portrait-mode .perspective-container { perspective: none; }
.portrait-mode .book-stage           { transform-style: flat; }
.portrait-mode .book-spine,
.portrait-mode .book-spine.spread,
.portrait-mode .book-spine.view-back {
    transform: none !important;
    transition: none;
    transform-style: flat;
    position: absolute;
    inset: 0;
}
.portrait-mode .leaf-right-base,
.portrait-mode .leaf-left-flip,
.portrait-mode .leaf-left-flip.flipped {
    transform: none !important;
    transition: none;
    transform-style: flat;
    position: absolute;
    inset: 0;
}

/* ── Tab bar ────────────────────────────────────────────────── */
.mockup-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    background: rgba(255,248,244,.72);
    backdrop-filter: blur(20px);
    padding: 0.5rem;
    border-radius: 24px;
    box-shadow: 0 10px 28px rgba(125,73,92,.10), 0 4px 12px rgba(125,73,92,.07);
    border: 1px solid rgba(162,106,116,.12);
    z-index: 30;
    position: relative;
    flex-shrink: 0;
}

.viewer-tab {
    padding: 0.5rem 1.5rem;
    border-radius: 24px;
    font-weight: 700;
    font-size: 0.875rem;
    color: #999;
    transition: all 250ms;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.viewer-tab:hover { background: rgba(0,0,0,.05); }
.viewer-tab.active {
    background: linear-gradient(135deg, #e67e73, #d16a60);
    color: #fff;
    box-shadow: 0 4px 12px rgba(230,126,115,.35);
}

.viewer-hint {
    margin-top: 0.55rem;
    text-align: center;
    font-size: 0.78rem;
    color: #999;
}

.viewer-hint .hint-mobile { display: none; }
.viewer-hint .hint-desktop { display: inline; }

/* ── Postcard viewer ────────────────────────────────────────── */
.postcard-stage {
    width: 100%;
    height: 100%;
    position: relative;
    perspective: 1500px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.postcard-leaf {
    width: 550px;
    height: 400px;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1.2);
    cursor: pointer;
    left: 50%;
    top: 50%;
    margin-left: -275px;
    margin-top: -200px;
}

.postcard-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 40px rgba(125,73,92,.16), 0 6px 16px rgba(125,73,92,.10);
    border: 1px solid rgba(162,106,116,.12);
}

.postcard-face.front { transform: rotateY(0deg); z-index: 2; }
.postcard-face.front img { width: 100%; height: 100%; object-fit: cover; }
.postcard-face.back { transform: rotateY(180deg); z-index: 1; display: flex; }

.postcard-back-content {
    display: flex;
    width: 100%;
    height: 100%;
    font-family: 'Nunito', 'Quicksand', sans-serif;
    color: #1f2937;
}
.postcard-col-left {
    width: 65%;
    padding: 2rem;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}
.postcard-col-right {
    width: 35%;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.postcard-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #9ca3af;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.postcard-message-area {
    flex-grow: 1;
    font-family: 'Caveat', cursive;
    font-size: 1.5rem;
    line-height: 1.4;
    overflow-y: auto;
    color: #000;
    white-space: pre-wrap;
    text-align: left;
}
.postcard-stamp {
    width: 80px;
    height: 90px;
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    border: 2px dashed rgba(198,145,141,.24);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: auto;
    transform: rotate(2deg);
}
.postcard-address-lines { width: 100%; margin-top: 2rem; }
.address-line {
    border-bottom: 1px solid rgba(198,145,141,.24);
    min-height: 2rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-end;
    font-family: 'Caveat', cursive;
    font-size: 1.5rem;
    color: #000;
    padding-left: 0.5rem;
}

/* ── Mobile / tablet (flipbook portrait mode < 1024px) ───────── */
@media (max-width: 1023px) {
    .card-viewer-wrapper {
        min-height: clamp(440px, 62vh, 780px);
        max-height: 86vh;
    }
    /*
     * eCard mobile: JS adds .flipbook-mobile-fill — size the stage in-flow (no transform:scale).
     * Scaling a 460×620 box left a tiny card floating in a huge empty wrapper; this fills the width.
     */
    .card-viewer-wrapper.flipbook-mobile-fill {
        align-items: stretch;
        min-height: 0;
        max-height: none;
    }
    .card-viewer-wrapper.flipbook-mobile-fill .perspective-container {
        flex: 0 0 auto;
        width: 100%;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .card-viewer-wrapper.flipbook-mobile-fill .book-stage {
        position: relative;
        top: auto;
        left: auto;
        margin: 0 auto;
        width: 100%;
        max-width: min(520px, 100%);
        height: auto;
        aspect-ratio: 460 / 620;
        transform: none !important;
        transform-origin: center center;
    }

    /*
     * Mobile custom background visibility:
     * keep layout intact, just introduce a small inset frame when a custom
     * background image is active so it is visible around the viewer.
     */
    .card-viewer-wrapper.has-custom-bg {
        padding: 8px;
        background-origin: border-box;
        background-clip: padding-box;
    }
    .card-viewer-wrapper.has-custom-bg .perspective-container {
        border-radius: 10px;
        overflow: hidden;
    }
    .card-viewer-wrapper.has-custom-bg.flipbook-mobile-fill .book-stage {
        max-width: min(520px, calc(100% - 16px));
    }

    /*
     * eCards customise shell: .card-mockup-wrapper uses max-height: 80vh + overflow:hidden.
     * On wide-but-short tablet widths, width:100% + aspect-ratio made the stage taller than
     * the mockup, clipping card edges. Cap height and derive width from 460:620 so the full
     * face (and img object-fit:fill) stays inside the visible box.
     */
    .card-mockup-wrapper.type-ecard .card-viewer-wrapper.flipbook-mobile-fill .book-stage {
        width: min(100%, calc(min(66vh, 700px) * 460 / 620));
        max-width: min(520px, 100%);
        max-height: min(66vh, 700px);
        height: auto;
        aspect-ratio: 460 / 620;
    }

    /*
     * eCard mobile single-page mode (flipbook.js isMobile() < 1024):
     * JS toggles .portrait-visible on each .page-face. ecards.php relied on the same rules
     * in ecards.css; view.php / card.php only load card-viewer.css. Without display:none on
     * inactive faces, all pages stack and .page-front (z-index) stays on top — every tab
     * shows image 1. Must stay in sync with flipbook.js portrait branch.
     */
    .card-viewer-wrapper .perspective-container {
        perspective: none !important;
        touch-action: pan-y;
    }
    .card-viewer-wrapper .book-stage {
        transform-style: flat !important;
        touch-action: pan-y;
    }
    .card-viewer-wrapper .book-spine,
    .card-viewer-wrapper .book-spine.spread,
    .card-viewer-wrapper .book-spine.view-back {
        transform: none !important;
        transition: none !important;
        transform-style: flat !important;
        position: absolute !important;
        inset: 0 !important;
    }
    .card-viewer-wrapper .leaf-right-base,
    .card-viewer-wrapper .leaf-left-flip,
    .card-viewer-wrapper .leaf-left-flip.flipped {
        transform: none !important;
        transition: none !important;
        transform-style: flat !important;
        position: absolute !important;
        inset: 0 !important;
    }
    .card-viewer-wrapper .page-face {
        backface-visibility: visible !important;
        transform: none !important;
        border-radius: 8px !important;
        position: absolute !important;
        inset: 0 !important;
        display: none !important;
        transition: none !important;
    }
    .card-viewer-wrapper .page-face.portrait-visible {
        display: block !important;
    }

    /*
     * Page-turn animation for mobile portrait.
     * .page-animating is added by flipbook.js for outgoing + incoming faces.
     * Higher specificity wins over transition:none/transform:none in the base mobile rules.
     */
    .card-viewer-wrapper .page-face.page-animating {
        display: block !important;
        transition: transform 380ms cubic-bezier(0.22, 0.68, 0.35, 1.0),
                    opacity 350ms ease,
                    box-shadow 380ms ease !important;
        transform: var(--page-tf, none) !important;
        transform-origin: center center;
    }

    @media (prefers-reduced-motion: reduce) {
        .card-viewer-wrapper .page-face.page-animating {
            transition: opacity 150ms ease !important;
            transform: none !important;
        }
    }

    /*
     * Curl fold strip:
     * lightweight paper-edge illusion for swipe peel. JS sets width/gradient/shadow
     * via inline styles; transforms remain the only animated geometry for performance.
     */
    .curl-fold {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 22px;
        height: 100%;
        margin-left: -11px;
        pointer-events: none;
        z-index: 50;
        transform-origin: center center;
        background: linear-gradient(
            to right,
            rgba(0,0,0,0.18) 0%,
            rgba(255,255,255,0.24) 52%,
            rgba(0,0,0,0.10) 100%
        );
        box-shadow: 0 0 14px rgba(0,0,0,0.16);
        border-radius: 2px;
        will-change: transform, left, opacity, width;
        transition: opacity 60ms linear;
    }

    .mockup-controls { gap: 0.2rem; padding: 0.3rem; }
    .viewer-tab { padding: 0.4rem 0.6rem; font-size: 0.75rem; }
    .viewer-hint {
        margin-top: 0.7rem;
        padding: 0.36rem 0.72rem;
        border-radius: 999px;
        background: rgba(230, 126, 115, 0.14);
        border: 1px solid rgba(230, 126, 115, 0.28);
        color: #b4534d;
        font-weight: 700;
        font-size: 0.82rem;
        letter-spacing: 0.01em;
    }
    .viewer-hint .hint-mobile { display: inline; }
    .viewer-hint .hint-desktop { display: none; }
}
@media (max-width: 768px) {
    .postcard-col-left  { padding: 1rem; width: 60%; }
    .postcard-col-right { padding: 1rem 0.5rem; width: 40%; }
    .postcard-message-area { font-size: 1.2rem; }
    .address-line { font-size: 1.2rem; }
    .postcard-stamp { width: 60px; height: 70px; }
}