/* ==========================================================================
   Creste Hair - Treatment Plan Stylesheet
   Designed with exact brand guidelines, Space Grotesk & Space Mono typography
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Space Mono';
  src: url('assets/fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Space Mono';
  src: url('assets/fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

:root {
  --color-primary: #243227;
  --color-dark: #141f17;
  --color-forest: #1a261d;
  --color-moss: #9db49b;
  --color-sage: #9eb59d;
  --color-sage-light: #e6ede6;
  --color-warmivory: #e6e1d3;
  --color-bg-light: #f4f5f4;
  --color-card-bg: #f4f5f4;
  --color-card-border: #e3e7e4;
  --color-text-main: #18221b;
  --color-text-muted: #4e5a51;
  --color-text-dim: #79857c;
  
  --font-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Space Mono', monospace;
  
  --a4-width: 210mm;
  --a4-height: 297mm;
  --page-padding: 30px 42px 24px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  background-color: #0d140f;
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.35;
  overflow-x: hidden;
}

/* ==========================================================================
   Editor Header & Navigation Bar (Screen Only - Minimalist Neutral)
   ========================================================================== */
.app-header {
  height: 54px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.brand-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-badge img {
  height: 22px;
  width: auto;
  object-fit: contain;
}

.brand-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #111827;
  letter-spacing: 0.2px;
}

.brand-tag {
  font-size: 0.68rem;
  font-family: var(--font-primary);
  background: #f3f4f6;
  color: #6b7280;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  font-weight: 500;
}

.controls-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn {
  background: #111827;
  color: #ffffff;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.8rem;
  border: 1px solid #111827;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.action-btn:hover {
  background: #273549;
  border-color: #273549;
}

.action-btn.secondary {
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.action-btn.secondary:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #111827;
}

.action-btn.primary-glow {
  background: #111827;
  color: #ffffff;
  border: 1px solid #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.action-btn.primary-glow:hover {
  background: #1f2937;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Two-Panel Split Workspace Layout (Clean Minimalist)
   ========================================================================== */
.editor-workspace {
  display: flex;
  width: 100vw;
  height: calc(100vh - 54px);
  overflow: hidden;
  background-color: #eef1f4;
}

/* --------------------------------------------------------------------------
   Left Panel: Minimalist Form Sidebar
/* --------------------------------------------------------------------------
   Left Panel: Minimalist Multi-Step Wizard Sidebar
   -------------------------------------------------------------------------- */
.editor-sidebar {
  width: 440px;
  min-width: 440px;
  max-width: 440px;
  height: 100%;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
  box-shadow: 1px 0 8px rgba(0, 0, 0, 0.03);
}

/* Wizard Stepper Tab Bar */
.wizard-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.wizard-step-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  transition: all 0.18s ease;
}

.wizard-step-tab:hover {
  background: #f1f5f9;
}

.wizard-step-tab.active {
  background: #ffffff;
  border-bottom-color: #111827;
}

.step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

.wizard-step-tab.active .step-num {
  background: #111827;
  color: #ffffff;
}

.wizard-step-tab.completed .step-num {
  background: var(--color-moss);
  color: #ffffff;
}

.step-title {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
}

.wizard-step-tab.active .step-title {
  color: #111827;
  font-weight: 600;
}

/* Wizard Content Body */
.wizard-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 18px 24px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

/* Custom Scrollbar */
.wizard-content::-webkit-scrollbar {
  width: 5px;
}
.wizard-content::-webkit-scrollbar-track {
  background: #ffffff;
}
.wizard-content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.wizard-content::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Step Panes */
.wizard-step-pane {
  display: none;
  flex-direction: column;
  gap: 16px;
  animation: fadeInPane 0.2s ease;
}

.wizard-step-pane.active {
  display: flex;
}

