.vfm-casting-front {
	font-family: "Manrope", "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	--vfm-front-primary: #f2a072;
	--vfm-front-secondary: #dc8a5e;
	--vfm-front-surface: #ffffff;
	--vfm-front-border: #e8d5c8;
	--vfm-front-card-from: #fffdfa;
	--vfm-front-panel-bg: #fff9f5;
	--vfm-front-alert: #b91c1c;
	--vfm-front-success: #15803d;
	--vfm-front-error: #b91c1c;
	--vfm-front-slot-from: #ffffff;
	--vfm-front-slot-to: #fff8f2;
	--vfm-front-slot-border: #ebcdb8;
	--vfm-front-step-bg: #ffffff;
	--vfm-text-t1-color: #2b1f17;
	--vfm-text-t2-color: #4a3729;
	--vfm-text-t3-color: #5f4a3c;
	--vfm-text-t1-size: 16px;
	--vfm-text-t2-size: 14px;
	--vfm-text-t3-size: 13px;
	--vfm-slot-time-color: #2b1f17;
	--vfm-slot-time-size: 14px;
	--vfm-slot-status-color: #7f573d;
	--vfm-slot-status-size: 12px;
	--vfm-slot-time-color-active: #ffffff;
	--vfm-slot-status-color-active: #ffffff;
	--vfm-slot-status-bg: rgba(242, 160, 114, 0.13);
	--vfm-slot-status-bg-active: rgba(255, 255, 255, 0.22);
	--vfm-shadow-soft: 0 20px 46px rgba(109, 62, 28, 0.12);
	--vfm-shadow-hover: 0 24px 56px rgba(109, 62, 28, 0.18);
	--vfm-radius-xl: 20px;
	--vfm-radius-lg: 14px;
	--vfm-radius-md: 10px;

	position: relative;
	overflow: hidden;
	background:
		radial-gradient(700px 300px at 100% -40px, rgba(242, 160, 114, 0.16), transparent 60%),
		radial-gradient(600px 260px at -10% 110%, rgba(220, 138, 94, 0.12), transparent 58%),
		linear-gradient(180deg, #fffcfa 0%, var(--vfm-front-panel-bg) 100%);
	border: 1px solid #eadfd7;
	border-radius: var(--vfm-radius-xl);
	padding: 26px;
	box-shadow: var(--vfm-shadow-soft);
	max-width: 980px;
	margin: 24px auto;
}

.vfm-casting-hub-item {
	position: relative;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(120, 85, 60, 0.14);
}

.vfm-casting-hub-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.vfm-casting-front * {
	box-sizing: border-box;
}

.vfm-casting-title {
	margin: 0;
	font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #24180f;
}

.vfm-casting-location {
	margin: 4px 0 0;
	color: #5f4a3c;
	font-weight: 600;
}

.vfm-casting-dates {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid #ecd9cd;
	background: #fff7f1;
	color: #5f4a3c;
}

.vfm-steps {
	display: grid;
	gap: 16px;
	margin-top: 20px;
}

.vfm-step {
	background: linear-gradient(180deg, var(--vfm-front-step-bg), #fff8f2);
	border: 1px solid var(--vfm-front-border);
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 12px 30px rgba(116, 67, 31, 0.08);
}

.vfm-step h3 {
	margin: 0 0 12px;
	font-size: var(--vfm-text-t1-size);
	color: var(--vfm-text-t1-color);
	font-weight: 800;
}

.vfm-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
	gap: 12px;
}

.vfm-casting-front .vfm-category {
	width: 100%;
	background: #ffffff !important;
	border: 1px solid var(--vfm-front-border) !important;
	border-radius: var(--vfm-radius-lg);
	padding: 12px;
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
	color: #332418 !important;
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
	box-shadow: 0 8px 20px rgba(128, 72, 35, 0.08);
}

.vfm-casting-front .vfm-category:hover,
.vfm-casting-front .vfm-category:focus-visible {
	background: #fff7f1 !important;
	border-color: #dcae90 !important;
	color: #5b3a25 !important;
	box-shadow: 0 12px 28px rgba(220, 138, 94, 0.18);
	transform: translateY(-1px);
	outline: none;
}

.vfm-casting-front .vfm-category.selected {
	border-color: transparent !important;
	background: linear-gradient(135deg, var(--vfm-front-primary), var(--vfm-front-secondary)) !important;
	color: #fff !important;
	box-shadow: 0 20px 40px rgba(220, 138, 94, 0.3);
}

.vfm-category-dot {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	flex-shrink: 0;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24);
}

