:root{--primary:#0ea5e9;--dark:#0f172a;--muted:#64748b;--bg:#f8fafc;}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;}a{color:inherit;text-decoration:none}
.container{max-width:980px;margin:0 auto;padding:16px}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}
.topbar{background:#fff;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:10}
.brand{font-weight:800;font-size:1.25rem}
nav a{margin-left:12px;color:var(--muted)}nav a.btn{color:#fff;background:var(--primary);padding:8px 12px;border-radius:10px}
.btn-outline{background:transparent !important;color:var(--primary)!important;border:1px solid var(--primary);}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
.card {

    flex-direction: row;
    gap: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 10px;
    align-items: flex-start;
    flex-wrap: wrap; /* allow wrapping on small screens */
}

.card img.thumbnail {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}
.card .content {
    flex: 1;
    min-width: 200px; /* ensures content doesn't shrink too much */
}

.card .p{padding:12px}
.price{font-weight:700;color:var(--dark);font-size:1.2em}
.badge{display:inline-block;background:#e2e8f0;padding:2px 8px;border-radius:999px;font-size:.8rem;color:#334155}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px}
label{font-size:.9rem;color:#475569;margin-bottom:6px;display:block}
.form{max-width:520px;margin:20px auto}
.row{display:grid;grid-template-columns:1fr;gap:12px}
@media (max-width: 768px) {
    .card {
        flex-direction: column;
        gap: 10px;
    }

    .card img.thumbnail {
        width: 100%;
        height: auto;
    }

    .buyers th, .buyers td {
        font-size: 13px;
        padding: 4px;
    }

    .btn-group {
        flex-direction: column;
        gap: 5px;
    }
}
button,.btn.primary{
            display:inline-block;
            background:#28a745;
            color:white;
            font-size:18px;
            font-weight:bold;
            padding:12px 24px;
            border:none;
            border-radius:8px;
            cursor:pointer;
            margin-top:5px;
            margin-bottom:5px;
}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #e2e8f0;padding:10px;text-align:left}
.alert{padding:10px 12px;border-radius:10px;margin:12px 0}
.alert.success{background:#dcfce7;color:#166534}.alert.error{background:#fee2e2;color:#991b1b}
.footer{margin-top:0px;padding:20px;color:#64748b}
.badge.delivery {
  display: inline-block;
  background: linear-gradient(135deg, #ff9800, #ff5722);
  color: #fff;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.buyers {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
    display: block; /* allow horizontal scroll */
}

.buyers th, .buyers td {
    border: 1px solid #ccc;
    padding: 6px;
    text-align: left;
    font-size: 14px;
    min-width: 80px; /* ensures columns don’t collapse */
}
.collapse-content {
    display: none;
    margin-top: 10px;
}
.meal-header {
    cursor: pointer;
}
.btn.success {
  background: #28a745;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.btn.danger {
  background: #dc3545;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}