/* =========================================
   B-ZORA
   PREMIUM VISUAL FOUNDATION
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');


/* =========================================
   ROOT DESIGN SYSTEM
   ========================================= */

:root {

    --bz-black: #050507;
    --bz-dark: #0a0a0f;
    --bz-dark-2: #101018;

    --bz-white: #ffffff;
    --bz-text: #f4f4f7;
    --bz-muted: #9b9ba8;

    --bz-primary: #7c5cff;
    --bz-secondary: #00e5ff;

    --bz-gradient:
        linear-gradient(
            135deg,
            #7c5cff,
            #00e5ff
        );

    --bz-card:
        rgba(255, 255, 255, 0.055);

    --bz-border:
        rgba(255, 255, 255, 0.09);

    --bz-radius: 24px;

    --bz-shadow:
        0 25px 80px rgba(0, 0, 0, 0.35);
}


/* =========================================
   RESET
   ========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: 'DM Sans', sans-serif;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(124, 92, 255, 0.12),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 10%,
            rgba(0, 229, 255, 0.08),
            transparent 30%
        ),

        var(--bz-black);

    color: var(--bz-text);

    line-height: 1.6;

    overflow-x: hidden;
}


/* =========================================
   TYPOGRAPHY
   ========================================= */

h1,
h2,
h3,
h4 {

    font-family: 'Space Grotesk', sans-serif;

    line-height: 1.1;
}


h1 {
    font-size: clamp(48px, 7vw, 92px);
}


h2 {
    font-size: clamp(36px, 5vw, 64px);
}


h3 {
    font-size: 24px;
}


p {
    color: var(--bz-muted);
}


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


ul {
    list-style: none;
}


img {
    max-width: 100%;
    display: block;
}


button {
    font-family: inherit;
    cursor: pointer;
    border: none;
}


/* =========================================
   GLOBAL SECTION
   ========================================= */

section {

    position: relative;

    width: 100%;

    padding:
        120px
        7%;
}


.section-heading {

    max-width: 780px;

    margin:
        0 auto 70px;

    text-align: center;
}


.section-heading h2 {

    margin:
        18px 0 22px;
}


.section-heading h2 span {

    display: block;

    background:
        var(--bz-gradient);

    -webkit-background-clip: text;

    -webkit-text-fill-color:
        transparent;
}


.section-heading p {

    max-width: 650px;

    margin: auto;

    font-size: 18px;
}


/* =========================================
   SECTION BADGE
   ========================================= */

.section-badge {

    display: inline-flex;

    align-items: center;

    padding:
        8px 15px;

    border:
        1px solid
        var(--bz-border);

    border-radius: 100px;

    background:
        rgba(255,255,255,0.04);

    color:
        #ffffff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing:
        0.7px;

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 0 30px
        rgba(124,92,255,0.08);
}


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

.card {

    background:
        var(--bz-card);

    border:
        1px solid
        var(--bz-border);

    border-radius:
        var(--bz-radius);

    backdrop-filter:
        blur(25px);

    box-shadow:
        var(--bz-shadow);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


.card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(124,92,255,0.45);

    box-shadow:
        0 30px 100px
        rgba(124,92,255,0.12);
}


/* =========================================
   BUTTONS
   ========================================= */

.primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        15px 25px;

    border-radius:
        12px;

    background:
        var(--bz-gradient);

    color:
        #ffffff;

    font-weight:
        700;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.primary-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 40px
        rgba(124,92,255,0.35);
}


.secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        15px 25px;

    border:
        1px solid
        var(--bz-border);

    border-radius:
        12px;

    background:
        rgba(255,255,255,0.04);

    color:
        #ffffff;

    font-weight:
        600;

    transition:
        all 0.3s ease;
}


.secondary-btn:hover {

    background:
        rgba(255,255,255,0.09);

    transform:
        translateY(-3px);
}


/* =========================================
   GLOW ORBS
   ========================================= */

body::before {

    content: "";

    position: fixed;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background:
        rgba(124,92,255,0.12);

    filter:
        blur(120px);

    top:
        -150px;

    left:
        -150px;

    pointer-events:
        none;

    z-index:
        -1;

    animation:
        floatOrb 10s ease-in-out infinite;
}


body::after {

    content: "";

    position: fixed;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    background:
        rgba(0,229,255,0.08);

    filter:
        blur(120px);

    bottom:
        -150px;

    right:
        -100px;

    pointer-events:
        none;

    z-index:
        -1;

    animation:
        floatOrb 12s ease-in-out infinite reverse;
}


/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes floatOrb {

    0%,
    100% {

        transform:
            translate3d(0,0,0);
    }

    50% {

        transform:
            translate3d(40px,60px,0);
    }
}


@keyframes float {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-12px);
    }
}


@keyframes pulse {

    0% {

        box-shadow:
            0 0 0 0
            rgba(124,92,255,0.35);
    }

    70% {

        box-shadow:
            0 0 0 15px
            rgba(124,92,255,0);
    }

    100% {

        box-shadow:
            0 0 0 0
            rgba(124,92,255,0);
    }
}


/* =========================================
   MOBILE FOUNDATION
   ========================================= */

@media (max-width: 768px) {

    section {

        padding:
            80px 5%;
    }


    .section-heading {

        margin-bottom:
            45px;
    }


    .section-heading p {

        font-size:
            16px;
    }
}
/* =========================================
   B-ZORA HEADER / NAVIGATION
   ========================================= */

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: 18px 5%;
    background: rgba(5, 5, 7, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


/* Main navigation */

.navbar {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


/* =========================================
   LOGO
   ========================================= */

.logo {
    flex-shrink: 0;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo img {
    width: 95px;
    height: auto;

    object-fit: contain;

    animation: logoFloat 4s ease-in-out infinite;

    filter:
        drop-shadow(0 0 8px rgba(124, 92, 255, 0.45));
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-3px) scale(1.03);
    }
}


/* =========================================
   NAVIGATION LINKS
   ========================================= */

.nav-links {

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 30px;

    margin-left: auto;
    margin-right: auto;
}

.nav-links li {
    display: flex;
    align-items: center;
}

.nav-links a {

    position: relative;

    display: inline-block;

    color: #b9b9c5;

    font-size: 14px;
    font-weight: 600;

    padding: 8px 0;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* Animated underline */

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #7c5cff,
        #00e5ff
    );

    transition:
        width 0.3s ease;
}


.nav-links a:hover {

    color: #ffffff;

    transform:
        translateY(-2px);
}


.nav-links a:hover::after {

    width: 100%;
}


/* =========================================
   RIGHT SIDE BUTTONS
   ========================================= */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


.nav-actions .login {

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    padding: 10px 15px;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.nav-actions .login:hover {

    color: #00e5ff;

    transform:
        translateY(-2px);
}


.nav-actions .get-started {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        11px 18px;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #00e5ff
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 8px 25px
        rgba(124, 92, 255, 0.22);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.nav-actions .get-started:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 35px
        rgba(124, 92, 255, 0.4);
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 950px) {

    .nav-links {

        gap: 15px;
    }

    .nav-links a {

        font-size: 13px;
    }
}


@media (max-width: 768px) {

    header {

        padding:
            15px 5%;
    }

    .navbar {

        flex-wrap: wrap;
    }

    .nav-links {

        order: 3;

        width: 100%;

        justify-content:
            flex-start;

        overflow-x: auto;

        padding-top: 10px;

        gap: 22px;
    }

    .nav-actions {

        margin-left:
            auto;
    }

    .logo img {

        width:
            80px;
    }
}
/* =========================================
   B-ZORA — PRICING CARDS
   FLOATING GRID DESIGN
   ========================================= */

.pricing {
    overflow: hidden;
}


/* Pricing grid */

.pricing-grid {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 28px;

    align-items: stretch;
}


/* Individual cards */

.pricing-card {

    position: relative;

    padding: 38px 30px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.025)
        );

    border:
        1px solid
        rgba(255,255,255,0.12);

    backdrop-filter:
        blur(25px);

    -webkit-backdrop-filter:
        blur(25px);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.35);

    overflow: hidden;

    transform:
        translateY(0);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}


