/* ============================================================
   MENTORSHIP APPLICATION FORM — compact, design-system styled
   Lives inside the existing .mem-join-box wrapper (white card,
   shadow, padding). No own card chrome.
   ============================================================ */

.mentorship-app-wrap { text-align: left; }

/* ════════════════════════════════════════════════════════════
   Unified header — programme eyebrow + icon-led title + body
                  + timeline pills, all in one panel.
   ════════════════════════════════════════════════════════════ */
.mentorship-header {
  background: linear-gradient(135deg, rgba(79, 23, 168, 0.04) 0%, rgba(79, 23, 168, 0.01) 100%);
  border: 1px solid rgba(79, 23, 168, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  text-align: center; /* centers the inline-block eyebrow chip */
}
.mentorship-header__eyebrow {
  display: inline-block;
  font-family: 'Roboto Mono', monospace;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-brand-purple);
  margin-bottom: var(--space-3);
  padding: 0.2rem 0.7rem;
  background: rgba(79, 23, 168, 0.08);
  border-radius: 999px;
}
.mentorship-header__row {
  display: flex; flex-direction: column;
  align-items: center;            /* stack icon + title + body, all centered */
  gap: var(--space-3);
  text-align: center;
}
.mentorship-header__icon {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: var(--radius-lg);
  background: var(--clr-brand-purple);
  color: var(--clr-white);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xl);
  box-shadow: 0 6px 18px rgba(79, 23, 168, 0.25);
}
.mentorship-header__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--clr-brand-dark);
  line-height: 1.2;
}
.mentorship-header__body {
  margin: 0 auto;                 /* centered block within the centered column */
  font-size: var(--fs-sm);
  color: var(--clr-gray-mid);
  line-height: 1.6;
  max-width: 60ch;
}

/* Divider between intro + timeline (inside the same panel) */
.mentorship-header__divider {
  height: 1px;
  background: rgba(79, 23, 168, 0.15);
  margin: var(--space-4) 0;
}

/* Timeline row inside the unified header */
.mentorship-header__timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: left; /* reset the parent's center alignment for pill content */
}
@media (max-width: 720px) {
  .mentorship-header__timeline { grid-template-columns: 1fr; gap: var(--space-3); }
}

@media (max-width: 540px) {
  .mentorship-header { padding: var(--space-4); }
  .mentorship-header__row { flex-direction: column; gap: var(--space-3); }
  .mentorship-header__icon { width: 44px; height: 44px; font-size: var(--fs-xl); }
}

/* Pills now sit INSIDE the unified header — borderless variant.
   Each pill is just an icon tile + text, separated by space rather than
   their own boxes so they read as a single banner not 3 sub-cards. */
.mentorship-pill {
  display: flex; align-items: center; gap: var(--space-3);
}
.mentorship-pill__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md);
}
.mentorship-pill__icon--open  { background: rgba(69, 197, 128, 0.14); color: #1a6b3f; }
.mentorship-pill__icon--close { background: rgba(56, 190, 244, 0.18); color: #0e6f96; }
.mentorship-pill__icon--time  { background: rgba(255, 111, 0, 0.15); color: var(--clr-orange); }
.mentorship-pill__label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-gray-mid);
  font-weight: var(--fw-medium);
  margin-bottom: 0.1rem;
}
.mentorship-pill__value {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-brand-dark);
  line-height: 1.2;
}
.mentorship-pill--accent .mentorship-pill__value { color: var(--clr-orange); }

