/* ================================================================
   Support plugin — frontend styles
   Covers two contexts:
     1. Visitor inquiry page  (standalone, no theme) — .iq-* classes
     2. Support modal on theme pages                 — .support-* classes
   Loaded via wp_enqueue_style (theme pages) and a <link> tag
   (standalone inquiry page) so both contexts get the same file.
================================================================ */

/* ================================================================
   INQUIRY PAGE — standalone thread view (iq- prefix)
================================================================ */

*,*::before,*::after { box-sizing:border-box; }

body {
	margin:0; padding:0; background:#FAFAF9;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
	color:#1C1917; -webkit-font-smoothing:antialiased;
}

/* ---- Layout ---- */
.iq-wrap   { max-width:680px; margin:0 auto; padding:32px 16px 64px; }
.iq-header { text-align:center; margin-bottom:24px; }
.iq-header a { font-size:15px; font-weight:600; color:#1C1917; text-decoration:none; }
.iq-header__logo { height:32px; width:auto; display:inline-block; vertical-align:middle; }
.iq-footer { text-align:center; margin-top:20px; font-size:12px; color:#bbb; }
.iq-footer a { color:#bbb; text-decoration:none; }
.iq-footer__copy { margin:0; }

/* ---- Card shell ---- */
.iq-card { background:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.08); overflow:hidden; }
.iq-card-header { padding:20px 28px; border-bottom:1px solid #E7E4DF; }
.iq-card-header h1 { margin:0; font-size:18px; font-weight:600; }
.iq-card-header p  { margin:6px 0 0; font-size:13px; color:#78716C; }
.iq-body { padding:24px 28px; }

/* ---- Ticket ID ---- */
.iq-ticket-id { font-family:monospace; font-weight:700; letter-spacing:.04em; }

/* ---- Message bubbles (thread history) ---- */
.iq-msg { border-radius:6px; margin-bottom:14px; overflow:hidden; border:1px solid #E7E4DF; }
.iq-msg--original { border-color:#dce2eb; }
.iq-msg--admin    { border-color:#c3ddd4; }
.iq-msg--visitor  { border-color:#f0dca0; }

.iq-msg__meta { padding:8px 14px; font-size:12px; color:#78716C; border-bottom:1px solid rgba(0,0,0,.05); }
.iq-msg--original .iq-msg__meta { background:#f5f7fa; }
.iq-msg--admin    .iq-msg__meta { background:#f0f7f4; }
.iq-msg--visitor  .iq-msg__meta { background:#fdf8ee; }

.iq-msg__body { padding:14px; font-size:14px; line-height:1.7; color:#44403C; }
.iq-msg__body p:first-child { margin-top:0; }
.iq-msg__body p:last-child  { margin-bottom:0; }

/* ---- Inline badges ---- */
.iq-badge--autoresponse { display:inline-block; padding:1px 6px; border-radius:3px; font-size:11px; font-weight:600; background:#e0f0ff; color:#0057a8; }
.iq-original-badge { display:inline-block; padding:1px 6px; background:#e8e8e8; border-radius:3px; font-size:10px; font-weight:600; color:#78716C; text-transform:uppercase; letter-spacing:.04em; }
.iq-waiting-label { display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; font-weight:600; background:#fef3c7; color:#92400e; border:1px solid #fcd34d; letter-spacing:.01em; }

/* ---- Current-message card (pinned: most recent + action bar + reply form) ---- */
.iq-current-card { border-radius:8px; overflow:hidden; margin-bottom:20px; border:1px solid #E7E4DF; }
.iq-current-card--replied { border-color:#b8ddd0; }
.iq-current-card--waiting { border-color:#e8d9a0; }

.iq-current-card__meta { padding:10px 16px; font-size:12px; color:#78716C; border-bottom:1px solid rgba(0,0,0,.07); background:#FAFAF9; }
.iq-current-card--replied .iq-current-card__meta { background:#f0f7f4; }
.iq-current-card--waiting .iq-current-card__meta { background:#fdf8ee; }

.iq-current-card__body { padding:16px; font-size:14px; line-height:1.7; color:#44403C; }
.iq-current-card__body p:first-child { margin-top:0; }
.iq-current-card__body p:last-child  { margin-bottom:0; }

.iq-current-card__actions { padding:11px 16px; border-top:1px solid #E7E4DF; background:#FAFAF9; display:flex; justify-content:space-between; align-items:center; }
.iq-current-card__reply   { padding:14px 16px; border-top:1px solid #E7E4DF; }
.iq-current-card__closed  { padding:14px 16px; border-top:1px solid #E7E4DF; font-size:13px; color:#78716C; text-align:center; }

/* ---- Buttons ---- */
.iq-btn { padding:9px 20px; background:#2d5a8e; color:#fff; border:none; border-radius:5px; font-size:14px; font-weight:500; cursor:pointer; font-family:inherit; line-height:1; }
.iq-btn:hover { background:#1e3f64; }

.iq-btn-action { padding:7px 16px; background:#fff; color:#44403C; border:1px solid #E7E4DF; border-radius:5px; font-size:13px; font-weight:500; cursor:pointer; font-family:inherit; line-height:1; }
.iq-btn-action:hover { background:#FAFAF9; border-color:#A8A29E; color:#1C1917; }
.iq-btn-action--primary { background:#2d5a8e; color:#fff; border-color:#2d5a8e; }
.iq-btn-action--primary:hover { background:#1e3f64; border-color:#1e3f64; color:#fff; }
.iq-btn-action--resolve { color:#78716C; }

.iq-btn-undo { padding:5px 14px; background:transparent; color:#78716C; border:1px solid rgba(0,0,0,.2); border-radius:5px; font-size:12px; cursor:pointer; font-family:inherit; line-height:1; }
.iq-btn-undo:hover { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.35); color:#1C1917; }

/* ---- Form helpers ---- */
.iq-form-inline  { display:inline; }
.iq-reply-actions { margin:.75rem 0 0; }

/* ---- Textarea ---- */
textarea { width:100%; min-height:100px; padding:10px 12px; border:1px solid #E7E4DF; border-radius:6px; font-size:14px; font-family:inherit; line-height:1.6; resize:vertical; color:#1C1917; box-sizing:border-box; }
textarea:focus { outline:none; border-color:#2d5a8e; box-shadow:0 0 0 3px #e8f0f9; }

/* ---- Notices ---- */
.iq-notice { padding:10px 14px; border-radius:5px; font-size:13px; margin-bottom:16px; }
.iq-notice--success { background:#d1e7dd; color:#0f5132; border:1px solid #a3cfbb; }
.iq-notice--error   { background:#f8d7da; color:#842029; border:1px solid #f1aeb5; }
.iq-notice--flex { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.iq-notice--flex > form { flex-shrink:0; }

/* ---- Previous replies section ---- */
.iq-previous { margin-top:28px; padding-top:20px; border-top:1px solid #E7E4DF; }
.iq-previous__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.iq-previous__label  { font-size:11px; font-weight:600; color:#aaa; text-transform:uppercase; letter-spacing:.06em; }
.iq-previous__jump   { font-size:12px; color:#aaa; text-decoration:none; }
.iq-previous__jump:hover { color:#44403C; text-decoration:underline; }

/* ---- Reopen / undo ---- */
.iq-reopen-note { margin:6px 0 0; font-size:11px; color:#aaa; line-height:1.4; }


/* ================================================================
   SUPPORT MODAL — theme-page overlay (support- prefix)
================================================================ */

@keyframes support-overlay-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes support-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes support-modal-in-mobile  { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes support-modal-out-mobile { from { transform: translateY(0);    opacity: 1; } to { transform: translateY(16px); opacity: 0; } }
@keyframes support-modal-in-desktop  { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1);    opacity: 1; } }
@keyframes support-modal-out-desktop { from { transform: scale(1);    opacity: 1; } to { transform: scale(0.96); opacity: 0; } }
@keyframes support-screen-in { from { opacity: 0; } to { opacity: 1; } }

.support-overlay {
	position: fixed;
	inset: 0;
	background: rgba(28, 25, 23, 0.55);
	backdrop-filter: blur(2px);
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
	animation: support-overlay-in 200ms ease both;
}
.support-overlay--closing {
	animation: support-overlay-out 200ms ease both;
}

@media (min-width: 640px) {
	.support-overlay {
		align-items: center;
		padding: 1.5rem;
	}
}

/* Shown briefly before a preset-topic open() while its FAQ data is still
   in flight — see SupportModal.jsx's onReady handler. Same overlay shell,
   centered spinner instead of the modal card, so opening never shows a
   'Loading...' screen that then re-animates once data lands. */
.support-overlay--preloading {
	align-items: center;
	justify-content: center;
}
@keyframes support-preload-spin { to { transform: rotate(360deg); } }
.support-preload-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: support-preload-spin 700ms linear infinite;
}

.support-modal {
	background: #fff;
	width: 100%;
	max-width: 560px;
	max-height: 92vh;
	border-radius: 12px 12px 0 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: support-modal-in-mobile 220ms ease both;
}
.support-overlay--closing .support-modal {
	animation: support-modal-out-mobile 200ms ease both;
}

@media (min-width: 640px) {
	.support-modal {
		border-radius: 12px;
		max-height: 85vh;
		animation: support-modal-in-desktop 200ms ease both;
	}
	.support-overlay--closing .support-modal {
		animation: support-modal-out-desktop 200ms ease both;
	}
}

.support-screen {
	animation: support-screen-in 160ms ease both;
}

.support-modal__header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #E7E4DF;
	flex-shrink: 0;
}
.support-modal__header > :last-child { justify-self: end; }

.support-modal__title {
	font-family: 'Lora', Georgia, serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: #1C1917;
}

.support-modal__back {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	background: none;
	border: none;
	font-size: 0.8125rem;
	color: #78716C;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	line-height: 1;
	white-space: nowrap;
}
.support-modal__back:hover { color: #1C1917; background: #f5f5f4; }

.support-modal__close {
	background: none;
	border: none;
	font-size: 1.1rem;
	color: #78716C;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	line-height: 1;
}
.support-modal__close:hover { color: #1C1917; background: #f5f5f4; }

.support-modal__body {
	overflow-y: auto;
	padding: 1.5rem;
	flex: 1;
}

/* ---- Loading ---- */
.support-loading {
	text-align: center;
	padding: 2rem;
	color: #78716C;
	font-size: 0.875rem;
}

/* ---- Topic screen ---- */
.support-topics__intro {
	color: #78716C;
	font-size: 0.9375rem;
	margin-bottom: 1.25rem;
}
.support-topics__intro b { color: #1C1917; }

.support-topic-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.support-topic-btn {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem;
	background: #FAFAF9;
	border: 1px solid #E7E4DF;
	border-radius: 8px;
	text-align: left;
	cursor: pointer;
	transition: border-color 150ms, background 150ms;
}
.support-topic-btn:hover {
	border-color: #2d5a8e;
	background: #e8f0f9;
}
.support-topic-btn--loading {
	border-color: #2d5a8e;
	background: #e8f0f9;
	opacity: 0.7;
	cursor: wait;
}
.support-topic-btn__name {
	font-weight: 600;
	font-size: 0.9375rem;
	color: #1C1917;
}
.support-topic-btn__count {
	font-size: 0.75rem;
	color: #78716C;
}

.support-topics__other {
	margin-top: 1rem;
	text-align: center;
}
.support-topics__other-btn {
	background: none;
	border: none;
	font-size: 0.875rem;
	color: #78716C;
	cursor: pointer;
	padding: 0.25rem 0;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.support-topics__other-btn:hover { color: #1C1917; }

/* ---- FAQ screen ---- */
.support-faq__list {
	margin-bottom: 1.5rem;
}

.support-faq-item {
	border-bottom: 1px solid #E7E4DF;
}
.support-faq-item:first-child { border-top: none; }
.support-faq-item:last-child { border-bottom: none; }

.support-faq-item__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 1rem;
	padding: 0.875rem 0;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #1C1917;
}
.support-faq-item__question:hover { color: #2d5a8e; }
.support-faq-item--open .support-faq-item__question { font-weight: 700; }
.support-faq-item__chevron {
	color: #78716C;
	flex-shrink: 0;
	transition: transform 220ms ease;
}
.support-faq-item__chevron--open { transform: rotate(180deg); }

.support-faq-item__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 250ms ease;
}
.support-faq-item--open .support-faq-item__answer-wrap {
	grid-template-rows: 1fr;
}
.support-faq-item__answer {
	overflow: hidden;
	min-height: 0;
}
.support-faq-item__answer-inner {
	padding: 0 0 1rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #44403C;
}
.support-faq-item__answer-inner p:last-child { margin-bottom: 0; }

.support-faq-item__vote {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	color: #78716C;
	justify-content: flex-end;
}
.support-vote-btn {
	background: #f5f5f4;
	border: 1px solid #E7E4DF;
	border-radius: 4px;
	padding: 0.2rem 0.6rem;
	font-size: 0.8125rem;
	cursor: pointer;
}
.support-vote-btn:hover { border-color: #2d5a8e; }
.support-vote-thanks { font-style: italic; }

.support-faq__empty { color: #78716C; }

.support-faq__cta {
	border-top: 1px solid #E7E4DF;
	padding-top: 1.25rem;
	text-align: center;
}
.support-faq__cta p {
	margin-bottom: 0.75rem;
	color: #78716C;
	font-size: 0.9375rem;
}

/* ---- Contact form ---- */
.support-contact-form { display: flex; flex-direction: column; gap: 1rem; }

.support-form-field { display: flex; flex-direction: column; gap: 0.375rem; }
.support-form-field label { font-size: 0.875rem; font-weight: 600; color: #1C1917; }
.support-form-field label span { color: #78716C; }

.support-form-field input,
.support-form-field textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid #E7E4DF;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-family: inherit;
	color: #1C1917;
	background: #fff;
	transition: border-color 150ms;
}
.support-form-field input:focus,
.support-form-field textarea:focus {
	outline: none;
	border-color: #2d5a8e;
	box-shadow: 0 0 0 3px #e8f0f9;
}

.support-form-error {
	padding: 0.75rem 1rem;
	background: #fff5f5;
	border: 1px solid #fca5a5;
	border-radius: 6px;
	font-size: 0.875rem;
	color: #b91c1c;
}

.support-form-field--consent { margin-top: 0.25rem; }
.support-form-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
	font-weight: 400;
}
.support-form-consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin-top: 0.1875rem;
	accent-color: #2d5a8e;
	cursor: pointer;
}
.support-form-consent span {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #78716C;
	font-weight: 400;
}
.support-form-consent span a {
	color: #2d5a8e;
	text-decoration: underline;
}

.support-form-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 0.5rem;
}

/* ---- Confirm screen ---- */
.support-confirm {
	text-align: center;
	padding: 1.5rem 0;
}
.support-confirm__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background: #d1fae5;
	color: #065f46;
	border-radius: 50%;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}
.support-confirm__heading {
	font-family: 'Lora', Georgia, serif;
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}
.support-confirm__body {
	color: #78716C;
	margin-bottom: 1.5rem;
}

/* ---- Inline / embedded mode ---- */
.support-embed {
	width: 100%;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}
.support-embed .support-modal {
	max-width: 100%;
	max-height: none;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	animation: none;
}
.support-embed .support-modal__header--inline {
	background: transparent;
	border-bottom: 2px solid #E7E4DF;
	padding-left: 0;
	padding-right: 0;
}
.support-embed .support-modal__title {
	font-size: 1.125rem;
}
.support-embed .support-modal__reset {
	background: none;
	border: none;
	font-size: 1rem;
	color: #78716C;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}
.support-embed .support-modal__reset:hover {
	color: #1C1917;
}
.support-embed .support-modal__body {
	padding-left: 0;
	padding-right: 0;
}

/* FAQ SEO page — [omorphos_faq] shortcode, server-rendered (see inc/faq-seo.php) */
.faq-seo {
	max-width: 720px;
	margin: 0 auto;
}
.faq-seo__nav {
	margin-bottom: 2rem;
	padding: 1rem 1.25rem;
	background: #FAFAF9;
	border: 1px solid #E7E4DF;
	border-radius: 6px;
}
.faq-seo__nav-title {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #78716C;
}
.faq-seo__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 2rem;
}
.faq-seo__nav-item {
	break-inside: avoid;
	padding: 0.25rem 0;
}
.faq-seo__nav-item a {
	color: #2d5a8e;
	text-decoration: none;
}
.faq-seo__nav-item a:hover {
	text-decoration: underline;
}
@media (max-width: 480px) {
	.faq-seo__nav-list {
		columns: 1;
	}
}
.faq-seo__topic {
	margin-bottom: 2.5rem;
	/* .site-header is position: sticky (theme style.css) with a variable
	   height (logo + title + wrapping nav) — no fixed px value to read from,
	   so this offset is a generous estimate sized to clear it comfortably
	   rather than an exact measurement. */
	scroll-margin-top: 9rem;
}
.faq-seo__topic-title {
	font-size: 1.375rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #E7E4DF;
}
.faq-seo__item {
	margin-bottom: 1.5rem;
}
.faq-seo__question {
	font-size: 1.0625rem;
	margin-bottom: 0.375rem;
	color: #1C1917;
}
.faq-seo__edit-link {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #2d5a8e;
	background: #e8f0f9;
	border-radius: 4px;
	padding: 0.125rem 0.4rem;
	text-decoration: none;
	vertical-align: middle;
}
.faq-seo__edit-link:hover {
	background: #d5e5f5;
}
.faq-seo__answer {
	color: #44403C;
	line-height: 1.6;
}