/* ═══════════════════════════════════════════════════════════════
   Camp Bru Registration Plugin — Stylesheet
   Matches HOOPS International: dark navy #1a1a2e + orange #ff6b35
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cb-navy:        #1a1a2e;
  --cb-navy-mid:    #16213e;
  --cb-navy-light:  #0f3460;
  --cb-orange:      #ff6b35;
  --cb-orange-dark: #e85a25;
  --cb-orange-glow: rgba(255,107,53,.15);
  --cb-white:       #ffffff;
  --cb-off-white:   #f7f8fc;
  --cb-gray-100:    #f0f2f8;
  --cb-gray-200:    #e4e8f0;
  --cb-gray-400:    #9aa3b5;
  --cb-gray-600:    #5c657a;
  --cb-gray-800:    #2d3448;
  --cb-green:       #22c55e;
  --cb-green-bg:    #f0fdf4;
  --cb-red:         #ef4444;
  --cb-red-bg:      #fef2f2;
  --cb-blue:        #3b82f6;
  --cb-blue-bg:     #eff6ff;
  --cb-radius:      12px;
  --cb-radius-sm:   8px;
  --cb-shadow:      0 4px 24px rgba(26,26,46,.12);
  --cb-shadow-lg:   0 8px 40px rgba(26,26,46,.18);
  --cb-transition:  0.2s ease;
  --cb-font:        'Arial', 'Helvetica Neue', sans-serif;
}

/* ── Base wrapper ── */
.camp-bru-wrapper {
  font-family: var(--cb-font);
  color: var(--cb-gray-800);
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ══════════════════════════════════════════
   REGISTRATION PAGE
══════════════════════════════════════════ */
.camp-register-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--cb-radius);
  overflow: hidden;
  box-shadow: var(--cb-shadow-lg);
  min-height: 600px;
}

/* Left panel */
.camp-register-info {
  background: var(--cb-navy);
  color: var(--cb-white);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.camp-register-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cb-orange);
  color: var(--cb-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 99px;
  width: fit-content;
}
.camp-badge-icon { stroke: var(--cb-white); flex-shrink: 0; }
.camp-register-info h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  color: var(--cb-white);
}
.camp-register-info > p {
  color: rgba(255,255,255,.75);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.camp-info-highlights {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.camp-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.camp-highlight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--cb-orange);
}
.camp-register-info .camp-highlight-icon { color: var(--cb-orange); }
.camp-highlight-item div {
  display: flex;
  flex-direction: column;
}
.camp-highlight-item strong {
  font-size: 14px;
  color: var(--cb-white);
}
.camp-highlight-item span {
  font-size: 13px;
  color: rgba(255,255,255,.6);
}
.camp-price-badge {
  margin-top: auto;
  padding: 20px;
  background: rgba(255,255,255,.08);
  border-radius: var(--cb-radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255,255,255,.12);
}
.camp-price-label {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.camp-price-amount {
  font-size: 42px;
  font-weight: 800;
  color: var(--cb-orange);
  line-height: 1.1;
}

/* Right panel */
.camp-register-form-panel {
  background: var(--cb-white);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.camp-register-form-panel h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--cb-navy);
  margin: 0;
}

/* Payment tabs */
.camp-payment-section { display: flex; flex-direction: column; gap: 16px; }
.camp-payment-section h4 { font-size: 14px; font-weight: 600; color: var(--cb-gray-600); margin: 0; text-transform: uppercase; letter-spacing: .05em; }
.camp-payment-tabs { display: flex; gap: 8px; }
.camp-pay-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid var(--cb-gray-200);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-white);
  color: var(--cb-gray-600);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--cb-transition);
}
.camp-pay-tab:hover { border-color: var(--cb-orange); color: var(--cb-orange); }
.camp-pay-tab.active { border-color: var(--cb-orange); color: var(--cb-orange); background: var(--cb-orange-glow); }

.camp-tab-pane { display: none; flex-direction: column; gap: 12px; }
.camp-tab-pane.active { display: flex; }

