/**
 * com_scprovenlocal front-end styles.
 *
 * Deliberately template-agnostic: layout and spacing only, with colour pulled
 * from a small set of custom properties a site template can override. The one
 * thing that is never left to chance is the verified/declared distinction -
 * that difference carries the meaning of the whole directory, so it is encoded
 * with an icon and a text label as well as colour.
 */

.com-scprovenlocal {
    --scpl-gap: 1rem;
    --scpl-radius: 8px;
    --scpl-border: #e0e0e0;
    --scpl-muted: #666;
    --scpl-verified: #1a7f37;
    --scpl-verified-bg: #e6f4ea;
    --scpl-declared: #6a6a6a;
    --scpl-declared-bg: #f2f2f2;
    --scpl-star: #f5a623;
    --scpl-featured: #0b6bcb;
    /* The colour a chosen thing is drawn in. Every selected-state rule was
       written against --scpl-accent before it existed, so all of them fell
       through to a muted fallback and read as barely-selected. */
    --scpl-accent: #0b6bcb;
    --scpl-accent-soft: #e7f0fb;
    --scpl-page-end: 2.5rem;

    /* Every view ends with something that reads as an edge - a button row, a
       card, a list - and templates vary in whether they leave any room after
       the component's output. Cassiopeia does not, so "Submit for Review" sits
       hard against the foot of the window with nothing beneath it, which reads
       as a page that has been cut off. Space it here rather than on each view,
       so all six end the same way, and expose it as a custom property so a
       template that already provides the room can set it to 0. */
    padding-block-end: var(--scpl-page-end);
}

/* ---------- shared ---------- */

.com-scprovenlocal .scpl-empty {
    color: var(--scpl-muted);
    padding: 1rem 0;
}

.com-scprovenlocal .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- toolbar ---------- */

.scpl-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.scpl-toolbar .scpl-search {
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

.scpl-toolbar .scpl-sort {
    padding: 0.5rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

/* Standalone, not scoped to the toolbar: the same class is used by the
   submission call-to-action and the form action buttons. */
.scpl-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}

.scpl-btn:hover,
.scpl-btn:focus-visible {
    border-color: var(--scpl-featured);
    color: var(--scpl-featured);
}

/* ---------- listing cards ---------- */

.scpl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--scpl-gap);
}

.scpl-card {
    display: flex;
    gap: var(--scpl-gap);
    padding: 1rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

.scpl-card.is-featured {
    border-left: 4px solid var(--scpl-featured);
}

.scpl-card-media {
    flex: 0 0 96px;
}

.scpl-card-media img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--scpl-radius);
}

.scpl-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.scpl-card-title {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    line-height: 1.3;
}

.scpl-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--scpl-muted);
}

.scpl-card-desc {
    margin: 0.5rem 0 0;
    color: var(--scpl-muted);
}

/* ---------- ratings ---------- */

/* Two identical rows of stars, the gold one over the grey and clipped to a
   percentage, so 3.5 renders as three and a half rather than being rounded up
   to four. No half-star glyph (fonts disagree about them) and no image. */
.scpl-stars {
    position: relative;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
}

.scpl-stars-base {
    color: var(--scpl-border);
}

.scpl-stars-fill {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    overflow: hidden;
    color: var(--scpl-star);
}

/* Kept for the rating widget on the review form, which still draws whole
   stars one at a time. */
.scpl-star {
    color: var(--scpl-border);
}

.scpl-star.is-on {
    color: var(--scpl-star);
}

.scpl-rating-num {
    font-weight: 600;
    color: inherit;
}

/* ---------- verified vs declared ---------- */

.scpl-card-areas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0;
    font-size: 0.85rem;
}

.scpl-areas-label {
    color: var(--scpl-muted);
}

.scpl-area-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    border: 1px solid transparent;
}

.scpl-area-badge.is-verified {
    background: var(--scpl-verified-bg);
    color: var(--scpl-verified);
    border-color: var(--scpl-verified);
    font-weight: 600;
}

/* Declared coverage is deliberately quieter and outlined rather than filled,
   so it never reads as an endorsement at a glance. */
.scpl-area-badge.is-declared {
    background: var(--scpl-declared-bg);
    color: var(--scpl-declared);
    border-color: var(--scpl-border);
    border-style: dashed;
}

.scpl-check {
    font-weight: 700;
}

.scpl-area-more {
    color: var(--scpl-muted);
    font-size: 0.85rem;
}

/* ---------- business detail ---------- */

.scpl-business-header {
    margin-bottom: 1.5rem;
}

.scpl-business-title {
    margin: 0 0 0.5rem;
}

.scpl-business-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--scpl-muted);
}

.scpl-business-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.scpl-cat-chip {
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--scpl-border);
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
}

.scpl-business-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.scpl-coverage {
    padding: 1rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
    margin-bottom: 1.5rem;
}

.scpl-coverage h2 {
    margin-top: 0;
}

.scpl-coverage-group + .scpl-coverage-group {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--scpl-border);
}

.scpl-coverage-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.scpl-coverage-group.is-verified .scpl-coverage-label {
    color: var(--scpl-verified);
}

.scpl-coverage-hint {
    margin: 0 0 0.6rem;
    font-size: 0.875rem;
    color: var(--scpl-muted);
}

.scpl-coverage-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.scpl-coverage-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.scpl-coverage-count {
    font-size: 0.8rem;
    color: var(--scpl-muted);
}

