/* Mobile-specific styles for Photobooth */
/* CLEAN VERSION - Only essential fixes */

/* Visibility helpers */
.mobile-only {
    display: none !important;
}

.desktop-only {
    display: inline;
}

@media (max-width: 768px), (pointer: coarse) {
    .mobile-only {
        display: inline !important;
    }
    
    .desktop-only {
        display: none !important;
    }
}

/* Prevent zoom on double-tap */
@media (max-width: 768px), (pointer: coarse) {
    html, body {
        touch-action: manipulation;
        -ms-touch-action: manipulation;
    }
}

/* Base body tweaks for mobile */
@media (max-width: 768px), (pointer: coarse) {
    body {
        overscroll-behavior-y: contain;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        background: #05000b;
    }
    
    canvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Tap-friendly buttons */
@media (max-width: 768px), (pointer: coarse) {
    button, .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 18px;
        font-size: 16px;
        -webkit-tap-highlight-color: rgba(255, 119, 51, 0.3);
    }
}

/* Idle screen tweaks */
@media (max-width: 768px), (pointer: coarse) {
    #idle-screen {
        padding: 0;
    }

    .start-text {
        font-size: 24px;
        padding: 10px 18px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 20px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        /* FIX: allow wrapping so text isn’t cut */
        white-space: normal;
        max-width: calc(100% - 40px);
        box-sizing: border-box;
    }
}

/* Countdown tweaks */
@media (max-width: 768px), (pointer: coarse) {
    #countdown-overlay {
        padding: 10px;
    }

    #countdown-number {
        font-size: 120px;
        margin-bottom: 10px;
    }

    .countdown-hint {
        font-size: 20px;
    }
}

/* Preview overlay "TAP / SCREEN" text */
@media (max-width: 768px), (pointer: coarse) {
    .preview-text p {
        font-size: 26px;
        letter-spacing: 3px;
        margin: 2px 0;
    }
}

/* QR screen - scrollable */
@media (max-width: 768px), (pointer: coarse) {
    #qr-screen {
        padding: 18px;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #qr-content-layer {
        padding: 10px;
        padding-top: calc(80px + env(safe-area-inset-top));
        min-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .qr-frame-container {
        width: min(80vw, 80vh);
        height: min(80vw, 80vh);
    }

    .qr-hint p {
        font-size: 18px;
    }

    .qr-hint .qr-back-hint {
        display: none;
    }

    /* Mobile QR link - larger tap target, better feedback */
    .qr-clickable-link {
        -webkit-tap-highlight-color: rgba(255, 119, 51, 0.3);
        min-width: 44px;
        min-height: 44px;
    }

    .qr-clickable-link:active {
        transform: scale(0.95);
    }

    /* Ensure QR image is still visible and centered on mobile */
    .qr-clickable-link #qr-image {
        pointer-events: none; /* Let clicks pass through to the link */
    }
}

/* ========================================
   SETTINGS PANEL - MOBILE FIX
   ======================================== */
@media (max-width: 768px), (pointer: coarse) {
    #settings-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        transform: none !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: none !important;
        border-width: 0 !important;
        border-radius: 0 !important;
    }

    #settings-inner {
        padding: 16px;
        padding-top: calc(80px + env(safe-area-inset-top));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        min-height: 100%;
        box-sizing: border-box;
    }

    /* HIDE THE STRIP PREVIEW ON MOBILE */
    .settings-right,
    .preview-container,
    #strip-preview {
        display: none !important;
    }

    /* Hide desktop close button - use back button instead */
    #settings-close,
    #settings-return-btn {
        display: none !important;
    }
        /* Use full width on mobile (no side black bars) */
    .settings-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 12px 24px !important;
        box-sizing: border-box;
        gap: 20px;
    }

    
    /* Make settings single column */
    .settings-columns {
        flex-direction: column !important;
        gap: 14px;
    }
    
    .settings-column,
    .settings-left {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Adjust text sizes */
    .settings-header h2 {
        font-size: 24px;
    }

    .settings-header p {
        font-size: 14px;
    }

    .settings-group-title {
        font-size: 18px;
    }

    .settings-grid-2,
    .settings-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Strip selector screen - scrollable */
@media (max-width: 768px), (pointer: coarse) {
    #strip-selector-screen {
        background: linear-gradient(135deg, 
            rgba(245, 113, 138, 0.3) 0%, 
            rgba(138, 61, 212, 0.3) 50%, 
            rgba(104, 172, 163, 0.3) 100%);
        z-index: 10;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #strip-selector-content-layer {
        position: relative;
        transform-origin: center center;
        transform: var(--pb-cal, none);
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 16px;
        padding-top: calc(90px + env(safe-area-inset-top));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        min-height: 100%;
    }

    .strip-selector-title {
        margin-bottom: 20px;
        font-size: 24px;
    }

    .strip-selector-options,
    .strip-options {
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 400px;
    }

    .strip-selector-option,
    .strip-option {
        width: 100%;
        padding: 14px;
    }

    .strip-option-preview {
        height: 200px;
    }

    .strip-selector-hint {
        font-size: 16px;
        margin-top: 14px;
    }
}