.camp-stripe-input {
  border: 2px solid var(--cb-gray-200);
  border-radius: var(--cb-radius-sm);
  padding: 14px;
  transition: var(--cb-transition);
  background: var(--cb-white);
}
.camp-stripe-input:focus-within { border-color: var(--cb-orange); }

.camp-secure-note {
  font-size: 12px;
  color: var(--cb-gray-400);
  text-align: center;
  margin: 0;
}
.camp-login-prompt {
  font-size: 14px;
  color: var(--cb-gray-600);
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--cb-gray-100);
}
.camp-login-prompt a { color: var(--cb-orange); font-weight: 600; text-decoration: none; }
.camp-login-prompt a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════ */

/* Gate (not logged in / not paid) */
.camp-gate { display: flex; align-items: center; justify-content: center; min-height: 300px; }
.camp-gate-box {
  text-align: center;
  background: var(--cb-white);
  border-radius: var(--cb-radius);
  padding: 48px 40px;
  box-shadow: var(--cb-shadow);
  max-width: 400px;
}
.camp-gate-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--cb-orange);
}
.camp-done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--cb-orange);
}
.camp-step-bubble .camp-icon { stroke: currentColor; }
.camp-radio-icon .camp-icon { display: block; }
.camp-btn-icon { flex-shrink: 0; }
.camp-login-remember { margin-top: -4px; }
.camp-checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--cb-gray-600);
  cursor: pointer;
}
.camp-checkbox-inline input { accent-color: var(--cb-orange); }
.camp-gate-box h3 { font-size: 20px; color: var(--cb-navy); margin: 0 0 8px; }
.camp-gate-box p  { color: var(--cb-gray-600); font-size: 15px; margin: 0 0 24px; }

/* Dashboard header */
.camp-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--cb-navy);
  border-radius: var(--cb-radius);
  padding: 24px 28px;
  margin-bottom: 24px;
  color: var(--cb-white);
}
.camp-dash-header-info { display: flex; align-items: center; gap: 16px; }
.camp-dash-avatar {
  width: 52px; height: 52px;
  background: var(--cb-orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--cb-white);
  flex-shrink: 0;
}
.camp-dash-header-info h2 {
  font-size: 20px; font-weight: 700; margin: 0 0 4px; color: var(--cb-white);
}
.camp-dash-header-info p {
  font-size: 13px; color: rgba(255,255,255,.65); margin: 0;
}
.camp-logout-btn {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.2);
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--cb-transition);
  cursor: pointer;
  white-space: nowrap;
}
.camp-logout-btn:hover {
  background: rgba(255,255,255,.2);
  color: var(--cb-white);
}

/* Progress bar */
.camp-progress-wrap {
  background: var(--cb-white);
  border-radius: var(--cb-radius);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: var(--cb-shadow);
}
.camp-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-navy);
}
.camp-pct-badge {
  background: var(--cb-orange);
  color: var(--cb-white);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
}
.camp-progress-track {
  height: 10px;
  background: var(--cb-gray-200);
  border-radius: 99px;
  overflow: hidden;
}
.camp-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--cb-orange), #ff9a6c);
  border-radius: 99px;
  transition: width 0.6s ease;
}
.camp-progress-note {
  font-size: 13px;
  color: var(--cb-gray-600);
  margin: 12px 0 0;
}

/* Step navigation */
.camp-steps-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.camp-step {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cb-white);
  border: 2px solid var(--cb-gray-200);
  border-radius: var(--cb-radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: var(--cb-transition);
}
.camp-step:hover:not(.is-locked) { border-color: var(--cb-orange); box-shadow: 0 0 0 3px var(--cb-orange-glow); }
.camp-step.is-active { border-color: var(--cb-orange); background: var(--cb-orange-glow); }
.camp-step.is-done { border-color: var(--cb-green); background: var(--cb-green-bg); }
.camp-step.is-locked { opacity: .5; cursor: not-allowed; }

.camp-step-bubble {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cb-gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: var(--cb-transition);
}
.camp-step.is-active .camp-step-bubble { background: var(--cb-orange); color: var(--cb-white); }
.camp-step.is-done   .camp-step-bubble { background: var(--cb-green);  color: var(--cb-white); }

