/*  */

        /* --- Stats Cards --- */
        .stat-card {
            border: none; border-radius: 15px; background: white; padding: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: transform 0.2s;
        }
        .stat-card:hover { transform: translateY(-5px); }
        .stat-icon {
            width: 50px; height: 50px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
        }

        /* --- Order Card Styling --- */
        .order-card {
            border: none; border-radius: 12px; background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.03); margin-bottom: 25px;
            transition: all 0.3s ease; position: relative; overflow: hidden;
        }
        .order-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

        /* Left Border Colors based on Status */
        .status-border-pending { border-left: 5px solid #ffc107; }
        .status-border-completed { border-left: 5px solid #198754; }
        .status-border-rejected { border-left: 5px solid #dc3545; }
        .status-border-processing { border-left: 5px solid #0dcaf0; }

        .service-icon-box {
            background-color: #eff6ff; color: var(--primary-color);
            width: 50px; height: 50px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
        }

        /* --- Filter Tabs --- */
        .nav-pills .nav-link {
            color: black; font-weight: 500; border-radius: 20px; padding: 8px 20px;
            margin-right: 10px; background: white; border: 1px solid #eee; transition: all 0.3s;
        }
        .nav-pills .nav-link.active {
            background-color: var(--primary-color);
            color: white !important;
            box-shadow: 0 4px 10px rgba(30, 64, 175, 0.3); border-color: var(--primary-color);
        }
        .nav-pills .nav-link:hover:not(.active) { background-color: #e9ecef; }

        /* --- Footer --- */
        .footer-custom {
            background-color: #111827; color: #9ca3af; padding: 40px 0 20px; margin-top: auto;
        }
        .footer-link { color: #9ca3af; text-decoration: none; display: block; margin-bottom: 10px; transition: 0.2s; }
        .footer-link:hover { color: #fff; transform: translateX(5px); }
        .social-icon {
            width: 36px; height: 36px; background: rgba(255,255,255,0.1);
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 50%; color: #fff; margin-right: 10px; transition: 0.3s;
        }
        .social-icon:hover { background: var(--primary-color); }

        /* --- Timeline Modal --- */
        .timeline { border-left: 2px solid #e5e7eb; padding-left: 20px; margin-left: 5px; }
        .timeline-item { position: relative; margin-bottom: 30px; }
        .timeline-item::before {
            content: ''; position: absolute; left: -27px; top: 5px;
            width: 12px; height: 12px; background: #fff; border: 3px solid var(--primary-color); border-radius: 50%;
        }