#package-info{grid-column:1/-1;min-width:0;max-width:100%;margin-top:6px;padding:20px;border:1px solid #b7cbd4;border-radius:10px;background:#f4f8fa;font-weight:400;color:#123f53}
#package-info h3{margin:0 0 8px}
.package-lead,.package-empty,.package-loading{font-size:13px;line-height:1.7;color:#516b76;margin:0}
.package-facts{display:grid;min-width:0;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;margin:18px 0;padding:0}
.package-facts li{min-width:0;overflow-wrap:anywhere;background:white;border:1px solid #dde9ed;border-radius:8px;padding:14px;color:#123f53}
.package-facts b{display:block;font-size:20px;letter-spacing:-.5px}
.package-facts span{display:block;font-size:12px;line-height:1.6;color:#516b76;margin-top:4px}
.package-price{background:#f0f6e6;border-radius:8px;padding:16px;font-size:13px;line-height:1.8;color:#123f53}
.package-price p{margin:8px 0 0}
.package-price .fine{font-size:12px}
.package-pending{margin-top:16px;padding:16px;border:1px dashed #b0731f;border-radius:8px;background:#fdf6ea;font-size:12px;line-height:1.75;color:#123f53}
.package-pending strong{display:block;margin-bottom:6px;color:#8a5a13}
.package-pending p{margin:6px 0 0}
.package-compare{margin-top:16px;font-size:13px}
.package-compare summary{cursor:pointer;font-weight:600;padding:6px 0}
.package-basis-note{font-size:12px;line-height:1.7;color:#516b76;margin:6px 0 10px}
.package-table-scroll{overflow-x:auto;max-width:100%}
.package-compare table{border-collapse:collapse;width:100%;min-width:560px;background:white;font-size:12px;color:#123f53}
.package-compare th,.package-compare td{border:1px solid #dde9ed;padding:9px 10px;text-align:left}
.package-compare thead th{background:#eaf1f5;font-size:11px;letter-spacing:.4px;color:#123f53}
.package-compare tbody tr.is-selected{background:#f0f6e6;font-weight:600;color:#123f53}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:550px){.package-facts{grid-template-columns:1fr}#package-info{padding:14px}}

/* Dark theme.
   This panel was a hardcoded light card with no text colour of its own, so on
   the dark theme it rendered the page's near-white text on a near-white
   background: the package name, the contribution and the whole pending-schedule
   notice were invisible. An applicant choosing and paying for cover could not
   read what they were choosing.
   Every rule below sets BOTH a background and a foreground, so neither theme
   can inherit half a colour scheme from the other. */
html[data-theme=dark] #package-info{
 background:#132029;border-color:#2b3d49;color:#e7eef4}
html[data-theme=dark] #package-info h3{color:#f2f7fb}
html[data-theme=dark] .package-lead{color:#b7c7d4}
html[data-theme=dark] .package-price{background:#18281c;color:#dce9d5}
html[data-theme=dark] .package-price strong{color:#c7e3a8}
html[data-theme=dark] .package-price .fine{color:#a9bdb0}
html[data-theme=dark] .package-pending{background:#2a2213;border-color:#a4761f;color:#e7d9bd}
html[data-theme=dark] .package-pending strong{color:#f0c268}
html[data-theme=dark] .package-empty,html[data-theme=dark] .package-loading{color:#b7c7d4}
html[data-theme=dark] .package-compare summary{color:#7cc0ec}
html[data-theme=dark] .package-basis-note{color:#b7c7d4}
html[data-theme=dark] .package-compare table{background:#132029;color:#e7eef4}
html[data-theme=dark] .package-compare thead th{background:#1b2c38;color:#c5d6e2}
html[data-theme=dark] .package-compare :is(th,td){border-color:#2b3d49}
html[data-theme=dark] .package-compare tbody tr.is-selected{background:#1b2c38;color:#f2f7fb}
html[data-theme=dark] .package-table-scroll :is(th,td){border-color:#2b3d49}
html[data-theme=dark] .package-table-scroll tr.is-selected{background:#1b2c38;color:#f2f7fb}