/* Glow behind each card */

.pricing-card::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -90px;
    right: -70px;

    border-radius: 50%;

    background:
        rgba(124,92,255,0.22);

    filter:
        blur(60px);

    pointer-events: none;
}


/* Bottom glow */

.pricing-card::after {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    bottom: -100px;
    left: -70px;

    border-radius: 50%;

    background:
        rgba(0,229,255,0.15);

    filter:
        blur(60px);

    pointer-events: none;
}


/* Floating animation */

.pricing-card:nth-child(1) {

    animation:
        pricingFloatOne 6s ease-in-out infinite;
}


.pricing-card:nth-child(2) {

    animation:
        pricingFloatTwo 6s ease-in-out infinite;
}


.pricing-card:nth-child(3) {

    animation:
        pricingFloatThree 6s ease-in-out infinite;
}


@keyframes pricingFloatOne {

    0%, 100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }
}


@keyframes pricingFloatTwo {

    0%, 100% {
        transform:
            translateY(-10px);
    }

    50% {
        transform:
            translateY(2px);
    }
}


@keyframes pricingFloatThree {

    0%, 100% {
        transform:
            translateY(-2px);
    }

    50% {
        transform:
            translateY(-12px);
    }
}


/* Hover */

.pricing-card:hover {

    transform:
        translateY(-14px)
        scale(1.02);

    border-color:
        rgba(0,229,255,0.45);

    box-shadow:
        0 35px 100px
        rgba(0,229,255,0.12);
}


/* =========================================
   PRICING HEADER
   ========================================= */

.pricing-header {

    position: relative;

    z-index: 2;

    margin-bottom: 30px;
}


.pricing-header > span {

    display: inline-block;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform:
        uppercase;

    color:
        #00e5ff;
}


.pricing-header h3 {

    margin:
        18px 0 10px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        42px;

    color:
        #ffffff;
}


.pricing-header h3 small {

    font-size:
        15px;

    font-weight:
        500;

    color:
        #888895;
}


.pricing-header p {

    font-size:
        15px;

    color:
        #92929f;
}


/* =========================================
   FEATURES
   ========================================= */

.pricing-features {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;

    margin-bottom:
        35px;
}


.pricing-features li {

    font-size:
        14px;

    color:
        #d1d1d8;

    padding-bottom:
        12px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);
}


/* =========================================
   PRICING BUTTON
   ========================================= */

.pricing-btn {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    padding:
        14px;

    border-radius:
        12px;

    border:
        1px solid
        rgba(255,255,255,0.12);

    background:
        rgba(255,255,255,0.05);

    color:
        #ffffff;

    font-weight:
        700;

    transition:
        all 0.3s ease;
}


.pricing-btn:hover {

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #00e5ff
        );

    border-color:
        transparent;

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(124,92,255,0.3);
}


/* =========================================
   MOST POPULAR
   ========================================= */

.pricing-card.popular {

    border:
        1px solid
        rgba(124,92,255,0.65);

    background:
        linear-gradient(
            145deg,
            rgba(124,92,255,0.16),
            rgba(0,229,255,0.05),
            rgba(255,255,255,0.03)
        );

    box-shadow:
        0 35px 100px
        rgba(124,92,255,0.18);

    transform:
        translateY(-12px);
}


.pricing-card.popular:hover {

    transform:
        translateY(-20px)
        scale(1.025);
}


.popular-badge {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    padding:
        7px 12px;

    border-radius:
        50px;

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #00e5ff
        );

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.5px;

    box-shadow:
        0 8px 25px
        rgba(124,92,255,0.3);

    animation:
        popularPulse 3s ease-in-out infinite;
}


@keyframes popularPulse {

    0%, 100% {
        box-shadow:
            0 8px 25px
            rgba(124,92,255,0.25);
    }

    50% {
        box-shadow:
            0 8px 35px
            rgba(0,229,255,0.35);
    }
}


/* =========================================
   PRICING NOTE
   ========================================= */

.pricing-note {

    margin:
        50px auto 0;

    text-align:
        center;
}


.pricing-note p {

    display:
        inline;

    margin-right:
        8px;
}


.pricing-note a {

    color:
        #00e5ff;

    font-weight:
        700;

    transition:
        color 0.3s ease;
}


.pricing-note a:hover {

    color:
        #7c5cff;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {

    .pricing-grid {

        grid-template-columns:
            1fr;

        max-width:
            520px;
    }


    .pricing-card.popular {

        transform:
            translateY(0);
    }


    .pricing-card.popular:hover {

        transform:
            translateY(-10px)
            scale(1.01);
    }
}


@media (max-width: 500px) {

    .pricing-card {

        padding:
            30px 22px;
    }


    .pricing-header h3 {

        font-size:
            36px;
    }
}
/* =========================================
   B-ZORA MONEY TRACKER
   FINANCIAL DASHBOARD GRID
   ========================================= */

.money-tracker {
    overflow: hidden;
}


/* =========================================
   MAIN CONTAINER
   ========================================= */

.money-container {
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================
   MONEY OVERVIEW GRID
   ========================================= */

.money-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}


.money-card {
    position: relative;
    padding: 25px;
    min-height: 150px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.07),
            rgba(255,255,255,0.025)
        );

    backdrop-filter: blur(20px);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.25);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease;
}


.money-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0,229,255,0.35);
}


/* Glow */

.money-card::before {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    top: -50px;
    right: -40px;

    border-radius: 50%;

    background: rgba(124,92,255,0.2);

    filter: blur(35px);
}


.money-card span {
    position: relative;
    z-index: 2;

    color: #9b9ba8;

    font-size: 13px;
}


.money-card strong {
    position: relative;
    z-index: 2;

    font-family: 'Space Grotesk', sans-serif;

    font-size: 27px;

    color: #ffffff;
}


.money-card small {
    position: relative;
    z-index: 2;

    color: #737380;

    font-size: 12px;
}


/* Overdue card */

.money-card.alert {
    border-color:
        rgba(255, 80, 120, 0.25);
}


.money-card.alert strong {
    color:
        #ff6688;
}


/* =========================================
   DEBT MANAGEMENT GRID
   ========================================= */

.debt-management {

    display: grid;

    grid-template-columns:
        1.4fr 1fr;

    gap: 22px;
}


/* Panels */

.debt-panel,
.payment-panel {

    position: relative;

    padding: 28px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius: 24px;

    background:
        rgba(255,255,255,0.045);

    backdrop-filter:
        blur(25px);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.25);
}


/* =========================================
   PANEL HEADER
   ========================================= */

.panel-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        25px;
}


.panel-header > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.panel-header span {

    color:
        #858592;

    font-size:
        12px;
}


.panel-header strong {

    color:
        #ffffff;

    font-size:
        18px;
}


/* =========================================
   ADD BUTTON
   ========================================= */

