/* ============================================
   ABROADREADY.ORG — Scholarship & Journey Map Styles
   ============================================ */

.sc-hero {
  background: var(--gradient-dark);
  color: white;
  padding-top: var(--space-8);
  padding-bottom: var(--space-4);
}

.sc-hero-card {
  background: white;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  border: 1.5px solid var(--border-blue);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-top: var(--space-6);
}

.sc-hero-flag {
  line-height: 1;
  display: flex;
  align-items: center;
}

.sc-hero-flag img {
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.sc-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

.sc-hero-top h1 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-3xl);
  line-height: 1.2;
}

.sc-org {
  color: #64748b;
  font-size: var(--text-sm);
  font-weight: 500;
}

.sc-quick-stats {
  border-top: 1px solid rgba(0,0,0,0.05);
  background: var(--bg-blue);
  padding: var(--space-6);
  margin: var(--space-6) calc(-1 * var(--space-8)) calc(-1 * var(--space-8));
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.stat-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.06);
}

.stat-label {
  font-size: var(--text-xs);
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.stat-val {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--ink);
}

.text-gold { color: #d97706; }
.text-red { color: var(--accent); }

/* Layout Grid */
.layout-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

/* Progress Indicator */
.progress-indicator {
  text-align: right;
  width: 200px;
}

.mini-progress-bar {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: var(--radius-full);
  margin-top: var(--space-1);
}

.mini-progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

.text-primary { color: var(--primary-dark); }

/* Journey Map */
.journey-map {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.journey-step {
  display: flex;
  gap: var(--space-6);
}

.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #94a3b8;
  z-index: 2;
}

.step-line {
  width: 2px;
  flex-grow: 1;
  background: #cbd5e1;
  min-height: 20px;
}

.step-content {
  flex-grow: 1;
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
}

/* Step States */
.journey-step.completed .step-circle {
  background: var(--forest);
  border-color: var(--forest);
  color: white;
}

.journey-step.completed .step-line {
  background: var(--forest);
}

.journey-step.active .step-circle {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(59,130,246,0.1);
}

/* Accordion Logic */
.step-body {
  display: none;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(0,0,0,0.05);
}

.step-content.expanded .step-body {
  display: block;
  animation: fadeIn 0.3s ease;
}

.step-content.expanded .expand-icon {
  transform: rotate(180deg);
}

.expand-icon {
  transition: var(--transition-fast);
  color: #94a3b8;
  font-size: 0.8rem;
}

.step-title {
  margin: 0;
  font-size: var(--text-lg);
}

.text-gray-400 { color: #94a3b8; }

/* Checklists */
.checklist {
  list-style: none;
}

.checklist li {
  margin-bottom: var(--space-2);
}

.checklist label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  color: #475569;
}

.checklist input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--forest);
}

/* Insider Tip */
.insider-tip {
  background: rgba(245,158,11,0.1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--gold);
  font-size: var(--text-sm);
  color: #92400e;
}

/* AI Sidebar */
.sticky {
  position: relative;
  top: 100px;
}

.chat-suggestion {
  background: rgba(59,130,246,0.08);
  border: 1.5px solid rgba(59,130,246,0.2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--primary-dark);
  transition: var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.chat-suggestion::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--gradient-primary);
}

.chat-suggestion:hover {
  background: rgba(59,130,246,0.1);
  transform: translateX(4px);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(59,130,246,0.15);
}

@media (max-width: 1024px) {
  .layout-grid { grid-template-columns: 1fr; }
  .sc-quick-stats.grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .sc-hero-top { flex-direction: column; gap: var(--space-4); }
}

/* ============================================
   Dynamic detail page additions
   ============================================ */
.hero-back { color: rgba(255,255,255,0.7); font-size: var(--text-sm); text-decoration: none; display: inline-block; margin-bottom: var(--space-4); }
.hero-back:hover { color: white; }

