/**
 * OSMDentis — Registration form pages
 * Applies to: /registration-student/ and /register-doctor/
 * Fluent Forms styling + Choices.js dropdowns + autofill fix.
 */

/* ══════════════════════════════════════
   Hide only Ohio's default page-headline (confirmed via DevTools).
   Do NOT touch .page-header / header.page-header — those match
   the site header/sidebar navigation.
   ══════════════════════════════════════ */
.breadcrumbs-nav-holder,
.page-headline { display: none !important; }

/* Form container */
.fluentform {
  max-width: 720px !important;
  margin: 0 auto !important;
}

/* ── Step indicator ── */
.ff-step-titles {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
  position: relative !important;
}

.ff-step-titles li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  z-index: 1 !important;
}

.ff-step-titles li::before {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.ff-step-titles li.ff_active::before {
  background: #669bbc !important;
  color: #fff !important;
  border: none !important;
}

.ff-step-titles li:not(.ff_active)::before {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.40) !important;
  border: 0.5px solid rgba(255,255,255,0.15) !important;
}

.ff-step-titles li.ff_active {
  color: rgba(255,255,255,0.92) !important;
  font-weight: 500 !important;
}

.ff-step-titles li:not(.ff_active) {
  color: rgba(255,255,255,0.40) !important;
}

.ff-step-titles li::after {
  display: none !important;
  content: none !important;
}

.ff-step-titles li:first-child::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 100% !important;
  width: 16px !important;
  height: 1px !important;
  background: rgba(255,255,255,0.15) !important;
  transform: translateY(-50%) !important;
}

.ff-el-progress { display: none !important; }

/* ── Browser autofill override ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1b1b1b inset !important;
  -webkit-text-fill-color: #eaeaea !important;
  border-color: rgba(255,255,255,0.15) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* ── Phone country selector ── */
.iti__flag-container .iti__selected-flag {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 10px 0 0 10px !important;
}

/* ── Choices.js searchable dropdown — dark theme ── */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background-color: #1e1e1e !important;
  border-color: #3a3a3a !important;
}

.choices__list--dropdown .choices__item,
.choices__list--dropdown .choices__item--selectable {
  color: #e0e0e0 !important;
  background-color: #1e1e1e !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #669bbc !important;
  color: #ffffff !important;
}

.choices__input {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
  border: none !important;
}

.choices__item--selectable,
.choices > .choices__inner .choices__item {
  color: #e0e0e0 !important;
}

.choices__inner {
  background-color: #1e1e1e !important;
  border-color: #3a3a3a !important;
}

/* ── Previous button — outlined ── */
.ff-btn-prev {
  background-color: transparent !important;
  color: #669bbc !important;
  border: 1px solid #669bbc !important;
  border-radius: 6px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ff-btn-prev:hover {
  background-color: #669bbc !important;
  color: #ffffff !important;
}

/* ── Next + Submit buttons — brand blue ── */
.ff-btn-next,
.ff-btn-submit {
  background-color: #669bbc !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transition: background-color 0.2s ease !important;
}

.ff-btn-next:hover,
.ff-btn-submit:hover {
  background-color: #5688a3 !important;
}

/* R1: disabled Choices wrappers look greyed out but still visible */
.ff-el-group .choices.is-disabled {
  cursor: not-allowed !important;
}
.ff-el-group .choices.is-disabled .choices__inner {
  background-color: rgba(255,255,255,0.02) !important;
}
.ff-el-group .choices.is-disabled .choices__list--single .choices__item {
  color: rgba(255,255,255,0.3) !important;
}

/* Dropdown-uri "logic indisponibile" — estompate și non-interactive. */
.ff-el-group .choices.osm-visually-disabled {
  opacity: 0.6;
  pointer-events: none;
}
.ff-el-group .choices.osm-visually-disabled .choices__inner {
  cursor: not-allowed;
}