:root{
  --bg: #0b0b0d;
  --card: #0f1720;
  --muted: #9aa7bf;
  --bs-body-color: #e9eef8;        /* main readable body text */
  --bs-secondary-color: #9aa7bf;   /* muted text */
  --bs-heading-color: #f8fafc;     /* headings */
}
html,body{height:100%;}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(48, 192, 245,.10), transparent 55%),
              radial-gradient(900px 700px at 90% 25%, rgba(13,110,253,.10), transparent 50%),
              var(--bg);
  color:#e9eef8;
}
.card{
  background: rgba(15,23,32,.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  border-radius: 18px;
  

}
.badge-soft{
  background: linear-gradient(
    135deg,
    rgba(48, 192, 245, 0.18),
    rgba(0, 50, 108, 0.18)
  );
  border: 1px solid rgba(48, 192, 245, 0.35);
  color: #f8fafc;

  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.3px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 18px rgba(0,0,0,0.35);
}

a{color:#00326c;}
a:hover{color:#30c0f5;}
.btn-primary{border-radius: 12px;}
.btn-warning{
  --bs-btn-bg: #00326c;
  --bs-btn-border-color: #00326c;
  --bs-btn-hover-bg: #30c0f5;
  --bs-btn-hover-border-color: #30c0f5;
  --bs-btn-active-bg: #00244d;
  --bs-btn-active-border-color: #00244d;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #0b0b0d;

  border-radius: 12px;
  font-weight: 700;
}

.form-control, .form-select{
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color:#e9eef8;
  border: 1px solid rgba(148,163,184,.25);
}
.form-control:focus, .form-select:focus{
  box-shadow: none;
  border-color: rgba(0, 50, 108,.55);
}
.form-check-input{
  background-color: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.25);
}
hr{border-color: rgba(148,163,184,.18);}
.hero{
  padding: 56px 0 24px;
}
.kpi{
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
}
.table{
  --bs-table-bg: transparent;
  --bs-table-color: #e9eef8;
}
.table td, .table th{
  border-color: rgba(148,163,184,.18);
}

.text-warning{
  color: #30c0f5 !important;   
  font-weight: 700;
}

/* Fix dropdown readability on dark theme */
.form-select,
.form-control {
  background-color: #0f1720;
  color: #e9eef8;
}

/* Dropdown menu options (important for Windows) */
.form-select option {
  background-color: #0f1720;
  color: #e9eef8;
}

/* Selected / hovered option */
.form-select option:checked,
.form-select option:hover {
  background-color: #00326c;
  color: #ffffff;
}

/* ===============================
   Proper Finish Detailing – Theme
   =============================== */

/* Headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6  {
  color: #f8fafc;
}

/* Body text */
body {
  color: #e9eef8;
}

/* Muted / secondary text */
.text-secondary,
.small,
.muted,
.text-muted {
  color: #9aa7bf !important;
}

/* Accent colour (links, highlights, prices) */
a,
.text-accent,
.text-warning {
  color: #30c0f5 !important;
}

/* Accent hover */
a:hover {
  color: #7dd3fc;
}

/* Optional: accent underline for links */
a {
  text-decoration-color: rgba(48, 192, 245, 0.6);
}

/* Optional: heading contrast boost */
h1, h2 {
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}


/* ===============================
   Package card readability fix
   =============================== */

/* Package title */
.card h2,
.card h3,
.card .card-title {
  color: #f8fafc; /* bright heading */
  font-weight: 700;
}

/* Package description */
.card p {
  color: #e9eef8; /* body text */
}

/* Estimated time / meta text */
.card .text-secondary,
.card .small {
  color: #9aa7bf !important;
}

/* Price highlight */
.card .price,
.card .text-warning {
  color: #30c0f5 !important;
  font-weight: 800;
}

/* Optional: subtle inner glow for contrast */
.card {
  box-shadow:
    0 14px 40px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.form-control,
.form-select {
  background-color: #f8fafc;
  color: #000000;
}

.form-control::placeholder {
  color: #6b7280;
}

/* Force typed text to be black (Chrome / Edge fix) */
.form-control,
.form-select {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* While focused / typing */
.form-control:focus,
.form-select:focus {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Autofill (Chrome) */
input:-webkit-autofill,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #000000 !important;
}