/* ══════════════════════════════════════════════
   LeMoonAds Google Reviews Stars – v1.0.1
   Author: LEMOONADS
══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ── CSS Variables ── */
.lgrs-wrapper {
    --lgrs-inactive:   #474747;
    --lgrs-active:     #EFBF04;
    --lgrs-shadow:     rgba(239,191,4,.5);
    --lgrs-star-size:  42px;
    --lgrs-gap:        10px;
    --lgrs-speed:      200ms;
    --lgrs-bg:         #ffffff;
    --lgrs-text:       #1a1a2e;
    --lgrs-sub:        #6b7280;
    --lgrs-hint:       #9ca3af;
    --lgrs-border:     rgba(0,0,0,.06);
    --lgrs-score-bg:   #f9fafb;
}

/* ── Dark mode ── */
.lgrs-wrapper[data-dark-mode="dark"] {
    --lgrs-bg:     #1a1a2e;
    --lgrs-text:   #f9fafb;
    --lgrs-sub:    #9ca3af;
    --lgrs-hint:   #6b7280;
    --lgrs-border: rgba(255,255,255,.08);
    --lgrs-score-bg: rgba(255,255,255,.06);
}
@media (prefers-color-scheme: dark) {
    .lgrs-wrapper[data-dark-mode="auto"] {
        --lgrs-bg:     #1a1a2e;
        --lgrs-text:   #f9fafb;
        --lgrs-sub:    #9ca3af;
        --lgrs-hint:   #6b7280;
        --lgrs-border: rgba(255,255,255,.08);
        --lgrs-score-bg: rgba(255,255,255,.06);
    }
}

/* ── Wrapper ── */
.lgrs-wrapper {
    display:         inline-flex;
    flex-direction:  column;
    align-items:     center;
    gap:             12px;
    font-family:     'Plus Jakarta Sans', sans-serif;
    text-align:      center;
    padding:         28px 36px;
    background:      var(--lgrs-bg);
    border-radius:   20px;
    box-shadow:      0 8px 40px rgba(0,0,0,.08);
    border:          1px solid var(--lgrs-border);
    position:        relative;
    overflow:        hidden;
    transition:      background var(--lgrs-speed), color var(--lgrs-speed);
}

/* ── Google logo ── */
.lgrs-header { display:flex; align-items:center; justify-content:center; }
.lgrs-google-logo { height: 28px; width: auto; }

/* ── Texts ── */
.lgrs-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--lgrs-text);
    line-height: 1.35;
}
.lgrs-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--lgrs-sub);
    font-weight: 500;
}

/* ── Score row ── */
.lgrs-score-row {
    display:     flex;
    align-items: baseline;
    gap:         2px;
    background:  var(--lgrs-score-bg);
    padding:     6px 16px;
    border-radius: 30px;
}
.lgrs-score-num  { font-size:20px; font-weight:800; color:var(--lgrs-text); }
.lgrs-score-sep  { font-size:14px; color:var(--lgrs-sub); margin:0 1px; }
.lgrs-score-max  { font-size:14px; color:var(--lgrs-sub); }
.lgrs-score-count{ font-size:12px; color:var(--lgrs-hint); font-weight:500; }

/* ── Stars container ── */
.lgrs-stars {
    display:     flex;
    align-items: center;
    gap:         var(--lgrs-gap);
    padding:     6px 4px;
}

/* ── Star button ── */
.lgrs-star {
    all:             unset;
    cursor:          pointer;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    color:           var(--lgrs-inactive);
    font-size:       var(--lgrs-star-size);
    line-height:     1;
    transform-origin: center bottom;
    user-select:     none;
    -webkit-tap-highlight-color: transparent;
    transition:      color var(--lgrs-speed) ease,
                     transform var(--lgrs-speed) cubic-bezier(.34,1.56,.64,1),
                     filter var(--lgrs-speed) ease,
                     text-shadow var(--lgrs-speed) ease;
    will-change:     color, transform, filter;
}
.lgrs-star:focus-visible {
    outline:       2px solid var(--lgrs-active);
    border-radius: 4px;
}

