/* dns-legal-cr — Frontend styles v0.4.0
   Listimia-style layout with hero, sticky tabs, modals, action buttons. */

:root {
    --cr-bg:        #f5f6f8;
    --cr-card:      #ffffff;
    --cr-border:    #e3e6eb;
    --cr-text:      #1f2937;
    --cr-text-mute: #6b7280;
    --cr-primary:   #1c5fb4;
    --cr-primary-d: #144a90;
    --cr-success:   #16a34a;
    --cr-success-d: #15803d;
    --cr-accent:    #ea580c;
    --cr-radius:    8px;
    --cr-shadow:    0 1px 3px rgba(0,0,0,0.06);
    --cr-shadow-h:  0 2px 12px rgba(0,0,0,0.10);
    --cr-gap:       20px;
    --cr-tabs-h:    52px;
}

/* ── Container ───────────────────────────────────────────────────────── */
.cr-single {
    background: var(--cr-bg);
    color: var(--cr-text);
    font-size: 15px;
    line-height: 1.55;
}
.cr-single .cr-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ════════════════════════════ HERO ═══════════════════════════════════ */
.cr-hero {
    position: relative;
    min-height: 380px;
    max-height: 520px;
    aspect-ratio: 1200 / 400;
    background-color: #2a3441;
    color: #fff;
    overflow: hidden;
}
.cr-hero-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    /* v0.66.231: object-position CSS variable per listing (defaults to center).
       Override via inline style="--cr-hero-pos: 50% 30%" on .cr-hero if a
       specific listing's hero needs different cropping. */
    object-fit: cover;
    object-position: var(--cr-hero-pos, center);
    z-index: 0;
    display: block;
}
.cr-hero-fallback {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}
.cr-hero-overlay {
    position: absolute; inset: 0;
    z-index: 1;
    /* v0.66.438: dark scrim removed on request — hero photo shows clean.
       Legibility is preserved via text-shadow on the hero text below.
       (To bring back a subtle wash, set e.g.
        background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.45));) */
    background: none;
}
/* v0.66.438: keep hero text readable over a clean (un-darkened) photo. */
.cr-hero-inner,
.cr-hero .cr-breadcrumb,
.cr-hero-cat,
.cr-hero-title,
.cr-hero-meta,
.cr-hero-address {
    text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.35);
}
.cr-hero-title {
    text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.5);
}
.cr-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 32px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
}

.cr-hero .cr-breadcrumb {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    margin-bottom: auto;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.cr-hero .cr-breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.cr-hero .cr-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.cr-hero .cr-bc-sep { margin: 0 6px; color: rgba(255,255,255,0.5); }
.cr-hero .cr-bc-current { color: #fff; font-weight: 500; }

.cr-hero-content {
    margin-top: auto;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    max-width: 760px;
}
.cr-hero-cat {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    border-radius: 4px;
    margin-bottom: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cr-hero-cat:hover { background: rgba(255,255,255,0.28); }

.cr-hero-title {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.15;
    color: #fff;
}

.cr-hero-meta {
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    margin-bottom: 10px;
}
.cr-hero-meta .cr-stars     { letter-spacing: 1px; color: #ffd166; }
.cr-hero-meta .cr-stars-real .cr-stars-empty { color: rgba(255,255,255,0.35); }
.cr-hero-meta .cr-stars-real .cr-stars-filled { color: #ffd166; }
.cr-hero-meta .cr-meta-sep  { margin: 0 8px; opacity: 0.5; }
.cr-hero-meta .cr-meta-text { opacity: 0.9; }
.cr-hero-meta .cr-meta-link { color: #fff; text-decoration: underline; }
.cr-hero-meta .cr-meta-link:hover { opacity: 0.85; }

.cr-hero-address {
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    margin-bottom: 18px;
}
.cr-hero-address .cr-pin { margin-right: 4px; }

.cr-hero-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: 6px;
}
.cr-hero-actions .cr-btn { box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.cr-btn-icon { display: inline-block; margin-right: 4px; }

/* ════════════════════════ STICKY TABS ════════════════════════════════ */
.cr-tabs {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--cr-border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.cr-tabs-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cr-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    height: var(--cr-tabs-h);
    line-height: var(--cr-tabs-h);
    color: var(--cr-text-mute);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.cr-tab:hover { color: var(--cr-text); }
.cr-tab.active {
    color: var(--cr-primary);
    border-bottom-color: var(--cr-primary);
}

/* ═══════════════════════ MAIN GRID ═══════════════════════════════════ */
.cr-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--cr-gap);
    padding: var(--cr-gap) 0 40px;
}
@media (max-width: 920px) {
    .cr-grid { grid-template-columns: 1fr; }
}

/* v0.66.245: Listing hero responsive. Previously cr-hero-title stayed at
   38px on phones (long business names overflowed) and the breadcrumb didn't
   wrap. Mirror the archive-hero mobile treatment. */
@media (max-width: 600px) {
    /* v0.66.247: THE fix — the desktop aspect-ratio 1200/400 forced the
       hero into a very flat box on narrow screens; combined with
       overflow:hidden that clipped the breadcrumb + h1. On mobile we drop
       the ratio entirely and let the hero grow to fit its content. */
    .cr-hero {
        aspect-ratio: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
    }
    .cr-hero-inner {
        min-height: 0 !important;
        padding: 100px 16px 28px;
    }
    .cr-hero-title {
        font-size: 25px;
        line-height: 1.2;
        overflow-wrap: break-word;
    }
    .cr-hero-cat { font-size: 11px; padding: 5px 11px; margin-bottom: 10px; }
    .cr-hero .cr-breadcrumb {
        font-size: 12px;
        line-height: 1.45;
        white-space: normal;
        overflow-wrap: break-word;
        margin-bottom: 16px;
    }
    .cr-hero .cr-breadcrumb a { white-space: normal; }
    .cr-hero-meta { font-size: 13px; }
    .cr-hero-address { font-size: 13px; }
}
@media (max-width: 380px) {
    .cr-hero-title { font-size: 22px; }
}

.cr-main { min-width: 0; }

.cr-card,
.cr-single .cr-card,
body.single .cr-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 18px 20px !important;
    margin-bottom: 14px !important;
    /* Stronger shadow — visible on any background */
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 10px 24px rgba(0, 0, 0, 0.10) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.cr-card:hover,
.cr-single .cr-card:hover {
    box-shadow:
        0 0 0 1px rgba(37, 99, 235, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.10),
        0 16px 32px rgba(0, 0, 0, 0.14) !important;
}
/* Sidebar listing card — slightly more prominent (it's the hero info block) */
.cr-listing-card,
.cr-single .cr-listing-card {
    border-left: 3px solid var(--cr-primary, #2563eb) !important;
}
.cr-card h2 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--cr-text);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cr-border);
}
.cr-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cr-text);
}
.cr-card h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--cr-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cr-section { scroll-margin-top: calc(var(--cr-tabs-h) + 12px); }
.cr-prose   { font-size: 15px; line-height: 1.65; color: #1f2937; }
.cr-prose p { margin: 0 0 12px; }
.cr-prose p:last-child { margin-bottom: 0; }
.cr-prose h2,
.cr-prose h3,
.cr-prose h4 {
    color: #1f2937;
    line-height: 1.3;
    margin: 22px 0 10px;
    font-weight: 700;
}
.cr-prose h2 { font-size: 22px; }
.cr-prose h3 { font-size: 18px; }
.cr-prose h4 { font-size: 16px; }
.cr-prose h2:first-child,
.cr-prose h3:first-child,
.cr-prose h4:first-child { margin-top: 0; }
.cr-prose ul,
.cr-prose ol {
    margin: 0 0 14px;
    padding-left: 24px;
}
/* v0.66.228: Themes (Enfold etc.) globally reset list-style on ul/ol,
   which made bullets and numbers invisible inside descriptions.
   Re-assert the standard markers explicitly. */
.cr-prose ul       { list-style: disc outside; }
.cr-prose ul ul    { list-style: circle outside; }
.cr-prose ul ul ul { list-style: square outside; }
.cr-prose ol       { list-style: decimal outside; }
.cr-prose ol ol    { list-style: lower-alpha outside; }
.cr-prose li { margin-bottom: 6px; }
.cr-prose li:last-child { margin-bottom: 0; }

/* v0.66.82: full-width section-break images injected into AI descriptions */
.cr-prose .cr-section-image {
    margin: 22px 0;
    padding: 0;
    width: 100%;
}
.cr-prose .cr-section-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    border-radius: 8px;
}
@media (max-width: 540px) {
    .cr-prose .cr-section-image img { max-height: 260px; border-radius: 6px; }
    .cr-prose .cr-section-image { margin: 16px 0; }
}
.cr-prose blockquote {
    border-left: 3px solid #c79a52;
    padding: 4px 0 4px 14px;
    margin: 0 0 14px;
    color: #4b5563;
    font-style: italic;
}
.cr-prose hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 18px 0;
}
.cr-prose a {
    color: #1c5fb4;
    text-decoration: underline;
}
.cr-prose a:hover { text-decoration: none; }
.cr-prose strong { font-weight: 700; color: #111827; }
.cr-prose em { font-style: italic; }
.cr-prose code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cr-prose pre {
    background: #f3f4f6;
    padding: 12px 14px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0 0 14px;
    font-size: 13px;
}
.cr-muted   { color: var(--cr-text-mute); font-size: 14px; }

/* Photos */
.cr-photos { text-align: left; }
.cr-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.cr-photo-link {
    position: relative;
    display: block;
    cursor: zoom-in;
    border-radius: 6px;
    overflow: hidden;
}
.cr-photo-thumb img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    transition: transform 0.2s, opacity 0.15s;
}
.cr-photo-thumb:hover img {
    transform: scale(1.04);
    opacity: 0.95;
}
.cr-photos img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    transition: opacity 0.15s;
}
.cr-photo-link:hover img { opacity: 0.92; }
.cr-photo-zoom {
    position: absolute;
    bottom: 10px; right: 10px;
    padding: 4px 10px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.cr-photo-link:hover .cr-photo-zoom { opacity: 1; }
@media (max-width: 480px) {
    .cr-photos-grid { grid-template-columns: repeat(2, 1fr); }
    .cr-photo-thumb img { height: 110px; }
}

/* Map */
.cr-map {
    width: 100%;
    height: 360px;
    border-radius: 6px;
    overflow: hidden;
    background: #eef0f3;
}
.cr-map-address {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--cr-text-mute);
}
.cr-directions {
    margin-left: 10px;
    font-size: 13px;
    color: var(--cr-primary);
    text-decoration: none;
}
.cr-directions:hover { text-decoration: underline; }

