/* rd2 (Tim 10/20, revised: menu stays on the right, controls stay bottom-middle in our colors): 3D Pro's own estimator layout */
@media (min-width: 821px) {
  #viewSeg { left: auto !important; right: 18px !important; top: auto !important; bottom: 18px !important; transform: none !important; }
  .rd-card { margin: 8px 12px 6px !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .06) !important; }
  .rd-card .tb-logo { display: none !important; }
}
#sections { display: flex !important; flex-direction: column !important; }
/* start screen: ZIP first, card on the left */
#stateselected.rd-start { justify-content: flex-start !important; }
#stateselected.rd-start .inner-div { margin-left: max(24px, 7vw) !important; margin-right: auto !important; text-align: left !important; max-width: 430px !important; border-radius: 18px !important; padding: 30px 30px 24px !important; }
#stateselected.rd-start .inner-div .logo { margin: 0 0 14px !important; }
#stateselected.rd-start h1 { font-size: 30px !important; line-height: 1.15 !important; margin: 0 0 6px !important; text-align: left !important; }
#stateselected.rd-start .inner-div > p:not(.footer-text) { font-size: 16px !important; font-weight: 600 !important; margin: 0 0 12px !important; text-align: left !important; }
#stateselected.rd-start .form-check { display: none !important; }
#stateselected.rd-start .state-select { width: 100% !important; }
#stateselected.rd-start .design-btn { width: 100% !important; margin-top: 12px !important; }
#stateselected.rd-start .footer-text { text-align: left !important; }
.rd-zip label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 4px; color: #0f172a; }
.rd-zip input { width: 100%; height: 48px; border: 1.5px solid #cbd5e1; border-radius: 10px; padding: 0 14px; font-size: 18px; letter-spacing: 2px; }
.rd-zip input:focus { outline: none; border-color: #0f172a; }
.rd-zip .rd-msg { font-size: 12.5px; color: #b45309; margin-top: 6px; }
.rd-zip .rd-msg:empty { display: none; }
.rd-zip .rd-or { font-size: 12px; color: #64748b; margin: 10px 0 4px; }
@media (max-width: 820px) { #stateselected.rd-start .inner-div { margin-left: auto !important; } }
/* rd2b (Tim 10/20): 3D view / 2D drawing switch at the bottom; viewer controls in a dark 3D Pro panel */
#viewSeg { background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 999px !important; padding: 4px !important; box-shadow: 0 6px 18px rgba(15, 23, 42, .12) !important; }
#viewSeg button { border-radius: 999px !important; padding: 8px 16px !important; font-weight: 600 !important; font-size: 13px !important; white-space: nowrap; }
#toolbar { background: #0f172a !important; border: 0 !important; box-shadow: 0 10px 24px rgba(15, 23, 42, .25) !important; }
#toolbar .tb { color: #e2e8f0 !important; background: transparent !important; border-radius: 10px !important; }
#toolbar .tb svg { stroke: currentColor !important; color: currentColor !important; }
#toolbar .tb span { color: #cbd5e1 !important; }
#toolbar .tb:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
#toolbar .tb.on, #toolbar .tb.active { background: var(--brand, #c8102e) !important; color: #fff !important; }
#toolbar .tb.on span, #toolbar .tb.active span { color: #fff !important; }
#toolbar .div { background: rgba(255, 255, 255, .15) !important; }
/* rd2c: steps keep their full height in the scrolling list; start card sizes to its content */
#sections > .sec { flex-shrink: 0 !important; }
#stateselected.rd-start .inner-div, #stateselected.rd-start .inner-div * { box-sizing: border-box !important; }
#stateselected.rd-start .inner-div { overflow-x: hidden !important; height: auto !important; width: min(430px, calc(100vw - 32px)) !important; }
#stateselected.rd-start h1 { font-size: 28px !important; }
#stateselected.rd-start .inner-div { max-height: none !important; overflow-y: visible !important; }

/* rd3: one 3D / 2D button in the control bar */
body.rd-vs #viewSeg { display: none !important; }
/* rd3c (Tim): in the 2D drawing the control bar stays, with just the 3D view button */
#stage.is-2d #toolbar { display: flex !important; }
#stage.is-2d #toolbar > :not(#tbView) { display: none !important; }

/* rd5 (Tim 10/20): start card colors - dark by default, light or the account's own color */
#stateselected .rd-zip { margin: 12px 0 4px }
.rd-zip label span { font-weight: 500; opacity: .7 }
#stateselected.rd-dark .inner-div { background: var(--rd-card, #0f172a) !important; color: #e2e8f0; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 24px 60px rgba(2, 6, 23, .45) }
#stateselected.rd-light.rd-custom .inner-div { background: var(--rd-card) !important }
#stateselected.rd-dark .inner-div h1 { color: #fff !important }
#stateselected.rd-dark .inner-div p, #stateselected.rd-dark .inner-div label, #stateselected.rd-dark .form-check-label { color: #cbd5e1 !important }
#stateselected.rd-dark .footer-text { color: #94a3b8 !important }
#stateselected.rd-dark .footer-text strong { color: #e2e8f0 !important }
#stateselected.rd-dark .inner-div select, #stateselected.rd-dark .rd-zip input { background-color: rgba(255, 255, 255, .07) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .2) !important; color-scheme: dark }
#stateselected.rd-dark .inner-div select option { color: #0f172a; background: #fff }
#stateselected.rd-dark .rd-zip input::placeholder { color: #64748b }
#stateselected.rd-dark .rd-msg { color: #fca5a5 !important }
#stateselected.rd-dark .form-check-input { background-color: transparent; border-color: rgba(255, 255, 255, .45) }
#stateselected.rd-dark .form-check-input:checked { background-color: var(--brand, #c8102e); border-color: var(--brand, #c8102e) }
#stateselected.rd-dark .design-btn.disabled { background: #334155 !important; color: #94a3b8 !important; border-color: #334155 !important }

/* rd5 (Tim 10/20): special offer bar in 3D Pro's own style - white bar, red tag, countdown chips, dark pill button */
body .tb-ofr { background: #fff; color: #0f172a; border-bottom: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(15, 23, 42, .06) }
body .tb-ofr::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--brand, #c8102e) }
body .tb-ofr-in { gap: 10px; font-weight: 600; letter-spacing: 0 }
body .tb-ofr-lbl { display: inline-flex; align-items: center; background: var(--brand, #c8102e); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px }
body .tb-ofr-sep { display: none }
body .tb-ofr-hl { color: #0f172a; font-size: 18px; font-weight: 800; text-transform: none; text-shadow: none; letter-spacing: -.01em }
body .tb-ofr-ends { font-size: 12px; font-weight: 600; color: #64748b; margin-left: 8px; padding-left: 12px; border-left: 1px solid #e2e8f0 }
body .tb-ofr-cd { gap: 3px; align-items: center; margin-left: 2px }
body .tb-ofr-cd b { font-size: 14px; font-weight: 800; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 6px; min-width: 26px; text-align: center; color: #0f172a }
body .tb-ofr-cd small { font-size: 10px; font-weight: 700; color: #64748b; text-transform: lowercase; opacity: 1; margin-right: 5px }
body .tb-ofr-cd i { display: none }
body .tb-ofr-more { margin-left: 10px; background: #0f172a; color: #fff; text-decoration: none; border-radius: 999px; padding: 6px 14px; font-size: 11.5px; letter-spacing: .03em }
body .tb-ofr-more:hover { background: var(--brand, #c8102e); color: #fff }
@media (max-width: 820px) {
body .tb-ofr-lbl, body .tb-ofr-ends { display: none }
body .tb-ofr-hl { font-size: 14px }
body .tb-ofr-cd b { font-size: 12px; padding: 1px 4px; min-width: 20px }
body .tb-ofr-cd small { font-size: 9px; margin-right: 3px }
body .tb-ofr-more { padding: 4px 10px; font-size: 10px; margin-left: 6px }
}

/* rd5c: start card footer fits inside the card (no scrollbar); dark footer; lean pitches that don't fit */
#stateselected.rd-start .footer-text { margin: 20px -30px -24px !important; padding: 14px 30px !important }
#stateselected.rd-dark .footer-text { background: rgba(255, 255, 255, .04) !important; border-top: 1px solid rgba(255, 255, 255, .08) }
.pitchrad .pr.rd-nofit { opacity: .38; cursor: not-allowed }

/* rd6 (Tim 10/21): new default start-page background (no photo) - navy with a blueprint grid and a red glow.
   Accounts that upload their own background in CRM > 3D Estimator Settings still get their photo (inline style wins). */
#stateselected.overlay2 { background-color: #0b1220; background-image: radial-gradient(1100px 620px at 12% 108%, rgba(200, 16, 46, .38) 0%, rgba(200, 16, 46, 0) 60%), radial-gradient(900px 520px at 100% -10%, rgba(37, 99, 235, .22) 0%, rgba(37, 99, 235, 0) 60%), repeating-linear-gradient(0deg, rgba(148, 163, 184, .07) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(148, 163, 184, .07) 0 1px, transparent 1px 44px), linear-gradient(160deg, #0f1a2e 0%, #0b1220 55%, #090f1b 100%); background-size: cover, cover, auto, auto, cover; background-position: center; background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat; }
#stateselected.rd-dark .p110-name { color: #ffffff !important; }

/* st2 (10/22 testing): no flash of the old start screen - the platform start screen stays hidden until rd2 has laid it out
   (and a tenant's colored card until its color is applied). Shown anyway after 4s in case the script fails. */
@keyframes st2show { to { visibility: visible; } }
#stateselected[data-platform="1"]:not(.rd-start) { background-image: none !important; }
#stateselected[data-platform="1"]:not(.rd-start) > *, #stateselected:not([data-card=""]):not([data-rd5]) .inner-div { visibility: hidden; animation: st2show 0s 4s forwards; }