/*═══════════════════════════════════════════════════════════════

MODULE

Review Center

STEP

03

GOAL

Create the visual design of the Review Center popup.

FILE

inc/reviews/components/review-center/review-center.css

DESCRIPTION

Controls only the visual appearance of the Review Center.

RESPONSIBILITY

✔ Overlay

✔ Popup

✔ Header

✔ Body

✔ Footer

✔ Close Button

✔ Responsive

DEPENDENCIES

review-center-template.php

review-center.js

RELATED MODULES

Product Reviews

NOTES

CSS only.

No HTML.

No JavaScript.

═══════════════════════════════════════════════════════════════*/


.dm-review-center-overlay{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(6px);

    z-index:999999;

}

.dm-review-center-overlay.dm-active{

    display:flex;

}

.dm-review-center-popup{

    width:min(760px,92vw);

    max-height:90vh;

    overflow:hidden;

    background:#111827;

    border:1px solid #2b3445;

    border-radius:18px;

    box-shadow:0 30px 80px rgba(0,0,0,.45);

}

.dm-review-center-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:24px 28px;

    border-bottom:1px solid #243247;

}

.dm-review-center-header h2{

    margin:0;

    color:#fff;

    font-size:24px;

    font-weight:700;

}

.dm-review-center-body{

    padding:28px;

    min-height:420px;

    overflow-y:auto;

}

.dm-review-center-footer{

    padding:20px 28px;

    border-top:1px solid #243247;

}

.dm-review-center-close{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#1f2937;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    transition:.25s;

}

.dm-review-center-close:hover{

    background:#8b5cf6;

}


/* ---- v2: scrollable review list ---- */
.dm-review-center-popup{ position:relative; display:flex; flex-direction:column; width:min(680px,94vw); max-height:86vh; }
.dm-review-center-header{ flex:0 0 auto; padding:20px 24px; gap:16px; }
.dm-review-center-header h2{ font-size:20px; }
.dm-rc-sub{ display:flex; align-items:center; gap:8px; margin:6px 0 0; color:#94a3b8; font-size:13px; }
.dm-rc-avg{ color:#fff; font-weight:700; font-size:15px; }
.dm-rc-stars,.dm-rc-rating{ letter-spacing:2px; background:linear-gradient(90deg,#f5b301 var(--fill,0%),#475569 var(--fill,0%)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.dm-rc-rating{ font-size:18px; line-height:1; margin:2px 0 10px; }
.dm-review-center-close{ position:static; flex:0 0 auto; width:38px; height:38px; font-size:15px; }
.dm-review-center-body{ flex:1 1 auto; min-height:0; padding:18px 24px 24px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#334155 transparent; display:grid; gap:14px; align-content:start; }
.dm-rc-item{ padding:18px 20px; background:#0f172a; border:1px solid #243247; border-radius:16px; }
.dm-rc-item__top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.dm-rc-avatar{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(135deg,#8b5cf6,#7c3aed); color:#fff; font-weight:700; }
.dm-rc-who{ display:flex; flex-direction:column; flex:1; min-width:0; }
.dm-rc-who strong{ color:#f1f5f9; font-size:15px; }
.dm-rc-verified{ color:#10b981; font-size:12px; font-weight:600; }
.dm-rc-item time{ color:#64748b; font-size:12px; white-space:nowrap; }
.dm-rc-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.dm-rc-tags span{ padding:3px 10px; border-radius:999px; background:rgba(124,58,237,.14); color:#c4b5fd; font-size:12px; }
.dm-rc-text{ margin:0; color:#cbd5e1; font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
.dm-rc-photos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.dm-rc-photos a{ width:84px; height:84px; border-radius:10px; overflow:hidden; border:1px solid #243247; display:block; }
.dm-rc-photos img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.dm-rc-photos a:hover img{ transform:scale(1.08); }
.dm-rc-empty{ color:#94a3b8; text-align:center; padding:30px 0; }
@media (max-width:600px){ .dm-review-center-body{ padding:14px; } .dm-rc-item{ padding:14px; } }
.dm-rc-rating{ display:block; width:max-content; }
.dm-rc-stars{ display:inline-block; }

.dm-rc-verified.dm-rc-demo{ color:#f59e0b; }

.dm-rc-verified.dm-rc-banned{ color:#f87171; }