* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary: #f4bd28;
            --dark: #222;
            --blue: #2868c7;
            --green: #218653;
            --danger: #dc3545;
            --border: #e3e8ee;
            --bg: #f6f8fb;
            --text: #263342;
        }

        body {
            background: #f5f6fa;
            font-family: Arial, sans-serif;
        }

        /* ================= SIDEBAR ================= */

        .sidebar {
            width: 270px;
            height: 100vh;
            background: #222;
            position: fixed;
            left: 0;
            top: 0;
            overflow-y: auto;
            transition: 0.3s;
            z-index: 1050;
        }

        /* Logo */

        .sidebar-logo {
            padding: 15px 20px;
            color: #fff;
            font-size: 22px;
            font-weight: bold;
            border-bottom: 1px solid #333;
        }

        .sidebar-logo img {
            height: 35px;
        }
        
        .fw-bold img {
            height: 35px;
        }
        .sidebar-logo span {
            color: #ffc107;
        }
        
        .fw-bold {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Menu */

        .sidebar-menu {
            padding: 5px 10px;
        }

        .menu-title {
            color: #777;
            font-size: 11px;
            text-transform: uppercase;
            padding: 15px 15px 8px;
            font-weight: bold;
            letter-spacing: 1px;
        }

        .sidebar-menu a {
            text-decoration: none;
        }

        .menu-link {
            display: flex;
            align-items: center;
            padding: 6px 15px;
            color: #bbb;
            border-radius: 8px;
            margin-bottom: 4px;
            transition: 0.3s;
            cursor: pointer;
        }

        .menu-link i:first-child {
            font-size: 12px;
            width: 30px;
        }

        .menu-link span {
            flex: 1;
        }

        .menu-link:hover,
        .menu-link.active {
            background: #333;
            color: #fff;
        }

        .menu-link.active {
            border-left: 3px solid #ffc107;
        }

        /* Arrow */

        .menu-arrow {
            font-size: 13px;
            transition: 0.3s;
        }

        /* Sub Menu */

        .submenu {
            padding-left: 45px;
            margin-bottom: 5px;
        }

        .submenu a {
            display: block;
            color: #999;
            padding: 5px 20px;
            font-size: 14px;
            border-radius: 5px;
            transition: 0.3s;
        }

        .submenu a:hover {
            color: #fff;
            background: #2d2d2d;
        }

        /* ================= MAIN CONTENT ================= */

        .main-content {
            margin-left: 270px;
            padding: 30px;
            transition: 0.3s;
        }

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

        .mobile-header {
            display: none;
            background: #222;
            color: white;
            padding: 15px;
            position: sticky;
            top: 0;
            z-index: 1040;
        }

        .mobile-header button {
            border: none;
            background: none;
            color: white;
            font-size: 24px;
        }
        
        
        /* =========================
           MAIN AREA
        ========================= */

        .main-wrapper {
            margin-left: 260px;
            min-height: 100vh;
        }

        .topbar {
            height: 68px;
            background: #fff;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 26px;
        }

        .menu-toggle {
            border: 0;
            background: transparent;
            font-size: 24px;
            color: #43505c;
        }

        .top-right {
            display: flex;
            align-items: center;
            gap: 25px;
        }

        .notification {
            position: relative;
            font-size: 21px;
        }

        .notification span {
            position: absolute;
            top: -7px;
            right: -8px;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background: #e44747;
            color: #fff;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .user-box {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: #edf0f4;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: #586574;
        }

        .user-name {
            font-size: 14px;
            font-weight: 600;
        }

        .partner-id {
            font-size: 12px;
            color: var(--muted);
        }

        .dashboard {
            padding: 20px 25px 30px;
        }


        /* =========================
           DASHBOARD HEADER
        ========================= */

        .welcome-text {
            color: #657180;
            font-size: 15px;
            margin-bottom: 2px;
        }

        .welcome-title {
            font-size: 26px;
            font-weight: 700;
            margin: 0;
        }

        .date-filter {
            background: #fff;
            border: 1px solid #dce2e8;
            border-radius: 7px;
            padding: 10px 15px;
            font-size: 13px;
            color: #475463;
        }


        /* =========================
           COMMON CARD
        ========================= */

        .panel-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 15px;
            height: 100%;
            box-shadow: 0 2px 7px rgba(0,0,0,.025);
        }

        .stat-card {
        padding: 19px;
        min-height: 100px;
    }

        .stat-icon {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            flex-shrink: 0;
        }

        .purple {
            background: #ebe7ff;
            color: #7352d6;
        }

        .green {
            background: #e0f4ea;
            color: #228655;
        }

        .blue {
            background: #e7effd;
            color: #2865bb;
        }

        .orange {
            background: #fff0d8;
            color: #e9941c;
        }

        .pink {
            background: #fce7f0;
            color: #d23877;
        }

        .stat-label {
            color: #53606d;
            font-size: 13px;
            margin-bottom: 4px;
        }

        .stat-value {
            font-size: 23px;
            font-weight: 700;
        }

        .stat-growth {
            color: #237c4d;
            font-size: 12px;
            margin-top: 14px;
        }

        .stat-warning {
            color: #c66e12;
        }


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

        .section-title {
            font-size: 15px;
            font-weight: 700;
            margin: 0;
        }

        .view-all {
            font-size: 12px;
            color: #2359a1;
            text-decoration: none;
        }

        .small-select {
            border: 1px solid #dce2e8;
            border-radius: 6px;
            padding: 7px 10px;
            font-size: 12px;
            background: #fff;
            color: #4b5663;
        }


        /* =========================
           SALES CHART
        ========================= */

        .chart-box {
            height: 350px;
            position: relative;
            padding: 20px 10px 0;
        }

        .chart-grid {
            position: absolute;
            left: 10px;
            right: 10px;
            top: 60px;
            bottom: 40px;
            background:
                repeating-linear-gradient(
                    to bottom,
                    transparent,
                    transparent 49px,
                    #edf0f4 50px
                );
        }

        .chart-svg {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 2;
        }

        .chart-legend {
            display: flex;
            gap: 25px;
            font-size: 12px;
            color: #627080;
            margin-bottom: 5px;
        }

        .dot {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }


        /* =========================
           TOP RESELLERS
        ========================= */

        .rank-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 13px 0;
            border-bottom: 1px solid #edf0f3;
        }

        .rank-row:last-child {
            border-bottom: 0;
        }

        .rank-number {
            width: 27px;
            height: 27px;
            border-radius: 50%;
            background: #f3f5f7;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            color: #586474;
        }

        .rank-1 {
            color: #f2aa13;
            font-size: 24px;
        }

        .rank-2 {
            color: #9ba7b4;
            font-size: 24px;
        }

        .rank-3 {
            color: #bd792f;
            font-size: 24px;
        }

        .reseller-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 19px;
        }

        .reseller-name {
            font-size: 13px;
            font-weight: 600;
        }

        .reseller-id {
            font-size: 11px;
            color: #788391;
        }

        .sales-number {
            font-size: 12px;
            text-align: right;
        }

        .sales-income {
            color: #218653;
            font-size: 12px;
            margin-top: 4px;
        }


        /* =========================
           RECENT SALES
        ========================= */

        .recent-sale {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 13px 0;
            border-bottom: 1px solid #edf0f3;
        }

        .sale-business-icon {
            width: 40px;
            height: 40px;
            background: #eef3fa;
            color: #3b70c8;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .business-name {
            font-size: 13px;
            font-weight: 600;
        }

        .reseller-small {
            font-size: 11px;
            color: #687483;
        }

        .sale-price {
            font-size: 12px;
            font-weight: 600;
            text-align: right;
        }

        .sale-date {
            font-size: 10px;
            color: #75808c;
        }

        .paid {
            font-size: 10px;
            color: #218653;
            background: #e5f4ea;
            padding: 2px 5px;
            border-radius: 3px;
        }


        /* =========================
           COMMISSION
        ========================= */

        .mini-card {
            border: 1px solid #e8ecf0;
            border-radius: 8px;
            padding: 14px;
            min-height: 140px;
        }

        .mini-label {
            font-size: 12px;
            color: #657180;
        }

        .mini-value {
            font-size: 21px;
            font-weight: 700;
            margin-top: 7px;
        }

        .growth-badge {
            display: inline-block;
            margin-top: 10px;
            padding: 4px 8px;
            font-size: 11px;
            color: #237c4d;
            background: #e1f2e8;
            border-radius: 3px;
        }


        /* =========================
           PAYOUT CHART
        ========================= */

        .donut {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background:
                conic-gradient(
                    #2767c5 0deg 270deg,
                    #f6a128 270deg 356deg,
                    #cbd2d9 356deg 360deg
                );
            position: relative;
        }

        .donut::after {
            content: "";
            position: absolute;
            width: 78px;
            height: 78px;
            background: #fff;
            border-radius: 50%;
            top: 31px;
            left: 31px;
        }

        .payout-item {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin-bottom: 16px;
        }


        /* =========================
           IMPORTANT UPDATE
        ========================= */

        .update-box {
            background: linear-gradient(90deg, #fff4d3, #fff9eb);
            border: 1px solid #f5dfaa;
            border-radius: 10px;
            padding: 22px;
            display: flex;
            align-items: center;
            gap: 22px;
        }

        .update-icon {
            font-size: 38px;
            color: #e9a01d;
        }

        .update-title {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .update-text {
            font-size: 12px;
            color: #5d6873;
            line-height: 1.7;
        }

        .training-btn {
            margin-top: 10px;
            background: #f4bd28;
            color: #3c331b;
            border: 0;
            border-radius: 6px;
            padding: 8px 18px;
            font-size: 12px;
            font-weight: 600;
        }


/*Login Page*/

.login-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px 15px;
        }

        .login-box {
            width: 100%;
            max-width: 480px;
        }

        /* Secure Login */
        .secure-login {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            background: #fff;
            color: #253858;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(0,0,0,0.04);
        }

        .secure-login i {
            color: #22a06b;
        }

        /* Heading */
        .login-title {
            font-size: 28px;
            font-weight: 700;
            color: #24324a;
            margin-top: 45px;
        }

        .login-subtitle {
            color: #6b7280;
            font-size: 15px;
            margin-top: 8px;
        }

        .title-line {
            width: 38px;
            height: 3px;
            background: #5b46d8;
            margin: 20px auto 35px;
            border-radius: 10px;
        }

        /* Input */
        .input-group-custom {
            position: relative;
            margin-bottom: 18px;
        }

        .input-group-custom .form-control {
            height: 58px;
            padding-left: 48px;
            padding-right: 48px;
            border: 1px solid #d9dee7;
            border-radius: 10px !important;
            font-size: 15px;
            color: #253858;
            box-shadow: none;
        }

        .input-group-custom .form-control:focus {
            border-color: #5946d8;
            box-shadow: 0 0 0 3px rgba(89, 70, 216, 0.08);
        }

        .input-icon {
            position: absolute;
            left: 17px;
            top: 50%;
            transform: translateY(-50%);
            color: #7b8798;
            z-index: 5;
        }

        .password-toggle {
            position: absolute;
            right: 17px;
            top: 50%;
            transform: translateY(-50%);
            color: #7b8798;
            cursor: pointer;
            z-index: 5;
        }

        /* Remember */
        .form-check-label {
            font-size: 13px;
            color: #5f6b7a;
        }

        .form-check-input:checked {
            background-color: #5b46d8;
            border-color: #5b46d8;
        }

        .forgot-password {
            font-size: 13px;
            color: #5543cc;
            text-decoration: none;
            font-weight: 500;
        }

        .forgot-password:hover {
            color: #3f2fb0;
        }

        /* Login Button */
        .login-btn {
            width: 100%;
            height: 58px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(90deg, #5c3fd5, #2f63d9);
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            margin-top: 22px;
            transition: 0.3s;
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(71, 68, 210, 0.25);
        }

        /* Divider */
        .divider {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 32px 0;
            color: #6b7280;
            font-size: 13px;
        }

        .divider::before,
        .divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #d9dee7;
        }

        /* Google Button */
        .google-btn {
            height: 58px;
            width: 100%;
            border: 1px solid #d9dee7;
            border-radius: 9px;
            background: #fff;
            font-size: 15px;
            font-weight: 500;
            color: #253858;
            transition: 0.3s;
        }

        .google-btn:hover {
            background: #f8f9fc;
            border-color: #c9ced8;
        }

        .google-icon {
            font-size: 20px;
            margin-right: 10px;
        }

        /* Signup */
        .signup-text {
            text-align: center;
            margin-top: 26px;
            font-size: 13px;
            color: #6b7280;
        }

        .signup-text a {
            color: #5543cc;
            font-weight: 600;
            text-decoration: none;
            margin-left: 5px;
        }

        /* Mobile */
        @media (max-width: 576px) {

            .login-box {
                max-width: 100%;
            }

            .login-title {
                font-size: 25px;
                margin-top: 35px;
            }

            .login-page {
                padding: 25px 25px;
            }
        }        
        
        /* Forms and Tables */
        .components-wrapper {
            max-width: 1300px;
            margin: auto;
            padding: 30px;
        }

        .page-title {
            font-size: 28px;
            font-weight: 700;
        }

        .page-description {
            color: #778292;
        }

        /* COMPONENT CARD */

        .component-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 22px;
            margin-bottom: 25px;
            box-shadow: 0 3px 10px rgba(0,0,0,.02);
        }

        .component-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .component-description {
            font-size: 13px;
            color: #7b8794;
            margin-bottom: 20px;
        }


        /* BUTTONS */

        .btn-brand {
            background: var(--primary);
            color: #222;
            border: none;
            font-weight: 600;
            padding: 10px 18px;
        }

        .btn-brand:hover {
            background: #e6aa12;
            color: #222;
        }

        .btn-soft-primary {
            background: #e9f0ff;
            color: var(--blue);
            border: none;
        }

        .btn-soft-success {
            background: #e5f5eb;
            color: var(--green);
            border: none;
        }


        /* FORMS */

        .form-label {
            font-size: 13px;
            font-weight: 600;
            color: #45515e;
        }

        .form-control,
        .form-select {
            min-height: 45px;
            border: 1px solid #dce3ea;
            font-size: 14px;
        }

        .form-control:focus,
        .form-select:focus {
            box-shadow: none;
            border-color: var(--primary);
        }

        .input-group-text {
            background: #f8fafc;
            border-color: #dce3ea;
        }


        /* SEARCH */

        .search-box {
            position: relative;
        }

        .search-box i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #8793a0;
        }

        .search-box input {
            padding-left: 40px;
        }


        /* TABLE */

        .table-responsive {
            border: 1px solid var(--border);
            border-radius: 10px;
        }

        .custom-table {
            margin: 0;
        }

        .custom-table thead {
            background: #f8fafc;
        }

        .custom-table th {
            font-size: 12px;
            color: #667382;
            font-weight: 600;
            padding: 15px;
            white-space: nowrap;
        }

        .custom-table td {
            padding: 15px;
            font-size: 13px;
            vertical-align: middle;
            white-space: nowrap;
        }

        .custom-table tbody tr:hover {
            background: #fafbfd;
        }


        /* AVATAR */

        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #e8effd;
            color: var(--blue);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
        }


        /* STATUS BADGES */

        .status {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
        }

        .status-active {
            color: #218653;
            background: #e3f5eb;
        }

        .status-pending {
            color: #c98200;
            background: #fff3d6;
        }

        .status-inactive {
            color: #687484;
            background: #eef1f4;
        }

        .status-rejected {
            color: #d83446;
            background: #fde8eb;
        }


        /* ACTION BUTTON */

        .action-btn {
            width: 34px;
            height: 34px;
            border: 1px solid #e2e7ec;
            background: #fff;
            border-radius: 6px;
            color: #5b6876;
        }

        .action-btn:hover {
            background: #f6f8fa;
        }


        /* FILTER BAR */

        .filter-bar {
            background: #fff;
            padding: 15px;
            border: 1px solid var(--border);
            border-radius: 10px;
        }


        /* PAGINATION */

        .pagination .page-link {
            color: #4b5866;
            border-color: #e1e6eb;
            font-size: 13px;
        }

        .pagination .active .page-link {
            background: var(--primary);
            border-color: var(--primary);
            color: #222;
        }


        /* EMPTY STATE */

        .empty-state {
            text-align: center;
            padding: 50px 20px;
        }

        .empty-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: #f1f4f7;
            margin: auto auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: #8b97a3;
        }
        
        
        /* Profile Page */
        .profile-card {
            background: #fff;
            border-radius: 14px;
            padding: 25px;
            border: 1px solid #eee;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
            margin-bottom: 20px;
        }

        .card-heading {
            display: flex;
            align-items: center;
            gap: 15px;
            padding-bottom: 18px;
            border-bottom: 1px solid #eee;
            margin-bottom: 25px;
        }

        .heading-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #6d5dfc, #4f46c8);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
        }

        .card-heading h4 {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
        }

        .form-label {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .form-control,
        .form-select {
            height: 46px;
            border-radius: 8px;
            border: 1px solid #d9dde5;
            font-size: 15px;
        }

        textarea.form-control {
            height: auto;
            min-height: 70px;
        }

        .form-control:focus,
        .form-select:focus {
            box-shadow: none;
            border-color: #6956d9;
        }

        .btn-update {
            background: linear-gradient(135deg, #6d5dfc, #4f46c8);
            color: #fff;
            border: none;
            padding: 12px 28px;
            border-radius: 8px;
            font-weight: 600;
        }

        .btn-update:hover {
            color: white;
            opacity: 0.9;
        }

        .btn-cancel {
            background: #fff;
            border: 1px solid #d9dde5;
            padding: 11px 28px;
            border-radius: 8px;
        }

        /* Profile Photo */
        .profile-image-wrapper {
            position: relative;
            width: 170px;
            height: 170px;
            margin: 15px auto;
        }

        .profile-image {
            width: 170px;
            height: 170px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid #f2f3f7;
        }

        .camera-btn {
            position: absolute;
            right: 0;
            bottom: 10px;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: none;
            background: #6554d9;
            color: white;
            font-size: 18px;
        }

        .upload-btn {
            border: 1px solid #6956d9;
            color: #6956d9;
            background: white;
            padding: 9px 25px;
            border-radius: 7px;
            font-weight: 600;
        }

        .remove-btn {
            border: none;
            background: transparent;
            color: #e74c3c;
            margin-top: 10px;
        }

        /* Account Information */
        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            font-size: 14px;
        }

        .info-label {
            font-weight: 600;
            color: #555;
        }

        .info-value {
            color: #333;
            font-weight: 500;
        }

        .status-active {
            background: #e5f6eb;
            color: #27a05c;
            padding: 5px 13px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
        }

        .update-note {
            margin-top: 20px;
            padding: 18px;
            background: #f5f4ff;
            border: 1px solid #ddd9ff;
            border-radius: 10px;
            display: flex;
            gap: 15px;
            color: #4c4c65;
            font-size: 14px;
            line-height: 1.6;
        }

        .update-note i {
            color: #6656d9;
            font-size: 20px;
            margin-top: 3px;
        }

        @media (max-width: 768px) {
            .main-content {
                padding: 20px 15px;
            }

            .page-title {
                font-size: 24px;
            }
        }
    

        /* Page Header */

        .page-title{
            font-size:32px;
            font-weight:700;
            margin-bottom:5px;
        }

        .page-subtitle{
            color:var(--muted);
            font-size:15px;
        }


        /* Referral Steps */

        .referral-steps{
            background:#fff;
            border:1px solid var(--border);
            border-radius:18px;
            padding:35px 25px;
            margin-top:25px;
        }

        .step-item{
            position:relative;
            text-align:center;
        }

        .step-icon{
            width:82px;
            height:82px;
            margin:auto;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            background:#edf4ff;
            color:var(--primary);
            font-size:32px;
            position:relative;
        }

        .step-number{
            position:absolute;
            right:-2px;
            top:0;
            width:26px;
            height:26px;
            border-radius:50%;
            background:var(--primary);
            color:#fff;
            font-size:13px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-weight:600;
        }

        .step-title{
            font-size:17px;
            font-weight:700;
            margin-top:15px;
        }

        .step-text{
            color:var(--muted);
            font-size:14px;
            line-height:1.7;
            max-width:230px;
            margin:7px auto 0;
        }

        .step-line{
            position:absolute;
            width:180px;
            border-top:2px dashed #ccd5e2;
            top:40px;
            right:-90px;
        }


        /* Statistics Cards */

        .stats-card{
            background:#fff;
            border:1px solid var(--border);
            border-radius:16px;
            padding:24px 20px;
            height:100%;
            display:flex;
            align-items:center;
            gap:17px;
            transition:.3s;
        }

        .stats-card:hover{
            transform:translateY(-4px);
            box-shadow:0 10px 30px rgba(0,0,0,.06);
        }

        .stats-icon{
            width:65px;
            height:65px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:27px;
            flex-shrink:0;
        }

        .icon-blue{
            background:#e8f1ff;
            color:#2768c9;
        }

        .icon-green{
            background:#e6f8ef;
            color:#1f9d62;
        }

        .icon-purple{
            background:#f2eaff;
            color:#873fd0;
        }

        .icon-orange{
            background:#fff1df;
            color:#e88916;
        }

        .stats-label{
            color:var(--muted);
            font-size:14px;
        }

        .stats-number{
            font-size:27px;
            font-weight:700;
            margin-top:2px;
        }

        .stats-small{
            color:#8a94a6;
            font-size:12px;
        }


        /* Main Referral Cards */

        .referral-card{
            background:#fff;
            border:1px solid var(--border);
            border-radius:16px;
            padding:28px;
        }

        .card-heading{
            font-size:21px;
            font-weight:700;
            margin-bottom:5px;
        }

        .card-description{
            color:var(--muted);
            font-size:14px;
            margin-bottom:22px;
        }


        /* Invite Input */

        .invite-box{
            position:relative;
        }

        .invite-input{
            height:56px;
            border-radius:30px;
            padding-left:20px;
            padding-right:155px;
            border:1px solid #d9dfe8;
            box-shadow:none !important;
        }

        .send-btn{
            position:absolute;
            right:5px;
            top:5px;
            height:46px;
            padding:0 25px;
            border-radius:25px;
            background:var(--primary);
            border:none;
            color:#fff;
            font-weight:600;
        }

        .send-btn:hover{
            background:var(--primary-dark);
        }


        /* Referral Link */

        .link-wrapper{
            display:flex;
            align-items:center;
            gap:25px;
        }

        .referral-link-box{
            flex:1;
            height:60px;
            border-radius:30px;
            background:#f2f6fd;
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:0 25px;
            color:#586577;
            font-size:14px;
            overflow:hidden;
        }

        .referral-url{
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }

        .copy-btn{
            border:none;
            background:none;
            color:var(--primary);
            font-weight:600;
            white-space:nowrap;
        }

        .social-icons{
            display:flex;
            gap:12px;
        }

        .social-btn{
            width:58px;
            height:58px;
            border-radius:50%;
            border:none;
            background:#f2f6fd;
            color:var(--primary);
            font-size:21px;
            transition:.3s;
        }

        .social-btn:hover{
            background:var(--primary);
            color:#fff;
        }


        /* Recent Referral Table */

        .table-card{
            background:#fff;
            border:1px solid var(--border);
            border-radius:16px;
            padding:25px;
        }

        .status-success{
            background:#e4f7ed;
            color:#218753;
            padding:6px 12px;
            border-radius:6px;
            font-size:12px;
            font-weight:600;
        }

        .status-pending{
            background:#fff4df;
            color:#d88700;
            padding:6px 12px;
            border-radius:6px;
            font-size:12px;
            font-weight:600;
        }


        /* Responsive */

        @media(max-width:991px){

            .step-line{
                display:none;
            }

            .step-item{
                margin-bottom:35px;
            }

            .step-item:last-child{
                margin-bottom:0;
            }

        }

        @media(max-width:768px){

            .referral-section{
                padding:20px 15px;
            }

            .page-title{
                font-size:27px;
            }

            .referral-steps{
                padding:30px 15px;
            }

            .link-wrapper{
                flex-direction:column;
                align-items:stretch;
            }

            .social-icons{
                justify-content:center;
            }

            .referral-link-box{
                width:100%;
            }

        }

        @media(max-width:576px){

            .referral-card,
            .table-card{
                padding:20px 15px;
            }

            .invite-input{
                padding-right:20px;
                margin-bottom:10px;
            }

            .send-btn{
                position:relative;
                top:auto;
                right:auto;
                width:100%;
                margin-top:5px;
            }

            .invite-box{
                display:flex;
                flex-direction:column;
            }

            .referral-link-box{
                height:auto;
                min-height:60px;
                padding:15px;
                gap:10px;
            }

            .stats-card{
                padding:18px;
            }

        }
        
        
        
        .support-section{
    padding:35px;
    color:var(--text);
}


/* PAGE HEADER */

.support-page-heading h1{
    font-size:32px;
    font-weight:700;
    margin-bottom:7px;
}

.support-page-heading p{
    color:var(--muted);
    font-size:15px;
    margin:0;
}


/* SUPPORT BANNER */

.support-banner{
    margin-top:25px;
    padding:30px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
}

.support-banner-content{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:25px;
}

.support-banner-icon{
    width:65px;
    height:65px;
    border-radius:50%;
    background:#eaf2ff;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}

.support-banner h2{
    font-size:22px;
    font-weight:700;
    margin-bottom:5px;
}

.support-banner p{
    color:var(--muted);
    margin:0;
    font-size:14px;
}


/* SEARCH */

.support-search{
    position:relative;
}

.support-search i{
    position:absolute;
    top:50%;
    left:20px;
    transform:translateY(-50%);
    color:#8b96a8;
}

.support-search input{
    width:100%;
    height:58px;
    border:1px solid #dce2eb;
    border-radius:30px;
    padding:0 20px 0 52px;
    outline:none;
    font-size:14px;
}

.support-search input:focus{
    border-color:var(--primary);
}


/* SUPPORT OPTION CARD */

.support-option-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:28px;
    height:100%;
    transition:.3s;
}

.support-option-card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.support-card-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    margin-bottom:18px;
}