/* ── State cards (before / closed) ──────────────────────────── */
.mentorship-state {
  text-align: center; padding: var(--space-10) var(--space-6);
  background: rgba(79, 23, 168, 0.04);
  border: 1px dashed rgba(79, 23, 168, 0.22);
  border-radius: var(--radius-lg);
}
.mentorship-state i { font-size: 2.5rem; color: var(--clr-brand-purple); margin-bottom: var(--space-2); }
.mentorship-state h3 {
  margin: 0 0 var(--space-2); font-size: var(--fs-xl);
  font-weight: var(--fw-bold); color: var(--clr-brand-dark);
}
.mentorship-state p { margin: 0; color: var(--clr-gray-mid); font-size: var(--fs-sm); }
.mentorship-state--closed { background: #fdf6e3; border-color: rgba(255, 111, 0, 0.3); }
.mentorship-state--closed i { color: var(--clr-orange); }

/* ── Flash messages ─────────────────────────────────────────── */
.mentorship-flash {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.mentorship-flash--success {
  background: rgba(69, 197, 128, 0.12); color: #1a6b3f;
  border-left: 3px solid var(--clr-green);
}
.mentorship-flash--error {
  background: rgba(255, 80, 80, 0.10); color: #8a1d1d;
  border-left: 3px solid #d93025;
}

/* ════════════════════════════════════════════════════════════
   Step indicator (top of the form)
   ════════════════════════════════════════════════════════════ */
.mentorship-steps {
  display: flex; align-items: center;
  margin-bottom: var(--space-5);
  padding: var(--space-3) 0;
  gap: 0;
}

.mentorship-step {
  display: flex; align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.mentorship-step:last-child { flex: 0 0 auto; }

.mentorship-step__bubble {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--clr-white);
  border: 2px solid var(--clr-border);
  color: var(--clr-gray-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.mentorship-step.is-current .mentorship-step__bubble {
  background: var(--clr-brand-purple);
  border-color: var(--clr-brand-purple);
  color: var(--clr-white);
  box-shadow: 0 0 0 4px rgba(79, 23, 168, 0.12);
}
.mentorship-step.is-complete .mentorship-step__bubble {
  background: var(--clr-brand-purple);
  border-color: var(--clr-brand-purple);
  color: var(--clr-white);
}

.mentorship-step__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-gray-mid);
  margin-left: 0.65rem;
  white-space: nowrap;
  transition: color var(--transition);
}
.mentorship-step.is-current .mentorship-step__label  { color: var(--clr-brand-dark); }
.mentorship-step.is-complete .mentorship-step__label { color: var(--clr-brand-dark); }

.mentorship-step__bar {
  flex: 1 1 auto;
  height: 2px;
  background: var(--clr-border);
  margin: 0 var(--space-3);
  border-radius: 2px;
  transition: background var(--transition);
}
.mentorship-step__bar.is-complete { background: var(--clr-brand-purple); }

@media (max-width: 720px) {
  .mentorship-step__label { display: none; }
  .mentorship-step__bar   { margin: 0 var(--space-2); }
  .mentorship-step__bubble { flex-basis: 32px; width: 32px; height: 32px; font-size: var(--fs-xs); }
}

/* Step counter ("Step 2 of 4") shown in the action row */
.mentorship-step__counter {
  font-size: var(--fs-sm);
  color: var(--clr-gray-mid);
}
.mentorship-step__counter strong { color: var(--clr-brand-dark); }

.mentorship-form__actions--steps {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.mentorship-form__actions--steps .btn { min-width: 110px; justify-content: center; }

/* Override design-system .btn--outline (which is for dark backgrounds:
   white text + white border + purple hover) so it reads well on this
   light form panel. */
.mentorship-form__actions .btn--outline {
  background: var(--clr-white);
  color: var(--clr-brand-dark);
  border-color: var(--clr-border);
}
.mentorship-form__actions .btn--outline:hover {
  background: var(--clr-page-bg);
  color: var(--clr-brand-purple);
  border-color: var(--clr-brand-purple);
}

@media (max-width: 540px) {
  .mentorship-form__actions--steps { flex-direction: column-reverse; }
  .mentorship-form__actions--steps .btn { width: 100%; min-width: 0; }
  .mentorship-step__counter { order: 0; }
}

/* ── Form structure (compact) ───────────────────────────────── */
.mentorship-form { display: flex; flex-direction: column; gap: var(--space-4); }

/* Each step container is itself a flex column so sections inside the
   same step get the same gap rhythm the whole form used to have. */
.mentorship-form > [data-step] {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.mentorship-form__section {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--clr-border);
}
.mentorship-form__section:last-child  { border-bottom: 0; padding-bottom: 0; }
.mentorship-form__section:only-child   { border-bottom: 0; padding-bottom: 0; }

.mentorship-form__section-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--clr-brand-dark);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.01em;
}

.mentorship-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
}
.mentorship-form__grid--3 { grid-template-columns: repeat(3, 1fr); }
.mentorship-form__grid--compact { margin-top: var(--space-2); }
@media (max-width: 720px) {
  .mentorship-form__grid,
  .mentorship-form__grid--3 { grid-template-columns: 1fr; }
}

.mentorship-form__field { display: flex; flex-direction: column; gap: 0.25rem; }
.mentorship-form__field--full   { grid-column: 1 / -1; }
.mentorship-form__field--spaced { margin-top: var(--space-3); }

