/*
 * Jetdahao Contact Block - scoped fallback styles (merged, 1.0.11).
 *
 * Contains the full Tailwind / WAYLE utility fallback plus the block-level
 * component styles, so the section renders correctly even when the active
 * theme provides neither Tailwind CSS nor the WAYLE component classes.
 *
 * All rules are scoped to .jetdahao-contact-block (front end) and
 * .jetdahao-editor-preview (editor canvas) to avoid global pollution.
 * If the theme already provides Tailwind + WAYLE, disable this file via
 * Settings > Contact Form Settings or the
 * jetdahaotact_block_load_fallback_css filter.
 */

.jetdahao-contact-block,
.jetdahao-editor-preview {
	/* WAYLE color tokens with built-in defaults */
	--color-bg-default: #f7f9fc;
	--color-wayle-navy: #002c5d;
	--color-text-secondary: #4b5059;
	--color-brand: #005fb8;
	--color-brand-soft: rgba(0, 95, 184, 0.12);
	--color-border-1: rgba(0, 26, 56, 0.08);
	--color-border-2: rgba(0, 26, 56, 0.16);
	--color-overlay-1: rgba(0, 95, 184, 0.06);
	--color-wayle-glacier: #dcebff;
	--color-wayle-coolgrey: #6c727f;

	/* Block tokens */
	--jdh-bg: #ffffff;
	--jdh-surface: #ffffff;
	--jdh-text: #202124;
	--jdh-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
	--jdh-font-display: var(--jdh-font-sans);
	--jdh-radius-xl: 0.625rem;
	--jdh-radius-3xl: 1rem;
	--jdh-radius-full: 9999px;
	--jdh-shadow-soft: 0 4px 24px rgba(0, 26, 56, 0.07);
	--jdh-shadow-button: 0 4px 14px rgba(0, 95, 184, 0.28);
	color: var(--jdh-text);
	font-family: var(--jdh-font-sans);
}

[data-theme="dark"] .jetdahao-contact-block,
[data-theme="dark"] .jetdahao-editor-preview {
	--color-bg-default: #0b1018;
	--color-wayle-navy: #f5faff;
	--color-text-secondary: #b8d4ff;
	--color-brand: #0078e7;
	--color-brand-soft: rgba(0, 120, 231, 0.18);
	--color-border-1: rgba(255, 255, 255, 0.10);
	--color-border-2: rgba(255, 255, 255, 0.18);
	--color-overlay-1: rgba(0, 120, 231, 0.10);
	--color-wayle-glacier: rgba(0, 120, 231, 0.18);
	--color-wayle-coolgrey: #93a4b8;
	--jdh-bg: #0b1018;
	--jdh-surface: #111a25;
	--jdh-text: #f5faff;
	--jdh-shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.25);
	--jdh-shadow-button: 0 4px 16px rgba(46, 143, 255, 0.35);
}

/* ---------- Layout ---------- */

/*
 * Align support. The section element carries the theme's alignfull /
 * alignwide class when the block alignment is set. Block themes handle the
 * full-bleed layout on the block wrapper, so no margin reset is applied
 * here (it would double the offset in themes that already style .alignfull).
 * The section is a normal block-level element, so its background spans the
 * full width by default; the inner container keeps the content aligned.
 */
.jetdahao-contact-block.alignfull {
	max-width: none;
}

/* Editor canvas: let the preview wrapper mirror the full-width alignment
   (matches the theme's .alignfull on the canvas). */
.jetdahao-editor-preview.alignfull {
	max-width: none;
	margin-inline: 0;
}

/*
 * "Wide width": widen the inner container to the theme's global wide size
 * when available, otherwise a slightly wider default.
 */
.jetdahao-contact-block.alignwide .container-wayle {
	max-width: var(--wp--style--global--wide-size, 84rem);
}

.jetdahao-contact-block .container-wayle,
.jetdahao-editor-preview .container-wayle {
	width: 100%;
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: 1rem;
}

@media (min-width: 640px) {
	.jetdahao-contact-block .container-wayle,
	.jetdahao-editor-preview .container-wayle {
		padding-inline: 1.5rem;
	}
}

.jetdahao-contact-block.section-padding,
.jetdahao-editor-preview.section-padding {
	padding-block: 2rem;
}