@keyframes fadeInPane {
  from { opacity: 0.8; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.wizard-pane-header {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 8px;
  margin-bottom: 2px;
}

.pane-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
}

.pane-desc {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 2px;
}

/* Form Groups & Grid Alignment (No input shifting) */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-label {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  line-height: 1.3;
}

.form-hint {
  font-size: 11px;
  color: #94a3b8;
}

.form-input,
.form-textarea {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #111827;
  font-family: var(--font-primary);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

.form-input {
  height: 36px;
}

.form-textarea {
  min-height: 52px;
  resize: vertical;
  line-height: 1.4;
}

.form-input:focus,
.form-textarea:focus {
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.08);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #9ca3af;
}

/* Interactive Zone Selector Pills */
.zone-selector-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.zone-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.zone-toggle-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.zone-toggle-btn.active {
  border-color: #111827;
  background: #f1f5f9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.zone-info-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zone-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: transparent;
  transition: all 0.15s ease;
}

.zone-toggle-btn.active .zone-checkbox {
  background: #111827;
  border-color: #111827;
}

.zone-name {
  font-size: 12.5px;
  font-weight: 500;
  color: #1f2937;
}

.zone-color-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* Head Diagram SVG Active / Passive States */
.head-zone-elem {
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.head-zone-elem.zone-passive {
  opacity: 0.12 !important;
  filter: grayscale(100%) !important;
}

.head-zone-elem.zone-active {
  opacity: 1 !important;
  filter: none !important;
}

/* Multiple Photo Upload Manager */
.photos-manager {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.photo-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.photo-slot-card {
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 6px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.photo-slot-card:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}

.photo-slot-title {
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  text-align: center;
  white-space: nowrap;
}

.slot-preview-box {
  width: 100%;
  height: 72px;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: none;
  position: relative;
}

.slot-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.btn-slot-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  border: none;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 2;
}

.slot-placeholder {
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #94a3b8;
  font-size: 10.5px;
}

/* Dynamic List Builder (What's Included) */
.dynamic-list-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dynamic-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dynamic-item-input {
  flex: 1;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  color: #111827;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  padding: 6px 8px;
  outline: none;
  height: 32px;
}

.dynamic-item-input:focus {
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.08);
}

.dynamic-item-delete {
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.dynamic-item-delete:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.btn-add-item {
  background: #ffffff;
  border: 1px dashed #d1d5db;
  color: #4b5563;
  font-family: var(--font-primary);
  font-size: 0.74rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  margin-top: 2px;
}

.btn-add-item:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #111827;
}

/* Wizard Navigation Footer */
.wizard-footer {
  padding: 12px 18px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wizard-nav-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.wizard-nav-btn.btn-prev {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #374151;
}

.wizard-nav-btn.btn-prev:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

.wizard-nav-btn.btn-prev:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wizard-nav-btn.btn-next {
  background: #111827;
  border: 1px solid #111827;
  color: #ffffff;
  font-weight: 600;
}

.wizard-nav-btn.btn-next:hover {
  background: #273549;
  border-color: #273549;
}

.wizard-step-counter {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Right Panel: PDF Live Preview (Neutral Canvas)
   -------------------------------------------------------------------------- */
.preview-pane {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #eef1f4;
  overflow: hidden;
  position: relative;
}

/* Preview Top Toolbar */
.preview-toolbar {
  height: 44px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}

.page-jump-pills {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-pill {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.page-pill:hover {
  color: #111827;
  background: #e5e7eb;
}

.page-pill.active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.zoom-btn {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #374151;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.zoom-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #111827;
}

.zoom-select {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #111827;
  font-family: var(--font-primary);
  font-size: 0.74rem;
  padding: 3px 6px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.zoom-select option {
  background: #ffffff;
  color: #111827;
}

/* Scrollable Preview Canvas Viewport */
.preview-viewport {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 20px 80px;
  scroll-behavior: smooth;
}

.preview-viewport::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.preview-viewport::-webkit-scrollbar-track {
  background: #eef1f4;
}
.preview-viewport::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.preview-viewport::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Document Scale Wrapper for Zoom */
.doc-scale-wrapper {
  transform-origin: top center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Document Container holding all 5 A4 pages */
.doc-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: max-content;
}

/* ==========================================================================
   A4 Page Canvas — 595.28pt x 841.89pt
   All measurements below are taken from personalized_hair_restoration_plan.pdf
   (pt, top-left origin). 12pt text uses a 14.4pt line box, so its baseline
   sits 11.35pt below the line top.
   ========================================================================== */
.page {
  --pdf-margin: 26.5pt;
  --pdf-card: #f0f1f1;
  --pdf-radius: 3.4pt;
  --pdf-text: #243227;
  --pdf-green: #9db49b;
  --pdf-green-2: #9eb59d;
  --pdf-ivory: #e6e1d3;
  --pdf-gap: 6.3pt;
  --pdf-col: 176.5pt;

  width: var(--a4-width);
  height: var(--a4-height);
  min-height: var(--a4-height);
  max-height: var(--a4-height);
  background: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  padding: 34.6pt var(--pdf-margin) 0;
  color: var(--pdf-text);
  font-size: 12pt;
  line-height: 14.4pt;
  font-weight: 300;
  transition: transform 0.2s ease;
}

/* Page 1 & Page 5: Dark Emerald Covers */
.page.cover-page,
.page.back-cover-page {
  background-color: #0c1810;
  background-image: url('assets/img_p1_1_x62.jpeg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--pdf-ivory);
  padding: 0;
}

.cover-header {
  position: absolute;
  left: 43.5pt;
  top: 56.2pt;
}

.cover-logo {
  display: block;
  width: 155.9pt;
  height: 40.8pt;
}

.cover-footer {
  position: absolute;
  left: 43.5pt;
  top: 682.9pt;
}

/* 55.24pt Bold, baselines at 729.9pt and 787.0pt */
.cover-title {
  font-size: 55.243pt;
  font-weight: 700;
  line-height: 57.1pt;
  letter-spacing: 0;
  color: var(--pdf-ivory);
  text-transform: uppercase;
}

.back-cover-logo {
  position: absolute;
  left: 219.7pt;
  top: 762.3pt;
  width: 155.9pt;
  height: 40.8pt;
}

/* ==========================================================================
   Shared elements on content pages (2, 3, 4)
   ========================================================================== */
/* 26pt Bold, baseline 56.6pt */
.page-title {
  font-size: 26pt;
  font-weight: 700;
  line-height: 26pt;
  color: var(--pdf-green);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 12pt Light, baseline 83.5pt */
.page-subtitle {
  font-size: 12pt;
  font-weight: 300;
  line-height: 14.4pt;
  color: var(--pdf-text);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: pre;
  margin-top: 11.55pt;
}

.section-label {
  font-size: 12pt;
  font-weight: 700;
  line-height: 14.4pt;
  color: var(--pdf-green);
  text-transform: uppercase;
  letter-spacing: 0;
}

.bullet-list {
  list-style: none;
}

.bullet-list li {
  position: relative;
  padding-left: 18pt;
  font-size: 12pt;
  line-height: 14.4pt;
  font-weight: 300;
  color: var(--pdf-text);
}

.bullet-list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0;
}

/* Footer: logo 26.5→118.3pt x 796.2→819.3pt, rule 123→568.7pt at 818.8pt */
.page-footer {
  position: absolute;
  left: var(--pdf-margin);
  right: var(--pdf-margin);
  top: 796.15pt;
  height: 23.17pt;
  display: flex;
  align-items: flex-end;
  gap: 4.7pt;
}

.footer-logo {
  display: block;
  width: 91.75pt;
  height: 23.17pt;
}

.footer-line {
  flex: 1;
  height: 0.6pt;
  margin-bottom: 0;
  background-color: var(--pdf-text);
}

/* ==========================================================================
   PAGE 2: YOUR HAIR. YOUR PLAN.
   ========================================================================== */
#page2 {
  padding-bottom: 60.9pt;
}

/* Top block spans 75.8pt → 392.2pt */
.p2-top-grid {
  display: grid;
  grid-template-columns: 251.2pt 283.9pt;
  column-gap: 7.1pt;
  height: 316.4pt;
  margin-top: 15.2pt;
}

.p2-patient-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.patient-field {
  display: flex;
  align-items: flex-start;
  gap: 4pt;
  height: 27.7pt;
  padding: 6.15pt 7.3pt 0;
  background: var(--pdf-card);
  border-radius: var(--pdf-radius);
  font-size: 12pt;
  line-height: 14.4pt;
  color: var(--pdf-text);
  white-space: nowrap;
  overflow: hidden;
}

.patient-field + .patient-field {
  margin-top: 4.6pt;
}

.patient-field-label {
  font-weight: 400;
  color: var(--pdf-text);
}

.patient-field-val {
  font-weight: 400;
  color: var(--pdf-text);
  outline: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Photo area: 251.2pt square below the Age field (141.0pt → 392.2pt) */
.patient-photos-grid {
  display: grid;
  gap: 4.6pt;
  margin-top: 5.2pt;
  width: 251.2pt;
  height: 251.2pt;
}

.patient-photos-grid.count-1 {
  grid-template-columns: 1fr;
}

.patient-photos-grid.count-2 {
  grid-template-columns: 1fr 1fr;
}

.patient-photos-grid.count-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.patient-photos-grid.count-3 .patient-photo-card:first-child {
  grid-row: span 2;
}

.patient-photo-card {
  border-radius: var(--pdf-radius);
  overflow: hidden;
  background: var(--pdf-card);
  position: relative;
  min-height: 0;
}

.patient-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right column: title, head illustration and selected-areas box */
.p2-diagram-col {
  position: relative;
  min-width: 0;
}

.head-diagram-card {
  position: absolute;
  inset: 0;
}

.diagram-meta-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 5.1pt;
  text-align: center;
}

/* 13pt Bold, baseline 93.2pt */
.diagram-main-title {
  display: block;
  font-size: 13pt;
  font-weight: 700;
  line-height: 15.6pt;
  color: var(--pdf-green);
  letter-spacing: 0;
}

.svg-diagram-wrapper {
  position: absolute;
  left: -2.9pt;
  top: 16.4pt;
  width: 290pt;
}

.svg-diagram-wrapper svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Selected areas: 283.9 x 27.7pt box at 364.5pt, 12pt Regular centered */
.diagram-zones-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 27.7pt;
  padding-top: 6.25pt;
  background: var(--pdf-card);
  border-radius: var(--pdf-radius);
  text-align: center;
}

.diagram-zones-text {
  display: block;
  font-size: 12pt;
  font-weight: 400;
  line-height: 14.4pt;
  color: var(--pdf-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 16.5pt 0 7.3pt;
}

/* HAIR ANALYSIS baseline 420.7pt */
.p2-text-card {
  margin-top: 14.4pt;
}

.p2-top-grid + .p2-text-card {
  margin-top: 17.15pt;
}

/* Bottom block: 573.5pt → 781.0pt */
.p2-bottom-grid {
  display: grid;
  grid-template-columns: 251.2pt 283.9pt;
  column-gap: 7.1pt;
  height: 207.5pt;
  margin-top: auto;
}

.stats-stack {
  display: grid;
  grid-template-rows: repeat(3, 66.3pt);
  row-gap: 4.1pt;
  align-content: end;
}

.stat-item {
  background: var(--pdf-card);
  border-radius: var(--pdf-radius);
  padding: 11.85pt 7.3pt 0;
  overflow: hidden;
}

.stat-label {
  font-size: 12pt;
  font-weight: 300;
  line-height: 14.4pt;
  color: var(--pdf-green-2);
  letter-spacing: 0;
  text-transform: uppercase;
}

/* 20pt Bold, baseline 47.5pt below the box top */
.stat-val {
  font-size: 20pt;
  font-weight: 700;
  line-height: 24pt;
  margin-top: 2.35pt;
  color: var(--pdf-text);
  letter-spacing: 0;
  white-space: nowrap;
}

.offer-card {
  background: var(--pdf-card);
  border-radius: var(--pdf-radius);
  padding: 12.45pt 13pt 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
}

.offer-title {
  font-size: 12pt;
  font-weight: 700;
  line-height: 14.4pt;
  color: var(--pdf-green-2);
  letter-spacing: 0;
  text-transform: uppercase;
}

.offer-subtitle {
  font-size: 12pt;
  font-weight: 300;
  line-height: 14.4pt;
  margin-top: 1pt;
  color: var(--pdf-text);
  text-transform: uppercase;
}

/* Price badge: 37.1pt tall, green, strike price with red double rule */
.offer-price-badge {
  display: inline-flex;
  align-items: center;
  gap: 7.1pt;
  height: 37.1pt;
  margin-top: 13.35pt;
  padding: 0 9.6pt;
  background: var(--pdf-green);
  border-radius: var(--pdf-radius);
  white-space: nowrap;
}

.price-strike {
  position: relative;
  top: 0.9pt;
  padding: 0 6.4pt;
  font-size: 15pt;
  font-weight: 700;
  line-height: 18pt;
  color: var(--pdf-text);
  text-decoration: none;
}

.price-strike::before,
.price-strike::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1pt;
  background: #af1e1e;
}

.price-strike::before { top: 6.4pt; }
.price-strike::after { top: 8.5pt; }

.price-current {
  font-size: 27.1pt;
  font-weight: 700;
  line-height: 32pt;
  position: relative;
  top: 0.5pt;
  color: var(--pdf-text);
}

/* 13pt Bold, baseline 692.1pt */
.included-title {
  font-size: 13pt;
  font-weight: 700;
  line-height: 14.4pt;
  margin-top: 14.2pt;
  color: var(--pdf-green);
  letter-spacing: 0;
  text-transform: uppercase;
}

.offer-card .bullet-list {
  align-self: stretch;
}

/* ==========================================================================
   PAGE 3: FROM BOOKING TO YOUR FINAL RESULT
   ========================================================================== */
/* Cards: 176.5 x 140.6pt, 6.3pt gaps, from 103.2pt */
.booking-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, var(--pdf-col));
  grid-auto-rows: 140.6pt;
  gap: var(--pdf-gap);
  margin-top: 16.65pt;
}

.step-card {
  background: var(--pdf-card);
  border-radius: var(--pdf-radius);
  padding: 9.5pt 10pt 0;
  overflow: hidden;
}

.step-num-badge {
  width: 18pt;
  height: 18pt;
  border-radius: 50%;
  background: var(--pdf-green-2);
  color: var(--pdf-text);
  font-size: 12pt;
  font-weight: 700;
  line-height: 18pt;
  text-align: center;
}

/* Title baseline 60.8pt below the card top */
.step-card-title {
  margin-top: 21.95pt;
  font-size: 12pt;
  font-weight: 700;
  line-height: 14.4pt;
  color: var(--pdf-green-2);
  text-transform: uppercase;
  letter-spacing: 0;
}

.step-card-desc {
  margin-top: 2.4pt;
  margin-right: -10pt;
  white-space: nowrap;
  font-size: 12pt;
  font-weight: 300;
  line-height: 14.4pt;
  color: #000000;
}

/* AFTER THE PROCEDURE baseline 417.2pt */
.page-subtitle.recovery-heading {
  margin-top: 15.15pt;
}

/* Recovery table: 7 rows x 49.6pt from 432.8pt, divider at x=175.6pt */
.recovery-table {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 12.55pt;
  border: 0;
}

.recovery-table::before {
  content: '';
  position: absolute;
  left: 149.1pt;
  top: 0;
  bottom: 0;
  width: 0.7pt;
  background: var(--pdf-green-2);
}

.recovery-row {
  display: grid;
  grid-template-columns: 167.9pt 1fr;
  align-items: center;
  height: 49.6pt;
  border: 0;
  padding: 0;
}

.recovery-row + .recovery-row {
  box-shadow: inset 0 0.7pt 0 var(--pdf-green-2);
}

.recovery-time {
  padding-left: 10pt;
  font-size: 12pt;
  font-weight: 700;
  line-height: 14.4pt;
  color: var(--pdf-green-2);
  text-transform: uppercase;
  letter-spacing: 0;
}

.recovery-desc {
  display: flex;
  flex-direction: column;
  position: relative;
  top: -1.2pt;
  color: #000000;
}

.recovery-step-title {
  font-size: 12pt;
  font-weight: 700;
  line-height: 14.4pt;
}

.recovery-step-text {
  font-size: 12pt;
  font-weight: 300;
  line-height: 14.4pt;
}

/* ==========================================================================
   PAGE 4: REAL PATIENTS. NATURAL RESULTS.
   ========================================================================== */
/* Before/after photos: 3 x 178.5pt, 5.1pt gaps, 102.0pt → 340.1pt, from x=22.8pt */
.patients-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 178.5pt);
  column-gap: 5.1pt;
  margin: 15.45pt 0 0 -3.7pt;
}

.patient-case-card {
  height: 238.1pt;
  border-radius: var(--pdf-radius);
  overflow: hidden;
  background: var(--pdf-card);
}

.patient-case-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* WHAT IS THE SAPPHIRE FUE? baseline 366.9pt */
.sapphire-fue-section {
  margin-top: 15.45pt;
}

/* Cards: 176.5 x 172.3pt from 385.3pt */
.sapphire-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, var(--pdf-col));
  column-gap: var(--pdf-gap);
  margin-top: 15.35pt;
}

