/* =====================================================
   Reviews Showcase – Frontend Styles v2
   CSS variables allow per-instance overrides
   ===================================================== */

.rsc-wrapper {
    font-family: var(--rsc-font, -apple-system, 'Segoe UI', Roboto, sans-serif);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0 32px;
    box-sizing: border-box;
}

/* ── Tabs ── */
.rsc-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--rsc-tab-border, #e5e7eb);
    padding-bottom: 0;
}

.rsc-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 15px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .2s, border-color .2s;
    margin-bottom: -1px;
    white-space: nowrap;
}
.rsc-tab:hover { color: #111; }
.rsc-tab.active {
    color: var(--rsc-tab-active, #111);
    border-bottom-color: var(--rsc-tab-active, #111);
    font-weight: 500;
}
.rsc-tab strong { font-weight: 700; font-size: 16px; }

.rsc-icon-google { width: 18px; height: 18px; flex-shrink: 0; }
.rsc-icon-booking {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; background: #003580; color: #fff;
    font-size: 10px; font-weight: 800; border-radius: 4px; flex-shrink: 0;
}

/* ── Carousel ── */
.rsc-carousel-outer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rsc-carousel-track-wrapper { overflow: hidden; flex: 1; min-width: 0; }
.rsc-carousel-track {
    display: flex;
    gap: var(--rsc-card-gap, 16px);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

/* ── Cards ── */
.rsc-card {
    background: var(--rsc-card-bg, #f7f8fa);
    border-radius: var(--rsc-card-radius, 12px);
    padding: var(--rsc-card-pad, 20px);
    min-width: var(--rsc-card-width, 240px);
    max-width: var(--rsc-card-width, 260px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    transition: box-shadow .2s, transform .2s;
}
.rsc-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.10);
    transform: translateY(-2px);
}
.rsc-card.rsc-no-shadow:hover { box-shadow: none; transform: none; }

/* Stars */
.rsc-stars { display: flex; gap: 2px; }
.rsc-star { font-size: var(--rsc-star-size, 20px); color: #d1d5db; line-height: 1; }
.rsc-star.filled { color: var(--rsc-star-color, #f59e0b); }

/* Score badge */
.rsc-score {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--rsc-score-size, 36px);
    height: var(--rsc-score-size, 36px);
    background: var(--rsc-score-bg, #003580);
    color: var(--rsc-score-color, #fff);
    font-weight: 700; font-size: 15px;
    border-radius: 8px 8px 8px 0;
}

/* Text */
.rsc-text {
    font-size: var(--rsc-text-size, 14px);
    color: var(--rsc-text-color, #374151);
    line-height: var(--rsc-text-lh, 1.55);
    text-align: var(--rsc-text-align, left);
    flex: 1;
}
.rsc-read-more {
    background: none; border: none; color: #6b7280;
    font-size: 13px; cursor: pointer; padding: 0;
    margin-top: 4px; display: block;
    text-decoration: underline; text-underline-offset: 2px;
}
.rsc-read-more:hover { color: #111; }

/* Author */
.rsc-author {
    display: flex; align-items: center; gap: 10px;
    margin-top: auto; padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}
.rsc-avatar {
    position: relative; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: #fff;
    flex-shrink: 0; text-transform: uppercase;
}
.rsc-source-badge {
    position: absolute; bottom: -2px; right: -2px;
    width: 16px; height: 16px; border-radius: 50%;
    font-size: 8px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #fff;
}
.rsc-source-badge.rsc-source-google  { background: #fff; color: #4285F4; }
.rsc-source-badge.rsc-source-booking { background: #003580; color: #fff; }
.rsc-source-badge.rsc-source-manual  { background: #9ca3af; color: #fff; }

.rsc-author-info { display: flex; flex-direction: column; min-width: 0; }
.rsc-author-name {
    font-size: var(--rsc-author-size, 13px);
    font-weight: var(--rsc-author-weight, 600);
    color: var(--rsc-author-color, #111);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsc-author-date {
    font-size: var(--rsc-date-size, 12px);
    color: var(--rsc-date-color, #9ca3af);
    margin-top: 1px;
}

/* Arrows */
.rsc-arrow {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid #d1d5db; background: #fff;
    cursor: pointer; font-size: 22px; line-height: 1;
    color: #374151; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
    transition: background .15s, box-shadow .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 0;
}
.rsc-arrow:hover { background: #f3f4f6; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.rsc-arrow:disabled { opacity: .35; cursor: default; }

/* Dots */
.rsc-dots {
    display: flex; justify-content: center;
    gap: 6px; margin-top: 18px;
}
.rsc-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #d1d5db; cursor: pointer;
    transition: background .2s, transform .2s;
    border: none; padding: 0;
}
.rsc-dot.active { background: #374151; transform: scale(1.25); }

/* No reviews */
.rsc-no-reviews {
    text-align: center; color: #9ca3af; padding: 32px; font-size: 15px;
}

/* ── Responsive defaults (overridden by per-instance CSS from PHP) ── */
@media (max-width: 1024px) {
    .rsc-card { min-width: calc(50% - 8px); max-width: calc(50% - 8px); }
}
@media (max-width: 767px) {
    .rsc-card { min-width: calc(100% - 0px); max-width: calc(100% - 0px); }
    .rsc-tabs  { gap: 4px; }
    .rsc-tab   { font-size: 13px; padding: 8px 12px; }
    .rsc-arrow { width: 30px; height: 30px; font-size: 18px; }
}