/* TDS Recovery Poster Generator - Patriotic Gift Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@400;500;700&family=Caveat:wght@400;600&display=swap');

:root {
  /* Bold Patriotic Color Palette */
  --patriot-red: #C41E3A;
  --patriot-blue: #002868;
  --patriot-white: #FFFFFF;
  --accent-gold: #FFD700;
  --patriot-cream: #F5F5DC;
  --success-green: #27AE60;
  --danger-red: #E74C3C;
  --text-dark: #1a1a1a;
  --text-muted: #6B7280;
  --border-light: #E5E7EB;
  --shadow-soft: 0 4px 20px rgba(0, 40, 104, 0.08);
  --shadow-prescription: 0 8px 30px rgba(0, 40, 104, 0.15);
  --shadow-patriotic: 0 6px 25px rgba(196, 30, 58, 0.2);
  
  /* Typography */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Lora', Georgia, serif;
  --font-signature: 'Caveat', cursive;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-prescription: 8px;
}

/* Base Styling */
body {
  font-family: var(--font-ui);
  background: linear-gradient(135deg, var(--patriot-cream) 0%, var(--patriot-white) 100%);
  color: var(--text-dark);
  line-height: 1.6;
}

/* Typography System */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--patriot-blue);
  margin-bottom: var(--spacing-md);
}

.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--patriot-blue);
}

.signature-text {
  font-family: var(--font-signature);
  font-size: 1.2rem;
  color: var(--patriot-red);
}

/* Header Styling */
.medical-header {
  background: var(--patriot-blue);
  position: relative;
  box-shadow: var(--shadow-patriotic);
  padding: var(--spacing-lg) 0;
  border-bottom: 4px solid var(--patriot-red);
}

.medical-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--patriot-red) 0px,
    var(--patriot-red) 20px,
    var(--patriot-white) 20px,
    var(--patriot-white) 40px,
    var(--patriot-blue) 40px,
    var(--patriot-blue) 60px
  );
}

.medical-header .navbar-brand {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: white !important;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.rx-icon {
  font-size: 2rem;
  color: var(--accent-gold);
}

/* Hero Section - Bold Patriotic Style */
.hero-prescription {
  background: var(--patriot-cream);
  padding: var(--spacing-2xl) 0;
  position: relative;
  overflow: hidden;
  border-top: 8px solid var(--patriot-red);
  border-bottom: 8px solid var(--patriot-blue);
}

.hero-prescription::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: 
    linear-gradient(90deg, transparent 0%, transparent 10%, rgba(196, 30, 58, 0.05) 10%, rgba(196, 30, 58, 0.05) 15%, transparent 15%),
    linear-gradient(90deg, transparent 85%, rgba(0, 40, 104, 0.05) 85%, rgba(0, 40, 104, 0.05) 90%, transparent 90%);
  z-index: 0;
}

.prescription-header {
  background: var(--patriot-white);
  border: 4px solid var(--patriot-blue);
  border-radius: var(--radius-prescription);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-patriotic);
  position: relative;
  z-index: 1;
  margin-bottom: var(--spacing-xl);
}

.prescription-header::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  height: 12px;
  background: var(--patriot-red);
  border-radius: var(--radius-prescription) var(--radius-prescription) 0 0;
  z-index: -1;
}

.prescription-stamp {
  position: absolute;
  top: -15px;
  right: var(--spacing-lg);
  background: var(--patriot-red);
  color: var(--patriot-white);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-signature);
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transform: rotate(-5deg);
  box-shadow: var(--shadow-patriotic);
  border: 2px solid var(--patriot-white);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.prescription-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--patriot-blue);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.prescription-subtitle {
  color: var(--text-muted);
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-xl);
}

/* Prescription Card Styling */
.prescription-card {
  background: var(--patriot-white);
  border: 4px solid var(--patriot-blue);
  border-radius: var(--radius-prescription);
  box-shadow: var(--shadow-patriotic);
  padding: var(--spacing-xl);
  height: 100%;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.prescription-card::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  height: 12px;
  background: var(--patriot-red);
  border-radius: var(--radius-prescription) var(--radius-prescription) 0 0;
  z-index: -1;
}

.prescription-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(196, 30, 58, 0.25);
  border-color: var(--patriot-red);
}

.prescription-card::before {
  content: 'Rx';
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  font-family: var(--font-signature);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--patriot-red);
}

.prescription-header-card {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.prescription-type {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--patriot-blue);
  margin-bottom: var(--spacing-xs);
}

.prescription-price {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--patriot-red);
  margin-bottom: var(--spacing-md);
}

.prescription-description {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: var(--spacing-lg);
}

.prescription-benefits {
  list-style: none;
  padding: 0;
  margin-bottom: var(--spacing-lg);
}

