/* ============================================================
   10 DISTINCT BROCHURE TEMPLATES — html2canvas & Print Safe
   ============================================================ */

.brochure-sheet {
  --bp: #D31145;
  --bp-dark: #9E0B32;
  --bp-light: #FFF0F4;
  --bp-accent: #C68B2C;
  --bp-border: #F2C6D2;
  --bp-text: #1E2430;
  --bp-scale: 1;

  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--bp-text);
  background: #FFFFFF;
  width: 680px;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(15, 23, 42, 0.08);
  position: relative;
  line-height: 1.5;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.brochure-sheet * {
  box-sizing: border-box;
}

.brochure-sheet.format-mobile {
  width: 560px;
}

.brochure-sheet.format-a4 {
  width: 760px;
  border-radius: 10px;
}

/* Brochure Font Size Modes (Great for Seniors!) */
.brochure-sheet.bfont-normal { --bp-scale: 1; }
.brochure-sheet.bfont-large  { --bp-scale: 1.12; }
.brochure-sheet.bfont-xlarge { --bp-scale: 1.24; }

/* Base Structural Blocks */
.b-header {
  padding: 28px 30px 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.b-header-main {
  flex: 1;
  min-width: 0;
}

.b-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: calc(13px * var(--bp-scale));
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}

.b-headline {
  margin: 0 0 6px;
  font-size: calc(26px * var(--bp-scale));
  font-weight: 800;
  line-height: 1.28;
  word-break: break-word;
}

.b-tagline {
  margin: 0;
  font-size: calc(15.5px * var(--bp-scale));
  line-height: 1.48;
  opacity: 0.94;
}

.b-customer-chip {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 12px;
  font-size: calc(15px * var(--bp-scale));
  font-weight: 700;
}

.b-char-box {
  flex-shrink: 0;
  width: 124px;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}

.b-char-box.char-lg {
  width: 146px;
  height: 146px;
}

.b-char-box.char-sm {
  width: 96px;
  height: 96px;
}

.b-char-box svg {
  width: 100%;
  height: 100%;
  display: block;
}

.b-char-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
}

/* Body Container */
.b-body {
  padding: 24px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Hero Metrics Strip */
.b-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 12px;
}

.b-metric-card {
  background: var(--bp-light);
  border: 1.5px solid var(--bp-border);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.b-metric-lbl {
  font-size: calc(13.5px * var(--bp-scale));
  font-weight: 700;
  color: #526071;
  margin-bottom: 3px;
}

.b-metric-val {
  font-size: calc(23px * var(--bp-scale));
  font-weight: 800;
  color: var(--bp);
  line-height: 1.22;
}

.b-metric-sub {
  font-size: calc(12.5px * var(--bp-scale));
  color: #5B6777;
  margin-top: 4px;
  font-weight: 600;
}

/* Section Title */
.b-sec-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: calc(17.5px * var(--bp-scale));
  font-weight: 800;
  color: var(--bp-dark);
  margin: 0 0 10px;
}

.b-sec-dot {
  width: 10px;
  height: 20px;
  border-radius: 5px;
  background: var(--bp);
  flex-shrink: 0;
}

/* Coverage Cards */
.b-cov-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.b-cov-card {
  background: #FFFFFF;
  border: 1.5px solid #E5EAF0;
  border-radius: 16px;
  padding: 16px 18px;
}

.b-cov-card.is-main-plan {
  border-color: var(--bp-border);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bp-light) 180%);
}

.b-cov-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.b-cov-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 180px;
}

.b-cov-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bp-light);
  color: var(--bp);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(19px * var(--bp-scale));
  flex-shrink: 0;
}

.b-cov-name {
  font-size: calc(17px * var(--bp-scale));
  font-weight: 800;
  color: #1A2230;
  line-height: 1.32;
}

.b-cov-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.b-cov-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bp-light);
  color: var(--bp-dark);
  font-size: calc(12.5px * var(--bp-scale));
  font-weight: 700;
}

