/*
 * استایل فرانت‌اند افزونه Chapsys Order Files
 * Frontend styles for the Chapsys Order Files plugin.
 * کاملا راست‌چین (RTL) و بهینه برای فونت‌های فارسی.
 * Fully RTL and optimized for Persian fonts.
 */

.chapsys-of-upload-wrapper {
	direction: rtl;
	text-align: right;
	font-family: "Vazirmatn", "IRANSans", "Tahoma", sans-serif;
	margin: 24px 0;
	--chapsys-primary: #1f2937;
	--chapsys-accent: #2563eb;
	--chapsys-border: #e5e7eb;
	--chapsys-bg: #fafafa;
	--chapsys-radius: 10px;
}

.chapsys-of-upload-label {
	display: block;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 10px;
	color: var(--chapsys-primary);
}

.chapsys-of-field {
	margin-bottom: 16px;
}

.chapsys-of-field label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	color: var(--chapsys-primary);
}

.chapsys-of-order-title,
.chapsys-of-order-desc {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
	border: 1px solid var(--chapsys-border);
	border-radius: 8px;
	padding: 10px 12px;
	background: #fff;
	color: var(--chapsys-primary);
	transition: border-color .2s ease;
}

.chapsys-of-order-title:focus,
.chapsys-of-order-desc:focus {
	outline: none;
	border-color: var(--chapsys-accent);
}

.chapsys-of-order-desc {
	resize: vertical;
	min-height: 70px;
}

.chapsys-of-dropzone {
	border: 2px dashed var(--chapsys-border);
	border-radius: var(--chapsys-radius);
	background: var(--chapsys-bg);
	padding: 32px 20px;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.chapsys-of-dropzone:hover,
.chapsys-of-dropzone.is-dragover {
	border-color: var(--chapsys-accent);
	background: #eff6ff;
}

.chapsys-of-dropzone__icon .dashicons {
	font-size: 34px;
	width: 34px;
	height: 34px;
	color: var(--chapsys-accent);
}

.chapsys-of-dropzone__text {
	margin: 10px 0 16px;
	color: #4b5563;
	font-size: 14px;
}

.chapsys-of-browse-btn {
	background: var(--chapsys-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 22px;
	font-size: 13px;
	cursor: pointer;
	transition: background-color .2s ease;
}

.chapsys-of-browse-btn:hover {
	background: var(--chapsys-accent);
}

.chapsys-of-hint {
	font-size: 12px;
	color: #9ca3af;
	margin-top: 10px;
}

.chapsys-of-file-queue {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.chapsys-of-file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--chapsys-border);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
}

.chapsys-of-file-item__info {
	display: flex;
	align-items: center;
	gap: 10px;
	overflow: hidden;
}

.chapsys-of-file-item__thumb {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
	background: #f3f4f6;
}

.chapsys-of-file-item__name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
	color: var(--chapsys-primary);
}

.chapsys-of-file-item__size {
	color: #9ca3af;
	font-size: 11px;
}

.chapsys-of-progress {
	width: 100%;
	height: 4px;
	background: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	margin-top: 6px;
}

.chapsys-of-progress__bar {
	height: 100%;
	width: 0;
	background: var(--chapsys-accent);
	transition: width .2s ease;
}

.chapsys-of-file-item__remove {
	background: transparent;
	border: none;
	color: #ef4444;
	cursor: pointer;
	font-size: 13px;
}

.chapsys-of-file-item.is-error {
	border-color: #ef4444;
	background: #fef2f2;
}

.chapsys-of-file-item__status {
	font-size: 11px;
	color: #10b981;
}

.chapsys-of-file-item.is-error .chapsys-of-file-item__status {
	color: #ef4444;
}