.mentorship-form__field label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--clr-brand-dark);
}
.mentorship-form__field label .text-soft {
  font-weight: var(--fw-regular);
  color: var(--clr-gray-mid);
}
.mentorship-form__field .req { color: #d93025; margin-left: 2px; }

.mentorship-form__field input[type=text],
.mentorship-form__field input[type=email],
.mentorship-form__field input[type=tel],
.mentorship-form__field input[type=url],
.mentorship-form__field input[type=number],
.mentorship-form__field select,
.mentorship-form__field textarea {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-white);
  font-size: var(--fs-sm);
  color: var(--clr-brand-dark);
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.mentorship-form__field input:focus,
.mentorship-form__field select:focus,
.mentorship-form__field textarea:focus {
  outline: none;
  border-color: var(--clr-brand-purple);
  box-shadow: 0 0 0 3px rgba(79, 23, 168, 0.12);
}
.mentorship-form__field input::placeholder,
.mentorship-form__field textarea::placeholder { color: #b7b3ad; }
.mentorship-form__field select { cursor: pointer; }
.mentorship-form__field textarea { resize: vertical; min-height: 72px; }

.mentorship-form__hint { font-size: var(--fs-xs); color: var(--clr-gray-mid); margin-top: 0.1rem; }
.mentorship-form__err  { font-size: var(--fs-xs); color: #d93025; margin-top: 0.1rem; }
.mentorship-form .text-success { color: #1a6b3f; }
.mentorship-form .text-danger  { color: #d93025; }

/* ── Role cards (compact) ───────────────────────────────────── */
.mentorship-role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 720px) { .mentorship-role-grid { grid-template-columns: 1fr; } }

.mentorship-role-card {
  display: flex; align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-white);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.mentorship-role-card:hover {
  border-color: rgba(79, 23, 168, 0.35);
  background: rgba(79, 23, 168, 0.02);
}
.mentorship-role-card.is-active {
  border-color: var(--clr-brand-purple);
  background: rgba(79, 23, 168, 0.04);
  box-shadow: 0 0 0 3px rgba(79, 23, 168, 0.10);
}
.mentorship-role-card__radio {
  flex: 0 0 18px; width: 18px; height: 18px;
  border: 2px solid var(--clr-border);
  border-radius: 50%; background: var(--clr-white);
  position: relative; margin-top: 3px;
  transition: border-color var(--transition);
}
.mentorship-role-card.is-active .mentorship-role-card__radio { border-color: var(--clr-brand-purple); }
.mentorship-role-card.is-active .mentorship-role-card__radio::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--clr-brand-purple);
}
.mentorship-role-card__title {
  margin: 0 0 0.1rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-brand-dark);
}
.mentorship-role-card__desc {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--clr-gray-mid);
  line-height: 1.4;
}

/* ── Yes / No toggle ────────────────────────────────────────── */
.mentorship-toggle {
  display: inline-flex;
  background: var(--clr-page-bg);
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  padding: 3px;
  width: fit-content;
}
.mentorship-toggle__btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.4rem 1.3rem;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-gray-mid);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  min-width: 64px;
}
.mentorship-toggle__btn:hover { color: var(--clr-brand-dark); }
.mentorship-toggle__btn.is-active.is-yes {
  background: var(--clr-brand-purple);
  color: var(--clr-white);
  box-shadow: 0 2px 6px rgba(79, 23, 168, 0.25);
}
.mentorship-toggle__btn.is-active.is-no {
  background: var(--clr-gray-dark);
  color: var(--clr-white);
}

/* ── Certification chips (multi-select) ─────────────────────── */
.mentorship-chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.mentorship-chip {
  cursor: pointer;
  user-select: none;
}
.mentorship-chip input {
  position: absolute !important; opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.mentorship-chip__inner {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--clr-border);
  background: var(--clr-white);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-gray-dark);
  transition: all var(--transition);
}
.mentorship-chip__inner::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--clr-border);
  background: var(--clr-white);
  display: inline-block;
  position: relative;
  transition: all var(--transition);
}
.mentorship-chip:hover .mentorship-chip__inner {
  border-color: rgba(79, 23, 168, 0.35);
  background: rgba(79, 23, 168, 0.04);
}
.mentorship-chip input:checked + .mentorship-chip__inner {
  border-color: var(--clr-brand-purple);
  background: var(--clr-brand-purple);
  color: var(--clr-white);
}
.mentorship-chip input:checked + .mentorship-chip__inner::before {
  border-color: var(--clr-white);
  background: var(--clr-white);
  box-shadow: inset 0 0 0 3px var(--clr-brand-purple);
}

/* ── Callout / warning ──────────────────────────────────────── */
.mentorship-callout {
  background: rgba(255, 111, 0, 0.08);
  border: 1px solid rgba(255, 111, 0, 0.28);
  color: #8a4a00;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
  display: flex; align-items: center; gap: 0.4rem;
}
.mentorship-callout i { flex-shrink: 0; }