.camp-step-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.camp-step-num   { font-size: 11px; color: var(--cb-gray-400); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.camp-step-title { font-size: 13px; font-weight: 700; color: var(--cb-navy); line-height: 1.2; }
.camp-step-status{ font-size: 11px; color: var(--cb-gray-400); }
.camp-step.is-active .camp-step-status { color: var(--cb-orange); font-weight: 600; }
.camp-step.is-done   .camp-step-status { color: var(--cb-green);  font-weight: 600; }

/* Form area */
.camp-form-area {
  background: var(--cb-white);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  min-height: 300px;
}
.camp-all-done {
  text-align: center;
  padding: 64px 40px;
}
.camp-all-done h3 { font-size: 24px; font-weight: 700; color: var(--cb-navy); margin: 0 0 12px; }
.camp-all-done p { font-size: 15px; color: var(--cb-gray-600); max-width: 440px; margin: 0 auto 10px; line-height: 1.6; }
.camp-done-note { font-size: 13px !important; color: var(--cb-gray-400) !important; }

/* Skeleton loader */
.camp-form-skeleton { padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.camp-skeleton-title  { height: 28px; width: 50%; background: var(--cb-gray-100); border-radius: 6px; animation: camp-pulse 1.4s ease-in-out infinite; }
.camp-skeleton-line   { height: 14px; background: var(--cb-gray-100); border-radius: 4px; animation: camp-pulse 1.4s ease-in-out infinite; }
.camp-skeleton-line.short { width: 60%; }
.camp-skeleton-input  { height: 44px; background: var(--cb-gray-100); border-radius: 8px; animation: camp-pulse 1.4s ease-in-out infinite; }
.camp-skeleton-btn    { height: 44px; width: 160px; background: var(--cb-gray-200); border-radius: 8px; margin-top: 8px; animation: camp-pulse 1.4s ease-in-out infinite; }
@keyframes camp-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* ══════════════════════════════════════════
   FORM CARD
══════════════════════════════════════════ */
.camp-form-card { padding: 0; }

.camp-form-card-header {
  background: linear-gradient(135deg, var(--cb-navy) 0%, var(--cb-navy-mid) 100%);
  color: var(--cb-white);
  padding: 28px 36px;
  border-radius: var(--cb-radius) var(--cb-radius) 0 0;
}
.camp-form-step-badge {
  display: inline-block;
  background: rgba(255,107,53,.25);
  color: #ffb399;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 10px;
  border: 1px solid rgba(255,107,53,.4);
}
.camp-form-card-header h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--cb-white);
}
.camp-form-card-header p {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin: 0;
}

/* Callout boxes */
.camp-info-callout {
  margin: 20px 36px 0;
  padding: 14px 18px;
  background: var(--cb-blue-bg);
  border-left: 4px solid var(--cb-blue);
  border-radius: 0 var(--cb-radius-sm) var(--cb-radius-sm) 0;
  font-size: 13.5px;
  color: #1e40af;
  line-height: 1.5;
}
.camp-info-callout--orange {
  background: #fff7ed;
  border-left-color: var(--cb-orange);
  color: #9a3412;
}

/* Form fields */
.camp-step-form, .camp-register-form-panel form {
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.camp-field { display: flex; flex-direction: column; gap: 6px; }
.camp-field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--cb-navy);
  letter-spacing: .02em;
}
.camp-req { color: var(--cb-orange); }

