/* Reseller Calculator — page-scoped layout + sidebar + expense-table styles.
   Adapted from views/sales/variant-detail.php's inline <style> block, rescoped
   from .page.equipment-item to .page.reseller-calculator so the two pages can
   evolve independently. */

/* Renamed off the global .page-title / .page-title-wrapper namespace because
   global.css:176 turns every .page-title into a centered light-green box
   (padding 25px + #e9f1e9 background). Page-scoped names sidestep that
   inheritance entirely. */
.page.reseller-calculator .rc-title-wrapper {
    margin: 14px 0 22px;
}
.page.reseller-calculator .rc-page-title {
    font-size: 28px;
    font-weight: 700;
    color: #17181A;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    text-align: left;
}
.page.reseller-calculator .rc-sample-bar {
    margin: 14px 0 0;
    padding: 10px 14px;
    background: #FBF9F2;
    border: 1px solid #E9DDB6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #6B5B1F;
}
.page.reseller-calculator .rc-sample-bar-msg { flex: 1 1 auto; }
.page.reseller-calculator .rc-sample-bar-btn {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #E9DDB6;
    color: #6B5B1F;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.page.reseller-calculator .rc-sample-bar-btn:hover {
    background: #6B5B1F;
    color: #fff;
    border-color: #6B5B1F;
}
@media (max-width: 600px) {
    .page.reseller-calculator .rc-sample-bar { flex-direction: column; align-items: stretch; }
    .page.reseller-calculator .rc-sample-bar-btn { width: 100%; }
}

.page.reseller-calculator .page-main {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    /* my-equipment-item.css ships a global .page-main rule with
       flex-wrap: wrap + margin-top: 40px; both undesired here. */
    flex-wrap: nowrap;
    margin-top: 0;
}
/* All three columns share the row equally (1fr each, post-gap). */
.page.reseller-calculator .page-main > .page-sidebar,
.page.reseller-calculator .page-main > .page-content {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
}
.page.reseller-calculator .page-content {
    /* explicit padding/margin reset so the first .sec inside sits
       flush with the flex-start top — matches the left/right panels.
       Sticky so the form stays in view while the user scrolls the
       earnings preview on the right (or page-level content below). */
    padding: 0;
    margin: 0;
    position: sticky;
    top: 96px;
    align-self: flex-start;
}
/* Left sidebar — scenario picker. Sticky so it stays in view while the
   user scrolls through the deal-numbers + expenses on the right.
   Resets are required because my-equipment-item.css ships a global
   `.page-sidebar` rule (bg, 24px radius, big drop shadow) that would
   otherwise wrap a phantom card around our content. */