.sapphire-step-card {
  height: 172.3pt;
  background: var(--pdf-card);
  border-radius: var(--pdf-radius);
  padding: 0 10pt;
  overflow: hidden;
}

/* Icons are centred, bottoms aligned 51.4pt below the card top */
.sapphire-icon-box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 51.4pt;
}

.sapphire-icon-box img {
  display: block;
  width: auto;
}

.sapphire-icon-box img.icon-1 { width: 91.75pt; height: 26.78pt; margin-left: 1pt; }
.sapphire-icon-box img.icon-2 { width: 102.83pt; height: 25.24pt; }
.sapphire-icon-box img.icon-3 { width: 102.83pt; height: 27.94pt; }

/* Title baseline 82.5pt below the card top */
.sapphire-step-title {
  margin-top: 19.75pt;
  font-size: 12pt;
  font-weight: 700;
  line-height: 14.4pt;
  color: var(--pdf-green-2);
  text-transform: uppercase;
  letter-spacing: 0;
}

.sapphire-step-desc {
  margin-top: 2.3pt;
  margin-right: -10pt;
  white-space: nowrap;
  font-size: 12pt;
  font-weight: 300;
  line-height: 14.4pt;
  color: #000000;
}

/* WHAT IS PRP? baseline 584.7pt */
.prp-box {
  margin-top: 15.75pt;
}

