/* Community plugin components. Colours come from the theme's CSS variables with fallbacks. */

.skct-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.skct-notice { padding: 14px 18px; border-radius: 10px; margin: 0 0 20px; border-left: 5px solid; background: #fff; }
.skct-notice ul { margin: 0; padding-left: 18px; }
.skct-notice--info { border-color: var(--skct-primary, #0f766e); background: var(--skct-primary-50, #ecfdf8); }
.skct-notice--success { border-color: #15803d; background: #f0fdf4; }
.skct-notice--error { border-color: #b91c1c; background: #fef2f2; }

.skct-form .skct-field { margin: 0 0 18px; }
.skct-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.skct-form .skct-inline, .skct-form .skct-check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.skct-form .skct-check input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
.skct-form input[type=text], .skct-form input[type=password], .skct-form select, .skct-form textarea {
	width: 100%; padding: 12px 14px; font: inherit; border: 1px solid var(--skct-border, #cbd5e1); border-radius: 10px; background: #fff; box-sizing: border-box;
}
.skct-form input:focus, .skct-form select:focus, .skct-form textarea:focus { outline: 3px solid var(--skct-primary-100, #99f6e4); border-color: var(--skct-primary, #0f766e); }
.skct-form small { display: block; color: var(--skct-muted, #64748b); margin-top: 6px; }
.skct-form .req { color: #b91c1c; }

.skct-btn {
	display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer;
	border: 2px solid var(--skct-primary, #0f766e); color: var(--skct-primary, #0f766e); background: #fff; text-decoration: none;
}
.skct-btn:hover { background: var(--skct-primary-50, #ecfdf8); }
.skct-btn--primary { background: var(--skct-primary, #0f766e); color: #fff; }
.skct-btn--primary:hover { background: var(--skct-primary-700, #115e59); color: #fff; }

.skct-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.skct-preview img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--skct-border, #cbd5e1); }

.skct-like {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; cursor: pointer; font: inherit;
	border: 2px solid var(--skct-accent, #e76f51); color: var(--skct-accent, #e76f51); background: #fff; transition: transform .1s;
}
.skct-like svg { fill: none; stroke: currentColor; stroke-width: 2; }
.skct-like.is-liked { background: var(--skct-accent, #e76f51); color: #fff; }
.skct-like.is-liked svg { fill: currentColor; }
.skct-like:active { transform: scale(.96); }
.skct-like__count { font-weight: 700; }

.skct-lang { display: inline-flex; border: 1px solid var(--skct-border, #cbd5e1); border-radius: 999px; overflow: hidden; }
.skct-lang a { padding: 4px 10px; text-decoration: none; color: inherit; font-weight: 600; font-size: .85em; }
.skct-lang a.is-active { background: var(--skct-primary, #0f766e); color: #fff; }

.skct-banner { background: #fff7ed; border-bottom: 1px solid #fed7aa; color: #7c2d12; font-size: .95rem; }
.skct-banner__inner { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; gap: 12px; align-items: center; }
.skct-banner__inner p { margin: 0; flex: 1; }
.skct-banner__inner a { color: inherit; font-weight: 600; }
.skct-banner__icon { flex: none; }
.skct-banner__close { border: 1px solid #fdba74; background: #fff; color: #7c2d12; border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; white-space: nowrap; }

.skct-post-disclaimer { margin-top: 32px; padding: 14px 18px; background: #fff7ed; border-left: 5px solid #fb923c; border-radius: 8px; font-size: .92rem; color: #7c2d12; }

.skct-profile { display: grid; gap: 24px; }
.skct-card { background: #fff; border: 1px solid var(--skct-border, #e2e8f0); border-radius: 16px; padding: 24px; }
.skct-card h2 { margin-top: 0; font-size: 1.3rem; }
.skct-avatar-field { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 18px; }
.skct-avatar-field img.avatar { border-radius: 50%; width: 96px; height: 96px; object-fit: cover; }

.skct-table-wrap { overflow-x: auto; }
.skct-table { width: 100%; border-collapse: collapse; }
.skct-table th, .skct-table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--skct-border, #e2e8f0); }
.skct-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .85em; background: #f1f5f9; }
.skct-status--publish { background: #dcfce7; color: #166534; }
.skct-status--pending { background: #fef9c3; color: #854d0e; }

@media (max-width: 640px) {
	.skct-banner__inner { flex-direction: column; align-items: flex-start; }
	.skct-avatar-field { flex-direction: column; }
}