/* ============================================================
   BYOC — Premium Visual Enhancement Layer
   Glassmorphism · 3D Depth · Subtle Animations
   
   IMPORTANT: This file is purely additive.
   It does NOT alter layout, spacing, or functionality.
   ============================================================ */

/* ============================================================
   GLASS DESIGN TOKENS
   All original brand colours preserved — glass variants added
   ============================================================ */
:root {
    /* ── Base Glass Surfaces ── */
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-heavy: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.45);
    --glass-border-subtle: rgba(255, 255, 255, 0.25);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
    --glass-blur: 16px;
    --glass-blur-heavy: 24px;

    /* ── Glass: Accent Green (#A8D5BA) ── */
    --glass-green: rgba(168, 213, 186, 0.35);
    --glass-green-bg: rgba(168, 213, 186, 0.22);
    --glass-green-border: rgba(126, 200, 154, 0.50);
    --glass-green-glow: 0 0 24px rgba(168, 213, 186, 0.40);
    --glass-green-shadow: 0 8px 32px rgba(168, 213, 186, 0.22);

    /* ── Glass: Accent Green Dark (#7EC89A) ── */
    --glass-green-dark: rgba(126, 200, 154, 0.38);
    --glass-green-dark-border: rgba(126, 200, 154, 0.55);
    --glass-green-dark-glow: 0 0 24px rgba(126, 200, 154, 0.45);

    /* ── Glass: Accent Yellow (#F5E6A3) ── */
    --glass-yellow: rgba(245, 230, 163, 0.38);
    --glass-yellow-bg: rgba(245, 230, 163, 0.25);
    --glass-yellow-border: rgba(232, 213, 128, 0.55);
    --glass-yellow-glow: 0 0 24px rgba(245, 230, 163, 0.40);
    --glass-yellow-shadow: 0 8px 32px rgba(245, 230, 163, 0.22);

    /* ── Glass: Accent Yellow Dark (#E8D580) ── */
    --glass-yellow-dark: rgba(232, 213, 128, 0.40);
    --glass-yellow-dark-border: rgba(232, 213, 128, 0.55);

    /* ── Glass: Danger (#E57373 / #D32F2F) ── */
    --glass-danger: rgba(229, 115, 115, 0.30);
    --glass-danger-bg: rgba(229, 115, 115, 0.18);
    --glass-danger-border: rgba(211, 47, 47, 0.45);
    --glass-danger-glow: 0 0 20px rgba(211, 47, 47, 0.30);

    /* ── Glass: Success (#81C784) ── */
    --glass-success: rgba(129, 199, 132, 0.32);
    --glass-success-bg: rgba(129, 199, 132, 0.20);
    --glass-success-border: rgba(76, 175, 80, 0.45);
    --glass-success-glow: 0 0 20px rgba(129, 199, 132, 0.35);

    /* ── Glass: Info (#64B5F6) ── */
    --glass-info: rgba(100, 181, 246, 0.30);
    --glass-info-bg: rgba(100, 181, 246, 0.18);
    --glass-info-border: rgba(33, 150, 243, 0.45);
    --glass-info-glow: 0 0 20px rgba(100, 181, 246, 0.35);

    /* ── Glass: Black (#1A1A1A) ── */
    --glass-black: rgba(26, 26, 26, 0.15);
    --glass-black-bg: rgba(26, 26, 26, 0.10);
    --glass-black-border: rgba(26, 26, 26, 0.22);
    --glass-black-glow: 0 0 16px rgba(26, 26, 26, 0.18);

    /* ── Glass: Gray tones ── */
    --glass-gray-50: rgba(245, 245, 245, 0.70);
    --glass-gray-100: rgba(238, 238, 238, 0.65);
    --glass-gray-200: rgba(224, 224, 224, 0.55);
    --glass-gray-300: rgba(189, 189, 189, 0.45);

    /* ── Glass: Navbar (#F2F8F3) ── */
    --glass-navbar: rgba(242, 248, 243, 0.90);
    --glass-navbar-heavy: rgba(242, 248, 243, 0.98);
    --glass-navbar-border: rgba(168, 213, 186, 0.35);

    /* ── Glass: Footer (#F0F6F1) ── */
    --glass-footer: rgba(240, 246, 241, 0.70);
    --glass-footer-border: rgba(168, 213, 186, 0.30);

    /* ── Glass: Page Header ── */
    --glass-page-header: rgba(245, 250, 246, 0.75);
    --glass-page-header-border: rgba(168, 213, 186, 0.30);

    /* ── Glass: Status Badge Colors ── */
    --glass-status-pending: rgba(230, 81, 0, 0.18);
    --glass-status-confirmed: rgba(21, 101, 192, 0.18);
    --glass-status-packed: rgba(123, 31, 162, 0.18);
    --glass-status-shipped: rgba(245, 127, 23, 0.18);
    --glass-status-delivered: rgba(46, 125, 50, 0.18);
    --glass-status-cancelled: rgba(198, 40, 40, 0.18);

    /* Shimmer / Glow */
    --shimmer-color: rgba(255, 255, 255, 0.6);
    --glow-accent: rgba(168, 213, 186, 0.35);
    --glow-accent-strong: rgba(168, 213, 186, 0.50);

    /* Floating icons */
    --float-icon-color: rgba(168, 213, 186, 0.16);
    --float-icon-stroke: rgba(126, 200, 154, 0.28);

    /* 3D Depth */
    --perspective: 800px;
    --tilt-max: 4deg;
    --depth-shadow: 0 20px 60px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] {
    /* ── Base Glass (dark) ── */
    --glass-bg: rgba(30, 30, 30, 0.6);
    --glass-bg-heavy: rgba(30, 30, 30, 0.78);
    --glass-border: rgba(110, 231, 183, 0.12);
    --glass-border-subtle: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.4);

    /* ── Glass: Accent Green (dark) ── */
    --glass-green: rgba(110, 231, 183, 0.14);
    --glass-green-bg: rgba(110, 231, 183, 0.08);
    --glass-green-border: rgba(110, 231, 183, 0.22);
    --glass-green-glow: 0 0 20px rgba(110, 231, 183, 0.18);
    --glass-green-shadow: 0 8px 32px rgba(110, 231, 183, 0.08);
    --glass-green-dark: rgba(110, 231, 183, 0.16);
    --glass-green-dark-border: rgba(110, 231, 183, 0.28);
    --glass-green-dark-glow: 0 0 20px rgba(110, 231, 183, 0.22);

    /* ── Glass: Yellow (dark — brighter for visibility) ── */
    --glass-yellow: rgba(251, 191, 36, 0.16);
    --glass-yellow-bg: rgba(251, 191, 36, 0.08);
    --glass-yellow-border: rgba(251, 191, 36, 0.28);
    --glass-yellow-glow: 0 0 20px rgba(251, 191, 36, 0.18);
    --glass-yellow-shadow: 0 8px 32px rgba(251, 191, 36, 0.08);
    --glass-yellow-dark: rgba(251, 191, 36, 0.18);
    --glass-yellow-dark-border: rgba(251, 191, 36, 0.30);

    /* ── Glass: Danger (dark) ── */
    --glass-danger: rgba(229, 115, 115, 0.14);
    --glass-danger-bg: rgba(229, 115, 115, 0.08);
    --glass-danger-border: rgba(229, 115, 115, 0.25);
    --glass-danger-glow: 0 0 16px rgba(229, 115, 115, 0.18);

    /* ── Glass: Success (dark) ── */
    --glass-success: rgba(129, 199, 132, 0.14);
    --glass-success-bg: rgba(129, 199, 132, 0.08);
    --glass-success-border: rgba(129, 199, 132, 0.25);
    --glass-success-glow: 0 0 16px rgba(129, 199, 132, 0.18);

    /* ── Glass: Info (dark) ── */
    --glass-info: rgba(100, 181, 246, 0.14);
    --glass-info-bg: rgba(100, 181, 246, 0.08);
    --glass-info-border: rgba(100, 181, 246, 0.25);
    --glass-info-glow: 0 0 16px rgba(100, 181, 246, 0.18);

    /* ── Glass: Black → light tint in dark mode ── */
    --glass-black: rgba(245, 245, 245, 0.06);
    --glass-black-bg: rgba(245, 245, 245, 0.04);
    --glass-black-border: rgba(245, 245, 245, 0.10);
    --glass-black-glow: 0 0 16px rgba(245, 245, 245, 0.08);

    /* ── Glass: Gray tones (dark) ── */
    --glass-gray-50: rgba(26, 26, 26, 0.6);
    --glass-gray-100: rgba(30, 30, 30, 0.55);
    --glass-gray-200: rgba(45, 45, 45, 0.45);
    --glass-gray-300: rgba(51, 51, 51, 0.35);

    /* ── Glass: Navbar (dark #161E19) ── */
    --glass-navbar: rgba(22, 30, 25, 0.85);
    --glass-navbar-heavy: rgba(22, 30, 25, 0.95);
    --glass-navbar-border: rgba(110, 231, 183, 0.10);

    /* ── Glass: Footer (dark #141C17) ── */
    --glass-footer: rgba(20, 28, 23, 0.65);
    --glass-footer-border: rgba(110, 231, 183, 0.08);

    /* ── Glass: Page Header (dark) ── */
    --glass-page-header: rgba(26, 26, 26, 0.65);
    --glass-page-header-border: rgba(45, 45, 45, 0.50);

    /* ── Glass: Status Badge Colors (dark) ── */
    --glass-status-pending: rgba(230, 81, 0, 0.12);
    --glass-status-confirmed: rgba(21, 101, 192, 0.12);
    --glass-status-packed: rgba(123, 31, 162, 0.12);
    --glass-status-shipped: rgba(245, 127, 23, 0.12);
    --glass-status-delivered: rgba(46, 125, 50, 0.12);
    --glass-status-cancelled: rgba(198, 40, 40, 0.12);

    --shimmer-color: rgba(255, 255, 255, 0.05);
    --glow-accent: rgba(110, 231, 183, 0.12);
    --glow-accent-strong: rgba(110, 231, 183, 0.22);
    --float-icon-color: rgba(110, 231, 183, 0.06);
    --float-icon-stroke: rgba(110, 231, 183, 0.12);
    --depth-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   GLOBAL PAGE ENTRANCE ANIMATION
   ============================================================ */