.ticket-icon{
    background:#e9f1ff;
    color:#2563c9;
}

.history-icon{
    background:#f0ebff;
    color:#7544cf;
}

.contact-icon{
    background:#e8f8ef;
    color:#23915c;
}

.support-option-card h4{
    font-size:18px;
    font-weight:700;
}

.support-option-card p{
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
    min-height:70px;
}


/* BUTTONS */

.support-btn{
    border-radius:8px;
    padding:10px 17px;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.support-btn i{
    margin-left:7px;
}

.primary-btn{
    background:var(--primary);
    border:1px solid var(--primary);
    color:#fff;
}

.primary-btn:hover{
    background:var(--primary-dark);
}

.outline-btn{
    background:#fff;
    border:1px solid #dbe2ec;
    color:var(--primary);
}

.outline-btn:hover{
    background:var(--primary);
    color:#fff;
}


/* MAIN BOX */

.support-box{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:28px;
    height:100%;
}

.support-box-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
}

.support-box-header h3{
    font-size:20px;
    font-weight:700;
    margin-bottom:5px;
}

.support-box-header p{
    font-size:14px;
    color:var(--muted);
    margin:0;
}

.view-all-btn{
    border:1px solid #d9e1ec;
    background:#f8faff;
    color:var(--primary);
    border-radius:7px;
    padding:8px 14px;
    font-size:13px;
    font-weight:600;
}


