/* exakt Support — Frontend styles */

.exakt-support-frontend {
	max-width: 760px;
	margin: 24px auto;
	font-family: var(--exakt-font-body, sans-serif);
	color: var(--exakt-text, #333);
}

.exakt-support-login-required {
	text-align: center;
	padding: 24px;
	background: var(--exakt-bg-light, #f6f7f7);
	border-radius: 8px;
	border: 1px solid var(--exakt-border, #ddd);
}

/* ---- Tabs ---- */
.exakt-support-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid var(--exakt-border, #ddd);
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.exakt-support-tab {
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 10px 18px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	color: var(--exakt-text-light, #888);
	font-family: inherit;
}
.exakt-support-tab:hover {
	color: var(--exakt-primary, #0073aa);
}
.exakt-support-tab.is-active {
	color: var(--exakt-primary, #0073aa);
	border-bottom-color: var(--exakt-primary, #0073aa);
}
.exakt-support-tab-panel.is-hidden { display: none; }

/* ---- Form card ---- */
.exakt-support-form-card {
	background: var(--exakt-white, #fff);
	border: 1px solid var(--exakt-border, #ddd);
	border-radius: 8px;
	padding: 24px;
}
.exakt-support-form-card h3 {
	margin: 0 0 16px;
	font-family: var(--exakt-font-heading, sans-serif);
}
.exakt-support-form-card p {
	margin: 0 0 14px;
}
.exakt-support-form-card label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 14px;
}
.exakt-support-required { color: var(--exakt-sale, #e53935); }

.exakt-support-form-card input[type="text"],
.exakt-support-form-card select,
.exakt-support-form-card textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--exakt-border, #ccc);
	border-radius: 4px;
	font-size: 15px;
	font-family: inherit;
	background: var(--exakt-white, #fff);
	color: var(--exakt-text, #333);
	box-sizing: border-box;
}
.exakt-support-form-card textarea { resize: vertical; min-height: 120px; }

.exakt-support-form-card input:focus,
.exakt-support-form-card select:focus,
.exakt-support-form-card textarea:focus {
	outline: 2px solid var(--exakt-primary, #0073aa);
	outline-offset: -1px;
	border-color: var(--exakt-primary, #0073aa);
}

.exakt-support-form-actions { margin-top: 18px; }

.exakt-support-btn {
	display: inline-block;
	padding: 10px 22px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 15px;
	font-weight: var(--exakt-font-weight-button, 600);
	font-family: inherit;
	text-decoration: none;
	transition: background 0.15s, opacity 0.15s;
}
.exakt-support-btn-primary {
	background: var(--exakt-primary, #0073aa);
	color: var(--exakt-white, #fff);
}
.exakt-support-btn-primary:hover {
	background: var(--exakt-primary-light, #005a87);
}
.exakt-support-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.exakt-support-btn-link {
	background: transparent;
	color: var(--exakt-sale, #e53935);
	padding: 4px 8px;
	font-size: 13px;
	text-decoration: underline;
}

.exakt-support-form-message {
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: 4px;
	display: none;
}
.exakt-support-form-message.is-success {
	display: block;
	background: color-mix(in srgb, var(--exakt-success, #4caf50) 15%, var(--exakt-white, #fff));
	color: var(--exakt-success, #2e7d32);
	border: 1px solid var(--exakt-success, #4caf50);
}
.exakt-support-form-message.is-error {
	display: block;
	background: color-mix(in srgb, var(--exakt-sale, #e53935) 12%, var(--exakt-white, #fff));
	color: var(--exakt-sale, #c62828);
	border: 1px solid var(--exakt-sale, #e53935);
}

/* ---- My requests list ---- */
.exakt-support-mine h3 {
	margin: 0 0 16px;
	font-family: var(--exakt-font-heading, sans-serif);
}
.exakt-support-list { list-style: none; margin: 0; padding: 0; }
.exakt-support-item {
	background: var(--exakt-white, #fff);
	border: 1px solid var(--exakt-border, #ddd);
	border-radius: 8px;
	padding: 16px 18px;
	margin-bottom: 12px;
}
.exakt-support-item-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.exakt-support-item-title {
	font-weight: 600;
	font-size: 16px;
}
.exakt-support-item-meta {
	font-size: 13px;
	color: var(--exakt-text-light, #888);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 8px;
}
.exakt-support-item-body {
	font-size: 14px;
	line-height: 1.5;
}
.exakt-support-item-body p { margin: 0; }
.exakt-support-item-actions {
	margin-top: 10px;
	border-top: 1px solid var(--exakt-border, #eee);
	padding-top: 8px;
}

.exakt-support-status, .exakt-support-priority {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
}
.exakt-support-status.status-new          { background: color-mix(in srgb, var(--exakt-primary, #2271b1) 15%, var(--exakt-white, #fff)); color: var(--exakt-primary, #2271b1); }
.exakt-support-status.status-under-review { background: var(--exakt-bg-light, #f0f0f1); color: var(--exakt-text, #2c3338); }
.exakt-support-status.status-planned      { background: color-mix(in srgb, var(--exakt-primary-light, #72aee6) 25%, var(--exakt-white, #fff)); color: var(--exakt-primary, #2271b1); }
.exakt-support-status.status-in-progress  { background: color-mix(in srgb, var(--exakt-warning, #dba617) 25%, var(--exakt-white, #fff)); color: var(--exakt-warning, #996800); }
.exakt-support-status.status-completed    { background: color-mix(in srgb, var(--exakt-success, #4caf50) 20%, var(--exakt-white, #fff)); color: var(--exakt-success, #2e7d32); }
.exakt-support-status.status-declined     { background: color-mix(in srgb, var(--exakt-sale, #e53935) 18%, var(--exakt-white, #fff)); color: var(--exakt-sale, #c62828); }

.exakt-support-priority.priority-low    { background: var(--exakt-bg-light, #f0f0f1); color: var(--exakt-text-light, #666); }
.exakt-support-priority.priority-medium { background: color-mix(in srgb, var(--exakt-primary, #2271b1) 12%, var(--exakt-white, #fff)); color: var(--exakt-primary, #2271b1); }
.exakt-support-priority.priority-high   { background: color-mix(in srgb, var(--exakt-sale, #e53935) 15%, var(--exakt-white, #fff)); color: var(--exakt-sale, #c62828); }

.exakt-support-empty {
	background: var(--exakt-bg-light, #f6f7f7);
	border-radius: 6px;
	padding: 20px;
	text-align: center;
	color: var(--exakt-text-light, #888);
}

.exakt-support-loading {
	text-align: center;
	padding: 20px;
	color: var(--exakt-text-light, #666);
	font-style: italic;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
	.exakt-support-frontend { margin: 12px; }
	.exakt-support-form-card { padding: 16px; }
	.exakt-support-tab { padding: 8px 12px; font-size: 14px; flex: 1; text-align: center; }
	.exakt-support-item-head { flex-direction: column; align-items: flex-start; }
	.exakt-support-btn { width: 100%; text-align: center; }
}