/* Google Maps button (v0.61.1) */
.cr-google-maps-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cr-google-maps-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.18);
    color: #fff;
    text-decoration: none;
}

/* Photo by Google attribution (v0.61.1) */
.cr-google-attribution {
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    background: rgba(0,0,0,0.45);
    padding: 3px 8px;
    border-radius: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    z-index: 3;
    backdrop-filter: blur(2px);
}

/* Reviews stubs */
.cr-review-stub {
    display: flex; gap: 14px;
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 12px;
    border: 1px solid var(--cr-border);
}
.cr-review-stub:last-child { margin-bottom: 0; }
.cr-review-know {
    background: #bfdbfe !important;
    border: 1px solid #60a5fa !important;
    display: flex !important;
}
.cr-review-report {
    background: #fff7ed !important;
    border: 1px solid #fcd9b6 !important;
    display: flex !important;
}
.cr-review-stub-icon { font-size: 24px; flex-shrink: 0; }
.cr-review-stub-body { flex: 1; }
.cr-review-stub-body h3 { margin: 0 0 6px; font-size: 15px; }
.cr-review-stub-body p  { margin: 0 0 10px; color: var(--cr-text-mute); font-size: 14px; }

/* ── Comment + Report forms ───────────────────────────────────────────── */
.cr-comment-form textarea,
.cr-report-form textarea,
.cr-report-form select {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--cr-border);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
    color: var(--cr-text);
    box-sizing: border-box;
    resize: vertical;
}
.cr-comment-form textarea:focus,
.cr-report-form textarea:focus,
.cr-report-form select:focus {
    outline: none;
    border-color: var(--cr-primary);
    box-shadow: 0 0 0 3px rgba(28,95,180,0.15);
}
.cr-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cr-form-status {
    font-size: 13px;
    line-height: 1.4;
}
.cr-form-status.is-success { color: var(--cr-success-d); }
.cr-form-status.is-error   { color: #b91c1c; }

/* Approved comments list (above the forms) */
.cr-comments-list { margin-bottom: 18px; }
.cr-comment {
    padding: 12px 14px;
    background: #fafbfc;
    border: 1px solid var(--cr-border);
    border-radius: 6px;
    margin-bottom: 8px;
}
.cr-comment-text { margin: 0 0 4px; font-size: 14px; line-height: 1.55; }
.cr-comment-meta { margin: 0; font-size: 12px; color: var(--cr-text-mute); }

/* ═══════════════════════════ SIDEBAR ════════════════════════════════ */
.cr-sidebar { min-width: 0; }

.cr-listing-card {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cr-listing-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cr-logo {
    width: 56px; height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--cr-border);
    flex-shrink: 0;
}
.cr-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cr-logo-failed img { display: none; }
.cr-logo-failed::after {
    content: attr(data-initials);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    background: var(--cr-initials-bg, #475569);
    font-size: 32px;
}
.cr-logo-large.cr-logo-failed::after { font-size: 48px; }
.cr-logo-initials {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border: none;
}

.cr-listing-name {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--cr-text);
    line-height: 1.3;
    word-break: break-word;
}
.cr-address {
    text-align: left;
    font-size: 14px;
    color: var(--cr-text);
    line-height: 1.55;
}
.cr-address strong {
    display: block;
    margin-bottom: 4px;
    color: var(--cr-text-mute);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}
.cr-address div { color: var(--cr-text-mute); }

/* Contact */
.cr-contact-list { list-style: none; margin: 0; padding: 0; }
.cr-contact-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 0;
    font-size: 14px;
    border-bottom: 1px solid #f0f1f3;
}
.cr-contact-list li:last-child { border-bottom: none; }
.cr-contact-list .cr-icon {
    width: 22px; flex-shrink: 0;
    color: var(--cr-primary);
    font-weight: 700;
    text-align: center;
}
.cr-contact-list a { color: var(--cr-text); text-decoration: none; word-break: break-all; }
.cr-contact-list a:hover { color: var(--cr-primary); text-decoration: underline; }

/* Registered ID */
.cr-regid-code {
    display: block;
    background: #fafbfc;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--cr-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--cr-text);
    word-break: break-all;
}