.panel-header button {

    padding:
        9px 14px;

    border:
        1px solid
        rgba(124,92,255,0.35);

    border-radius:
        9px;

    background:
        rgba(124,92,255,0.1);

    color:
        #ffffff;

    font-size:
        12px;

    transition:
        all 0.3s ease;
}


.panel-header button:hover {

    background:
        rgba(124,92,255,0.25);

    transform:
        translateY(-2px);
}


/* =========================================
   CUSTOMER DEBT ROW
   ========================================= */

.customer-debt {

    display:
        grid;

    grid-template-columns:
        1.5fr 1fr auto;

    align-items:
        center;

    gap:
        20px;

    padding:
        18px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);
}


.customer-debt:last-child {
    border-bottom: none;
}


.customer-info {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.customer-info strong {

    color:
        #ffffff;

    font-size:
        14px;
}


.customer-info span {

    color:
        #777784;

    font-size:
        12px;
}


/* =========================================
   DEBT DETAILS
   ========================================= */

.debt-details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.debt-details span {

    color:
        #777784;

    font-size:
        11px;
}


.debt-details strong {

    color:
        #00e5ff;

    font-size:
        15px;
}


.debt-details small {

    color:
        #777784;

    font-size:
        11px;
}


/* =========================================
   REMINDER BUTTON
   ========================================= */

.reminder-btn {

    padding:
        9px 12px;

    border:
        1px solid
        rgba(0,229,255,0.25);

    border-radius:
        9px;

    background:
        rgba(0,229,255,0.06);

    color:
        #00e5ff;

    font-size:
        11px;

    font-weight:
        700;

    transition:
        all 0.3s ease;
}


.reminder-btn:hover {

    background:
        #00e5ff;

    color:
        #050507;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(0,229,255,0.2);
}


/* =========================================
   PAYMENT ROWS
   ========================================= */

.payment-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);
}


.payment-item:last-of-type {
    border-bottom: none;
}


.payment-item > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.payment-item strong {

    color:
        #ffffff;

    font-size:
        14px;
}


.payment-item span,
.payment-item small {

    color:
        #777784;

    font-size:
        11px;
}


.payment-item > div:last-child {

    text-align:
        right;
}


.payment-item > div:last-child strong {

    color:
        #ffcc66;
}


/* =========================================
   MONEY INSIGHT
   ========================================= */

.money-insight {

    margin-top:
        22px;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        18px;

    padding:
        25px;

    border:
        1px solid
        rgba(124,92,255,0.25);

    border-radius:
        20px;

    background:
        linear-gradient(
            110deg,
            rgba(124,92,255,0.12),
            rgba(0,229,255,0.05)
        );

    box-shadow:
        0 20px 60px
        rgba(124,92,255,0.08);
}


.insight-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #00e5ff
        );

    color:
        #ffffff;

    font-weight:
        800;

    animation:
        pulse 3s infinite;
}


.money-insight > div:nth-child(2) {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.money-insight span {

    color:
        #00e5ff;

    font-size:
        11px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.7px;
}


.money-insight h3 {

    color:
        #ffffff;

    font-size:
        17px;
}


.money-insight p {

    font-size:
        12px;

    margin:
        0;
}


.money-insight a {

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        color 0.3s ease;
}


.money-insight a:hover {

    color:
        #00e5ff;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1000px) {

    .money-overview {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .debt-management {

        grid-template-columns:
            1fr;
    }
}


@media (max-width: 650px) {

    .money-overview {

        grid-template-columns:
            1fr;
    }


    .customer-debt {

        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .reminder-btn {

        width:
            100%;
    }


    .payment-item {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .payment-item > div:last-child {

        text-align:
            left;
    }


    .money-insight {

        grid-template-columns:
            auto 1fr;
    }


    .money-insight a {

        grid-column:
            2;
    }
}
/* =========================================
   B-ZORA EMPLOYEE ACTIVITY
   LIVE BUSINESS CONTROL CENTER
   ========================================= */

.employee-control {
    overflow: hidden;
}


/* =========================================
   EMPLOYEE MAIN GRID
   ========================================= */

.employee-control-container {

    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.15fr 0.85fr;

    gap: 24px;
}


/* =========================================
   EMPLOYEE DASHBOARD
   ========================================= */

.employee-dashboard,
.audit-panel {

    position: relative;

    padding: 28px;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.025)
        );

    border:
        1px solid
        rgba(255,255,255,0.1);

    backdrop-filter:
        blur(25px);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,0.3);

    overflow: hidden;
}


/* =========================================
   LIVE GLOW
   ========================================= */

.employee-dashboard::before,
.audit-panel::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -90px;
    right: -60px;

    border-radius: 50%;

    background:
        rgba(124,92,255,0.2);

    filter:
        blur(55px);

    pointer-events: none;
}


/* =========================================
   PANEL HEADER
   ========================================= */

.employee-dashboard .panel-header,
.audit-panel .panel-header {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;
}


.employee-dashboard .panel-header div,
.audit-panel .panel-header div {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.employee-dashboard .panel-header span,
.audit-panel .panel-header span {

    color:
        #777784;

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        0.8px;
}


.employee-dashboard .panel-header strong,
.audit-panel .panel-header strong {

    color:
        #ffffff;

    font-size:
        19px;
}


/* =========================================
   LIVE STATUS
   ========================================= */

.activity-status {

    display: inline-flex !important;

    align-items: center;

    gap: 7px;

    padding:
        7px 12px;

    border-radius:
        50px;

    background:
        rgba(0,229,255,0.08);

    border:
        1px solid
        rgba(0,229,255,0.2);

    color:
        #00e5ff !important;

    text-transform:
        none !important;

    letter-spacing:
        0 !important;

    animation:
        livePulse 2s infinite;
}


.activity-status::before {

    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #00e5ff;

    box-shadow:
        0 0 12px
        #00e5ff;
}


@keyframes livePulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(0,229,255,0.2);
    }

    70% {
        box-shadow:
            0 0 0 8px
            rgba(0,229,255,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(0,229,255,0);
    }
}


/* =========================================
   EMPLOYEE ROW
   ========================================= */

.employee-row {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.6fr
        0.7fr
        0.9fr
        0.9fr;

    align-items: center;

    gap: 20px;

    padding:
        20px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);

    transition:
        transform 0.3s ease;
}


.employee-row:last-child {

    border-bottom:
        none;
}


.employee-row:hover {

    transform:
        translateX(6px);
}


/* =========================================
   EMPLOYEE PROFILE
   ========================================= */

.employee-profile {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.employee-avatar {

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #00e5ff
        );

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    box-shadow:
        0 8px 25px
        rgba(124,92,255,0.2);

    transition:
        transform 0.3s ease;
}


.employee-row:hover .employee-avatar {

    transform:
        rotate(-5deg)
        scale(1.08);
}


.employee-profile div:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.employee-profile strong {

    color:
        #ffffff;

    font-size:
        14px;
}


.employee-profile span {

    color:
        #777784;

    font-size:
        11px;
}


/* =========================================
   EMPLOYEE STATS
   ========================================= */

.employee-stat {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.employee-stat span {

    color:
        #777784;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        0.5px;
}


.employee-stat strong {

    color:
        #ffffff;

    font-size:
        15px;

    font-family:
        'Space Grotesk',
        sans-serif;
}


/* =========================================
   AUDIT TIMELINE
   ========================================= */

.audit-panel {

    min-height:
        100%;
}


.audit-item {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        55px 1fr;

    gap:
        15px;

    padding:
        17px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);
}


