body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: #f5f7fb;
}

/* HEADER */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background: #1e293b;
color: white;
}

header h1 {
margin: 0;
}

header a {
color: white;
margin-left: 15px;
text-decoration: none;
font-weight: 500;
}

/* SEARCH */

/* GRID */
#pgList {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 30px;
}

/* CARD */
.pg-card {
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
transition: 0.3s;
}

.pg-card:hover {
transform: translateY(-5px);
}

.pg-card h3 {
margin: 0;
}

.pg-card button {
margin-top: 10px;
padding: 10px;
border: none;
background: #3b82f6;
color: white;
border-radius: 8px;
cursor: pointer;
}

/* DASHBOARD */
.dashboard {
padding: 30px;
}

.card {
background: white;
padding: 20px;
margin-bottom: 20px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* BUTTONS */
button {
padding: 8px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
}

.accept {
background: #22c55e;
color: white;
}

.reject {
background: #ef4444;
color: white;
}

/* LOGIN / REGISTER */
.form-box {
width: 300px;
margin: 80px auto;
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

input, select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 8px;
border: 1px solid #ccc;
}

/*--------------------*/

/* HEADER */
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #111827;
color: white;
padding: 15px 30px;
}

.user-info {
display: flex;
align-items: center;
gap: 10px;
}

.user-info span {
font-size: 14px;
background: #374151;
padding: 6px 10px;
border-radius: 6px;
}

.user-info button {
background: #ef4444;
color: white;
}

/* HEADER CARD */
.header-card {
display: flex;
justify-content: space-between;
align-items: center;
}

/* BOOKING CARD */
.booking-card {
padding: 15px;
border-radius: 10px;
background: #f9fafb;
margin-bottom: 15px;
transition: 0.2s;
}

.booking-card:hover {
transform: scale(1.02);
}

/* STATUS COLORS */
.status {
font-weight: bold;
}

.status.confirmed {
color: green;
}

.status.pending {
color: orange;
}

.status.rejected {
color: red;
}

/*-----------*/

/* AUTH PAGE */
.auth-body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #3b82f6, #9333ea);
}

/* CONTAINER */
.auth-container {
display: flex;
justify-content: center;
align-items: center;
}

/* BOX */
.auth-box {
width: 320px;
padding: 30px;
border-radius: 15px;
backdrop-filter: blur(15px);
background: rgba(255,255,255,0.15);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
color: white;
text-align: center;
}

/* INPUT */
.auth-box input,
.auth-box select {
width: 100%;
padding: 10px;
margin-top: 10px;
border-radius: 8px;
border: none;
outline: none;
}

/* BUTTON */
.auth-box button {
width: 100%;
margin-top: 15px;
padding: 10px;
border-radius: 8px;
border: none;
background: #22c55e;
color: white;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}

.auth-box button:hover {
background: #16a34a;
}

/* LINK */
.link {
margin-top: 10px;
font-size: 14px;
}

.link a {
color: #fff;
text-decoration: underline;
}

/* DETAILS PAGE */
.details-container {
padding: 20px;
max-width: 900px;
margin: auto;
}

/* IMAGE SLIDER */
.image-slider {
display: flex;
overflow-x: auto;
gap: 10px;
margin-bottom: 20px;
}

.image-slider img {
height: 200px;
border-radius: 10px;
}

/* CARD spacing */
.card {
margin-bottom: 20px;
}

/* FORM IMPROVEMENT */
.auth-box form {
display: flex;
flex-direction: column;
}

.auth-box input {
margin-top: 10px;
}

/* BUTTON HOVER */
.auth-box button {
margin-top: 15px;
transition: 0.3s;
}

.auth-box button:hover {
transform: scale(1.05);
}

/* TOAST */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background: #111827;
color: white;
padding: 12px 18px;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
opacity: 0;
transform: translateY(20px);
transition: 0.3s;
z-index: 999;
}

.toast.show {
opacity: 1;
transform: translateY(0);
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background: #0f172a;
color: white;
}

.logo {
font-weight: bold;
cursor: pointer;
}

.nav-links button {
margin-left: 10px;
padding: 8px 12px;
border: none;
background: #6366f1;
color: white;
border-radius: 6px;
cursor: pointer;
}

.nav-links button:hover {
background: #4f46e5;
}