.b-cov-pill.pill-flat {
  background: #E8F6EE;
  color: #146C3B;
}

.b-cov-pill.pill-step {
  background: #FFF6E5;
  color: #9A5B08;
}

.b-cov-prem {
  text-align: right;
  flex-shrink: 0;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 6px 12px;
  border-radius: 10px;
}

.b-cov-prem-val {
  font-size: calc(16px * var(--bp-scale));
  font-weight: 800;
  color: var(--bp-dark);
}

.b-cov-prem-lbl {
  font-size: calc(11.5px * var(--bp-scale));
  color: #64748B;
}

/* Detail Modes inside Coverage Card */
.b-cov-summary {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #E2E8F0;
  font-size: calc(15px * var(--bp-scale));
  color: #334155;
  line-height: 1.55;
}

.b-cov-bullets {
  margin: 10px 0 0;
  padding: 10px 0 0 20px;
  border-top: 1px dashed #E2E8F0;
  font-size: calc(14.5px * var(--bp-scale));
  color: #2D3748;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.b-cov-table {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #EDF2F7;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.b-cov-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: calc(14px * var(--bp-scale));
}

.b-cov-row:nth-child(odd) {
  background: #F8FAFC;
}

.b-cov-row.is-hl {
  background: var(--bp-light);
  font-weight: 700;
  color: var(--bp-dark);
}

.b-cov-row-k {
  color: #475569;
  flex: 1;
}

.b-cov-row.is-hl .b-cov-row-k {
  color: var(--bp-dark);
}

.b-cov-row-v {
  font-weight: 700;
  color: #0F172A;
  text-align: right;
  flex-shrink: 0;
}

.b-cov-row.is-hl .b-cov-row-v {
  color: var(--bp);
}

/* Saving ROI Banner */
.b-saving-box {
  margin-top: 10px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 12px;
  padding: 10px 14px;
  color: #065F46;
  font-size: calc(14px * var(--bp-scale));
  font-weight: 700;
}

/* Highlights / Why Choose Box */
.b-highlights-box {
  background: var(--bp-light);
  border: 1.5px solid var(--bp-border);
  border-radius: 16px;
  padding: 16px 20px;
}

.b-hl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.b-hl-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: calc(14.8px * var(--bp-scale));
  color: #1E293B;
  line-height: 1.48;
  font-weight: 500;
}

.b-hl-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bp);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Grand Total Premium Box */
.b-premium-box {
  background: linear-gradient(135deg, var(--bp) 0%, var(--bp-dark) 100%);
  color: #FFFFFF;
  border-radius: 18px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.b-prem-main-lbl {
  font-size: calc(14.5px * var(--bp-scale));
  opacity: 0.92;
  font-weight: 600;
}

.b-prem-main-val {
  font-size: calc(32px * var(--bp-scale));
  font-weight: 800;
  line-height: 1.15;
  margin-top: 2px;
}

.b-prem-main-val small {
  font-size: calc(16px * var(--bp-scale));
  font-weight: 600;
  opacity: 0.92;
}

.b-prem-subs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.b-prem-sub-pill {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  padding: 8px 14px;
  text-align: center;
}

.b-prem-sub-pill span {
  display: block;
  font-size: calc(12px * var(--bp-scale));
  opacity: 0.9;
}

.b-prem-sub-pill strong {
  display: block;
  font-size: calc(17px * var(--bp-scale));
  font-weight: 800;
}

/* Trust & Structure Note */
.b-notes-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: calc(12.5px * var(--bp-scale));
  color: #475569;
  line-height: 1.55;
}

.b-notes-box strong {
  color: #1E293B;
}

/* Advisor Contact Footer */
.b-footer {
  padding: 18px 28px 22px;
  background: #F8FAFC;
  border-top: 2px solid var(--bp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.b-agent-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.b-agent-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bp-light);
  border: 2px solid var(--bp);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 24px;
}