.camp-field input[type="text"],
.camp-field input[type="email"],
.camp-field input[type="password"],
.camp-field input[type="tel"],
.camp-field input[type="date"],
.camp-field input[type="number"],
.camp-field textarea,
.camp-field select,
.camp-step-form input[type="text"],
.camp-step-form input[type="email"],
.camp-step-form input[type="number"],
.camp-step-form input[type="date"],
.camp-step-form input[type="tel"],
.camp-step-form textarea,
.camp-register-form-panel input {
  border: 2px solid var(--cb-gray-200);
  border-radius: var(--cb-radius-sm);
  padding: 11px 14px;
  font-size: 15px;
  font-family: var(--cb-font);
  color: var(--cb-gray-800);
  background: var(--cb-white);
  transition: border-color var(--cb-transition), box-shadow var(--cb-transition);
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
.camp-field input:focus,
.camp-step-form input:focus,
.camp-step-form textarea:focus,
.camp-register-form-panel input:focus {
  border-color: var(--cb-orange);
  box-shadow: 0 0 0 3px var(--cb-orange-glow);
}
.camp-field input:invalid:not(:placeholder-shown),
.camp-step-form input:invalid:not(:placeholder-shown) {
  border-color: var(--cb-red);
}
.camp-field textarea { resize: vertical; min-height: 90px; }

.camp-field-hint { font-size: 12px; color: var(--cb-gray-400); margin: 0; line-height: 1.4; }
.camp-field-error { font-size: 12px; color: var(--cb-red); min-height: 18px; }

/* Row layout */
.camp-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.camp-field-row-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Radio cards */
.camp-radio-stack { display: flex; flex-direction: column; gap: 10px; }
.camp-radio-stack--horizontal { flex-direction: row; gap: 12px; }
.camp-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--cb-gray-200);
  border-radius: var(--cb-radius-sm);
  cursor: pointer;
  transition: var(--cb-transition);
  font-size: 14px;
  line-height: 1.4;
}
.camp-radio-card input[type="radio"] { accent-color: var(--cb-orange); flex-shrink: 0; margin-top: 2px; }
.camp-radio-card:hover { border-color: var(--cb-orange); background: var(--cb-orange-glow); }
.camp-radio-card.selected { border-color: var(--cb-orange); background: var(--cb-orange-glow); }
.camp-radio-icon { font-size: 20px; flex-shrink: 0; }
.camp-delivery-card { flex: 1; flex-direction: column; align-items: center; text-align: center; padding: 20px; }
.camp-delivery-card .camp-radio-icon { font-size: 32px; }
.camp-delivery-card input { display: none; }

/* Inline radio pills */
.camp-radio-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.camp-radio-inline--wrap { flex-wrap: wrap; }
.camp-radio-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 2px solid var(--cb-gray-200);
  border-radius: 99px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-gray-600);
  transition: var(--cb-transition);
  user-select: none;
}
.camp-radio-pill input { display: none; }
.camp-radio-pill:hover { border-color: var(--cb-orange); color: var(--cb-orange); }
.camp-radio-pill.selected { border-color: var(--cb-orange); background: var(--cb-orange); color: var(--cb-white); }

/* Checkbox cards */
.camp-checkbox-group { display: flex; gap: 10px; flex-wrap: wrap; }
.camp-checkbox-card {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--cb-gray-200);
  border-radius: var(--cb-radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: var(--cb-transition);
}
.camp-checkbox-card input { accent-color: var(--cb-orange); }
.camp-checkbox-card:hover { border-color: var(--cb-orange); background: var(--cb-orange-glow); }
.camp-checkbox-card.selected { border-color: var(--cb-orange); background: var(--cb-orange-glow); }

/* Treatment rows */
.camp-treatment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.camp-treatment-label { font-size: 14px; color: var(--cb-gray-600); white-space: nowrap; }
.camp-input-with-unit { display: flex; align-items: center; gap: 6px; }
.camp-input-with-unit input { width: 90px !important; text-align: center; }
.camp-input-with-unit span { font-size: 13px; color: var(--cb-gray-600); white-space: nowrap; }
.camp-minutes-field { margin-top: 4px; }

/* Section dividers */
.camp-section-divider {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cb-gray-400);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cb-gray-200);
  margin-top: 4px;
}
.camp-conditional-section { display: flex; flex-direction: column; gap: 20px; }