.prescription-benefits li {
  padding: var(--spacing-xs) 0;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.prescription-benefits li::before {
  content: '✓';
  color: var(--success-green);
  font-weight: bold;
  margin-right: var(--spacing-xs);
}

/* Bold Patriotic Button Styling */
.btn-therapy {
  background: var(--patriot-red);
  border: 3px solid var(--patriot-white);
  color: white;
  font-weight: 700;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
  font-size: 1.1rem;
  width: 100%;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: var(--shadow-patriotic);
}

.btn-therapy:hover {
  background: var(--patriot-blue);
  border-color: var(--patriot-red);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 40, 104, 0.3);
}

.btn-therapy-secondary {
  background: var(--patriot-blue);
  border: 3px solid var(--patriot-red);
  color: var(--patriot-white);
  font-weight: 700;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
  font-size: 1.1rem;
  width: 100%;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: var(--shadow-patriotic);
}

.btn-therapy-secondary:hover {
  background: var(--patriot-red);
  border-color: var(--patriot-blue);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(196, 30, 58, 0.3);
}

/* Sample Diagnoses Section */
.diagnoses-showcase {
  background: var(--patriot-blue);
  padding: var(--spacing-2xl) 0;
  margin-top: var(--spacing-2xl);
  position: relative;
}

.diagnoses-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--patriot-red);
}

.diagnoses-showcase::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--patriot-red);
}

.diagnoses-showcase h3 {
  color: var(--patriot-white) !important;
}

.diagnoses-showcase .text-muted {
  color: rgba(255, 255, 255, 0.8) !important;
}

.diagnosis-sample {
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border-left: 4px solid var(--patriot-red);
  margin-bottom: var(--spacing-md);
  transition: transform 0.2s ease;
}

.diagnosis-sample:hover {
  transform: translateY(-2px);
}

.diagnosis-sample p {
  margin: 0;
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Form Styling */
.clinical-form {
  background: var(--patriot-white);
  border: 4px solid var(--patriot-blue);
  border-radius: var(--radius-prescription);
  box-shadow: var(--shadow-patriotic);
  padding: var(--spacing-2xl);
  position: relative;
}

.clinical-form::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  height: 12px;
  background: var(--patriot-red);
  border-radius: var(--radius-prescription) var(--radius-prescription) 0 0;
  z-index: -1;
}

