/* ═══════════════════════════════════════════════════
   Test Afaqtawjih AI – v1.1.0
   afaqtawjih.com
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

.tat-app * { box-sizing: border-box; }
.tat-app {
  font-family: 'Tajawal', 'Segoe UI', Arial, sans-serif;
  direction: rtl;
  max-width: 860px;
  margin: 20px auto;
  color: #1a1a2e;
}

/* ── Card ───────────────────────────────────────── */
.tat-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 30px rgba(13,95,166,.11);
  padding: 32px;
  margin-bottom: 24px;
}
.tat-center { text-align: center; }
.tat-step { display: none; }
.tat-step.tat-active { display: block; }

/* ── Hero Section ───────────────────────────────── */
.tat-hero {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 2px solid #e8f0fb;
}
.tat-hero-logo {
  height: 80px;
  max-width: 280px;
  object-fit: contain;
  margin-bottom: 16px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.tat-main-title {
  font-size: 24px;
  font-weight: 800;
  color: #0d5fa6;
  margin-bottom: 6px;
}
.tat-subtitle {
  color: #666;
  font-size: 15px;
  margin-bottom: 0;
}
.tat-note { text-align: center; color: #888; font-size: 12px; margin-top: 12px; }

/* ── Features badges ────────────────────────────── */
.tat-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}
.tat-feature {
  background: linear-gradient(135deg,#f0f7ff,#e8f4fd);
  border: 1px solid #c8dff5;
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #0d5fa6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.tat-feature span:first-child { font-size: 24px; }

/* ── Form ───────────────────────────────────────── */
.tat-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.tat-form-group { display: flex; flex-direction: column; gap: 6px; }
.tat-form-group.tat-full { grid-column: 1 / -1; }
.tat-form-group label { font-weight: 700; font-size: 14px; color: #333; }
.tat-req { color: #e53e3e; }

.tat-input {
  padding: 13px 16px;
  border: 2px solid #d0e8f8;
  border-radius: 10px;
  font-family: 'Tajawal', Arial, sans-serif;
  font-size: 14px;
  color: #333;
  background: #f8fbff;
  direction: rtl;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.tat-input:focus {
  outline: none;
  border-color: #0d5fa6;
  box-shadow: 0 0 0 3px rgba(13,95,166,.1);
  background: #fff;
}

/* Access code */
.tat-code-group { max-width: 380px; margin: 20px auto; }
.tat-input-code { text-align: center; font-size: 16px; font-weight: 700; letter-spacing: 2px; }

/* ── Buttons ────────────────────────────────────── */
.tat-btn {
  border: none; border-radius: 12px; padding: 14px 28px;
  font-family: 'Tajawal', Arial, sans-serif;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: all .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.tat-btn:disabled { opacity: .6; cursor: not-allowed; }
.tat-btn-full { width: 100%; }
.tat-btn-primary {
  background: linear-gradient(135deg,#0d5fa6,#1a8ec5);
  color: #fff;
  box-shadow: 0 4px 16px rgba(13,95,166,.35);
}
.tat-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 22px rgba(13,95,166,.45); }
.tat-btn-outline { background: #fff; color: #0d5fa6; border: 2px solid #0d5fa6; }
.tat-btn-outline:hover { background: #f0f7ff; }
.tat-btn-ghost { background: #f5f5f5; color: #666; }
.tat-btn-ghost:hover { background: #e8e8e8; }

/* ── Error ──────────────────────────────────────── */
.tat-error {
  background: #fff5f5; border: 1px solid #fed7d7; color: #c53030;
  border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-top: 8px;
}

/* ── Progress ───────────────────────────────────── */
.tat-progress-wrap { margin-bottom: 26px; }
.tat-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tat-section-label { background: #e8f4fd; color: #0d5fa6; border-radius: 20px; padding: 4px 14px; font-size: 12px; font-weight: 700; }
.tat-q-counter { font-size: 13px; color: #888; font-weight: 600; }
.tat-progress-bar { background: #deeef9; border-radius: 20px; height: 10px; overflow: hidden; }
.tat-progress-fill {
  background: linear-gradient(90deg,#0d5fa6,#f0a500);
  height: 100%; border-radius: 20px; transition: width .4s ease;
}

/* ── Question ───────────────────────────────────── */
.tat-question-card {
  background: #f8fbff; border-radius: 14px; padding: 26px;
  border: 2px solid #d0e8f8; margin-bottom: 22px;
  animation: tat-slide .3s ease;
}
@keyframes tat-slide { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:none} }
.tat-q-type-badge {
  display: inline-block; background: #0d5fa6; color: #fff;
  font-size: 10px; padding: 3px 12px; border-radius: 20px; margin-bottom: 14px; font-weight: 700;
}
.tat-q-text { font-size: 17px; font-weight: 700; color: #1a1a2e; margin-bottom: 20px; line-height: 1.65; }
.tat-options { display: flex; flex-direction: column; gap: 10px; }
.tat-option {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border: 2px solid #d0e8f8; border-radius: 10px; cursor: pointer;
  transition: all .2s; background: #fff; user-select: none;
}
.tat-option:hover { border-color: #0d5fa6; background: #f0f7ff; }
.tat-option.selected { border-color: #0d5fa6; background: #e8f4fd; }
.tat-option.selected .tat-option-circle { background: #0d5fa6; border-color: #0d5fa6; }
.tat-option.selected .tat-option-circle::after {
  content:''; display: block; width: 8px; height: 8px;
  background: #fff; border-radius: 50%; margin: auto;
}
.tat-option-circle {
  width: 22px; height: 22px; min-width: 22px;
  border: 2px solid #aac8e8; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.tat-option-label { font-size: 14px; font-weight: 600; }

/* ── Nav ────────────────────────────────────────── */
.tat-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tat-nav .tat-btn { min-width: 130px; }

/* ── Loading ────────────────────────────────────── */
.tat-spinner-ring {
  width: 80px; height: 80px;
  border: 6px solid #deeef9; border-top-color: #0d5fa6;
  border-radius: 50%; animation: tat-spin 1s linear infinite; margin: 0 auto 26px;
}
@keyframes tat-spin { to{transform:rotate(360deg)} }
.tat-loading-title { font-size: 22px; font-weight: 800; color: #0d5fa6; margin-bottom: 8px; }
.tat-loading-sub   { color: #666; margin-bottom: 24px; }
.tat-loading-steps { display: flex; flex-direction: column; gap: 8px; max-width: 340px; width: 100%; }
.tat-loading-step {
  background: #f0f7ff; border-radius: 8px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: #555; transition: all .4s;
}
.tat-loading-step.done { background: #e8f9f0; color: #276749; }

/* ── Results Header ─────────────────────────────── */
.tat-results-header {
  background: linear-gradient(135deg,#0d2d5e,#0d5fa6,#1a8ec5);
  color: #fff; border-radius: 18px; padding: 32px; text-align: center; margin-bottom: 24px;
}
.tat-results-logo {
  height: 70px; max-width: 250px; object-fit: contain;
  background: #fff; border-radius: 10px; padding: 6px 14px;
  margin: 0 auto 16px; display: block;
}
.tat-results-header h2 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.tat-results-name { font-size: 17px; opacity: .9; font-weight: 600; }

/* ── Score Cards ────────────────────────────────── */
.tat-score-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 24px; }
.tat-score-card { border-radius: 14px; padding: 20px; text-align: center; color: #fff; }
.tat-score-card.blue  { background: linear-gradient(135deg,#0d5fa6,#1a8ec5); }
.tat-score-card.gold  { background: linear-gradient(135deg,#b7791f,#f0a500); }
.tat-score-card.teal  { background: linear-gradient(135deg,#2c7a7b,#0a9396); }
.tat-score-card-icon  { font-size: 28px; margin-bottom: 8px; }
.tat-score-card-label { font-size: 11px; opacity: .8; margin-bottom: 4px; font-weight: 700; letter-spacing: .5px; }
.tat-score-card-value { font-size: 22px; font-weight: 800; }
.tat-score-card-desc  { font-size: 11px; opacity: .8; margin-top: 4px; }

/* ── Section Title ──────────────────────────────── */
.tat-section-title {
  font-size: 17px; font-weight: 800; color: #0d5fa6;
  margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid #e0eef9;
}

/* ── RIASEC Chart ───────────────────────────────── */
.tat-riasec-chart { display: flex; flex-direction: column; gap: 10px; }
.tat-riasec-row   { display: flex; align-items: center; gap: 12px; }
.tat-riasec-name  { width: 130px; font-size: 12px; font-weight: 700; color: #333; }
.tat-riasec-bar-wrap { flex: 1; background: #deeef9; border-radius: 10px; height: 20px; overflow: hidden; }
.tat-riasec-bar {
  height: 100%; border-radius: 10px;
  background: linear-gradient(90deg,#0d5fa6,#1a8ec5); transition: width .8s ease;
}
.tat-riasec-score { width: 32px; text-align: center; font-weight: 800; font-size: 13px; color: #0d5fa6; }

/* ── Careers Grid ───────────────────────────────── */
.tat-careers-grid-outer {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.tat-career-card-outer {
  border: 1px solid #d0e8f8; border-radius: 12px; padding: 16px 12px;
  text-align: center; background: #f8fbff; transition: transform .2s, box-shadow .2s;
}
.tat-career-card-outer:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(13,95,166,.12); }
.tat-career-icon-outer { font-size: 30px; margin-bottom: 8px; }
.tat-career-name-outer { font-size: 12px; font-weight: 800; color: #0d5fa6; margin-bottom: 6px; line-height: 1.3; }
.tat-career-desc-outer { font-size: 11px; color: #666; line-height: 1.4; }

/* ── Specs Grid ─────────────────────────────────── */
.tat-specs-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.tat-spec-card { border: 1px solid #d0e8f8; border-radius: 12px; padding: 16px; background: #f8fbff; transition: transform .2s; }
.tat-spec-card:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(13,95,166,.1); }
.tat-spec-name { font-size: 15px; font-weight: 800; color: #0d5fa6; margin-bottom: 6px; }
.tat-spec-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tat-spec-tag  { background: #e8f4fd; color: #0d5fa6; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.tat-spec-entry { font-size: 12px; color: #666; margin-bottom: 4px; }
.tat-spec-prospects { font-size: 12px; color: #276749; font-weight: 700; }

/* ── Schools ────────────────────────────────────── */
.tat-schools-list { display: flex; flex-direction: column; gap: 10px; }
.tat-school-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid #d0e8f8; border-radius: 10px; background: #f8fbff;
}
.tat-school-badge {
  background: #0d5fa6; color: #fff; border-radius: 8px; padding: 6px 12px;
  font-size: 11px; font-weight: 800; min-width: 68px; text-align: center;
}
.tat-school-info { flex: 1; }
.tat-school-name  { font-size: 13px; font-weight: 800; color: #1a1a2e; }
.tat-school-city  { font-size: 11px; color: #888; margin-top: 2px; }
.tat-school-entry { font-size: 11px; color: #666; margin-top: 2px; }

/* ── Report Card ────────────────────────────────── */
.tat-report-main-card { border: 2px solid #0d5fa6; position: relative; }
.tat-report-main-badge {
  position: absolute; top: -13px; right: 20px;
  background: linear-gradient(135deg,#0d5fa6,#1a8ec5);
  color: #fff; padding: 4px 18px; border-radius: 20px; font-size: 12px; font-weight: 800;
}

/* Report inner styles */
.tat-ai-report { font-size: 14px; line-height: 1.85; color: #333; }
.tat-ai-report h3,.tat-ai-report h4 { color: #0d5fa6; margin: 16px 0 8px; font-size: 15px; }
.tat-ai-report p { margin-bottom: 12px; text-align: justify; }
.tat-ai-report ul { padding-right: 22px; margin-bottom: 12px; }
.tat-ai-report li { margin-bottom: 6px; }
.tat-ai-report strong { color: #0d5fa6; }

/* Report sections */
.tat-report-section { margin-bottom: 22px; }
.tat-report-section h3 {
  font-size: 16px; font-weight: 800; color: #0d5fa6; margin-bottom: 12px;
  padding: 10px 16px; background: linear-gradient(90deg,#f0f7ff,#e8f4fd);
  border-radius: 8px; border-right: 4px solid #0d5fa6;
}

/* RIASEC Traits Grid */
.tat-traits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 14px 0; }
.tat-trait-card {
  background: #f0f7ff; border: 1px solid #c8dff5; border-radius: 12px;
  padding: 14px; text-align: center;
}
.tat-trait-letter { font-size: 28px; font-weight: 800; color: #0d5fa6; line-height: 1; }
.tat-trait-name   { font-size: 12px; font-weight: 800; color: #0d5fa6; margin: 4px 0; }
.tat-trait-desc   { font-size: 11px; color: #555; line-height: 1.4; }

/* Personality badges */
.tat-personality-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.tat-personality-item { background: #f8fbff; border: 1px solid #d0e8f8; border-radius: 10px; padding: 14px; }
.tat-p-badge {
  display: inline-block; border-radius: 20px; padding: 4px 14px;
  font-size: 12px; font-weight: 800; color: #fff; margin-bottom: 8px;
}
.tat-p-badge.mbti { background: linear-gradient(135deg,#b7791f,#f0a500); }
.tat-p-badge.vak  { background: linear-gradient(135deg,#2c7a7b,#0a9396); }

/* Strengths */
.tat-strengths-list { display: flex; flex-direction: column; gap: 8px; }
.tat-strength-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #f8fbff; border-radius: 8px; border-right: 3px solid #0d5fa6;
  font-size: 13px; font-weight: 600; color: #333;
}
.tat-strength-icon { font-size: 20px; min-width: 26px; }

/* Careers in report */
.tat-careers-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 12px 0; }
.tat-career-card { background: #f8fbff; border: 1px solid #d0e8f8; border-radius: 10px; padding: 12px; text-align: center; }
.tat-career-icon { font-size: 26px; margin-bottom: 6px; }
.tat-career-name { font-size: 11px; font-weight: 800; color: #0d5fa6; margin-bottom: 4px; line-height: 1.3; }
.tat-career-desc { font-size: 10px; color: #666; line-height: 1.3; }

/* Specs in report */
.tat-spec-report-item {
  padding: 12px 14px; border: 1px solid #d0e8f8; border-radius: 10px;
  background: #f8fbff; margin-bottom: 10px;
}
.tat-spec-report-item strong { font-size: 14px; color: #0d5fa6; }
.tat-spec-why   { font-size: 12px; color: #276749; margin: 4px 0; }
.tat-spec-entry { font-size: 11px; color: #666; margin: 0; }

/* Schools in report */
.tat-schools-report { display: flex; flex-direction: column; gap: 8px; }
.tat-school-report-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; background: #f8fbff; border-radius: 8px; border: 1px solid #d0e8f8; }
.tat-school-short { background: #0d5fa6; color: #fff; border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 800; min-width: 60px; text-align: center; }
.tat-school-full-name { font-size: 12px; font-weight: 800; color: #1a1a2e; }
.tat-school-city-entry { font-size: 11px; color: #666; margin-top: 2px; }

/* Tips in report */
.tat-tips-grid { display: flex; flex-direction: column; gap: 8px; }
.tat-tip-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: #f8fbff; border-radius: 10px; border-right: 3px solid #0d5fa6; }
.tat-tip-icon  { font-size: 22px; min-width: 28px; }
.tat-tip-type  { font-size: 10px; font-weight: 700; color: #888; text-transform: uppercase; margin-bottom: 3px; }
.tat-tip-text  { font-size: 13px; color: #333; line-height: 1.5; }

/* Action plan */
.tat-action-plan { display: flex; flex-direction: column; gap: 10px; }
.tat-plan-step { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; background: #f8fbff; border-radius: 10px; }
.tat-plan-num {
  width: 30px; height: 30px; min-width: 30px;
  background: #0d5fa6; color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
}
.tat-plan-step strong { display: block; font-size: 13px; color: #0d5fa6; margin-bottom: 4px; }
.tat-plan-step p { margin: 0; font-size: 12px; color: #555; }

/* Motivation */
.tat-motivate {
  background: linear-gradient(135deg,#e8f4fd,#f0faff);
  border: 2px solid #0d5fa6; border-radius: 14px; padding: 22px;
}
.tat-motivate h3 { color: #0d5fa6; margin-bottom: 10px; }
.tat-motivate p  { font-size: 15px; line-height: 1.8; color: #1a1a2e; }

/* Actions */
.tat-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 24px 0;
}
.tat-footer-note { text-align: center; font-size: 12px; color: #888; margin-top: 8px; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 640px) {
  .tat-card { padding: 20px; }
  .tat-features { grid-template-columns: repeat(2,1fr); }
  .tat-form-grid { grid-template-columns: 1fr; }
  .tat-score-cards { grid-template-columns: 1fr; }
  .tat-specs-grid  { grid-template-columns: 1fr; }
  .tat-careers-grid-outer { grid-template-columns: repeat(2,1fr); }
  .tat-careers-grid { grid-template-columns: repeat(2,1fr); }
  .tat-traits-grid  { grid-template-columns: 1fr 1fr; }
  .tat-personality-row { grid-template-columns: 1fr; }
  .tat-main-title { font-size: 20px; }
  .tat-q-text { font-size: 15px; }
  .tat-nav { flex-direction: column; }
  .tat-nav .tat-btn { width: 100%; }
  .tat-actions { flex-direction: column; }
  .tat-actions .tat-btn { width: 100%; }
  .tat-riasec-name { width: 90px; font-size: 11px; }
}