/**
 * Clear Price - Admin & frontend component styles.
 * Admin-only rules scoped to WP admin selectors.
 * Wizard rules scoped to .cp-quote-wizard to prevent theme bleed.
 */

/* -- Wizard: minimal reset - preserve theme fonts/headings, protect layout -- */
.cp-quote-wizard,
.cp-quote-wizard *,
.cp-quote-wizard *::before,
.cp-quote-wizard *::after {
    box-sizing: border-box;
}

/* -- Wizard shell - centered, capped at 1200px, with breakpoint-aware padding.
   Mobile (<=639):   16px side padding, 100% width
   Tablet (>=640):   24px side padding, 100% width
   Desktop (>=1024): 32px side padding, max-width 1200px centered
   Inner content (questions, address forms) wraps in its own narrower
   max-w-md / max-w-lg classes - the shell just caps the outer frame. */
.cp-quote-wizard {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    /* v1.30.4 - breathing room above/below the wizard */
    padding-top: 5rem;
    padding-bottom: 5rem;

    /* -- Text-color scale (v1.25.7) ---------------------------------------
       One consistent, WCAG-AA-passing gray ramp for all wizard text. Prior
       builds scattered ad-hoc grays (#9ca3af, #6b7280, #cbd5e1 ...), several
       of which failed contrast on white. Every token below clears 4.5:1 on
       white for normal text. Darkest -> lightest:
         strong  headings, card names, prices
         body    labels, feature bullets, primary copy
         muted   descriptions, secondary copy, fine print/disclaimers
         subtle  eyebrow labels, captions, hints (lightest that still passes)
       Non-text grays (borders, icon strokes, dividers) are intentionally
       NOT tokenized here - they stay as literal light grays. */
    --cp-text-strong: #111827; /* 16:1  */
    --cp-text-body:   #374151; /* 7.1:1 */
    --cp-text-muted:  #475569; /* 5.3:1 */
    --cp-text-subtle: #64748b; /* 4.9:1 */
}

@media (min-width: 640px) {
    .cp-quote-wizard {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 1024px) {
    .cp-quote-wizard {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* -- Google Places pac-container ------------------------------------------- */
/* The pac-container is reparented into .cp-address-wrapper (position:relative)
   by _initPlaces() in quote-wizard.js. This fixes both the desktop scroll
   offset bug and the iOS keyboard viewport issue without position:fixed. */
.cp-address-wrapper .pac-container {
    /* Override Google's inline positioning - it recalculates top/left from
       <body> offset on every open, ignoring our reparented wrapper. */
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    position: absolute !important;
    z-index: 9999 !important;
    margin-top: 2px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-radius: 0 0 8px 8px;
    border-top: none;
}

/* -- Honeypot field - off-screen, not display:none (bots check for that) --- */
.cp-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* -- Service Type Cards (Step 2) ------------------------------------------- */
.cp-service-cards {
    display: grid !important;
    gap: 10px;
}

.cp-service-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 18px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.cp-service-card:hover,
.cp-service-card:focus-visible {
    border-color: var(--cp-brand);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.cp-service-card:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cp-service-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #eff6ff;
    background: color-mix(in srgb, var(--cp-brand) 10%, white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cp-brand);
}

.cp-service-card__icon svg,
.cp-service-card__icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.cp-service-card__body {
    flex: 1;
    min-width: 0;
}

.cp-service-card__title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 2px;
    line-height: 1.3;
}

.cp-service-card__desc {
    font-size: 14px;
    color: var(--cp-text-muted);
    margin: 0;
    line-height: 1.4;
}

.cp-service-card__arrow {
    flex-shrink: 0;
    color: #d1d5db;
    transition: color 0.15s ease;
}

.cp-service-card:hover .cp-service-card__arrow,
.cp-service-card:focus-visible .cp-service-card__arrow {
    color: var(--cp-cta, var(--cp-brand));
}

/* -- Icon Cards (icon_cards) & Icon Radio (icon_radio) - shared wrapper grids */
/* Grid layout is set via Tailwind classes on the element for cross-browser
   reliability. These rules handle card appearance only. */
.cp-icon-cards,
.cp-icon-radio-group {
    gap: 14px;
}

/* -- Shared base for icon_cards and icon_radio button items ----------------- */
.cp-icon-card,
.cp-icon-radio {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 16px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    line-height: 1.3;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    outline: none;
    min-height: 130px;
}

/* -- Recommended-option badge ---------------------------------------------
   Admin-configurable "Most common in your area"-style highlight on a single
   option of a question. On icon cards it pins to the top-right corner; on
   inline radio labels it sits next to the label text (see --inline below). */
.cp-option-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    max-width: calc(100% - 16px);
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: color-mix(in srgb, var(--cp-cta) 20%, white);
    color: var(--cp-brand);
}

/* Inline variant for radio/select rows where there is no positioned card. */
.cp-option-badge--inline {
    position: static;
    top: auto;
    right: auto;
    margin-left: 6px;
    max-width: none;
}

.cp-icon-card:hover,
.cp-icon-card:focus-visible,
.cp-icon-radio:hover,
.cp-icon-radio:focus-visible {
    border-color: var(--cp-brand);
}

.cp-icon-card--selected,
.cp-icon-radio--selected {
    border-color: var(--cp-brand);
    background: #eff6ff;
    background: color-mix(in srgb, var(--cp-brand) 10%, white);
    color: var(--cp-brand);
}

.cp-icon-card svg,
.cp-icon-card img,
.cp-icon-radio svg,
.cp-icon-radio img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* -- Question label above icon grids --------------------------------------- */
.cp-question-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 10px;
    line-height: 1.4;
}