.scpl-contact-card {
    padding: 1rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

.scpl-contact-card h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.scpl-contact-list dt {
    font-weight: 600;
    margin-top: 0.75rem;
}

.scpl-contact-list dd {
    margin: 0.15rem 0 0;
    word-break: break-word;
}

/* ---------- reviews ---------- */

.scpl-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.scpl-review {
    padding: 1rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

.scpl-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.scpl-review-title {
    margin: 0;
    font-size: 1rem;
}

.scpl-review-byline {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.85rem;
    color: var(--scpl-muted);
}

.scpl-review-text {
    margin: 0;
}

.scpl-review-response {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-left: 3px solid var(--scpl-border);
    background: var(--scpl-declared-bg);
    font-size: 0.925rem;
}

.scpl-review-response p {
    margin: 0.25rem 0 0;
}

/* ---------- areas index ---------- */

.scpl-area-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--scpl-gap);
}

.scpl-area-card-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
    text-decoration: none;
    height: 100%;
}

.scpl-area-name {
    font-size: 1.1rem;
    font-weight: 600;
}

.scpl-area-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--scpl-muted);
}

.scpl-area-verified {
    color: var(--scpl-verified);
    font-weight: 600;
}

/* ---------- area landing page ---------- */

.scpl-area-section {
    margin-bottom: 2rem;
}

.scpl-section-heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.scpl-area-section.is-verified .scpl-section-heading {
    color: var(--scpl-verified);
}

.scpl-section-hint {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--scpl-muted);
}

.scpl-area-summary {
    color: var(--scpl-muted);
}

.scpl-back {
    margin-top: 2rem;
}

.scpl-pagination {
    margin-top: 1.5rem;
}

/* ---------- responsive ---------- */

@media (max-width: 767px) {
    .scpl-business-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .scpl-card {
        flex-direction: column;
    }

    .scpl-card-media,
    .scpl-card-media img {
        width: 100%;
        flex-basis: auto;
        height: auto;
        max-height: 180px;
    }
}

/* ---------- submission form ---------- */

.scpl-submit-intro {
    color: var(--scpl-muted);
    max-width: 55ch;
}

.scpl-notice {
    padding: 1rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
    background: var(--scpl-declared-bg);
}

.scpl-notice p:last-child {
    margin-bottom: 0;
}

.scpl-form {
    max-width: 46rem;
}

.scpl-fieldset {
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
    padding: 1rem 1.25rem 1.25rem;
    margin: 0 0 1.25rem;
}

.scpl-fieldset legend {
    padding: 0 0.5rem;
    font-weight: 600;
    width: auto;
    float: none;
}

.scpl-field {
    margin-bottom: 1rem;
}

.scpl-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.scpl-field input[type="text"],
.scpl-field input[type="email"],
.scpl-field input[type="url"],
.scpl-field input[type="tel"],
.scpl-field textarea,
.scpl-field select {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

.scpl-field select[multiple] {
    min-height: 7rem;
}

/* Joomla's validator adds this class to failed fields. */
.scpl-field .invalid {
    border-color: #b32d2e;
}

.scpl-field .form-control-feedback,
.scpl-field .field-desc,
.scpl-field small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--scpl-muted);
}

.scpl-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.scpl-btn-primary {
    background: var(--scpl-featured);
    border-color: var(--scpl-featured);
    color: #fff;
}

.scpl-btn-primary:hover,
.scpl-btn-primary:focus-visible {
    color: #fff;
    filter: brightness(0.92);
}

.scpl-submit-cta {
    margin: 0 0 1rem;
}

/* ---------- review form ---------- */

.scpl-review-cta {
    margin: 0 0 1rem;
}

.scpl-criteria-note {
    margin: -0.25rem 0 1rem;
    font-size: 0.85rem;
    color: var(--scpl-muted);
}

/* Multi-criteria mode replaces the overall score with a hidden field; keep it
   out of the flow so it never leaves a gap in the form. */
.scpl-field input[type="hidden"] {
    display: none;
}

/* Explains why the review button is absent, rather than leaving a silent gap. */
.scpl-review-blocked {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px dashed var(--scpl-border);
    border-radius: var(--scpl-radius);
    color: var(--scpl-muted);
    font-size: 0.925rem;
}

/* ---------- submission form: area badges and Places lookup ---------- */

.scpl-field-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.scpl-field-hint {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--scpl-muted);
}

/* Areas are picked as badges so the control mirrors how coverage is shown
   elsewhere on the site. The checkbox drives it and stays focusable. */
