/**
 * RobotsFight Core - Submissions Styles
 */

/* ---- Submit layout ------------------------------------------------------- */
.rf-submit-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 40px;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
}

.rf-submit-aside {
	position: sticky;
	top: 110px;
}

.rf-submit-title {
	margin: 6px 0 10px;
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	line-height: 1.1;
	color: var(--rf-text, #eef1ff);
}

.rf-submit-intro {
	margin: 0 0 26px;
	color: var(--rf-muted, #9aa3c7);
	font-size: 1.02rem;
	line-height: 1.6;
}

.rf-submit-steps {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 16px;
	counter-reset: none;
}

.rf-submit-steps li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	font-size: 0.95rem;
	color: var(--rf-muted, #9aa3c7);
	line-height: 1.5;
}

.rf-submit-steps strong {
	color: var(--rf-text, #eef1ff);
}

.rf-step-num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--rf-grad, linear-gradient(135deg, #ff3d71, #8b5cf6 55%, #22d3ee));
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35);
}

.rf-submit-note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	border-radius: var(--rf-radius, 16px);
	background: rgba(34, 211, 238, 0.08);
	border: 1px solid rgba(34, 211, 238, 0.25);
	color: var(--rf-muted, #9aa3c7);
	font-size: 0.86rem;
	line-height: 1.5;
}

.rf-submit-note svg {
	flex: none;
	color: var(--rf-cyan, #22d3ee);
	margin-top: 2px;
}

.rf-submit-note p {
	margin: 0;
}

/* ---- Form card ----------------------------------------------------------- */
.rf-form {
	position: relative;
	background: var(--rf-panel, rgba(20, 20, 38, 0.72));
	border: 1px solid var(--rf-border, rgba(255, 255, 255, 0.08));
	border-radius: var(--rf-radius, 16px);
	padding: 34px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(12px);
}

.rf-form::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	border-radius: var(--rf-radius, 16px) var(--rf-radius, 16px) 0 0;
	background: var(--rf-grad, linear-gradient(135deg, #ff3d71, #8b5cf6 55%, #22d3ee));
	opacity: 0.9;
}

.rf-form-section {
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--rf-border, rgba(255, 255, 255, 0.07));
}

.rf-form-section:last-of-type {
	border-bottom: none;
}

.rf-form-section-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--rf-text, #eef1ff);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.rf-form-group {
	margin-bottom: 20px;
}

.rf-form-group:last-child {
	margin-bottom: 0;
}

.rf-form-group label {
	display: block;
	margin-bottom: 7px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--rf-text, #eef1ff);
}

.rf-req {
	color: var(--rf-accent, #ff3d71);
}

.rf-form-group input[type="text"],
.rf-form-group input[type="url"],
.rf-form-group input[type="date"],
.rf-form-group select,
.rf-form-group textarea {
	width: 100%;
	padding: 12px 14px;
	background: rgba(6, 6, 14, 0.6);
	border: 1px solid var(--rf-border, rgba(255, 255, 255, 0.1));
	border-radius: 12px;
	color: var(--rf-text, #eef1ff);
	font-size: 0.95rem;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rf-form-group input::placeholder,
.rf-form-group textarea::placeholder {
	color: rgba(154, 163, 199, 0.55);
}

.rf-form-group input:focus,
.rf-form-group select:focus,
.rf-form-group textarea:focus {
	outline: none;
	border-color: var(--rf-accent, #ff3d71);
	box-shadow: 0 0 0 3px rgba(255, 61, 113, 0.18);
}

.rf-form-group textarea {
	min-height: 96px;
	resize: vertical;
}

.rf-form-help {
	margin: 7px 0 0;
	font-size: 0.78rem;
	color: var(--rf-muted, #9aa3c7);
}

.rf-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	align-items: start;
}

.rf-form-agreement {
	margin: 22px 0;
	padding: 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--rf-border, rgba(255, 255, 255, 0.08));
}

.rf-form-agreement label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.85rem;
	color: var(--rf-muted, #9aa3c7);
	cursor: pointer;
	line-height: 1.55;
}

.rf-form-agreement input[type="checkbox"] {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--rf-accent, #ff3d71);
}

.rf-form-agreement a {
	color: var(--rf-cyan, #22d3ee);
}

.rf-form-agreement a.rf-btn {
	color: var(--rf-text, #e8ecff);
	text-decoration: none;
	vertical-align: middle;
	margin: 2px 0 2px 4px;
	border-color: rgba(255, 61, 113, 0.55);
	box-shadow: 0 0 0 1px rgba(255, 61, 113, 0.18);
}

.rf-form-agreement a.rf-btn:hover {
	color: #fff;
	border-color: var(--rf-accent, #ff3d71);
	box-shadow: 0 0 0 1px var(--rf-accent, #ff3d71), 0 0 16px rgba(255, 61, 113, 0.35);
}

.rf-btn-sm {
	padding: 6px 14px;
	font-size: 0.78rem;
}

.rf-form-actions {
	margin-top: 26px;
	text-align: center;
}

.rf-btn-loading {
	display: none;
}

.rf-form-message {
	margin-top: 20px;
	padding: 16px 18px;
	border-radius: 12px;
	display: none;
	font-size: 0.92rem;
}

.rf-form-message.success {
	background: rgba(40, 167, 69, 0.15);
	border: 1px solid rgba(40, 167, 69, 0.55);
	color: #5ee08a;
}

.rf-form-message.error {
	background: rgba(220, 53, 69, 0.15);
	border: 1px solid rgba(255, 61, 113, 0.55);
	color: #ff8aa6;
}

/* ---- Sign-in gate -------------------------------------------------------- */
.rf-submit-signin {
	text-align: center;
	background: var(--rf-panel, rgba(20, 20, 38, 0.72));
	border: 1px solid var(--rf-border, rgba(255, 255, 255, 0.08));
	border-radius: var(--rf-radius, 16px);
	padding: 52px 34px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.rf-signin-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--rf-grad, linear-gradient(135deg, #ff3d71, #8b5cf6 55%, #22d3ee));
	color: #fff;
	box-shadow: 0 12px 34px rgba(139, 92, 246, 0.4);
}

.rf-submit-signin h3 {
	margin: 0 0 10px;
	font-size: 1.4rem;
	color: var(--rf-text, #eef1ff);
}

.rf-submit-signin p {
	margin: 0 auto 24px;
	max-width: 420px;
	color: var(--rf-muted, #9aa3c7);
	line-height: 1.6;
}

.rf-submit-register-link {
	display: inline-block;
	margin-top: 16px;
	color: var(--rf-cyan, #22d3ee);
	font-size: 0.9rem;
}

/* ---- Video preview ------------------------------------------------------- */
.rf-video-preview {
	margin-top: 14px;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
	border: 1px solid var(--rf-border, rgba(255, 255, 255, 0.1));
}

.rf-video-preview iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	border: none;
}

/* ---- User submissions list ---------------------------------------------- */
.rf-user-submissions {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
}

.rf-user-submissions h2 {
	margin-bottom: 20px;
	color: var(--rf-text, #eef1ff);
}

.rf-submissions-table {
	width: 100%;
	border-collapse: collapse;
}

.rf-submissions-table th,
.rf-submissions-table td {
	padding: 12px;
	border-bottom: 1px solid var(--rf-border, rgba(255, 255, 255, 0.08));
	text-align: left;
}

.rf-submissions-table th {
	background: rgba(6, 6, 14, 0.5);
	font-weight: 600;
	color: var(--rf-muted, #9aa3c7);
}

.rf-submissions-table td {
	color: var(--rf-text, #eef1ff);
}

.rf-submissions-table tr:last-child td {
	border-bottom: none;
}

.rf-submissions-table a {
	color: var(--rf-cyan, #22d3ee);
	text-decoration: none;
}

.rf-submissions-table a:hover {
	text-decoration: underline;
}

.rf-status-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.rf-status-pending { background: rgba(255, 193, 7, 0.18); color: #ffca3a; }
.rf-status-under_review { background: rgba(23, 162, 184, 0.18); color: #3dd6ea; }
.rf-status-approved { background: rgba(40, 167, 69, 0.18); color: #5ee08a; }
.rf-status-rejected { background: rgba(220, 53, 69, 0.18); color: #ff8aa6; }
.rf-status-withdrawn { background: rgba(108, 117, 125, 0.2); color: #9aa3c7; }
.rf-status-published { background: rgba(139, 92, 246, 0.2); color: #b79bff; }

.rf-submissions-pagination {
	margin-top: 20px;
	text-align: center;
}

.rf-submissions-pagination .pagination-links {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.rf-submissions-pagination a {
	display: inline-block;
	padding: 8px 16px;
	background: rgba(20, 20, 38, 0.72);
	border: 1px solid var(--rf-border, rgba(255, 255, 255, 0.1));
	border-radius: 10px;
	color: var(--rf-text, #eef1ff);
	text-decoration: none;
	transition: all 0.2s ease;
}

.rf-submissions-pagination a:hover {
	background: var(--rf-accent, #ff3d71);
	border-color: var(--rf-accent, #ff3d71);
	color: #fff;
}

.rf-submissions-pagination .current {
	display: inline-block;
	padding: 8px 16px;
	background: var(--rf-accent, #ff3d71);
	border: 1px solid var(--rf-accent, #ff3d71);
	border-radius: 10px;
	color: #fff;
	font-weight: 600;
}

.rf-submissions-pagination .dots {
	color: var(--rf-muted, #9aa3c7);
}

.no-submissions {
	text-align: center;
	padding: 40px 20px;
	color: var(--rf-muted, #9aa3c7);
}

.rf-submissions-list.loading {
	opacity: 0.6;
	pointer-events: none;
}

.rf-submissions-list.loading::after {
	content: '';
	display: block;
	width: 32px;
	height: 32px;
	margin: 20px auto;
	border: 3px solid var(--rf-border, rgba(255, 255, 255, 0.1));
	border-top-color: var(--rf-accent, #ff3d71);
	border-radius: 50%;
	animation: rf-spin 0.8s linear infinite;
}

@keyframes rf-spin {
	to { transform: rotate(360deg); }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
	.rf-submit-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.rf-submit-aside {
		position: static;
	}
}

@media (max-width: 768px) {
	.rf-form-row {
		grid-template-columns: 1fr;
	}

	.rf-form {
		padding: 24px 20px;
	}
}