/* FAQ */

.faq-item{
    border-bottom:1px solid #edf0f4;
}

.faq-question{
    width:100%;
    padding:18px 0;
    border:none;
    background:transparent;
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:left;
    color:var(--text);
    font-size:14px;
    font-weight:600;
}

.faq-question i{
    color:var(--primary);
}

.faq-answer{
    padding:0 0 18px;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}


/* CONTACT BOX */

.contact-heading{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
}

.contact-main-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    background:#eaf2ff;
    color:var(--primary);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:25px;
}

.contact-heading h3{
    font-size:20px;
    font-weight:700;
    margin-bottom:4px;
}

.contact-heading p{
    font-size:13px;
    color:var(--muted);
    margin:0;
}

.contact-info-item{
    display:flex;
    gap:14px;
    margin-bottom:22px;
    align-items:center;
}

.contact-icon{
    width:45px;
    height:45px;
    border-radius:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.contact-icon.email{
    background:#edf3ff;
    color:#2563c9;
}

.contact-icon.phone{
    background:#e9f8ef;
    color:#26945d;
}

.contact-icon.time{
    background:#fff4e4;
    color:#e28a13;
}

.contact-info-item span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:3px;
}

.contact-info-item strong{
    font-size:14px;
    font-weight:600;
}

.live-chat-btn{
    width:100%;
    height:50px;
    border:none;
    border-radius:8px;
    background:var(--primary);
    color:#fff;
    font-weight:600;
    font-size:14px;
}

