/* Bilginç – Become an Instructor form
   Requires Bootstrap 5.3. Scoped under .bi-apply so it won't affect the rest of the site. */

.bi-apply {
  --bi-primary: #054f87;
  --bi-primary-dark: #033a64;
  --bi-tint: #e8f1f8;
  --bi-border: #c9d3dd;
  --bi-muted: #556270;
  --bi-bg: #f4f7fa;
  background: var(--bi-bg);
  color: #1f2a37;
}

/* Hero */
.bi-apply .bi-hero {
  background: linear-gradient(180deg, var(--bi-primary) 0%, #043f6c 100%);
  color: #fff;
  padding: 28px 0 72px;
}
.bi-apply .bi-hero .breadcrumb { --bs-breadcrumb-divider-color: #cfe0ee; font-size: 13px; margin: 0; }
.bi-apply .bi-hero .breadcrumb a { color: #cfe0ee; text-decoration: none; }
.bi-apply .bi-hero .breadcrumb-item.active { color: #fff; }
.bi-apply .bi-hero h1 { font-weight: 800; font-size: clamp(28px, 4vw, 40px); margin: 24px 0 12px; }
.bi-apply .bi-hero p { color: #e1ecf5; font-size: 17px; line-height: 1.6; max-width: 720px; }
.bi-apply .bi-pill {
  display: inline-block; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: 6px 14px; font-size: 13.5px;
}

/* Cards */
.bi-apply .bi-main { margin-top: -40px; padding-bottom: 64px; }
.bi-apply .bi-card {
  background: #fff; border: 1px solid #e3e8ee; border-radius: 12px;
  box-shadow: 0 6px 24px rgba(5,79,135,.08);
}

/* Section headings */
    .bi-apply .bi-section + .bi-section {
        border-top: 1px solid #e3e8ee;
        margin-top: 60px;
    }
.bi-apply .bi-section legend {
  float: none; width: auto; display: flex; align-items: center; gap: 12px;
  font-size: 20px; font-weight: 700; color: var(--bi-primary); margin-bottom: 1.25rem;
}
.bi-apply .bi-num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--bi-tint); color: var(--bi-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}

/* Fields */
.bi-apply .form-label { font-weight: 600; font-size: 14px; }
.bi-apply .form-control, .bi-apply .form-select { min-height: 46px; border-color: var(--bi-border); border-radius: 6px; }
.bi-apply .form-control:focus, .bi-apply .form-select:focus {
  border-color: var(--bi-primary); box-shadow: 0 0 0 .25rem rgba(5,79,135,.2);
}
.bi-apply .form-text { color: var(--bi-muted); font-size: 12.5px; }
.bi-apply .req { color: #b42318; }

/* Chips (checkbox pills) */
.bi-apply .bi-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bi-apply .bi-chip input { position: absolute; opacity: 0; pointer-events: none; }
.bi-apply .bi-chip label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--bi-border); border-radius: 999px; background: #fff; font-size: 14px; user-select: none;
}
.bi-apply .bi-chip input:checked + label {
  background: var(--bi-tint); border-color: var(--bi-primary); color: var(--bi-primary); font-weight: 600;
}
.bi-apply .bi-chip input:focus-visible + label { box-shadow: 0 0 0 .25rem rgba(5,79,135,.25); }

/* Option tiles (checkbox / radio boxes) */
.bi-apply .bi-opt {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; margin: 0;
  border: 1px solid var(--bi-border); border-radius: 6px; background: #fff; cursor: pointer; font-size: 14.5px;
}
.bi-apply .bi-opt .form-check-input { margin: 0; flex: none; }
.bi-apply .bi-opt:has(input:checked) { border-color: var(--bi-primary); background: var(--bi-tint); }
.bi-apply .form-check-input:checked { background-color: var(--bi-primary); border-color: var(--bi-primary); }

/* File drop zone */
.bi-apply .bi-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 132px; padding: 20px; text-align: center; cursor: pointer;
  border: 2px dashed #b3c4d4; border-radius: 10px; background: #f8fbfd;
}
.bi-apply .bi-drop.is-dragover { border-color: var(--bi-primary); background: var(--bi-tint); }
.bi-apply .bi-drop strong { color: var(--bi-primary); }

/* Consent box */
.bi-apply .bi-consent { background: var(--bi-bg); border-radius: 10px; padding: 20px 22px; }

/* Buttons */
.bi-apply .btn-bi { background: var(--bi-primary); color: #fff; font-weight: 700; padding: 14px 36px; border-radius: 6px; }
.bi-apply .btn-bi:hover, .bi-apply .btn-bi:focus { background: var(--bi-primary-dark); color: #fff; }
.bi-apply .btn-link-bi { color: var(--bi-primary); font-weight: 700; text-decoration: none; padding-left: 0; }

/* Sidebar */
.bi-apply .bi-side h2 { font-size: 18px; font-weight: 700; color: var(--bi-primary); }
.bi-apply .bi-side svg { flex: none; color: var(--bi-primary); }
.bi-apply .bi-step {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--bi-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.bi-apply .bi-help { background: var(--bi-tint); border-radius: 12px; }
.bi-apply .bi-help a { color: var(--bi-primary); }

@media (min-width: 992px) {
  .bi-apply .bi-sticky { position: sticky; top: 24px; }
}

.expertise-hidden {
    display: none !important;
}

#toggleExpertise {
    background: #f4f7fa;
    border: 1px solid #054f87;
    padding: 5px;
}

.main-content {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(5, 79, 135, .08);
    padding-top: 35px;
    padding-bottom: 35px;
}

.invalid-feedback {
    font-weight: bold;
    border-left: 5px solid red;
    padding-left:4px;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    border: 2px solid red;
}