.scpl-area-picker {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.scpl-area-check {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.scpl-area-chip {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border: 1px dashed var(--scpl-border);
    border-radius: 999px;
    background: var(--scpl-declared-bg);
    color: var(--scpl-declared);
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.scpl-area-chip:hover {
    border-color: var(--scpl-featured);
    color: var(--scpl-featured);
}

.scpl-area-check:checked + .scpl-area-chip {
    background: var(--scpl-verified-bg);
    border-color: var(--scpl-verified);
    border-style: solid;
    color: var(--scpl-verified);
    font-weight: 600;
}

/* Keyboard users must be able to see which chip has focus. */
.scpl-area-check:focus-visible + .scpl-area-chip {
    outline: 2px solid var(--scpl-featured);
    outline-offset: 2px;
}

/* An area the visitor typed is not on the site yet; mark it as a suggestion. */
.scpl-area-chip.is-new::after {
    content: " +";
    font-weight: 700;
}

.scpl-area-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.scpl-area-add input {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

.scpl-places-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.scpl-places-search input {
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

.scpl-places-status {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    min-height: 1.2rem;
}

.scpl-places-status.is-busy  { color: var(--scpl-muted); }
.scpl-places-status.is-ok    { color: var(--scpl-verified); }
.scpl-places-status.is-warn  { color: #9a6700; }
.scpl-places-status.is-error { color: #b32d2e; }

.scpl-places-results {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.scpl-places-use {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    text-align: left;
    background: transparent;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
    cursor: pointer;
}

.scpl-places-use:hover,
.scpl-places-use:focus-visible {
    border-color: var(--scpl-featured);
}

.scpl-places-name    { font-weight: 600; }
.scpl-places-address { font-size: 0.875rem; color: var(--scpl-muted); }

.scpl-just-filled {
    transition: background-color 0.3s ease;
    background-color: var(--scpl-verified-bg);
}

/* ---------- clearable inputs ---------- */

.scpl-clearable {
    position: relative;
    display: block;
}

.scpl-clearable > input {
    width: 100%;
    padding-right: 2.25rem;
}

.scpl-clear {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    display: none;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--scpl-muted);
    cursor: pointer;
}

.scpl-clearable.has-value .scpl-clear {
    display: block;
}

.scpl-clear:hover,
.scpl-clear:focus-visible {
    background: var(--scpl-declared-bg);
    color: inherit;
}

/* ---------- business name type-ahead ---------- */

.scpl-ac {
    position: relative;
}

.scpl-ac-list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    margin: 0.15rem 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    max-height: 17rem;
    overflow-y: auto;
}

.scpl-ac-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
}

.scpl-ac-item + .scpl-ac-item {
    border-top: 1px solid var(--scpl-border);
}

/* Hover and keyboard highlight share one style, so arrowing through the list
   looks the same as pointing at it. */
.scpl-ac-item:hover,
.scpl-ac-item.is-active {
    background: var(--scpl-verified-bg);
}

.scpl-ac-name    { font-weight: 600; }
.scpl-ac-address { font-size: 0.85rem; color: var(--scpl-muted); }

/* ---------- already-listed notice ---------- */

.scpl-duplicate {
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #f0d48a;
    border-left-width: 4px;
    border-radius: 4px;
    background: #fdf6e3;
    color: #6b5300;
    font-size: 0.95rem;
}

.scpl-duplicate a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- recommendations (credit, not evidence) ---------- */

/* Deliberately quieter than a review and visually unlike the verified badge.
   A recommendation is somebody vouching; only a review moves coverage. If these
   ever start looking like verification, the distinction the directory sells has
   been lost in the stylesheet. */
.com-scprovenlocal .scpl-recommendations {
    margin-block-start: 2rem;
}

.com-scprovenlocal .scpl-recommendations-intro {
    color: var(--scpl-muted);
    margin-block-end: 1rem;
}

.com-scprovenlocal .scpl-recommendation-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--scpl-gap);
}

.com-scprovenlocal .scpl-recommendation {
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
    padding: 0.875rem 1rem;
}

.com-scprovenlocal .scpl-recommendation-who {
    font-weight: 600;
}

.com-scprovenlocal .scpl-recommendation-notes {
    margin: 0.5rem 0 0;
    padding-inline-start: 0.875rem;
    border-inline-start: 3px solid var(--scpl-border);
    color: inherit;
    font-style: normal;
}

.com-scprovenlocal .scpl-recommendation-date {
    color: var(--scpl-muted);
    font-size: 0.875rem;
    margin-block-start: 0.5rem;
}

/* ---------- tabs ---------- */

/* The tab list is hidden in the markup and unhidden by tabs.js, so a visitor
   without JavaScript gets two ordinary stacked sections rather than buttons
   that do nothing. Everything below that depends on the script is therefore
   scoped to .is-ready, which the script adds once it has taken over. */
.com-scprovenlocal .scpl-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--scpl-border);
    margin-block-end: 1.25rem;
}

.com-scprovenlocal .scpl-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--scpl-radius) var(--scpl-radius) 0 0;
    margin-bottom: -1px;
    background: transparent;
    color: var(--scpl-muted);
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.com-scprovenlocal .scpl-tab:hover {
    color: inherit;
}

.com-scprovenlocal .scpl-tab:focus-visible {
    outline: 2px solid var(--scpl-featured);
    outline-offset: -2px;
}

.com-scprovenlocal .scpl-tab[aria-selected="true"] {
    border-color: var(--scpl-border);
    border-bottom-color: transparent;
    background: #fff;
    color: inherit;
}

.com-scprovenlocal .scpl-tab-count {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--scpl-declared-bg);
    color: var(--scpl-declared);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Once the tabs work, the buttons are the headings - so the in-panel heading
   goes to screen readers only rather than being deleted. Without JavaScript
   .is-ready never lands and both headings stay visible, which is what makes the
   no-script rendering read as an ordinary page. */
.com-scprovenlocal .scpl-tabs.is-ready .scpl-panel-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Separate the two stacked sections when the script has not run. */
.com-scprovenlocal .scpl-tabs:not(.is-ready) .scpl-tabpanel + .scpl-tabpanel {
    margin-block-start: 2rem;
}

.com-scprovenlocal .scpl-tabs .scpl-recommendations {
    margin-block-start: 0;
}

/* ---------- directory: filter badges ---------- */

