/* LTR mirror (sd-i18n/ltr.php) */
/* ═══════════════════════════════════════════════════════════════════
   Customizer — Mobile Full-Screen App Mode
   ─────────────────────────────────────────────────────────────────
   Applies to ALL customizer overlays so they feel like a native app
   on mobile: viewport-filling, no rounded edges, sticky action bar,
   safe-area aware, scroll-locked body.

   Targets:
     • .sd-customizer-overlay / .sd-customizer-modal  (wallpaper crop popup)
     • .sd-px / .sd-px__shell                          (perspex customizer)
     • .sd-cd-customizer / .sd-cd-upload-screen /
       .sd-cd-text-input / .sd-cd-sticker-types        (custom-design wizard)
     • .sd-ps                                          (photo sticker page)
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* Lock the body when any customizer overlay is open. Different
       customizers signal "open" with different classes — handle all. */
    body.sd-px-locked,
    body.sd-cust-open,
    body.sd-customizer-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* ══════════════════════════════════════════════════════════════
       1. Wallpaper crop popup (.sd-customizer-overlay + .sd-customizer-modal)
       ══════════════════════════════════════════════════════════════ */
    .sd-customizer-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        background: #fff !important;        /* not transparent — full screen */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .sd-customizer-modal {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;          /* dynamic viewport — accounts for iOS toolbar */
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        grid-template-rows: auto 1fr auto !important;
        animation: none !important;
    }
    /* Hide the decorative "התאמה אישית" pseudo-element label on mobile
       (we'll show the product name in the header instead). */
    .sd-customizer-modal::after { display: none !important; }
    .sd-customizer-modal::before {
        height: 56px !important;
        background: #fff;
    }
    .sd-customizer-modal__close,
    .sd-cust-v6-close {
        top: 10px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 10 !important;
    }
    /* Larger close icon on mobile (easier tap target) */
    .sd-customizer-modal__close svg,
    .sd-cust-v6-close svg {
        width: 20px !important;
        height: 20px !important;
    }
    /* Cropper canvas area — give it real estate; scroll body underneath */
    .sd-wall-preview {
        min-height: 42vh !important;
        max-height: 50vh !important;
        padding: 12px !important;
    }
    /* Inner panel scrolls between header and footer */
    .sd-customizer-panel {
        padding: 16px !important;
        gap: 14px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Sticky bottom action bar with safe-area inset */
    .sd-cust-action {
        position: sticky !important;
        bottom: 0;
        z-index: 5;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #ececec;
        background: #fff;
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }
    .sd-cust-action__btn {
        width: 100% !important;
        padding: 14px 18px !important;
        font-size: 16px !important;
        min-height: 50px;
    }

    /* ══════════════════════════════════════════════════════════════
       2. Perspex customizer (.sd-px / .sd-px__shell)
       ══════════════════════════════════════════════════════════════ */
    .sd-px__backdrop {
        background: #f8f6f3 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .sd-px__shell {
        inset: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .sd-px__header {
        padding: 10px 14px calc(10px + env(safe-area-inset-top)) !important;
        grid-template-columns: 1fr 44px !important;
    }
    .sd-px__title { grid-column: 1 !important; font-size: .9rem !important; }
    .sd-px__crumbs { grid-column: 1 !important; flex-wrap: wrap; row-gap: 4px; }
    .sd-px__close { grid-column: 2 !important; grid-row: 1 / span 2 !important; }
    .sd-px__body {
        grid-template-columns: 1fr !important;
        grid-template-rows: 38vh 1fr !important;
        overflow: hidden;
    }
    .sd-px__preview-col {
        padding: 12px !important;
        overflow: hidden;
    }
    .sd-px__preview {
        min-height: 0 !important;
        max-height: 100% !important;
        aspect-ratio: 1 / 1;
    }
    .sd-px__steps {
        padding: 16px 14px calc(120px + env(safe-area-inset-bottom)) !important;
        border-left: none !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sd-px__bar {
        position: fixed !important;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #ebe7e0;
        background: #fff;
        z-index: 50;
        flex-wrap: nowrap;
        gap: 10px !important;
    }
    .sd-px__bar-cta {
        padding: 12px 16px !important;
        font-size: .9rem !important;
        min-height: 48px;
    }
    .sd-px-sizes {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .sd-px-size { padding: 10px 8px 9px !important; }
    .sd-px-size__dim { font-size: .95rem !important; }
    .sd-px-pin-opt { padding: 10px 6px 8px !important; }
    .sd-px-pin-opt__sw { width: 32px !important; height: 32px !important; }

    /* ══════════════════════════════════════════════════════════════
       3. Custom-design wizard (.sd-cd-* screens, when visible)
       The wizard hijacks the entire .sd-cd-page-v2 — when any of its
       inner screens is shown, we make THAT screen full-screen.
       ══════════════════════════════════════════════════════════════ */
    .sd-cd-page-v2 .sd-cd-customizer:not([style*="display:none"]),
    .sd-cd-page-v2 .sd-cd-upload-screen:not([style*="display:none"]),
    .sd-cd-page-v2 .sd-cd-sticker-types:not([style*="display:none"]),
    .sd-cd-page-v2 .sd-cd-text-input:not([style*="display:none"]) {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 9998;
        background: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
    /* Back button — make it a sticky top-left chip */
    .sd-cd-page-v2 .sd-cd-customizer__back,
    .sd-cd-page-v2 .sd-cd-upload-screen__back,
    .sd-cd-page-v2 .sd-cd-sticker-types__back,
    .sd-cd-page-v2 .sd-cd-text-input__back {
        position: sticky !important;
        top: calc(8px + env(safe-area-inset-top)) !important;
        margin: 8px !important;
        padding: 9px 14px !important;
        background: rgba(255,255,255,.95);
        border: 1px solid #e8e4dc;
        border-radius: 999px;
        backdrop-filter: blur(4px);
        z-index: 5;
        align-self: flex-start;
        width: max-content;
    }
    /* The customizer (image based) becomes single-column with sticky CTA */
    .sd-cd-page-v2 .sd-cd-customizer {
        flex-direction: column !important;
        background: #fff !important;
    }
    .sd-cd-page-v2 .sd-cd-customizer__preview {
        flex: 0 0 auto !important;
        height: 42vh;
        min-height: 280px;
        padding: 12px !important;
    }
    .sd-cd-page-v2 .sd-cd-customizer__controls {
        width: 100% !important;
        max-height: none !important;
        padding: 16px 14px calc(96px + env(safe-area-inset-bottom)) 14px !important;
        position: static !important;
        overflow: visible !important;
    }
    /* Sticky add-to-cart bar inside the customizer */
    .sd-cd-page-v2 .sd-cd-customizer__cta-bar,
    .sd-cd-page-v2 #sdAddToCart {
        position: fixed !important;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
        background: #fff;
        border-top: 1px solid #ececec;
        z-index: 50;
        width: 100% !important;
        border-radius: 0 !important;
        min-height: 56px;
        font-size: 16px !important;
    }

    /* ══════════════════════════════════════════════════════════════
       4. Photo sticker (.sd-ps) — already a page, not a modal.
       Mobile tweaks: tighter spacing, sticky CTA, larger tap targets.
       ══════════════════════════════════════════════════════════════ */
    .sd-ps-section { padding: 1.6rem 0 !important; }
    .sd-ps-config {
        margin: 0 !important;
        border-radius: 0 !important;
        border-right: none !important;
        border-left: none !important;
    }
    .sd-ps-config__title { font-size: 1rem !important; }
    /* Make footer "add to cart" sticky on mobile, mirroring the other customizers */
    .sd-ps-added-actions,
    .sd-ps-cta-row {
        position: sticky !important;
        bottom: 0;
        background: #fff;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #ececec;
        z-index: 40;
        margin: 0 -14px;
    }

    /* ══════════════════════════════════════════════════════════════
       Shared niceties for all customizers on mobile
       ══════════════════════════════════════════════════════════════ */
    /* Tap-friendly form controls */
    .sd-customizer-modal input[type="number"],
    .sd-customizer-modal input[type="text"],
    .sd-px input[type="text"],
    .sd-px input[type="file"],
    .sd-cd-page-v2 input[type="number"],
    .sd-cd-page-v2 input[type="text"] {
        font-size: 16px !important; /* prevents iOS Safari zoom-on-focus */
        min-height: 44px;
    }
    /* Buttons get at least 44px tap target (Apple/Google guidelines) */
    .sd-customizer-modal button,
    .sd-px button,
    .sd-cd-page-v2 .sd-cd-customizer button {
        min-height: 36px;
    }
    /* Smooth scroll inside modals */
    .sd-customizer-modal *,
    .sd-px__shell *,
    .sd-cd-customizer * {
        -webkit-tap-highlight-color: rgba(0,0,0,.05);
    }
}

/* ───────────────────────────────────────────────────────────────────
   Smaller phones (≤420px): tighten further
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
    .sd-px__title { font-size: .82rem !important; }
    .sd-px__crumb { padding: 3px 8px !important; font-size: .7rem !important; }
    .sd-px-orient__btn { padding: 7px 8px !important; font-size: .78rem !important; }
    .sd-px__bar-summary { font-size: .75rem !important; }
    .sd-px__bar-price strong { font-size: 1.2rem !important; }
    .sd-px-sizes { gap: 6px !important; }
    .sd-px-size__dim { font-size: .88rem !important; }
    .sd-px-size__price { font-size: .82rem !important; }
}