/* ═══════════════════════════════════════════════
   TrustPulsar — Review Page
   Light Premium — Purple & Gold Accents
   ═══════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
    background:#F8F6F3;
    color:#1A1330;
    font-family:'DM Sans',-apple-system,sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
    padding:60px 16px 40px;
    line-height:1.6;
}
.rp{width:100%;max-width:580px}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ─── TrustPulsar Top Bar ─── */
.rp-topbar{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    background:linear-gradient(135deg,#130E22,#1A1330,#130E22);
    border-bottom:1px solid #2A2048;
    box-shadow:0 4px 24px rgba(0,0,0,0.4);
}
.rp-topbar::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,#7B5EA7,#C9A84C,#7B5EA7);
}
.rp-topbar::after{
    content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(201,168,76,0.2),transparent);
}
.rp-topbar-inner{
    max-width:600px;
    margin:0 auto;
    padding:12px 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}
.rp-topbar-brand{
    display:flex;
    align-items:center;
    gap:4px;
    text-decoration:none;
    font-family:'Playfair Display',serif;
    font-size:16px;
    font-weight:700;
    transition:opacity 0.2s;
}
.rp-topbar-brand:hover{opacity:0.85}
.rp-topbar-logo-icon{
    width:28px;height:28px;border-radius:8px;
    background:linear-gradient(135deg,#1E1636,#2A2048);
    border:1px solid #3A2E5E;
    display:flex;align-items:center;justify-content:center;
    margin-right:6px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.rp-topbar-trust{color:#9B7EC7}
.rp-topbar-puls{color:#C9A84C}
.rp-topbar-r{color:#C9A84C}
.rp-topbar-sep{
    width:1px;height:18px;
    background:linear-gradient(to bottom,transparent,#3A2E5E,transparent);
}
.rp-topbar-slogan{
    font-size:11px;
    color:#7B6F98;
    letter-spacing:0.5px;
    font-weight:500;
}

/* ─── Header ─── */
.rp-header{text-align:center;margin-bottom:36px;animation:fadeInUp .5s ease}

.rp-client-logo{
    width:100px;height:100px;border-radius:18px;
    object-fit:contain;
    margin:0 auto 16px;
    display:block;
    border:2px solid #E8E4DE;
    background:#fff;
    padding:10px;
    box-shadow:0 4px 16px rgba(0,0,0,0.06);
}
.rp-avatar{
    width:76px;height:76px;border-radius:50%;
    margin:0 auto 16px;
    background:linear-gradient(135deg,var(--accent),var(--accent-glow));
    display:flex;align-items:center;justify-content:center;
    font-size:30px;font-weight:800;color:#fff;
    box-shadow:0 4px 20px var(--accent-glow);
    border:3px solid #fff;
}
.rp-header h1{
    font-family:'Playfair Display',serif;
    font-size:28px;font-weight:700;
    color:#1A1330;
    letter-spacing:-0.5px;
}
.rp-url{color:#8B82A0;font-size:13px;margin-top:4px}
.rp-stats{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.rp-avg{
    font-size:38px;font-weight:800;
    font-family:'Playfair Display',serif;
    color:#C9A84C;
}
.rp-count{color:#8B82A0;font-size:12px;margin-top:2px}
.rp-stars{display:flex;gap:2px}
.rp-stars-sm{display:flex;gap:1px}

/* ─── Card ─── */
.rp-card{
    background:#FFFFFF;
    border:1px solid #E8E4DE;
    border-radius:18px;
    padding:28px;
    margin-bottom:20px;
    box-shadow:0 2px 12px rgba(0,0,0,0.04);
    animation:fadeInUp .5s ease;
    position:relative;
    overflow:hidden;
}
.rp-card::before{
    content:'';position:absolute;top:0;left:0;right:0;
    height:3px;
    background:linear-gradient(90deg,#7B5EA7,#C9A84C,#7B5EA7);
    opacity:0.6;
}
.rp-card h2{font-size:18px;font-weight:700;margin-bottom:20px;color:#1A1330}

/* ─── Form ─── */
.rp-fg{margin-bottom:18px}
.rp-fg label{display:block;color:#6B5F85;font-size:13px;margin-bottom:8px;font-weight:600}
.rp-input{
    width:100%;padding:13px 16px;border-radius:12px;
    background:#F8F6F3;
    border:1px solid #E0DCD6;
    color:#1A1330;font-family:inherit;font-size:14px;
    outline:none;transition:all .25s;
}
.rp-input:focus{
    border-color:#C9A84C;
    box-shadow:0 0 0 3px rgba(201,168,76,0.1);
    background:#fff;
}
.rp-input::placeholder{color:#B0A8BC}
textarea.rp-input{resize:vertical;min-height:100px}
.rp-stars-input{display:flex;gap:6px}
.rp-stars-input svg{transition:transform .15s;cursor:pointer}
.rp-stars-input svg:hover{filter:drop-shadow(0 2px 8px rgba(201,168,76,0.4))}

.rp-submit{
    width:100%;padding:15px;border-radius:12px;
    background:linear-gradient(135deg,#7B5EA7,#9B7EC7);
    border:none;
    color:#fff;font-size:15px;font-weight:700;
    cursor:pointer;font-family:inherit;
    box-shadow:0 4px 16px rgba(123,94,167,0.25);
    transition:all .25s;
    letter-spacing:0.2px;
}
.rp-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(123,94,167,0.3);
}
.rp-submit:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

.rp-error{color:#E11D48;font-size:13px;margin-bottom:12px;display:none}

/* ─── Success ─── */
.rp-success{
    background:#FFFFFF;
    border:1px solid rgba(201,168,76,0.3);
    border-radius:18px;padding:44px;text-align:center;
    animation:fadeInUp .4s ease;
    box-shadow:0 4px 20px rgba(201,168,76,0.08);
}
.rp-success-icon{font-size:52px;margin-bottom:14px;color:#C9A84C}
.rp-success h3{font-size:22px;margin-bottom:8px;font-family:'Playfair Display',serif;color:#1A1330}
.rp-success p{color:#6B5F85;font-size:14px}

/* ─── Distribution ─── */
.rp-dist{margin:8px 0}
.rp-dist-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}
.rp-dist-label{width:28px;text-align:right;color:#6B5F85;font-weight:600}
.rp-dist-bar{flex:1;height:8px;background:#EEEBE6;border-radius:4px;overflow:hidden}
.rp-dist-fill{height:100%;background:linear-gradient(90deg,#C9A84C,#E2C675);border-radius:4px;transition:width .6s ease}
.rp-dist-count{width:28px;color:#8B82A0;font-size:12px}

/* ─── Reviews list ─── */
.rp-list-title{
    font-size:16px;font-weight:700;
    margin-bottom:18px;
    display:flex;align-items:center;gap:8px;
    color:#1A1330;
}
.rp-review{
    background:#FFFFFF;
    border:1px solid #E8E4DE;
    border-radius:14px;padding:22px;
    margin-bottom:12px;
    transition:all 0.3s;
    box-shadow:0 1px 4px rgba(0,0,0,0.03);
}
.rp-review:hover{border-color:#D5D0C8;box-shadow:0 4px 16px rgba(0,0,0,0.06)}
.rp-review-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rp-review-author{display:flex;align-items:center;gap:10px}
.rp-review-av{
    width:34px;height:34px;border-radius:10px;
    background:linear-gradient(135deg,#7B5EA7,#9B7EC7);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;color:#fff;
}
.rp-review-author strong{font-size:14px;color:#1A1330}
.rp-review-text{color:#5A5070;font-size:14px;line-height:1.65;margin-left:44px}
.rp-review-date{color:#B0A8BC;font-size:11px;margin-top:8px;margin-left:44px}

/* ─── Pagination ─── */
.rp-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:28px 0 8px;
}
.rp-page-btn{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;
    border-radius:10px;
    font-size:14px;font-weight:600;
    color:#6B5F85;
    background:#fff;
    border:1px solid #E8E4DE;
    text-decoration:none;
    transition:all 0.2s;
    cursor:pointer;
}
.rp-page-btn:hover{
    border-color:#C9A84C;
    color:#C9A84C;
    box-shadow:0 2px 8px rgba(201,168,76,0.12);
}
.rp-page-active{
    background:linear-gradient(135deg,#C9A84C,#E2C675);
    color:#0F0A1A;
    border-color:#C9A84C;
    box-shadow:0 2px 12px rgba(201,168,76,0.25);
    cursor:default;
}
.rp-page-active:hover{
    color:#0F0A1A;
    box-shadow:0 2px 12px rgba(201,168,76,0.25);
}

/* ─── Footer ─── */
.rp-footer-full{
    margin-top:40px;
    padding:32px 28px 20px;
    background:linear-gradient(145deg,#1A1330,#130E22);
    border:1px solid #2A2048;
    border-radius:18px;
    position:relative;
    overflow:hidden;
}
.rp-footer-full::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,#7B5EA7,#C9A84C,#7B5EA7);
}
.rp-footer-top{
    display:flex;
    gap:32px;
    margin-bottom:24px;
}
.rp-footer-brand{flex:1;min-width:0}
.rp-footer-logo{
    display:inline-flex;align-items:center;gap:6px;
    font-family:'Playfair Display',serif;font-size:16px;font-weight:700;
    text-decoration:none;margin-bottom:10px;
}
.rp-footer-logo-icon{
    width:26px;height:26px;border-radius:7px;
    background:linear-gradient(135deg,#1E1636,#2A2048);
    border:1px solid #3A2E5E;
    display:flex;align-items:center;justify-content:center;
}
.rp-footer-desc{
    font-size:12px;color:#7B6F98;line-height:1.6;margin-top:8px;
}
.rp-footer-links{
    display:flex;gap:32px;flex-shrink:0;
}
.rp-footer-col h4{
    font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:1.5px;color:#C9A84C;margin-bottom:10px;
}
.rp-footer-col a{
    display:block;font-size:12px;color:#7B6F98;
    text-decoration:none;padding:3px 0;transition:color 0.2s;
}
.rp-footer-col a:hover{color:#EDE8F5}
.rp-footer-bottom{
    display:flex;align-items:center;justify-content:space-between;
    padding-top:16px;
    border-top:1px solid #2A2048;
    font-size:11px;color:#554B73;
}
.rp-footer-powered{
    display:flex;align-items:center;gap:5px;
    color:#7B6F98;
}

/* ─── Gold divider ─── */
.rp-gold-line{
    height:1px;margin:24px 0;
    background:linear-gradient(90deg,transparent,rgba(201,168,76,0.25),transparent);
}

@media(max-width:480px){
    body{padding:56px 12px 20px}
    .rp-card{padding:20px;border-radius:14px}
    .rp-header h1{font-size:22px}
    .rp-avg{font-size:30px}
    .rp-client-logo{width:80px;height:80px;border-radius:14px}
    .rp-topbar-inner{padding:10px 14px;gap:10px}
    .rp-topbar-brand{font-size:13px}
    .rp-topbar-slogan{font-size:10px}
    .rp-topbar-logo-icon{width:24px;height:24px;border-radius:6px}
    .rp-footer-full{padding:24px 20px 16px;border-radius:14px}
    .rp-footer-top{flex-direction:column;gap:20px}
    .rp-footer-links{gap:24px}
    .rp-footer-bottom{flex-direction:column;gap:8px;text-align:center}
}