.audit-item:last-child {

    border-bottom:
        none;
}


/* Timeline line */

.audit-item::before {

    content:
        "";

    position:
        absolute;

    left:
        5px;

    top:
        45px;

    bottom:
        -17px;

    width:
        1px;

    background:
        linear-gradient(
            to bottom,
            rgba(124,92,255,0.5),
            transparent
        );
}


.audit-item:last-child::before {

    display:
        none;
}


.audit-time {

    color:
        #00e5ff !important;

    font-size:
        11px !important;

    font-family:
        'Space Grotesk',
        sans-serif;

    text-transform:
        none !important;

    letter-spacing:
        0 !important;
}


/* Timeline dot */

.audit-item > div {

    position:
        relative;
}


.audit-item > div::before {

    content:
        "";

    position:
        absolute;

    left:
        -27px;

    top:
        4px;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #7c5cff;

    box-shadow:
        0 0 12px
        rgba(124,92,255,0.8);
}


.audit-item strong {

    color:
        #ffffff;

    font-size:
        13px;
}


.audit-item p {

    margin-top:
        4px;

    color:
        #777784;

    font-size:
        11px;
}


/* Warning activity */

.audit-item.warning {

    padding:
        17px 12px;

    margin:
        0 -12px;

    border-radius:
        12px;

    background:
        rgba(255,80,120,0.04);
}


.audit-item.warning > div::before {

    background:
        #ff6688;

    box-shadow:
        0 0 12px
        rgba(255,102,136,0.8);
}


.audit-item.warning .audit-time {

    color:
        #ff6688 !important;
}


/* =========================================
   SECURITY HIGHLIGHT
   ========================================= */

.security-highlight {

    max-width:
        1250px;

    margin:
        24px auto 0;

    padding:
        28px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        30px;

    align-items:
        center;

    border:
        1px solid
        rgba(124,92,255,0.22);

    border-radius:
        24px;

    background:
        linear-gradient(
            110deg,
            rgba(124,92,255,0.1),
            rgba(0,229,255,0.035)
        );

    box-shadow:
        0 25px 70px
        rgba(124,92,255,0.08);
}


.security-highlight h3 {

    margin:
        12px 0 8px;

    color:
        #ffffff;

    font-size:
        22px;
}


.security-highlight p {

    font-size:
        13px;

    max-width:
        500px;
}


/* =========================================
   SECURITY FEATURES
   ========================================= */

.security-features {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        10px;
}


.security-features span {

    padding:
        12px;

    border-radius:
        10px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid
        rgba(255,255,255,0.06);

    color:
        #c7c7d0;

    font-size:
        11px;

    transition:
        all 0.3s ease;
}


.security-features span:hover {

    background:
        rgba(124,92,255,0.1);

    border-color:
        rgba(124,92,255,0.25);

    transform:
        translateY(-2px);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 950px) {

    .employee-control-container {

        grid-template-columns:
            1fr;
    }

    .security-highlight {

        grid-template-columns:
            1fr;
    }
}


@media (max-width: 650px) {

    .employee-row {

        grid-template-columns:
            1fr 1fr;

        gap:
            15px;
    }

    .employee-profile {

        grid-column:
            1 / -1;
    }

    .audit-item {

        grid-template-columns:
            45px 1fr;
    }

    .security-features {

        grid-template-columns:
            1fr;
    }
}
/* =========================================
   B-ZORA STORE
   PREMIUM DIGITAL STOREFRONT
   ========================================= */

.bzora-store {
    overflow: hidden;
}


/* =========================================
   STORE MAIN LAYOUT
   ========================================= */

.store-container {

    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.25fr 0.75fr;

    gap: 25px;

    align-items: stretch;
}


/* =========================================
   STOREFRONT
   ========================================= */

.store-preview {

    position: relative;

    padding: 28px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.025)
        );

    border:
        1px solid
        rgba(255,255,255,0.1);

    backdrop-filter:
        blur(25px);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,0.3);

    overflow: hidden;
}


/* Store glow */

.store-preview::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -140px;
    right: -80px;

    border-radius: 50%;

    background:
        rgba(124,92,255,0.2);

    filter:
        blur(70px);

    pointer-events: none;
}


/* =========================================
   STORE HEADER
   ========================================= */

.store-header {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 28px;
}


.store-header > div {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.store-header span:first-child {

    color:
        #777784;

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;
}


.store-header strong {

    color:
        #ffffff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        20px;
}


/* Store online */

.store-status {

    display: inline-flex !important;

    align-items: center;

    gap: 7px;

    padding:
        7px 11px;

    border-radius:
        50px;

    background:
        rgba(0,229,255,0.07);

    border:
        1px solid
        rgba(0,229,255,0.2);

    color:
        #00e5ff !important;

    font-size:
        10px !important;

    text-transform:
        none !important;

    letter-spacing:
        0 !important;
}


.store-status::before {

    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #00e5ff;

    box-shadow:
        0 0 10px
        #00e5ff;

    animation:
        storePulse 2s infinite;
}


@keyframes storePulse {

    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}


/* =========================================
   PRODUCT GRID
   ========================================= */

.store-products {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;
}


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

.store-product {

    position: relative;

    padding: 12px;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid
        rgba(255,255,255,0.08);

    overflow: hidden;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


.store-product:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(0,229,255,0.3);

    box-shadow:
        0 20px 55px
        rgba(0,229,255,0.1);
}


/* =========================================
   PRODUCT IMAGE
   ========================================= */

.product-image {

    position: relative;

    height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background:
        radial-gradient(
            circle at center,
            rgba(124,92,255,0.25),
            rgba(10,10,15,0.9) 70%
        );

    color:
        rgba(255,255,255,0.35);

    font-size:
        11px;

    overflow: hidden;
}


/* Image shine */

.product-image::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 100%;

    top: 0;

    left: -220px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.12),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.7s ease;
}


.store-product:hover .product-image::after {

    left: 220px;
}


/* =========================================
   PRODUCT DETAILS
   ========================================= */

.product-details {

    padding:
        17px 7px 6px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.product-details span {

    color:
        #00e5ff;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        0.7px;
}


.product-details h3 {

    color:
        #ffffff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        17px;
}


.product-details strong {

    color:
        #ffffff;

    font-size:
        18px;

    font-family:
        'Space Grotesk',
        sans-serif;
}


/* =========================================
   ADD TO ORDER
   ========================================= */

.product-details button {

    margin-top:
        8px;

    width:
        100%;

    padding:
        11px;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #00e5ff
        );

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        800;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.product-details button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 30px
        rgba(124,92,255,0.35);
}


/* =========================================
   ORDERS PANEL
   ========================================= */

.orders-panel {

    position: relative;

    padding:
        28px;

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.025)
        );

    border:
        1px solid
        rgba(255,255,255,0.1);

    backdrop-filter:
        blur(25px);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,0.3);

    overflow:
        hidden;
}


/* =========================================
   ORDER ITEM
   ========================================= */

.order-item {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        17px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);
}


.order-item:last-of-type {

    border-bottom:
        none;
}


