/* DevelopAPlayer AI Rugby Assessment Tool - "DAP AI Model" theme
   Dark performance-console aesthetic: charcoal background, gold/amber
   accent, condensed technical display type. Update the CSS variables
   below if the DevelopAPlayer brand palette changes. */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

#dap-rugby-assessment {
  --dap-void: #0b0a08;
  --dap-panel: #17130d;
  --dap-panel-raised: #1f1911;
  --dap-border: #3a2c16;
  --dap-border-soft: rgba(232, 166, 60, 0.18);
  --dap-gold: #e8a63c;
  --dap-gold-bright: #ffc766;
  --dap-amber-deep: #b9700e;
  --dap-text: #f2ece0;
  --dap-text-muted: #a89a80;
  --dap-info: #5bc2e0;
  --dap-success: #3fae6a;
  --dap-danger: #e05a5a;
  --dap-radius: 12px;
  --dap-font-display: 'Rajdhani', 'Arial Narrow', sans-serif;
  --dap-font-body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;

  font-family: var(--dap-font-body);
  color: var(--dap-text);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 166, 60, 0.06), transparent 55%),
    var(--dap-void);
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  border-radius: 18px;
  position: relative;
}

#dap-rugby-assessment * { box-sizing: border-box; }

.dap-demo-banner {
  background: rgba(91, 194, 224, 0.1);
  border: 1px solid rgba(91, 194, 224, 0.4);
  color: var(--dap-info);
  font-size: 0.8rem;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.8rem;
}
.dap-simulated-notice {
  background: rgba(232, 166, 60, 0.1);
  border: 1px solid rgba(232, 166, 60, 0.35);
  color: var(--dap-gold);
  font-size: 0.82rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  margin: 0 0 1.5rem;
  text-align: center;
}

.dap-step-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 0.4rem;
}
.dap-step-eyebrow::before,
.dap-step-eyebrow::after {
  content: '';
  height: 1px;
  width: 48px;
  background: linear-gradient(90deg, transparent, var(--dap-border-soft));
}
.dap-step-eyebrow::after { background: linear-gradient(90deg, var(--dap-border-soft), transparent); }
.dap-step-eyebrow span {
  font-family: var(--dap-font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--dap-text-muted);
}