.b-agent-avatar svg,
.b-agent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b-agent-name {
  font-size: calc(17px * var(--bp-scale));
  font-weight: 800;
  color: #0F172A;
}

.b-agent-role {
  font-size: calc(13.5px * var(--bp-scale));
  color: #475569;
  font-weight: 600;
}

.b-agent-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.b-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: calc(14px * var(--bp-scale));
  font-weight: 700;
  background: #FFFFFF;
  border: 1.5px solid var(--bp-border);
  color: var(--bp-dark);
}

.b-contact-pill.is-line {
  background: #06C755;
  border-color: #06C755;
  color: #FFFFFF;
}

/* ============================================================
   DISTINCT VARIATIONS FOR ALL 10 TEMPLATES
   ============================================================ */

/* 1. Classic Executive (มาตรฐานพรีเมียม) */
.tpl-classic_exec .b-header {
  background: linear-gradient(135deg, var(--bp) 0%, var(--bp-dark) 100%);
  color: #FFFFFF;
  border-bottom: 5px solid var(--bp-accent);
}
.tpl-classic_exec .b-brand-pill {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}
.tpl-classic_exec .b-customer-chip {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #FFFFFF;
}
.tpl-classic_exec .b-char-box {
  background: #FFFFFF;
  border: 3px solid rgba(255, 255, 255, 0.85);
}

/* 2. Senior Care XL (ผู้สูงอายุ อ่านง่ายพิเศษ) */
.tpl-senior_xl {
  background: #FFFDF9;
  border: 3px solid var(--bp);
}
.tpl-senior_xl .b-header {
  background: var(--bp-light);
  color: var(--bp-text);
  border-bottom: 3px solid var(--bp-border);
  padding: 30px 30px 26px;
}
.tpl-senior_xl .b-brand-pill {
  background: var(--bp);
  color: #FFFFFF;
  font-size: calc(14.5px * var(--bp-scale));
  padding: 6px 16px;
}
.tpl-senior_xl .b-headline {
  color: var(--bp-dark);
  font-size: calc(29px * var(--bp-scale));
}
.tpl-senior_xl .b-tagline {
  color: #334155;
  font-size: calc(17px * var(--bp-scale));
  font-weight: 600;
}
.tpl-senior_xl .b-customer-chip {
  background: #FFFFFF;
  border: 2px solid var(--bp);
  color: var(--bp-dark);
  font-size: calc(16.5px * var(--bp-scale));
}
.tpl-senior_xl .b-char-box {
  background: #FFFFFF;
  border: 3px solid var(--bp);
}
.tpl-senior_xl .b-cov-card {
  border-width: 2px;
  border-color: var(--bp-border);
  background: #FFFFFF;
  padding: 18px 20px;
}
.tpl-senior_xl .b-metrics-grid {
  grid-template-columns: 1fr;
}
.tpl-senior_xl .b-metric-val {
  font-size: calc(27px * var(--bp-scale));
}

/* 3. Modern Social Card (โมเดิร์นการ์ด ส่ง LINE) */
.tpl-modern_line {
  background: #F4F6FA;
}
.tpl-modern_line .b-header {
  margin: 16px 16px 0;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--bp-dark) 0%, var(--bp) 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.tpl-modern_line .b-brand-pill {
  background: #FFFFFF;
  color: var(--bp-dark);
}
.tpl-modern_line .b-customer-chip {
  background: rgba(0, 0, 0, 0.22);
  color: #FFFFFF;
}
.tpl-modern_line .b-char-box {
  background: #FFFFFF;
}
.tpl-modern_line .b-body {
  padding: 18px 18px 22px;
}
.tpl-modern_line .b-cov-card {
  border-radius: 20px;
  border: none;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.tpl-modern_line .b-metric-card {
  background: #FFFFFF;
  border: none;
  border-left: 6px solid var(--bp);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

/* 4. Warm Family Infographic (อินโฟกราฟิก ไอคอนชัด) */
.tpl-warm_infographic .b-header {
  background: var(--bp-light);
  border-bottom: 3px dashed var(--bp-border);
}
.tpl-warm_infographic .b-brand-pill {
  background: var(--bp);
  color: #FFFFFF;
}
.tpl-warm_infographic .b-headline {
  color: var(--bp-dark);
}
.tpl-warm_infographic .b-customer-chip {
  background: #FFFFFF;
  color: var(--bp-dark);
  border: 1.5px solid var(--bp-border);
}
.tpl-warm_infographic .b-char-box {
  background: #FFFFFF;
  border: 3px dashed var(--bp);
}
.tpl-warm_infographic .b-cov-card {
  background: #FCFDFE;
  border-left: 6px solid var(--bp);
  border-radius: 14px;
}
.tpl-warm_infographic .b-cov-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bp);
  color: #FFFFFF;
}

