/* === cd-paybar.css — the agent pay question as 3 segments (owner 2026-11-05) ===
   "ลูกค้าจะจ่ายแบบไหน?" kept all 7 choices (owner: "the choices are fine - better for the agents - just the UI needs changing"),
   laid out as  เงินโอน 15% | บัตร 12.3% | ผ่อน ▾  - the five ผ่อน months sit in the ▾ list. Selected = E4's dark outline, not
   the yellow fill a buy button uses. The estimate note folds behind an ⓘ. Script + markup: /content/js/cd-paybar.js. */
[data-cdpb] { overflow: visible !important; flex-wrap: wrap !important; padding-bottom: 0 !important; }   /* the old phone row scrolled sideways - it would clip the ▾ list */
.cdpb { display: inline-flex; align-items: stretch; flex-wrap: nowrap; max-width: 100%; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #d4d4d5 inset; position: relative; }
.cdpb > .paymethod-pill.ui.button, .cdpb > .cdpb-inst { margin: 0 !important; border-radius: 0 !important; background: #fff !important; color: #1a1d23 !important; box-shadow: none !important;
    border: 0 !important; border-left: 1px solid #d4d4d5 !important; padding: .75em 1.1em !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.2; white-space: nowrap; cursor: pointer; font-family: inherit;
    transition: none !important; }   /* Semantic fades box-shadow .1s: the outline lagged a beat behind the tap */
.cdpb > :first-child { border-left: 0 !important; border-radius: 8px 0 0 8px !important; }
.cdpb > :last-child { border-radius: 0 8px 8px 0 !important; }
.cdpb > .paymethod-pill.ui.button.active, .cdpb > .cdpb-inst.on { background: #f5f6f8 !important; box-shadow: 0 0 0 2px #1a1d23 inset !important; font-weight: 700 !important; position: relative; z-index: 1; }
.cdpb-inst i.icon { margin: 0 0 0 4px !important; font-size: 12px; }
.cdpb-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 210px; background: #fff; border: 1px solid #e0e1e2; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; }
.cdpb.open > .cdpb-menu { display: block; }
.cdpb-menu > .paymethod-pill.ui.button { display: flex !important; justify-content: space-between; width: 100%; margin: 0 !important; padding: 10px 12px !important; border: 0 !important; border-radius: 6px !important;
    background: #fff !important; color: #1a1d23 !important; box-shadow: none !important; font-size: 14px !important; font-weight: 500 !important; text-align: left; }
.cdpb-menu > .paymethod-pill.ui.button:hover { background: #f5f6f8 !important; }
.cdpb-menu > .paymethod-pill.ui.button.active { background: #f5f6f8 !important; box-shadow: 0 0 0 1.5px #1a1d23 inset !important; font-weight: 700 !important; }
.cdpb-info { border: 0; background: none; padding: 0 4px; margin-left: 4px; color: #6b7280; cursor: pointer; font-size: 14px; line-height: 1; vertical-align: middle; }
.cdpb-info:hover, .cdpb-info[aria-expanded="true"] { color: #1a1d23; }
.cdpb-host .agent-est-note { display: none !important; }
.cdpb-host.cdpb-note-open .agent-est-note { display: block !important; }
@media (max-width: 767.98px) {
    /* phone: the three segments fill the row; the ผ่อน list opens full width under it */
    .cdpb { display: flex; width: 100%; }
    .cdpb > .paymethod-pill.ui.button, .cdpb > .cdpb-inst { flex: 1 1 0; padding: .8em .3em !important; font-size: 13px !important; text-align: center; }
    .cdpb-menu { left: 0; right: 0; min-width: 0; }
}