/* =========================================================================
   Modern design system — Trustpilot-inspired, mobile-first.
   Used across all front-office pages. Admin keeps its own legacy styles.
   ========================================================================= */

/* ---------- Bootstrap 4 → 5 utility shim ----------
   Keeps legacy markup working after the BS5 upgrade so we don't have to
   refactor every blade in one go. Each rule maps a removed BS4 class to
   its BS5 behavioural equivalent. Remove this block once all views use the
   new utility names natively. */
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.ml-0    { margin-left: 0 !important; }
.ml-1    { margin-left: .25rem !important; }
.ml-2    { margin-left: .5rem !important; }
.ml-3    { margin-left: 1rem !important; }
.ml-4    { margin-left: 1.5rem !important; }
.ml-5    { margin-left: 3rem !important; }
.mr-0    { margin-right: 0 !important; }
.mr-1    { margin-right: .25rem !important; }
.mr-2    { margin-right: .5rem !important; }
.mr-3    { margin-right: 1rem !important; }
.mr-4    { margin-right: 1.5rem !important; }
.mr-5    { margin-right: 3rem !important; }
.pl-0    { padding-left: 0 !important; }
.pl-1    { padding-left: .25rem !important; }
.pl-2    { padding-left: .5rem !important; }
.pl-3    { padding-left: 1rem !important; }
.pl-4    { padding-left: 1.5rem !important; }
.pr-0    { padding-right: 0 !important; }
.pr-1    { padding-right: .25rem !important; }
.pr-2    { padding-right: .5rem !important; }
.pr-3    { padding-right: 1rem !important; }
.pr-4    { padding-right: 1.5rem !important; }

.text-left  { text-align: left !important; }
.text-right { text-align: right !important; }
.float-left  { float: left !important; }
.float-right { float: right !important; }

.font-weight-bold    { font-weight: 700 !important; }
.font-weight-normal  { font-weight: 400 !important; }
.font-weight-light   { font-weight: 300 !important; }
.font-weight-bolder  { font-weight: bolder !important; }
.font-weight-lighter { font-weight: lighter !important; }

.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.no-gutters > .col, .no-gutters > [class*="col-"] { padding-left: 0; padding-right: 0; }

/* .btn-block was removed in BS5 (use .d-grid .gap-2 + .w-100 on the button) */
.btn-block { display: block !important; width: 100% !important; }
.mc-btn-block { display: flex !important; width: 100% !important; }

/* .form-group was removed too — keep its 1rem bottom margin alive */
.form-group { margin-bottom: 1rem; }

/* BS4 close button → BS5 btn-close (visual stub so the X still shows) */
button.close {
    background: transparent; border: none; padding: 0;
    font-size: 1.5rem; line-height: 1; opacity: .5; cursor: pointer;
}
button.close:hover { opacity: .8; }

/* BS4 input-group append/prepend stayed in BS5 as plain .input-group-text,
   but the wrapper divs are no longer needed. Existing markup still renders
   correctly without the wrapper styles. */
.input-group-prepend, .input-group-append { display: flex; }

