:root{--bg:#0b1220;--surface:#0f1724;--muted:#9fb0c2;--accent:#1d9a6a}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:var(--bg);color:#e6eef6}
.wrap{max-width:1180px;margin:20px auto;padding:0 18px}
.top{padding:28px 0;text-align:center}
.top h1{margin:0;font-size:clamp(1.4rem,3.8vw,2.6rem)}
.subtitle{margin:6px 0 0;color:var(--muted)}
.stats{margin-top:12px;color:var(--muted);font-size:0.95rem}
.controls{display:flex;flex-direction:column;gap:12px;padding:12px 0}
.search{display:flex;gap:8px}
/* Responsive adjustments for phones */
@media (max-width: 640px) {
	.wrap{padding:0 12px}
	.controls{gap:6px;padding-top:8px}
	/* Keep search and clear on one row on phones */
	.search{display:flex;flex-direction:row;gap:8px}
	.search input{flex:1;min-width:0;padding:10px}
	.search button{flex:0 0 auto}

	/* Stack filter groups but keep their internal buttons compact */
	.filters{display:flex;flex-direction:column;gap:8px;align-items:stretch}
	.filters .access{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
	.filters .qualities{display:flex;gap:6px;flex-wrap:wrap}

	/* Make dropdowns stack full-width on mobile (one column) */
	.dropdowns{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
	.dropdowns select{width:100%;box-sizing:border-box}

	.gallery{grid-template-columns:repeat(2,1fr);gap:12px}
	.thumb{aspect-ratio:9/16}
	.modal-panel{max-width:95vw;padding:12px}
	body{overflow-x:hidden}

	/* Reduce vertical gap after stats */
	.stats{margin-top:6px}

	/* Ensure quality buttons never stretch on mobile */
	.filters .qualities{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}
	.filters .qualities button{flex:0 0 auto;width:auto;min-width:0}

	/* Ensure selects use consistent height and padding at mobile sizes */
	select#creator, select#resolution, select#sort{
		font-size:14px;
		line-height:1.2;
		height:40px;
		min-height:40px;
		padding-left:12px;
		padding-right:32px; /* reserve native arrow */
		box-sizing:border-box;
		background:#07101a;
		border-radius:8px;
		border:1px solid rgba(255,255,255,0.04);
		color:inherit;
	}
}

@media (max-width: 380px) {
	.gallery{grid-template-columns:repeat(1,1fr)}
	.dropdowns select{max-width:100%}
}
.search input{flex:1;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:#07101a;color:inherit}
.search button{padding:10px 12px;border-radius:8px;border:none;background:var(--accent);color:#07101a}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.filters .access button,.filters .qualities button{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted);cursor:pointer}
.filters .access button.active,.filters .qualities button.active{background:linear-gradient(90deg,var(--accent),#2fbf9a);color:#07101a;border:none}
.dropdowns select{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:#07101a;color:inherit}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:18px}
.card{background:var(--surface);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column}
.thumb{width:100%;aspect-ratio:9/16;background:#031018;display:flex;align-items:center;justify-content:center;color:var(--muted);position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:10px;display:flex;flex-direction:column;gap:6px}
.meta{display:flex;justify-content:space-between;align-items:center;font-size:0.9rem;color:var(--muted)}
.title{font-weight:600}
.actions{display:flex;gap:8px;margin-top:8px}
.btn{padding:8px 10px;border-radius:8px;border:none;cursor:pointer}
.btn.primary{background:var(--accent);color:#07101a}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.small{font-size:0.85rem;color:var(--muted)}
.modal{position:fixed;inset:0;background:rgba(2,6,12,0.6);display:grid;place-items:center;padding:20px}
.modal-panel{background:var(--surface);border-radius:12px;max-width:980px;width:100%;max-height:90vh;overflow:auto;padding:16px}
.modal-close{position:absolute;right:18px;top:12px;border:none;background:transparent;color:#fff;font-size:22px}
.modal-video{width:100%;height:auto;background:#000}
@media (min-width:1200px){.gallery{grid-template-columns:repeat(5,1fr)}}

/* Targeted fix: ensure modal stays hidden when `hidden` attribute is present
	 and tighten mobile layout for quality filters so they wrap into two rows. */
@media (max-width: 640px) {
	.modal[hidden]{display:none !important}

	.filters .qualities{display:flex;flex-wrap:wrap;gap:6px}
	.filters .qualities button{flex:0 1 auto;min-width:0}
	/* Push the 5th+ quality buttons to a second row and keep them side-by-side */
	.filters .qualities button:nth-child(n+5){flex:0 0 48%}
}

/* Mobile-only: enforce strict 3x2 grid and identical sizing for quality buttons */
@media (max-width: 640px) {
	.filters .qualities {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		width: 100%;
		align-items: stretch;
	}

	.filters .qualities button {
		width: 100% !important;
		min-width: 0 !important;
		height: 40px !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		text-align: center !important;
		padding: 0 12px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		border-radius: 8px !important;
		font-size: 14px !important;
	}
}

/* ==========================================================
   PRODUCTION FIX:
   HTML hidden attribute must override modal display rules.
   Prevents invisible modal backdrop from covering storefront.
   ========================================================== */

[hidden] {
    display: none !important;
}

.modal[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.modal:not([hidden]) {
    visibility: visible;
    pointer-events: auto;
}


/* ==========================================================
   PRODUCTION PREVIEW PLAYER
   Keep video dimensions stable while frames are decoding.
   ========================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-panel {
    position: relative;
    width: min(92vw, 900px);
    height: min(92vh, 900px);
    max-width: 900px;
    max-height: 900px;
    overflow: auto;
    background: var(--surface);
    padding: 14px;
    border-radius: 10px;
}

#modalContent {
    width: 100%;
}

#modalContent video {
    display: block !important;
    width: 100% !important;
    height: calc(min(92vh, 900px) - 75px) !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000;
}

/* hidden MUST override .modal display:flex */
.modal[hidden],
[hidden] {
    display: none !important;
}


/* ==========================================================
   MFIT WALLPAPER SHOPPING CART
   ========================================================== */

#mfitCartButton {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 8000;
    border: 0;
    border-radius: 10px;
    padding: 14px 20px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    background: #20b47e;
    color: #04120d;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
}

#mfitCartOverlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mfit-cart-panel {
    width: min(92vw, 620px);
    max-height: 88vh;
    overflow-y: auto;
    background: #101a2a;
    color: #e6eef6;
    border: 1px solid #26364a;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.mfit-cart-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}

.mfit-cart-heading h2 {
    margin: 0;
}

.mfit-cart-close {
    font-size: 28px;
    background: transparent;
    border: 0;
    color: #e6eef6;
    cursor: pointer;
}

.mfit-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #26364a;
    padding: 14px 0;
}

.mfit-cart-row button,
.mfit-cart-actions button {
    cursor: pointer;
    border: 1px solid #31435a;
    border-radius: 8px;
    padding: 10px 14px;
    background: #152236;
    color: #e6eef6;
}

.mfit-cart-total {
    text-align: right;
    font-size: 20px;
    font-weight: 700;
    padding: 20px 0;
}

.mfit-cart-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.mfit-cart-actions .mfit-checkout-button {
    background: #20b47e;
    color: #04120d;
    border-color: #20b47e;
    font-weight: 700;
}

@media(max-width:640px) {
    #mfitCartButton {
        right: 12px;
        bottom: 12px;
    }

    .mfit-cart-actions {
        flex-direction: column;
    }

    .mfit-cart-actions button {
        width: 100%;
    }
}

/* MFIT Android touch/dropdown correction */
.download-app {
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.controls,
.filters,
.dropdowns {
    position: relative !important;
    z-index: 20 !important;
}

.dropdowns select {
    position: relative !important;
    z-index: 21 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

#downloadApp {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* MFIT final Android APK/dropdown isolation */
.download-app {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    pointer-events: none !important;
}

#downloadApp {
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    margin: 0 auto 6px !important;
    padding: 0 18px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

.download-app .small {
    display: block !important;
    position: static !important;
    pointer-events: none !important;
}

.controls,
.filters,
.dropdowns {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

.dropdowns select {
    position: relative !important;
    z-index: 101 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

/* MOBILE-ONLY COMPACT FIX — max-width:600px
   - Hide the yellow top badge and the two intro paragraphs above the
     dark signup box. Keep the dark signup box visible and reduce
     padding/margins for a compact mobile layout.
   - This block only affects screens <=600px and does not change JS,
     form IDs, or desktop styles. */
@media (max-width: 600px) {
    /* Outer promo section spacing */
    .download-app > section[style] {
        padding: 15px !important;
        margin: 12px auto !important;
        max-width: 100% !important;
        border-radius: 12px !important;
    }

    /* Hide the yellow badge (first inline div inside the promo section) */
    .download-app > section[style] > div:first-child {
        display: none !important;
    }

    /* Hide the two intro paragraphs (they use inline font-size styles) */
    .download-app > section[style] > p[style*="font-size:19px"],
    .download-app > section[style] > p[style*="font-size:21px"] {
        display: none !important;
    }

    /* Tighten and preserve the dark signup box layout */
    #google-play-testers {
        margin: 10px auto !important;
        padding: 16px !important;
        border-radius: 12px !important;
        max-width: 100% !important;
    }

    /* Make email input full-width on phones */
    #google-play-testers input[type="email"] {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 14px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        max-width: 100% !important;
    }

    /* Ensure consent area is compact but readable */
    #google-play-testers div[style] {
        margin: 10px 0 12px !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Make the submit button full width and phone-friendly */
    #mfit-tester-form button[type="submit"] {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        margin-top: 8px !important;
    }

    /* Reduce vertical gaps inside the signup form */
    #google-play-testers h2 { margin: 0 0 8px 0 !important; font-size:18px !important; }
    #google-play-testers p { margin: 6px 0 !important; }
    #mfit-tester-status { margin-top:10px !important; }

    /* Reduce privacy statement margin if it causes excessive height */
    .download-app > section[style] p[style*="font-size:13px"] {
        margin: 8px 0 0 !important;
        font-size: 13px !important;
        opacity: .9 !important;
    }

    /* Ensure the form elements wrap and fit on narrow phones */
    #mfit-tester-form { display:block !important; width:100% !important; }
    #mfit-tester-form input, #mfit-tester-form button { display:block !important; }
}

/* STRONG MOBILE COMPACT OVERRIDES (max-width:600px)
   Override any remaining rules (including inline styles) that force
   the tester promo area to be tall. These are intentionally specific
   and use !important so desktop remains unaffected. */
@media (max-width: 600px) {
    /* Reduce header/top spacing that contributes to overall height */
    header.top { padding: 8px 0 !important; }
    header.top .wrap { padding: 0 12px !important; margin: 8px auto !important; }

    /* Outer promo container (inline-styled element) */
    .download-app > section[style] {
        padding: 10px !important;
        margin: 10px !important;
        min-height: 0 !important;
        height: auto !important;
        box-shadow: none !important;
        border-radius: 10px !important;
        border-width: 1px !important;
        max-width: 100% !important;
    }

    /* Remove the yellow badge and any duplicate small headings */
    .download-app > section[style] > div:first-child { display: none !important; }

    /* Hide the two large introductory paragraphs above the dark signup box */
    .download-app > section[style] > p[style*="font-size:19px"],
    .download-app > section[style] > p[style*="font-size:21px"] {
        display: none !important;
    }

    /* Hide bottom privacy disclaimer if present */
    .download-app > section[style] p[style*="font-size:13px"] { display: none !important; }

    /* Compact the dark signup card itself */
    #google-play-testers {
        margin: 0 !important;
        padding: 12px !important;
        min-height: 0 !important;
        height: auto !important;
        max-width: 100% !important;
        border-radius: 8px !important;
    }

    /* Heading and short description sizing */
    #google-play-testers h2 {
        margin: 0 0 8px 0 !important;
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    /* Keep a single concise description visible and compact */
    #google-play-testers p {
        margin: 0 0 10px !important;
        font-size: 13.5px !important;
        line-height: 1.3 !important;
        max-height: 3.6em !important; /* prevent long multi-line descriptions */
        overflow: hidden !important;
    }

    /* Email input and button: full-width phone-friendly sizes */
    #google-play-testers input[type="email"] {
        width: 100% !important;
        height: 44px !important;
        margin: 0 0 10px !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    /* Consent row compact styling */
    #google-play-testers label {
        display: block !important;
        margin: 0 0 10px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    /* Full-width submit button */
    #mfit-tester-form button[type="submit"] {
        width: 100% !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 10px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Remove any large gaps inside the form and its parents */
    #mfit-tester-form { margin: 0 !important; padding: 0 !important; }
    .download-app, .download-app > section[style], header.top, .wrap { min-height: 0 !important; }
}

/* MFIT TESTER FORM INTERACTION FIX
   download-app intentionally disables pointer events.
   Restore them ONLY for the tester signup area. */
#google-play-testers,
#mfit-tester-form,
#mfit-tester-form input,
#mfit-tester-form label,
#mfit-tester-form button,
#mfit-tester-form #mfit-tester-status {
    pointer-events: auto !important;
}

#google-play-testers,
#mfit-tester-form {
    position: relative !important;
    z-index: 200 !important;
}

#mfit-tester-email {
    touch-action: manipulation !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

#mfit-tester-consent,
#mfit-tester-form button[type="submit"] {
    touch-action: manipulation !important;
}