@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   FurniTalk - Glassmorphism theme
   --------------------------------------------------------------------------
   Load order (already how your <head> is set up):
     bootstrap.min.css -> colors.css -> app.css -> custom.css   (this file)

   * Light mode is the default. Dark mode turns on when <html> has class="dark"
     (or data-bs-theme="dark"). See the small toggle snippet in the chat reply.
   * The glass values (blur, borders, shadows, gradients, font) are copied from
     glassmorph-sample-great.html: .glass-panel, .glass-card, .bmps-bg, Inter.
   * Your brand colour (--primary_color from colors.css) is kept as the accent.
     Change --accent-2 / --on-primary below if you ever change the brand colour.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    color-scheme: light;

    /* ---- Typography (sample: Inter) ---- */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-family: var(--font-sans);
    --bs-body-line-height: 1.7;

    /* ---- Shape (sample: rounded-xl / 2xl / 3xl) ---- */
    --border_radius: 16px;
    --radius-field: 12px;
    --radius-card: 24px;

    /* ---- Brand helpers (comma triplets, same format as colors.css) ---- */
    --accent-2: 245, 176, 15;   /* 2nd stop of the primary gradient      */
    --on-primary: 28, 28, 28;   /* text colour placed on the primary fill */

    /* ---- Colours that app.css already reads as rgb(var(--x)) ---- */
    --background_color: 248, 250, 252;
    --text_color: 30, 41, 59;                       /* slate-800 */
    --text_muted_color: 71, 85, 105;                /* slate-600 */
    --elements_background_color: 255, 255, 255;
    --elements_inner_background_color: 241, 245, 249;
    --border_color: 226, 232, 240;                  /* slate-200 */
    --table-second-bg: 248, 250, 252;

    /* Footer follows the theme (it used to be a fixed dark block) */
    --footer_background_color: 255, 255, 255;
    --footer_heading_color: 15, 23, 42;
    --footer_text_color: 71, 85, 105;
    --footer_border_color: 226, 232, 240;

    /* ---- Bootstrap 5.3 variables ---- */
    --bs-body-color: rgb(30, 41, 59);
    --bs-body-color-rgb: 30, 41, 59;
    --bs-heading-color: #0f172a;
    --bs-emphasis-color: #0f172a;
    --bs-secondary-color: rgb(71, 85, 105);

    /* ---- Page background  (sample: .bmps-bg) ---- */
    --page-bg-color: #f8fafc;
    --page-mesh:
        radial-gradient(at 0% 0%, hsla(210, 100%, 95%, 1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(250, 100%, 95%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(280, 100%, 95%, 1) 0, transparent 50%);
    --orb-1: rgba(var(--primary_color), 0.20);
    --orb-2: rgba(99, 102, 241, 0.18);

    /* ---- .glass-panel (sample) ---- */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --glass-blur: blur(16px);
    --glass-hover-shadow: 0 18px 40px -10px rgba(31, 38, 135, 0.18);

    /* ---- .glass-card (sample) ---- */
    --card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
    --card-border: rgba(255, 255, 255, 1);
    --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    --card-blur: blur(20px);

    /* ---- Supporting surfaces ---- */
    --glass-inner: rgba(255, 255, 255, 0.55);        /* chips, nested blocks   */
    --menu-bg: rgba(255, 255, 255, 0.92);            /* dropdowns / modals     */
    --field-bg: rgba(255, 255, 255, 0.8);            /* sample: bg-white/80    */
    --field-bg-focus: rgba(255, 255, 255, 0.98);
    --field-border: #d1d5db;                         /* sample: border-gray-300 */
    --nav-border: #e5e7eb;                           /* sample: border-gray-200 */
    --band-bg: rgba(255, 255, 255, 0.5);             /* sample: bg-white/50     */
    --hero-veil:
        radial-gradient(60% 90% at 50% 0%, rgba(var(--primary_color), 0.12), transparent 70%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.72), rgba(248, 250, 252, 0.9));
    --scroll-thumb: rgba(100, 116, 139, 0.35);
}

