/* ════════════════════════════════════════════════════════════
   Freight Customer Reviews  –  fr-reviews.css  v1.0
   Inherits theme CSS variables from FreightPro theme.
   Mobile-first, WCAG-AA colour contrast, no layout flash.
════════════════════════════════════════════════════════════ */

/* ── Stars ───────────────────────────────────────────────── */
.fr-stars { display:inline-flex; gap:1px; line-height:1; }
.fr-star   { font-size:16px; transition:transform .15s; }
.fr-star-full  { color:#f59e0b; }
.fr-star-half  { color:#f59e0b; opacity:.55; }
.fr-star-empty { color:#d1d5db; }

/* ── Overall avg badge (shortcode [fr_avg]) ──────────────── */
.fr-avg-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 40px;
    padding: 6px 18px;
    font-size: 15px;
    flex-wrap: wrap;
}
.fr-avg-badge strong { color: #92400e; font-size:17px; }
.fr-avg-label  { color: #78350f; font-weight:600; }
.fr-avg-count  { color: #92400e; font-size:13px; }

/* ── Hero section ────────────────────────────────────────── */
.fr-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 60%, #1d4ed8 100%);
    color: #fff;
    padding: clamp(48px,7vw,88px) 0 clamp(40px,5vw,72px);
    text-align: center;
}
.fr-hero h1 { color:#fff; margin-bottom:12px; }
.fr-hero-sub { color:rgba(255,255,255,.8); font-size:17px; max-width:580px; margin:0 auto 24px; }
.fr-hero .fp-eyebrow { justify-content:center; color:rgba(255,255,255,.75); }
.fr-hero .fp-eyebrow::before { background:rgba(255,255,255,.5); }
.fr-hero .fp-eyebrow a { color:inherit; text-decoration:underline; }
.fr-hero-avg {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 40px;
    padding: 8px 22px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 15px;
    color: rgba(255,255,255,.9);
    margin-top: 8px;
}
.fr-hero-avg strong { color:#fbbf24; }
.fr-hero-avg .fr-stars .fr-star { font-size:18px; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.fr-breadcrumb {
    background: var(--fp-lighter,#f8fafc);
    border-top: 1px solid var(--fp-border,#e2e8f0);
    padding: 14px 0;
    font-size:13px;
    color: var(--fp-grey,#64748b);
}
.fr-breadcrumb a { color:var(--fp-blue,#1e40af); }
.fr-breadcrumb span[aria-hidden] { margin:0 6px; }

/* ── Gallery wrap ────────────────────────────────────────── */
.fr-gallery-wrap { max-width:100%; }

/* Overall avg bar */
.fr-overall-avg {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.fr-overall-avg .fr-stars .fr-star { font-size:22px; }
.fr-overall-meta { display:flex; flex-direction:column; gap:2px; }
.fr-overall-meta strong { font-size:20px; color:#92400e; }
.fr-overall-meta span   { font-size:14px; color:#78350f; }

/* ── Country tabs ────────────────────────────────────────── */
.fr-country-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.fr-country-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 2px solid var(--fp-border,#e2e8f0);
    border-radius: 40px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-dark,#1e293b);
    transition: all .2s ease;
    white-space: nowrap;
}
.fr-country-tab:hover {
    border-color: var(--fp-blue,#1e40af);
    background: var(--fp-blue-xlt,#eff6ff);
    color: var(--fp-blue,#1e40af);
    transform: translateY(-1px);
}
.fr-country-tab.is-active {
    border-color: var(--fp-blue,#1e40af);
    background: var(--fp-blue,#1e40af);
    color: #fff;
}
.fr-tab-flag  { font-size:18px; line-height:1; }
.fr-tab-avg   { font-size:12px; opacity:.85; }
.fr-tab-count {
    background: rgba(0,0,0,.1);
    border-radius: 20px;
    padding: 1px 7px;
    font-size:11px;
    min-width:22px;
    text-align:center;
}
.fr-country-tab.is-active .fr-tab-count { background:rgba(255,255,255,.25); }

/* ── Country panel ───────────────────────────────────────── */
.fr-country-panel { display:none; }
.fr-country-panel.is-active { display:block; animation:fr-fadein .35s ease; }
@keyframes fr-fadein { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.fr-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--fp-border,#e2e8f0);
}
.fr-panel-flag   { font-size:42px; line-height:1; flex-shrink:0; }
.fr-panel-title  { font-size:clamp(18px,3vw,24px); margin:0 0 6px; }
.fr-panel-avg    { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; }
.fr-panel-avg strong { font-size:16px; color:var(--fp-dark,#1e293b); }

/* ── Review grid ─────────────────────────────────────────── */
.fr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%,300px),1fr));
    gap: 20px;
}

/* Cards start hidden beyond index 6 (0-based) on desktop, 1 on mobile */
.fr-card {
    background: #fff;
    border: 1px solid var(--fp-border,#e2e8f0);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Fade-in on reveal — starts visible, JS adds fr-card-in for subtle animation */
    opacity: 1;
    transform: none;
    transition: box-shadow .2s, transform .2s;
}
.fr-card.fr-card-in {
    animation: frCardIn .35s ease both;
}
@keyframes frCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.fr-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    transform: translateY(-2px);
}
/* Keep fr-visible as a no-op so old markup stays safe */
.fr-card.fr-visible { opacity: 1; transform: none; }

/* Card header */
.fr-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.fr-card-flag  { font-size:28px; line-height:1; flex-shrink:0; }
.fr-card-meta  { flex:1; min-width:0; }
.fr-card-name  { display:block; font-size:15px; color:var(--fp-dark,#1e293b); }
.fr-card-country { font-size:12px; color:var(--fp-grey,#64748b); }
.fr-card-overall { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; }
.fr-card-avg-num { font-size:13px; font-weight:700; color:var(--fp-dark,#1e293b); }

/* Score rows */
.fr-card-scores { display:flex; flex-direction:column; gap:8px; }
.fr-score-row   { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fr-score-label { font-size:12px; color:var(--fp-grey,#64748b); flex-shrink:0; }
.fr-score-row .fr-stars .fr-star { font-size:13px; }

/* Description */
.fr-card-desc {
    font-size:14px;
    line-height:1.6;
    color:var(--fp-mid,#334155);
    flex:1;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Footer */
.fr-card-foot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding-top:12px;
    border-top:1px solid var(--fp-border,#e2e8f0);
    font-size:12px;
    color:var(--fp-grey,#64748b);
    flex-wrap:wrap;
}
.fr-verified {
    color:#15803d;
    font-weight:700;
    font-size:11px;
    background:#dcfce7;
    border-radius:20px;
    padding:2px 9px;
}

/* ── Load more button ────────────────────────────────────── */
.fr-load-more-wrap { text-align:center; margin-top:32px; }
.fr-load-more-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 36px;
    border:2px solid var(--fp-blue,#1e40af);
    border-radius:40px;
    background:#fff;
    color:var(--fp-blue,#1e40af);
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    transition:all .25s ease;
}
.fr-load-more-btn:hover {
    background:var(--fp-blue,#1e40af);
    color:#fff;
}
.fr-load-more-btn:disabled { opacity:.4; cursor:default; }
.fr-load-more-count { font-weight:400; font-size:13px; opacity:.8; }

/* ── Grid header (shortcode single-country) ──────────────── */
.fr-grid-header {
    margin-bottom:24px;
    padding-bottom:20px;
    border-bottom:1px solid var(--fp-border,#e2e8f0);
}
.fr-grid-title { margin:0 0 8px; }

/* ── Country archive link grid ───────────────────────────── */
.fr-country-links { margin-top:64px; }
.fr-country-links-title {
    font-size:clamp(18px,3vw,26px);
    margin-bottom:24px;
    padding-bottom:12px;
    border-bottom:1px solid var(--fp-border,#e2e8f0);
}
.fr-country-links-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
    gap:12px;
}
.fr-country-link {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border:1px solid var(--fp-border,#e2e8f0);
    border-radius:10px;
    text-decoration:none;
    color:var(--fp-dark,#1e293b);
    transition:all .2s;
    background:#fff;
}
.fr-country-link:hover {
    border-color:var(--fp-blue,#1e40af);
    background:var(--fp-blue-xlt,#eff6ff);
    transform:translateY(-1px);
    box-shadow:0 2px 10px rgba(30,64,175,.1);
}
.fr-cl-flag   { font-size:22px; flex-shrink:0; }
.fr-cl-name   { flex:1; font-weight:600; font-size:14px; }
.fr-cl-avg    { font-size:12px; color:#92400e; }
.fr-cl-count  { font-size:11px; color:var(--fp-grey,#64748b); white-space:nowrap; }

/* ── Empty state ─────────────────────────────────────────── */
.fr-empty {
    text-align:center;
    padding:48px 20px;
    color:var(--fp-grey,#64748b);
    font-size:16px;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width:640px) {
    .fr-country-tab { padding:8px 12px; font-size:13px; }
    .fr-tab-name    { display:none; } /* show only flag + count on small screens */
    .fr-country-tabs { gap:6px; }

    .fr-panel-header { gap:10px; }
    .fr-panel-flag   { font-size:30px; }

    .fr-card { padding:16px; }
    .fr-card-flag { font-size:22px; }

    /* Mobile: show 2 initially */
    /* JS handles the show/hide, CSS just constrains layout */
    .fr-grid {
        grid-template-columns: 1fr 1fr;
        gap:12px;
    }
    .fr-card-scores    { gap:6px; }
    .fr-score-label    { font-size:11px; }

    .fr-country-links-grid { grid-template-columns:1fr 1fr; }

    .fr-overall-avg { padding:12px 16px; gap:10px; }
    .fr-overall-meta strong { font-size:17px; }
}

@media (max-width:400px) {
    .fr-grid { grid-template-columns:1fr; }
    .fr-country-links-grid { grid-template-columns:1fr; }
}


/* ════════════════════════════════════════════════════════
   SUBMISSION FORM STYLES (v2 addition)
════════════════════════════════════════════════════════ */
.fr-section-title{font-size:24px;font-weight:800;margin:0 0 20px;color:var(--fr-ink,#1e293b)}
.fr-submit-section{padding:48px 0;background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);border-bottom:1px solid var(--fr-border,#e2e8f0)}
.fr-submit-wrap{max-width:800px;margin:0 auto}
.fr-submit-intro h2{font-size:22px;font-weight:800;margin:0 0 8px;color:var(--fr-ink,#1e293b)}
.fr-submit-intro>p{font-size:14px;color:var(--fr-muted,#64748b);margin:0 0 16px}
.fr-privacy-notice{display:flex;gap:12px;align-items:flex-start;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:14px 16px;margin-bottom:28px;font-size:13px;color:#1e40af}
.fr-privacy-icon{font-size:20px;flex-shrink:0}
.fr-privacy-notice strong{display:block;margin-bottom:3px;font-size:14px}
.fr-review-form{background:#fff;border:1px solid var(--fr-border,#e2e8f0);border-radius:14px;padding:28px;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.fr-form-row{display:grid;gap:18px;margin-bottom:18px}
.fr-form-row--2{grid-template-columns:1fr 1fr}
@media(max-width:600px){.fr-form-row--2{grid-template-columns:1fr}}
.fr-form-group{display:flex;flex-direction:column;gap:5px}
.fr-form-group label{font-weight:700;font-size:13px;color:#334155}
.fr-req{color:#dc2626}
.fr-req-soft{font-size:11px;font-weight:400;color:#94a3b8}
.fr-form-group input[type=text],
.fr-form-group input[type=email],
.fr-form-group select,
.fr-form-group textarea{
    padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:7px;font-size:14px;
    font-family:inherit;transition:border .15s;background:#fff
}
.fr-form-group input:focus,.fr-form-group select:focus,.fr-form-group textarea:focus{
    outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)
}
.fr-form-group textarea{resize:vertical;min-height:100px}
.fr-field-note{font-size:11px;color:#94a3b8;line-height:1.4}
.fr-hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none}

/* File upload */
.fr-file-wrap{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fr-file-wrap input[type=file]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;left:0;top:0}
.fr-file-label{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:#f1f5f9;border:1.5px dashed #cbd5e1;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;color:#475569;transition:background .15s}
.fr-file-label:hover{background:#e2e8f0}
.fr-file-icon{font-size:16px}
.fr-file-name{font-size:12px;color:#64748b}

/* Star ratings */
.fr-rating-grid{display:flex;flex-direction:column;gap:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px}
.fr-rating-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.fr-rating-label strong{display:block;font-size:13px;color:#1e293b}
.fr-rating-label span{font-size:11px;color:#94a3b8}
.fr-star-input{display:flex;flex-direction:row-reverse;gap:2px;align-items:center}
.fr-star-input input{display:none}
.fr-star-input label{font-size:22px;cursor:pointer;color:#e2e8f0;transition:color .1s;line-height:1}
.fr-star-input label:hover,.fr-star-input label:hover~label,
.fr-star-input input:checked~label{color:#f59e0b}
.fr-star-hint{font-size:11px;color:#94a3b8;min-width:60px;margin-left:6px}

/* Char counter */
.fr-char-count{font-size:11px;color:#94a3b8;text-align:right;margin-top:3px}

/* Submit button */
.fr-form-submit-row{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.fr-submit-btn{padding:13px 28px;background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:opacity .15s,transform .1s}
.fr-submit-btn:hover{opacity:.92;transform:translateY(-1px)}
.fr-submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.fr-submit-note{font-size:12px;color:#94a3b8;margin:0}

/* Form message */
.fr-form-message{padding:12px 16px;border-radius:8px;font-size:14px;font-weight:600;margin-top:14px}
.fr-form-message.success{background:#d1fae5;border:1px solid #6ee7b7;color:#065f46}
.fr-form-message.error{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b}

/* Country CTA */
.fr-country-submit-cta{margin-top:40px;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;border-radius:14px;padding:28px;text-align:center}
.fr-cta-inner h3{font-size:18px;font-weight:800;margin:0 0 6px;color:#1e40af}
.fr-cta-inner p{font-size:14px;color:#3b82f6;margin:0 0 14px}

/* ════════════════════════════════════════════════════════
   SCORE LABELS (v2.1 — star rating hints)
════════════════════════════════════════════════════════ */

/* Wrap star input + scale + hint together */
.fr-star-input-wrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* Stars row (unchanged reverse-order trick) */
.fr-star-input { display: flex; flex-direction: row-reverse; gap: 2px; align-items: center; }
.fr-star-input input { display: none; }
.fr-star-input label {
    font-size: 28px;
    cursor: pointer;
    color: #e2e8f0;
    transition: color .1s, transform .1s;
    line-height: 1;
    padding: 2px;
}
.fr-star-input label:hover,
.fr-star-input label:hover ~ label,
.fr-star-input input:checked ~ label {
    color: #f59e0b;
    text-shadow: 0 0 8px rgba(245,158,11,.5);
}
.fr-star-input label:hover { transform: scale(1.15); }

/* Static score scale — 5 columns, always visible below the stars */
.fr-score-scale {
    display: flex;
    gap: 2px;
    width: 100%;
    max-width: 210px;
}
.fr-score-pip {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1.5px solid transparent;
    transition: background .15s, border-color .15s, transform .1s;
    cursor: default;
}
/* Color-code by level */
.fr-score-pip[data-val="1"] { background: #fff1f2; }
.fr-score-pip[data-val="2"] { background: #fff7ed; }
.fr-score-pip[data-val="3"] { background: #fefce8; }
.fr-score-pip[data-val="4"] { background: #f0fdf4; }
.fr-score-pip[data-val="5"] { background: #eff6ff; }

/* Highlight when corresponding radio is checked */
.fr-score-pip.is-selected[data-val="1"] { background: #fecdd3; border-color: #f43f5e; transform: translateY(-2px); }
.fr-score-pip.is-selected[data-val="2"] { background: #fed7aa; border-color: #f97316; transform: translateY(-2px); }
.fr-score-pip.is-selected[data-val="3"] { background: #fef08a; border-color: #eab308; transform: translateY(-2px); }
.fr-score-pip.is-selected[data-val="4"] { background: #bbf7d0; border-color: #22c55e; transform: translateY(-2px); }
.fr-score-pip.is-selected[data-val="5"] { background: #bfdbfe; border-color: #3b82f6; transform: translateY(-2px); }

/* Hover effect on each pip */
.fr-score-pip:hover { transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.fr-pip-num   { font-size: 10px; font-weight: 800; color: #64748b; line-height: 1; }
.fr-pip-emoji { font-size: 16px; line-height: 1; }
.fr-pip-text  { font-size: 9px; font-weight: 600; color: #64748b; text-align: center; line-height: 1.2; }

/* Dynamic selected hint (shows after selection) */
.fr-star-selected-hint {
    font-size: 12px;
    font-weight: 700;
    min-height: 20px;
    text-align: right;
    transition: opacity .2s;
}
.fr-hint-prompt { color: #94a3b8; font-weight: 400; font-style: italic; }
.fr-hint-val-1 { color: #f43f5e; }
.fr-hint-val-2 { color: #f97316; }
.fr-hint-val-3 { color: #eab308; }
.fr-hint-val-4 { color: #22c55e; }
.fr-hint-val-5 { color: #3b82f6; }

/* Rating grid layout tweaks */
.fr-rating-grid { display: flex; flex-direction: column; gap: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; }
.fr-rating-row  { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.fr-rating-label { flex: 1; min-width: 140px; }
.fr-rating-label strong { display: block; font-size: 13px; color: #1e293b; margin-bottom: 2px; }
.fr-rating-label span   { font-size: 11px; color: #94a3b8; }

@media(max-width:520px) {
    .fr-rating-row { flex-direction: column; gap: 8px; }
    .fr-star-input-wrap { align-items: flex-start; }
    .fr-score-scale { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════
   FILTER BAR + PAGINATION + MOBILE FIXES (v2.1)
════════════════════════════════════════════════════════ */

/* ── Empty state ── */
.fr-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:10px;background:#f8fafc;border:1.5px dashed #e2e8f0;border-radius:12px}
.fr-empty-icon{font-size:36px}
.fr-empty-state p{color:#64748b;margin:0;font-size:14px}
.fr-empty-cta{display:inline-block;padding:8px 18px;background:#2563eb;color:#fff;border-radius:7px;font-size:13px;font-weight:700;text-decoration:none}

/* ── Filter bar ── */
.fr-filter-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;align-items:center}
.fr-filter-btn{
    display:inline-flex;align-items:center;gap:5px;
    padding:6px 12px;border:1.5px solid #e2e8f0;border-radius:20px;
    background:#fff;color:#475569;font-size:13px;font-weight:600;
    cursor:pointer;transition:all .15s;white-space:nowrap;line-height:1;
}
.fr-filter-btn:hover{border-color:#2563eb;color:#2563eb;background:#eff6ff}
.fr-filter-btn.is-active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 2px 8px rgba(37,99,235,.25)}
.fr-filter-btn.fr-filter-empty{opacity:.45;cursor:not-allowed}
.fr-filter-count{
    background:rgba(0,0,0,.1);color:inherit;
    font-size:11px;font-weight:700;min-width:18px;height:18px;
    border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
    padding:0 4px;
}
.fr-filter-btn.is-active .fr-filter-count{background:rgba(255,255,255,.25)}

/* ── Pagination ── */
.fr-pagination{display:flex;flex-wrap:wrap;gap:5px;margin-top:24px;justify-content:center;align-items:center}
.fr-page-btn{
    min-width:36px;height:36px;padding:0 10px;border:1.5px solid #e2e8f0;border-radius:8px;
    background:#fff;color:#475569;font-size:13px;font-weight:600;
    cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
    transition:all .15s;white-space:nowrap;
}
.fr-page-btn:hover:not(:disabled){border-color:#2563eb;color:#2563eb;background:#eff6ff}
.fr-page-btn.is-active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 2px 8px rgba(37,99,235,.25)}
.fr-page-btn:disabled{opacity:.35;cursor:not-allowed}
.fr-page-ellipsis{color:#94a3b8;font-size:13px;padding:0 2px;line-height:36px}

/* ── Grid: mobile fix — min-width:0 prevents grid overflow ── */
.fr-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));
    gap:16px;
}
.fr-card{
    min-width:0;           /* ← KEY: prevents grid overflow */
    word-break:break-word;
    overflow-wrap:break-word;
    overflow:hidden;
}
/* Mobile: single column below 480px */
@media(max-width:480px){
    .fr-grid{grid-template-columns:1fr}
    .fr-filter-bar{gap:4px}
    .fr-filter-btn{padding:5px 9px;font-size:12px}
    .fr-card-name,.fr-card-country{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .fr-card-desc{font-size:12px;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
}

.fr-page-info{font-size:12px;color:#94a3b8;margin-left:6px;align-self:center}