/* ==========================================================================
   ПОЛИТИКА МОДЕРАЦИИ: строка у формы комментария и окно с правилами
   ========================================================================== */

/* ---- строка-триггер под полем ввода ---- */

.ac-policy__open {display: inline-flex; align-items: center; gap: 6px; background: none; font: 400 13px/1.4 Roboto, sans-serif; color: var(--text-light); cursor: pointer; transition: color var(--transition-fast);}
.ac-policy__open svg {width: 14px; height: 14px; flex: none;}
.ac-policy__open:hover {color: var(--link-color);}

/* ---- окно с правилами ---- */

.ac-policy-modal {
    /* Сброс `* {margin: 0}` убивает центрирование <dialog>. */
    margin: auto;
    display: flex;
    flex-direction: column;
    width: min(520px, calc(100vw - 32px));
    max-height: min(86vh, 720px);
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    background: var(--bg-card);
    border: 0;
    border-radius: var(--radius-lg);
    color: var(--text-main);
}
/* иначе авторский display перебивает dialog:not([open]) и закрытое окно ловит клики */
.ac-policy-modal:not([open]) {display: none;}
.ac-policy-modal::backdrop {background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);}
.dark .ac-policy-modal {box-shadow: 0 0 0 1px var(--border-strong);}

.ac-policy-modal__head {position: relative; flex: none; display: flex; align-items: center; height: 64px; padding: 0 64px 0 24px;}
.ac-policy-modal__title {flex: 1 1 auto; min-width: 0; font: 500 18px/24px Roboto, sans-serif; color: var(--text-black);}
.ac-policy-modal__close {position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--bg-secondary); border-radius: var(--radius-full); color: var(--text-main); cursor: pointer; transition: color var(--transition-fast);}
.ac-policy-modal__close svg {width: 16px; height: 16px; stroke-width: 2.5;}
.ac-policy-modal__close:hover {color: var(--text-black);}

.ac-policy-modal__body {flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 24px 24px;}
.ac-policy-modal__lead {margin-bottom: 20px; font-size: 16px; line-height: 24px; color: var(--text-main);}
.ac-policy-modal__sub {margin-bottom: 6px; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--text-black);}

.ac-policy-acc {display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px;}
.ac-policy-acc__head {display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 0; background: none; font: 400 16px/24px Roboto, sans-serif; text-align: left; color: var(--text-main); cursor: pointer; transition: color var(--transition-fast);}
.ac-policy-acc__head:hover {color: var(--link-color);}
.ac-policy-acc__head svg {width: 14px; height: 14px; flex: none; color: var(--text-light); transition: transform var(--transition-fast);}
.ac-policy-acc__head[aria-expanded="true"] svg {transform: rotate(90deg);}
.ac-policy-acc__body {padding: 2px 0 6px 22px; font-size: 15px; line-height: 22px; color: var(--text-secondary);}
.ac-policy-acc__also {margin: 12px 0 6px; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--text-black);}
.ac-policy-acc__plain {position: relative; padding: 3px 0 3px 22px; font-size: 16px; line-height: 24px; color: var(--text-main);}
.ac-policy-acc__plain::before {content: ''; position: absolute; top: 13px; left: 5px; width: 4px; height: 4px; background: var(--text-light); border-radius: var(--radius-full);}

@media (max-width: 640px) {
    .ac-policy-modal {margin: auto 0 0; width: 100%; max-width: 100%; max-height: calc(100dvh - 64px); border-radius: var(--radius-lg) var(--radius-lg) 0 0;}
    .ac-policy-modal__head {padding: 0 60px 0 16px;}
    .ac-policy-modal__body {padding: 8px 16px calc(20px + env(safe-area-inset-bottom));}
}