/* ---------- Container spacing ---------- */
#CostSavings { padding-bottom: 12px; }

/* ---------- Plan card base ---------- */
.plan-card {
border-radius: 10px;
background: #f6fbff;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
border-left: 0px; /* set to 0 to remove left bar */
transition: transform .12s ease;
overflow: hidden;
margin-bottom: 20px;
}
.plan-card.standard { background: #f8fbff; border-left-color: #0072ce; }


/* ---------- Header (H4) with larger centered check icon ---------- */
.plan-card h4.font-weight-bold {
color: rgb(2, 119, 167) !important;
}

/* check icon next to heading */
.check-icon {
width: 44px;
height: 44px;
object-fit: contain;
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
}

/* Paragraph directly below heading aligned with heading */
.plan-card .pr-3 p {
margin-top: 4px;
margin-bottom: 0;
margin-left: 54px;
color: #4c5966;
font-size: .95rem;
line-height: 1.25;
}

/* On smaller screens remove indent so paragraph spans full width */
@media (max-width: 768px) {
.plan-card .pr-3 p { margin-left: 0; }
.check-icon { width: 32px; height: 32px; }
}

/* ---------- Table layout----*/
.fixed-table {
width: 100%;
table-layout: auto;
border-collapse: separate;
border-spacing: 0;
box-sizing: border-box;
}
.transposed-table { width: 100%; border-collapse: separate; border-spacing: 0; }

/* table header - allow wrapping */
.transposed-table thead th {
background: #f0f4f8;
font-weight: 600;
padding: 10px 8px;
border: 1px solid #e2e6ea;
text-align: center;
white-space: normal;
overflow: visible;
font-size: .92rem;
line-height: 1.15;
}

/* label column - allow wrap and be wide */
.transposed-table .row-label {
min-width: 210px;
max-width: 320px;
width: 26%;
white-space: normal;
overflow-wrap: break-word;
padding: 12px;
background: #f2f5f8;
font-weight: 600;
text-align: left;
}

/* numeric cells - allow wrap and centered (except totals) */
.transposed-table td {
padding: 12px 10px;
border-left: 1px solid #e9eef5;
border-top: 1px solid #e9eef5;
text-align: center;
vertical-align: middle;
white-space: normal;
overflow-wrap: anywhere;
}

/* totals column (right-most) should be wider and right-aligned */
.transposed-table th:last-child,
.transposed-table td:last-child {
min-width: 130px;
width: 14%;
text-align: right;
}

/* totals emphasis (font) - per-row coloring overrides color */
.transposed-table td.font-weight-bold { font-weight: 700; }

/* help prevent clipping */
.transposed-table th, .transposed-table td { word-break: break-word; overflow: visible; }

/* ---------- tfoot integrated square pill ---------- */
.savings-cell {
border: none !important;
background: transparent !important;
vertical-align: middle;
text-align: right;
padding: 8px 12px;
}

.savings-pill-wrapper {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}

.savings-label {
margin-bottom: 4px;
}

/* FLAT pill (square corners) that sits as part of the table */
.savings-pill-flat {
display: inline-flex;
align-items: center;
gap: 8px;
background: #00366d; /* default dark */
color: #fff;
padding: 6px 10px;
border-radius: 0;
box-shadow: none;
border: none;
line-height: 1;
white-space: nowrap;
}
.savings-pill-flat.light { background: #0072ce; }

.savings-icon-inpill {
width: 16px;
height: 16px;
object-fit: contain;
background: transparent !important;
border-radius: 0 !important;
filter: none !important;
display: inline-block;
}

.savings-value { font-weight: 700; color: #fff; font-size: .95rem; }

/* slight top border so pill looks part of table */
.transposed-table tfoot td { border-top: 1px solid #e9eef5; }

/* responsive: center on small screens */
@media (max-width: 576px) {
.savings-cell { text-align: center; }
.savings-pill-wrapper { align-items: center; }
}

/* ---------- Savings inline note (under table) ---------- */
.savings-note {
display:flex;
align-items:center;
gap:6px;
margin:12px 0px 20px 0px;
background-color:aliceblue;
}
.savings-inline-icon {
width:48px;
height:48px;
object-fit:contain;
filter: none !important;
display:inline-block;
}
.savings-note p { color: #0b4d78; margin: 0; font-size: .95rem; }
.savings-note p strong { color: #00366d; font-weight: 700; }

/* Marcus - High */
.plan-card.high .row-label.accent { background: #00366d; color: #fff; font-weight: 700; }
.plan-card.high .savings-pill-flat { background: rgb(0, 54, 109); }
/*.plan-card.high .savings-label { color: #5fa8e6; }*/

/* Dana - Standard */
.plan-card.standard .row-label.accent { background: rgb(2, 119, 167); color: #fff; font-weight: 700; }
.plan-card.standard .savings-pill-flat.light { background: rgb(0, 54, 109); }
/*.plan-card.standard .savings-label { color: #5fa8e6; }*/

/* ---------- Row-based coloring (average-row & accent-row) ---------- */
/* neutral average row */
.plan-card .transposed-table tbody tr.average-row td {
color: #3b3b3b;
font-weight: 600;
}

/* ---------- small responsive helpers ---------- */
@media (max-width: 992px) {
.transposed-table .row-label { width: 35%; min-width:180px; }
.transposed-table th:last-child, .transposed-table td:last-child { width: 22%; min-width:120px; }
.check-icon { width: 32px; height: 32px; }
.plan-card .pr-3 p { margin-left: 40px; }
}
@media (max-width: 576px) {
/* stacked table for very small screens */
.transposed-table thead { display: none; }
.transposed-table, .transposed-table tbody, .transposed-table tr,
.transposed-table td, .transposed-table th {
display: block;
width: 100%;
}
.transposed-table .row-label, .transposed-table td { display:block; width:100%; padding:8px; white-space:normal; text-align:left; }
.plan-card { padding: 14px; }
.savings-box-inline { align-items: center; }
.plan-card .pr-3 p { margin-left: 0; }
}

/* ---------- Minor utilities ---------- */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; }

.savings-cell .savings-pill-wrapper {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
align-items: center;
justify-items: end;
width: 100%;
box-sizing: border-box;
padding-right: 0;
}

/* pill uses the second grid column and will fill that column (looks like last column) */
.savings-cell .savings-pill-flat {
grid-column: 2 / 3;
justify-self: end; /* stretch to fill the column horizontally */
width: 80%;
display: inline-flex;
align-items: center;
justify-content: center; /* center icon + value like a table cell */
height:34px;
line-height:34px
padding: 0px 12px; /* match table cell vertical padding */
min-width:151px;
max-width:151px;
font-size:0.95rem;
box-sizing: border-box;
border-radius: 0; /* flat edges to match table */
}

/* reduce icon size inside pill slightly so it sits well when pill is full-width */
.savings-cell .savings-icon-inpill { width: 20px; height: 20px; margin-right:-8px; object-fit: contain; }

/* ensure pill text is bold and same color as before */
.savings-cell .savings-value { font-weight: 700; color: #fff; }

/* remove extra top/bottom gap so pill aligns with table cell height more closely */
.transposed-table tfoot td.savings-cell,
.transposed-table tfoot td.savings-cell .savings-pill-wrapper {
padding-top: 0px;
padding-bottom: 6px;
margin-left:8px;
}

/* responsive: on very small screens stack label above pill and center */
@media (max-width: 576px) {
.savings-cell .savings-pill-wrapper {
grid-template-columns: 1fr;
justify-items: center;
row-gap: 6px;
}
.savings-cell .savings-label { justify-self: center; }
.savings-cell .savings-pill-flat { width: auto; justify-self: center; }
}

/* Make sure plan-card uses static flow (we will not absolute-position the icon) */
.plan-card { position: relative; }

/* 1) Ensure the check icon is inline, bigger and vertically centered.
Force it to be static (overrides earlier absolute rules) so it's part of the h4 flow. */
.plan-card h4 .check-icon,
.check-icon {
position: static !important;
display: inline-block !important;
width: 48px !important; /* bigger icon */
height: 48px !important;
object-fit: contain;
vertical-align: middle;
margin: 0;
flex-shrink: 0;
}

/* 2) Heading H4 - inline flex so icon and text align center */
.plan-card h4.font-weight-bold {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin: 0 !important; /* remove extra bottom gap */
padding: 0 !important;
line-height: 1.12;
font-size: 1rem;
font-weight: 600;
}

/* 3) Paragraph directly below the heading should start aligned with the H4 text.
Left indent equals icon width + gap (48 + 12 = 60px). */
.plan-card .pr-3 p {
margin: 6px 0 0 60px !important; /* small top gap only; left align with heading text */
color: #4c5966;
font-size: .95rem;
line-height: 1.25;
}

/* On small screens undo the indent so paragraph uses full width */
@media (max-width: 768px) {
.plan-card .pr-3 p { margin-left: 0 !important; }
.plan-card h4.font-weight-bold { display:flex; align-items:center; gap:10px; }
.plan-card h4 .check-icon { width: 32px !important; height: 32px !important; }
}


/* label sits right-aligned in column 1 (maps under second-last column) */
.savings-cell .savings-label {
grid-column: 1 / 2;
justify-self: end;
text-align: right;
font-size: .88rem;
font-weight: 700;
color: rgb(2, 119, 167);
padding-right: 0px; /* small gap between label and pill */
white-space: nowrap;
}


.transposed-table tfoot td.savings-cell { border-top: 1px solid #e9eef5 !important; padding-top: 6px; padding-bottom: 6px; }

/* also ensure the last column's cells don't have extra right padding that creates a gap */

/* Responsive: on tiny screens stack and center label/pill */
@media (max-width: 576px) {
.savings-cell .savings-pill-wrapper { grid-template-columns: 1fr; justify-items:center; row-gap:6px; }
/*.savings-cell .savings-label { justify-self:center; padding-right:0; }*/
.savings-cell .savings-pill-flat { width:auto; justify-self:center; }
}

/* 5) Safety overrides: in case there are earlier absolute rules forcing icon to be absolute,
ensure the static inline style wins. These are high-specificity overrides. */
.plan-card h4 img.check-icon[style],
.plan-card h4 img.check-icon,
img.check-icon {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
margin: 0 !important;
}

/* Marcus accent row: navy numbers*/
.plan-card.high .transposed-table tbody tr.accent-row td {
color: #00366d;
font-weight: 700;
}
.plan-card.high .transposed-table tbody tr.accent-row td.font-weight-bold,
 .plan-card.high .transposed-table tbody tr.accent-row td.last-child{
color: rgb(0, 54, 109) !important;
}


/* Dana accent row: brand light blue*/
.plan-card.standard .transposed-table tbody tr.accent-row td {
color: #00366d;
font-weight: 700;
}
.plan-card.standard .transposed-table tbody tr.accent-row td.font-weight-bold,
plan-card.standard .transposed-table tbody tr.accent-row td.last-child{
color: rgb(0, 114, 206) !important;
}

.text-left {
    text-align: left !important;
}
.my-custom-bold-class {
  font-weight: 900 !important;
}

.separator-line {
border-top: rgb(121 168 210) 2px solid;
margin-bottom: 20px;
}