/* === cd-plans-top.css — shared parts of the PA, health, critical-illness and life plans pages ===
   Born 2026-11-02 as the car / all-plans format for these pages (owner: "same format like car/plans"). On 2026-11-04 the owner
   asked for his own old look back ("all from old please"), so the car parts left: page top (hero mascot + summary pill), the
   แนะนำ / ทั้งหมด tabs + nudge, the filter fold and the car card foot - all in git 188f2b89 / f9c8ff74 if ever wanted again.
   What is left: the insurer chip row (old look), the recommended box's minimise button, the agent price box + pay question
   (11-02 agent features, kept). car / travel / all plans keep their own inline copies of the car parts. No font-family
   anywhere (mp/th/CLAUDE.md § Thai fonts). Corners 8px; pressed = square, labels may be round (§ Design System). */

/* === insurer chips (2026-11-04, owner: "all from old please") ===
   The owner's own row (pre-11-02 panew back-port, 2026-06-08): light grey box, "บริษัท" label with the building icon, white
   logo chips that turn blue when picked, a red-outline "ล้าง" while any chip is on, chips WRAP on a phone (the 11-02 car row
   scrolled sideways and showed 1-2 insurers). Two changes from the old CSS: corners 8px (pressed = square, owner 2026-11-04 -
   mp/th/CLAUDE.md § Design System "Shape = what it does") and no font-family (Sarabun is banned on body text). Kept from 11-02:
   the chip's small "N · เริ่ม ฿X" (server numbers, before the cap). Markup on each page: § insurer chip row. */