@media (min-width: 1024px) {
	.jetdahao-contact-block.section-padding,
	.jetdahao-editor-preview.section-padding {
		padding-block: 3rem;
	}
}

.jetdahao-contact-block .grid,
.jetdahao-editor-preview .grid {
	display: grid;
}

@media (min-width: 1024px) {
	.jetdahao-contact-block .lg\:grid-cols-2,
	.jetdahao-editor-preview .lg\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 640px) {
	.jetdahao-contact-block .sm\:grid-cols-2,
	.jetdahao-editor-preview .sm\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jetdahao-contact-block .sm\:grid-cols-3,
	.jetdahao-editor-preview .sm\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.jetdahao-contact-block .sm\:col-span-2,
	.jetdahao-editor-preview .sm\:col-span-2 {
		grid-column: span 2 / span 2;
	}
}

.jetdahao-contact-block .gap-3,
.jetdahao-editor-preview .gap-3 { gap: 0.75rem; }
.jetdahao-contact-block .gap-4,
.jetdahao-editor-preview .gap-4 { gap: 1rem; }
.jetdahao-contact-block .gap-6,
.jetdahao-editor-preview .gap-6 { gap: 1.5rem; }
.jetdahao-contact-block .gap-10,
.jetdahao-editor-preview .gap-10 { gap: 2.5rem; }

@media (min-width: 1024px) {
	.jetdahao-contact-block .lg\:gap-16,
	.jetdahao-editor-preview .lg\:gap-16 { gap: 4rem; }
}

.jetdahao-contact-block .space-y-5 > :not([hidden]) ~ :not([hidden]),
.jetdahao-editor-preview .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.jetdahao-contact-block .space-y-6 > :not([hidden]) ~ :not([hidden]),
.jetdahao-editor-preview .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

.jetdahao-contact-block .flex,
.jetdahao-editor-preview .flex { display: flex; }
.jetdahao-contact-block .items-start,
.jetdahao-editor-preview .items-start { align-items: flex-start; }
.jetdahao-contact-block .items-center,
.jetdahao-editor-preview .items-center { align-items: center; }
.jetdahao-contact-block .justify-center,
.jetdahao-editor-preview .justify-center { justify-content: center; }
.jetdahao-contact-block .flex-shrink-0,
.jetdahao-editor-preview .flex-shrink-0 { flex-shrink: 0; }
.jetdahao-contact-block .text-center,
.jetdahao-editor-preview .text-center { text-align: center; }
.jetdahao-contact-block .cursor-pointer,
.jetdahao-editor-preview .cursor-pointer { cursor: pointer; }
.jetdahao-contact-block .mx-auto,
.jetdahao-editor-preview .mx-auto { margin-inline: auto; }

.jetdahao-contact-block .hidden,
.jetdahao-editor-preview .hidden { display: none; }

/* ---------- Sizing & spacing ---------- */

.jetdahao-contact-block .w-full,
.jetdahao-editor-preview .w-full { width: 100%; }
.jetdahao-contact-block .w-4,
.jetdahao-editor-preview .w-4 { width: 1rem; }
.jetdahao-contact-block .h-4,
.jetdahao-editor-preview .h-4 { height: 1rem; }
.jetdahao-contact-block .w-10,
.jetdahao-editor-preview .w-10 { width: 2.5rem; }
.jetdahao-contact-block .h-10,
.jetdahao-editor-preview .h-10 { height: 2.5rem; }

.jetdahao-contact-block .p-3,
.jetdahao-editor-preview .p-3 { padding: 0.75rem; }
.jetdahao-contact-block .p-4,
.jetdahao-editor-preview .p-4 { padding: 1rem; }
.jetdahao-contact-block .p-5,
.jetdahao-editor-preview .p-5 { padding: 1.25rem; }
.jetdahao-contact-block .p-6,
.jetdahao-editor-preview .p-6 { padding: 1.5rem; }
.jetdahao-contact-block .py-4,
.jetdahao-editor-preview .py-4 { padding-block: 1rem; }
.jetdahao-contact-block .mt-0\.5,
.jetdahao-editor-preview .mt-0\.5 { margin-top: 0.125rem; }
.jetdahao-contact-block .mt-6,
.jetdahao-editor-preview .mt-6 { margin-top: 1.5rem; }
.jetdahao-contact-block .mb-1,
.jetdahao-editor-preview .mb-1 { margin-bottom: 0.25rem; }
.jetdahao-contact-block .mb-2,
.jetdahao-editor-preview .mb-2 { margin-bottom: 0.5rem; }
.jetdahao-contact-block .mb-3,
.jetdahao-editor-preview .mb-3 { margin-bottom: 0.75rem; }
.jetdahao-contact-block .mb-6,
.jetdahao-editor-preview .mb-6 { margin-bottom: 1.5rem; }
.jetdahao-contact-block .mb-8,
.jetdahao-editor-preview .mb-8 { margin-bottom: 2rem; }