.com-scprovenlocal .scpl-filters {
    margin: 0 0 1.75rem;
    padding: 1rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

.com-scprovenlocal .scpl-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.com-scprovenlocal .scpl-filter-row + .scpl-filter-row {
    margin-block-start: 0.75rem;
    padding-block-start: 0.75rem;
    border-top: 1px solid var(--scpl-border);
}

/* Wide enough for the longest label, and nowrap so none of them break in the
   middle of a phrase. At 4rem "Works for" and "Search" both wrapped onto two
   lines and dragged the whole row out of alignment. */
.com-scprovenlocal .scpl-filter-label {
    flex: 0 0 6.5rem;
    white-space: nowrap;
    color: var(--scpl-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Narrow enough that a label column would leave the chips no room: put the
   label on its own line instead of squeezing both. */
@media (max-width: 640px) {
    .com-scprovenlocal .scpl-filter-label {
        flex: 0 0 100%;
    }
}

.com-scprovenlocal .scpl-filter-set {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.com-scprovenlocal .scpl-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--scpl-border);
    border-radius: 999px;
    font-size: 0.9rem;
    text-decoration: none;
    color: inherit;
}

.com-scprovenlocal .scpl-filter-chip:hover,
.com-scprovenlocal .scpl-filter-chip:focus-visible {
    border-color: var(--scpl-featured);
    color: var(--scpl-featured);
}

.com-scprovenlocal .scpl-filter-chip.is-active {
    background: var(--scpl-featured);
    border-color: var(--scpl-featured);
    color: #fff;
}

.com-scprovenlocal .scpl-filter-count {
    color: var(--scpl-muted);
    font-size: 0.8rem;
}

.com-scprovenlocal .scpl-filter-chip.is-active .scpl-filter-count,
.com-scprovenlocal .scpl-filter-clear {
    color: inherit;
    opacity: 0.85;
}

.com-scprovenlocal .scpl-filter-clear-all {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
}

/* ---------- directory: category sections ---------- */

.com-scprovenlocal .scpl-section + .scpl-section {
    margin-block-start: 2.25rem;
}

.com-scprovenlocal .scpl-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 0.85rem;
    padding-block-end: 0.4rem;
    border-bottom: 2px solid var(--scpl-border);
}

.com-scprovenlocal .scpl-section-title {
    margin: 0;
    font-size: 1.25rem;
}

.com-scprovenlocal .scpl-section-count {
    margin-inline-start: 0.4rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--scpl-declared-bg);
    color: var(--scpl-declared);
    font-size: 0.8rem;
    font-weight: 600;
    vertical-align: middle;
}

.com-scprovenlocal .scpl-section-more {
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ---------- directory: card grid ---------- */

/* auto-fill rather than fixed columns, so the same rule covers phone, tablet
   and desktop without a breakpoint per layout. */
.com-scprovenlocal .scpl-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--scpl-gap);
    align-items: stretch;
}

.com-scprovenlocal .scpl-grid .scpl-card {
    flex-direction: column;
    height: 100%;
}

.com-scprovenlocal .scpl-card-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.4rem 0;
}

.com-scprovenlocal .scpl-cat-tag {
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--scpl-border);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--scpl-muted);
}

/* ---------- directory: submit call to action ---------- */

/* The one thing a visitor can contribute, so it gets its own panel rather than
   sitting above the filters looking like another secondary control. */
.com-scprovenlocal .scpl-submit-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-block-end: 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--scpl-featured);
    border-left-width: 4px;
    border-radius: var(--scpl-radius);
}

.com-scprovenlocal .scpl-submit-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.com-scprovenlocal .scpl-submit-title {
    font-size: 1.02rem;
}

.com-scprovenlocal .scpl-submit-blurb {
    color: var(--scpl-muted);
    font-size: 0.9rem;
}

.com-scprovenlocal .scpl-submit-action {
    white-space: nowrap;
}

/* ---------- directory: search row inside the filter panel ---------- */

.com-scprovenlocal .scpl-filter-search {
    margin: 0;
}

.com-scprovenlocal .scpl-filter-search .scpl-filter-set {
    flex: 1 1 20rem;
    flex-wrap: nowrap;
    gap: 0.4rem;
}

.com-scprovenlocal .scpl-filter-search .scpl-search {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

.com-scprovenlocal .scpl-filter-search .scpl-sort {
    flex: 0 0 auto;
    padding: 0.45rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

@media (max-width: 34rem) {
    .com-scprovenlocal .scpl-filter-search .scpl-filter-set {
        flex-wrap: wrap;
    }

    .com-scprovenlocal .scpl-filter-search .scpl-search {
        flex: 1 1 100%;
    }
}

.com-scprovenlocal .scpl-filter-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.com-scprovenlocal .scpl-filter-foot:empty {
    display: none;
}

.com-scprovenlocal .scpl-live-status {
    margin: 0.75rem 0 0;
    color: var(--scpl-muted);
    font-size: 0.875rem;
}

/* ---------- service area page ---------- */

.com-scprovenlocal .scpl-area-header {
    margin-block-end: 1.5rem;
}

/* Two figures rather than a sentence: the ratio of confirmed to claimed
   coverage is the whole point of an area page, so it should be readable at a
   glance instead of parsed. */
.com-scprovenlocal .scpl-area-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
}

.com-scprovenlocal .scpl-area-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--scpl-border);
    border-radius: 999px;
    color: var(--scpl-muted);
    font-size: 0.9rem;
}

.com-scprovenlocal .scpl-area-stat strong {
    font-size: 1.05rem;
    color: inherit;
}

.com-scprovenlocal .scpl-area-stat.is-verified {
    border-color: var(--scpl-verified);
    background: var(--scpl-verified-bg);
    color: var(--scpl-verified);
}

.com-scprovenlocal .scpl-area-section + .scpl-area-section {
    margin-block-start: 2.25rem;
}

