/* SMM Panel - Custom Styles */

/* ===== Utility Classes ===== */
.btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.72rem;
    border-radius: 4px;
}

/* ===== Loading Spinner ===== */
.spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13,15,26,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* ===== Service Card (grid view) ===== */
.service-card {
    background: var(--card-bg, #181B2E);
    border: 1px solid rgba(108,62,244,.2);
    border-radius: 10px;
    padding: 1rem;
    transition: border-color .2s, transform .15s;
    cursor: pointer;
}
.service-card:hover {
    border-color: #6C3EF4;
    transform: translateY(-2px);
}

/* ===== Order status timeline ===== */
.status-timeline {
    position: relative;
    padding-left: 1.5rem;
}
.status-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: rgba(108,62,244,.25);
}
.status-timeline-item {
    position: relative;
    margin-bottom: 1rem;
}
.status-timeline-item::before {
    content: '';
    position: absolute;
    left: -1.25rem;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6C3EF4;
    border: 2px solid #0D0F1A;
}

/* ===== Dropdown dark ===== */
.dropdown-menu {
    --bs-dropdown-bg: #141624;
    --bs-dropdown-border-color: rgba(108,62,244,.25);
    --bs-dropdown-link-color: #E8EAFF;
    --bs-dropdown-link-hover-bg: rgba(108,62,244,.15);
    --bs-dropdown-link-hover-color: #fff;
}

/* ===== Mobile sidebar ===== */
@media (max-width: 767px) {
    .sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        height: 100vh;
        width: 240px !important;
        z-index: 1050;
        transition: left .3s ease;
        overflow-y: auto;
        padding-top: 4rem;
    }
    .sidebar.show {
        left: 0;
    }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 1040;
    }
    .sidebar-backdrop.show { display: block; }
}

/* ===== Glassmorphism card ===== */
.card-glass {
    background: rgba(24,27,46,0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(108,62,244,.2);
    border-radius: 12px;
}

/* ===== Glow effects ===== */
.glow-primary { box-shadow: 0 0 20px rgba(108,62,244,.3); }
.glow-accent  { box-shadow: 0 0 20px rgba(0,212,160,.3); }

/* ===== Animated gradient border ===== */
.border-animated {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.border-animated::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, #6C3EF4, #00D4A0, #6C3EF4);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background-size: 200% 200%;
    animation: gradient-move 3s ease infinite;
}
@keyframes gradient-move {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== Number counter animation ===== */
.count-up { transition: all 0.5s ease; }

/* ===== Copy button ===== */
.copy-btn {
    cursor: pointer;
    transition: color .2s;
}
.copy-btn:hover { color: var(--accent, #00D4A0); }

/* ===== Table hover highlight ===== */
.table-highlight-row:hover td {
    background: rgba(108,62,244,.06) !important;
}

/* ===== Scrollable container ===== */
.scroll-x { overflow-x: auto; }
.scroll-x::-webkit-scrollbar { height: 4px; }
.scroll-x::-webkit-scrollbar-track { background: transparent; }
.scroll-x::-webkit-scrollbar-thumb { background: rgba(108,62,244,.3); border-radius: 2px; }