/*
NEKONE Contact - form styles
自己完結型のスタイルシート(テーマ変更後も見た目が破綻しないよう、
テーマのCSS変数には依存せず色を直接指定しています)。
*/

.nekone-contact-form {
	--nc-base: #ffffff;
	--nc-contrast: #111111;
	--nc-dark-gray: #333333;
	--nc-gray: #6b6b6b;
	--nc-border: #e2e0db;
	--nc-light: #f5f4f1;
	--nc-error: #b3261e;
	--nc-error-bg: #fbeceb;

	max-width: 640px;
	margin: 0 auto;
	color: var(--nc-contrast);
	font-size: 1rem;
	line-height: 1.7;
}

.nekone-contact-form * {
	box-sizing: border-box;
}

/* 通知(成功・失敗) */
.nc-notice {
	border: 1px solid var(--nc-contrast);
	background: var(--nc-light);
	padding: 20px;
	margin-bottom: 28px;
}

.nc-notice p {
	margin: 0;
}

.nc-notice-sub {
	margin-top: 10px !important;
	font-size: 0.85rem;
	color: var(--nc-gray);
}

.nc-notice-info {
	border-color: var(--nc-border);
	background: var(--nc-light);
	color: var(--nc-dark-gray);
	font-size: 0.9rem;
}

.nc-notice-error {
	border-color: var(--nc-error);
	background: var(--nc-error-bg);
	color: var(--nc-error);
}

/* フォーム項目 */
.nc-field {
	margin-bottom: 22px;
}

.nc-field label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 8px;
	color: var(--nc-contrast);
}

.nc-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 8px;
	vertical-align: middle;
}

.nc-badge-required {
	background: var(--nc-contrast);
	color: var(--nc-base);
}

.nc-badge-optional {
	background: var(--nc-light);
	color: var(--nc-gray);
	border: 1px solid var(--nc-border);
}

.nc-field input[type="text"],
.nc-field input[type="email"],
.nc-field input[type="url"],
.nc-field select,
.nc-field textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--nc-contrast);
	background: var(--nc-base);
	border: 1px solid var(--nc-border);
	border-radius: 2px;
	appearance: none;
	-webkit-appearance: none;
}

.nc-field select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%236b6b6b' d='M5.25 7.5l4.75 5 4.75-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

.nc-field textarea {
	min-height: 160px;
	resize: vertical;
}

.nc-field input:focus,
.nc-field select:focus,
.nc-field textarea:focus {
	outline: 2px solid var(--nc-contrast);
	outline-offset: 1px;
	border-color: var(--nc-contrast);
}

.nc-field input[aria-invalid="true"],
.nc-field select[aria-invalid="true"],
.nc-field textarea[aria-invalid="true"] {
	border-color: var(--nc-error);
}

.nc-error {
	display: block;
	margin-top: 6px;
	font-size: 0.85rem;
	color: var(--nc-error);
}

/* チェックボックス */
.nc-field-checkbox label {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-weight: 400;
	font-size: 0.95rem;
	cursor: pointer;
}

.nc-field-checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: none;
	margin: 0;
	accent-color: var(--nc-contrast);
}

.nc-field-checkbox a {
	color: var(--nc-contrast);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* honeypot(人間には見えないよう画面外へ) */
.nc-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

/* 送信ボタン */
.nc-submit {
	margin-top: 32px;
}

.nc-submit button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 14px 32px;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--nc-base);
	background: var(--nc-contrast);
	border: none;
	border-radius: 2px;
	cursor: pointer;
}

.nc-submit button:hover {
	background: var(--nc-dark-gray);
}

.nc-submit button:focus-visible {
	outline: 2px solid var(--nc-contrast);
	outline-offset: 3px;
}

@media (min-width: 600px) {
	.nc-submit button {
		width: auto;
		min-width: 220px;
	}
}