.status-badge {
  font-size: var(--text-xs); font-weight: 700; padding: 5px 14px;
  border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.st-open { background: rgba(16,185,129,0.14); color: #047857; }
.st-closing { background: rgba(244,63,94,0.14); color: #be123c; }
.st-rolling { background: rgba(139,92,246,0.14); color: #6d28d9; }
.st-closed { background: rgba(107,114,128,0.14); color: #4b5563; }
.st-upcoming { background: rgba(245,158,11,0.14); color: #92400e; }

.detail-main { display: flex; flex-direction: column; gap: var(--space-6); }

.deadline-banner {
  background: rgba(16,185,129,0.1); color: #065f46; border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); font-size: var(--text-sm); font-weight: 500;
  border-left: 4px solid var(--forest);
}
.deadline-banner.urgent { background: rgba(244,63,94,0.09); color: #9f1239; border-left-color: var(--accent); }
.deadline-banner.rolling { background: rgba(139,92,246,0.09); color: #5b21b6; border-left-color: var(--purple); }

.info-section { padding: var(--space-8); position: relative; overflow: hidden; border: 1.5px solid var(--border-blue); border-radius: var(--radius-xl); background: var(--bg-blue); }
.info-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); opacity: 1; }
.info-section:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); }
.info-section h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.info-section .lead { color: #475569; font-size: var(--text-lg); line-height: 1.6; margin-bottom: var(--space-5); }
.muted { color: #94a3b8; font-size: var(--text-sm); margin-bottom: var(--space-4); }

.fact-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: var(--space-5); }
.fact-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: var(--text-sm); }
.fact-row:last-child { border-bottom: none; }
.fact-label { color: #94a3b8; font-weight: 600; white-space: nowrap; }
.fact-value { color: var(--ink); font-weight: 500; text-align: right; }

.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font-size: var(--text-xs); font-weight: 600; color: #475569; background: var(--paper); border: 1px solid rgba(0,0,0,0.06); padding: 4px 12px; border-radius: var(--radius-full); }
.pill-blue { color: var(--primary-dark); background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.2); }

.req-list, .perk-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.req-list li, .perk-list li { position: relative; padding-left: var(--space-6); color: #475569; font-size: var(--text-base); line-height: 1.5; }
.req-list li::before { content: "→"; position: absolute; left: 0; color: var(--primary); font-weight: 700; }
.perk-list li::before { content: "✓"; position: absolute; left: 0; color: var(--forest); font-weight: 700; }

.before-card { background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%); }
.ready-list { margin-bottom: var(--space-4); }
.ready-list li { margin-bottom: var(--space-2); }
.ready-progress { height: 8px; background: #e2e8f0; border-radius: var(--radius-full); overflow: hidden; margin-bottom: 6px; }
.ready-progress-fill { height: 100%; background: var(--gradient-forest); border-radius: var(--radius-full); transition: width 0.3s ease; }
.ready-label { font-size: var(--text-xs); color: #64748b; font-weight: 600; }

/* Apply box */
.apply-box { padding: var(--space-6); position: relative; overflow: hidden; border: 1.5px solid var(--border-gold); border-radius: var(--radius-xl); background: var(--bg-gold); }
.apply-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-gold); opacity: 1; }
.apply-box:hover { border-color: var(--gold-light); box-shadow: var(--shadow-md); }
.apply-fee { text-align: center; font-weight: 700; padding: var(--space-3); border-radius: var(--radius-md); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.apply-fee.free { background: rgba(16,185,129,0.1); color: #047857; }
.apply-fee.paid { background: rgba(245,158,11,0.12); color: #b45309; }
.apply-cta { justify-content: center; }
.apply-meta { margin-top: var(--space-5); border-top: 1px solid rgba(0,0,0,0.06); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.apply-meta-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); color: #64748b; }
.apply-meta-row span:last-child { color: var(--ink); font-weight: 600; }
.apply-disclaimer { font-size: var(--text-xs); color: #94a3b8; margin-top: var(--space-4); line-height: 1.5; }
.share-btn { font-size: var(--text-sm); }

.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item { border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-lg); overflow: hidden; background: white; }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: none; border: none; cursor: pointer; font-size: var(--text-base); font-weight: 600; color: var(--ink); text-align: left; }
.faq-q:hover { background: rgba(59,130,246,0.03); }
.faq-toggle { font-size: 1.3rem; color: var(--primary); font-weight: 700; flex-shrink: 0; line-height: 1; }
.faq-a { display: none; padding: 0 var(--space-5) var(--space-4); color: #475569; font-size: var(--text-sm); line-height: 1.7; }
.faq-item.active .faq-a { display: block; animation: fadeIn 0.3s ease; }
.faq-item.active { border-color: rgba(59,130,246,0.2); background: rgba(59,130,246,0.02); }
.tip-list li { padding-left: 0; }
.tip-list li::before { content: none; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1024px) {
  .detail-side { margin-top: var(--space-6); }
  .sc-quick-stats.grid-4 { grid-template-columns: repeat(2, 1fr); }
}