/* ══════════════════════════════════════════════════════════════
   _shared/style/_do_not_modify/comment-system.css
   Comment system + utility classes used by shared JS
   (comment-system.js, rich-text.js). Extracted VERBATIM from
   default/style/theme.css — DO NOT modify per template.
   Loaded on every article page via _shared/head.php.
   ══════════════════════════════════════════════════════════════ */

/* ── DISPLAY UTILITIES ──────────────────── */
.display_none { display: none !important; }
.display_block { display: block !important; }

/* ── DATA-STYLE ATTRIBUTE UTILITIES ──────
   Used by inline HTML like <div data-style-mt="10">.
   Modern syntax (CSS Values L5) + discrete-value fallbacks.
*/
[data-style-mt] { margin-top: attr(data-style-mt px, 0); }
[data-style-mb] { margin-bottom: attr(data-style-mb px, 0); }
[data-style-ms] { margin-inline-start: attr(data-style-ms px, 0); }
[data-style-me] { margin-inline-end: attr(data-style-me px, 0); }
/* Fallbacks for browsers without attr(<type>) support */
[data-style-mt="5"]{margin-top:5px}[data-style-mt="8"]{margin-top:8px}[data-style-mt="10"]{margin-top:10px}[data-style-mt="12"]{margin-top:12px}[data-style-mt="15"]{margin-top:15px}[data-style-mt="16"]{margin-top:16px}[data-style-mt="20"]{margin-top:20px}[data-style-mt="24"]{margin-top:24px}[data-style-mt="30"]{margin-top:30px}[data-style-mt="40"]{margin-top:40px}[data-style-mt="50"]{margin-top:50px}
[data-style-mb="5"]{margin-bottom:5px}[data-style-mb="8"]{margin-bottom:8px}[data-style-mb="10"]{margin-bottom:10px}[data-style-mb="12"]{margin-bottom:12px}[data-style-mb="15"]{margin-bottom:15px}[data-style-mb="16"]{margin-bottom:16px}[data-style-mb="20"]{margin-bottom:20px}[data-style-mb="24"]{margin-bottom:24px}[data-style-mb="30"]{margin-bottom:30px}[data-style-mb="40"]{margin-bottom:40px}[data-style-mb="50"]{margin-bottom:50px}
[data-style-ms="5"]{margin-inline-start:5px}[data-style-ms="10"]{margin-inline-start:10px}[data-style-ms="15"]{margin-inline-start:15px}[data-style-ms="20"]{margin-inline-start:20px}[data-style-ms="30"]{margin-inline-start:30px}
[data-style-me="5"]{margin-inline-end:5px}[data-style-me="10"]{margin-inline-end:10px}[data-style-me="15"]{margin-inline-end:15px}[data-style-me="20"]{margin-inline-end:20px}[data-style-me="30"]{margin-inline-end:30px}