@keyframes premiumPageFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body {
    /* Removed premiumPageFade animation because transform on body breaks position:fixed for Bootstrap modals */
}

/* ============================================================
   FLOATING 3D BACKGROUND ICONS CONTAINER
   ============================================================ */
.byoc-floating-icons {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.byoc-floating-icon {
    position: absolute;
    opacity: 0;
    animation: floatDrift linear infinite;
    will-change: transform, opacity;
    filter: blur(0.5px);
}

.byoc-floating-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--float-icon-color);
    stroke: var(--float-icon-stroke);
    stroke-width: 1;
}

@keyframes floatDrift {
    0% {
        opacity: 0;
        transform: translateY(100vh) rotate(0deg) scale(0.8);
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translateY(-10vh) rotate(360deg) scale(1.1);
    }
}

@keyframes floatDriftAlt {
    0% {
        opacity: 0;
        transform: translateY(100vh) rotate(0deg) scale(0.9) translateX(-30px);
    }
    10% {
        opacity: 0.5;
    }
    50% {
        transform: translateY(50vh) rotate(180deg) scale(1) translateX(30px);
    }
    90% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translateY(-10vh) rotate(360deg) scale(0.85) translateX(-20px);
    }
}

@keyframes floatDriftSway {
    0% {
        opacity: 0;
        transform: translateY(100vh) rotate(-15deg) scale(0.85);
    }
    10% {
        opacity: 0.45;
    }
    25% {
        transform: translateY(75vh) rotate(10deg) scale(0.95) translateX(20px);
    }
    50% {
        transform: translateY(50vh) rotate(-10deg) scale(1) translateX(-15px);
    }
    75% {
        transform: translateY(25vh) rotate(15deg) scale(0.95) translateX(25px);
    }
    90% {
        opacity: 0.45;
    }
    100% {
        opacity: 0;
        transform: translateY(-10vh) rotate(-5deg) scale(0.9) translateX(0);
    }
}

