/* Sidebar */
.sidebar {
width: 240px;
height: 100vh;
background: linear-gradient(to bottom, #ffcc33, #ff6600);
padding: 30px 20px;
position: fixed;
left: 0;
top: 0;
color: #000;
}
.sidebar h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.sidebar a {
display: block;
font-size: 18px;
padding: 10px 0;
color: #000;
text-decoration: none;
font-weight: 600;
}
.sidebar a.active,
.sidebar a:hover {
opacity: .7;
}
/* Main Content */
.main {
margin-left: 260px;
padding: 30px;
}
.header h1 {
font-size: 28px;
margin-bottom: 20px;
}
/* Cards */
.cards {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.card {
width: 250px;
padding: 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* ---------------------- */
/* MOBILE RESPONSIVE FIX */
/* ---------------------- */
@media (max-width: 768px) {
/* SIDEBAR */
.sidebar {
width: 100%;
height: auto;
position: relative;
padding: 15px 10px;
text-align: center;
}
.sidebar h2 {
font-size: 20px;
margin-bottom: 10px;
}
.sidebar a {
font-size: 16px;
padding: 8px 0;
display: block;
}
/* MAIN CONTENT */
.main {
margin-left: 0;
margin-top: 20px !important;
padding: 15px;
width: 100%;
}
/* CARDS */
.cards {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.card {
width: 100%;
margin-bottom: 20px;
}
/* WELCOME TEXT FIX */
.header h1 {
font-size: 22px;
text-align: center;
}
}
prepare("SELECT * FROM buyer_orders WHERE buyer_id = ? ORDER BY id DESC");
$stmt->execute([$buyer_id]);
$orders = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
My Orders
My Orders
No orders yet.
Package:
Price:
₦
( $ )
Status:
Created:
Requirements:
...
View Details
.page-title {
font-size: 28px;
margin-bottom: 20px;
font-weight: bold;
}
.orders-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.order-card {
background: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 3px 10px rgba(0,0,0,0.12);
border-left: 6px solid #f39c12;
}
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.status {
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: bold;
color: white;
}
/* Status Colors */
.status.pending { background: #f39c12; }
.status.active { background: #3498db; }
.status.completed { background: #27ae60; }
.status.cancelled { background: #e74c3c; }
.date {
margin-top: 10px;
font-size: 13px;
opacity: 0.7;
}
/* Empty state */
.empty-state {
background: #fff2d9;
padding: 20px;
border-radius: 12px;
text-align: center;
font-size: 18px;
}
.features-box {
margin-top: 10px;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fafafa;
}
.features-box ul {
margin: 0;
padding-left: 20px;
}
.features-box li {
margin-bottom: 6px;
list-style: none;
position: relative;
padding-left: 20px;
}
.features-box li::before {
content: "✔";
color: #28a745;
font-weight: bold;
position: absolute;
left: 0;
top: 0;
}
.order-card {
max-width: 600px;
}
/* ---------- MOBILE RESPONSIVE FIX ---------- */
@media screen and (max-width: 768px) {
.sidebar {
width: 100%;
height: auto;
padding: 15px 0;
position: relative;
background: linear-gradient(to bottom, #ffcc33, #ff9933);
text-align: center;
}
.sidebar h2 {
font-size: 20px;
margin-bottom: 10px;
}
.sidebar a {
display: inline-block;
margin: 8px 12px;
font-size: 16px;
}
.main {
margin-left: 0;
padding: 20px;
width: 100%;
}
.order-card, .profile-card {
width: 100%;
margin: 0 auto;
padding: 20px;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.08);
}
}
/* Styling for profile content */
.profile-card p {
font-size: 16px;
margin-bottom: 12px;
line-height: 1.5;
}
/* CLEANER MOBILE NAV BAR */
@media screen and (max-width: 768px) {
.sidebar {
width: 100%;
height: auto;
padding: 10px 0;
text-align: center;
}
.sidebar a {
font-size: 14px;
margin: 5px 8px;
display: inline-block;
}
.sidebar h2 {
margin-bottom: 8px;
font-size: 18px;
}
/* Reduce extra space below */
.main {
margin-top: 10px;
}
}
/* MOBILE CARD FIX */
@media screen and (max-width: 768px) {
.stats-card, .order-card {
width: 90%;
margin: 10px auto;
border-radius: 12px;
}
.main {
padding: 10px;
}
h1, h2, h3, p {
padding-left: 10px;
}
}
/* PROFILE PAGE */
.profile-card {
background: #fff;
padding: 20px 25px;
border-radius: 10px;
max-width: 450px;
box-shadow: 0 0 10px rgba(0,0,0,0.08);
}
.profile-card p {
font-size: 15px;
margin: 8px 0;
}
.profile-avatar {
text-align: center;
margin-bottom: 20px;
}
.profile-avatar img {
width: 120px;
height: 120px;
border-radius: 50%;
}
.edit-btn {
display: inline-block;
background: #007bff;
color: #fff;
padding: 10px 18px;
border-radius: 6px;
text-decoration: none;
margin-top: 15px;
}
.edit-btn:hover {
background: #005ec2;
}
/* Fix profile spacing on mobile */
@media (max-width: 768px) {
.main {
padding: 20px;
}
}
.profile-wrapper {
display: flex;
align-items: center;
gap: 25px;
}
.profile-img {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 50%;
border: 3px solid #ddd;
}
.initial-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
background: #f4a600;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
color: white;
font-weight: bold;
}
.profile-card {
display: flex;
align-items: center;
gap: 25px;
}
.profile-avatar {
min-width: 150px;
}
.dashboard-card {
padding: 20px;
border-radius: 15px;
background: white;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
margin-bottom: 20px;
}
.dashboard-card h2 {
font-size: 20px;
margin-bottom: 8px;
}
.dashboard-card p {
font-size: 22px;
font-weight: bold;
}
.profile-card {
display: flex;
align-items: center;
gap: 25px;
}
.profile-avatar {
min-width: 150px;
}
.profile-info p {
margin: 5px 0;
}
.sidebar {
width: 250px;
background: #f7c948; /* TJDIGITALAGENCY yellow */
height: 100vh;
padding: 25px 20px;
position: fixed;
top: 0;
left: 0;
}
.sidebar h2 {
font-size: 20px;
margin-bottom: 30px;
font-weight: bold;
color: #000;
}
.sidebar a {
display: block;
font-size: 16px;
padding: 12px 5px;
margin-bottom: 10px;
color: #000;
text-decoration: none;
transition: 0.3s;
}
.sidebar a:hover,
.sidebar a.active {
background: #fff;
border-radius: 6px;
}
/* ---------- NEW ORDER PAGE FIX (Fiverr Style) ---------- */
.page-container {
width: 100%;
max-width: 700px !important;
margin: 0 auto !important;
padding: 30px 20px !important;
}
/* Reduce spacing on form fields */
.page-container select,
.page-container textarea {
max-width: 700px;
width: 100%;
margin: 8px auto;
display: block;
}
/* Center the entire package area */
#packageArea {
max-width: 700px !important;
margin: 20px auto !important;
}
/* Tabs Row */
.pkg-tabs {
max-width: 700px !important;
margin: 20px auto !important;
}
/* Package box */
.pkg-box {
max-width: 700px !important;
margin: 20px auto !important;
border-radius: 10px;
padding: 20px 25px;
}
/* Make tabs align properly */
.pkg-tab {
flex: 1;
text-align: center;
padding: 12px 0;
cursor: pointer;
font-weight: 600;
font-size: 16px;
color: #666;
}
.pkg-tab.active {
color: #000;
border-bottom: 3px solid #000;
}
/* Make page background softer (optional) */
body {
background: #fafafa !important;
}
/* Make the New Order form area smaller and centered */
.page-container {
margin-left: 240px;
padding: 30px;
max-width: 600px; /* control width */
margin-right: auto;
margin-left: auto;
}
/* Make selects and textarea compact */
.page-container select,
.page-container textarea {
width: 100%;
max-width: 600px;
}
/* Adjust the title spacing */
.page-title {
margin-bottom: 10px;
}
/* Reduce spacing between form elements */
.page-container label {
margin-top: 10px;
font-weight: 600;
}
/* Reduce long space above the package tabs */
#packageArea {
margin-top: 10px;
}
/* MOBILE FIX FOR SIDEBAR */
@media (max-width: 768px) {
/* Reduce sidebar width */
.sidebar {
width: 80px !important;
padding: 10px;
}
/* Hide text inside sidebar (only show icons if you have them) */
.sidebar a,
.sidebar .menu-item {
font-size: 0px !important; /* hide text */
padding: 12px 0 !important;
text-align: center;
}
/* Optional: reduce dashboard title */
.sidebar h2 {
font-size: 0px !important;
}
/* Make main content full screen */
.page-container {
margin-left: 90px !important; /* match new sidebar width */
padding: 20px;
width: auto;
max-width: none;
}
}
/* EVEN SMALLER SCREENS */
@media (max-width: 500px) {
.page-container {
margin-left: 0 !important;
padding: 15px;
}
.sidebar {
position: absolute;
z-index: 999;
}
}
/* GLOBAL FORM WRAPPER — controls width of all forms */
.form-box,
.page-form,
.auth-form {
max-width: 420px; /* perfect width */
margin: 0 auto; /* center on page */
width: 100%;
}
/* Make input fields also shrink */
.form-box input,
.form-box select,
.form-box textarea,
.page-form select,
.page-form textarea,
.auth-form input {
width: 100% !important;
max-width: 420px !important;
}
/* --- MOBILE SIDEBAR FIX --- */
@media (max-width: 768px) {
.sidebar {
width: 75% !important; /* reduce width */
max-width: 280px !important; /* limit max size */
padding: 25px 20px !important; /* better spacing */
}
.sidebar h2 {
font-size: 22px !important;
margin-bottom: 25px;
}
.sidebar a {
font-size: 18px !important;
margin: 12px 0 !important;
}
}
/* LIMIT FORM WIDTH */
.page-container {
max-width: 500px;
margin: 0 auto;
}
/* SMALL, CLEAN INPUTS LIKE FIVERR */
.page-container select,
.page-container textarea,
.page-container input {
width: 100%;
max-width: 100%;
padding: 12px;
font-size: 15px;
border-radius: 6px;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* SIDEBAR FIX */
.sidebar {
width: 260px !important;
max-width: 260px !important;
background: #f4c430;
height: 100vh;
position: fixed;
left: 0;
top: 0;
overflow-y: auto;
z-index: 9999;
}
/* PAGE SHIFT WHEN SIDEBAR IS PRESENT */
.page-container {
margin-left: 260px !important;
}
@media (max-width: 768px) {
.sidebar {
width: 230px !important;
max-width: 230px !important;
transform: translateX(-230px);
transition: 0.3s ease;
}
.sidebar.active {
transform: translateX(0);
}
.page-container {
margin-left: 0 !important;
}
}