.prp-text {
  font-size: 12pt;
  font-weight: 300;
  line-height: 14.4pt;
  color: #000000;
}

/* Contact card: 542.2 x 108.3pt from 649.8pt */
.contact-card {
  height: 108.3pt;
  margin-top: 18.85pt;
  padding: 25.55pt 17.2pt 0;
  background: var(--pdf-text);
  border-radius: var(--pdf-radius);
  color: var(--pdf-ivory);
}

.contact-card-title {
  font-size: 12pt;
  font-weight: 700;
  line-height: 14.4pt;
  letter-spacing: 0;
  text-transform: uppercase;
}

.contact-card-sub {
  margin-top: 1.2pt;
  font-size: 12pt;
  font-weight: 300;
  line-height: 14.4pt;
}

.contact-links-row {
  display: flex;
  align-items: center;
  margin-top: 10.4pt;
  font-size: 12pt;
  font-weight: 300;
  line-height: 14.4pt;
  white-space: nowrap;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 5pt;
  color: var(--pdf-ivory);
  text-decoration: none;
}

.contact-item span {
  position: relative;
  top: -1.1pt;
}

.contact-item:hover {
  text-decoration: underline;
}

.contact-icon {
  display: block;
  flex: none;
}

.contact-icon.icon-web { width: 12.71pt; height: 12.71pt; }
.contact-icon.icon-phone { width: 10.4pt; height: 12.72pt; }
.contact-icon.icon-mail { width: 12.71pt; height: 8.68pt; }