.vfm-category-name {
	font-weight: 700;
	letter-spacing: 0.01em;
}

.vfm-step-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.vfm-step-label {
	display: block;
	font-weight: 800;
	font-size: var(--vfm-text-t1-size);
	color: var(--vfm-text-t1-color);
}

.vfm-selected-category-label {
	display: block;
	font-size: var(--vfm-text-t2-size);
	color: var(--vfm-text-t2-color);
	font-weight: 600;
	margin-top: 3px;
}

.vfm-casting-front .vfm-change-category {
	border: 1px solid #d8dce3 !important;
	background: #ffffff !important;
	color: #334155 !important;
	border-radius: 10px;
	padding: 8px 14px;
	font-size: 0.87rem;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.2;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.vfm-casting-front .vfm-change-category:hover,
.vfm-casting-front .vfm-change-category:focus-visible {
	border-color: #94a3b8 !important;
	background: #f8fafc !important;
	color: #0f172a !important;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
	outline: none;
}

.vfm-casting-front .vfm-change-category:active {
	background: #f1f5f9 !important;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

.vfm-slot-day {
	margin-bottom: 16px;
}

.vfm-slot-day h4 {
	color: var(--vfm-text-t3-color);
	font-size: var(--vfm-text-t3-size);
	font-weight: 700;
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px dashed #eddccf;
}

.vfm-slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
	gap: 10px;
}

.vfm-slot {
	width: 100%;
	background: linear-gradient(145deg, var(--vfm-front-slot-from), var(--vfm-front-slot-to));
	border: 1px solid var(--vfm-front-slot-border);
	border-radius: var(--vfm-radius-lg);
	padding: 12px;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	color: #3b2a1f;
	box-shadow: 0 10px 24px rgba(139, 82, 45, 0.12);
	text-align: left;
}

.vfm-slot:hover,
.vfm-slot:focus-visible {
	border-color: var(--vfm-front-primary);
	box-shadow: 0 16px 34px rgba(220, 138, 94, 0.22);
	transform: translateY(-1px);
	outline: none;
}

.vfm-slot .time {
	display: block;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--vfm-slot-time-color);
	font-size: var(--vfm-slot-time-size);
}

.vfm-slot .status {
	display: inline-block;
	margin-top: 6px;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--vfm-slot-status-bg);
	color: var(--vfm-slot-status-color);
	font-size: var(--vfm-slot-status-size);
	font-weight: 700;
}

.vfm-slot.selected {
	background: linear-gradient(135deg, var(--vfm-front-primary), var(--vfm-front-secondary));
	border-color: transparent;
	color: #fff;
	box-shadow: var(--vfm-shadow-hover);
}

.vfm-slot.selected .time {
	color: var(--vfm-slot-time-color-active);
}

.vfm-slot.selected .status {
	background: var(--vfm-slot-status-bg-active);
	color: var(--vfm-slot-status-color-active);
}

.vfm-no-slots {
	margin-top: 8px;
	color: var(--vfm-front-alert);
	font-weight: 700;
}

.vfm-booking-form {
	margin-top: 16px;
	background: linear-gradient(180deg, #fffdfb, #fff8f2);
	padding: 18px;
	border-radius: 16px;
	border: 1px solid #ebd8cc;
	box-shadow: 0 10px 26px rgba(120, 67, 30, 0.08);
}

.vfm-booking-form h3 {
	margin-top: 0;
	font-size: 1.06rem;
	font-weight: 800;
	color: #2b1f17;
}

.vfm-booking-form p {
	margin: 0 0 12px;
}

.vfm-booking-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	color: #473527;
	font-size: 0.94rem;
}

