/* ═══════════════════════════════════════════════════════════════
   IdeaPool Submit — Public Styles  v3.01
   Works standalone or inherits IdeaPool theme CSS variables.
   ═══════════════════════════════════════════════════════════════ */

:root {
	--ip-blue:    #1565c0;
	--ip-blue-d:  #0d47a1;
	--ip-teal:    #00bcd4;
	--ip-gold:    #ffc107;
	--ip-navy:    #0a1628;
	--ip-light:   #f5f7fa;
	--ip-border:  #e8ecf0;
	--ip-text:    #1a1a2e;
	--ip-muted:   #607d8b;
	--ip-radius:  12px;
	--ip-shadow:  0 4px 24px rgba(21,101,192,.12);
	--ip-grad:    linear-gradient(135deg, var(--ip-navy), var(--ip-blue));
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.ips-submit-wrap,
.ips-ideas-wrap {
	font-family: Inter, system-ui, sans-serif;
	color: var(--ip-text);
	max-width: 860px;
	margin: 0 auto;
}

/* ── Notices ─────────────────────────────────────────────────── */
.ips-notice {
	padding: 14px 18px;
	border-radius: var(--ip-radius);
	margin-bottom: 20px;
	font-weight: 500;
	line-height: 1.5;
}
.ips-notice--success { background: #e8f5e9; color: #2e7d32; border-left: 4px solid #43a047; }
.ips-notice--error   { background: #fce4ec; color: #c62828; border-left: 4px solid #e53935; }
.ips-notice--info    { background: #e3f2fd; color: #1565c0; border-left: 4px solid #1e88e5; }

/* ── Login gate ──────────────────────────────────────────────── */
.ips-login-gate {
	text-align: center;
	padding: 60px 32px;
	background: var(--ip-light);
	border-radius: var(--ip-radius);
	border: 2px dashed var(--ip-border);
}
.ips-login-gate__icon { font-size: 3rem; margin-bottom: 16px; }
.ips-login-gate h3    { font-size: 1.4rem; margin-bottom: 8px; }
.ips-login-gate p     { color: var(--ip-muted); margin-bottom: 24px; }

/* ── Submit header ───────────────────────────────────────────── */
.ips-submit-header {
	background: var(--ip-grad);
	color: #fff;
	border-radius: var(--ip-radius);
	padding: 32px 36px;
	margin-bottom: 32px;
}
.ips-submit-header__title { margin: 0 0 8px; font-size: 1.6rem; color: #fff; }
.ips-submit-header__sub   { margin: 0; opacity: .88; font-size: .95rem; color: #fff; }

/* ── Form ────────────────────────────────────────────────────── */
.ips-form {
	background: #fff;
	border: 1px solid var(--ip-border);
	border-radius: var(--ip-radius);
	padding: 32px;
	box-shadow: var(--ip-shadow);
}

.ips-field { margin-bottom: 22px; }
.ips-field--full { grid-column: 1 / -1; }

.ips-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
@media ( max-width: 600px ) {
	.ips-row { grid-template-columns: 1fr; }
}

.ips-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: .9rem;
	color: var(--ip-navy);
}
.ips-required { color: #e53935; }
.ips-field-hint { display: block; font-size: .8rem; color: var(--ip-muted); margin-top: 5px; }

.ips-input,
.ips-select,
.ips-textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid var(--ip-border);
	border-radius: 8px;
	font-size: .95rem;
	font-family: inherit;
	color: var(--ip-text);
	background: #fafcff;
	transition: border-color .2s, box-shadow .2s;
	box-sizing: border-box;
}
.ips-input:focus,
.ips-select:focus,
.ips-textarea:focus {
	border-color: var(--ip-blue);
	box-shadow: 0 0 0 3px rgba(21,101,192,.12);
	outline: none;
	background: #fff;
}
.ips-textarea { resize: vertical; min-height: 90px; }

/* ── Category dropdown — accent ──────────────────────────────── */
.ips-select[id="ip_category"] {
	border-color: var(--ip-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231565c0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
	appearance: none;
	-webkit-appearance: none;
}

/* ── Tag chip field ──────────────────────────────────────────── */
.ips-tag-field {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding: 8px 10px;
	border: 1.5px solid var(--ip-border);
	border-radius: 8px;
	background: #fafcff;
	cursor: text;
	min-height: 46px;
	transition: border-color .2s, box-shadow .2s;
	box-sizing: border-box;
}
.ips-tag-field:focus-within {
	border-color: var(--ip-blue);
	box-shadow: 0 0 0 3px rgba(21,101,192,.12);
	background: #fff;
}

.ips-tag-chips { display: contents; }

.ips-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(21,101,192,.1);
	color: var(--ip-blue);
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .82rem;
	font-weight: 600;
	white-space: nowrap;
	animation: ips-chip-pop .15s ease-out;
}
.ips-chip__remove {
	background: none;
	border: none;
	padding: 0 0 0 4px;
	cursor: pointer;
	color: var(--ip-blue);
	font-size: .9rem;
	line-height: 1;
	opacity: .7;
	transition: opacity .15s;
}
.ips-chip__remove:hover { opacity: 1; }

@keyframes ips-chip-pop {
	from { transform: scale(.7); opacity: 0; }
	to   { transform: scale(1);  opacity: 1; }
}

.ips-tag-input {
	flex: 1;
	min-width: 140px;
	border: none;
	outline: none;
	background: transparent;
	font-size: .9rem;
	font-family: inherit;
	color: var(--ip-text);
	padding: 2px 4px;
}

/* ── Tag suggestions ─────────────────────────────────────────── */
.ips-tag-suggestions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
}
.ips-tag-suggestions__label {
	font-size: .78rem;
	color: var(--ip-muted);
	font-weight: 600;
	margin-right: 2px;
}
.ips-tag-suggestion-btn {
	background: var(--ip-light);
	border: 1.5px solid var(--ip-border);
	border-radius: 20px;
	color: var(--ip-navy);
	font-size: .78rem;
	font-weight: 500;
	padding: 3px 11px;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s, border-color .15s, color .15s;
}
.ips-tag-suggestion-btn:hover {
	background: rgba(21,101,192,.1);
	border-color: var(--ip-blue);
	color: var(--ip-blue);
}
.ips-tag-suggestion-btn--used { opacity: .38; cursor: default; pointer-events: none; }

/* ── Form actions ────────────────────────────────────────────── */
.ips-form__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--ip-border);
}
.ips-form__disclaimer { font-size: .82rem; color: var(--ip-muted); margin: 0; }

/* ── Buttons ─────────────────────────────────────────────────── */
.ips-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border: none;
	border-radius: 8px;
	font-family: inherit;
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	transition: background .2s, transform .1s, box-shadow .2s;
	text-decoration: none;
}
.ips-btn:active { transform: translateY(1px); }
.ips-btn--primary { background: var(--ip-blue); color: #fff; }
.ips-btn--primary:hover { background: var(--ip-blue-d); box-shadow: 0 4px 14px rgba(21,101,192,.35); }
.ips-btn--secondary { background: var(--ip-light); color: var(--ip-blue); border: 1.5px solid var(--ip-border); }
.ips-btn--secondary:hover { background: #e3f2fd; }
.ips-btn--gold { background: var(--ip-gold); color: var(--ip-navy); }
.ips-btn--gold:hover { filter: brightness(1.05); box-shadow: 0 4px 14px rgba(255,193,7,.35); }
.ips-btn--lg  { padding: 13px 30px; font-size: 1rem; border-radius: 10px; }
.ips-btn--sm  { padding: 6px 14px;  font-size: .82rem; border-radius: 6px; }
.ips-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ── Card action buttons (vote + comment) ────────────────────── */
.ips-card__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ips-vote-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	background: transparent;
	border: 1.5px solid var(--ip-border);
	border-radius: 20px;
	font-family: inherit;
	font-size: .85rem;
	font-weight: 600;
	color: var(--ip-muted);
	cursor: pointer;
	transition: all .2s;
}
.ips-vote-btn:hover:not([disabled]) {
	border-color: var(--ip-blue);
	color: var(--ip-blue);
	background: rgba(21,101,192,.06);
}
.ips-vote-btn--voted { background: rgba(21,101,192,.08); border-color: var(--ip-blue); color: var(--ip-blue); }
.ips-vote-btn--loading { opacity: .6; }

.ips-comment-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	background: transparent;
	border: 1.5px solid var(--ip-border);
	border-radius: 20px;
	font-family: inherit;
	font-size: .85rem;
	font-weight: 600;
	color: var(--ip-muted);
	cursor: pointer;
	transition: all .2s;
}
.ips-comment-toggle:hover,
.ips-comment-toggle--open {
	border-color: var(--ip-teal);
	color: #006064;
	background: rgba(0,188,212,.06);
}

/* ── Comments panel ──────────────────────────────────────────── */
.ips-comments {
	padding: 16px 0 4px;
	border-top: 1px solid var(--ip-border);
	margin-top: 4px;
}

.ips-comments__list { margin-bottom: 12px; }

.ips-comments__empty,
.ips-comments__loading {
	font-size: .85rem;
	color: var(--ip-muted);
	font-style: italic;
	padding: 4px 0;
}

/* Single comment */
.ips-comment {
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
	animation: ips-chip-pop .18s ease-out;
}
.ips-comment__avatar {
	border-radius: 50%;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
}
.ips-comment__body { flex: 1; }
.ips-comment__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.ips-comment__author { font-size: .82rem; color: var(--ip-navy); }
.ips-comment__date   { font-size: .75rem; color: var(--ip-muted); }
.ips-comment__text   { margin: 0; font-size: .85rem; color: var(--ip-text); line-height: 1.55; }
.ips-comment__delete {
	background: none;
	border: none;
	padding: 0 2px;
	cursor: pointer;
	color: #e53935;
	font-size: .88rem;
	opacity: .6;
	line-height: 1;
	transition: opacity .15s;
	margin-left: auto;
}
.ips-comment__delete:hover { opacity: 1; }

/* Comment form */
.ips-comment-form { margin-top: 10px; }
.ips-comment-form__row {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}
.ips-comment-input {
	flex: 1;
	padding: 8px 12px;
	border: 1.5px solid var(--ip-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: .88rem;
	resize: vertical;
	min-height: 40px;
	box-sizing: border-box;
	transition: border-color .2s, box-shadow .2s;
}
.ips-comment-input:focus {
	border-color: var(--ip-blue);
	box-shadow: 0 0 0 3px rgba(21,101,192,.1);
	outline: none;
}

.ips-comments__login-prompt {
	font-size: .85rem;
	color: var(--ip-muted);
	margin: 8px 0 0;
}
.ips-comments__login-prompt a { color: var(--ip-blue); }

/* ── Filters bar ─────────────────────────────────────────────── */
.ips-filters {
	background: #fff;
	border: 1px solid var(--ip-border);
	border-radius: var(--ip-radius);
	padding: 18px 20px;
	margin-bottom: 24px;
}
.ips-filters__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.ips-filters__search { flex: 1; min-width: 180px; }
.ips-filters__search .ips-input { margin: 0; }
.ips-filters__select { min-width: 140px; }

/* ── Idea grid ───────────────────────────────────────────────── */
.ips-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: 20px;
	margin-bottom: 32px;
}

/* ── Idea card ───────────────────────────────────────────────── */
.ips-card {
	background: #fff;
	border: 1px solid var(--ip-border);
	border-radius: var(--ip-radius);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: box-shadow .2s, transform .2s;
	position: relative;
}
.ips-card:hover { box-shadow: var(--ip-shadow); transform: translateY(-2px); }
.ips-card--featured { border-color: var(--ip-gold); background: linear-gradient( 135deg, #fffde7 0%, #fff 60% ); }

.ips-card__badge {
	position: absolute;
	top: -10px;
	right: 16px;
	background: var(--ip-gold);
	color: var(--ip-navy);
	padding: 3px 12px;
	border-radius: 20px;
	font-size: .78rem;
	font-weight: 700;
}

.ips-card__meta    { display: flex; flex-wrap: wrap; gap: 6px; }
.ips-card__title   { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.ips-card__title a { color: var(--ip-navy); text-decoration: none; }
.ips-card__title a:hover { color: var(--ip-blue); }

.ips-card__excerpt { font-size: .87rem; color: var(--ip-muted); line-height: 1.55; margin: 0; flex: 1; }

.ips-card__tags    { display: flex; flex-wrap: wrap; gap: 5px; }

.ips-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--ip-border);
}
.ips-card__author {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .82rem;
	color: var(--ip-muted);
}
.ips-card__avatar { border-radius: 50%; width: 28px; height: 28px; }

/* ── Tags ────────────────────────────────────────────────────── */
.ips-tag {
	display: inline-block;
	background: rgba(21,101,192,.1);
	color: var(--ip-blue);
	padding: 2px 10px;
	border-radius: 20px;
	font-size: .77rem;
	font-weight: 600;
}
.ips-tag--stage  { background: rgba(0,188,212,.1); color: #006064; }
.ips-tag--small  { font-size: .72rem; padding: 1px 8px; background: rgba(21,101,192,.06); color: var(--ip-muted); }

/* ── Pagination ──────────────────────────────────────────────── */
.ips-pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 24px 0; }
.ips-page-btn {
	display: inline-block;
	padding: 7px 14px;
	border: 1.5px solid var(--ip-border);
	border-radius: 7px;
	font-size: .88rem;
	text-decoration: none;
	color: var(--ip-blue);
	transition: all .15s;
}
.ips-page-btn:hover,
.ips-page-btn--active { background: var(--ip-blue); color: #fff; border-color: var(--ip-blue); }

/* ── Empty state ─────────────────────────────────────────────── */
.ips-empty { text-align: center; padding: 60px 32px; color: var(--ip-muted); }
.ips-empty__icon { font-size: 3rem; margin-bottom: 16px; }
.ips-empty h3 { margin-bottom: 8px; font-size: 1.2rem; color: var(--ip-navy); }
.ips-empty p  { margin-bottom: 24px; }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes ips-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
.ips-btn--loading .ips-btn__spinner {
	display: inline-block !important;
	animation: ips-spin .6s linear infinite;
}

/* ── Vote / login tips ───────────────────────────────────────── */
.ips-login-tip, .ips-vote-tip {
	display: inline-block;
	margin-left: 6px;
	font-size: .8rem;
	color: var(--ip-muted);
}
.ips-login-tip a { color: var(--ip-blue); }

/* ── Char counter ────────────────────────────────────────────── */
.ips-char-counter { display: inline-block; float: right; }