/*--------------------------------------------------------------
# BISE Multan theme for the private students portal
# Matches the look of the new (Laravel) student-admission pages.
# Loaded AFTER theme/assets/css/style.css; styles only, no layout
# logic. Remove the <link> in custom/php/header.php to roll back.
--------------------------------------------------------------*/
:root {
  --bise-paper: #FBF8F1;
  --bise-ink: #22303A;
  --bise-ink-soft: #5D6E75;
  --bise-line: #E1D6BA;
  --bise-kashi: #1D7A98;
  --bise-kashi-deep: #0F4A5E;
  --bise-kashi-soft: #DFF0F3;
  --bise-terracotta: #C4622A;
  --bise-gold: #C09A3E;
  --bise-gold-soft: #F2E2B8;
  --bise-mint: #2F8F72;
  --bise-mint-soft: #D9EEE6;
  --bise-error: #B3402A;
  --bise-hero-end: #0B3C5D;
  --bise-radius: 12px;
  --bise-font: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
body {
  font-family: var(--bise-font);
  background: var(--bise-paper);
  color: var(--bise-ink);
}

h1, h2, h3, h5, h6,
.card-title,
.alert-heading {
  font-family: var(--bise-font);
}

a {
  color: var(--bise-kashi);
}

a:hover {
  color: var(--bise-kashi-deep);
}

/*--------------------------------------------------------------
# Header (white app bar)
--------------------------------------------------------------*/
.header {
  height: 64px;
  background-color: #fff;
  box-shadow: none;
  border-bottom: 1px solid var(--bise-line);
}

.header .logo img {
  max-height: 44px !important;
  border-radius: 50%;
  background: #fff;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(15, 74, 94, 0.45);
}

.header .logo span {
  font-family: var(--bise-font);
  font-size: 18px;
  font-weight: 600;
  color: var(--bise-ink);
  margin-left: 10px;
}

/*--------------------------------------------------------------
# Main + hero band (page title)
--------------------------------------------------------------*/
#main {
  margin-top: 0;
  padding-top: 0;
}

.pagetitle {
  margin: 0 -30px 0 -30px;
  padding: 28px max(16px, calc((100% - 1200px) / 2 + 16px)) 64px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.12), transparent 40%),
    linear-gradient(135deg, var(--bise-kashi) 0%, var(--bise-hero-end) 100%);
}

.pagetitle::before {
  content: "Private Candidates \00B7  BISE Multan";
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}

.pagetitle h1 {
  font-family: var(--bise-font);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 4px 0 0;
}

#main .section {
  position: relative;
  max-width: 1200px;
  margin: -40px auto 0;
  padding-bottom: 48px;
}

@media (max-width: 1199px) {
  .pagetitle {
    margin-left: -20px;
    margin-right: -20px;
  }
}

/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/
.card {
  border: 1px solid var(--bise-line);
  border-radius: var(--bise-radius);
  box-shadow: 0 2px 4px rgba(34, 48, 58, 0.06), 0 6px 18px rgba(34, 48, 58, 0.08);
  overflow: hidden;
}

.card-title {
  color: var(--bise-ink);
  font-weight: 700;
}

.card-title span {
  color: var(--bise-ink-soft);
}

/* Matric / Inter choice tiles on the landing page */
.contact .info-box {
  padding: 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.contact a:hover .info-box {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(34, 48, 58, 0.08), 0 12px 28px rgba(34, 48, 58, 0.12);
}

.contact .info-box i {
  color: var(--bise-kashi);
  font-family: var(--bise-font);
  font-style: normal;
  font-weight: 700;
}

.contact .info-box h3 {
  color: var(--bise-ink-soft);
  font-family: var(--bise-font);
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.btn {
  border-radius: 8px;
  font-weight: 600;
}

.btn-primary {
  --bs-btn-bg: var(--bise-kashi);
  --bs-btn-border-color: var(--bise-kashi);
  --bs-btn-hover-bg: var(--bise-kashi-deep);
  --bs-btn-hover-border-color: var(--bise-kashi-deep);
  --bs-btn-active-bg: var(--bise-kashi-deep);
  --bs-btn-active-border-color: var(--bise-kashi-deep);
  --bs-btn-disabled-bg: var(--bise-kashi);
  --bs-btn-disabled-border-color: var(--bise-kashi);
}

.btn-success {
  --bs-btn-bg: var(--bise-mint);
  --bs-btn-border-color: var(--bise-mint);
  --bs-btn-hover-bg: #26745D;
  --bs-btn-hover-border-color: #26745D;
  --bs-btn-active-bg: #26745D;
  --bs-btn-active-border-color: #26745D;
  --bs-btn-disabled-bg: var(--bise-mint);
  --bs-btn-disabled-border-color: var(--bise-mint);
}

/*--------------------------------------------------------------
# Alerts (tonal, like the new portal)
--------------------------------------------------------------*/
.alert {
  border-radius: 10px;
}

.alert-primary {
  --bs-alert-color: var(--bise-kashi-deep);
  --bs-alert-bg: var(--bise-kashi-soft);
  --bs-alert-border-color: #BFE0E8;
}

.alert-warning {
  --bs-alert-color: #6E5317;
  --bs-alert-bg: var(--bise-gold-soft);
  --bs-alert-border-color: #E6CF92;
}

.alert-danger {
  --bs-alert-color: #8A2F1F;
  --bs-alert-bg: #F6DED8;
  --bs-alert-border-color: #EBC1B7;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.form-control,
.form-select {
  border-radius: 8px;
  border-color: #CFC4A8;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bise-kashi);
  box-shadow: 0 0 0 0.2rem rgba(29, 122, 152, 0.2);
}

.form-check-input:checked {
  background-color: var(--bise-kashi);
  border-color: var(--bise-kashi);
}

.form-check-input:focus {
  border-color: var(--bise-kashi);
  box-shadow: 0 0 0 0.2rem rgba(29, 122, 152, 0.2);
}

.form-label,
.col-form-label {
  color: var(--bise-ink);
  font-weight: 500;
}

/*--------------------------------------------------------------
# Tabs
--------------------------------------------------------------*/
.nav-tabs {
  border-bottom-color: var(--bise-line);
}

.nav-tabs .nav-link {
  color: var(--bise-ink-soft);
  font-weight: 600;
}

.nav-tabs .nav-link.active {
  color: var(--bise-kashi);
  border-color: var(--bise-line) var(--bise-line) #fff;
  border-top: 2px solid var(--bise-kashi);
}

/*--------------------------------------------------------------
# Tables
--------------------------------------------------------------*/
.table-primary {
  --bs-table-bg: var(--bise-kashi-soft);
  --bs-table-color: var(--bise-kashi-deep);
  --bs-table-border-color: #BFE0E8;
}

.table-bordered > :not(caption) > * > * {
  border-color: var(--bise-line);
}

/*--------------------------------------------------------------
# Progress (fee schedule bars)
--------------------------------------------------------------*/
.progress {
  border-radius: 999px;
  background-color: #EFE8D6;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  border-top: 1px solid var(--bise-line);
  color: var(--bise-ink-soft);
}

.footer .copyright {
  color: var(--bise-ink-soft);
}

.back-to-top {
  background: var(--bise-kashi);
}

.back-to-top:hover {
  background: var(--bise-kashi-deep);
}