.com-scprovenlocal .scpl-area-section.is-verified .scpl-section-title {
    color: var(--scpl-verified);
}

.com-scprovenlocal .scpl-section-hint {
    margin: -0.4rem 0 0.9rem;
    color: var(--scpl-muted);
    font-size: 0.9rem;
}

.com-scprovenlocal .scpl-back {
    margin-block-start: 2rem;
}

/* ---------- your own review ---------- */

/* Marked so a person can find their own review among the others, and so a
   pending one is never mistaken for something already on show. */
.com-scprovenlocal .scpl-review.is-mine {
    border-left: 3px solid var(--scpl-featured);
    padding-inline-start: 0.85rem;
}

.com-scprovenlocal .scpl-review-mine {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    color: var(--scpl-muted);
}

.com-scprovenlocal .scpl-review-pending {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--scpl-declared-bg);
    color: var(--scpl-declared);
    font-weight: 600;
}

.com-scprovenlocal .scpl-review-need-account {
    margin-block-end: 0.5rem;
    color: var(--scpl-muted);
}

/* ---------- claims: who they work for ---------- */

/* An assertion nobody has checked, exactly like a declared service area.
   Outlined and quiet on purpose: if this ever starts looking like the verified
   badge, the badge stops meaning anything.

   Specialities used to live here too, as a grey line under the title. They do
   not any more - a review can confirm one now, so they get the coverage
   section's card further down the page instead. Muted styling would have been
   actively wrong for something carrying a verified tick. */
.com-scprovenlocal .scpl-markets {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin-block-start: 0.6rem;
    font-size: 0.9rem;
}

.com-scprovenlocal .scpl-markets-label {
    color: var(--scpl-muted);
}

.com-scprovenlocal .scpl-market {
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--scpl-border);
    border-radius: 999px;
    color: var(--scpl-muted);
    border-style: solid;
}

.com-scprovenlocal .scpl-card-markets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.35rem 0;
}

.com-scprovenlocal .scpl-card-market {
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--scpl-border);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--scpl-muted);
}

/* ============================================================
   Business page: spacing and rhythm
   ============================================================
   The page had no horizontal breathing room, headings sat hard against the
   content above them, and sections ran into one another - so everything read
   as one undifferentiated column. These rules are all spacing and scale; no
   colours change, so a template's own palette still shows through.
   ============================================================ */

.com-scprovenlocal {
    /* One scale, used everywhere below, so the rhythm stays consistent when
       any single value is tuned. */
    --scpl-space-1: 0.5rem;
    --scpl-space-2: 1rem;
    --scpl-space-3: 1.5rem;
    --scpl-space-4: 2.25rem;
    --scpl-space-5: 3rem;

    padding-inline: var(--scpl-space-2);
}

@media (min-width: 48rem) {
    .com-scprovenlocal {
        padding-inline: 0;
    }
}

/* ---------- header ---------- */

.com-scprovenlocal .scpl-business-header {
    margin-block-end: var(--scpl-space-4);
    padding-block-end: var(--scpl-space-3);
    border-bottom: 1px solid var(--scpl-border);
}

.com-scprovenlocal .scpl-business-title {
    /* Was competing with the browser default and the template's h1 at once. */
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 var(--scpl-space-2);
}

.com-scprovenlocal .scpl-business-meta {
    gap: var(--scpl-space-1) 0.75rem;
    font-size: 1rem;
}

.com-scprovenlocal .scpl-business-cats {
    margin-block-start: var(--scpl-space-2);
}

/* ---------- two-column body ---------- */

.com-scprovenlocal .scpl-business-grid {
    gap: var(--scpl-space-4);
}

/* Sections were touching. This is the single biggest reason the page read as
   one long block rather than as distinct things. */
.com-scprovenlocal .scpl-business-main > section + section,
.com-scprovenlocal .scpl-business-main > .scpl-tabs {
    margin-block-start: var(--scpl-space-5);
}

.com-scprovenlocal .scpl-business-main h2 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 0 0 var(--scpl-space-2);
}

.com-scprovenlocal .scpl-business-desc {
    line-height: 1.65;
}

.com-scprovenlocal .scpl-coverage {
    padding: var(--scpl-space-3);
}

.com-scprovenlocal .scpl-coverage-group + .scpl-coverage-group {
    margin-block-start: var(--scpl-space-3);
    padding-block-start: var(--scpl-space-3);
}

/* ---------- contact card ---------- */

.com-scprovenlocal .scpl-contact-card {
    padding: var(--scpl-space-3);
}

/* Follows the reader down a long page of reviews, where the phone number is
   the thing they are ultimately looking for. */
@media (min-width: 62rem) {
    .com-scprovenlocal .scpl-business-side {
        position: sticky;
        top: var(--scpl-space-2);
    }
}

.com-scprovenlocal .scpl-contact-list {
    margin: 0;
}

.com-scprovenlocal .scpl-contact-list dd {
    margin: 0 0 var(--scpl-space-2);
    /* A long URL was pushing the card wider than its column. */
    overflow-wrap: anywhere;
}

.com-scprovenlocal .scpl-contact-list dd:last-child {
    margin-block-end: 0;
}

/* ---------- reviews ---------- */

.com-scprovenlocal .scpl-review-list {
    display: grid;
    gap: var(--scpl-space-2);
    margin: var(--scpl-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.com-scprovenlocal .scpl-review {
    padding: var(--scpl-space-3);
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

.com-scprovenlocal .scpl-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--scpl-space-1);
}

.com-scprovenlocal .scpl-review-title {
    margin: 0;
    font-size: 1.05rem;
}

.com-scprovenlocal .scpl-review-byline {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--scpl-muted);
}