.contact-divider {
  flex: none;
  width: 0.5pt;
  height: 16.4pt;
  margin: 0 14.9pt 0 13.6pt;
  background: var(--pdf-ivory);
  transform: translateY(-0.8pt);
  font-size: 0;
}

/* ==========================================================================
   Print Optimization & Responsive Styles
   ========================================================================== */
@page {
  size: A4;
  margin: 0;
}

@media print {
  html,
  body {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  
  .app-header,
  .editor-sidebar,
  .preview-toolbar,
  .carousel-nav-bar,
  .photo-upload-hint {
    display: none !important;
  }

  .editor-workspace {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .preview-pane,
  .preview-viewport,
  .doc-scale-wrapper {
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
  }
  
  .doc-container {
    display: block !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  .page {
    width: 210mm !important;
    height: 297mm !important;
    min-height: 297mm !important;
    max-height: 297mm !important;
    box-shadow: none !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin: 0 auto !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .page:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }
}

/* Small screens: only the on-screen preview reflows, never the exported PDF */
@media screen and (max-width: 900px) {
  .doc-container .page {
    width: 95vw;
    height: auto;
    min-height: auto;
    max-height: none;
  }
}

a.action-btn {
  text-decoration: none;
}

/* ==========================================================================
   Toast (PDF download status)
   ========================================================================== */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1000;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: 8px;
  background: #111827;
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 0.82rem;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.app-toast.is-success { background: #166534; }
.app-toast.is-error { background: #991b1b; }

@media print {
  .app-toast { display: none !important; }
}

/* ==========================================================================
   Login & home (letter picker)
   ========================================================================== */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(ellipse at top right, rgba(157, 180, 155, 0.35), transparent 55%),
    #0d140f;
  font-family: var(--font-primary);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 32px 28px 28px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  color: #111827;
}

.auth-logo {
  display: block;
  width: 120px;
  height: auto;
  margin-bottom: 22px;
}

.auth-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.auth-desc {
  font-size: 0.82rem;
  color: #4b5563;
  margin-bottom: 20px;
}

.auth-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  margin: 12px 0 6px;
}

.auth-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  outline: none;
}

.auth-input:focus {
  border-color: #111827;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.auth-error {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.8rem;
}

.auth-submit {
  width: 100%;
  justify-content: center;
  height: 40px;
  margin-top: 20px;
  font-size: 0.88rem;
}

.home-shell {
  width: 100%;
  max-width: 640px;
  text-align: center;
  color: var(--color-warmivory);
}

.home-logo {
  width: 170px;
  height: auto;
  margin-bottom: 28px;
}

.home-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.home-desc {
  font-size: 0.9rem;
  opacity: 0.75;
  margin-bottom: 32px;
}

.home-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.home-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 24px 22px;
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  text-decoration: none;
  text-align: left;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-choice:hover,
.home-choice:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4);
}

