/* ------------------------------
   LENSBOOTH DESIGN SYSTEM
   Unified Global Variables & Reset
   ------------------------------ */

:root {
    /* Brand Colors */
    --primary: #F12850;
    --primary-light: rgba(241, 40, 80, 0.08);
    --primary-medium: rgba(241, 40, 80, 0.15);
    --black: #000000;
    --white: #FFFFFF;
    --bg: #F4F4F0;
    --gray-dark: #797979;
    --gray-medium: #E5E1DC;
    --gray-light: rgba(0, 0, 0, 0.04);
    --border: rgba(0, 0, 0, 0.08);

    /* Typography */
    --font-main: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-logo: 'Satoshi', var(--font-main);
    --font-accent: 'Caveat', cursive;

    /* Transitions */
    --ease-premium: cubic-bezier(0.23, 1, 0.32, 1);
    --transition-main: 0.4s var(--ease-premium);
    
    /* Layout */
    --header-height: calc(64px + env(safe-area-inset-top, 0px));
    --safe-x: max(20px, env(safe-area-inset-left, 20px), env(safe-area-inset-right, 20px));
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* - CSS RESET & BASE STYLES - */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

button, a, input, select, textarea, [role="button"],
.filter, .layout, .zoom-btn, .share-app-btn, .copy-btn,
.retake-btn, #capture-btn, #retake-btn, #copyBtn, #join-btn-trigger {
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0;
    overflow-x: clip !important;
    position: relative !important;
    background-color: var(--bg);
    background-image:
        linear-gradient(var(--gray-light) 1px, transparent 1px),
        linear-gradient(90deg, var(--gray-light) 1px, transparent 1px);
    background-size: 32px 32px;
    font-family: var(--font-main);
    color: var(--black);
    box-sizing: border-box !important;
}

input, textarea {
    -webkit-user-select: auto !important;
    user-select: auto !important;
}

main {
    flex: 1 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}

footer, .site-footer {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}

/* Global image sharpness */
img, video, canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg);
}
::-webkit-scrollbar-thumb {
    background: #D1D1CB;
    border-radius: 10px;
    border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
    background: #B1B1AB;
}

/* Skip to content link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: white;
    padding: 8px;
    z-index: 100000;
    transition: top 0.3s;
    text-decoration: none;
    font-weight: 700;
}
.skip-link:focus {
    top: 0;
}

/* Unified Logo Styles */
.app-logo, .footer-logo, .mobile-logo, .output-logo-center {
    font-family: var(--font-logo);
    font-weight: 700;
    text-decoration: none;
    color: var(--black);
}
.app-logo .lens, .footer-logo .lens, .mobile-logo .lens, .output-logo-center .lens {
    color: var(--primary) !important;
}

/* - Mobile Thumbnail Styles - */
@media (max-width: 767px) {
    .strip-preview-mobile {
        display: flex !important;
        flex-direction: row;
        gap: 8px;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-bottom: 15px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .strip-preview-mobile img {
        width: 48px !important;
        height: 48px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
        border: 2px solid #fff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        animation: thumbAppear 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
    }
    @keyframes thumbAppear {
        from { opacity: 0; transform: scale(0.5) translateY(10px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
    }
}

/* - Ultra-Narrow Device Compliance (iPhone SE, etc.) - */
@media (max-width: 360px) {
    :root {
        --safe-x: 12px;
    }
    .share-card {
        padding: 12px 14px !important;
    }
    .share-title {
        font-size: 13px !important;
    }
    #copyBtn {
        padding: 0 12px !important;
        font-size: 12px !important;
    }
    #boothLink {
        font-size: 11px !important;
        padding: 8px 10px !important;
    }
}

/* - Safari iPad Tablet Viewport Safety - */
@media (min-width: 768px) and (max-width: 1024px) {
    html,
    body,
    main,
    #main-content,
    #landing-screen,
    .page-content-wrap,
    .about-hero-wrap,
    .site-footer {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-x: clip !important;
    }
}

/* Custom styling for CTA enter icon to ensure uniform spacing */
.cta-icon-enter {
    width: 1.1em !important;
    height: 1.1em !important;
    vertical-align: -0.15em !important;
    margin-right: 8px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Ensure uniform spacing without double gaps in flex buttons */
.mobile-cta,
.nav-cta,
.btn-main:not(.capture-btn),
.about-cta-btn,
.mobile-menu-cta a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}