/**
 * IoTNEWS 会員管理 フロントフォーム用スタイル
 *
 * 3番目のCTAデザイン（カード型・特典ボックス・2カラム・オレンジボタン）を
 * 既定で適用する。色や余白は :root のカスタムプロパティで上書き可能。
 * 各クラスはテーマCSSからも上書きできる（詳細度は低めに保っている）。
 */

:root {
	--iotnews-accent: #f15a24;          /* メインのオレンジ（ボタン等） */
	--iotnews-accent-hover: #d94e1c;
	--iotnews-danger: #b32d2e;          /* 退会ボタン */
	--iotnews-required: #e3342f;        /* 必須タグ */
	--iotnews-border: #d8dee4;
	--iotnews-text: #1f2933;
	--iotnews-muted: #6b7682;
	--iotnews-card-bg: #ffffff;
	--iotnews-card-radius: 16px;
	--iotnews-field-radius: 10px;
	--iotnews-gap: 18px;
}

/* ── カード本体 ───────────────────────────── */
.iotnews-form--register,
.iotnews-form--profile {
	box-sizing: border-box;
	max-width: 620px;
	margin: 0 auto;
	padding: 32px;
	background: var(--iotnews-card-bg);
	border-radius: var(--iotnews-card-radius);
	box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
	color: var(--iotnews-text);
}
.iotnews-form * {
	box-sizing: border-box;
}

/* ── 登録特典ボックス ─────────────────────── */
.iotnews-gift {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 18px;
	margin-bottom: 24px;
	background: #fdf3e3;
	border: 1px solid #f3dcb5;
	border-radius: 12px;
}
.iotnews-gift__icon {
	font-size: 22px;
	line-height: 1.4;
}
.iotnews-gift__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.iotnews-gift__title {
	font-weight: 700;
	font-size: 14px;
}
.iotnews-gift__text {
	font-size: 13px;
	color: var(--iotnews-muted);
}

/* ── フィールドのグリッド（2カラム） ───────── */
.iotnews-form__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--iotnews-gap);
}
.iotnews-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
/* 全幅（メールアドレス・パスワード等） */
.iotnews-field--full {
	grid-column: 1 / -1;
}

/* ── ラベルと必須タグ ─────────────────────── */
.iotnews-field__label {
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.iotnews-field__required {
	font-size: 11px;
	font-weight: 700;
	color: var(--iotnews-required);
	line-height: 1;
}

/* ── 入力・セレクト ───────────────────────── */
.iotnews-field__control {
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	color: var(--iotnews-text);
	background: #fff;
	border: 1px solid var(--iotnews-border);
	border-radius: var(--iotnews-field-radius);
	appearance: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.iotnews-field__control:focus {
	outline: none;
	border-color: var(--iotnews-accent);
	box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.15);
}
.iotnews-field__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7682' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
	cursor: pointer;
}

/* ── 同意ボックス ─────────────────────────── */
.iotnews-consent {
	margin: 22px 0 6px;
	padding: 14px 16px;
	background: #f7f8fa;
	border: 1px solid var(--iotnews-border);
	border-radius: 12px;
}
.iotnews-consent__label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.7;
	color: var(--iotnews-text);
	cursor: pointer;
}
.iotnews-consent__checkbox {
	margin-top: 3px;
	flex: 0 0 auto;
}
.iotnews-consent__text a {
	color: var(--iotnews-accent);
	text-decoration: underline;
}

/* ── 送信ボタン ───────────────────────────── */
.iotnews-form__actions {
	margin-top: 22px;
}
.iotnews-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 20px;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	background: var(--iotnews-accent);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.15s, transform 0.05s;
}
.iotnews-submit:hover {
	background: var(--iotnews-accent-hover);
}
.iotnews-submit:active {
	transform: translateY(1px);
}
.iotnews-submit--danger {
	background: var(--iotnews-danger);
}
.iotnews-submit--danger:hover {
	background: #98262a;
}
.iotnews-submit__arrow {
	font-size: 16px;
}

/* ── フッター注記 ─────────────────────────── */
.iotnews-formnote {
	margin: 14px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--iotnews-muted);
}

/* ── 退会フォーム ─────────────────────────── */
.iotnews-form--withdraw {
	max-width: 620px;
	margin: 0 auto;
}
.iotnews-withdraw__lead {
	font-size: 14px;
	color: var(--iotnews-text);
}

/* ── 通知メッセージ ───────────────────────── */
.iotnews-notice {
	max-width: 620px;
	margin: 0 auto 16px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
}
.iotnews-notice--error {
	color: #842029;
	background: #f8d7da;
	border: 1px solid #f1aeb5;
}
.iotnews-notice--success {
	color: #0f5132;
	background: #d1e7dd;
	border: 1px solid #a3cfbb;
}

/* ── ログインフォーム（WP標準）の最低限の整え ─ */
.iotnews-account .iotnews-form,
.iotnews-account form[name="loginform"] {
	max-width: 620px;
	margin: 0 auto 28px;
}

/* ── レスポンシブ ─────────────────────────── */
@media (max-width: 600px) {
	.iotnews-form--register,
	.iotnews-form--profile {
		padding: 22px 18px;
	}
	.iotnews-form__fields {
		grid-template-columns: 1fr;
	}
}