/* Cool Coming Soon — admin styles. */
.ccs-h1 .button { vertical-align: middle; margin-left: 8px; }

/* Two-column layout: settings + sticky support sidebar */
.ccs-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-top: 16px; }
.ccs-main { flex: 1 1 0; min-width: 0; }
.ccs-side { flex: 0 0 280px; width: 280px; }
.ccs-sidebox { position: sticky; top: 46px; margin: 0; }
.ccs-sidebox .inside { padding: 2px 16px 12px; }
.ccs-sidebox h3 { text-align: center; font-size: 15px; margin: 16px 0 8px; }
.ccs-sidebox p { margin: 8px 0; }
.ccs-sidebox ul { margin: 8px 0; }
.ccs-sidebox li { list-style: disclosure-closed; margin-left: 22px; margin-bottom: 5px; }
.ccs-sidebox hr { width: 72%; margin: 18px auto; border: 0; border-top: 1px solid #e2e4e7; }
.ccs-developedby { text-align: center; margin: 14px 0 4px; font-size: 13px; }
@media (max-width: 1100px) { .ccs-side { flex-basis: 100%; width: 100%; } .ccs-sidebox { position: static; } }
.ccs-section { margin: 26px 0 4px; padding-bottom: 6px; border-bottom: 1px solid #e2e4e7; font-size: 15px; }

.ccs-panel {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	padding: 4px 20px 16px;
	margin-bottom: 20px;
}
.ccs-panel h2 { margin-top: 18px; }
.ccs-switch { display: inline-flex; align-items: center; gap: 8px; }

/* Layout cards */
.ccs-cards { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; }
.ccs-card-opt { cursor: pointer; }
.ccs-card-opt input { position: absolute; opacity: 0; }
.ccs-card-opt-body {
	display: block; width: 200px; padding: 14px;
	border: 2px solid #dcdcde; border-radius: 10px; background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.ccs-card-opt input:checked + .ccs-card-opt-body { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; }
.ccs-card-opt-body strong { display: block; margin: 8px 0 2px; }
.ccs-thumb { display: block; height: 70px; border-radius: 6px; background: #1d2230; position: relative; overflow: hidden; }
.ccs-thumb-centered::after { content: ""; position: absolute; inset: 18px 40px; background: #4f8cff; border-radius: 4px; }
.ccs-thumb-split { background: linear-gradient(90deg, #1d2230 50%, #4f8cff 50%); }
.ccs-thumb-fullbg { background: linear-gradient(135deg, #4f8cff, #1d2230); }
.ccs-thumb-fullbg::after { content: ""; position: absolute; inset: 22px 30px; background: rgba(255,255,255,.85); border-radius: 4px; }

/* Style preset swatches */
.ccs-style-thumb { display: flex; gap: 6px; height: 70px; align-items: center; justify-content: center; border-radius: 6px; background: #1b2030; }
.ccs-style-thumb i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); }

/* Element toggles */
.ccs-toggles { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 12px 0; }
.ccs-toggle { display: inline-flex; align-items: center; gap: 8px; min-width: 200px; }

/* Inline forms / links table */
.ccs-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; }
.ccs-inline-form .button { margin: 0 !important; }
.ccs-links { width: 100%; margin-top: 10px; }
.ccs-links .ccs-link-input { width: 230px; max-width: 100%; font-size: 11px; }
.ccs-actions form { margin: 0 !important; }
.ccs-delete { color: #b32d2e !important; }

/* Pills */
.ccs-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.7; background: #f0f0f1; color: #50575e; }
.ccs-pill--ok { background: #edfaef; color: #1a7f37; }
.ccs-pill--warn { background: #fcf0e4; color: #984b0e; }
.ccs-empty { color: #646970; font-style: italic; }