/* ============================================================
   Gwolle-GB Guestbook — оформление под тему Blockbase
   ============================================================ */

/* --- Скрыть лишнее: аватарки, кнопку «...», счётчик записей --- */
.gwolle-gb .gb-author-avatar {
	display: none;
}
.gwolle-gb button.gb-metabox-handle,
.gwolle-gb div.gb-metabox {
	display: none !important;
}
.gwolle-gb .gwolle-gb-total {
	display: none;
}

/* --- Записи: одна левая линия для имени, даты и текста --- */
.gwolle-gb .gb-entry {
	border-top: 1px solid var(--wp--preset--color--tertiary, #f0f0f0);
	padding: 1.5em 0;
}
.gwolle-gb .gb-author-info,
.gwolle-gb .gb-author-name,
.gwolle-gb .gb-entry-content,
.gwolle-gb .gb-entry article {
	padding-left: 0 !important;
	margin-left: 0 !important;
}
.gwolle-gb .gb-author-info {
	margin-bottom: .5em;
}
.gwolle-gb .gb-author-name {
	font-weight: 700;
	color: var(--wp--preset--color--foreground, #333);
}
.gwolle-gb .gb-datetime {
	color: var(--wp--preset--color--foreground, #333);
	opacity: .55;
	font-size: var(--wp--preset--font-size--small, 1rem);
}
.gwolle-gb .gb-metabox-content-likes {
	margin-top: .75em;
}
.gwolle-gb .gb-metabox-content-likes a {
	text-decoration: none;
}

/* --- Ответ админа: плашка с акцентной линией в цвет темы --- */
.gwolle-gb .gb-entry-admin_reply {
	margin: 1em 0 0;
	padding: .75em 1.25em;
	border-left: 3px solid var(--wp--preset--color--primary, #007cba);
	background: var(--wp--preset--color--tertiary, #f0f0f0);
}
.gwolle-gb .gb-admin-reply-uid {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small, 1rem);
	margin-bottom: .25em;
}

/* --- Никакого курсива (имя модератора, подпись ответа админа) --- */
.gwolle-gb i,
.gwolle-gb em {
	font-style: normal;
}

/* --- Кнопки в стиле кнопок темы --- */
.gwolle-gb input[type="button"],
.gwolle-gb input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	background: var(--wp--custom--button--color--background, #007cba);
	color: var(--wp--custom--button--color--text, #fff);
	border: none;
	border-radius: var(--wp--custom--button--border--radius, 4px);
	font-family: inherit;
	font-weight: var(--wp--custom--button--typography--font-weight, normal);
	font-size: var(--wp--custom--button--typography--font-size, 1.125rem);
	line-height: 1;
	padding: .667em 1.333em;
	cursor: pointer;
}
.gwolle-gb input[type="button"]:hover,
.gwolle-gb input[type="submit"]:hover {
	background: var(--wp--preset--color--secondary, #006ba1);
}

/* ============================================================
   Форма «Напишите нам» — попап с затемнением фона
   ============================================================ */
.gwolle-gb form.gwolle-gb-write {
	position: fixed;
	z-index: 99999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(640px, calc(100vw - 2em));
	max-height: 85vh;
	box-sizing: border-box;
	background: var(--wp--preset--color--background, #fff);
	border: none;
	border-radius: var(--wp--custom--button--border--radius, 4px);
	/* первая тень — гигантская, она и затемняет весь фон */
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45), 0 12px 40px rgba(0, 0, 0, .25);
	/* !important перебивает инлайновую jQuery-анимацию плагина */
	height: auto !important;
	margin: 0 !important;
	padding: 2em !important;
	overflow: auto !important;
	animation: gb-modal-in .25s ease;
}
@keyframes gb-modal-in {
	from { opacity: 0; transform: translate(-50%, -47%); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
	.gwolle-gb form.gwolle-gb-write { animation: none; }
}
.gwolle-gb form.gwolle-gb-write h3 {
	margin-top: 0;
}

/* Лейблы над полями на всю ширину (вместо двух колонок с float) */
.gwolle-gb form.gwolle-gb-write div.label,
.gwolle-gb form.gwolle-gb-write div.input {
	float: none;
	width: 100%;
	max-width: 100%;
	text-align: left;
}
.gwolle-gb form.gwolle-gb-write .gwolle-gb-submit .label {
	display: none;
}
.gwolle-gb div.label label {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small, 1rem);
}
.gwolle-gb div.input input[type="text"],
.gwolle-gb div.input input[type="email"],
.gwolle-gb div.input input[type="url"],
.gwolle-gb div.input textarea,
.gwolle-gb div.input select {
	font: inherit;
	color: inherit;
	width: 100%;
	box-sizing: border-box;
	padding: .5em .75em;
	margin: .25em 0 .75em;
	background: var(--wp--preset--color--background, #fff);
	border: 1px solid var(--wp--custom--form--border--color, #efefef);
	border-radius: var(--wp--custom--form--border--radius, 0);
}
.gwolle-gb div.input input:focus,
.gwolle-gb div.input textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary, #007cba);
	outline-offset: -1px;
}

/* Примечание под формой — мельче и приглушённо */
.gwolle-gb .gwolle-gb-notice,
.gwolle-gb .gwolle_gb_notice {
	color: var(--wp--preset--color--foreground, #333);
	opacity: .6;
	font-size: var(--wp--preset--font-size--small, 1rem);
	margin-top: .75em;
}

/* Кнопка закрытия «x»: тихая, вместо серого квадрата.
   Длинный селектор — чтобы перебить специфичность плагина */
html body div.gwolle-gb form.gwolle-gb-write button.gb-notice-dismiss {
	top: .5em;
	right: .5em;
	width: 28px;
	height: 28px;
	line-height: 28px;
	background: transparent;
	color: var(--wp--preset--color--foreground, #333);
	opacity: .6;
	font-size: 1em;
	border-radius: var(--wp--custom--button--border--radius, 4px);
}
html body div.gwolle-gb form.gwolle-gb-write button.gb-notice-dismiss:hover {
	opacity: 1;
	background: var(--wp--preset--color--tertiary, #f0f0f0);
}
html body div.gwolle-gb form.gwolle-gb-write button.gb-notice-dismiss:focus {
	border: none;
	outline: 2px solid var(--wp--preset--color--primary, #007cba);
}

/* Кнопка «Write a new entry.» появляется мгновенно, без анимации высоты */
.gwolle-gb .gwolle-gb-write-button,
.gwolle-gb .gwolle-gb-write-button input {
	transition: none !important;
	height: auto !important;
}