/* Contact Ticket Integration — front end.
 * Inherits your theme's fonts. Adjust the variables below to match your brand. */
.cti {
	--cti-accent: #2f5bea;
	--cti-accent-text: #fff;
	--cti-border: rgba(0, 0, 0, 0.15);
	--cti-muted: rgba(0, 0, 0, 0.6);
	--cti-surface: rgba(0, 0, 0, 0.03);
	--cti-radius: 8px;
	max-width: 760px;
	margin: 2em 0;
}

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

/* Tabs */
.cti-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--cti-border); margin-bottom: 1.5em; flex-wrap: wrap; }
.cti-tab {
	background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
	padding: 0.7em 1em; font: inherit; color: var(--cti-muted); cursor: pointer;
}
.cti-tab:hover { color: inherit; }
.cti-tab.is-active { color: inherit; border-bottom-color: var(--cti-accent); font-weight: 600; }
.cti-panel[hidden] { display: none; }

/* Form */
.cti-form { margin: 0; }
.cti-row { display: flex; gap: 1em; flex-wrap: wrap; }
.cti-row > .cti-field { flex: 1 1 220px; }
.cti-row > .cti-field--wide { flex: 3 1 300px; }
.cti-row > .cti-field--narrow { flex: 1 1 140px; }
.cti-field { margin: 0 0 1em; }
.cti-field label { display: block; font-weight: 600; margin-bottom: 0.35em; font-size: 0.95em; }
.cti-req { color: #c0392b; }
.cti-field input,
.cti-field select,
.cti-field textarea {
	width: 100%; max-width: 100%; padding: 0.65em 0.8em; font: inherit;
	border: 1px solid var(--cti-border); border-radius: var(--cti-radius); background: #fff; color: #1d1d1d;
}
.cti-field textarea { resize: vertical; min-height: 7em; }
.cti-field input:focus,
.cti-field select:focus,
.cti-field textarea:focus { outline: 2px solid var(--cti-accent); outline-offset: 1px; border-color: transparent; }
.cti-intro { color: var(--cti-muted); margin-top: 0; }
.cti-actions { margin: 0.5em 0 0; }
.cti-button {
	display: inline-block; background: var(--cti-accent); color: var(--cti-accent-text);
	border: 0; border-radius: var(--cti-radius); padding: 0.75em 1.4em; font: inherit; font-weight: 600; cursor: pointer;
}
.cti-button:hover { filter: brightness(1.08); }
.cti-button[disabled] { opacity: 0.6; cursor: wait; }

/* Honeypot — hidden from people, visible to bots */
.cti-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Notices */
.cti-notice { padding: 0.9em 1.1em; border-radius: var(--cti-radius); margin-bottom: 1.25em; border-left: 4px solid; }
.cti-notice ul { margin: 0; padding-left: 1.2em; }
.cti-notice strong { display: block; margin-bottom: 0.25em; }
.cti-notice--success { background: #e9f7ef; border-color: #27ae60; color: #1e5631; }
.cti-notice--error { background: #fdecea; border-color: #c0392b; color: #7b1e14; }
.cti-notice code { background: rgba(0,0,0,0.07); padding: 0.1em 0.35em; border-radius: 4px; }

/* Ticket view */
.cti-ticket__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; margin-bottom: 1.25em; flex-wrap: wrap; }
.cti-ticket__number { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; color: var(--cti-muted); }
.cti-ticket__title { margin: 0.15em 0 0.2em; }
.cti-ticket__meta { color: var(--cti-muted); font-size: 0.9em; }

.cti-status { display: inline-block; padding: 0.3em 0.8em; border-radius: 999px; font-size: 0.85em; font-weight: 600; white-space: nowrap; }
.cti-status--open { background: #e8eefe; color: #1f45c4; }
.cti-status--in_progress { background: #fff4e0; color: #9a5b00; }
.cti-status--awaiting { background: #f3e8fd; color: #6b2fa8; }
.cti-status--resolved { background: #e9f7ef; color: #1e7a43; }
.cti-status--closed { background: #eee; color: #555; }

.cti-thread { list-style: none; margin: 0 0 1.5em; padding: 0; }
.cti-msg { border: 1px solid var(--cti-border); border-radius: var(--cti-radius); padding: 0.9em 1.1em; margin: 0 0 0.75em; }
.cti-msg--staff { background: var(--cti-surface); border-left: 3px solid var(--cti-accent); }
.cti-msg__head { display: flex; gap: 0.6em; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.4em; }
.cti-msg__head time { color: var(--cti-muted); font-size: 0.85em; margin-left: auto; }
.cti-msg__body p:last-child { margin-bottom: 0; }
.cti-badge { background: var(--cti-accent); color: var(--cti-accent-text); font-size: 0.72em; padding: 0.15em 0.55em; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.cti-closed { padding: 0.9em 1.1em; background: var(--cti-surface); border-radius: var(--cti-radius); }
.cti-back { margin-top: 1.5em; font-size: 0.95em; }