.vcr-wrap {
	font-family: var(--vcr-font, 'Vazirmatn', Tahoma, sans-serif);
	color: var(--vcr-text, #1f2937);
	max-width: 640px;
	margin: 24px auto;
	padding: 0 16px;
	box-sizing: border-box;
	overflow-x: hidden;
	isolation: isolate;
}
.vcr-wrap *, .vcr-wrap *::before, .vcr-wrap *::after { box-sizing: border-box; }

/*
 * Defensive reset: some themes apply generic rules to buttons/forms (e.g. a
 * "sticky submit button" feature) using broad selectors like
 * `button[type="submit"]` or `form button`. Those can leak into this widget
 * and cause elements to overlap. We force the safe, expected layout values
 * back with !important, scoped only to this plugin's markup.
 */
.vcr-wrap form,
.vcr-wrap .vcr-upload-field,
.vcr-wrap .vcr-upload-label,
.vcr-wrap .vcr-form-footer {
	position: static !important;
	float: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
}
/* .vcr-field itself must stay a positioned container so its floating
   label (.vcr-float-label) can anchor correctly - but nothing else
   inside it (like the upload box) should ever inherit that. */
.vcr-wrap .vcr-field {
	position: relative !important;
	float: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
}
.vcr-wrap .vcr-btn {
	position: relative !important;
	float: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
}
.vcr-wrap .vcr-form {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
}
.vcr-wrap .vcr-form > * { width: 100%; flex: 0 0 auto; }

.vcr-card {
	background: var(--vcr-bg, #fff);
	border-radius: var(--vcr-radius, 20px);
	box-shadow: 0 10px 40px rgba(20, 20, 43, 0.08), 0 2px 8px rgba(20,20,43,.04);
	padding: 26px 22px;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,.04);
}
.vcr-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: linear-gradient(90deg, var(--vcr-primary, #7c3aed), var(--vcr-secondary, #06b6d4));
}

.vcr-fade-in { animation: vcrFadeIn .6s ease both; }
@keyframes vcrFadeIn {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

.vcr-card-header { margin-bottom: 16px; text-align: center; }
.vcr-title {
	font-size: 23px;
	font-weight: 800;
	margin: 0 0 6px;
	background: linear-gradient(90deg, var(--vcr-primary, #7c3aed), var(--vcr-secondary, #06b6d4));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.vcr-subtitle { margin: 0; color: #6b7280; font-size: 13.5px; line-height: 1.7; }

.vcr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .vcr-grid { grid-template-columns: 1fr; } }

.vcr-field { position: relative; margin-bottom: 14px; }
.vcr-field--flex { flex: 1; margin-bottom: 0; }

.vcr-field input[type="text"],
.vcr-field input[type="tel"],
.vcr-field input[type="email"],
.vcr-field textarea {
	width: 100%;
	border: 1.5px solid #e5e7eb;
	border-radius: 12px;
	padding: 14px 14px 6px;
	font-size: 14.5px;
	font-family: inherit;
	background: #fafafa;
	transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
	outline: none;
	color: var(--vcr-text, #1f2937);
}
.vcr-field textarea { padding-top: 18px; resize: vertical; min-height: 70px; }

.vcr-field .vcr-float-label {
	position: absolute;
	right: 14px;
	top: 14px;
	color: #9ca3af;
	font-size: 14.5px;
	pointer-events: none;
	transition: all .2s ease;
	background: transparent;
	padding: 0 4px;
}

.vcr-field input:focus,
.vcr-field textarea:focus {
	border-color: var(--vcr-primary, #7c3aed);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(124, 58, 237, .10);
}

.vcr-field input:focus + .vcr-float-label,
.vcr-field input:not(:placeholder-shown) + .vcr-float-label,
.vcr-field textarea:focus + .vcr-float-label,
.vcr-field textarea:not(:placeholder-shown) + .vcr-float-label {
	top: -8px;
	right: 10px;
	font-size: 11.5px;
	background: var(--vcr-bg, #fff);
	color: var(--vcr-primary, #7c3aed);
	font-weight: 600;
}

.vcr-field.vcr-has-error input,
.vcr-field.vcr-has-error textarea { border-color: #ef4444; }
.vcr-error { display: block; color: #ef4444; font-size: 12px; margin-top: 4px; min-height: 0; }
.vcr-error:empty { display: none; }

.vcr-phone-row { display: flex; gap: 8px; align-items: stretch; }
.vcr-phone-field { margin-bottom: 6px; }

.vcr-btn {
	border: none;
	border-radius: 12px;
	padding: 0 16px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.vcr-btn:active { transform: scale(.97); }
.vcr-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.vcr-btn-outline {
	background: #fff;
	border: 1.5px solid var(--vcr-primary, #7c3aed);
	color: var(--vcr-primary, #7c3aed);
}
.vcr-btn-outline:hover:not(:disabled) { background: rgba(124,58,237,.06); }

.vcr-btn-primary {
	background: linear-gradient(90deg, var(--vcr-primary, #7c3aed), var(--vcr-secondary, #06b6d4));
	color: #fff;
	box-shadow: 0 6px 18px rgba(124, 58, 237, .28);
}
.vcr-btn-primary:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(124, 58, 237, .38); transform: translateY(-1px) !important; }

.vcr-btn-block { width: 100%; padding: 13px; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }

.vcr-otp-box {
	margin-top: 10px;
	padding: 12px;
	background: #f8f7ff;
	border-radius: 12px;
	border: 1px dashed rgba(124,58,237,.35);
	animation: vcrSlideDown .35s ease both;
}
@keyframes vcrSlideDown {
	from { opacity: 0; transform: translateY(-8px); max-height: 0; }
	to { opacity: 1; transform: translateY(0); max-height: 200px; }
}

.vcr-otp-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12.5px; }
.vcr-otp-status { color: #059669; font-weight: 600; }
.vcr-otp-status.is-error { color: #ef4444; }
.vcr-otp-timer { color: #9ca3af; direction: ltr; }

.vcr-upload-field { margin-bottom: 14px; }
.vcr-upload-label {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: 2px dashed #d1d5db;
	border-radius: 14px;
	padding: 16px 14px;
	cursor: pointer;
	text-align: center;
	transition: border-color .25s ease, background .25s ease;
	color: #6b7280;
	margin: 0 !important;
}
.vcr-upload-label:hover { border-color: var(--vcr-primary, #7c3aed); background: rgba(124,58,237,.04); }
.vcr-upload-icon { color: var(--vcr-primary, #7c3aed); line-height: 0; }
.vcr-upload-icon svg { width: 22px; height: 22px; display: block; }
.vcr-upload-text { font-weight: 600; font-size: 13.5px; color: var(--vcr-text, #1f2937); }
.vcr-upload-hint { font-size: 11.5px; color: #9ca3af; }
.vcr-upload-field input[type="file"] { display: none !important; }

.vcr-image-preview { margin-top: 8px; display: flex; }
.vcr-image-preview:empty { margin-top: 0; }
.vcr-image-preview img {
	max-width: 110px;
	max-height: 110px;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 4px 14px rgba(0,0,0,.12);
	animation: vcrFadeIn .4s ease both;
}

.vcr-form-footer { margin-top: 4px; }

.vcr-spinner {
	width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: vcrSpin .7s linear infinite;
	display: inline-block;
}
@keyframes vcrSpin { to { transform: rotate(360deg); } }

.vcr-form-message {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.7;
	animation: vcrFadeIn .4s ease both;
}
.vcr-form-message.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.vcr-form-message.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.vcr-hp-field { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

/* ============ Two-column shell (form + cooperation terms) ============ */

.vcr-shell { width: 100%; max-width: 980px; }

.vcr-columns {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
}
.vcr-col { min-width: 0; }
.vcr-col-form { flex: 1.15 1 0; }
.vcr-col-terms { flex: 1 1 0; }

.vcr-shell:not(.vcr-has-terms) .vcr-columns { justify-content: center; }
.vcr-shell:not(.vcr-has-terms) .vcr-col-form { flex: 1 1 auto; max-width: 640px; width: 100%; }

.vcr-mobile-tabs { display: none; }

.vcr-terms-card { padding: 22px 22px 26px; }
.vcr-terms-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.vcr-terms-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--vcr-primary, #7c3aed), var(--vcr-secondary, #06b6d4));
	color: #fff;
	flex: 0 0 auto;
}
.vcr-terms-title {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: var(--vcr-text, #1f2937);
}
.vcr-terms-content { font-size: 13.5px; line-height: 2; color: #4b5563; }
.vcr-terms-content p { margin: 0 0 12px; }
.vcr-terms-content p:last-child { margin-bottom: 0; }
.vcr-terms-content ul, .vcr-terms-content ol { margin: 0 0 12px; padding-right: 20px; padding-left: 0; }
.vcr-terms-content li { margin-bottom: 6px; }
.vcr-terms-content strong { color: var(--vcr-text, #1f2937); }
.vcr-terms-content a { color: var(--vcr-primary, #7c3aed); text-decoration: underline; }
.vcr-terms-content h1, .vcr-terms-content h2, .vcr-terms-content h3, .vcr-terms-content h4 {
	font-size: 15px; font-weight: 800; color: var(--vcr-text, #1f2937); margin: 0 0 8px;
}

@media (max-width: 860px) {
	.vcr-shell.vcr-has-terms .vcr-mobile-tabs {
		display: flex;
		gap: 6px;
		background: #f3f4f6;
		padding: 5px;
		border-radius: 14px;
		margin-bottom: 14px;
	}
	.vcr-shell.vcr-has-terms .vcr-tab-btn {
		flex: 1;
		border: none;
		background: transparent;
		padding: 10px 8px;
		border-radius: 10px;
		font-size: 13.5px;
		font-weight: 700;
		font-family: inherit;
		color: #6b7280;
		cursor: pointer;
		transition: all .25s ease;
	}
	.vcr-shell.vcr-has-terms .vcr-tab-btn.is-active {
		background: linear-gradient(90deg, var(--vcr-primary, #7c3aed), var(--vcr-secondary, #06b6d4));
		color: #fff;
		box-shadow: 0 4px 14px rgba(124,58,237,.28);
	}
	.vcr-shell.vcr-has-terms .vcr-columns { display: block; }
	.vcr-shell.vcr-has-terms .vcr-col { display: none; width: 100%; }
	.vcr-shell.vcr-has-terms .vcr-col.is-active { display: block; animation: vcrFadeIn .35s ease both; }
}

/* ============ Buttons: richer, more modern interaction ============ */

.vcr-btn {
	position: relative;
	overflow: hidden;
	border-radius: 13px;
}

.vcr-btn-outline {
	background: #fff;
	border: 1.5px solid var(--vcr-primary, #7c3aed);
	color: var(--vcr-primary, #7c3aed);
	transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease;
}
.vcr-btn-outline:hover:not(:disabled) {
	background: var(--vcr-primary, #7c3aed);
	color: #fff;
	box-shadow: 0 6px 16px rgba(124,58,237,.25);
	transform: translateY(-1px) !important;
}

.vcr-btn-primary {
	background-image: linear-gradient(100deg, var(--vcr-primary, #7c3aed) 0%, var(--vcr-secondary, #06b6d4) 55%, var(--vcr-primary, #7c3aed) 100%);
	background-size: 220% 100%;
	background-position: 0% 0%;
	color: #fff;
	box-shadow: 0 6px 18px rgba(124, 58, 237, .28);
	transition: background-position .5s ease, box-shadow .25s ease, transform .15s ease;
}
.vcr-btn-primary:hover:not(:disabled) {
	background-position: 100% 0%;
	box-shadow: 0 10px 26px rgba(124, 58, 237, .38);
	transform: translateY(-2px) !important;
}

/* Click ripple */
.vcr-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.55);
	transform: scale(0);
	animation: vcrRipple .55s ease-out forwards;
	pointer-events: none;
}
.vcr-btn-outline .vcr-ripple { background: rgba(124,58,237,.25); }
@keyframes vcrRipple {
	to { transform: scale(2.6); opacity: 0; }
}

.vcr-upload-label { transition: border-color .25s ease, background .25s ease, transform .2s ease; }
.vcr-upload-label:hover {
	border-color: var(--vcr-primary, #7c3aed);
	background: rgba(124,58,237,.05);
	transform: translateY(-2px);
}
.vcr-upload-icon { transition: transform .25s ease; }
.vcr-upload-label:hover .vcr-upload-icon { transform: translateY(-3px); }

.vcr-card { transition: box-shadow .3s ease; }
.vcr-card:hover { box-shadow: 0 14px 48px rgba(20, 20, 43, 0.10), 0 3px 10px rgba(20,20,43,.05); }
.vcr-btn-primary.vcr-success-pulse {
	animation: vcrPulse .6s ease;
}
@keyframes vcrPulse {
	0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
	70% { box-shadow: 0 0 0 14px rgba(16,185,129,0); }
	100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* ============ "My requests" status list (WooCommerce My Account tab) ============ */

.vcr-my-requests {
	background: var(--vcr-bg, #fff);
	border-radius: var(--vcr-radius, 20px);
	box-shadow: 0 10px 40px rgba(20, 20, 43, 0.08), 0 2px 8px rgba(20,20,43,.04);
	border: 1px solid rgba(0,0,0,.04);
	padding: 20px 22px;
	margin-bottom: 20px;
}
.vcr-my-requests-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 800;
	color: var(--vcr-text, #1f2937);
}
.vcr-my-requests-list { display: flex; flex-direction: column; gap: 8px; }
.vcr-my-request-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	background: #f9fafb;
	border-radius: 10px;
	font-size: 13px;
}
.vcr-my-request-info { display: flex; flex-direction: column; gap: 2px; color: #6b7280; }
.vcr-my-request-date { font-weight: 600; color: var(--vcr-text, #1f2937); }
.vcr-my-request-count { font-size: 12px; }

.vcr-status-badge {
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	display: inline-block;
	white-space: nowrap;
}
.vcr-status-pending { background: #fef3c7; color: #92400e; }
.vcr-status-approved { background: #d1fae5; color: #065f46; }
.vcr-status-rejected { background: #fee2e2; color: #991b1b; }

/* ============ Captcha widget spacing ============ */
.vcr-captcha-field { margin-bottom: 14px; display: flex; justify-content: center; }