/* ============================================================
   Smart Reviews for Elementor – Frontend CSS  v1.3.0
   ============================================================ */

.sre-widget {
    --sre-star-filled: #f59e0b;
    --sre-star-empty:  #d1d5db;
    --sre-card-bg:     #ffffff;
    --sre-card-radius: 12px;
    --sre-card-shadow: 0 4px 20px rgba(0,0,0,.08);
    --sre-text-pri:    #1a1a2e;
    --sre-text-sec:    #6b7280;
    --sre-text-body:   #374151;
    --sre-accent:      #4f46e5;
    --sre-border:      #e5e7eb;
    font-family: inherit;
    box-sizing: border-box;
}
.sre-widget *, .sre-widget *::before, .sre-widget *::after { box-sizing: inherit; }

/* ================================================================
   HEADER
================================================================ */
.sre-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--sre-card-bg);
    border: 1px solid var(--sre-border);
    border-radius: var(--sre-card-radius);
    padding: 18px 24px;
    margin-bottom: 24px;
    box-shadow: var(--sre-card-shadow);
}
.sre-header-left  { flex: 1; min-width: 0; }
.sre-header-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.sre-header-business { font-size: 1rem; font-weight: 700; color: var(--sre-text-pri); margin-bottom: 4px; }
.sre-header-rating-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sre-header-avg { font-size: 1.875rem; font-weight: 800; color: var(--sre-text-pri); line-height: 1; }
.sre-header-count { font-size: .8125rem; color: var(--sre-text-sec); }

.sre-header-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sre-header-badge-item { display: inline-flex; align-items: center; }
.sre-header-badge { height: 32px; width: auto; display: block; }

.sre-header-cta {
    display: inline-flex; align-items: center;
    padding: 9px 18px;
    background: var(--sre-accent); color: #fff;
    font-size: .875rem; font-weight: 600;
    border-radius: 8px; text-decoration: none;
    white-space: nowrap;
    transition: background .2s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(79,70,229,.25);
}
.sre-header-cta:hover { background: #3730a3; color: #fff; }

/* ================================================================
   STARS
================================================================ */
.sre-stars-row { display: flex; align-items: center; gap: 3px; margin-bottom: 0; }
.sre-stars { display: inline-flex; gap: 1px; }
.sre-star { font-size: 16px; line-height: 1; }
.sre-star.filled, .sre-star.half { color: var(--sre-star-filled); }
.sre-star.empty { color: var(--sre-star-empty); }
.sre-rating-number { font-size: .75rem; font-weight: 600; color: var(--sre-text-sec); margin-left: 4px; }

/* ================================================================
   GRID / LIST
================================================================ */
.sre-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width:1024px) { .sre-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px)  { .sre-grid { grid-template-columns: 1fr; } }
.sre-list { display: flex; flex-direction: column; gap: 20px; }

/* ================================================================
   CARD
================================================================ */
.sre-card {
    background: var(--sre-card-bg);
    border-radius: var(--sre-card-radius);
    box-shadow: var(--sre-card-shadow);
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .2s, box-shadow .2s;
    border: 1px solid rgba(0,0,0,.04);
    /* NO overflow:hidden — keeps avatar/name fully visible */
}
.sre-swiper .sre-card { height: 100%; }
.sre-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.sre-card-platform { position: absolute; top: 18px; right: 18px; }
.sre-platform-logo { height: 28px; width: auto; }

.sre-review-text-wrap { flex: 1; margin-bottom: 0; }
.sre-review-text { font-size: .9375rem; line-height: 1.65; color: var(--sre-text-body); margin: 0; }
.sre-read-more {
    background: none; border: none; padding: 0; margin-left: 4px;
    font-size: .875rem; font-weight: 600; color: var(--sre-accent);
    cursor: pointer; text-decoration: underline; display: inline;
}
.sre-read-more:hover { opacity: .75; }

/* ================================================================
   PHOTOS – Horizontal strip  (no space when no photos on card)
================================================================ */
.sre-photos-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    /* margin-top / margin-bottom set by Elementor selector.
       Default 0 so cards without photos have NO extra gap. */
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}
/* Only add spacing when photos actually exist */
.sre-photos-row:not(:empty) {
    margin-top: 10px;
    margin-bottom: 12px;
}

.sre-photo-thumb {
    position: relative; flex: 0 0 auto;
    width: 120px; height: 100px; border-radius: 6px;
    overflow: hidden; cursor: pointer;
    display: block; text-decoration: none; background: #f3f4f6;
}
.sre-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.sre-photo-thumb:hover img { transform: scale(1.07); }
.sre-ph-hidden { display: none; }
.sre-photo-more {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.52);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem; font-weight: 700;
    border-radius: inherit; pointer-events: none;
}