/* Form actions */
.camp-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--cb-gray-200);
  margin-top: 8px;
  gap: 12px;
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.camp-btn-primary,
.camp-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--cb-radius-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--cb-font);
  cursor: pointer;
  border: none;
  transition: var(--cb-transition);
  text-decoration: none;
  white-space: nowrap;
}
.camp-btn-primary {
  background: var(--cb-orange);
  color: var(--cb-white);
  box-shadow: 0 4px 12px rgba(255,107,53,.3);
}
.camp-btn-primary:hover:not(:disabled) {
  background: var(--cb-orange-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255,107,53,.4);
}
.camp-btn-primary:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}
.camp-btn-secondary {
  background: var(--cb-white);
  color: var(--cb-gray-600);
  border: 2px solid var(--cb-gray-200);
}
.camp-btn-secondary:hover {
  border-color: var(--cb-navy);
  color: var(--cb-navy);
}
.camp-btn-full { width: 100%; justify-content: center; }
.camp-btn-submit-final {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 4px 12px rgba(34,197,94,.3);
}
.camp-btn-submit-final:hover:not(:disabled) {
  background: linear-gradient(135deg, #15803d, #16a34a);
  box-shadow: 0 6px 18px rgba(34,197,94,.4);
}

/* ══════════════════════════════════════════
   NOTICES
══════════════════════════════════════════ */
.camp-notice {
  padding: 12px 16px;
  border-radius: var(--cb-radius-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.camp-notice-success, .camp-notice.camp-success {
  background: var(--cb-green-bg);
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.camp-notice-error, .camp-notice.camp-error {
  background: var(--cb-red-bg);
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.camp-notice-warning {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Loading spinner */
.camp-spinner-sm {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: camp-spin .7s linear infinite;
}
@keyframes camp-spin { to { transform: rotate(360deg); } }

/* Link */
.camp-link { color: var(--cb-orange); font-weight: 700; text-decoration: none; }
.camp-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   STEP 3 — PDF DOWNLOAD & UPLOAD
══════════════════════════════════════════ */
.camp-pdf-download-box {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--cb-navy) 0%, var(--cb-navy-mid) 100%);
  border-radius: var(--cb-radius);
  color: var(--cb-white);
  box-shadow: var(--cb-shadow);
}
.camp-pdf-download-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  border-radius: var(--cb-radius-sm);
  color: var(--cb-orange);
}
.camp-pdf-download-info {
  flex: 1;
  min-width: 180px;
}
.camp-pdf-download-info strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}
.camp-pdf-download-info span {
  font-size: 13px;
  opacity: .85;
  line-height: 1.45;
}
.camp-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--cb-orange);
  color: var(--cb-white) !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  border-radius: var(--cb-radius-sm);
  transition: background var(--cb-transition), transform var(--cb-transition);
  white-space: nowrap;
}
.camp-btn-download:hover {
  background: var(--cb-orange-dark);
  transform: translateY(-1px);
  color: var(--cb-white) !important;
}

.camp-pdf-uploaded-existing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--cb-green-bg);
  border: 1px solid #bbf7d0;
  border-radius: var(--cb-radius-sm);
  font-size: 14px;
  color: #15803d;
}
.camp-pdf-uploaded-existing svg { flex-shrink: 0; color: var(--cb-green); }
.camp-pdf-uploaded-existing a {
  color: var(--cb-navy-light);
  font-weight: 600;
}
.camp-pdf-uploaded-existing small {
  width: 100%;
  color: var(--cb-gray-600);
  font-size: 12px;
  margin-top: 2px;
}

.camp-file-upload-area {
  position: relative;
  margin-top: 4px;
}
.camp-file-real-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}
.camp-file-drop-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
  padding: 24px 20px;
  border: 2px dashed var(--cb-gray-200);
  border-radius: var(--cb-radius);
  background: var(--cb-off-white);
  cursor: pointer;
  transition: border-color var(--cb-transition), background var(--cb-transition), box-shadow var(--cb-transition);
  text-align: center;
}
.camp-file-drop-label svg {
  color: var(--cb-gray-400);
  transition: color var(--cb-transition);
}
.camp-file-drop-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-gray-600);
}
.camp-file-selected-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-navy);
  word-break: break-all;
  max-width: 100%;
}
.camp-file-upload-area:hover .camp-file-drop-label,
.camp-file-upload-area.is-dragover .camp-file-drop-label {
  border-color: var(--cb-orange);
  background: var(--cb-orange-glow);
  box-shadow: 0 0 0 3px var(--cb-orange-glow);
}
.camp-file-upload-area:hover .camp-file-drop-label svg,
.camp-file-upload-area.is-dragover .camp-file-drop-label svg {
  color: var(--cb-orange);
}
.camp-file-upload-area.has-file .camp-file-drop-label {
  border-color: var(--cb-green);
  border-style: solid;
  background: var(--cb-green-bg);
}