/* Taxonomy chips */
.cr-tax-block { margin-bottom: 14px; }
.cr-tax-block:last-child { margin-bottom: 0; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-chip {
    display: inline-block;
    padding: 4px 10px;
    background: #bfdbfe;
    color: var(--cr-primary);
    border-radius: 12px;
    font-size: 12px;
    text-decoration: none;
    border: 1px solid #60a5fa;
}
.cr-chip:hover { background: var(--cr-primary); color: #fff; border-color: var(--cr-primary); }
.cr-chips-muted .cr-chip {
    background: #f3f4f6; color: var(--cr-text-mute); border-color: #e3e6eb;
}
.cr-chips-muted .cr-chip:hover { background: var(--cr-text-mute); color: #fff; }

/* Service blocks */
.cr-service-block { text-align: center; padding: 14px 16px; }
.cr-service-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cr-text);
    line-height: 1.4;
}

/* Sidebar report form (compact) */
.cr-sidebar-report .cr-report-form-compact { margin-top: 4px; }
.cr-sidebar-report select,
.cr-sidebar-report textarea {
    font-size: 13px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.cr-sidebar-report .cr-form-status {
    display: block;
    margin-top: 8px;
    font-size: 12px;
}

/* Sidebar claim card */
.cr-sidebar-claim { text-align: center; }
.cr-claim-text {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--cr-text);
}

/* (legacy) Claim/report card — kept in case theme uses it */
.cr-claim p { margin: 0 0 6px; font-size: 14px; }
.cr-claim p:last-child { margin: 0; }
.cr-claim a { color: var(--cr-primary); }

/* ═══════════════════════════ BUTTONS ════════════════════════════════ */
.cr-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.2;
}
.cr-btn-primary    { background: var(--cr-primary); color: #fff; }
.cr-btn-primary:hover { background: var(--cr-primary-d); color: #fff; }

.cr-btn-success    { background: var(--cr-success); color: #fff; }
.cr-btn-success:hover { background: var(--cr-success-d); color: #fff; }

/* v0.66.227: Service block buttons use the brand palette
   (Wet-Asphalt dark on light blue-grey) instead of the generic
   green success colour. Scoped to .cr-service-block so other
   green success buttons (Enquiry, form confirmations, etc.)
   are untouched. */
.cr-service-block .cr-btn-success {
    background: #2c3e50;
    color: #c7dee8;
    border-color: #1a2a3a;
}
.cr-service-block .cr-btn-success:hover {
    background: #1a2a3a;
    color: #ffffff;
    border-color: #0f1a24;
}

.cr-btn-secondary  {
    background: #fff; color: var(--cr-text); border-color: var(--cr-border);
}
.cr-btn-secondary:hover { background: #f3f4f6; }

.cr-btn-light {
    background: rgba(255,255,255,0.95); color: var(--cr-text); border-color: transparent;
}
.cr-btn-light:hover { background: #fff; }

.cr-btn-block { display: block; width: 100%; }

.cr-btn-disabled,
.cr-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ════════════════════════════ MODALS ════════════════════════════════ */
.cr-modal {
    position: fixed; inset: 0;
    z-index: 10000;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.cr-modal.cr-modal-open { display: flex; }
.cr-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.cr-modal-dialog {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 28px 28px 24px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.30);
    max-height: 90vh;
    overflow-y: auto;
}
.cr-modal-dialog h3 {
    margin: 0 0 18px;
    font-size: 19px;
    font-weight: 700;
    color: var(--cr-text);
}
.cr-modal-close {
    position: absolute;
    top: 10px; right: 12px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--cr-text-mute);
    cursor: pointer;
    padding: 4px 10px;
}
.cr-modal-close:hover { color: var(--cr-text); }

/* Share modal */
.cr-share-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.cr-share-btn {
    display: block;
    padding: 12px;
    text-align: center;
    background: #f3f4f6;
    color: var(--cr-text);
    text-decoration: none;
    border: 1px solid var(--cr-border);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.cr-share-btn:hover { background: var(--cr-primary); color: #fff; border-color: var(--cr-primary); }
.cr-share-status {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--cr-success-d);
    min-height: 18px;
    text-align: center;
}

/* Enquiry modal — wider for the form */
#cr-enquiry-modal .cr-modal-dialog { max-width: 560px; }
.cr-enquiry-body { font-size: 14px; }

/* ════════════════════════ MOBILE ADJUSTMENTS ═════════════════════════ */
@media (max-width: 720px) {
    .cr-hero { min-height: 360px; }
    .cr-hero-inner { min-height: 360px; padding: 20px 16px 24px; }
    .cr-hero-title { font-size: 26px; }
    .cr-hero-meta { font-size: 13px; }
    .cr-hero-meta .cr-meta-sep { margin: 0 4px; }
    .cr-hero-actions .cr-btn { padding: 8px 14px; font-size: 13px; }
    .cr-tab { padding: 0 14px; font-size: 13px; }
    .cr-card { padding: 14px 16px; }
    .cr-share-grid { grid-template-columns: 1fr; }
}

/* ── Star rating: display ─────────────────────────────────────────── */
.cr-rating-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
/* ── SVG-based 5-star rating display ─────────────────────────────
   Two stacked layers: empty (grey outline) sits below, filled
   (gold) overlays it with overflow-hidden width. Works at any size
   because SVG scales cleanly. */
.cr-stars {
    position: relative;
    display: inline-flex;
    line-height: 0;
    vertical-align: middle;
    white-space: nowrap;
}
.cr-stars-bg,
.cr-stars-fg {
    display: inline-flex;
    line-height: 0;
}
.cr-stars-bg {
    color: #e5e7eb;  /* light grey outline-fill */
}
.cr-stars-fg {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #f5b800;  /* warm gold */
    width: 0;
    pointer-events: none;
}
.cr-stars .cr-star {
    display: inline-block;
    margin: 0 1px;
    flex-shrink: 0;
}
/* Hero-context: brighten the gold against the dark background, soften empties */
.cr-hero-meta .cr-stars-bg { color: rgba(255,255,255,0.3); }
.cr-hero-meta .cr-stars-fg { color: #ffd166; }

/* Legacy unicode-star classes — kept for backward compatibility
   in case any third-party template still references them. */
.cr-stars-real {
    position: relative;
    display: inline-block;
    line-height: 1;
    letter-spacing: 1px;
    font-size: 16px;
    color: #d1d5db;
    white-space: nowrap;
}
.cr-stars-real .cr-stars-empty,
.cr-stars-real .cr-stars-filled {
    display: inline-block;
}
.cr-stars-real .cr-stars-filled {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    color: #f5b800;
    width: 0;
    pointer-events: none;
}
.cr-stars-real-lg { font-size: 22px; }
.cr-stars-real-sm { font-size: 14px; }
.cr-rating-num {
    color: rgba(255,255,255,0.95);
    margin-left: 4px;
    font-size: 14px;
}

/* Reviews summary box at the top of the section */
.cr-reviews-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.cr-reviews-avg {
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}
.cr-reviews-stars-wrap { line-height: 1; }
.cr-reviews-count {
    color: #6b7280;
    font-size: 13px;
    margin-left: auto;
}

/* Comment row — adjust if rating-stars are present */
.cr-comment .cr-stars-real-sm {
    margin-bottom: 4px;
    display: block;
}

/* ── Star rating: input ────────────────────────────────────────────── */
.cr-rating-input {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.cr-rating-input-label {
    color: #4b5563;
    font-size: 14px;
    margin-right: 8px;
}
.cr-rating-input .cr-star-btn {
    background: none;
    border: 0;
    padding: 4px 2px;
    font-size: 28px;
    line-height: 1;
    color: #d1d5db;
    cursor: pointer;
    transition: color 0.1s ease, transform 0.1s ease;
}
.cr-rating-input .cr-star-btn:hover,
.cr-rating-input .cr-star-btn:focus,
.cr-rating-input .cr-star-btn.is-hover,
.cr-rating-input .cr-star-btn.is-active {
    color: #f5b800;
    outline: none;
    transform: scale(1.05);
}
.cr-rating-input-text {
    margin-left: 8px;
    color: #6b7280;
    font-size: 13px;
    min-width: 60px;
}

/* ── Inquiry status toast (after form-redirect) ───────────────────── */
.cr-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 14px 18px 14px 16px;
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.18);
    font-size: 14px;
    line-height: 1.4;
    animation: cr-toast-slide-in 0.25s ease-out;
}
.cr-toast-success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}
.cr-toast-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}
.cr-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.cr-toast-text {
    flex: 1;
}
.cr-toast-close {
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 0 0 0 8px;
}
.cr-toast-close:hover { opacity: 1; }
.cr-toast.is-fading {
    animation: cr-toast-fade-out 0.4s ease-out forwards;
}
@keyframes cr-toast-slide-in {
    from { opacity: 0; transform: translate(-50%, -16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes cr-toast-fade-out {
    to { opacity: 0; transform: translate(-50%, -16px); }
}

/* ── Add Listing public form ──────────────────────────────────────── */
.cr-add-listing-page {
    background: #f5f7fa;
}
.cr-add-listing-hero {
    background: linear-gradient(135deg, #2c3e50 0%, #55637D 100%);
    color: #fff;
    padding: 56px 20px 48px;
    text-align: center;
}
.cr-add-listing-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}
.cr-add-listing-hero h1 {
    color: #fff;
    margin: 0 0 12px;
    font-size: 32px;
    font-weight: 700;
}
.cr-add-listing-hero p {
    color: rgba(255,255,255,0.92);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.cr-add-listing-body {
    padding: 32px 20px 64px;
}
.cr-add-listing-card {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 32px 36px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.cr-add-listing-card h2 {
    margin: 28px 0 12px;
    font-size: 18px;
    color: #1f2937;
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 8px;
}
.cr-add-listing-card h2:first-child {
    margin-top: 0;
}
.cr-add-listing-card .cr-helper-text {
    margin: -6px 0 16px;
    color: #6b7280;
    font-size: 13px;
}

.cr-add-listing-card .cr-field {
    margin-bottom: 14px;
}
.cr-add-listing-card .cr-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 560px) {
    .cr-add-listing-card { padding: 22px 18px; }
    .cr-add-listing-card .cr-field-row { grid-template-columns: 1fr; }
    .cr-add-listing-hero h1 { font-size: 24px; }
}

.cr-add-listing-card label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
    font-size: 14px;
}
.cr-add-listing-card .cr-req { color: #dc2626; }
.cr-add-listing-card .cr-opt {
    color: #9ca3af;
    font-weight: 400;
    font-size: 12px;
}
.cr-add-listing-card input[type="text"],
.cr-add-listing-card input[type="email"],
.cr-add-listing-card input[type="url"],
.cr-add-listing-card input[type="tel"],
.cr-add-listing-card textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.cr-add-listing-card input:focus,
.cr-add-listing-card textarea:focus {
    outline: none;
    border-color: #c79a52;
    box-shadow: 0 0 0 3px rgba(199,154,82,0.15);
}

.cr-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cr-add-listing-submit {
    margin-top: 24px;
    text-align: center;
}
.cr-btn-lg {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
}
.cr-add-listing-status {
    margin-top: 16px;
    min-height: 24px;
    font-size: 14px;
}
.cr-add-listing-status.is-success { color: #047857; }
.cr-add-listing-status.is-error   { color: #b91c1c; }

.cr-add-listing-disclaimer {
    margin-top: 24px;
    color: #9ca3af;
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
}

/* ── Bottom "Add your business" CTA on listing pages ──────────────── */
/* ── Bottom "Add your business" CTA on listing pages ──────────────── */
.cr-add-cta {
    margin: 56px 0 0 !important;
    padding: 44px 20px !important;
    background: linear-gradient(135deg, #fafafa 0%, #f0f4f8 100%) !important;
    /* v0.66.104 — dark-brand divider only. Was 8px + gold accent stripe
       (v0.66.102), Karl found that too heavy. Just the dark line now. */
    border-top: 6px solid #2c3e50 !important;
    text-align: center !important;
}
.cr-add-cta-inner {
    max-width: 640px;
    margin: 0 auto;
}
.cr-add-cta h2 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #1f2937;
}
.cr-add-cta p {
    margin: 0 0 18px;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.55;
}

/* ── CR page body class — suppress theme's auto-rendered page header ─── */
/* When body has cr-page class, hide common theme page-banner elements
   that duplicate our hero. List grows as we learn more theme selectors. */
body.cr-page .page-header,
body.cr-page .entry-header,
body.cr-page header.page-banner,
body.cr-page .singular-page-header,
body.cr-page .generate-page-hero,
body.cr-page .post-thumbnail,
body.cr-page .featured-image,
body.cr-page .wp-block-post-featured-image,
body.cr-page .et_post_meta_wrapper,
body.cr-page .et_pb_section.et_pb_fullwidth_header,
body.cr-page .pp-page-header,
body.cr-page > .breadcrumb,
body.cr-page > .breadcrumbs,
body.cr-page .ast-archive-description,
body.cr-page .entry-banner,
body.cr-page .header-image,
body.cr-page .hero-section:not(.cr-hero):not(.cr-add-listing-hero) {
    display: none !important;
}
/* Hide any element with role="banner" except the main site nav */
body.cr-page main > header,
body.cr-page #content > header,
body.cr-page #primary > header {
    display: none !important;
}

/* ── Sidebar listing card: logo on top, larger, left-aligned ───────── */
.cr-listing-card-head-stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
}
.cr-logo-large {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cr-logo-large img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.cr-logo-large.cr-logo-initials {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}
.cr-listing-card-head-stacked .cr-listing-name {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #1f2937;
}
@media (max-width: 480px) {
    .cr-logo-large { width: 110px; height: 110px; }
    .cr-logo-large.cr-logo-initials { font-size: 38px; }
}

/* ════════════════════ ARCHIVE PAGES ════════════════════ */
.cr-archive {
    background: #f5f7fa;
    min-height: 60vh;
}

.cr-archive-hero {
    background: linear-gradient(135deg, #2c3e50 0%, #55637D 100%);
    color: #fff;
    padding: 48px 20px 40px;
}
/* v0.66.444: when the hero has a real photo (no dark wash anymore), keep the
   white text readable with a shadow instead of darkening the whole image. */
.cr-archive-hero--with-image .cr-archive-hero-inner,
.cr-archive-hero--with-image h1,
.cr-archive-hero--with-image .cr-archive-hero-count,
.cr-archive-hero--with-image .cr-breadcrumb,
.cr-archive-hero--with-image .cr-breadcrumb a {
    text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.4);
}
.cr-archive-hero--with-image h1 {
    text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.5);
}
.cr-archive-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.cr-archive-hero .cr-breadcrumb {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    margin-bottom: 16px;
}
.cr-archive-hero .cr-breadcrumb a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}
.cr-archive-hero .cr-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}
.cr-archive-hero h1 {
    color: #fff;
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
}
.cr-archive-hero-count {
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    margin: 0;
}

.cr-archive-overview-hero {
    background: linear-gradient(135deg, #2c3e50 0%, #55637D 100%);
    color: #fff;
    padding: 72px 20px 64px;
    text-align: center;
}
.cr-archive-overview-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}
.cr-archive-overview-hero h1 {
    color: #fff;
    margin: 0 0 14px;
    font-size: 40px;
    font-weight: 700;
}
.cr-archive-overview-tagline {
    color: rgba(255,255,255,0.92);
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 24px;
}
.cr-archive-overview-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.cr-archive-overview-actions .cr-btn-secondary {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
}
.cr-archive-overview-actions .cr-btn-secondary:hover {
    background: rgba(255,255,255,0.28);
}

.cr-archive-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px;
}
.cr-archive-section-h {
    font-size: 22px;
    color: #1f2937;
    margin: 0 0 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}
.cr-archive-empty {
    text-align: center;
    color: #6b7280;
    font-size: 16px;
    padding: 48px 20px;
}

/* ── Listing grid ─────────────────────────────────────────────── */
.cr-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.cr-card-listing {
    display: block;
    background: #fff;
    /* v0.66.242: 2px brand border, !important against Enfold's a-tag reset */
    border: 2px solid #c7dee8 !important;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.cr-card-listing:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(44, 62, 80, 0.12);
    border-color: #2c3e50 !important;
    text-decoration: none;
}
.cr-card-listing-img {
    position: relative;
    width: 100%;
    height: 170px;
    background: #eef0f3;
    overflow: hidden;
}
.cr-card-listing-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cr-card-img-failed img { display: none; }
.cr-card-img-failed::after {
    content: attr(data-initials);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cr-initials-bg, #475569);
    color: #fff;
    font-size: 64px;
    font-weight: 700;
    text-transform: uppercase;
}
.cr-card-listing-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2c3e50 0%, #55637D 100%);
    color: #fff;
    font-size: 64px;
    font-weight: 700;
}
.cr-card-listing-featured {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(199,154,82,0.95);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* v0.66.426: make featured listings stand out wherever the card is shown
   (search, category, location, tag, overview). Warm gold accent + lift. */
.cr-card-listing--featured {
    border-color: #c79a52 !important;
    box-shadow: 0 4px 16px rgba(199,154,82,0.28);
    position: relative;
}
.cr-card-listing--featured:hover {
    border-color: #b7892f !important;
    box-shadow: 0 10px 26px rgba(199,154,82,0.38);
}
.cr-card-listing--featured .cr-card-listing-featured {
    background: linear-gradient(135deg, #c79a52 0%, #b7892f 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    font-size: 12px;
}
.cr-card-listing-body {
    padding: 14px 16px 16px;
}
.cr-card-listing-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}
.cr-card-listing-addr {
    margin: 0 0 8px;
    font-size: 13px;
    color: #6b7280;
}
.cr-card-listing-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}
.cr-card-listing-rating {
    font-weight: 600;
    color: #c79a52;
}
.cr-card-listing-rating small {
    color: #888;
    font-weight: 400;
    margin-left: 2px;
}
.cr-card-listing-cat {
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    color: #475569;
}

/* ── Category grid ────────────────────────────────────────────── */
.cr-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.cr-card-category {
    display: block;
    background: #fff;
    /* v0.66.242: 2px brand border consistent across all card types */
    border: 2px solid #c7dee8 !important;
    border-radius: 8px;
    padding: 20px 18px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.cr-card-category:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(44, 62, 80, 0.10);
    border-color: #2c3e50 !important;
    text-decoration: none;
}
.cr-card-category h3 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
}
.cr-card-category-count {
    font-size: 13px;
    color: #6b7280;
}

.cr-btn-link {
    background: none;
    color: #1c5fb4;
    border: 0;
    padding: 0;
    font-size: 14px;
    text-decoration: none;
}
.cr-btn-link:hover {
    text-decoration: underline;
}

@media (max-width: 540px) {
    .cr-archive-overview-hero h1 { font-size: 28px; }
    .cr-archive-overview-tagline { font-size: 15px; }
    /* v0.66.73: 72px wasn't enough on iOS Safari — Enfold's mobile header
       (logo + burger + its own vertical padding) overlays roughly the top
       95–105 CSS px when fixed. Bumped to 110px so the breadcrumb is
       visible and the h1 sits clearly below the floating header. */
    .cr-archive-hero { padding: 110px 16px 32px; }
    .cr-archive-hero .cr-breadcrumb {
        /* Allow long crumb trails to wrap cleanly instead of pushing h1 down */
        font-size: 12px;
        margin-bottom: 12px;
        line-height: 1.45;
        word-break: break-word;
    }
    .cr-archive-hero h1 { font-size: 24px; line-height: 1.2; }
    .cr-archive-overview-hero { padding: 110px 16px 56px; }
    .cr-listing-grid { grid-template-columns: 1fr; }
}

/* ── Pagination ───────────────────────────────────────────────── */
.cr-pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 32px 0 8px;
}
.cr-pagination a,
.cr-pagination .cr-page-current,
.cr-pagination .cr-page-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #1f2937;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}
.cr-pagination a:hover {
    background: #f9fafb;
    border-color: #c79a52;
    color: #1c5fb4;
    text-decoration: none;
}
.cr-pagination .cr-page-current {
    background: #1c5fb4;
    color: #fff;
    border-color: #1c5fb4;
}
.cr-pagination .cr-page-gap {
    border: 0;
    background: transparent;
    color: #9ca3af;
    cursor: default;
}
.cr-pagination .cr-page-prev,
.cr-pagination .cr-page-next {
    font-weight: 600;
}

/* ── Multi-phone display ─────────────────────────────────────────── */
/* ── Phone / email multi-value display ───────────────────────────
   The contact list uses <li> with display:flex (row), so naked
   anchor children all sit on one line. cr_phone_display() and
   cr_email_display() wrap multiple values in a flex-column span. */
.cr-phone-list,
.cr-email-list {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-width: 0;  /* allow long content to wrap inside the list */
}
.cr-phone-list .cr-phone-link,
.cr-email-list .cr-email-link {
    display: inline-block;
}
.cr-phone-link,
.cr-email-link {
    word-break: break-all;
}

/* ── Business attributes (rooms/license/practice_areas etc.) ────── */
.cr-attributes .cr-attr-list {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 6px 12px;
    margin: 0;
    font-size: 14px;
}
.cr-attributes .cr-attr-list dt {
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}
.cr-attributes .cr-attr-list dd {
    margin: 0;
    color: #1f2937;
}

/* ── Search form ──────────────────────────────────────────────── */
.cr-search-form {
    display: flex;
    gap: 8px;
    margin: 18px 0 12px;
    max-width: 640px;
}
.cr-search-form-overview {
    margin: 24px auto 16px;
    max-width: 720px;
}
.cr-search-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
    color: #1f2937;
}
.cr-search-input:focus {
    outline: none;
    border-color: #1c5fb4;
    box-shadow: 0 0 0 3px rgba(28, 95, 180, 0.15);
}
/* Search form inside any dark hero — ensure good contrast */
.cr-archive-hero .cr-search-form .cr-search-input,
.cr-archive-overview-hero .cr-search-form .cr-search-input {
    background: #fff;
    border-color: rgba(255,255,255,0.4);
}
.cr-archive-hero .cr-search-form .cr-search-input:focus,
.cr-archive-overview-hero .cr-search-form .cr-search-input:focus {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.cr-search-form .cr-btn {
    flex-shrink: 0;
    padding-left: 20px;
    padding-right: 20px;
}

/* ── Multi-email display: see .cr-email-list above ─────────── */

/* ── Category cards with icons ───────────────────────────────────── */
.cr-card-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 22px 14px 18px;
    background: #fff;
    /* v0.66.242: 2px brand border */
    border: 2px solid #c7dee8 !important;
    border-radius: 8px;
    text-decoration: none;
    color: #1f2937;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    text-align: center;
    min-height: 140px;
}
.cr-card-category:hover {
    border-color: #2c3e50 !important;
    box-shadow: 0 4px 14px rgba(44, 62, 80, 0.12);
    transform: translateY(-1px);
}
.cr-card-category-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #6b7280;
    transition: color 0.15s ease;
}
.cr-card-category:hover .cr-card-category-icon-wrap {
    color: #1c5fb4;
}
.cr-cat-icon {
    display: block;
}
.cr-card-category h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px;
    line-height: 1.25;
    color: inherit;
}
.cr-card-category-count {
    font-size: 12px;
    color: #6b7280;
    margin-top: auto;
}

