/* === cd-quotation.css — the quotation look, screen part (shared, 2026-10-29) ===
 Owner 2026-10-29: "th/all/compare page is shit - we need to do the UI pdf, png or whatever like we fixed with car, bike,
 travel" - every product keeps its OWN compare page (data code), only the LOOK is shared so a design fix lands everywhere once.
 Moved verbatim out of mp/th/car/compare.aspx (its first <style> block, design of 2026-10-28: compare screen v2, agent box v2,
 phone layout). Linked by: mp/th/car/compare.aspx (car / motorbike), mp/th/travel/compare.aspx (travel) and mp/th/all/compare.aspx (pa, ci, health, life,
 home, pet, drone, pro-indemnity, compensation, student, dental). Page-only rules stay in each page AFTER this link.
 Print / PDF part: cd-quotation-print.css (linked only on ?print=yes). Car rendering must stay identical - edit with care. */
:root {
    --cmp-primary: #1b6bd4;
    --cmp-accent: #f5a623;
    --cmp-success: #21ba45;
    --cmp-danger: #d9534f;
    --cmp-bg: #f5f7fb;
    --cmp-border: #e6e8ef;
    --cmp-text: #1d2233;
    --cmp-muted: #7a8194;
}
.compare-wrap { padding: 0 0 3em; }
.compare-shell {
    background: #fff;
    border: 1px solid var(--cmp-border);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 1em;
}
.compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}
table.compare-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 760px;
    font-size: 14px;
    color: var(--cmp-text);
}
table.compare-table th, table.compare-table td {
    padding: 14px 18px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid var(--cmp-border);
}
table.compare-table .sticky-col {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background: #fafbfd;
    text-align: left;
    font-weight: 500;
    color: var(--cmp-muted);
    z-index: 2;
    min-width: 150px;
    border-right: 1px solid var(--cmp-border);
    font-size: 13px;
}
table.compare-table thead th {
    background: #fff;
    border-bottom: 2px solid var(--cmp-border);
    min-width: 200px;
    padding: 24px 18px 20px;
}
table.compare-table thead .sticky-col {
    background: #f2f4f8;
    z-index: 3;
    border-bottom: 2px solid var(--cmp-border);
}
/* Section group header rows */
table.compare-table tr.cmp-section-row th,
table.compare-table tr.cmp-section-row td {
    background: #f2f4f8;
    color: var(--cmp-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 11px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--cmp-border);
    text-align: left;
}
table.compare-table tr.cmp-section-row td { text-align: left; }
table.compare-table tbody tr:not(.cmp-section-row):hover td:not(.sticky-col) {
    background: #fbfcff;
}
.cmp-logo-wrap {
    width: 80px; height: 80px;
    background: #fff; border: 1px solid var(--cmp-border); border-radius: 12px;
    margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
    padding: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.cmp-logo-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cmp-insurer-name { font-weight: 700; font-size: 15px; color: var(--cmp-text); margin-bottom: 2px; }
.cmp-rating { color: var(--cmp-accent); font-size: 13px; margin-bottom: 10px; letter-spacing: 1px; }
.cmp-rating .star-off { color: #ddd; }
.cmp-premium-wrap { margin: 8px 0 12px; }
.cmp-premium-amount {
    color: #1A518C; font-weight: 800; font-size: 24px; line-height: 1;   /* price blue (was red - red = a pay-more delta) */
    letter-spacing: -.02em;
}
.cmp-premium-currency { font-size: 13px; color: var(--cmp-muted); margin-left: 3px; font-weight: 500; }
.cmp-premium-normal { text-decoration: line-through; color: #bbb; font-size: 13px; margin-right: 6px; }
.cmp-savings { display: block; color: #1e7e34; font-size: 12px; font-weight: 600; margin-top: 4px; }   /* a saving = green delta */
.cmp-type-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #1b6bd4, #3d8dfa);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
}
.cmp-apply-btn.ui.button {
    font-weight: 700;
    border-radius: 8px;
    padding: 11px 18px;
    width: 100%;
    color: #1a1d23 !important;
    box-shadow: 0 2px 6px rgba(245, 166, 35, .3);
}
.cmp-apply-btn.ui.button:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(245, 166, 35, .4); color: #1a1d23 !important; }
.cmp-value-money { font-weight: 600; color: var(--cmp-text); font-size: 14px; }
.cmp-value-none { color: #ccc; }
.cmp-condition-badge {
    display: inline-block; padding: 3px 10px; border-radius: 4px;
    background: #eef5ff; color: #1b6bd4; font-size: 12px; font-weight: 600;
}
.cmp-addon-chips {
    display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.cmp-addon-chip {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}
.cmp-addon-included {
    background: #fdecd0;
    color: #b35900;
    border: 1px solid #f5c98a;
}
.cmp-addon-optional {
    background: #fff;
    color: #b35900;
    border: 1px dashed #d9a25a;
}
/* share bar on top of the table (2026-10-28): one row - label, [name], copy link, PDF, PNG - wrapping on a phone */
.compare-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 .8em; padding: 10px 12px;
    background: #fff; border: 1px solid var(--cmp-border); border-radius: 8px; }
.compare-actions .ui.button { margin: 0; }
.compare-actions .cmp-actions-label { color: var(--cmp-muted); font-size: 12px; margin-right: 4px; }
.compare-actions .cmp-quote-name { margin: 0; }
.cmp-share-hint { flex-basis: 100%; font-size: 12px; color: #888; }
.compare-actions #ContentPlaceHolder1_pnlExport, .compare-actions [id$="pnlExport"] { display: inline-flex !important; gap: 8px; }
/* === agent send bar (2026-11-02, owner "Yes, roll out") === the agent view's share bar = two boxes side by side, stacked on a
   phone: (1) a link the customer buys from by themselves (copy / LINE), (2) a quotation file (name + PDF / PNG). Markup = each
   compare page's § agent send bar; the customer / staff view keeps .compare-actions above. */
.cmp-send { display: flex; gap: 12px; margin: 0 0 1em; }
.cmp-send-box { flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid #e6e8ef; border-radius: 8px; padding: 12px 14px; }
.cmp-send-buy { border-color: #F99F38; background: #FFF8F0; }
.cmp-send-h { font-weight: 700; font-size: 15px; color: #1d2233; display: flex; align-items: center; gap: 8px; }
.cmp-send-n { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: #F7881F; color: #fff; font-size: 12px; align-items: center; justify-content: center; flex: 0 0 auto; }
.cmp-send-box p { margin: 4px 0 10px; font-size: 12.5px; color: #555; line-height: 1.45; }
.cmp-send-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cmp-send-acts .ui.button { margin: 0; }
.cmp-send-acts input[type=text] { flex: 1 1 180px; min-width: 0; padding: 8px 10px; border: 1px solid #d4d4d5; border-radius: 6px; font-size: 13px; }
.cmp-send-files { display: inline-flex !important; gap: 8px; }
.ui.button.cmp-line-btn { background: #06C755; color: #fff; }
/* LINE mark on the send button (2026-11-03, Life 13-step row 12): the button's <i class="comment icon"> draws the white LINE
   speech bubble (LINE's own shape, the same path as life/compare's contact LineMarkSvg) instead of Fomantic's generic chat glyph -
   one rule here = every quotation page's send bar (all / car / health / life / travel compare), no per-page markup. */
.ui.button.cmp-line-btn > i.icon { width: 18px; height: 18px; margin: 0 .45em 0 0; vertical-align: -4px; opacity: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.5 4.6 17 15'%3E%3Cpath d='M12 5.2c-4.4 0-8 2.8-8 6.3 0 3.1 2.8 5.7 6.6 6.2.3.1.6.2.7.4.1.2 0 .5 0 .8l-.1.7c0 .2-.2.8.7.4.9-.4 4.8-2.8 6.5-4.8 1.2-1.3 1.7-2.6 1.7-4C20 8 16.4 5.2 12 5.2z' fill='%23fff'/%3E%3Ctext x='12' y='13.4' font-size='4.4' font-weight='700' text-anchor='middle' fill='%2306C755' font-family='Arial, sans-serif'%3ELINE%3C/text%3E%3C/svg%3E") no-repeat center / contain; }
.ui.button.cmp-line-btn > i.icon:before { content: none; }
@media (max-width: 767px) { .cmp-send { flex-direction: column; } }
.compare-empty {
    padding: 4em 2em; text-align: center; color: var(--cmp-muted); background: #fff;
    border: 1px solid var(--cmp-border); border-radius: 6px; margin-top: 1em;
}
.compare-empty .big-icon { font-size: 48px; color: #d0d6e2; display: block; margin-bottom: .4em; }
@media (max-width: 600px) {
    table.compare-table { font-size: 13px; min-width: 600px; }
    table.compare-table th, table.compare-table td { padding: 10px 12px; }
    table.compare-table thead th { min-width: 160px; padding: 16px 12px 14px; }
    table.compare-table .sticky-col { min-width: 120px; font-size: 12px; }
    .cmp-logo-wrap { width: 60px; height: 60px; }
    .cmp-insurer-name { font-size: 13px; }
    .cmp-premium-amount { font-size: 20px; }
    .cmp-apply-btn.ui.button { font-size: 12px; padding: 9px 12px; }
}
.toast-copied {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: #1d2233; color: #fff; padding: 12px 22px; border-radius: 24px;
    font-size: 13px; opacity: 0; transition: opacity .3s, transform .3s;
    z-index: 9999; box-shadow: 0 6px 20px rgba(0,0,0,.2);
    display: flex; align-items: center; gap: 8px;
}
.toast-copied.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
/* === SECTION: screen clean-up (owner 2026-10-28, mockups/car-quotation-official-2026-10-28.html part 2) ===
   Cells are plain text now (compare.aspx.cs § coverage rows): numbers right-aligned under right-aligned plan
   headers, quiet section bands, one colour system in the agent box, the discount input on the box's own row. */
table.compare-table tbody td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
table.compare-table thead th { text-align: center; vertical-align: top; }
table.compare-table tr.cmp-section-row th, table.compare-table tr.cmp-section-row td { color: #333; text-transform: none; letter-spacing: 0; font-size: 12px; }
/* === SECTION: compare screen v2 styles (owner 2026-10-28, mockups/car-compare-modern-2026-10-28.html) === */
.header-strip { background: linear-gradient(135deg, #F7881F, #F99F38 50%, #FFB000); padding: 10px 0; }
.breadcrumb-v5 { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.9); }
.breadcrumb-v5 a { color: #fff; text-decoration: none; }
.breadcrumb-v5 .sep { margin: 0 6px; opacity: 0.5; }
.plans-hero { background: #fff; border-bottom: 1px solid #eee; padding: 22px 0 16px; margin-bottom: 1em; }
.plans-hero h1 { font-size: 2.2rem; margin: 0 0 4px; line-height: 1.3; }
.plans-hero h1 .accent { color: #F99F38; }
.plans-hero .subtitle { font-size: 15px; color: #666; margin: 0; }
.cmp-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 .8em; font-size: 13px; color: #555; }
.cmp-tgl { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e3e6ea; border-radius: 20px; padding: 6px 12px; cursor: pointer; background: #fff; }
.cmp-tgl input { position: absolute; opacity: 0; pointer-events: none; }
.cmp-tgl b { width: 30px; height: 18px; border-radius: 10px; background: #ccd1d8; position: relative; display: inline-block; transition: background .15s; }
.cmp-tgl b:after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.cmp-tgl input:checked + b { background: #F7881F; }
.cmp-tgl input:checked + b:after { left: 14px; }
.cmp-legend i { color: #1e7e34; font-style: normal; font-weight: 700; }
.cmp-swipe { display: none; margin-left: auto; color: #888; font-size: 12px; }
table.compare-table td.cmp-best { color: #1e7e34; }
table.compare-table td.cmp-best:after { content: ' \2713'; font-size: 11px; }
table.compare-table tr.cmp-same td { color: #8a8f98; font-weight: 500; }
.compare-table.cmp-diff-only tr.cmp-same, .compare-table.cmp-diff-only tr.cmp-hidesec { display: none; }
/* the tag sits in the header's top padding, so the tagged column lines up with the others */
table.compare-table thead th.cmp-plan { position: relative; }
.cmp-lowest { position: absolute; top: 4px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap;
    background: #F7881F; color: #fff; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 10px; }
.cmp-car { text-align: left; font-size: 13px; color: #555; line-height: 1.6; font-weight: 400; }
.cmp-car b { display: block; color: #1d2233; font-size: 15px; }
.cmp-car a { color: #F7881F; font-weight: 600; font-size: 12px; }
table.compare-table tr.cmp-buyrow td { border-bottom: 0; }
.cmp-pay-k { font-size: 12px; color: #777; margin-top: 4px; }
/* desktop: the table fits (no sideways scroll), so the plan headers can stick while the rows scroll */
@media (min-width: 992px) {
    .compare-shell, .compare-scroll { overflow: visible !important; }
    table.compare-table { table-layout: fixed; }   /* equal plan columns */
    table.compare-table thead th.sticky-col { width: 200px; }
    table.compare-table thead th { position: -webkit-sticky; position: sticky; top: 0; z-index: 4; }
    table.compare-table thead th.sticky-col { z-index: 5; }
}
/* agent box v2 (compare.aspx.cs § agent box v2): discount + quick picks + cap, one keep line, folded breakdown */
.acx-q { margin-bottom: 4px; } .acx-q b { color: #1a1d23; } .acx-q span { color: #888; font-size: 12px; }
.agent-com-box { width: 100%; box-sizing: border-box; font-size: 13px; padding: .7em .8em; }
.acx-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #555; }
.acx-row input.agent-disc-input { width: 110px; text-align: right; border: 1px solid #ddd; border-radius: 6px; padding: 6px 8px; font-size: 14px; }
.acx-chips { margin-top: 6px; text-align: left; }
.acx-chip { border: 1px solid #f3c99a; background: #fff; color: #8a4a00; border-radius: 20px; padding: 3px 10px; font-size: 12px; margin: 0 4px 4px 0; cursor: pointer; }
.acx-chip.on { background: #F7881F; border-color: #F7881F; color: #fff; }
.acx-max { font-size: 11.5px; color: #888; text-align: left; }
.acx-keep { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #f3c99a; text-align: left; font-size: 14px; color: #1a1d23; }
.acx-keep b { color: #F7881F; font-size: 16px; }
.acx-keep small { display: block; color: #888; font-size: 12px; }
.acx-more { margin-top: 6px; text-align: left; font-size: 12px; }
.acx-more summary { color: #1A518C; font-weight: 600; cursor: pointer; font-size: 12px; }
.acx-more .agent-com-row { color: #555; }
/* phone: two plans fit the screen (label column + 2 x 120px) instead of a 600px table cut at the first plan;
   three or four still scroll sideways */
@media (max-width: 600px) {
    .cmp-swipe { display: inline; }
    .compare-actions .cmp-quote-name, .compare-actions .cmp-quote-name input { width: 100%; }   /* name field gets its own line */
    /* agent view: a plan column carries the discount box - 230px each (swipe for the 2nd plan), label over the field */
    table.compare-table thead th.cmp-plan:has(.agent-com-box) { min-width: 230px; }
    .acx-row { flex-direction: column; align-items: stretch; gap: 4px; }
    .acx-row input.agent-disc-input { width: 100%; }
    .cmp-car { font-size: 11px; line-height: 1.5; } .cmp-car b { font-size: 13px; }
    .plans-hero { padding: 14px 0 10px; } .plans-hero h1 { font-size: 1.6rem; } .plans-hero .subtitle { display: none; }
    table.compare-table.compare-table { min-width: 0; }
    /* 124px a plan: two fit next to the label column on a 375 phone, the rest scroll (owner 2026-10-28) */
    table.compare-table thead th.cmp-plan, table.compare-table tbody td { min-width: 124px; }
    table.compare-table thead th.cmp-plan { padding: 12px 6px; }
    table.compare-table .sticky-col.sticky-col { min-width: 90px; max-width: 110px; }
    table.compare-table .cmp-premium-normal { display: block; margin: 0 0 2px; }   /* struck price on its own line */
    table.compare-table .cmp-logo-wrap { width: 52px; height: 52px; }
    table.compare-table tbody td { padding: 10px 8px; font-size: 13px; }
    table.compare-table .cmp-premium-amount { font-size: 18px; }
}
.cmp-quote-name { display: inline-block; margin: 0 .3em .6em; }
.cmp-quote-name input { border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; font-size: 13px; width: 240px; max-width: 100%; }
/* Agent commission box per plan column. Same shape as plans.aspx + apply.aspx
   agent-com-box, but compressed for compare-table layout (smaller padding/font). */
.agent-paymethod-bar {
    background: #FFF8F0; border: 1px solid #FFE0B2; border-radius: 6px;
    padding: .6em .8em; margin-bottom: 1em; font-size: 13px;
}
.agent-com-box {
    background: #FFF8F0; border: 1px solid #FFE0B2; border-radius: 6px;
    padding: .5em; font-size: 11px; margin: .4em 0; text-align: left;
}
.agent-com-row {
    display: flex; justify-content: space-between; padding: .1em 0;
}
.agent-com-row.muted { color: darkblue; }
.agent-com-row.total {
    padding: .25em 0 .1em; color: red;
    border-top: 1px dashed #FFE0B2; margin-top: .2em;
}
.agent-com-row.total span { font-weight: 700; }