@media (min-width: 1024px) {
	.jetdahao-contact-block .lg\:p-8,
	.jetdahao-editor-preview .lg\:p-8 { padding: 2rem; }
	.jetdahao-contact-block .lg\:p-10,
	.jetdahao-editor-preview .lg\:p-10 { padding: 2.5rem; }
}

/* ---------- Borders & effects ---------- */

.jetdahao-contact-block .rounded,
.jetdahao-editor-preview .rounded { border-radius: 0.25rem; }
.jetdahao-contact-block .rounded-xl,
.jetdahao-editor-preview .rounded-xl { border-radius: 0.75rem; }
.jetdahao-contact-block .border,
.jetdahao-editor-preview .border { border-width: 1px; border-style: solid; }
.jetdahao-contact-block .border-dashed,
.jetdahao-editor-preview .border-dashed { border-style: dashed; }
.jetdahao-contact-block .resize-none,
.jetdahao-editor-preview .resize-none { resize: none; }
.jetdahao-contact-block .transition-colors,
.jetdahao-editor-preview .transition-colors { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }

/* ---------- Typography ---------- */

.jetdahao-contact-block .font-display,
.jetdahao-editor-preview .font-display { font-family: var(--jdh-font-display); }
.jetdahao-contact-block .font-medium,
.jetdahao-editor-preview .font-medium { font-weight: 500; }
.jetdahao-contact-block .font-semibold,
.jetdahao-editor-preview .font-semibold { font-weight: 600; }