.home-choice-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.home-choice-desc {
  font-size: 0.8rem;
  color: #4b5563;
}

.home-logout {
  display: inline-block;
  margin-top: 28px;
  color: var(--color-warmivory);
  font-size: 0.8rem;
  opacity: 0.7;
}

@media (max-width: 560px) {
  .home-choices {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CONFIRMATION LETTER (Appointment Creste Hair.pdf)
   Positions in pt from the reference PDF. Single-line text uses a 1.2em line
   box, so an element's top sits 0.946em above its baseline.
   ========================================================================== */
.page.confirmation-page {
  --cl-ink: #1f3025;
  --cl-body: #2c2e35;
  --cl-num: #e8e5d5;
  padding: 0;
  background: #f9f6ef;
  color: var(--cl-ink);
  font-weight: 300;
}

.confirmation-page .cl {
  position: absolute;
  margin: 0;
  white-space: nowrap;
}

.confirmation-page .cl-logo {
  left: 39.91pt;
  top: 23.55pt;
  width: 75.73pt;
  height: 14.25pt;
}

.confirmation-page .cl-rule {
  left: 39.8pt;
  width: 526.4pt;
  height: 0.8pt;
  background: var(--cl-ink);
}

.confirmation-page .cl-rule-1 { top: 56.2pt; }
.confirmation-page .cl-rule-2 { top: 136.4pt; }
.confirmation-page .cl-rule-3 { top: 235.3pt; }
.confirmation-page .cl-rule-4 { top: 364.7pt; }
.confirmation-page .cl-rule-5 { top: 501pt; }
.confirmation-page .cl-rule-6 { top: 672.6pt; }

/* 17pt SemiBold headings */
.confirmation-page .cl-h {
  font-size: 17pt;
  line-height: 20.4pt;
  font-weight: 600;
  color: var(--cl-ink);
}

.confirmation-page .cl-title { left: 39.9pt; top: 80.22pt; }
.confirmation-page .cl-package-title { left: 39.9pt; top: 258.42pt; }
.confirmation-page .cl-package-grafts { left: 39.9pt; top: 277.12pt; }
.confirmation-page .cl-payment-title { left: 39.9pt; top: 386.72pt; }
.confirmation-page .cl-day-title { left: 42.2pt; top: 523.02pt; }
.confirmation-page .cl-visit-title { left: 42.2pt; top: 695.12pt; }

/* 8pt Light tags under the title */
.confirmation-page .cl-tags {
  left: 39.9pt;
  top: 103.43pt;
  display: flex;
  gap: 7.9pt;
  font-size: 8pt;
  line-height: 9.6pt;
  text-transform: uppercase;
}

/* Patient / date / time */
.confirmation-page .cl-meta {
  left: 39.9pt;
  top: 161.75pt;
  display: flex;
}

.confirmation-page .cl-meta-col:nth-child(1) { min-width: 144.5pt; padding-right: 8pt; }
.confirmation-page .cl-meta-col:nth-child(2) { min-width: 120.9pt; padding-right: 8pt; }

.confirmation-page .cl-label {
  display: block;
  font-size: 7.56pt;
  line-height: 9.07pt;
  text-transform: uppercase;
}

.confirmation-page .cl-meta-val {
  display: block;
  margin-top: -0.23pt;
  margin-left: -0.6pt;
  font-size: 15.13pt;
  line-height: 18.16pt;
  font-weight: 600;
}

.confirmation-page .cl-address {
  left: 39.9pt;
  top: 197.06pt;
  font-size: 10.4pt;
  line-height: 12.48pt;
}

.confirmation-page .cl-address-val {
  position: absolute;
  left: 51.8pt;
}

/* Package details: note (left) | included items (right) */
.confirmation-page .cl-package-note {
  left: 39.9pt;
  top: 301.43pt;
  width: 232pt;
  white-space: normal;
  font-size: 10.4pt;
  line-height: 13.55pt;
}

.confirmation-page .cl-package-divider {
  left: 287.4pt;
  top: 297.6pt;
  width: 0.8pt;
  height: 51.3pt;
  background: var(--cl-ink);
}

.confirmation-page .cl-package-items {
  left: 312.5pt;
  top: 301.43pt;
  width: 205pt;
  white-space: normal;
  list-style: none;
  font-size: 10.4pt;
  line-height: 13.55pt;
}

/* Payment summary */
.confirmation-page .cl-pay-label {
  top: 413.95pt;
  font-size: 7.56pt;
  line-height: 9.07pt;
  text-transform: uppercase;
}

.confirmation-page .cl-pay-val {
  top: 422.3pt;
  font-size: 20.09pt;
  line-height: 24.1pt;
  font-weight: 600;
}

.confirmation-page .cl-pay-1 { left: 39.9pt; }
.confirmation-page .cl-pay-2.cl-pay-label { left: 149pt; }
.confirmation-page .cl-pay-2.cl-pay-val { left: 148.4pt; }
.confirmation-page .cl-pay-3 { left: 239.2pt; }

.confirmation-page .cl-pay-divider {
  top: 415.8pt;
  width: 0.8pt;
  height: 27.8pt;
  background: var(--cl-ink);
}

.confirmation-page .cl-pay-divider-1 { left: 127.8pt; }
.confirmation-page .cl-pay-divider-2 { left: 218.3pt; }

.confirmation-page .cl-pay-note {
  left: 39.9pt;
  top: 453.44pt;
  white-space: pre-line;
  font-size: 10pt;
  line-height: 12pt;
  font-weight: 400;
  color: var(--cl-body);
}

/* Appointment day table */
.confirmation-page .cl-table-divider {
  left: 192.6pt;
  top: 550.5pt;
  width: 0.4pt;
  height: 96pt;
  background: #141c18;
}

.confirmation-page .cl-row-rule {
  left: 40.3pt;
  width: 523.5pt;
  height: 0.4pt;
  background: var(--cl-body);
}

.confirmation-page .cl-num,
.confirmation-page .cl-step-title {
  font-size: 12pt;
  line-height: 14.4pt;
  font-weight: 600;
}

.confirmation-page .cl-num {
  left: 39.4pt;
  color: var(--cl-num);
}

.confirmation-page .cl-step-title { left: 60pt; }

.confirmation-page .cl-step-desc {
  left: 200.8pt;
  font-size: 10pt;
  line-height: 12pt;
  font-weight: 400;
  color: var(--cl-body);
}

/* Before your visit */
.confirmation-page .cl-visit {
  left: 42pt;
  top: 723.14pt;
  width: 500pt;
  list-style: none;
  white-space: normal;
  font-size: 10pt;
  line-height: 12pt;
  font-weight: 400;
  color: var(--cl-body);
}

.confirmation-page .cl-visit li {
  position: relative;
  padding-left: 9pt;
  white-space: pre-line;
}

.confirmation-page .cl-visit li::before {
  content: '\2022';
  position: absolute;
  left: 0;
}

.confirmation-page .cl-visit li:nth-child(2) { margin-top: 9.5pt; }
.confirmation-page .cl-visit li:nth-child(3) { margin-top: 16.2pt; }

/* ==========================================================================
   PDF loading overlay (locks the page while the PDF is generated)
   ========================================================================== */
.pdf-loading {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(13, 20, 15, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  cursor: progress;
  outline: none;
}

.pdf-loading.is-visible {
  opacity: 1;
  visibility: visible;
}

.pdf-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  padding: 28px 32px 24px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  font-family: var(--font-primary);
  text-align: center;
}

.pdf-loading-spinner {
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  border: 3px solid #e6ede6;
  border-top-color: #1f3025;
  border-radius: 50%;
  animation: pdf-spin 0.8s linear infinite;
}

.pdf-loading-title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}

.pdf-loading-text {
  font-size: 0.8rem;
  color: #4b5563;
}

body.pdf-busy {
  overflow: hidden;
}

@keyframes pdf-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-loading-spinner { animation-duration: 2.4s; }
}

@media print {
  .pdf-loading { display: none !important; }
}