/* 🔥 CREDIT CARD */
.credit-box {
margin: 20px;
}

.credit-card {
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: white;
padding: 20px;
border-radius: 12px;
text-align: center;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.credit-card h1 {
font-size: 40px;
margin: 10px 0;
}

.credit-card p {
font-size: 14px;
opacity: 0.9;
}

/* 🔥 HEADER */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 25px;
background: #1e293b;
color: white;
}

.logo {
font-size: 20px;
font-weight: bold;
cursor: pointer;
}

.nav-right button {
background: #6366f1;
border: none;
padding: 8px 14px;
color: white;
border-radius: 6px;
cursor: pointer;
}

/* 🔥 FORM */
.form-container {
display: flex;
justify-content: center;
margin-top: 40px;
}

.form-card {
background: white;
padding: 30px;
width: 420px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.form-card h2 {
text-align: center;
margin-bottom: 20px;
}

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

.input-group input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 6px;
outline: none;
}

.input-group label {
position: absolute;
top: -8px;
left: 10px;
background: white;
font-size: 12px;
padding: 0 5px;
color: #555;
}

/* 🔥 GRID */
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

/* 🔥 FILE */
.file-box {
margin: 10px 0;
}

/* 🔥 BUTTON */
.primary-btn {
width: 100%;
padding: 12px;
background: #6366f1;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
}

.primary-btn:hover {
background: #4f46e5;
}

.recharge-btn {
margin-top: 15px;
padding: 10px 20px;
background: #22c55e;
border: none;
color: white;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
}

.recharge-btn:hover {
background: #16a34a;
}

/* 🔥 FIXED HEADER FULL */
.fixed-header {
position: fixed;
top: 0;
width: 100%;
height: fit-content;
background: white;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#searchInput {
display: block;
margin: 25px auto; /* 🔥 center + niche */
width: 40%;
padding: 12px;
border-radius: 10px;
border: none;
outline: none;
font-size: 16px;
border: 1px solid #605e5e;

}

/* 🔍 SEARCH BOX
.search-box {
padding: 10px 20px;
border-top: 1px solid #eee;
border: 1px solid #605e5e;
height: 15px;
}

*/

.search-box input {
width: 100%;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid #605e5e;
outline: none;
}

/* 🔥 SCROLL FIX */
#pgList {
margin-top: 165px; /* adjust if needed */
padding: 20px;
}

/* 🔥 PROFILE UI */
.profile-container {
display: flex;
justify-content: center;
margin-top: 100px;
}

.profile-card {
background: white;
padding: 30px;
width: 320px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
text-align: center;
}

.profile-card h2 {
margin-bottom: 20px;
}

.profile-card p {
margin: 10px 0;
}

.profile-card button {
margin-top: 20px;
padding: 10px 20px;
border: none;
background: #6366f1;
color: white;
border-radius: 8px;
cursor: pointer;
}

/* 🔥 TRANSACTION CARD */
.txn-card {
background: #f8fafc;
padding: 12px;
margin: 10px 0;
border-radius: 8px;
border-left: 4px solid #22c55e;
}

/* 🔥 PROFILE FIXED CENTER */
.profile-container {
display: flex;
justify-content: center;
align-items: flex-start;
margin-top: 80px;
}

/* 🔥 PROFILE CARD */
.profile-card {
width: 350px;
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
text-align: center;
}

/* 🔥 TRANSACTION SCROLL AREA */
.txn-wrapper {
margin-top: 15px;
height: 220px;
overflow: hidden;
}

/* 🔥 SCROLL ENABLE */
.txn-scroll {
height: 100%;
overflow-y: auto;
padding-right: 5px;
}

/* 🔥 SCROLLBAR NICE */
.txn-scroll::-webkit-scrollbar {
width: 5px;
}
.txn-scroll::-webkit-scrollbar-thumb {
background: #6366f1;
border-radius: 10px;
}

/* 🔥 TRANSACTION CARD CLEAN */
.txn-card {
background: #f9fafb;
padding: 12px;
margin: 8px 0;
border-radius: 10px;
border-left: 4px solid #22c55e;
text-align: left;
transition: 0.2s;
}

.txn-card:hover {
transform: scale(1.02);
}

/* TEXT STYLE */
.txn-card p {
margin: 3px 0;
font-size: 14px;
}