/* ───────────────────────────────────────────────
 * FDM Business Cards — Frontend Widget
 *
 * Designed for dark page backgrounds.
 * Uses !important on key properties to override
 * Divi theme styles that bleed into shortcode output.
 * ─────────────────────────────────────────────── */

@font-face {
	font-family: 'FDM Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/raleway-regular.ttf') format('truetype');
}

@font-face {
	font-family: 'FDM Raleway';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/raleway-bold.ttf') format('truetype');
}

.fdm-bc-widget {
	font-family: 'FDM Raleway', 'Raleway', serif !important;
	font-size: 15px !important;
	color: #fff !important;
	line-height: 1.5 !important;
}

/* ── Form fields ── */

.fdm-bc-field {
	margin-bottom: 24px !important;
}

.fdm-bc-field:last-child {
	margin-bottom: 0 !important;
}

.fdm-bc-widget .fdm-bc-field label,
.fdm-bc-field label {
	display: block !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	margin-bottom: 8px !important;
	color: rgba(255, 255, 255, 0.7) !important;
	padding: 0 !important;
}

.fdm-bc-req {
	color: #b8963e !important;
	font-weight: 600 !important;
}

.fdm-bc-widget input[type="text"],
.fdm-bc-widget input[type="email"],
.fdm-bc-widget input[type="tel"] {
	display: block !important;
	width: 100% !important;
	padding: 14px 16px !important;
	font-size: 15px !important;
	border: none !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: #1a1a1a !important;
	transition: box-shadow 0.2s ease !important;
	box-sizing: border-box !important;
	font-family: inherit !important;
	-webkit-appearance: none !important;
	margin: 0 !important;
	height: auto !important;
	line-height: 1.5 !important;
}

.fdm-bc-widget input::placeholder {
	color: #b0b0b0 !important;
}

.fdm-bc-widget input:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(184, 150, 62, 0.35) !important;
}

/* ── Card preview ── */

.fdm-bc-card-wrap {
	margin-bottom: 20px !important;
}

.fdm-bc-widget .fdm-bc-card-label,
.fdm-bc-card-label {
	display: block !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: rgba(255, 255, 255, 0.45) !important;
	margin-bottom: 6px !important;
}

.fdm-bc-card {
	width: 100% !important;
	aspect-ratio: 5 / 3 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
	position: relative !important;
	background-color: #111 !important;
}

/* Back */
.fdm-bc-card-back {
	background-size: cover !important;
	background-position: center !important;
}

/* ── Text overlay on back card ── */

.fdm-bc-widget .fdm-bc-prev-name,
.fdm-bc-widget .fdm-bc-prev-title,
.fdm-bc-widget .fdm-bc-prev-email,
.fdm-bc-widget .fdm-bc-prev-phone,
.fdm-bc-widget .fdm-bc-prev-url,
.fdm-bc-prev-name,
.fdm-bc-prev-title,
.fdm-bc-prev-email,
.fdm-bc-prev-phone,
.fdm-bc-prev-url {
	position: absolute !important;
	color: #fff !important;
	font-family: 'FDM Raleway', 'Raleway', serif !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	text-shadow: none !important;
}

.fdm-bc-prev-name {
	top: 58% !important;
	left: 6% !important;
	font-size: clamp(10px, 2.8vw, 14px) !important;
	font-weight: 700 !important;
	letter-spacing: -0.028em !important;
}

.fdm-bc-prev-title {
	top: 63% !important;
	left: 6% !important;
	font-size: clamp(6px, 1.7vw, 8.5px) !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

.fdm-bc-prev-email {
	top: 82% !important;
	left: 6% !important;
	font-size: clamp(5.5px, 1.5vw, 7.5px) !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

.fdm-bc-prev-phone {
	top: 88% !important;
	left: 6% !important;
	font-size: clamp(5.5px, 1.5vw, 7.5px) !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

.fdm-bc-prev-url {
	top: 82% !important;
	right: 6% !important;
	font-size: clamp(5.5px, 1.5vw, 7.5px) !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

.fdm-bc-dimmed {
	opacity: 0.3 !important;
}

/* ── Download button ── */

.fdm-bc-actions {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
}

.fdm-bc-widget .fdm-bc-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 13px 32px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: background 0.2s ease, opacity 0.2s ease, transform 0.1s ease !important;
	font-family: inherit !important;
	letter-spacing: 0.01em !important;
	line-height: 1.4 !important;
	text-transform: none !important;
}

.fdm-bc-widget .fdm-bc-btn:active:not(:disabled) {
	transform: scale(0.97) !important;
}

.fdm-bc-widget .fdm-bc-btn:disabled {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
}

.fdm-bc-widget .fdm-bc-btn-primary {
	background: #b8963e !important;
	color: #fff !important;
}

.fdm-bc-widget .fdm-bc-btn-primary:hover:not(:disabled) {
	background: #a6862e !important;
}

.fdm-bc-status {
	font-size: 13px !important;
	font-weight: 500 !important;
}

.fdm-bc-success {
	color: #6abf6e !important;
}

.fdm-bc-error {
	color: #f87171 !important;
}

/* ── Responsive ── */

@media (max-width: 860px) {
	.fdm-bc-widget {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.fdm-bc-form {
		grid-column: 1 !important;
	}

	.fdm-bc-preview-panel {
		grid-column: 1 !important;
	}
}

@media (max-width: 480px) {
	.fdm-bc-widget .fdm-bc-btn {
		width: 100% !important;
	}
}