/* Final strip screen – scrollable */
@media (max-width: 768px), (pointer: coarse) {
    #final-strip-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        padding: 20px;
        padding-top: calc(80px + env(safe-area-inset-top));
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    #final-strip-img {
        max-width: 100%;
        height: auto;
        margin-bottom: 20px;
        object-fit: contain;
    }
}


/* Hide desktop buttons on mobile */
@media (max-width: 768px), (pointer: coarse) {
    #settings-btn,
    #qr-btn,
    #strip-btn {
        display: none !important;
    }
}

/* ========================================
   MOBILE MENU
   ======================================== */
@media (max-width: 768px), (pointer: coarse) {
    #mobile-menu-toggle {
        /* Styles set in JS for easier control */
    }

    #mobile-menu {
        position: fixed;
        top: calc(65px + env(safe-area-inset-top));
        right: 10px;
        min-width: 180px;
        background: rgba(15, 3, 28, 0.96);
        border-radius: 20px;
        border: 2px solid rgba(245, 113, 138, 0.8);
        box-shadow:
            0 0 20px rgba(0,0,0,0.8),
            0 0 25px rgba(245,113,138,0.7);
        padding: 10px;
        z-index: 20000;
        display: none;
        flex-direction: column;
        gap: 8px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    #mobile-menu.open {
        display: flex;
    }

    .mobile-menu-btn {
        width: 100%;
        padding: 10px 14px;
        border-radius: 14px;
        border: none;
        background: radial-gradient(circle at 30% 0%, rgba(255,255,255,0.15), rgba(102,51,153,0.95));
        color: #fff;
        font-size: 15px;
        text-align: left;
        cursor: pointer;
    }

    .mobile-menu-btn span {
        opacity: 0.8;
        font-size: 12px;
        display: block;
        margin-top: 2px;
    }
}

