/* ---------- General Styles ---------- */
body {
    font-family: 'Roboto', sans-serif;
    background: #f8f9fa;
    color: #343a40;
    line-height: 1.6;
}

a {
    color: #007bff;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}

/* ---------- Cards ---------- */
.card, .bg-light, .dashboard-card, .tracking-box, .product-item {
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    background: #fff;
}

/* ---------- Buttons ---------- */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    border-radius: 50px;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-2px);
}

.btn-dark {
    background-color: #343a40;
    border-color: #343a40;
    border-radius: 50px;
}
.btn-dark:hover {
    background-color: #23272b;
    border-color: #23272b;
    transform: translateY(-2px);
}

/* ---------- Inputs ---------- */
.form-control {
    border-radius: 10px;
    box-shadow: none;
    transition: 0.3s ease;
}
.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.3);
}

/* ---------- Tables ---------- */
.table {
    border-radius: 10px;
    overflow: hidden;
}
.table thead {
    background-color: #343a40;
    color: #fff;
}
.table tbody tr:hover {
    background-color: rgba(0,123,255,0.05);
}
.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    color: #fff;
    font-size: 0.85rem;
}
.status-completed { background-color: #28a745; }
.status-pending { background-color: #ffc107; color: #212529; }
.status-cancelled { background-color: #dc3545; }

/* ---------- Product Grid ---------- */
.product-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.product-img img {
    border-radius: 10px;
}
.product-action button,
.product-action a {
    border-radius: 50%;
    margin: 2px;
    transition: all 0.3s ease;
}
.product-action button:hover,
.product-action a:hover {
    background-color: #007bff;
    color: #fff;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    background: #f1f3f5;
    border-radius: 50px;
    padding: 10px 20px;
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: 10px;
}

/* ---------- Tracking Box ---------- */
.tracking-box {
    max-width: 600px;
    margin: 80px auto;
    padding: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

/* ---------- Cart Summary ---------- */
.bg-light.p-30 {
    padding: 30px !important;
}

/* ---------- Responsive ---------- */
@media(max-width: 768px){
    .product-item {
        margin-bottom: 20px;
    }
    .breadcrumb {
        padding: 8px 15px;
    }
}