/* ==========================================================================
   The price box page, /heating-oil-prices/widget (heating-oil-price-widget.cfm,
   words in includes/inc_rs_price_widget.cfm). 24 Oct 2026. Loaded by
   includes/header.cfm from the page's file name, after reskin.css (and before
   rs-next.css, which gives the hero its phone photo strip).
   Phone (375-430): one column: hero, county, light or dark, the live preview,
   the code. From 992px: the steps on the left, the preview in a column of its
   own on the right that stays in view while the steps scroll.
   Never a coloured bar down the left edge of anything (DECISIONS 8 Oct).
   ========================================================================== */

/* Hero: the main button is white on the dark photo shade (the dark green one would vanish there) */
.rs-pbox-cta { margin: 18px 0 0; }
.rs-pbox-hero .rs-btn { background: #fff; color: #194F35; }
.rs-pbox-hero .rs-btn:hover,
.rs-pbox-hero .rs-btn:focus { background: var(--rs-wash); color: #194F35; }

/* ---------- The steps and the preview ---------- */
.rs-pbox-form { margin: 8px 0 0; }
.rs-pbox-grid { display: grid; grid-template-columns: minmax(0, 1fr); }

.rs-pbox-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 4px;
    padding: 18px 0;
    border-top: 1px solid var(--rs-hair);
}
.rs-pbox-grid > .rs-pbox-step:first-child { border-top: 0; padding-top: 6px; }
.rs-pbox-stepbody { min-width: 0; margin: 0; padding: 0; border: 0; }
.rs-pbox-label,
.rs-page legend.rs-pbox-label {
    display: block;
    float: none;
    width: auto;
    font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rs-ink);
    margin: 2px 0 10px;
    padding: 0;
}
.rs-pbox-stepbody .rs-small { margin: 10px 0 0; }
.rs-pbox-stepbody .form-select { max-width: 420px; }

/* Light or dark: two clear choices, big enough for a thumb */
.rs-pbox-themes { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-pbox-theme {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px 18px;
    background: #fff;
    border: 1.5px solid var(--rs-field);
    border-radius: var(--rs-radius-sm);
    font-weight: 600;
    font-size: 15px;
    color: var(--rs-ink);
    cursor: pointer;
}
.rs-pbox-theme input { width: 18px; height: 18px; margin: 0; accent-color: #194F35; }
.rs-pbox-theme:has(input:checked) { border-color: #194F35; box-shadow: 0 0 0 1px #194F35; }
.rs-pbox-theme:has(input:focus-visible) { outline: 3px solid rgba(25, 79, 53, 0.35); outline-offset: 2px; }
.rs-pbox-noscript { margin: 12px 0 0; }

/* The code */
.rs-pbox-code {
    display: block;
    width: 100%;
    min-height: 124px;
    padding: 12px 14px;
    font: 13px/1.55 Consolas, Monaco, 'Courier New', monospace;
    color: var(--rs-ink);
    background: #F5F7F3;
    border: 1px solid var(--rs-field);
    border-radius: var(--rs-radius-sm);
    resize: vertical;
    overflow-wrap: anywhere;
    word-break: break-all;
}
.rs-pbox-code:focus { outline: none; border-color: #194F35; box-shadow: 0 0 0 3px rgba(25, 79, 53, 0.15); }
.rs-pbox-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.rs-pbox-actions .rs-btn { white-space: normal; text-align: center; line-height: 1.3; min-height: 46px; }
.rs-pbox-status { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #2F7A3D; }

/* The live preview: the real box in a simple drawn web page */
.rs-pbox-preview { padding: 18px 0; border-top: 1px solid var(--rs-hair); }
.rs-pbox-frame {
    background: #fff;
    border: 1px solid var(--rs-hair);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(24, 63, 47, 0.08);
    max-width: 420px;
}
.rs-pbox-bar { display: flex; gap: 6px; padding: 10px 12px; background: #EEF2EA; border-bottom: 1px solid var(--rs-hair); }
.rs-pbox-bar span { width: 9px; height: 9px; border-radius: 50%; background: #C9D4C3; }
.rs-pbox-page { padding: 16px; background: #FBFCF9; }
.rs-pbox-fake { height: 9px; border-radius: 5px; background: #E7ECE3; margin: 0 0 8px; }
.rs-pbox-fake--title { width: 55%; height: 14px; background: #D9E2D4; margin-bottom: 12px; }
.rs-pbox-fake--short { width: 72%; }
.rs-pbox-live { margin: 16px 0 0; }
.rs-pbox-live .fueltool-price-box { max-width: 340px; }
.rs-pbox-live .fueltool-price-box a { font-weight: 600; }
.rs-pbox-note { margin: 12px 0 0; max-width: 420px; }

/* ---------- What it shows ---------- */
.rs-pbox-points { list-style: none; padding: 0; margin: 4px 0 0; max-width: 52rem; }
.rs-pbox-points li {
    position: relative;
    padding: 0 0 0 30px;
    margin: 0 0 14px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--rs-body);
}
.rs-pbox-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #EEF6EA url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232F7A3D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 8.5l2.6 2.5L12 5.5'/%3e%3c/svg%3e") center / 14px no-repeat;
}

/* ---------- Before you add it ---------- */
.rs-pbox-cards .rs-card h3 { font-size: 18px; margin-bottom: 8px; }
.rs-pbox-cards .rs-card p { margin: 0; }
.rs-pbox-mono {
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 0.92em;
    background: #EEF2EA;
    color: var(--rs-ink);
    border-radius: 4px;
    padding: 1px 5px;
    overflow-wrap: anywhere;
}
.rs-pbox-ask { margin: 22px 0 0; }

/* ---------- Phones ---------- */
@media (max-width: 575.98px) {
    .rs-pbox-actions .rs-btn { flex: 1 1 100%; }
}

/* ---------- Laptops: the preview in its own column, kept in view ---------- */
@media (min-width: 992px) {
    .rs-pbox-grid { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 56px; align-items: start; }
    .rs-pbox-step { grid-column: 1; }
    .rs-pbox-preview {
        grid-column: 2;
        grid-row: 1 / span 3;
        position: sticky;
        top: 92px;
        padding: 0;
        border-top: 0;
    }
    .rs-pbox-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rs-pbox-points li { font-size: 16.5px; }
}