/* MARK: - Order Form (place-order.html) */
/* Page-specific styles for the native order form. Halcyonic palette to match
   the rest of the site. Form talks to Zoho via the hidden bridge widget iframe. */

/* MARK: - Section wrapper */
.orderForm {
    max-width: 720px;
    margin: 0 auto;
}

/* MARK: - Page-level heading ("Place an Order") */
.orderForm h2 {
    text-align: center !important;
    color: #000;
    font-size: 2.75rem;
    font-weight: 700;
    margin: 0 0 0.4rem 0;
}

/* MARK: - Divider under the page heading */
.headingDivider {
    width: 340px;
    max-width: 80%;
    height: 3px;
    background: #ED391B;
    margin: 0 auto 3rem auto;
    border-radius: 2px;
}

/* MARK: - Field-level sub-heading ("Where's your property?") */
.fieldHeading {
    text-align: center !important;
    color: #000;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
}

/* MARK: - Form input (shared - all fields use this look) */
/* Pill-rounded, light border, soft shadow. New form fields should reuse
   .formField; .addressField is a thin alias so existing rules keep working. */
.formField,
.addressField {
    display: block;
    width: 100%;
    padding: 14px 22px;
    font-size: 16px;
    font-family: "Merriweather Sans", Arial, sans-serif;
    color: #474f51;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.formField::placeholder,
.addressField::placeholder {
    color: #a8b1b6;
}

.formField:focus,
.addressField:focus {
    outline: none;
    border-color: #ED391B;
    box-shadow: 0 0 0 3px rgba(237, 57, 27, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* When the suggestions dropdown is open, flatten the bottom of the input
   so the dropdown reads as a continuation of the pill. */
.addressWrap:has(.suggestList.visible) .addressField {
    border-radius: 24px 24px 0 0;
    border-bottom-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* MARK: - Address heading row ("Where's your property?" + "+ Add apt" link) */
.addressHeadingRow {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    margin-bottom: 1.25rem;
}

.fieldHeadingInline {
    margin-bottom: 0 !important;
}

/* "+ Add apt" link/button - styled as text, no button chrome */
.aptToggleLink {
    background: none;
    border: none;
    color: #ED391B;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.aptToggleLink:hover {
    text-decoration: underline;
}

/* MARK: - Address row (address + optional inline apt field) */
.addressRow {
    display: flex;
    gap: 10px;
}

.addressRow .addressWrap {
    flex: 3;
    min-width: 0;
}

.aptInline {
    flex: 1;
    min-width: 100px;
}

/* Generic "hidden" utility (used to toggle apt field visibility) */
.hidden {
    display: none !important;
}

/* MARK: - Custom autocomplete dropdown */
/* Wraps the address input so the absolutely-positioned dropdown can pin to it */
.addressWrap {
    position: relative;
}

.suggestList {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    display: none;
}

.suggestList.visible {
    display: block;
}

.suggestItem {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 15px;
    color: #474f51;
    border-bottom: 1px solid #f0f0f0;
}

.suggestItem:last-child {
    border-bottom: none;
}

.suggestItem:hover,
.suggestItem.active {
    background: #fdecea;
    color: #ce1a00;
}

.suggestItem .suggestMain {
    font-weight: 600;
}

.suggestItem .suggestSecondary {
    color: #8d9ca3;
    font-size: 13px;
    margin-left: 6px;
}

.suggestItem:hover .suggestSecondary,
.suggestItem.active .suggestSecondary {
    color: #ce1a00;
}

/* MARK: - Drone altitude line */
.altitudeLine {
    margin-top: 10px;
    margin-left: 40px;
    font-size: 15px;
    color: #000;
    display: none;
}

.altitudeLine.visible {
    display: block;
}

/* Severity-coloring for the highlighted portion (feet number, or "not available") */
.altSeverity-danger {
    color: #b71c1c;
    font-weight: 600;
}

.altSeverity-warning {
    color: #cc7000;
    font-weight: 600;
}

.altSeverity-good {
    color: #1b5e20;
    font-weight: 600;
}

/* MARK: - Submit button */
.submitBtn {
    margin-top: 20px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background: #ED391B;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.submitBtn:hover:not(:disabled) {
    background: #ce1a00;
}

.submitBtn:disabled {
    background: #c5ccd1;
    cursor: not-allowed;
}

/* MARK: - Status message */
.statusMsg {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    display: none;
}

.statusMsg.error {
    background: #fdecea;
    color: #b71c1c;
    display: block;
}

.statusMsg.info {
    background: #e3f2fd;
    color: #0d47a1;
    display: block;
}

/* MARK: - Two-column order layout (sections left, sticky cart right) */
.orderLayout {
    max-width: 1320px;
    margin: 4rem auto 0 auto;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.orderMain {
    flex: 1;
    min-width: 0;
}

/* Sticky cart column - follows the customer down the (future) long page.
   top clears the fixed navbar. */
.cartSidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 110px;
}

/* Tablet/phone: cart drops to a full-width block below the cards */
@media (max-width: 991px) {
    .orderLayout {
        flex-direction: column;
    }

    .cartSidebar {
        position: static;
        width: 100%;
    }
}

/* MARK: - Left-aligned section chrome inside the sections column */
/* Section capsules and explainers sit flush left in the cards column (the
   base .fieldHeading rule centers headings for the address area up top).
   Cards themselves are untouched. */
.orderMain .fieldHeading {
    text-align: left !important;
}

.orderMain .sectionExplainer {
    text-align: left;
}

/* MARK: - Section header pills */
/* Norman & Young-style section labels: black rounded pill, amber icon,
   white bold text. Sits flush left in the sections column. */
.sectionHeaderPill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #111111;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 999px;
}

.sectionHeaderPill .bi {
    color: #F5A623;
    font-size: 1.35rem;
    line-height: 1;
}

/* MARK: - Capsule as the expand/collapse control */
/* The collapsible sections' capsules are <button>s: same pill look, plus a
   trailing "Show ▼" / "Hide ▲" hint (flipped by JS). Explainer sits under. */
.sectionPillToggle {
    border: none;
    cursor: pointer;
    font-family: inherit;
    margin: 0 0 1.25rem 0;
    transition: background 0.15s ease;
}

.sectionPillToggle:hover {
    background: #2a2a2a;
}

/* The "Show ▼" hint - quieter than the section name, dash separator */
.pillToggleHint {
    color: #c5ccd1;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.pillToggleHint::before {
    content: '–';
    margin-right: 12px;
    color: #6b7477;
}

/* MARK: - Cart box */
.cartBox {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cartTitle {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 12px 0;
}

.cartEmpty {
    color: #8d9ca3;
    font-style: italic;
    font-size: 14px;
}

.cartLine {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #474f51;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.cartLineName {
    flex: 1;
}

.cartLinePrice {
    font-weight: 600;
}

.cartRemoveBtn {
    background: none;
    border: none;
    color: #8d9ca3;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.cartRemoveBtn:hover {
    color: #ce1a00;
}

.cartTotalRow {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    padding-top: 12px;
}

/* MARK: - Packages section */
.packagesSection {
    margin: 0;
}

/* MARK: - A La Carte section (collapsed by default) */
.alacarteSection {
    margin-top: 3.5rem;
}

/* One-line explainer under a section heading */
.sectionExplainer {
    text-align: center;
    font-size: 14px;
    color: #8d9ca3;
    margin: -0.75rem 0 1.25rem 0;
}

/* (The old standalone Show/Hide outline button was replaced by the capsule
   toggle above - see .sectionPillToggle) */

/* MARK: - Grouped card option rows (radio for Single, checkbox for Multi) */
.groupOptions {
    margin-top: auto;
    border-top: 1px solid #f0f0f0;
}

.groupOption {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #474f51;
    cursor: pointer;
}

.groupOption:last-child {
    border-bottom: none;
}

.groupOption:hover {
    background: #f7f9fa;
}

/* Custom radio/checkbox visual (state driven by cart sync, not native inputs -
   native radios can't be unchecked by clicking them again) */
.optionControl {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid #c5ccd1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.optionControl.radio {
    border-radius: 50%;
}

.optionControl.check {
    border-radius: 4px;
}

.groupOption.selected .optionControl {
    border-color: #ED391B;
    background: #ED391B;
}

.groupOption.selected .optionControl.radio::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
}

.groupOption.selected .optionControl.check::after {
    content: '✓';
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.optionName {
    flex: 1;
}

.optionPrice {
    font-weight: 600;
}

/* Group cards don't toggle as a whole - only their option rows do */
.productCard.groupCard {
    cursor: default;
}

/* 3-column grid, wraps to 2 on tablet and 1 on phone */
.packageGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 991px) {
    .packageGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .packageGrid {
        grid-template-columns: 1fr;
    }
}

/* MARK: - Product card */
.productCard {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Selection happens in the footer (price + Select), not the whole card */
.productCard:not(.groupCard) .cardFooter {
    cursor: pointer;
}

.productCard.ineligible .cardFooter {
    cursor: not-allowed;
}

.productCard:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* Selected: red border ring + checkmark circle on the hero */
.productCard.selected {
    border-color: #ED391B;
    box-shadow: 0 0 0 2px rgba(237, 57, 27, 0.35), 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cardCheck {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ED391B;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.productCard.selected .cardCheck {
    display: flex;
}

/* Selected card's button reads as the current state, not an action */
.productCard.selected .cardSelectBtn {
    background: #ce1a00;
}

/* MARK: - Card hero (image/video + name overlay + badge) */
.cardHero {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #3B4346;
}

/* Fills the hero box; object-fit crops non-16:9 sources (e.g. 3:2 images).
   Absolutely positioned so the media can't stretch the hero past its 16:9
   box (an in-flow child with height:100% is circular against aspect-ratio,
   so browsers fall back to the image's own height and the box grows). */
.cardHeroMedia {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Product name over the bottom of the hero, dark gradient for legibility */
.cardHeroName {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 14px 10px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Optional badge (e.g. "Most Popular") pinned to the hero's top-right.
   Blue by default; badges containing "new" get the red variant below. */
.cardBadge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #1976d2;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 999px;
}

.cardBadge .bi {
    font-size: 13px;
    line-height: 1;
}

/* Red variant for "New" badges */
.cardBadgeNew {
    background: #ED391B;
}

/* MARK: - Card body (features, pills, footer) */
.cardBody {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px;
}

.cardFeatures {
    margin: 0 0 12px 0;
    padding-left: 18px;
    font-size: 14px;
    color: #474f51;
}

.cardFeatures li {
    margin-bottom: 4px;
}

/* MARK: - Feature pills */
.cardPills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.cardPill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eceff1;
    color: #474f51;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.cardPill .bi {
    font-size: 13px;
    line-height: 1;
}

/* The "+N more" overflow pill - lighter text so it reads as a count, not a feature */
.cardPillMore {
    color: #8d9ca3;
}

/* Clickable "+N more" (opens the card detail popup) */
.cardPillMoreClickable {
    cursor: pointer;
}

.cardPillMoreClickable:hover {
    background: #dfe4e7;
    color: #474f51;
}

/* MARK: - Card-face description paragraph + "view more" link */
.cardDescription {
    font-size: 14px;
    color: #474f51;
    margin: 0 0 12px 0;
}

.viewMoreLink {
    color: #ED391B;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.viewMoreLink:hover {
    text-decoration: underline;
}

/* MARK: - Card detail popup (shares the .modalOverlay backdrop) */
.cardPopupBox {
    position: relative;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden auto;   /* clip the hero corners, scroll tall content */
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.cardPopupClose {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.cardPopupClose:hover {
    background: rgba(0, 0, 0, 0.75);
}

/* MARK: - Card footer (price + select button) */
/* margin-top auto pushes the footer to the card bottom so a short card's
   button lines up with its taller neighbors */
.cardFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.cardPrice {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
}

.cardSelectBtn {
    padding: 8px 22px;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    background: #ED391B;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cardSelectBtn:hover {
    background: #ce1a00;
}

/* MARK: - Ineligible cards / option rows */
/* A card whose requirements aren't in the cart yet (or a drone product in a
   no-fly zone). Stays visible so the full offering shows, but reads as
   unavailable: grayscale hero, faded body, dead cursor. Clicks are also
   blocked in JS - this is just the look. */
.productCard.ineligible {
    cursor: not-allowed;
}

.productCard.ineligible .cardHeroMedia {
    filter: grayscale(1);
    opacity: 0.75;
}

.productCard.ineligible .cardBody {
    opacity: 0.55;
}

.productCard.ineligible .cardSelectBtn {
    background: #c5ccd1;
    cursor: not-allowed;
}

.groupOption.ineligible {
    opacity: 0.45;
    cursor: not-allowed;
}

.groupOption.ineligible:hover {
    background: transparent;
}

/* Why-it's-blocked note under the pills (e.g. "Requires: Floorplan") */
.cardReason {
    display: none;
    font-size: 13px;
    font-weight: 600;
    color: #cc7000;
    margin-bottom: 12px;
}

.cardReason.visible {
    display: block;
}

/* Blue info note - the sqft steering's explanation (counterpart to the
   orange .cardReason, but positive: "we sized this for you"). pre-line so
   a card carrying two notes (e.g. owner name + size) shows one per line. */
.cardInfoNote {
    display: none;
    font-size: 13px;
    font-weight: 600;
    color: #1976d2;
    white-space: pre-line;
    margin-bottom: 12px;
}

.cardInfoNote.visible {
    display: block;
}

/* MARK: - Property-questions popup (property-questions.js) */
/* Question label + hint inside the "About your property" form modal */
.pqLabel {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    margin: 14px 0 4px 0;
}

.pqHint {
    font-size: 13px;
    color: #8d9ca3;
    margin-bottom: 10px;
}

/* Processing-speed rows inside the question popup (reuse the scheduling
   section's procRow look) */
.pqProcRows {
    margin-bottom: 8px;
}

.pqProcRows .groupOption {
    padding: 8px 4px;
}

/* MARK: - Virtual Staging popup (photo count x unit price, room picks) */
.vsCountInput {
    width: 110px;
    padding: 8px 16px;
}

/* Room checkboxes flow into two columns */
.vsRoomGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}

.vsRoomGrid .groupOption {
    padding: 6px 4px;
}

.vsOtherArea {
    min-height: 56px;
}

/* Live total under the fields - bold so the money is unmissable */
.vsTotalLine {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

/* Yes/No pick for the basement question - outline buttons, red when picked */
.pqChoiceRow {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}

.pqChoice {
    flex: 1;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #474f51;
    background: #ffffff;
    border: 1px solid #c5ccd1;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pqChoice:hover {
    border-color: #8d9ca3;
}

.pqChoice.selected {
    color: #ffffff;
    background: #ED391B;
    border-color: #ED391B;
}

/* Owner-name input inside the popup */
.pqInput {
    margin-bottom: 6px;
}

/* Continue stays disabled until the basement Yes/No is picked */
.modalBtnConfirm:disabled {
    background: #c5ccd1;
    cursor: not-allowed;
}

/* "Not available" hero overlay for drone products in a no-fly zone */
.cardUnavailable {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(59, 67, 70, 0.6);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cardUnavailable.visible {
    display: flex;
}

/* MARK: - Confirm / notice popup (modal.js) */
.modalOverlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modalBox {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    max-width: 420px;
    width: 100%;
    padding: 22px;
}

.modalTitle {
    font-size: 1.15rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 10px 0;
}

/* pre-line: "\n" in the message text renders as a line break (used for the
   bulleted removed-items lists) */
.modalMessage {
    font-size: 14px;
    color: #474f51;
    white-space: pre-line;
    margin-bottom: 18px;
}

.modalButtons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modalBtn {
    padding: 9px 20px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modalBtnConfirm {
    color: #ffffff;
    background: #ED391B;
    border: none;
}

.modalBtnConfirm:hover {
    background: #ce1a00;
}

.modalBtnCancel {
    color: #474f51;
    background: #ffffff;
    border: 1px solid #c5ccd1;
}

.modalBtnCancel:hover {
    border-color: #8d9ca3;
}

/* MARK: - Finishing touches (background music) */
.finishingRow {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

/* Each picker sits in a white card matching the product-card look */
.finishingPanel {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Music panel hugs its content - the (non-wrapping) hint line sets the
   width; the title panel takes the remaining room */
#musicPanel {
    flex: 0 0 auto;
}

#musicPanel .finishingHint {
    white-space: nowrap;
}

.finishingTitle {
    font-size: 1.05rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 4px 0;
}

.finishingHint {
    font-size: 13px;
    color: #8d9ca3;
    margin: 0 0 10px 0;
}

/* Music rows in two columns like the old form (None + 9 tracks) */
.musicRows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
}

/* Inline sample button on each track row */
.musicPlayBtn {
    border: none;
    background: none;
    color: #ED391B;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.musicPlayBtn:hover {
    color: #ce1a00;
}

/* Phone: music picker goes single-column */
@media (max-width: 600px) {
    .musicRows {
        grid-template-columns: 1fr;
    }
}

/* MARK: - Property info section (house details grid) */
.propertyInfoGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
    margin-bottom: 14px;
}

.piLabel {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #474f51;
    margin-bottom: 4px;
}

/* Compact variant of the pill input for the grid */
.piInput {
    padding: 8px 16px;
}

/* The title cell spans 2 rows: the empty space under the dropdown is
   reserved so revealing the "Other" input never shifts the grid */
.piTitleCell {
    grid-row: span 2;
}

/* Property Title dropdown (shares the pill-input look) */
.piTitleSelect {
    cursor: pointer;
}

/* "Other" free-text title input - revealed below the dropdown */
.piTitleOther {
    margin-top: 8px;
}

/* Description textarea - softer corners than the pill inputs, resizable
   down only (maxLength caps the text anyway) */
.piDescArea {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-size: 15px;
    font-family: "Merriweather Sans", Arial, sans-serif;
    color: #474f51;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    resize: vertical;
    min-height: 72px;
}

.piDescArea:focus {
    outline: none;
    border-color: #ED391B;
    box-shadow: 0 0 0 3px rgba(237, 57, 27, 0.12);
}

/* Live character counter under the description */
.piCounter {
    text-align: right;
    font-size: 12px;
    color: #8d9ca3;
    margin-top: 4px;
}

/* Phone: single column - no row-span (it would leave a permanent gap
   under the dropdown; in one column the "Other" reveal just pushes down) */
@media (max-width: 600px) {
    .propertyInfoGrid {
        grid-template-columns: 1fr;
    }

    .piTitleCell {
        grid-row: auto;
    }
}

/* MARK: - Scheduling section (date picker + time options + access info) */
/* Two side-by-side blocks (calendar | options, access | schedule-via) */
.schedGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
    margin-bottom: 18px;
}

/* Month calendar */
.schedCalHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 340px;
    margin-bottom: 8px;
}

.schedCalTitle {
    font-weight: 700;
    color: #474f51;
}

.schedCalNav {
    border: 1px solid #c5ccd1;
    background: #ffffff;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 1;
    color: #474f51;
    cursor: pointer;
}

.schedCalNav:hover:not(:disabled) {
    border-color: #8d9ca3;
}

.schedCalNav:disabled {
    opacity: 0.35;
    cursor: default;
}

.schedCalGrid {
    display: grid;
    grid-template-columns: repeat(7, 44px);
    gap: 4px;
    max-width: 340px;
}

.schedCalDow {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #8d9ca3;
    padding: 4px 0;
}

.schedDay {
    height: 38px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    color: #474f51;
    font-size: 14px;
    cursor: pointer;
}

.schedDay:hover:not(.schedDayDisabled):not(.schedDaySelected) {
    border-color: #8d9ca3;
}

/* Grayed days stay CLICKABLE - a click explains why the day can't be
   picked (David keeps the old form's always-say-why behavior) */
.schedDayDisabled {
    background: #f1f3f4;
    color: #b6bfc4;
    border-color: #ebeef0;
    cursor: pointer;
}

.schedDaySelected {
    background: #ED391B;
    border-color: #ED391B;
    color: #ffffff;
    font-weight: 700;
}

/* Tomorrow (rush) gets a subtle amber hint so it reads as special */
.schedDayRush:not(.schedDaySelected) {
    border-color: #e6a817;
}

/* Why-not / date-moved message under the calendar */
.schedNote {
    margin-top: 10px;
    max-width: 340px;
    font-size: 14px;
    font-weight: 700;
    color: #b71c1c;
}

/* Time pickers appear under the options radio for the paid choices */
.schedTimes {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.schedTimeSelect {
    width: auto;
    min-width: 150px;
    cursor: pointer;
}

.schedReadyNow {
    margin-top: 16px;
}

/* Follow-up block titles inside a scheduling column get breathing room
   from the block above them */
.schedBlockTitle {
    margin-top: 22px;
}

/* The 4 PM / weekend / arrival-window explainer sits right under the
   calendar and matches its width */
.schedCalHint {
    max-width: 340px;
    margin-top: 10px;
}

/* Processing rows: benefit name + hours subtitle stacked in the label */
.procRow .optionName {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.procName {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.procSub {
    font-size: 12.5px;
    color: #8d9ca3;
}

/* "Most Popular" nudge tag on the 9-12 hr tier */
.procTag {
    background: #1976d2;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Access / schedule-via option rows flow into two columns */
.schedChoiceCols {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, max-content));
    column-gap: 24px;
}

.schedInstructionsBlock {
    margin-top: 4px;
}

/* Conditional extra fields (combo details / contact info) revealed under
   the Access to Home and schedule-via choices */
.schedExtraFields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin-top: 12px;
}

/* A cell that should span the full row (combo details, contact email) */
.schedFieldWide {
    grid-column: 1 / -1;
}

/* The checklist-only promise under the Home Owner email */
.schedEmailHint {
    margin: 4px 0 0 0;
}

/* Phone: everything stacks */
@media (max-width: 600px) {
    .schedGrid {
        grid-template-columns: 1fr;
    }

    .schedCalGrid {
        grid-template-columns: repeat(7, 1fr);
        max-width: none;
    }

    .schedCalHeader {
        max-width: none;
    }
}

/* MARK: - Hidden bridge iframe (1x1 pixel, off-screen) */
.bridgeFrame {
    position: absolute;
    width: 1px;
    height: 1px;
    border: 0;
    opacity: 0;
    pointer-events: none;
    left: -9999px;
    top: -9999px;
}

/* MARK: - Debug panels (dev only - remove at end of phase) */
.debugSection {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 2px dashed #96a9b5;
}

.debugSection h3 {
    color: #8d9ca3;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

/* MARK: - Live readout panel */
.readoutPanel {
    margin-top: 16px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #D4D9DD;
    border-radius: 4px;
}

.readoutTitle {
    font-size: 12px;
    font-weight: bold;
    color: #8d9ca3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}

.readoutRow {
    display: flex;
    padding: 4px 0;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.readoutRow:last-child {
    border-bottom: none;
}

.readoutLabel {
    width: 160px;
    color: #8d9ca3;
}

.readoutValue {
    flex: 1;
    color: #474f51;
    font-family: "Courier New", monospace;
    word-break: break-word;
}

.readoutValue.empty {
    color: #c5ccd1;
    font-style: italic;
}

/* MARK: - Raw JSON debug panel */
.jsonPanel {
    margin-top: 16px;
}

.jsonBox {
    background: #3B4346;
    color: #D4D9DD;
    padding: 12px;
    border-radius: 4px;
    font-family: "Courier New", monospace;
    font-size: 11px;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

/* MARK: - Your Info / agent section (Phase 5) */
.agentIntro {
    font-size: 15px;
    font-weight: 600;
    color: #474f51;
    margin-bottom: 10px;
}

.agentChoiceRow {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.agentPanel {
    margin-top: 4px;
}

.agentLookupRow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.agentLookupRow .piInput {
    flex: 1;
    min-width: 220px;
}

.agentFindBtn {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background: #ED391B;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.agentFindBtn:hover {
    background: #ce1a00;
}

.agentStatus {
    min-height: 18px;
    margin-top: 8px;
    font-size: 13px;
}

.agentStatus.info {
    color: #8d9ca3;
}

.agentStatus.error {
    color: #ED391B;
    font-weight: 600;
}

.agentResults {
    margin-top: 12px;
}

.agentPrefillHead {
    font-size: 14px;
    font-weight: 600;
    color: #474f51;
    margin-bottom: 12px;
}

.agentChooser {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.agentChoice {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #474f51;
    background: #ffffff;
    border: 1px solid #c5ccd1;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

.agentChoice:hover {
    border-color: #ED391B;
    color: #ED391B;
}

.agentNoMatch {
    font-size: 14px;
    color: #474f51;
    margin-bottom: 8px;
}

.agentLink {
    display: inline-block;
    margin-top: 10px;
    padding: 0;
    font-size: 13px;
    font-family: inherit;
    color: #1976d2;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.agentReadonly {
    background: #eceff1;
    color: #8d9ca3;
    cursor: not-allowed;
}

/* Gray hint under the MLS Password field - why we're asking */
.agentFieldHint {
    font-size: 12px;
    color: #8d9ca3;
    margin-top: 4px;
}

/* Blue note under an edited MLS-owned field - the persistent reminder that
   the change rides the order only (the popup fires once, notes stay) */
.agentFieldNote {
    display: none;
    font-size: 12px;
    font-weight: 600;
    color: #1976d2;
    margin-top: 4px;
}

.agentFieldNote.visible {
    display: block;
}

/* "Is the above Info Correct?" - the New-path confirm question. Appears
   under the field grid once everything is valid; Yes creates the customer
   (CRM + Books + placeholder subscription) via the bridge. */
.agentConfirmBlock {
    margin-top: 16px;
}

.agentConfirmQ {
    font-size: 14px;
    font-weight: 700;
    color: #474f51;
    margin-bottom: 8px;
}

.agentConfirmRow {
    display: flex;
    gap: 24px;
    align-items: center;
}

.agentConfirmChoice {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
}

/* Blue "saved" note - shows after a successful Yes (hidden again the
   moment they edit a field, when the question returns for a re-confirm) */
.agentSavedNote {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #1976d2;
}

/* MARK: - Billing Information section (billing-section.js) */
/* Top row: How-to-Bill radios LEFT, card-on-file details RIGHT (David's
   mock 2026-07-16); the card-entry iframe spans full width below */
.billingTopRow {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    flex-wrap: wrap;
}

.billingOptionsCol {
    flex: 0 0 auto;
}

.billingTopRow .billingCardBox {
    flex: 1 1 260px;
    min-width: 240px;
}

.billingLabel {
    font-size: 14px;
    font-weight: 700;
    color: #474f51;
    margin-bottom: 10px;
}

.billingOptions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.billingOption {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #474f51;
    cursor: pointer;
}

.billingOption input[type="radio"] {
    accent-color: #ED391B;
    cursor: pointer;
}

/* Gray helper lines: "Billed through ...", loading, expired-card note */
.billingHint {
    font-size: 12px;
    color: #8d9ca3;
    margin: 0 0 6px 24px;
}

/* Card-on-file details block (matches the v3 layout) */
.billingCardBox {
    font-size: 14px;
    color: #474f51;
}

.billingCardTitle {
    text-decoration: underline;
    font-weight: 600;
    margin-bottom: 10px;
}

.billingCardRow {
    margin-bottom: 4px;
}

.billingCardNote {
    margin-top: 10px;
    font-style: italic;
}

/* "Bill this Card" inline add-card iframe (the published Creator page,
   which frames Zoho's secure card page) */
.billingAddCard {
    margin-top: 4px;
}

.billingAddCard .billingHint {
    margin: 6px 0 0 0;
}

.billingAddCard .agentLink {
    display: block;
    margin-top: 8px;
}

/* Seamless: no border, no scrolling, and CROPPED to exactly the inner
   card frame: the Creator page puts the card iframe at 16px from its top,
   so height = snippet iframe height + 18 (Creator's min-height white below
   is cut off). If the snippet height changes, keep this = snippet + 18.
   Width capped so Zoho's centered panel sits near the left like the mock */
.billingCardFrame {
    width: 100%;
    max-width: 780px;
    height: 618px;
    border: none;
    display: block;
    overflow: hidden;
}

/* Blue confirmation next to the card info right after an inline card save */
.billingSavedNote {
    font-size: 13px;
    font-weight: 600;
    color: #1976d2;
    margin-top: 8px;
}

/* MARK: - Card-form "still there?" overlay (billing-section.js)
   After 5 minutes of save-detection polling, this cover blocks the card
   iframe (David's rule: the form goes inactive) - clicking it removes
   the cover and restarts the polling cycle. The card page underneath is
   untouched, so anything already typed survives. */
.billingAddCard {
    position: relative;
}

.billingCardOverlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    z-index: 5;
}

.billingCardOverlayText {
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #474f51;
    background: #ffffff;
    border: 1px solid #d4d9dd;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* MARK: - Terms of Service section (terms-section.js) */
.termsLink {
    display: inline-block;
    font-size: 14px;
    color: #ED391B;
    text-decoration: underline;
}

.termsLink:hover {
    color: #ce1a00;
}

.termsAgreeRow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 15px;
    color: #474f51;
    cursor: pointer;
}

.termsAgreeRow input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #ED391B;
    cursor: pointer;
}

.termsRequiredStar {
    color: #ED391B;
    font-weight: 700;
}

/* MARK: - Map-pin fallback (map-pin.js) */
/* Escape-hatch link row under the address box when autocomplete finds nothing */
.mapPinLinkRow {
    margin-top: 8px;
}

/* Escape-hatch row pinned first inside the suggestion dropdown - styled
   apart from the real address rows so it reads as an action, not a match */
.mapPinSuggestItem {
    color: #1976d2;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #e0e4e7;
}

.mapPinSuggestItem .bi {
    margin-right: 4px;
}

/* Inline panel holding the hint, the interactive map, and the button rows */
.mapPinPanel {
    margin-top: 12px;
    padding: 12px;
    background: #f7f7f7;
    border: 1px solid #d4d9dd;
    border-radius: 6px;
    max-width: 720px;
}

.mapPinHint {
    font-size: 14px;
    font-weight: 600;
    color: #474f51;
    margin-bottom: 8px;
}

/* The Google map itself - fixed height, fills the panel width */
.mapPinMap {
    width: 100%;
    height: 380px;
    border-radius: 4px;
}

.mapPinActions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* "Is this your property?" confirm row shown once a boundary is drawn */
.mapPinConfirmRow {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mapPinConfirmQuestion {
    font-size: 14px;
    font-weight: 700;
    color: #474f51;
}

/* Buttons match the form's blue action styling (de-red pass) */
.mapPinBtn {
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #1976d2;
    background: #fff;
    color: #1976d2;
    cursor: pointer;
}

.mapPinBtnPrimary {
    background: #1976d2;
    color: #fff;
}

.mapPinBtn:disabled {
    border-color: #b0bec5;
    background: #eceff1;
    color: #90a4ae;
    cursor: not-allowed;
}

/* Persistent note after a confirmed pin, styled like the blue card notes */
.mapPinSummary {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1976d2;
}

/* MARK: - Property Line Overlay tease (overlay-tease.js) */
/* Blue teaser note under the address box once the parcel is captured */
.teaseNote {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1976d2;
}

/* Inline panel holding the large sample preview */
.teasePanel {
    margin-top: 12px;
    padding: 12px;
    background: #f7f7f7;
    border: 1px solid #d4d9dd;
    border-radius: 6px;
    max-width: 748px;
}

.teasePanelFooter {
    margin-top: 8px;
}

/* The img+svg layer stack. MUST stay exactly 3:2 - the SVG overlay's
   projection space is 600x400, so any other shape would slide the yellow
   boundary off the satellite underneath. */
.teaseStack {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #111;
    overflow: hidden;
    border-radius: 4px;
}

/* Layer 1 - satellite only (all a right-click save gets). The square
   600x600 fetch center-crops to 3:2 here, hiding Google's bottom band. */
.teaseStack img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Layer 2 - the boundary/label overlay */
.teaseStack svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Inside a 16:9 card hero the 3:2 stack rides full-width, centered
   vertically; the hero box crops the extra height evenly (registration
   survives because the stack itself stays 3:2). */
.teaseHeroClip {
    overflow: hidden;
}

.teaseHeroClip .teaseStack {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0;
}

/* Diagonal SAMPLE watermark - large panel only, catches screenshots */
.teaseWatermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-30deg);
    font-size: 72px;
    font-weight: 900;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.30);
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    user-select: none;
}

/* MARK: - Order confirmation page (shown after a successful submit) */
.orderConfirmation {
    max-width: 560px;
    margin: 0 auto;
}

/* Big green checkmark above the headline */
.confirmCheck {
    text-align: center;
    font-size: 64px;
    color: #1b5e20;
    line-height: 1;
    margin-bottom: 8px;
}

.confirmEmailLine {
    font-size: 15px;
    margin: 14px 0 6px;
}

/* One box per section: address, cart, agent */
.confirmBlock {
    background: #f7f8f9;
    border: 1px solid #e2e6e9;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.6;
}

/* Cart line: product name left, price right */
.confirmCartRow {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.confirmCartRow.confirmCartTotal {
    border-top: 1px solid #d4dadf;
    margin-top: 6px;
    padding-top: 6px;
    font-weight: bold;
}

/* Review/received button row - Go Back is the quiet secondary action */
.confirmBtnRow {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.confirmBackBtn {
    background: #ffffff;
    color: #3B4346;
    border: 1px solid #c5ccd1;
}

.confirmBackBtn:hover:not(:disabled) {
    background: #eef1f3;
}