.dap-step h2 {
  font-family: var(--dap-font-display);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0 0 0.35rem;
  background: linear-gradient(180deg, var(--dap-gold-bright), var(--dap-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dap-step-sub {
  text-align: center;
  color: var(--dap-info);
  font-size: 0.92rem;
  margin: 0 0 2rem;
}

.dap-btn {
  font: inherit;
  font-family: var(--dap-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
  padding: 0.85rem 2.2rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}
.dap-btn-primary {
  background: linear-gradient(180deg, var(--dap-gold-bright), var(--dap-amber-deep));
  color: #1a1206;
  box-shadow: 0 4px 18px rgba(232, 166, 60, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dap-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(232, 166, 60, 0.4); }
.dap-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.dap-btn-secondary {
  background: var(--dap-panel-raised);
  color: var(--dap-gold);
  border: 1px solid var(--dap-border);
  text-transform: none;
  font-family: var(--dap-font-body);
  font-weight: 600;
  letter-spacing: normal;
}
.dap-btn-secondary:hover { border-color: var(--dap-gold); }
.dap-btn-row { display: flex; justify-content: center; margin: 2rem 0 0.5rem; }

.dap-panel {
  background: var(--dap-panel);
  border: 1px solid var(--dap-border);
  border-radius: var(--dap-radius);
  padding: 1.4rem 1.6rem;
}

/* ============ STEP 1: Data capture ============ */
.dap-capture-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1.1fr;
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 860px) { .dap-capture-grid { grid-template-columns: 1fr; } }

.dap-panel-label {
  font-family: var(--dap-font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--dap-text-muted);
  margin-bottom: 0.9rem;
}

.dap-dropzone {
  border: 1.5px dashed var(--dap-border);
  border-radius: var(--dap-radius);
  padding: 1.6rem 1rem;
  text-align: center;
  background: var(--dap-panel-raised);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dap-dropzone-active { border-color: var(--dap-gold); background: rgba(232, 166, 60, 0.06); }
.dap-dropzone-icon { color: var(--dap-gold); margin-bottom: 0.5rem; }
.dap-dropzone-text { font-weight: 600; margin-bottom: 0.25rem; }
.dap-dropzone-or { color: var(--dap-text-muted); font-size: 0.85rem; margin-bottom: 0.6rem; }
.dap-hint { color: var(--dap-text-muted); font-size: 0.78rem; margin-top: 0.9rem; }

.dap-photo-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
}
.dap-photo-well {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 2px solid var(--dap-border);
  background: var(--dap-panel-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: var(--dap-gold);
  transition: border-color 0.15s ease;
}
.dap-photo-well:hover { border-color: var(--dap-gold); }
.dap-photo-well img { width: 100%; height: 100%; object-fit: cover; }
.dap-photo-well-text { font-size: 0.78rem; font-weight: 600; line-height: 1.3; padding: 0 0.5rem; }
.dap-photo-caption { font-size: 0.75rem; color: var(--dap-text-muted); }

.dap-field { margin-bottom: 0.85rem; }
.dap-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dap-text-muted);
  margin-bottom: 0.3rem;
}
.dap-input, .dap-select {
  width: 100%;
  font: inherit;
  background: var(--dap-panel-raised);
  border: 1px solid var(--dap-border);
  color: var(--dap-text);
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
}
.dap-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23e8a63c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}
.dap-select option { background: var(--dap-panel-raised); color: var(--dap-text); }
.dap-input:focus, .dap-select:focus, .dap-dropzone:focus-visible, .dap-photo-well:focus-visible {
  outline: 2px solid var(--dap-gold);
  outline-offset: 1px;
}

.dap-progress-wrap { margin-top: 0.9rem; }
.dap-progress-bar { background: var(--dap-panel-raised); border: 1px solid var(--dap-border); border-radius: 999px; height: 8px; overflow: hidden; }
.dap-progress-fill { background: linear-gradient(90deg, var(--dap-amber-deep), var(--dap-gold-bright)); height: 100%; width: 0%; transition: width 0.2s ease; }
#dap-progress-label { font-size: 0.78rem; color: var(--dap-text-muted); margin-top: 0.4rem; }

.dap-error {
  color: var(--dap-danger);
  background: rgba(224, 90, 90, 0.1);
  border: 1px solid rgba(224, 90, 90, 0.35);
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}
.dap-privacy-notice { font-size: 0.76rem; color: var(--dap-text-muted); margin-top: 1.2rem; text-align: center; }

/* ============ STEP 2: Options ============ */
.dap-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) { .dap-options-grid { grid-template-columns: 1fr; } }

/* ============ STEP 3: Payment ============ */
.dap-payment-card { max-width: 480px; margin: 0 auto; text-align: center; }
.dap-fee-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--dap-border);
  margin-bottom: 0.9rem;
}
.dap-fee-label { font-family: var(--dap-font-display); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; color: var(--dap-text-muted); }
.dap-fee-amount { font-family: var(--dap-font-display); font-weight: 700; font-size: 1.6rem; color: var(--dap-gold); }
.dap-plans { display: flex; gap: 0.9rem; margin-bottom: 1.3rem; }
.dap-plan-card {
  flex: 1;
  border: 1px solid var(--dap-border);
  border-radius: var(--dap-radius);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  cursor: pointer;
  background: var(--dap-panel-raised);
}
.dap-plan-card:has(input:checked) { border-color: var(--dap-gold); background: rgba(232, 166, 60, 0.08); }
.dap-plan-card input[type="radio"] { accent-color: var(--dap-gold); }
.dap-plan-title { font-size: 0.85rem; color: var(--dap-text-muted); }
.dap-plan-price { font-family: var(--dap-font-display); font-weight: 700; font-size: 1.25rem; color: var(--dap-gold); }
.dap-payment-secure-note { font-size: 0.78rem; color: var(--dap-text-muted); margin: 0.6rem 0 1.1rem; }
#dap-paypal-button-container { margin-top: 0.5rem; }