/* ── Categories filter (top of /seychelles/category/) ────────────── */
.cr-cat-filter-wrap {
    position: relative;
    max-width: 560px;
    margin: 20px 0 6px;
}
.cr-cat-filter-wrap .cr-search-input {
    width: 100%;
    padding-right: 110px;
    background: #fff;
    color: #1f2937;
    border-color: rgba(255,255,255,0.4);
}
.cr-cat-filter-count {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #6b7280;
    pointer-events: none;
}
.cr-cat-filter-fallback {
    margin: 12px 0 0;
    font-size: 14px;
    color: rgba(255,255,255,0.95);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.cr-cat-filter-fallback-text {
    color: rgba(255,255,255,0.85);
}
.cr-cat-filter-btn {
    /* Slightly more padding than default for a "primary action" feel */
    padding: 10px 18px;
}
.cr-cat-filter-empty {
    margin: 20px 0;
    color: #6b7280;
    font-size: 14px;
}

/* ── Card listing rating row ────────────────────────────────── */
.cr-card-listing-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cr-card-listing-rating-num {
    font-weight: 600;
    font-size: 13px;
}
.cr-card-listing-rating small {
    color: #6b7280;
}

/* ── Location correction CTA + modal ─────────────────────────────── */
.cr-loc-correction-cta {
    background: #bfdbfe !important;
    border-left: 3px solid #0ea5e9 !important;
    padding: 10px 14px !important;
    margin: 14px 0 0 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    color: #075985 !important;
}
.cr-loc-correction-cta p { margin: 0; }
.cr-loc-correction-cta a {
    color: #0369a1;
    font-weight: 600;
    text-decoration: underline;
}

/* v0.64.0 — Approximate location variant (city/island/unknown) */
.cr-loc-correction-approx {
    background: #fef3c7;
    border-left-color: #f59e0b;
    color: #78350f;
    border-width: 4px;
}
.cr-loc-correction-approx a {
    color: #b45309;
}

.cr-loc-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
}
.cr-loc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}
.cr-loc-modal-content {
    position: relative;
    max-width: 640px;
    margin: 5vh auto;
    background: #fff;
    padding: 24px 28px;
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.3);
    max-height: 90vh;
    overflow-y: auto;
}
.cr-loc-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}
.cr-loc-modal-close:hover { color: #111827; }
.cr-loc-modal h3 { margin: 0 0 6px; font-size: 20px; }
.cr-loc-modal-hint { margin: 0 0 14px; color: #4b5563; font-size: 14px; }
.cr-loc-edit-map {
    width: 100%;
    height: 360px;
    margin-bottom: 14px;
    border-radius: 6px;
    overflow: hidden;
}
.cr-loc-modal-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}
.cr-loc-modal-label em {
    font-weight: 400;
    color: #6b7280;
}
.cr-loc-modal input[type="email"],
.cr-loc-modal textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font: inherit;
}
.cr-loc-modal-actions {
    margin: 14px 0 0;
    display: flex;
    gap: 10px;
}
.cr-loc-status { min-height: 1.5em; margin: 10px 0 0; font-size: 13px; }
.cr-loc-ok  { color: #16a34a; }
.cr-loc-err { color: #b91c1c; }

.cr-loc-drag-marker {
    background: none;
    border: none;
}
.cr-loc-drag-pin {
    background: #f97316;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid #fff;
    font-size: 16px;
    font-weight: bold;
}
.cr-loc-drag-pin::before {
    content: '';
    transform: rotate(45deg);
}

/* ── Cloaked contact data (bot protection) ────────────────────────── */
.cr-cloak-placeholder {
    color: #6b7280;
    font-style: italic;
    font-size: 0.92em;
    cursor: pointer;
    border-bottom: 1px dotted #9ca3af;
}
.cr-cloak.cr-cloak-revealed .cr-cloak-placeholder {
    display: none;
}
.cr-cloak noscript { color: #9ca3af; font-size: 0.85em; }

/* Honeypot — visually hidden, not display:none (some scrapers skip
   display:none nodes but follow visibility:hidden ones) */
.cr-honeypot-link {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ─── Admin floating toolbar on single-listing (v0.63.0) ─── */
.cr-admin-toolbar {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.94);
    color: #fff;
    border-radius: 10px;
    padding: 8px 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    font-size: 13px;
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.cr-admin-toolbar-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cr-admin-toolbar-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    margin-right: 4px;
}
.cr-admin-toolbar-label strong { color: #fff; font-weight: 600; }
.cr-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.1s ease;
}
.cr-admin-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    text-decoration: none !important;
    transform: translateY(-1px);
}
.cr-admin-btn:active { transform: translateY(0); }
.cr-admin-btn:disabled { opacity: 0.55; cursor: wait; }
.cr-admin-btn-edit { border-color: rgba(96, 165, 250, 0.5); }
.cr-admin-btn-edit:hover { background: rgba(59, 130, 246, 0.25); }
.cr-admin-btn-trash { border-color: rgba(248, 113, 113, 0.5); }
.cr-admin-btn-trash:hover { background: rgba(220, 38, 38, 0.3); }
.cr-admin-btn-merge { border-color: rgba(129, 140, 248, 0.6); }
.cr-admin-btn-merge:hover { background: rgba(99, 102, 241, 0.3); }
.cr-admin-btn-shortcut { border-color: rgba(199, 222, 232, 0.5); }
.cr-admin-btn-shortcut:hover { background: rgba(199, 222, 232, 0.22); }

@media (max-width: 640px) {
    .cr-admin-toolbar {
        bottom: 12px; left: 12px; padding: 6px 10px;
        font-size: 12px;
    }
    .cr-admin-toolbar-label { display: none; }
}

/* ─── Nearby Listings (v0.66.88) ───────────────────────────────────────
   Pre-built cards rendered from the nearby_cache JSON column.
   v0.66.107: relocated from main column section to the right sidebar
   under the Claim card, so the main column stays focused on
   description / reviews / FAQ. Now always single-column. */

.cr-sidebar-nearby {
    /* Card padding inherited from .cr-card; we just style the inside. */
}
.cr-sidebar-nearby-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}
.cr-nearby-subhead {
    margin: 14px 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
}
.cr-nearby-subhead:first-of-type {
    margin-top: 0;
}

/* v0.66.107: sidebar version is always single-column, narrower cards.
   The main-column grid (auto-fill repeat) doesn't make sense in a
   ~280px sidebar. */
.cr-nearby-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cr-nearby-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    min-height: 60px;
    transition: transform 0.1s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.cr-nearby-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.cr-nearby-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 5px;
    background-color: #f1f5f9;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.cr-nearby-thumb-init {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
    font-family: Raleway, sans-serif;
}

