/* ============================================================================
   pa-card.css - the ONE PA plan card (mp/App_Code/PaCardRenderer.cs)
   Linked by mp/th/pa/plans.aspx, details.aspx and planseries.aspx.

   WHY: owner ruling 2026-10-09 - the "Upgrade your plan" / "Similar plans" cards on PA details (and the
   planseries cards) are the EXACT plans-page card. These rules used to sit in plans.aspx's <style>;
   moved here (same declarations, same order) so all three pages share one source.

   SCOPING: every card rule is prefixed with ".plan-card.plan-card" (the class doubled on purpose = +1 class
   of specificity) so it out-ranks the host page's own <style> and the shared /content/css/plan-card.css, which
   both also define .coverage-row / .cov-label / .price-section / .payment-item / .plan-tag / .shape-pill
   (details.aspx links plan-card.css and carries its own copies for its main content). Link this file AFTER
   plan-card.css. On plans.aspx the prefix only raises specificity, nothing else competes there.

   HOST PAGE MUST DEFINE (all three do, same values): --text --text2 --text3 --mid-orange --border --bg --en.
   Page-level layout (the grid the cards sit in, filters, tier-grouping toggle) stays in the pages.
   The last section ("host isolation") resets the properties those host rules touch back to what the card gets
   on plans.aspx - found by diffing getComputedStyle of the card on plans vs details vs planseries (2026-10-09).
   ============================================================================ */

/* ---- shape pill (header, right) - PA uses อบ.1 / อบ.2 contract-type semantics ---- */
/* Shape pill — PA uses อบ.1 / อบ.2 contract-type semantics */
.plan-card.plan-card .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;
}
.plan-card.plan-card .shape-pill .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.plan-card.plan-card .shape-pill.ob1 { background: #EFF6FF; color: #1A518C; border: 1px solid #BFDBFE; cursor: pointer; }
.plan-card.plan-card .shape-pill.ob1 .dot { background: #1A518C; }
.plan-card.plan-card .shape-pill.ob2 { background: #FDF4FF; color: #86198F; border: 1px solid #F5D0FE; cursor: pointer; }
.plan-card.plan-card .shape-pill.ob2 .dot { background: #86198F; }


/* ---- card shell: hover lift + entry animation (the selectors already carry .plan-card) ---- */
.ui.cards > .card.plan-card {
  transition: box-shadow .25s ease, transform .25s ease;
}
.ui.cards > .card.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);
}

/* Card entry animation */
.ui.cards > .card.plan-card { opacity: 0; animation: cardIn .4s ease forwards; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.ui.cards > .card.plan-card:nth-child(1) { animation-delay: .05s; }
.ui.cards > .card.plan-card:nth-child(2) { animation-delay: .1s; }
.ui.cards > .card.plan-card:nth-child(3) { animation-delay: .15s; }
.ui.cards > .card.plan-card:nth-child(4) { animation-delay: .2s; }
.ui.cards > .card.plan-card:nth-child(5) { animation-delay: .25s; }
.ui.cards > .card.plan-card:nth-child(6) { animation-delay: .3s; }

/* ---- card-ID badge ---- */
/* Card-ID badge (2026-07-21) — shows the NocoDB Plan record Id (`premiumid`) on every
   card so staff/support can name a plan out loud without opening details. Deliberately
   ungated + deliberately quiet (11px, 38% black) so it reads as metadata, not content.
   Precedent: mp/th/car/plans.aspx:322 renders `campaignid` the same way on motor cards.
   Pairs with the Plan ID lookup field in the pro drawer below the filter bar. */
.plan-card.plan-card .card-id-badge { font-size: 11px; line-height: 1; color: rgba(0,0,0,.38); letter-spacing: .3px; font-family: 'Lato','Sarabun','Kanit',sans-serif; }

/* ---- coverage rows + amount cells (qualifier split, daily-comp scope chip, icons) ---- */
/* Coverage row layout */
.plan-card.plan-card .coverage-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 14px;
  border-bottom: 1px dotted #E2E8F0;
}
.plan-card.plan-card .coverage-row:last-child { border-bottom: none; }
.plan-card.plan-card .coverage-row .cov-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text);
  flex: 1;
}
.plan-card.plan-card .coverage-row .cov-amount {
  font-weight: 700;
  color: #1A518C;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
  font-variant-numeric: tabular-nums;
}
.plan-card.plan-card .coverage-row.not-covered .cov-label { color: var(--text3); }
.plan-card.plan-card .coverage-row.not-covered .cov-amount { color: var(--text3); font-weight: 400; font-size: 12px; }

/* === Amount qualifier split (parity with healthnew, 2026-06-08) ===
   RenderCoverageAmount / RenderRemainingAmount / RenderDailyCompAmount route through
   FormatCoverageAmount. When the source string carries a "(qualifier)" tail (or Thai
   keyword prefix like "ไม่เกิน" / "ภายใน"), the inner HTML becomes:
     <span class="cov-amount-main">headline</span><span class="cov-amount-qual">qual</span>
   The :has() selector flips the parent .cov-amount cell from single-line nowrap into
   a column-flex so the muted qualifier wraps on its own line instead of being
   ellipsis-truncated. Daily-comp rows use the same .cov-amount-qual sibling under a
   .dc-row that holds value+chip on row 1. Fixes Generali PA Koom Sure 1 truncation
   reported 2026-06-08. */
