/* ============================================================ * Product reviews — visual layer * * Ported from account4all-reviews-design-v1.0.0 (`reviews-component.html`). * That file is a JS-rendered demo whose CSS is unscoped: 102 of its 105 rules * were bare selectors (`*`, `body`, `button`, `a`, `h1,h2,h3,p`) that would * have restyled the whole site. Every rule here is therefore scoped under * `.a4a-reviews` and every class is prefixed `a4a-rv-*`. * * Dropped from the source, deliberately: * - its `:root` token block and dark set — already vendored in a4a-ds/tokens.css * (REVIEWS-DESIGN.md 7.2: do not duplicate token values) * - global resets — a4a-ds/base.css already supplies them, scoped to `.a4a` * - `@font-face` with 135 KB of embedded Vazirmatn — the theme uses licensed * IRANYekan, with Vazirmatn as the fallback the kit already ships * - `.demo-label`, `.toolbar`, `.filters`, `.filter`, `.sort`, `.result-count` * — demo chrome, and filters/sort are out of scope for this pass * * Class rename map (design -> here): * review->a4a-rv-review review-head->a4a-rv-head review-text->a4a-rv-text * review-actions->a4a-rv-actions identity->a4a-rv-identity avatar->a4a-rv-avatar * name->a4a-rv-name badge->a4a-rv-badge date->a4a-rv-date * long-copy->a4a-rv-more support->a4a-rv-support support-head->a4a-rv-support-head * support-mark->a4a-rv-support-mark thread-list->a4a-rv-list empty->a4a-rv-empty * pager->a4a-rv-pager page-info->a4a-rv-page-info disabled->a4a-rv-disabled * compose->a4a-rv-compose heading->a4a-rv-heading eyebrow->a4a-rv-eyebrow * primary->a4a-rv-primary secondary->a4a-rv-secondary text-button->a4a-rv-text-button * field->a4a-rv-field error->a4a-rv-error error-summary->a4a-rv-error-summary * guest-fields->a4a-rv-guest-fields stars->a4a-rv-stars star->a4a-rv-star * rating-label->a4a-rv-rating-label security-row->a4a-rv-security-row * submit-meta->a4a-rv-submit-meta reply-context->a4a-rv-reply-context * account->a4a-rv-account hint->a4a-rv-hint required->a4a-rv-required * intro->a4a-rv-intro status->a4a-rv-status icon->a4a-rv-icon * sr-> the kit's .a4a-sr-only * ============================================================ */ .a4a-reviews button, .a4a-reviews input, .a4a-reviews textarea, .a4a-reviews select { font:inherit } .a4a-reviews button, .a4a-reviews a, .a4a-reviews summary { touch-action:manipulation } .a4a-reviews button { cursor:pointer } .a4a-reviews button:disabled { cursor:not-allowed;opacity:.5 } .a4a-reviews a { color:var(--a4a-primary) } .a4a-reviews button, .a4a-reviews input, .a4a-reviews textarea, .a4a-reviews select { border-radius:12px } .a4a-reviews .reviews { max-width:960px;margin:0 auto;padding:32px 28px 48px } .a4a-reviews .a4a-rv-primary { display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;font-size:14px;font-weight:700;border:1px solid transparent;text-decoration:none;gap:8px;white-space:nowrap } .a4a-reviews .a4a-rv-primary { background:var(--a4a-primary);color:#fff;border-radius:12px;box-shadow:none } .a4a-reviews .a4a-rv-primary:hover { background:var(--a4a-primary-hover) } .a4a-reviews .a4a-rv-primary:focus-visible { outline:3px solid var(--a4a-primary);outline-offset:2px } .a4a-reviews .a4a-rv-primary:disabled, .a4a-reviews .a4a-rv-primary[aria-disabled=true] { background:var(--a4a-border);color:var(--a4a-text-disabled);cursor:not-allowed;opacity:1;pointer-events:none } .a4a-reviews .a4a-rv-primary .a4a-rv-icon { width:18px;height:18px } .a4a-reviews .a4a-rv-list { list-style:none;padding:0;margin:0;display:grid;gap:12px } .a4a-reviews .a4a-rv-review { background:#fff;border:1px solid var(--a4a-border);border-radius:20px;padding:20px;box-shadow:var(--a4a-shadow-sm) } .a4a-reviews .a4a-rv-head { display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:12px } .a4a-reviews .a4a-rv-avatar { width:44px;height:44px;display:grid;place-items:center;background:var(--a4a-primary-soft);color:var(--a4a-primary);border-radius:50%;font-weight:800;font-size:16px;flex-shrink:0 } /* Name on the first line, badges under it — the prototype's head layout. */ .a4a-reviews .a4a-rv-identity { display:flex;flex-direction:column;align-items:flex-start;gap:3px } .a4a-reviews .a4a-rv-identity .a4a-badge { font-size:12px } .a4a-reviews .a4a-rv-name { font-size:14px;font-weight:700 } .a4a-reviews .a4a-rv-badge { display:inline-flex;align-items:center;gap:4px;background:var(--a4a-success-soft);color:var(--a4a-success);border-radius:6px;padding:2px 7px;font-size:11px;white-space:nowrap } .a4a-reviews .a4a-rv-date { font-size:12px;color:var(--a4a-text-secondary);white-space:nowrap } .a4a-reviews .a4a-rv-text { font-size:15px;line-height:2;overflow-wrap:anywhere } .a4a-reviews .a4a-rv-text p+p { margin-top:8px } .a4a-reviews .a4a-rv-more { margin-top:8px } .a4a-reviews .a4a-rv-more summary { display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-size:13px;color:var(--a4a-primary);font-weight:700;list-style:none } .a4a-reviews .a4a-rv-more summary::-webkit-details-marker { display:none } .a4a-reviews .a4a-rv-more summary:after { content:'＋';margin-inline-start:8px } .a4a-reviews .a4a-rv-more[open] summary:after { content:'−' } .a4a-reviews .a4a-rv-actions { display:flex;justify-content:flex-end;align-items:center;margin-top:4px } .a4a-reviews .a4a-rv-text-button { border:0;background:transparent;color:var(--a4a-primary);padding:8px 10px;min-height:44px;font-size:13px;display:inline-flex;align-items:center;gap:6px } .a4a-reviews .a4a-rv-text-button:hover { background:var(--a4a-primary-soft) } /* #fafaff is the design's value (a blue-white one step off --a4a-surface-subtle); no token carries it. */ .a4a-reviews .a4a-rv-support { margin-block-start:16px;margin-inline-start:32px;padding:14px 16px;background:#fafaff;border-inline-start:3px solid var(--a4a-primary);border-radius:12px } .a4a-reviews .a4a-rv-support-head { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;font-size:13px;font-weight:700 } .a4a-reviews .a4a-rv-support-mark { color:var(--a4a-primary);display:inline-flex;align-items:center;gap:5px } .a4a-reviews .a4a-rv-support time { margin-inline-start:auto;font-size:11px;font-weight:400;color:var(--a4a-text-secondary) } .a4a-reviews .a4a-rv-support p { font-size:14px;line-height:1.95;overflow-wrap:anywhere } .a4a-reviews .a4a-rv-icon { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0 } .a4a-reviews .a4a-rv-badge .a4a-rv-icon { width:12px;height:12px } .a4a-reviews .a4a-rv-pager { display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0 12px;flex-wrap:wrap } .a4a-reviews .a4a-rv-pager a, .a4a-reviews .a4a-rv-pager span { display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--a4a-border-strong);background:white;padding:6px 12px;border-radius:12px;font-size:14px;text-decoration:none;color:var(--a4a-text) } /* The number group is a too, so it has to shed the chip styling above. */ .a4a-reviews .a4a-rv-pager .a4a-rv-pager-pages { display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;min-width:0;min-height:0;border:0;background:none;padding:0;border-radius:0 } .a4a-reviews .a4a-rv-pager [aria-current] { background:var(--a4a-primary);border-color:var(--a4a-primary);color:#fff } .a4a-reviews .a4a-rv-pager .a4a-rv-disabled { color:var(--a4a-text-secondary);border-color:var(--a4a-border) } /* Only the real links react. The current page and the two end-stop controls are , so neither can pick up a hover state it cannot act on. */ .a4a-reviews .a4a-rv-pager a:hover { background:var(--a4a-primary-soft);border-color:var(--a4a-primary-border);color:var(--a4a-primary) } .a4a-reviews .a4a-rv-pager a:focus-visible { outline:3px solid var(--a4a-primary);outline-offset:2px } .a4a-reviews .a4a-rv-pager .a4a-rv-disabled { cursor:default } .a4a-reviews .a4a-rv-page-info { text-align:center;font-size:12px;color:var(--a4a-text-secondary) } .a4a-reviews .a4a-rv-empty { background:#fff;border:1px dashed var(--a4a-border-strong);border-radius:20px;padding:32px 20px;text-align:center } .a4a-reviews .a4a-rv-empty .a4a-rv-icon { width:32px;height:32px;color:var(--a4a-primary);margin-bottom:8px } .a4a-reviews .a4a-rv-empty h2 { font-size:18px } .a4a-reviews .a4a-rv-empty p { color:var(--a4a-text-secondary);font-size:14px;margin:8px 0 16px } .a4a-reviews .a4a-rv-compose { margin-top:32px;background:#fff;border:1px solid var(--a4a-border);border-radius:20px;padding:24px;scroll-margin-top:20px } .a4a-reviews .a4a-rv-compose h3 { font-size:20px;font-weight:800;margin:0 } .a4a-reviews .a4a-rv-account { display:flex;align-items:center;gap:8px;font-size:14px;color:var(--a4a-text-secondary);padding:12px;border-radius:12px;background:var(--a4a-surface-subtle) } .a4a-reviews .a4a-rv-account strong { color:var(--a4a-text) } .a4a-reviews form { margin-top:20px;display:grid;gap:20px } .a4a-reviews .a4a-rv-guest-fields { display:grid;grid-template-columns:1fr 1fr;gap:16px } .a4a-reviews .a4a-rv-field { display:grid;gap:10px;min-width:0 } .a4a-reviews .a4a-rv-field label, .a4a-reviews legend { font-size:14px;font-weight:700 } .a4a-reviews .a4a-rv-required { color:var(--a4a-danger) } .a4a-reviews input:not([type=radio]), .a4a-reviews textarea { width:100%;min-height:48px;background:#fff;color:var(--a4a-text);border:1px solid var(--a4a-border-strong);padding:10px 12px;font-size:16px;line-height:1.8 } .a4a-reviews textarea { min-height:144px;line-height:2;padding:10px 14px;resize:vertical } .a4a-reviews input::placeholder, .a4a-reviews textarea::placeholder { color:var(--a4a-text-secondary) } .a4a-reviews .a4a-rv-hint { font-size:14px;color:var(--a4a-text-secondary);line-height:1.7 } .a4a-reviews fieldset { border:0;margin:0;padding:0;min-width:0 } .a4a-reviews legend { padding:0;margin-bottom:12px } .a4a-reviews .a4a-rv-stars { display:flex;gap:4px;direction:rtl;width:fit-content } .a4a-reviews .a4a-rv-star { display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;cursor:pointer;border:1px solid var(--a4a-border-strong);border-radius:12px;position:relative;color:var(--a4a-text-disabled);background:#fff } .a4a-reviews .a4a-rv-star svg { width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5 } .a4a-reviews .a4a-rv-star input { position:absolute;opacity:0;width:1px;height:1px } .a4a-reviews .a4a-rv-star.filled { color:var(--a4a-star);background:color-mix(in srgb, var(--a4a-star) 14%, #fff);border-color:var(--a4a-star) } .a4a-reviews .a4a-rv-star.filled svg { fill:currentColor } .a4a-reviews .a4a-rv-star:has(input:focus-visible) { outline:3px solid var(--a4a-primary);outline-offset:3px } .a4a-reviews .a4a-rv-rating-label { margin-top:8px;color:var(--a4a-text-secondary);font-size:14px } .a4a-reviews .a4a-rv-security-row { display:flex;align-items:center;gap:20px;justify-content:space-between;border-top:1px solid var(--a4a-border);padding-top:16px } .a4a-reviews .a4a-rv-submit-cell { display:grid;justify-items:end;gap:8px } .a4a-reviews .a4a-rv-submit-cell .form-submit { margin:0 } .a4a-reviews .a4a-rv-submit-meta { text-align:end;display:grid;gap:8px } .a4a-reviews .a4a-rv-submit-meta .a4a-rv-hint { max-width:280px } .a4a-reviews .a4a-rv-reply-context { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:12px;background:var(--a4a-primary-soft);margin-top:16px;font-size:13px;color:var(--a4a-primary) } .a4a-reviews .a4a-rv-error { color:var(--a4a-danger);font-size:12px;min-height:0 } .a4a-reviews .a4a-rv-field:has(.a4a-rv-error:not(:empty)) input, .a4a-reviews .a4a-rv-field:has(.a4a-rv-error:not(:empty)) textarea { border-color:var(--a4a-danger) } .a4a-reviews .a4a-rv-status { padding:14px 16px;border-radius:12px;background:var(--a4a-success-soft);color:var(--a4a-success);font-size:14px;line-height:2 } .a4a-reviews .a4a-rv-status strong { display:block } .a4a-reviews .a4a-rv-error-summary { padding:12px;background:var(--a4a-danger-soft);color:var(--a4a-danger-hover);border-radius:12px;font-size:13px } .a4a-reviews .no-motion { scroll-behavior:auto } @media(max-width:600px) { .a4a-reviews .reviews { padding:24px 16px 32px } .a4a-reviews .a4a-rv-review { padding:16px;border-radius:16px } .a4a-reviews .a4a-rv-head { grid-template-columns:44px minmax(0,1fr);gap:10px } .a4a-reviews .a4a-rv-avatar { grid-row:1/3 } .a4a-reviews .a4a-rv-date { grid-column:2;font-size:11px } .a4a-reviews .a4a-rv-identity { gap:6px } .a4a-reviews .a4a-rv-name { font-size:14px } .a4a-reviews .a4a-rv-badge { font-size:10px } .a4a-reviews .a4a-rv-text { font-size:15px;line-height:2 } .a4a-reviews .a4a-rv-support { padding:12px;margin-inline-start:0 } .a4a-reviews .a4a-rv-support-head { font-size:12px } .a4a-reviews .a4a-rv-support time { width:100%;margin:0 } .a4a-reviews .a4a-rv-support p { font-size:14px } .a4a-reviews .a4a-rv-compose { padding:20px 16px;border-radius:16px } .a4a-reviews .a4a-rv-guest-fields { grid-template-columns:1fr } .a4a-reviews .a4a-rv-security-row { display:grid;gap:18px } .a4a-reviews .a4a-rv-security-row .a4a-rv-captcha { max-width:none } .a4a-reviews .a4a-rv-submit-cell { justify-items:stretch } .a4a-reviews .a4a-rv-submit-cell .a4a-rv-primary { width:100% } .a4a-reviews .a4a-rv-submit-meta { text-align:start } .a4a-reviews .a4a-rv-submit-meta .a4a-rv-hint { max-width:none } .a4a-reviews .a4a-rv-compose h2 { font-size:19px } .a4a-reviews .a4a-rv-reply-context { align-items:flex-start } /* Nine chips at a 44px touch target cannot share one line on a phone, so the two direction controls keep the first row and the page numbers move to a second. */ .a4a-reviews .a4a-rv-pager { gap:6px;justify-content:space-between } .a4a-reviews .a4a-rv-pager .a4a-rv-pager-pages { order:1;flex-basis:100%;gap:6px } .a4a-reviews .a4a-rv-pager a, .a4a-reviews .a4a-rv-pager span { padding-inline:10px } .a4a-reviews .a4a-rv-heading .a4a-rv-primary { flex-shrink:0 } .a4a-reviews .a4a-rv-heading p { max-width:190px } } .a4a-reviews .a4a-rv-identity { min-width:0;overflow-wrap:anywhere } .a4a-reviews .a4a-rv-name { max-width:100%;overflow-wrap:anywhere } @media(max-width:340px) { .a4a-reviews .reviews { padding-inline:12px } .a4a-reviews .a4a-rv-compose { padding-inline:12px } .a4a-reviews .a4a-rv-stars { gap:0 } .a4a-reviews .a4a-rv-star { flex:0 0 40px;width:40px } } /* ============================================================ * Theme integration — additions beyond the ported design file. * Kept separate so the block above stays a faithful port. * ============================================================ */ /* The design fills stars by toggling a `.filled` class from its demo JavaScript. That script is not shipped, so the state is derived in CSS and works with no JS: a star is filled when its own input is checked, or when a *later* sibling's is — DOM order is 1..5 and `direction: rtl` puts 1 at the reading start, so the fill runs from the first star up to the chosen one. Checked and hover states are mutually exclusive via :not(:hover)/:hover on the group rather than a blanket reset. A reset rule out-specifies `:has(input:checked)`, whose argument contributes almost nothing, and would leave the hovered star itself empty. */ .a4a-reviews .a4a-rv-stars:not(:hover) .a4a-rv-star:has(input:checked), .a4a-reviews .a4a-rv-stars:not(:hover) .a4a-rv-star:has(~ .a4a-rv-star input:checked), .a4a-reviews .a4a-rv-stars:hover .a4a-rv-star:hover, .a4a-reviews .a4a-rv-stars:hover .a4a-rv-star:has(~ .a4a-rv-star:hover) { color: var(--a4a-star); background: color-mix(in srgb, var(--a4a-star) 14%, #fff); border-color: var(--a4a-star); } /* Gold is the resting colour; the picker's stars take the colour of the value being chosen, from red at 1 to green at 5, so the row reads as "bad → good" while it fills. The group carries the variable, so hovered and checked stars agree. */ .a4a-reviews { --a4a-star: #f2b01e; } .a4a-reviews .a4a-rv-stars:not(:hover):has(input[value="1"]:checked), .a4a-reviews .a4a-rv-stars:has(.a4a-rv-star[data-star="1"]:hover) { --a4a-star: #d64545; } .a4a-reviews .a4a-rv-stars:not(:hover):has(input[value="2"]:checked), .a4a-reviews .a4a-rv-stars:has(.a4a-rv-star[data-star="2"]:hover) { --a4a-star: #e8843c; } .a4a-reviews .a4a-rv-stars:not(:hover):has(input[value="3"]:checked), .a4a-reviews .a4a-rv-stars:has(.a4a-rv-star[data-star="3"]:hover) { --a4a-star: #f2b01e; } .a4a-reviews .a4a-rv-stars:not(:hover):has(input[value="4"]:checked), .a4a-reviews .a4a-rv-stars:has(.a4a-rv-star[data-star="4"]:hover) { --a4a-star: #7fb63d; } .a4a-reviews .a4a-rv-stars:not(:hover):has(input[value="5"]:checked), .a4a-reviews .a4a-rv-stars:has(.a4a-rv-star[data-star="5"]:hover) { --a4a-star: #2e9e5b; } .a4a-reviews .a4a-rv-stars:not(:hover) .a4a-rv-star:has(input:checked) svg, .a4a-reviews .a4a-rv-stars:not(:hover) .a4a-rv-star:has(~ .a4a-rv-star input:checked) svg, .a4a-reviews .a4a-rv-stars:hover .a4a-rv-star:hover svg, .a4a-reviews .a4a-rv-stars:hover .a4a-rv-star:has(~ .a4a-rv-star:hover) svg { fill: currentColor; } /* Nested customer replies. The design only shows support answers, which live inside the card; an ordinary threaded reply still needs its list reset and an inset. */ .a4a-reviews .a4a-rv-replies { list-style: none; margin: 12px 0 0; padding-inline-start: 32px; display: grid; gap: 12px; } /* The design's actions row carried a single button, so it has no gap. WordPress adds a second, capability-gated action (edit), which would otherwise butt against the first. */ .a4a-reviews .a4a-rv-actions { gap: 16px; } /* functions.php filters Bulma's button classes onto every reply link; inside a review card it has to read as the design's quiet text action — no outline, no pill — while still offering a 44px touch target. The height comes from min-block-size rather than padding so the control keeps its text-button appearance. */ .a4a-reviews .a4a-rv-actions a, .a4a-reviews .a4a-rv-actions a.button { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; block-size: auto; line-height: inherit; font-size: 13px; font-weight: 500; color: var(--a4a-primary); text-decoration: none; } .a4a-reviews .a4a-rv-actions a svg { inline-size: 16px; block-size: 16px; } .a4a-reviews .a4a-rv-actions a:hover { text-decoration: underline; } /* Compact CAPTCHA card. The security question is not in the design file — it is the theme's own anti-spam field (includes/security-question.php) — so it borrows the form's card vocabulary instead of inventing one. Question and answer share a line in both layouts: the question column is the one that flexes, so a long challenge wraps down rather than squeezing the answer box. */ .a4a-reviews .a4a-rv-captcha { display: grid; gap: 10px; max-width: 340px; padding: 12px; border: 1px solid var(--a4a-border); border-radius: 12px; background: var(--a4a-surface-subtle); } .a4a-reviews .a4a-rv-captcha-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; } .a4a-reviews .a4a-rv-captcha-title .a4a-rv-icon { width: 16px; height: 16px; color: var(--a4a-primary); } .a4a-reviews .a4a-rv-captcha-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .a4a-reviews .a4a-rv-captcha-question { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 400; line-height: 1.7; overflow-wrap: anywhere; } /* Three classes deep on purpose: `.a4a-reviews input:not([type=radio])` above is a 0,2,1 selector and would otherwise keep this input at width:100%. */ .a4a-reviews .a4a-rv-captcha .a4a-rv-captcha-answer { flex: 0 0 88px; width: 88px; /* The shared input rule pairs 16px text (which keeps iOS from zooming the page on focus) with 10px block padding, which alone makes the box 51px tall. Height is set outright so the answer matches the 48px control height the rest of the form uses. */ height: 48px; min-height: 0; padding-block: 0; padding-inline: 8px; text-align: center; } .a4a-reviews .a4a-rv-captcha .a4a-rv-captcha-answer:focus-visible { outline: 3px solid var(--a4a-focus); outline-offset: 2px; border-color: var(--a4a-primary); } /* public/js/app.js writes the message in and toggles `is-hidden`, so the line is only ever seen after a bad answer. Bulma supplies that class site-wide; it is repeated here so the field still starts silent if this section renders without app.css. */ .a4a-reviews .a4a-rv-captcha-error { font-size: 12px; color: var(--a4a-danger); } .a4a-reviews .a4a-rv-captcha-error.is-hidden { display: none; } /* ============================================================ * Two sections: تجربه خریداران (a4a-bx-*) and پرسش و دیدگاه (a4a-qa) * Values are account4all-buyers-experience-v3.0.1 css/buyers.css; buttons, badges and * the icon tile come straight from the vendored kit (components.css / base.css). * ============================================================ */ /* The product "tabs" bar is sticky (app.css .tabs-wrapper: 49–60px). Every fragment target in these sections has to clear it. The section and the cards clip with `overflow: clip`, not `hidden`: `hidden` makes an element a scroll container, and Chromium before ~131 ignores scroll-margin on such targets and on targets inside them. */ .a4a-reviews [id^="comment-"], .a4a-reviews #respond, .a4a-reviews #respond-review, .a4a-reviews .a4a-rv-error-summary, .a4a-reviews .a4a-rv-compose__body, .a4a-reviews .a4a-bx, .a4a-reviews .a4a-bx-track, .a4a-reviews .a4a-qa { scroll-margin-top: 76px; } /* .a4a-bx-track is listed because the cards live in that horizontal scroller: older Chromium scrolls the document to the scroller's box, not the card's, so the margin has to be on the scroller as well. */ /* The panel already prints the tab title above the section; the two

carry the names. */ .tab-content-reviews > .tab-content-wrapper > .product-tab-title { display: none; } /* ---- Buyers' Experience: one card with a brand top bar ---- */ .a4a-reviews .a4a-bx { --bx-gutter: 24px; background: #fff; border: 1px solid var(--a4a-primary-border); border-block-start: 4px solid var(--a4a-primary); border-radius: 20px; box-shadow: var(--a4a-shadow-sm); overflow: clip; margin-bottom: 40px; } .a4a-reviews .a4a-bx-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: var(--bx-gutter); background: linear-gradient(110deg, #fff 30%, var(--a4a-primary-soft)); } .a4a-reviews .a4a-bx-heading { display: flex; align-items: center; gap: 12px; } .a4a-reviews .a4a-bx-heading h2 { font-size: 24px; font-weight: 800; line-height: 1.3; margin: 0; } .a4a-reviews .a4a-icon-tile--brand { background: var(--a4a-gradient); color: #fff; transform: rotate(-6deg); } .a4a-reviews .a4a-icon-tile--brand .a4a-icon { fill: currentColor; } .a4a-reviews .a4a-bx-subtitle { font-size: 14px; color: var(--a4a-text-secondary); margin: 8px 0 0; } .a4a-reviews .a4a-bx-header .a4a-rv-primary { flex-shrink: 0; } /* The kit's button rules are unscoped (0,1,0); `.a4a-reviews a` above outranks their colour, so links dressed as buttons restate it. */ .a4a-reviews a.a4a-btn { display: inline-flex; text-decoration: none; color: #fff; } .a4a-reviews a.a4a-btn--secondary, .a4a-reviews a.a4a-btn--soft { color: var(--a4a-primary); } .a4a-reviews a.a4a-btn--ghost { color: var(--a4a-text-secondary); } .a4a-reviews .a4a-bx-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-inline: var(--bx-gutter); padding-block: 16px; border-block: 1px solid var(--a4a-border); } .a4a-reviews .a4a-bx-score { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; font-size: 14px; color: var(--a4a-text-secondary); } .a4a-reviews .a4a-bx-score .a4a-icon { color: var(--a4a-star); fill: var(--a4a-star); } .a4a-reviews .a4a-bx-score strong { color: var(--a4a-text); font-size: 24px; line-height: 1.3; } .a4a-reviews .a4a-bx-score__basis { color: var(--a4a-text-secondary); } .a4a-reviews .a4a-bx-score .a4a-bx-count:not(:first-child) { border-inline-start: 1px solid var(--a4a-border); padding-inline-start: 12px; } .a4a-reviews .a4a-bx-status { margin: 16px var(--bx-gutter) 0; } .a4a-reviews .a4a-bx-navigation { display: flex; gap: 8px; } /* The chevron path points right. In RTL «بعدی» sits on the left and reveals cards on the left, so it is the one mirrored; «قبلی» on the right keeps the right-pointing glyph. */ .a4a-reviews .a4a-bx-navigation [data-a4a-scroll="next"] .a4a-icon { transform: scaleX(-1); } /* The row. Three cards on desktop, two on tablet, one and a sliver on a phone. */ .a4a-reviews .a4a-bx-track { display: flex; align-items: stretch; gap: 16px; list-style: none; margin: 0; padding: var(--bx-gutter); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-padding-inline: var(--bx-gutter); scrollbar-width: thin; scrollbar-color: var(--a4a-border-strong) transparent; } /* Safari and older Chromium do not read scrollbar-width/-color. */ .a4a-reviews .a4a-bx-track::-webkit-scrollbar { height: 6px; } .a4a-reviews .a4a-bx-track::-webkit-scrollbar-track { background: transparent; } .a4a-reviews .a4a-bx-track::-webkit-scrollbar-thumb { background: var(--a4a-border-strong); border-radius: 999px; } @media (pointer: coarse) { /* Touch: swipe is the control and the next card peeks; the bar only adds noise. */ .a4a-reviews .a4a-bx-track { scrollbar-width: none; } .a4a-reviews .a4a-bx-track::-webkit-scrollbar { display: none; } } /* One or two cards get a layout of their own, so empty space never reads as a missing card. */ .a4a-reviews .a4a-bx-track[data-count="1"] .a4a-bx-card { flex: 0 1 min(100%, 26rem); } .a4a-reviews .a4a-bx-track[data-count="2"] .a4a-bx-card { flex: 1 1 calc((100% - 16px) / 2); min-inline-size: 0; } .a4a-reviews .a4a-bx-track:focus-visible { outline: 3px solid var(--a4a-primary); outline-offset: -3px; } /* Cards: a soft tint that fades to white, rotating blue / green / amber by position. */ .a4a-reviews .a4a-bx-card { flex: 0 0 calc((100% - 32px) / 3); min-inline-size: 18rem; scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; padding: 20px; background: linear-gradient(160deg, var(--a4a-primary-soft), #fff 38%); border: 1px solid var(--a4a-border); border-radius: 16px; box-shadow: var(--a4a-shadow-sm); overflow: clip; transition: transform var(--a4a-duration-normal) var(--a4a-easing-standard), border-color var(--a4a-duration-normal), box-shadow var(--a4a-duration-normal); } .a4a-reviews .a4a-bx-card:nth-child(3n + 2) { background: linear-gradient(160deg, var(--a4a-success-soft), #fff 38%); } .a4a-reviews .a4a-bx-card:nth-child(3n) { background: linear-gradient(160deg, var(--a4a-warning-soft), #fff 38%); } .a4a-reviews .a4a-bx-card > article { display: flex; flex-direction: column; gap: 14px; height: 100%; } /* The visitor's own review while it waits for approval -- a status, not content. */ .a4a-reviews .a4a-bx-card--pending { background: var(--a4a-surface-subtle); border: 1px dashed var(--a4a-border-strong); box-shadow: none; } .a4a-reviews .a4a-rv-review--pending { background: var(--a4a-surface-subtle); border-style: dashed; border-color: var(--a4a-border-strong); box-shadow: none; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .a4a-reviews .a4a-bx-card:hover { transform: translateY(-4px); border-color: var(--a4a-primary-border); box-shadow: var(--a4a-shadow-md); } .a4a-reviews .a4a-bx-card:hover .a4a-bx-avatar { transform: rotate(-5deg); } } .a4a-reviews .a4a-bx-card__buyer { display: flex; align-items: center; gap: 12px; } .a4a-reviews .a4a-bx-card__identity { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .a4a-reviews .a4a-bx-card__name { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; } .a4a-reviews .a4a-bx-card__rating { display: flex; align-items: center; gap: 8px; inline-size: fit-content; font-size: 12px; color: var(--a4a-text); background: color-mix(in srgb, var(--a4a-star) 14%, #fff); border-radius: 999px; padding: 4px 12px; } .a4a-reviews .a4a-bx-card__text { font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; } .a4a-reviews .a4a-bx-card__text > p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Compact answer on a card: the label is the whole block until opened. */ .a4a-reviews .a4a-rv-support--compact { margin-block-start: 0; padding: 0; background: #fafaff; border-inline-start: 3px solid var(--a4a-primary); border-radius: 12px; } .a4a-reviews .a4a-rv-support--compact > summary { list-style: none; cursor: pointer; margin: 0; padding: 10px 12px; font-size: 13px; flex-wrap: nowrap; } .a4a-reviews .a4a-rv-support--compact > summary .a4a-rv-support-mark { white-space: nowrap; } /* Collapsed, the row is only the label and «مشاهده»; the name appears with the answer. */ .a4a-reviews .a4a-rv-support--compact:not([open]) > summary > bdi { display: none; } .a4a-reviews .a4a-rv-support--compact > summary::-webkit-details-marker { display: none; } .a4a-reviews .a4a-rv-support--compact > summary .a4a-rv-support__toggle { margin-inline-start: auto; font-weight: 400; color: var(--a4a-primary); } .a4a-reviews .a4a-rv-support--compact[open] > summary .a4a-rv-support__toggle { display: none; } .a4a-reviews .a4a-rv-support--compact > p { margin: 0; padding: 0 12px 10px; font-size: 13px; line-height: 1.9; } .a4a-reviews .a4a-rv-support--compact > time { display: block; padding: 0 12px 10px; font-size: 11px; color: var(--a4a-text-secondary); } .a4a-reviews .a4a-rv-support--compact > summary:focus-visible { outline: 3px solid var(--a4a-primary); outline-offset: -3px; border-radius: 12px; } .a4a-reviews .a4a-bx-card__text p + p { margin-top: 8px; } .a4a-reviews .a4a-bx-card__foot { margin-block-start: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--a4a-text-secondary); } .a4a-reviews .a4a-bx-card__more { flex-basis: 100%; font-size: 14px; } .a4a-reviews .a4a-bx-card__more summary { display: flex; align-items: center; min-height: 44px; color: var(--a4a-primary); cursor: pointer; } .a4a-reviews .a4a-bx-card__more p { line-height: 2; color: var(--a4a-text); } .a4a-reviews .a4a-bx-card .a4a-rv-support { margin-inline-start: 0; } .a4a-reviews .a4a-rv-support__more { font-size: 13px; } .a4a-reviews .a4a-rv-support__more summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--a4a-primary); cursor: pointer; } .a4a-reviews .a4a-rv-support__more p { margin-top: 4px; } /* The four characters share one 2×2 sprite; the quadrant is set inline per card. */ .a4a-reviews .a4a-bx-avatar, .a4a-reviews .a4a-rv-avatar--sprite { background-image: url('../images/buyer-characters.webp'); background-size: 200% 200%; background-repeat: no-repeat; color: transparent; border-radius: 50%; flex: 0 0 auto; } .a4a-reviews .a4a-bx-avatar { width: 52px; height: 52px; border: 2px solid #fff; outline: 1px solid var(--a4a-primary-border); transition: transform var(--a4a-duration-normal) var(--a4a-easing-standard); } .a4a-reviews .a4a-bx-avatar:not(.a4a-bx-avatar--sprite) { display: grid; place-items: center; background: var(--a4a-primary-soft); color: var(--a4a-primary); font-weight: 800; font-size: 18px; border: 0; outline: 0; } .a4a-reviews .a4a-bx-pager { display: flex; justify-content: center; gap: 12px; padding: 0 var(--bx-gutter) 20px; } .a4a-reviews .a4a-bx-pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--a4a-border-strong); background: #fff; color: var(--a4a-text); font-size: 14px; text-decoration: none; } .a4a-reviews .a4a-bx-pager a:hover { background: var(--a4a-primary-soft); border-color: var(--a4a-primary-border); color: var(--a4a-primary); } .a4a-reviews .a4a-bx-footer { margin: 0; padding: 0 var(--bx-gutter) 20px; font-size: 14px; color: var(--a4a-text-secondary); } /* Empty state: the kit's, inside the card, above a rule. */ .a4a-reviews .a4a-bx-empty { border-block-start: 1px solid var(--a4a-border); margin-inline: var(--bx-gutter); padding-block: 48px; } .a4a-reviews .a4a-bx-empty .a4a-icon-tile { margin-block-end: 8px; } .a4a-reviews .a4a-bx-empty h3 { font-size: 16px; font-weight: 800; margin: 0; } .a4a-reviews .a4a-bx-empty p { font-size: 14px; color: var(--a4a-text-secondary); margin: 0; max-inline-size: 28rem; } .a4a-reviews .a4a-bx-empty .a4a-rv-primary { margin-top: 4px; } /* ---- Q&A heading: title, a count line, the ask button (same model as the review CTA) ---- */ .a4a-reviews .a4a-qa-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .a4a-reviews .a4a-qa-heading h2 { font-size: 24px; font-weight: 800; line-height: 1.4; margin: 0; } .a4a-reviews .a4a-qa-heading p { margin: 4px 0 0; color: var(--a4a-text-secondary); font-size: 14px; } .a4a-reviews .a4a-qa-heading .a4a-rv-primary { flex-shrink: 0; } .a4a-reviews .a4a-qa-status { margin-bottom: 16px; } /* ---- The forms sit behind their buttons ---- The IS the button, and stays in place as «بستن فرم» while the form is open, so nothing moves when it opens. No JavaScript involved in the toggle. */ .a4a-reviews details.a4a-rv-compose { margin-top: 0; padding: 0; border: 0; background: none; } .a4a-reviews .a4a-qa-compose { margin-top: 24px; } .a4a-reviews .a4a-rv-compose__toggle { list-style: none; cursor: pointer; display: flex; justify-content: flex-start; } .a4a-reviews .a4a-rv-compose__toggle::-webkit-details-marker { display: none; } .a4a-reviews .a4a-rv-compose__toggle:focus-visible { outline: none; } .a4a-reviews .a4a-rv-compose__toggle:focus-visible > .a4a-rv-primary, .a4a-reviews .a4a-rv-compose__toggle:focus-visible > .a4a-btn { outline: 3px solid var(--a4a-primary); outline-offset: 3px; } .a4a-reviews .a4a-rv-compose__close { display: none; } .a4a-reviews details[open] > .a4a-rv-compose__toggle .a4a-rv-compose__open { display: none; } .a4a-reviews details[open] > .a4a-rv-compose__toggle .a4a-rv-compose__close { display: inline-flex; } /* The header button opens the form once the script runs, so the duplicate opener at the bottom is only shown when it is the sole one that works (no JavaScript). */ .a4a-js .a4a-reviews details:not([open]) > .a4a-rv-compose__toggle { display: none; } .a4a-reviews .a4a-bx-compose > .a4a-rv-compose__toggle { padding: 0 var(--bx-gutter) 20px; } .a4a-reviews .a4a-bx-compose[open] > .a4a-rv-compose__toggle { justify-content: flex-end; border-block-start: 1px solid var(--a4a-border); padding: 12px var(--bx-gutter) 0; } .a4a-reviews .a4a-bx-compose .a4a-rv-compose__body { padding: 8px var(--bx-gutter) var(--bx-gutter); } .a4a-reviews .a4a-qa-compose .a4a-rv-compose__body { background: #fff; border: 1px solid var(--a4a-border); border-radius: 20px; padding: 24px; box-shadow: var(--a4a-shadow-sm); } .a4a-reviews .a4a-qa-compose[open] > .a4a-rv-compose__toggle { justify-content: flex-end; margin-bottom: 8px; } .a4a-reviews .a4a-rv-intro { font-size: 14px; color: var(--a4a-text-secondary); margin: 8px 0 0; line-height: 1.8; } .a4a-reviews .a4a-rv-intro a { color: var(--a4a-primary); } /* A question nobody has answered yet. */ .a4a-reviews .a4a-rv-badge--waiting { display: inline-flex; align-items: center; gap: 4px; background: var(--a4a-warning-soft); color: var(--a4a-warning); border-radius: 999px; padding: 2px 8px; font-size: 12px; white-space: nowrap; } .a4a-reviews .a4a-rv-badge--waiting .a4a-rv-icon { width: 13px; height: 13px; } /* Next to the product title (woocommerce/single-product/rating.php). */ .a4a-rating-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: inherit; text-decoration: none; margin-bottom: 8px; } .a4a-rating-link .a4a-rv-icon { width: 18px; height: 18px; color: #f2b01e; fill: #f2b01e; } .a4a-rating-link:hover { text-decoration: underline; } @media (max-width: 1023px) { .a4a-reviews .a4a-bx-card { flex-basis: calc((100% - 16px) / 2); } } @media (max-width: 760px) { .a4a-reviews .a4a-rv-support { margin-inline-start: 0; } .a4a-reviews .a4a-qa-heading { flex-direction: column; align-items: stretch; gap: 12px; } .a4a-reviews .a4a-qa-heading .a4a-rv-primary { width: 100%; } } @media (max-width: 640px) { .a4a-reviews .a4a-bx { --bx-gutter: 16px; } .a4a-reviews .a4a-bx-header { flex-direction: column; align-items: stretch; gap: 16px; } .a4a-reviews .a4a-bx-heading h2 { font-size: 20px; } .a4a-reviews .a4a-bx-header .a4a-rv-primary { inline-size: 100%; } .a4a-reviews .a4a-bx-card { flex-basis: 88%; min-inline-size: 0; padding: 16px; } .a4a-reviews .a4a-bx-track { gap: 12px; padding-block: 16px; } .a4a-reviews details:not([open]) > .a4a-rv-compose__toggle .a4a-rv-primary { inline-size: 100%; } .a4a-reviews .a4a-qa-compose .a4a-rv-compose__body { padding: 20px 16px; border-radius: 16px; } } @media (prefers-reduced-motion: reduce) { .a4a-reviews .a4a-bx-track { scroll-behavior: auto; } .a4a-reviews .a4a-bx-card, .a4a-reviews .a4a-bx-avatar { transition: none; } } /* Stars on a card (walker and Buyers' Experience). 1.2.12 never needed this rule: the policy hid every legacy star, so no card ever rendered one. */ .a4a-reviews .a4a-rv-rating { display: inline-flex; align-items: center; gap: 2px; } .a4a-reviews .a4a-rv-rating svg { width: 16px; height: 16px; fill: none; stroke: var(--a4a-border-strong); stroke-width: 1.5; } .a4a-reviews .a4a-rv-rating svg.is-on { fill: var(--a4a-star); stroke: var(--a4a-star); }