/* =================================================================
   Viwise Product Review v2.0 — styles
   Màu sắc được inject qua wp_add_inline_style từ admin settings
   ================================================================= */

/* Fallback nếu inline style chưa load */
:root {
    --vwr-primary:  #1B4D35;
    --vwr-star:     #F59E0B;
    --vwr-btn-text: #FFFFFF;
    --vwr-radius:   10px;

    /* Không đổi */
    --vwr-bg:       #F8FAF9;
    --vwr-border:   #E2E8F0;
    --vwr-text:     #1E293B;
    --vwr-muted:    #64748B;
    --vwr-success:  #16A34A;
    --vwr-error:    #DC2626;
}

/* ── WRAPPER ─────────────────────────────────────────────────── */
.vwr-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width:   820px;
    color:       var(--vwr-text);
    margin:      36px 0;
    line-height: 1.6;
}

/* ── TIÊU ĐỀ KHU VỰC ────────────────────────────────────────── */
.vwr-section-title {
    font-size:     1.15rem;
    font-weight:   700;
    margin:        0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--vwr-primary);
    display:       inline-block;
    color:         var(--vwr-text);
}

/* ── TỔNG HỢP ĐIỂM ───────────────────────────────────────────── */
.vwr-summary {
    display:       flex;
    gap:           32px;
    align-items:   center;
    background:    var(--vwr-bg);
    border:        1px solid var(--vwr-border);
    border-radius: var(--vwr-radius);
    padding:       24px 28px;
    margin-bottom: 28px;
}

/* Điểm trung bình */
.vwr-avg-box {
    text-align: center;
    min-width:  110px;
}

.vwr-avg-num {
    font-size:   3.2rem;
    font-weight: 800;
    color:       var(--vwr-primary);
    line-height: 1;
}

.vwr-avg-of {
    font-size: 1.1rem;
    color:     var(--vwr-muted);
}

.vwr-total-label {
    font-size:  0.82rem;
    color:      var(--vwr-muted);
    margin:     4px 0 0;
}

/* Ngôi sao */
.vwr-stars       { display:inline-flex; gap:2px; }
.vwr-star        { font-size:1rem; }
.vwr-star.full   { color:var(--vwr-star); }
.vwr-star.half   { color:var(--vwr-star); opacity:.55; }
.vwr-star.empty  { color:var(--vwr-border); }
.vwr-stars-row   { margin:6px 0 2px; }

/* Phân bổ thanh */
.vwr-dist     { flex:1; display:flex; flex-direction:column; gap:7px; }
.vwr-bar-row  { display:flex; align-items:center; gap:10px; font-size:.83rem; }
.vwr-bar-label{ width:28px; color:var(--vwr-muted); flex-shrink:0; }
.vwr-bar-track{
    flex:1; height:8px;
    background:    var(--vwr-border);
    border-radius: 99px;
    overflow:      hidden;
}
.vwr-bar-fill {
    height:        100%;
    background:    var(--vwr-star);
    border-radius: 99px;
    transition:    width .5s ease;
}
.vwr-bar-num  { width:20px; text-align:right; color:var(--vwr-muted); }

/* ── DANH SÁCH NHẬN XÉT ──────────────────────────────────────── */
.vwr-list { margin-bottom: 32px; }

.vwr-item {
    padding:       18px 20px;
    border:        1px solid var(--vwr-border);
    border-radius: var(--vwr-radius);
    margin-bottom: 10px;
    background:    #fff;
    transition:    box-shadow .2s;
}
.vwr-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }

.vwr-item-header {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 10px;
}

.vwr-avatar {
    width:           38px;
    height:          38px;
    border-radius:   50%;
    background:      var(--vwr-primary);
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    font-size:       1rem;
    flex-shrink:     0;
}

.vwr-meta    { flex:1; }
.vwr-name    { display:block; font-size:.93rem; }
.vwr-date    { font-size:.78rem; color:var(--vwr-muted); margin-left:auto; white-space:nowrap; }
.vwr-content { margin:0; font-size:.93rem; color:var(--vwr-text); }

/* ── FORM GỬI NHẬN XÉT ──────────────────────────────────────── */
.vwr-form-wrap {
    background:    var(--vwr-bg);
    border:        1px solid var(--vwr-border);
    border-radius: var(--vwr-radius);
    padding:       24px 28px;
}

.vwr-form { display:flex; flex-direction:column; gap:14px; }

.vwr-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   14px;
}

.vwr-field       { display:flex; flex-direction:column; gap:5px; }
.vwr-field label { font-size:.85rem; font-weight:600; color:var(--vwr-text); }
.vwr-field label span { color:var(--vwr-error); margin-left:2px; }

.vwr-input,
.vwr-textarea {
    border:        1px solid var(--vwr-border);
    border-radius: calc( var(--vwr-radius) * 0.7 );
    padding:       9px 13px;
    font-size:     .93rem;
    width:         100%;
    box-sizing:    border-box;
    background:    #fff;
    color:         var(--vwr-text);
    transition:    border-color .2s, box-shadow .2s;
}
.vwr-input:focus,
.vwr-textarea:focus {
    outline:    none;
    border-color: var(--vwr-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vwr-primary) 15%, transparent);
}
.vwr-textarea { resize:vertical; min-height:96px; }

/* Chọn sao trong form */
.vwr-star-pick { display:flex; gap:3px; }

.vwr-star-btn {
    font-size:  2rem;
    color:      var(--vwr-border);
    background: none;
    border:     none;
    padding:    0 2px;
    cursor:     pointer;
    line-height: 1;
    transition: color .15s, transform .15s;
}
.vwr-star-btn:hover,
.vwr-star-btn.on {
    color:     var(--vwr-star);
    transform: scale(1.15);
}

/* Nút gửi */
.vwr-submit {
    display:       inline-block;
    background:    var(--vwr-primary);
    color:         var(--vwr-btn-text);
    border:        none;
    border-radius: calc( var(--vwr-radius) * 0.7 );
    padding:       11px 26px;
    font-size:     .95rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    opacity .2s, transform .1s;
    align-self:    flex-start;
}
.vwr-submit:hover    { opacity:.88; }
.vwr-submit:active   { transform:scale(.98); }
.vwr-submit:disabled { opacity:.5; cursor:not-allowed; }

/* Thông báo */
.vwr-msg {
    padding:       11px 14px;
    border-radius: calc( var(--vwr-radius) * 0.7 );
    font-size:     .9rem;
    margin-bottom: 10px;
}
.vwr-msg.ok  { background:#DCFCE7; color:var(--vwr-success); border:1px solid #86EFAC; }
.vwr-msg.err { background:#FEE2E2; color:var(--vwr-error);   border:1px solid #FCA5A5; }

/* Tab counter */
.vwr-tab-count { font-size:.82em; opacity:.65; font-weight:400; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .vwr-summary { flex-direction:column; padding:18px; }
    .vwr-row     { grid-template-columns:1fr; }
    .vwr-form-wrap { padding:18px; }
    .vwr-submit  { width:100%; text-align:center; }
}