/* =============================================
   IABSCON 2027 — Plugin Public Forms CSS
   Supplements the theme's style.css for
   shortcode-rendered forms
   ============================================= */

/* =============================================
   STEPS LIST
   ============================================= */
.steps { display: flex; flex-direction: column; gap: 1.5rem; }
.step  { display: flex; gap: 1.25rem; align-items: flex-start; }
.step-number {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy, #0A1628);
  color: var(--gold, #C8973A);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-content h4 { margin: 0 0 0.3rem; font-size: 1rem; }
.step-content p  { margin: 0; font-size: 0.9rem; color: var(--text-muted, #6b7280); }

/* =============================================
   AUTHOR ENTRY CARD
   ============================================= */
.author-entry { transition: box-shadow 0.2s; }
.author-entry:focus-within { box-shadow: 0 0 0 3px rgba(13,148,136,0.2); }

/* =============================================
   RADIO GROUP
   ============================================= */
.radio-group  { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.radio-item   { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; font-family: var(--font-sans, system-ui); font-size: 0.9rem; }
.radio-item input[type="radio"] {
  width: auto !important;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--teal, #0D9488);
}

/* =============================================
   CHECKBOX ITEM
   ============================================= */
.checkbox-item { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; font-family: var(--font-sans, system-ui); font-size: 0.9rem; }
.checkbox-item input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--teal, #0D9488); }

/* =============================================
   FORM VALIDATION STATES
   ============================================= */
.form-group input:invalid:not(:placeholder-shown),
.form-group select:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
  border-color: #f87171;
}
.form-group input:valid:not(:placeholder-shown):required,
.form-group select:valid:not(:placeholder-shown):required {
  border-color: #34d399;
}

/* =============================================
   WORD COUNT METER
   ============================================= */
#word-count {
  font-family: var(--font-sans, system-ui);
  font-size: 0.8rem;
  font-weight: 600;
  transition: color 0.2s;
}

/* =============================================
   PAYMENT PORTAL FORM
   ============================================= */
#payment-form .form-group { margin-bottom: 1.25rem; }
#payment-form .form-group label { font-weight: 600; }

/* =============================================
   FORM FEEDBACK ALERTS
   ============================================= */
.alert { display: flex; gap: 0.875rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: 8px; }
.alert-icon { font-size: 1.25rem; flex-shrink: 0; line-height: 1.4; }
.alert-info    { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; }
.alert-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.alert-warning { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.alert-danger  { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.alert a       { font-weight: 600; }

/* =============================================
   NOTICE BOX
   ============================================= */
.notice-box {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 5px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  padding: 1.25rem 1.5rem;
}
.notice-box h3 { margin: 0 0 0.75rem; font-family: var(--font-sans, system-ui); font-size: 0.88rem; font-weight: 700; color: #92400e; }
.notice-box p  { font-family: var(--font-sans, system-ui); font-size: 0.85rem; color: #78350f; margin: 0; line-height: 1.7; }

/* =============================================
   TIMELINE (about page, etc.)
   ============================================= */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--teal, #0D9488), var(--gold, #C8973A));
}
.timeline-item {
  position: relative;
  padding: 0 0 2.5rem 1.75rem;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -0.45rem; top: 0.5rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold, #C8973A);
  border: 3px solid var(--white, #fff);
  box-shadow: 0 0 0 2px var(--gold, #C8973A);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item .timeline-date {
  font-family: var(--font-sans, system-ui);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal, #0D9488);
  margin-bottom: 0.3rem;
}
.timeline-item h4 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.timeline-item p  { font-size: 0.9rem; color: var(--text-muted, #6b7280); margin: 0; }

/* =============================================
   CARD VARIANTS (used across templates)
   ============================================= */
.card-gold-pale { background: var(--gold-pale, #FEF3C7) !important; border-color: rgba(200,151,58,0.3) !important; }
.card-navy      { background: var(--navy, #0A1628) !important; color: var(--white, #fff) !important; }
.card-navy h3   { color: var(--white, #fff) !important; }
.badge-navy     { background: rgba(255,255,255,0.12) !important; color: var(--white, #fff) !important; }

/* =============================================
   SPEAKER CARDS
   ============================================= */
.speaker-avatar-placeholder {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, var(--navy, #0A1628), var(--teal, #0D9488));
  color: var(--white, #fff);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  margin: 0 auto 1rem;
  flex-shrink: 0;
}
.speaker-card { text-align: center; }
.speaker-card h4 { font-size: 1rem; margin-bottom: 0.25rem; }
.speaker-card .title { font-family: var(--font-sans, system-ui); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold, #C8973A); margin-bottom: 0.15rem; }
.speaker-card .institution { font-family: var(--font-sans, system-ui); font-size: 0.82rem; color: var(--text-muted, #6b7280); margin: 0; }