/* ==========================================================================
   ZiskPanel CSS — Central Stylesheet
   Design System: tokens.css (variables) + components.css (reusable).
   This file only contains layout-specific and page-specific styles.
   ========================================================================== */

@import url('tokens.css');
@import url('components.css');

/* --------------------------------------------------------------------------
   3. Layout: Sidebar — works WITH admin-core.css (does NOT fight it)
   admin-core.css defines the sidebar width as 16rem and sets layout-main
   margin. We only override colors, fonts, and visual style here.
   -------------------------------------------------------------------------- */
.navbar-side {
    background: #0A2540 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15) !important;
    /* Keep display:flex always — admin-core sets display:none below 1280px */
    display: flex !important;
    flex-direction: column;
    height: 100vh !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 260px !important;
    z-index: 200;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html[dir="rtl"] .navbar-side {
    left: auto !important;
    right: 0 !important;
    border-right: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15) !important;
}

/* The layout-main must leave room for the fixed sidebar */
@media (min-width: 992px) {
    html[dir="ltr"] .layout-main {
        margin-left: 260px !important;
    }
    html[dir="rtl"] .layout-main {
        margin-right: 260px !important;
    }
    /* override admin-core's old 16rem (256px) offset */
    html[dir="ltr"] .navbar.navbar-side.navbar-fixed ~ .layout-main {
        margin-left: 260px !important;
    }
    html[dir="rtl"] .navbar.navbar-side.navbar-fixed ~ .layout-main {
        margin-right: 260px !important;
        margin-left: 0 !important;
    }
}

/* flex-fill scroll area inside sidebar */
.navbar-side .flex-fill.scroll-bar {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
}

.vertical-menu .app-sidebar {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Sidebar section headings */
.navbar-side .navbar-heading {
    padding: 18px 24px 6px 24px !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 700;
    margin: 0;
}

/* Sidebar nav links */
.navbar-side .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 10px 20px !important;
    margin: 2px 16px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.navbar-side .nav-link .nav-icon {
    font-size: 16px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    transition: var(--transition);
}
html[dir="rtl"] .navbar-side .nav-link .nav-icon { margin-left: 12px; }
html[dir="ltr"] .navbar-side .nav-link .nav-icon { margin-right: 12px; }
.navbar-side .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    transform: none !important;
}
.navbar-side .nav-link:hover .nav-icon { color: rgba(255, 255, 255, 0.9); }