/* ══════════════════════════════════════════
   STEP 4 — ADDITIONAL COMMENTS
══════════════════════════════════════════ */
.camp-additional-comments-section {
  margin-top: 8px;
  padding: 20px;
  background: var(--cb-blue-bg);
  border: 1px solid #bfdbfe;
  border-radius: var(--cb-radius);
}
.camp-comments-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cb-navy);
}
.camp-comments-header svg {
  flex-shrink: 0;
  color: var(--cb-blue);
}
.camp-comments-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--cb-gray-600);
  line-height: 1.5;
}
.camp-comments-textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  border: 1px solid #93c5fd;
  border-radius: var(--cb-radius-sm);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  background: var(--cb-white);
  transition: border-color var(--cb-transition), box-shadow var(--cb-transition);
}
.camp-comments-textarea:focus {
  outline: none;
  border-color: var(--cb-blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}

/* ══════════════════════════════════════════
   DASHBOARD — REMAINING BALANCE PAYMENT
══════════════════════════════════════════ */
.camp-balance-section {
  margin-top: 28px;
  padding: 28px;
  background: var(--cb-white);
  border: 2px solid var(--cb-gray-200);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
}
.camp-balance-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cb-gray-200);
}
.camp-balance-header-left {
  display: flex;
  gap: 16px;
  flex: 1;
  min-width: 240px;
}
.camp-balance-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cb-orange-glow);
  border-radius: var(--cb-radius-sm);
  color: var(--cb-orange);
}
.camp-balance-header h3 {
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--cb-navy);
}
.camp-balance-header p {
  margin: 0;
  font-size: 14px;
  color: var(--cb-gray-600);
  line-height: 1.5;
}
.camp-balance-amount-badge {
  text-align: right;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--cb-navy), var(--cb-navy-mid));
  border-radius: var(--cb-radius-sm);
  color: var(--cb-white);
}
.camp-balance-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .8;
  margin-bottom: 4px;
}
.camp-balance-price {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--cb-orange);
}
.camp-balance-tab-pane {
  display: none;
}
.camp-balance-tab-pane.active {
  display: block;
}
.camp-balance-paid-confirmed {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--cb-green-bg);
  border-color: #86efac;
}
.camp-balance-paid-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cb-white);
  border-radius: 50%;
  color: var(--cb-green);
}
.camp-balance-paid-confirmed h3 {
  margin: 0 0 6px;
  color: #15803d;
}
.camp-balance-paid-confirmed p {
  margin: 0;
  color: var(--cb-gray-600);
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 820px) {
  .camp-register-wrap { grid-template-columns: 1fr; }
  .camp-register-info { padding: 32px 24px; }
  .camp-register-form-panel { padding: 32px 24px; }
  .camp-price-badge { display: none; }

  .camp-dash-header { flex-direction: column; gap: 16px; align-items: flex-start; }
  .camp-steps-nav { gap: 8px; }
  .camp-step { min-width: calc(50% - 8px); }
  .camp-field-row,
  .camp-field-row-3 { grid-template-columns: 1fr; }
  .camp-form-card-header { padding: 24px 20px; }
  .camp-step-form,
  .camp-register-form-panel form { padding: 20px; }
  .camp-info-callout { margin: 16px 20px 0; }
  .camp-radio-stack--horizontal { flex-direction: column; }
  .camp-form-actions { flex-direction: column-reverse; }
  .camp-btn-primary, .camp-btn-secondary { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .camp-bru-wrapper { padding: 12px 10px 40px; }
  .camp-step { min-width: 100%; }
  .camp-form-card-header h3 { font-size: 18px; }
  .camp-treatment-row { flex-direction: column; align-items: flex-start; }
  .camp-pdf-download-box { flex-direction: column; text-align: center; }
  .camp-btn-download { width: 100%; justify-content: center; }
  .camp-balance-header { flex-direction: column; }
  .camp-balance-amount-badge { width: 100%; text-align: center; }
}