/* ── COMMENT SYSTEM (.ca1 — .ca39) ──────── */
.ca1 {
margin: 15px 0 50px 0;
}
.ca2 {
display: flex;
align-items: flex-start;
width: 100%;
padding: 10px 0;
transition: 0.3s;
}
.ca3 {
border-radius: 50%;
width: 40px;
height: 40px;
}
.ca4 {
margin-inline-start: 10px;
width: 100%;
}
.ca5 {
display: flex;
width: 100%;
color: var(--color-555);
font-size: 13px;
font-weight: 700;
}
.ca6 {
margin-inline-start: 5px;
color: var(--color-555);
font-size: 12px;
font-weight: 500;
}
.ca7 {
position: relative;
margin-inline-start: auto;
}
.ca7:hover {
display: block;
}
.ca8 {
display: inline-block;
margin: 0 3px 0 0;
padding: 8px;
font-size: 16px;
color: var(--color-555);
}
.ca8:hover {
background: var(--color-eee);
border-radius: 50%;
}
.ca8 .icon {
pointer-events: none;
}
.ca9 {
display: none;
position: absolute;
top: 100%;
inset-inline-end: 0;
background: var(--color-fff);
min-width: 110px;
border-radius: 15px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
padding: 8px 0;
z-index: 1;
}
.ca10 {
color: var(--color-555);
padding: 8px 10px;
width: 100%;
font-weight: 300;
text-align: var(--text-align);
}
.ca10:hover {
background: var(--color-eee);
}
.ca11 {
font-size: 16px;
margin-inline-end: 5px;
}
.ca12 {
color: var(--color-555);
font-size: 0.9em;
font-weight: 400;
margin-inline-end: 15px;
}
.ca13 {
margin-top: 10px;
padding: 8px;
font-size: 16px;
color: var(--color-555);
border-radius: 50%;
}
.ca13:hover {
background: var(--color-eee);
}
.ca14 {
margin: 10px 0;
margin-inline-start: 1px;
margin-inline-end: 3px;
font-size: 12px;
}
.ca15 {
margin-top: 10px;
padding: 6px 8px;
font-size: 12px;
color: var(--color-555);
border-radius: 25px;
}
.ca15:hover {
background: var(--color-eee);
}
.ca16 {
margin-inline-end: 3px;
}
.ca17 {
border-radius: 50%;
width: 24px;
height: 24px;
}
.ca18 {
color: var(--color-2196f3);
}
.ca39 {
padding: 1px 3px;
background: var(--color-eee);
color: var(--color-555);
border-radius: 5px;
}
.ca19 {
position: relative;
display: flex;
align-items: flex-start;
gap: 10px;
}
.ca20 {
width: 40px;
height: 40px;
border-radius: 50%;
order: 1;
flex-shrink: 0;
margin-top: 10px;
}
.ca21 {
border-bottom: 1px solid var(--color-eee);
color: var(--color-000);
margin: 20px 0 0 0;
padding: 5px 0;
width: 100%;
font-size: 14px;
resize: none;
overflow: hidden;
order: 2;
flex-grow: 1;
}
.ca21:focus {
border-bottom-color: var(--color-000);
transition: border-color 0.3s ease;
}

.ca25 {
margin: 10px 0 30px 0;
}
[data-editor-comments] {
border-bottom: 1px solid var(--color-eee);
color: var(--color-000);
margin: 20px 0 0 0;
padding: 5px 0;
width: 100%;
font-size: 14px;
min-height: 20px;
outline: none;
}
[data-editor-comments]:focus {
border-bottom-color: var(--color-000);
transition: border-color 0.3s ease;
}
.comment-toolbar {
position: absolute;
inset-inline-start: 50px;
z-index: 1;
display: flex;
gap: 5px;
background: var(--color-fff);
border: 1px solid var(--color-eee);
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
padding: 5px;
}
.comment-toolbar-button {
padding: 5px;
border-radius: 3px;
color: var(--color-555);
}
.comment-toolbar-button:hover, .comment-toolbar-button-active {
background: var(--color-eee);
}
.insert_emojis_button {
position: absolute;
top: 0;
inset-inline-end: 0;
margin: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px;
margin-inline-end: 8px;
font-size: 20px;
color: var(--color-555);
border-radius: 50%;
}
.insert_emojis_button:hover {
background: var(--color-eee);
}
.emoji_popup {
position: absolute;
z-index: 1;
margin-top: 50px;
inset-inline-end: 10px;
background: var(--color-fff);
border: 1px solid var(--color-eee);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 300px;
max-height: 450px;
padding: 10px;
}
.emoji_categories {
display: flex;
flex-wrap: wrap;
gap: 3px;
padding-bottom: 3px;
margin-bottom: 10px;
border-bottom: 1px solid var(--color-eee);
}
.emoji_category {
background: var(--color-fff);
color: var(--color-333);
border-radius: 25px;
width: 35px;
height: 35px;
font-size: 1rem;
transition: .2s;
}
.emoji_category .icon {
pointer-events: none;
}
.emoji_category:hover {
background: var(--color-eee);
}
.emoji_category_active {
background: var(--color-eee);
color: var(--color-000);
}
.emoji_grid {
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;
max-height: 250px;
padding-bottom: 5px;
padding-inline-end: 5px;
}
.emoji_section_title {
font-size: 1rem;
font-weight: 500;
}
.emoji_container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
gap: 5px;
}
.emoji_button {
font-size: 1.5rem;
transition: 0.2s;
}
.emoji_button:hover {
transform: scale(1.3);
}
.ca26 {
border-bottom: 1px solid var(--color-eee);
color: var(--color-000);
padding: 5px 0;
width: 100%;
font-size: 14px;
resize: none;
overflow: hidden;
order: 2;
flex-grow: 1;
}
.ca26:focus {
border-bottom-color: var(--color-000);
transition: border-color 0.3s ease;
}