/* ================================================================
   REVIEWER INFO  – flex-shrink:0 ensures it never gets cut
================================================================ */
.sre-reviewer-info {
    display: flex; align-items: center; gap: 10px;
    padding-top: 14px; margin-top: auto;
    border-top: 1px solid var(--sre-border);
    flex-shrink: 0;   /* CRITICAL: never compress this row */
}
.sre-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sre-avatar-initials {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: #fff;
    letter-spacing: .02em; text-transform: uppercase; user-select: none;
}
.sre-reviewer-details { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sre-reviewer-name { font-size: .9375rem; font-weight: 700; color: var(--sre-text-pri); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sre-reviewer-title { font-size: .8125rem; color: var(--sre-text-sec); }
.sre-review-date { font-size: .75rem; color: #9ca3af; }
.sre-card-ext-link { color: #9ca3af; flex-shrink: 0; margin-left: auto; text-decoration: none; transition: color .2s; }
.sre-card-ext-link:hover { color: var(--sre-accent); }

/* ================================================================
   SLIDER WRAPPER
   ─ overflow: visible  → side arrows not clipped
   ─ position: relative → arrows absolutely positioned within it
================================================================ */
.sre-slider-wrapper {
    position: relative;
    overflow: visible;
}

/* Swiper itself clips the slides */
.sre-swiper { overflow: hidden; }
.sre-swiper .swiper-wrapper { align-items: stretch; }
.sre-swiper .swiper-slide   { height: auto; display: flex; flex-direction: column; }
.sre-swiper .swiper-slide > .sre-card { flex: 1; }

/* ================================================================
   PAGINATION – standalone div OUTSIDE .swiper
   Swiper writes bullets/fraction/bar into it via JS
================================================================ */
.sre-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 16px;
    min-height: 20px;
    /* No position:absolute — purely in document flow */
}
.sre-pag-left   { justify-content: flex-start; }
.sre-pag-center { justify-content: center; }
.sre-pag-right  { justify-content: flex-end; }

/* Bullets */
.sre-pagination .swiper-pagination-bullet {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--sre-border); opacity: 1; cursor: pointer;
    transition: background .2s, transform .2s; margin: 0 4px;
}
.sre-pagination .swiper-pagination-bullet-active {
    background: var(--sre-accent); transform: scale(1.3);
}
/* Fraction */
.sre-pagination.swiper-pagination-fraction {
    font-size: .875rem; color: var(--sre-text-sec); font-weight: 600;
}
/* Progress bar – Swiper sets width via style */
.sre-pagination.swiper-pagination-progressbar {
    height: 4px; border-radius: 2px;
    background: var(--sre-border); overflow: hidden;
}
.sre-pagination .swiper-pagination-progressbar-fill {
    background: var(--sre-accent);
}

/* ================================================================
   NAV BUTTONS – base style
================================================================ */
.sre-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px !important; height: 40px !important; min-width: 40px;
    border-radius: 50%;
    background: #fff; color: var(--sre-accent);
    font-size: 18px; line-height: 1;
    border: 1px solid var(--sre-border);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    transition: box-shadow .2s, background .2s, color .2s;
    z-index: 20; text-decoration: none; user-select: none;
    flex-shrink: 0;
}
.sre-nav-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,.18); border-color: #c7d2fe; }
.sre-nav-btn.swiper-button-disabled { opacity: 0.35; pointer-events: none; }

/* Outside / Inside – absolutely positioned relative to .sre-slider-wrapper */
.sre-side-prev,
.sre-side-next {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;            /* vertical centre */
    height: 40px !important; /* overrides the top/bottom stretch */
}
.sre-nav-outside .sre-side-prev,
.sre-nav-inside  .sre-side-prev { left: 0; }
.sre-nav-outside .sre-side-next,
.sre-nav-inside  .sre-side-next { right: 0; }

/* Outside variant: arrows sit fully OUTSIDE the swiper strip */
.sre-has-outer-nav {
    padding-left: 52px;
    padding-right: 52px;
}
/* Inside variant: arrows overlap the slide edges */
.sre-nav-inside .sre-side-prev { left: 8px; }
.sre-nav-inside .sre-side-next { right: 8px; }

/* Top nav row */
.sre-nav-top .sre-nav-row--top {
    display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px;
}
/* Bottom nav row */
.sre-nav-bottom .sre-nav-row--bottom {
    display: flex; justify-content: center; gap: 8px; margin-top: 14px;
}

/* ================================================================
   "SHOW MORE REVIEWS" button
================================================================ */
.sre-show-more-wrap {
    display: flex; justify-content: center; margin-top: 24px;
}
.sre-show-more-btn {
    display: inline-flex; align-items: center;
    padding: 12px 32px;
    background: #fff; color: var(--sre-accent);
    font-size: .9375rem; font-weight: 600;
    border-radius: 8px; text-decoration: none;
    border: 1px solid var(--sre-border);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.06); cursor: pointer;
}
.sre-show-more-btn:hover {
    background: var(--sre-accent); color: #fff;
    border-color: var(--sre-accent);
    box-shadow: 0 4px 16px rgba(79,70,229,.25);
}

/* ================================================================
   Responsive
================================================================ */
@media (max-width: 768px) {
    .sre-has-outer-nav { padding-left: 40px; padding-right: 40px; }
    .sre-header { padding: 14px 18px; }
    .sre-header-cta { font-size: .8125rem; padding: 7px 14px; }
}
@media (max-width: 480px) {
    .sre-card { padding: 16px; }
    .sre-has-outer-nav { padding-left: 32px; padding-right: 32px; }
    .sre-nav-btn { width: 32px !important; height: 32px !important; min-width: 32px; font-size: 14px; }
    .sre-side-prev, .sre-side-next { height: 32px !important; }
    .sre-photo-thumb { width: 80px !important; height: 72px !important; }
    .sre-show-more-btn { padding: 10px 20px; font-size: .875rem; }
}