/* 06-feedback. КУДА: дописать в конец themes/default/css/add_style.css (подключён в header.tpl после style.css).
   Цвета — через переменные; поменяйте под бренд сайта в :root или в своей теме. */
:root {
	--eo-accent: #4a7ef8;
	--eo-accent-hover: #3566d6;
	--eo-muted: #6b7385;
	--eo-border: #e3e6eb;
	--eo-soft-bg: #fafafa;
	--eo-error: #c62828;
	--eo-star: #f5b301;
}

/* --- общие для /feedback и /reviews --- */
.eo-fb-alert { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--eo-border); border-radius: 12px; background: var(--eo-soft-bg); font-weight: 600; }
.eo-fb-alert-err { color: var(--eo-error); }
.eo-fb-pd { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--eo-muted); }
.eo-fb-pd a { color: var(--eo-accent); text-decoration: underline; }
.eo-fb-off, .eo-rv-empty { color: var(--eo-muted); }

/* --- форма «Обратная связь» (/feedback) --- */
.eo-fb { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; border: 1px solid #eee; border-radius: 14px; padding: 20px; margin: 18px 0 8px; background: var(--eo-soft-bg); }
.eo-fb label { display: block; font-size: 14px; color: #444; }
.eo-fb input, .eo-fb textarea { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px; border: 1px solid #d9dde3; border-radius: 10px; font: inherit; background: #fff; }
.eo-fb input:focus, .eo-fb textarea:focus { outline: 0; border-color: var(--eo-accent); box-shadow: 0 0 0 3px rgba(74, 126, 248, .15); }
.eo-fb .eo-fb-wide { grid-column: 1 / -1; }
.eo-fb button { justify-self: start; padding: 13px 30px; border: 0; border-radius: 36px; background: var(--eo-accent); color: #fff; font: inherit; cursor: pointer; }
.eo-fb button:hover { background: var(--eo-accent-hover); }
.eo-fb-note { color: #888; font-size: 13px; margin: 0 0 22px; }
@media (max-width: 600px) { .eo-fb { grid-template-columns: 1fr; padding: 14px; } }

/* --- отзывы о сайте (/reviews) --- */
.eo-stars { color: var(--eo-star); letter-spacing: 1px; margin-right: 8px; }
.eo-stars-off { color: #ddd; }
.eo-rv-sum { font-size: 18px; }
.eo-rv-form { border: 1px solid #eee; border-radius: 14px; padding: 18px; margin: 18px 0 26px; background: var(--eo-soft-bg); }
.eo-rv-form label { display: block; margin: 0 0 10px; }
.eo-rv-form input[type=text], .eo-rv-form input[type=email], .eo-rv-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #ddd; border-radius: 10px; font: inherit; }
.eo-rv-rate { margin: 0 0 10px; }
.eo-rv-rate label { display: inline-block; margin-right: 10px; cursor: pointer; }
.eo-rv-form button { padding: 12px 26px; border: 0; border-radius: 12px; background: var(--eo-accent); color: #fff; font: inherit; cursor: pointer; }
.eo-rv-form small { color: #999; }
.eo-rv { border-top: 1px solid #eee; padding: 14px 0; }
.eo-rv b { margin-right: 8px; }
.eo-rv small { color: #999; margin-left: 8px; }
.eo-rv p { margin: 8px 0 0; white-space: pre-line; }
.eo-rv .eo-rv-answer { margin-left: 18px; color: #555; }

/* --- кабинет: закреплённый диалог «Служба поддержки» (необязательная часть) --- */
.eo-support-item { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-bottom: 1px solid var(--eo-border); background: #f3f7ff; text-decoration: none !important; color: #111 !important; }
.eo-support-item:hover { background: #e9f0ff; }
.eo-support-ava { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--eo-sup-ava-bg, var(--eo-accent)); color: #fff; font-weight: 700; font-size: 22px; }
.eo-support-info { flex: 1 1 auto; min-width: 0; }
.eo-support-info b { display: block; font-weight: 700; font-size: 15px; }
.eo-support-info em { display: block; font-style: normal; font-size: 13px; color: var(--eo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eo-support-pin { font-style: normal; font-size: 12px; }
.eo-support-date { font-size: 12px; color: #8a8f99; }

/* окно диалога; если на сайте уже есть общие стили .eo-modal — эти правила ограничены #eo-support и не мешают */
body.eo-modal-lock { overflow: hidden; }
#eo-support.eo-modal { display: none; position: fixed; inset: 0; z-index: 100002; background: rgba(16, 24, 40, .5); align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
#eo-support.eo-modal.is-open { display: flex; }
#eo-support .eo-modal-box { position: relative; width: 100%; max-width: 760px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 24px; padding: 34px 32px 28px; box-sizing: border-box; color: #111; }
#eo-support .eo-modal-box h3 { margin: 0 0 14px; text-align: center; font-size: 24px; font-weight: 700; }
#eo-support .eo-modal-x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f2f4f8; font-size: 22px; line-height: 36px; cursor: pointer; color: #111; }
#eo-support .eo-modal-btn { display: block; margin-left: auto; min-width: 200px; height: 42px; padding: 0 26px; border: 0; border-radius: 22px; background: var(--eo-accent); color: #fff; font: inherit; font-size: 15px; cursor: pointer; }
#eo-support .eo-modal-btn:hover { background: var(--eo-accent-hover); }
#eo-support .eo-modal-btn[disabled] { opacity: .5; cursor: default; }
.eo-sup-thread { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 12px; }
.eo-sup-msg { max-width: 80%; align-self: flex-start; }
.eo-sup-msg.eo-sup-mine { align-self: flex-end; }
.eo-sup-text { padding: 10px 14px; border-radius: 14px; background: #f2f4f8; font-size: 14px; line-height: 1.45; }
.eo-sup-mine .eo-sup-text { background: #e7efff; }
.eo-sup-date { margin-top: 3px; font-size: 11px; color: #8a8f99; }
.eo-sup-mine .eo-sup-date { text-align: right; }
.eo-sup-form textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #d0d5dd; border-radius: 14px; font: inherit; font-size: 14px; resize: vertical; margin: 0 0 10px; }
.eo-sup-err { color: var(--eo-error); margin: 0 0 8px; }
@media (max-width: 600px) { #eo-support .eo-modal-box { padding: 30px 18px 22px; border-radius: 20px; } }