.vfm-booking-form input,
.vfm-booking-form textarea {
	width: 100%;
	padding: 11px 12px;
	border-radius: var(--vfm-radius-md);
	border: 1px solid #d7c0b2;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	font-family: inherit;
	font-size: 0.95rem;
	color: #332418;
}

.vfm-booking-form input:focus,
.vfm-booking-form textarea:focus {
	outline: none;
	border-color: var(--vfm-front-primary);
	box-shadow: 0 0 0 3px rgba(242, 160, 114, 0.22);
}

.vfm-booking-form textarea {
	min-height: 88px;
	resize: vertical;
}

.vfm-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.vfm-form-row-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.vfm-social-row {
	display: grid;
	grid-template-columns: minmax(140px, 220px) 1fr;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.vfm-social-row label {
	margin: 0;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.vfm-booking-form button,
.vfm-cancel-submit,
.vfm-cancel-confirm {
	background: linear-gradient(135deg, var(--vfm-front-primary), var(--vfm-front-secondary));
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 12px 16px;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	box-shadow: 0 14px 30px rgba(220, 138, 94, 0.28);
	transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}

.vfm-booking-form button:hover,
.vfm-cancel-submit:hover,
.vfm-cancel-confirm:hover,
.vfm-booking-form button:focus-visible,
.vfm-cancel-submit:focus-visible,
.vfm-cancel-confirm:focus-visible {
	box-shadow: 0 18px 38px rgba(220, 138, 94, 0.36);
	transform: translateY(-1px);
	filter: saturate(1.05);
	outline: none;
}

.vfm-booking-form button:active,
.vfm-cancel-submit:active,
.vfm-cancel-confirm:active {
	transform: translateY(0);
	filter: brightness(0.98);
}

.vfm-form-message,
.vfm-cancel-message {
	margin-top: 10px;
	font-weight: 700;
}

.vfm-form-message.success,
.vfm-cancel-message.success {
	color: var(--vfm-front-success);
}

.vfm-form-message.error,
.vfm-cancel-message.error {
	color: var(--vfm-front-error);
}

.vfm-cancel-wrapper {
	margin-top: 20px;
	border: 1px solid #e5d4c7;
	border-radius: 16px;
	padding: 18px;
	background: linear-gradient(180deg, #fffdfb, #fff8f2);
	box-shadow: 0 10px 24px rgba(114, 65, 30, 0.08);
}

.vfm-cancel-wrapper h3 {
	margin: 0 0 12px;
	font-size: 1.05rem;
	font-weight: 800;
	color: #2b1f17;
}

.vfm-cancel-form input[type="email"] {
	width: 100%;
	max-width: 340px;
	padding: 11px 12px;
	border: 1px solid #d7c0b2;
	border-radius: 10px;
}

.vfm-cancel-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.vfm-cancel-rebook {
	display: inline-block;
	color: #a05a36;
	font-weight: 800;
	text-decoration: none;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid #eacdb8;
	background: #fff6ef;
}

.vfm-cancel-rebook:hover,
.vfm-cancel-rebook:focus-visible {
	background: #fff1e6;
	outline: none;
}

.vfm-dup-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.vfm-dup-actions button {
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid #d9c1b2;
	background: #fff;
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
}

.vfm-dup-actions .vfm-dup-replace {
	background: #fff3ea;
	border-color: #e7bda1;
	color: #8f4f2d;
}

.vfm-dup-actions .vfm-dup-cancel,
.vfm-dup-actions .vfm-dup-keep {
	color: #6b4f3d;
}

@media (max-width: 860px) {
	.vfm-casting-front {
		padding: 20px;
		border-radius: 16px;
	}

	.vfm-form-row,
	.vfm-form-row-3,
	.vfm-social-row {
		grid-template-columns: 1fr;
	}

	.vfm-step-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 560px) {
	.vfm-casting-front {
		padding: 16px;
		margin: 12px auto;
	}

	.vfm-slot-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vfm-booking-form,
	.vfm-step,
	.vfm-cancel-wrapper {
		padding: 14px;
	}
}