.live-chat-btn i{
    margin-right:8px;
}


/* TABLE */

.ticket-status-box{
    height:auto;
}

.support-table{
    margin-bottom:0;
}

.support-table thead th{
    background:#f7f9fc;
    color:#657185;
    font-size:12px;
    font-weight:600;
    border-bottom:none;
    padding:14px;
}

.support-table tbody td{
    padding:16px 14px;
    font-size:13px;
    color:#445166;
}

.priority,
.ticket-status{
    display:inline-block;
    padding:5px 10px;
    border-radius:5px;
    font-size:11px;
    font-weight:600;
}

.priority.low{
    background:#e8f8ef;
    color:#24945d;
}

.priority.medium{
    background:#fff3df;
    color:#d98610;
}

.priority.high{
    background:#ffe8e8;
    color:#d94c4c;
}

.ticket-status.open{
    background:#e9f1ff;
    color:#2563c9;
}

.ticket-status.progress{
    background:#fff3df;
    color:#d98610;
}

.ticket-status.resolved{
    background:#e7f8ee;
    color:#218653;
}

.ticket-action-btn{
    border:1px solid #dbe2ec;
    background:#fff;
    color:var(--primary);
    padding:6px 13px;
    border-radius:6px;
    font-size:12px;
}


/* RESPONSIVE */

@media(max-width:991px){

    .support-section{
        padding:25px 20px;
    }

}


@media(max-width:767px){

    .support-section{
        padding:20px 15px;
    }

    .support-page-heading h1{
        font-size:27px;
    }

    .support-banner{
        padding:22px 18px;
    }

    .support-banner-content{
        align-items:flex-start;
    }

    .support-box-header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

}


@media(max-width:576px){

    .support-option-card,
    .support-box{
        padding:20px 16px;
    }

    .support-banner-content{
        flex-direction:column;
    }

    .support-banner-icon{
        width:55px;
        height:55px;
    }

    .support-banner h2{
        font-size:20px;
    }

    .contact-info-item strong{
        font-size:13px;
    }

}