.page.reseller-calculator .page-sidebar.page-sidebar-left {
    position: sticky;
    top: 96px;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
.page.reseller-calculator .page-sidebar.page-sidebar-left .sec {
    margin-bottom: 0;
}
.page.reseller-calculator .sec {
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 20px 22px 18px;
    margin-bottom: 18px;
}
.page.reseller-calculator .sec .title {
    font-size: 18px;
    font-weight: 600;
    color: #17181A;
    margin: 0 0 14px;
}

/* Scenario Description read-only block — copied from variant-detail's inline rule. */
.page.reseller-calculator .readonly-textblock-label {
    font-size: 12px;
    color: #878D99;
    margin-bottom: 6px;
}
.page.reseller-calculator .readonly-textblock {
    min-height: 56px;
    padding: 12px 14px;
    background: #F8F9FA;
    border: 1px solid #E6E6E6;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #17181A;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.page.reseller-calculator .readonly-textblock:empty::before {
    content: '\2014';
    color: #878D99;
}
.page.reseller-calculator .readonly-textblock p { margin: 0 0 8px; }
.page.reseller-calculator .readonly-textblock p:last-child { margin-bottom: 0; }

/* Expense table — variant-detail.php:277-461 rescoped to #v-expenses inside
   the reseller-calculator page. Same two-line per-row grid layout. */
.page.reseller-calculator #v-expenses .exp-list {
    border: 1px solid #cdcfd4;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}
.page.reseller-calculator #v-expenses .expense-row {
    border-top: 1px solid #F0F1F4;
    padding: 6px 0;
}
.page.reseller-calculator #v-expenses .expense-row:first-child { border-top: none; }
.page.reseller-calculator #v-expenses .exp-line {
    display: grid;
    gap: 8px 12px;
    padding: 8px 14px;
    align-items: end;
}
.page.reseller-calculator #v-expenses .exp-line-1 {
    grid-template-columns: 32px minmax(140px, 1.4fr) minmax(200px, 3fr) minmax(110px, 1fr) 40px;
}
.page.reseller-calculator #v-expenses .exp-line-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: end;
}
.page.reseller-calculator #v-expenses .exp-line-2 .exp-cell { flex: 1 1 140px; min-width: 0; }
.page.reseller-calculator #v-expenses .exp-line-2 .col-idx-spacer { flex: 0 0 32px; }
.page.reseller-calculator #v-expenses .exp-line-2 .col-actions-spacer { flex: 0 0 40px; }
.page.reseller-calculator #v-expenses .expense-row[data-entry-type="Commission"] .exp-line-2,
.page.reseller-calculator #v-expenses .expense-row[data-entry-type="Other"]      .exp-line-2 {
    display: none;
}
.page.reseller-calculator #v-expenses .expense-row .exp-line-1 { padding-top: 10px; padding-bottom: 4px; }
.page.reseller-calculator #v-expenses .expense-row .exp-line-2 { padding-top: 0; padding-bottom: 10px; }
.page.reseller-calculator #v-expenses .exp-cell { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.page.reseller-calculator #v-expenses .exp-cell-label {
    font-size: 12px;
    font-weight: 500;
    color: #878D99;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}
.page.reseller-calculator #v-expenses .col-idx {
    text-align: center;
    color: #878D99;
    font-size: 13px;
    font-weight: 600;
    padding-bottom: 10px;
}
.page.reseller-calculator #v-expenses .col-actions {
    text-align: right;
    padding-bottom: 6px;
}
.page.reseller-calculator #v-expenses .col-idx-spacer,
.page.reseller-calculator #v-expenses .col-actions-spacer { min-height: 1px; }
.page.reseller-calculator #v-expenses .qi-input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    line-height: 1.3;
    padding: 0 14px;
    border: 1px solid #cdcfd4;
    border-radius: 12px;
    font-size: 15px;
    background: #fff;
    color: #17181a;
    font-family: inherit;
    font-weight: 500;
    vertical-align: middle;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.page.reseller-calculator #v-expenses select.qi-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23878D99' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5,1.5 6,6.5 10.5,1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}
.page.reseller-calculator #v-expenses .qi-input:hover { border-color: #AFB8CC; }
.page.reseller-calculator #v-expenses .qi-input:focus {
    outline: none;
    border-color: var(--primary, #2BB673);
    box-shadow: 0 0 0 3px rgba(43,182,115,.12);
}
.page.reseller-calculator #v-expenses .qi-input[readonly] {
    background: #F8F9FA;
    color: #454B54;
}
.page.reseller-calculator #v-expenses .qi-num { text-align: right; }
.page.reseller-calculator #v-expenses .qi-input.exp-cost-computed {
    background: #F4F6F8;
    color: #454B54;
    cursor: not-allowed;
    font-weight: 600;
}
.page.reseller-calculator #v-expenses .qi-add-row-btn {
    background: transparent;
    border: 1px dashed #cdcfd4;
    color: #454B54;
    padding: 8px 16px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.page.reseller-calculator #v-expenses .qi-add-row-btn:hover {
    border-color: var(--primary, #2BB673);
    color: var(--primary, #2BB673);
    background: rgba(43,182,115,.04);
}
.page.reseller-calculator #v-expenses .qi-row-action {
    background: transparent;
    border: 1px solid #cdcfd4;
    color: #878D99;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.page.reseller-calculator #v-expenses .qi-row-action:hover {
    color: #17181A;
    border-color: #AFB8CC;
    background: #F8F9FA;
}
.page.reseller-calculator #v-expenses .qi-row-remove { color: #BA5E5E; }
.page.reseller-calculator #v-expenses .qi-row-remove:hover {
    color: #BA5E5E;
    border-color: #BA5E5E;
    background: #FDF4F4;
}