.com-scprovenlocal .scpl-review-text {
    margin: var(--scpl-space-2) 0 0;
    line-height: 1.6;
}

.com-scprovenlocal .scpl-review-response {
    margin-block-start: var(--scpl-space-2);
    padding: var(--scpl-space-2);
    border-left: 3px solid var(--scpl-border);
    background: var(--scpl-declared-bg);
    border-radius: 0 var(--scpl-radius) var(--scpl-radius) 0;
}

.com-scprovenlocal .scpl-review-response p {
    margin: 0.25rem 0 0;
}

.com-scprovenlocal .scpl-review-cta {
    margin: 0 0 var(--scpl-space-2);
}

/* ---------- a verified market ---------- */

.com-scprovenlocal .scpl-market.is-verified,
.com-scprovenlocal .scpl-card-market.is-verified {
    background: var(--scpl-verified-bg);
    border-color: var(--scpl-verified);
    color: var(--scpl-verified);
    font-weight: 600;
}

.com-scprovenlocal .scpl-market {
    border-style: dashed;
}

.com-scprovenlocal .scpl-market.is-verified {
    border-style: solid;
}


/* ---------- specialities as coverage ---------- */

/* The section reuses .scpl-coverage wholesale - same card, same two groups,
   same green tick - because it is making the same claim about a different
   thing, and inventing a second visual language for it would only suggest the
   two mean different things. */

/* Two identical cards stacked read as one long card, so the second gets a
   heading that says which is which and a little more air above it. */
.com-scprovenlocal .scpl-coverage-specialities {
    margin-block-start: var(--scpl-space-4, 1.5rem);
}

/* What a single review confirmed. Quiet, because the review body is the point
   and this is a footnote to it - but present, because it is the evidence behind
   the ticks further up the page. */
.com-scprovenlocal .scpl-review-services {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem;
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
}

.com-scprovenlocal .scpl-review-services-label {
    color: var(--scpl-muted);
}

.com-scprovenlocal .scpl-review-service {
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--scpl-border);
    border-radius: 999px;
    color: var(--scpl-text, inherit);
    background: var(--scpl-surface, transparent);
}

/* ---------- your own recommendation ---------- */

/* Only ever visible to the person credited, so it is a control rather than
   content - quiet, and clearly separate from the recommendation itself. */
.com-scprovenlocal .scpl-recommendation-mine {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--scpl-muted);
}

.com-scprovenlocal .scpl-recommendation-action {
    text-decoration: underline;
}

/* Withdrawn and visible to you alone. Dashed, like every other "this is not
   live" state in here, so it never reads as something the public can see. */
.com-scprovenlocal .scpl-recommendation.is-withdrawn {
    border: 1px dashed var(--scpl-border);
    border-radius: var(--scpl-radius);
    padding: var(--scpl-space-2, 0.75rem);
    opacity: 0.8;
}

.com-scprovenlocal .scpl-recommendation-withdrawn {
    font-style: italic;
}

/* ---------- recommending a business yourself ---------- */

.com-scprovenlocal .scpl-recommend-form {
    margin-block-start: var(--scpl-space-3, 1rem);
    padding: var(--scpl-space-3, 1rem);
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
}

.com-scprovenlocal .scpl-recommend-intro {
    margin: 0 0 0.6rem;
}

.com-scprovenlocal .scpl-recommend-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    color: var(--scpl-muted);
}

.com-scprovenlocal .scpl-recommend-form .scpl-btn {
    margin-block-start: 0.75rem;
}

.com-scprovenlocal .scpl-recommend-need-account {
    margin-block-start: var(--scpl-space-3, 1rem);
    color: var(--scpl-muted);
}

/* ---------- good to know ---------- */

/* Deliberately NOT the coverage card. These are opinions nobody has checked, and
   a third box with a green tick beside the two that ARE checked would quietly
   borrow their authority. Tinted and left-ruled instead: clearly a section,
   clearly a different kind of statement. */
.com-scprovenlocal .scpl-tips {
    margin-block: var(--scpl-space-4, 1.5rem);
    padding: var(--scpl-space-3, 1rem);
    border: 1px solid var(--scpl-border);
    border-left: 4px solid var(--scpl-accent);
    border-radius: var(--scpl-radius);
    background: var(--scpl-tips-bg, rgba(74, 111, 165, 0.05));
}

.com-scprovenlocal .scpl-tips h2 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-block-start: 0;
}

.com-scprovenlocal .scpl-tips-icon {
    font-size: 0.9em;
}

.com-scprovenlocal .scpl-tips-hint {
    margin: 0 0 0.9rem;
    font-size: 0.875rem;
    color: var(--scpl-muted);
}

.com-scprovenlocal .scpl-tips-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.com-scprovenlocal .scpl-tip-text {
    margin: 0;
    line-height: 1.6;
}

.com-scprovenlocal .scpl-tip-who {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--scpl-muted);
}

@media (prefers-color-scheme: dark) {
    .com-scprovenlocal .scpl-tips {
        background: var(--scpl-tips-bg, rgba(120, 160, 220, 0.08));
    }
}

/* ---------- "what did they do for you?" tick boxes ---------- */

/* Joomla renders these as .form-check-inline, which runs them together in one
   tight line with nothing to show where each option ends. They are the one
   question on this form with several answers, so they get room and an outline
   each - close to the badge language the rest of the site already uses. */