/* ---- Dark mode (sample: .dark .bmps-bg / .glass-panel / .glass-card) ---- */
html.dark,
html[data-bs-theme="dark"] {
    color-scheme: dark;

    --background_color: 15, 23, 42;
    --text_color: 226, 232, 240;                    /* slate-200 */
    --text_muted_color: 148, 163, 184;              /* slate-400 */
    --elements_background_color: 30, 41, 59;
    --elements_inner_background_color: 30, 41, 59;
    --border_color: 51, 65, 85;
    --table-second-bg: 30, 41, 59;

    --footer_background_color: 15, 23, 42;
    --footer_heading_color: 255, 255, 255;
    --footer_text_color: 148, 163, 184;
    --footer_border_color: 51, 65, 85;

    --bs-body-color: rgb(226, 232, 240);
    --bs-body-color-rgb: 226, 232, 240;
    --bs-body-bg: #0f172a;
    --bs-heading-color: #ffffff;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgb(148, 163, 184);

    --page-bg-color: #0f172a;
    --page-mesh:
        radial-gradient(at 0% 0%, hsla(253, 16%, 12%, 1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(225, 39%, 25%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(339, 49%, 20%, 1) 0, transparent 50%);
    --orb-1: rgba(var(--primary_color), 0.14);
    --orb-2: rgba(59, 130, 246, 0.28);

    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --glass-hover-shadow: 0 18px 44px -8px rgba(0, 0, 0, 0.6);

    --card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    --card-border: rgba(255, 255, 255, 0.18);
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);

    --glass-inner: rgba(255, 255, 255, 0.06);
    --menu-bg: rgba(15, 23, 42, 0.94);
    --field-bg: rgba(30, 41, 59, 0.8);              /* sample: bg-slate-800/80 */
    --field-bg-focus: rgba(30, 41, 59, 0.98);
    --field-border: rgba(255, 255, 255, 0.1);
    --nav-border: rgba(255, 255, 255, 0.1);
    --band-bg: rgba(0, 0, 0, 0.2);                  /* sample: bg-black/20     */
    --hero-veil:
        radial-gradient(60% 90% at 50% 0%, rgba(var(--primary_color), 0.10), transparent 70%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.9));
    --scroll-thumb: rgba(148, 163, 184, 0.35);
}

/* Browsers without backdrop-filter: fall back to near-solid surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --glass-bg: rgba(255, 255, 255, 0.94);
        --card-bg: rgba(255, 255, 255, 0.96);
    }
    html.dark,
    html[data-bs-theme="dark"] {
        --glass-bg: rgba(30, 41, 59, 0.94);
        --card-bg: rgba(30, 41, 59, 0.96);
    }
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: rgb(var(--text_color));
    background-color: var(--page-bg-color);
    background-image: var(--page-mesh);
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Soft blurred colour orbs behind the page - this is what gives the glass
   something to blur (same idea as the blurred blob behind the sample's hero card) */
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(100px);
}

body::before {
    width: 520px;
    height: 520px;
    top: -140px;
    left: -120px;
    background: var(--orb-1);
}

body::after {
    width: 560px;
    height: 560px;
    right: -140px;
    bottom: -180px;
    background: var(--orb-2);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.item-title,
.review-author-title,
.blog-post .blog-post-title {
    font-weight: 600;
}

.text-muted,
.section-text,
.item-text {
    color: rgb(var(--text_muted_color));
}

::selection {
    background-color: rgb(var(--primary_color));
    color: rgb(var(--on-primary));
    -webkit-text-fill-color: rgb(var(--on-primary));
}

::-moz-selection {
    background-color: rgb(var(--primary_color));
    color: rgb(var(--on-primary));
}

/* Slim glass scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.6);
    background-clip: padding-box;
}

.simplebar-scrollbar:before {
    background-color: rgb(var(--text_muted_color));
}

/* Keyboard focus ring (sample: .focus-ring) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid rgb(var(--primary_color));
    outline-offset: 2px;
}

hr {
    border-color: rgb(var(--border_color));
    opacity: 1;
}


/* ==========================================================================
   3. GLASS SURFACES
   ========================================================================== */

/* ---- 3a. glass-panel  (sample: .glass-panel + rounded-2xl) ---- */
.box,
.box-shadow,
.card,
.category,
.settings-box,
.dashboard-list,
.error-card,
.dashboard-table,
.accordion-custom .accordion-item {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border_radius);
    box-shadow: var(--glass-shadow);
    color: rgb(var(--text_color));
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.accordion-custom .accordion-item {
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border_radius) !important;
    overflow: hidden;
}