.cr-nearby-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
}
.cr-nearby-name {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
    color: #0f172a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cr-nearby-city,
.cr-nearby-cat {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cr-nearby-dist {
    font-size: 10px;
    color: #16a34a;
    font-weight: 600;
    margin-top: 1px;
}

.cr-nearby-more {
    margin: 8px 0 0;
    font-size: 12px;
}
.cr-nearby-more a {
    color: #027AC1;
    text-decoration: none;
    font-weight: 600;
}
.cr-nearby-more a:hover {
    text-decoration: underline;
}

/* ─── WhatsApp Contact Button (v0.66.91) ───────────────────────────────
   Prominent green CTA shown in the sidebar contact card when the listing
   has a WhatsApp number. v0.66.91 dropped the cloak wrapper — the button
   is now a standalone <a> with the URL stored base64 in a data attribute;
   a click handler in frontend.js decodes and opens it. */

.cr-contact-whatsapp-li {
    list-style: none;
    padding: 0 !important;
    margin: 0 0 8px !important;
}
.cr-contact-whatsapp-li::before { content: none !important; }

.cr-whatsapp-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    background: #25D366;          /* WhatsApp brand green */
    color: #fff !important;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.2px;
    border: none;
    border-radius: 8px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 2px 6px rgba(37,211,102,0.18);
}
.cr-whatsapp-btn:hover {
    background: #1ebd5b;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 4px 12px rgba(37,211,102,0.28);
}
.cr-whatsapp-btn:active {
    transform: translateY(0);
}
.cr-whatsapp-btn:focus-visible {
    outline: 2px solid #128c7e;
    outline-offset: 2px;
}

/* ─── Apostille CTA card (v0.66.93) ────────────────────────────────────
   Shown only on listings with category_slug='embassies-consulates'.
   Gold-bordered card right under the Contact section, linking out to
   apostille.sc — the sister property that handles authentication
   of the documents a visitor would typically need from an embassy. */

.cr-card-apostille {
    border-left: 3px solid #CAA967 !important;
    background: #fffbeb !important;
}
/* v0.66.94: three stacked questions, each as its own <p>. The first
   question mentions the specific embassy; the next two cover the
   Supreme Court + MoFA legalisation routes. All three lead to the
   same apostille.sc CTA below. */
.cr-apostille-q {
    margin: 0 0 6px;
    font-size: 13px;
    color: #78350f;
    line-height: 1.4;
}
.cr-apostille-q:last-of-type {
    margin-bottom: 12px;
}
.cr-apostille-q strong {
    color: #78350f;
    font-weight: 700;
}
.cr-apostille-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    background: #11202a;          /* dark brand — contrasts with the gold */
    color: #fff !important;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.2px;
    border: none;
    border-radius: 8px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 2px 6px rgba(202,169,103,0.32);
}
.cr-apostille-btn:hover {
    background: #1d3344;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.14), 0 4px 12px rgba(202,169,103,0.42);
}
.cr-apostille-btn:active {
    transform: translateY(0);
}
.cr-apostille-btn:focus-visible {
    outline: 2px solid #CAA967;
    outline-offset: 2px;
}

