/* ==================================================================
   PremiumPNG - LIQUID GLASS THEMES (12)
   ------------------------------------------------------------------
   Shown in the odd hours of the visitor's clock (see the script in
   includes/header.php). A glass theme sits on top of a colour theme:

       <html data-theme="6" data-glass="4">

   so every layout, dark-frame and page rule of that colour theme
   still works; this file only changes the colours and adds the glass:
   a soft colour mesh behind the page, frosted navbar / search /
   menus / footer, see-through cards with a bright edge and liquid
   (gloss) buttons.

   Light on the phone: the moving mesh is one fixed layer, and only a
   few big parts use backdrop-filter. No animation for people who
   ask for reduced motion.
   ================================================================== */


/* ---------- 1. Palettes (tokens) ---------- */

/* 1 · SUNRISE GLASS (on 15) - peach, rose, honey */
html[data-theme][data-glass="1"] {
    --p: #e11d74; --ph: #be185d; --ink: #be185d;
    --btn-bg: linear-gradient(135deg, #fb7185, #e11d74 55%, #f59e0b);
    --btn-hover-bg: linear-gradient(135deg, #f43f5e, #be185d 55%, #d97706);
    --lg-base: #fff3ee;
    --lg-b1: #ffb199; --lg-b2: #ff7eb3; --lg-b3: #ffd56b; --lg-b4: #c3b1ff;
    --lg-tint: 255, 240, 236;
    --c1: #fb7185; --c2: #f59e0b; --c3: #e11d74; --c4: #a78bfa;
    --heading: #3b0d24; --text: #57334a; --muted: #8f6a7f;
    --focus: rgba(225, 29, 116, .2);
}

/* 2 · AQUA GLASS (on 3) - turquoise water */
html[data-theme][data-glass="2"] {
    --p: #0891b2; --ph: #0e7490; --ink: #0e7490;
    --btn-bg: linear-gradient(135deg, #22d3ee, #0891b2 55%, #0d9488);
    --btn-hover-bg: linear-gradient(135deg, #06b6d4, #0e7490 55%, #0f766e);
    --lg-base: #ecfdff;
    --lg-b1: #67e8f9; --lg-b2: #38bdf8; --lg-b3: #a5f3fc; --lg-b4: #5eead4;
    --lg-tint: 236, 254, 255;
    --c1: #06b6d4; --c2: #0ea5e9; --c3: #14b8a6; --c4: #3b82f6;
}

/* 3 · FOREST GLASS (on 4) - leaves and sunlight */
html[data-theme][data-glass="3"] {
    --p: #2f855a; --ph: #276749; --ink: #276749;
    --btn-bg: linear-gradient(135deg, #4ade80, #2f855a 55%, #65a30d);
    --btn-hover-bg: linear-gradient(135deg, #22c55e, #276749 55%, #4d7c0f);
    --lg-base: #f1f8ec;
    --lg-b1: #86efac; --lg-b2: #bef264; --lg-b3: #34d399; --lg-b4: #fde68a;
    --lg-tint: 241, 248, 236;
    --nav-bg: rgba(20, 38, 26, .62); --logo-bg: rgba(47, 133, 90, .85);
    --c1: #2f855a; --c2: #65a30d; --c3: #84cc16; --c4: #ca8a04;
}

/* 4 · AMETHYST GLASS (on 6, dark frame) - violet, orchid */
html[data-theme][data-glass="4"] {
    --p: #a855f7; --ph: #c084fc; --ink: #7e22ce;
    --btn-bg: linear-gradient(135deg, #c084fc, #9333ea 55%, #db2777);
    --btn-hover-bg: linear-gradient(135deg, #a855f7, #7e22ce 55%, #be185d);
    --lg-base: #f6f0ff;
    --lg-b1: #c084fc; --lg-b2: #f0abfc; --lg-b3: #818cf8; --lg-b4: #f9a8d4;
    --lg-tint: 246, 240, 255;
    --bg: #160d2c; --surface: rgba(43, 26, 82, .55); --surface-2: rgba(30, 18, 60, .5); --border: rgba(216, 180, 254, .22);
    --nav-bg: rgba(22, 13, 44, .55);
    --c1: #a855f7; --c2: #ec4899; --c3: #6366f1; --c4: #d946ef;
}

/* 5 · NEON GLASS (on 8, dark frame) - electric cyan, lime, pink */
html[data-theme][data-glass="5"] {
    --p: #06b6d4; --ph: #22d3ee; --ink: #0891b2;
    --btn-bg: linear-gradient(135deg, #22d3ee, #06b6d4 50%, #a3e635);
    --btn-hover-bg: linear-gradient(135deg, #67e8f9, #0891b2 50%, #84cc16);
    --lg-base: #effaff;
    --lg-b1: #67e8f9; --lg-b2: #bef264; --lg-b3: #f9a8d4; --lg-b4: #fde047;
    --lg-tint: 239, 250, 255;
    --bg: #05070d; --surface: rgba(14, 22, 36, .6); --surface-2: rgba(8, 12, 22, .55); --border: rgba(34, 211, 238, .25);
    --nav-bg: rgba(5, 7, 13, .55);
    --c1: #22d3ee; --c2: #a3e635; --c3: #f472b6; --c4: #facc15;
}

/* 6 · ARCTIC GLASS (on 11) - ice blue */
html[data-theme][data-glass="6"] {
    --p: #0284c7; --ph: #0369a1; --ink: #0369a1;
    --btn-bg: linear-gradient(135deg, #38bdf8, #0284c7 55%, #6366f1);
    --btn-hover-bg: linear-gradient(135deg, #0ea5e9, #0369a1 55%, #4f46e5);
    --lg-base: #f3f8ff;
    --lg-b1: #bae6fd; --lg-b2: #93c5fd; --lg-b3: #e0f2fe; --lg-b4: #c7d2fe;
    --lg-tint: 243, 248, 255;
    --c1: #38bdf8; --c2: #60a5fa; --c3: #818cf8; --c4: #0284c7;
}

/* 7 · LILAC GLASS (on 15) - lavender and blush */
html[data-theme][data-glass="7"] {
    --p: #7c6bd6; --ph: #6553c7; --ink: #6553c7;
    --btn-bg: linear-gradient(135deg, #a78bfa, #7c6bd6 55%, #ec4899);
    --btn-hover-bg: linear-gradient(135deg, #8b5cf6, #6553c7 55%, #db2777);
    --lg-base: #faf7ff;
    --lg-b1: #ddd6fe; --lg-b2: #fbcfe8; --lg-b3: #c7d2fe; --lg-b4: #e9d5ff;
    --lg-tint: 250, 247, 255;
    --c1: #a78bfa; --c2: #f472b6; --c3: #818cf8; --c4: #c084fc;
}

/* 8 · OBSIDIAN GLASS (on 16, dark frame) - black glass, amber light */
html[data-theme][data-glass="8"] {
    --p: #f97316; --ph: #fb923c; --ink: #c2410c;
    --btn-bg: linear-gradient(135deg, #fb923c, #ea580c 55%, #e11d48);
    --btn-hover-bg: linear-gradient(135deg, #f97316, #c2410c 55%, #be123c);
    --lg-base: #fff6ee;
    --lg-b1: #fdba74; --lg-b2: #fca5a5; --lg-b3: #fde68a; --lg-b4: #c4b5fd;
    --lg-tint: 255, 246, 238;
    --bg: #111113; --surface: rgba(39, 39, 44, .6); --surface-2: rgba(24, 24, 27, .55); --border: rgba(253, 186, 116, .22);
    --nav-bg: rgba(14, 14, 16, .6);
    --c1: #f97316; --c2: #eab308; --c3: #ef4444; --c4: #a78bfa;
}

/* 9 · MINT GLASS (on 17) - mint, seafoam */
html[data-theme][data-glass="9"] {
    --p: #059669; --ph: #047857; --ink: #047857;
    --btn-bg: linear-gradient(135deg, #34d399, #059669 55%, #0d9488);
    --btn-hover-bg: linear-gradient(135deg, #10b981, #047857 55%, #0f766e);
    --lg-base: #f0fdf7;
    --lg-b1: #6ee7b7; --lg-b2: #a7f3d0; --lg-b3: #99f6e4; --lg-b4: #d9f99d;
    --lg-tint: 240, 253, 247;
    --c1: #10b981; --c2: #14b8a6; --c3: #65a30d; --c4: #06b6d4;
}

/* 10 · SAPPHIRE GLASS (on 19) - royal blue, periwinkle */
html[data-theme][data-glass="10"] {
    --p: #2563eb; --ph: #1d4ed8; --ink: #1d4ed8;
    --btn-bg: linear-gradient(135deg, #60a5fa, #2563eb 55%, #7c3aed);
    --btn-hover-bg: linear-gradient(135deg, #3b82f6, #1d4ed8 55%, #6d28d9);
    --lg-base: #f2f6ff;
    --lg-b1: #93c5fd; --lg-b2: #a5b4fc; --lg-b3: #67e8f9; --lg-b4: #c4b5fd;
    --lg-tint: 242, 246, 255;
    --c1: #2563eb; --c2: #06b6d4; --c3: #8b5cf6; --c4: #0ea5e9;
}

/* 11 · AURORA GLASS (on 21, dark frame) - northern lights */
html[data-theme][data-glass="11"] {
    --p: #14b8a6; --ph: #2dd4bf; --ink: #0f766e;
    --btn-bg: linear-gradient(135deg, #2dd4bf, #14b8a6 40%, #8b5cf6 80%, #ec4899);
    --btn-hover-bg: linear-gradient(135deg, #14b8a6, #0d9488 40%, #7c3aed 80%, #db2777);
    --lg-base: #f2fbfb;
    --lg-b1: #5eead4; --lg-b2: #c4b5fd; --lg-b3: #f9a8d4; --lg-b4: #7dd3fc;
    --lg-tint: 242, 251, 251;
    --bg: #070b18; --surface: rgba(20, 30, 56, .55); --surface-2: rgba(10, 16, 32, .5); --border: rgba(94, 234, 212, .22);
    --nav-bg: rgba(7, 11, 24, .55);
    --c1: #14b8a6; --c2: #8b5cf6; --c3: #ec4899; --c4: #0ea5e9;
}

/* 12 · OCEAN GLASS (on 25, dark frame) - deep sea, sky */
html[data-theme][data-glass="12"] {
    --p: #0ea5e9; --ph: #38bdf8; --ink: #0369a1;
    --btn-bg: linear-gradient(135deg, #38bdf8, #0284c7 55%, #0d9488);
    --btn-hover-bg: linear-gradient(135deg, #0ea5e9, #0369a1 55%, #0f766e);
    --lg-base: #eef7ff;
    --lg-b1: #7dd3fc; --lg-b2: #38bdf8; --lg-b3: #5eead4; --lg-b4: #a5b4fc;
    --lg-tint: 238, 247, 255;
    --bg: #03111f; --surface: rgba(10, 36, 64, .55); --surface-2: rgba(5, 23, 42, .5); --border: rgba(125, 211, 252, .22);
    --nav-bg: rgba(3, 17, 31, .55);
    --c1: #0ea5e9; --c2: #14b8a6; --c3: #3b82f6; --c4: #22d3ee;
}


/* ---------- 2. Shared glass look ---------- */

html[data-theme][data-glass] {
    --r: 22px;
    --btn-r: 999px;
    --r-search: 999px;
    --icon-r: 18px;
    --lift: -5px;
    --glass-edge: rgba(255, 255, 255, .6);
    --glass-shine: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(255, 255, 255, .18);
    --shadow: var(--glass-shine), 0 8px 30px rgba(31, 38, 90, .10);
    --shadow-hover: var(--glass-shine), 0 18px 44px color-mix(in srgb, var(--p) 26%, transparent);
    --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px color-mix(in srgb, var(--p) 35%, transparent);
    --card-bw: 1px;
    --card-bc: var(--glass-edge);
    --nav-blur: 22px;
    --nav-border: 1px solid rgba(255, 255, 255, .45);
    --nav-shadow: 0 8px 30px rgba(15, 23, 42, .08);
    --pill-bg: rgba(255, 255, 255, .16);
    --pill-border: rgba(255, 255, 255, .55);
    --on-p: #ffffff;
    background-color: var(--lg-base);
}

/* light frames: white frosted navbar */
html[data-theme][data-glass]:not(:is([data-glass="3"], [data-glass="4"], [data-glass="5"], [data-glass="8"], [data-glass="11"], [data-glass="12"])) {
    --nav-bg: rgba(255, 255, 255, .55);
    --search-bg: rgba(255, 255, 255, .72);
}

/* content area: see-through, the mesh shows behind it */
html[data-theme][data-glass] body {
    --pp-tint: rgba(var(--lg-tint), .35);
    --pp-tint-2: rgba(255, 255, 255, .28);
    --pp-glow: none;
    --bg: transparent;
    --surface: rgba(255, 255, 255, .7);
    --surface-2: rgba(255, 255, 255, .42);
    --border: rgba(255, 255, 255, .7);
    --search-bg: rgba(255, 255, 255, .78);
    --bs-body-bg: transparent;
    --bs-tertiary-bg: rgba(255, 255, 255, .4);
    background: transparent;
}

/* the colour mesh: one fixed layer behind everything */
html[data-theme][data-glass] body::before {
    content: "";
    position: fixed;
    inset: -12%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38% 42% at 12% 18%, var(--lg-b1), transparent 70%),
        radial-gradient(34% 40% at 88% 14%, var(--lg-b2), transparent 70%),
        radial-gradient(40% 44% at 78% 82%, var(--lg-b3), transparent 70%),
        radial-gradient(36% 40% at 18% 86%, var(--lg-b4), transparent 70%),
        var(--lg-base);
    opacity: .78;
    animation: pp-glass-drift 38s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes pp-glass-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-3%, 2%, 0) scale(1.05); }
    100% { transform: translate3d(2%, -2%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme][data-glass] body::before { animation: none; }
}

/* sections that had a solid colour become clear or lightly frosted */
html[data-theme][data-glass] :is(.collections-section, .pp-explore-page) {
    background: transparent !important;
}
html[data-theme][data-glass] .pp-modern-section.gray {
    background: rgba(255, 255, 255, .26);
    background-image: none;
    border-top: 1px solid rgba(255, 255, 255, .55);
    border-bottom: 1px solid rgba(255, 255, 255, .55);
}
html[data-theme][data-glass] .pp-home { --pp-bg: rgba(255, 255, 255, .4); --pp-white: rgba(255, 255, 255, .72); }

/* frosted frame: navbar, menus, search */
html[data-theme][data-glass] .navbar,
html[data-theme][data-glass] .navbar.is-scrolled {
    background: var(--nav-bg) !important;
    -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(180%);
    backdrop-filter: blur(var(--nav-blur)) saturate(180%);
    border-bottom: var(--nav-border);
    box-shadow: var(--nav-shadow), inset 0 -1px 0 rgba(255, 255, 255, .25);
}
html[data-theme][data-glass] .dropdown-menu {
    --bs-dropdown-bg: rgba(255, 255, 255, .9);
    --bs-dropdown-border-color: rgba(255, 255, 255, .7);
    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--p) 12%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border-radius: 18px;
    box-shadow: var(--glass-shine), 0 18px 44px rgba(15, 23, 42, .16);
}
html[data-theme][data-glass]:not(:is([data-glass="4"], [data-glass="5"], [data-glass="8"], [data-glass="11"], [data-glass="12"])) .navbar .dropdown-menu {
    background-color: rgba(255, 255, 255, .9) !important;
}
html[data-theme][data-glass]:is([data-glass="4"], [data-glass="5"], [data-glass="8"], [data-glass="11"], [data-glass="12"]) .navbar .dropdown-menu {
    --bs-dropdown-bg: color-mix(in srgb, var(--dk-bg) 93%, transparent);
    --bs-dropdown-border-color: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 44px rgba(0, 0, 0, .4);
    background-color: color-mix(in srgb, var(--dk-bg) 93%, transparent) !important;
}
html[data-theme][data-glass] :is(.search-box-pill, .pp-main-search) {
    background: var(--search-bg);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: var(--glass-shine), 0 10px 34px rgba(15, 23, 42, .12);
}
html[data-theme][data-glass] .value-props-bar {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
}

/* cards: see-through with a bright glass edge (no blur - many of them) */
html[data-theme][data-glass] :is(.card, .pp-category-modern, .pp-feature-card, .pp-image-modern, .pp-type-card, .pp-discover, .collection-card, .pp-exclusive-card) {
    border: 1px solid var(--glass-edge);
    box-shadow: var(--shadow);
}
html[data-theme][data-glass] .card { --bs-card-bg: rgba(255, 255, 255, .7); }
html[data-theme][data-glass] .pp-type-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .5)),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--p) 18%, transparent), transparent 45%);
}
html[data-theme][data-glass] :is(.form-control, .form-select) {
    background-color: rgba(255, 255, 255, .8);
    border-color: rgba(255, 255, 255, .85);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
}

/* liquid buttons: gloss on top, colour flowing underneath */
html[data-theme][data-glass] :is(.btn-premiumpng, .btn-primary, .search-submit-btn, .pp-main-search button) {
    background: var(--btn-bg);
    background-size: 160% 160%;
    background-position: 0% 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #ffffff;
    box-shadow: var(--btn-shadow);
    position: relative;
    overflow: hidden;
    transition: background-position .5s ease, transform .2s ease, box-shadow .2s ease;
}
html[data-theme][data-glass] :is(.btn-premiumpng, .btn-primary, .search-submit-btn, .pp-main-search button)::after {
    content: "";
    position: absolute;
    inset: 0 0 50% 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
    pointer-events: none;
}
html[data-theme][data-glass] :is(.btn-premiumpng, .btn-primary, .search-submit-btn, .pp-main-search button):hover {
    background-position: 100% 50%;
    transform: translateY(-1px);
}
html[data-theme][data-glass] .btn-login {
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
html[data-theme][data-glass] .category-pill {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* hero: the photo keeps its overlay, tinted by the mesh colours */
html[data-theme][data-glass] .hero-overlay {
    background:
        radial-gradient(60% 80% at 10% 10%, color-mix(in srgb, var(--lg-b1) 45%, transparent), transparent 70%),
        radial-gradient(60% 80% at 90% 90%, color-mix(in srgb, var(--lg-b2) 40%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(10, 14, 30, .38), rgba(10, 14, 30, .62));
}

/* footer: dark frosted glass with a coloured glow */
html[data-theme][data-glass] .pp-site-footer {
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--lg-b1) 30%, transparent), transparent 45%),
        radial-gradient(circle at 95% 100%, color-mix(in srgb, var(--lg-b2) 26%, transparent), transparent 45%),
        rgba(12, 16, 30, .82);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    border-top: 1px solid rgba(255, 255, 255, .35);
}

/* image page boxes */
html[data-theme][data-glass] .pp-download-box {
    background: rgba(255, 255, 255, .55) !important;
    border: 1px solid var(--glass-edge) !important;
    box-shadow: var(--shadow) !important;
}

/* on Forest (4) and Obsidian (16) the download area has light text: dark glass there */
html[data-theme][data-glass]:is([data-theme="4"], [data-theme="16"]) .pp-download-box {
    background: rgba(20, 22, 27, .8) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 34px rgba(0, 0, 0, .22) !important;
}

/* small screens: lighter blur, a bit more solid (readable, smooth scrolling) */
@media (max-width: 767.98px) {
    html[data-theme][data-glass] body { --surface: rgba(255, 255, 255, .8); }
    html[data-theme][data-glass] body::before { inset: -6%; animation-duration: 60s; }
    html[data-theme][data-glass] .navbar,
    html[data-theme][data-glass] .navbar.is-scrolled { --nav-blur: 14px; }
}

/* browsers without backdrop-filter: solid enough to read */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-theme][data-glass] .navbar { background: color-mix(in srgb, var(--nav-bg) 40%, #ffffff) !important; }
    html[data-theme][data-glass]:is([data-glass="3"], [data-glass="4"], [data-glass="5"], [data-glass="8"], [data-glass="11"], [data-glass="12"]) .navbar { background: var(--dk-bg, #111) !important; }
    html[data-theme][data-glass] .dropdown-menu { --bs-dropdown-bg: #ffffff; }
}