.mentorship-warning {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(217, 48, 37, 0.08);
  color: #8a1d1d;
  border-left: 3px solid #d93025;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.mentorship-warning i { margin-right: 0.35rem; }

/* ── Consent ────────────────────────────────────────────────── */
.mentorship-consent {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--clr-page-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--clr-gray-dark);
  cursor: pointer;
  line-height: 1.5;
}
.mentorship-consent input {
  margin-top: 3px; flex: 0 0 auto;
  width: 17px; height: 17px;
  accent-color: var(--clr-brand-purple);
}

/* ── Actions row (uses design-system .btn / .btn--purple / .btn--outline) ── */
.mentorship-form__actions {
  display: flex; flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
  border-top: 1px solid var(--clr-border);
}
/* Make the design-system pill buttons play nicely when disabled inside this form */
.mentorship-form__actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Visually-hidden for the radio inputs hidden behind custom indicators */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Prevent flash-of-visible-element on conditional Alpine sections. */
[x-cloak] { display: none !important; }

/* ════════════════════════════════════════════════════════════
   WhatsApp intl-tel-input style widget
   ════════════════════════════════════════════════════════════ */

/* Outer flex row — NO overflow:hidden so the absolute dropdown escapes */
.phone-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid #d1d5db;
  border-radius: 0.5rem;
  background: #fff;
  transition: border-color 0.18s;
}
.phone-input-wrap:focus-within {
  border-color: var(--clr-brand-purple, #4f17a8);
  box-shadow: 0 0 0 3px rgba(79, 23, 168, 0.08);
}

/* ── Flag trigger button ── */
.iti-flag-btn {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px 0 10px;
  background: #f5f3ff;
  border: none;
  border-right: 1.5px solid #d1d5db;
  /* Round left corners to match the wrapper */
  border-radius: calc(0.5rem - 1.5px) 0 0 calc(0.5rem - 1.5px);
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
  white-space: nowrap;
}
.iti-flag-btn:hover,
.iti-flag-btn:focus-visible {
  background: #ede9ff;
  outline: none;
}

/* ── Flag emoji (in button) ── */
.iti-flag-btn .iti-flag {
  font-size: 1.3rem;
  line-height: 1;
  display: block;
  width: 1.5em;
  text-align: center;
}

/* ── Caret chevron ── */
.iti-caret {
  width: 16px;
  height: 16px;
  color: #9ca3af;
  flex-shrink: 0;
}

/* ── Dial code label (between button and number input) ── */
.iti-code {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 8px 0 7px;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--clr-brand-purple, #4f17a8);
  border-right: 1.5px solid #e5e7eb;
  white-space: nowrap;
  min-width: 44px;
}

/* ── Local number input ── */
.phone-input-wrap input[type="tel"] {
  flex: 1;
  border: none !important;
  border-radius: 0 0.5rem 0.5rem 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0.7rem 0.875rem;
  font-size: 0.9375rem;
  background: transparent;
  min-width: 0;
}

/* ════════════════════════════════════════════════════════════
   Searchable country dropdown panel
   ════════════════════════════════════════════════════════════ */
.iti-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 300px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Search row */
.iti-search-row {
  padding: 8px 8px 7px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}
.iti-search-input {
  width: 100%;
  padding: 6px 10px;
  border: 1.5px solid #e0e0e0;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  outline: none;
  background: #fff;
  color: #111;
  transition: border-color 0.15s;
}
.iti-search-input:focus {
  border-color: var(--clr-brand-purple, #4f17a8);
}

/* Scrollable country list */
.iti-country-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  max-height: 230px;
}

/* Each country row */
.iti-country-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.iti-country-item:hover {
  background: #f5f3ff;
}
.iti-country-item--active {
  background: #ede9ff;
}
.iti-country-item--active .iti-country-name {
  font-weight: 600;
  color: var(--clr-brand-purple, #4f17a8);
}

/* Flag inside list items */
.iti-country-item .iti-flag {
  font-size: 1.15rem;
  line-height: 1;
  width: 1.5em;
  text-align: center;
  flex-shrink: 0;
}

.iti-country-name {
  flex: 1;
  font-size: 0.8125rem;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iti-country-code {
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 600;
  flex-shrink: 0;
}

/* No results message */
.iti-no-result {
  padding: 10px 14px;
  font-size: 0.8125rem;
  color: #9ca3af;
  text-align: center;
}