/* ============================================================
   NAVBAR — OPACITY ENHANCEMENT (Optimized for Scroll Performance)
   ============================================================ */
.tn-navbar {
    /* Removed backdrop-filter to prevent severe scroll lag on some devices */
    background: var(--glass-navbar-heavy) !important;
    border-bottom-color: var(--glass-navbar-border) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.tn-navbar.scrolled {
    box-shadow: var(--glass-shadow), 0 1px 0 var(--glass-border);
}

/* Glass shine on navbar brand */
.tn-navbar .navbar-brand::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--shimmer-color), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.tn-navbar .navbar-brand {
    position: relative;
    overflow: hidden;
}

.tn-navbar .navbar-brand:hover::after {
    left: 150%;
}

/* Nav link hover glow */
.tn-navbar .nav-link::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--glow-accent-strong);
    border-radius: 1px;
    transition: width 0.3s ease, left 0.3s ease;
    box-shadow: 0 0 8px var(--glow-accent);
}

.tn-navbar .nav-link:hover::before {
    width: calc(100% - 2rem);
    left: 1rem;
}

.tn-navbar .nav-link.active::before {
    display: none; /* Don't double up with existing active indicator */
}

/* Search input glass */
.tn-nav-search input {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    transition: all 0.3s ease;
}

.tn-nav-search input:focus {
    background: var(--glass-bg-heavy) !important;
    box-shadow: 0 0 0 3px var(--glow-accent), var(--glass-shadow);
}

