/* ========================================================================
   SPRS Score Calculator — Deferred Styles (Dark Authority)
   Extracted from inline <style> for PageSpeed optimization
   ======================================================================== */

/* Risk level colors */
.risk-full { color: #10B981; }
.risk-low { color: #22c55e; }
.risk-medium { color: #F59E0B; }
.risk-high { color: #F97316; }
.risk-critical { color: #EF4444; }
.border-full { border-color: #10B981 !important; }
.border-low { border-color: #22c55e !important; }
.border-medium { border-color: #F59E0B !important; }
.border-high { border-color: #F97316 !important; }
.border-critical { border-color: #EF4444 !important; }

/* Score bar markers */
.sprs-score-range { display: flex; justify-content: space-between; width: 100%; max-width: 440px; margin: 0 auto; }
.sprs-score-range span { font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary, rgba(240,240,240,0.62)); }

/* Progress bar */
.sprs-progress { display: flex; align-items: center; gap: 16px; padding: 16px 24px; background: var(--surface-1, #111B33); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; margin-bottom: 24px; max-width: 1200px; margin-left: auto; margin-right: auto; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sprs-progress__text { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; min-width: 170px; }
.sprs-progress__bar { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.sprs-progress__fill { height: 100%; border-radius: 4px; background: var(--cta-gradient, linear-gradient(135deg, #00A9E0, #7C3AED)); transition: width 0.4s cubic-bezier(0.16,1,0.3,1); width: 0%; }
.sprs-progress__score { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1.25rem; font-weight: 800; min-width: 60px; text-align: right; transition: color 0.3s; }

/* Calculator container */
.sprs-calc { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Family accordion */
.sprs-family { background: var(--surface-1, #111B33); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.2s; }
.sprs-family:hover { border-color: rgba(255,255,255,0.10); }
.sprs-family__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; user-select: none; gap: 16px; transition: background 0.2s; }
.sprs-family__header:hover { background: rgba(255,255,255,0.02); }
.sprs-family__left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.sprs-family__code { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent, #00A9E0); background: rgba(0,169,224,0.08); padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.sprs-family__name { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1rem; font-weight: 700; color: var(--text-primary, #F0F0F0); }
.sprs-family__right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.sprs-family__count { font-size: 0.8125rem; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; }
.sprs-family__status { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.sprs-family__status--complete { color: #10B981; }
.sprs-family__status--partial { color: #F59E0B; }
.sprs-family__status--none { color: var(--text-tertiary); }
.sprs-family__chevron { width: 20px; height: 20px; color: var(--text-tertiary); transition: transform 0.3s; flex-shrink: 0; }
.sprs-family[data-open="true"] .sprs-family__chevron { transform: rotate(180deg); }
.sprs-family__body { display: none; border-top: 1px solid rgba(255,255,255,0.04); }
.sprs-family[data-open="true"] .sprs-family__body { display: block; }

/* Bulk actions */
.sprs-family__bulk { display: flex; gap: 12px; padding: 12px 24px; background: rgba(0,169,224,0.03); border-bottom: 1px solid rgba(255,255,255,0.04); }
.sprs-family__bulk-btn { font-size: 0.75rem; font-weight: 600; color: var(--accent, #00A9E0); background: none; border: 1px solid rgba(0,169,224,0.2); padding: 4px 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.sprs-family__bulk-btn:hover { background: rgba(0,169,224,0.1); border-color: rgba(0,169,224,0.4); }

/* Control row */
.sprs-control { display: flex; align-items: flex-start; gap: 14px; padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.15s; cursor: pointer; }
.sprs-control:last-child { border-bottom: none; }
.sprs-control:hover { background: rgba(0,169,224,0.02); }
.sprs-control__check { flex-shrink: 0; margin-top: 2px; }
.sprs-control__check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent, #00A9E0); cursor: pointer; border-radius: 4px; }
.sprs-control__info { flex: 1; min-width: 0; }
.sprs-control__id { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 0.75rem; font-weight: 700; color: var(--accent, #00A9E0); margin-bottom: 2px; }
.sprs-control__text { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; }
.sprs-control__weight { flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.sprs-control__weight--5 { background: rgba(239,68,68,0.1); color: #EF4444; border: 1px solid rgba(239,68,68,0.2); }
.sprs-control__weight--3 { background: rgba(245,158,11,0.1); color: #F59E0B; border: 1px solid rgba(245,158,11,0.2); }
.sprs-control__weight--1 { background: rgba(16,185,129,0.1); color: #10B981; border: 1px solid rgba(16,185,129,0.2); }
.sprs-control.checked .sprs-control__text { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.15); }

/* Weight legend */
.sprs-legend { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.sprs-legend__item { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-secondary); }
.sprs-legend__dot { width: 10px; height: 10px; border-radius: 50%; }
.sprs-legend__dot--5 { background: #EF4444; }
.sprs-legend__dot--3 { background: #F59E0B; }
.sprs-legend__dot--1 { background: #10B981; }

/* CTA Section */
.sprs-cta { background: linear-gradient(135deg, rgba(0,169,224,0.06), rgba(124,58,237,0.08)); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 56px 40px; text-align: center; margin: 48px auto 0; max-width: 800px; }
.sprs-cta h2 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(1.375rem, 2.5vw, 1.75rem); font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.sprs-cta p { font-size: 1rem; color: var(--text-secondary); margin-bottom: 32px; line-height: 1.65; max-width: 560px; margin-left: auto; margin-right: auto; }
.sprs-cta__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 520px; margin: 0 auto; }
.sprs-cta__form input { background: var(--surface-1, #111B33); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 14px 16px; font-size: 0.9375rem; color: var(--text-primary); font-family: var(--font-body, 'Inter', sans-serif); outline: none; transition: border-color 0.2s; width: 100%; }
.sprs-cta__form input::placeholder { color: var(--text-tertiary); }
.sprs-cta__form input:focus { border-color: var(--accent, #00A9E0); }
.sprs-cta__form input[name="phone"] { grid-column: 1 / -1; }
.sprs-cta__submit { grid-column: 1 / -1; background: var(--cta-gradient, linear-gradient(135deg, #00A9E0, #7C3AED)); color: #fff; border: none; border-radius: 10px; padding: 16px 32px; font-size: 1rem; font-weight: 700; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); cursor: pointer; transition: opacity 0.2s, transform 0.2s; letter-spacing: 0.02em; }
.sprs-cta__submit:hover { opacity: 0.92; transform: translateY(-1px); }
.sprs-cta__privacy { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 16px; grid-column: 1 / -1; }
.sprs-cta__privacy a { color: var(--accent); text-decoration: none; }

/* Actions bar */
.sprs-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.sprs-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 10px; font-size: 0.875rem; font-weight: 600; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); cursor: pointer; transition: all 0.2s; border: none; }
.sprs-btn--primary { background: var(--cta-gradient, linear-gradient(135deg, #00A9E0, #7C3AED)); color: #fff; }
.sprs-btn--primary:hover { opacity: 0.9; transform: translateY(-1px); }
.sprs-btn--secondary { background: transparent; color: var(--accent, #00A9E0); border: 1px solid rgba(0,169,224,0.3); }
.sprs-btn--secondary:hover { background: rgba(0,169,224,0.08); }
.sprs-btn--ghost { background: transparent; color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.1); }
.sprs-btn--ghost:hover { border-color: rgba(255,255,255,0.2); color: var(--text-primary); }

/* FAQ section */
.sprs-faq { max-width: 800px; margin: 56px auto 0; padding: 0 24px; }
.sprs-faq-item { border-bottom: 1px solid rgba(255,255,255,0.06); }
.sprs-faq-item__q { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; cursor: pointer; user-select: none; }
.sprs-faq-item__q h3 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.sprs-faq-item__q svg { width: 18px; height: 18px; color: var(--text-tertiary); transition: transform 0.3s; flex-shrink: 0; margin-left: 16px; }
.sprs-faq-item[data-open="true"] .sprs-faq-item__q svg { transform: rotate(180deg); }
.sprs-faq-item__a { display: none; padding: 0 0 20px; font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }
.sprs-faq-item[data-open="true"] .sprs-faq-item__a { display: block; }

/* Responsive */
@media (max-width: 768px) {
  .sprs-hero { padding: 60px 0 32px; min-height: auto; }
  .sprs-progress { flex-wrap: wrap; gap: 10px; padding: 12px 16px; position: static; }
  .sprs-progress__text { min-width: auto; }
  .sprs-progress__bar { order: 3; width: 100%; }
  .sprs-family__header { padding: 16px 18px; flex-wrap: wrap; }
  .sprs-family__name { font-size: 0.9375rem; }
  .sprs-family__right { width: 100%; justify-content: flex-end; gap: 10px; margin-top: 4px; }
  .sprs-control { padding: 12px 18px; }
  .sprs-cta { padding: 40px 24px; }
  .sprs-cta__form { grid-template-columns: 1fr; }
  .sprs-actions { flex-direction: column; align-items: stretch; }
  .sprs-btn { justify-content: center; }
  .sprs-legend { gap: 12px; }
}
@media (max-width: 480px) {
  .sprs-score-gauge { width: 180px; height: 108px; }
  .sprs-score-gauge__track, .sprs-score-gauge__fill { width: 180px; height: 180px; border-width: 14px; }
  .sprs-score-gauge__value { font-size: 2.5rem; }
}

/* Print-friendly styles for PDF report */
@media print {
  body, body #content_container, body #content { background: #fff !important; color: #111 !important; }
  .sprs-progress, .sprs-actions, .sprs-cta, .sprs-faq, .sprs-hero__badge, #site-header, #footer, .banner-container, .breadcrumbs, .chatbot-container, .gdpr-banner { display: none !important; }
  .sprs-hero { min-height: auto; padding: 20px 0; }
  .sprs-score-display { page-break-after: always; }
  .sprs-family { break-inside: avoid; border-color: #ddd; margin-bottom: 8px; }
  .sprs-family__body { display: block !important; }
  .sprs-family__header { background: #f5f5f5; }
  .sprs-family__code { background: #e0f0ff; color: #01375a; }
  .sprs-family__name { color: #111; }
  .sprs-control__id { color: #01375a; }
  .sprs-control__text { color: #333; }
  .sprs-control.checked .sprs-control__text { color: #10B981; text-decoration: none; }
  .sprs-control.checked .sprs-control__text::before { content: '\2713 '; font-weight: 700; color: #10B981; }
  .sprs-score-gauge__value { color: #111; }
}