/* === cd-plans-e4.css — design E4 on EVERY plans page (owner 2026-11-05) ===
   Owner, after the 2026-11-04 sitewide pass had swapped E4 for the PA look: "go back to our [E4] ... change for all pages".
   Kept from that pass (owner): the sticky filter bar (cd-sticky-filter.js), the recommended box always shown (no แนะนำ / ทั้งหมด
   tabs, no nudge) and its ย่อ / แสดง button - one card per insurer, folded on a phone (/content/js/cd-rec-box.js). Back from E4: light grey page, dark-outline selected states, the green buy, the small
   mascot + cream "น้องเช็คดิแนะนำ" segment, the Kanit font. New: the insurer chips are ONE "บริษัท ▾" button + a panel
   (/content/js/cd-insurer-menu.js) - "inside the filter with ทั้งหมด" looked dirty, the logo chip row was too much on screen.
   Loaded LAST on car, motorbike, travel, domestic travel, all plans (home / dental / pet / golf / SME ...), PA, health/plansnew,
   CI and life plans, after every page <style> - so it wins ties without fighting each page's own rules one by one.
   Section 3 (.plan-card) is the PA / health / CI / life card in the car card's order, from the E4 mockups the owner approved
   (mockups/plans-make-e4-2026-11-04.py). Car-format cards already carry E4 in their own page. */

