/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-js29o1pvdx] {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

main[b-js29o1pvdx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 3rem; /* clear the fixed footer */
}

.sidebar[b-js29o1pvdx] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-js29o1pvdx] {
    top: 0;
    position: sticky;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    z-index: 1;
    padding: 12px 0;
    font-size: 1.0rem;
    font-weight: 500;
    line-height: 1.5;
}

    .top-row[b-js29o1pvdx]  a, .top-row[b-js29o1pvdx]  .btn-link 
    {        
        color: black;
        text-decoration: none;
        padding: 0.5rem 1rem;
    }

        .top-row[b-js29o1pvdx]  a:hover, .top-row[b-js29o1pvdx]  .btn-link:hover 
        {
            color: #0056b3;
            transition: color 0.3s ease;
            background-color: rgba(0, 123, 255, 0.1);
            border-radius: 0.25rem;
        }

        .top-row[b-js29o1pvdx]  a:first-child 
        {
            overflow: hidden;
            text-overflow: ellipsis;
        }

.top-row .navbar-brand[b-js29o1pvdx] {
    font-weight: 700;
    text-decoration: none;
    margin-right: 1rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #0056b3 50%, #6a0dad 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

    .top-row .navbar-brand:hover[b-js29o1pvdx] {
        background: linear-gradient(135deg, #0056b3 0%, #6a0dad 50%, #8b5cf6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        transform: scale(1.05);
    }

.top-row .navbar-toggler[b-js29o1pvdx] {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.top-row .navbar-toggler-icon[b-js29o1pvdx] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Hide brand on larger screens where full menu is visible */
@media (min-width: 992px) {
    .top-row .navbar-brand[b-js29o1pvdx] {
        display: none;
    }
}

.footer[b-js29o1pvdx] {
    bottom: 0;
    width: 100%;
    position: fixed;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding: 0.35rem 1rem;
    font-size: 0.875rem;
    color: #6c757d;
    height: auto;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile phones: icon-only links with generous tap targets */
@media (max-width: 575.98px) {
    .footer[b-js29o1pvdx] {
        padding: 0.35rem 0.25rem;
    }

    .footer .footer-legal-link[b-js29o1pvdx] {
        font-size: 1.1rem;
        padding: 0.5rem 0.65rem;
        border-radius: 0.375rem;
    }

    .footer .footer-legal-link:active[b-js29o1pvdx] {
        background-color: rgba(102, 126, 234, 0.12);
    }
}

@media (max-width: 991.98px) {
    .top-row .navbar-collapse[b-js29o1pvdx] {
        background: rgba(255, 255, 255, 0.95);
        padding: 1rem;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

@media (min-width: 641px) {
    .page[b-js29o1pvdx] {
        flex-direction: row;
    }

    .sidebar[b-js29o1pvdx] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-js29o1pvdx] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-js29o1pvdx]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-js29o1pvdx], article[b-js29o1pvdx] {
        /*padding-left: 2rem !important;*/
        /*padding-right: 1.5rem !important;*/
    }
}

#blazor-error-ui[b-js29o1pvdx] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-js29o1pvdx] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Administration/Administration.razor.rz.scp.css */
.stat-card[b-vp20a3ocd2] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

.stat-card:hover[b-vp20a3ocd2] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.stat-card.active-card[b-vp20a3ocd2] {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.border-transparent[b-vp20a3ocd2] {
    border-color: transparent !important;
}

.text-purple[b-vp20a3ocd2] {
    color: #6f42c1 !important;
}

.border-purple[b-vp20a3ocd2] {
    border-color: #6f42c1 !important;
}
/* /Components/Pages/Administration/Blogs/BlogsAdministration.razor.rz.scp.css */
/* ── Stat cards ──────────────────────────────────────────────────────────── */
.stat-card[b-ik7hhfm5ds] {
    border-radius: 12px;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border: none;
    border-top: 3px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
    user-select: none;
}

.stat-card:hover[b-ik7hhfm5ds] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    background-color: #fff;
    color: inherit;
}

.stat-card__icon[b-ik7hhfm5ds]  { font-size: 1.6rem; margin-bottom: 0.15rem; }
.stat-card__value[b-ik7hhfm5ds] { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.stat-card__label[b-ik7hhfm5ds] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }

.stat-card--blue[b-ik7hhfm5ds]   { border-top-color: #0d6efd; }
.stat-card--blue   .stat-card__icon[b-ik7hhfm5ds],
.stat-card--blue   .stat-card__value[b-ik7hhfm5ds] { color: #0d6efd; }

.stat-card--green[b-ik7hhfm5ds]  { border-top-color: #198754; }
.stat-card--green  .stat-card__icon[b-ik7hhfm5ds],
.stat-card--green  .stat-card__value[b-ik7hhfm5ds] { color: #198754; }

.stat-card--orange[b-ik7hhfm5ds] { border-top-color: #fd7e14; }
.stat-card--orange .stat-card__icon[b-ik7hhfm5ds],
.stat-card--orange .stat-card__value[b-ik7hhfm5ds] { color: #fd7e14; }

.stat-card--purple[b-ik7hhfm5ds] { border-top-color: #6f42c1; }
.stat-card--purple .stat-card__icon[b-ik7hhfm5ds],
.stat-card--purple .stat-card__value[b-ik7hhfm5ds] { color: #6f42c1; }

.stat-card__action[b-ik7hhfm5ds] {
    font-size: 0.63rem;
    margin-top: 0.2rem;
    opacity: 0;
    transition: opacity .2s ease;
    letter-spacing: .02em;
}

.stat-card:hover .stat-card__action[b-ik7hhfm5ds],
.stat-card--active .stat-card__action[b-ik7hhfm5ds] { opacity: 0.55; }

/* Active (selected) state */
.stat-card--active[b-ik7hhfm5ds] { transform: translateY(-2px); }
.stat-card--blue.stat-card--active[b-ik7hhfm5ds]   { background: #eff6ff; box-shadow: 0 4px 16px rgba(13,110,253,.18), 0 0 0 2px #0d6efd; }
.stat-card--green.stat-card--active[b-ik7hhfm5ds]  { background: #f0fdf4; box-shadow: 0 4px 16px rgba(25,135,84,.18),  0 0 0 2px #198754; }
.stat-card--orange.stat-card--active[b-ik7hhfm5ds] { background: #fff7ed; box-shadow: 0 4px 16px rgba(253,126,20,.18), 0 0 0 2px #fd7e14; }
.stat-card--purple.stat-card--active[b-ik7hhfm5ds] { background: #faf5ff; box-shadow: 0 4px 16px rgba(111,66,193,.18), 0 0 0 2px #6f42c1; }

/* ── Insight cards ───────────────────────────────────────────────────────── */
.insight-card[b-ik7hhfm5ds] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.insight-card:hover[b-ik7hhfm5ds] {
    background-color: #fff;
    color: inherit;
}

.insight-card__header[b-ik7hhfm5ds] {
    padding: .65rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.insight-card__header--green[b-ik7hhfm5ds]  { background: #f0fdf4; color: #166534; border-bottom: 1px solid #bbf7d0; }
.insight-card__header--orange[b-ik7hhfm5ds] { background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa; }

.insight-card__body[b-ik7hhfm5ds] { padding: 0; flex: 1; }

/* ── Leaderboard rows ────────────────────────────────────────────────────── */
.lb-row[b-ik7hhfm5ds] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.lb-row:last-child[b-ik7hhfm5ds] { border-bottom: none; }

.lb-rank[b-ik7hhfm5ds] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: .73rem;
    font-weight: 700;
    flex-shrink: 0;
}

.lb-rank--1[b-ik7hhfm5ds]    { background: #ffd700; color: #7c5900; }
.lb-rank--2[b-ik7hhfm5ds]    { background: #d1d5db; color: #374151; }
.lb-rank--3[b-ik7hhfm5ds]    { background: #cd7f32; color: #fff; }
.lb-rank--4[b-ik7hhfm5ds],
.lb-rank--5[b-ik7hhfm5ds]    { background: #f3f4f6; color: #6b7280; }
.lb-rank--none[b-ik7hhfm5ds] { background: #fee2e2; color: #b91c1c; }
.lb-rank--low[b-ik7hhfm5ds]  { background: #fef9c3; color: #854d0e; }

.lb-info[b-ik7hhfm5ds] { flex: 1; min-width: 0; }
.lb-name[b-ik7hhfm5ds] { font-size: .84rem; font-weight: 500; }

.lb-bar[b-ik7hhfm5ds] {
    height: 4px;
    border-radius: 2px;
    background: #f0f0f0;
    margin-top: .3rem;
    overflow: hidden;
}

.lb-bar__fill[b-ik7hhfm5ds]         { height: 100%; border-radius: 2px; transition: width .4s ease; }
.lb-bar__fill--green[b-ik7hhfm5ds]  { background: #22c55e; }
.lb-bar__fill--yellow[b-ik7hhfm5ds] { background: #f59e0b; }
.lb-bar__fill--empty[b-ik7hhfm5ds]  { background: #fca5a5; opacity: .5; }

/* ── Section cards (assign + filter) ────────────────────────────────────── */
.section-card[b-ik7hhfm5ds] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border: none;
    overflow: hidden;
}

.section-card:hover[b-ik7hhfm5ds] {
    background-color: #fff;
    color: inherit;
}

.section-card__header[b-ik7hhfm5ds] {
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,.06);
    user-select: none;
}

.section-card__header:hover[b-ik7hhfm5ds] { background: #f1f3f5; }

/* ── Category badge chips ────────────────────────────────────────────────── */
.cat-badges-cell[b-ik7hhfm5ds] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .15rem 0;
}

.cat-badge[b-ik7hhfm5ds] {
    display: inline-flex;
    align-items: center;
    padding: .2em .65em;
    border-radius: 20px;
    font-size: .74rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: filter .15s ease, box-shadow .15s ease;
}

.cat-badge:hover[b-ik7hhfm5ds] { filter: brightness(.92); box-shadow: 0 2px 6px rgba(0,0,0,.12); }

.cat-badge--blue[b-ik7hhfm5ds]   { background: #dbeafe; color: #1d4ed8; }
.cat-badge--green[b-ik7hhfm5ds]  { background: #dcfce7; color: #15803d; }
.cat-badge--purple[b-ik7hhfm5ds] { background: #ede9fe; color: #6d28d9; }
.cat-badge--teal[b-ik7hhfm5ds]   { background: #ccfbf1; color: #0f766e; }
.cat-badge--orange[b-ik7hhfm5ds] { background: #ffedd5; color: #c2410c; }
.cat-badge--pink[b-ik7hhfm5ds]   { background: #fce7f3; color: #9d174d; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.btn-xs[b-ik7hhfm5ds] { font-size: .72rem; padding: .15rem .4rem; }
/* /Components/Pages/Administration/LogAdministration.razor.rz.scp.css */
.stat-card[b-a3vsy0x29w] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

.stat-card:hover[b-a3vsy0x29w] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.stat-card.active-card[b-a3vsy0x29w] {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.border-transparent[b-a3vsy0x29w] {
    border-color: transparent !important;
}
/* /Components/Pages/Administration/Products/ProductAdministration.razor.rz.scp.css */
/* ── Stat cards ──────────────────────────────────────────────────────────── */
.stat-card[b-7i4l9g0ke9] {
    border-radius: 12px;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border: none;
    border-top: 3px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
    user-select: none;
}

.stat-card:hover[b-7i4l9g0ke9] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    background-color: #fff;
    color: inherit;
}

.stat-card__icon[b-7i4l9g0ke9] { font-size: 1.6rem; margin-bottom: 0.15rem; }
.stat-card__value[b-7i4l9g0ke9] { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.stat-card__label[b-7i4l9g0ke9] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }

.stat-card__action[b-7i4l9g0ke9] {
    font-size: 0.63rem;
    margin-top: 0.2rem;
    opacity: 0;
    transition: opacity .2s ease;
    letter-spacing: .02em;
}

.stat-card:hover .stat-card__action[b-7i4l9g0ke9],
.stat-card--active .stat-card__action[b-7i4l9g0ke9] { opacity: 0.55; }

.stat-card--blue[b-7i4l9g0ke9]   { border-top-color: #0d6efd; }
.stat-card--blue   .stat-card__icon[b-7i4l9g0ke9],
.stat-card--blue   .stat-card__value[b-7i4l9g0ke9] { color: #0d6efd; }

.stat-card--green[b-7i4l9g0ke9]  { border-top-color: #198754; }
.stat-card--green  .stat-card__icon[b-7i4l9g0ke9],
.stat-card--green  .stat-card__value[b-7i4l9g0ke9] { color: #198754; }

.stat-card--orange[b-7i4l9g0ke9] { border-top-color: #fd7e14; }
.stat-card--orange .stat-card__icon[b-7i4l9g0ke9],
.stat-card--orange .stat-card__value[b-7i4l9g0ke9] { color: #fd7e14; }

.stat-card--purple[b-7i4l9g0ke9] { border-top-color: #6f42c1; }
.stat-card--purple .stat-card__icon[b-7i4l9g0ke9],
.stat-card--purple .stat-card__value[b-7i4l9g0ke9] { color: #6f42c1; }

/* Active (selected) state */
.stat-card--active[b-7i4l9g0ke9] { transform: translateY(-2px); }
.stat-card--blue.stat-card--active[b-7i4l9g0ke9]   { background: #eff6ff; box-shadow: 0 4px 16px rgba(13,110,253,.18), 0 0 0 2px #0d6efd; }
.stat-card--green.stat-card--active[b-7i4l9g0ke9]  { background: #f0fdf4; box-shadow: 0 4px 16px rgba(25,135,84,.18),  0 0 0 2px #198754; }
.stat-card--orange.stat-card--active[b-7i4l9g0ke9] { background: #fff7ed; box-shadow: 0 4px 16px rgba(253,126,20,.18), 0 0 0 2px #fd7e14; }
.stat-card--purple.stat-card--active[b-7i4l9g0ke9] { background: #faf5ff; box-shadow: 0 4px 16px rgba(111,66,193,.18), 0 0 0 2px #6f42c1; }

/* ── Insight cards ───────────────────────────────────────────────────────── */
.insight-card[b-7i4l9g0ke9] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.insight-card:hover[b-7i4l9g0ke9] {
    background-color: #fff;
    color: inherit;
}

.insight-card__header[b-7i4l9g0ke9] {
    padding: .65rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.insight-card__header--green[b-7i4l9g0ke9]  { background: #f0fdf4; color: #166534; border-bottom: 1px solid #bbf7d0; }
.insight-card__header--orange[b-7i4l9g0ke9] { background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa; }

.insight-card__body[b-7i4l9g0ke9] { padding: 0; flex: 1; }

/* ── Leaderboard rows ────────────────────────────────────────────────────── */
.lb-row[b-7i4l9g0ke9] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.lb-row:last-child[b-7i4l9g0ke9] { border-bottom: none; }

.lb-rank[b-7i4l9g0ke9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: .73rem;
    font-weight: 700;
    flex-shrink: 0;
}

.lb-rank--1[b-7i4l9g0ke9]    { background: #ffd700; color: #7c5900; }
.lb-rank--2[b-7i4l9g0ke9]    { background: #d1d5db; color: #374151; }
.lb-rank--3[b-7i4l9g0ke9]    { background: #cd7f32; color: #fff; }
.lb-rank--4[b-7i4l9g0ke9],
.lb-rank--5[b-7i4l9g0ke9]    { background: #f3f4f6; color: #6b7280; }
.lb-rank--none[b-7i4l9g0ke9] { background: #fee2e2; color: #b91c1c; }
.lb-rank--low[b-7i4l9g0ke9]  { background: #fef9c3; color: #854d0e; }

.lb-info[b-7i4l9g0ke9] { flex: 1; min-width: 0; }
.lb-name[b-7i4l9g0ke9] { font-size: .84rem; font-weight: 500; }

.lb-bar[b-7i4l9g0ke9] {
    height: 4px;
    border-radius: 2px;
    background: #f0f0f0;
    margin-top: .3rem;
    overflow: hidden;
}

.lb-bar__fill[b-7i4l9g0ke9]        { height: 100%; border-radius: 2px; transition: width .4s ease; }
.lb-bar__fill--green[b-7i4l9g0ke9]  { background: #22c55e; }
.lb-bar__fill--yellow[b-7i4l9g0ke9] { background: #f59e0b; }
.lb-bar__fill--empty[b-7i4l9g0ke9]  { background: #fca5a5; opacity: .5; }

/* ── Section cards (assign + filter) ────────────────────────────────────── */
.section-card[b-7i4l9g0ke9] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border: none;
    overflow: hidden;
}

.section-card:hover[b-7i4l9g0ke9] {
    background-color: #fff;
    color: inherit;
}

.section-card__header[b-7i4l9g0ke9] {
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,.06);
    user-select: none;
}

.section-card__header:hover[b-7i4l9g0ke9] { background: #f1f3f5; }

/* ── Product badge chips ─────────────────────────────────────────────────── */
.product-badges-cell[b-7i4l9g0ke9] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .15rem 0;
}

.product-badge[b-7i4l9g0ke9] {
    display: inline-flex;
    align-items: center;
    padding: .2em .65em;
    border-radius: 20px;
    font-size: .74rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: filter .15s ease, box-shadow .15s ease;
}

.product-badge:hover[b-7i4l9g0ke9] { filter: brightness(.92); box-shadow: 0 2px 6px rgba(0,0,0,.12); }

.product-badge--blue[b-7i4l9g0ke9]   { background: #dbeafe; color: #1d4ed8; }
.product-badge--green[b-7i4l9g0ke9]  { background: #dcfce7; color: #15803d; }
.product-badge--purple[b-7i4l9g0ke9] { background: #ede9fe; color: #6d28d9; }
.product-badge--teal[b-7i4l9g0ke9]   { background: #ccfbf1; color: #0f766e; }
.product-badge--orange[b-7i4l9g0ke9] { background: #ffedd5; color: #c2410c; }
.product-badge--pink[b-7i4l9g0ke9]   { background: #fce7f3; color: #9d174d; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.btn-xs[b-7i4l9g0ke9] { font-size: .72rem; padding: .15rem .4rem; }
/* /Components/Pages/Administration/Products/ProductPopupWindow.razor.rz.scp.css */
.modal-body hr[b-7krhbwpoqz] {
    border-color: #e9ecef;
    opacity: 1;
}

.input-group-text[b-7krhbwpoqz] {
    min-width: 2.5rem;
    justify-content: center;
    color: #6c757d;
    background-color: #f8f9fa;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* ── Dashboard product cards ─────────────────────────────── */
.product-card[b-zgbtr7u1cj] {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    height: 100%;
    position: relative;
    padding: 0;
    cursor: pointer;
}

.product-card a.stretched-link[b-zgbtr7u1cj]::after {
    border-radius: 16px;
}

.product-card:hover[b-zgbtr7u1cj] {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
    background: #ffffff;
}

.product-card .product-img-wrap[b-zgbtr7u1cj] {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8edf8 100%);
    padding: 1.5rem;
    text-align: center;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card .product-img-wrap img[b-zgbtr7u1cj] {
    max-height: 72px;
    width: auto;
    object-fit: contain;
    transition: transform .3s ease;
}

.product-card:hover .product-img-wrap img[b-zgbtr7u1cj] {
    transform: scale(1.08);
}

.product-card .card-body[b-zgbtr7u1cj] {
    padding: 1.25rem 1.5rem 1.5rem;
}

.product-card .card-title[b-zgbtr7u1cj] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: .5rem;
}

.product-card .card-text[b-zgbtr7u1cj] {
    font-size: .92rem;
    color: #6c757d;
    line-height: 1.55;
}

/* ── Info section ──────────────────────────────────────────── */
.dashboard-info-section[b-zgbtr7u1cj] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px auto;
    max-width: 1200px;
}

/* ── Product-specific gradients ────────────────────────────── */
/* Coming soon ribbon */
.coming-soon-ribbon[b-zgbtr7u1cj] {
    position: absolute;
    top: 12px;
    right: -28px;
    background: linear-gradient(90deg, #f7971e, #ffd200);
    color: #1a1a2e;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    padding: .2rem 2.4rem;
    transform: rotate(35deg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    text-transform: uppercase;
    z-index: 2;
    pointer-events: none;
}

/* Coming soon card styling */
.coming-soon-card[b-zgbtr7u1cj] {
    opacity: .92;
}

.coming-soon-card-timesheet .product-img-wrap[b-zgbtr7u1cj] {
    background: linear-gradient(135deg, #1e1b4b 0%, #6366f1 100%);
    position: relative;
}

/* MyTimeSheet */
.product-card-mytimesheet .product-img-wrap[b-zgbtr7u1cj] {
    background: linear-gradient(135deg, #1e1b4b 0%, #6366f1 100%);
}

/* MyBlog */
.product-card-myblog .product-img-wrap[b-zgbtr7u1cj] {
    background: linear-gradient(135deg, #fed7aa 0%, #f97316 100%);
}

/* MyGames */
.product-card-mygames .product-img-wrap[b-zgbtr7u1cj] {
    background: linear-gradient(135deg, #a7f3d0 0%, #10b981 100%);
}

/* MyBudget */
.product-card-mybudget .product-img-wrap[b-zgbtr7u1cj] {
    background: linear-gradient(135deg, #bfdbfe 0%, #3b82f6 100%);
}

@media (max-width: 768px) {
    .dashboard-info-section[b-zgbtr7u1cj] {
        flex-direction: column;
        align-items: center;
    }
}

/* ── Premium gem badge on cart button ───────────────────── */
.svc-gem-badge[b-zgbtr7u1cj] {
    background: linear-gradient(135deg, #764ba2 0%, #a855f7 100%);
    font-size: 0.55rem;
    padding: 0.22em 0.38em;
    box-shadow: 0 2px 6px rgba(118, 75, 162, 0.45);
}

/* ── Drag handle for reordering ───────────────────────────── */
.card-drag-handle[b-zgbtr7u1cj] {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.product-card:hover .card-drag-handle[b-zgbtr7u1cj] {
    opacity: 1;
}

.card-drag-handle:active[b-zgbtr7u1cj] {
    cursor: grabbing;
}

/* ── Dragging state ───────────────────────────────────────── */
.is-dragging[b-zgbtr7u1cj] {
    opacity: 0.5;
    transform: scale(0.95);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
/* /Components/Pages/Products/MyBlog/Blog.razor.rz.scp.css */
/* ── Blog card link wrapper ─────────────────────────────── */
.blog-card-link[b-193x42r8i3] {
    color: inherit;
    text-decoration: none;
    display: flex;
    height: 100%;
}

.blog-card-link:hover[b-193x42r8i3] {
    color: inherit;
    text-decoration: none;
}

/* ── Individual blog card ───────────────────────────────── */
.blog-card[b-193x42r8i3] {
    position: relative;
    overflow: hidden;
    border: 1px solid #e8e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    padding: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── Blog ribbon for draft status ───────────────────────── */
.blog-ribbon[b-193x42r8i3] {
    position: absolute;
    top: 18px;
    right: -32px;
    width: 130px;
    transform: rotate(45deg);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
    padding: 0.25rem 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

/* Draft ribbon - Warm amber/gold */
.blog-ribbon-draft[b-193x42r8i3] {
    background: linear-gradient(135deg, #ff9800 0%, #ff6f00 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Published ribbon - Vibrant emerald green */
.blog-ribbon-published[b-193x42r8i3] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Your Blog ribbon - Cool purple/indigo */
.blog-ribbon-mine[b-193x42r8i3] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.blog-card:hover[b-193x42r8i3] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.22);
}

/* Ensure card body sits above the ribbon */
.blog-card .card-body[b-193x42r8i3] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── Card content areas ─────────────────────────────────── */
.blog-title[b-193x42r8i3] {
    font-size: 1rem;
    font-weight: 700;
    color: #2d2d4e;
    line-height: 1.4;
}

.blog-excerpt[b-193x42r8i3] {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    flex-grow: 1; /* This pushes the meta section to the bottom */
}

.blog-meta[b-193x42r8i3] {
    font-size: 0.78rem;
    color: #999;
    border-top: 1px solid #f0f0f5;
    padding-top: 0.6rem;
    margin-top: auto; /* Ensures it stays at the bottom */
}

/* ── Category tag badges ────────────────────────────────── */
.blog-tag[b-193x42r8i3] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background-color: rgba(102, 126, 234, 0.1);
    color: #5a3680;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* ── AI-generated label ─────────────────────────────────── */
.blog-ai-label[b-193x42r8i3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: #4CAF50;
    font-style: italic;
}

/* ── Toolbar (title + search bar row) ───────────────────── */
.blog-toolbar[b-193x42r8i3] {
    border-bottom: 1px solid #f0f0f5;
    padding-bottom: 1rem;
}

/* ── Filter Tabs ────────────────────────────────────────── */
.blog-filter-tabs[b-193x42r8i3] {
    display: flex;
    gap: 0.75rem;
    border-bottom: 2px solid #e8e8f0;
    padding-bottom: 0.5rem;
}

.filter-tab[b-193x42r8i3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #666;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: -0.5rem;
}

.filter-tab i[b-193x42r8i3] {
    font-size: 1.1rem;
}

.filter-tab .badge[b-193x42r8i3] {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    color: #495057;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    margin-left: 0.25rem;
    font-weight: 600;
}

.filter-tab:hover:not(.active)[b-193x42r8i3] {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 8px 8px 0 0;
}

.filter-tab.active[b-193x42r8i3] {
    color: #667eea;
    border-bottom-color: #667eea;
    background: linear-gradient(180deg, rgba(102, 126, 234, 0.08) 0%, transparent 100%);
}

.filter-tab.active .badge[b-193x42r8i3] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(118, 75, 162, 0.3);
}

/* ── Mobile responsive styles ───────────────────────────── */
@media (max-width: 768px) {
    .blog-filter-tabs[b-193x42r8i3] {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(102, 126, 234, 0.3) transparent;
        gap: 0.5rem;
        padding-bottom: 0.75rem;
        margin-bottom: 0.5rem;
    }

    /* Custom scrollbar for webkit browsers */
    .blog-filter-tabs[b-193x42r8i3]::-webkit-scrollbar {
        height: 4px;
    }

    .blog-filter-tabs[b-193x42r8i3]::-webkit-scrollbar-track {
        background: transparent;
    }

    .blog-filter-tabs[b-193x42r8i3]::-webkit-scrollbar-thumb {
        background: rgba(102, 126, 234, 0.3);
        border-radius: 2px;
    }

    .filter-tab[b-193x42r8i3] {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: fit-content;
    }

    .filter-tab i[b-193x42r8i3] {
        font-size: 1rem;
    }

    .filter-tab span[b-193x42r8i3] {
        display: inline;
    }

    .filter-tab .badge[b-193x42r8i3] {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}

/* Extra small devices (phones in portrait mode) */
@media (max-width: 576px) {
    .blog-filter-tabs[b-193x42r8i3] {
        gap: 0.4rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .filter-tab[b-193x42r8i3] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        gap: 0.35rem;
    }

    .filter-tab i[b-193x42r8i3] {
        font-size: 0.95rem;
    }

    /* Optional: Hide text labels on very small screens, show only icons + badges */
    .filter-tab span:not(.badge)[b-193x42r8i3] {
        display: none;
    }
}

/* Medium devices and up - ensure tabs don't overflow */
@media (min-width: 769px) {
    .blog-filter-tabs[b-193x42r8i3] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ── Pagination ─────────────────────────────────────────── */
.blog-pagination .page-link[b-193x42r8i3] {
    border: 1px solid #e8e8f0;
    color: #5a3680;
    border-radius: 6px !important;
    margin: 0 2px;
    min-width: 36px;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.blog-pagination .page-item.active .page-link[b-193x42r8i3] {
    background-color: #667eea;
    border-color: #667eea;
    color: white;
    font-weight: 600;
}

.blog-pagination .page-item.disabled .page-link[b-193x42r8i3] {
    color: #ccc;
    border-color: #f0f0f5;
}

.blog-pagination .page-link:hover[b-193x42r8i3] {
    background-color: rgba(102, 126, 234, 0.1);
    color: #5a3680;
}

/* ── Blog interaction buttons (translate, comment, star, pdf) ─── */
.blog-interaction-btn[b-193x42r8i3] {
    color: #999;
    font-size: 1rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.blog-interaction-btn:hover[b-193x42r8i3] {
    color: #667eea;
    transform: scale(1.15);
}

.blog-interaction-btn:active[b-193x42r8i3] {
    transform: scale(1);
}

/* ── Blog status badges ─────────────────────────────────── */
.blog-status-badge[b-193x42r8i3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.blog-status-published[b-193x42r8i3] {
    background-color: rgba(76, 175, 80, 0.1);
    color: #2e7d32;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.blog-status-published i[b-193x42r8i3] {
    font-size: 0.75rem;
}

.blog-status-draft[b-193x42r8i3] {
    background-color: rgba(255, 152, 0, 0.1);
    color: #e65100;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.blog-status-draft i[b-193x42r8i3] {
    font-size: 0.75rem;
}

.blog-status-yours[b-193x42r8i3] {
    background-color: rgba(255, 193, 7, 0.15);
    color: #cc7a00;
    border: 1px solid rgba(255, 193, 7, 0.4);
    font-weight: 600;
}

.blog-status-yours i[b-193x42r8i3] {
    font-size: 0.75rem;
}
/* /Components/Pages/Products/MyBlog/BlogPopupWindow.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   BLOG POPUP EDITOR — Scoped styles for BlogPopupWindow.razor
   ══════════════════════════════════════════════════════════ */

/* ── Overlay backdrop ───────────────────────────────────── */
.blog-modal-backdrop[b-shv1rpk3gg] {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 40, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 1040;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

/* ── Modal panel ────────────────────────────────────────── */
.blog-modal[b-shv1rpk3gg] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 98%;
    height: 100%;
    max-height: 98%;
    display: flex;
    flex-direction: column;
    animation: blog-modal-slide-in-b-shv1rpk3gg 0.22s ease;
    /* Make the modal resizable */
    resize: both;
    overflow: auto;
    min-width: 600px;
    min-height: 500px;
}

@keyframes blog-modal-slide-in-b-shv1rpk3gg {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Modal header ───────────────────────────────────────── */
.blog-modal-header[b-shv1rpk3gg] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.25rem 1.5rem;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-modal-header h3[b-shv1rpk3gg] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
}

.blog-modal-close[b-shv1rpk3gg] {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-modal-close:hover[b-shv1rpk3gg] {
    background: rgba(255, 255, 255, 0.32);
}

/* ── Modal body ─────────────────────────────────────────── */
.blog-modal-body[b-shv1rpk3gg] {
    padding: 1.5rem;
    overflow-y: auto;
    /* flex:1 lets the body fill all space between header and footer;
       the 90vh on .blog-modal is the constraint — no need for max-height here */
    flex: 1;
    min-height: 0;
}

/* ── Section label ──────────────────────────────────────── */
.field-label[b-shv1rpk3gg] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #764ba2;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.field-label.required[b-shv1rpk3gg]::after {
    content: "*";
    color: #e53e3e;
    margin-left: 2px;
}

/* ── Form section card ──────────────────────────────────── */
.form-section[b-shv1rpk3gg] {
    background: #fafafa;
    border: 1px solid #eeeef8;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

/* ── Rich editor container ──────────────────────────────── */
.quill-wrapper[b-shv1rpk3gg] {
    border: 1px solid #d0d0e8;
    border-radius: 8px;
    background: #fff;
    /* flex layout lets the toolbar stay fixed while the editor expands */
    display: flex;
    flex-direction: column;
    /* No fixed height - allow auto-expansion */
    min-height: 100px;
    /* Make the editor resizable */
    resize: vertical;
    overflow: auto;
}

.quill-wrapper.content-editor[b-shv1rpk3gg] {
    min-height: 130px;
}

.quill-wrapper[b-shv1rpk3gg]  .ql-toolbar {
    border: none;
    border-bottom: 1px solid #e8e8f0;
    background: #f5f6ff;
    padding: 0.5rem;
    flex-wrap: wrap;
    gap: 2px;
    /* toolbar must not shrink */
    flex-shrink: 0;
}

.quill-wrapper[b-shv1rpk3gg]  .ql-container {
    border: none;
    font-size: 0.96rem;
    /* Auto-expand: no overflow, no scrollbars */
    overflow: visible;
    /* Remove fixed height to allow expansion */
    height: auto;
}

.quill-wrapper[b-shv1rpk3gg]  .ql-editor {
    /* Auto-expand with content */
    min-height: 80px;
    padding: 0.75rem 1rem;
    line-height: 1.7;
    box-sizing: border-box;
    overflow: visible;
}

.quill-wrapper[b-shv1rpk3gg]  .ql-editor.ql-blank::before {
    /* !important overrides Quill's own stylesheet which also uses !important */
    content: '' !important;
    display: none !important;
}

/* ── Quill link/tooltip popup ───────────────────────────── */
.quill-wrapper[b-shv1rpk3gg]  .ql-tooltip {
    /* Quill calculates left/top via getBoundingClientRect() (viewport coords).
       position:fixed uses those same viewport coords, so positioning stays
       accurate AND the tooltip escapes the overflow:auto clip on the wrapper. */
    position: fixed !important;
    z-index: 1050;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    border: 1px solid #d0d0e8;
}

/* ── Toggle editor link ─────────────────────────────────── */
.editor-toggle[b-shv1rpk3gg] {
    font-size: 0.78rem;
    color: #667eea;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.25rem 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.editor-toggle:hover[b-shv1rpk3gg] {
    color: #764ba2;
}

/* ── Upload image label button ──────────────────────────── */
.upload-img-btn[b-shv1rpk3gg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.15s;
}

.upload-img-btn:hover[b-shv1rpk3gg] {
    background: rgba(102, 126, 234, 0.12);
}

/* ── Published toggle ───────────────────────────────────── */
.published-toggle[b-shv1rpk3gg] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
}

.published-toggle input[type="checkbox"][b-shv1rpk3gg] {
    width: 2.4rem;
    height: 1.3rem;
    cursor: pointer;
}

/* ── Modal footer ───────────────────────────────────────── */
.blog-modal-footer[b-shv1rpk3gg] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f0f0f8;
    border-radius: 0 0 16px 16px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: #fafafa;
}

.blog-modal-footer .btn-delete[b-shv1rpk3gg] {
    margin-left: auto;
}

/* ── Error text ─────────────────────────────────────────── */
.modal-error[b-shv1rpk3gg] {
    width: 100%;
    padding: 0 1.5rem 0.75rem;
    font-size: 0.85rem;
    color: #c53030;
}

/* ── Delete confirm dialog ──────────────────────────────── */
.confirm-modal-backdrop[b-shv1rpk3gg] {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 40, 0.65);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.confirm-modal[b-shv1rpk3gg] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
}

.confirm-modal-header[b-shv1rpk3gg] {
    background: #fff3cd;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #ffc107;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.confirm-modal-header h4[b-shv1rpk3gg] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #7d4e00;
}

.confirm-modal-body[b-shv1rpk3gg] {
    padding: 1.25rem;
}

.confirm-modal-footer[b-shv1rpk3gg] {
    padding: 0.75rem 1.25rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    border-top: 1px solid #f0f0f0;
}

/* ── Mobile – bottom-sheet pattern ─────────────────────── */
@media (max-width: 575.98px) {
    .blog-modal-backdrop[b-shv1rpk3gg] {
        padding: 0;
        align-items: flex-end;
    }

    .blog-modal[b-shv1rpk3gg] {
        border-radius: 20px 20px 0 0;
        max-height: 96vh;
        /* Disable resize on mobile for better UX */
        resize: none;
        min-width: unset;
        min-height: unset;
    }

    .blog-modal-header[b-shv1rpk3gg] {
        padding: 1rem 1.1rem;
        border-radius: 20px 20px 0 0;
    }

    .blog-modal-body[b-shv1rpk3gg] {
        padding: 1rem;
        max-height: calc(96vh - 180px);
    }

    .blog-modal-footer[b-shv1rpk3gg] {
        padding: 0.75rem 1rem;
        flex-direction: column;
        gap: 0.4rem;
    }

    .blog-modal-footer .btn[b-shv1rpk3gg] {
        width: 100%;
    }

    .blog-modal-footer .btn-delete[b-shv1rpk3gg] {
        margin-left: 0;
    }

    .confirm-modal[b-shv1rpk3gg] {
        margin: 0.75rem;
        width: calc(100% - 1.5rem);
    }
}

/* ══════════════════════════════════════════════════════════
   TABLE BUILDER MODAL — Custom table creation dialog
   ══════════════════════════════════════════════════════════ */

/* Backdrop overlay */
.table-builder-backdrop[b-shv1rpk3gg] {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 40, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Modal container */
.table-builder-modal[b-shv1rpk3gg] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.28), 0 4px 16px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 480px;
    animation: table-modal-pop-in-b-shv1rpk3gg 0.2s ease-out;
}

@keyframes table-modal-pop-in-b-shv1rpk3gg {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(-12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Header with gradient */
.table-builder-header[b-shv1rpk3gg] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 1.25rem;
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-builder-header h5[b-shv1rpk3gg] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
}

.table-builder-header .btn-close[b-shv1rpk3gg] {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 0.9;
}

.table-builder-header .btn-close:hover[b-shv1rpk3gg] {
    opacity: 1;
}

/* Body content */
.table-builder-body[b-shv1rpk3gg] {
    padding: 1.5rem 1.25rem;
}

.table-builder-body .form-label[b-shv1rpk3gg] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #5a3680;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
}

.table-builder-body .form-control[b-shv1rpk3gg] {
    font-size: 0.95rem;
    border-color: #d0d0e8;
    border-radius: 6px;
}

.table-builder-body .form-control:focus[b-shv1rpk3gg] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}

.table-builder-body .form-check-input[b-shv1rpk3gg] {
    width: 1.1rem;
    height: 1.1rem;
    border-color: #d0d0e8;
}

.table-builder-body .form-check-input:checked[b-shv1rpk3gg] {
    background-color: #667eea;
    border-color: #667eea;
}

.table-builder-body .form-check-label[b-shv1rpk3gg] {
    font-size: 0.9rem;
    color: #4a4a6a;
}

.table-builder-body .text-muted[b-shv1rpk3gg] {
    background: #f5f6ff;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    border-left: 3px solid #667eea;
}

/* Footer buttons */
.table-builder-footer[b-shv1rpk3gg] {
    padding: 1rem 1.25rem;
    border-top: 1px solid #f0f0f8;
    border-radius: 0 0 14px 14px;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    background: #fafafa;
}

.table-builder-footer .btn[b-shv1rpk3gg] {
    font-size: 0.88rem;
}

/* Custom table button in Quill toolbar */
.custom-table-btn[b-shv1rpk3gg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: #444;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.custom-table-btn:hover[b-shv1rpk3gg] {
    background: #f0f0f0;
    border-color: #ccc;
}

.custom-table-btn:active[b-shv1rpk3gg] {
    background: #e0e0e0;
    border-color: #aaa;
}

/* Mobile responsiveness */
@media (max-width: 575.98px) {
    .table-builder-modal[b-shv1rpk3gg] {
        max-width: calc(100% - 2rem);
    }

    .table-builder-body[b-shv1rpk3gg] {
        padding: 1.1rem 1rem;
    }

    .table-builder-footer[b-shv1rpk3gg] {
        flex-direction: column;
        gap: 0.4rem;
    }

    .table-builder-footer .btn[b-shv1rpk3gg] {
        width: 100%;
    }
}
/* /Components/Pages/Products/MyBlog/CommentItem.razor.rz.scp.css */
/* Comment Item Layout */
.comment-item[b-pafrk57ex7] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    position: relative;
}

.comment-reply[b-pafrk57ex7] {
    margin-left: 2rem;
}

/* Avatar Section */
.comment-avatar[b-pafrk57ex7] {
    flex-shrink: 0;
    position: relative;
}

.avatar-circle[b-pafrk57ex7] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2);
}

.comment-reply .avatar-circle[b-pafrk57ex7] {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
}

.reply-connector[b-pafrk57ex7] {
    position: absolute;
    top: 38px;
    left: 19px;
    width: 2px;
    height: calc(100% - 18px);
    background: linear-gradient(180deg, #667eea 0%, transparent 100%);
}

/* Content Section */
.comment-content[b-pafrk57ex7] {
    flex: 1;
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
}

.comment-content[b-pafrk57ex7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px 0 0 12px;
    transition: height 0.3s ease;
}

.comment-content:hover[b-pafrk57ex7]::before {
    height: 100%;
}

.comment-content:hover[b-pafrk57ex7] {
    border-color: #667eea;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.12);
    transform: translateX(4px);
}

.comment-reply .comment-content[b-pafrk57ex7] {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* Header */
.comment-header[b-pafrk57ex7] {
    margin-bottom: 0.5rem;
}

.comment-author-info[b-pafrk57ex7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.author-name[b-pafrk57ex7] {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.author-badge[b-pafrk57ex7] {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
}

.comment-date[b-pafrk57ex7] {
    color: #6c757d;
    font-size: 0.8rem;
}

.edited-badge[b-pafrk57ex7] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: #6c757d;
    font-size: 0.75rem;
    font-style: italic;
}

.edited-badge i[b-pafrk57ex7] {
    font-size: 0.65rem;
}

/* Body */
.comment-body[b-pafrk57ex7] {
    margin-bottom: 0.5rem;
}

.comment-text[b-pafrk57ex7] {
    margin: 0;
    color: #495057;
    line-height: 1.6;
    word-wrap: break-word;
    font-size: 0.9rem;
}

/* Edit Mode */
.edit-mode[b-pafrk57ex7] {
    margin-top: 0.5rem;
}

.comment-edit-input[b-pafrk57ex7] {
    width: 100%;
    border: 2px solid #667eea;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    line-height: 1.5;
}

.comment-edit-input:focus[b-pafrk57ex7] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.edit-actions[b-pafrk57ex7] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.btn-save[b-pafrk57ex7], .btn-cancel[b-pafrk57ex7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save[b-pafrk57ex7] {
    background: #28a745;
    color: white;
}

.btn-save:hover[b-pafrk57ex7] {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.btn-cancel[b-pafrk57ex7] {
    background: #6c757d;
    color: white;
}

.btn-cancel:hover[b-pafrk57ex7] {
    background: #5a6268;
}

/* Actions */
.comment-actions[b-pafrk57ex7] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    flex-wrap: wrap;
}

.action-btn[b-pafrk57ex7] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #6c757d;
}

.action-btn:hover[b-pafrk57ex7] {
    transform: translateY(-1px);
}

.reply-btn[b-pafrk57ex7] {
    color: #667eea;
}

.reply-btn:hover[b-pafrk57ex7] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.edit-btn[b-pafrk57ex7] {
    color: #ffc107;
}

.edit-btn:hover[b-pafrk57ex7] {
    background: rgba(255, 193, 7, 0.1);
    border-color: #ffc107;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

.delete-btn[b-pafrk57ex7] {
    color: #dc3545;
}

.delete-btn:hover[b-pafrk57ex7] {
    background: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
}

.action-btn i[b-pafrk57ex7] {
    font-size: 0.95rem;
}

/* Reply Section */
.reply-section[b-pafrk57ex7] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 2px solid #e9ecef;
}

.reply-header[b-pafrk57ex7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    color: #495057;
    font-size: 0.85rem;
    font-weight: 500;
}

.reply-header i[b-pafrk57ex7] {
    color: #667eea;
    font-size: 0.95rem;
}

.reply-header strong[b-pafrk57ex7] {
    color: #764ba2;
}

.reply-input[b-pafrk57ex7] {
    width: 100%;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    line-height: 1.6;
    background: #fafbfc;
    transition: all 0.3s ease;
}

.reply-input:focus[b-pafrk57ex7] {
    outline: none;
    border-color: #667eea;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-1px);
}

.reply-footer[b-pafrk57ex7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
}

.reply-footer .character-count[b-pafrk57ex7] {
    font-size: 0.8rem;
    color: #6c757d;
}

.reply-actions[b-pafrk57ex7] {
    display: flex;
    gap: 0.5rem;
}

.btn-cancel-reply[b-pafrk57ex7], .btn-submit-reply[b-pafrk57ex7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-reply[b-pafrk57ex7] {
    background: #e9ecef;
    color: #495057;
}

.btn-cancel-reply:hover[b-pafrk57ex7] {
    background: #dee2e6;
}

.btn-submit-reply[b-pafrk57ex7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(118, 75, 162, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-submit-reply[b-pafrk57ex7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-submit-reply:hover[b-pafrk57ex7]::before {
    left: 100%;
}

.btn-submit-reply:hover[b-pafrk57ex7] {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(118, 75, 162, 0.5);
}

.btn-submit-reply:active[b-pafrk57ex7] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(118, 75, 162, 0.3);
}

.btn-submit-reply.btn-inactive[b-pafrk57ex7] {
    opacity: 0.7;
    background: linear-gradient(135deg, #9ba8f0 0%, #ab9cc5 100%);
    box-shadow: 0 2px 4px rgba(118, 75, 162, 0.2);
}

.btn-submit-reply.btn-inactive:hover[b-pafrk57ex7] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(118, 75, 162, 0.2);
}

.reply-section .validation-message[b-pafrk57ex7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
    border-left: 3px solid #dc3545;
    border-radius: 6px;
    color: #dc3545;
    font-size: 0.8rem;
    font-weight: 500;
    animation: slideDown-b-pafrk57ex7 0.3s ease-out;
}

@keyframes slideDown-b-pafrk57ex7 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reply-section .validation-message i[b-pafrk57ex7] {
    font-size: 1rem;
}

/* Replies List */
.comment-replies[b-pafrk57ex7] {
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .comment-item[b-pafrk57ex7] {
        gap: 0.75rem;
    }

    .comment-reply[b-pafrk57ex7] {
        margin-left: 1.5rem;
    }

    .avatar-circle[b-pafrk57ex7] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .comment-reply .avatar-circle[b-pafrk57ex7] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .comment-content[b-pafrk57ex7] {
        padding: 0.75rem 1rem;
    }

    .comment-actions[b-pafrk57ex7] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .reply-footer[b-pafrk57ex7] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .reply-actions[b-pafrk57ex7] {
        width: 100%;
    }

    .btn-cancel-reply[b-pafrk57ex7], .btn-submit-reply[b-pafrk57ex7] {
        flex: 1;
        justify-content: center;
    }
}
/* /Components/Pages/Products/MyBlog/CommentsComponent.razor.rz.scp.css */
.blog-comments-component[b-u9l7vwscfo] {
    margin: 1.5rem 0;
}

/* Compact Header */
.comments-header-compact[b-u9l7vwscfo] {
    margin-bottom: 1rem;
}

.comments-header-compact h4[b-u9l7vwscfo] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comments-header-compact i[b-u9l7vwscfo] {
    color: #667eea;
}

.comment-count-badge[b-u9l7vwscfo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #667eea;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    min-width: 1.5rem;
}

/* Add Comment Button - Compact */
.btn-add-comment-compact[b-u9l7vwscfo] {
    width: 100%;
    background: #f7fafc;
    border: 2px dashed #cbd5e0;
    border-radius: 10px;
    padding: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #4a5568;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}

.btn-add-comment-compact:hover[b-u9l7vwscfo] {
    background: #edf2f7;
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-1px);
}

.btn-add-comment-compact i[b-u9l7vwscfo] {
    font-size: 1.2rem;
}

/* Expanded Comment Box */
.add-comment-compact[b-u9l7vwscfo] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.comment-input-compact[b-u9l7vwscfo] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s ease;
    margin-bottom: 0.75rem;
}

.comment-input-compact:focus[b-u9l7vwscfo] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.comment-actions[b-u9l7vwscfo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.char-count[b-u9l7vwscfo] {
    font-size: 0.8rem;
    color: #718096;
}

.char-count.warning[b-u9l7vwscfo] {
    color: #f59e0b;
    font-weight: 600;
}

.action-buttons[b-u9l7vwscfo] {
    display: flex;
    gap: 0.5rem;
}

.btn-cancel-compact[b-u9l7vwscfo],
.btn-post-compact[b-u9l7vwscfo] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-compact[b-u9l7vwscfo] {
    background: transparent;
    color: #718096;
}

.btn-cancel-compact:hover[b-u9l7vwscfo] {
    background: #f7fafc;
    color: #2d3748;
}

.btn-post-compact[b-u9l7vwscfo] {
    background: #667eea;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-post-compact:hover:not(:disabled)[b-u9l7vwscfo] {
    background: #5568d3;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.btn-post-compact:disabled[b-u9l7vwscfo] {
    opacity: 0.5;
    cursor: not-allowed;
}

.validation-compact[b-u9l7vwscfo] {
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Premium/Login Badges - Inline */
.premium-badge-inline[b-u9l7vwscfo],
.login-badge-inline[b-u9l7vwscfo] {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #92400e;
    margin-bottom: 1rem;
}

.login-badge-inline[b-u9l7vwscfo] {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
}

.login-badge-inline a[b-u9l7vwscfo] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.login-badge-inline a:hover[b-u9l7vwscfo] {
    text-decoration: underline;
}

/* Comments Toggle Button */
.comments-toggle[b-u9l7vwscfo] {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #475569;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}

.comments-toggle:hover[b-u9l7vwscfo] {
    background: #f1f5f9;
    border-color: #cbd5e0;
    color: #1e293b;
}

.comments-toggle i[b-u9l7vwscfo] {
    transition: transform 0.2s ease;
}

/* Comments List - Compact */
.comments-list-compact[b-u9l7vwscfo] {
    margin-top: 1rem;
}

/* No Comments State */
.no-comments-compact[b-u9l7vwscfo] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.no-comments-compact i[b-u9l7vwscfo] {
    font-size: 1.2rem;
}

/* Loading State */
.loading-compact[b-u9l7vwscfo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: #64748b;
    font-size: 0.9rem;
}

/* Toast Messages */
.comment-toast[b-u9l7vwscfo] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    animation: slideInRight-b-u9l7vwscfo 0.3s ease;
}

@keyframes slideInRight-b-u9l7vwscfo {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.comment-toast.success[b-u9l7vwscfo] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

.comment-toast.error[b-u9l7vwscfo] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

.comment-toast i[b-u9l7vwscfo] {
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .comments-header-compact h4[b-u9l7vwscfo] {
        font-size: 1rem;
    }

    .btn-add-comment-compact[b-u9l7vwscfo] {
        font-size: 0.9rem;
        padding: 0.8rem;
    }
}
    background-clip: text;[b-u9l7vwscfo]
}

.comment-input[b-u9l7vwscfo] {
    width: 100%;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    transition: all 0.3s ease;
    line-height: 1.6;
    background: #fafbfc;
}

.comment-input:focus[b-u9l7vwscfo] {
    outline: none;
    border-color: #667eea;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-1px);
}

.comment-footer[b-u9l7vwscfo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.character-count[b-u9l7vwscfo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #6c757d;
}

.character-count.warning[b-u9l7vwscfo] {
    color: #dc3545;
    font-weight: 600;
}

.character-count i[b-u9l7vwscfo] {
    font-size: 0.9rem;
}

.btn-comment-submit[b-u9l7vwscfo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(118, 75, 162, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-comment-submit[b-u9l7vwscfo]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-comment-submit:hover[b-u9l7vwscfo]::before {
    left: 100%;
}

.btn-comment-submit:hover[b-u9l7vwscfo] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(118, 75, 162, 0.5);
}

.btn-comment-submit:active[b-u9l7vwscfo] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(118, 75, 162, 0.3);
}

.btn-comment-submit.btn-inactive[b-u9l7vwscfo] {
    opacity: 0.7;
    background: linear-gradient(135deg, #9ba8f0 0%, #ab9cc5 100%);
    box-shadow: 0 2px 4px rgba(118, 75, 162, 0.2);
}

.btn-comment-submit.btn-inactive:hover[b-u9l7vwscfo] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(118, 75, 162, 0.25);
}

.validation-message[b-u9l7vwscfo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
    border-left: 4px solid #dc3545;
    border-radius: 6px;
    color: #dc3545;
    font-size: 0.875rem;
    font-weight: 500;
    animation: slideDown-b-u9l7vwscfo 0.3s ease-out;
}

@keyframes slideDown-b-u9l7vwscfo {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.validation-message i[b-u9l7vwscfo] {
    font-size: 1.1rem;
}

.btn-comment-submit i[b-u9l7vwscfo] {
    font-size: 1rem;
}

/* Login Prompt Card */
.login-prompt-card[b-u9l7vwscfo] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.login-prompt-card:hover[b-u9l7vwscfo] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.login-icon[b-u9l7vwscfo] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(118, 75, 162, 0.3);
    animation: float-b-u9l7vwscfo 3s ease-in-out infinite;
}

@keyframes float-b-u9l7vwscfo {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.login-icon i[b-u9l7vwscfo] {
    font-size: 2rem;
    color: white;
}

.login-prompt-card h5[b-u9l7vwscfo] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.75rem;
}

.login-prompt-card p[b-u9l7vwscfo] {
    margin: 0;
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}

.login-prompt-card a[b-u9l7vwscfo] {
    color: #764ba2;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.login-prompt-card a:hover[b-u9l7vwscfo] {
    color: #667eea;
    text-decoration: underline;
}

/* Loading */
.loading-container[b-u9l7vwscfo] {
    text-align: center;
    padding: 3rem 1rem;
    color: #666;
}

.loading-container .spinner-border[b-u9l7vwscfo] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
    color: #667eea;
    margin-bottom: 1rem;
}

.loading-container p[b-u9l7vwscfo] {
    margin: 0;
    font-size: 1rem;
}

/* Comments List */
.comments-list[b-u9l7vwscfo] {
    margin-top: 1.5rem;
}

.comments-list-header[b-u9l7vwscfo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.comments-list-header i[b-u9l7vwscfo] {
    color: #667eea;
    font-size: 1.15rem;
}

/* No Comments */
.no-comments-card[b-u9l7vwscfo] {
    text-align: center;
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    margin-top: 1.5rem;
    border: 2px dashed #dee2e6;
    transition: all 0.3s ease;
}

.no-comments-card:hover[b-u9l7vwscfo] {
    border-color: #667eea;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1);
}

.no-comments-icon[b-u9l7vwscfo] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(118, 75, 162, 0.25);
    animation: float-b-u9l7vwscfo 3s ease-in-out infinite;
}

.no-comments-icon i[b-u9l7vwscfo] {
    font-size: 2.5rem;
    color: white;
}

.no-comments-card h5[b-u9l7vwscfo] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.no-comments-card p[b-u9l7vwscfo] {
    margin: 0;
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}

/* Toast Notification */
.comment-toast[b-u9l7vwscfo] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #fff;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    z-index: 1000;
    animation: slideInUp-b-u9l7vwscfo 0.3s ease-out;
    min-width: 300px;
}

@keyframes slideInUp-b-u9l7vwscfo {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.comment-toast.success[b-u9l7vwscfo] {
    border-left: 4px solid #28a745;
}

.comment-toast.success i[b-u9l7vwscfo] {
    color: #28a745;
    font-size: 1.5rem;
}

.comment-toast.error[b-u9l7vwscfo] {
    border-left: 4px solid #dc3545;
}

.comment-toast.error i[b-u9l7vwscfo] {
    color: #dc3545;
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .comments-title[b-u9l7vwscfo] {
        font-size: 1.5rem;
    }

    .add-comment-card[b-u9l7vwscfo] {
        padding: 1rem;
    }

    .comment-footer[b-u9l7vwscfo] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .btn-comment-submit[b-u9l7vwscfo] {
        width: 100%;
        justify-content: center;
    }

    .comment-toast[b-u9l7vwscfo] {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: calc(100% - 2rem);
    }
}

/* /Components/Pages/Products/MyBlog/RatingComponent.razor.rz.scp.css */
.blog-rating-component[b-gxrs1o08s8] {
    margin: 2rem 0 1rem;
}

/* Compact Summary Card */
.rating-summary-compact[b-gxrs1o08s8] {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.rating-summary-compact:hover[b-gxrs1o08s8] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.rating-header[b-gxrs1o08s8] {
    margin-bottom: 1rem;
}

.rating-header h4[b-gxrs1o08s8] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rating-header i[b-gxrs1o08s8] {
    color: #fbbf24;
}

/* Stats Display */
.rating-stats[b-gxrs1o08s8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
}

.stat-item[b-gxrs1o08s8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-value[b-gxrs1o08s8] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1;
}

.stat-label[b-gxrs1o08s8] {
    font-size: 0.8rem;
    color: #718096;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.stat-divider[b-gxrs1o08s8] {
    width: 1px;
    height: 40px;
    background: #e2e8f0;
}

.stars-mini[b-gxrs1o08s8] {
    display: flex;
    gap: 0.15rem;
    margin-top: 0.25rem;
}

.stars-mini i[b-gxrs1o08s8] {
    font-size: 0.9rem;
    color: #fbbf24;
}

/* Interactive Rating Section */
.rate-section[b-gxrs1o08s8] {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
    text-align: center;
}

.user-rating-badge[b-gxrs1o08s8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #d1fae5;
    color: #065f46;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.user-rating-badge i[b-gxrs1o08s8] {
    color: #10b981;
}

.stars-interactive-compact[b-gxrs1o08s8] {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
}

.star-btn[b-gxrs1o08s8] {
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.star-btn:hover[b-gxrs1o08s8] {
    background: #fef3c7;
    transform: scale(1.15);
}

.star-btn i[b-gxrs1o08s8] {
    font-size: 1.5rem;
    color: #d1d5db;
    transition: color 0.2s ease;
}

.star-btn:hover i[b-gxrs1o08s8],
.star-btn i.bi-star-fill[b-gxrs1o08s8] {
    color: #fbbf24;
}

/* Badges */
.premium-badge-compact[b-gxrs1o08s8],
.login-badge-compact[b-gxrs1o08s8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.premium-badge-compact[b-gxrs1o08s8] {
    color: #92400e;
    background: #fef3c7;
}

.premium-badge-compact i[b-gxrs1o08s8] {
    color: #f59e0b;
}

.login-badge-compact[b-gxrs1o08s8] {
    color: #1e40af;
}

.login-badge-compact a[b-gxrs1o08s8] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.login-badge-compact a:hover[b-gxrs1o08s8] {
    text-decoration: underline;
}

/* Toast Messages */
.rating-toast[b-gxrs1o08s8] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    animation: slideInRight-b-gxrs1o08s8 0.3s ease;
}

@keyframes slideInRight-b-gxrs1o08s8 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.rating-toast.success[b-gxrs1o08s8] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

.rating-toast.error[b-gxrs1o08s8] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

.rating-toast i[b-gxrs1o08s8] {
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .rating-stats[b-gxrs1o08s8] {
        gap: 1rem;
    }

    .stat-value[b-gxrs1o08s8] {
        font-size: 1.5rem;
    }
}
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;[b-gxrs1o08s8]
}

.rating-prompt i[b-gxrs1o08s8] {
    font-size: 1.1rem;
}

.stars-interactive[b-gxrs1o08s8] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.star-click-area[b-gxrs1o08s8] {
    cursor: pointer;
    display: inline-block;
    transition: transform 0.2s ease;
}

.star-click-area:active[b-gxrs1o08s8] {
    transform: scale(0.9);
}

.star-icon.clickable[b-gxrs1o08s8] {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 2rem;
    color: rgba(255, 193, 7, 0.3);
    filter: drop-shadow(0 2px 4px rgba(255, 193, 7, 0.2));
}

.star-icon.clickable:hover[b-gxrs1o08s8] {
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 4px 8px rgba(255, 193, 7, 0.5));
}

.star-icon.clickable.bi-star-fill[b-gxrs1o08s8] {
    color: #ffc107;
    animation: starGlow-b-gxrs1o08s8 0.6s ease-out;
}

@keyframes starGlow-b-gxrs1o08s8 {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 193, 7, 0));
    }
    50% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 20px rgba(255, 193, 7, 0.8));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 2px 4px rgba(255, 193, 7, 0.4));
    }
}

.star-click-area:hover .star-icon[b-gxrs1o08s8] {
    transform: scale(1.15) rotate(-5deg);
}

.current-rating-display[b-gxrs1o08s8] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    display: inline-block;
    backdrop-filter: blur(10px);
}

.current-rating-display strong[b-gxrs1o08s8] {
    color: #ffc107;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.login-prompt-section[b-gxrs1o08s8] {
    text-align: center;
    padding: 0.75rem 0;
}

.login-prompt-section i[b-gxrs1o08s8] {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    margin-bottom: 0.5rem;
}

.login-prompt-section p[b-gxrs1o08s8] {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.login-prompt-section a[b-gxrs1o08s8] {
    color: #ffc107;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.login-prompt-section a:hover[b-gxrs1o08s8] {
    color: #ffca2c;
    text-decoration: underline;
}

.rating-toast[b-gxrs1o08s8] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #fff;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    z-index: 1000;
    animation: slideInRight-b-gxrs1o08s8 0.3s ease-out;
}

@keyframes slideInRight-b-gxrs1o08s8 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.rating-toast.success[b-gxrs1o08s8] {
    border-left: 4px solid #28a745;
    color: #28a745;
}

.rating-toast.error[b-gxrs1o08s8] {
    border-left: 4px solid #dc3545;
    color: #dc3545;
}

.rating-toast i[b-gxrs1o08s8] {
    font-size: 1.25rem;
}

@media (max-width: 768px) {
    .rating-card[b-gxrs1o08s8] {
        padding: 1rem 1.25rem;
    }

    .average-number[b-gxrs1o08s8] {
        font-size: 2rem;
    }

    .star-icon[b-gxrs1o08s8] {
        font-size: 1rem;
    }

    .star-icon.clickable[b-gxrs1o08s8] {
        font-size: 1.5rem;
    }

    .stars-interactive[b-gxrs1o08s8] {
        gap: 0.4rem;
    }

    .rating-toast[b-gxrs1o08s8] {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: calc(100% - 2rem);
    }
}

/* /Components/Pages/Products/MyBlog/ViewBlogPost.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   BLOG POST ARTICLE — Scoped styles for ViewBlogPost.razor
   ══════════════════════════════════════════════════════════ */

/* ── Admin action bar ───────────────────────────────────── */
.post-action-bar[b-ptdqd5j26a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #f8f9ff;
    border-bottom: 1px solid #e8e8f0;
}

/* ── Article hero header ────────────────────────────────── */
.post-hero[b-ptdqd5j26a] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
    color: white;
}

.post-hero .post-categories[b-ptdqd5j26a] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
}

.post-hero .post-category-badge[b-ptdqd5j26a] {
    background: rgba(255, 255, 255, 0.22);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.post-hero .post-title[b-ptdqd5j26a] {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 auto 1rem;
    max-width: 760px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    color: white;
}

.post-hero .post-meta[b-ptdqd5j26a] {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.post-hero .post-meta i[b-ptdqd5j26a] {
    margin-right: 0.25rem;
}

.post-hero .post-ai-badge[b-ptdqd5j26a] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(76, 175, 80, 0.25);
    border: 1px solid rgba(76, 175, 80, 0.5);
    color: #c8f7c5;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
}

/* ── Article body container ─────────────────────────────── */
.post-body[b-ptdqd5j26a] {
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

/* ── Summary section ────────────────────────────────────── */
.post-summary[b-ptdqd5j26a] {
    background: #f5f6ff;
    border-left: 4px solid #667eea;
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    font-size: 1.05rem;
    color: #444;
    line-height: 1.7;
}

/* ── Blog content typography ────────────────────────────── */
.blog-post-content[b-ptdqd5j26a] {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
}

.blog-post-content h1[b-ptdqd5j26a],
.blog-post-content h2[b-ptdqd5j26a],
.blog-post-content h3[b-ptdqd5j26a],
.blog-post-content h4[b-ptdqd5j26a],
.blog-post-content h5[b-ptdqd5j26a] {
    color: #2d2d4e;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.blog-post-content h1[b-ptdqd5j26a] { font-size: 1.75rem; }
.blog-post-content h2[b-ptdqd5j26a] { font-size: 1.45rem; }
.blog-post-content h3[b-ptdqd5j26a] { font-size: 1.2rem; }

.blog-post-content p[b-ptdqd5j26a] {
    margin-bottom: 1.15rem;
}

.blog-post-content a[b-ptdqd5j26a] {
    color: #667eea;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-post-content a:hover[b-ptdqd5j26a] {
    color: #764ba2;
}

.blog-post-content img[b-ptdqd5j26a] {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    margin: 1rem 0;
    display: block;
}

.blog-post-content blockquote[b-ptdqd5j26a] {
    border-left: 4px solid #667eea;
    margin: 1.5rem 0;
    padding: 0.75rem 1.25rem;
    background: #f5f6ff;
    border-radius: 0 8px 8px 0;
    color: #555;
    font-style: italic;
}

.blog-post-content pre[b-ptdqd5j26a],
.blog-post-content .ql-code-block-container[b-ptdqd5j26a] {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 1.25rem 0;
}

.blog-post-content code[b-ptdqd5j26a] {
    background: rgba(102, 126, 234, 0.1);
    color: #764ba2;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

.blog-post-content ul[b-ptdqd5j26a],
.blog-post-content ol[b-ptdqd5j26a] {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.blog-post-content li[b-ptdqd5j26a] {
    margin-bottom: 0.35rem;
}

/* ══════════════════════════════════════════════════════════
   TABLE STYLING — modern tables with gradient headers
   Use ::deep to pierce scoped CSS for dynamically rendered HTML
   ══════════════════════════════════════════════════════════ */
.blog-post-content[b-ptdqd5j26a]  table {
    border-collapse: separate;
    border-spacing: 0;
    empty-cells: show;
    width: 100%;
    margin: 20px 0;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.blog-post-content[b-ptdqd5j26a]  table td,
.blog-post-content[b-ptdqd5j26a]  table th {
    border: none;
    border-bottom: 1px solid #e8e8f0;
    min-width: 80px;
    padding: 12px 16px;
    vertical-align: middle;
    text-align: left;
}

/* Numeric and centered columns */
.blog-post-content[b-ptdqd5j26a]  table td.numeric,
.blog-post-content[b-ptdqd5j26a]  table th.numeric {
    text-align: right;
}

.blog-post-content[b-ptdqd5j26a]  table td.center,
.blog-post-content[b-ptdqd5j26a]  table th.center {
    text-align: center;
}

/* Header with gradient matching app theme */
.blog-post-content[b-ptdqd5j26a]  table th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.8px;
    border-bottom: 3px solid #5a3680;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

/* Sticky header */
.blog-post-content[b-ptdqd5j26a]  table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* First column emphasis */
.blog-post-content[b-ptdqd5j26a]  table tbody tr td:first-child {
    font-weight: 600;
    color: #2d2d4e;
}

/* Row striping */
.blog-post-content[b-ptdqd5j26a]  table tbody tr:nth-child(odd) {
    background-color: white;
}

.blog-post-content[b-ptdqd5j26a]  table tbody tr:nth-child(even) {
    background-color: #f8f9fb;
}

/* Hover effect */
.blog-post-content[b-ptdqd5j26a]  table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.08);
    transition: background-color 0.2s ease;
}

/* Last row no border */
.blog-post-content[b-ptdqd5j26a]  table tbody tr:last-child td {
    border-bottom: none;
}

/* Table caption */
.blog-post-content[b-ptdqd5j26a]  table caption {
    caption-side: top;
    padding: 10px 0;
    font-weight: 600;
    color: #5a3680;
    text-align: left;
    font-size: 1.05em;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .blog-post-content[b-ptdqd5j26a]  table {
        font-size: 0.85rem;
        box-shadow: none;
    }

    .blog-post-content[b-ptdqd5j26a]  table td,
    .blog-post-content[b-ptdqd5j26a]  table th {
        padding: 8px 10px;
        min-width: 60px;
    }

    .blog-post-content[b-ptdqd5j26a]  table th {
        font-size: 0.7em;
        letter-spacing: 0.5px;
    }
}

/* ── Article divider ────────────────────────────────────── */
.post-divider[b-ptdqd5j26a] {
    border: none;
    border-top: 2px solid #f0f0f8;
    margin: 1.75rem 0;
}

/* ── Error / not-found state ────────────────────────────── */
.post-error[b-ptdqd5j26a] {
    max-width: 540px;
    margin: 4rem auto;
    text-align: center;
    padding: 2rem;
}

.post-error h1[b-ptdqd5j26a] {
    color: #2d2d4e;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

/* ── Unauthorized state ─────────────────────────────────── */
.post-unauthorized[b-ptdqd5j26a] {
    max-width: 480px;
    margin: 4rem auto;
    text-align: center;
    padding: 2rem;
    background: #fff8f8;
    border: 1px solid #fde8e8;
    border-radius: 12px;
}

/* ── Back to top button ─────────────────────────────────── */
.back-to-top[b-ptdqd5j26a] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
    z-index: 1000;
}

.back-to-top.visible[b-ptdqd5j26a] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover[b-ptdqd5j26a] {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    box-shadow: 0 6px 22px rgba(118, 75, 162, 0.5);
    transform: translateY(-3px);
}

.back-to-top:active[b-ptdqd5j26a] {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}

/* ── Engagement Section (Rating & Comments) ─────────────── */
article > :global(.blog-rating-component)[b-ptdqd5j26a],
article > :global(.blog-comments-component)[b-ptdqd5j26a] {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
}

/* Add subtle separator before engagement section */
article > :global(.blog-rating-component)[b-ptdqd5j26a] {
    position: relative;
    margin-top: 3rem;
}

article > :global(.blog-rating-component)[b-ptdqd5j26a]::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 200px;
    height: 1px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
    margin: 0 auto 2rem;
}

/* ══════════════════════════════════════════════════════════
   TRANSLATION BAR — Language selection and translation UI
   ══════════════════════════════════════════════════════════ */
.translation-bar[b-ptdqd5j26a] {
    margin-top: 1.5rem;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.translation-controls[b-ptdqd5j26a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.translation-controls label[b-ptdqd5j26a] {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.translation-controls label i[b-ptdqd5j26a] {
    font-size: 1.1rem;
}

.translation-controls select[b-ptdqd5j26a] {
    min-width: 220px;
    max-width: 280px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(118, 75, 162, 0.3);
    color: #2d2d4e;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
}

.translation-controls select:focus[b-ptdqd5j26a] {
    outline: none;
    border-color: rgba(118, 75, 162, 0.6);
    box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.15);
}

.translation-controls select:disabled[b-ptdqd5j26a] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Premium and login required messages */
.translation-premium-required[b-ptdqd5j26a],
.translation-login-required[b-ptdqd5j26a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.translation-premium-required i[b-ptdqd5j26a],
.translation-login-required i[b-ptdqd5j26a] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
}

.translation-premium-required span[b-ptdqd5j26a],
.translation-login-required span[b-ptdqd5j26a] {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.translation-premium-required button[b-ptdqd5j26a],
.translation-login-required a[b-ptdqd5j26a] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #764ba2;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.translation-premium-required button:hover[b-ptdqd5j26a],
.translation-login-required a:hover[b-ptdqd5j26a] {
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.translation-controls select:disabled[b-ptdqd5j26a] {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(118, 75, 162, 0.3);
    color: #764ba2;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.translation-controls button:hover:not(:disabled)[b-ptdqd5j26a] {
    background: white;
    border-color: #764ba2;
    box-shadow: 0 2px 8px rgba(118, 75, 162, 0.2);
}

.translation-controls button:disabled[b-ptdqd5j26a] {
    opacity: 0.6;
    cursor: not-allowed;
}

.translation-info[b-ptdqd5j26a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.4);
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.translation-info i[b-ptdqd5j26a] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
}

.translation-info span[b-ptdqd5j26a] {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.translation-info button[b-ptdqd5j26a] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #764ba2;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
}

.translation-info button:hover:not(:disabled)[b-ptdqd5j26a] {
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.translation-info button:disabled[b-ptdqd5j26a] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* PDF Button Styling */
.pdf-btn[b-ptdqd5j26a] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.2);
}

.pdf-btn:hover[b-ptdqd5j26a] {
    background: linear-gradient(135deg, #ff5252 0%, #d84a5c 100%) !important;
    box-shadow: 0 4px 8px rgba(255, 107, 107, 0.35);
    transform: translateY(-1px);
}

.pdf-btn:active[b-ptdqd5j26a] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.2);
}

.pdf-btn i[b-ptdqd5j26a] {
    font-size: 1rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .translation-bar[b-ptdqd5j26a] {
        padding: 0.75rem 0 0;
    }

    .translation-controls[b-ptdqd5j26a] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .translation-controls label[b-ptdqd5j26a] {
        font-size: 0.8rem;
        justify-content: center;
    }

    .translation-controls select[b-ptdqd5j26a] {
        min-width: 100%;
        max-width: 100%;
    }

    .translation-controls button[b-ptdqd5j26a] {
        width: 100%;
        justify-content: center;
    }

    .translation-info[b-ptdqd5j26a] {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.65rem 0.85rem;
    }

    .translation-info span[b-ptdqd5j26a] {
        font-size: 0.8rem;
        text-align: center;
    }

    .translation-info button[b-ptdqd5j26a] {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════
   PRINT STYLES — PDF Export
   ══════════════════════════════════════════════════════════ */
@media print {
    /* Hide all non-content UI elements */
    .post-action-bar[b-ptdqd5j26a],
    .translation-bar[b-ptdqd5j26a],
    .back-to-top[b-ptdqd5j26a],
    .print-hide[b-ptdqd5j26a] {
        display: none !important;
        visibility: hidden !important;
    }

    /* Hide unauthorized messages in print */
    .post-unauthorized[b-ptdqd5j26a],
    .post-error[b-ptdqd5j26a] {
        display: none !important;
    }

    /* Optimize hero header for print */
    .post-hero[b-ptdqd5j26a] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
        page-break-after: avoid;
        padding: 1.5rem 1rem !important;
        margin: 0 !important;
    }

    .post-hero .post-title[b-ptdqd5j26a] {
        color: white !important;
        font-size: 1.8rem !important;
        margin-bottom: 0.75rem !important;
        text-shadow: none !important;
    }

    .post-hero .post-meta[b-ptdqd5j26a] {
        color: rgba(255, 255, 255, 0.95) !important;
        font-size: 0.9rem !important;
    }

    .post-hero .post-meta span[b-ptdqd5j26a] {
        color: rgba(255, 255, 255, 0.95) !important;
    }

    .post-hero .post-category-badge[b-ptdqd5j26a] {
        background: rgba(255, 255, 255, 0.35) !important;
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        border: 1px solid rgba(255, 255, 255, 0.5);
    }

    .post-hero .post-ai-badge[b-ptdqd5j26a] {
        background: rgba(76, 175, 80, 0.3) !important;
        border-color: rgba(76, 175, 80, 0.6) !important;
        color: #e8f5e9 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Optimize article body for print */
    .post-body[b-ptdqd5j26a] {
        max-width: 100% !important;
        padding: 1.5rem 1rem !important;
        margin: 0 !important;
    }

    /* Optimize summary for print */
    .post-summary[b-ptdqd5j26a] {
        page-break-inside: avoid;
        background: #f8f9fa !important;
        border-left: 4px solid #667eea !important;
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Optimize content typography */
    .blog-post-content[b-ptdqd5j26a] {
        font-size: 11pt !important;
        line-height: 1.6 !important;
        color: black !important;
    }

    .blog-post-content *[b-ptdqd5j26a] {
        color: black !important;
    }

    .blog-post-content h1[b-ptdqd5j26a],
    .blog-post-content h2[b-ptdqd5j26a],
    .blog-post-content h3[b-ptdqd5j26a],
    .blog-post-content h4[b-ptdqd5j26a],
    .blog-post-content h5[b-ptdqd5j26a],
    .blog-post-content h6[b-ptdqd5j26a] {
        page-break-after: avoid;
        color: #333 !important;
        margin-top: 1em !important;
        margin-bottom: 0.5em !important;
    }

    .blog-post-content p[b-ptdqd5j26a],
    .blog-post-content ul[b-ptdqd5j26a],
    .blog-post-content ol[b-ptdqd5j26a] {
        orphans: 3;
        widows: 3;
        margin-bottom: 1em;
    }

    .blog-post-content img[b-ptdqd5j26a] {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
        display: block;
        margin: 1em auto;
    }

    .blog-post-content pre[b-ptdqd5j26a],
    .blog-post-content code[b-ptdqd5j26a] {
        page-break-inside: avoid;
        border: 1px solid #ddd !important;
        background: #f5f5f5 !important;
        padding: 0.5rem !important;
        font-size: 9pt !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .blog-post-content blockquote[b-ptdqd5j26a] {
        page-break-inside: avoid;
        border-left: 3px solid #667eea !important;
        padding-left: 1rem !important;
        margin: 1em 0 !important;
        font-style: italic;
        color: #555 !important;
    }

    .blog-post-content table[b-ptdqd5j26a] {
        page-break-inside: avoid;
        border-collapse: collapse;
        width: 100% !important;
        margin: 1em 0 !important;
    }

    .blog-post-content table th[b-ptdqd5j26a],
    .blog-post-content table td[b-ptdqd5j26a] {
        border: 1px solid #ddd !important;
        padding: 0.5rem !important;
        text-align: left;
    }

    .blog-post-content table th[b-ptdqd5j26a] {
        background: #f5f5f5 !important;
        font-weight: bold;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ensure article stays together when possible */
    article[b-ptdqd5j26a] {
        page-break-before: auto;
        page-break-inside: auto;
    }

    /* Force page breaks before major sections if needed */
    .post-body[b-ptdqd5j26a] {
        page-break-before: auto;
    }
}
/* /Components/Pages/Products/MyBudget/Budget.razor.rz.scp.css */
/* ============================================
   MyBudget — Container & Header
   ============================================ */

.budget-container[b-fvztpymnu6] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0.5rem 2rem;
}

.budget-header[b-fvztpymnu6] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem 2.5rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.budget-header-icon[b-fvztpymnu6] {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    font-size: 28px;
    color: white;
    flex-shrink: 0;
}

.budget-header-title[b-fvztpymnu6] {
    color: white;
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.budget-header-subtitle[b-fvztpymnu6] {
    color: rgba(255,255,255,0.85);
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
}

/* ---- Notice (no product) ---- */
.product-notice[b-fvztpymnu6] {
    background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
    border: 2px solid #c4b5fd;
    border-radius: 20px;
    padding: 3rem;
    margin: 2rem auto;
    max-width: 900px;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.15);
}

/* ---- Auth Notice (not authenticated) ---- */
.auth-notice[b-fvztpymnu6] {
    background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
    border: 2px solid #93c5fd;
    border-radius: 20px;
    padding: 3rem;
    margin: 2rem auto;
    max-width: 800px;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.15);
}

.notice-content[b-fvztpymnu6] {
    display: flex;
    gap: 2rem;
    align-items: start;
}

.notice-icon[b-fvztpymnu6] {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.auth-notice h3[b-fvztpymnu6],
.product-notice h3[b-fvztpymnu6] {
    color: #1f2937;
    font-size: 1.875rem;
    font-weight: 800;
    margin: 0 0 0.75rem 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-notice p[b-fvztpymnu6],
.product-notice p[b-fvztpymnu6] {
    color: #4b5563;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-weight: 500;
}

.notice-actions[b-fvztpymnu6] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.notice-actions .btn[b-fvztpymnu6] {
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.notice-actions .btn-primary[b-fvztpymnu6] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.notice-actions .btn-primary:hover[b-fvztpymnu6] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5568d3 0%, #6a3e8f 100%);
}

.notice-actions .btn-outline-secondary[b-fvztpymnu6] {
    background: white;
    color: #667eea;
    border: 2px solid #667eea;
    font-weight: 600;
}

.notice-actions .btn-outline-secondary:hover[b-fvztpymnu6] {
    background: #667eea;
    color: white;
    border-color: #667eea;
    transform: translateY(-2px);
}

/* ---- Teaser Section ---- */
.budget-teaser[b-fvztpymnu6] {
    margin: 1.5rem auto 0;
    max-width: 1000px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 8px 28px rgba(102, 126, 234, 0.14);
}

.budget-teaser-header[b-fvztpymnu6] {
    margin-bottom: 1rem;
}

.budget-teaser-header h4[b-fvztpymnu6] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #4f46e5;
}

.budget-teaser-header p[b-fvztpymnu6] {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    color: var(--bs-secondary-color);
}

.budget-teaser-grid[b-fvztpymnu6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}

.budget-teaser-card[b-fvztpymnu6] {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.budget-teaser-media[b-fvztpymnu6] {
    min-height: 130px;
}

.budget-teaser-video-frame[b-fvztpymnu6] {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #1f2937;
}

.budget-teaser-video-frame iframe[b-fvztpymnu6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.budget-teaser-media-fallback[b-fvztpymnu6] {
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.budget-teaser-media-fallback i[b-fvztpymnu6] {
    font-size: 2rem;
}

.budget-teaser-body[b-fvztpymnu6] {
    padding: 0.85rem;
}

.budget-teaser-body h5[b-fvztpymnu6] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.budget-teaser-body p[b-fvztpymnu6] {
    margin: 0.45rem 0 0;
    font-size: 0.84rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
}

/* ============================================ */

.icon-box[b-fvztpymnu6] {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.language-btn[b-fvztpymnu6] {
    transition: all 0.3s ease;
    border-width: 2px;
}

.language-btn:hover[b-fvztpymnu6] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.flag-icon[b-fvztpymnu6] {
    font-size: 2rem;
}

.feature-icon[b-fvztpymnu6] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.bg-gradient-primary-subtle[b-fvztpymnu6] {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.bg-gradient-info-subtle[b-fvztpymnu6] {
    background: linear-gradient(135deg, #e0f7ff 0%, #b3e5fc 100%);
}

.card[b-fvztpymnu6] {
    transition: all 0.3s ease;
}

.card:hover[b-fvztpymnu6] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1) !important;
}

@media (max-width: 768px) {
    .flag-icon[b-fvztpymnu6] {
        font-size: 1.5rem;
    }

    .language-btn[b-fvztpymnu6] {
        padding: 1rem !important;
    }

    .budget-teaser[b-fvztpymnu6] {
        padding: 1rem;
    }
}
/* /Components/Pages/Products/MyBudget/BudgetList.razor.rz.scp.css */
/* Budget Card Wrapper with Deck Effect */
.budget-card-wrapper[b-lh3grfpn9t] {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
}

.budget-card-wrapper.has-versions[b-lh3grfpn9t] {
    margin-bottom: 2.5rem;
}

/* Collapsed Card State */
.budget-card.collapsed-card[b-lh3grfpn9t] {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid #e0e0e0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.budget-card.collapsed-card:hover[b-lh3grfpn9t] {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.12) !important;
    border: 2px solid rgba(13, 110, 253, 0.4) !important;
    background: #ffffff;
}

.budget-card.collapsed-card .card-body[b-lh3grfpn9t] {
    padding: 1rem !important;
}

/* Dropdown submenu styling */
.dropdown-submenu[b-lh3grfpn9t] {
    position: relative;
}

.dropdown-submenu > .dropdown-menu[b-lh3grfpn9t] {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
}

.dropdown-submenu:hover > .dropdown-menu[b-lh3grfpn9t] {
    display: block;
}

.dropdown-submenu > .dropdown-item[b-lh3grfpn9t]::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
    float: right;
    margin-top: 0.5em;
}

/* Deck Layers - Stacked Card Effect */
.card-deck-layer[b-lh3grfpn9t] {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 0.375rem;
    z-index: 0;
    transition: all 0.3s ease;
}

.card-deck-layer.layer-2[b-lh3grfpn9t] {
    top: 6px;
    left: 6px;
    right: -6px;
    opacity: 0.9;
    background: linear-gradient(135deg, #eef2ff 0%, #f0f4ff 100%);
    border: 2px solid rgba(102, 126, 234, 0.4);
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.25);
}

.card-deck-layer.layer-3[b-lh3grfpn9t] {
    top: 12px;
    left: 12px;
    right: -12px;
    opacity: 0.7;
    background: linear-gradient(135deg, #e4eaff 0%, #edf1ff 100%);
    border: 2px solid rgba(102, 126, 234, 0.25);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.15);
}

/* Main Budget Card */
.budget-card.main-card[b-lh3grfpn9t] {
    position: relative;
    z-index: 3;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 2px solid #dee2e6 !important;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1) !important;
    background: #ffffff;
}

.budget-card.main-card[b-lh3grfpn9t]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
    border-radius: 0.375rem 0.375rem 0 0;
}

.budget-card.main-card:hover[b-lh3grfpn9t] {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.5rem rgba(13, 110, 253, 0.15) !important;
    border-color: rgba(13, 110, 253, 0.5) !important;
}

.budget-card.main-card:active[b-lh3grfpn9t] {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.5rem rgba(13, 110, 253, 0.2) !important;
    border-color: rgba(13, 110, 253, 0.6) !important;
}

/* Version Badge on Card */
.version-badge[b-lh3grfpn9t] {
    position: absolute;
    top: -10px;
    right: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    z-index: 4;
}

.version-badge i[b-lh3grfpn9t] {
    margin-right: 0.25rem;
}

/* Version Switcher Bar (expanded card) */
.version-switcher-bar[b-lh3grfpn9t] {
    background: linear-gradient(135deg, #f0f4ff 0%, #eaf0fe 100%);
    border: 2px solid rgba(102, 126, 234, 0.4);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.1);
}

.version-switcher-label[b-lh3grfpn9t] {
    color: #6c757d;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.version-tab-btn[b-lh3grfpn9t] {
    border-radius: 2rem !important;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.version-tab-btn:hover[b-lh3grfpn9t] {
    transform: scale(1.06);
}

/* Version Mini Pills (collapsed card) */
.version-mini-pill[b-lh3grfpn9t] {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 2rem;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    color: #6c757d;
    line-height: 1.4;
    transition: all 0.15s ease;
}

.version-mini-pill:hover[b-lh3grfpn9t] {
    background: #e2e6ea;
    color: #495057;
    border-color: #adb5bd;
    transform: scale(1.05);
}

.version-mini-pill-active[b-lh3grfpn9t] {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
    font-weight: 600;
}

.version-mini-pill-active:hover[b-lh3grfpn9t] {
    background: #0b5ed7;
    border-color: #0a58ca;
    color: #fff;
}

/* Star icon for latest version */
.version-latest-star[b-lh3grfpn9t] {
    font-size: 0.55rem;
    opacity: 0.75;
    vertical-align: middle;
}

/* Older Version Cards */
.older-version-card[b-lh3grfpn9t] {
    background: linear-gradient(to right, #f8f9fa 0%, #ffffff 100%);
    border-left: 3px solid #6c757d !important;
    transition: all 0.2s ease;
}

.older-version-card:hover[b-lh3grfpn9t] {
    border-left-color: #495057 !important;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1) !important;
    transform: translateX(5px);
}

/* Versions Container Animation */
.versions-container[b-lh3grfpn9t] {
    animation: slideDown-b-lh3grfpn9t 0.3s ease-out;
}

@keyframes slideDown-b-lh3grfpn9t {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Budget Stats */
.bg-success.bg-opacity-10[b-lh3grfpn9t] {
    background-color: rgba(25, 135, 84, 0.1) !important;
    border: 2px solid rgba(25, 135, 84, 0.3) !important;
    transition: all 0.2s ease;
}

.bg-success.bg-opacity-10:hover[b-lh3grfpn9t] {
    background-color: rgba(25, 135, 84, 0.15) !important;
    border-color: rgba(25, 135, 84, 0.4) !important;
    box-shadow: 0 0.125rem 0.5rem rgba(25, 135, 84, 0.2);
}

.bg-danger.bg-opacity-10[b-lh3grfpn9t] {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border: 2px solid rgba(220, 53, 69, 0.3) !important;
    transition: all 0.2s ease;
}

.bg-danger.bg-opacity-10:hover[b-lh3grfpn9t] {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.4) !important;
    box-shadow: 0 0.125rem 0.5rem rgba(220, 53, 69, 0.2);
}

.bg-primary.bg-opacity-10[b-lh3grfpn9t] {
    background-color: rgba(13, 110, 253, 0.1) !important;
    border: 2px solid rgba(13, 110, 253, 0.3) !important;
    transition: all 0.2s ease;
}

.bg-primary.bg-opacity-10:hover[b-lh3grfpn9t] {
    background-color: rgba(13, 110, 253, 0.15) !important;
    border-color: rgba(13, 110, 253, 0.4) !important;
    box-shadow: 0 0.125rem 0.5rem rgba(13, 110, 253, 0.2);
}

/* Dropdown Menu Styling */
.dropdown-menu[b-lh3grfpn9t] {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-item[b-lh3grfpn9t] {
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover[b-lh3grfpn9t] {
    background-color: #f8f9fa;
    padding-left: 1.25rem;
}

.dropdown-item i[b-lh3grfpn9t] {
    width: 20px;
    margin-right: 0.5rem;
}

/* Button Enhancements */
.btn[b-lh3grfpn9t] {
    transition: all 0.2s ease;
}

.btn:hover[b-lh3grfpn9t] {
    transform: translateY(-2px);
}

.btn:active[b-lh3grfpn9t] {
    transform: translateY(0);
}

/* Load More Button */
.btn-outline-primary:hover[b-lh3grfpn9t] {
    box-shadow: 0 0.5rem 1rem rgba(13, 110, 253, 0.3);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .card-deck-layer.layer-2[b-lh3grfpn9t] {
        top: 4px;
        left: 4px;
        right: -4px;
    }

    .card-deck-layer.layer-3[b-lh3grfpn9t] {
        top: 8px;
        left: 8px;
        right: -8px;
    }

    .version-badge[b-lh3grfpn9t] {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }
}

/* Alert Styling */
.alert-light.border-start[b-lh3grfpn9t] {
    background: linear-gradient(to right, rgba(13, 110, 253, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Badge Improvements */
.badge[b-lh3grfpn9t] {
    font-weight: 600;
}

/* Budget Column Spacing */
.budget-col[b-lh3grfpn9t] {
    margin-bottom: 1.5rem;
    transition: opacity 0.3s ease;
}

.budget-col.is-dragging[b-lh3grfpn9t] {
    opacity: 0.5;
}

/* Card Drag Handle */
.card-drag-handle[b-lh3grfpn9t] {
    position: absolute;
    top: 8px;
    left: 8px;
    cursor: grab;
    color: #adb5bd;
    font-size: 1.2rem;
    z-index: 5;
    transition: color 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.card-drag-handle:hover[b-lh3grfpn9t] {
    color: #6c757d;
    background: rgba(0, 0, 0, 0.05);
}

.card-drag-handle:active[b-lh3grfpn9t] {
    cursor: grabbing;
    color: #495057;
}

/* Year Header Enhancement */
.budget-card h4[b-lh3grfpn9t] {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: #212529;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.budget-card h5[b-lh3grfpn9t] {
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: #212529;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Highlight year number with icon */
.budget-card .bi-calendar-event[b-lh3grfpn9t] {
    font-size: 1.3rem;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* Visual Separator Between Cards */
.row.g-4 > .budget-col[b-lh3grfpn9t]::after {
    content: '';
    position: absolute;
    bottom: -0.75rem;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #dee2e6 50%, transparent 100%);
}

@media (min-width: 992px) {
    .row.g-4 > .budget-col[b-lh3grfpn9t]::after {
        display: none;
    }
}
    padding: 0.35rem 0.65rem;[b-lh3grfpn9t]
}

.badge.bg-success[b-lh3grfpn9t] {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%) !important;
}

.badge.bg-secondary[b-lh3grfpn9t] {
    background: linear-gradient(135deg, #6c757d 0%, #adb5bd 100%) !important;
}

/* Card Body Padding Consistency */
.card-body.p-4[b-lh3grfpn9t] {
    padding: 1.5rem !important;
}

/* Drag-and-Drop */
.budget-col[b-lh3grfpn9t] {
    transition: opacity 0.15s ease;
}

.budget-col.is-dragging[b-lh3grfpn9t] {
    opacity: 0.2;
}

.budget-col.is-dragging .card-drag-handle[b-lh3grfpn9t] {
    cursor: grabbing;
}

.card-drag-handle[b-lh3grfpn9t] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 16px;
    cursor: grab;
    color: #dee2e6;
    font-size: 1rem;
    border-radius: 0.375rem 0.375rem 0 0;
    transition: color 0.2s ease, background 0.2s ease;
    user-select: none;
}

.budget-col:hover .card-drag-handle[b-lh3grfpn9t] {
    color: #adb5bd;
    background: rgba(0, 0, 0, 0.02);
}

.card-drag-handle:active[b-lh3grfpn9t] {
    cursor: grabbing;
}

/* Small Text in Older Versions */
.older-version-card .small[b-lh3grfpn9t] {
    font-size: 0.85rem;
}

/* Icon Spacing */
i.bi[b-lh3grfpn9t] {
    margin-right: 0.25rem;
}
/* /Components/Pages/Products/MyBudget/BudgetSetup.razor.rz.scp.css */
/* Drag-and-drop goal cards */
.goal-col[b-g15nzb0isx] {
    cursor: default;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.goal-col.is-dragging[b-g15nzb0isx] {
    opacity: 0.45;
    transform: scale(0.97);
}

.goal-col.drop-target > .card[b-g15nzb0isx] {
    outline: 2px dashed #0d6efd;
    outline-offset: 2px;
    background-color: #f0f6ff;
}

.card-drag-handle[b-g15nzb0isx] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 4px 0 2px;
    cursor: grab;
    color: #ced4da;
    font-size: 1.1rem;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0.375rem 0.375rem 0 0;
    background: transparent;
    transition: color 0.15s ease, background 0.15s ease;
}

.card-drag-handle:hover[b-g15nzb0isx] {
    color: #6c757d;
    background: #f8f9fa;
}

/* Add Goal Modal */
.goal-modal-backdrop[b-g15nzb0isx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
    animation: backdrop-in-b-g15nzb0isx 0.15s ease;
}

.goal-modal[b-g15nzb0isx] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    width: min(480px, calc(100vw - 2rem));
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    animation: modal-in-b-g15nzb0isx 0.18s ease;
}

.goal-modal-header[b-g15nzb0isx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.goal-modal-body[b-g15nzb0isx] {
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(100dvh - 14rem);
}

.goal-modal-footer[b-g15nzb0isx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid #e9ecef;
}

.goal-icon-btn[b-g15nzb0isx] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

@keyframes backdrop-in-b-g15nzb0isx {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modal-in-b-g15nzb0isx {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
/* /Components/Pages/Products/MyBudget/BudgetWizard.razor.rz.scp.css */
.wizard-progress[b-ny13fpr0f5] {
    position: relative;
}

.wizard-progress[b-ny13fpr0f5]::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #dee2e6;
    z-index: 0;
}

.wizard-step[b-ny13fpr0f5] {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-number[b-ny13fpr0f5] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dee2e6;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.wizard-step.active .step-number[b-ny13fpr0f5] {
    background: #0d6efd;
    color: white;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

.wizard-step.completed .step-number[b-ny13fpr0f5] {
    background: #198754;
    color: white;
}

.step-label[b-ny13fpr0f5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
}

.wizard-step.active .step-label[b-ny13fpr0f5] {
    color: #0d6efd;
    font-weight: 600;
}

.wizard-step.completed .step-label[b-ny13fpr0f5] {
    color: #198754;
}

.modal.show[b-ny13fpr0f5] {
    display: block;
}

@media (max-width: 768px) {
    .step-label[b-ny13fpr0f5] {
        font-size: 0.75rem;
    }

    .step-number[b-ny13fpr0f5] {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }
}

@media (max-width: 575px) {
    .step-label[b-ny13fpr0f5] {
        display: none;
    }

    .step-number[b-ny13fpr0f5] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
        margin-bottom: 0;
    }
}
/* /Components/Pages/Products/MyChatBot/MyChatBot.razor.rz.scp.css */
/* No custom styles needed — page uses global app.css classes (btn-oval, quote-bubble, content) matching the site design. */
/* /Components/Pages/Products/MyGames/EasyMath/EasyMath.razor.rz.scp.css */
.answer-display[b-wgrwuomsvg] {
    min-width: 100px;
    min-height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0d6efd;
    border-radius: 8px;
    padding: 10px 15px;
    background-color: #f8f9fa;
    font-size: 2rem;
    font-weight: bold;
}

.number-pad[b-wgrwuomsvg] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    max-width: 350px;
    margin: 0 auto;
    padding: 10px;
}

.keyboard-number[b-wgrwuomsvg] {
    min-width: 50px;
    min-height: 50px;
    font-size: 1.2rem;
    padding: 8px;
    border: 2px solid #0d6efd;
    background-color: white;
    color: #0d6efd;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

.keyboard-number:hover[b-wgrwuomsvg] {
    background-color: #0d6efd;
    color: white;
    transform: translateY(-2px);
}

.keyboard-number:active[b-wgrwuomsvg] {
    transform: translateY(0);
}

.keyboard-special[b-wgrwuomsvg] {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

.keyboard-special:hover[b-wgrwuomsvg] {
    background-color: #5a6268;
    border-color: #5a6268;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .number-pad[b-wgrwuomsvg] {
        max-width: 100%;
        gap: 4px;
    }

    .keyboard-number[b-wgrwuomsvg] {
        min-width: 45px;
        min-height: 45px;
        font-size: 1.1rem;
    }

    .answer-display[b-wgrwuomsvg] {
        min-width: 80px;
        min-height: 50px;
        font-size: 1.5rem;
    }
}

/* Tablet and larger */
@media (min-width: 768px) {
    .keyboard-number[b-wgrwuomsvg] {
        min-width: 60px;
        min-height: 60px;
        font-size: 1.4rem;
    }
}
/* /Components/Pages/Products/MyGames/Games.razor.rz.scp.css */
.game-card[b-csa5vjcp7s] {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 15px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.game-ribbon[b-csa5vjcp7s] {
    position: absolute;
    top: 26px;
    right: -42px;
    width: 175px;
    transform: rotate(45deg);
    background: #f59e0b;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    text-align: center;
    padding: 0.4rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.game-card:hover[b-csa5vjcp7s] {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
}

.game-icon[b-csa5vjcp7s] {
    font-size: 4rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.game-card:hover .game-icon[b-csa5vjcp7s] {
    transform: scale(1.2) rotate(5deg);
}

.card-title a[b-csa5vjcp7s] {
    color: #0d6efd;
    font-weight: 600;
    transition: color 0.3s ease;
}

.card-title a:hover[b-csa5vjcp7s] {
    color: #0a58ca;
}

.card-body[b-csa5vjcp7s] {
    padding: 2rem;
}

.bg-light[b-csa5vjcp7s] {
    background-color: #f8f9fa !important;
}

/* Multiplayer Section Styles */
.bg-gradient-multiplayer[b-csa5vjcp7s] {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 15px;
}

.icon-box[b-csa5vjcp7s] {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.icon-box:hover[b-csa5vjcp7s] {
    transform: scale(1.1);
}

.badge[b-csa5vjcp7s] {
    font-weight: 500;
    padding: 0.5rem 1rem;
}
/* /Components/Pages/Products/MyGames/QuizMaster/QuizMaster.razor.rz.scp.css */
.question-text[b-hzlmy5k3w0] {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
}

.question-text h4[b-hzlmy5k3w0] {
    font-weight: 500;
    line-height: 1.6;
    color: #212529;
}

.answer-options[b-hzlmy5k3w0] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.answer-option-btn[b-hzlmy5k3w0] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #0d6efd;
    background-color: white;
    color: #212529;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    text-align: left;
    transition: all 0.3s ease;
}

.answer-option-btn:hover:not(:disabled)[b-hzlmy5k3w0] {
    background-color: #0d6efd;
    color: white;
    transform: translateX(5px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
}

.answer-option-btn:active:not(:disabled)[b-hzlmy5k3w0] {
    transform: translateX(3px);
}

.answer-option-btn:disabled[b-hzlmy5k3w0] {
    cursor: not-allowed;
}

.option-letter[b-hzlmy5k3w0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 15px;
}

.answer-option-btn:hover:not(:disabled) .option-letter[b-hzlmy5k3w0] {
    background-color: white;
    color: #0d6efd;
}

.option-text[b-hzlmy5k3w0] {
    flex: 1;
    font-weight: 500;
}

/* Correct answer styling */
.answer-correct[b-hzlmy5k3w0] {
    background-color: #d1e7dd;
    border-color: #198754;
    color: #0f5132;
}

.answer-correct .option-letter[b-hzlmy5k3w0] {
    background-color: #198754;
    color: white;
}

/* Incorrect answer styling */
.answer-incorrect[b-hzlmy5k3w0] {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #842029;
}

.answer-incorrect .option-letter[b-hzlmy5k3w0] {
    background-color: #dc3545;
    color: white;
}

/* Disabled (not selected) answer styling */
.answer-disabled[b-hzlmy5k3w0] {
    opacity: 0.6;
    border-color: #6c757d;
}

.answer-disabled .option-letter[b-hzlmy5k3w0] {
    background-color: #6c757d;
    color: white;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .answer-option-btn[b-hzlmy5k3w0] {
        padding: 12px 15px;
        font-size: 1rem;
    }

    .option-letter[b-hzlmy5k3w0] {
        min-width: 35px;
        height: 35px;
        margin-right: 10px;
        font-size: 0.9rem;
    }

    .question-text[b-hzlmy5k3w0] {
        padding: 15px;
    }

    .question-text h4[b-hzlmy5k3w0] {
        font-size: 1.1rem;
    }
}

/* Tablet */
@media (min-width: 577px) and (max-width: 768px) {
    .answer-option-btn[b-hzlmy5k3w0] {
        padding: 13px 18px;
        font-size: 1.05rem;
    }

    .option-letter[b-hzlmy5k3w0] {
        min-width: 38px;
        height: 38px;
        margin-right: 12px;
    }
}

/* Large screens */
@media (min-width: 992px) {
    .question-text h4[b-hzlmy5k3w0] {
        font-size: 1.5rem;
    }

    .answer-option-btn[b-hzlmy5k3w0] {
        padding: 18px 25px;
        font-size: 1.15rem;
    }

    .option-letter[b-hzlmy5k3w0] {
        min-width: 45px;
        height: 45px;
        margin-right: 18px;
        font-size: 1.1rem;
    }
}
/* /Components/Pages/Products/MyGoals/MyGoals.razor.rz.scp.css */
/* ============================================
   MyGoals — Scoped Component Styles
   ============================================ */

/* Container */
.goals-container[b-era12gja8h] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0.5rem 2rem;
}

/* ---- Header ---- */
.goals-header[b-era12gja8h] {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    padding: 2rem 2.5rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(13, 148, 136, 0.25);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.goals-header-icon[b-era12gja8h] {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    font-size: 28px;
    color: white;
    flex-shrink: 0;
}

.goals-header-title[b-era12gja8h] {
    color: white;
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.goals-header-subtitle[b-era12gja8h] {
    color: rgba(255,255,255,0.85);
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
}

/* ---- Notice (no product) ---- */
.goals-notice[b-era12gja8h] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.goals-notice .notice-icon[b-era12gja8h] {
    font-size: 2rem;
    color: #0d9488;
    flex-shrink: 0;
}

.goals-notice .notice-actions[b-era12gja8h] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ---- Summary Cards ---- */
.goals-summary-row[b-era12gja8h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.goals-summary-card[b-era12gja8h] {
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.goals-summary-card .summary-icon[b-era12gja8h] { font-size: 1.4rem; margin-bottom: 0.25rem; }
.goals-summary-card .summary-label[b-era12gja8h] { font-size: 0.8rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.05em; }
.goals-summary-card .summary-amount[b-era12gja8h] { font-size: 1.35rem; font-weight: 700; }
.goals-summary-card .summary-count[b-era12gja8h]  { font-size: 0.78rem; opacity: 0.75; }

.card-invested[b-era12gja8h] { background: linear-gradient(135deg, #10b981, #059669); }
.card-planned[b-era12gja8h]  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.card-dream[b-era12gja8h]    { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.card-total[b-era12gja8h]    { background: linear-gradient(135deg, #0d9488, #0f766e); }

/* ---- Life Level ---- */
.goals-section[b-era12gja8h] { margin-bottom: 1.75rem; }

/* ---- Filter Bar ---- */
.goals-filter-bar[b-era12gja8h] {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bs-tertiary-bg);
    border-radius: 10px;
}

.filter-group[b-era12gja8h] { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-group label[b-era12gja8h] { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); }

/* ---- Table ---- */
.goals-table-wrap[b-era12gja8h] {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}

.goals-table[b-era12gja8h] {
    margin: 0;
    font-size: 0.9rem;
}

.goals-table thead th[b-era12gja8h] {
    background: var(--bs-tertiary-bg);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    border-bottom: 2px solid var(--bs-border-color);
    padding: 0.65rem 0.75rem;
}

.goals-table tbody tr[b-era12gja8h] { transition: background 0.15s; }
.goals-table tbody tr:hover[b-era12gja8h] { background: var(--bs-tertiary-bg); }

.row-done    td:first-child[b-era12gja8h] { border-left: 3px solid #10b981; }
.row-planned td:first-child[b-era12gja8h] { border-left: 3px solid #f59e0b; }
.row-dream   td:first-child[b-era12gja8h] { border-left: 3px solid #8b5cf6; }

.status-badge[b-era12gja8h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: 0.9rem;
}

.badge-done[b-era12gja8h]    { background: rgba(16,185,129,0.12); }
.badge-planned[b-era12gja8h] { background: rgba(245,158,11,0.12); }
.badge-dream[b-era12gja8h]   { background: rgba(139,92,246,0.12); }

.goal-text[b-era12gja8h] { font-weight: 500; }
.performer-text[b-era12gja8h] { font-size: 0.85rem; color: var(--bs-secondary-color); }

/* ---- Notes row ---- */
.notes-row td[b-era12gja8h] { padding: 0 !important; }

.notes-expanded[b-era12gja8h] {
    padding: 0.6rem 1rem 0.6rem 3rem;
    font-size: 0.85rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border-top: 1px dashed var(--bs-border-color);
    white-space: pre-wrap;
    line-height: 1.5;
}

/* ---- Empty State ---- */
.goals-empty[b-era12gja8h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

/* ---- Modal ---- */
.modal-backdrop-custom[b-era12gja8h] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
}

.goals-modal[b-era12gja8h] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: min(600px, 95vw);
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1050;
    background: var(--bs-body-bg);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.goals-modal-header[b-era12gja8h] {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    padding: 1.25rem 1.5rem;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.goals-modal-header h5[b-era12gja8h] {
    color: white;
    margin: 0;
    font-weight: 600;
}

.goals-modal-body[b-era12gja8h] {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
}

.goals-modal-footer[b-era12gja8h] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .goals-header[b-era12gja8h] { padding: 1.25rem 1rem; }
    .goals-summary-row[b-era12gja8h] { grid-template-columns: 1fr 1fr; }
}

/* ---- Data Management Toggle Button (inside teal header) ---- */
.btn-goals-dm[b-era12gja8h] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: white;
    backdrop-filter: blur(8px);
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.btn-goals-dm:hover[b-era12gja8h],
.btn-goals-dm:focus[b-era12gja8h] {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.7);
    color: white;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.btn-goals-dm--active[b-era12gja8h] {
    background: white;
    border-color: white;
    color: #0f766e;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.btn-goals-dm--active:hover[b-era12gja8h],
.btn-goals-dm--active:focus[b-era12gja8h] {
    background: rgba(255, 255, 255, 0.92);
    border-color: white;
    color: #0f766e;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

/* ---- Auth Notice (Not Authenticated) ---- */
.auth-notice[b-era12gja8h] {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    border: 2px solid #5eead4;
    border-radius: 20px;
    padding: 3rem;
    margin: 2rem auto;
    max-width: 800px;
    box-shadow: 0 10px 40px rgba(13, 148, 136, 0.15);
}

.auth-notice .notice-content[b-era12gja8h] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.auth-notice .notice-icon[b-era12gja8h] {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(13, 148, 136, 0.3);
}

.auth-notice h3[b-era12gja8h] {
    font-size: 1.875rem;
    font-weight: 800;
    margin: 0 0 0.75rem 0;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-notice p[b-era12gja8h] {
    color: #4b5563;
    font-size: 1.125rem;
    margin-bottom: 0;
    line-height: 1.6;
    font-weight: 500;
}

.auth-notice .notice-actions[b-era12gja8h] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.auth-notice .notice-actions .btn[b-era12gja8h] {
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.auth-notice .notice-actions .btn-primary[b-era12gja8h] {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.3);
}

.auth-notice .notice-actions .btn-primary:hover[b-era12gja8h] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(13, 148, 136, 0.4);
    background: linear-gradient(135deg, #0b7a71 0%, #0b5e58 100%);
}

.auth-notice .notice-actions .btn-outline-secondary[b-era12gja8h] {
    border-radius: 50px;
    font-weight: 600;
}

.auth-notice .notice-actions .btn-outline-secondary:hover[b-era12gja8h] {
    transform: translateY(-2px);
}

/* ---- Teaser Section ---- */
.goals-teaser[b-era12gja8h] {
    margin: 1.5rem auto 0;
    max-width: 1000px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 8px 28px rgba(13, 148, 136, 0.12);
}

.goals-teaser-header[b-era12gja8h] {
    margin-bottom: 1rem;
}

.goals-teaser-header h4[b-era12gja8h] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f766e;
}

.goals-teaser-header p[b-era12gja8h] {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    color: var(--bs-secondary-color);
}

.goals-teaser-grid[b-era12gja8h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}

.goals-teaser-card[b-era12gja8h] {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.goals-teaser-media[b-era12gja8h] {
    min-height: 130px;
}

.goals-teaser-video-frame[b-era12gja8h] {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #0f172a;
}

.goals-teaser-video-frame iframe[b-era12gja8h] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.goals-teaser-media-fallback[b-era12gja8h] {
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: white;
}

.goals-teaser-media-fallback i[b-era12gja8h] {
    font-size: 2rem;
}

.goals-teaser-body[b-era12gja8h] {
    padding: 0.85rem;
}

.goals-teaser-body h5[b-era12gja8h] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.goals-teaser-body p[b-era12gja8h] {
    margin: 0.45rem 0 0;
    font-size: 0.84rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .goals-teaser[b-era12gja8h] {
        padding: 1rem;
    }
}
/* /Components/Pages/Products/MyStocks/MyStocks.razor.rz.scp.css */
/* No custom styles needed — page uses global app.css classes (btn-oval, quote-bubble, content) matching the site design. */
/* /Components/Pages/Products/MyTimeSheet/MyTimeSheet.razor.rz.scp.css */
.timesheet-container[b-3sm0i9jorx] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-3sm0i9jorx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.header-content[b-3sm0i9jorx] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-3sm0i9jorx] {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.header-content h1[b-3sm0i9jorx] {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;
    color: #1f2937;
}

.brand-accent[b-3sm0i9jorx] {
    color: #818cf8;
}

.header-subtitle[b-3sm0i9jorx] {
    color: #6b7280;
    font-size: 1.1rem;
    margin: 0.25rem 0 0 0;
}

.header-actions[b-3sm0i9jorx] {
    display: flex;
    gap: 0.75rem;
}

/* Premium Notice Styles */
.premium-notice[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 40px rgba(251, 191, 36, 0.3);
}

.premium-content[b-3sm0i9jorx] {
    display: flex;
    gap: 2rem;
    align-items: start;
}

.premium-icon[b-3sm0i9jorx] {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    flex-shrink: 0;
}

.premium-notice h3[b-3sm0i9jorx] {
    color: white;
    font-size: 1.875rem;
    font-weight: 800;
    margin: 0 0 0.75rem 0;
}

.premium-notice p[b-3sm0i9jorx] {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.premium-features[b-3sm0i9jorx] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
}

.premium-features li[b-3sm0i9jorx] {
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.premium-features li i[b-3sm0i9jorx] {
    color: #10b981;
    font-size: 1.25rem;
}

.btn-premium[b-3sm0i9jorx] {
    background: white;
    color: #f59e0b;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-premium:hover[b-3sm0i9jorx] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    color: #f59e0b;
}

.btn-premium i[b-3sm0i9jorx] {
    font-size: 1.25rem;
}

/* Guest Notice Styles - Softer, More Inviting Design */
.guest-notice[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
    border: 2px solid #c7d2fe;
    border-radius: 20px;
    padding: 3rem;
    margin: 2rem auto;
    max-width: 800px;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.15);
}

.auth-notice[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
    border: 2px solid #93c5fd;
    border-radius: 20px;
    padding: 3rem;
    margin: 2rem auto;
    max-width: 800px;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.15);
}

.product-notice[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
    border: 2px solid #c4b5fd;
    border-radius: 20px;
    padding: 3rem;
    margin: 2rem auto;
    max-width: 900px;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.15);
}

.notice-content[b-3sm0i9jorx] {
    display: flex;
    gap: 2rem;
    align-items: start;
}

.notice-icon[b-3sm0i9jorx] {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.guest-notice h3[b-3sm0i9jorx],
.auth-notice h3[b-3sm0i9jorx],
.product-notice h3[b-3sm0i9jorx] {
    color: #1f2937;
    font-size: 1.875rem;
    font-weight: 800;
    margin: 0 0 0.75rem 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.guest-notice p[b-3sm0i9jorx],
.auth-notice p[b-3sm0i9jorx],
.product-notice p[b-3sm0i9jorx] {
    color: #4b5563;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-weight: 500;
}

.notice-actions[b-3sm0i9jorx] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.notice-actions .btn[b-3sm0i9jorx] {
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.notice-actions .btn-primary[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.notice-actions .btn-primary:hover[b-3sm0i9jorx] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5568d3 0%, #6a3e8f 100%);
}

.notice-actions .btn-outline-secondary[b-3sm0i9jorx] {
    background: white;
    color: #667eea;
    border: 2px solid #667eea;
    font-weight: 600;
}

.notice-actions .btn-outline-secondary:hover[b-3sm0i9jorx] {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* ---- Teaser Section ---- */
.timesheet-teaser[b-3sm0i9jorx] {
    margin: 1.5rem auto 0;
    max-width: 1000px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 8px 28px rgba(102, 126, 234, 0.14);
}

.timesheet-teaser-header[b-3sm0i9jorx] {
    margin-bottom: 1rem;
}

.timesheet-teaser-header h4[b-3sm0i9jorx] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #4f46e5;
}

.timesheet-teaser-header p[b-3sm0i9jorx] {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    color: var(--bs-secondary-color);
}

.timesheet-teaser-grid[b-3sm0i9jorx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}

.timesheet-teaser-card[b-3sm0i9jorx] {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.timesheet-teaser-media[b-3sm0i9jorx] {
    min-height: 130px;
}

.timesheet-teaser-video-frame[b-3sm0i9jorx] {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #1f2937;
}

.timesheet-teaser-video-frame iframe[b-3sm0i9jorx] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.timesheet-teaser-media-fallback[b-3sm0i9jorx] {
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.timesheet-teaser-media-fallback i[b-3sm0i9jorx] {
    font-size: 2rem;
}

.timesheet-teaser-body[b-3sm0i9jorx] {
    padding: 0.85rem;
}

.timesheet-teaser-body h5[b-3sm0i9jorx] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.timesheet-teaser-body p[b-3sm0i9jorx] {
    margin: 0.45rem 0 0;
    font-size: 0.84rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
}

.product-features[b-3sm0i9jorx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.feature-item[b-3sm0i9jorx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #374151;
    font-weight: 600;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.feature-item:hover[b-3sm0i9jorx] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    border-color: #c7d2fe;
}

.feature-item i[b-3sm0i9jorx] {
    color: #10b981;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.timesheet-controls[b-3sm0i9jorx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.view-selector[b-3sm0i9jorx] {
    display: flex;
    gap: 0.5rem;
    background: #f3f4f6;
    padding: 0.25rem;
    border-radius: 12px;
}

.view-selector button[b-3sm0i9jorx] {
    border: none;
    background: transparent;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    color: #6b7280;
    font-weight: 500;
    transition: all 0.2s;
}

.view-selector button.active[b-3sm0i9jorx] {
    background: white;
    color: #6366f1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.view-selector button:hover:not(.active)[b-3sm0i9jorx] {
    color: #374151;
}

.period-navigator[b-3sm0i9jorx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.current-period[b-3sm0i9jorx] {
    font-weight: 600;
    color: #1f2937;
    min-width: 200px;
    text-align: center;
}

.summary-section[b-3sm0i9jorx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card[b-3sm0i9jorx] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s, border 0.2s;
    border: 2px solid transparent;
    overflow: visible;
    min-height: 100px;
}

.summary-card.clickable:hover[b-3sm0i9jorx] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.summary-card.active[b-3sm0i9jorx] {
    border: 2px solid #667eea;
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
}

.summary-card:not(.clickable)[b-3sm0i9jorx] {
    cursor: default;
}

.summary-card.clickable[b-3sm0i9jorx] {
    cursor: pointer;
}

.summary-icon[b-3sm0i9jorx] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.summary-icon.total[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #6366f1, #818cf8);
}

.summary-icon.billable[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.summary-icon.approved[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.summary-icon.draft[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.summary-content[b-3sm0i9jorx] {
    flex: 1;
    overflow: visible;
    min-width: 0;
}

.summary-value[b-3sm0i9jorx] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.summary-label[b-3sm0i9jorx] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.week-view[b-3sm0i9jorx] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.day-column[b-3sm0i9jorx] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.day-column.today[b-3sm0i9jorx] {
    box-shadow: 0 0 0 3px #6366f1;
}

.day-column.locked-day[b-3sm0i9jorx] {
    opacity: 0.85;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.day-column.locked-day .add-entry-btn[b-3sm0i9jorx] {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #fca5a5;
    color: #dc2626;
}

.day-column.locked-day .add-entry-btn:hover[b-3sm0i9jorx] {
    border-color: #fca5a5;
    color: #dc2626;
    background: transparent;
}

.day-header.locked-header[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
}

.day-header.locked-header .day-name[b-3sm0i9jorx],
.day-header.locked-header .day-date[b-3sm0i9jorx],
.day-header.locked-header .day-total[b-3sm0i9jorx] {
    color: #991b1b;
}

.day-header[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #e5e7eb;
}

.day-name[b-3sm0i9jorx] {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.day-date[b-3sm0i9jorx] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    margin-top: 0.25rem;
}

.day-total[b-3sm0i9jorx] {
    font-size: 0.875rem;
    color: #6366f1;
    font-weight: 600;
    margin-top: 0.5rem;
}

.day-entries[b-3sm0i9jorx] {
    padding: 0.75rem;
    min-height: 150px;
}

.entry-item[b-3sm0i9jorx] {
    background: #f9fafb;
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s;
    border-left: 3px solid #e5e7eb;
}

.entry-item:hover[b-3sm0i9jorx] {
    background: #f3f4f6;
}

.entry-item.draft[b-3sm0i9jorx] {
    border-left-color: #f59e0b;
}

.entry-item.submitted[b-3sm0i9jorx] {
    border-left-color: #3b82f6;
}

.entry-item.approved[b-3sm0i9jorx] {
    border-left-color: #10b981;
}

.entry-item.rejected[b-3sm0i9jorx] {
    border-left-color: #ef4444;
}

.entry-project[b-3sm0i9jorx] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.entry-time[b-3sm0i9jorx] {
    font-size: 0.75rem;
    color: #6366f1;
    font-weight: 600;
}

.entry-task[b-3sm0i9jorx] {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.entry-status[b-3sm0i9jorx] {
    margin-top: 0.5rem;
}

.add-entry-btn[b-3sm0i9jorx] {
    width: 100%;
    padding: 0.5rem;
    border: 2px dashed #d1d5db;
    background: transparent;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.add-entry-btn:hover[b-3sm0i9jorx] {
    border-color: #6366f1;
    color: #6366f1;
    background: #f9fafb;
}

.entries-list[b-3sm0i9jorx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.entry-card[b-3sm0i9jorx] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #e5e7eb;
    transition: all 0.2s;
}

.entry-card:hover[b-3sm0i9jorx] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.entry-card.draft[b-3sm0i9jorx] {
    border-left-color: #f59e0b;
}

.entry-card.submitted[b-3sm0i9jorx] {
    border-left-color: #3b82f6;
}

.entry-card.approved[b-3sm0i9jorx] {
    border-left-color: #10b981;
}

.entry-card.rejected[b-3sm0i9jorx] {
    border-left-color: #ef4444;
}

.entry-card.pending[b-3sm0i9jorx] {
    border-left-color: #f59e0b;
}

.entry-header[b-3sm0i9jorx] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.75rem;
}

.entry-header strong[b-3sm0i9jorx] {
    font-size: 1.125rem;
    color: #1f2937;
}

.entry-date[b-3sm0i9jorx] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-left: 1rem;
}

.entry-meta[b-3sm0i9jorx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.entry-hours[b-3sm0i9jorx] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #6366f1;
}

.entry-status-badge[b-3sm0i9jorx] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.entry-status-badge.draft[b-3sm0i9jorx] {
    background: #fef3c7;
    color: #92400e;
}

.entry-status-badge.submitted[b-3sm0i9jorx] {
    background: #dbeafe;
    color: #1e40af;
}

.entry-status-badge.approved[b-3sm0i9jorx] {
    background: #d1fae5;
    color: #065f46;
}

.entry-status-badge.rejected[b-3sm0i9jorx] {
    background: #fee2e2;
    color: #991b1b;
}

.entry-task-type[b-3sm0i9jorx] {
    display: inline-block;
    background: #f3f4f6;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.entry-description[b-3sm0i9jorx] {
    color: #374151;
    margin: 0.75rem 0;
    line-height: 1.6;
}

.entry-footer[b-3sm0i9jorx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.entry-info[b-3sm0i9jorx] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.billable-badge[b-3sm0i9jorx] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #d1fae5;
    color: #065f46;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.rejection-reason[b-3sm0i9jorx] {
    color: #dc2626;
    font-size: 0.875rem;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-actions[b-3sm0i9jorx] {
    display: flex;
    gap: 0.5rem;
}

.entry-details[b-3sm0i9jorx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.project-name[b-3sm0i9jorx] {
    color: #6366f1;
    font-size: 0.875rem;
    margin-left: 0.5rem;
}

.task-type[b-3sm0i9jorx] {
    background: #f3f4f6;
    padding: 0.125rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #6b7280;
}

.manager-section[b-3sm0i9jorx] {
    margin-bottom: 2rem;
}

.manager-section h3[b-3sm0i9jorx] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.approval-section[b-3sm0i9jorx] {
    margin-bottom: 2rem;
}

.section-header[b-3sm0i9jorx] {
    margin-bottom: 1rem;
}

.section-header h4[b-3sm0i9jorx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.badge[b-3sm0i9jorx] {
    background: #ef4444;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
}

.entries-grid[b-3sm0i9jorx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
}

.team-summary[b-3sm0i9jorx] {
    margin-top: 2rem;
}

.team-summary h4[b-3sm0i9jorx] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
}

.summary-cards[b-3sm0i9jorx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.empty-state[b-3sm0i9jorx] {
    text-align: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

.empty-state i[b-3sm0i9jorx] {
    font-size: 4rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state h3[b-3sm0i9jorx] {
    font-size: 1.5rem;
    color: #374151;
    margin-bottom: 0.5rem;
}

/* Modal Styles */
.modal-overlay[b-3sm0i9jorx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content[b-3sm0i9jorx] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
}

/* Holiday Styles */
.day-column.holiday[b-3sm0i9jorx] {
    background: linear-gradient(to bottom, #fff5f5 0%, #ffffff 100%);
    border: 1px solid #fecaca;
}

.day-column.holiday .day-header[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
}

.holiday-badge[b-3sm0i9jorx] {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: white;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}

.holiday-badge i[b-3sm0i9jorx] {
    font-size: 0.875rem;
}

.holiday-badge span[b-3sm0i9jorx] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.modal-header[b-3sm0i9jorx] {
    padding: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-3sm0i9jorx] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.close-btn[b-3sm0i9jorx] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s;
}

.close-btn:hover[b-3sm0i9jorx] {
    color: #374151;
}

.modal-body[b-3sm0i9jorx] {
    padding: 1.5rem;
}

.modal-footer[b-3sm0i9jorx] {
    padding: 1.5rem;
    border-top: 2px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.form-group[b-3sm0i9jorx] {
    margin-bottom: 1.25rem;
}

.form-group label[b-3sm0i9jorx] {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.form-control[b-3sm0i9jorx] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-control:focus[b-3sm0i9jorx] {
    outline: none;
    border-color: #6366f1;
}

.form-row[b-3sm0i9jorx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-check[b-3sm0i9jorx] {
    margin-top: 1rem;
}

.form-check-input[b-3sm0i9jorx] {
    margin-right: 0.5rem;
}

.form-check-label[b-3sm0i9jorx] {
    font-weight: 500;
    color: #374151;
}

/* Responsive */
@media (max-width: 1024px) {
    .week-view[b-3sm0i9jorx] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .timesheet-container[b-3sm0i9jorx] {
        padding: 1rem;
    }

    .page-header[b-3sm0i9jorx] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .week-view[b-3sm0i9jorx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .timesheet-controls[b-3sm0i9jorx] {
        flex-direction: column;
        align-items: stretch;
    }

    .period-navigator[b-3sm0i9jorx] {
        justify-content: center;
    }

    .summary-section[b-3sm0i9jorx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row[b-3sm0i9jorx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .week-view[b-3sm0i9jorx] {
        grid-template-columns: 1fr;
    }

    .summary-section[b-3sm0i9jorx] {
        grid-template-columns: 1fr;
    }

    .entries-grid[b-3sm0i9jorx] {
        grid-template-columns: 1fr;
    }
}

/* Drag and Drop Styles */
.entry-item[b-3sm0i9jorx] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.entry-item.dragging[b-3sm0i9jorx] {
    opacity: 0.4;
    transform: rotate(2deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.day-column.drag-over[b-3sm0i9jorx] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(129, 140, 248, 0.1));
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
    transform: scale(1.02);
    transition: all 0.2s ease;
}

.day-column.drag-over .day-entries[b-3sm0i9jorx] {
    background: rgba(99, 102, 241, 0.05);
    border: 2px dashed #6366f1;
    border-radius: 8px;
    min-height: 180px;
}

.day-column[b-3sm0i9jorx] {
    transition: all 0.2s ease;
}

/* Visual feedback during drag */
.entry-item[draggable="true"]:hover:not(.dragging)[b-3sm0i9jorx] {
    cursor: move;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.entry-item[draggable="true"][b-3sm0i9jorx]::before {
    content: "⋮⋮";
    position: absolute;
    left: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #d1d5db;
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.entry-item[draggable="true"]:hover[b-3sm0i9jorx]::before {
    opacity: 1;
}

.entry-item[b-3sm0i9jorx] {
    position: relative;
    padding-left: 1.25rem;
}

/* Copy Drag Functionality Styles */
.entry-item.copying[b-3sm0i9jorx] {
    opacity: 0.7;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.day-column.copy-target[b-3sm0i9jorx] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.1));
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5);
    transform: scale(1.02);
}

.day-column.copy-target .day-header[b-3sm0i9jorx] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 211, 153, 0.15));
}

.day-column.copy-target .day-entries[b-3sm0i9jorx] {
    background: rgba(16, 185, 129, 0.05);
    border: 2px dashed #10b981;
    border-radius: 8px;
    min-height: 180px;
}

/* Selectable state when copy mode is active */
.day-column.copy-selectable[b-3sm0i9jorx] {
    cursor: pointer;
    border: 2px dashed #cbd5e1;
    position: relative;
}

.day-column.copy-selectable[b-3sm0i9jorx]::after {
    content: "Click to copy here";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1;
}

.day-column.copy-selectable:hover[b-3sm0i9jorx]::after {
    opacity: 1;
}

.day-column.copy-selectable:hover[b-3sm0i9jorx] {
    border-color: #94a3b8;
    background: rgba(241, 245, 249, 0.5);
}

/* Copy handle button */
.copy-handle[b-3sm0i9jorx] {
    transition: all 0.2s;
}

.copy-handle:hover[b-3sm0i9jorx] {
    background: rgba(102, 126, 234, 1) !important;
    transform: scale(1.1);
}

.copy-handle:active[b-3sm0i9jorx] {
    transform: scale(0.95);
}

/* Category copy handle - different color for distinction */
.copy-category-handle[b-3sm0i9jorx] {
    background: rgba(16, 185, 129, 0.95) !important;
}

.copy-category-handle:hover[b-3sm0i9jorx] {
    background: rgba(16, 185, 129, 1) !important;
    transform: scale(1.15);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
}

.copy-category-handle:active[b-3sm0i9jorx] {
    transform: scale(0.9);
}

/* Visual feedback when copying category */
.category-header.copying[b-3sm0i9jorx] {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.6);
    opacity: 0.8;
}

/* Description autocomplete dropdown */
.description-suggestions[b-3sm0i9jorx] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #e9ecef;
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1060;
    max-height: 220px;
    overflow-y: auto;
}

.description-suggestion-item[b-3sm0i9jorx] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s, color 0.15s;
}

    .description-suggestion-item:last-child[b-3sm0i9jorx] {
        border-bottom: none;
    }

    .description-suggestion-item:hover[b-3sm0i9jorx] {
        background: #f4f5fe;
        color: #667eea;
    }
/* /Components/Pages/Products/OnlineTools/DecryptEncyptOnlineTool.razor.rz.scp.css */
/* ── Tab strip ─────────────────────────────────────────── */
.tab-row[b-juoya0hb68] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tab-btn[b-juoya0hb68] {
    padding: 0.45rem 1.1rem;
    border: 1.5px solid #c9d3e0;
    border-radius: 2rem;
    background: #fff;
    color: #444;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-btn:hover[b-juoya0hb68] {
    border-color: #006bb7;
    color: #006bb7;
    background: #f0f7ff;
    transform: translateY(-1px);
}

.tab-btn.active[b-juoya0hb68] {
    background: #006bb7;
    border-color: #006bb7;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 107, 183, 0.3);
}

/* ── Algorithm info banner ─────────────────────────────── */
.algo-info[b-juoya0hb68] {
    background: #e8f4fd;
    border-left: 4px solid #006bb7;
    border-radius: 0.5rem;
    padding: 0.85rem 1.1rem;
    font-size: 0.9rem;
    color: #1a3a5c;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.algo-info-warning[b-juoya0hb68] {
    background: #fff8e1;
    border-left-color: #f59e0b;
    color: #7c5200;
}

/* ── Tool card ──────────────────────────────────────────── */
.tool-card[b-juoya0hb68] {
    background: #fff;
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    border: 1px solid #e2e8f0;
}

/* ── Monospaced inputs / outputs ──────────────────────── */
.font-mono[b-juoya0hb68] {
    font-family: 'Consolas', 'SFMono-Regular', 'Liberation Mono', monospace;
    font-size: 0.875rem;
}

.output-area[b-juoya0hb68] {
    background: #f8fafc !important;
    color: #1a3a5c;
    cursor: text;
    transition: filter 0.2s ease;
}

/* ── Masked output (decrypt / decode hidden by default) ─────── */
.output-masked[b-juoya0hb68] {
    filter: blur(4px);
    user-select: none;
}

/* ── Copy toast ────────────────────────────────────────── */
.copy-toast[b-juoya0hb68] {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: #006bb7;
    color: #fff;
    padding: 0.65rem 1.6rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 107, 183, 0.4);
    z-index: 9999;
    animation: fadeInUp-b-juoya0hb68 0.25s ease;
    pointer-events: none;
}

@keyframes fadeInUp-b-juoya0hb68 {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Saved Sessions panel ────────────────────────────────── */
.sessions-panel[b-juoya0hb68] {
    border-left: 4px solid #00c8ff;
}

.sessions-title[b-juoya0hb68] {
    font-weight: 700;
    color: #1a3a5c;
    margin-bottom: 0.75rem;
}

.sessions-save-row[b-juoya0hb68] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sessions-label-input[b-juoya0hb68] {
    flex: 1;
    min-width: 0;
}

.sessions-for-tab-label[b-juoya0hb68] {
    font-size: 0.8rem;
    color: #6c757d;
    margin: 0.75rem 0 0.35rem 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sessions-list[b-juoya0hb68] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.session-row[b-juoya0hb68] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    background: #f0f7ff;
    border-radius: 0.5rem;
    border: 1px solid #cce4ff;
}

.session-row-label[b-juoya0hb68] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    color: #1a3a5c;
}

.session-row-actions[b-juoya0hb68] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.session-status[b-juoya0hb68] {
    font-size: 0.85rem;
    color: #0a7c3e;
    font-weight: 600;
    margin-top: 0.25rem;
    animation: fadeInUp-b-juoya0hb68 0.2s ease;
}

/* ── Access / Product-required panel ────────────────────── */
.access-panel[b-juoya0hb68] {
    border-left: 4px solid #ffc107;
}

.access-panel-inner[b-juoya0hb68] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.access-panel-icon[b-juoya0hb68] {
    font-size: 2rem;
    color: #ffc107;
    flex-shrink: 0;
    line-height: 1;
}

.access-panel-title[b-juoya0hb68] {
    font-weight: 700;
    color: #1a3a5c;
    margin-bottom: 0.25rem;
}

.access-panel-desc[b-juoya0hb68] {
    color: #495057;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
/* /Components/Pages/Products/Products.razor.rz.scp.css */
/* ── Product cards ───────────────────────────────────────── */
.product-card[b-g359jajac1] {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    height: 100%;
    position: relative;
    cursor: pointer;
}

.product-card:hover[b-g359jajac1] {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}

.product-card a.stretched-link[b-g359jajac1]::after {
    border-radius: 16px;
}

.product-card .product-img-wrap[b-g359jajac1] {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8edf8 100%);
    padding: 1.5rem;
    text-align: center;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card .product-img-wrap img[b-g359jajac1] {
    max-height: 72px;
    width: auto;
    object-fit: contain;
    transition: transform .3s ease;
}

.product-card:hover .product-img-wrap img[b-g359jajac1] {
    transform: scale(1.08);
}

.product-card .card-body[b-g359jajac1] {
    padding: 1.25rem 1.5rem 1.5rem;
}

.product-card .card-title[b-g359jajac1] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: .5rem;
}

.product-card .card-text[b-g359jajac1] {
    font-size: .92rem;
    color: #6c757d;
    line-height: 1.55;
}

/* ── Price badges ────────────────────────────────────────── */
.price-badge[b-g359jajac1] {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    padding: .25rem .75rem;
    border-radius: 50px;
    margin-bottom: .75rem;
}

.price-free[b-g359jajac1] {
    background: #d1f0e0;
    color: #1a7a45;
}

.price-members[b-g359jajac1] {
    background: #dde8ff;
    color: #2255cc;
}

.price-paid[b-g359jajac1] {
    background: #fff3cd;
    color: #856404;
}

.price-premium[b-g359jajac1] {
    background: #ffedd5;
    color: #9a3412;
}

/* ── Coming-soon card ────────────────────────────────────── */
.coming-soon-card[b-g359jajac1] {
    opacity: .92;
}

.coming-soon-card .product-img-wrap[b-g359jajac1] {
    background: linear-gradient(135deg, #2d1b69 0%, #11998e 100%);
    position: relative;
}

/* ── Coming-soon card (MyStocks) ─────────────────────────── */
.coming-soon-card-stocks .product-img-wrap[b-g359jajac1] {
    background: linear-gradient(135deg, #0d1f12 0%, #27ae60 100%);
}

/* ── Coming-soon card (MyTimeSheet) ──────────────────────── */
.coming-soon-card-timesheet .product-img-wrap[b-g359jajac1] {
    background: linear-gradient(135deg, #1e1b4b 0%, #6366f1 100%);
}

/* ── Product card (MyBlog) ───────────────────────────────── */
.product-card-myblog .product-img-wrap[b-g359jajac1] {
    background: linear-gradient(135deg, #fed7aa 0%, #f97316 100%);
}

/* ── Product card (MyGames) ──────────────────────────────── */
.product-card-mygames .product-img-wrap[b-g359jajac1] {
    background: linear-gradient(135deg, #a7f3d0 0%, #10b981 100%);
}

/* ── Product card (MyBudget) ─────────────────────────────── */
.product-card-mybudget .product-img-wrap[b-g359jajac1] {
    background: linear-gradient(135deg, #bfdbfe 0%, #3b82f6 100%);
}

.product-card-mygoals .product-img-wrap[b-g359jajac1] {
    background: linear-gradient(135deg, #99f6e4 0%, #0d9488 100%);
}


.coming-soon-ribbon[b-g359jajac1] {
    position: absolute;
    top: 12px;
    right: -28px;
    background: linear-gradient(90deg, #f7971e, #ffd200);
    color: #1a1a2e;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    padding: .2rem 2.4rem;
    transform: rotate(35deg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    text-transform: uppercase;
    z-index: 2;
    pointer-events: none;
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
.confirm-dialog-backdrop[b-m0p7kavuv6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-m0p7kavuv6 0.2s ease-out;
}

@keyframes fadeIn-b-m0p7kavuv6 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.confirm-dialog-container[b-m0p7kavuv6] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 450px;
    width: 90%;
    overflow: hidden;
    animation: slideIn-b-m0p7kavuv6 0.3s ease-out;
}

@keyframes slideIn-b-m0p7kavuv6 {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.confirm-dialog-header[b-m0p7kavuv6] {
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}

.confirm-dialog-icon[b-m0p7kavuv6] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.icon-danger[b-m0p7kavuv6] {
    background: #fee;
    color: #dc3545;
}

.icon-warning[b-m0p7kavuv6] {
    background: #fff3cd;
    color: #ffc107;
}

.icon-success[b-m0p7kavuv6] {
    background: #d1e7dd;
    color: #28a745;
}

.icon-info[b-m0p7kavuv6] {
    background: #d1ecf1;
    color: #17a2b8;
}

.confirm-dialog-title[b-m0p7kavuv6] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.confirm-dialog-body[b-m0p7kavuv6] {
    padding: 1.5rem;
}

.confirm-dialog-body p[b-m0p7kavuv6] {
    margin: 0;
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    text-align: center;
}

.confirm-dialog-footer[b-m0p7kavuv6] {
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.confirm-dialog-footer .btn[b-m0p7kavuv6] {
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.confirm-dialog-footer .btn:hover[b-m0p7kavuv6] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

@media (max-width: 576px) {
    .confirm-dialog-container[b-m0p7kavuv6] {
        width: 95%;
        max-width: none;
    }

    .confirm-dialog-footer[b-m0p7kavuv6] {
        flex-direction: column-reverse;
    }

    .confirm-dialog-footer .btn[b-m0p7kavuv6] {
        width: 100%;
        justify-content: center;
    }
}