.plan-card.plan-card .coverage-row .cov-amount:has(.cov-amount-qual) {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
  max-width: 60%;
}
.plan-card.plan-card .cov-amount-main { font-weight: 700; color: #1A518C; }
.plan-card.plan-card .cov-amount-qual {
  font-weight: 400;
  font-size: 11px;
  color: var(--text3);
  white-space: normal;
  text-align: right;
  margin-top: 1px;
  max-width: 100%;
}
/* Multi-conditional row ("400/วัน (โรคติดเชื้อ), 800/วัน (อุบัติเหตุ)") — each block its own
   .cov-line stacked under the parent column-flex. */
.plan-card.plan-card .cov-line {
  display: block;
  text-align: right;
  white-space: normal;
  line-height: 1.3;
  margin-top: 1px;
}
.plan-card.plan-card .cov-line:first-child { margin-top: 0; }
.plan-card.plan-card .cov-line .cov-amount-main { font-size: 13px; }
.plan-card.plan-card .cov-line .cov-amount-qual { display: inline; margin-top: 0; margin-left: 0; }
/* Pure-text long row (>25 chars, no parenthetical/keyword split point) — let it wrap. */
.plan-card.plan-card .coverage-row .cov-amount:has(.cov-amount-wrap) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
  max-width: 60%;
}
.plan-card.plan-card .cov-amount-wrap { display: inline-block; text-align: right; font-weight: 700; color: #1A518C; }

/* Daily comp scope chip (per_day / per_week) — honest to source, chip shows actual unit.
   .dc-row keeps value + chip on row 1; when a qualifier follows, the parent
   .cov-amount:has(.cov-amount-qual) rule flips to column-flex so the qual stacks below. */
.plan-card.plan-card .coverage-row .cov-amount.daily-comp {
  display: inline-flex; align-items: baseline; gap: 5px; justify-content: flex-end;
}
/* Daily-comp WITH a parenthetical qualifier: the generic :has() rule flips the cell to
   column-flex, but .daily-comp's `align-items: baseline` (above, meant for the value+chip
   row) leaks onto the column and left-aligns both lines — so "300 ต่อวัน" detaches from the
   right edge whenever the qualifier line below it is wide. Re-assert flex-end here
   (specificity 0,4,0 beats the base rule) so value+chip stay flush-right with the other
   amount cells regardless of qualifier width. The inner .dc-row keeps its own baseline for
   value↔chip.
   max-width 42% (tighter than the generic 60% cap): a long qualifier like AXA Happy Med 1's
   "(สูงสุดไม่เกิน 30 วันต่อการบาดเจ็บแต่ละครั้ง)" otherwise grew the cell to 60%, stealing the
   label's width (wrapped "ชดเชยรายวันระหว่างรักษาตัว" to 2 lines) and stretching the qualifier
   wide. 42% forces the qualifier to break onto a new line sooner and lets the label stay on
   one line. Short qualifiers (~35%) sit under this cap, so they're unaffected.
   Reported 2026-06-18 (ทิพย แฮปปี้ ไรเดอร์ แผน 1A; AXA Happy Med 1). */
.plan-card.plan-card .coverage-row .cov-amount.daily-comp:has(.cov-amount-qual) {
  flex-direction: column; align-items: flex-end; max-width: 42%;
}
.plan-card.plan-card .cov-amount.daily-comp .dc-row {
  display: inline-flex; align-items: baseline; gap: 5px; justify-content: flex-end;
}
.plan-card.plan-card .cov-amount.daily-comp .value { font-weight: 700; color: #1A518C; font-variant-numeric: tabular-nums; }
.plan-card.plan-card .cov-amount.daily-comp .scope-chip {
  display: inline-block; font-size: 13px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  font-family: 'Sarabun', sans-serif; flex-shrink: 0; cursor: help;
  white-space: nowrap;
}
.plan-card.plan-card .cov-amount.daily-comp .scope-chip.per-day  { background: #E8F4FD; color: #1A518C; border: 1px solid #C8DFF5; }
.plan-card.plan-card .cov-amount.daily-comp .scope-chip.per-week { background: #FDF3E8; color: #92400E; border: 1px solid #FDD8A8; }

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

/* ---- price section ---- */
/* Price section */
.plan-card.plan-card .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;
}
.plan-card.plan-card .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;
}
/* (2026-10-09) The per-card "ทุนแผนหลัก" SA chip CSS (.sa-chip-row / .sa-chip / .sa-flash) was
   removed with the accident riders it priced — owner ruling 2026-10-09, see plans.aspx.cs
   § PA page = Accident + PA Extreme only. */
.plan-card.plan-card .price-unit {
  font-size: 15px;
  color: #1A518C;
  font-weight: 500;
}

/* ---- estimate marker for Life-insurer plans (~ ... *) ---- */
/* ============================================================
   ESTIMATE MARKER (Option G) — ~ prefix + * suffix, both orange.
   Applied only when Insurer.company_type == "Life" (see code-behind
   PriceEstClass helper). General-insurer PA plans don't get it —
   PA quotes from GI carriers are near-exact at browse time.
   ============================================================ */
.plan-card.plan-card .price-estimate::before {
  content: "~";
  font-size: 0.55em;
  color: #F7881F;
  font-weight: 700;
  margin-right: 4px;
  vertical-align: middle;
}
.plan-card.plan-card .price-estimate::after {
  content: "*";
  font-size: 15px;
  color: #F7881F;
  font-weight: 400;
  vertical-align: super;
  margin-left: 2px;
}

/* ---- payment drawer rows + installment rows ---- */
/* Payment drawer items */
.plan-card.plan-card .payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.plan-card.plan-card .payment-item:last-child { border-bottom: none; }
.plan-card.plan-card .payment-item-label { font-size: 11px; color: var(--text2); font-weight: 500; }
.plan-card.plan-card .payment-item-price {
  font-size: 12px;
  font-weight: 700;
  color: #1A518C;
  font-variant-numeric: tabular-nums;
}
.plan-card.plan-card .payment-item-price .per-unit { font-weight: 400; color: var(--text3); font-size: 10px; }

/* Installment sub-rows */
.plan-card.plan-card .installment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 4px 19px;
  font-size: 10px;
}
.plan-card.plan-card .installment-row-label { color: var(--text3); }
.plan-card.plan-card .installment-row-price {
  font-weight: 700;
  color: #1A518C;
  font-variant-numeric: tabular-nums;
}
.plan-card.plan-card .installment-row-price .per-unit { font-weight: 400; color: var(--text3); }
.plan-card.plan-card .installment-row-price .installment-row-total { font-weight: 400; color: var(--text3); margin-left: 2px; }

/* ---- benefit chips ---- */
/* Benefit tags */
.plan-card.plan-card .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;
}
.plan-card.plan-card .tag-benefit {
  background: #F0FDF4;
  color: #15803D;
  border: 1px solid #BBF7D0;
}