.order-info {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.order-info strong {

    color:
        #ffffff;

    font-size:
        13px;
}


.order-info span {

    color:
        #777784;

    font-size:
        10px;
}


.order-value {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        5px;
}


.order-value strong {

    color:
        #ffffff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        13px;
}


/* =========================================
   ORDER STATUS
   ========================================= */

.order-status {

    padding:
        4px 8px;

    border-radius:
        50px;

    background:
        rgba(255,204,102,0.08);

    border:
        1px solid
        rgba(255,204,102,0.15);

    color:
        #ffcc66 !important;

    font-size:
        9px !important;
}


.order-status.completed {

    background:
        rgba(0,229,255,0.07);

    border-color:
        rgba(0,229,255,0.15);

    color:
        #00e5ff !important;
}


/* =========================================
   STORE INSIGHT
   ========================================= */

.store-insight {

    position:
        relative;

    z-index:
        2;

    margin-top:
        22px;

    padding:
        18px;

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,0.13),
            rgba(0,229,255,0.04)
        );

    border:
        1px solid
        rgba(124,92,255,0.2);
}


.store-insight span {

    color:
        #00e5ff;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        0.7px;
}


.store-insight strong {

    display:
        block;

    margin:
        6px 0;

    color:
        #ffffff;

    font-size:
        14px;
}


.store-insight p {

    font-size:
        11px;
}


/* =========================================
   STORE BENEFITS
   ========================================= */

.store-benefits {

    max-width:
        1250px;

    margin:
        28px auto 0;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        15px;
}


.store-benefits > div {

    padding:
        22px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        18px;

    background:
        rgba(255,255,255,0.035);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}


.store-benefits > div:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(124,92,255,0.3);
}


.store-benefits strong {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #7c5cff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        13px;
}


.store-benefits span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #ffffff;

    font-weight:
        700;

    font-size:
        14px;
}


.store-benefits p {

    font-size:
        11px;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 950px) {

    .store-container {

        grid-template-columns:
            1fr;
    }

    .store-benefits {

        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .store-products {

        grid-template-columns:
            1fr;
    }

    .store-benefits {

        grid-template-columns:
            1fr;
    }

    .store-header {

        align-items:
            flex-start;

        gap:
            15px;
    }

    .order-item {

        align-items:
            flex-start;
    }
}

/* =========================================
   B-ZORA PRODUCT MANAGMENT
   SMART INVENTORY COMMAND CENTER
   ========================================= */

.product-managment {
    position: relative;
    overflow: hidden;
}


/* Main layout */

.product-managment-container {

    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 25px;

    align-items: stretch;
}


/* =========================================
   PRODUCT PREVIEW
   ========================================= */

.product-preview {

    position: relative;

    min-height: 520px;

    padding: 30px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(124,92,255,0.14),
            rgba(0,229,255,0.04),
            rgba(255,255,255,0.025)
        );

    border:
        1px solid
        rgba(124,92,255,0.22);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,0.3);
}


/* Floating glow */

.product-preview::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -150px;
    left: -100px;

    border-radius: 50%;

    background:
        rgba(124,92,255,0.2);

    filter:
        blur(80px);
}


/* Product image area */

.product-upload {

    position: relative;

    z-index: 2;

    height: 270px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border-radius: 22px;

    border:
        1px dashed
        rgba(0,229,255,0.35);

    background:
        rgba(0,0,0,0.15);

    transition:
        all 0.4s ease;
}


.product-upload:hover {

    border-color:
        #00e5ff;

    background:
        rgba(0,229,255,0.04);

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 60px
        rgba(0,229,255,0.08);
}


.product-upload-icon {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #00e5ff
        );

    color:
        #ffffff;

    font-size:
        24px;

    box-shadow:
        0 15px 40px
        rgba(124,92,255,0.3);

    animation:
        uploadFloat 3s ease-in-out infinite;
}


@keyframes uploadFloat {

    0%, 100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }
}


.product-upload strong {

    color:
        #ffffff;

    font-size:
        15px;
}


.product-upload span {

    color:
        #777784;

    font-size:
        11px;
}


/* =========================================
   SMART PROFIT PREVIEW
   ========================================= */

.profit-preview {

    position:
        relative;

    z-index:
        2;

    padding:
        20px;

    border-radius:
        18px;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid
        rgba(255,255,255,0.08);
}


.profit-preview > span {

    color:
        #777784;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        0.8px;
}


.profit-preview-grid {

    margin-top:
        14px;

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        10px;
}


.profit-preview-grid div {

    padding:
        12px;

    border-radius:
        12px;

    background:
        rgba(0,0,0,0.15);
}


.profit-preview-grid span {

    display:
        block;

    color:
        #777784;

    font-size:
        9px;

    margin-bottom:
        5px;
}


.profit-preview-grid strong {

    color:
        #ffffff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        14px;
}


.profit-preview-grid .profit-value {

    color:
        #00e5ff;
}


/* =========================================
   PRODUCT FORM
   ========================================= */

.product-form {

    position:
        relative;

    padding:
        32px;

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.025)
        );

    border:
        1px solid
        rgba(255,255,255,0.1);

    backdrop-filter:
        blur(25px);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,0.3);

    overflow:
        hidden;
}


/* Form heading */

.product-form-header {

    margin-bottom:
        28px;
}


.product-form-header span {

    color:
        #00e5ff;

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1px;
}


.product-form-header h3 {

    margin:
        8px 0;

    color:
        #ffffff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        25px;
}


.product-form-header p {

    font-size:
        12px;
}


/* =========================================
   FORM GRID
   ========================================= */

.product-fields {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        17px;
}


.product-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.product-field.full {

    grid-column:
        1 / -1;
}


.product-field label {

    color:
        #aaaab5;

    font-size:
        11px;

    font-weight:
        600;
}


.product-field input,
.product-field select,
.product-field textarea {

    width:
        100%;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius:
        11px;

    background:
        rgba(0,0,0,0.18);

    color:
        #ffffff;

    outline:
        none;

    font-size:
        12px;

    transition:
        all 0.3s ease;
}


.product-field input:focus,
.product-field select:focus,
.product-field textarea:focus {

    border-color:
        #00e5ff;

    box-shadow:
        0 0 0 3px
        rgba(0,229,255,0.06);
}


.product-field textarea {

    min-height:
        85px;

    resize:
        vertical;
}


/* =========================================
   PRICE INTELLIGENCE
   ========================================= */

.price-intelligence {

    margin-top:
        22px;

    padding:
        18px;

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,0.09),
            rgba(0,229,255,0.035)
        );

    border:
        1px solid
        rgba(124,92,255,0.18);
}


.price-intelligence-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        15px;
}


.price-intelligence-header strong {

    color:
        #ffffff;

    font-size:
        13px;
}


.price-intelligence-header span {

    color:
        #00e5ff;

    font-size:
        10px;
}


.price-metrics {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        10px;
}


.price-metric {

    padding:
        12px;

    border-radius:
        11px;

    background:
        rgba(0,0,0,0.15);
}


.price-metric span {

    display:
        block;

    color:
        #777784;

    font-size:
        9px;

    margin-bottom:
        5px;
}


.price-metric strong {

    color:
        #ffffff;

    font-size:
        14px;

    font-family:
        'Space Grotesk',
        sans-serif;
}


.price-metric.profit strong {

    color:
        #00e5ff;
}


/* =========================================
   SAVE PRODUCT BUTTON
   ========================================= */

.save-product-btn {

    width:
        100%;

    margin-top:
        22px;

    padding:
        15px;

    border:
        none;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #00e5ff
        );

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        all 0.35s ease;

    box-shadow:
        0 15px 35px
        rgba(124,92,255,0.2);
}


.save-product-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 50px
        rgba(0,229,255,0.2);
}


/* =========================================
   INVENTORY WARNING
   ========================================= */