/* ── Hover / active states ── */
.lgrs-star.lgrs-lit {
    color: var(--lgrs-active);
}

/* Effect: grow (default) */
.lgrs-wrapper[data-anim-effect="grow"] .lgrs-star.lgrs-lit {
    transform: scale(1.3);
    filter: drop-shadow(0 4px 8px var(--lgrs-shadow));
}

/* Effect: bounce */
.lgrs-wrapper[data-anim-effect="bounce"] .lgrs-star.lgrs-lit {
    animation: lgrs-bounce var(--lgrs-speed) cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes lgrs-bounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4) translateY(-6px); }
    70%  { transform: scale(1.2) translateY(2px); }
    100% { transform: scale(1.3) translateY(0); }
}

/* Effect: spin */
.lgrs-wrapper[data-anim-effect="spin"] .lgrs-star.lgrs-lit {
    animation: lgrs-spin var(--lgrs-speed) ease forwards;
}
@keyframes lgrs-spin {
    0%   { transform: scale(1) rotate(0deg); }
    50%  { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(1.25) rotate(360deg); }
}

/* Effect: glow */
.lgrs-wrapper[data-anim-effect="glow"] .lgrs-star.lgrs-lit {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px var(--lgrs-active))
            drop-shadow(0 0 20px var(--lgrs-shadow));
    text-shadow: none;
}

/* ── Hover message ── */
.lgrs-hover-msg {
    margin:      0;
    font-size:   13px;
    font-weight: 600;
    color:       var(--lgrs-active);
    min-height:  18px;
    transition:  opacity .2s;
}
.lgrs-hover-msg:empty { opacity: 0; }

/* ── Hint ── */
.lgrs-hint {
    margin:      0;
    font-size:   12px;
    color:       var(--lgrs-hint);
    font-weight: 500;
    letter-spacing: .3px;
}

/* ── Thank-you overlay ── */
.lgrs-thankyou {
    position:    absolute;
    inset:       0;
    background:  var(--lgrs-bg);
    display:     flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:         10px;
    opacity:     0;
    pointer-events: none;
    transition:  opacity .3s;
    border-radius: 20px;
}
.lgrs-thankyou.visible {
    opacity:        1;
    pointer-events: all;
}
.lgrs-ty-icon {
    width:       60px;
    height:      60px;
    border-radius: 50%;
    background:  linear-gradient(135deg, var(--lgrs-active), #f5d442);
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   28px;
    color:       #111;
    font-weight: 800;
    animation:   lgrs-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes lgrs-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.lgrs-ty-text {
    margin: 0;
    font-size:   18px;
    font-weight: 700;
    color:       var(--lgrs-text);
}
.lgrs-ty-sub {
    margin: 0;
    font-size:   13px;
    color:       var(--lgrs-sub);
}

/* ── Popup overlay ── */
.lgrs-popup-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.6);
    display:    flex;
    align-items: center;
    justify-content: center;
    z-index:    99999;
    opacity:    0;
    pointer-events: none;
    transition: opacity .25s;
}
.lgrs-popup-overlay.visible {
    opacity:        1;
    pointer-events: all;
}
.lgrs-popup-box {
    background:    #fff;
    border-radius: 16px;
    width:         min(90vw, 700px);
    height:        min(80vh, 600px);
    overflow:      hidden;
    position:      relative;
    box-shadow:    0 24px 80px rgba(0,0,0,.35);
    transform:     scale(.95);
    transition:    transform .25s cubic-bezier(.34,1.2,.64,1);
}
.lgrs-popup-overlay.visible .lgrs-popup-box { transform: scale(1); }
.lgrs-popup-close {
    position:    absolute;
    top:         12px;
    right:       14px;
    z-index:     2;
    background:  rgba(0,0,0,.1);
    border:      none;
    border-radius: 50%;
    width:       32px;
    height:      32px;
    font-size:   14px;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    color:       #333;
    transition:  background .2s;
}
.lgrs-popup-close:hover { background: rgba(0,0,0,.2); }
.lgrs-popup-iframe {
    width:  100%;
    height: 100%;
    border: none;
}