/* ─── EducFind Escrow Styles ─────────────────────────────────────────────────── */

:root {
  --ef-brand:      #0165FE;
  --ef-accent:     #0165FE0D;
  --ef-success:    #00C477;
  --ef-warning:    #D35400;
  --ef-danger:     #C0392B;
  --ef-gray:       #7F8C8D;
  --ef-light:      #0165FE0D;
  --ef-border:     #dce1e7;
  --ef-radius:     6px;
  --ef-shadow:     0 2px 8px rgba(0,0,0,.08);
}

/* ─── Dashboard ──────────────────────────────────────────────────────────── */

.ef-dashboard {
    max-width: 1100px;
    margin: 0 auto;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    padding: 15px;
}

.ef-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--ef-accent);
  padding-bottom: 12px;
}

.ef-dashboard-header h2 { margin: 0; color: var(--ef-brand); font-family: 'DM Sans', sans-serif; font-size: 22px; }

.ef-secure-badge {
  background: #0165FE0D;
  color: var(--ef-brand);
  padding: 5px 12px;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--ef-accent);
}

/* ─── Mission card ───────────────────────────────────────────────────────── */

.ef-mission-card {
  background: #fff;
  border: 1px solid var(--ef-border);
  border-radius: 30px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--ef-shadow);
  transition: box-shadow .2s;
}

.ef-mission-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }

.ef-card-header  { margin-bottom: 14px; }
.ef-card-title   { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ef-card-title h3 { margin: 0; font-family: 'DM Sans', sans-serif; font-size: 17px; color: var(--ef-brand); }
.ef-card-title h3 a { color: inherit; text-decoration: none; }
.ef-card-title h3 a:hover { text-decoration: underline; }

/* ─── Card meta grid ─────────────────────────────────────────────────────── */

.ef-card-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  background: #0165FE0D;
  border-radius: var(--ef-radius);
  padding: 12px 14px;
}

.ef-meta-item    { display: flex; flex-direction: column; gap: 2px; }
.ef-meta-label   { font-size: 16px; font-family: 'DM Sans', sans-serif; color: var(--ef-gray); }
.ef-meta-value   { font-size: 16px; font-family: 'DM Sans', sans-serif; color: #333; font-weight: 500; }
.ef-amount       { color: var(--ef-brand); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; }

/* ─── Payment badges ─────────────────────────────────────────────────────── */

.ef-payment-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
}

.ef-payment-badge--stripe { background: #635bff; color: #fff; }
.ef-payment-badge--paypal { background: #003087; color: #fff; }
.ef-payment-badge--sepa   { background: #003399; color: #fff; }

/* ─── Workflow steps ─────────────────────────────────────────────────────── */

.ef-workflow-steps {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  overflow-x: auto;
}

.ef-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  padding: 8px 4px;
}

.ef-step::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--ef-border);
  z-index: 0;
}

.ef-step:first-child::before { display: none; }

.ef-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ef-border);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.ef-step--done .ef-step-dot {
  background: var(--ef-success);
}

.ef-step-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  text-align: center;
  color: var(--ef-gray);
  line-height: 1.2;
}

.ef-step--done .ef-step-label { color: var(--ef-gray); font-weight: 600; }

/* ─── Status badges ──────────────────────────────────────────────────────── */