.inventory-warning {

    margin-top:
        15px;

    padding:
        12px 15px;

    border-radius:
        10px;

    background:
        rgba(255,204,102,0.05);

    border:
        1px solid
        rgba(255,204,102,0.15);

    color:
        #ffcc66;

    font-size:
        10px;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 950px) {

    .product-setup-container {

        grid-template-columns:
            1fr;
    }

    .product-preview {

        min-height:
            450px;
    }
}


@media (max-width: 600px) {

    .product-fields {

        grid-template-columns:
            1fr;
    }

    .product-field.full {

        grid-column:
            auto;
    }

    .profit-preview-grid,
    .price-metrics {

        grid-template-columns:
            1fr;
    }

    .product-form,
    .product-preview {

        padding:
            22px;
    }
}
/* =========================================
   B-ZORA GLOBAL FOOTER
   PREMIUM SAAS FOOTER
   ========================================= */

footer {
    position: relative;

    margin-top: 100px;

    padding:
        80px 6% 30px;

    background:
        linear-gradient(
            180deg,
            #08080d 0%,
            #050507 100%
        );

    border-top:
        1px solid
        rgba(255,255,255,0.08);

    overflow: hidden;
}


/* =========================================
   FOOTER GLOW
   ========================================= */

footer::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -350px;
    left: 50%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(124,92,255,0.18),
            transparent 70%
        );

    filter:
        blur(20px);

    pointer-events:
        none;
}


/* Bottom cyan glow */

footer::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -220px;
    right: 5%;

    border-radius:
        50%;

    background:
        rgba(0,229,255,0.08);

    filter:
        blur(80px);

    pointer-events:
        none;
}


/* =========================================
   FOOTER TOP CTA
   ========================================= */

.footer-cta {

    position:
        relative;

    z-index:
        2;

    max-width:
        1200px;

    margin:
        0 auto 70px;

    padding:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border:
        1px solid
        rgba(124,92,255,0.25);

    border-radius:
        28px;

    background:
        linear-gradient(
            110deg,
            rgba(124,92,255,0.12),
            rgba(0,229,255,0.04)
        );

    box-shadow:
        0 30px 90px
        rgba(124,92,255,0.08);

    overflow:
        hidden;
}


.footer-cta::before {

    content:
        "";

    position:
        absolute;

    width:
        200px;

    height:
        200px;

    top:
        -100px;

    right:
        15%;

    border-radius:
        50%;

    background:
        rgba(0,229,255,0.12);

    filter:
        blur(60px);
}


.footer-cta-content {

    position:
        relative;

    z-index:
        2;
}


.footer-cta-content span {

    color:
        #00e5ff;

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1px;
}


.footer-cta-content h2 {

    margin:
        10px 0;

    color:
        #ffffff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(28px, 4vw, 45px);

    line-height:
        1.05;
}


.footer-cta-content p {

    max-width:
        550px;

    color:
        #898995;

    font-size:
        13px;
}


/* CTA button */

.footer-cta-btn {

    position:
        relative;

    z-index:
        2;

    flex-shrink:
        0;

    padding:
        15px 24px;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #00e5ff
        );

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    box-shadow:
        0 15px 40px
        rgba(124,92,255,0.25);

    transition:
        all 0.35s ease;
}


.footer-cta-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 55px
        rgba(0,229,255,0.2);
}


/* =========================================
   FOOTER GRID
   ========================================= */

.footer-grid {

    position:
        relative;

    z-index:
        2;

    max-width:
        1200px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        1.6fr
        repeat(4, 1fr);

    gap:
        45px;

    padding-bottom:
        55px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);
}


/* =========================================
   BRAND
   ========================================= */

.footer-brand {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;
}


.footer-brand .footer-logo {

    display:
        inline-flex;

    align-items:
        center;

    width:
        fit-content;

    color:
        #ffffff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        26px;

    font-weight:
        900;

    letter-spacing:
        -1px;
}


.footer-brand .footer-logo span {

    color:
        #00e5ff;
}


.footer-brand p {

    max-width:
        300px;

    color:
        #777784;

    font-size:
        12px;

    line-height:
        1.8;
}


/* =========================================
   SOCIAL ICONS
   ========================================= */

.footer-socials {

    display:
        flex;

    gap:
        9px;
}


.footer-socials a {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        10px;

    background:
        rgba(255,255,255,0.035);

    color:
        #9999a5;

    font-size:
        11px;

    transition:
        all 0.3s ease;
}


.footer-socials a:hover {

    color:
        #ffffff;

    background:
        rgba(124,92,255,0.15);

    border-color:
        rgba(124,92,255,0.35);

    transform:
        translateY(-4px);
}


/* =========================================
   FOOTER COLUMNS
   ========================================= */

.footer-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;
}


.footer-column h4 {

    margin-bottom:
        5px;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.8px;
}


.footer-column a {

    width:
        fit-content;

    color:
        #777784;

    font-size:
        12px;

    transition:
        all 0.25s ease;
}


.footer-column a:hover {

    color:
        #00e5ff;

    transform:
        translateX(4px);
}


/* =========================================
   TRUST BAR
   ========================================= */

.footer-trust {

    position:
        relative;

    z-index:
        2;

    max-width:
        1200px;

    margin:
        25px auto 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        16px 20px;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius:
        14px;

    background:
        rgba(255,255,255,0.025);
}


.footer-trust-item {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #777784;

    font-size:
        10px;
}


.footer-trust-item strong {

    color:
        #c9c9d1;

    font-size:
        10px;
}


.footer-trust-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #00e5ff;

    box-shadow:
        0 0 10px
        rgba(0,229,255,0.7);
}


/* =========================================
   FOOTER BOTTOM
   ========================================= */

.footer-bottom {

    position:
        relative;

    z-index:
        2;

    max-width:
        1200px;

    margin:
        25px auto 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.footer-bottom p {

    margin:
        0;

    color:
        #555561;

    font-size:
        10px;
}


.footer-legal {

    display:
        flex;

    gap:
        20px;
}


.footer-legal a {

    color:
        #555561;

    font-size:
        10px;

    transition:
        color 0.25s ease;
}


.footer-legal a:hover {

    color:
        #00e5ff;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 950px) {

    .footer-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }

    .footer-brand {

        grid-column:
            1 / -1;
    }

    .footer-cta {

        align-items:
            flex-start;

        flex-direction:
            column;
    }
}


@media (max-width: 650px) {

    footer {

        padding:
            60px 5% 25px;
    }

    .footer-cta {

        padding:
            30px 22px;
    }

    .footer-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            35px 20px;
    }

    .footer-brand {

        grid-column:
            1 / -1;
    }

    .footer-trust {

        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .footer-legal {

        flex-wrap:
            wrap;

        gap:
            12px;
    }
}
/* =========================================
   B-ZORA — HOW IT WORKS
   PREMIUM PRODUCT WORKFLOW
   ========================================= */

.how-it-works {
    position: relative;
    padding: 110px 6%;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(124, 92, 255, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(0, 229, 255, 0.08),
            transparent 30%
        );
}


/* =========================================
   SECTION HEADER
   ========================================= */

.how-it-works .section-header {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto 65px;
    text-align: center;
}

.how-it-works .section-header span {
    display: inline-block;
    margin-bottom: 12px;

    color: #00e5ff;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1.8px;
}

.how-it-works .section-header h2 {
    margin: 0 0 16px;

    color: #ffffff;

    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(34px, 5vw, 58px);

    line-height: 1.05;
    letter-spacing: -1.5px;
}