.box-bg {
    background: var(--glass-inner);
    box-shadow: none;
}

.card-header,
.card-footer {
    background: var(--glass-inner);
    border-color: rgb(var(--border_color));
}

/* ---- 3b. glass-card  (sample: .glass-card, gradient + stronger blur) ---- */
.home-category,
.review,
.plan,
.cookies {
    background: var(--card-bg);
    -webkit-backdrop-filter: var(--card-blur);
    backdrop-filter: var(--card-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--border_radius);
    box-shadow: var(--card-shadow);
}

/* ---- 3c. hover lift  (sample: hover:-translate-y-1) ---- */
.item:hover,
.home-category:hover,
.review:hover,
.category:hover,
.box-shadow:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-hover-shadow);
}

/* Dashboard blocks stay put: no lift, but keep a real border */
.dashboard-box,
.dashboard-counter {
    border: 1px solid var(--glass-border);
}

/* ---- 3d. Card internals ---- */
.item-img img {
    border-radius: var(--radius-field);
    border: 1px solid var(--glass-border);
    object-fit: contain;
    background-color: #fff;
}

.item-verified {
    background-color: rgb(var(--elements_background_color));
}

.home-category-icon {
    border-radius: var(--border_radius);
    background-color: rgba(var(--primary_color), 0.14);
    border: 1px solid rgba(var(--primary_color), 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.home-category-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.review-author-img img,
.user-avatar img {
    border-radius: 50%;
}

.item-review-reply,
.item-review-action,
.item-review-action:focus {
    background-color: var(--glass-inner) !important;
    border-color: var(--glass-border);
}

.sign-option {
    background: var(--glass-inner);
    border-radius: var(--radius-field);
}

.sign-option:has(input:checked) {
    background-color: rgba(var(--primary_color), 0.12);
}

.plan.featured {
    border-color: rgba(var(--primary_color), 0.7);
    box-shadow: 0 0 0 1px rgba(var(--primary_color), 0.5), 0 24px 50px -14px rgba(var(--primary_color), 0.45);
}

/* Blog cards */
.blog-post:not(.blog-post-single) {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    box-shadow: var(--glass-shadow);
    padding: 12px;
}

.blog-post:not(.blog-post-single):hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-hover-shadow);
}

.blog-post .blog-post-header {
    border-radius: var(--border_radius);
}

.blog-post .blog-post-body {
    padding: 20px 12px 8px;
}

.blog-post .blog-post-category {
    border-radius: 999px;
    color: rgb(var(--on-primary));
}

.plan .plan-badge {
    color: rgb(var(--on-primary));
}

/* Alternating band behind the reviews section (sample: bg-white/50 border-y) */
.section:has(.reviews-swiper) {
    background: var(--band-bg);
    border-block: 1px solid var(--nav-border);
}

/* Room for the lift + shadow inside the swipers' overflow clipping */
.reviews-swiper {
    padding-block: 12px 36px;
    margin-block: -12px -36px;
}


/* ==========================================================================
   4. NAVBAR
   ========================================================================== */

/* Glass sits on a pseudo-element so the navbar itself never gets a
   backdrop-filter (that would trap the fixed mobile menu inside the bar). */
.nav-bar,
.nav-bar.nav-bar-bg {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--nav-border);
}

.nav-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}

.nav-bar .link {
    font-weight: 500;
    font-size: 0.95rem;
}

@media (min-width: 1400px) {
    .nav-bar .link {
        padding: 8px 16px;
        border-radius: 999px;
    }
    .nav-bar .link:not(:last-child) {
        margin-right: 4px;
    }
    .nav-bar .link:hover {
        background: rgba(var(--primary_color), 0.14);
    }
}

.nav-bar .link-btn .btn {
    font-size: 0.92rem;
}