/* BS4 badge-* → BS5 .bg-* + .text-* + .rounded-pill — keep the old aliases */
.badge-primary   { background: #1c1c1c; color: #fff; }
.badge-secondary { background: #6c757d; color: #fff; }
.badge-success   { background: var(--mc-success); color: #fff; }
.badge-info      { background: #e8edff; color: #3a4dff; }
.badge-warning   { background: var(--mc-star); color: #1c1c1c; }
.badge-danger    { background: var(--mc-danger); color: #fff; }
.badge-light     { background: #f6f7f9; color: #1c1c1c; }
.badge-dark      { background: #1c1c1c; color: #fff; }
.badge-pill      { border-radius: var(--mc-radius-pill); }

/* BS5 dropped .sr-only — keep it as alias for .visually-hidden */
.sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}


:root {
    --mc-bg:        #f6f7f9;
    --mc-surface:   #ffffff;
    --mc-border:    #e7eaef;
    --mc-text:      #1c1c1c;
    --mc-text-soft: #3c4350;
    --mc-muted:     #6c757d;
    --mc-link:      #5b6cff;
    --mc-link-hover:#3a4dff;
    --mc-star:      #ffb400;
    --mc-success:   #1c7a3e;
    --mc-success-bg:#e6f7ec;
    --mc-warn:      #9a5b14;
    --mc-warn-bg:   #fdf0e3;
    --mc-premium:   #9a7416;
    --mc-premium-bg:#fdf5e7;
    --mc-danger:    #c0303d;
    --mc-danger-bg: #fdecee;
    --mc-radius:    16px;
    --mc-radius-sm: 12px;
    --mc-radius-pill: 999px;
    --mc-shadow:    0 1px 2px rgba(15,23,42,.04);
}

/* ---------- Base / typography ---------- */
body {
    background: var(--mc-bg);
    color: var(--mc-text);
    font-family: 'Inter', 'Helvetica Neue', 'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 !important;
    padding-top: 0 !important; /* override legacy app.css fixed-top compensation */
}
main[role="main"] { margin: 0; padding: 0; }
.mc-page { padding: 0 0 40px; }
@media (min-width: 768px) { .mc-page { padding: 0 0 48px; } }
.mc-page > .container,
.mc-page > .container-fluid { padding-top: 16px; }
@media (min-width: 768px) {
    .mc-page > .container,
    .mc-page > .container-fluid { padding-top: 24px; }
}

h1, h2, h3, h4, h5 { color: var(--mc-text); font-weight: 700; letter-spacing: -.01em; }
a  { color: var(--mc-link); }
a:hover { color: var(--mc-link-hover); }

/* ---------- Cards ---------- */
.mc-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 22px;
    box-shadow: var(--mc-shadow);
}
.mc-card + .mc-card,
.mc-card + .mc-soft-card,
.mc-soft-card + .mc-card { margin-top: 14px; }
.mc-soft-card {
    background: var(--mc-surface);
    border-radius: var(--mc-radius);
    padding: 18px;
}
.mc-card-light { background: #fbfbfd; }
.mc-card-tinted { background: #fffdf6; border-color: #f5e6bf; }

/* Side-by-side info cards */
.mc-side-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 14px;
    padding: 18px;
}
.mc-side-card + .mc-side-card { margin-top: 14px; }
.mc-side-card h3 { font-size: 15px; font-weight: 600; color: var(--mc-text); margin: 0 0 8px; }
.mc-side-card .text-muted-modern { color: var(--mc-muted); font-size: 14px; line-height: 1.5; }

/* Mobile-first: edge-to-edge cards on small screens */
@media (max-width: 575.98px) {
    .mc-card-flush-mobile {
        border-left: none; border-right: none;
        border-radius: 0;
        margin-left: -15px; margin-right: -15px;
    }
}

/* ---------- Buttons ---------- */
.mc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; border-radius: var(--mc-radius-pill);
    font-size: 14px; font-weight: 500;
    border: 1px solid transparent; cursor: pointer;
    text-decoration: none; transition: all .15s ease;
    line-height: 1;
}
.mc-btn:hover { text-decoration: none; }
.mc-btn-primary {
    background: var(--mc-text); color: #fff; border-color: var(--mc-text);
}
.mc-btn-primary:hover { background: #000; color: #fff; }
.mc-btn-outline {
    background: var(--mc-surface); color: var(--mc-text); border-color: var(--mc-border);
}
.mc-btn-outline:hover { background: var(--mc-bg); color: var(--mc-text); }
.mc-btn-success {
    background: var(--mc-success); color: #fff; border-color: var(--mc-success);
}
.mc-btn-success:hover { background: #15622f; color: #fff; }
.mc-btn-danger {
    background: var(--mc-danger); color: #fff; border-color: var(--mc-danger);
}
.mc-btn-block { display: flex; width: 100%; }
.mc-btn-lg { padding: 14px 22px; font-size: 15px; }
.mc-btn-sm { padding: 7px 14px; font-size: 13px; }

/* Map Bootstrap buttons to modern look without breaking existing markup */
.btn { border-radius: var(--mc-radius-pill) !important; font-weight: 500; transition: all .15s ease; }
.btn-primary { background: var(--mc-text) !important; border-color: var(--mc-text) !important; }
.btn-primary:hover, .btn-primary:focus { background: #000 !important; border-color: #000 !important; }
.btn-warning { background: var(--mc-star) !important; border-color: var(--mc-star) !important; color: #1c1c1c !important; }
.btn-warning:hover { filter: brightness(0.95); }
.btn-success { background: var(--mc-success) !important; border-color: var(--mc-success) !important; }
.btn-block { border-radius: var(--mc-radius-pill) !important; }

/* ---------- Pills / badges ---------- */
.mc-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    padding: 4px 12px; border-radius: var(--mc-radius-pill);
    line-height: 1.4;
}
.mc-pill-verified { background: var(--mc-success-bg); color: var(--mc-success); }
.mc-pill-unclaimed { background: var(--mc-warn-bg); color: var(--mc-warn); }
.mc-pill-premium { background: var(--mc-premium-bg); color: var(--mc-premium); }
.mc-pill-info { background: #e8edff; color: #3a4dff; }
.mc-pill-muted { background: var(--mc-bg); color: var(--mc-muted); }

/* ---------- Form inputs ---------- */
.form-control,
.mc-input {
    border-radius: var(--mc-radius-sm) !important;
    border: 1px solid var(--mc-border) !important;
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.mc-input:focus {
    border-color: var(--mc-link) !important;
    box-shadow: 0 0 0 3px rgba(91,108,255,.1) !important;
}
textarea.form-control { padding: 12px 14px; min-height: 88px; }
label, .mc-label {
    font-size: 13px; font-weight: 600; color: var(--mc-text);
    margin-bottom: 6px; display: inline-block;
}

/* ---------- Stars ---------- */
.mc-stars-big { color: var(--mc-star); font-size: 24px; letter-spacing: 2px; line-height: 1; }
.mc-stars-big .off,
.mc-review-stars .off,
.mc-stars-md .off { color: #e1e3e8; }
.mc-stars-md { color: var(--mc-star); font-size: 18px; letter-spacing: 2px; line-height: 1; }
.mc-stars-sm { color: var(--mc-star); font-size: 14px; letter-spacing: 1px; line-height: 1; }
.mc-review-stars { color: var(--mc-star); font-size: 14px; letter-spacing: 2px; margin: 4px 0 6px; }

/* Trustpilot-style square stars (review cards) — white star on a colored chip,
   the colour follows the rating tier; empty stars sit on light grey. */
.tp-stars {
    display: inline-flex;
    letter-spacing: normal !important;
    font-size: 0 !important; /* collapse any whitespace between the chips */
    margin: 4px 0 12px;
}
.tp-stars .tp-star {
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #dcdce6; color: #fff !important;
    font-size: 12px; line-height: 1; border-radius: 3px;
    margin-right: 2px; /* fallback spacing if flex gap is unsupported */
}
.tp-stars .tp-star:last-child { margin-right: 0; }
.tp-stars.tp-1 .tp-star:not(.off) { background: #ff3722; }
.tp-stars.tp-2 .tp-star:not(.off) { background: #ff8622; }
.tp-stars.tp-3 .tp-star:not(.off) { background: #ffce00; }
.tp-stars.tp-4 .tp-star:not(.off) { background: #73cf11; }
.tp-stars.tp-5 .tp-star:not(.off) { background: #00b67a; }
.tp-stars .tp-star.off { background: #dcdce6; }

/* Interactive rating selector ("Leave a review") — large clickable outline
   stars, NOT the small display chips. Overrides the chip styling above. */
.tp-stars.tp-input { gap: 6px; font-size: initial !important; }
.tp-stars.tp-input .tp-star {
    background: transparent !important;
    width: auto; height: auto;
    font-size: 38px; line-height: 1;
    border-radius: 0;
    margin-right: 4px;
    color: #d2d6de !important;   /* empty star */
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}
.tp-stars.tp-input .tp-star.is-on { color: var(--mc-star) !important; }  /* hovered / selected */
.tp-stars.tp-input .tp-star:hover { transform: scale(1.12); }

/* ---------- Avatars ---------- */
.mc-avatar {
    flex-shrink: 0; border-radius: 50%; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; color: #fff; background: var(--mc-link);
    overflow: hidden;
}
.mc-avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.mc-avatar-md { width: 40px; height: 40px; font-size: 14px; }
.mc-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.mc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ---------- Headings / heroes ---------- */
.mc-hero {
    display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.mc-hero-thumb {
    width: 140px; height: 90px; flex-shrink: 0;
    border-radius: 12px; object-fit: cover; background: #eef0f3;
}
.mc-hero-main { flex: 1 1 220px; min-width: 0; }
.mc-hero-title {
    font-size: 24px; font-weight: 700; color: var(--mc-text);
    margin: 0 0 4px; line-height: 1.2;
}
.mc-hero-url { color: var(--mc-link); font-size: 14px; text-decoration: none; }
.mc-hero-url:hover { text-decoration: underline; }
.mc-rating-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.mc-rating-num { font-size: 22px; font-weight: 700; color: var(--mc-text); line-height: 1; }
.mc-rating-count { color: var(--mc-muted); font-size: 14px; }
.mc-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 575.98px) {
    .mc-hero-thumb { width: 100%; height: 140px; }
    .mc-hero-title { font-size: 20px; }
}

/* ---------- Rating distribution histogram ---------- */
.mc-dist { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mc-dist-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mc-muted); }
.mc-dist-row .label { width: 56px; color: var(--mc-text); font-weight: 500; font-size: 12px; flex-shrink: 0; }
.mc-dist-row .bar {
    flex: 1; height: 8px; background: #eef0f3;
    border-radius: var(--mc-radius-pill);
    overflow: hidden;
    display: block;
    min-width: 0;
}
.mc-dist-row .fill {
    display: block;
    height: 8px;
    width: 0;
    border-radius: var(--mc-radius-pill);
    transition: width .4s;
    background: #00b67a; /* default green — overridden per data-star below */
}
.mc-dist-row .count { width: 40px; text-align: right; font-size: 12px; flex-shrink: 0; }
/* Trustpilot-style color-coded bars */
.mc-dist-row[data-star="5"] .fill { background: #00b67a; }
.mc-dist-row[data-star="4"] .fill { background: #73cf11; }
.mc-dist-row[data-star="3"] .fill { background: #ffce00; }
.mc-dist-row[data-star="2"] .fill { background: #ff8622; }
.mc-dist-row[data-star="1"] .fill { background: #ff3722; }

/* ---------- Trustpilot-style score card ---------- */
.mc-score-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 20px 22px;
}
.mc-score-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 14px;
}
.mc-score-number { font-size: 36px; font-weight: 700; line-height: 1; color: var(--mc-text); }
.mc-score-label  { font-size: 14px; font-weight: 600; color: var(--mc-text); margin-top: 2px; }
.mc-score-trust-icons { display: flex; gap: 2px; line-height: 1; }
.mc-score-trust-icons .ti {
    display: inline-block; width: 22px; height: 22px;
    background: #00b67a; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.mc-score-trust-icons .ti.ti-half { background: linear-gradient(90deg, #00b67a 50%, #e1e3e8 50%); }
.mc-score-trust-icons .ti.ti-off  { background: #e1e3e8; }
.mc-score-trust-count { color: var(--mc-muted); font-size: 12px; margin-top: 6px; }

/* ---------- Trustpilot-style company hero ---------- */
.mc-company-hero {
    display: flex; gap: 20px; align-items: flex-start;
}
.mc-company-thumb {
    width: 160px; height: 100px; flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
    background: #eef0f3;
    border: 1px solid var(--mc-border);
}
.mc-company-info { flex: 1; min-width: 0; }
.mc-company-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mc-company-title {
    font-size: 28px; font-weight: 700; color: var(--mc-text);
    margin: 0 0 8px; line-height: 1.15; letter-spacing: -.01em;
    text-transform: uppercase;
}
.mc-company-meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px; font-size: 14px; color: var(--mc-muted);
    margin-bottom: 8px;
}
.mc-company-meta .sep { color: #ccc; }
.mc-company-cat {
    color: var(--mc-link); text-decoration: none; font-size: 14px;
    display: inline-block; margin-bottom: 12px;
}
.mc-company-cat:hover { text-decoration: underline; }
.mc-company-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Breadcrumb */
.mc-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px; font-size: 13px; color: var(--mc-muted);
    margin-bottom: 14px;
}
.mc-breadcrumb a { color: var(--mc-link); text-decoration: none; font-weight: 500; }
.mc-breadcrumb a:hover { text-decoration: underline; }
.mc-breadcrumb .sep { color: #ccc; font-size: 11px; }
.mc-breadcrumb .current { color: var(--mc-muted); font-weight: 500; }

/* Info banner card (anti-fraud notice) */
.mc-info-banner {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px; color: var(--mc-text-soft);
    margin-bottom: 14px;
}
.mc-info-banner .icon {
    flex-shrink: 0; width: 32px; height: 32px;
    border-radius: 50%; background: #e8edff; color: #3a4dff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}

/* Small stat card (e.g. response rate) */
.mc-stat-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 13px;
}
.mc-stat-card .icon {
    flex-shrink: 0; width: 32px; height: 32px;
    border-radius: 50%; background: #e6f7ec; color: var(--mc-success);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.mc-stat-card .title { font-weight: 600; color: var(--mc-text); margin-bottom: 2px; }
.mc-stat-card .sub   { color: var(--mc-muted); font-size: 12px; }

@media (max-width: 575.98px) {
    .mc-company-hero { flex-direction: column; align-items: flex-start; }
    .mc-company-thumb { width: 100%; height: 140px; }
    .mc-company-title { font-size: 22px; }
}

/* ---------- Leave-review entry ---------- */
.mc-leave-card { text-align: center; padding: 28px 20px; }
.mc-leave-card h5 { font-size: 18px; font-weight: 600; color: var(--mc-text); margin: 0 0 4px; }
.mc-leave-card p { color: var(--mc-muted); font-size: 14px; margin: 0 0 14px; }
.tp-stars {
    font-size: 40px; letter-spacing: 10px; color: #e1e3e8;
    cursor: pointer; user-select: none; line-height: 1; display: inline-block;
}
.tp-stars .tp-star { transition: color .1s; }

/* Anchor offset (sticky navbar) + visual highlight when targeted via #leave-review */
#leave-review {
    /* Push anchor target below the sticky navbar so the entire card is visible.
       Default is generous; the JS scroll handler recomputes the exact navbar
       height at runtime, but we keep a sane fallback for native :target navigation. */
    scroll-margin-top: 140px;
}
#leave-review:target,
#leave-review.mc-target-pulse {
    border-color: var(--mc-link);
    box-shadow: 0 0 0 4px rgba(91,108,255,.18);
    animation: mc-pulse-highlight 1.4s ease-out 1;
}
@keyframes mc-pulse-highlight {
    0%   { box-shadow: 0 0 0 0    rgba(91,108,255,.55); transform: scale(1.005); }
    40%  { box-shadow: 0 0 0 14px rgba(91,108,255,.18); transform: scale(1); }
    100% { box-shadow: 0 0 0 4px  rgba(91,108,255,.18); transform: scale(1); }
}

/* ---------- Review item (used in review-single and account) ---------- */
.mc-review { display: flex; gap: 14px; align-items: flex-start; }
.mc-review + .mc-review-divider { border-top: 1px solid #eef0f3; margin: 18px 0; }
.mc-review-body { flex: 1; min-width: 0; }
.mc-review-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mc-reviewer-name { font-weight: 600; color: var(--mc-text); font-size: 15px; }
.mc-review-date { color: var(--mc-muted); font-size: 13px; }
.mc-review-title { font-weight: 600; color: var(--mc-text); font-size: 15px; margin: 0 0 6px; }
.mc-review-content { color: var(--mc-text-soft); font-size: 14.5px; line-height: 1.6; margin: 0; white-space: pre-wrap; word-wrap: break-word; }
.mc-review-meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 10px; padding: 8px 12px;
    background: var(--mc-bg); border-radius: 10px;
    font-size: 12.5px; color: var(--mc-muted);
}
.mc-review-meta strong { color: var(--mc-text); font-weight: 500; }
.mc-review-meta i { margin-right: 4px; }
.mc-review-actions { margin-top: 10px; display: flex; gap: 18px; font-size: 13px; color: var(--mc-muted); }
.mc-review-actions a,
.mc-review-actions .btn-link {
    color: var(--mc-muted); text-decoration: none; cursor: pointer;
    background: none; border: none; padding: 0;
    display: inline-flex; align-items: center; gap: 5px;
}
.mc-review-actions a:hover,
.mc-review-actions .btn-link:hover { color: var(--mc-text); text-decoration: none; }
.mc-company-reply {
    margin-top: 12px; padding: 12px 14px;
    background: var(--mc-bg); border-radius: 10px; border-left: 3px solid var(--mc-star);
}
.mc-company-reply-label {
    font-size: 12px; font-weight: 600; color: var(--mc-premium);
    text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px;
}

/* ---------- Listing cards (browse / search) ---------- */
.mc-listing { display: flex; gap: 16px; align-items: center; }
.mc-listing-thumb {
    width: 96px; height: 64px; flex-shrink: 0;
    border-radius: 10px; object-fit: cover; background: #eef0f3;
}
.mc-listing-main { flex: 1; min-width: 0; }
.mc-listing-title { font-size: 17px; font-weight: 600; margin: 0 0 4px; color: var(--mc-text); }
.mc-listing-title a { color: inherit; text-decoration: none; }
.mc-listing-title a:hover { color: var(--mc-link); }
.mc-listing-meta { font-size: 13px; color: var(--mc-muted); }

@media (max-width: 575.98px) {
    .mc-listing { flex-wrap: wrap; }
    .mc-listing-thumb { width: 100%; height: 120px; }
}

/* ---------- Trustpilot-style collapsible category filter ---------- */
.mc-cat-top {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; margin-bottom: 8px;
    border-radius: 10px; background: var(--mc-bg);
    color: var(--mc-text); font-weight: 600; font-size: 14px;
    text-decoration: none; transition: background .15s;
}
.mc-cat-top:hover { background: #ecedf0; color: var(--mc-text); text-decoration: none; }
.mc-cat-top.is-active { background: var(--mc-text); color: #fff; }
.mc-cat-top.is-active i { color: var(--mc-star); }

.mc-cat-tree {
    list-style: none; padding: 0; margin: 0;
    border-top: 1px solid var(--mc-border);
}
.mc-cat-family {
    border-bottom: 1px solid var(--mc-border);
}
.mc-cat-family-head {
    display: flex; align-items: center;
    padding: 4px 0;
}
.mc-cat-family-name {
    flex: 1; padding: 10px 4px;
    color: var(--mc-text); font-weight: 500; font-size: 14px;
    text-decoration: none; min-width: 0;
}
.mc-cat-family-name:hover { color: var(--mc-link); text-decoration: none; }
.mc-cat-family-name.is-active { color: var(--mc-link); font-weight: 600; }
.mc-cat-toggle {
    flex-shrink: 0; width: 30px; height: 30px;
    border: none; background: transparent; cursor: pointer;
    border-radius: 50%; color: var(--mc-muted);
    transition: background .15s, transform .2s;
}
.mc-cat-toggle:hover { background: var(--mc-bg); color: var(--mc-text); }
.mc-cat-family.is-open .mc-cat-toggle { transform: rotate(180deg); color: var(--mc-text); }

.mc-cat-children {
    list-style: none; padding: 0 0 8px 12px; margin: 0;
    border-left: 2px solid var(--mc-border);
    margin-left: 6px;
}
.mc-cat-children li { margin: 0; }
.mc-cat-children li a {
    display: block; padding: 6px 10px;
    color: var(--mc-text-soft); font-size: 13.5px;
    text-decoration: none; border-radius: 6px;
    transition: background .12s, color .12s;
}
.mc-cat-children li a:hover {
    background: var(--mc-bg); color: var(--mc-text); text-decoration: none;
}
.mc-cat-children li a.is-active {
    background: var(--mc-text); color: #fff;
}

/* ---------- Trustpilot-style category family cards ---------- */
.mc-family-card { scroll-margin-top: 90px; }
.mc-family-title {
    font-size: 20px; font-weight: 700; margin: 0;
    letter-spacing: -.01em;
}
.mc-family-title a { color: var(--mc-text); text-decoration: none; }
.mc-family-title a:hover { color: var(--mc-link); text-decoration: none; }
.mc-family-children {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 16px;
}
.mc-family-children li { margin: 0; }
.mc-family-children li a {
    display: flex; align-items: center;
    padding: 8px 4px; color: var(--mc-text-soft);
    text-decoration: none; font-size: 14px;
    border-bottom: 1px dotted transparent;
    transition: color .12s;
}
.mc-family-children li a:hover {
    color: var(--mc-link);
    text-decoration: none;
}
.mc-family-children li a span:first-child { flex: 1; }

@media (max-width: 575.98px) {
    .mc-family-children { grid-template-columns: 1fr; }
}

/* ---------- Category chips ---------- */
.mc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--mc-radius-pill);
    background: var(--mc-surface); border: 1px solid var(--mc-border);
    font-size: 13px; font-weight: 500; color: var(--mc-text-soft);
    text-decoration: none; transition: all .15s;
}
.mc-chip:hover {
    border-color: var(--mc-text); color: var(--mc-text);
    text-decoration: none; transform: translateY(-1px);
}
.mc-chip.is-active { background: var(--mc-text); color: #fff; border-color: var(--mc-text); }

/* ---------- Pagination ---------- */
.pagination { margin-top: 20px; }
.pagination .page-item .page-link {
    border-radius: 8px !important; margin: 0 3px;
    border: 1px solid var(--mc-border); color: var(--mc-text);
    transition: all .15s;
}
.pagination .page-item .page-link:hover {
    background: var(--mc-bg); border-color: var(--mc-text); color: var(--mc-text);
}
.pagination .page-item.active .page-link {
    background: var(--mc-text); border-color: var(--mc-text); color: #fff;
}

/* ---------- Hero search (home page) — light & modern ---------- */
.mc-hero-search {
    background: linear-gradient(135deg, #fdfbf5 0%, #f5f2fb 100%);
    color: #1c1c1c;
    padding: 80px 16px;
    text-align: center;
    margin: 0 0 24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}
/* Light voile over the photo so the hero reads bright and clean */
.mc-hero-search::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.66) 100%);
    pointer-events: none;
}
.mc-hero-search > * { position: relative; z-index: 1; }
.mc-hero-search h1 {
    color: #1c1c1c; font-size: 40px; font-weight: 700;
    margin: 0 auto 16px; letter-spacing: -.02em;
    display: inline-block;
    background: var(--mc-star); /* unified brand yellow */
    padding: 14px 30px; border-radius: 20px;
    line-height: 1.2;
    box-shadow: 0 10px 30px rgba(180,140,0,.16);
}
.mc-hero-search p {
    color: #1c1c1c; font-size: 15px; margin: 0 0 28px;
    display: inline-block;
    background: var(--mc-star);
    padding: 7px 18px; border-radius: var(--mc-radius-pill); font-weight: 600;
}
.mc-hero-search-field {
    max-width: 600px; margin: 0 auto;
    display: flex; align-items: stretch;
    background: #fff; border-radius: var(--mc-radius-pill);
    padding: 6px; border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 12px 36px rgba(15,23,42,.14);
}
.mc-hero-search-field input {
    flex: 1; border: none !important; background: transparent;
    padding: 13px 20px !important; font-size: 15px;
    border-radius: var(--mc-radius-pill) !important;
    color: #1c1c1c;
}
.mc-hero-search-field input:focus { box-shadow: none !important; outline: none; }
.mc-hero-search-field button {
    border: none; background: var(--mc-text); color: #fff;
    padding: 13px 26px; border-radius: var(--mc-radius-pill);
    font-weight: 600; cursor: pointer; transition: background .15s;
}
.mc-hero-search-field button:hover { background: #000; }

@media (max-width: 575.98px) {
    .mc-hero-search { padding: 52px 16px; }
    .mc-hero-search h1 { font-size: 26px; padding: 10px 18px; border-radius: 16px; }
    .mc-hero-search p  { font-size: 13px; }
}

/* ---------- Navbar (dark gray, light text, mobile-first) ---------- */
.mc-nav {
    background: #2a2d33;
    border-bottom: 1px solid #3a3e45;
    position: sticky; top: 0; z-index: 1030;
    padding-top: 12px; padding-bottom: 12px;
}
.mc-nav .navbar-brand {
    color: #fff; font-weight: 700; font-size: 20px;
    display: flex; align-items: center; gap: 12px;
}
.mc-nav .navbar-brand:hover { color: #fff; }
/* Logo chip — yellow rounded square with a chat-bubble glyph */
.mc-nav .mc-brand-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: var(--mc-star);
    color: #1c1c1c;
    border-radius: 11px;
    font-size: 18px;
    flex: 0 0 auto;
}
.mc-nav .mc-brand-name { color: #fff; font-weight: 800; letter-spacing: -.01em; }
/* Tagline beside the wordmark, split off by a vertical divider */
.mc-nav .mc-brand-tagline {
    color: #aab0bb; font-weight: 500; font-size: 14px;
    padding-left: 14px; margin-left: 2px;
    border-left: 1px solid #3f444c;
}
@media (max-width: 991.98px) {
    .mc-nav .mc-brand-tagline { display: none; }
}
.mc-nav .nav-link {
    color: #d6d9df !important; font-weight: 500; font-size: 14px;
    padding: 8px 14px !important; border-radius: 8px;
    text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: background .15s, color .15s;
}
.mc-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff !important; }
.mc-nav .nav-item.active .nav-link { color: #fff !important; background: rgba(255,255,255,.08); }
/* Faint vertical separators between top-level nav items (desktop only) */
@media (min-width: 768px) {
    .mc-nav .navbar-nav > .nav-item + .nav-item:not(.nav-lang) {
        position: relative; margin-left: 4px; padding-left: 4px;
    }
    .mc-nav .navbar-nav > .nav-item + .nav-item:not(.nav-lang)::before {
        content: ""; position: absolute; left: 0; top: 50%;
        transform: translateY(-50%);
        width: 1px; height: 20px; background: #3f444c;
    }
}
.mc-nav .navbar-toggler {
    border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 10px;
    color: #fff;
}
.mc-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M5 8h22M5 14h22M5 20h22'/%3E%3C/svg%3E");
}
/* Language picker — boxed flag + chevron that opens a small dropdown on click */
.mc-nav .nav-lang { margin-left: 12px; }
.mc-nav .nav-lang .nav-link {
    padding: 7px 12px !important;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid #3f444c;
    border-radius: 10px;
    background: rgba(255,255,255,.03);
}
.mc-nav .nav-lang .nav-link:hover { background: rgba(255,255,255,.08); }
.mc-nav .nav-lang .fi {
    width: 1.6em; height: 1.2em;
    vertical-align: middle;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}
.mc-nav .nav-lang .mc-lang-caret { font-size: 11px; color: #aab0bb; }
.mc-nav .nav-lang .dropdown-toggle::after { display: none; } /* hide the BS caret */
.mc-nav .nav-lang .dropdown-menu {
    background: #2a2d33;
    border: 1px solid #3f444c;
    border-radius: 12px;
    padding: 6px;
    margin-top: 6px;
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
/* Slim custom scrollbar inside the language dropdown (24 entries make this useful) */
.mc-nav .nav-lang .dropdown-menu::-webkit-scrollbar { width: 6px; }
.mc-nav .nav-lang .dropdown-menu::-webkit-scrollbar-thumb { background: #4a4f57; border-radius: 3px; }
.mc-nav .nav-lang .dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.mc-nav .nav-lang .dropdown-item {
    display: flex; align-items: center; gap: 10px;
    color: #d6d9df; font-size: 14px;
    padding: 8px 12px; border-radius: 8px;
}
.mc-nav .nav-lang .dropdown-item:hover,
.mc-nav .nav-lang .dropdown-item:focus {
    background: rgba(255,255,255,.08); color: #fff;
}
.mc-nav .nav-lang .dropdown-item.is-active {
    background: rgba(255,255,255,.06); color: #fff; font-weight: 600;
}
.mc-nav .nav-lang .dropdown-item .fi {
    width: 1.6em; height: 1.2em;
}

/* CTA "Signup" pill — scoped under .mc-nav so it beats .mc-nav .nav-link's !important */
.mc-nav .mc-nav-cta {
    background: var(--mc-star) !important;
    color: #1c1c1c !important;
    padding: 9px 20px !important;
    border-radius: var(--mc-radius-pill) !important;
    font-weight: 700 !important;
    margin-left: 8px;
}
.mc-nav .mc-nav-cta i { font-size: 12px; }
.mc-nav .mc-nav-cta:hover {
    background: #e6a500 !important;
    color: #1c1c1c !important;
}

@media (max-width: 767.98px) {
    .mc-nav .navbar-collapse {
        padding-top: 12px; padding-bottom: 8px;
        border-top: 1px solid rgba(255,255,255,.08);
        margin-top: 8px;
    }
    .mc-nav .nav-link { padding: 12px 14px !important; }
}

/* ---------- Footer ---------- */
.mc-footer {
    background: #fff;
    border-top: 1px solid var(--mc-border);
    padding: 32px 0;
    margin-top: 48px;
    color: var(--mc-muted);
    font-size: 14px;
}
.mc-footer a { color: var(--mc-text-soft); text-decoration: none; }
.mc-footer a:hover { color: var(--mc-link); }

/* ---------- Account tabs ---------- */
.mc-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 6px; background: var(--mc-surface);
    border: 1px solid var(--mc-border); border-radius: var(--mc-radius-pill);
    margin-bottom: 18px; width: fit-content; max-width: 100%;
}
.mc-tabs a {
    padding: 8px 16px; border-radius: var(--mc-radius-pill);
    font-size: 14px; font-weight: 500; color: var(--mc-text-soft);
    text-decoration: none; white-space: nowrap;
    transition: all .15s;
}
.mc-tabs a:hover { background: var(--mc-bg); color: var(--mc-text); }
.mc-tabs a.is-active { background: var(--mc-text); color: #fff; }

/* ---------- Alerts / inline notices ---------- */
.alert {
    border-radius: var(--mc-radius-sm) !important;
    border: 1px solid transparent !important;
    padding: 12px 16px !important;
    font-size: 14px;
}
.alert-success { background: var(--mc-success-bg) !important; color: var(--mc-success) !important; border-color: #c1e6cf !important; }
.alert-info    { background: #e8edff !important; color: #3a4dff !important; border-color: #d6dcff !important; }
.alert-warning { background: var(--mc-warn-bg) !important; color: var(--mc-warn) !important; border-color: #f7d8b9 !important; }
.alert-danger  { background: var(--mc-danger-bg) !important; color: var(--mc-danger) !important; border-color: #f7c4cb !important; }

/* ---------- Live search dropdown (homepage search) ---------- */
.mc-search-dropdown {
    background: #fff; border: 1px solid var(--mc-border); border-radius: var(--mc-radius-sm);
    box-shadow: 0 10px 30px rgba(0,0,0,.12); margin-top: 6px;
    max-height: 380px; overflow-y: auto;
}
.mc-search-dropdown .mc-search-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; text-decoration: none; color: var(--mc-text);
    border-bottom: 1px solid #f2f4f7;
}
.mc-search-dropdown .mc-search-item:last-child { border-bottom: none; }
.mc-search-dropdown .mc-search-item:hover { background: var(--mc-bg); }
.mc-search-dropdown .mc-search-thumb {
    width: 36px; height: 36px; border-radius: 8px; background: var(--mc-bg);
    flex-shrink: 0; object-fit: cover;
}
.mc-search-dropdown .mc-search-title { font-weight: 500; font-size: 14px; }
.mc-search-dropdown .mc-search-meta  { font-size: 12px; color: var(--mc-muted); }

/* ---------- Other-locale reviews block ---------- */
.mc-other-locales {
    background: #f8f9fb; border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius); padding: 20px; margin-top: 24px;
}
.mc-other-locales h5 { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--mc-text); }
.mc-other-locales .lead-muted { font-size: 13px; color: var(--mc-muted); margin: 0 0 12px; }
.mc-lang-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 12px 16px; background: #fff;
    border: 1px solid var(--mc-border); border-radius: var(--mc-radius-sm);
    cursor: pointer; font-size: 14px; font-weight: 500; color: var(--mc-text);
    margin-bottom: 8px; transition: background .15s;
}
.mc-lang-toggle:hover { background: var(--mc-bg); }
.mc-lang-toggle .arrow { transition: transform .2s; }
.mc-lang-toggle[aria-expanded="true"] .arrow { transform: rotate(90deg); }
.mc-lang-badge { font-size: 12px; color: var(--mc-muted); font-weight: 500; }

/* ---------- Misc utility ---------- */
.mc-divider { border-top: 1px solid #eef0f3; margin: 18px 0; }
.mc-text-muted { color: var(--mc-muted) !important; }
.mc-text-soft  { color: var(--mc-text-soft); }
.mc-stack > * + * { margin-top: 12px; }
.mc-mute-bg { background: var(--mc-bg); }

/* ---------- Inner-search bar (top of every inner page) ---------- */
.inner-search { background: transparent !important; padding-top: 12px; padding-bottom: 0; }
.inner-search input.form-control { border-radius: var(--mc-radius-pill) !important; padding: 10px 18px; }