.form-label {
  font-weight: 600;
  color: var(--patriot-blue);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.form-control, .form-select {
  border: 2px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-control:focus, .form-select:focus {
  border-color: var(--patriot-red);
  border-width: 3px;
  box-shadow: 0 0 0 4px rgba(196, 30, 58, 0.15);
  outline: none;
}

.form-text {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: var(--spacing-xs);
}

/* TDS Level Meter */
.frustration-meter {
  background: var(--border-light);
  height: 8px;
  border-radius: 4px;
  margin: var(--spacing-md) 0;
  overflow: hidden;
}

.frustration-level {
  height: 100%;
  background: linear-gradient(90deg, var(--success-green) 0%, var(--accent-gold) 50%, var(--danger-red) 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Success Page Styling */
.success-frame {
  background: white;
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-prescription);
  text-align: center;
  position: relative;
}

.poster-frame {
  border: 8px solid var(--patriot-blue);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  background: white;
  display: inline-block;
  box-shadow: var(--shadow-soft);
}

.poster-watermark {
  position: absolute;
  bottom: var(--spacing-md);
  right: var(--spacing-md);
  background: rgba(220, 20, 60, 0.9);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-signature);
}

/* Trigger-RX campaign experience */
html { scroll-behavior: smooth; }
body { background:#f7f3ec; color:#171717; }
.brand-red { color:#ef3340; }
.nav-links { display:flex; gap:1.25rem; }
.nav-links a { color:#fff; text-decoration:none; font-weight:700; font-size:.9rem; }
.launch-strip { background:#111; color:#fff; text-align:center; padding:.65rem 1rem; font-weight:800; letter-spacing:.15em; font-size:.78rem; }
.hero { min-height:570px; display:grid; grid-template-columns:1fr minmax(320px,1.3fr) 1fr; background:#fff; overflow:hidden; border-bottom:1px solid #d7d0c6; }
.hero-side { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#fff; padding:3rem 2rem; gap:.8rem; position:relative; }
.hero-side:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at center,transparent,rgba(0,0,0,.25)); }
.hero-side > * { z-index:1; }
.hero-blue { background:linear-gradient(145deg,#082e5f,#0b4f89); }
.hero-red { background:linear-gradient(215deg,#7d1019,#c82d36); }
.party-mark { width:88px; height:88px; border:3px solid rgba(255,255,255,.8); display:grid; place-items:center; border-radius:50%; font:800 3rem/1 var(--font-heading); }
.hero-side strong { font:700 1.35rem/1.15 var(--font-heading); text-transform:uppercase; max-width:220px; }
.hero-side small { max-width:210px; opacity:.85; }
.hero-center { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:3.5rem 2.2rem; background:linear-gradient(160deg,#fff 25%,#f3eee5); position:relative; }
.eyebrow { letter-spacing:.12em; font-size:.7rem; font-weight:800; color:#54504a; }
.eyebrow.dark { color:#6a6259; }
.hero h1 { font:800 clamp(3rem,6vw,5.6rem)/.84 var(--font-heading); text-transform:uppercase; color:#151515; margin:1.2rem 0; letter-spacing:-.05em; }
.hero h1 span { color:#a71925; }
.wordmark { font:800 clamp(1.65rem,3vw,2.6rem)/1 var(--font-ui); letter-spacing:-.05em; border-block:2px solid #222; padding:.65rem 1rem; }
.wordmark b { color:#bd1e2c; }.wordmark sup { font-size:.5em; }
.lead { font-size:1.05rem; max-width:430px; margin:1.25rem 0 .5rem; }
.hero-values { font-weight:800; color:#173d6b; letter-spacing:.08em; }.hero-values i { color:#b3202d; }
.primary-cta,.secondary-cta,.light-cta { display:inline-flex; align-items:center; justify-content:center; gap:.8rem; border:0; border-radius:3px; text-decoration:none; text-transform:uppercase; letter-spacing:.05em; font-weight:800; padding:1rem 1.35rem; cursor:pointer; }
.primary-cta { background:#b51e2b;color:#fff;box-shadow:0 8px 20px rgba(181,30,43,.22); }
.primary-cta:disabled,.secondary-cta:disabled{background:#8d8a84;color:#fff;cursor:not-allowed;box-shadow:none}
.primary-cta:hover { background:#86131d;color:#fff; }.secondary-cta { background:#123d6c;color:#fff; }.secondary-cta:hover{color:#fff;background:#082b51}
.hero .primary-cta { margin:1rem 0 .6rem; min-width:240px; }.hero-center small { color:#68625a; }
.steps-bar { background:#fff; display:grid; grid-template-columns:repeat(3,1fr); max-width:1100px; margin:-1.8rem auto 0; position:relative; box-shadow:0 10px 35px rgba(33,25,15,.12); }
.steps-bar div { display:flex; padding:1.4rem; align-items:center; gap:1rem; border-right:1px solid #ddd5ca; }
.steps-bar b { font:800 2rem var(--font-heading); color:#b51e2b; }.steps-bar span { font-size:.8rem;color:#6a6259 }.steps-bar strong{display:block;color:#163e6d;font-size:.82rem}
.quiz-section,.plans-section { padding:6rem max(1.5rem,calc((100vw - 1100px)/2)); }
.section-heading { max-width:700px; margin:0 auto 2.5rem; text-align:center; }.section-heading h2 { font-size:clamp(2rem,4vw,3.2rem); color:#171717; margin:.5rem 0 }.section-heading p{color:#68625a}
.quiz-shell,.result-shell { max-width:760px;margin:auto;background:#fff;padding:clamp(1.3rem,4vw,3rem);box-shadow:0 15px 50px rgba(40,31,18,.12);border-top:6px solid #143f70}
.quiz-topline{display:flex;justify-content:space-between;font-size:.78rem;font-weight:800;color:#6b6259;text-transform:uppercase}
.progress-track{height:6px;background:#e8e2d9;margin:1rem 0 2.2rem}.progress-track span{display:block;height:100%;background:#b51e2b;transition:.25s}
.quiz-question{display:flex;gap:1rem;align-items:flex-start}.quiz-question span{font:800 1rem var(--font-heading);color:#b51e2b}.quiz-question h3{font-size:clamp(1.5rem,4vw,2.15rem);color:#171717}
.quiz-options{display:grid;gap:.7rem;margin:1.6rem 0}.quiz-options button{background:#faf8f4;border:1px solid #d9d2c8;padding:1rem;text-align:left;font-weight:650;transition:.15s}.quiz-options button:hover,.quiz-options button.selected{border-color:#143f70;background:#eef4fa;transform:translateX(3px)}.quiz-options b{display:inline-grid;place-items:center;width:28px;height:28px;background:#143f70;color:white;margin-right:.8rem;border-radius:50%}
.text-button{border:0;background:none;color:#6a6259;text-decoration:underline;padding:.5rem;cursor:pointer}
.result-shell{text-align:center;border-color:#b51e2b}.result-card{border:2px solid #1d1d1d;padding:2rem;background:#fcfbf8}.result-kicker{font-size:.75rem;font-weight:800;letter-spacing:.15em;margin:1rem 0}
.score-ring{width:145px;height:145px;border:10px solid #b51e2b;border-right-color:#143f70;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:auto}.score-ring strong{font:800 3.5rem var(--font-heading)}.score-ring span{color:#6b6259}.severity{font-weight:800;color:#b51e2b;letter-spacing:.08em;margin:1rem 0 .3rem}.result-card h2{color:#171717;font-size:2.2rem}
.orders{display:flex;text-align:left;background:#eee9e0;margin:1.5rem 0;padding:1rem;gap:1rem}.orders .rx{font:700 3rem var(--font-heading);color:#b51e2b}.orders ul{margin:.5rem 0 0;padding-left:1.2rem}.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.5rem}.result-next{font-weight:800;color:#143f70}
.plans-section{background:#fff}.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:1180px;margin:auto}.plan{border:1px solid #d5cec3;padding:1.5rem;display:flex;flex-direction:column;min-height:360px}.plan.featured{border:3px solid #b51e2b;transform:translateY(-10px)}.plan h3{color:#171717;font-size:1.45rem;margin-top:1rem}.plan .price{font:800 2.1rem var(--font-heading);color:#143f70}.plan p{color:#6b6259;flex:1}.plan-label{align-self:flex-start;background:#284f2c;color:white;padding:.3rem .55rem;font-size:.65rem;font-weight:800}.plan-label.red{background:#b51e2b}.plan-label.blue{background:#143f70}.plan-label.gold{background:#9a6d10}.plan .primary-cta,.plan .secondary-cta{width:100%;font-size:.72rem}.muted-plan{background:#f3f0ea}.cyber-offer{max-width:920px;margin:2rem auto 0;padding:1.2rem;background:#121212;color:white;text-align:center}.cyber-offer b{color:#ff4654}.cyber-offer span{color:#cbc4ba}
.thanksgiving{background:#143f70;color:#fff;text-align:center;padding:5rem 1.5rem}.thanksgiving span{color:#f6c44a;font-weight:800;letter-spacing:.14em;font-size:.75rem}.thanksgiving h2{color:#fff;max-width:850px;margin:1rem auto;font-size:clamp(2rem,4vw,3.2rem)}.thanksgiving p{opacity:.8}.light-cta{background:#fff;color:#143f70;margin-top:1rem}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);background:#fff}.trust-row div{padding:1.5rem;text-align:center;border-right:1px solid #ded8cf}.trust-row b,.trust-row span{display:block}.trust-row b{color:#143f70}.trust-row span{font-size:.78rem;color:#6b6259;margin-top:.35rem}
.site-footer{background:#111;color:#fff;padding:1.8rem}.site-footer .container{display:flex;justify-content:space-between;gap:1rem}.site-footer span{color:#bbb;font-size:.8rem}
@media(max-width:850px){.nav-links{display:none}.hero{grid-template-columns:1fr}.hero-center{order:-1;min-height:570px}.hero-side{min-height:180px;padding:2rem}.hero-side small{display:none}.party-mark{width:56px;height:56px;font-size:2rem}.steps-bar{margin:0;grid-template-columns:1fr}.steps-bar div{border-bottom:1px solid #ddd}.plan-grid{grid-template-columns:1fr 1fr}.plan.featured{transform:none}.trust-row{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.medical-header{padding:1rem 0}.medical-header .navbar-brand{font-size:1.35rem}.launch-strip{font-size:.62rem}.hero-center{padding:2.5rem 1rem}.hero h1{font-size:3.15rem}.quiz-section,.plans-section{padding:4rem 1rem}.plan-grid,.trust-row{grid-template-columns:1fr}.site-footer .container{flex-direction:column}.result-actions{flex-direction:column}.result-actions>*{width:100%}}

/* Alert Styling */
.alert {
  border-radius: var(--radius-sm);
  border: 3px solid var(--patriot-blue);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.alert::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  height: 8px;
  background: var(--patriot-red);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.alert-success {
  background: var(--patriot-white);
  color: var(--patriot-blue);
  font-weight: 600;
}

.alert-success h2 {
  color: var(--patriot-red) !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.alert-danger {
  background: rgba(231, 76, 60, 0.1);
  color: var(--danger-red);
  border-left: 4px solid var(--danger-red);
}

/* Responsive Design */
@media (max-width: 768px) {
  .prescription-title {
    font-size: 2rem;
  }
  
  .prescription-card {
    margin-bottom: var(--spacing-lg);
  }
  
  .hero-prescription {
    padding: var(--spacing-xl) 0;
  }
}