/* Premium add-on styles for Contact page
   Drop-in file: css/premium-contact.css
   Works with Bootstrap 5 + your existing style.css
*/

:root{
  --prem-ink:#0b2a4a;
  --prem-ink-2:#123b67;
  --prem-muted:#6b7280;
  --prem-border:#e5e7eb;
  --prem-card:#ffffff;
  --prem-bg:#f6f8fc;
  --prem-shadow: 0 12px 30px rgba(2,6,23,.08);
}

/* Page background + spacing rhythm */
.section-contact{
  background: linear-gradient(180deg, #ffffff 0%, var(--prem-bg) 100%);
}

.section-head .section-title{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--prem-ink);
  margin-bottom: .35rem;
}
.section-head .section-subtitle{
  color: var(--prem-muted);
  max-width: 780px;
  margin: 0 auto;
}

/* Elevated card style */
.card-elevated{
  border: 1px solid var(--prem-border) !important;
  border-radius: 18px;
  box-shadow: var(--prem-shadow);
  background: var(--prem-card);
}

.card-title-sm{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--prem-ink);
  margin: 0;
}

/* Small stack utility */
.stack-16 > * + *{ margin-top: 16px; }

/* Info cards */
.info-card{
  display:flex;
  gap:12px;
  padding: 14px 14px;
  border: 1px solid var(--prem-border);
  border-radius: 14px;
  background: #fbfcff;
}
.info-icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(11,42,74,.08);
  color: var(--prem-ink);
  flex: 0 0 40px;
}
.info-label{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--prem-muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.info-text{
  color: #0f172a;
  font-size: 14px;
  line-height: 1.55;
}
.info-text a{
  color: var(--prem-ink-2);
  font-weight: 600;
  text-decoration: none;
}
.info-text a:hover{ text-decoration: underline; }

/* Premium form */
.form-premium .form-label{
  font-size: 13px;
  color: #475569;
  font-weight: 600;
  margin-bottom: 6px;
}
.form-premium .form-control{
  border-radius: 14px;
  border: 1px solid var(--prem-border);
  padding: 12px 12px;
  box-shadow: none;
}
.form-premium .form-control:focus{
  border-color: rgba(11,42,74,.35);
  box-shadow: 0 0 0 4px rgba(11,42,74,.12);
}
.form-hint{
  font-size: 12px;
  color: var(--prem-muted);
  margin-top: 6px;
}
.btn-premium{
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* Soft badge */
.badge-soft{
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--prem-ink);
  background: rgba(11,42,74,.08);
  border: 1px solid rgba(11,42,74,.10);
}

/* Map container */
.map-wrap{
  height: 320px;
}
@media (min-width: 992px){
  .map-wrap{ height: 360px; }
}

/* Tables: more premium without changing markup */
.table{
  border-color: var(--prem-border);
}
.table thead.table-dark th{
  background: var(--prem-ink) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  --bs-table-accent-bg: rgba(11,42,74,.03);
}
.table-hover>tbody>tr:hover>*{
  --bs-table-accent-bg: rgba(11,42,74,.06);
}

/* Replace marquee with a clean bar */
.grievance-bar{
  border: 0;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.grievance-bar a{
  text-decoration: none;
}
.grievance-bar a:hover{
  text-decoration: underline;
}