/* Mobile slide-in menu */
@media (max-width: 1399.98px) {
    .nav-bar .nav-bar-menu-inner {
        background: var(--menu-bg);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border-left: 1px solid var(--glass-border);
        box-shadow: var(--card-shadow);
    }
    .nav-bar .nav-bar-menu .overlay {
        background-color: rgba(15, 23, 42, 0.25);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
}

/* The nav links / menu button carry inline style="color:black!Important".
   Inline !important can't be beaten from CSS, so in dark mode we flip them. */
html.dark .nav-bar span[style*="black"],
html.dark .nav-bar .nav-bar-menu-btn[style*="black"],
html[data-bs-theme="dark"] .nav-bar span[style*="black"],
html[data-bs-theme="dark"] .nav-bar .nav-bar-menu-btn[style*="black"] {
    filter: invert(1);
}


/* ==========================================================================
   5. HERO + SEARCH
   ========================================================================== */

.header {
    background-color: transparent;
    border-bottom: 1px solid var(--nav-border);
}

/* Frosted veil over the hero photo */
.header.header-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-veil);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.header-bg {
    background-color: transparent;
}

.header-title {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.4rem);
    color: var(--bs-heading-color);
}

.header-text {
    color: rgb(var(--text_muted_color));
    font-weight: 400;
    line-height: 1.7;
}

.header-sm .header-title {
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

.header-search .search-input input {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--card-blur);
    backdrop-filter: var(--card-blur);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    color: rgb(var(--text_color));
}

.header-search .search-input input:focus {
    background: var(--field-bg-focus);
    border-color: rgb(var(--primary_color));
    box-shadow: 0 0 0 4px rgba(var(--primary_color), 0.22), var(--card-shadow);
}

.header-search .search-input .icon {
    background-image: linear-gradient(135deg, rgb(var(--primary_color)), rgb(var(--accent-2)));
    box-shadow: 0 8px 20px -6px rgba(var(--primary_color), 0.6);
}

.header-search .search-input .icon i {
    color: rgb(var(--on-primary));
}

/* Search result dropdowns */
.search .search-results {
    background: var(--menu-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 0 0 var(--border_radius) var(--border_radius);
    box-shadow: var(--card-shadow);
}

.header-search .search-results {
    border-top: 1px solid rgb(var(--border_color));
    box-shadow: var(--card-shadow);
}

.search .search-item .search-item-title {
    color: rgb(var(--text_color));
    font-weight: 600;
}

.search .search-item:hover,
.search .search-item:hover .item-verified,
.search .search-action:hover {
    background-color: rgba(var(--primary_color), 0.1);
}


/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

.section-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem);
    color: var(--bs-heading-color);
}

.section-text {
    max-width: 62ch;
}

/* Carousel arrows -> glass circles */
.swiper-actions .swiper-button-prev,
.swiper-actions .swiper-button-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    color: rgb(var(--text_color));
}

.swiper-actions .swiper-button-prev:hover,
.swiper-actions .swiper-button-next:hover {
    background-image: linear-gradient(135deg, rgb(var(--primary_color)), rgb(var(--accent-2)));
    border-color: transparent;
    color: rgb(var(--on-primary));
}


/* ==========================================================================
   7. BUTTONS  (sample: rounded-full, gradient CTA, glass secondary, glow)
   ========================================================================== */

