/*rzm:s36*/ /* Rozhika Support → Q&A Bridge — front-end (consent card + anonymous option). */ /* anonymous checkbox injected into Q&A / review forms */ .rsqb-anon-opt { display: flex; align-items: center; gap: 9px; margin: 10px 0 6px; font-size: 14px; color: #374151; cursor: pointer; user-select: none; } .rsqb-anon-opt input { width: clamp(16px, 15.43px + 0.1786vw, 18px); height: clamp(16px, 15.43px + 0.1786vw, 18px); accent-color: #6366f1; cursor: pointer; flex: 0 0 auto; } .rsqb-anon-opt .rsqb-anon-hint { font-size: 12px; color: #9ca3af; } .rsqb-anon-name { font-weight: 700; } /* Anonymous badges intentionally carry NO bespoke sizing/position here: the Q&A badge reuses the native `.user-badge-qa` wrapper and the review badge reuses the native `.review-author-badge` wrapper, so they inherit the site's exact badge size, circular border, shadow and placement. The marker classes below exist only so the badges can be targeted/QA'd; they must not override the native geometry. */ /* No geometry here on purpose. `.review-author-badge` / `.user-badge-qa` already set vertical-align (with !important), so a duplicate declaration on the marker class could only ever be dead weight or, worse, the start of a second source of truth for badge geometry. The marker classes are markers. */ /* consent card inside the support widget — clean, compact, in-chat */ .rsqb-consent { margin: 12px 10px; padding: 15px 15px 14px; border-radius: 18px; background: #ffffff; border: 1px solid #e9ecf5; box-shadow: 0 10px 30px rgba(67,56,202,.12), 0 2px 6px rgba(17,24,39,.05); direction: rtl; font-family: inherit; max-width: 360px; } @keyframes rsqb-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .rsqb-consent__head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; } .rsqb-consent__ic { width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#818cf8,#4338ca); box-shadow: 0 6px 16px rgba(67,56,202,.28); } .rsqb-consent__htx { min-width: 0; } .rsqb-consent__title { font-weight: 800; font-size: 14.5px; color: #1e1b4b; margin: 0; line-height: 1.65; } .rsqb-consent__sub { margin: 4px 0 0; } .rsqb-consent__product { display: inline-block; font-weight: 700; font-size: 12px; color: #4338ca; background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 999px; padding: 2px 10px; line-height: 1.7; } .rsqb-consent__help { font-size: 12.5px; color: #6b7280; margin: 0 0 12px; line-height: 1.85; } .rsqb-consent__perk { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.8; color: #92580c; font-weight: 700; background: linear-gradient(135deg,#fff7e6,#fffdf6); border: 1px solid #fce6ad; border-radius: 13px; padding: 9px 11px; margin: 0 0 13px; } .rsqb-consent__btns { display: flex; flex-direction: column; gap: 8px; } .rsqb-consent__btn { border: 0; border-radius: 12px; padding: 12px 14px; font-weight: 800; cursor: pointer; font-family: inherit; font-size: 14px; } .rsqb-consent__btn:hover { filter: brightness(1.03); } .rsqb-consent__btn:active { transform: scale(.985); } .rsqb-consent__btn--full { background: linear-gradient(135deg,#6366f1,#4338ca); color: #fff; box-shadow: 0 6px 16px rgba(67,56,202,.28); } .rsqb-consent__btn--anon { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; } .rsqb-consent__btn--decline { background: transparent; color: #9aa1ad; font-weight: 700; font-size: 13px; padding: 9px 14px; } .rsqb-consent--done { text-align: center; color: #0a6c33; font-weight: 800; padding: 20px 16px; font-size: 14px; } .rsqb-consent__done { display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Guest Q&A form (injected where wc-product-questions shows a login notice) */ .rsqb-guest-form{margin-top:8px} .rsqb-guest-note{font-size:12px;color:#7a7a8c;margin:6px 2px 0;display:flex;align-items:center;gap:6px} .rsqb-guest-note::before{content:"";width:8px;height:8px;border-radius:50%;background:#a78bfa;display:inline-block;flex:0 0 auto} .rsqb-guest-msg{margin-top:clamp(7px, 6.143px + 0.2679vw, 10px);padding:clamp(7px, 6.143px + 0.2679vw, 10px) clamp(9px, 8.143px + 0.2679vw, 12px);border-radius:clamp(7px, 6.143px + 0.2679vw, 10px);font-size:clamp(12px, 11.71px + 0.08929vw, 13px);line-height:1.7} .rsqb-guest-msg.rsqb-ok{background:#e9f9ef;color:#137a43;border:1px solid #bdebcf} .rsqb-guest-msg.rsqb-err{background:#fdecec;color:#b3261e;border:1px solid #f5c2c0} /* member's OWN anonymous posts — appended to /my-account/user-qa & /user-reviews (issue #9) */ .rsqb-acct{margin:28px 0 8px;direction:rtl} .rsqb-acct__head{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding-bottom:13px;border-bottom:1px dashed #e3e6ef} .rsqb-acct__badge{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:7px;background:linear-gradient(135deg,#818cf8,#4338ca);box-shadow:0 4px 12px rgba(67,56,202,.25)} .rsqb-acct__badge svg{width:100%;height:100%;display:block} .rsqb-acct__title{margin:0;font-size:16px;font-weight:800;color:#1e1b4b} .rsqb-acct__note{margin:3px 0 0;font-size:12.5px;color:#6b7280;line-height:1.7} .rsqb-acct__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px} .rsqb-acct-card{display:flex;gap:12px;padding:13px;border:1px solid #ececf3;border-radius:15px;background:#fff;box-shadow:0 2px 8px rgba(17,24,39,.04);border-inline-start:3px solid #e5e7eb} /* Task 4: per-type accent so questions vs answers vs reviews read at a glance. */ .rsqb-acct-card--q{border-inline-start-color:#6366f1} .rsqb-acct-card--a{border-inline-start-color:#10b981} .rsqb-acct-card--r{border-inline-start-color:#f59e0b} .rsqb-acct-card__media{width:62px;height:62px;border-radius:12px;overflow:hidden;flex:0 0 auto;background:#f3f4f7;display:block} .rsqb-acct-card__media img{width:100%;height:100%;object-fit:cover;display:block} .rsqb-acct-card__media--ph{background:repeating-linear-gradient(45deg,#f3f4f7,#f3f4f7 6px,#eceef3 6px,#eceef3 12px)} .rsqb-acct-card__body{flex:1 1 auto;min-width:0} .rsqb-acct-card__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px} .rsqb-acct-card__product{font-weight:800;font-size:13.5px;color:#3730a3;text-decoration:none;line-height:1.5} .rsqb-acct-card__product:hover{text-decoration:underline} .rsqb-acct-card__type{font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px} .rsqb-acct-card__type--q{background:#eef2ff;color:#4338ca} .rsqb-acct-card__type--a{background:#ecfdf5;color:#047857} .rsqb-acct-card__type--r{background:#fff7ed;color:#c2410c} .rsqb-acct-card__rating{margin:2px 0 4px;color:#f59e0b;font-size:13px;letter-spacing:1px} .rsqb-acct-card__text{margin:0 0 8px;font-size:13px;color:#374151;line-height:1.85} .rsqb-acct-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:#9097a3} .rsqb-acct-card__status{font-weight:700;padding:2px 8px;border-radius:999px} .rsqb-status--ok{background:#e9f9ef;color:#0a7a3d} .rsqb-status--pending{background:#fff4e5;color:#a55a00} .rsqb-status--rejected{background:#fdeaea;color:#b3261e} .rsqb-acct-card__anon{font-weight:700;color:#4338ca;background:#eef2ff;border:1px solid #e0e7ff;padding:2px 8px;border-radius:999px} @media (max-width:520px){.rsqb-acct__grid{grid-template-columns:1fr}} /* my-account anonymous tab — relocated into the page's native tab bar (issue: real tab, not a bottom section). Task 5: the anon glyph now uses the TIGHT 0 0 24 24 symbol, so an explicit 20px box makes it the same visual size as the neighbouring tab icons (the old 1.05em sizing rendered it ~25% too small). */ .rsqb-anon-tab .tab-icon svg{width:20px;height:20px;vertical-align:middle} .rsqb-anon-rtab__ic svg{width:20px;height:20px;vertical-align:middle} .rsqb-anon-rtab__ic{display:inline-flex;margin-inline-end:6px;vertical-align:middle} /* ---------------------------------------------------------------------------- my-account tab bars (Q&A + reviews): wrap-friendly compact layout + stylized count pills that are identical for the NATIVE tabs and our anonymous tab. Scoped to the two account wrappers so nothing else on the site is touched. (These pills/tab are injected by account.js after RUCSS, so the classes are also safelisted in RSQB_Compat::rucss_safelist().) -------------------------------------------------------------------------- */ /* Let the rows wrap instead of overflowing / widening the page when there are several tabs (the extra «ناشناس» tab used to squeeze/overflow the row). */ .rozhika-qa-wrapper .qa-main-tabs{flex-wrap:wrap} .rozhika-qa-wrapper .qa-main-tab{flex:1 1 auto;white-space:nowrap;padding-left:16px;padding-right:16px} /* Reviews filter bar already wraps (host sets flex-wrap); just keep it tidy and compact so the extra «ناشناس» tab doesn't force the row to widen. */ .rozhika-reviews-wrapper .filter-tabs{justify-content:center} .rozhika-reviews-wrapper .filter-tab{padding-left:16px;padding-right:16px} /* Count pill — same look for native tab counts and the anonymous tab. */ .rsqb-tab-count,.rsqb-anon-tab__count{ display:inline-flex;align-items:center;justify-content:center; min-width:clamp(17px, 16.14px + 0.2679vw, 20px);height:clamp(17px, 16.14px + 0.2679vw, 20px);padding:0 clamp(5px, 4.714px + 0.08929vw, 6px);margin-inline-start:clamp(5px, 4.429px + 0.1786vw, 7px); border-radius:999px;background:#4338ca;color:#fff; font-size:12px;font-weight:800;line-height:1;vertical-align:middle } /* Beat wc-user-account-custom's `.qa-main-tab span{color:inherit}` so the number stays white instead of turning gray/invisible on an INACTIVE Q&A tab. */ .qa-main-tab .rsqb-tab-count,.filter-tab .rsqb-tab-count, .qa-main-tab .rsqb-anon-tab__count,.filter-tab .rsqb-anon-tab__count{ color:#fff;-webkit-text-fill-color:#fff } /* The ACTIVE tab shows a purple gradient, so flip the pill to frosted-white so the count pops instead of melting into the tab background. */ .qa-main-tab.active .rsqb-tab-count,.filter-tab.active .rsqb-tab-count, .qa-main-tab.active .rsqb-anon-tab__count,.filter-tab.active .rsqb-anon-tab__count{ background:rgba(255,255,255,.24) } .rsqb-acct__panel{padding:6px 2px 10px;} .rsqb-acct__empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:46px 16px;color:#6b7280;text-align:center;font-size:14px} .rsqb-acct__empty .rsqb-acct__badge{opacity:.85} .rsqb-acct--fallback{display:block!important} .rsqb-acct--fallback .rsqb-acct__panel{margin-top:26px} /* ============================================================================ Tasks 4 & 6 — in-chat consent card + system notices inside the support widget. These message kinds are injected by JS after WP Rocket's RUCSS snapshot, so the selectors below are safelisted in RSQB_Compat::rucss_safelist(). ============================================================================ */ #rwh-widget-hub .rwh-message-system { align-self: center; max-width: 94%; align-items: center; } #rwh-widget-hub .rwh-message-system .rwh-system-bubble { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; background: linear-gradient(135deg, rgba(157, 78, 221, 0.10), rgba(118, 75, 162, 0.10)); border: 1px solid rgba(157, 78, 221, 0.22); border-radius: 14px; color: #6d28d9; font-family: var(--font-family, IRANYekan, sans-serif); font-size: 12.5px; font-weight: 700; line-height: 1.55; text-align: center; } #rwh-widget-hub .rwh-message-system .rwh-system-icon { display: inline-flex; color: #7b2cbf; flex-shrink: 0; } #rwh-widget-hub .rwh-message-system .rwh-system-time { font-size: 12px; color: #64748b; margin-top: 4px; text-align: center; } /* Task 2: distinct emerald look for the admin-published (no-consent) notice, so it reads differently from the purple consent thank-you. Safelisted in RSQB_Compat. */ #rwh-widget-hub .rwh-message-system.rsqb-sys--pub .rwh-system-bubble { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(5,150,105,0.12)); border-color: rgba(5,150,105,0.30); color: #047857; } #rwh-widget-hub .rwh-message-system.rsqb-sys--pub .rwh-system-icon { color: #059669; } #rwh-widget-hub .rwh-message-consent { align-self: stretch; max-width: 100%; } #rwh-widget-hub .rwh-consent-card { position: relative; overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px 15px 13px; box-shadow: 0 8px 24px rgba(123, 44, 191, 0.10); } #rwh-widget-hub .rwh-consent-card::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 4px; background: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%); } #rwh-widget-hub .rwh-consent-head { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 11px; } #rwh-widget-hub .rwh-consent-spark { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(157, 78, 221, 0.14), rgba(118, 75, 162, 0.14)); color: #7b2cbf; } #rwh-widget-hub .rwh-consent-prompt { font-family: var(--font-family, IRANYekan, sans-serif); font-size: 13px; line-height: 1.75; color: #1e293b; font-weight: 700; } #rwh-widget-hub .rwh-consent-note { margin: 0 0 11px !important; padding: 8px 11px !important; background: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.20) !important; border-radius: 10px !important; font-family: var(--font-family, IRANYekan, sans-serif); font-size: 12px !important; line-height: 1.7 !important; color: #047857 !important; font-weight: 600 !important; display: flex !important; gap: 6px; align-items: flex-start; } #rwh-widget-hub .rwh-consent-note svg { flex-shrink: 0; margin-top: 1px; } /* Encouraging line shown to everyone (guests + members) — soft purple note. */ #rwh-widget-hub .rwh-consent-help { margin: 0 0 11px !important; padding: 8px 11px !important; background: rgba(157, 78, 221, 0.06) !important; border: 1px solid rgba(157, 78, 221, 0.16) !important; border-radius: 10px !important; font-family: var(--font-family, IRANYekan, sans-serif); font-size: 12px !important; line-height: 1.7 !important; color: #6d28d9 !important; font-weight: 600 !important; display: flex !important; gap: 7px; align-items: flex-start; } #rwh-widget-hub .rwh-consent-help svg { flex-shrink: 0; margin-top: 1px; } #rwh-widget-hub .rwh-consent-actions { display: flex; flex-direction: column; gap: 8px; } /* The support widget (rozhika-widget-hub) ships a blanket reset `#rwh-widget-hub button { background-image:none!important; border-radius:50%!important; padding:0!important; box-shadow:none!important; font-weight:normal!important; ... }` for its own circular icon buttons. Our consent buttons are