/* =============================================================================
   plan-card.css - CARD-SCOPED styles for the critical-illness plan card.

   Extracted VERBATIM from mp/th/critical-illness/plans.aspx's <style> block
   (CI detail redesign P0, 2026-07-15, spec .planning/ci-detail-redesign-spec.md D2/S3)
   so details.aspx can render literal browse-cards ('overview mirrors') by linking this
   ONE file instead of duplicating the rules. plans.aspx <link>s this BEFORE its remaining
   <style> block, so any page-specific override still wins.

   USES the CSS custom properties (var(--text2), var(--mid-orange), var(--en), ...) defined
   in :root INSIDE plans.aspx's <style>. Custom properties resolve from the full CSSOM
   regardless of source order, so they resolve on browse. Any OTHER page that links this
   file (details.aspx in P1) MUST define the same :root vars (or reuse internal.master's).

   Left in plans.aspx on purpose (NOT here): the :root vars, page chrome (header/hero/
   filters/chips), the card-entry animation + .column:nth-child delays (browse-grid only),
   the .ui.yellow.button buy-colour override, the contract MODAL, and the @media block.
   ============================================================================= */

/* ============================================================
   PLAN CARDS
   ============================================================ */
.plan-card { transition: box-shadow .25s ease, transform .25s ease; }
.plan-card:hover {
  box-shadow: 0 10px 25px rgba(26,81,140,.12), 0 4px 10px rgba(0,0,0,.06) !important;
  transform: translateY(-4px);
}

/* ============================================================
   PRODUCT STRIP (top of card) — gradient colored by product_type
   ============================================================ */