/* ============================================================
   HERO SECTION — GLASS CAPTION & SHIMMER
   ============================================================ */
.tn-hero {
    position: relative;
}

/* Shimmer overlay on hero */
.tn-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.03),
        transparent
    );
    z-index: 2;
    pointer-events: none;
    animation: heroShimmer 8s ease-in-out infinite;
}

@keyframes heroShimmer {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

/* Glassmorphic caption overlay */
.tn-hero .carousel-caption {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   PRODUCT CARDS — 3D DEPTH & GLASS
   ============================================================ */
.tn-product-card {
    perspective: var(--perspective);
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border-color: var(--glass-border-subtle) !important;
    will-change: transform, box-shadow;
}

/* Glass shimmer sweep on hover */
.tn-product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--shimmer-color),
        transparent
    );
    z-index: 5;
    pointer-events: none;
    transition: left 0.7s ease;
    border-radius: inherit;
}

.tn-product-card:hover::before {
    left: 160%;
}

.tn-product-card:hover {
    box-shadow: var(--depth-shadow), 0 0 20px var(--glow-accent);
    border-color: var(--glass-border) !important;
}

/* 3D tilt will be handled by JS — these classes are applied dynamically */
.tn-product-card.is-tilting {
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Glass effect on image wrapper */
.tn-product-card .card-img-wrapper {
    position: relative;
    overflow: hidden;
}

.tn-product-card .card-img-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, var(--glass-bg), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

.tn-product-card:hover .card-img-wrapper::after {
    opacity: 0.5;
}

/* Card action buttons glass */
.tn-product-card .card-actions .btn-tn-icon {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.25s ease;
}

.tn-product-card .card-actions .btn-tn-icon:hover {
    background: var(--glass-bg-heavy) !important;
    color: var(--black) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

/* Stock badge glass — color-matched */
.tn-stock-badge {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tn-stock-badge.in-stock {
    background: var(--glass-success-bg) !important;
    border-color: var(--glass-success-border) !important;
    box-shadow: var(--glass-success-glow);
}

.tn-stock-badge.low-stock {
    background: var(--glass-yellow-bg) !important;
    border-color: var(--glass-yellow-border) !important;
    box-shadow: var(--glass-yellow-glow);
}

.tn-stock-badge.out-of-stock {
    background: var(--glass-danger-bg) !important;
    border-color: var(--glass-danger-border) !important;
    box-shadow: var(--glass-danger-glow);
}

/* ============================================================
   PRODUCT DETAIL — GLASS ACCENTS
   ============================================================ */
.tn-product-detail .product-image {
    position: relative;
    overflow: hidden;
}

.tn-product-detail .product-image::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--glow-accent) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.tn-product-detail .product-image:hover::before {
    opacity: 1;
}

.tn-product-detail .product-image img {
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.tn-product-detail .product-image:hover img {
    transform: scale(1.03);
}

/* ============================================================
   BUTTONS — 3D PRESS & GLOW
   ============================================================ */
.btn-tn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Shine sweep on buttons */
.btn-tn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.btn-tn-primary:hover::after {
    left: 150%;
}

.btn-tn-primary:active {
    transform: translateY(0px) scale(0.97);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Secondary button glass effect */
.btn-tn-secondary {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
}

.btn-tn-secondary:active {
    transform: translateY(0px) scale(0.97);
}

/* Icon buttons glow */
.btn-tn-icon {
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-tn-icon:hover {
    box-shadow: 0 0 12px var(--glow-accent);
}

/* ============================================================
   AUTH PAGES — GLASS CARD & FLOATING ORBS
   ============================================================ */
.tn-auth-page {
    position: relative;
    overflow: hidden;
}

/* Floating gradient orbs for auth page background */
.tn-auth-page::before,
.tn-auth-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
}

.tn-auth-page::before {
    width: 400px;
    height: 400px;
    background: var(--glow-accent-strong);
    top: -100px;
    right: -100px;
    animation: orbFloat1 12s ease-in-out infinite;
}

.tn-auth-page::after {
    width: 350px;
    height: 350px;
    background: rgba(245, 230, 163, 0.2);
    bottom: -80px;
    left: -80px;
    animation: orbFloat2 15s ease-in-out infinite;
}

[data-theme="dark"] .tn-auth-page::before {
    background: rgba(110, 231, 183, 0.08);
}

[data-theme="dark"] .tn-auth-page::after {
    background: rgba(251, 191, 36, 0.06);
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-40px, 30px) scale(1.05); }
    66% { transform: translate(20px, -20px) scale(0.95); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(0.95); }
    66% { transform: translate(-25px, 25px) scale(1.08); }
}

/* Glass auth card — green-tinted glass */
.tn-auth-card {
    position: relative;
    z-index: 1;
    backdrop-filter: blur(var(--glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    background: var(--glass-bg-heavy) !important;
    border: 1px solid var(--glass-green-border);
    box-shadow: var(--glass-green-shadow), var(--glass-green-glow);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.tn-auth-card:hover {
    box-shadow: var(--glass-shadow-hover), var(--glass-green-dark-glow);
    transform: translateY(-2px);
}

/* Glass form inputs */
.tn-auth-card .tn-form-control {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    transition: all 0.3s ease;
}

.tn-auth-card .tn-form-control:focus {
    background: var(--glass-bg-heavy) !important;
    border-color: var(--glass-green-dark-border) !important;
    box-shadow: 0 0 0 3px var(--glass-green), var(--glass-green-glow);
}

/* ============================================================
   CART & WISHLIST ITEMS — GLASS HOVER
   ============================================================ */
.tn-cart-item {
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    border-color: var(--glass-border-subtle) !important;
}

.tn-cart-item:hover {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: var(--glass-border) !important;
    box-shadow: var(--glass-shadow), 0 0 16px var(--glow-accent);
    transform: translateX(4px);
}

/* Cart summary glass — green-tinted */
.tn-cart-summary {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: var(--glass-bg-heavy) !important;
    border-color: var(--glass-green-border) !important;
    box-shadow: var(--glass-green-shadow);
}

/* ============================================================
   ORDER CARDS — SUBTLE GLASS
   ============================================================ */
.tn-order-card {
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    border-color: var(--glass-border-subtle) !important;
}

.tn-order-card:hover {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: var(--glass-border) !important;
    box-shadow: var(--glass-shadow), 0 0 12px var(--glow-accent);
    transform: translateY(-2px);
}

/* Timeline dots glow — handled in color-matched section below */

/* ============================================================
   PROFILE — GLASS HEADER
   ============================================================ */
.tn-profile-header {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: var(--glass-bg-heavy) !important;
    border: 1px solid var(--glass-green-border);
    box-shadow: var(--glass-green-shadow);
}

.tn-profile-avatar {
    box-shadow: var(--glass-green-glow), 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.tn-profile-avatar:hover {
    box-shadow: var(--glass-green-dark-glow), 0 6px 24px rgba(0, 0, 0, 0.12);
    transform: scale(1.05);
}

/* ============================================================
   PAGE HEADER — GLASS DEPTH
   ============================================================ */
.tn-page-header {
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: var(--glass-page-header) !important;
    border-bottom-color: var(--glass-page-header-border) !important;
}

/* Subtle gradient glow at bottom — green accent */
.tn-page-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-green-dark-border), var(--glass-green-border), var(--glass-green-dark-border), transparent);
    pointer-events: none;
}

/* ============================================================
   FILTER PILLS — GLASS STYLE
   ============================================================ */
.tn-filter-pill {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.tn-filter-pill:hover {
    box-shadow: 0 2px 12px var(--glow-accent);
    transform: translateY(-1px);
}

.tn-filter-pill.active {
    background: var(--black) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   SETUP CARDS — 3D DEPTH
   ============================================================ */
.tn-setup-card {
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.tn-setup-card:hover {
    box-shadow: var(--depth-shadow);
}

.tn-setup-card .setup-overlay {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   UPDATE CARDS — GLASS LEFT BORDER GLOW
   ============================================================ */
.tn-update-card {
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
}

.tn-update-card:hover {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: var(--glass-bg) !important;
    box-shadow: var(--glass-shadow);
    transform: translateX(4px);
}

/* ============================================================
   FOOTER — GLASS TOP GLOW BAR
   ============================================================ */
.tn-footer {
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: var(--glass-footer) !important;
}

.tn-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-green-dark-border), var(--glass-green-border), var(--glass-green-dark-border), transparent);
    pointer-events: none;
}

/* Footer link hover glow */
.tn-footer a {
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.tn-footer a:hover {
    text-shadow: 0 0 8px var(--glass-green);
}

/* ============================================================
   TOAST — GLASSMORPHIC
   ============================================================ */
.tn-toast {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    background: var(--glass-bg-heavy) !important;
    color: var(--black) !important;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-hover), 0 0 20px var(--glow-accent);
}

/* ============================================================
   MODALS — FROSTED GLASS BACKDROP
   ============================================================ */
.modal-content {
    backdrop-filter: blur(var(--glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    background: var(--glass-bg-heavy) !important;
    border: 1px solid var(--glass-border);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15), 0 0 40px var(--glow-accent);
}

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

/* ============================================================
   DROPDOWN MENUS — GLASS
   ============================================================ */
.dropdown-menu {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    background: var(--glass-bg-heavy) !important;
    border-color: var(--glass-border) !important;
    box-shadow: var(--glass-shadow-hover);
}

.dropdown-item {
    transition: background 0.2s ease, transform 0.2s ease;
}

.dropdown-item:hover {
    background: var(--glass-bg) !important;
    transform: translateX(2px);
}

/* ============================================================
   COUPON CARDS — GLASS DASHED BORDER
   ============================================================ */
.tn-coupon-card {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    transition: all 0.3s ease;
}

.tn-coupon-card:hover {
    box-shadow: var(--glass-shadow);
    transform: translateY(-1px);
}

/* ============================================================
   EMPTY STATE — FLOATING 3D ICON
   ============================================================ */
.tn-empty-state .empty-icon {
    animation: emptyIconFloat 3s ease-in-out infinite;
}

@keyframes emptyIconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(3deg); }
}

/* ============================================================
   STAT CARDS (Admin) — GLASS DEPTH
   ============================================================ */
.tn-stat-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: var(--glass-bg-heavy) !important;
    border-color: var(--glass-border) !important;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.tn-stat-card:hover {
    box-shadow: var(--glass-shadow-hover), 0 0 16px var(--glow-accent);
    transform: translateY(-3px);
}

.tn-stat-card .stat-icon {
    box-shadow: 0 0 12px var(--glow-accent);
}

/* ============================================================
   ADMIN TABLE — GLASS
   ============================================================ */
.tn-table {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: var(--glass-bg-heavy) !important;
}

.tn-table tbody tr {
    transition: background 0.2s ease, transform 0.2s ease;
}

.tn-table tbody tr:hover {
    background: var(--glass-bg) !important;
}

/* ============================================================
   ADMIN SIDEBAR — GLASS
   ============================================================ */
.tn-admin-sidebar {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    background: var(--glass-bg-heavy) !important;
    border-right: 1px solid var(--glass-border);
}

.tn-admin-sidebar .nav-link:hover {
    background: var(--glass-bg) !important;
}

.tn-admin-sidebar .nav-link.active {
    background: var(--glass-bg) !important;
    border-left-color: var(--glow-accent-strong) !important;
    box-shadow: inset 3px 0 8px var(--glow-accent);
}

/* ============================================================
   REVIEW SECTION — SUBTLE GLASS
   ============================================================ */
.tn-review {
    transition: all 0.25s ease;
}

.tn-review:hover {
    background: var(--glass-bg);
    border-radius: 8px;
    padding-left: 12px;
}

/* ============================================================
   SCROLLBAR — GLASS
   ============================================================ */
::-webkit-scrollbar-track {
    background: var(--glass-bg) !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gray-400), var(--gray-500));
    box-shadow: inset 0 0 4px var(--glow-accent);
}

/* ============================================================
   ALERT GLASS EFFECTS — color-matched
   ============================================================ */
.tn-alert {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.tn-alert-success {
    background: var(--glass-success-bg) !important;
    border-color: var(--glass-success-border) !important;
    box-shadow: var(--glass-success-glow);
}

.tn-alert-error {
    background: var(--glass-danger-bg) !important;
    border-color: var(--glass-danger-border) !important;
    box-shadow: var(--glass-danger-glow);
}

.tn-alert-info {
    background: var(--glass-info-bg) !important;
    border-color: var(--glass-info-border) !important;
    box-shadow: var(--glass-info-glow);
}

/* ============================================================
   STATUS BADGES — GLASS TINTED
   ============================================================ */
.tn-status-badge {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.tn-status-badge.pending {
    background: var(--glass-status-pending) !important;
    box-shadow: 0 0 8px rgba(230, 81, 0, 0.10);
}

.tn-status-badge.confirmed {
    background: var(--glass-status-confirmed) !important;
    box-shadow: 0 0 8px rgba(21, 101, 192, 0.10);
}

.tn-status-badge.packed {
    background: var(--glass-status-packed) !important;
    box-shadow: 0 0 8px rgba(123, 31, 162, 0.10);
}

.tn-status-badge.shipped {
    background: var(--glass-status-shipped) !important;
    box-shadow: 0 0 8px rgba(245, 127, 23, 0.10);
}

.tn-status-badge.delivered {
    background: var(--glass-status-delivered) !important;
    box-shadow: 0 0 8px rgba(46, 125, 50, 0.10);
}

.tn-status-badge.cancelled {
    background: var(--glass-status-cancelled) !important;
    box-shadow: 0 0 8px rgba(198, 40, 40, 0.10);
}

/* ============================================================
   UPDATE CARD TYPE BADGES — GLASS TINTED
   ============================================================ */
.tn-update-type {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.tn-update-type.new-product {
    background: var(--glass-success-bg) !important;
    box-shadow: var(--glass-success-glow);
}

.tn-update-type.price-update {
    background: var(--glass-yellow-bg) !important;
    box-shadow: var(--glass-yellow-glow);
}

.tn-update-type.spec-update {
    background: var(--glass-info-bg) !important;
    box-shadow: var(--glass-info-glow);
}

.tn-update-type.restock {
    background: rgba(171, 71, 188, 0.10) !important;
    box-shadow: 0 0 12px rgba(171, 71, 188, 0.15);
}

/* ============================================================
   UPDATE CARD HOVER — color-matched glass border
   ============================================================ */
.tn-update-card.new-product:hover {
    border-left-color: var(--glass-success-border) !important;
    box-shadow: var(--glass-success-glow) !important;
}

.tn-update-card.price-update:hover {
    border-left-color: var(--glass-yellow-border) !important;
    box-shadow: var(--glass-yellow-glow) !important;
}

.tn-update-card.spec-update:hover {
    border-left-color: var(--glass-info-border) !important;
    box-shadow: var(--glass-info-glow) !important;
}

.tn-update-card.restock:hover {
    border-left-color: rgba(171, 71, 188, 0.35) !important;
    box-shadow: 0 0 16px rgba(171, 71, 188, 0.18) !important;
}

/* ============================================================
   BUTTONS — COLOR-MATCHED GLASS
   ============================================================ */
.btn-tn-primary:hover {
    box-shadow: var(--glass-yellow-glow);
}

.btn-tn-accent {
    position: relative;
    overflow: hidden;
}

.btn-tn-accent:hover {
    box-shadow: var(--glass-green-dark-glow);
}

.btn-tn-danger:hover {
    box-shadow: var(--glass-danger-glow);
}

.btn-tn-cancel:hover {
    box-shadow: var(--glass-danger-glow);
}

.btn.is-added,
.btn-tn-icon.is-added {
    box-shadow: var(--glass-green-glow);
}

/* ============================================================
   FORM CONTROL FOCUS — GREEN GLASS
   ============================================================ */
.tn-form-control:focus {
    box-shadow: 0 0 0 3px var(--glass-green), var(--glass-green-glow) !important;
}

/* ============================================================
   COUPON CARD — YELLOW GLASS
   ============================================================ */
.tn-coupon-card .coupon-code {
    text-shadow: 0 0 6px var(--glass-yellow);
}

/* ============================================================
   TIMELINE DOTS — COLOR-MATCHED GLASS
   ============================================================ */
.tn-timeline-step.completed .step-dot {
    box-shadow: var(--glass-green-dark-glow), 0 0 4px rgba(0, 0, 0, 0.1) !important;
}

.tn-timeline-step.active .step-dot {
    box-shadow: var(--glass-black-glow), 0 0 4px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================
   FILTER PILL ACTIVE — BLACK GLASS
   ============================================================ */
.tn-filter-pill.active {
    box-shadow: var(--glass-black-glow) !important;
}

/* ============================================================
   CART BADGE — GREEN GLASS
   ============================================================ */
.tn-cart-badge .badge {
    box-shadow: var(--glass-green-dark-glow);
}

/* ============================================================
   SECTION REVEAL ANIMATION (applied by JS via IntersectionObserver)
   ============================================================ */
@keyframes glassReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.premium-reveal {
    animation: glassReveal 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* ============================================================
   SECTION LINE — ANIMATED GLOW
   ============================================================ */
.section-line {
    position: relative;
    overflow: hidden;
}

.section-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--glow-accent-strong), transparent);
    animation: sectionLineGlow 3s ease-in-out infinite;
}

@keyframes sectionLineGlow {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

/* ============================================================
   IMAGE UPLOAD AREA — GLASS
   ============================================================ */
.tn-image-upload-area {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    transition: all 0.3s ease;
}

.tn-image-upload-area:hover {
    box-shadow: var(--glass-shadow), 0 0 16px var(--glow-accent);
    border-color: var(--glow-accent-strong) !important;
}

/* ============================================================
   QUANTITY CONTROLS — GLASS
   ============================================================ */
.tn-quantity-control,
.tn-quantity-control-live {
    border-color: var(--glass-border) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ============================================================
   ACCESSIBILITY — RESPECT REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .byoc-floating-icons {
        display: none !important;
    }

    body {
        animation: none !important;
    }
}

/* ============================================================
   MOBILE — REDUCE HEAVY EFFECTS
   ============================================================ */
@media (max-width: 768px) {
    .byoc-floating-icons {
        display: none;
    }

    .tn-hero::after {
        display: none;
    }

    .tn-auth-page::before,
    .tn-auth-page::after {
        width: 200px;
        height: 200px;
    }

    .tn-hero .carousel-caption {
        padding: 1.25rem 1.5rem;
    }
}