.btn {
    font-family: var(--font-sans);
    font-weight: 600;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease,
                color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.btn:not(.btn-reset) {
    border-radius: 999px;
}

/* Primary - gradient fill + coloured glow */
.btn.btn-primary,
.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:hover {
    background-color: #D7D101;
    border-color: transparent;
    color: rgb(var(--on-primary));
    box-shadow: 0 10px 25px -8px rgba(var(--primary_color), 0.6) !important;
}

.btn.btn-primary:hover,
.btn.btn-business:hover {
    transform: translateY(-1px) scale(1.04);
    opacity: 1;
    filter: brightness(1.04);
}

.btn.btn-business {
    background-color: #01ADB4;
    box-shadow: 0 10px 25px -8px rgba(var(--business_button_color), 0.55) !important;
}

.btn.btn-secondary {
    box-shadow: 0 10px 25px -10px rgba(15, 23, 42, 0.5) !important;
}

/* Outline / light - glass secondary button */
.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.btn.btn-outline-light,
.btn.btn-light {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: rgb(var(--text_color)) !important;
    box-shadow: var(--glass-shadow) !important;
}

.btn.btn-outline-primary {
    border-color: rgba(var(--primary_color), 0.65);
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active,
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus,
.btn.btn-outline-light:hover,
.btn.btn-light:hover,
.btn.btn-light:focus {
    background-image: linear-gradient(135deg, rgb(var(--primary_color)), rgb(var(--accent-2)));
    background-color: rgb(var(--primary_color));
    border-color: transparent;
    color: rgb(var(--on-primary)) !important;
    transform: translateY(-1px);
}

.btn.btn-outline-primary i,
.btn.btn-outline-primary svg {
    color: inherit;
}

.btn-social,
.btn-soft,
.btn-soft:hover,
.btn-social:hover,
.btn-social:focus,
.btn-social:active {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    color: rgb(var(--text_color));
    box-shadow: var(--glass-shadow);
}

.btn-close {
    border-radius: 50%;
}

html.dark .btn-close,
html[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dashboard-btn,
.dashboard-btn-bg {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-field);
}

.dashboard-btn:hover {
    background-color: rgba(var(--primary_color), 0.2);
}

.tags .tag {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: rgb(var(--text_color));
    box-shadow: var(--glass-shadow);
}

.tags .tag.tag-primary {
    border-color: rgba(var(--primary_color), 0.7);
}

.badge {
    border-radius: 999px;
    font-weight: 600;
}

.custom-tab {
    border-radius: 999px;
}

.page-item .page-link {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-field) !important;
    color: rgb(var(--text_color));
    font-weight: 500;
}

.page-item .page-link:hover,
.page-item.active .page-link {
    background-image: linear-gradient(135deg, rgb(var(--primary_color)), rgb(var(--accent-2)));
    border-color: transparent;
    color: rgb(var(--on-primary));
}

.page-item[disabled] .page-link {
    background: var(--glass-inner);
    background-image: none;
    color: rgb(var(--text_muted_color));
}

.plan-switcher .btn {
    background: var(--glass-bg);
}

.plan-switcher .btn.active {
    background: rgba(var(--primary_color), 0.18);
}


/* ==========================================================================
   8. FORMS  (sample: rounded-xl, bg-white/80 | slate-800/80, focus ring)
   ========================================================================== */

.form-control,
.form-select,
.bootstrap-tagsinput {
    font-family: var(--font-sans);
    background-color: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-field);
    color: rgb(var(--text_color));
}

.form-control:focus,
.form-select:focus,
.bootstrap-tagsinput.focus {
    background-color: var(--field-bg-focus);
    border-color: rgb(var(--primary_color));
    color: rgb(var(--text_color));
    box-shadow: 0 0 0 3px rgba(var(--primary_color), 0.25);
}

.form-control:disabled,
.form-control[readonly],
.form-select[readonly] {
    background-color: var(--glass-inner) !important;
    opacity: 0.8;
}

.form-control::placeholder {
    color: rgb(var(--text_muted_color));
    opacity: 0.75;
}

.form-control::file-selector-button {
    border-radius: 999px;
}

.form-check-input:not(:checked) {
    background-color: var(--field-bg);
    border-color: var(--field-border);
}

.form-check-input:checked {
    border-color: rgb(var(--primary_color));
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--primary_color), 0.25);
}

.input-group-text {
    background: var(--glass-inner);
    border-color: var(--field-border);
    color: rgb(var(--text_muted_color));
}

/* Search-style pill inputs with an absolutely positioned button */
.input-group-absolute input,
.input-group-absolute .btn,
.input-group.custom .form-control,
.input-group.custom button {
    border-radius: 999px !important;
}

/* Dark-mode dropdown arrow */
html.dark .form-select,
html[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select option {
    background: rgb(var(--elements_background_color));
    color: rgb(var(--text_color));
}

/* Range slider (sample: input[type=range]) */
.form-range {
    background: transparent;
}

.form-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, rgb(var(--primary_color)), rgb(var(--accent-2)));
}

.form-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, rgb(var(--primary_color)), rgb(var(--accent-2)));
}

.form-range::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid rgb(var(--primary_color));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.form-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid rgb(var(--primary_color));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* bootstrap-select (searchable selects) */
.bootstrap-select .btn {
    background-color: var(--field-bg) !important;
    border: 1px solid var(--field-border) !important;
    border-radius: var(--radius-field) !important;
    color: rgb(var(--text_color)) !important;
}

.bootstrap-select .btn:focus,
.bootstrap-select .btn:active {
    border-color: rgb(var(--primary_color)) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary_color), 0.25) !important;
}