/* Right sidebar — earnings preview. Plain flex column; each stat card
   and the breakdown group below carry their own chrome so the right
   column visually parallels the .sec stack in left/middle (and so the
   first stat card aligns Y-wise with the first .sec in left/middle).
   Same global-chrome reset as the left sidebar — my-equipment-item.css
   ships a `.page-sidebar` rule with white bg + 24px radius + drop
   shadow which would wrap a phantom outer card around the stat cards
   and visually push them below the section tops in left/middle. */
.page.reseller-calculator .page-sidebar.page-sidebar-right {
    position: sticky;
    top: 96px;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
/* Force the first stat card to sit flush at Y=0 of the right sidebar
   so its top edge aligns with the .sec outer-tops in left/middle.
   No top margin on stat-hero; no padding on its parent. */
.page.reseller-calculator .page-sidebar.page-sidebar-right > .rc-stat-hero {
    margin-top: 0;
}
/* Pre-existing title bar — no longer rendered, but defensive in case
   another caller resurrects it. Hidden so it can't reintroduce the
   top-margin issue. */
.page.reseller-calculator .page-sidebar.page-sidebar-right .top-sidebar-completetion {
    display: none;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .completetion-key {
    font-size: 12px;
    font-weight: 700;
    color: #454B54;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-list {
    /* The breakdown carries its own .sec-style chrome since the right
       column's outer .page-sidebar-right has no wrapper. */
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 14px 18px 18px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid #F0F1F4;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-row:last-child {
    border-bottom: none;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-row.calc-output-headline {
    font-weight: 600;
    background: #FBF9F2;
    padding: 6px 10px;
    border-radius: 6px;
    border-bottom: none;
}
/* The three "wins" — Partner Receives, Partner Net Profit, Supplier Receives —
   get larger type + a green accent strip so the moneyline numbers visually
   dominate the sidebar. Marketing intent: the user's eye should land here. */
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-row.calc-output-headline#side-out-partner-net-profit,
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-row.calc-output-headline:has(#side-out-selling-partner-retained),
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-row.calc-output-headline:has(#side-out-partner-net-profit),
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-row.calc-output-headline:has(#side-out-supplier-payout-amount) {
    background: linear-gradient(90deg, #E9F4EC 0%, #FBF9F2 100%);
    border-left: 3px solid #2E7D32;
    padding-left: 10px;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-row.calc-output-headline:has(#side-out-partner-net-profit) .calc-output-value {
    font-size: 16px;
    color: #1B5E20;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-label-percent {
    color: #878D99;
    font-weight: 500;
    margin-left: 2px;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-row .calc-output-value {
    margin-left: auto;
    text-align: right;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-label {
    font-size: 12px;
    color: #878D99;
    letter-spacing: 0.02em;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-group {
    border-bottom: 1px solid #E5E7EB;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-group:last-child {
    border-bottom: none;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0 6px;
    cursor: pointer;
    user-select: none;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-group-header:hover .calc-output-subheader {
    color: #17181A;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-subheader {
    font-size: 11px;
    font-weight: 600;
    color: #454B54;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    flex: 1 1 auto;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease;
    flex: 0 0 auto;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-group[data-collapsed="false"] .calc-output-chevron {
    transform: rotate(180deg);
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-group[data-collapsed="true"] .calc-output-group-body {
    display: none;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-group-body {
    padding-bottom: 8px;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-expenses-list .calc-output-row {
    padding-left: 4px;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-expenses-list .calc-output-row .calc-output-label-sub {
    display: block;
    font-size: 11px;
    color: #AFB8CC;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 2px;
    white-space: normal;
    word-break: break-word;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-row-empty .calc-output-label,
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-row-empty .calc-output-value {
    color: #AFB8CC;
    font-style: italic;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-value {
    font-size: 14px;
    color: #17181A;
    font-weight: 500;
    white-space: nowrap;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-meta {
    font-size: 11px;
    color: #878D99;
    margin-top: 4px;
}

/* "?" info button — sits between label and value via flex order. Same
   layout pattern as variant-detail.php:567+ so the value column still
   right-aligns flush.
   NOTE: the previous `.page-sidebar-right { position: relative }` rule
   that lived here was overriding the sticky rule at line ~290 and
   pushing the right column 77px below the others. Removed — the
   `.calc-output-info-popup` still positions absolutely against
   .page-sidebar-right because `position: sticky` is itself a positioned
   value (qualifies as a containing block for absolute children). */
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-btn {
    order: 1;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    color: #AFB8CC;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex: 0 0 18px;
    align-self: center;
    transition: color .15s ease, background .15s ease;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-btn:hover,
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-btn:focus-visible {
    color: var(--primary, #2BB673);
    background: rgba(43,182,115,.08);
    outline: none;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-row .calc-output-value {
    order: 2;
}

/* Field-info popup — single shared element repositioned + refilled on each
   click. Anchored relative to the sticky sidebar so it tracks as the user
   scrolls. Lifted from variant-detail.php:689-756. */
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-popup {
    position: absolute;
    z-index: 30;
    width: 320px;
    max-width: 92vw;
    background: #fff;
    border: 1px solid #cdcfd4;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(23,24,26,.12), 0 2px 6px rgba(23,24,26,.06);
    padding: 12px 14px 14px;
    color: #17181a;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-popup[hidden] {
    display: none;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-popup-title {
    font-size: 13px;
    font-weight: 600;
    color: #17181a;
    line-height: 1.3;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-popup-close {
    background: transparent;
    border: none;
    color: #878D99;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    flex: 0 0 auto;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-popup-close:hover {
    color: #17181a;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-popup-body {
    font-size: 12px;
    line-height: 1.5;
    color: #454B54;
    white-space: pre-wrap;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-popup-body.is-placeholder {
    color: #878D99;
    font-style: italic;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-popup-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border-top: 1px solid #cdcfd4;
    border-left: 1px solid #cdcfd4;
    transform: rotate(45deg);
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-popup.points-up .calc-output-info-popup-arrow {
    top: -7px;
}
.page.reseller-calculator .page-sidebar.page-sidebar-right .calc-output-info-popup.points-down .calc-output-info-popup-arrow {
    bottom: -7px;
    border-top: none;
    border-left: none;
    border-bottom: 1px solid #cdcfd4;
    border-right: 1px solid #cdcfd4;
}

@media (max-width: 1340px) {
    .page.reseller-calculator .page-content { width: 100%; }
    .page.reseller-calculator .page-main { flex-direction: column; }
    .page.reseller-calculator .page-sidebar.page-sidebar-left,
    .page.reseller-calculator .page-sidebar.page-sidebar-right {
        width: 100%;
        flex: 1 1 auto;
        position: static;
    }
}

/* ------------------------------------------------------------------
   Marketing surfaces — hero, 3-card value strip, bottom CTA band.
   All page-scoped under .page.reseller-calculator so nothing leaks to
   other pages. Hero is a self-contained pattern (not reusing
   home.css's .hero-section) because home.css is not loaded on this
   page and we want lighter chrome here than the homepage gets.
   ------------------------------------------------------------------ */

/* Hero ----------------------------------------------------------- */
/* Pattern mirrors /home and /valuate: hero lives inside .container
   (standard page width), banner image is inside a rounded card
   (border-radius:18px), text overlay sits over the image. */
.page.reseller-calculator .rc-hero-section {
    margin: 24px 0 28px;
}
.page.reseller-calculator .rc-hero-inner {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 10px 50px 0 rgba(61, 66, 69, .18);
    min-height: 320px;
    display: flex;
    align-items: center;
}
.page.reseller-calculator .rc-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
/* Left-to-right dark gradient over the image so the white overlay copy
   stays legible regardless of the underlying banner crop. */
.page.reseller-calculator .rc-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11,19,32,0.78) 0%, rgba(11,19,32,0.50) 55%, rgba(11,19,32,0.15) 100%);
}
.page.reseller-calculator .rc-hero-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
    padding: 44px 40px;
    color: #fff;
}
.page.reseller-calculator .rc-hero-subtitle {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C9E5CF;
    margin: 0 0 10px;
}
.page.reseller-calculator .rc-hero-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.18;
    color: #fff;
    margin: 0 0 12px;
    background: transparent;
    padding: 0;
    text-align: left;
}
.page.reseller-calculator .rc-hero-text {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255,255,255,0.92);
    margin: 0 0 20px;
    max-width: 500px;
}
.page.reseller-calculator .rc-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.page.reseller-calculator .rc-hero-actions .btn {
    padding: 11px 20px;
    font-weight: 600;
    border-radius: 8px;
}
.page.reseller-calculator .rc-hero-actions .btn.btn-light {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.55);
}
.page.reseller-calculator .rc-hero-actions .btn.btn-light:hover {
    background: rgba(255,255,255,0.2);
}

/* Sidebar hero stat panel --------------------------------------- */
/* Surfaces the three moneyline numbers (Partner Net Profit, Partner
   Receives, Supplier Receives) at the top of the sidebar as visually
   loud cards. The IDs inside these cards are the same ones the
   calculator JS writes to via setText(), so nothing changes on the
   data path. */
.page.reseller-calculator .rc-stat-hero {
    /* No top margin so the primary card sits flush with the column's
       flex-start Y (= same outer-top as .sec in left/middle).
       18px bottom margin matches .sec's bottom margin so the breakdown
       below aligns with the next .sec in middle. */
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.page.reseller-calculator .rc-stat-card {
    background: #fff;
    border: 1px solid #E6E6E6;
    /* Match .sec border-radius so the right column's cards visually
       parallel the left/middle .sec stack. */
    border-radius: 16px;
    /* Tight top padding so the big value lands at the same Y as the
       section titles in left/middle columns. */
    padding: 10px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.page.reseller-calculator .rc-stat-card-primary {
    background: linear-gradient(135deg, #1F4E2C 0%, #2E7D32 100%);
    border-color: #1F4E2C;
    /* padding-top matches .sec padding-top (20px) so the big value
       starts at the same Y as the section titles in left/middle. */
    padding: 20px 22px 18px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
/* Pull the big value's first text glyph flush with the card's
   padding-top — line-height: 1 eliminates the leading that would
   otherwise put ~5px of empty space above the digits, so the visible
   top of "$16,000.03" lines up exactly with the visible top of "Pick
   your scenario" in the left column. */
.page.reseller-calculator .rc-stat-card-primary .rc-stat-value,
.page.reseller-calculator .rc-stat-card .rc-stat-value {
    line-height: 1;
    margin: 0;
}
.page.reseller-calculator .rc-stat-card-primary::after {
    /* Subtle radial highlight in the top-right corner so the card
       reads as a premium "result" surface, not a flat color block. */
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.page.reseller-calculator .rc-stat-card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.page.reseller-calculator .rc-stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B7480;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.page.reseller-calculator .rc-stat-card-primary .rc-stat-label {
    color: rgba(255,255,255,0.85);
}
.page.reseller-calculator .rc-stat-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: #17181A;
    letter-spacing: -0.01em;
}
.page.reseller-calculator .rc-stat-card-primary .rc-stat-value {
    font-size: 34px;
    color: #fff;
}
.page.reseller-calculator .rc-stat-value-md {
    font-size: 20px;
}
.page.reseller-calculator .rc-stat-hint {
    font-size: 11px;
    color: #878D99;
    line-height: 1.3;
    margin-top: 2px;
}
.page.reseller-calculator .rc-stat-card-primary .rc-stat-hint {
    color: rgba(255,255,255,0.75);
}
/* The info ? button is a black-styled icon by default; recolor it to
   match each card variant so it doesn't visually punch out of the
   surface. */
.page.reseller-calculator .rc-stat-card .calc-output-info-btn {
    color: #6B7480;
}
.page.reseller-calculator .rc-stat-card-primary .calc-output-info-btn {
    color: rgba(255,255,255,0.75);
}
.page.reseller-calculator .rc-stat-card .calc-output-label-percent {
    color: inherit;
    font-weight: 500;
    opacity: 0.75;
    margin-left: 4px;
}

/* Marketing-styled section headers on the input form. Numbered
   badge + subtitle, gives each step a clear identity so the form
   reads as a 3-step deal-modeling flow. */
.page.reseller-calculator .rc-input-sec .rc-sec-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 14px;
}
.page.reseller-calculator .rc-input-sec .rc-sec-head-with-action {
    flex-wrap: wrap;
}
.page.reseller-calculator .rc-input-sec .rc-sec-step {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E9F4EC 0%, #C9E5CF 100%);
    color: #1F4E2C;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.page.reseller-calculator .rc-input-sec .rc-sec-head-text {
    flex: 1 1 auto;
    min-width: 0;
}
.page.reseller-calculator .rc-input-sec .rc-sec-head-text .title {
    margin: 0;
}
.page.reseller-calculator .rc-input-sec .rc-sec-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #5A6470;
}
.page.reseller-calculator .rc-input-sec .rc-sec-action {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Bottom CTA band ------------------------------------------------- */
.page.reseller-calculator .rc-bottom-cta {
    margin: 32px 0 40px;
    background: linear-gradient(120deg, #0B1320 0%, #1B3A5B 100%);
    border-radius: 16px;
    padding: 28px 32px;
}
.page.reseller-calculator .rc-bottom-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.page.reseller-calculator .rc-bottom-cta-copy { flex: 1 1 380px; min-width: 0; }
.page.reseller-calculator .rc-bottom-cta-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}
.page.reseller-calculator .rc-bottom-cta-text {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
    margin: 0;
}
.page.reseller-calculator .rc-bottom-cta-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.page.reseller-calculator .rc-bottom-cta-actions .btn {
    padding: 12px 22px;
    font-weight: 600;
    border-radius: 8px;
}
.page.reseller-calculator .rc-bottom-cta-actions .btn.btn-light {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.55);
}
.page.reseller-calculator .rc-bottom-cta-actions .btn.btn-light:hover {
    background: rgba(255,255,255,0.2);
}

@media (max-width: 900px) {
    .page.reseller-calculator .rc-hero-inner { min-height: 260px; }
    .page.reseller-calculator .rc-hero-content { padding: 32px 24px; max-width: 100%; }
    .page.reseller-calculator .rc-hero-title { font-size: 26px; }
    .page.reseller-calculator .rc-hero-text { font-size: 14px; }
    /* On narrow screens fade the gradient further across so text stays readable. */
    .page.reseller-calculator .rc-hero-bg::after {
        background: linear-gradient(90deg, rgba(11,19,32,0.82) 0%, rgba(11,19,32,0.65) 100%);
    }
    .page.reseller-calculator .rc-bottom-cta { padding: 22px; }
    .page.reseller-calculator .rc-bottom-cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------
   Mobile / tablet polish — everything below 768px needs single-column
   form fields, stacked stat cards and a stackable expense table. The
   1340px rule already drops the sidebar below the main content, so
   below 768px we are essentially designing a single-column page.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Form inputs go full-width — two 50% cols are too cramped at
       phone widths and the floating label overflows. */
    .page.reseller-calculator .page-content .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Stat cards: stack the secondary pair below the primary card. */
    .page.reseller-calculator .rc-stat-card-row {
        grid-template-columns: 1fr;
    }
    /* Add-row button drops below the title block so the section head
       doesn't squeeze on one line at narrow widths. */
    .page.reseller-calculator .rc-input-sec .rc-sec-head-with-action {
        flex-wrap: wrap;
    }
    .page.reseller-calculator .rc-input-sec .rc-sec-head-with-action .rc-sec-action {
        margin-left: 44px; /* aligns with the title text past the step badge */
    }
    /* Hero stat values shrink slightly — 34px primary feels too big at
       360px viewport when the whole sidebar is below the form. */
    .page.reseller-calculator .rc-stat-card-primary .rc-stat-value { font-size: 30px; }
    /* Page title scales down. */
    .page.reseller-calculator .rc-page-title { font-size: 24px; }
    .page.reseller-calculator .sec { padding: 16px; }
}

@media (max-width: 600px) {
    /* Hero compacts further on phones. */
    .page.reseller-calculator .rc-hero-content { padding: 24px 18px; }
    .page.reseller-calculator .rc-hero-title { font-size: 22px; }
    .page.reseller-calculator .rc-hero-subtitle { font-size: 11px; letter-spacing: 0.1em; }
    .page.reseller-calculator .rc-hero-text { font-size: 13px; }
    .page.reseller-calculator .rc-hero-actions .btn { padding: 10px 16px; font-size: 14px; }
    /* Expense rows: the 5-column line-1 grid overflows below ~520px.
       Collapse to a vertical stack with the remove button still
       reachable in the top-right of the row. */
    .page.reseller-calculator #v-expenses .exp-line-1 {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "idx     actions"
            "type    type"
            "desc    desc"
            "cost    cost";
        gap: 8px;
    }
    .page.reseller-calculator #v-expenses .exp-line-1 .col-idx { grid-area: idx; text-align: left; padding-bottom: 0; }
    .page.reseller-calculator #v-expenses .exp-line-1 .col-actions { grid-area: actions; padding-bottom: 0; }
    /* The Type cell is the unlabeled .exp-cell — selector matches the
       2nd direct .exp-cell child, skipping .col-idx. */
    .page.reseller-calculator #v-expenses .exp-line-1 > .exp-cell:nth-child(2) { grid-area: type; }
    .page.reseller-calculator #v-expenses .exp-line-1 .exp-cell-desc { grid-area: desc; }
    .page.reseller-calculator #v-expenses .exp-line-1 .exp-cell-num { grid-area: cost; }
    /* Line-2 (labor fields) — drop the empty spacers so each input
       gets the full row on phones. */
    .page.reseller-calculator #v-expenses .exp-line-2 .col-idx-spacer,
    .page.reseller-calculator #v-expenses .exp-line-2 .col-actions-spacer {
        display: none;
    }
    .page.reseller-calculator #v-expenses .exp-line-2 .exp-cell {
        flex: 0 0 100%;
    }
    /* Sidebar header row shouldn't dominate. */
    .page.reseller-calculator .page-sidebar.page-sidebar-right .top-sidebar-completetion {
        padding: 10px 14px;
    }
    /* Stat cards tighten padding. */
    .page.reseller-calculator .rc-stat-card { padding: 12px 14px; }
    .page.reseller-calculator .rc-stat-card-primary { padding: 16px 16px; }
    .page.reseller-calculator .rc-stat-card-primary .rc-stat-value { font-size: 26px; }
    .page.reseller-calculator .rc-stat-value-md { font-size: 18px; }
    /* Breadcrumb wraps cleanly. */
    .page.reseller-calculator .breadcumbs { flex-wrap: wrap; }
    /* Bottom CTA buttons go full-width so they're tap-friendly. */
    .page.reseller-calculator .rc-bottom-cta-actions { width: 100%; }
    .page.reseller-calculator .rc-bottom-cta-actions .btn { width: 100%; text-align: center; }
}