.ca31 {
position: relative;
display: flex;
flex-direction: row-reverse;
}
.ca32 {
font-size: 15px;
color: var(--color-555);
}
.ca33 {
display: none;
position: absolute;
top: 100%;
inset-inline-end: 0;
background: var(--color-fff);
min-width: 110px;
border-radius: 15px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
padding: 10px 0;
z-index: 1;
font-size: 16px;
}
.ca34 {
color: var(--color-555);
padding: 5px 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-weight: 500;
font-size: 14px;
}
.ca34:hover {
background: var(--color-eee);
}
.ca35 {
background: var(--color-eee);
}
.ca35:hover {
background: var(--color-eee);
}
.ca36 {
color: var(--color-555);
font-size: 12px;
font-weight: 500;
}
.ca37 {
color: var(--color-555);
font-size: 13px;
font-weight: 700;
}
.ca38 {
margin-inline-start: 45px;
}

/* ── QUOTE SELECTION + ANONYMOUS ─────────── */
.quote-selection-btn{
position:absolute;
border-inline-start: 3px solid var(--color-999);
border-radius: 10px;
background: var(--color-eee);
color: var(--color-555);
padding:4px 8px;
z-index:1000;
font-size:18px;
}
.remove-quote {
position:absolute;
top:7px;
inset-inline-end:8px;
color:var(--color-333);
font-size:16px;
}
.comment_quote {
position: relative;
margin: 0 0 10px;
padding: 8px 12px 8px 12px;
padding-inline-end: 36px;
border-inline-start: 3px solid var(--color-999);
border-radius: 10px;
background: var(--color-eee);
color: var(--color-555);
font-style: italic;
}
[data-anonymous-trigger] {
cursor: pointer;
border-radius: 50%;
transition: box-shadow .3s, transform .2s;
}
[data-anonymous-trigger]:hover {
transform: scale(1.05);
}
[data-anonymous-trigger].anonymous-active {
box-shadow: 0 0 0 2px var(--color-2196f3);
}
.anonymous-modal {
position: fixed;
z-index: 1;
background: transparent;
display: block;
transition: opacity .2s, transform .2s;
}
.anonymous-modal:not(.display_none) {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.anonymous-modal-content {
background: var(--color-eee);
padding: 12px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
min-width: 180px;
position: relative;
}
.anonymous-modal-content::before {
content: '';
position: absolute;
top: -8px;
inset-inline-start: 25px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: transparent transparent var(--color-eee) transparent;
}
.anonymous-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.anonymous-option {
cursor: pointer;
display: flex;
align-items: center;
padding: 8px;
border-radius: 6px;
transition: background-color .2s;
}
.anonymous-option:hover {
background-color: var(--color-fff);
}
.anonymous-option.active {
background-color: var(--color-fff);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
position: relative;
}
.anonymous-option img {
border-radius: 50%;
margin-inline-end: 10px;
width: 36px;
height: 36px;
}
.anonymous-option span {
font-size: 14px;
color: var(--color-333);
}

/* ── AD SLOT BEFORE COMMENTS ────────────── */
.ad-before-comments {
margin: 30px 0;
}

/* ── UNIFIED BUTTONS (.npuni-btn) — used by comment form Cancel/Submit ── */
.npuni-btn-group {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: flex-end;
}
.npuni-btn {
display: inline-block;
padding: 7px 12px;
border-radius: 7px;
background: var(--color-fff);
color: var(--color-000);
text-align: center;
transition: .2s;
position: relative;
}
.npuni-btn:not(.filled):hover:not(:disabled):not(.disabled) {
background: var(--color-eee);
color: var(--color-000);
}
.npuni-btn.filled {
background: var(--color-000);
color: var(--color-fff);
}
.npuni-btn.filled:hover:not(:disabled):not(.disabled) {
opacity: 0.8;
}
.npuni-btn.filled.loading {
color: transparent !important;
pointer-events: none;
}
.npuni-btn.filled.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
border: 2px solid var(--color-fff);
border-top-color: currentColor;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: spinner .7s linear infinite;
}
.npuni-btn.filled[disabled], .npuni-btn.filled.disabled {
background: var(--color-000) !important;
color: transparent !important;
pointer-events: none;
}
.npuni-btn[disabled], .npuni-btn.disabled {
background: var(--color-eee) !important;
color: var(--color-999) !important;
cursor: not-allowed;
pointer-events: none;
}
@keyframes spinner {
to { transform: translate(-50%, -50%) rotate(360deg); }
}