/* === 1. page === */
html, body { background: #F5F5F5 !important; }
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6,
.ui.button, .ui.header, .ui.menu, .ui.label, .ui.labels .label, .ui.input > input, .ui.form input, .ui.form select, .ui.form textarea,
.ui.dropdown, .ui.dropdown .menu > .item, .ui.message, .ui.modal, .ui.modal > .header, .ui.list, .ui.card > .content > .header,
.ui.cards > .card > .content > .header, .ui.statistic > .value, .ui.statistic > .label, .ui.popup { font-family: Lato, Kanit, sans-serif; }
/* top: the orange breadcrumb strip + the title; the mascot lives in the แนะนำ segment, not in the hero */
.cdh-mascot { display: none !important; }
.ui.container.cdh-hero { padding-right: 0; min-height: 0; }
.cdh-chg { color: #1A518C; border-color: #d4d4d5; font-weight: 500; }
.plans-hero { background: transparent !important; }

/* === 2. selected = dark outline, never an orange fill === */
.cdf-fold-m, .cdf { border-color: #e0e1e2; box-shadow: none; }
.cdf-fold-sum b, .cdf-count b { color: #1a1d23 !important; }
.cdf-pill.on { background: #fff !important; border-color: #1a1d23 !important; color: #1a1d23 !important; font-weight: 600; }
.cdg-btn:hover, .cdg-btn.active, .group-tiers-btn:hover, .group-tiers-btn.active, .group-tiers-btn.active:hover { background: #fff !important; border-color: #1a1d23 !important; color: #1a1d23 !important; box-shadow: none !important; }
.cdq.ui.basic.buttons > .ui.button.active { background: #f5f6f8 !important; box-shadow: 0 0 0 2px #1a1d23 inset !important; color: #1a1d23 !important; font-weight: 700; z-index: 1; }
.ui.basic.buttons.cdv > .ui.button.active { background: #1a1d23 !important; color: #fff !important; }
.cdf .cdf-rj .rj-claim-tile.ui.button.blue, .cdf .cdf-rj .ui.buttons > .ui.button.blue { background: #f5f6f8 !important; box-shadow: 0 0 0 1.5px #1a1d23 inset !important; color: #1a1d23 !important; font-weight: 600; }

/* === 3. buy = the one solid green (+ the pay sheet's buy) === */
.cd-cust-btns > .ui.yellow.button, .cd-agent-btns > .ui.yellow.button, .plan-card .ui.yellow.button.applybtn, .cdps-f .ui.yellow.button { background: #21BA45 !important; color: #fff !important; font-weight: 600; }
.cd-cust-btns > .ui.yellow.button:hover, .cd-agent-btns > .ui.yellow.button:hover, .plan-card .ui.yellow.button.applybtn:hover, .cdps-f .ui.yellow.button:hover { background: #16AB39 !important; }
.cd-cust-btns > .ui.basic.button { background: #fff !important; color: rgba(0,0,0,.6) !important; box-shadow: 0 0 0 1px rgba(34,36,38,.15) inset !important; }

/* === 4. "น้องเช็คดิแนะนำ" = the small mascot standing on a cream segment; ย่อ / แสดง stays on the right === */
.cd-rec { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.cd-rec-top { display: flex !important; align-items: flex-end; gap: 6px; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.cd-rec-top img { width: 72px !important; height: auto !important; position: relative; z-index: 1; }
.cd-rec-who { margin: 0 0 2.4em !important; font-size: 17px !important; font-weight: 700 !important; color: #1a1d23 !important; text-transform: none !important; letter-spacing: 0 !important; }
.cd-rec-title, .cd-rec-why { display: none !important; }
.cd-rec-min { margin-left: auto !important; margin-bottom: 2.6em !important; }
.cd-rec-cards { margin: -2.2em 0 0 !important; background: #FFF8EF !important; box-shadow: 0 0 0 1px #F9C98E inset !important; border-radius: 10px; padding: 1.4em .5em .6em !important; }
.cd-rec.min .cd-rec-who, .cd-rec.min .cd-rec-min { margin-bottom: .6em !important; }

/* === 5. insurer menu: "บริษัท ▾" + a panel of logo rows (cd-insurer-menu.js) === */
.cdim-host { display: block !important; background: none !important; border: 0 !important; padding: 0 !important; margin: 8px 0 12px !important; box-shadow: none !important; }
.cdim-host > :not(.cdim) { display: none !important; }   /* the label, the "ทั้งหมด" chip (kept for the page's scripts), ล้าง, +N */
.cdim-moved { display: none !important; }
.cdim { position: relative; display: inline-block; flex: none; }
.cdim-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; color: #1a1d23; cursor: pointer; white-space: nowrap; }
.cdim-btn:hover { border-color: #b8bcc4; }
.cdim-btn > i.icon { margin: 0; color: #6b7280; }
.cdim-btn > i.icon.dropdown { font-size: 12px; }
.cdim.on > .cdim-btn { box-shadow: 0 0 0 1px #1a1d23 inset; border-color: #1a1d23; font-weight: 600; }
.cdim-n:empty { display: none; }
.cdim-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 320px; max-height: 60vh; overflow: auto; background: #fff; border: 1px solid #e0e1e2; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; }
.cdim.open > .cdim-panel { display: block; }
.cdim-panel .cdf-chip-list { display: block !important; }
.cdim-panel .cdf-chip { display: flex !important; width: 100%; align-items: center; gap: 10px; padding: 9px 10px !important; margin: 0 !important; border: 0 !important; border-radius: 6px !important; background: #fff !important; color: #1a1d23 !important; font-size: 14px !important; font-weight: 500 !important; opacity: 1; cursor: pointer; }
.cdim-panel .cdf-chip:hover { background: #f5f6f8 !important; color: #1a1d23 !important; }
.cdim-panel .cdf-chip .cdf-logo { width: 22px; height: 22px; border-radius: 4px; border: 1px solid #eceef1 !important; object-fit: contain; flex: none; }
.cdim-panel .cdf-chip > span:not(:first-child), .cdim-panel .cdf-chip > span { flex: 1 1 auto; min-width: 0; }
.cdim-panel .cdf-chip small { margin-left: auto; color: #6b7280 !important; font-size: 12px; white-space: nowrap; }
.cdim-panel .cdf-chip::after { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid #c4c8cf; border-radius: 4px; background: #fff; }
.cdim-panel .cdf-chip:is(.active, :has(> input:checked)) { background: #f5f6f8 !important; color: #1a1d23 !important; font-weight: 600 !important; }
.cdim-panel .cdf-chip:is(.active, :has(> input:checked)) small { color: #6b7280 !important; }
.cdim-panel .cdf-chip:is(.active, :has(> input:checked))::after { border-color: #1a1d23; background: #1a1d23 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; }
.cdim-panel .cdf-chip.zero { opacity: .4; }
.cdim-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid #f0f0f0; margin-top: 4px; padding: 8px 6px 2px; }
.cdim-all, .cdim-clear, .cdim-done { border: 0; background: none; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.cdim-all { color: #1A518C; }
.cdim-all:disabled { opacity: .4; cursor: default; }
.cdim-clear { color: #6b7280; }
.cdim-clear:disabled { opacity: .4; cursor: default; }
.cdim-done { color: #fff; background: #1a1d23; padding: 6px 14px; }
.cdim-back { display: none; }
@media (max-width: 767.98px) {
    /* phone: the panel is a bottom sheet over a dim backdrop */
    .cdim.open > .cdim-back { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1000; }
    .cdim-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 75vh; border-radius: 14px 14px 0 0; z-index: 1001; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
    .cdim-panel .cdf-chip { padding: 12px 10px !important; }
    .cdt .cdim, .cdt .cdim-btn { height: 38px; }
}

/* === 6. PA / health / CI / life card (App_Code/PaCardRenderer.cs .plan-card) in the car card's order === */
.ui.cards > .plan-card.ui.card { overflow: visible !important; background: #fff; border-radius: .28571429rem !important; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 !important; }
.ui.cards > .plan-card.ui.card:hover { transform: none !important; box-shadow: 0 1px 3px 0 #bcbdbd, 0 0 0 1px #d4d4d5 !important; }
.plan-card > .content:first-child { display: flex !important; flex-direction: column; }
.plan-card > .content:first-child > * { order: 7; }
.plan-card > .content:first-child > div:first-child { order: 0; }
.plan-card > .content:first-child > .price-section { order: 1; }
.plan-card > .content:first-child > .ui.divider { order: 3; margin: .7em 0 0 !important; }
.plan-card > .content:first-child > .sip-step-row { order: 2; margin-top: .6em !important; }   /* life: the sum-insured stepper drives the price, so it sits under it */
.plan-card > .content:first-child > .coverage-row { order: 4; }
.plan-card > .content:first-child > .ui.accordion { order: 5; }
.plan-card > .content:first-child > div:has(> .plan-tag) { order: 6; }
.plan-card > .content:first-child > div:first-child { gap: 14px !important; align-items: center; }
.plan-card > .content:first-child > div:first-child > img.ui.image { width: 56px !important; height: 56px !important; object-fit: contain; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
.plan-card .price-section, .plan-card .price-section .cdp { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: .7em 0 0 !important; box-shadow: none !important; }
.plan-card .cdp-lbl { display: none !important; }
.plan-card .price-section .price-lbl { font-size: 12px !important; color: #6b7280 !important; font-weight: 400 !important; margin: 0 !important; }
.plan-card .price-section > *, .plan-card .cdp > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.plan-card .cdp-row { display: flex; align-items: baseline; gap: .3em; }
.plan-card .price-section .price-value, .plan-card .cdp-row .price-value { color: #1a1d23 !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.15; }
.plan-card .price-section .price-value::before, .plan-card .cdp-row .price-value::before { content: "฿" !important; font-size: inherit !important; color: inherit !important; font-weight: inherit !important; vertical-align: baseline !important; margin: 0 !important; position: static !important; }
.plan-card .price-section .price-unit, .plan-card .cdp-row .price-unit { color: #6b7280 !important; font-size: 13px !important; font-weight: 400 !important; }
.plan-card .price-section .cdp-more, .plan-card .cdp-more { display: block !important; margin: 4px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 12.5px; color: #6b7280; line-height: 1.5; }
.plan-card .cdp-more-t, .plan-card .cdp-more-t > b, .plan-card .cdp-more-t > span { display: inline !important; font-weight: 400 !important; font-size: 12.5px !important; color: #6b7280 !important; }
.plan-card .cdp-more-t small { display: none !important; }
.plan-card .cdp-mo { color: #1a1d23 !important; font-weight: 600; font-size: 13px; }
.plan-card .cdp-all { display: inline !important; color: #1A518C !important; font-weight: 600; font-size: 12.5px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.plan-card .cdp-all::before { content: " · "; color: #6b7280; font-weight: 400; }
.plan-card .coverage-row { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between; align-items: baseline; gap: 1em; border-top: 1px solid rgba(34,36,38,.1); padding: .42em 0 !important; margin: 0 !important; font-size: 14px; }
.plan-card .content > .ui.divider + .coverage-row, .plan-card .coverage-row:first-of-type { border-top: 0; }
.plan-card .coverage-row .cov-label { flex: 1 1 auto; min-width: 0; color: rgba(0,0,0,.87); font-size: 14px; }
.plan-card .coverage-row .cov-amount { flex: 0 1 auto; width: auto !important; max-width: 58%; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.plan-card .coverage-row .cov-label > i.check.circle.icon { display: none !important; }
.plan-card .coverage-row .cov-amount, .plan-card .coverage-row .cov-amount *:not(.scope-chip):not(.cov-amount-qual):not(.cov-amount-qual *) { font-weight: 700 !important; color: #1a1d23 !important; font-size: 14px; text-align: right; }
.plan-card .coverage-row .cov-amount-qual { font-weight: 400 !important; color: #6b7280 !important; font-size: 11px !important; }
.plan-card .plan-tag { background: #F2711C !important; color: #fff !important; border: 0 !important; border-radius: .28571429rem !important; font-size: 12px !important; font-weight: 700 !important; padding: .45em .75em !important; }
.plan-card .plan-tag i.icon { color: #fff !important; }

/* === 7. recommended box: ย่อ / แสดง + the folded header line (cd-rec-box.js) === */
.cdrb-tog { margin-left: auto !important; align-self: flex-start; flex: none; background: #fff; border: 1px solid #d4d4d5; color: #1a1d23; border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; position: relative; z-index: 2; }
.cdrb-tog:hover { border-color: #1a1d23; }
.cdrb-tog i.icon { margin: 0 0 0 2px; font-size: 11px; }
.cdrb-sum { display: none; font-weight: 400; color: #6b7280; font-size: 14px; }
.cdrb-fold .cdrb-sum, .cd-rec.min .cdrb-sum { display: inline; }
.cdrb-fold #recommend, .cdrb-fold #homeRecommend, .cdrb-fold .ui.warning.message { display: none !important; }
.cdrb-fold > div:first-child { margin-bottom: .4em !important; align-items: center !important; }
.cdrb-fold > div:first-child h4, .cdrb-fold .cd-rec-who { margin-bottom: 0 !important; }
.cdrb-fold .cdr-mascot, .cdrb-fold .cd-rec-top img { width: 44px !important; }

/* === 8. sticky filter bar (cd-sticky-filter.js; Santa 2026-11-04, kept by the owner 2026-11-05) - E4 colours, not orange === */
.cd-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: #fff; border-bottom: 1px solid #e6e6e6; box-shadow: 0 2px 8px rgba(0,0,0,.08); transform: translateY(-110%); transition: transform .18s ease; cursor: pointer; }
.cd-sticky.on { transform: none; }
.cd-sticky-in { max-width: 1127px; margin: 0 auto; padding: 0 16px; height: 46px; display: flex; align-items: center; gap: 10px; }
.cd-sticky-l { display: inline-flex; align-items: center; gap: 4px; flex: none; border: 1px solid #d4d4d5; border-radius: 8px; padding: 5px 10px; font-size: 13px; font-weight: 600; color: #1a1d23; white-space: nowrap; }
.cd-sticky-l i.icon { margin: 0; font-size: 12px; }
.cd-sticky-s { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #555; }
.cd-sticky-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: #555; white-space: nowrap; }
.cd-sticky-n > * { white-space: nowrap; margin: 0 !important; }
.cd-sticky-s:empty { display: none; }
.cd-sticky-n b { color: #1a1d23; font-size: 15px; }
.cd-sticky-in > i.chevron { flex: none; margin: 0 0 0 auto; color: #999; font-size: 12px; }
.cd-sticky:hover .cd-sticky-l { border-color: #1a1d23; }
@media (max-width: 767.98px) { .cd-sticky-in { padding: 0 12px; height: 44px; gap: 8px; } }
/* PA / health / CI fold = .cd-rec.min; on a phone Semantic's ".ui.stackable.cards { display: block !important }" beat the page's
   own "display: none" and the folded box still showed its cards */
.cd-rec.min .cd-rec-cards { display: none !important; }

/* === 9. PA / health / CI / life page parts (2026-11-05) === their need pills (.feature-pill) pick with the dark outline; the
   card's price block reads like the car card: left, "฿X /ปี" big, no "เงินโอน" label over it, and "ช่องทางชำระเงินอื่น" a
   plain blue link instead of an orange box (it still opens the same pay rows) */
.feature-pill.active, .feature-pill.active:hover { background: #fff !important; border-color: #1a1d23 !important; color: #1a1d23 !important; box-shadow: 0 0 0 1px #1a1d23 inset !important; }
.feature-pill.active * { color: #1a1d23 !important; }
.plan-card .price-section { text-align: left !important; }
.plan-card .price-section > div:first-child:has(> i.money) { display: none !important; }
.plan-card .price-section > .ui.accordion { margin-top: 2px !important; }
.plan-card .price-section > .ui.accordion > .title { background: none !important; border: 0 !important; padding: 2px 0 !important; justify-content: flex-start !important;
    color: #1A518C !important; font-size: 12.5px !important; font-weight: 600 !important; }
.plan-card .price-section > .ui.accordion > .title > i.credit.card.icon { display: none !important; }
/* life: the compare tick comes before the header - keep it first and the header right after it (it fell to the card's foot) */
.plan-card > .content:first-child > .cmp-select { order: -1; }
.plan-card > .content:first-child > .cmp-select + div { order: 0; }
/* life's buy has no .applybtn: the bottom bar's yellow button is the buy */
.plan-card > .ui.bottom.attached.buttons > .ui.yellow.button { background: #21BA45 !important; color: #fff !important; font-weight: 600; }
.plan-card > .ui.bottom.attached.buttons > .ui.yellow.button:hover { background: #16AB39 !important; }

/* === 10. PA / health / CI / life card foot + selects = the car card's (owner 2026-11-05: "all have the button different
   that we agreed on") === the attached two-part bar becomes car's two rounded buttons inside the card - "รายละเอียด" basic,
   the buy the one solid green - and the agent's "ส่งให้ลูกค้า" the car agent's white button with the orange outline */
/* px, never em: Fomantic's .ui.buttons sets font-size: 0 (it kills the gaps between inline buttons), so every em on this
   bar computed to 0 - the buttons stayed full-bleed with no gap */
.plan-card > .ui.bottom.attached.buttons { display: grid !important; grid-template-columns: 1fr 1fr; gap: 7px !important; width: auto !important; margin: 0 !important;
    padding: 6px 14px 14px !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.plan-card > .ui.bottom.attached.buttons > .ui.button { width: auto !important; flex: none !important; border-radius: 8px !important; margin: 0 !important; padding: .85em .6em !important;
    font-size: 14px !important; line-height: 1.2; white-space: nowrap; }   /* Semantic's .two.buttons set each to 50% of the old full-bleed bar */
.plan-card > .ui.bottom.attached.buttons > .ui.basic.button { background: #fff !important; color: rgba(0,0,0,.6) !important; box-shadow: 0 0 0 1px rgba(34,36,38,.15) inset !important; font-weight: 400 !important; }
.plan-card > .ui.bottom.attached.buttons > .ui.button > i.icon { display: none !important; }
.plan-card > .ui.bottom.attached.buttons > .ui.button:not(.basic) { font-weight: 600 !important; }
.plan-card .ui.fluid.basic.button.cmp-send { border-radius: 8px !important; background: #fff !important; box-shadow: 0 0 0 1px #F99F38 inset !important; color: #F7881F !important; font-weight: 500 !important; }
.plan-card > div:has(> .cmp-send) { padding: 0 1em 1em !important; border: 0 !important; }
/* the selects inside a card (health deductible / OPD / add-ons, CI amount): car's plain bordered select with its arrow -
   the 24px borderless right-aligned box hid what it held, and cut long options ("OPD 2,000 บาท/ครั้ง ...") on a phone */
.plan-card select.option-select, .plan-card select.tier-sa-select { -webkit-appearance: menulist !important; appearance: auto !important; background: #fff !important;
    border: 1px solid #d4d4d5 !important; border-radius: 6px !important; padding: 4px 6px !important; height: auto !important; min-height: 30px; max-width: 100% !important;
    text-align: left !important; text-align-last: left; font-size: 13.5px !important; font-weight: 600 !important; color: #1a1d23 !important; box-shadow: none !important; }
.plan-card select.option-select option, .plan-card select.tier-sa-select option { font-weight: 400; text-align: left; background: #fff; color: #1a1d23; }
/* a select keeps room to show what it holds (owner 2026-11-05, health "การดูแลสุขภาพ (วัคซีน ตรวจสุขภาพ สายตา ทันตกรรม)
   (เลือกซื้อเพิ่ม)"): the long label took the row and squeezed the select to 44px ("ไ▾"), because the amount cell above may
   shrink. A cell holding a select does not shrink; the select is at least "ไม่เพิ่ม" + arrow wide, still capped at 58%. */
.plan-card .coverage-row .cov-amount:has(> select.option-select), .plan-card .coverage-row .cov-amount.inline-option { flex-shrink: 0; }
.plan-card select.option-select { min-width: 92px; flex: 0 0 auto; }