/* Abuse report dialog (skin/theme/abusereport.js) and its buttons on the product / store page. Colors follow the
   theme variables (theme.css) with fallbacks, so the dialog also works on pages without the theme. */
.ec-ar { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 18, 30, .45); opacity: 0; transition: opacity .18s; font-family: var(--ec-font, inherit); }
.ec-ar.ec-ar-open { opacity: 1; }
.ec-ar-box { width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto; background: var(--ec-bg, #fff); color: var(--ec-text, #1d212f); border-radius: var(--ec-radius-lg, 16px); box-shadow: 0 18px 50px rgba(0, 0, 0, .25); padding: 18px; transform: translateY(12px); transition: transform .18s; }
.ec-ar.ec-ar-open .ec-ar-box { transform: none; }
.ec-ar-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ec-ar-ico { flex: 0 0 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #fdecec; color: #d63c3c; font-size: 16px; }
.ec-ar-heading { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ec-ar-heading strong { font-size: 16px; line-height: 1.6; }
.ec-ar-heading small { color: var(--ec-muted, #6b7189); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-ar-x { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--ec-muted, #6b7189); font-size: 22px; line-height: 1; cursor: pointer; }
.ec-ar-x:hover { background: var(--ec-page, #f3f4f8); }
.ec-ar-reasons { border: 0; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ec-ar-reasons legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; float: none; width: 100%; }
.ec-ar-reason { position: relative; margin: 0; cursor: pointer; }
.ec-ar-reason input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.ec-ar-reason span { display: inline-block; padding: 7px 12px; border: 1px solid var(--ec-border, #e3e5ee); border-radius: 999px; font-size: 13px; line-height: 1.5; transition: border-color .15s, background .15s; }
.ec-ar-reason input:checked + span { border-color: var(--ec-primary, #e0322e); background: var(--ec-primary-soft, #fdecec); color: var(--ec-primary-dark, var(--ec-primary, #b4231f)); font-weight: 600; }
.ec-ar-reason input:focus-visible + span { outline: 2px solid var(--ec-primary, #e0322e); outline-offset: 2px; }
.ec-ar-desc { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.ec-ar-desc textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--ec-border, #e3e5ee); border-radius: var(--ec-radius, 10px); padding: 10px; font: inherit; font-weight: 400; resize: vertical; min-height: 80px; background: var(--ec-bg, #fff); color: inherit; }
.ec-ar-msg { margin: 0 0 14px; line-height: 1.9; }
.ec-ar-status { min-height: 1em; margin: 0 0 10px; font-size: 13px; line-height: 1.8; }
.ec-ar-status.ec-ar-ok { color: var(--ec-success, #1f9d55); font-size: 14px; }
.ec-ar-status.ec-ar-err { color: #d63c3c; }
.ec-ar-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-ar-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--ec-primary, #e0322e); border-radius: var(--ec-radius, 10px); background: var(--ec-primary, #e0322e); color: #fff !important; font: inherit; font-weight: 600; text-decoration: none !important; cursor: pointer; }
.ec-ar-btn[disabled] { opacity: .5; cursor: default; }
.ec-ar-btn.ec-ar-ghost { background: transparent; color: var(--ec-text, #1d212f) !important; border-color: var(--ec-border, #e3e5ee); }
/* the page buttons */
.ec-report-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 4px 0; color: var(--ec-muted, #6b7189); font: inherit; font-size: 13px; cursor: pointer; }
.ec-report-btn:hover { color: #d63c3c; }
.ec-report-btn.ec-ar-busy { opacity: .6; pointer-events: none; }
@media (max-width: 575px) {
    .ec-ar { align-items: flex-end; padding: 0; }
    .ec-ar-box { max-width: none; border-radius: 18px 18px 0 0; max-height: 90vh; }
}
body.dark-theme .ec-ar-ico { background: rgba(214, 60, 60, .18); }