#hamyar-comment-app { color: #54667a; line-height: normal; position: relative; } .comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5em; flex-wrap: wrap; } .comment-header h3 { margin: 0; font-size: 22px; font-weight: 700; } body .hc-button { display: flex; justify-content: center; align-items: center; background: #ffffff; border: solid 2px #efefef; color: #787878; font-size: 14px; font-weight: bold; padding: 8px 40px; border-radius: 13px; user-select: none; cursor: pointer; transition: all 0.2s ease; min-height: 50px; overflow: hidden; min-width: 190px; text-transform: none; text-shadow: none; letter-spacing: normal; box-shadow: none; outline: none; font-family: inherit; } body .hc-button:hover { background: #f4f6f8; border-color: #f4f6f8; color: #787878; } .comment-controls { display: flex; justify-content: flex-start; align-items: center; gap: 10px; flex-direction: row; } .comment-filters .filter-btn { user-select: none; cursor: pointer; margin-left: 5px; font-size: 14px; } .sort-hmycmnt { display: flex; flex-direction: row; align-items: center; gap: 5px; align-content: center; } .sort-hmycmnt > svg { width: 20px; height: 20px; } .comment-filters .filter-btn.active { font-weight: 700; color: #ff4f5d; } #comment-sort-select { padding: 8px; border: 1px solid #ddd; border-radius: 5px; } #comment-list .hmyt-comment-wrapper { display: flex; padding: 30px; box-shadow: 0 2px 35px rgb(173 188 200 / 22%); flex-direction: column; border-radius: 8px; background: #ffffff; margin-bottom: 20px; gap: 26px; } #comment-list .comment-container { border-top: solid 1px #f4f4f4; padding-top: 18px; transition: all 0.5s ease-in-out; } #comment-list .comment-container:nth-child(1) { border-top: none; padding-top: 0; } #comment-list .comment-head { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } .comment-avatar img { width: 45px; height: 45px; border-radius: 50% !important; } .comment-user { display: flex; flex-direction: column; } .comment-user-name { font-weight: 700; font-size: 14px; } .comment-time { font-size: 12px; opacity: 0.8; font-weight: 500; } .comment-reply-to { opacity: 0.7; } .comment-label { padding: 1px 10px; font-weight: 500; font-size: 12px; border-radius: 5px; user-select: none; cursor: pointer; } .hmyt-u-flex-1 { flex: 1; } .comment-reply { position: relative; } .comment-reply-btn { background: none !important; border: none !important; cursor: pointer !important; padding: 5px !important; box-shadow: none !important; min-height: unset !important; } .comment-reply-btn svg { width: 22px; height: 22px; color: #54667A; } .comment-reply .comment-reply-tip { position: absolute; white-space: nowrap; top: 50%; transform: translateY(-50%); left: 28px; font-size: 13px; pointer-events: none; transition: all 0.2s ease; opacity: 0; color: #54667a; padding: 5px 10px; border-radius: 8px; z-index: 100; } .comment-reply:hover .comment-reply-tip { left: 34px; opacity: 1; } .comment-form-user img { margin: 0 !important; } textarea.hmyt-input-text.product-rate-modal-comment-input { line-height: normal; } .hmyt-comment-text { line-height: 1.8; color: #333; } .hmyt-comment-text p { margin: 0; } .hmyt-smart-comment-text.is-smart-collapsed { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; } body button.hmyt-comment-text-more { display: inline-flex; align-items: center; justify-content: flex-start; gap: 2px; width: max-content; min-height: 26px; margin: 4px 0 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--hmyt-comment-primary, #ef4056); font: inherit; font-size: 12px; font-weight: 700; line-height: 1.8; cursor: pointer; } body button.hmyt-comment-text-more:hover { color: var(--hmyt-comment-primary, #ef4056); background: transparent; } body button.hmyt-comment-text-more:focus-visible { outline: 2px solid rgba(var(--hmyt-comment-primary-rgb, 239, 64, 86), .34); outline-offset: 3px; border-radius: 4px; } body button.hmyt-comment-text-more svg { width: 16px; height: 16px; } .comment-container .comment-container { margin-top: 15px; border-top: 2px solid #f5f5f5; padding-top: 15px; } .comment-reply-to { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; cursor: pointer; color: #54667A; } .comment-reply-icon { width: 18px; height: 18px; opacity: 0.4; } .hmyt-vote-container { gap: 8px; } body .hmyt-vote-btn { background: transparent; border: 1px solid #eee; border-radius: 8px; padding: 4px 8px; cursor: pointer; display: flex; align-items: center; gap: 4px; color: #54667A; transition: all 0.2s ease; font-family: inherit; line-height: 1; justify-content: center; flex-direction: row; text-transform: none; text-shadow: none; letter-spacing: normal; box-shadow: none; outline: none; min-height: auto; } body .hmyt-vote-btn:hover { background: #f9f9f9; color: #47586b; border-color: #54667a54; } .hmyt-vote-container > .hmyt-vote-btn svg { width: 16px; height: 16px; fill: transparent; transition: all 0.2s; } .hmyt-vote-btn .vote-count { font-size: 12px; font-weight: 600; } .hmyt-vote-btn.vote-like.active { color: #49dc4f; background: #f0fff0; border-color: #49dc4f; } .hmyt-vote-btn.vote-like.active svg { fill: #49dc4f; color: #f0fff0; } .hmyt-vote-btn.vote-dislike.active { color: #ff4f5d; background: #fff0f1; border-color: #ff4f5d; } .hmyt-vote-btn.vote-dislike.active svg { fill: #ff4f5d; color: #ffeff0; } .hmyt-vote-btn.loading { opacity: 0.6; pointer-events: none; } #ai-summary-container { margin-bottom: 2em; display: none; } .loader-wrapper { text-align: center; padding: 4em 0; display: none; } div#comment-floating-btn { display: flex; gap: 5px; align-items: center; } .comment-floating-btn { position: fixed; z-index: 9999; background: #ffffff; color: #0f3072; padding: 15px 18px; cursor: pointer; border-radius: 30px; height: 55px; box-shadow: 0 2px 35px rgba(0,0,0,0.18); transition: all 0.2s ease; } .comment-floating-btn > svg { width: 22px; height: 22px; } .comment-floating-btn > span { overflow: hidden; max-width: none; white-space: nowrap; font-size: 14px; color: #0f3072; font-weight: 500; opacity: 0.8; padding-right: 5px; } .comment-floating-btn:active { background: #f3f3f3; } .comment-floating-btn.hide { transform: scale(0.5); opacity: 0; pointer-events: none; } .comment-floating-btn.hide { transform: scale(0); opacity: 0; pointer-events: none; } .reply-form-wrapper { margin-top: 5px; padding: 20px; border-radius: 12px; background: #f1f4f8; } .comment-form-reply-to .comment-form-reply-cancel {background: #dbe9ff;font-size: 13px;padding: 2px 9px;border-radius: 10px;transition: all 0.2s ease;} .comment-form .hmyt-input-text { resize: vertical; width: 100%; padding: 14px 20px; border-radius: 8px; border: 1px solid #ddd; box-sizing: border-box; } .comment-form-user {gap: 10px;align-items: center;display: flex;} .comment-form-user img { width: 35px; height: 35px; border-radius: 50% !important; } .footer-reply > .comment-form-submit { background: #0f3072; color: #fff; border: none; padding: 13px 46px; font-size: 17px; border-radius: 8px; cursor: pointer; font-weight: 600; gap: 10px; align-items: center; width: max-content; flex-direction: row; align-content: center; flex-wrap: wrap; } .comment-form-submit:disabled { background: #cccccc; cursor: not-allowed; opacity: 0.7; } .gap-5 { gap: 5px; } .hmyt-u-flex { display: flex; } .hmyt-u-flex-r { flex-direction: row; } .hmyt-u-flex-c { flex-direction: column; } .w-100 { width: 100%; } .hmycmnt-title, .hmycmnt-rating { position: relative; display: flex; align-items: center; font-size: 16px; font-weight: 600; gap: 5px; color: #54667a; padding: 8px 40px; -webkit-user-drag: none; transition: all 0.2s ease; cursor: pointer; } .hmycmnt-title svg, .hmycmnt-rating svg { width: 24px; height: 24px; opacity: .7; transition: all 0.2s ease; } .hmycmnt-title span, .hmycmnt-rating span { background: var(--hmyt-comment-primary, #ef4056); text-align: center; min-width: 22px; font-size: 11px; font-weight: 500; height: 25px; width: 25px; display: flex; line-height: normal; border-radius: 50%; color: #fff; align-items: center; justify-content: center; } .comment-form-reply-to { gap: 5px; font-size: 14px; display: flex; user-select: none; cursor: pointer; color: #5294ff; font-weight: 700; flex-direction: row; flex-wrap: wrap; align-content: center; align-items: center; } .comment-form-reply-to-name { flex: 1; } .footer-reply { display: flex; justify-content: flex-end; } label#comment-hidden-wrapper { display: flex; align-items: center; gap: 10px; } form.comment-form { display: flex; flex-direction: column; gap: 15px; } .comment-form-submit > svg { width: 24px; height: 24px; } .private-comment-checkbox { position: relative; display: inline-block; cursor: pointer; font-size: 14px; padding-right: 35px; user-select: none; line-height: 24px; } .private-comment-checkbox input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .private-comment-checkbox label { position: relative; cursor: pointer; display: inline-block; font-weight: 400; transition: color 0.2s ease; } .private-comment-checkbox label::before { content: ""; position: absolute; top: 50%; right: -30px; transform: translateY(-50%); width: 20px; height: 20px; background: #fff; border: 2px solid #cfd8dc; border-radius: 3px; box-sizing: border-box; transition: all 0.2s ease; } .private-comment-checkbox label::after { content: ""; position: absolute; top: 50%; right: -23px; width: 5px; height: 10px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: translateY(-65%) rotate(45deg) scale(0); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .private-comment-checkbox:hover label::before { border-color: #0f3072; } .private-comment-checkbox input[type="checkbox"]:checked + label::before { background: #0f3072; border-color: #0f3072; } .private-comment-checkbox input[type="checkbox"]:checked + label::after { opacity: 1; transform: translateY(-65%) rotate(45deg) scale(1); } .private-comment-checkbox input[type="checkbox"]:checked + label { font-weight: 600; color: #0f3072; } .hmyt-comment-text p { font-size: 15px; } p.no-comments { display: flex; justify-content: center; background: #f7f8fa; padding: 40px; border-radius: 20px; } .comment-message { color: #f9d342; padding: 0; margin-bottom: 9px; font-size: 14px; border-radius: 6px; font-weight: 600; } @media (max-width: 768px) { .comment-message { font-size: 12px; } } .comment-avatar.hmyt-u-flex { position: relative; } .comment-tick { position: absolute; bottom: -3px; right: -3px; width: 18px; height: 18px; border: solid 2px #fff; border-radius: 50%; color: #37e75b; background: #fff; } .comment-focus { background-color: #e3eaf3; box-shadow: 0 0 0 30px #e3eaf3; } .comment-focus.comment-container { border-color: #e3eaf3; } .hmyt-comment-wrapper > .comment-container.comment-focus:nth-child(1) { margin-top: 0px; } @media (max-width: 768px) { .comment-header { align-items: flex-start; gap: 20px; } .comment-header .hc-button, .comment-header .must-login-notice { width: 100%; text-align: center; } .comment-controls { width: 100%; justify-content: space-between; } #comment-list .hmyt-comment-wrapper { padding: 20px; } #comment-list .comment-head { flex-wrap: wrap; gap: 8px; } #comment-list .comment-avatar img { width: 34px; height: 34px; } #comment-list .comment-tick { right: -2px; bottom: -2px; width: 13px; height: 13px; border-width: 1px; } .hmyt-comment-text p { font-size: 14px; } .hc-modal-content { width: 95%; padding: 20px; margin-top: 5vh; } .reply-form-wrapper { padding: 15px; } .comment-floating-btn { height: 50px; padding: 12px 15px; } .comment-focus { box-shadow: 0 0 0 15px #e3eaf3; } } @media (max-width: 480px) { .hmycmnt-title, .hmycmnt-rating, .comment-filters .filter-btn { padding-right: 0; } .comment-controls { flex-direction: row; align-items: flex-start; display: flex; justify-content: flex-start; flex-wrap: nowrap; } .sort-hmycmnt { width: 100%; } .comment-filters { width: 100%; } #comment-list .hmyt-comment-wrapper { padding: 15px; } } .hmyt-comment-text p { text-align: right !important; } .hmycmnt-title, .hmycmnt-rating { padding-right: 0; } .product-rate-modal-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #00052a30; z-index: 999998; } .product-rate-modal-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; justify-content: center; align-items: center; } .product-rate-modal-wrapper { background: #fff; width: 90%; max-width: 500px !important; border-radius: 15px; box-shadow: 0 9px 19px rgba(0,0,0,0.161); padding-bottom: 20px } .product-rate-modal-head { padding-top: 3px } .product-rate-modal-head-title { flex: 1; padding: 0 24px; font-size: 17px; font-weight: 600 } .product-rate-modal-close { display: flex; padding: 13px 20px; opacity: 0.3; cursor: pointer; transition: all 0.2s ease } .product-rate-modal-close:hover { opacity: 0.5 } .product-rate-modal-close svg { width: 28px; height: 28px } .product-rate-modal-options-wrapper { padding-bottom: 10px; direction: ltr } .hmyt-review-rating-question { margin: 0 0 10px; direction: rtl; color: #1f2937; font-size: 14px; font-weight: 700; line-height: 1.8; text-align: right; } .product-rate-modal-rate-options { width: 100%; border-radius: 4px; position: relative; overflow: hidden } .product-rate-modal-option { flex: 1; padding: 5px 0; cursor: pointer; position: relative; transition: all 0.2s ease; display: flex; height: 50px; color: #e0e0e0; align-items: center; gap: 5px; justify-content: center; } .product-rate-modal-option:hover { background: #f8f8f8 } .product-rate-modal-option svg { width: 20px; height: 20px } .product-rate-modal-option:hover, .product-rate-modal-option:hover ~ .product-rate-modal-option { color: #ffb900 } .product-rate-modal-option span { font-size: 13px; color: #707070; font-weight: 500; transition: all 0.2s ease } .select-1 .product-rate-modal-option[data-value="1"] span, .select-2 .product-rate-modal-option[data-value="2"] span, .select-3 .product-rate-modal-option[data-value="3"] span, .select-4 .product-rate-modal-option[data-value="4"] span, .select-5 .product-rate-modal-option[data-value="5"] span { font-size: 17px; color: #ffb900; font-weight: 800 } .product-rate-modal-rate-options.select-1 .product-rate-modal-option:nth-child(5) { color: #ffb900; } .product-rate-modal-rate-options.select-2 .product-rate-modal-option:nth-child(5), .product-rate-modal-rate-options.select-2 .product-rate-modal-option:nth-child(4) { color: #ffb900; } .product-rate-modal-rate-options.select-3 .product-rate-modal-option:nth-child(5), .product-rate-modal-rate-options.select-3 .product-rate-modal-option:nth-child(4), .product-rate-modal-rate-options.select-3 .product-rate-modal-option:nth-child(3) { color: #ffb900; } .product-rate-modal-rate-options.select-4 .product-rate-modal-option:nth-child(5), .product-rate-modal-rate-options.select-4 .product-rate-modal-option:nth-child(4), .product-rate-modal-rate-options.select-4 .product-rate-modal-option:nth-child(3), .product-rate-modal-rate-options.select-4 .product-rate-modal-option:nth-child(2) { color: #ffb900; } .product-rate-modal-rate-options.select-5 .product-rate-modal-option { color: #ffb900; } .product-rate-modal-hmyt-comment-wrapper { padding: 19px 23px 0 } .product-rate-modal-comment-title { font-size: 16px; text-align: center; font-weight: 500; margin-bottom: 12px; cursor: default; min-height: 24px; } .product-rate-modal-comment-title small { font-weight: 400; opacity: 0.8 } .product-rate-modal-comment-input { resize: none; height: 140px; border-radius: 10px; border: 1px solid #ddd; box-sizing: border-box; width: 100%; padding: 10px; } body .product-rate-modal-submit { display: flex; justify-content: center; align-items: center; margin: 0; margin-top: 16px; font-size: 17px; padding: 12px; font-weight: 500; border-radius: 10px; background: #0f3072; color: #fff; border: none; width: 100%; cursor: pointer; text-transform: none; text-shadow: none; letter-spacing: normal; box-shadow: none; outline: none; font-family: inherit; min-height: auto; } body .product-rate-modal-submit:hover { color: #fff; background: #24315b; } body .product-rate-modal-submit:disabled { background: #cccccc; cursor: not-allowed; opacity: 0.7; color: #fff; } .product-rate-tip { background: #0f3072; color: #fff; padding: 0px 20px 0 11px; font-size: 13px; font-weight: 500; height: 38px; border-radius: 7px; position: absolute; top: -40px; left: 90%; transform: translateX(-50%); white-space: nowrap; z-index: 9; cursor: pointer; box-shadow: 0 10px 20px rgba(0,0,0,0.1); animation: rateTipAnimate 1s ease 5s forwards,rateTipAnimate 1s ease 20s forwards; opacity: 1; transition: all 0.2s ease; pointer-events: all; max-width: fit-content !important; } @keyframes rateTipAnimate { 0%, to { transform: translateX(-50%); } 15% { transform: translateX(-50%) translate3d(-10%, 0, 0) rotate3d(0, 0, 1, -10deg); } 30% { transform: translateX(-50%) translate3d(7%, 0, 0) rotate3d(0, 0, 1, 7deg); } 45% { transform: translateX(-50%) translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -7deg); } 60% { transform: translateX(-50%) translate3d(4%, 0, 0) rotate3d(0, 0, 1, 3deg); } 75% { transform: translateX(-50%) translate3d(-4%, 0, 0) rotate3d(0, 0, 1, -1deg); } } .product-rate-tip.hide { opacity: 0; pointer-events: none; } .product-rate-tip-close { width: 20px; height: 20px; background: #445280; margin-right: 5px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } .product-rate-tip-close svg { width: 12px; height: 12px; } .product-rate-tip-close:hover { background: #535d7f; } .product-rate-tip-close:active { opacity: 0.7; } .product-rate-tip::after { content: ''; width: 10px; height: 10px; background: inherit; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg); } .comment-reply-tip { background: #fff; } .product-rate-modal-close svg { } .comment-reply.ai-reply { margin-left: 5px; } .comment-reply-btn.ai-reply-btn { color: #6b21a8 !important; transition: all 0.3s ease; } .comment-reply-btn.ai-reply-btn svg { width: 20px; height: 20px; } .comment-reply-btn.ai-reply-btn { position: relative; } .comment-reply-btn.ai-reply-btn.loading::after { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: #ff4f5d; border-right-color: #ff4f5d; animation: ai-spin 0.8s linear infinite; pointer-events: none; } .comment-reply-btn.ai-reply-btn.loading svg { animation: none; opacity: 0.4; } @keyframes ai-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } span.comment-reply-btn.ai-done.hmyt-u-flex { display: inline-flex; align-items: center; color: #49dc4f !important; gap: 5px; border: 1px solid #49dc4f !important; padding: 4px 10px !important; border-radius: 10px; font-weight: 600; font-size: 12px; justify-content: center; background: #f0fff0; margin-right: 5px; opacity: 0; transform: translateX(-10px) scale(0); transform-origin: left center; will-change: transform, opacity; animation: ai-pop-in 0.22s cubic-bezier(.2,.9,.2,1) forwards; } span.comment-reply-btn.ai-done.hmyt-u-flex svg { height: 15px; width: 15px; background: #49dc4f; color: #fff; border-radius: 50%; padding: 2px; flex-shrink: 0; } @keyframes ai-pop-in { 0% { opacity: 0; transform: translateX(-10px) scale(0); } 60% { opacity: 1; transform: translateX(2px) scale(1.06); } 100% { opacity: 1; transform: translateX(0) scale(1); } } .comment-reply.ai-reply { display: flex; gap: 10px; flex-direction: row-reverse; } .product-rate-modal-head-title { display: flex; align-items: center; justify-content: flex-start; } .hmyt-bulk-toolbar-simple { margin-bottom: 20px; display: flex; justify-content: flex-end; } .hmyt-bulk-trigger-btn { background: #fff; color: #54667a; border: 1px solid #ccd0d4; padding: 8px 15px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; transition: all 0.2s; } .hmyt-bulk-trigger-btn:hover { border-color: #54667a; background: #f6f7f7; } .hmyt-bulk-notices ul { list-style: disc; padding-right: 20px; margin: 0; font-size: 13px; color: #646970; background: #f0f6fc; border: 1px solid #cce5ff; border-radius: 8px; padding: 15px 25px 15px 10px; } .hmyt-bulk-notices li { margin-bottom: 5px; } .hmyt-bulk-notices li:last-child { margin-bottom: 0; } .hmyt-bulk-action-btn { background: #0f3072; color: #fff; border: none; padding: 12px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; position: relative; transition: all 0.3s ease; } .hmyt-bulk-action-btn.state-processing { background: #e2e4e7 !important; color: #54667a !important; cursor: wait; } .hmyt-bulk-action-btn.state-found { background: #3b82f6 !important; color: #fff !important; } .hmyt-bulk-action-btn.state-running { background: #ff4f5d !important; color: #fff !important; } .hmyt-bulk-action-btn.state-done { background: #49dc4f !important; color: #fff !important; } .product-ai-modal-hmyt-comment-wrapper > .comment-reply.ai-reply { display: flex; align-items: center; gap: 10px; flex-direction: row; } .comment-reply-btn.ai-reply-btn { position: relative; background: none; border: none; padding: 5px; cursor: default; display: flex; align-items: center; color: #54667a; } .comment-reply-btn.ai-reply-btn.loading::after { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: #ff4f5d; border-right-color: #ff4f5d; animation: ai-spin 0.8s linear infinite; pointer-events: none; } .comment-reply-btn.ai-reply-btn.loading svg { animation: none; opacity: 0.6; width: 20px; height: 20px; } @keyframes ai-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hmyt-log-col > span.comment-reply-btn.ai-done.hmyt-u-flex { display: inline-flex; align-items: center; color: #49dc4f !important; gap: 5px; border: 1px solid #49dc4f !important; padding: 4px 10px !important; border-radius: 10px; font-weight: 600; font-size: 12px; justify-content: center; background: #f0fff0; opacity: 0; transform: translateX(-10px) scale(0); transform-origin: right center; will-change: transform, opacity; animation: ai-pop-in 0.4s cubic-bezier(.2,.9,.2,1) forwards; } .hmyt-log-col > span.comment-reply-btn.ai-done.hmyt-u-flex svg { height: 15px; width: 15px; background: #49dc4f; color: #fff; border-radius: 50%; padding: 2px; flex-shrink: 0; } @keyframes ai-pop-in { 0% { opacity: 0; transform: translateX(-10px) scale(0); } 60% { opacity: 1; transform: translateX(2px) scale(1.06); } 100% { opacity: 1; transform: translateX(0) scale(1); } } .hmyt-bulk-status-container { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; width: 100%; } .hmyt-status-col { display: flex; align-items: center; gap: 8px; } .hmyt-status-text { font-size: 13px; font-weight: 600; color: #54667a; } .hmyt-log-col { flex: 1; display: flex; justify-content: flex-start; overflow: hidden; } .comment-reply-btn.ai-reply-btn { position: relative; background: none; border: none; padding: 5px; cursor: default; display: flex; align-items: center; color: #54667a; } .comment-reply-btn.ai-reply-btn.loading::after { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: #ff4f5d; border-right-color: #ff4f5d; animation: ai-spin 0.8s linear infinite; pointer-events: none; } .comment-reply-btn.ai-reply-btn.loading svg { opacity: 0.8; animation: ai-pulse 1.2s infinite ease-in-out; } @keyframes ai-pulse { 0% { transform: scale(0.85); } 50% { transform: scale(1.15); } 100% { transform: scale(0.85); } } @keyframes ai-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hmyt-log-col > span.comment-reply-btn.ai-done.hmyt-u-flex { display: inline-flex; align-items: center; color: #49dc4f !important; gap: 5px; border: 1px solid #49dc4f !important; padding: 4px 10px !important; border-radius: 10px; font-weight: 600; font-size: 12px; justify-content: center; background: #f0fff0; white-space: nowrap; opacity: 0; transform: translateX(20px); animation: ai-slide-in-right 0.4s cubic-bezier(.2,.9,.2,1) forwards; } .hmyt-log-col > span.comment-reply-btn.ai-done.hmyt-u-flex svg { height: 15px; width: 15px; background: #49dc4f; color: #fff; border-radius: 50%; padding: 2px; flex-shrink: 0; } @keyframes ai-slide-in-right { to { opacity: 1; transform: translateX(0); } } .product-ai-modal-hmyt-comment-wrapper { padding: 19px 23px 0; } .hmyt-bulk-status-container > .hmyt-status-col { display: flex; flex-direction: row-reverse; gap: 20px; } .hmyt-bulk-status-container > .hmyt-status-col .hmyt-status-text { font-size: 14px; font-weight:700; } .hmyt-uc-tabs-header { display: flex; gap: 20px; margin-bottom: 25px; border-bottom: 2px solid #f0f0f0; padding-bottom: 2px; } .hmyt-cm-tab-item { padding: 10px 15px; font-weight: 500; font-size: 15px; color: #777; cursor: pointer; position: relative; transition: color 0.3s ease; user-select: none; display: flex; align-items: center; } .hmyt-cm-tab-item:hover { color: #333; } .hmyt-cm-tab-item.active { color: #0f3072; font-weight: 700; } .hmyt-cm-tab-item.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: #0f3072; border-radius: 3px; transform-origin: center; transform: scaleX(0); animation: hmytTabScaleIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes hmytTabScaleIn { 0% { transform: scaleX(0); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } } .hmyt-cm-tab-badge { background: #ff4f5d; color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 6px; margin-right: 8px; display: inline-block; vertical-align: middle; } .hmyt-waiting-list { display: flex; flex-direction: column; } .hmyt-waiting-item { display: flex; align-items: center; gap: 15px; background: #fff; border: 1px solid #f4f4f4; border-bottom: solid 8px #f4f4f4; padding: 15px; transition: all 0.2s ease; flex-direction: row; flex-wrap: wrap; } .hmyt-waiting-img { width: 65px; height: 65px; border-radius: 10px; overflow: hidden; flex-shrink: 0; } .hmyt-waiting-img img { width: 100%; height: 100%; object-fit: cover; } .hmyt-waiting-info { flex: 1; display: flex; flex-direction: column; gap: 6px; justify-content: center; } .hmyt-waiting-title { font-weight: 700; font-size: 15px; color: #333 !important; text-decoration: none; line-height: 1.4; transition: color 0.2s; } .hmyt-waiting-title:hover { color: #54667a; } .hmyt-waiting-date { font-size: 12px; color: #999; } .hmyt-waiting-action { flex-shrink: 0; } .hmyt-waiting-action .hc-button { padding: 0 20px; font-size: 13px; min-width: auto; height: 42px; min-height: auto; font-weight: 700; background: #fff; color: #ff4f5d; border: 1px solid #ff4f5d; display: flex; align-items: center; justify-content: center; text-decoration: none; } .hmyt-waiting-action .hc-button:hover { background: #ff4f5d; color: #fff; } @media (max-width: 600px) { .hmyt-waiting-img { width: 50px; height: 50px; } .hmyt-waiting-info { width: 100%; } .hmyt-waiting-action { width: 100%; margin-top: 5px; } .hmyt-waiting-action .hc-button { width: 100%; min-width: 100%; } .hmyt-uc-tabs-header { gap: 10px; justify-content: space-between; } .hmyt-cm-tab-item { padding: 10px 5px; font-size: 13px; flex: 1; justify-content: center; } } .hmyt-uc-pagination ul { display: flex; gap: 5px; list-style: none; padding: 0; margin: 0; } .hmyt-uc-pagination a, .hmyt-uc-pagination span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #e2e8f0; border-radius: 8px; color: #64748b; text-decoration: none; transition: all 0.2s; background: #fff; } .hmyt-uc-pagination .current { background: #54667a; color: #fff; border-color: #54667a; } .hmyt-uc-pagination a:hover { border-color: #54667a; color: #54667a; } .hmyt-waiting-item:last-child { border-bottom: 1px solid #f4f4f4; } span.comment-label.approved { background: #f0fdf4; color: #49dc4f; border: 1px solid; font-weight: 700; font-size: 11px; padding: 1px 8px; border-radius: 6px; } span.comment-label.pending { background: #ffe6d7; color: #f47e39; border: 1px solid; font-weight: 700; font-size: 11px; padding: 1px 8px; border-radius: 6px; } span.comment-label.private { background: #f9d34200; color: #f9d342; border: 1px solid; font-weight: 700; font-size: 11px; padding: 1px 8px; border-radius: 6px; } span.comment-label.pinned-badge { background: #1d1e1e0d; color: #1d1e1e; border: 1px solid; display: flex; font-weight: 700; align-items: center; justify-content: center; } .comment-label.type-3 { background: #e7f7ff; color: #1ca5f2; border: 1px solid; font-weight: 700; font-size: 11px; padding: 1px 8px; border-radius: 6px; } .comment-label.type-2 { background: #fffafa; color: #ff4f5d; border: 1px solid; font-weight: 700; font-size: 11px; padding: 1px 8px; border-radius: 6px; } .comment-reply.pin-reply { margin-left: 5px; } .comment-reply-btn.pin-reply-btn { color: #aebecd !important; transition: all 0.3s ease; } .comment-reply-btn.pin-reply-btn:hover { color: #0f3072 !important; } .comment-reply-btn.pin-reply-btn.active { color: #ff4f5d !important; } .comment-reply-btn.pin-reply-btn svg { width: 20px; height: 20px; } @keyframes pulse{0%,100%{opacity:0}50%{opacity:.3}} .comment-reply-btn.pin-reply-btn.loading { opacity: 0.6; pointer-events: none; animation: pulse 1s infinite; } .hmyt-comment-wrapper.hmyt-is-pinned { border: 1px solid #334155; box-shadow: 0 2px 35px rgb(114 119 138 / 9%) !important; } .comment-label.pinned-badge { gap: 4px; } #comment-list-loader { display: none; } .hmyt-skeleton-wrapper { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; } .hmyt-skeleton-card { background: transparent; border: 0; border-radius: 0; padding: 20px; display: flex; flex-direction: column; gap: 15px; box-shadow: none; } .hmyt-skeleton-header { display: flex; align-items: center; gap: 15px; } .hmyt-skeleton-pulse { background: #f6f7f8; background: linear-gradient(90deg, #f6f7f8 0%, #edeef1 50%, #f6f7f8 100%); background-size: 200% 100%; animation: hmyt-skeleton-loading 1.5s infinite linear; border-radius: 4px; } @keyframes hmyt-skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .hmyt-skeleton-avatar { width: 45px; height: 45px; border-radius: 50%; flex-shrink: 0; } .hmyt-skeleton-info { display: flex; flex-direction: column; gap: 8px; flex: 1; } .hmyt-skeleton-name { width: 120px; height: 14px; } .hmyt-skeleton-date { width: 80px; height: 10px; } .hmyt-skeleton-content { display: flex; flex-direction: column; gap: 10px; margin-top: 5px; } .hmyt-skeleton-line { height: 20px; width: 100%; } .hmyt-skeleton-line.short { width: 60%; } .product-rate-tip-close { display: flex; align-items: center; justify-content: center; } .hmyt-uc-product-link > a { color: #3e486d; } body.dark #comment-list .hmyt-comment-wrapper { background: #262631; box-shadow: none !important; } body.dark .hmyt-comment-wrapper.hmyt-is-pinned { border-color: #fff; } body.dark .hmyt-waiting-item { background: #353542; box-shadow: 0 2px 35px rgba(0,0,0,0.2); border-color: #262631; } body.dark .comment-user-name, body.dark .hmyt-comment-text, body.dark .hmyt-waiting-title, body.dark .product-rate-modal-head-title, body.dark .product-rate-modal-comment-title { color: #fff !important; } body.dark #hamyar-comment-app, body.dark .comment-time, body.dark .comment-reply-to, body.dark .hmyt-waiting-date, body.dark .hmyt-status-text { color: #e8eaef; } body.dark .comment-form .hmyt-input-text, body.dark .product-rate-modal-comment-input { background: #262631; border-color: #414150; color: #fff; } body.dark .reply-form-wrapper { background: #353542; } body.dark .comment-form-reply-to .comment-form-reply-cancel { background: #414150; color: #fff; } body.dark .hc-button, body.dark .hmyt-bulk-trigger-btn, body.dark .hmyt-uc-pagination a, body.dark .hmyt-uc-pagination span { background: #262631; border-color: #262631; color: #ccc; } body.dark .hmyt-vote-btn { background: #262631; border-color: #414150; color: #ccc; } body.dark .hc-button:hover, body.dark .hmyt-vote-btn:hover, body.dark .hmyt-bulk-trigger-btn:hover, body.dark .hmyt-uc-pagination a:hover {opacity: .7;} body.dark .comment-floating-btn { background: #353542; color: #fff; } body.dark .comment-floating-btn > span { color: #fff; } body.dark .comment-floating-btn:active { background: #414150; } body.dark .product-rate-modal-wrapper { background: #353542; } body.dark .product-rate-modal-option:hover { background: #414150; } body.dark .product-rate-modal-close svg { background: #414150; fill: #ccc; } body.dark .hmyt-uc-tabs-header { border-bottom-color: #414150; } body.dark .hmyt-cm-tab-item { color: #9ca3af; } body.dark .hmyt-cm-tab-item.active { color: #fff; } body.dark .hmyt-cm-tab-item:hover { color: #e5e7eb; } body.dark #comment-list .comment-container { border-top-color: #414150; } body.dark .comment-container .comment-container { border-top-color: #414150; } body.dark .hmyt-waiting-item:last-child { border-bottom-color: #262631; } body.dark .hmyt-skeleton-card { background: transparent; } body.dark .hmyt-skeleton-pulse { background: linear-gradient(90deg, #353542 0%, #414150 50%, #353542 100%); background-size: 200% 100%; } body.dark .comment-focus { background-color: #414150; box-shadow: 0 0 0 30px #414150; } body.dark .comment-focus.comment-container { border-color: #414150; } body.dark .comment-filters .filter-btn { color: #9ca3af; } body.dark .comment-filters .filter-btn.active { color: #ff4f5d; } body.dark .private-comment-checkbox label::before { background: #262631; border-color: #414150; } body.dark .private-comment-checkbox:hover label::before { border-color: #fff; } body.dark .private-comment-checkbox input[type="checkbox"]:checked + label { color: #fff; } body.dark .comment-label {background: transparent;} body.dark .comment-label.type-2 { color: #ff5c69; } body.dark .comment-label.type-1 {} body.dark .comment-label.type-3 { color: #4dc1fe; } body.dark .comment-label.pinned-badge { color: #e5e7eb; } body.dark .comment-reply-btn svg { color: #e5e7eb; } body.dark .hmyt-vote-btn.vote-like.active { background: transparent; } body.dark .hmyt-vote-btn.vote-like.active svg {color: #49dc4f;fill: transparent;} body.dark .hmyt-vote-btn.vote-dislike.active { background: transparent; } body.dark .hmyt-vote-btn.vote-dislike.active svg { color: #ff4f5d; fill: transparent; } body.dark .comment-reply .comment-reply-tip { background: #262631; color: #fff; } body.dark .hmycmnt-title, body.dark .hmycmnt-rating { color: #fff; } .hmyt-uc-list > .comment-container { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 15px; margin-bottom: 15px; } body.dark .hmyt-cm-tab-item.active::after { background: #e5e7eb; } .hmyt-uc-list > .comment-container { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 15px; margin-bottom: 15px; } body.dark .hmyt-uc-list > .comment-container { background: #262631; border-color: transparent; } body.dark .hmyt-uc-product-link { color: #e5e7eb; } body.dark .hmyt-uc-votes > div svg { color: #e5e7eb; } body.dark .hmyt-uc-product-link > a { color: #6caeff; } .hmyt-uc-info { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #eee; font-size: 12px; color: #777; gap: 5px; } span.hmyt-rating-count { background: #e5e7eb; color: #546e7a; } body.dark span.hmyt-rating-count { color: #262631; } body.dark .hmyt-uc-info { border-color: #414150; } .hmyt-uc-replies { margin-bottom: 15px; margin-right: 30px; border-right: 2px solid #e2e8f0; padding-right: 20px; } body.dark span.page-numbers.current {background: #414150;} body.dark a.button.hc-button:hover { background: #414150; border-color: #414150; } body.dark .comment-tick { border-color: #262631; background: #262631; } .hmyt-user-rating > span {font-size: 13px;font-weight: 600;color: #555;padding-top: 2px;} .hmyt-user-rating > svg { color: #ffb900; height: 16px; width: 16px; vertical-align: middle; } .hmyt-user-rating { display: flex; align-items: center; gap: 3px; margin-right: 8px; } body.dark .hmyt-user-rating > span { color: #e5e7eb; } div#load-more-container { place-items: center; } .hmyt-more-loader { display: none; align-items: center; justify-content: center; min-height: 50px; } .hmyt-spinner { width: 26px; height: 26px; border: 1px solid #e2e8f0; border-top-color: #0f3072; border-radius: 50%; animation: hmyt-more-spin 0.7s linear infinite; } @keyframes hmyt-more-spin { to { transform: rotate(360deg); } } body.dark .hmyt-spinner { border-color: #414150; border-top-color: #9bbcff; } .comment-meta { gap: 10px; } .comment-meta .hmyt-user-rating { margin: 0 !important; } @media (max-width: 768px) { #comment-list .comment-user-name { font-size: 12px; line-height: 1.6; } #comment-list .comment-time { font-size: 10px; line-height: 1.5; } #comment-list .comment-head .comment-label { padding: 1px 6px !important; border-radius: 999px; font-size: 9px !important; line-height: 1.6; } #comment-list .comment-head .comment-label.pinned-badge { gap: 2px; padding: 1px 5px !important; } #comment-list .comment-head .comment-label.pinned-badge svg { width: 11px !important; height: 11px !important; } #comment-list .hmyt-user-rating { gap: 2px; } #comment-list .hmyt-user-rating > span { padding-top: 1px; font-size: 11px; } #comment-list .hmyt-user-rating > svg { width: 13px; height: 13px; } .comment-meta { flex-basis: 100%; order: 5; justify-content: space-between; } } .hmyt-comment-purchase { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 10px 0 2px; } .hmyt-comment-purchase-chip { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #62666d; font-size: 11px; line-height: 1.7; } .hmyt-comment-purchase-separator { display: inline-block; flex: 0 0 4px; width: 4px; height: 4px; border-radius: 50%; background: #e0e0e2; } .hmyt-comment-purchase-swatch { display: inline-block; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--hmyt-purchase-swatch); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } .hmyt-comment-media { display: grid; grid-template-columns: repeat(4, minmax(0, 64px)); gap: 5px; margin-top: 10px; width: max-content; max-width: 100%; } body button.hmyt-comment-media-thumb { position: relative; display: block; width: 64px; height: 64px; margin: 0; padding: 0; overflow: hidden; border: 1px solid #eceef1; border-radius: 7px; background: #f8f8f9; cursor: zoom-in; appearance: none; transition: border-color 160ms ease, opacity 160ms ease; } body button.hmyt-comment-media-thumb:hover, body button.hmyt-comment-media-thumb:focus-visible { outline: 0; } body button.hmyt-comment-media-thumb.is-loading { pointer-events: none; opacity: .68; } .hmyt-comment-media-thumb img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; } .hmyt-comment-media-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(28, 29, 32, .64); color: #fff; font-size: 15px; font-weight: 700; } body.hmyt-comment-lightbox-open { overflow: hidden; } .hmyt-comment-lightbox { position: fixed; z-index: 2147483000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity 180ms ease, visibility 180ms ease; } .hmyt-comment-lightbox.is-open { visibility: visible; opacity: 1; } .hmyt-comment-lb-backdrop { position: absolute; inset: 0; background: rgba(15, 17, 21, .82); } .hmyt-comment-lb-dialog { position: relative; display: grid; grid-template-rows: 52px minmax(0, 1fr); width: min(960px, 94vw); height: min(760px, 90vh); overflow: hidden; border: 1px solid rgba(255, 255, 255, .13); border-radius: 18px; background: #15171b; color: #fff; box-shadow: 0 28px 90px rgba(0, 0, 0, .38); transform: translateY(8px) scale(.985); transition: transform 180ms ease; } .hmyt-comment-lightbox.is-open .hmyt-comment-lb-dialog { transform: none; } .hmyt-comment-lb-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 6px 16px; border-bottom: 1px solid rgba(255, 255, 255, .09); } .hmyt-comment-lb-counter { color: rgba(255, 255, 255, .72); font-size: 12px; } body button.hmyt-comment-lb-close, body button.hmyt-comment-lb-nav { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; appearance: none; } body button.hmyt-comment-lb-close { width: 40px; height: 40px; border-radius: 50%; } body button.hmyt-comment-lb-close:hover, body button.hmyt-comment-lb-nav:hover { background: rgba(255, 255, 255, .11); } .hmyt-comment-lb-close svg, .hmyt-comment-lb-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .hmyt-comment-lb-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 18px 72px; } .hmyt-comment-lb-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } body button.hmyt-comment-lb-nav { position: absolute; top: 50%; width: 46px; height: 46px; border-radius: 13px; background: rgba(255, 255, 255, .07); transform: translateY(-50%); } body button.hmyt-comment-lb-nav.is-prev { right: 12px; } body button.hmyt-comment-lb-nav.is-next { left: 12px; } @media (max-width: 600px) { .hmyt-comment-media { grid-template-columns: repeat(4, minmax(0, 52px)); gap: 5px; } body button.hmyt-comment-media-thumb { width: 52px; height: 52px; border-radius: 6px; } .hmyt-comment-lightbox { padding: 0; } .hmyt-comment-lb-dialog { width: 100%; height: 100%; border: 0; border-radius: 0; } .hmyt-comment-lb-stage { padding-inline: 48px; } body button.hmyt-comment-lb-nav { width: 40px; height: 40px; } body button.hmyt-comment-lb-nav.is-prev { right: 4px; } body button.hmyt-comment-lb-nav.is-next { left: 4px; } } body.hmyt-review-modal-open { overflow: hidden; } .hmyt-review-modal [hidden] { display: none !important; } .hmyt-review-modal .product-rate-modal-bg { z-index: 2147483000; background: rgba(15, 23, 42, .52); } .hmyt-review-modal .product-rate-modal-container { z-index: 2147483001; padding: 20px; box-sizing: border-box; } .hmyt-review-modal .hmyt-review-modal-card { width: min(560px, 100%); max-width: 560px !important; max-height: min(90dvh, 820px); padding: 0; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, .28); user-select: text; } .hmyt-review-modal .product-rate-modal-head { min-height: 68px; padding: 0 20px; border-bottom: 7px solid #e9edf2; flex-shrink: 0; background: #fff; } .hmyt-review-modal .product-rate-modal-close { order: 1; width: 40px; height: 40px; min-height: 40px; padding: 8px; border: 0; border-radius: 50%; background: transparent; color: #334155; opacity: 1; cursor: pointer; box-shadow: none; } .hmyt-review-modal .product-rate-modal-close:hover { background: #f1f5f9; opacity: 1; } .hmyt-review-modal .product-rate-modal-close svg { width: 24px; height: 24px; } .hmyt-review-modal .product-rate-modal-head-title { order: 2; flex: 1; padding: 0 10px; font-size: 16px; font-weight: 600; color: #1f2937; } .hmyt-review-step-label { order: 3; min-width: 84px; text-align: left; color: #64748b; font-size: 13px; white-space: nowrap; } .hmyt-review-modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 8px; scrollbar-width: thin; scrollbar-color: #aeb7c3 transparent; } .hmyt-review-product-card { display: flex; align-items: center; gap: 14px; padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid #edf0f4; } .hmyt-review-product-card img { width: 76px; height: 76px; flex: 0 0 76px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid #edf0f4; } .hmyt-review-product-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .hmyt-review-product-info strong { color: #1f2937; font-size: 14px; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hmyt-review-product-info > span { color: #64748b; font-size: 12px; line-height: 1.7; } .hmyt-review-product-info .hmyt-review-purchase-date { color: #475569; } .hmyt-review-field-heading { display: flex; align-items: center; gap: 3px; margin-bottom: 10px; color: #1f2937; font-size: 14px; font-weight: 700; } .hmyt-review-field-heading > span { color: var(--hmyt-comment-primary, #ef4056); } .hmyt-review-modal .product-rate-modal-option:focus-visible { outline: 2px solid #19bfd3; outline-offset: 2px; } .hmyt-review-modal .product-rate-modal-hmyt-comment-wrapper { padding: 0; } .hmyt-review-modal .product-rate-modal-comment-title { min-height: 0; margin: -4px 0 8px; color: #64748b; font-size: 12px; font-weight: 500; text-align: right; } .hmyt-review-rating-editor { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; max-width: 100%; margin: 0 0 10px; padding: 5px 9px 5px 6px; border-radius: 999px; background: #f5f6f8; color: #52606f; } .hmyt-review-rating-editor__label { flex-shrink: 0; font-size: 11px; font-weight: 650; white-space: nowrap; } .hmyt-review-rating-editor__stars { display: flex; align-items: center; direction: ltr; gap: 1px; } .hmyt-review-rating-editor__stars > button { display: grid; place-items: center; width: 21px; height: 21px; min-height: 0; padding: 3px; border: 0; border-radius: 50%; background: transparent; color: #c8ced6; cursor: pointer; transition: color .16s ease, transform .16s ease, background-color .16s ease; } .hmyt-review-rating-editor__stars > button:hover { color: #ffb900; } .hmyt-review-rating-editor__stars > button:focus-visible { outline: 2px solid #19bfd3; outline-offset: 1px; } .hmyt-review-rating-editor__stars > button.is-active { color: #ffb900; } .hmyt-review-rating-editor__stars.is-previewing > button { color: #c8ced6; } .hmyt-review-rating-editor__stars.is-previewing > button.is-preview { color: #ffb900; } .hmyt-review-rating-editor__stars svg { display: block; width: 14px; height: 14px; } .hmyt-review-rating-editor__value { display: inline-flex; align-items: baseline; justify-content: center; min-width: 31px; padding: 3px 7px; border-radius: 999px; background: #fff; color: #ffb900; font-size: 12px; line-height: 1.2; } .hmyt-review-rating-editor__value small { font-size: 9px; font-weight: 650; opacity: .72; } .hmyt-review-text-card { overflow: hidden; border: 2px solid #e5e9ef; border-radius: 12px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; } .hmyt-review-text-card:focus-within { border-color: #19bfd3; box-shadow: 0 0 0 2px rgba(25, 191, 211, .1); } .hmyt-review-modal .product-rate-modal-comment-input { display: block; width: 100%; height: 150px; min-height: 150px; padding: 15px 16px; border: 0 !important; border-radius: 0; outline: 0; box-shadow: none !important; background: transparent; font-size: 14px; line-height: 1.9; } body .hmyt-review-identity-trigger { display: grid; grid-template-columns: 1fr auto 22px; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-top: 2px solid #e5e9ef; background: #fff; color: #334155; cursor: pointer; text-align: right; font-family: inherit; } .hmyt-review-identity-trigger:hover { background: #f8fafc; } .hmyt-review-identity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .hmyt-review-identity-mode { padding: 4px 10px; border-radius: 30px; background: #eff3f8; color: #334155; font-size: 12px; line-height: normal; } .hmyt-review-identity-trigger svg { width: 20px; height: 20px; color: #64748b; } .hmyt-review-private-option { margin: 14px 0 2px; } .hmyt-review-media-picker { margin-top: 18px; } .hmyt-review-media-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .hmyt-review-media-heading strong { color: #1f2937; font-size: 14px; } .hmyt-review-media-heading span { color: #94a3b8; font-size: 11px; } .hmyt-review-media-list { display: flex; align-items: stretch; gap: 10px; overflow-x: auto; padding: 1px 1px 5px; } .hmyt-review-add-media, .hmyt-review-media-item { position: relative; width: 88px; height: 88px; min-width: 88px; overflow: hidden; border-radius: 10px; } body .hmyt-review-add-media { order: 99; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: none; background: #f5f6f8; color: #1f2937; cursor: pointer; font-family: inherit; } .hmyt-review-add-media:hover { opacity: 0.8; } .hmyt-review-add-media svg { width: 27px; height: 27px; } .hmyt-review-add-media span { font-size: 11px; font-weight: 700; } .hmyt-review-media-item { border: 1px solid #e2e8f0; background: #f8fafc; } .hmyt-review-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; } body .hmyt-review-remove-media { position: absolute; inset-inline-end: 5px; bottom: 5px; display: grid; place-items: center; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .82); color: #fff; cursor: pointer; } .hmyt-review-remove-media svg { width: 16px; height: 16px; } .hmyt-review-media-help { display: flex; align-items: center; gap: 6px; margin: 5px 0 0; color: #8a94a3; font-size: 11px; } .hmyt-review-media-help svg { width: 18px; height: 18px; flex: 0 0 18px; } .hmyt-review-modal-footer { flex-shrink: 0; padding: 16px 24px 15px; border-top: 6px solid #e9edf2; background: #fff; } .hmyt-review-modal-footer .product-rate-modal-submit, .hmyt-review-modal-footer .hmyt-review-next-step { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 0; padding: 12px; border: 0; border-radius: 10px; background: var(--hmyt-comment-primary, #ef4056); color: #fff; font-family: inherit; font-size: 15px; font-weight: 750; cursor: pointer; box-shadow: none; } .hmyt-review-modal-footer .product-rate-modal-submit:hover, .hmyt-review-modal-footer .hmyt-review-next-step:hover { color: #fff; background: color-mix(in srgb, var(--hmyt-comment-primary, #ef4056) 86%, #000); } .hmyt-review-modal-footer .product-rate-modal-submit:disabled { background: #dfe2e6; color: #fff; opacity: 1; } .hmyt-review-modal-footer p { margin: 10px 0 0; color: #64748b; font-size: 11px; text-align: center; } .hmyt-review-identity-layer { position: fixed; inset: 0; z-index: 2147483002; display: grid; place-items: center; padding: 18px; } body .hmyt-review-identity-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(15, 23, 42, .42); cursor: default; } body .hmyt-review-identity-backdrop:hover { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(15, 23, 42, .42); cursor: default; } .hmyt-review-identity-dialog { position: relative; z-index: 1; width: min(460px, 100%); overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, .3); } .hmyt-review-identity-head {display: flex;align-items: center;justify-content: space-between;min-height: 58px;padding: 0 18px;border-bottom: 7px solid #edf0f4;color: #1f2937;} .hmyt-review-identity-head strong { font-size: 16px; } body .hmyt-review-identity-close { display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #64748b; cursor: pointer; } .hmyt-review-identity-close:hover { background: #f1f5f9; } .hmyt-review-identity-close svg { width: 21px; height: 21px; } body .hmyt-review-identity-option { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 12px; width: 100%; padding: 17px 20px; border: 0; border-bottom: 2px solid #f0f2f5; background: #fff; color: #1f2937; text-align: right; cursor: pointer; font-family: inherit; } .hmyt-review-identity-option:last-child { border-bottom: 0; } .hmyt-review-identity-option:hover { background: #f8fafc; } .hmyt-review-identity-option > span:last-child { display: flex; flex-direction: column; gap: 5px; } .hmyt-review-identity-option strong { font-size: 14px; } .hmyt-review-identity-option small { color: #64748b; font-size: 12px; line-height: 1.7; } .hmyt-review-identity-radio { width: 18px; height: 18px; margin-top: 2px; border: 2px solid #b8c1cc; border-radius: 50%; box-shadow: inset 0 0 0 4px #fff; } .hmyt-review-identity-option.is-selected .hmyt-review-identity-radio { border-color: var(--hmyt-comment-primary, #ef4056); background: var(--hmyt-comment-primary, #ef4056); } body.dark .hmyt-review-modal .hmyt-review-modal-card, body.dark .hmyt-review-modal .product-rate-modal-head, body.dark .hmyt-review-modal-footer, body.dark .hmyt-review-text-card, body.dark .hmyt-review-identity-trigger, body.dark .hmyt-review-identity-dialog, body.dark .hmyt-review-identity-option { background: #262631; } body.dark .hmyt-review-modal .product-rate-modal-head, body.dark .hmyt-review-product-card, body.dark .hmyt-review-modal .product-rate-modal-options-wrapper, body.dark .hmyt-review-modal-footer, body.dark .hmyt-review-text-card, body.dark .hmyt-review-identity-trigger, body.dark .hmyt-review-identity-head, body.dark .hmyt-review-identity-option { border-color: #3a3a48; } body.dark .hmyt-review-modal .product-rate-modal-head-title, body.dark .hmyt-review-product-info strong, body.dark .hmyt-review-field-heading, body.dark .hmyt-review-media-heading strong, body.dark .hmyt-review-identity-head, body.dark .hmyt-review-identity-option { color: #f8fafc; } body.dark .hmyt-review-modal .product-rate-modal-comment-input { color: #f8fafc; background: transparent; } body.dark .hmyt-review-rating-question { color: #f8fafc; } body.dark .hmyt-review-rating-editor { background: #30303c; color: #d5d9e0; } body.dark .hmyt-review-rating-editor__stars > button:hover { background: #3a3a48; } body.dark .hmyt-review-rating-editor__value { background: rgba(255, 185, 0, .14); color: #ffca3a; } body.dark .hmyt-review-add-media { background: #30303c; border-color: #4a4a58; color: #f8fafc; } body.dark .hmyt-review-identity-trigger:hover, body.dark .hmyt-review-identity-option:hover { background: #30303c; } @media (max-width: 600px) { .hmyt-review-modal .product-rate-modal-container { padding: 0; align-items: flex-end; } .hmyt-review-modal .hmyt-review-modal-card { width: 100%; max-width: none !important; max-height: 100dvh; height: 100dvh; border-radius: 0; } .hmyt-review-modal .product-rate-modal-head { min-height: 62px; padding: 0 12px; } .hmyt-review-modal .product-rate-modal-head-title { font-size: 16px; } .hmyt-review-step-label { min-width: 76px; font-size: 12px; } .hmyt-review-modal-scroll { padding: 16px 16px 8px; } .hmyt-review-modal-footer { padding: 14px 16px calc(13px + env(safe-area-inset-bottom)); } .hmyt-review-product-card img { width: 64px; height: 64px; flex-basis: 64px; } .hmyt-review-identity-dialog { align-self: end; width: 100%; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); } .hmyt-review-identity-layer { padding: 0; } } .hmyt-buyer-media-strip[hidden] { display: none !important; } .hmyt-buyer-media-strip--mobile { display: none; } .hmyt-buyer-media-strip { margin: 0 0 16px; padding: 0; border: 0; border-radius: 0; background: transparent; direction: rtl; } .hmyt-buyer-media-strip__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; } .hmyt-buyer-media-strip__icon { display: flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: #eff3f8; color: #424750; } .hmyt-buyer-media-strip__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; } .hmyt-buyer-media-strip__head strong { color: #3f4248; font-size: 14px; font-weight: 700; } .hmyt-buyer-media-strip__rail { display: flex; align-items: center; gap: 6px; padding: 1px 0 3px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; } .hmyt-buyer-media-strip__rail::-webkit-scrollbar { display: none; } body button.hmyt-comment-media-thumb.hmyt-buyer-media-strip__thumb { position: relative; display: flex; flex: 0 0 68px; width: 68px; height: 68px; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: #f3f4f5; cursor: pointer; transition: opacity 160ms ease; } body button.hmyt-comment-media-thumb.hmyt-buyer-media-strip__thumb:hover, body button.hmyt-comment-media-thumb.hmyt-buyer-media-strip__thumb:focus-visible { opacity: .68; outline: 0; } body button.hmyt-comment-media-thumb.hmyt-buyer-media-strip__thumb.is-loading { opacity: .62; pointer-events: none; } .hmyt-buyer-media-strip__thumb img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; } body button.hmyt-buyer-media-strip__view-all { position: relative; display: flex; flex: 0 0 68px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 68px; height: 68px; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; isolation: isolate; transition: opacity 160ms ease; } body button.hmyt-buyer-media-strip__view-all svg { padding: 0; width: 24px; height: 24px; z-index: 1; } body button.hmyt-buyer-media-strip__view-all::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(35 45 81 / 23%); } .hmyt-buyer-media-strip__view-all-image { position: absolute; inset: -8px; z-index: 0; display: block; width: calc(100% + 16px); height: calc(100% + 16px); margin: 0; object-fit: cover; filter: blur(10px); transform: scale(1.12); } body button.hmyt-buyer-media-strip__view-all:hover, body button.hmyt-buyer-media-strip__view-all:focus-visible { opacity: .68; outline: 0; } .hmyt-buyer-media-strip__view-all span { position: relative; z-index: 2; font: 700 15px/1 sans-serif; letter-spacing: 1px; } .hmyt-buyer-media-strip__view-all strong { position: relative; z-index: 2; font-size: 10px; font-weight: 700; white-space: nowrap; } .hmyt-tpl-digikala .hmyt-buyer-media-strip { margin-bottom: 16px; padding: 0; } body.dark .hmyt-buyer-media-strip { background: transparent; } body.dark .hmyt-buyer-media-strip__head strong { color: #f8fafc; } body.dark .hmyt-buyer-media-strip__icon { background: #30303a; color: #d6d7da; } body.dark button.hmyt-comment-media-thumb.hmyt-buyer-media-strip__thumb { background: #20202a; } body.dark button.hmyt-buyer-media-strip__view-all { color: #f8fafc; } @media (max-width: 600px) { .hmyt-buyer-media-strip { margin-bottom: 12px; } body button.hmyt-comment-media-thumb.hmyt-buyer-media-strip__thumb { flex-basis: 58px; width: 58px; height: 58px; border-radius: 7px; } body button.hmyt-buyer-media-strip__view-all { flex-basis: 58px; width: 58px; height: 58px; border-radius: 7px; } .hmyt-buyer-media-strip__view-all strong { font-size: 9px; } } @media (max-width: 768px) { .hmyt-tpl-digikala > .hmyt-buyer-media-strip:not(.hmyt-buyer-media-strip--mobile) { display: none; } .hmyt-tpl-digikala .hmyt-buyer-media-strip--mobile { display: block; } }