/* -- Back button (shared across all steps) --------------------------------- */
.cp-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    min-height: 44px;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: var(--cp-text-muted);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cp-btn-back:hover {
    background: #f9fafb;
    color: #374151;
}

/* -- Two-system notice banner ---------------------------------------------- */
.cp-two-system-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: #eff6ff;
    background: color-mix(in srgb, var(--cp-brand) 8%, white);
    border: 1px solid;
    border-color: #bfdbfe;
    border-color: color-mix(in srgb, var(--cp-brand) 25%, white);
    border-radius: 10px;
    color: #1e40af;
    color: var(--cp-brand);
}

.cp-two-system-notice svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    opacity: 0.8;
}

.cp-two-system-notice p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* -- Reusable notice banner (.cp-notice) --------------------------------- */
.cp-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: #eff6ff;
    background: color-mix(in srgb, var(--cp-brand) 8%, white);
    border: 1px solid;
    border-color: #bfdbfe;
    border-color: color-mix(in srgb, var(--cp-brand) 25%, white);
    border-radius: 10px;
    color: #1e40af;
    color: var(--cp-brand);
}

.cp-notice svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    opacity: 0.8;
}

.cp-notice p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Small variant - tighter, lighter */
.cp-notice--sm {
    padding: 8px 12px;
    border-radius: 8px;
}

.cp-notice--sm p {
    font-size: 13px;
}

/* Muted fine-print (no banner, gray text) */
.cp-fine-print {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cp-text-muted);
}

/* GDPR consent error state */
.cp-consent-error {
    color: #dc2626;
    border-color: #dc2626;
}

.cp-consent-error label {
    color: #dc2626;
}

/* -- Tier Stack (pricing results - vertical ecommerce layout) -------------- */

.cp-tier-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Card wrapper */
.cp-tier-card {
    position: relative;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cp-tier-card--featured {
    border-color: var(--cp-brand);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}

/* "Most Popular" banner - sits above the inner layout */
.cp-tier-card__badge {
    text-align: center;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #fff;
}

/* Three-column inner layout: [media | body | aside] */
.cp-tier-card__inner {
    display: flex;
    align-items: stretch;
}

/* -- Left column: icon / image ------------ */
.cp-tier-card__media {
    flex-shrink: 0;
    width: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    border-right: 1px solid #f3f4f6;
}

.cp-tier-card__media svg {
    width: 52px;
    height: 52px;
}

/* Brand logo (pricebook mode): fixed box so every card's logo occupies
   identical space regardless of the image's aspect ratio (a wide wordmark
   vs a square badge otherwise renders at wildly different heights).
   object-fit keeps the logo undistorted and centered inside the box.
   Sized to match the 52px icon fallback. (v1.31.2 - sizing moved here
   from an inline style on the template img, which capped at 90%/90% and
   let each logo pick its own height.) */
.cp-tier-card__brand-logo {
    display: block;
    width: 100%;
    height: 52px;
    object-fit: contain;
}

/* -- Center column: product info ---------- */
.cp-tier-card__body {
    flex: 1;
    min-width: 0;
    padding: 22px 24px;
}

.cp-tier-card__brand {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cp-text-subtle);
    margin: 0 0 4px;
}

/* v1.17.1 - Hidden by default; only revealed on mobile (see the
   @media (max-width: 639px) block below). Desktop keeps the brand
   line in the body where there's room; mobile moves it next to the
   logo to fill the empty horizontal strip. */
.cp-tier-card__media-meta {
    display: none;
}

.cp-tier-card__name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.25;
}

/* -- Chosen door-size spec line (door_catalog cards) --------------------------
   Surfaces the size the customer picked (e.g. "2-Car") on the pricing card.
   Rendered as a labelled spec line, NOT a badge, so it doesn't compete with the
   "Most Popular" banner. Deliberate breathing room: a little space above the
   name gap and a clear 14px below before the description, so the size reads as
   its own distinct piece of information. */
.cp-tier-card__size {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 2px 0 14px;
}

.cp-tier-card__size-key {
    /* Matched to the value's size (14px) so the label and answer read as one
       line; colors stay distinct (subtle label vs. body-color value). */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cp-text-subtle);
}

.cp-tier-card__size-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--cp-text-body);
}

.cp-tier-card__desc {
    /* The card body copy is the key selling text on the pricing screen, so it
       gets a larger size than the global +1 bump (15px vs the 14px baseline). */
    font-size: 15px;
    color: var(--cp-text-muted);
    margin: 0 0 14px;
    line-height: 1.55;
}

/* Features: wrap into 2 columns on wider screens */
.cp-tier-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.cp-tier-card__features li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 15px;
    color: #374151;
    line-height: 1.5;
}

.cp-tier-card__features li::before {
    content: '\2713';
    color: #10b981;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

/* -- Right column: price + CTA ------------ */
.cp-tier-card__aside {
    flex-shrink: 0;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px 20px;
    border-left: 1px solid #f3f4f6;
    text-align: center;
}

.cp-tier-card__price {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.cp-tier-card__price-sep {
    font-weight: 400;
    font-size: 17px;
    opacity: 0.7;
}

/* -- Split pricing: system + install + total breakdown ---------------------- */
.cp-tier-card__price-split {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.cp-tier-card__price-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
}

.cp-tier-card__price-line-label {
    color: var(--cp-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.cp-tier-card__price-line-value {
    font-weight: 700;
    font-size: 15px;
}

.cp-tier-card__price-line--total {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid #f3f4f6;
}

.cp-tier-card__price-line--total .cp-tier-card__price-line-label {
    color: #374151;
    font-weight: 600;
}

.cp-tier-card__price-line--total .cp-tier-card__price-line-value {
    font-size: 18px;
    font-weight: 800;
}

/* When split is active, keep aside in column layout even on mobile */
@media (max-width: 639px) {
    .cp-tier-card__aside--split {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }
}

.cp-tier-card__price-hidden {
    font-size: 14px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 12px;
}

.cp-tier-card__price-hidden p {
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 13px;
}

.cp-tier-card__phone {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    text-decoration: underline;
}

.cp-tier-card__cta {
    width: 100%;
    /* 10px (not 16px) side padding: the CTA is a full-width button in the fixed
       200px stack-layout aside, and "Get My Free Quote" (white-space:nowrap) was
       crowding the right edge at 16px. Grid keeps its own 12px 16px override. */
    padding: 11px 10px;
    min-height: 44px;
    border: 2px solid;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.cp-tier-card__cta:hover:not(:disabled) {
    opacity: 0.88;
}

.cp-tier-card__cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* -- Responsive: collapse aside on tablet (640-1023px) ----------------------- */
@media (min-width: 640px) and (max-width: 1023px) {
    .cp-tier-card__inner {
        flex-direction: column;
    }

    .cp-tier-card__media {
        width: 100%;
        height: 72px;
        flex-direction: row;
        gap: 12px;
        padding: 14px 20px;
        border-right: none;
        border-bottom: 1px solid #f3f4f6;
        justify-content: flex-start;
    }

    /* Fixed logo box in the horizontal strip (see mobile rule below):
       width:auto so media-meta fits beside it. */
    .cp-tier-card__brand-logo {
        width: auto;
        max-width: 160px;
        height: 40px;
        object-fit: contain;
    }

    .cp-tier-card__aside {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-left: none;
        border-top: 1px solid #f3f4f6;
        padding: 14px 20px;
        gap: 12px;
    }

    .cp-tier-card__cta {
        width: auto;
        flex-shrink: 0;
    }
}

/* -- Responsive: collapse to stacked layout on mobile ------------------------ */
@media (max-width: 639px) {
    .cp-tier-card__inner {
        flex-direction: column;
    }

    /* On mobile, media becomes a slim horizontal accent strip */
    .cp-tier-card__media {
        width: 100%;
        height: 72px;
        flex-direction: row;
        gap: 12px;
        padding: 14px 20px;
        border-right: none;
        border-bottom: 1px solid #f3f4f6;
        justify-content: flex-start;
    }

    .cp-tier-card__media svg {
        width: 36px;
        height: 36px;
    }

    /* Fixed logo box in the mobile strip, matching the 36px icon size.
       width:auto here (unlike desktop) because the strip is a left-aligned
       row with media-meta beside the logo - a full-width box would push
       the meta text off the card. */
    .cp-tier-card__brand-logo {
        width: auto;
        max-width: 140px;
        height: 36px;
        object-fit: contain;
    }

    /* v1.17.1 - Media-meta sits beside the logo on mobile, filling
       the otherwise-empty horizontal strip. Styled like a product
       subtitle (small caps, gray), deliberately not competing with
       the tier name below. */
    .cp-tier-card__media-meta {
        display: block;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--cp-text-subtle);
        margin: 0;
        line-height: 1.3;
    }

    /* Brand line in the body becomes redundant once media-meta shows
       the same info on mobile - hide it to avoid the duplicate. */
    .cp-tier-card__brand {
        display: none;
    }

    .cp-tier-card__body {
        padding: 16px 20px;
    }

    .cp-tier-card__name {
        font-size: 18px;
    }

    /* On mobile, aside becomes a full-width footer bar */
    .cp-tier-card__aside {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-left: none;
        border-top: 1px solid #f3f4f6;
        padding: 14px 20px;
        gap: 12px;
    }

    .cp-tier-card__price {
        font-size: 18px;
        text-align: left;
    }

    .cp-tier-card__cta {
        width: auto;
        flex-shrink: 0;
        padding: 10px 20px;
        font-size: 14px;
    }

    .cp-tier-card__price-hidden {
        text-align: left;
    }
}

/* ----------------------------------------------------------------------------
   v1.17.0 - Tier-Select Redesign
   ----------------------------------------------------------------------------
   - Install Package Banner above the tier stack
   - Elevated Premium card ("Most Popular")
   - "Starting at $X" pricing prefix + per-card trust anchor + CTA subtext
   - "Call us" lifeline below cards
   - Collapsible comparison table (3 groups, -> upgrade hints, footnote)
   - Mobile: stacked cards, sticky-column horizontal-scroll comparison (3B.2)
*/

/* -- Install Package Banner ------------------------------------------------- */
.cp-install-banner {
    position: relative;
    border: 2px solid;
    border-radius: 14px;
    padding: 18px 22px;
    margin: 18px 0 20px;
}

.cp-install-banner__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 8px;
}

.cp-install-banner__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.cp-install-banner__value-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.cp-install-banner__lead {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--cp-text-muted);
}

.cp-install-banner__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* v1.29.3 - fixed 2 columns (was auto-fit, which fanned out to 4 on the
       full-width banner). Collapses to 1 column on mobile below. */
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 18px;
}

.cp-install-banner__items li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 15px; /* v1.30.4 - was 14px */
    color: #374151;
    line-height: 1.45;
}

.cp-install-banner__check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

@media (max-width: 639px) {
    .cp-install-banner {
        padding: 14px 16px;
    }
    .cp-install-banner__title {
        font-size: 16px;
    }
    .cp-install-banner__items {
        grid-template-columns: 1fr;
    }
}

/* -- Premium tier card elevation ------------------------------------------- */
/* `.cp-tier-card--featured` already exists above with brand-color border;
   add the elevation pass here so the override sits cleanly in the v1.17 block. */
.cp-tier-card--featured {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 0 0 1px var(--cp-brand);
    transform: translateZ(0); /* paint isolation so the shadow renders crisp */
}

@media (min-width: 1024px) {
    .cp-tier-card--featured {
        transform: scale(1.025);
        margin: 6px 0;
        z-index: 1;
    }
}

/* Subtle brand tint on the body column for the featured card */
.cp-tier-card--featured .cp-tier-card__body {
    background: color-mix(in srgb, var(--cp-brand) 3%, white);
}

/* -- Starting-at price prefix + trust anchor + CTA subtext ---------------- */
.cp-tier-card__price-prefix {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 2px;
}

.cp-tier-card__trust {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--cp-text-subtle);
    text-align: center;
    max-width: 180px;
}

.cp-tier-card__cta-subtext {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--cp-text-muted);
    text-align: center;
}

@media (max-width: 1023px) {
    .cp-tier-card__trust,
    .cp-tier-card__cta-subtext {
        text-align: left;
        max-width: none;
    }
}

/* -- "Call us" lifeline ---------------------------------------------------- */
.cp-tier-lifeline {
    margin: 22px 0 0;
    padding: 14px 18px;
    text-align: center;
    font-size: 15px;
    color: var(--cp-text-muted);
    background: #f8fafc;
    border-radius: 10px;
}

.cp-tier-lifeline a {
    font-weight: 700;
    text-decoration: none;
}

.cp-tier-lifeline a:hover {
    text-decoration: underline;
}

/* v1.33.0 - Offering details pop-up ("More details" on door_catalog
   cards). Fixed overlay + centered modal; body scroll is locked by the
   Alpine open/close handlers. */
.cp-tier-card__details-link {
    margin-top: 10px;
    padding: 0;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.cp-details-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
}

.cp-details-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.cp-details-modal__close {
    position: absolute;
    top: 10px;
    right: 14px;
    padding: 4px 8px;
    border: none;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}

.cp-details-modal__close:hover {
    color: #0f172a;
}

.cp-details-modal__image {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    margin: 0 auto 16px;
}

.cp-details-modal__name {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
}

.cp-details-modal__model {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--cp-text-muted);
}

.cp-details-modal__body {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #334155;
    white-space: pre-line;
}

/* v1.32.0 - Financing note strip below the lifeline. Hidden entirely when
   the cp_financing_note option is blank (the template skips the markup). */
.cp-tier-financing {
    margin: 12px 0 0;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    font-size: 15px;
    color: var(--cp-text-muted);
    background: #f8fafc;
    border-radius: 10px;
}

.cp-tier-financing__logo {
    height: 35px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .cp-tier-financing {
        flex-direction: column;
        gap: 6px;
    }
}

/* -- Comparison table (desktop) -------------------------------------------- */
.cp-comparison {
    margin: 28px 0 0;
}

.cp-comparison__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: transparent;
    border: 1.5px solid;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cp-comparison__toggle:hover {
    background: color-mix(in srgb, var(--cp-brand) 6%, white);
}

.cp-comparison__chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.cp-comparison__chevron--open {
    transform: rotate(180deg);
}

.cp-comparison__panel {
    margin-top: 18px;
}

[x-cloak] {
    display: none !important;
}

.cp-comparison__swipe-hint {
    display: none;
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--cp-text-muted);
    text-align: right;
    font-style: italic;
}

.cp-comparison__scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.cp-comparison__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
}

.cp-comparison__feature-head,
.cp-comparison__tier-head {
    padding: 12px 14px;
    text-align: left;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cp-text-muted);
}

.cp-comparison__tier-head {
    text-align: center;
}

.cp-comparison__tier-head--premium {
    background: color-mix(in srgb, var(--cp-brand) 8%, white);
    font-weight: 800;
}

.cp-comparison__group-head th {
    padding: 12px 14px 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    background: #fff;
    border-top: 1px solid #f3f4f6;
}

.cp-comparison__group:first-of-type .cp-comparison__group-head th {
    border-top: none;
}

.cp-comparison__row-head {
    padding: 11px 14px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    background: #fff;
    vertical-align: top;
}

.cp-comparison__cell {
    padding: 11px 14px;
    text-align: center;
    color: #374151;
    border-top: 1px solid #f3f4f6;
    vertical-align: top;
    line-height: 1.45;
}

.cp-comparison__cell--premium {
    background: color-mix(in srgb, var(--cp-brand) 5%, white);
}

.cp-comparison__check {
    color: var(--cp-brand);
    font-weight: 800;
    font-size: 17px;
}

.cp-comparison__dash {
    /* "Not included" glyph - deliberately lighter than the checkmarks so
       absence reads as absence, but lifted from the old #cbd5e1 (2.7:1,
       barely visible) to clear the 3:1 graphical-contrast floor. */
    color: #94a3b8;
}

.cp-comparison__footnote {
    margin: 12px 4px 0;
    font-size: 12px;
    color: var(--cp-text-muted);
    line-height: 1.5;
}

/* -- Comparison table (mobile: sticky-column horizontal scroll - 3B.2) ---- */
@media (max-width: 639px) {
    .cp-comparison__swipe-hint {
        display: block;
    }

    .cp-comparison__table {
        font-size: 15px; /* readable floor per locked spec */
        min-width: 560px; /* force horizontal scroll on phones */
    }

    .cp-comparison__feature-head,
    .cp-comparison__row-head {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        /* Shadow drops a soft edge to signal "this column is fixed". */
        box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.10);
        min-width: 140px;
    }

    .cp-comparison__feature-head {
        background: #f9fafb;
    }

    .cp-comparison__cell {
        min-width: 110px;
    }

    .cp-comparison__tier-head--premium {
        /* Slight tint stays so the sticky scroll keeps Premium visible. */
        background: color-mix(in srgb, var(--cp-brand) 10%, white);
    }
}

/* Admin stat cards */
.cp-stat-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 20px;
}

/* Admin table tweaks */
.cp-admin-table .column-status {
    width: 100px;
}

.cp-admin-table .column-actions {
    width: 120px;
}

/* Status badges */
.cp-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

/* "In progress" - lead captured at the address step (v1.26.0 early capture)
   but the customer never chose an option. Amber to read as "needs follow-up",
   distinct from the CRM status badges beside it. */