/* ─── FAQ section card (v0.66.111) ─────────────────────────────────────
   The FAQ at the end of the main column is wrapped in <section class
   ="cr-card cr-section cr-faq-section"> for visual consistency with
   Description / Reviews. The dns-legal-faq plugin renders its own
   <div class="dnsl-faq-section"> inside with margin: 30px 0 !important
   — kill that margin so the card padding handles the spacing instead. */

.cr-faq-section .dnsl-faq-section {
    margin: 0 !important;
}
.cr-faq-section .dnsl-faq-title {
    margin-top: 0 !important;
}

/* ─── v0.66.229: "Explore more" block at end of single listings ─── */
.cr-explore-more {
    background: linear-gradient(135deg, #2c3e50 0%, #55637D 100%);
    color: #c7dee8;
    padding: 48px 24px;
    margin-top: 40px;
    text-align: center;
}
.cr-explore-more-inner {
    max-width: 720px;
    margin: 0 auto;
}
.cr-explore-more-title {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.cr-explore-more-sub {
    color: #c7dee8;
    font-size: 16px;
    margin: 0 0 24px;
    opacity: 0.95;
}

/* v0.66.230: Aligned heights for search input + button.
   Both elements use box-sizing:border-box and explicit height so
   they line up regardless of font-size or border differences. */
.cr-search-form-explore,
.cr-search-form-archive {
    display: flex;
    gap: 8px;
    max-width: 560px;
}
.cr-search-form-explore { margin: 0 auto; }
.cr-search-form-archive { margin: 18px 0 0; }

.cr-search-form-explore .cr-search-input,
.cr-search-form-explore .cr-btn,
.cr-search-form-archive .cr-search-input,
.cr-search-form-archive .cr-btn {
    box-sizing: border-box !important;
    /* v0.66.245: height + min-height + line-height all locked with
       !important — Enfold applies its own input/button line-height and
       min-height on mobile which made the button taller than the input. */
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    font-size: 15px !important;
    line-height: 46px !important;
    border-radius: 6px;
    margin: 0 !important;
    vertical-align: middle;
}

.cr-search-form-explore .cr-search-input,
.cr-search-form-archive .cr-search-input {
    flex: 1;
    padding: 0 16px;
    background: #ffffff;
    color: #1f2937;
}
.cr-search-form-explore .cr-search-input {
    border: 1px solid #c7dee8;
}
.cr-search-form-archive .cr-search-input {
    border: 1px solid rgba(199, 222, 232, 0.5);
    background: rgba(255,255,255,0.98);
}

.cr-search-form-explore .cr-btn,
.cr-search-form-archive .cr-btn {
    flex-shrink: 0;
    padding: 0 24px;
    background: #c7dee8;
    color: #2c3e50;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
.cr-search-form-explore .cr-btn:hover,
.cr-search-form-archive .cr-btn:hover {
    background: #ffffff;
    color: #1a2a3a;
}

.cr-explore-more-links {
    color: #c7dee8;
    font-size: 14px;
    margin: 20px 0 0;
    opacity: 0.85;
}
.cr-explore-more-links a {
    color: #ffffff;
    text-decoration: underline;
}
.cr-explore-more-links a:hover {
    color: #c7dee8;
}

@media (max-width: 600px) {
    .cr-search-form-explore,
    .cr-search-form-archive {
        flex-direction: column;
    }
    .cr-search-form-explore .cr-btn,
    .cr-search-form-archive .cr-btn {
        width: 100%;
    }
    .cr-explore-more {
        padding: 32px 16px;
    }
    .cr-explore-more-title {
        font-size: 22px;
    }
}

/* ─── v0.66.230: Featured listings block in category archives ─── */
.cr-featured-block {
    margin: 0 0 48px;
    padding: 28px 24px 24px;
    background: linear-gradient(135deg, rgba(199, 222, 232, 0.18) 0%, rgba(85, 99, 125, 0.08) 100%);
    border: 1px solid rgba(44, 62, 80, 0.12);
    border-radius: 12px;
    position: relative;
}
.cr-featured-block-title {
    color: #2c3e50;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cr-featured-block-title .cr-featured-star {
    color: #f59e0b;
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3));
}
.cr-featured-block-sub {
    color: #475569;
    font-size: 14px;
    margin: 0 0 20px;
}

/* Featured listing grid — larger cards (2 columns instead of 3, more space) */
.cr-listing-grid--featured {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Featured cards: bigger image, border highlight, lift on hover */
.cr-listing-grid--featured .cr-card-listing {
    border: 2px solid #c7dee8;
    box-shadow: 0 4px 14px rgba(44, 62, 80, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
}
.cr-listing-grid--featured .cr-card-listing:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(44, 62, 80, 0.15);
    border-color: #2c3e50;
}
.cr-listing-grid--featured .cr-card-listing-img-wrap {
    height: 200px;
}
.cr-listing-grid--featured .cr-card-listing-body {
    padding: 18px 18px 20px;
}
.cr-listing-grid--featured .cr-card-listing-title {
    font-size: 19px;
    font-weight: 700;
}
.cr-listing-grid--featured .cr-card-listing-featured {
    background: #2c3e50;
    color: #c7dee8;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Featured CTA — "Want your business featured here?" */
.cr-featured-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px;
    background: #2c3e50;
    color: #c7dee8;
    border-radius: 8px;
    margin-top: 8px;
}
.cr-featured-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.cr-featured-cta-text strong {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}
.cr-featured-cta-text span {
    color: #c7dee8;
    font-size: 14px;
    opacity: 0.92;
}
.cr-featured-cta-btn {
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 12px 22px;
    background: #c7dee8;
    color: #2c3e50;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.cr-featured-cta-btn:hover {
    background: #ffffff;
    color: #1a2a3a;
}

/* Section heading separating regular listings after featured */
.cr-regular-listings-h {
    color: #2c3e50;
    font-size: 22px;
    font-weight: 700;
    margin: 8px 0 18px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 720px) {
    .cr-featured-cta {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
    .cr-featured-cta-btn {
        width: 100%;
    }
    .cr-featured-block {
        padding: 22px 18px 18px;
    }
    .cr-featured-block-title {
        font-size: 20px;
    }
}

/* ── Verified badge offer (sidebar, replaces old claim CTA) v0.66.255 ── */
.cr-sidebar-badge .cr-badge-head{font-weight:700;color:#144a90;margin:0 0 4px;font-size:15px;line-height:1.3}
.cr-sidebar-badge .cr-badge-sub{margin:0 0 12px;font-size:13px;color:#5b6b7e;line-height:1.45}
.cr-sidebar-badge .cr-badge-opt{padding:11px 0;border-top:1px solid #eef1f5}
.cr-sidebar-badge .cr-badge-opt:first-of-type{border-top:0;padding-top:2px}
.cr-sidebar-badge .cr-badge-prev{margin-bottom:9px;overflow-x:auto;max-width:100%}
.cr-sidebar-badge .cr-badge-copy{font:600 12px system-ui,-apple-system,sans-serif;border:1px solid #144a90;background:#fff;color:#144a90;border-radius:5px;padding:6px 13px;cursor:pointer;transition:background .12s,color .12s}
.cr-sidebar-badge .cr-badge-copy:hover{background:#144a90;color:#fff}
.cr-sidebar-badge .cr-badge-correct{margin:14px 0 0;font-size:12px}
.cr-sidebar-badge .cr-badge-correct a{color:#9aa6b4;text-decoration:underline}
.cr-sidebar-badge .cr-badge-correct a:hover{color:#5b6b7e}
.cr-sidebar-badge textarea.cr-badge-code{position:absolute;left:-9999px;top:auto;width:1px;height:1px;opacity:0;border:0}

/* ── Verified-badge modal content (v0.66.256) ── */
.cr-badge-modal .cr-modal-dialog{max-width:560px;width:calc(100% - 32px);max-height:88vh;overflow:auto}
.cr-bm-lead{font-size:14px;color:#5b6b7e;line-height:1.5;margin:0 0 14px}
.cr-bm-benefits{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.cr-bm-benefits li{font-size:13.5px;color:#16263d;padding-left:22px;position:relative;line-height:1.4}
.cr-bm-benefits li::before{content:"\2713";position:absolute;left:0;top:0;color:#144a90;font-weight:700}
.cr-bm-opt{border-top:1px solid #eef1f5;padding:14px 0}
.cr-bm-label{font:600 13px system-ui,-apple-system,sans-serif;color:#144a90;margin-bottom:10px}
.cr-bm-prev{background:#f7fafe;border:1px dashed #c7d6ea;border-radius:8px;padding:16px;display:flex;justify-content:center;margin-bottom:10px;overflow-x:auto}
.cr-bm-code{position:relative}
.cr-bm-code textarea{width:100%;height:60px;resize:none;font:11px/1.5 ui-monospace,monospace;color:#33415c;background:#f8fafc;border:1px solid #e3e9f1;border-radius:7px;padding:10px 12px}
.cr-bm-code .cr-badge-copy{position:absolute;top:8px;right:8px;padding:5px 12px}

/* header "Get your free badge" link — highlighted */
.cr-hero .cr-meta-badge,
.cr-meta-link.cr-meta-badge{color:#c7dee8;font-weight:700}
.cr-meta-link.cr-meta-badge:hover{color:#c7dee8;text-decoration:underline}

/* Company-type badge in the listing header */
.cr-company-type{display:inline-block;margin:2px 0 10px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.3}
.cr-ct-domestic{background:#c7dee8;color:#2c3e50;border:1px solid #2c3e50}
.cr-ct-ibc{background:rgba(120,180,220,.18);color:#c7dee8;border:1px solid rgba(120,180,220,.55)}

/* IBC archive entry — facts + certificate box */
.cr-ibc-facts .cr-ibc-intro{color:#475569;margin:0 0 14px}
.cr-ibc-table{width:100%;border-collapse:collapse !important;border:2px solid #2c3e50 !important}
.cr-ibc-table th,.cr-ibc-table td{text-align:left;padding:10px 12px;border:1px solid #2c3e50 !important;vertical-align:top}
.cr-ibc-table th{width:200px;color:#11202a;font-weight:700;white-space:nowrap;background:#f8fafc}
.cr-ibc-table td{color:#2c3e50}
.cr-ibc-cert h2{margin-top:0}
.cr-ibc-cert p{color:#2c3e50;margin:0}

/* IBC generated wordmark logo + IBC-number image */
.cr-ibc-mediabox{padding-top:20px;padding-bottom:20px}
.cr-ibc-namelogo{display:inline-block;max-width:100%;background:#2c3e50;color:#c7dee8;font-family:'Lato','Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:clamp(18px,2.4vw,24px);letter-spacing:.03em;line-height:1.18;padding:13px 20px;border:2px solid #6786a1;border-radius:10px;margin:0 0 12px}
.cr-ibc-founded{color:#6786a1;font-weight:600;font-size:15px;margin:0 0 16px}
.cr-ibc-media{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:0}
.cr-ibc-emblem{width:88px;height:88px;flex:0 0 auto;display:block}
.cr-ibc-numimg{height:84px;width:auto;max-width:100%;display:block}
.cr-ibc-namelogo-img{display:block;max-width:min(100%,520px);width:auto;height:auto;margin:0 0 12px}
.cr-ibc-numimg-img{height:84px;width:auto;max-width:100%;display:block}
.cr-ibc-numimg-img.cr-ibc-emblem-img{height:88px}
@media(max-width:640px){.cr-ibc-numimg{height:auto;width:100%;max-width:340px}.cr-ibc-numimg-img{height:auto;width:100%;max-width:340px}.cr-ibc-numimg-img.cr-ibc-emblem-img{width:88px;height:88px}}

/* IBC simple text logo (real text, Google-readable — no image) */
.cr-ibc-logo-text{font-family:Georgia,'Times New Roman',serif;font-size:22px;font-weight:700;color:#11202a;letter-spacing:.02em;display:inline-block;padding:2px 0 8px;border-bottom:2px solid #c79a52;margin:0 0 16px}
.cr-ibc-prose p{margin:0 0 12px}

/* IBC Official Documents box — real WooCommerce products */
.cr-ibc-docs h2{margin-top:0}
.cr-ibc-docs-sub{color:#2c3e50;margin:0 0 14px}
.cr-ibc-docs-list{list-style:none;margin:0;padding:0}
.cr-ibc-docs-item{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;border-top:1px solid #e6edf2}
.cr-ibc-docs-item:first-child{border-top:none}
.cr-ibc-docs-name{flex:1 1 220px;font-weight:600;color:#11202a}
.cr-ibc-docs-price{font-weight:700;color:#2c3e50;white-space:nowrap}
.cr-ibc-docs-price .amount{white-space:nowrap}
.cr-ibc-docs-buy{display:inline-block;background:#2c3e50;color:#fff;font-weight:700;text-decoration:none;padding:9px 18px;border-radius:8px;border:2px solid #2c3e50;transition:background .15s,color .15s}
.cr-ibc-docs-buy:hover{background:#fff;color:#2c3e50}
.cr-ibc-docs-foot{color:#6786a1;font-size:13px;margin:14px 0 0}

/* ════════════════════════ PREV/NEXT NAV ARROWS ═══════════════════════ */
/* v0.66.387: Enfold-style edge arrows on single-listing pages.
   Fixed to the viewport's vertical centre, on the left and right edges.
   Tooltip with the neighbour listing's name appears on hover.
   Hidden on mobile/tablet where the sidebar collapses — edge arrows
   would compete with content on narrow screens. */
.cr-nav-arrows {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none; /* let clicks fall through everywhere except the arrows themselves */
    z-index: 90;          /* above page content, below sticky tabs (100) and modals (10000+) */
}
.cr-nav-arrow {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 80px;
    background: #2c3e50;
    color: #c7dee8;
    box-shadow: var(--cr-shadow-h);
    border: 1px solid #2c3e50;
    text-decoration: none;
    pointer-events: auto; /* re-enable clicks on the arrow itself */
    transition: background 0.18s ease,
                color 0.18s ease,
                width 0.18s ease,
                box-shadow 0.18s ease,
                transform 0.18s ease;
}
.cr-nav-prev {
    left: 0;
    border-left: none;
    border-radius: 0 var(--cr-radius) var(--cr-radius) 0;
}
.cr-nav-next {
    right: 0;
    border-right: none;
    border-radius: var(--cr-radius) 0 0 var(--cr-radius);
}
.cr-nav-arrow:hover,
.cr-nav-arrow:focus-visible {
    background: #1f2d3a;
    color: #fff;
    border-color: #1f2d3a;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    outline: none;
}
.cr-nav-prev:hover,
.cr-nav-prev:focus-visible {
    transform: translateX(2px); /* small nudge inward on hover */
}
.cr-nav-next:hover,
.cr-nav-next:focus-visible {
    transform: translateX(-2px);
}
.cr-nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
}

/* Tooltip label — the neighbour's name reveals on hover.
   Positioned next to the arrow (inside the viewport), pill-shaped,
   inherits the hover color scheme so it matches the arrow state. */
.cr-nav-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #2c3e50;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    padding: 8px 12px;
    border-radius: var(--cr-radius);
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    pointer-events: none; /* tooltip never intercepts clicks */
}
.cr-nav-prev .cr-nav-label {
    left: calc(100% + 8px);
}
.cr-nav-next .cr-nav-label {
    right: calc(100% + 8px);
}
.cr-nav-arrow:hover .cr-nav-label,
.cr-nav-arrow:focus-visible .cr-nav-label {
    opacity: 1;
    visibility: visible;
}

/* Hide on tablet/mobile — sidebar collapses around 920px and edge
   arrows would overlap content on narrow viewports. */
@media (max-width: 920px) {
    .cr-nav-arrows {
        display: none;
    }
}

/* Respect users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .cr-nav-arrow,
    .cr-nav-label {
        transition: none;
    }
    .cr-nav-prev:hover,
    .cr-nav-next:hover {
        transform: none;
    }
}