.ef-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ef-status--pending       { background: #0165FE0D; color: var(--ef-brand); }
.ef-status--paid          { background: #d6eaf8; color: var(--ef-accent); }
.ef-status--active,
.ef-status--in-progress   { background: #d5f5e3; color: #1a7a41; }
.ef-status--warning,
.ef-status--delivered,
.ef-status--awaiting-family-confirmation { background: #fdebd0; color: var(--ef-warning); }
.ef-status--success,
.ef-status--completed     { background: #d5f5e3; color: var(--ef-success); }
.ef-status--danger,
.ef-status--disputed      { background: #fadbd8; color: var(--ef-danger); }
.ef-status--refunded      { background: #f2f3f4; color: var(--ef-gray); }
.ef-status--released,
.ef-status--auto-released { background: #d5f5e3; color: var(--ef-success); }

/* ─── Notices ────────────────────────────────────────────────────────────── */

.ef-notice {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #555;
  background: var(--ef-light);
  border-left: 4px solid var(--ef-accent);
  padding: 10px 14px;
  border-radius: 0 var(--ef-radius) var(--ef-radius) 0;
  margin-top: 10px;
}

.ef-notice--action  { border-left-color: var(--ef-warning); background: #fef5e7; }
.ef-notice--success { border-left-color: var(--ef-success); background: #eafaf1; color: var(--ef-success); }
.ef-notice--warning { border-left-color: var(--ef-warning); background: #fef5e7; }

/* ─── Confirmation box ───────────────────────────────────────────────────── */

.ef-confirmation-box {
  background: #fef9e7;
  border: 1px solid #f39c12;
  border-radius: var(--ef-radius);
  padding: 16px 20px;
  margin-top: 12px;
}

.ef-confirmation-box p { margin: 0 0 12px; font-family: 'DM Sans', sans-serif; font-size: 16px; }

.ef-auto-release-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--ef-gray);
  margin: 8px 0 0;
}

/* ─── Actions ────────────────────────────────────────────────────────────── */

.ef-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ef-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--ef-radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity .15s, transform .1s;
  text-decoration: none;
  line-height: 1;
}

.ef-btn:hover   { opacity: .88; color:#fff }
.ef-btn:active  { transform: scale(.98); }
.ef-btn:disabled { opacity: .5; cursor: not-allowed; }

.ef-btn--primary { background: var(--ef-brand);   color: #fff; }
.ef-btn--success { background: var(--ef-success);  color: #fff; }
.ef-btn--danger  { background: var(--ef-danger);   color: #fff; }

/* ─── Feedback ───────────────────────────────────────────────────────────── */

.ef-feedback { margin-top: 10px; }

.ef-feedback-msg {
  padding: 10px 14px;
  border-radius: var(--ef-radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
}

.ef-feedback--success { background: #eafaf1; color: var(--ef-success); border: 1px solid #a9dfbf; }
.ef-feedback--error   { background: #fdedec; color: var(--ef-danger);  border: 1px solid #f5b7b1; }
.ef-spinner           { color: var(--ef-gray); font-family: 'DM Sans', sans-serif; font-size: 13px; }

/* ─── Assign box ─────────────────────────────────────────────────────────── */

.ef-assign-box {
  background: #fff;
  border: 2px solid var(--ef-accent);
  border-radius: var(--ef-radius);
  padding: 20px 24px;
  margin: 16px 0;
  box-shadow: var(--ef-shadow);
}

.ef-assign-box h3 { margin: 0 0 14px; color: var(--ef-brand); }

.ef-fee-breakdown  { margin-bottom: 16px; }

.ef-fee-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--ef-border);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
}

.ef-fee-row:last-child { border-bottom: none; }

.ef-fee-total {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ef-brand);
  border-top: 2px solid var(--ef-brand);
  margin-top: 4px;
  padding-top: 8px;
}

.ef-fee-note { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--ef-gray); font-style: italic; }

.ef-escrow-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--ef-gray);
  margin: 12px 0 0;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.ef-application-assigned {
  background: #eaf0f6;
  border-left: 4px solid var(--ef-brand);
  padding: 10px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  border-radius: 0 var(--ef-radius) var(--ef-radius) 0;
  margin: 12px 0;
}

/* ─── Stripe banner ──────────────────────────────────────────────────────── */

.ef-stripe-banner {
  background: #fef3cd;
  border: 1px solid #ffc107;
  border-radius: var(--ef-radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ef-stripe-banner p { margin: 4px 0 0; font-family: 'DM Sans', sans-serif; font-size: 13px; }

/* ─── Payout summary ─────────────────────────────────────────────────────── */

.ef-payout-summary {
  background: linear-gradient(135deg, #eaf4fb, #d5f5e3);
  border: 1px solid var(--ef-accent);
  border-radius: var(--ef-radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ef-payout-icon { font-family: 'DM Sans', sans-serif; font-size: 28px; }
.ef-payout-summary > div { display: flex; flex-direction: column; gap: 2px; }
.ef-payout-summary span  { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--ef-gray); text-transform: uppercase; }
.ef-payout-summary strong { font-family: 'DM Sans', sans-serif; font-size: 20px; color: var(--ef-success); }

/* ─── Empty state ────────────────────────────────────────────────────────── */

.ef-empty {
  text-align: center;
  padding: 48px 0;
  color: var(--ef-gray);
}

/* ─── Admin ──────────────────────────────────────────────────────────────── */

.ef-admin-wrap h1 { color: var(--ef-brand); }

.ef-admin-stats {
  display: flex;
  gap: 12px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.ef-stat-box {
  background: #fff;
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  padding: 16px 20px;
  text-align: center;
  min-width: 110px;
  box-shadow: var(--ef-shadow);
  transition: border-color .2s;
}

.ef-stat-box:hover, .ef-stat-box--active { border-color: var(--ef-accent); }
.ef-stat-box strong { display: block; font-family: 'DM Sans', sans-serif; font-size: 28px; color: var(--ef-brand); }
.ef-stat-box span   { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--ef-gray); text-transform: uppercase; }

.ef-admin-detail {
  background: #fff;
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  padding: 16px;
  box-shadow: var(--ef-shadow);
}

.ef-admin-detail h3 { margin-top: 0; color: var(--ef-brand); border-bottom: 1px solid var(--ef-border); padding-bottom: 8px; }
.ef-admin-detail table { border-collapse: collapse; width: 100%; }
.ef-admin-detail th { background: var(--ef-light); padding: 8px 12px; text-align: left; width: 200px; font-family: 'DM Sans', sans-serif; font-size: 13px; }
.ef-admin-detail td { padding: 8px 12px; border-top: 1px solid var(--ef-border); font-family: 'DM Sans', sans-serif; font-size: 13px; }

.ef-admin-actions h3 { margin-top: 0; color: var(--ef-brand); }
.ef-admin-table th { font-weight: 700; }
.ef-admin-table td { vertical-align: middle; font-family: 'DM Sans', sans-serif; font-size: 13px; }