/* Mobile back button */
@media (max-width: 768px), (pointer: coarse) {
    #mobile-back-btn {
        /* Styles set in JS */
        -webkit-tap-highlight-color: rgba(255, 119, 51, 0.3);
    }
}
/* FIX – Settings Options on Mobile */
@media (max-width: 768px), (pointer: coarse) {
    #settings-panel .option-list > div,
    #settings-panel .option-grid > div {
        width: calc(100% - 32px) !important;
        margin: 8px auto !important;
        border-radius: 14px;
        padding: 18px 16px !important;
        box-sizing: border-box;
    }

    #settings-panel h2 {
        padding-left: 12px;
    }

    /* Highlight selection but adapted to mobile */
    .option-selected {
        border: 3px solid #4ade80 !important;
        box-shadow: 0 0 10px rgba(74,222,128,0.4) !important;
    }
}
/* SUPER-OVERRIDE: Settings cards on mobile */
@media (max-width: 768px), (pointer: coarse) {
    /* Smaller base text in the panel */
    #settings-panel .settings-content {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    #settings-panel .settings-left {
        padding: 16px 12px 24px !important;
        max-height: none !important;
    }

    /* Titles: "Display Mode", "Aspect Ratio", etc. */
    #settings-panel .settings-left h2 {
        font-size: 22px !important;
        margin: 16px 0 8px !important;
    }

    /* Vertical spacing between option groups */
    #settings-panel .option-list,
    #settings-panel .option-grid {
        gap: 8px !important;
        margin-bottom: 18px !important;
    }

    /* Each clickable row (Windowed / Fullscreen / 4:3 / 16:9 / Strip formats…) */
    #settings-panel .logo-option,
    #settings-panel .decoration-option,
    #settings-panel .calibrate-button,
    #settings-panel .settings-subbtn {
        width: 100% !important;
        max-width: 100% !important;
        margin: 6px 0 !important;
        padding: 10px 12px !important;

        font-size: 16px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    /* Text inside those rows */
    #settings-panel .logo-option span,
    #settings-panel .decoration-option span,
    #settings-panel .calibrate-text strong {
        font-size: 18px !important;
    }

    #settings-panel .calibrate-text small {
        font-size: 13px !important;
    }
    #settings-panel {
        align-items: flex-start !important;   /* no vertical centering */
        justify-content: center !important;   /* centered horizontally only */
    }


    #settings-panel .settings-content {
        margin-top: calc(60px + env(safe-area-inset-top)) !important;
        flex-direction: column !important;
    }

    /* Let the whole panel scroll, not a tiny inner column */
    #settings-panel .settings-left {
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
    }

}
/* Strip selector screen - scrollable + mobile-friendly cards */
@media (max-width: 768px), (pointer: coarse) {
    #strip-selector-screen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;

        background: linear-gradient(135deg, 
            rgba(245, 113, 138, 0.3) 0%, 
            rgba(138, 61, 212, 0.3) 50%, 
            rgba(104, 172, 163, 0.3) 100%);
        z-index: 10;

        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }


    #strip-selector-content-layer {
        position: relative;
        transform-origin: center center;
        transform: var(--pb-cal, none);
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 16px;
        padding-top: calc(90px + env(safe-area-inset-top));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        min-height: 100%;
    }

    .strip-selector-title {
        margin-bottom: 16px;
        font-size: 24px;
        text-align: center;
    }
    
    /* Make sure aspect selector is visible on mobile */
    .photo-aspect-selector {
        width: 100%;
        max-width: 400px;
        margin-bottom: 20px;
    }

    .strip-selector-options,
    .strip-options {
        flex-direction: column;
        gap: 18px;
        width: 100%;
        align-items: center;          /* centre les cartes */
    }

    /* Chaque carte (Strip / Postcard / Single) */
    .strip-selector-option,
    .strip-option {
        width: calc(100% - 48px);     /* marge horizontale confortable */
        max-width: 360px;             /* ne dépasse jamais trop */
        margin: 0 auto;
        padding: 12px 14px;
        border-radius: 14px;
        box-sizing: border-box;
        min-width: 0 !important;      /* écrase le min-width:280px desktop */
    }

    /* Empêche le zoom qui fait déborder sur les côtés */
    .strip-selector-option:hover,
    .strip-selector-option.focused {
        transform: none !important;
    }

    .strip-option-preview {
        width: 100% !important;
        max-width: 260px;
        height: 200px;                /* un peu plus compact que desktop */
        margin: 0 auto 12px;
    }

    .strip-selector-hint {
        font-size: 16px;
        margin-top: 14px;
        text-align: center;
    }
}
/* Strip preview: avoid cropping tall strip image on mobile */
@media (max-width: 768px), (pointer: coarse) {

    .strip-option-preview {
        width: 100% !important;
        max-width: 260px;
        height: 160px !important;      /* plus petit, pour tout faire rentrer */
        margin: 0 auto 12px !important;
        overflow: hidden;              /* ok, l'image sera shrinkée */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .strip-option-preview img {
        width: auto !important;
        height: 100% !important;       /* on cale la hauteur sur le cadre */
        max-width: none !important;
        max-height: none !important;
        object-fit: contain;           /* sécurité : pas de crop, juste du shrink */
    }

    .strip-option-label {
        font-size: 18px !important;
    }
}
@media (max-width: 768px), (pointer: coarse) {

    #strip-selector-content-layer {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-top: 120px !important;
        padding-bottom: 40px !important;
        justify-content: flex-start !important;
    }

    .photo-aspect-selector {
        margin-top: 0 !important;
    }
}