.dap-discount-row { margin: 1.1rem 0 1.3rem; text-align: left; }
.dap-discount-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dap-text-muted);
  margin-bottom: 0.4rem;
}
.dap-discount-input-group { display: flex; gap: 0.6rem; }
.dap-discount-input-group .dap-input {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dap-discount-input-group .dap-btn-secondary { flex-shrink: 0; padding: 0.6rem 1.3rem; }
.dap-discount-success {
  color: var(--dap-success);
  background: rgba(63, 174, 106, 0.1);
  border: 1px solid rgba(63, 174, 106, 0.35);
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}
.dap-fee-strike {
  text-decoration: line-through;
  opacity: 0.55;
  font-size: 0.75em;
  font-weight: 500;
  margin-right: 0.35rem;
}
#dap-claim-free-btn { margin-top: 0.5rem; }

/* ============ STEP 4: Processing ============ */
.dap-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem 1rem;
}
.dap-processing-orb {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  position: relative;
  margin-bottom: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dap-processing-orb::before,
.dap-processing-orb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--dap-gold);
  border-right-color: var(--dap-amber-deep);
  animation: dap-orbit 2.4s linear infinite;
}
.dap-processing-orb::after { inset: 18px; animation-duration: 1.7s; animation-direction: reverse; opacity: 0.7; }
@keyframes dap-orbit { to { transform: rotate(360deg); } }
.dap-processing-orb-core {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--dap-gold-bright), var(--dap-amber-deep) 70%);
  box-shadow: 0 0 40px rgba(232, 166, 60, 0.4);
  z-index: 1;
}

.dap-stage-list { list-style: none; padding: 0; margin: 0 0 1.6rem; width: 100%; max-width: 380px; }
.dap-stage-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  color: var(--dap-text-muted);
  font-size: 0.9rem;
}
.dap-stage-list li .dap-stage-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--dap-border);
  flex-shrink: 0;
}
.dap-stage-list li.dap-stage-active { color: var(--dap-text); font-weight: 600; }
.dap-stage-list li.dap-stage-active .dap-stage-dot { background: var(--dap-gold); box-shadow: 0 0 8px var(--dap-gold); }
.dap-stage-list li.dap-stage-done .dap-stage-dot { background: var(--dap-success); }
.dap-stage-list li.dap-stage-done { color: var(--dap-text-muted); }

.dap-processing-note { color: var(--dap-text-muted); font-size: 0.85rem; text-align: center; max-width: 420px; }

/* ============ STEP 5: Results ============ */
.dap-results-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 900px) { .dap-results-grid { grid-template-columns: 1fr; } }

.dap-player-card { text-align: center; }
.dap-player-photo {
  width: 96px; height: 96px; border-radius: 50%;
  border: 2px solid var(--dap-gold);
  object-fit: cover;
  margin: 0 auto 0.9rem;
  display: block;
  background: var(--dap-panel-raised);
}
.dap-player-photo-placeholder {
  width: 96px; height: 96px; border-radius: 50%;
  border: 2px dashed var(--dap-border);
  margin: 0 auto 0.9rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--dap-text-muted); font-size: 0.7rem;
}
.dap-player-name { font-family: var(--dap-font-display); font-weight: 700; font-size: 1.3rem; margin-bottom: 0.6rem; }
.dap-player-meta { list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.85rem; }
.dap-player-meta li { padding: 0.25rem 0; border-bottom: 1px solid var(--dap-border); display: flex; justify-content: space-between; }
.dap-player-meta li span:first-child { color: var(--dap-text-muted); }
.dap-player-meta li strong { color: var(--dap-gold); font-weight: 600; }