.com-scprovenlocal .scpl-field-services .checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.4rem 0 0.6rem;
    padding: 0;
    border: 0;
}

.com-scprovenlocal .scpl-field-services .form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--scpl-border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.com-scprovenlocal .scpl-field-services .form-check:hover {
    border-color: var(--scpl-accent);
    background: var(--scpl-accent-soft);
}

.com-scprovenlocal .scpl-field-services .form-check-input {
    margin: 0;
    flex: 0 0 auto;
}

.com-scprovenlocal .scpl-field-services .form-check label {
    margin: 0;
    cursor: pointer;
}

/* The box itself goes off-screen and the pill carries the state instead.
   Keeping it would have put a blue checkbox on a blue pill the moment the
   selected state got the contrast it needed, and repainting Bootstrap's tick to
   suit means overriding a background-image SVG - fragile, for an affordance the
   fill and the tick below already provide. Off-screen rather than hidden, so it
   stays keyboard-reachable and announced. */
.com-scprovenlocal .scpl-field-services .form-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Ticked options carry the weight, so a filled-in answer is readable at a
   glance rather than needing the boxes inspected one by one. */
.com-scprovenlocal .scpl-field-services .form-check:has(:checked) {
    border-color: var(--scpl-accent);
    background: var(--scpl-accent);
}

.com-scprovenlocal .scpl-field-services .form-check:has(:checked) label {
    color: #fff;
    font-weight: 600;
}

/* Several of these can be on at once, unlike the ratings, so the tick says
   "chosen" where a single filled pill in a row could be read as "current". */
.com-scprovenlocal .scpl-field-services .form-check:has(:checked) label::before {
    content: '✓';
    margin-inline-end: 0.35rem;
}

.com-scprovenlocal .scpl-field-services .form-check:has(:focus-visible) {
    outline: 2px solid var(--scpl-accent);
    outline-offset: 2px;
}

/* The hint belongs to the whole group, so it sits clear of the last row rather
   than looking like a caption on it. */
.com-scprovenlocal .scpl-field-services .form-text {
    display: block;
    margin-top: 0.15rem;
}

/* ---------- rating pills ---------- */

/* Five named values is a choice, not a quantity, so they are buttons rather
   than a dropdown: every option visible at once, one tap each, and no opening
   a list to find out that 4 means "good". */
.com-scprovenlocal .scpl-rating-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0.3rem 0 0;
    padding: 0;
    border: 0;
}

/* Joomla wraps each radio in its own .form-check, so the pill IS that wrapper's
   label - which is why the "last one is Skip" rule below has to select the last
   .form-check rather than the last label. Every label is the last of its type
   inside its own wrapper, so label:last-of-type would have matched all six. */
.com-scprovenlocal .scpl-rating-pills .form-check {
    margin: 0;
    padding: 0;
    display: inline-flex;
}

/* The outer <fieldset> the layout emits carries the browser's default border
   and inline padding, which shows up as a box round every rating row. */
.com-scprovenlocal .scpl-field > .control-group fieldset,
.com-scprovenlocal .scpl-field fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

/* The radio itself is off-screen rather than hidden, so it stays reachable by
   keyboard and announced by a screen reader - the label is the control. */
.com-scprovenlocal .scpl-rating-pills input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.com-scprovenlocal .scpl-rating-pills label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Stated rather than inherited from the template: min-width lands on the
       CONTENT box under content-box sizing, so a 44px minimum silently became a
       72px pill wherever the template did not set border-box for us. */
    box-sizing: border-box;
    min-width: 44px;
    margin: 0;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--scpl-border);
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.3;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.com-scprovenlocal .scpl-rating-pills label:hover {
    border-color: var(--scpl-accent);
    background: var(--scpl-accent-soft);
}

/* Filled, not tinted. There is no visible radio in a pill, so the fill IS the
   answer to "which one did I pick" - a pale wash behind a hairline border makes
   the reader hunt for it. */
.com-scprovenlocal .scpl-rating-pills input[type="radio"]:checked + label {
    border-color: var(--scpl-accent);
    background: var(--scpl-accent);
    color: #fff;
    font-weight: 600;
}

/* Keyboard focus has to be visible once the input itself is off-screen. */
.com-scprovenlocal .scpl-rating-pills input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--scpl-accent);
    outline-offset: 2px;
}

/* Skip is the way back to not answering, not the bottom of the scale, so it
   reads as the quiet option it is. */
.com-scprovenlocal .scpl-rating-pills .form-check:last-child label {
    min-width: 0;
    color: var(--scpl-muted);
}

/* Skip filled in the same blue would read as a sixth score. It is the absence
   of one, so it fills grey. */
.com-scprovenlocal .scpl-rating-pills .form-check:last-child input:checked + label {
    border-color: var(--scpl-declared);
    background: var(--scpl-declared);
    color: #fff;
}

/* The "something else" toggle sits in the same row as the service tick boxes,
   because it is one of the answers to that question rather than a new one. */
.com-scprovenlocal .scpl-service-other-toggle {
    border-style: dashed;
}

/* A service the reviewer described in their own words. Dashed, like every other
   "nothing has confirmed this" state here, so it never reads as a speciality the
   business is credited with. */
.com-scprovenlocal .scpl-review-service.is-freetext {
    border-style: dashed;
    font-style: italic;
}

/* ---------- choice tiles ---------- */

/* Bigger than a rating pill because these carry a word or a place name rather
   than a digit, and because they are the two questions on this form that decide
   what the review actually confirms. */
