/* ==========================================================
   RZ ADMIN OFFICIAL DESIGN TOKENS (LIGHT + DARK)
   Using EXACT variable system you provided
   ========================================================== */
        :root {

            /* --font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; */
            --font-family: Mona Sans, Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

            --max-width: 100%;
            /* ===== RZ ADMIN LIGHT (as-is, keep untouched) ===== */
            --color-surface-0: #ffffff;
            --color-surface-1: #f7f7f7;
            --color-surface-2: #f0f0f0;
            --color-surface-3: #e6e6e6;
            --color-surface-4: #d9d9d9;
            --color-surface-modal: #ffffff;

            /* --color-surface-accent-0: #ea3434; Red*/
            /*--color-surface-accent-0: rgb(59 130 246); Bule*/
            /* --color-surface-accent-0: #22c55e; Green */
            /* --color-surface-accent-0: rgb(214 102 34); Orange */
            --color-surface-accent-0: rgb(34 102 214);
            --color-surface-accent-0: rgb(214 102 34);
            /*Orange*/

            --color-surface-accent-1: rgba(52, 106, 234, .1);

            --color-surface-foreground-0: #0d0d0d;
            --color-surface-foreground-1: #303030;
            --color-surface-foreground-2: #424242;
            --color-surface-foreground-3: #5c5c5c;

            --color-outline-1: hsla(0, 0%, 5%, .1);
            --color-outline-border-0: hsla(0, 0%, 5%, .2);

            --radius: 12px;
            --shadow: 0 6px 20px rgba(0, 0, 0, .08);
        }

        .dark,
        [data-theme=dark] {
            /* ===== RZ ADMIN DARK – EXACT LAYERING (NO ULTA USAGE) ===== */
            /* --font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; */
            --font-family: Mona Sans, Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;


            /* Page background (deep neutral, NOT pure black) */
            --color-surface-0: #151515;
            /* cards / panels */
            --color-surface-1: #0f0f0f;
            /* page background */
            --color-surface-2: #1c1c1c;
            /* inputs / search */
            --color-surface-3: #303030;
            /* hover / separators */
            --color-surface-4: #3b3b3b;
            --color-surface-modal: #1f1f1f;

            /* Accent – used VERY rarely (RZ ADMIN rule) */
            /* --color-surface-accent-0: #ef6262; */
            /* --color-surface-accent-0: rgb(59 130 246); */
            /* --color-surface-accent-0: #22c55e; Green*/
            /* --color-surface-accent-0: rgb(214 102 34); Orange*/

            --color-surface-accent-0: rgb(34 102 214);
            --color-surface-accent-0: rgb(214 102 34);
            /*Orange*/


            --color-surface-accent-1: hsla(0, 0%, 100%, .08);

            /* Foreground – strict hierarchy */
            --color-surface-foreground-0: #f7f7f7;
            /* titles */
            --color-surface-foreground-1: #e6e6e6;
            /* primary text */
            --color-surface-foreground-2: #c7c7c7;
            /* meta */
            --color-surface-foreground-3: #b0b0b0;
            /* hints */

            /* Borders – almost invisible */
            --color-outline-1: hsla(0, 0%, 100%, .06);
            --color-outline-border-0: hsla(0, 0%, 100%, .12);

            /* Shadow – extremely soft */
            --shadow: 0 8px 24px rgba(0, 0, 0, .55);
        }

        /* ===== THEME → UTILITY BRIDGE ===== */

        /* text */
        .text-surface-foreground-0 {
            color: var(--color-surface-foreground-0);
        }

        .text-surface-foreground-1 {
            color: var(--color-surface-foreground-1);
        }

        .text-surface-foreground-2 {
            color: var(--color-surface-foreground-2);
        }

        /* bg */
        .bg-surface-1 {
            background-color: var(--color-surface-1);
        }

        .bg-surface-2 {
            background-color: var(--color-surface-2);
        }

        .bg-surface-3 {
            background-color: var(--color-surface-3);
        }

        /* border */
        .border-outline-border-0 {
            border-color: var(--color-outline-border-0);
        }

        /* accent */
        .text-surface-accent-0 {
            color: var(--color-surface-accent-0);
        }

        .bg-surface-accent-0 {
            background-color: var(--color-surface-accent-0);
        }

        .border-surface-accent-0 {
            border-color: var(--color-surface-accent-0);
        }

        /* ring */
        .ring-surface-accent-0\/30 {
            --tw-ring-color: rgb(34 102 214 / .3);
        }


        /* ==========================================================
   BASE
   ========================================================== */
        [x-cloak] {
            display: none !important;
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            font-family: var(--font-family);
            background: var(--color-surface-1);
            color: var(--color-surface-foreground-0);
            font-size: 14px;
        }

        a {
            text-decoration: none;
            color: inherit
        }

        .backdrop-blur-10px {
            backdrop-filter: blur(11px);
        }

        /* ==========================================================
   TOP SEARCH BAR (RZ ADMIN exact feel)
   ========================================================== */

        .content {
            margin-left: 240px;
        }

        .header {
            padding: 20px;
            position: sticky;
            top: 0px;
            z-index: 2;
            background: var(--color-surface-1);
        }

        .topbar {
            background: var(--color-surface-0);
            border-bottom: 1px solid var(--color-outline-1);
            border-radius: 20px;

        }

        .topbar-inner {
            max-width: var(--max-width);
            margin: auto;
            padding: 14px 24px;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .logo {
            font-weight: 600;
            color: var(--color-surface-foreground-0);
            /* RZ ADMIN: logo is neutral, not accent */
            font-size: 18px;
        }

        /* Header helpers */
        .sr-only {
            position: absolute !important;
            height: 1px;
            width: 1px;
            overflow: hidden;
            clip: rect(1px, 1px, 1px, 1px);
            white-space: nowrap;
            border: 0;
            padding: 0;
            margin: -1px;
        }

        .search-form {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            position: relative;
            justify-content: space-evenly;
        }

        .search-button {
            background: var(--color-surface-accent-0);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 999px;
            cursor: pointer;
            font-size: 13px;
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .search-icon {
            position: absolute;
            /* left: 14px; */
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--color-surface-foreground-2);
            pointer-events: auto;
            cursor: pointer;
            width: 16px;
            height: 16px;
        }

        /* Mobile menu (simple toggle) */
        .mobile-menu {
            display: none;
            background: var(--color-surface-0);
            border: 1px solid var(--color-outline-1);
            padding: 10px 14px;
            border-radius: 8px;
            margin-top: 10px;
        }

        .mobile-menu.open {
            display: block;
        }


        @media (max-width: 700px) {
            .topbar-inner {
                padding: 12px 14px
            }

            .pricingg {
                display: none;
            }

            .sign-inn {
                display: none;
            }

            .pricing {
                display: none !important;
            }

            .sign-in {
                display: none !important;
            }
        }

        .search-input {
            background: var(--color-surface-3);
            border: 1px solid var(--color-outline-1);
            border-radius: 999px;
            padding: 12px 44px 12px 40px;
            color: var(--color-surface-foreground-0);
            width: 100%;
            margin: 0;
            text-indent: 10px;
        }

        .search-input::placeholder {
            text-indent: 10px;
        }

        .search-input:focus-visible {
            outline: 0 !important;
            border: 1px solid var(--color-outline-1) !important;
            box-shadow: 0 0 0 0 transparent !important;
        }


        .sign-in {
            background: var(--color-surface-2);
            border: 1px solid var(--color-outline-1);
            padding: 8px 20px;
            border-radius: 7px;
            font-size: 14px;
            color: var(--color-surface-foreground-1);
            cursor: pointer;
            font-weight: 600;

        }

        .pricing {
            color: var(--color-surface-accent-0);
            font-size: 14px;
            font-weight: 600;
        }

        .flex-1 {
            flex: 1;
        }

        .position-absolute {
            position: absolute;
        }

        .search-box {
            position: relative;
        }

        .search-inner-box {
            width: 99%;
            position: relative;
        }

        /* top logo and munu bar */

        .mobile-logo-menu-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 24px 0px;
        }

        /* LOGO */
        .logo-wrap {
            display: flex;
            align-items: center;
        }

        /* MENU BUTTON */
        .menu-toggle {
            width: 38px;
            height: 38px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 5px;

            background: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
        }

        .menu-toggle span {
            height: 2px;
            width: 22px;
            background: #111;
            border-radius: 2px;
            transition: all .25s ease;
        }

        /* Nice tap effect */
        .menu-toggle:active {
            transform: scale(.96);
        }

        .mobile-logo-menu-bar {
            display: none;
        }

        .sidebar-new {
            background-color: var(--color-surface-2);
        }

        /* ned */

        /* ==========================================================
   TOP FILTER PILLS
   ========================================================== */
        .topbar-filters {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 10px 24px 14px;
            display: flex;
            gap: 10px;
            flex-wrap: nowrap;
            overflow: auto;

            &::-webkit-scrollbar {
                display: none;
            }

            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }

        .pill {
            background: var(--color-surface-2);
            border: 1px solid var(--color-outline-1);
            padding: 5px 20px;
            border-radius: 25px;
            font-size: 13px;
            color: var(--color-surface-foreground-1);
            cursor: pointer;
            white-space: nowrap;
        }


        .pill.active {
            background: var(--color-surface-accent-0);
            color: white;
            border: 1px solid var(--color-surface-accent-0) !important;

        }

        .pill:not(.active):hover {
            background-color: hsla(0, 0%, 78%, .1);
            --tw-border-opacity: 1;
            border-color: rgb(48 48 48 / var(--tw-border-opacity));
        }

        .filter-bottom {
            background-color: var(--color-surface-2);
        }

        .filter-center {
            height: calc(100% - 110px);
            overflow-y: auto;
        }

        /* ==========================================================
   LAYOUT
   ========================================================== */
        .layout {
            max-width: var(--max-width);
            /*margin: 24px auto;*/
            /*padding: 0 24px;*/
            /*display: grid;*/
            /* grid-template-columns: 240px 1fr;*/
            /* gap: 28px; */
        }

        /* ==========================================================
   FILTER SIDEBAR
   ========================================================== */
        .filters {
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            /* RZ ADMIN-like sticky offset */
            background: var(--color-surface-2);
            border-radius: var(--radius);
            padding: 18px;
            box-shadow: none;
            /* RZ ADMIN: flat sidebar */
        }

        .filters h4 {
            margin: 0 0 14px;
            font-size: 14px;
            font-weight: 600;
        }

        .filter-group {
            margin-bottom: 18px
        }

        .filter-group strong {
            display: block;
            margin-bottom: 8px;
            color: var(--color-surface-foreground-1);
        }

        .filter-group label {
            display: flex;
            gap: 8px;
            margin-bottom: 6px;
            font-size: 13px;
            color: var(--color-surface-foreground-2);
        }

        .aside-icon {
            cursor: pointer;
            border-radius: 8px;
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .aside-icon:hover {
            background-color: var(--color-surface-3);
        }


        @media (min-width: 1280px) {
            .filters {
                width: 240px;
            }
        }

        @media (max-width:1279.89px) {

            .content {
                margin-left: 4rem;
            }

            .aside-logo {
                display: none;
            }

            .filter-inner {
                justify-content: center !important;
            }

            .filters .sign-in0 {
                display: none;
            }

            .filter-bottom-inner {
                background: var(--color-surface-2) !important;
                margin: 0px !important;
            }

            .filters a span {
                display: none;
            }

        }

        .theme-btn {
            background-color: var(--color-surface-accent-1);
        }

        .theme-btn-2 {
            background-color: var(--color-surface-2) !important;
        }



        /* collapsed state */
        .filters.collapsed {
            width: 64px;
            border-radius: 0 var(--radius) var(--radius) 0;
        }

        .content.content-collapsed {
            margin-left: 64px;
        }

        .filters.collapsed .aside-logo {
            display: none;
        }

        .filters.collapsed .filter-inner {
            justify-content: center !important;
        }

        .filters.collapsed .footer-inner {
            margin-left: 64px;
        }

        .filter-bottom {
            width: 100%;
        }

        .filter-bottom-inner {
            background: var(--color-surface-3);
            margin: 18px;
            padding: 12px 16px 12px 16px;
            border-radius: var(--radius);
            cursor: pointer;
        }

        .sign-in1 {
            color: var(--color-surface-accent-0);
            font-size: 15px;
            font-weight: 700;
        }

        .filters.collapsed .sign-in0 {
            display: none;
        }

        .filters.collapsed .filter-bottom-inner {
            background: var(--color-surface-2);
            margin: 0px;
        }

        .filter-top {
            margin-bottom: 32px;
        }

        .filter-center a:hover {
            background-color: var(--color-surface-3);
        }

        .filter-center a.active {
            background-color: var(--color-surface-3);
        }

        .filters.collapsed a span {
            display: none;
        }

        .filter-center a {
            height: 2.2rem;
        }

        .border-surface-border-alpha-1 {
            border-color: var(--color-surface-3);
        }


        /* ==========================================================
   RESULTS HEADER
   ========================================================== */
        .results-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 7px;
            padding: 0 20px;
        }

        .results-head h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
        }

        .meta {
            color: var(--color-surface-foreground-3);
            font-size: 16px;
            font-weight: 600;
        }

        /* ==========================================================
    PRODUCT GRID (RZ ADMIN density)
    ========================================================== */

        /* ===== MASONRY GRID ===== */
        .masonry {
            /* column-count: 4;
            column-gap: 20px;*/
            width: 98%;
            margin: 0 auto;
        }

        .section {
            padding: 0 20px;
        }

        /* ===== CARD ===== */

        /* Masonry needs item width */
        .card {
            width: 20%;
            /* width: 25%; */
            /* padding: 10px; */
            padding: 10px;
            cursor: pointer;
        }

        @media(max-width:1200px) {
            .card {
                width: 33.33%;
            }
        }

        @media(max-width:768px) {
            .card {
                width: 50%;
            }

            .filters a span {
                display: none;
            }
        }

        @media(max-width:480px) {
            .card {
                width: 100%;
            }

            .filters a span {
                display: none;
            }
        }

        .card-inner {
            position: relative;
            break-inside: avoid;
            border-radius: var(--radius);
            overflow: hidden;
            box-sizing: border-box;
        }

        /* ===== IMAGE ===== */
        .thumb {
            width: 100%;
            height: auto;
            display: block;
            transition: .35s ease;
            background-color: var(--color-surface-1);
            border-radius: var(--radius);
        }

        .card:hover .thumb {
            transform: scale(1.05);
        }

        /* ===== OVERLAY ===== */
        .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top,
                    rgba(0, 0, 0, 0.756),
                    rgba(0, 0, 0, 0.457),
                    rgba(0, 0, 0, 0));
            opacity: 0;
            transition: .25s ease;
            display: flex;
            align-items: flex-end;
        }

        .card:hover .overlay {
            opacity: 1;
        }

        .overlay-content {
            padding: 14px;
            color: #fff;
        }

        .title {
            font-size: 14px;
            font-weight: 600;
        }

        .meta {
            color: var(--color-surface-foreground-3);
            font-size: 16px;
            font-weight: 600;
        }

        .masonry-grid.hidden {
            visibility: hidden;
        }

        .text-yellowPremium {
            --tw-text-opacity: 1;
            color: rgb(254 182 2 / var(--tw-text-opacity));
        }

        .star-icon {
            background: #151515;
            border-radius: 50%;
        }

        /* ==========================================================
        FOOTER
    ========================================================== */
        footer {
            margin-top: 20px;
        }

        .footer-inner {
            max-width: var(--max-width);
            margin: auto;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            gap: 24px;
            font-size: 13px;
            color: var(--color-surface-foreground-2);
        }

        @media(max-width:900px) {
            .layout {
                grid-template-columns: 1fr
            }

            .filters {
                order: 2
            }
        }



        /* Scrollbar-ah modern-ah matha */
        .scrollbar-sleek::-webkit-scrollbar {
            width: 4px;
        }

        .scrollbar-sleek::-webkit-scrollbar-track {
            background: transparent;
        }

        .scrollbar-sleek::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }

        /* Hover panna mattum light-ah theriyum */
        .scrollbar-sleek::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.2);
        }




        .perspective-1000 {
            perspective: 1000px;
        }

        .transform-style-3d {
            transform-style: preserve-3d;
        }

        @keyframes spin-slow {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .animate-spin-slow {
            animation: spin-slow 15s linear infinite;
        }

        /* Custom Scroll/Hover Feel */
        .group:hover {
            box-shadow: 0 0 50px rgba(var(--accent-rgb), 0.3);
        }




        @keyframes glowingHeartbeat {
            0% {
                transform: scale(1);
                filter: drop-shadow(0 0 5px rgba(236, 72, 153, 0.4));
            }

            15% {
                transform: scale(1.15);
                filter: drop-shadow(0 0 15px rgba(236, 72, 153, 0.9));
            }

            30% {
                transform: scale(1);
                filter: drop-shadow(0 0 5px rgba(236, 72, 153, 0.4));
            }

            45% {
                transform: scale(1.15);
                filter: drop-shadow(0 0 15px rgba(236, 72, 153, 0.9));
            }

            60%,
            100% {
                transform: scale(1);
                filter: drop-shadow(0 0 5px rgba(236, 72, 153, 0.4));
            }
        }

        @keyframes flipCoinGlow {
            0% {
                transform: perspective(400px) rotateY(0deg) translateY(0);
                filter: drop-shadow(0 0 5px rgba(234, 179, 8, 0.5));
            }

            50% {
                transform: perspective(400px) rotateY(180deg) translateY(-4px) scale(1.1);
                filter: drop-shadow(0 0 20px rgba(234, 179, 8, 1)) brightness(1.3);
            }

            100% {
                transform: perspective(400px) rotateY(360deg) translateY(0);
                filter: drop-shadow(0 0 5px rgba(234, 179, 8, 0.5));
            }
        }