.cdf-chips { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 0 0 12px; background: #FAFBFC; border: 1px solid #EEF0F3; border-radius: 8px; flex-wrap: wrap; }
.cdf-lbl { font-size: 13px; font-weight: 600; color: #4A5568; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding-top: 4px; white-space: nowrap; }
.cdf-lbl i.icon { font-size: 13px; margin: 0; color: #94A3B8; }
.cdf-chip-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.cdf-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; background: #fff; border: 1px solid #E2E8F0; font-size: 12px; font-weight: 600; color: #4A5568; cursor: pointer; user-select: none; white-space: nowrap; margin: 0; transition: background .15s, color .15s, border-color .15s; }
.cdf-chip:has(.cdf-logo) { padding-left: 6px; }
.cdf-logo { width: 18px; height: 18px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid #f0f0f0; flex: none; }
.cdf-chip small { color: #8a94a6; font-weight: 400; }
.cdf-chip:hover { background: #F0F7FF; border-color: #BFDBFE; color: #1A518C; }
.cdf-chip.active { background: #1A518C; border-color: #1A518C; color: #fff; }
.cdf-chip.active:hover { background: #163F6D; }
.cdf-chip.active small { color: rgba(255,255,255,.8); }
.cdf-chip.active .cdf-logo { border-color: rgba(255,255,255,.4); }
.cdf-chip.zero { opacity: .35; background: #F1F5F9; border-color: #E2E8F0; }
.cdf-chip.zero:hover { opacity: .6; }
.cdf-clear { background: transparent; border: 1px solid #FCA5A5; color: #B91C1C; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer; flex-shrink: 0; align-self: flex-start; align-items: center; }
.cdf-clear:hover { background: #FEF2F2; }
.cdf-clear i.icon { font-size: 11px; margin: 0 3px 0 0; }
@media (max-width: 768px) {
    .cdf-chips { padding: 8px 10px; }
    .cdf-chip { font-size: 11px; padding: 4px 8px; }
    .cdf-chip:has(.cdf-logo) { padding-left: 5px; }
    .cdf-logo { width: 16px; height: 16px; }
}

/* === recommended tabs (2026-11-04, owner: "recommended tab and not all plans ... if too big" / "true for all product") ===
   /content/js/checkdi-rec-tabs.js: more than 6 ranked plans -> tabs instead of the box. The แนะนำ tab hides every non-ranked
   card of #plansGrid (a card a filter / the pager hid stays hidden: inline !important wins); a tier rung that grouping hides
   stays hidden. Tabs are pressed controls -> 8px. Hidden while on แนะนำ: the "ดูแผนทั้งหมด" load-more CTA. */
#plansGrid.cd-rec-only > .plan-card:not(.cd-ranked) { display: none !important; }
body.cd-rec-view #cdAllCta { display: none !important; }
.cd-rtabs { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.cd-rtab { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #E2E8F0; background: #fff; color: #4A5568; border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1.3; }
.cd-rtab img { width: 22px; height: auto; flex: none; }
.cd-rtab small { font-size: 12px; font-weight: 500; color: #F7881F; }
.cd-rtab-rec { background: linear-gradient(135deg, #FFF8F0 0%, #FFF5EB 100%); border-color: rgba(249,159,56,.45); }
.cd-rtab.on { background: #F7881F; border-color: #F7881F; color: #fff; }
.cd-rtab.on small { color: #fff; }
@media (max-width: 767.98px) { .cd-rtab { flex: 1 1 45%; justify-content: center; font-size: 13px; padding: 9px 10px; } .cd-rtab img, .cd-rtab small { display: none; } }   /* phone: text + count only */

/* === recommended box minimise (2026-11-04, owner: "the recommended plan minimising might be a good idea") ===
   The "น้องเช็คดิแนะนำ" box (/content/css/checkdi-recommend.css .cd-rec) gets a "ย่อ / แสดง" button on its header row; folded =
   header line only (smaller mascot, no "why" line, no cards). Square button (pressed). Script: each page § recommended box. */
.cd-rec-top .cd-rec-min { margin-left: auto; align-self: flex-start; flex: none; background: #fff; border: 1px solid rgba(249,159,56,.45); color: #a35400; border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cd-rec-top .cd-rec-min:hover { background: #FFF8F0; }
.cd-rec-top .cd-rec-min i.icon { margin: 0 0 0 2px; font-size: 11px; }
.cd-rec-n { font-weight: 400; color: #8a8a8a; font-size: 14px; }
.cd-rec.min { padding-bottom: 1rem; }
.cd-rec.min .cd-rec-cards, .cd-rec.min .cd-rec-why { display: none; }
.cd-rec.min .cd-rec-top img { width: 40px; }

/* agent price box + pay question (= car § agent price box / § agent pay-method question) */
.acb { background: linear-gradient(180deg, #FFF8F0, #FFF5EB); border: 1px solid rgba(249,159,56,.25); border-radius: 8px; padding: .7em .85em; font-size: 13px; }
.acb-lbl { font-size: 12px; color: #666; }
.acb-pay { color: #1A518C; font-size: 24px; font-weight: 700; line-height: 1.2; }
.acb-pay small { font-size: 13px; font-weight: 600; }
.acb-row { display: flex; justify-content: space-between; gap: .5em; margin-top: .4em; }
.acb-earn { color: #F7881F; font-weight: 700; }
.acb-remit { color: #777; font-size: 12px; margin-top: .2em; }
.acb-net { color: #999; font-size: 11px; margin-top: .2em; }
.acb-noinst { font-size: 12px; color: #a35400; margin-top: 4px; }
.acb-maxd { margin-top: .55em; padding-top: .5em; border-top: 1px dashed rgba(249,159,56,.4); font-size: 12px; color: #444; }
.acb-maxd b { color: #F7881F; }
.acb-maxd i.icon { color: #F99F38; margin-right: .25em; }
.acb-pm { background: #fff; border: 1px solid rgba(249,159,56,.35); border-radius: 8px; padding: .7em .85em; margin-bottom: 1em; }
.acb-pm-q { margin-bottom: .45em; }
.acb-pm-q .thai { font-weight: 500; font-size: 14px; }
.acb-pm-q small { color: #777; margin-left: .4em; }
.acb-pm-pills { display: flex; flex-wrap: wrap; gap: .4em; }
.acb-pm .paymethod-pill.ui.button { border-radius: 8px; margin: 0; }   /* 2026-11-04 was 20px: pressed = square (mp/th/CLAUDE.md § Design System) */
.acb-pm .paymethod-pill.ui.yellow.button { color: #1a1d23; }
@media (max-width: 767.98px) {
    .acb-pm-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .acb-pm-pills::-webkit-scrollbar { display: none; }
    .acb-pm .paymethod-pill.ui.button { flex: none; white-space: nowrap; }
}


/* filter fold (2026-11-02, back 2026-11-05 - owner: "filter panels as well ... same format" as car / bike): ONE closed bar
   "ตัวกรองข้อเสนอ · <the picks> · พบ N แผน" + chevron on every width (= /th/car/plans .cdf-fold-m); the page's own filter box
   opens under it. The page fills .cdf-fold-sum (its picks + its count). Phone: the summary hides (no room), the label stays. */
.cdf-fold-m { display: flex !important; align-items: center; gap: 8px; width: 100%; background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; padding: 11px 14px; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #1a1d23; cursor: pointer; text-align: left; box-shadow: none; }
.cdf-fold-m > i.icon { margin: 0; }
.cdf-fold-m .cdf-fold-chev { margin-left: auto !important; transition: transform .2s; }
.cdf-fold-m.open .cdf-fold-chev { transform: rotate(180deg); }
.cdf-fold-sum { font-weight: 400; font-size: 13px; color: #777; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdf-fold-sum b { color: #F7881F; }
.cdf-fold-box { display: none !important; }
.cdf-fold-box.open { display: block !important; }
@media (max-width: 767.98px) { .cdf-fold-sum { display: none; } }

/* compare / quotation tick on the card's TOP EDGE, right (2026-11-02, back 2026-11-05 - owner: "the ribbon up top right,
   same format" as car / bike / travel .cmp-select.on-edge). The global `.plan-card { overflow: hidden !important }`
   (internal.master) would cut it, so the page lets its grid cards out (#plansGrid > .plan-card overflow: visible). */
.cmp-select.on-edge { position: absolute; top: -12px; right: 8px; left: auto; z-index: 20; background: #fff; padding: 3px 9px; border: 1px solid #e0e1e2; border-radius: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.05); font-size: 12px; line-height: 1.4; margin: 0; }
.cmp-select.on-edge .cmp-select-inner { display: inline-flex; align-items: center; cursor: pointer; gap: 4px; }
.cmp-select.on-edge .cmp-select-inner input { margin: 0; }
.cmp-select.on-edge .cmp-select-inner span { font-weight: 500; color: #555; }