.how-it-works .section-header h2 span {
    margin: 0;

    color: #7c5cff;

    font-size: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

.how-it-works .section-header p {
    max-width: 620px;
    margin: auto;

    color: #858592;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   WORKFLOW CONTAINER
   ========================================= */

.how-it-works .steps-container {
    position: relative;

    max-width: 1250px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}


/* =========================================
   CONNECTING LINE
   ========================================= */

.how-it-works .steps-container::before {
    content: "";

    position: absolute;

    top: 70px;
    left: 12%;
    right: 12%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(124, 92, 255, 0.45),
            rgba(0, 229, 255, 0.45),
            transparent
        );

    z-index: 0;
}


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

 .how-it-works .step {
    position: relative;
    z-index: 1;

    padding: 32px 27px;

    min-height: 310px;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.025)
        );

    border:
        1px solid rgba(255,255,255,0.09);

    backdrop-filter: blur(22px);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.25);

    overflow: hidden;

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}


/* Card glow */

 .how-it-works .step::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -70px;

    border-radius: 50%;

    background:
        rgba(124,92,255,0.18);

    filter: blur(55px);

    transition:
        transform 0.5s ease;
}


/* Bottom light */

.how-it-works .step::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    bottom: -80px;
    left: -40px;

    border-radius: 50%;

    background:
        rgba(0,229,255,0.09);

    filter: blur(45px);
}


.how-it-works .step:hover {
    transform: translateY(-12px);

    border-color:
        rgba(0,229,255,0.28);

    box-shadow:
        0 35px 90px rgba(0,0,0,0.4),
        0 0 45px rgba(124,92,255,0.08);
}


.how-it-works .step:hover::before {
    transform: scale(1.5);
}


/* =========================================
   STEP NUMBER
   ========================================= */

.how-it-works .step-number {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #00e5ff
        );

    color: #ffffff;

    font-family: 'Space Grotesk', sans-serif;

    font-size: 18px;
    font-weight: 900;

    box-shadow:
        0 15px 35px rgba(124,92,255,0.3);

    transition:
        transform 0.4s ease;
}


.how-it-works .step:hover .step-number {
    transform:
        rotate(-6deg)
        scale(1.1);
}


/* =========================================
   STEP ICON
   ========================================= */

.how-it-works .step-icon {
    position: absolute;

    top: 30px;
    right: 27px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid rgba(255,255,255,0.08);

    color: #00e5ff;

    font-size: 16px;

    transition:
        all 0.35s ease;
}


.how-it-works .step:hover .step-icon {
    background:
        rgba(0,229,255,0.1);

    border-color:
        rgba(0,229,255,0.25);

    transform:
        rotate(8deg);
}


/* =========================================
   STEP CONTENT
   ========================================= */

.how-it-works .step h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    color: #ffffff;

    font-family: 'Space Grotesk', sans-serif;

    font-size: 20px;
}


.how-it-works .step p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #858592;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================
   STEP HIGHLIGHT
   ========================================= */

.how-it-works .step-highlight {
    position: relative;
    z-index: 2;

    display: inline-flex;

    margin-top: 22px;
    padding: 7px 11px;

    border-radius: 50px;

    background:
        rgba(0,229,255,0.06);

    border:
        1px solid rgba(0,229,255,0.14);

    color: #00e5ff;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


/* =========================================
   B-ZORA SMART FLOW
   ========================================= */

.how-it-works .workflow-summary {
    position: relative;
    z-index: 2;

    max-width: 1050px;

    margin: 55px auto 0;

    padding: 25px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;

    border-radius: 22px;

    background:
        linear-gradient(
            110deg,
            rgba(124,92,255,0.10),
            rgba(0,229,255,0.04)
        );

    border:
        1px solid rgba(124,92,255,0.18);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.2);
}


.how-it-works .workflow-summary div {
    padding: 15px;

    border-radius: 13px;

    background:
        rgba(255,255,255,0.035);

    border:
        1px solid rgba(255,255,255,0.06);

    text-align: center;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.how-it-works .workflow-summary div:hover {
    transform: translateY(-5px);

    background:
        rgba(124,92,255,0.08);
}


.how-it-works .workflow-summary strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-family: 'Space Grotesk', sans-serif;

    font-size: 14px;
}


.how-it-works .workflow-summary span {
    color: #777784;

    font-size: 10px;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 900px) {

    .how-it-works .steps-container {
        grid-template-columns: 1fr;
    }

    .how-it-works .steps-container::before {
        display: none;
    }

    .how-it-works .step {
        min-height: auto;
    }

    .how-it-works .workflow-summary {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .how-it-works {
        padding:
            80px 5%;
    }

    .how-it-works .section-header {
        margin-bottom: 45px;
    }

    .how-it-works .section-header h2 {
        font-size: 36px;
    }

    .how-it-works .step {
        padding: 25px 22px;
    }

    .how-it-works .workflow-summary {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   B-ZORA DASHBOARD PREVIEW
   PREMIUM BUSINESS CONTROL CENTER
   ========================================= */

.dashboard-preview {
    position: relative;

    margin: 90px auto;

    padding: 35px;

    max-width: 1280px;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            rgba(124, 92, 255, 0.16),
            rgba(0, 229, 255, 0.08),
            rgba(255, 255, 255, 0.035)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    box-shadow:
        0 40px 120px
        rgba(0, 0, 0, 0.45),

        0 0 80px
        rgba(124, 92, 255, 0.08);

    backdrop-filter:
        blur(30px);

    overflow: hidden;
}


/* =========================================
   PURPLE AMBIENT LIGHT
   ========================================= */

.dashboard-preview::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    left: -140px;

    border-radius: 50%;

    background:
        rgba(124, 92, 255, 0.22);

    filter:
        blur(90px);

    pointer-events: none;
}


/* =========================================
   CYAN AMBIENT LIGHT
   ========================================= */

.dashboard-preview::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -150px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(0, 229, 255, 0.16);

    filter:
        blur(90px);

    pointer-events: none;
}


/* =========================================
   DASHBOARD GLASS FRAME
   ========================================= */

.dashboard-preview > * {
    position: relative;

    z-index: 2;
}


/* =========================================
   DASHBOARD HOVER DEPTH
   ========================================= */

.dashboard-preview:hover {
    border-color:
        rgba(0, 229, 255, 0.25);

    box-shadow:
        0 45px 130px
        rgba(0, 0, 0, 0.5),

        0 0 90px
        rgba(0, 229, 255, 0.07);

    transition:
        all 0.45s ease;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 700px) {

    .dashboard-preview {
        margin:
            60px auto;

        padding:
            20px;

        border-radius:
            24px;
    }
}
/* =========================================
   B-ZORA DASHBOARD CONTAINER
   FUTURE BUSINESS COMMAND CENTER
   ========================================= */

.dashboard-container {
    position: relative;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 28px;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.085),
            rgba(255,255,255,0.035)
        );

    border:
        1px solid
        rgba(255,255,255,0.12);

    backdrop-filter:
        blur(28px);

    box-shadow:
        0 35px 100px
        rgba(0,0,0,0.45),

        0 0 70px
        rgba(124,92,255,0.08);

    overflow: hidden;

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}


/* =========================================
   PURPLE ENERGY GLOW
   ========================================= */

.dashboard-container::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    top: -220px;
    left: -130px;

    border-radius: 50%;

    background:
        rgba(124,92,255,0.18);

    filter:
        blur(80px);

    pointer-events: none;
}


