.mfrash-slide-banner-wrapper{ background:#f4f4f4; border-radius:6px; height:28px; margin-top:8px; overflow:hidden; font-family:"Cairo",sans-serif } .mfrash-slide-banner{ position:relative; height:100% } .slide-text{ position:absolute; width:100%; top:0; left:0; opacity:0; transform:translateY(100%); transition:all 1s ease; text-align:center; font-size:13px; color:#333; line-height:28px; white-space:nowrap; font-weight:700 } .slide-text.active{ opacity:1; transform:translateY(0) } @media(max-width:768px){ .mfrash-slide-banner-wrapper{height:26px} .slide-text{font-size:12.5px;line-height:26px} } @media(max-width:480px){ .mfrash-slide-banner-wrapper{height:24px} .slide-text{font-size:10px;line-height:24px} }.wcpr {
--wcpr-text: #111;
--wcpr-muted: #6b7280;
--wcpr-line: #e5e7eb;
--wcpr-soft: #f7f7f7;
--wcpr-accent: #111;
--wcpr-star: #d99a00;
--wcpr-star-soft: #f3ead6;
direction: rtl;
color: var(--wcpr-text);
font-family: inherit;
clear: both;
margin: 38px 0;
scroll-margin-top: 110px;
}
.wcpr * {
box-sizing: border-box;
}
.wcpr-modal-open {
overflow: hidden;
}
.wcpr-summary {
display: grid;
grid-template-columns: minmax(220px, 0.72fr) minmax(320px, 1.28fr);
gap: 30px;
align-items: center;
width: min(100%, 760px);
margin-inline: auto;
padding: 18px 0 18px 28px;
border-inline-start: 1px solid var(--wcpr-line);
}
.wcpr-score {
text-align: right;
}
.wcpr-title {
margin-bottom: 18px;
font-size: 34px;
font-weight: 800;
line-height: 1.2;
}
.wcpr-average {
color: #3f4452;
font-size: 48px;
font-weight: 800;
letter-spacing: 0;
line-height: 1;
}
.wcpr-score p {
margin: 8px 0 0;
color: #3f4452;
font-size: 17px;
}
.wcpr-breakdown {
display: grid;
gap: 9px;
max-width: none;
}
.wcpr-bar-row {
display: grid;
grid-template-columns: 58px minmax(160px, 1fr) 42px;
grid-template-areas: "percent track label";
gap: 10px;
align-items: center;
direction: ltr;
font-size: 16px;
font-weight: 700;
}
.wcpr-bar-percent {
grid-area: percent;
color: #4b5160;
text-align: left;
font-variant-numeric: tabular-nums;
}
.wcpr-track {
grid-area: track;
position: relative;
display: block;
height: 10px;
overflow: hidden;
border-radius: 999px;
background: #f0f1f5;
}
.wcpr-track span {
position: absolute;
inset: 0 0 0 auto;
border-radius: inherit;
background: var(--wcpr-star);
}
.wcpr-bar-label {
grid-area: label;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
color: #3f4452;
direction: rtl;
}
.wcpr-bar-label span {
color: var(--wcpr-star);
font-size: 18px;
line-height: 1;
}
.wcpr-stars {
position: relative;
display: inline-block;
color: var(--wcpr-star-soft);
direction: rtl;
line-height: 1;
letter-spacing: 0;
}
.wcpr-stars::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: var(--rating);
overflow: hidden;
color: var(--wcpr-star);
content: "★★★★★";
text-align: right;
white-space: nowrap;
}
.wcpr-stars-large {
margin-top: 10px;
font-size: 34px;
}
.wcpr-stars-small {
font-size: 24px;
}
.wcpr-form-card {
margin: 28px 0;
padding: 0;
border: 1px solid var(--wcpr-line);
border-radius: 8px;
background: #fff;
}
.wcpr-review-cta {
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.wcpr-review-cta h3 {
margin: 0;
font-size: 22px;
line-height: 1.3;
}
.wcpr-review-cta p {
margin: 6px 0 0;
color: var(--wcpr-muted);
font-size: 15px;
}
.wcpr-notice,
.wcpr-message {
margin: 12px 0 0;
color: var(--wcpr-muted);
}
.wcpr-login-prompt {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
padding: 18px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: linear-gradient(180deg, #fff, #fafafa);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.wcpr-login-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 50%;
background: #f3f4f6;
color: #4b5563;
font-size: 22px;
font-weight: 800;
line-height: 1;
}
.wcpr-login-copy {
flex: 1 1 auto;
min-width: 0;
}
.wcpr-login-copy strong {
display: block;
color: #1f2937;
font-size: 18px;
line-height: 1.4;
}
.wcpr-login-copy p {
margin: 5px 0 0;
color: var(--wcpr-muted);
font-size: 14px;
line-height: 1.6;
}
.wcpr-login-button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border-radius: 6px;
padding: 10px 16px;
background: #111;
color: #fff;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
.wcpr-login-button:hover {
color: #fff;
opacity: 0.86;
}
.wcpr-message.is-error {
color: #b91c1c;
}
.wcpr-message.is-success {
color: #047857;
}
.wcpr-form {
display: grid;
gap: 16px;
}
.wcpr-field-title {
display: block;
margin-bottom: 7px;
font-weight: 700;
}
.wcpr-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.wcpr-form label span {
display: block;
margin-bottom: 7px;
font-weight: 700;
}
.wcpr-form input[type="text"],
.wcpr-form input[type="email"],
.wcpr-form textarea {
width: 100%;
border: 1px solid #d8dbe2;
border-radius: 8px;
padding: 12px 14px;
background: #fff;
color: var(--wcpr-text);
font: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wcpr-form input[type="text"]:focus,
.wcpr-form input[type="email"]:focus,
.wcpr-form textarea:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
outline: 0;
}
.wcpr-form textarea {
resize: vertical;
}
.wcpr-rating-field {
display: inline-flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 4px;
width: max-content;
}
.wcpr-rating-field input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.wcpr-rating-field label {
cursor: pointer;
color: #d6d6d6;
font-size: 34px;
line-height: 1;
transition: color 0.15s ease, transform 0.15s ease;
}
.wcpr-rating-field label:hover,
.wcpr-rating-field label:hover ~ label,
.wcpr-rating-field input:checked ~ label {
color: var(--wcpr-star);
}
.wcpr-rating-field label:hover {
transform: translateY(-1px);
}
.wcpr-upload input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.wcpr-upload-box {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 76px;
margin-bottom: 0 !important;
border: 1px dashed #cfd5df;
border-radius: 8px;
background: #f8fafc;
color: #334155;
cursor: pointer;
font-weight: 700;
transition: border-color 0.15s ease, background 0.15s ease;
}
.wcpr-upload-box:hover {
border-color: #2563eb;
background: #f5f9ff;
}
.wcpr-upload-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #111;
color: #fff;
font-size: 20px;
line-height: 1;
}
.wcpr-upload-box span {
margin-bottom: 0 !important;
}
.wcpr-upload small {
display: block;
margin-top: 6px;
color: var(--wcpr-muted);
}
.wcpr-preview {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wcpr-preview img {
width: 72px;
height: 72px;
border-radius: 7px;
object-fit: cover;
}
.wcpr-open-modal,
.wcpr-submit,
.wcpr-load-more,
.wcpr-helpful,
.wcpr-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: max-content;
border: 1px solid var(--wcpr-accent);
border-radius: 6px;
padding: 10px 16px;
background: var(--wcpr-accent);
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.wcpr-open-modal {
padding-inline: 22px;
white-space: nowrap;
}
.wcpr-secondary {
border-color: #d8dbe2;
background: #fff;
color: #374151;
}
.wcpr-open-modal:hover,
.wcpr-submit:hover,
.wcpr-load-more:hover,
.wcpr-helpful:hover,
.wcpr-secondary:hover {
opacity: 0.86;
}
.wcpr-open-modal:disabled,
.wcpr-submit:disabled,
.wcpr-load-more:disabled,
.wcpr-helpful:disabled {
cursor: wait;
opacity: 0.6;
}
.wcpr-modal {
position: fixed;
z-index: 999998;
inset: 0;
display: grid;
place-items: center;
padding: 20px;
}
.wcpr-modal[hidden] {
display: none;
}
.wcpr-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.62);
backdrop-filter: blur(3px);
}
.wcpr-modal-panel {
position: relative;
z-index: 1;
width: min(640px, 100%);
max-height: min(760px, 92vh);
overflow: auto;
border-radius: 8px;
padding: 24px;
background: #fff;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}
.wcpr-modal-close {
position: absolute;
top: 14px;
inset-inline-end: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid #e5e7eb;
border-radius: 50%;
background: #fff;
color: #111827;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.wcpr-modal-head {
padding-inline-end: 42px;
margin-bottom: 20px;
}
.wcpr-modal-head h3 {
margin: 0;
font-size: 26px;
line-height: 1.25;
}
.wcpr-modal-head p {
margin: 8px 0 0;
color: var(--wcpr-muted);
font-size: 15px;
}
.wcpr-modal-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: flex-end;
margin-top: 4px;
}
.wcpr-reviews-wrap {
margin-top: 20px;
}
.wcpr-all-reviews {
width: min(100%, 980px);
margin-inline: auto;
padding-inline: 16px;
}
.wcpr-all-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 22px;
align-items: stretch;
margin-bottom: 18px;
padding: 24px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.wcpr-all-copy {
display: flex;
flex-direction: column;
justify-content: center;
}
.wcpr-all-kicker {
display: inline-flex;
width: max-content;
max-width: 100%;
margin-bottom: 10px;
border-radius: 999px;
padding: 5px 10px;
background: #fff7e6;
color: #9a6a00;
font-size: 13px;
font-weight: 800;
line-height: 1.3;
}
.wcpr-all-copy h2 {
margin: 0;
color: #111827;
font-size: 34px;
line-height: 1.25;
}
.wcpr-all-copy p {
max-width: 620px;
margin: 10px 0 0;
color: var(--wcpr-muted);
font-size: 16px;
line-height: 1.8;
}
.wcpr-site-score {
display: grid;
place-items: center;
align-content: center;
gap: 8px;
min-height: 180px;
border: 1px solid #eceff3;
border-radius: 8px;
padding: 18px;
background: #fff;
text-align: center;
}
.wcpr-site-score > span {
color: #4b5563;
font-size: 14px;
font-weight: 800;
}
.wcpr-site-score strong {
color: #111827;
font-size: 46px;
font-weight: 900;
line-height: 1;
}
.wcpr-site-score p {
margin: 0;
color: var(--wcpr-muted);
font-size: 14px;
line-height: 1.5;
}
.wcpr-all-photos {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(92px, 1fr);
gap: 10px;
overflow-x: auto;
margin-bottom: 18px;
padding: 2px 0 12px;
scrollbar-width: thin;
}
.wcpr-all-photo {
min-width: 92px;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.wcpr-list {
display: grid;
gap: 18px;
}
.wcpr-review {
padding: 22px 0;
border-bottom: 1px solid var(--wcpr-line);
}
.wcpr-review-head {
display: flex;
gap: 14px;
align-items: flex-start;
justify-content: flex-start;
}
.wcpr-customer {
display: inline-flex;
direction: rtl;
gap: 10px;
align-items: center;
min-width: 0;
}
.wcpr-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 50%;
background: #eef0f6;
color: #8b92a3;
font-size: 18px;
font-weight: 800;
line-height: 1;
}
.wcpr-customer-info {
display: grid;
gap: 3px;
min-width: 0;
text-align: right;
}
.wcpr-author-line {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: flex-start;
}
.wcpr-author {
color: #3f4452;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
}
.wcpr-review-head time {
color: var(--wcpr-muted);
font-size: 15px;
line-height: 1.2;
}
.wcpr-badge {
display: inline-flex;
gap: 5px;
align-items: center;
border-radius: 999px;
padding: 4px 9px;
background: #f4f5f8;
color: #3f4452;
font-size: 12px;
font-weight: 700;
vertical-align: middle;
}
.wcpr-badge-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: #4b5565;
color: #fff;
font-size: 11px;
line-height: 1;
}
.wcpr-review-rating {
display: inline-flex;
align-items: center;
margin-top: 4px;
}
.wcpr-content {
max-width: 900px;
margin-top: 14px;
font-size: 18px;
line-height: 1.7;
}
.wcpr-review-product {
display: inline-flex;
width: max-content;
max-width: 100%;
margin-top: 12px;
border-radius: 999px;
padding: 5px 10px;
background: #f5f7fb;
color: #334155;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
}
.wcpr-review-product:hover {
background: #eef2f7;
color: #111827;
}
.wcpr-content p {
margin: 0 0 8px;
}
.wcpr-images {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 12px;
max-width: 760px;
margin-top: 14px;
}
.wcpr-image-button {
display: block;
overflow: hidden;
aspect-ratio: 1 / 1;
border: 0;
border-radius: 8px;
padding: 0;
background: #f3f4f6;
cursor: zoom-in;
}
.wcpr-image-button img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.18s ease;
}
.wcpr-image-button:hover img {
transform: scale(1.04);
}
.wcpr-review-actions {
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
.wcpr-helpful {
position: relative;
z-index: 2;
min-height: 34px;
border-color: #9aa6bd;
border-radius: 5px;
padding: 6px 12px;
background: #fff;
color: #637189;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.wcpr-helpful:hover {
border-color: #64748b;
background: #f8fafc;
color: #334155;
opacity: 1;
}
.wcpr-helpful.is-voted {
border-color: var(--wcpr-brand, #1270c2);
background: var(--wcpr-brand-soft, #eef7ff);
color: var(--wcpr-brand, #1270c2);
}
.wcpr-helpful * {
pointer-events: none;
}
.wcpr-helpful-icon {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.wcpr-helpful-count {
font-variant-numeric: tabular-nums;
}
.wcpr-load-more {
margin-top: 20px;
}
.wcpr-empty {
color: var(--wcpr-muted);
}
.wcpr-trust-slider {
width: min(100%, 1120px);
margin-inline: auto;
padding-inline: 16px;
overflow: hidden;
}
.wcpr-slider-viewport {
overflow: hidden;
padding: 2px 0 6px;
}
.wcpr-slider-track {
display: flex;
width: max-content;
gap: 16px;
transform: translateX(0);
transition: transform 0.62s ease;
will-change: transform;
}
.wcpr-slider-card {
display: grid;
flex: 0 0 310px;
min-height: 210px;
overflow: hidden;
border: 1px solid var(--wcpr-line);
border-radius: 8px;
background: #fff;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}
.wcpr-slider-body {
display: grid;
gap: 12px;
align-content: start;
padding: 20px;
text-align: right;
}
.wcpr-slider-name {
color: #111827;
font-size: 17px;
font-weight: 900;
line-height: 1.3;
}
.wcpr-slider-verified {
display: inline-flex;
width: max-content;
max-width: 100%;
gap: 6px;
align-items: center;
border-radius: 999px;
padding: 4px 9px;
background: #f4f5f8;
color: #3f4452;
font-size: 12px;
font-weight: 800;
line-height: 1.2;
}
.wcpr-slider-body p {
margin: 0;
color: #334155;
font-size: 15px;
line-height: 1.75;
overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
.wcpr-slider-viewport {
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.wcpr-slider-card {
scroll-snap-align: start;
}
.wcpr-slider-card[aria-hidden="true"] {
display: none;
}
}
.wcpr-lightbox {
position: fixed;
z-index: 999999;
inset: 0;
display: grid;
place-items: center;
padding: 28px;
background: rgba(0, 0, 0, 0.76);
}
.wcpr-lightbox[hidden] {
display: none;
}
.wcpr-lightbox img {
max-width: min(960px, 94vw);
max-height: 88vh;
border-radius: 8px;
background: #fff;
object-fit: contain;
}
.wcpr-lightbox button {
position: absolute;
top: 16px;
inset-inline-end: 16px;
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: #fff;
color: #111;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.wcpr-request-body {
background: #f8fafc;
}
.wcpr-order-review-page {
--wcpr-brand: #1270c2;
--wcpr-brand-dark: #0b4f91;
--wcpr-brand-soft: #eef7ff;
--wcpr-brand-line: #cfe6fb;
width: min(100%, 920px);
margin: 0 auto;
padding: 36px 16px;
}
.wcpr-order-review-panel {
border: 1px solid var(--wcpr-brand-line);
border-radius: 18px;
padding: 34px;
background: #fff;
box-shadow: 0 18px 50px rgba(18, 112, 194, 0.14);
}
.wcpr-order-review-head {
display: grid;
place-items: center;
margin-bottom: 24px;
text-align: center;
}
.wcpr-order-review-icon {
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin-bottom: 8px;
border-radius: 16px;
background: linear-gradient(135deg, #e7f4ff, #ffffff);
color: var(--wcpr-brand);
font-size: 30px;
box-shadow: inset 0 0 0 1px var(--wcpr-brand-line), 0 8px 20px rgba(18, 112, 194, 0.12);
}
.wcpr-order-review-head h1,
.wcpr-order-review-message h1 {
margin: 0;
color: var(--wcpr-brand-dark);
font-size: 34px;
font-weight: 900;
line-height: 1.35;
}
.wcpr-order-review-head p,
.wcpr-order-review-message p,
.wcpr-coupon-note {
margin: 10px 0 0;
color: var(--wcpr-muted);
font-size: 16px;
line-height: 1.8;
}
.wcpr-order-info {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
width: 100%;
margin-top: 22px;
border: 1px solid var(--wcpr-brand-line);
border-radius: 8px;
padding: 13px 18px;
background: var(--wcpr-brand-soft);
color: var(--wcpr-brand-dark);
font-size: 15px;
font-weight: 800;
}
.wcpr-order-review-form {
display: grid;
gap: 22px;
}
.wcpr-order-product-review {
display: grid;
gap: 18px;
border: 1px solid var(--wcpr-brand-line);
border-radius: 8px;
padding: 0;
background: #fff;
overflow: hidden;
box-shadow: 0 8px 22px rgba(18, 112, 194, 0.06);
}
.wcpr-order-section-title {
margin: 0;
color: var(--wcpr-brand-dark);
font-size: 22px;
font-weight: 900;
line-height: 1.4;
text-align: center;
}
.wcpr-order-product-head {
display: grid;
grid-template-columns: 170px minmax(0, 1fr);
gap: 18px;
align-items: center;
margin: 0 16px;
border: 1px solid var(--wcpr-brand-line);
border-radius: 8px;
padding: 8px;
background: #fafdff;
}
.wcpr-order-product-head img,
.wcpr-order-product-placeholder {
width: 154px;
height: 96px;
border-radius: 8px;
background: #f3f4f6;
object-fit: cover;
}
.wcpr-order-product-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--wcpr-star);
font-size: 28px;
}
.wcpr-order-product-info {
display: grid;
gap: 6px;
color: var(--wcpr-brand-dark);
text-align: right;
}
.wcpr-order-product-info h3 {
margin: 0;
font-size: 19px;
font-weight: 900;
line-height: 1.35;
}
.wcpr-order-product-info span {
color: #355a7d;
font-size: 14px;
line-height: 1.35;
}
.wcpr-order-criteria {
display: grid;
margin: 0 16px;
border: 1px solid var(--wcpr-brand-line);
border-radius: 8px;
overflow: hidden;
}
.wcpr-order-rating-row {
display: grid;
grid-template-columns: minmax(180px, 1fr) auto 92px;
gap: 14px;
align-items: center;
min-height: 64px;
border-bottom: 1px solid #e5f2fd;
padding: 10px 16px;
}
.wcpr-order-rating-row:last-child {
border-bottom: 0;
}
.wcpr-order-rating-label {
display: grid;
gap: 2px;
color: var(--wcpr-brand-dark);
text-align: right;
}
.wcpr-order-rating-label strong {
font-size: 17px;
font-weight: 900;
line-height: 1.25;
}
.wcpr-order-rating-label span {
color: #355a7d;
font-size: 13px;
line-height: 1.35;
}
.wcpr-order-rating label {
font-size: 30px;
text-shadow: 0 1px 0 #c68518;
}
.wcpr-order-rating-text {
color: var(--wcpr-brand);
font-size: 14px;
font-weight: 800;
text-align: center;
}
.wcpr-order-comment {
display: grid;
gap: 8px;
margin: 0 16px;
color: var(--wcpr-brand-dark);
font-size: 17px;
font-weight: 900;
}
.wcpr-order-comment em {
font-style: normal;
}
.wcpr-order-product-review textarea {
width: 100%;
min-height: 118px;
border-color: var(--wcpr-brand-line);
border-radius: 8px;
color: var(--wcpr-brand-dark);
resize: vertical;
}
.wcpr-order-product-review textarea:focus {
border-color: var(--wcpr-brand);
box-shadow: 0 0 0 2px rgba(18, 112, 194, 0.14);
outline: 0;
}
.wcpr-order-count {
color: var(--wcpr-brand);
font-size: 13px;
font-weight: 700;
text-align: left;
direction: ltr;
}
.wcpr-order-recommend {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
margin: 0 16px 16px;
color: var(--wcpr-brand-dark);
font-size: 18px;
font-weight: 900;
}
.wcpr-order-recommend div {
display: inline-flex;
gap: 12px;
align-items: center;
}
.wcpr-order-recommend input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.wcpr-order-recommend label {
min-width: 108px;
border: 1px solid var(--wcpr-brand-line);
border-radius: 8px;
padding: 9px 16px;
background: #fafdff;
color: var(--wcpr-brand-dark);
font-size: 15px;
font-weight: 900;
text-align: center;
cursor: pointer;
}
.wcpr-order-recommend input:checked + .is-yes {
border-color: var(--wcpr-brand);
background: var(--wcpr-brand-soft);
color: var(--wcpr-brand);
}
.wcpr-order-recommend input:checked + .is-no {
border-color: #f3c2c2;
background: #fff0f0;
color: #b91c1c;
}
.wcpr-order-submit {
width: 100%;
margin-top: 4px;
}
.wcpr-order-review-message {
display: grid;
place-items: center;
text-align: center;
}
.wcpr-coupon-copy {
margin-top: 14px;
display: inline-flex;
align-items: stretch;
justify-content: center;
gap: 10px;
max-width: 100%;
}
.wcpr-coupon-code {
border: 1px dashed #111827;
border-radius: 8px;
padding: 12px 20px;
background: #f8fafc;
color: #111827;
font-size: 26px;
font-weight: 900;
letter-spacing: 1px;
direction: ltr;
}
.wcpr-copy-coupon {
border: 0;
border-radius: 8px;
padding: 0 18px;
background: var(--wcpr-brand, #1270c2);
color: #fff;
font-size: 15px;
font-weight: 800;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.wcpr-copy-coupon:hover,
.wcpr-copy-coupon:focus {
background: var(--wcpr-brand-dark, #0b4f91);
transform: translateY(-1px);
}
.wcpr-copy-coupon.is-copied {
background: #15803d;
}
@media (max-width: 720px) {
.wcpr {
margin: 24px 0;
}
.wcpr-summary {
grid-template-columns: 1fr;
gap: 18px;
padding: 18px 0;
border-inline-start: 0;
border-top: 1px solid var(--wcpr-line);
border-bottom: 1px solid var(--wcpr-line);
}
.wcpr-breakdown {
max-width: none;
}
.wcpr-title {
font-size: 26px;
}
.wcpr-average {
font-size: 42px;
}
.wcpr-bar-row {
grid-template-columns: 48px minmax(90px, 1fr) 38px;
gap: 9px;
font-size: 15px;
}
.wcpr-form-card {
padding: 0;
}
.wcpr-review-cta {
display: grid;
gap: 14px;
padding: 16px;
}
.wcpr-all-hero {
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 14px;
padding: 16px 14px;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.wcpr-all-reviews {
padding-inline: 12px;
}
.wcpr-all-kicker {
width: auto;
align-self: flex-start;
white-space: normal;
}
.wcpr-all-copy h2 {
font-size: 24px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.wcpr-all-copy p {
font-size: 14px;
line-height: 1.7;
}
.wcpr-site-score {
min-height: 0;
padding: 16px;
gap: 6px;
}
.wcpr-site-score strong {
font-size: 38px;
}
.wcpr-site-score p {
font-size: 13px;
}
.wcpr-stars-large {
font-size: 28px;
}
.wcpr-all-photos {
grid-auto-columns: 78px;
gap: 8px;
margin-inline: -12px;
padding: 2px 12px 12px;
scroll-snap-type: x mandatory;
}
.wcpr-all-photo {
min-width: 78px;
scroll-snap-align: start;
}
.wcpr-all-reviews .wcpr-reviews-wrap {
margin-top: 10px;
}
.wcpr-all-reviews .wcpr-list {
gap: 12px;
}
.wcpr-all-reviews .wcpr-review {
padding: 16px 14px;
border: 1px solid var(--wcpr-line);
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.wcpr-trust-slider {
padding-inline: 12px;
}
.wcpr-slider-viewport {
overflow: hidden;
padding-bottom: 12px;
}
.wcpr-slider-track {
gap: 12px;
}
.wcpr-slider-card {
flex-basis: 82vw;
min-height: 200px;
}
.wcpr-slider-body {
padding: 16px;
}
.wcpr-login-prompt {
display: grid;
gap: 12px;
text-align: center;
}
.wcpr-login-icon {
margin-inline: auto;
}
.wcpr-open-modal,
.wcpr-submit,
.wcpr-secondary,
.wcpr-login-button {
width: 100%;
}
.wcpr-grid {
grid-template-columns: 1fr;
}
.wcpr-modal {
padding: 12px;
}
.wcpr-modal-panel {
max-height: 94vh;
padding: 20px 16px;
}
.wcpr-modal-actions {
display: grid;
}
.wcpr-review-head {
display: flex;
gap: 10px;
align-items: flex-start;
}
.wcpr-customer {
align-items: flex-start;
width: 100%;
min-width: 0;
}
.wcpr-avatar {
flex-basis: 38px;
width: 38px;
height: 38px;
font-size: 16px;
}
.wcpr-author-line {
gap: 6px;
}
.wcpr-author {
font-size: 15px;
overflow-wrap: anywhere;
}
.wcpr-badge {
max-width: 100%;
padding: 4px 8px;
font-size: 11px;
white-space: normal;
}
.wcpr-review-head time {
font-size: 13px;
}
.wcpr-stars-small {
font-size: 20px;
}
.wcpr-content {
font-size: 15px;
line-height: 1.75;
overflow-wrap: anywhere;
}
.wcpr-review-product {
width: auto;
border-radius: 8px;
white-space: normal;
overflow-wrap: anywhere;
}
.wcpr-images {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
max-width: none;
}
.wcpr-review-actions {
justify-content: stretch;
}
.wcpr-helpful,
.wcpr-load-more {
width: 100%;
}
.wcpr-helpful {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.wcpr-order-review-page {
padding: 18px 10px;
}
.wcpr-order-review-panel {
padding: 18px 14px;
border-radius: 14px;
}
.wcpr-order-review-head h1,
.wcpr-order-review-message h1 {
font-size: 24px;
}
.wcpr-order-info {
grid-template-columns: 1fr;
gap: 8px;
padding: 12px;
font-size: 14px;
}
.wcpr-order-product-review {
gap: 14px;
}
.wcpr-order-product-head {
grid-template-columns: 88px minmax(0, 1fr);
gap: 10px;
margin: 0 12px;
align-items: start;
}
.wcpr-order-product-head img,
.wcpr-order-product-placeholder {
width: 82px;
height: 72px;
}
.wcpr-order-section-title {
font-size: 20px;
padding-inline: 8px;
}
.wcpr-order-criteria {
margin: 0 12px;
}
.wcpr-order-rating-row {
grid-template-columns: 1fr;
gap: 7px;
justify-items: stretch;
padding: 12px;
}
.wcpr-order-rating {
width: auto;
max-width: 100%;
}
.wcpr-order-rating label {
font-size: 26px;
}
.wcpr-order-product-info h3,
.wcpr-order-rating-label strong {
overflow-wrap: anywhere;
}
.wcpr-order-rating-text {
display: none;
}
.wcpr-order-comment {
margin: 0 12px;
font-size: 16px;
}
.wcpr-order-recommend {
grid-template-columns: 1fr;
margin: 0 12px 14px;
}
.wcpr-order-recommend div {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
}
.wcpr-order-recommend label {
min-width: 0;
}
.wcpr-coupon-code {
width: 100%;
font-size: 21px;
text-align: center;
overflow-wrap: anywhere;
}
.wcpr-coupon-copy {
display: flex;
flex-direction: column;
width: 100%;
}
.wcpr-copy-coupon {
width: 100%;
min-height: 46px;
}
}