.product-strip {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.product-strip .strip-label {
  color: #fff;
  font-family: 'Sarabun', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.product-strip.cancer { background: linear-gradient(90deg, #E84C88 0%, #E84C88 40%, #F4A7C4 65%, #FCD5E4 88%, #FDE8F0 100%); }
.product-strip.ci { background: linear-gradient(90deg, #7B4FCC 0%, #7B4FCC 40%, #B592E0 65%, #D9C7F0 88%, #EDE3FA 100%); }
.product-strip.rider-cancer { background: linear-gradient(90deg, #D97706 0%, #D97706 40%, #E9A451 65%, #F5D3A5 88%, #FBEBD2 100%); }
.product-strip.rider-ci { background: linear-gradient(90deg, #B45309 0%, #B45309 40%, #D89356 65%, #EEC79B 88%, #F9E6CE 100%); }
.product-strip.wl-ci { background: linear-gradient(90deg, #2A6FB8 0%, #2A6FB8 40%, #7DA8D4 65%, #C5D7EC 88%, #E2EBF6 100%); }
/* Life-family strips (2026-07-22) — verbatim from mp/th/life/plans.aspx (its inline copies stay;
   these serve the SHARED renderer's §④ overview cards, e.g. the Whole Life host on CI details.
   KEEP IN SYNC with life/plans.aspx lines ~168-176 until life browse migrates onto this file). */
.product-strip.whole-life { background: linear-gradient(90deg, #2563EB 0%, #2563EB 40%, #93B4F5 65%, #D0DEFA 88%, #E3EAFC 100%); }
.product-strip.term-life { background: linear-gradient(90deg, #0EA5E9 0%, #0EA5E9 40%, #75CAF2 65%, #C7E7F8 88%, #DFF1FC 100%); }
.product-strip.endowment { background: linear-gradient(90deg, #10B981 0%, #10B981 40%, #75D4AD 65%, #C6ECD9 88%, #DFF4E8 100%); }
.product-strip.pension { background: linear-gradient(90deg, #14B8A6 0%, #14B8A6 40%, #75D4CA 65%, #C6ECE7 88%, #DFF4F1 100%); }
.product-strip.annuity { background: linear-gradient(90deg, #65A30D 0%, #65A30D 40%, #A9CB6C 65%, #DAE9C1 88%, #E7F0D5 100%); }
.product-strip.unit-linked { background: linear-gradient(90deg, #D946EF 0%, #D946EF 40%, #E88DF5 65%, #F5CEFA 88%, #F9E1FC 100%); }
.product-strip.investment { background: linear-gradient(90deg, #F97316 0%, #F97316 40%, #FBA870 65%, #FDDDC1 88%, #FEECDA 100%); }
.product-strip.health-life { background: linear-gradient(90deg, #4F46E5 0%, #4F46E5 40%, #9088F0 65%, #CDC9F8 88%, #DFDCFB 100%); }
.product-strip.rider { background: linear-gradient(90deg, #F59E0B 0%, #F59E0B 40%, #F8C163 65%, #FCE1B8 88%, #FDECCF 100%); }

/* ============================================================
   SHAPE PILL (top-right of card header) — เจอจ่ายจบ / เบิกตามจริง / ผสม
   ============================================================ */
.shape-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Sarabun', sans-serif;
  font-weight: 600;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}
.shape-pill .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.shape-pill.lump { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.shape-pill.lump .dot { background: #15803D; }
.shape-pill.reimb { background: #EFF6FF; color: #1A518C; border: 1px solid #BFDBFE; }
.shape-pill.reimb .dot { background: #1A518C; }
.shape-pill.mixed { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.shape-pill.mixed .dot { background: #D97706; }

/* ============================================================
   CANCER EXTRAS PILLS — surfaces sparse "this plan covers X" signals below the
   2 universal key rows on Cancer / Rider-Cancer cards. Each pill is a
   junction-membership signal (treatment / room / daily comp / second opinion /
   palliative / accident). Full amounts still appear in the accordion.
   ============================================================ */
.cancer-extras-pills {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 6px 0 4px 0;
}
.extra-pill {
  font-family: 'Sarabun', sans-serif;
  font-weight: 600;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
.extra-pill.treatment  { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; } /* red — core cancer treatment */
.extra-pill.room       { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; } /* blue — hospital */
.extra-pill.comp       { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; } /* green — comp $$ */
.extra-pill.second     { background: #FAF5FF; color: #6B21A8; border: 1px solid #E9D5FF; } /* purple — diagnosis */
.extra-pill.palliative { background: #FDF4FF; color: #86198F; border: 1px solid #F5D0FE; } /* pink */
.extra-pill.accident   { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; } /* amber — non-cancer */

/* CI / Rider-CI hero block — single coverage with named conditions sub-list.
   Replaces the prior 3-row slot lock that read as additive (2026-04-30).
   Design rules locked from user feedback (2026-04-30 evening):
     - NO dotted/underline separator under the hero row — it visually CUT OFF the
       hero from the conditions list when in fact the conditions are PART OF the
       same single coverage, not separate items.
     - Hero text is regular dark-grey, NOT blue — blue is the price-block color
       (cards have one big blue number for premium); using blue on coverage made
       the hero look like a second price.
     - Everything left-aligned (no right-aligned subtitle, no left-padded list).
*/
.ci-hero {
  margin: .4em 0 .2em;
}
.ci-hero-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.ci-hero-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Sarabun', sans-serif;
  font-size: 14px; font-weight: 600;
  color: #1f2937;
}
.ci-hero-label .icon { font-size: 16px; line-height: 1; }
/* Amount cell — stacks bold headline + small muted qualifier line, both right-aligned.
   Uses the same .cov-amount-main / .cov-amount-qual classes as healthnew (set 2026-04-28
   for Health room/board parenthetical conditions). User direction 2026-04-30 evening:
   "จ่ายครั้งเดียว have to be on the coverage amount side like what we did for health plan". */
.ci-hero-amount {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: 'Sarabun', sans-serif;
  white-space: nowrap;
  line-height: 1.2;
}
.ci-hero-amount .cov-amount-main {
  font-size: 16px; font-weight: 700;
  color: #1f2937;
}
.ci-hero-amount .cov-amount-qual {
  font-size: 11px; font-weight: 600;
  color: #c2410c;
  margin-top: 1px;
}
.ci-hero-amount-empty { color: #9ca3af !important; font-weight: 400 !important; }
.ci-hero-empty .cov-amount-qual { color: #9ca3af; font-weight: 400; }
/* Text-semantic hero (value_semantic=text — sentence values like "สูงสุดประมาณ 160%
   ของทุนประกันภัย" on CI 123, 2026-08-11): the 16px bold nowrap treatment overflows the
   card, so wrap + downsize instead. Class emitted by GetCriticalIllnessHeroHtml. */
.ci-hero-amount.ci-hero-text { white-space: normal; max-width: 58%; }
.ci-hero-amount.ci-hero-text .cov-amount-main {
  font-size: 13px; font-weight: 600; line-height: 1.35; text-align: right;
}

/* === CANONICAL SHARED-COVERAGE-LIMIT PATTERN ===
   This is the reference visual for any plan that has multiple coverages sharing
   ONE claim limit (lump-sum pool). Copy these classes exactly when implementing
   the same convention on other pages (e.g. Home insurance natural-disaster
   combined-limit when that domain comes online).
   - Hero row carries the actual amount (cov-amount-main + cov-amount-qual).
   - Bullet rows under the hero are coverage labels WITHOUT amounts — they share
     the hero's limit. Same Sarabun typography, slightly smaller than hero label
     for hierarchy, with breathing-room padding so the list doesn't feel cramped.
   Tuned 2026-05-04 (size 12.5→13.5, padding 3→5, condition gap +2) per user
   feedback that the bullets felt tight vs the rest of the card. */
.ci-conditions {
  list-style: none;
  margin: 6px 0 0; padding: 0;
}
.ci-condition {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 0;
  font-family: 'Sarabun', sans-serif;
  font-size: 13.5px; font-weight: 500;
  color: #334155;
  line-height: 1.5;
}
.ci-condition .icon {
  font-size: 14px; line-height: 1.5;
  flex-shrink: 0;
}
.ci-condition-label { flex: 1; }
.ci-footnote {
  font-family: 'Sarabun', sans-serif;
  font-size: 11px;
  color: #9ca3af;
  margin: 8px 0 0;
}

/* organ filter/grid REMOVED 2026-07-23 — replaced by รูปแบบแผน shape pill; see ci-comparison-framework.md */
.plan-card .card-header { display: flex; align-items: center; gap: .6em; }
.plan-card .insurer-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }
.plan-card .insurer-name { font-size: 16px; font-weight: 600; color: #1A518C; }
.plan-card .plan-name { font-size: 14px; color: var(--text2); margin-top: 2px; }

/* Tags */
.plan-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1.4;
}
.tag-rider { background: #FFF4E5; color: #B8600B; border: 1px solid #FDDCB0; }
.tag-benefit { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
/* Premium-shape tag badge (W3, 2026-07-22) — reuses .plan-tag, own indigo color so it
   reads as a distinct signal type from .tag-rider (amber) / .tag-benefit (green).
   Deliberately not blue (#1A518C is the reserved price-text color, ui-standards skill)
   and not red/green (reserved for cart delta semantics). See PlanCardRenderer.cs
   § ci-shape-tags (GetShapeTagBadgeHtml) for the render source. */
.tag-shape { background: #EEF2FF; color: #4338CA; border: 1px solid #C7D2FE; }
/* Selling-point feature chips (2026-08-19) — motor-style tags from Plan.tags (เบี้ยคงที่
   มีเงินคืน etc.). Teal so they read as their own signal type next to .tag-benefit's green;
   blue + red/green stay reserved (price text / cart deltas, ui-standards skill). Render
   source: PlanCardRenderer.cs § feature-tag chips (GetFeatureTagChipsHtml). */
.tag-feature { background: #F0FDFA; color: #0F766E; border: 1px solid #99F6E4; }
.header-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.benefit-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

/* Coverage rows.
   Two columns: .cov-label (left, content can wrap internally) + .cov-amount (right,
   stays on the first line of the label via align-items:flex-start). The label cell
   stacks its main label / parens / chip vertically inside its own flex-wrap, but
   the row itself does NOT wrap — the amount must stay aligned with the first line
   of the label, never drop below the parens or chip. Added 2026-05-04. */
.coverage-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 5px 0;
  font-size: 14px;
  border-bottom: 1px dotted #E2E8F0;
}

/* Sub-label chip below primary coverage label (e.g. "ไม่รวมผิวหนัง" on ผลประโยชน์ตรวจพบมะเร็ง) */
.cov-sublabel {
  display: inline-flex;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #F1F5F9;
  color: #64748B;
  font-size: 10px;
  font-weight: 500;
  font-family: 'Sarabun', sans-serif;
}
.coverage-row:last-child { border-bottom: none; }
.coverage-row .cov-label {
  display: flex;
  flex-wrap: wrap;          /* let label content wrap to a new line when too long */
  align-items: baseline;
  gap: 6px 6px;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  /* word-break: keep-all disables Chrome's Thai dictionary-based mid-word segmentation.
     Without this, "ผลประโยชน์ตรวจพบมะเร็ง (ทุกชนิด ทุกระยะ)" wrapped as "ทุก / ระยะ" —
     splitting the single word "ทุกระยะ" in half. With keep-all, breaks only happen at
     explicit ASCII spaces. Combined with NBSP (U+00A0) inside the parenthetical on cov 243
     (NocoDB coverage-compare-main row 243), the only valid break point is before the
     opening "(", giving a clean 2-row wrap on narrow cards. Added 2026-04-28. */
  word-break: keep-all;
}

/* Sub-line wrapper below the main label. Holds the parenthetical text + the
   cov-sublabel chip together on the SAME sub-line. `flex: 0 0 100%` forces
   the wrapper to its own line within the .cov-label flex-wrap container.
   Inside the wrapper, parens text and the chip flow inline (gap: 6px). */
.coverage-row .cov-label .cov-label-sub {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
/* Parens text — exact same typography as the main label. The sub-line wrapper
   above gives the visual hierarchy (it's just on a new line); font itself
   inherits from the row so size/weight/family all match. */
.coverage-row .cov-label .cov-label-paren {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
  font-style: normal;
}
.coverage-row .cov-label .cov-label-main {
  display: inline;
}
/* Chip inside the sub-line wrapper — drop its standalone margin-top because the
   wrapper already provides spacing. Pill styling (background + radius) is from
   the existing .cov-sublabel rule. */
.coverage-row .cov-label .cov-label-sub .cov-sublabel {
  margin-top: 0;
}
.coverage-row .cov-amount {
  font-weight: 700;
  color: #1A518C;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;          /* never shrink — amount stays a hard column on the right */
  padding-left: 8px;       /* small gap between label cell and amount */
  font-variant-numeric: tabular-nums;
}
.coverage-row.not-covered .cov-label { color: var(--text3); }
.coverage-row.not-covered .cov-amount { color: var(--text3); font-weight: 400; font-size: 12px; }

/* SA-in-the-coverage-row inline picker (2026-07-08). The amount cell of an SA-scaled
   coverage row (per-junction SA_RATIO) becomes a health-option-style inline <select>:
   the customer picks the sum insured right on the coverage line, and premium + coverage
   move together. initBundleDials injects the <select>; this just styles it. Blue to match
   the amount colour it replaces; compact so the row height doesn't jump. */
.coverage-row .cov-amount.cov-sa-host { padding-left: 4px; }
.cov-sa-select {
  font-family: 'Sarabun', sans-serif;
  font-weight: 700;
  color: #1A518C;
  font-size: 13px;
  padding: 2px 4px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cov-sa-select:hover { border-color: #1A518C; }

/* Amount cell with stacked headline + grey qualifier (for parenthetical content like
   "(per visit)" / " ภายใน 60 วัน"). Mirrors healthnew pattern. When .cov-amount-qual is
   present, the row stacks vertically and the qualifier becomes a small grey second line. */
.coverage-row .cov-amount:has(.cov-amount-qual),
.coverage-row .cov-amount:has(.cov-amount-text) {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: normal;
  line-height: 1.2;
  /* Long structured qualifiers / text-semantic sentences wrap INSIDE the amount cell
     instead of starving the label column (CI 123 absence rows, 2026-08-11). */
  max-width: 58%;
}
/* Text-semantic amounts in list rows: sentence values render smaller + wrapped. */
.coverage-row .cov-amount .cov-amount-text {
  white-space: normal;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
}
.coverage-row .cov-amount .cov-amount-main {
  font-weight: 700;
  color: #1A518C;
}
.coverage-row .cov-amount .cov-amount-qual {
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  margin-top: 1px;
  white-space: normal;
  text-align: right;
}

/* Coverage check/x icons */
.cov-icon-check { color: #16A34A; font-size: 12px; }
.cov-icon-x { color: #CBD5E1; font-size: 12px; }

/* Sub-section heading inside the accordion (e.g. "ความคุ้มครองอุบัติเหตุเพิ่มเติม"
   above the bundled PA / accident-extras list). Visual rank: smaller than the
   accordion title, brand-orange, with a subtle top divider so the new section
   is clearly separated from the main remaining-coverages list above. */
.cov-section-heading {
  font-family: 'Sarabun', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--deep-orange);
  letter-spacing: 0.2px;
  margin: 10px 0 4px 0;
  padding-top: 8px;
  border-top: 1px dashed #E2E8F0;
}

/* Contract-type tag inline next to accident coverage labels — clickable, opens
   #contractModal explainer (อบ.1 vs อบ.2). Same color scheme as panew's
   .shape-pill.ob1 / .ob2 so the tag reads as the same control across pages. */
.contract-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Sarabun', sans-serif;
  font-weight: 600;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 4px;
  vertical-align: baseline;
}
.contract-tag.ob1 { background: #EFF6FF; color: #1A518C; border: 1px solid #BFDBFE; }
.contract-tag.ob2 { background: #FDF4FF; color: #86198F; border: 1px solid #F5D0FE; }
.contract-tag i.icon { font-size: 9px; opacity: 0.7; margin: 0; }
/* Price section */
.price-section {
  background: linear-gradient(135deg, #FFF8F0 0%, #FFF5EB 100%);
  border: 1px solid rgba(249,159,56,0.25);
  border-radius: 10px;
  padding: 14px 12px;
  margin-top: 10px;
  text-align: center;
}
.price-label { font-size: 12px; color: var(--text3); }
.price-value {
  font-family: var(--en);
  font-size: 38px;
  font-weight: 900;
  color: #1A518C;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.price-unit {
  font-size: 15px;
  color: #1A518C;
  font-weight: 500;
}

/* Payment options accordion (2026-05-21) — mirrors health/plans + pa/plans */
.payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 11px;
  border-bottom: 1px solid #EAEEF2;
}
.payment-item:last-child { border-bottom: none; }
.payment-item-label { color: var(--text2); display: inline-flex; align-items: center; gap: 4px; }
.payment-item-label i.icon { color: var(--text3); font-size: 13px; }
.payment-item-price {
  font-weight: 700;
  color: #1A518C;
  font-variant-numeric: tabular-nums;
}
.payment-item-price .per-unit { font-weight: 400; color: var(--text3); font-size: 10px; }
.installment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 4px 19px;
  font-size: 10px;
}
.installment-row-label { color: var(--text3); }
.installment-row-price {
  font-weight: 700;
  color: #1A518C;
  font-variant-numeric: tabular-nums;
}
.installment-row-price .per-unit { font-weight: 400; color: var(--text3); }
.installment-row-price .installment-row-total { font-weight: 400; color: var(--text3); margin-left: 2px; }
.price-estimate::before {
  content: "~";
  font-size: 0.55em;
  color: #F7881F;
  font-weight: 700;
  margin-right: 4px;
  vertical-align: middle;
}
.price-estimate::after {
  content: "\00B9"; /* superscript 1 — paired with the ¹ marker in .estimate-disclaimer */
  font-size: 15px;
  color: #F7881F;
  font-weight: 400;
  vertical-align: super;
  margin-left: 2px;
}
/* Rider warning banner.
   margin-top added 2026-04-28 — banner sat flush against the insurer-name + plan-title row above,
   producing a cramped header on every rider card (KTAXA Multi-Pay CI / MTL Cancer / Rabbit CI50, etc.).
   padding bumped 6→8 (vert) and 10→12 (horiz) for in-banner breathing too. */
.rider-banner { background: #FFF8F0; border: 1px solid #FDDCB0; border-radius: 6px; padding: 8px 12px; margin-top: 10px; margin-bottom: 8px; font-size: 11px; color: #B8600B; display: flex; align-items: center; gap: 6px; }
/* margin-right reset: Fomantic's default i.icon margin (.25em) was stacking on top of the flex gap, producing a 9px icon-text gap instead of the 6px intended. */
.rider-banner i { font-size: 13px; flex-shrink: 0; margin: 0; line-height: 1; }