.bootstrap-select .btn:hover {
    border-color: var(--field-border);
}

.bootstrap-select .btn::after {
    display: none;
}

html.dark .bootstrap-select .btn,
html[data-bs-theme="dark"] .bootstrap-select .btn {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}


/* ==========================================================================
   9. ACCORDION / FAQ  (sample: <details class="glass-panel rounded-2xl">)
   ========================================================================== */

.accordion-custom {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: rgb(var(--text_color));
    --bs-accordion-btn-color: rgb(var(--text_color));
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: rgb(var(--text_color));
}

.accordion-custom .accordion-item:hover {
    box-shadow: var(--glass-hover-shadow);
}

.accordion-custom .accordion-button {
    background-color: transparent;
    color: rgb(var(--text_color));
    font-weight: 600;
    border-radius: var(--border_radius);
}

.accordion-custom .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: rgb(var(--text_color));
}

.accordion-custom .accordion-button .accordion-button-icon {
    background: var(--glass-inner);
    border: 1px solid var(--glass-border);
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.accordion-custom .accordion-button:not(.collapsed) .accordion-button-icon {
    background-image: linear-gradient(135deg, rgb(var(--primary_color)), rgb(var(--accent-2)));
    border-color: transparent;
    color: rgb(var(--on-primary));
    transform: rotate(180deg);
}

.accordion-custom .accordion-body {
    border-top: 1px solid rgb(var(--border_color));
    color: rgb(var(--text_muted_color));
    line-height: 1.75;
}

.filters-accordion .accordion-item,
.dashboard-accordion .accordion-item {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

.filters-accordion .accordion-button:not(.collapsed),
.dashboard-accordion .accordion-button:not(.collapsed) {
    background-color: transparent;
}


/* ==========================================================================
   10. DROPDOWNS, MODALS, TOOLTIPS, COOKIES, ALERTS
   ========================================================================== */

.drop-down .drop-down-menu,
.dropdown-menu,
.bootstrap-select .dropdown-menu,
.custom-drop .dropdown-menu {
    --bs-dropdown-bg: transparent;
    --bs-dropdown-color: rgb(var(--text_color));
    --bs-dropdown-link-color: rgb(var(--text_color));
    --bs-dropdown-link-hover-color: rgb(var(--text_color));
    --bs-dropdown-link-hover-bg: rgba(var(--primary_color), 0.12);
    background: var(--menu-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border_radius);
    box-shadow: var(--card-shadow);
}

.drop-down .drop-down-menu .drop-down-item,
.dropdown-item,
.bootstrap-select .dropdown-item,
.custom-drop .dropdown-menu .dropdown-item {
    border-radius: var(--radius-field);
    color: rgb(var(--text_color));
}

.dropdown-item:hover,
.dropdown-item:focus,
.bootstrap-select .dropdown-item:hover {
    background-color: rgba(var(--primary_color), 0.14);
    color: rgb(var(--text_color));
}

.custom-drop .dropdown-btn {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

/* Modals */
.modal-content {
    --bs-modal-bg: transparent;
    --bs-modal-color: rgb(var(--text_color));
    background: var(--menu-bg);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: rgb(var(--border_color));
}

.modal-backdrop.show {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Tooltips + cookie banner */
.tooltip-inner,
.tool-tip {
    background: var(--menu-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-field);
    box-shadow: var(--card-shadow);
}

.cookies {
    background: var(--menu-bg);
    border-radius: var(--radius-card);
}

/* Alerts */
.alert {
    border-radius: var(--border_radius);
    border-width: 1px;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

html.dark .alert.alert-danger,
html[data-bs-theme="dark"] .alert.alert-danger {
    background-color: rgba(244, 67, 54, 0.14);
    color: #fecaca;
}
html.dark .alert.alert-success,
html[data-bs-theme="dark"] .alert.alert-success {
    background-color: rgba(76, 175, 80, 0.14);
    color: #bbf7d0;
}
html.dark .alert.alert-primary,
html[data-bs-theme="dark"] .alert.alert-primary {
    background-color: rgba(59, 130, 246, 0.16);
    color: #bfdbfe;
}
html.dark .alert.alert-warning,
html[data-bs-theme="dark"] .alert.alert-warning {
    background-color: rgba(245, 158, 11, 0.14);
    color: #fde68a;
}
html.dark .alert.alert-info,
html[data-bs-theme="dark"] .alert.alert-info {
    background-color: rgba(14, 165, 233, 0.14);
    color: #bae6fd;
}

/* Bootstrap utility classes that would otherwise stay opaque white in dark mode */
html.dark .bg-white,
html.dark .bg-light,
html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light {
    background-color: var(--glass-bg) !important;
}


/* ==========================================================================
   11. TABLES + DASHBOARD
   ========================================================================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: rgb(var(--text_color));
    --bs-table-border-color: rgb(var(--border_color));
    --bs-table-striped-bg: rgba(148, 163, 184, 0.08);
    --bs-table-striped-color: rgb(var(--text_color));
    --bs-table-hover-bg: rgba(var(--primary_color), 0.07);
    --bs-table-hover-color: rgb(var(--text_color));
}

.table-striped thead th,
.dashboard-table table thead th,
.dashboard-table table tbody td,
.table-striped tr:nth-child(odd) .dropdown-btn {
    background-color: transparent !important;
}

.dashboard-table table thead th {
    background-color: var(--glass-inner) !important;
    border-bottom: 1px solid rgb(var(--border_color));
    font-weight: 600;
}

.dashboard-table table tbody tr:not(:last-child) td {
    border-bottom: 1px solid rgb(var(--border_color));
}

.dashboard-table table th:not(:last-child),
.dashboard-table table td:not(:last-child) {
    border-inline-end: 1px solid rgb(var(--border_color));
}

.dashboard-table table tbody tr:hover td {
    background-color: rgba(var(--primary_color), 0.06) !important;
}

.table-search {
    border-bottom: 1px solid rgb(var(--border_color));
}

.settings-table table {
    background-color: var(--glass-inner);
}

/* Top bar: glass on a pseudo-element (keeps fixed/absolute children intact) */
.dashboard-nav {
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid var(--nav-border);
}

.dashboard-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}

.dashboard-footer {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--nav-border);
    box-shadow: none;
    color: rgb(var(--text_muted_color));
}

/* Sidebar stays a dark glass slab in both themes (its text is white) */
.dashboard-sidebar .dashboard-sidebar-header,
.dashboard-sidebar .dashboard-sidebar-inner {
    background: rgba(15, 23, 42, 0.8);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-sidebar-link .dashboard-sidebar-link-title {
    border-radius: var(--radius-field);
}

.dashboard-sidebar .overlay {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.dashboard-counter .dashboard-counter-icon {
    border-radius: var(--border_radius);
    border: 1px solid rgba(var(--primary_color), 0.3);
}

.noti-lg .noti-item {
    background-color: transparent;
}

.noti-lg .noti-item.unread {
    background-color: rgba(var(--primary_color), 0.1);
}


/* ==========================================================================
   12. FOOTER  (sample: <footer class="glass-panel border-t">)
   ========================================================================== */

.footer {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--nav-border);
    box-shadow: var(--glass-shadow);
}

.footer .footer-title .h5,
.footer .footer-title {
    font-weight: 700;
}

.footer .footer-links .footer-link a {
    transition: color 0.25s ease, opacity 0.25s ease;
}

.footer .footer-links .footer-link a:hover {
    color: rgb(var(--text_color));
    opacity: 1;
}

.footer .socials .social-btn,
.socials .social-btn {
    background-color: var(--glass-inner);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-field);
    color: rgb(var(--text_color));
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.footer .socials .social-btn:hover,
.socials .social-btn:hover {
    background-image: linear-gradient(135deg, rgb(var(--primary_color)), rgb(var(--accent-2)));
    border-color: transparent;
    color: rgb(var(--on-primary));
    opacity: 1;
    transform: translateY(-2px);
}

.footer-subscribe .form-control {
    background-color: var(--field-bg);
    border: 1px solid var(--field-border);
    color: rgb(var(--text_color));
}


/* ==========================================================================
   13. MOTION PREFERENCES  (sample)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
    html {
        scroll-behavior: auto;
    }
    .item:hover,
    .home-category:hover,
    .review:hover,
    .category:hover,
    .box-shadow:hover,
    .btn:hover {
        transform: none !important;
    }
}