/* Active link — premium light blue accent */
.navbar-side .nav-link.active-link-custom,
.navbar-side .nav-link.active {
    background: rgba(14, 165, 233, 0.12) !important;
    color: #0ea5e9 !important;
    font-weight: 700 !important;
    position: relative;
    box-shadow: none !important;
    transform: none !important;
}
.navbar-side .nav-link.active-link-custom::before,
.navbar-side .nav-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #0ea5e9;
    border-radius: 0 4px 4px 0;
}
html[dir="ltr"] .navbar-side .nav-link.active-link-custom::before,
html[dir="ltr"] .navbar-side .nav-link.active::before { left: -16px; }
html[dir="rtl"] .navbar-side .nav-link.active-link-custom::before,
html[dir="rtl"] .navbar-side .nav-link.active::before {
    right: -16px;
    border-radius: 4px 0 0 4px;
}
.navbar-side .nav-link.active-link-custom .nav-icon,
.navbar-side .nav-link.active .nav-icon { color: #0ea5e9 !important; }

/* Sidebar profile widget */
.sidebar-profile-card {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}
.sidebar-avatar-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 10px auto;
}
.sidebar-avatar-badge {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    background: var(--zisk-success);
    border: 2px solid #0A2540;
    border-radius: 50%;
    display: block;
}
html[dir="rtl"] .sidebar-avatar-badge {
    right: auto;
    left: 1px;
}
.sidebar-user-name {
    font-weight: 700;
    color: #ffffff !important;
    font-size: 13.5px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role {
    font-size: 11px;
    color: var(--zisk-primary) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sidebar support card */
.sidebar-support-card {
    background: linear-gradient(135deg, var(--zisk-primary), var(--zisk-primary-deep));
    border-radius: var(--radius-lg);
    margin: 16px 14px 12px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    box-shadow: 0 6px 18px var(--zisk-primary-glow);
    min-height: 90px;
    display: flex;
    align-items: center;
    transition: var(--transition);
    text-decoration: none;
}
.sidebar-support-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(14, 165, 233, 0.35);
    color: #ffffff;
    text-decoration: none;
}
.sidebar-support-content { width: 65%; z-index: 2; text-align: left; }
html[dir="rtl"] .sidebar-support-content { text-align: right; }
.sidebar-support-tag {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    background: rgba(255,255,255,0.22);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 6px;
}
.sidebar-support-title {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    margin: 0;
}
.sidebar-support-img {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 90px;
    height: auto;
    z-index: 1;
    pointer-events: none;
}
html[dir="rtl"] .sidebar-support-img { right: auto; left: -10px; }

/* --------------------------------------------------------------------------
   4. Layout: Header — sits inside layout-main, always full-width
   -------------------------------------------------------------------------- */
.app-header {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xs) !important;
    padding: 0 !important;
    width: 100% !important;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
/* Undo any admin-core padding-left that targets .navbar headers */
body.vertical-menu .app-header,
body.vertical-menu.menu-expanded .app-header {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.layout-main { overflow: hidden; }

.header-title-page h4 {
    display: flex;
    align-items: center;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-strong) !important;
    margin: 0;
}
.header-back-arrow {
    background: var(--bg-muted);
    color: var(--text-muted);
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    cursor: pointer;
    font-size: 12px;
    transition: var(--transition);
}
.header-back-arrow:hover { background: var(--zisk-primary); color: #fff; }
html[dir="rtl"] .header-back-arrow {
    margin-right: 0; margin-left: 10px;
    transform: rotate(180deg);
}

/* Header pill widgets */
.header-pill-widget {
    background: var(--bg-muted);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.header-pill-widget.total-order {
    background: var(--zisk-primary-soft);
    color: var(--zisk-primary-deep);
}
.header-pill-widget.total-order i {
    color: var(--zisk-primary);
    animation: zisk-heartbeat 1.5s infinite ease-in-out;
}
@keyframes zisk-heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Wallet / balance dropdown widget */
.wallet-balance-widget {
    background: linear-gradient(135deg, var(--zisk-primary), var(--zisk-primary-deep));
    border-radius: var(--radius-pill);
    padding: 8px 18px;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 14px var(--zisk-primary-glow);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}
.wallet-balance-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(14, 165, 233, 0.35);
    color: #ffffff;
}

/* Header dropdowns */
.app-header .dropdown-menu {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 6px;
}
.app-header .dropdown-item {
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-body);
    transition: var(--transition);
}
.app-header .dropdown-item:hover {
    background: var(--bg-muted);
    color: var(--text-strong);
}
.app-header .dropdown-item i { color: var(--text-muted); font-size: 16px; }

/* Theme toggle button */
.zisk-theme-toggle {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.zisk-theme-toggle:hover {
    border-color: var(--zisk-primary-border);
    color: var(--zisk-primary);
    background: var(--zisk-primary-soft);
}

/* --------------------------------------------------------------------------
   5. Main content area
   -------------------------------------------------------------------------- */
/* h-100p — fallback in case admin-core.css isn't loaded */
.h-100p { height: 100% !important; }

.app-content {
    padding: 28px 24px !important;
    background: var(--bg-app) !important;
    flex: 1 1 auto;
    overflow-y: auto;
    /* Override admin-core .main-content padding-top:70px */
    padding-top: 28px !important;
}

/* --------------------------------------------------------------------------
   10. Dashboard banners & grids (order page)
   -------------------------------------------------------------------------- */
.dashboard-top-banners {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 991px) { .dashboard-top-banners { grid-template-columns: 1fr; } }

.dashboard-banner {
    border-radius: var(--radius-lg);
    padding: 24px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
.dashboard-banner.welcome-banner {
    background: var(--zisk-grad-welcome);
    box-shadow: 0 6px 18px var(--zisk-primary-glow);
}
.dashboard-banner.welcome-banner h3 {
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 8px;
    color: #ffffff;
}
.dashboard-banner.welcome-banner p {
    font-size: 13px;
    opacity: 0.95;
    margin: 0;
    font-weight: 500;
}
.dashboard-banner.pro-tip-banner {
    background: var(--zisk-grad-protip);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    width: 20px; height: 20px;
    border-radius: 50%;
    font-size: 10px;
}
.pro-tip-link-icon {
    position: absolute;
    top: 15px; right: 15px;
    background: rgba(255,255,255,0.2);
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}
html[dir="rtl"] .pro-tip-link-icon { right: auto; left: 15px; transform: rotate(180deg); }
.pro-tip-img {
    height: 70px;
    margin-left: 15px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
html[dir="rtl"] .pro-tip-img { margin-left: 0; margin-right: 15px; }

/* Stats grid */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 1199px) { .dashboard-stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .dashboard-stats-grid { grid-template-columns: 1fr; } }

/* Promos grid */
.dashboard-promos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 767px) { .dashboard-promos-grid { grid-template-columns: 1fr; } }

.promo-card-custom {
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    font-weight: 700;
    font-size: 13.5px;
    transition: var(--transition);
}
.promo-card-custom:hover { transform: translateY(-2px); color: #ffffff; }
.promo-card-custom.reddit-promo   { background: linear-gradient(135deg, var(--zisk-primary), var(--zisk-primary-dark)); box-shadow: 0 4px 12px var(--zisk-primary-glow); }
.promo-card-custom.telegram-promo { background: linear-gradient(135deg, var(--zisk-sky), #0284c7); box-shadow: 0 4px 12px rgba(6, 182, 212, 0.14); }
.promo-card-left { display: flex; align-items: center; gap: 12px; }
.promo-badge-notif {
    background: var(--zisk-red);
    color: #ffffff;
    border-radius: 50%;
    width: 18px; height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
}

/* ── Hero v2 ── */
.dashboard-hero-v2 {
    background: var(--zisk-grad-welcome);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-bottom: 20px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
.dashboard-hero-v2::after {
    content: '';
    position: absolute;
    top: -60%; right: -20%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
    pointer-events: none;
}
html[dir="rtl"] .dashboard-hero-v2::after { right: auto; left: -20%; }
.hero-v2-greeting { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.hero-v2-subtitle { font-size: 13px; opacity: 0.9; margin: 0 0 16px; font-weight: 500; }
.hero-v2-stats-row { display: flex; gap: 28px; }
.hero-v2-stat-item .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; font-weight: 600; display: block; margin-bottom: 2px; }
.hero-v2-stat-item .value { font-size: 17px; font-weight: 800; }
@media (max-width: 767px) { .hero-v2-stats-row { flex-wrap: wrap; gap: 16px; } .hero-v2-stat-item { flex: 1 1 45%; } }

/* ── Recent Orders mini-table ── */
.dashboard-recent-orders {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.recent-orders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.recent-orders-header h4 { font-size: 14px; font-weight: 700; color: var(--text-strong); margin: 0; }
.recent-orders-header a { font-size: 12px; font-weight: 700; color: var(--zisk-primary-dark); text-decoration: none; }
.recent-orders-header a:hover { text-decoration: underline; }
.recent-orders-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.recent-orders-table th {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); font-weight: 700;
    padding: 8px 8px 8px 0; border-bottom: 1px solid var(--border-soft); text-align: left;
}
html[dir="rtl"] .recent-orders-table th { text-align: right; padding: 8px 0 8px 8px; }
.recent-orders-table td {
    font-size: 12.5px; color: var(--text-body);
    padding: 10px 8px 10px 0; border-bottom: 1px solid var(--border-soft); font-weight: 600;
}
html[dir="rtl"] .recent-orders-table td { padding: 10px 0 10px 8px; }
.recent-orders-table tr:last-child td { border-bottom: none; }
.recent-orders-table .status-badge {
    font-size: 10.5px; font-weight: 700;
    padding: 3px 10px; border-radius: var(--radius-pill); display: inline-block;
}
.status-badge.completed { background: var(--zisk-success-bg); color: var(--zisk-success-text); }
.status-badge.pending   { background: var(--zisk-warn-bg); color: var(--zisk-warn-text); }
.status-badge.processing { background: var(--tint-blue); color: var(--zisk-blue); }
.status-badge.canceled  { background: rgba(239, 68, 68, 0.10); color: var(--zisk-danger-text); }
.recent-orders-empty { text-align: center; padding: 20px 0; color: var(--text-muted); font-size: 13px; }

/* ── Quick Actions — ghost pill strip ── */
.quick-actions-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.quick-action-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-body);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}
.quick-action-ghost:hover {
    border-color: var(--zisk-primary-border);
    color: var(--zisk-primary-dark);
    background: var(--zisk-primary-soft);
    text-decoration: none;
}
.quick-action-ghost i { font-size: 14px; }
.quick-action-ghost kbd {
    background: transparent;
    border: 1px solid var(--text-faint);
    border-radius: 4px;
    padding: 0 5px;
    font-size: 11px;
    color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   11. Category pills (order page)
   -------------------------------------------------------------------------- */
.category-choose-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.category-choose-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
.category-choose-header h4 { font-size: 14.5px; font-weight: 700; color: var(--text-strong); margin: 0; }
.category-choose-arrow {
    background: var(--bg-muted); border: none; color: var(--text-muted);
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 10px; transition: var(--transition);
}
.category-choose-arrow:hover { background: var(--zisk-primary); color: #fff; }
.category-pills-container { display: flex; flex-wrap: wrap; gap: 10px; }

.category-pill-btn {
    border: none; background: var(--bg-muted); color: var(--text-body);
    border-radius: var(--radius-pill); padding: 8px 16px;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; transition: var(--transition);
}
.category-pill-btn:hover { background: var(--border); color: var(--text-strong); }
.category-pill-btn.active { background: var(--zisk-primary); color: #fff; }

.category-pill-btn[data-platform="everything"].active { background: var(--zisk-info); }
.category-pill-btn[data-platform="instagram"].active  { background: #e1306c; }
.category-pill-btn[data-platform="facebook"].active   { background: #1877f2; }
.category-pill-btn[data-platform="youtube"].active    { background: #ff0000; }
.category-pill-btn[data-platform="apple"].active      { background: #000000; }
.category-pill-btn[data-platform="spotify"].active    { background: #1db954; }
.category-pill-btn[data-platform="tiktok"].active     { background: #010101; }
.category-pill-btn[data-platform="telegram"].active   { background: var(--zisk-sky); }
.category-pill-btn[data-platform="twitter"].active    { background: #14171a; }
.category-pill-btn[data-platform="reddit"].active     { background: #ff4500; }
.category-pill-icon {
    width: 18px; height: 18px; border-radius: 50%;
    background: #ffffff; display: flex;
    align-items: center; justify-content: center; font-size: 10px;
}

/* --------------------------------------------------------------------------
   12. Order form layout
   -------------------------------------------------------------------------- */
.order-left-column {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.order-right-column { display: flex; flex-direction: column; gap: 20px; }

.custom-capsule-toggle {
    background: var(--bg-muted);
    border-radius: var(--radius-pill);
    padding: 4px;
    display: inline-flex;
    gap: 4px;
    margin-bottom: 20px;
}
.capsule-toggle-btn {
    border: none; background: transparent;
    padding: 8px 18px; border-radius: var(--radius-pill);
    font-size: 12.5px; font-weight: 700; color: var(--text-muted);
    cursor: pointer; transition: var(--transition);
}
.capsule-toggle-btn:hover { color: var(--text-strong); }
.capsule-toggle-btn.active {
    background: var(--zisk-primary-dark);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(4, 120, 87, 0.25);
}

.search-input-wrap { position: relative; margin-bottom: 20px; }
.search-input-wrap input { padding-left: 40px !important; }
html[dir="rtl"] .search-input-wrap input { padding-left: 16px !important; padding-right: 40px !important; }
.search-input-wrap i {
    position: absolute; left: 15px; top: 50%;
    transform: translateY(-50%); color: var(--text-faint);
}
html[dir="rtl"] .search-input-wrap i { left: auto; right: 15px; }

.total_charge {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #ffffff; background: var(--zisk-primary-dark);
    padding: 12px; border-radius: var(--radius-pill); font-weight: 700;
}

/* --------------------------------------------------------------------------
   13. Side widgets (order page)
   -------------------------------------------------------------------------- */
.mtp-color-system-card, .service-info-tabs-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm);
}
.mtp-color-system-title {
    font-size: 12px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.3px;
}
.mtp-color-system-row { display: flex; align-items: center; justify-content: space-between; }
.mtp-color-dots { display: flex; gap: 12px; font-size: 12.5px; font-weight: 600; color: var(--text-body); }
.mtp-dot { display: inline-flex; align-items: center; gap: 4px; }
.mtp-dot::before {
    content: ''; width: 8px; height: 8px;
    border-radius: 50%; display: inline-block;
}
.mtp-dot.basic::before  { background: #eab308; }
.mtp-dot.medium::before { background: #22c55e; }
.mtp-dot.elite::before  { background: var(--zisk-blue); }
.mtp-color-system-btn {
    border: 1px solid var(--zisk-primary-dark); background: transparent;
    color: var(--zisk-primary-dark); border-radius: var(--radius-sm);
    padding: 6px 12px; font-size: 11px; font-weight: 700;
    cursor: pointer; transition: var(--transition);
}
.mtp-color-system-btn:hover { background: var(--zisk-primary-soft); }

.service-info-tab-buttons {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    margin-bottom: 15px; background: var(--bg-muted);
    padding: 4px; border-radius: var(--radius-md);
}
.service-info-tab-btn {
    border: none; background: transparent; border-radius: var(--radius-sm);
    padding: 8px 4px; font-size: 11px; font-weight: 700; color: var(--text-muted);
    cursor: pointer; text-align: center; white-space: nowrap; transition: var(--transition);
}
.service-info-tab-btn:hover { color: var(--text-strong); }
.service-info-tab-btn.active { background: var(--zisk-primary-dark); color: #ffffff; }

.live-users-pill {
    background: #ffe4e6; color: #e11d48;
    border-radius: var(--radius-pill); padding: 4px 10px;
    font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 15px;
}
.live-users-pill .blink-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--zisk-red);
    animation: zisk-live-blink 1s infinite ease-in-out;
}
@keyframes zisk-live-blink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

.service-meta-info-list { display: flex; flex-direction: column; gap: 12px; }
.service-meta-item {
    display: flex; justify-content: space-between;
    font-size: 12.5px; font-weight: 600; color: var(--text-muted);
    border-bottom: 1px dashed var(--border-soft); padding-bottom: 8px;
}
.service-meta-item .value { color: var(--text-strong); font-weight: 700; }

/* --------------------------------------------------------------------------
   14. Bento grid (legacy)
   -------------------------------------------------------------------------- */
.zisk-bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px; margin-bottom: 30px;
}
.bento-card { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }

/* --------------------------------------------------------------------------
   16. Page loading overlay
   -------------------------------------------------------------------------- */
#page-overlay { background-color: var(--bg-app) !important; }
.lds-double-ring div { border-color: var(--zisk-primary) transparent var(--zisk-primary) transparent !important; }

/* --------------------------------------------------------------------------
   18. RTL utility overrides
   -------------------------------------------------------------------------- */
html[dir="rtl"] .ml-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .mr-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .pl-3 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pr-3 { padding-left: 1rem !important; padding-right: 0 !important; }
html[dir="rtl"] .text-right-rtl { text-align: right !important; }
html[dir="rtl"] .text-left-rtl  { text-align: left !important; }
html[dir="ltr"] .text-left-rtl  { text-align: left !important; }

html[dir="rtl"] .mr-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-5 { margin-left: 3rem !important; margin-right: 0 !important; }
html[dir="rtl"] .ml-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-5 { margin-right: 3rem !important; margin-left: 0 !important; }
html[dir="rtl"] .pr-1 { padding-left: 0.25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-2 { padding-left: 0.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-3 { padding-left: 1rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-4 { padding-left: 1.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-5 { padding-left: 3rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pl-1 { padding-right: 0.25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-2 { padding-right: 0.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-3 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-4 { padding-right: 1.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-5 { padding-right: 3rem !important; padding-left: 0 !important; }

html[dir="rtl"] .fe-arrow-right,
html[dir="rtl"] .fe-arrow-left,
html[dir="rtl"] .fe-arrow-up-right,
html[dir="rtl"] .fe-chevron-right,
html[dir="rtl"] .fe-chevron-left { transform: scaleX(-1); }

html[dir="rtl"] .header-back-arrow i,
html[dir="rtl"] .pro-tip-link-icon i { transform: none; }

/* --------------------------------------------------------------------------
   19. Mobile sidebar — slide-in on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .navbar-side {
        transform: translateX(-100%) !important;
    }
    html[dir="rtl"] .navbar-side {
        transform: translateX(100%) !important;
    }
    .navbar-side.navbar-side-open {
        transform: translateX(0) !important;
    }
    html[dir="ltr"] .layout-main {
        margin-left: 0 !important;
    }
    html[dir="rtl"] .layout-main {
        margin-right: 0 !important;
    }
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 199;
    }
    .sidebar-overlay.active {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   20. Chat view alignment (Persian RTL)
   -------------------------------------------------------------------------- */
html[dir="rtl"] .messages ul li.sent { align-self: flex-start !important; flex-direction: row !important; }
html[dir="rtl"] .messages ul li.replied { align-self: flex-end !important; flex-direction: row-reverse !important; }

/* ==========================================================================
   ZiskPanel Dashboard Redesign Styles
   ========================================================================== */

/* Spacing and Margins */
.m-b-24 { margin-bottom: 24px !important; }
@media (max-width: 767px) {
    .m-b-24-mobile { margin-bottom: 24px !important; }
}

/* 1. Welcome Banner */
.z-welcome-banner {
    background: var(--zisk-grad-welcome);
    border-radius: var(--radius-lg);
    padding: 32px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px var(--zisk-primary-glow);
    height: 180px;
}
.z-welcome-content {
    z-index: 2;
    max-width: 65%;
}
.z-welcome-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.z-welcome-username {
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.z-verified-badge {
    color: #ffffff;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
}
.z-welcome-subtitle {
    font-size: 13.5px;
    opacity: 0.9;
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
}
.z-welcome-image-wrap {
    position: absolute;
    right: 20px;
    bottom: -10px;
    z-index: 1;
    pointer-events: none;
}
html[dir="rtl"] .z-welcome-image-wrap {
    right: auto;
    left: 20px;
}
.z-welcome-duck {
    height: 170px;
    width: auto;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}

/* 2. User Info Card */
.z-user-info-card {
    background: linear-gradient(135deg, #0A2540, #1E293B);
    border-radius: var(--radius-lg);
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(10, 37, 64, 0.15);
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.z-user-info-body {
    padding: 16px 20px 8px 20px;
}
.z-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 600;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.z-info-label {
    opacity: 0.8;
}
.z-info-val {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}
.z-user-info-footer {
    background: rgba(0, 0, 0, 0.08);
    padding: 10px 20px;
    text-align: right;
}
html[dir="rtl"] .z-user-info-footer {
    text-align: left;
}
.z-btn-account {
    color: #ffffff !important;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}
.z-btn-account:hover {
    opacity: 0.9;
}
.z-btn-account i {
    font-size: 11px;
}

/* 3. Stat Boxes */
.z-stat-box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    position: relative;
    overflow: hidden;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition);
}
.z-stat-box:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--zisk-primary-border);
}
.z-stat-box-content {
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.z-stat-box-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.z-stat-box-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-strong);
    margin: 8px 0;
}
.z-stat-box-btn {
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    transition: var(--transition);
}
.btn-balance { background: var(--zisk-primary-soft); color: var(--zisk-primary) !important; }
.btn-balance:hover { background: var(--zisk-primary); color: #ffffff !important; }
.btn-spent { background: rgba(2, 132, 199, 0.08); color: #0284c7 !important; }
.btn-spent:hover { background: #0284c7; color: #ffffff !important; }
.btn-points { background: rgba(236, 72, 153, 0.08); color: var(--zisk-pink) !important; }
.btn-points:hover { background: var(--zisk-pink); color: #ffffff !important; }

/* Status marine card */
.z-stat-box.bg-status-green {
    background: linear-gradient(135deg, #0A2540, #0ea5e9);
    border: none;
    box-shadow: 0 10px 25px var(--zisk-primary-glow);
}
.text-white-opacity { color: rgba(255, 255, 255, 0.8) !important; }
.btn-status-white { background: rgba(255, 255, 255, 0.18); color: #ffffff !important; }
.btn-status-white:hover { background: #ffffff; color: #0A2540 !important; }

/* Decors inside cards */
.z-stat-box-decor {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    z-index: 1;
    opacity: 0.05;
}
html[dir="rtl"] .z-stat-box-decor {
    right: auto;
    left: -10px;
}
.bg-balance { background: var(--zisk-primary); }
.bg-spent { background: #0284c7; }
.bg-points { background: var(--zisk-pink); }
.bg-status-waves {
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
    width: 120px;
    height: 120px;
    opacity: 0.15;
}

/* 4. Bottom Cards (Last Orders, Referral) */
.z-card-modern {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.z-card-modern-header {
    border-bottom: 1px solid var(--border-soft);
    padding: 16px 20px;
}
.z-card-modern-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
}
.z-card-modern-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Last Orders list */
.z-orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.z-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 10px;
}
.z-order-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.z-order-item-left {
    display: flex;
    flex-direction: column;
    max-width: 65%;
}
.z-order-id {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
}
.z-order-service {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.z-order-item-right {
    display: flex;
    align-items: center;
}
.z-order-charge {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-strong);
}
.z-empty-orders {
    padding: 24px 0;
}
.z-empty-orders .z-empty-icon {
    font-size: 36px;
    color: var(--text-faint);
    margin-bottom: 10px;
    display: block;
}
.z-empty-text {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Referral Card */
.z-referral-link-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.z-ref-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}
.z-ref-input {
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    font-size: 12px !important;
    background-color: var(--bg-muted) !important;
    border: 1px solid var(--border-focus) !important;
    color: var(--text-strong) !important;
}
html[dir="rtl"] .z-ref-input {
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}
.z-ref-copy-btn {
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    font-size: 13px;
    padding: 8px 16px;
}
html[dir="rtl"] .z-ref-copy-btn {
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}
.z-ref-table {
    margin: 0;
    width: 100%;
}
.z-ref-table td {
    padding: 6px 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-body);
    border-top: none;
    border-bottom: 1px dashed var(--border-soft);
}
.z-ref-table tr:last-child td {
    border-bottom: none;
}
.badge-light-danger {
    background-color: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
}

/* 5. Promo Banners (Telegram, Pro Tip) */
.z-promo-banners {
    gap: 16px;
}
.z-promo-card {
    border-radius: var(--radius-lg);
    padding: 24px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    flex: 1;
    display: flex;
    text-decoration: none !important;
    transition: var(--transition);
}
.z-promo-card:hover {
    transform: translateY(-3px);
}
.bg-telegram {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.15);
}
.bg-tip {
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.15);
}
.z-promo-card-content {
    z-index: 2;
    max-width: 75%;
    text-align: left;
}
html[dir="rtl"] .z-promo-card-content {
    text-align: right;
}
.z-promo-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 4px;
    color: #ffffff;
}
.z-promo-title.text-dark { color: #1e293b; }
.z-promo-desc {
    font-size: 12.5px;
    opacity: 0.9;
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
}
.text-dark-opacity { color: rgba(30, 41, 59, 0.8) !important; }
.z-promo-icon-wrap {
    position: absolute;
    left: 20px;
    bottom: -15px;
    font-size: 80px;
    opacity: 0.15;
    z-index: 1;
}
html[dir="rtl"] .z-promo-icon-wrap {
    left: auto;
    right: 20px;
}
.z-promo-bell, .z-promo-arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.18);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
html[dir="rtl"] .z-promo-bell, html[dir="rtl"] .z-promo-arrow {
    right: auto;
    left: 16px;
}
.z-promo-arrow i {
    color: #1e293b;
}
.bg-tip-icon {
    color: #1e293b;
    opacity: 0.12;
}

/* responsive overrides for top layout columns */
@media (max-width: 991px) {
    .z-welcome-banner, .z-user-info-card {
        height: auto;
        min-height: 160px;
    }
    .z-welcome-duck {
        height: 120px;
    }
    .z-welcome-content {
        max-width: 60%;
    }
}

/* Sidebar Online Status indicator */
.sidebar-music-player {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-pill);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Missing utility classes (identified from view usage)
   ========================================================================== */

/* Page entry animation — used in statistics/index.php wrapper */
@keyframes z-page-enter-anim {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.z-page-enter {
    animation: z-page-enter-anim 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Referral footer — used in statistics/index.php */
.z-ref-footer {
    border-top: 1px solid var(--border-soft);
    padding-top: 12px;
    margin-top: 12px;
}

/* Mobile top-margin utility — used in order logs search bar */
@media (max-width: 767px) {
    .m-t-15-mobile { margin-top: 15px !important; }
}

/* RTL center alignment — used in services/child/index.php price & limit cols */
.text-center-rtl { text-align: center; }

/* ==========================================================================
   20. Statistics Dashboard — Chart & Sparkline Widget
   ========================================================================== */
.z-chart-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    margin-bottom: 24px;
}
.z-chart-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--zisk-primary-border);
}
.z-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.z-chart-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
}
.z-chart-period-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-muted);
    padding: 3px;
    border-radius: var(--radius-pill);
}
.z-chart-period-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition);
}
.z-chart-period-btn:hover { color: var(--text-strong); }
.z-chart-period-btn.active {
    background: var(--bg-surface);
    color: var(--zisk-primary);
    box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   21. Order Log — improved search bar + mobile spacing
   ========================================================================== */
.zisk-logs-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

/* ==========================================================================
   22. Profile page — API key section improvements
   ========================================================================== */
.api-key-copy-wrap .input-group-append .z-btn {
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    border: 1.5px solid var(--border-focus) !important;
    border-left: none !important;
    height: 100%;
}

/* ==========================================================================
   23. Transactions page
   ========================================================================== */
.z-tx-amount-positive { color: var(--zisk-success-text); font-weight: 700; }
.z-tx-amount-negative { color: var(--zisk-danger-text);  font-weight: 700; }

/* ==========================================================================
   24. Quick order shortcut pill — in dashboard
   ========================================================================== */
.z-quick-order-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-body);
    text-decoration: none;
    transition: var(--transition);
}
.z-quick-order-pill:hover {
    background: var(--zisk-primary-soft);
    border-color: var(--zisk-primary-border);
    color: var(--zisk-primary-dark);
    text-decoration: none;
    transform: translateY(-1px);
}
.z-quick-order-pill .pill-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* ==========================================================================
   25. Add Funds — payment gateway tab improvements
   ========================================================================== */
.payment-amount-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.preset-amount-btn {
    border: 1.5px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-body);
    border-radius: var(--radius-md);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.preset-amount-btn:hover,
.preset-amount-btn.active {
    border-color: var(--zisk-primary);
    background: var(--zisk-primary-soft);
    color: var(--zisk-primary-dark);
}

/* ==========================================================================
   26. Responsive fixes
   ========================================================================== */
@media (max-width: 575px) {
    .app-content { padding: 16px !important; }
    .z-chart-card { padding: 16px; }
    .z-stat-box { min-height: 120px; }
    .category-pills-container { gap: 6px; }
    .category-pill-btn { padding: 6px 12px; font-size: 11.5px; }
    .order-left-column { padding: 16px; }
    .z-card-body { padding: 16px; }
    .z-card-header { padding: 14px 16px; }
}
@media (max-width: 767px) {
    .header-wrap .header-title-page { display: none !important; }
    .custom-capsule-toggle { width: 100%; justify-content: center; }
    .wallet-balance-widget span { display: none; }
    .wallet-balance-widget { padding: 8px 12px; }
}

/* ==========================================================================
   27. Order Form — Quantity Range Bar & Improvements
   ========================================================================== */
#qty-range-bar { cursor: default; }
#qty-range-fill { pointer-events: none; }

/* Subtle link input icon offset handled inline; this ensures no overlap on autofill */
input[name="link"]::-webkit-autofill { padding-left: 38px !important; }

/* Order success alert — improved */
.order-success .alert {
    border-radius: var(--radius-md) !important;
    border-left: 4px solid var(--zisk-success) !important;
}

/* ==========================================================================
   28. Dripfeed / Subscriptions progress bar
   ========================================================================== */
.drip-progress-wrap {
    background: var(--bg-muted);
    border-radius: var(--radius-pill);
    height: 6px;
    overflow: hidden;
}
.drip-progress-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--zisk-primary);
    transition: width 0.4s ease;
}

/* ==========================================================================
   29. Transactions — row hover via CSS (replaces inline JS handlers)
   ========================================================================== */
.z-tx-row { transition: var(--transition); }
.z-tx-row:hover { background: var(--bg-hover) !important; }

/* ==========================================================================
   30. Category pills — collapse animation
   ========================================================================== */
.category-pills-container {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    overflow: hidden;
    max-height: 300px;
    opacity: 1;
}
.category-pills-container.collapsed {
    max-height: 0;
    opacity: 0;
}
.category-choose-arrow.rotated { transform: rotate(180deg); }

/* ==========================================================================
   31. Service info right panel — smooth tab transitions
   ========================================================================== */
#tab-pane-info, #tab-pane-read, #tab-pane-post {
    animation: z-page-enter-anim 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ==========================================================================
   32. Sidebar nav — active indicator RTL fix
   ========================================================================== */
html[dir="rtl"] .navbar-side .nav-link.active-link-custom::before,
html[dir="rtl"] .navbar-side .nav-link.active::before {
    left: auto;
    right: -16px;
    border-radius: 4px 0 0 4px;
}

/* ==========================================================================
   33. Global: focus-visible accessibility ring
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--zisk-primary) !important;
    outline-offset: 2px !important;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none !important;
}

/* ==========================================================================
   34. Empty state improvements
   ========================================================================== */
.z-empty-state {
    text-align: center;
    padding: 60px 20px;
}
.z-empty-state-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 28px;
    color: var(--text-faint);
}
.z-empty-state h4 {
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 8px;
    font-size: 16px;
}
.z-empty-state p {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 20px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}