.jetdahao-contact-block .text-h3,
.jetdahao-editor-preview .text-h3 {
	font-size: 1.375rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.jetdahao-contact-block .text-body,
.jetdahao-editor-preview .text-body {
	font-size: 0.875rem;
	line-height: 1.5;
}

.jetdahao-contact-block .text-body-sm,
.jetdahao-editor-preview .text-body-sm {
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* ---------- WAYLE arbitrary-value colors ---------- */

[class*="text-[var(--color-wayle-navy)]"] { color: var(--color-wayle-navy, #002c5d); }
[class*="text-[var(--color-text-secondary)]"] { color: var(--color-text-secondary, #4b5059); }
[class*="text-[var(--color-brand)]"] { color: var(--color-brand, #005fb8); }
[class*="text-[var(--color-wayle-coolgrey)]"] { color: var(--color-wayle-coolgrey, #6c727f); }
[class*="bg-[var(--color-bg-default)]"] { background-color: var(--color-bg-default, #f7f9fc); }
[class*="bg-[var(--color-brand-soft)]"] { background-color: var(--color-brand-soft, rgba(0, 95, 184, 0.12)); }
[class*="bg-[var(--color-wayle-glacier)]"] { background-color: var(--color-wayle-glacier, #dcebff); }
[class*="border-[var(--color-border-1)]"] { border-color: var(--color-border-1, rgba(0, 26, 56, 0.08)); }
[class*="border-[var(--color-border-2)]"] { border-color: var(--color-border-2, rgba(0, 26, 56, 0.16)); }

[class*="hover:border-[var(--color-brand)]"]:hover { border-color: var(--color-brand, #005fb8); }
[class*="hover:border-[var(--color-border-2)]"]:hover { border-color: var(--color-border-2, rgba(0, 26, 56, 0.16)); }
[class*="hover:bg-[var(--color-brand-soft)]"]:hover { background-color: var(--color-brand-soft, rgba(0, 95, 184, 0.12)); }
[class*="hover:bg-[var(--color-overlay-1)]"]:hover { background-color: var(--color-overlay-1, rgba(0, 95, 184, 0.06)); }
[class*="focus:ring-[var(--color-brand)]"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-brand-soft, rgba(0, 95, 184, 0.12));
}

/* ---------- Component classes ---------- */

.jetdahao-contact-block .card,
.jetdahao-editor-preview .card {
	background-color: var(--jdh-surface, #ffffff);
	border: 1px solid var(--color-border-1, rgba(0, 26, 56, 0.08));
	border-radius: var(--jdh-radius-3xl, 1rem);
	box-shadow: var(--jdh-shadow-soft, 0 4px 24px rgba(0, 26, 56, 0.07));
}

.jetdahao-contact-block .card-hover,
.jetdahao-editor-preview .card-hover {
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.jetdahao-contact-block .card-hover:hover,
.jetdahao-editor-preview .card-hover:hover {
	border-color: var(--color-border-2, rgba(0, 26, 56, 0.16));
	box-shadow: 0 10px 32px rgba(0, 26, 56, 0.12);
	transform: translateY(-2px);
	text-decoration: none;
}

.jetdahao-contact-block .form-label,
.jetdahao-editor-preview .form-label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-secondary, #4b5059);
	margin-bottom: 0.5rem;
}

.jetdahao-contact-block .form-input,
.jetdahao-editor-preview .form-input {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--jdh-text, #202124);
	background-color: var(--jdh-bg, #ffffff);
	border: 1px solid var(--color-border-2, rgba(0, 26, 56, 0.16));
	border-radius: var(--jdh-radius-xl, 0.625rem);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.jetdahao-contact-block .form-input::placeholder,
.jetdahao-editor-preview .form-input::placeholder {
	color: #9399a3;
}

.jetdahao-contact-block .form-input:hover,
.jetdahao-editor-preview .form-input:hover {
	border-color: var(--color-border-2, rgba(0, 26, 56, 0.24));
}

.jetdahao-contact-block .form-input:focus,
.jetdahao-editor-preview .form-input:focus {
	outline: none;
	border-color: var(--color-brand, #005fb8);
	box-shadow: 0 0 0 3px var(--color-brand-soft, rgba(0, 95, 184, 0.12));
}

.jetdahao-contact-block .form-select,
.jetdahao-editor-preview .form-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C727F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 2.5rem;
}

.jetdahao-contact-block .btn,
.jetdahao-editor-preview .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
	font-weight: 500;
	padding: 0.75rem 1.5rem;
	border-radius: var(--jdh-radius-full, 9999px);
	transition: all 0.2s ease;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	box-sizing: border-box;
}

.jetdahao-contact-block .btn-primary,
.jetdahao-editor-preview .btn-primary {
	background-color: var(--color-brand, #005fb8);
	color: #ffffff;
	box-shadow: var(--jdh-shadow-button, 0 4px 14px rgba(0, 95, 184, 0.28));
}

.jetdahao-contact-block .btn-primary:hover,
.jetdahao-editor-preview .btn-primary:hover {
	background-color: #2e8fff;
}

.jetdahao-contact-block .btn-primary:disabled,
.jetdahao-editor-preview .btn-primary:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* File upload dropzone */
.jetdahao-contact-block .file-input-wrapper,
.jetdahao-editor-preview .file-input-wrapper {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
}

.jetdahao-contact-block .file-input-wrapper input[type="file"],
.jetdahao-editor-preview .file-input-wrapper input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Reveal animation (WAYLE) - always visible in fallback mode */
.jetdahao-contact-block .reveal,
.jetdahao-editor-preview .reveal {
	opacity: 1;
	transform: none;
}

/* Status message colors */
.jetdahao-contact-block .bg-emerald-50,
.jetdahao-editor-preview .bg-emerald-50 { background-color: #ecfdf5; }
.jetdahao-contact-block .text-emerald-700,
.jetdahao-editor-preview .text-emerald-700 { color: #047857; }
.jetdahao-contact-block .bg-red-50,
.jetdahao-editor-preview .bg-red-50 { background-color: #fef2f2; }
.jetdahao-contact-block .text-red-700,
.jetdahao-editor-preview .text-red-700 { color: #b91c1c; }

/* Honeypot */
.jetdahao-honeypot {
	display: none !important;
}

/* Per-field instant validation */
.jetdahao-contact-block .jdh-field-error,
.jetdahao-editor-preview .jdh-field-error {
	margin-top: 0.375rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: #dc2626;
}

.jetdahao-contact-block .jdh-input-invalid,
.jetdahao-editor-preview .jdh-input-invalid {
	border-color: #dc2626 !important;
}

/* ---------- Editor canvas ---------- */

.jetdahao-editor-preview {
	max-width: none;
	margin: 0;
}

.block-editor-block-list__block .jetdahao-editor-preview {
	pointer-events: auto;
}

/*
 * useBlockProps（apiVersion 3 工具栏所必需）会从主题全局样式注入
 * has-global-padding 及全局左右 padding，导致区块在编辑器中内缩、不铺满。
 * 该 class 实际挂在「块包装器」上（异步注入，JS 过滤拦不住），这里在
 * CSS 层兜底：同时归零 padding 与根因 CSS 变量。前端渲染不受影响。
 */
.block-editor-block-list__block.has-global-padding,
.block-editor-block-list__block .block-editor-block-list__block-edit > .has-global-padding,
.block-editor-block-list__block .jetdahao-editor-preview.has-global-padding {
	padding: 0 !important;
	--wp--style--root--padding-right: 0 !important;
	--wp--style--root--padding-left: 0 !important;
}

/*
 * In the editor only the server-rendered form fragment stays inert so the
 * canvas can be selected by clicking anywhere else. The inline editing
 * surface (RichText, icon picker buttons) must remain interactive.
 */
.block-editor-block-list__block .jetdahao-editor-preview .jetdahao-submit-form a,
.block-editor-block-list__block .jetdahao-editor-preview .jetdahao-submit-form button,
.block-editor-block-list__block .jetdahao-editor-preview .jetdahao-submit-form input,
.block-editor-block-list__block .jetdahao-editor-preview .jetdahao-submit-form select,
.block-editor-block-list__block .jetdahao-editor-preview .jetdahao-submit-form textarea,
.block-editor-block-list__block .jetdahao-editor-preview .jetdahao-submit-form label {
	pointer-events: none;
}

/* ---------- Icon picker (click-to-replace) ---------- */

.jetdahao-icon-picker {
	min-width: 220px;
	padding: 10px;
}

.jetdahao-icon-picker__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
	margin-bottom: 10px;
}

.jetdahao-icon-picker__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	background: #fff;
	color: var(--color-wayle-navy, #002c5d);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.jetdahao-icon-picker__item:hover {
	border-color: var(--color-brand, #005fb8);
	color: var(--color-brand, #005fb8);
	background: var(--color-overlay-1, rgba(0, 95, 184, 0.06));
}

/* ---------- Quick card link editor (canvas) ---------- */

.block-editor-block-list__block .jetdahao-editor-preview .jetdahao-quick-link-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	line-height: 1.5;
	/* 与前端卡片文字区域（label 的 py-1）保持统一的内边距 */
	padding: 0.25rem 0.5rem;
}

.block-editor-block-list__block .jetdahao-editor-preview .jetdahao-quick-link-label {
	color: var(--color-wayle-navy, #002c5d);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.625;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease;
}

.block-editor-block-list__block .jetdahao-editor-preview .jetdahao-quick-link-label:hover {
	color: var(--color-brand, #005fb8);
	text-decoration: underline;
}

.block-editor-block-list__block .jetdahao-editor-preview .jetdahao-quick-link-label.is-empty {
	color: var(--color-text-secondary, #4b5059);
	font-weight: 400;
	opacity: 0.65;
}

/* 链接面板：卡片文字（RichText）原地编辑器 */
.jetdahao-quick-link-label-editor {
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #1d2327;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	cursor: text;
}

.jetdahao-quick-link-label-editor:focus {
	outline: none;
	border-color: var(--color-brand, #005fb8);
	box-shadow: 0 0 0 1px var(--color-brand, #005fb8);
}

/* 链接面板：URL 输入与开关的统一垂直间距 */
.jetdahao-quick-link-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.jetdahao-quick-link-form .components-base-control {
	margin-bottom: 0;
}

/* 链接面板：完成按钮（与 Gutenberg 原生 is-primary 风格一致） */
.jetdahao-quick-link-done {
	/* 与上方 input 的左右 padding（12px）对齐，宽度一致 */
	width: calc(100% - 24px);
	margin: 4px 12px 16px;
	justify-content: center;
	border-radius: 5px;
	height: 32px;
	min-height: 32px;
	padding: 0 16px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}