.dap-score-ring-wrap { text-align: center; margin-top: 0.5rem; }
.dap-score-ring-value { font-family: var(--dap-font-display); font-weight: 700; font-size: 2rem; color: var(--dap-gold); }
.dap-score-ring-label { font-size: 0.72rem; color: var(--dap-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.dap-radar-panel { text-align: center; margin-bottom: 1.5rem; }
.dap-radar-panel h3 { font-family: var(--dap-font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; color: var(--dap-text-muted); margin: 0 0 1rem; }
.dap-radar-svg-wrap { position: relative; display: inline-block; }

.dap-meta-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 700px) { .dap-meta-bar { grid-template-columns: 1fr; } }
.dap-meta-item { background: var(--dap-panel-raised); border: 1px solid var(--dap-border); border-radius: 8px; padding: 0.7rem 0.9rem; }
.dap-meta-item span { display: block; font-size: 0.72rem; color: var(--dap-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.15rem; }
.dap-meta-item strong { font-family: var(--dap-font-display); font-size: 1.05rem; }

.dap-summary-text { font-size: 0.92rem; line-height: 1.6; color: var(--dap-text); }
.dap-summary-text p { margin: 0 0 0.7rem; }
.dap-summary-text p:last-child { margin-bottom: 0; }

.dap-breakdown-list { list-style: none; padding: 0; margin: 0; }
.dap-breakdown-list li { margin-bottom: 0.7rem; }
.dap-breakdown-row { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.25rem; }
.dap-breakdown-row strong { color: var(--dap-gold); }
.dap-breakdown-track { background: var(--dap-panel-raised); border: 1px solid var(--dap-border); border-radius: 999px; height: 8px; overflow: hidden; }
.dap-breakdown-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--dap-amber-deep), var(--dap-gold-bright)); }

.dap-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 700px) { .dap-two-col { grid-template-columns: 1fr; } }
.dap-panel-strengths { border-color: rgba(63, 174, 106, 0.35); }
.dap-panel-workons { border-color: rgba(224, 90, 90, 0.35); }
.dap-panel-strengths h3 { color: var(--dap-success); }
.dap-panel-workons h3 { color: var(--dap-danger); }
.dap-two-col h3 { font-family: var(--dap-font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.95rem; margin: 0 0 0.8rem; }

.dap-feedback-list { list-style: none; padding: 0; margin: 0; }
.dap-feedback-item { border-bottom: 1px solid var(--dap-border); padding: 0.8rem 0; }
.dap-feedback-item:last-child { border-bottom: none; padding-bottom: 0; }
.dap-jump-link {
  font: inherit;
  font-family: var(--dap-font-display);
  font-weight: 700;
  color: var(--dap-gold);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 0.3rem;
  display: inline-block;
  font-size: 0.85rem;
}
.dap-feedback-item p { margin: 0.2rem 0; font-size: 0.85rem; color: var(--dap-text-muted); }
.dap-impact { font-style: italic; }

.dap-hpc-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.dap-hpc-table th, .dap-hpc-table td { border: 1px solid var(--dap-border); padding: 0.4rem 0.5rem; text-align: left; }
.dap-hpc-table th { background: var(--dap-panel-raised); color: var(--dap-text-muted); font-weight: 600; }

.dap-video-panel video { width: 100%; border-radius: var(--dap-radius); background: #000; border: 1px solid var(--dap-border); }
.dap-timestamp-list { list-style: none; margin: 0.75rem 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.dap-timestamp-item + .dap-timestamp-item { margin-top: 0.4rem; }
.dap-timestamp-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--dap-panel-raised);
  border: 1px solid var(--dap-border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  color: var(--dap-text);
}
.dap-strength .dap-timestamp-btn { border-left: 3px solid var(--dap-success); }
.dap-work-on .dap-timestamp-btn { border-left: 3px solid var(--dap-danger); }
.dap-developing .dap-timestamp-btn { border-left: 3px solid var(--dap-gold); }

.dap-brand-footer {
  text-align: center;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--dap-border);
  color: var(--dap-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dap-brand-footer strong { color: var(--dap-gold); }

@media print {
  #dap-rugby-assessment [data-step]:not([data-step="report"]) { display: none !important; }
  .dap-video-panel video { display: none; }
  .dap-btn { display: none; }
  #dap-rugby-assessment { background: #fff; color: #111; }
}

@media (prefers-reduced-motion: reduce) {
  .dap-processing-orb::before, .dap-processing-orb::after { animation: none; }
}