.com-scprovenlocal .scpl-choice-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.4rem 0 0;
    padding: 0;
    border: 0;
}

.com-scprovenlocal .scpl-choice-tiles .form-check {
    margin: 0;
    padding: 0;
    display: inline-flex;
}

.com-scprovenlocal .scpl-choice-tiles input[type="radio"],
.com-scprovenlocal .scpl-choice-tiles input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.com-scprovenlocal .scpl-choice-tiles label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.6rem 1rem;
    border: 1px solid var(--scpl-border);
    border-radius: var(--scpl-radius);
    cursor: pointer;
    line-height: 1.3;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.com-scprovenlocal .scpl-choice-tiles label:hover {
    border-color: var(--scpl-accent);
    background: var(--scpl-accent-soft);
}

.com-scprovenlocal .scpl-choice-tiles input[type="radio"]:checked + label,
.com-scprovenlocal .scpl-choice-tiles input[type="checkbox"]:checked + label {
    border-color: var(--scpl-accent);
    background: var(--scpl-accent);
    color: #fff;
    font-weight: 600;
}

.com-scprovenlocal .scpl-choice-tiles input[type="radio"]:focus-visible + label,
.com-scprovenlocal .scpl-choice-tiles input[type="checkbox"]:focus-visible + label {
    outline: 2px solid var(--scpl-accent);
    outline-offset: 2px;
}

/* "Rather not say" and "Somewhere else" are the ways out, not answers, so they
   read quieter until chosen. Both are appended last by the form. */
.com-scprovenlocal .scpl-choice-tiles .form-check:last-child label {
    color: var(--scpl-muted);
    border-style: dashed;
}

.com-scprovenlocal .scpl-choice-tiles .form-check:last-child input:checked + label {
    border-style: solid;
    border-color: var(--scpl-declared);
    background: var(--scpl-declared);
    color: #fff;
}

/* Icons are masks rather than images so they take the label's own colour, which
   flips to white the moment a tile is chosen. Inline SVG, so nothing is fetched
   and no icon font has to be shipped for two glyphs. */
/* Only the two tiles that HAVE an icon get the box. Applied to every label it
   also lands on "Rather not say", where no mask matches the value - and an
   empty mask is not an empty icon, it is a solid coloured square. */
.com-scprovenlocal .scpl-market-tiles input[value="residential"] + label::before,
.com-scprovenlocal .scpl-market-tiles input[value="commercial"] + label::before {
    content: '';
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.com-scprovenlocal .scpl-market-tiles input[value="residential"] + label::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
}

.com-scprovenlocal .scpl-market-tiles input[value="commercial"] + label::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='11' height='18'/%3E%3Cpath d='M15 8h5v13h-5'/%3E%3Cpath d='M7.5 7h1M11 7h1M7.5 11h1M11 11h1M7.5 15h1M11 15h1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='11' height='18'/%3E%3Cpath d='M15 8h5v13h-5'/%3E%3Cpath d='M7.5 7h1M11 7h1M7.5 11h1M11 11h1M7.5 15h1M11 15h1'/%3E%3C/svg%3E");
}

/* A place, not a thing: the pin says so without a word of explanation. */
.com-scprovenlocal .scpl-area-tiles label::before {
    content: '';
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

/* The last area tile is "Somewhere else" - not a place, so no pin. */
.com-scprovenlocal .scpl-area-tiles .form-check:last-child label::before {
    display: none;
}

/* ---------- "works for", given some presence ---------- */

/* These were pale grey text in a hairline outline, which read as metadata
   somebody had forgotten to remove. Who a business will take on is one of the
   first things a reader wants, so it gets weight, an icon, and text dark enough
   to read - while keeping the distinction that matters: a claim still looks
   like a claim, and only a confirmed one is green. */
.com-scprovenlocal .scpl-markets {
    gap: 0.4rem;
    margin-block-start: 0.75rem;
    font-size: 0.95rem;
}

.com-scprovenlocal .scpl-markets-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.com-scprovenlocal .scpl-market {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-width: 1px;
    color: var(--scpl-text, #222);
    font-weight: 500;
    /* A flex item shrinks by default, and these sit in a flex row - without
       this "Business customers" wrapped to two lines inside its own pill. */
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Still dashed until reviews say otherwise - the shape carries the claim, the
   colour no longer has to whisper it. */
.com-scprovenlocal .scpl-market:not(.is-verified) {
    border-color: #b9b9b9;
}

.com-scprovenlocal .scpl-market.is-verified {
    background: var(--scpl-verified);
    border-color: var(--scpl-verified);
    color: #fff;
    font-weight: 600;
}

/* The same two icons the review form uses, so "for my home" and "works for
   private customers" are visibly the same question answered from both ends. */
.com-scprovenlocal .scpl-market::before {
    content: '';
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.com-scprovenlocal .scpl-market.is-residential::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
}

.com-scprovenlocal .scpl-market.is-commercial::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='11' height='18'/%3E%3Cpath d='M15 8h5v13h-5'/%3E%3Cpath d='M7.5 7h1M11 7h1M7.5 11h1M11 11h1M7.5 15h1M11 15h1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='11' height='18'/%3E%3Cpath d='M15 8h5v13h-5'/%3E%3Cpath d='M7.5 7h1M11 7h1M7.5 11h1M11 11h1M7.5 15h1M11 15h1'/%3E%3C/svg%3E");
}

/* The tick would be a second ✓ next to the icon on a green badge. */
.com-scprovenlocal .scpl-market.is-verified .scpl-check {
    display: none;
}