/* ---- Buy button text colour ---- */
/* Buy button — black text and icon */
.ui.cards .plan-card .ui.yellow.button { color: #000 !important; font-weight: 500 !important; }
.ui.cards .plan-card .ui.yellow.button i.icon { color: #000 !important; }

/* ---- contract (อบ.1 / อบ.2) explainer modal - lives outside the card, see PaCardRenderer.ContractModalHtml ---- */
/* Contract modal table */
.contract-modal table { width: 100%; border-collapse: collapse; font-size: 13px; }
.contract-modal th { background: var(--bg); padding: 8px 10px; text-align: left; font-weight: 600; color: var(--text); border-bottom: 2px solid var(--border); }
.contract-modal td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; }
.tag-ob1 { background: #EBF5FF; color: #1A518C; }
.tag-ob2 { background: #F0E6FF; color: #6B21A8; }

/* ---- mobile ---- */
@media (max-width: 768px) {
  .plan-card.plan-card .price-value { font-size: 32px; }
  .ui.cards > .card.plan-card:hover { transform: none; }
  .plan-card.plan-card .coverage-row { font-size: 13px; padding: 4px 0; }
  .plan-card.plan-card .coverage-row .cov-amount { font-size: 13px; }
  .plan-card.plan-card .installment-row { font-size: 9px; }
}

/* ---- host isolation: put back what the host page's own copies of these class names changed ---- */
/* The values below are what the card computes on plans.aspx (nothing else competes there). Each rule names the
   host rule it undoes. Found 2026-10-09 by diffing getComputedStyle of the same plan's card on /th/pa/plans vs
   /th/pa/details vs /th/pa/planseries; re-run that diff after touching any host page's coverage / payment CSS.
     details.aspx   .coverage-row.not-covered { opacity:.5; font-size:13px }  .coverage-row .cov-label { line-height:1.5 }
                    .coverage-row .cov-amount { font-family:var(--en) }  .payment-item { font-size:12px }
                    .payment-item-label { display:flex }  .payment-item-price { font-family:var(--en) }
     plan-card.css  .coverage-row .cov-label { flex-wrap / word-break / min-width:0 }  .coverage-row .cov-amount { padding-left; flex-shrink }
                    .payment-item-label i.icon { color / font-size / display } */
.plan-card.plan-card .coverage-row.not-covered { opacity: 1; }
.plan-card.plan-card .coverage-row .cov-label { flex-wrap: nowrap; line-height: inherit; word-break: inherit; min-width: auto; }
.plan-card.plan-card .coverage-row .cov-amount { flex-shrink: 1; font-family: inherit; padding-left: 0; }
.plan-card.plan-card .payment-item { font-size: inherit; }
.plan-card.plan-card .payment-item-label { display: block; align-items: normal; gap: normal; }
.plan-card.plan-card .payment-item-label i.icon { color: inherit; font-size: 1em; display: inline-block; }
.plan-card.plan-card .payment-item-price { font-family: inherit; }