*{box-sizing:border-box}
body.dark{background:#0f0f10;color:#e8e8e8;font-family:Inter,Arial,Helvetica,sans-serif;margin:0;padding:0}
.container{max-width:1100px;margin:24px auto;padding:20px;background:#0b0b0b;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,0.6)}
header h1{margin:0 0 10px;font-size:28px;color:#fff}
.form label{display:block;margin:10px 0;font-size:14px;color:#ddd}
input,select,button{font-size:14px}
/* Force dark input backgrounds absolutely */
input[type="text"],input[type="email"],input[type="number"],input[type="date"],select,input[type="file"],input[type="tel"]{
  width:100%;padding:10px;border-radius:6px;border:1px solid #222;background:#0b0b0b;color:#e8e8e8 !important;
  box-shadow:none !important;
}
/* Remove white when focused */
input:focus,select:focus,textarea:focus{outline:none;box-shadow:none;border-color:#444;background:#0b0b0b;color:#e8e8e8 !important;}
/* Autofill */
input:-webkit-autofill, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #0b0b0b inset !important;
  -webkit-text-fill-color: #e8e8e8 !important;
  background-color:#0b0b0b !important;
}
/* Some browsers put a white background for autofill; override more */
input:-internal-autofill-selected, input:-internal-autofill-selected:focus { background-color:#0b0b0b !important; -webkit-text-fill-color:#e8e8e8 !important; }
button{background:#e7c04b;color:#000;border:0;padding:8px 12px;border-radius:8px;cursor:pointer}
.amountBox{background:#121212;padding:12px;border-radius:8px;margin:12px 0;border:1px solid #222}
.amountBox p{margin:0;font-weight:600;color:#fff}
.amountRow{margin-top:8px;margin-bottom:8px}
/* Admin grid */
.adminGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:12px}
.resCard{background:#121212;padding:14px;border-radius:10px;border:1px solid #222;display:flex;flex-direction:column;justify-content:space-between;min-height:150px}
.resHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.resHeader .status{padding:6px 8px;border-radius:20px;text-transform:capitalize;font-weight:700;font-size:12px}
.status.pending{background:#e7c04b;color:#000}
.status.accepted{background:#28a745;color:#000}
.status.rejected{background:#dc3545;color:#fff}
.resBody p{margin:6px 0;color:#ddd;font-size:14px}
.resActions{display:flex;gap:8px;align-items:center;margin-top:8px}
.btn{background:#222;color:#e7c04b;border:1px solid #333;padding:6px 10px;border-radius:8px;cursor:pointer}
.btn.small{padding:6px 8px;margin-left:8px}
.btn.view{background:#0b0b0b;border:1px dashed #333}
.btn.accept{background:#e7c04b;color:#000;border:none}
.btn.reject{background:#222;color:#fff;border:1px solid #900;background:#900}
.muted{color:#777;font-size:13px}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.7);z-index:1000;padding:20px}
.modalContent{position:relative;max-width:920px;width:100%;background:#0b0b0b;padding:12px;border-radius:8px}
.modalContent img{width:100%;height:auto;border-radius:6px}
.modalClose{position:absolute;right:10px;top:6px;background:#222;color:#fff;border:none;padding:8px 10px;border-radius:6px;cursor:pointer}

/* responsive */
@media(max-width:800px){
  .container{margin:10px;padding:12px}
  header h1{font-size:20px}
  .adminGrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
/* Page spacing and input alignment improvements */
body.dark { padding-top: 20px; } /* top padding for the page */
.container { padding-top: 28px; }

/* Make labels and inputs aligned on mobile: label above input with consistent width */
.form label { display:block; margin:10px 0; }
.form label > span { display:block; margin-bottom:6px; color:#ddd; }
.form label input, .form label select { width:100%; box-sizing:border-box; }
/* Make input height consistent */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, input[type="date"]{
  height:44px;
  line-height:1.1;
  padding:10px 12px;
}

/* Prominent pay box */
.payBanner { background: linear-gradient(90deg,#2b2b2b,#111); border:1px solid #2a2a2a; padding:12px 14px; border-radius:10px; margin:14px 0; display:flex; justify-content:space-between; align-items:center; }
.payBanner strong { color:#e7c04b; font-size:18px; }

/* Admin header improvements */
header.adminHeader { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.adminActions { display:flex; gap:8px; align-items:center; }
.adminActions .btn { padding:8px 10px; border-radius:8px; }
@media(max-width:600px){
  .adminActions { flex-wrap:wrap; }
  .payBanner { flex-direction:column; align-items:flex-start; gap:8px; }
}

/* Ensure admin header actions don't overlap and admin grid uses cards on desktop */
.adminHeader { align-items:flex-start; }
.adminActions { display:flex; gap:8px; flex-wrap:wrap; }
.adminActions .btn { white-space:nowrap; }
.adminGrid { margin-top:16px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.resCard { min-width:300px; max-width:100%; }
.container { max-width:1200px; }
/* Ensure payBanner style is prominent */
.payBanner { box-shadow: 0 6px 18px rgba(0,0,0,0.6); }

/* Ensure admin cards have clear separation and responsive full-width */
.adminGrid { gap:18px; }
.resCard { margin-bottom: 12px; padding:16px; box-shadow: 0 8px 18px rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.02); }
.resBody p{margin:8px 0}
.resActions{margin-top:12px}
/* Make grid layout adapt to screen and avoid overlap */
@media(min-width:1200px){
  .adminGrid{grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));}
}
@media(max-width:1199px){
  .adminGrid{grid-template-columns: 1fr;}
}

/* Strong separation for each reservation card */
.resCard { background: linear-gradient(180deg,#111,#0f0f10); border:1px solid rgba(255,255,255,0.03); padding:18px; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.6); }
.resCard + .resCard { margin-top: 14px; }
.resHeader { margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.resBody p { margin:6px 0; color:#e6e6e6; }
.resActions { margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }