/*
 * Domovita - shared report cards (locked / teaser state).
 * Added 2026-11-01 (paid data cards). Markup: tmpl/_shared/report_card.php, drawn only by
 * ReportCardRenderer, which also loads this file (registerAndUseStyle, versioned - PATTERN-003).
 *
 * The unlocked cards keep the buyer report's own dv-br-* styles (domovita-buyerreport.css);
 * this file styles the LOCKED card, which also appears on sold-price and area pages where that
 * bundle is not loaded - so every rule here is self-contained and sets its own colours.
 *
 * Colours are explicit on purpose: the site has no dark theme, and several templates put a
 * dark navy body behind content. A card that inherited colour would go dark-on-dark there
 * (memory: dark-on-dark contrast pattern). Headings and the button are ID-anchored +
 * !important where Helix's #sp-main-body rules would otherwise win (Helix CSS specificity).
 */

.dv-rc-card {
    background: #fff;
    color: #15243a;
    border: 1px solid #e3e6ec;
    border-radius: 12px;
    padding: 1.25rem;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    box-sizing: border-box;
    min-width: 0;
}
.dv-rc-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
h3.dv-rc-title,
#sp-main-body h3.dv-rc-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #15243a !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.dv-rc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #f4f6fa;
    border: 1px solid #e3e6ec;
    color: #4f5a6d;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 0 0 auto;
}

/* The one free headline. */
.dv-rc-headline {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    padding: 0.6rem 0.75rem;
    background: #fbf4ef;
    border-radius: 8px;
}
.dv-rc-headline-label {
    font-size: 0.85rem;
    color: #4f5a6d;
    line-height: 1.35;
}
.dv-rc-headline-value {
    font-size: 1.15rem;
    font-weight: 600;
    color: #a44a1e;
    line-height: 1.2;
}