/* 5. Luxury Prestige Gold (หรูหรากรอบทอง มรดก/VIP) */
.tpl-luxury_gold {
  background: #FFFEFA;
  border: 3px solid #C59235;
}
.tpl-luxury_gold .b-header {
  background: linear-gradient(135deg, #161B26 0%, #2B1F2E 100%);
  color: #FDF6E2;
  border-bottom: 4px solid #D4A545;
}
.tpl-luxury_gold .b-brand-pill {
  background: linear-gradient(90deg, #C59235, #E6BE68);
  color: #1A1408;
}
.tpl-luxury_gold .b-headline {
  color: #FCE8B2;
}
.tpl-luxury_gold .b-customer-chip {
  background: rgba(212, 165, 69, 0.16);
  border: 1px solid #D4A545;
  color: #FCE8B2;
}
.tpl-luxury_gold .b-char-box {
  background: #FFFDF7;
  border: 3px solid #D4A545;
}
.tpl-luxury_gold .b-metric-card {
  background: #FBF7EC;
  border: 1.5px solid #DFC484;
}
.tpl-luxury_gold .b-metric-val {
  color: #8C5E14;
}
.tpl-luxury_gold .b-premium-box {
  background: linear-gradient(135deg, #1B202C 0%, #342616 100%);
  border: 2px solid #D4A545;
}

/* 6. Clean Medical Shield (คลีนเมดิคัล สุขภาพเหมาจ่าย) */
.tpl-clean_medical .b-header {
  background: #FFFFFF;
  border-top: 10px solid var(--bp);
  border-bottom: 2px solid #EDF2F7;
}
.tpl-clean_medical .b-brand-pill {
  background: var(--bp-light);
  color: var(--bp);
  border: 1px solid var(--bp-border);
}
.tpl-clean_medical .b-headline {
  color: #0F172A;
}
.tpl-clean_medical .b-tagline {
  color: #475569;
}
.tpl-clean_medical .b-customer-chip {
  background: var(--bp);
  color: #FFFFFF;
}
.tpl-clean_medical .b-char-box {
  background: var(--bp-light);
  border: 2px solid var(--bp-border);
}
.tpl-clean_medical .b-metric-card {
  background: #FFFFFF;
  border: 2px solid var(--bp-border);
  text-align: center;
}

/* 7. Wealth & Saving Growth (มั่งคั่ง ออมทรัพย์ & เงินคืน) */
.tpl-wealth_saving .b-header {
  background: linear-gradient(120deg, var(--bp-dark) 0%, var(--bp) 65%, var(--bp-accent) 100%);
  color: #FFFFFF;
}
.tpl-wealth_saving .b-brand-pill {
  background: #FEF3C7;
  color: #92400E;
}
.tpl-wealth_saving .b-customer-chip {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}
.tpl-wealth_saving .b-char-box {
  background: #FFFFFF;
  border: 3px solid #FDE68A;
}
.tpl-wealth_saving .b-metric-card {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bp-light) 100%);
  border-bottom: 4px solid var(--bp-accent);
}

/* 8. Happy Kids & Family (สดใส ครอบครัวและลูกรัก) */
.tpl-happy_kids {
  border-radius: 28px;
  background: #FFFDFB;
}
.tpl-happy_kids .b-header {
  background: linear-gradient(135deg, var(--bp-light) 0%, #FFF7ED 100%);
  border-bottom: 3px solid var(--bp-border);
}
.tpl-happy_kids .b-brand-pill {
  background: var(--bp);
  color: #FFFFFF;
}
.tpl-happy_kids .b-headline {
  color: var(--bp-dark);
}
.tpl-happy_kids .b-customer-chip {
  background: #FFFFFF;
  color: var(--bp);
  border: 2px solid var(--bp-border);
  border-radius: 999px;
}
.tpl-happy_kids .b-char-box {
  background: #FFFFFF;
  border: 4px solid #FFFFFF;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.tpl-happy_kids .b-cov-card,
.tpl-happy_kids .b-highlights-box,
.tpl-happy_kids .b-premium-box {
  border-radius: 24px;
}

/* 9. Minimal Zen Clean (มินิมอล สะอาดโปร่งโล่ง) */
.tpl-minimal_zen .b-header {
  background: #FFFFFF;
  padding-bottom: 18px;
  border-bottom: 1.5px solid #E2E8F0;
}
.tpl-minimal_zen .b-brand-pill {
  background: #F1F5F9;
  color: var(--bp);
}
.tpl-minimal_zen .b-headline {
  color: #0F172A;
  font-weight: 800;
}
.tpl-minimal_zen .b-tagline {
  color: #64748B;
}
.tpl-minimal_zen .b-customer-chip {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  color: #1E293B;
}
.tpl-minimal_zen .b-metric-card {
  background: #FAFAFA;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
}
.tpl-minimal_zen .b-cov-card {
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}
.tpl-minimal_zen .b-highlights-box {
  background: #FAFAFA;
  border: 1px solid #E2E8F0;
}
.tpl-minimal_zen .b-premium-box {
  background: #0F172A;
}

/* 10. Bold Impact Banner (ไฮไลท์เทียบความคุ้มค่า) */
.tpl-bold_impact .b-header {
  background: #111827;
  color: #FFFFFF;
  border-left: 12px solid var(--bp);
}
.tpl-bold_impact .b-brand-pill {
  background: var(--bp);
  color: #FFFFFF;
}
.tpl-bold_impact .b-customer-chip {
  background: rgba(255, 255, 255, 0.12);
  color: #F9FAFB;
}
.tpl-bold_impact .b-char-box {
  background: #1F2937;
  border: 3px solid var(--bp);
}
.tpl-bold_impact .b-metric-card {
  background: var(--bp);
  border-color: var(--bp-dark);
  color: #FFFFFF;
}
.tpl-bold_impact .b-metric-lbl,
.tpl-bold_impact .b-metric-sub {
  color: rgba(255, 255, 255, 0.9);
}
.tpl-bold_impact .b-metric-val {
  color: #FFFFFF;
}

/* Responsive Brochure Adjustments on Small Phones */
@media (max-width: 640px) {
  .brochure-sheet:not(.export-cloning) {
    width: 100% !important;
    border-radius: 16px;
  }
  .brochure-sheet:not(.export-cloning) .b-header {
    padding: 20px 18px 18px;
    flex-direction: column-reverse;
    text-align: center;
  }
  .brochure-sheet:not(.export-cloning) .b-body {
    padding: 18px 16px 20px;
  }
  .brochure-sheet:not(.export-cloning) .b-headline {
    font-size: calc(22px * var(--bp-scale));
  }
  .brochure-sheet:not(.export-cloning) .b-cov-head {
    flex-direction: column;
  }
  .brochure-sheet:not(.export-cloning) .b-cov-prem {
    text-align: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .brochure-sheet:not(.export-cloning) .b-footer {
    padding: 16px 18px;
  }
}