/* =========================================
   CYAN ENERGY GLOW
   ========================================= */

.dashboard-container::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -150px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(0,229,255,0.13);

    filter:
        blur(80px);

    pointer-events: none;
}


/* =========================================
   DASHBOARD CONTENT
   ========================================= */

.dashboard-container > * {
    position: relative;

    z-index: 2;
}


/* =========================================
   TOP DASHBOARD BAR
   ========================================= */

.dashboard-container .dashboard-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);
}


/* =========================================
   DASHBOARD TITLE
   ========================================= */

.dashboard-container .dashboard-title {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.dashboard-container .dashboard-title h3 {
    margin: 0;

    color: #ffffff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 20px;

    letter-spacing: -0.4px;
}


.dashboard-container .dashboard-title span {
    color: #777784;

    font-size: 10px;
}


/* =========================================
   LIVE INDICATOR
   ========================================= */

.dashboard-container .live-indicator {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 12px;

    border-radius: 50px;

    background:
        rgba(0,229,255,0.07);

    border:
        1px solid
        rgba(0,229,255,0.18);

    color:
        #00e5ff;

    font-size: 10px;

    font-weight: 700;
}


.dashboard-container .live-indicator::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #00e5ff;

    box-shadow:
        0 0 12px
        rgba(0,229,255,0.9);

    animation:
        bzoraLivePulse 1.8s infinite;
}


@keyframes bzoraLivePulse {

    0% {
        transform: scale(1);

        opacity: 1;
    }

    50% {
        transform: scale(1.35);

        opacity: 0.45;
    }

    100% {
        transform: scale(1);

        opacity: 1;
    }
}


/* =========================================
   DASHBOARD CARDS
   ========================================= */

.dashboard-container .dashboard-card {
    position: relative;

    padding: 20px;

    border-radius: 18px;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid
        rgba(255,255,255,0.075);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


.dashboard-container .dashboard-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(124,92,255,0.3);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,0.25),

        0 0 30px
        rgba(124,92,255,0.06);
}


/* Card light sweep */

.dashboard-container .dashboard-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.05),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.7s ease;

    pointer-events: none;
}


.dashboard-container .dashboard-card:hover::after {
    left: 130%;
}


/* =========================================
   MONEY / REVENUE CARD
   ========================================= */

.dashboard-container .revenue-card {
    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,0.15),
            rgba(124,92,255,0.035)
        );

    border-color:
        rgba(124,92,255,0.18);
}


.dashboard-container .revenue-card strong {
    color: #ffffff;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size: 26px;
}


/* =========================================
   PROFIT HIGHLIGHT
   ========================================= */

.dashboard-container .profit {
    color:
        #00e5ff !important;
}


/* =========================================
   STOCK STATUS
   ========================================= */

.dashboard-container .stock-status {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 5px 9px;

    border-radius: 50px;

    background:
        rgba(0,229,255,0.06);

    border:
        1px solid
        rgba(0,229,255,0.13);

    color:
        #00e5ff;

    font-size: 9px;
}


/* =========================================
   DASHBOARD GRID
   ========================================= */

.dashboard-container .dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 950px) {

    .dashboard-container {
        padding: 22px;
    }

    .dashboard-container .dashboard-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .dashboard-container {
        padding: 16px;

        border-radius: 20px;
    }

    .dashboard-container .dashboard-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .dashboard-container .dashboard-grid {
        grid-template-columns:
            1fr;
    }
}
/* =========================================
   B-ZORA CHAT & SUPPORT WIDGET
   ========================================= */

.bzora-chat-widget {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;
}


/* =========================================
   FLOATING BUTTON
   ========================================= */

.bzora-chat-button {
    display: flex;
    align-items: center;
    gap: 10px;

    border: none;

    padding: 13px 19px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #00e5ff
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 12px 35px
        rgba(0, 229, 255, 0.25);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.bzora-chat-button:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 45px
        rgba(124, 92, 255, 0.4);
}


.chat-icon {

    font-size: 19px;

    animation:
        chatBounce 2.5s infinite;
}


@keyframes chatBounce {

    0%, 80%, 100% {
        transform: translateY(0);
    }

    88% {
        transform: translateY(-4px);
    }

    94% {
        transform: translateY(0);
    }
}


/* =========================================
   CHAT PANEL
   ========================================= */

.bzora-chat-panel {

    position: absolute;

    right: 0;
    bottom: 70px;

    width: 360px;

    padding: 22px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(25, 27, 45, 0.98),
            rgba(10, 12, 24, 0.98)
        );

    border:
        1px solid
        rgba(255,255,255,0.1);

    backdrop-filter:
        blur(25px);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,0.45);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(20px)
        scale(0.96);

    transform-origin:
        bottom right;

    transition:
        all 0.3s ease;
}


/* OPEN STATE */

.bzora-chat-panel.active {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================
   PANEL HEADER
   ========================================= */

.chat-panel-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    margin-bottom:
        22px;
}


.chat-panel-header span {

    color:
        #00e5ff;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}


.chat-panel-header h3 {

    margin-top:
        5px;

    color:
        #ffffff;

    font-size:
        20px;
}


.chat-close {

    width:
        32px;

    height:
        32px;

    border:
        1px solid
        rgba(255,255,255,0.1);

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.05);

    color:
        #ffffff;

    font-size:
        20px;

    cursor:
        pointer;

    transition:
        all 0.25s ease;
}


.chat-close:hover {

    background:
        rgba(255,80,120,0.15);

    transform:
        rotate(90deg);
}


/* =========================================
   CHAT OPTIONS
   ========================================= */

.chat-options {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.chat-option {

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        44px 1fr 20px;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius:
        16px;

    background:
        rgba(255,255,255,0.035);

    text-align:
        left;

    cursor:
        pointer;

    transition:
        all 0.3s ease;
}


.chat-option:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(0,229,255,0.3);

    background:
        rgba(0,229,255,0.06);
}


.chat-option-icon {

    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,0.25),
            rgba(0,229,255,0.12)
        );

    font-size:
        20px;
}


.support-icon {

    background:
        linear-gradient(
            135deg,
            rgba(0,229,255,0.2),
            rgba(124,92,255,0.12)
        );
}


.chat-option div:nth-child(2) {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.chat-option strong {

    color:
        #ffffff;

    font-size:
        13px;
}


.chat-option span {

    color:
        #858b9e;

    font-size:
        10px;

    line-height:
        1.4;
}


.chat-option b {

    color:
        #00e5ff;

    font-size:
        17px;

    transition:
        transform 0.3s ease;
}


.chat-option:hover b {

    transform:
        translateX(4px);
}


/* =========================================
   FOOTER
   ========================================= */

.chat-panel-footer {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        20px;

    padding-top:
        15px;

    border-top:
        1px solid
        rgba(255,255,255,0.06);

    color:
        #777784;

    font-size:
        10px;
}


.online-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #00e5ff;

    box-shadow:
        0 0 10px
        #00e5ff;

    animation:
        onlinePulse 2s infinite;
}


@keyframes onlinePulse {

    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    .B-ZORA-chat-widget {

        right: 15px;
        bottom: 15px;
    }


    .B-ZORA-chat-panel {

        width:
            calc(100vw - 30px);

        right:
            -5px;
    }


    .chat-text {

        display:
            none;
    }


    .B-ZORA-chat-button {

        width:
            52px;

        height:
            52px;

        padding:
            0;

        justify-content:
            center;
    }

}