.cp-badge--partial   { background: #fff3cd; color: #664d03; border: 1px solid #f7e6a8; }

.cp-badge--new       { background: #e0f0ff; color: #0a4b78; }
.cp-badge--contacted { background: #fff3cd; color: #664d03; }
.cp-badge--booked    { background: #d1e7dd; color: #0f5132; }
.cp-badge--won       { background: #d1e7dd; color: #0f5132; }
.cp-badge--lost      { background: #f8d7da; color: #842029; }
.cp-badge--active    { background: #d1e7dd; color: #0f5132; }
.cp-badge--past_due  { background: #fff3cd; color: #664d03; }
.cp-badge--canceled  { background: #f8d7da; color: #842029; }
.cp-badge--pending   { background: #e0f0ff; color: #0a4b78; }
.cp-badge--paid      { background: #d1e7dd; color: #0f5132; }
.cp-badge--fulfilled { background: #d1e7dd; color: #0f5132; }
.cp-badge--refunded  { background: #f8d7da; color: #842029; }

/* -- Line-item builder (line_item_ranges trades, v1.10.0) --------------- */
.cp-line-item-pill {
    /* Floats above the column header so adding it doesn't push the
       'Medium' label down and misalign the row of size titles. The
       enclosing column div is position:relative (set inline in the
       template). */
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    /* Background + color come from inline :style on the element so
       brand/CTA CSS variables can drive a tinted look per install. */
}
.cp-line-item-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cp-line-item-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
@media (max-width: 640px) {
    /* Tighter columns on phones - keep the size labels in the header row,
       just shrink the qty inputs so the style label has more room. */
    .cp-line-item-row {
        grid-template-columns: 1fr 56px 56px 56px !important;
        gap: 6px !important;
    }
    .cp-line-item-icon {
        width: 28px;
        height: 28px;
    }
}

/* -- Multi-select trade picker (v1.12.0) -------------------------------- */
.cp-trade-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 140px;
    padding: 20px 16px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.cp-trade-card:hover {
    border-color: var(--cp-brand);
}
.cp-trade-card:active {
    transform: translateY(1px);
}
.cp-trade-card--selected {
    border-color: var(--cp-brand);
    background-color: color-mix(in srgb, var(--cp-brand) 6%, white);
}
.cp-trade-card__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cp-trade-card__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.cp-trade-card__label {
    text-align: center;
    line-height: 1.3;
}
.cp-trade-card__check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #fff;
    color: transparent; /* hides the checkmark when unselected */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cp-trade-card--selected .cp-trade-card__check {
    background: var(--cp-cta);
    border-color: var(--cp-cta);
    color: #fff;
}

/* Multi-trade progress indicator above per-trade screens. */
.cp-trade-progress {
    margin: 0 0 14px;
    padding: 6px 12px;
    display: inline-block;
    background: color-mix(in srgb, var(--cp-brand) 8%, white);
    color: var(--cp-brand);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* -- v1.17.1 - Side-by-side grid layout ---------------------------------
   Opt-in via `.cp-tier-stack--grid` modifier (admin chooses under
   Settings -> Quotes -> Quote Options -> Tier Card Layout). The default
   `.cp-tier-stack` keeps the v1.17.0 vertical full-width layout; this
   modifier lays the cards out side-by-side across the desktop row.

   Column count adapts to the number of options: the template sets
   `--cp-tier-count` to `tiers.length` on the container, and the grid
   uses one equal column per card. So 3 offerings fill the row as
   thirds (no dead quarter), 4 as quarters, etc. Falls back to 4 if the
   variable is somehow unset.

   Breakpoint: only kicks in at >=1024px. Below that the grid falls
   back to the default stack - many cards across at tablet widths would
   give each card too little room to render the bullets and price.
   ------------------------------------------------------------------- */

@media (min-width: 1024px) {
    .cp-tier-stack--grid {
        display: grid;
        grid-template-columns: repeat(var(--cp-tier-count, 4), 1fr);
        gap: 16px;
        align-items: stretch;
    }

    /* Each card becomes a vertical-content column. Cards stretch to the
       row's height so all four end with their CTAs aligned regardless
       of bullet count. */
    .cp-tier-stack--grid .cp-tier-card {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .cp-tier-stack--grid .cp-tier-card__inner {
        flex-direction: column;
        flex: 1;
    }

    /* Header slot - compact label area at the top of each card. Drop
       the side border (used in stack mode for the column divider) in
       favor of a bottom border that anchors the header against the
       body below. Logo is centered horizontally now that the size meta
       is hidden (v1.17.3 Option B). */
    .cp-tier-stack--grid .cp-tier-card__media {
        width: 100%;
        height: auto;
        padding: 18px 18px 14px;
        border-right: none;
        border-bottom: 1px solid #f3f4f6;
        justify-content: center;
        align-items: center;
        background: transparent !important;
    }

    /* v1.17.3 - Brand logo restored in grid header. Capped at 120x36 so a
       horizontal wordmark (Trane, Carrier) renders cleanly in the ~272px
       column without dominating the card. Below the logo we surface the
       size label via media-meta - when a logo is present mediaMeta() drops
       the brand prefix and returns just "3 Ton - Gas", so the two lines
       don't duplicate each other. */
    .cp-tier-stack--grid .cp-tier-card__brand-logo {
        display: block;
        width: 120px;
        height: 36px;
        object-fit: contain;
    }

    /* Media-meta hidden in grid mode. The size label is identical across
       all 4 tiers (all sized for the same home), so repeating "3 TON - GAS"
       four times is visual noise. The Install Package banner above the
       tier row already labels what the customer is shopping for. The
       logo alone reads as a cleaner premium pricing header. */
    .cp-tier-stack--grid .cp-tier-card__media-meta {
        display: none;
    }

    /* When a logo is present, hide the body's brand line (it already
       surfaces above via the logo + size caps). Uses :has() - supported
       in Safari 15.4+, Chrome 105+, Firefox 121+. Older browsers fall
       back to showing both, which is harmless duplication, not broken. */
    .cp-tier-stack--grid .cp-tier-card:has(.cp-tier-card__brand-logo) .cp-tier-card__brand {
        display: none;
    }

    /* Body tightens to fit the narrower column. */
    .cp-tier-stack--grid .cp-tier-card__body {
        flex: 1;
        padding: 14px 18px 16px;
    }

    .cp-tier-stack--grid .cp-tier-card__brand {
        margin-bottom: 4px;
        color: var(--cp-text-subtle);
    }

    .cp-tier-stack--grid .cp-tier-card__name {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .cp-tier-stack--grid .cp-tier-card__desc {
        font-size: 15px;
        margin-bottom: 10px;
        line-height: 1.45;
    }

    .cp-tier-stack--grid .cp-tier-card__features {
        font-size: 15px;
        line-height: 1.5;
    }

    /* Aside becomes the card's footer: price stacks above CTA, both
       full-width, with a subtle divider above. */
    .cp-tier-stack--grid .cp-tier-card__aside {
        flex-direction: column;
        width: 100%;
        padding: 14px 18px 18px;
        border-left: none;
        border-top: 1px solid #f3f4f6;
        gap: 8px;
        align-items: stretch;
    }

    .cp-tier-stack--grid .cp-tier-card__price {
        font-size: 26px;
        text-align: left;
        line-height: 1.1;
    }

    .cp-tier-stack--grid .cp-tier-card__price-prefix {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: var(--cp-text-muted);
        margin-bottom: 2px;
        text-transform: none;
        letter-spacing: 0;
    }

    .cp-tier-stack--grid .cp-tier-card__trust {
        font-size: 12px;
        margin: 4px 0 0;
        /* Full-width centered (drop the 180px side-column cap) so it lines up
           with the centered CTA subtext above it instead of hugging the left. */
        max-width: none;
        text-align: center;
    }

    .cp-tier-stack--grid .cp-tier-card__cta {
        width: 100%;
        padding: 12px 16px;
        font-size: 15px;
    }

    .cp-tier-stack--grid .cp-tier-card__cta-subtext {
        font-size: 12px;
        text-align: center;
    }

    /* "Most Popular" badge floats above the featured card so the brand
       outline reads as a "lifted" tier. Negative offset pulls the badge
       above the card's top edge; the cards have position:relative
       already (base .cp-tier-card rule). */
    .cp-tier-stack--grid .cp-tier-card__badge {
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 14px;
        border-radius: 999px;
        white-space: nowrap;
        z-index: 1;
    }

    /* Push the featured card down slightly to make room for the floating
       badge above it; without this the badge would visually collide with
       the row above (banner, heading). */
    .cp-tier-stack--grid .cp-tier-card--featured {
        margin-top: 14px;
    }
}

/* -- Confirmation: "what happens next" timeline ----------------------------- */
.cp-next-steps {
    max-width: 820px;
    margin: 0 auto 28px;
    padding: 0 16px;
}

.cp-next-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 14px;
}

.cp-next-steps__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 18px 14px;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    background: #fff;
}

.cp-next-steps__num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--cp-brand);
}

.cp-next-steps__text {
    font-size: 15px;
    line-height: 1.4;
    color: #374151;
}

@media (max-width: 640px) {
    .cp-next-steps__list {
        flex-direction: column;
        gap: 10px;
    }
    .cp-next-steps__item {
        flex-direction: row;
        text-align: left;
        gap: 14px;
        padding: 14px 16px;
    }
}

/* -- Thank-you resources (post-submit video + helpful articles) ------------- */
/* Fills the full wizard container width; the flex grid below wraps to a
   stacked layout on narrow screens. */
.cp-thankyou-content {
    max-width: none;
    margin: 0 auto;
    padding: 0 16px;
}

.cp-thankyou-panel {
    background: #f9fafb;
    border: 1px solid #eef0f2;
    border-radius: 16px;
    padding: 24px;
}

/* Video + articles sit side-by-side on desktop, stack on mobile. */
.cp-thankyou-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
    justify-content: center;
}

/* Equal flex-basis on both columns => a true 50/50 split on desktop. The
   340px basis is wide enough that two side-by-side exceed a phone viewport,
   so they wrap to a stacked layout on mobile. */
.cp-thankyou-media {
    flex: 1 1 340px;
    min-width: 0;
}

.cp-thankyou-blogs {
    flex: 1 1 340px;
    min-width: 0;
}

.cp-thankyou-media__title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cp-brand);
}

/* Responsive 16:9 video frame. */
.cp-thankyou-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.cp-thankyou-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cp-thankyou-blogs__heading {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cp-brand);
}

.cp-thankyou-blogs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-thankyou-blogs__list li {
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cp-thankyou-blogs__list li:hover {
    border-color: var(--cp-brand);
    background: color-mix(in srgb, var(--cp-brand) 4%, white);
}

.cp-thankyou-blogs__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cp-brand);
    text-decoration: none;
}

.cp-thankyou-blogs__chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--cp-brand);
    opacity: 0.45;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cp-thankyou-blogs__list li:hover .cp-thankyou-blogs__chevron {
    opacity: 1;
    transform: translateX(2px);
}