/* Placeholder rows: the full card's own labels, values absent. */
.dv-rc-rows {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.dv-rc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.dv-rc-row dt {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 400;
    color: #4f5a6d;
    min-width: 0;
}
.dv-rc-row dd {
    margin: 0;
    flex: 0 0 auto;
}
/* A dashed "in the full report" chip, not a grey skeleton bar - a skeleton reads as
   "still loading" (2026-09-23 UX audit, XC21). */
.dv-rc-placeholder {
    display: inline-block;
    padding: 1px 10px;
    border: 1px dashed #b4bfcf;
    border-radius: 999px;
    background: #f7f9fc;
    font-size: 0.72rem;
    line-height: 1.5;
    color: #4f5a6d;
    white-space: nowrap;
}
.dv-rc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Unlock action: a GET form button, or an in-page link. */
.dv-rc-action { margin: 0; }
.dv-rc-unlock-form { margin: 0; }
.dv-rc-card .dv-rc-unlock,
#sp-main-body .dv-rc-card .dv-rc-unlock,
#sp-main-body .dv-rc-card a.dv-rc-unlock:hover {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #a44a1e;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.dv-rc-card .dv-rc-unlock:hover,
.dv-rc-card .dv-rc-unlock:focus-visible { background: #8a3d17; }
.dv-rc-card .dv-rc-unlock:focus-visible { outline: 3px solid #f5b041; outline-offset: 2px; }

/* Source credit (OGL attribution / Ofcom logo + statement). */
.dv-rc-source { margin: 0; }
.dv-rc-card .dv-rc-credit {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #4f5a6d;
}

@media (max-width: 480px) {
    .dv-rc-card { padding: 1rem; }
    .dv-rc-card .dv-rc-unlock { width: 100%; justify-content: center; }
}

@media print {
    .dv-rc-action { display: none; }
}

/* ------------------------------------------------------------------
 * Paid teaser page + buy box (1.1.0, 2026-11-01, Task 7). Markup:
 * tmpl/buyerreport/_locked_paid.php and tmpl/_shared/paid_report_checkout.php.
 * Same rules as above: self-contained, explicit colours.
 * ------------------------------------------------------------------ */
.dv-pt-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 1rem 0 0;
    font-size: 1.05rem;
}
.dv-pt-body { padding-top: 1.5rem; padding-bottom: 2rem; }
.dv-pt-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.dv-pt-grid .dv-rc-card { margin: 0; }
.dv-pt-nodata {
    background: #f4f6fa;
    border: 1px solid #e3e6ec;
    border-radius: 12px;
    color: #15243a;
    padding: 1rem 1.25rem;
}
.dv-pt-buy { margin: 1.5rem 0; scroll-margin-top: 90px; }
.dv-pr-checkout {
    background: #fff;
    color: #15243a;
    border: 2px solid #2f6fcc;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1rem;
    /* Full width of the card grid above it (2026-11-02, Anthony: "can we make it so?").
       Was max-width: 720px, which left the buy box narrower than the cards. */
    max-width: none;
    box-sizing: border-box;
}
h2.dv-pr-checkout-title,
#sp-main-body h2.dv-pr-checkout-title {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
    color: #15243a !important;
}
h3.dv-pr-checkout-sub,
#sp-main-body h3.dv-pr-checkout-sub {
    margin: 1rem 0 0.35rem;
    font-size: 1rem;
    color: #15243a !important;
}
.dv-pr-checkout-price { margin: 0; font-size: 1.4rem; }
.dv-pr-checkout-oneoff,
.dv-pr-checkout-cancel-info,
.dv-pr-checkout-trader,
.dv-pr-checkout-reviewed { color: #4f5a6d; font-size: 0.9rem; }
.dv-pr-checkout-sections { margin: 0 0 0.75rem; padding-left: 1.2rem; columns: 2; column-gap: 1.5rem; }
.dv-pr-checkout-form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.dv-pr-checkout-form .dv-br-form-field { display: flex; flex-direction: column; gap: 0.3rem; }
.dv-pr-checkout-form .dv-br-form-input { max-width: 420px; }
.dv-pr-checkout-consent { font-weight: 600; }
.dv-pr-checkout-submit { align-self: flex-start; }
.dv-pt-signup {
    background: #f8f9fb;
    border: 1px solid #e3e6ec;
    border-radius: 12px;
    color: #15243a;
    padding: 1.1rem 1.25rem;
    margin: 1.5rem 0;
    max-width: 720px;
}
h2.dv-pt-signup-title,
#sp-main-body h2.dv-pt-signup-title { margin: 0 0 0.35rem; font-size: 1.05rem; color: #15243a !important; }
.dv-pt-signup-sub { color: #4f5a6d; font-size: 0.9rem; margin: 0 0 0.75rem; }
.dv-pt-signup-form { display: flex; flex-direction: column; gap: 0.6rem; }
.dv-pt-signup-form .dv-br-form-field { display: flex; flex-direction: column; gap: 0.3rem; }
.dv-pt-signup-form .dv-br-form-input { max-width: 420px; }
/* Helix's #sp-main-body link colour beats the button's own; anchor the label colour. */
a.dv-pt-summary-cta,
#sp-main-body a.dv-pt-summary-cta,
#sp-main-body a.dv-pt-summary-cta:hover,
#sp-main-body a.dv-pt-summary-cta:focus { color: #fff !important; text-decoration: none; }
.dv-pt-signup-form button,
#sp-main-body .dv-pt-signup-form button {
    align-self: flex-start;
    background: #fff;
    color: #15243a !important;
    border: 1.5px solid #15243a;
    border-radius: 8px;
    padding: 0.55rem 1.1rem;
    font-weight: 600;
    cursor: pointer;
}
#sp-main-body .dv-pt-signup-form button:hover { background: #15243a; color: #fff !important; }
@media (max-width: 960px) {
    .dv-pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .dv-pt-grid { grid-template-columns: minmax(0, 1fr); }
    .dv-pr-checkout-sections { columns: 1; }
    .dv-pt-summary-cta { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------------
 * Sold-price "what's in the full report" panel (1.2.0-1.3.0, 2026-11-02, Task 8; compact
 * panel per Anthony's option 2 in fix round 1). Markup: tmpl/_shared/datacard_teasers.php, on
 * cohort sold-price pages only. Those pages have dark and light bands, so the panel sets its
 * own background and colours. Section names flow into columns by the container's width.
 * ------------------------------------------------------------------ */
.dv-sold-teaser {
    background: #f8f9fb;
    color: #15243a;
    border: 1px solid #e3e6ec;
    border-radius: 14px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    box-sizing: border-box;
}
h2.dv-sold-teaser-title,
#sp-main-body h2.dv-sold-teaser-title {
    margin: 0 0 0.35rem;
    font-size: 1.3rem;
    line-height: 1.3;
    color: #15243a !important;
}
h3.dv-sold-teaser-subtitle,
#sp-main-body h3.dv-sold-teaser-subtitle {
    margin: 0.9rem 0 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4f5a6d !important;
}
.dv-sold-teaser-lead,
.dv-sold-teaser-sample,
.dv-sold-teaser-note { margin: 0 0 0.6rem; color: #4f5a6d; font-size: 0.95rem; }
.dv-sold-teaser-sample { font-size: 0.85rem; }
.dv-sold-teaser-facts {
    list-style: none;
    margin: 0.75rem 0 0.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.dv-sold-teaser-fact {
    background: #fdf3ec;
    border: 1px solid #f1d9c8;
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    color: #15243a;
}
.dv-sold-teaser-fact-value { color: #8a3d17; margin-left: 0.25rem; }
.dv-sold-teaser-sections {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    columns: 3 12rem;
    column-gap: 1.25rem;
}
.dv-sold-teaser-section {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0;
    font-size: 0.92rem;
    color: #15243a;
    break-inside: avoid;
}
.dv-sold-teaser-lock { flex: 0 0 auto; color: #8a94a6; }
.dv-sold-teaser-credits { margin: 0.6rem 0 0; color: #4f5a6d; font-size: 0.75rem; line-height: 1.45; }
.dv-sold-teaser-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 0 0 0.6rem;
}
.dv-sold-teaser-field { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; }
.dv-sold-teaser-label { font-size: 0.875rem; font-weight: 600; color: #15243a; }
.dv-sold-teaser-input {
    width: 11rem;
    max-width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid #8a94a6;
    border-radius: 8px;
    background: #fff;
    color: #15243a;
    font-size: 1rem;
    text-transform: uppercase;
    box-sizing: border-box;
}
.dv-sold-teaser-input:focus-visible { outline: 3px solid #f5b041; outline-offset: 1px; }
.dv-sold-teaser-submit,
#sp-main-body .dv-sold-teaser-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #a44a1e;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
.dv-sold-teaser-submit .dv-sold-teaser-lock { color: #fff; }
.dv-sold-teaser-submit:hover,
.dv-sold-teaser-submit:focus-visible { background: #8a3d17; }
.dv-sold-teaser-submit:focus-visible { outline: 3px solid #f5b041; outline-offset: 2px; }
@media (max-width: 480px) {
    .dv-sold-teaser { padding: 1rem; }
    .dv-sold-teaser-sections { columns: 2 9rem; }
    .dv-sold-teaser-field, .dv-sold-teaser-input { width: 100%; }
    .dv-sold-teaser-submit { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------
 * Area pages: locked cards + postcode picker (1.4.0-1.4.1, 2026-11-02, Task 9). Markup:
 * tmpl/_shared/area_teasers.php and tmpl/_shared/area_postcode_picker.php, on the area guide
 * and the emailed area report. The cards reuse .dv-pt-grid; the picker reuses the sold-price
 * panel's form, input and button rules above. Self-contained colours, as everywhere here.
 * ------------------------------------------------------------------ */
.dv-area-teaser {
    background: #f8f9fb;
    color: #15243a;
    border: 1px solid #e3e6ec;
    border-radius: 14px;
    padding: 1.25rem;
    margin: 2rem 0;
    box-sizing: border-box;
}
h2.dv-area-teaser-title,
#sp-main-body h2.dv-area-teaser-title {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
    line-height: 1.3;
    color: #15243a !important;
}
.dv-area-teaser-lead,
.dv-area-teaser-sample { margin: 0 0 0.75rem; color: #4f5a6d; font-size: 0.95rem; }
.dv-area-teaser-sample { font-size: 0.85rem; }
a.dv-area-teaser-jump,
#sp-main-body a.dv-area-teaser-jump { color: #a44a1e !important; font-weight: 600; text-decoration: underline; white-space: nowrap; }
/* Columns by the CONTAINER's width, not the viewport's: the emailed area report sits in a
 * ~740px column where .dv-pt-grid's three columns broke headings mid-word. */
.dv-pt-grid.dv-area-teaser-grid { margin: 1rem 0 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
@media (max-width: 640px) {
    .dv-pt-grid.dv-area-teaser-grid { grid-template-columns: minmax(0, 1fr); }
}
.dv-area-picker {
    background: #fff;
    border: 2px solid #a44a1e;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    max-width: 720px;
    scroll-margin-top: 90px;
    box-sizing: border-box;
}
h3.dv-area-picker-title,
#sp-main-body h3.dv-area-picker-title {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    line-height: 1.35;
    color: #15243a !important;
}
.dv-area-picker-covers { margin: 0 0 0.75rem; color: #4f5a6d; font-size: 0.9rem; }
.dv-area-picker-form { margin-bottom: 0; }
.dv-area-picker-error {
    flex: 1 0 100%;
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: #fdecea;
    border: 1px solid #f1b5ad;
    border-left: 4px solid #b3261e;
    border-radius: 6px;
    color: #8c1d18;
    font-size: 0.9rem;
    font-weight: 600;
}
.dv-area-picker-error[hidden] { display: none; }
.dv-area-picker .dv-sold-teaser-input[aria-invalid="true"] { border-color: #b3261e; }
.dv-area-picker .dv-sold-teaser-note { margin: 0.6rem 0 0; }
/* 1.4.3 (2026-11-02, Anthony: "more obvious to pay to unlock"): charging on = the block leads
 * with the price, an accent band, the picker above the cards, and a last button after them. */
.dv-area-teaser--paid { background: #fff8f3; border: 2px solid #a44a1e; }
.dv-area-teaser--paid h2.dv-area-teaser-title,
#sp-main-body .dv-area-teaser--paid h2.dv-area-teaser-title { font-size: 1.5rem; }
.dv-area-teaser--paid .dv-area-teaser-lead { font-size: 1rem; color: #15243a; }
.dv-area-teaser .dv-area-picker { margin: 0.25rem 0 1rem; }
.dv-area-teaser-end { margin: 0.5rem 0 0; text-align: center; }
a.dv-area-teaser-cta,
#sp-main-body a.dv-area-teaser-cta { display: inline-block; background: #a44a1e; color: #fff !important; font-weight: 600; padding: 0.7rem 1.4rem; border-radius: 8px; text-decoration: none; }
a.dv-area-teaser-cta:hover,
#sp-main-body a.dv-area-teaser-cta:hover { background: #8a3d18; }
@media (max-width: 480px) {
    .dv-area-teaser { padding: 1rem; }
    .dv-area-picker { padding: 0.9rem; }
    .dv-area-picker .dv-sold-teaser-field,
    .dv-area-picker .dv-sold-teaser-input { width: 100%; }
    .dv-area-picker .dv-sold-teaser-submit { width: 100%; justify-content: center; }
}
@media print {
    /* The emailed area report prints to PDF: a form and locked placeholders mean nothing on paper. */
    .dv-area-teaser { display: none; }
}

/* Paid report marked refunded (spec "Refunds"): moved out of an inline <style> in tmpl/buyerreport/report.php (CSS 1.4.2). */
.dv-br-refunded { background: #fff7e6; border: 1px solid #f0c36d; border-radius: 8px; color: #5c3d00; padding: .75rem 1rem; margin: 1rem 0 0; }