/*!
 * Hosuke - Restock Notify for Welcart
 * frontend.css
 *
 * BEM 風命名: .hosuke-{block}__{element}--{modifier}
 * WordPress のテーマスタイルと衝突しないよう、すべて .hosuke- prefix。
 *
 * カラーは CSS カスタムプロパティで上書き可能。テーマ側で:
 *   .hosuke-notify-button, .hosuke-form__submit {
 *       --hosuke-primary: #your-color;
 *   }
 */

:root {
	--hosuke-primary:       #ff8300; /* Welcart Basic の CTA オレンジ */
	--hosuke-primary-hover: #e07600;
	--hosuke-primary-fg:    #ffffff;
	--hosuke-border:        #d1d5db;
	--hosuke-text:          #1a202c;
	--hosuke-muted:         #4a5568;
	--hosuke-bg-soft:       #f7fafc;
}

/* -----------------------------------------------------------------------
 * Notify button (売切ラベル横に挿入されるボタン)
 *
 * デザイン方針:
 *   - HTML は `class="skubutton hosuke-notify-button"` の 2 クラス構成
 *     (Welcart Basic のように `input[type=submit].skubutton` 限定セレクタで
 *      定義されているテーマだと <button> 要素だと効かないため、
 *      hosuke 側でも同等サイズを明示指定する。テーマが独自の .skubutton
 *      スタイルを持つ場合は、後述の CSS 変数 or カスタム CSS で上書き可能)
 *   - 「アウトライン → hover でソリッド化」で通知系ボタンらしさを出し、
 *     カート (ソリッド塗り) と視覚的に差別化する
 *   - ベルアイコン (SVG) を左に配置し、メール通知であることを明示
 * ----------------------------------------------------------------------- */
.hosuke-notify-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 0 8px;
	padding: 15px 24px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 1px;
	vertical-align: middle;

	/* アウトラインパターン: 塗りは透明、枠と文字がプライマリ色 */
	color: var(--hosuke-primary);
	background-color: transparent;
	background-image: none;
	border: 1.5px solid var(--hosuke-primary);
	border-radius: 3px;
	box-sizing: border-box;

	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.hosuke-notify-button:hover,
.hosuke-notify-button:focus {
	/* hover: skubutton と同じ「オレンジ塗り + 白字」に反転 */
	color: var(--hosuke-primary-fg);
	background-color: var(--hosuke-primary);
	border-color: var(--hosuke-primary);
	outline: none;
	text-decoration: none;
}

.hosuke-notify-button:focus-visible {
	outline: 2px solid var(--hosuke-primary);
	outline-offset: 2px;
}

.hosuke-notify-button:disabled {
	color: #a0aec0;
	background-color: transparent;
	border-color: #a0aec0;
	cursor: not-allowed;
}

.hosuke-notify-button__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	stroke: currentColor;
}

.hosuke-notify-button__label {
	display: inline-block;
	line-height: inherit;
}

/* -----------------------------------------------------------------------
 * Modal
 * ----------------------------------------------------------------------- */
.hosuke-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
}

.hosuke-modal[hidden] {
	display: none;
}

.hosuke-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.hosuke-modal__panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 2rem);
	padding: 2rem 1.75rem 1.5rem;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	overflow-y: auto;
	box-sizing: border-box;
}

.hosuke-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--hosuke-muted);
	background: transparent;
	border: none;
	cursor: pointer;
	border-radius: 4px;
}

.hosuke-modal__close:hover,
.hosuke-modal__close:focus {
	color: var(--hosuke-text);
	background-color: #edf2f7;
	outline: none;
}

.hosuke-modal__title {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--hosuke-text);
}

.hosuke-modal__product {
	margin-bottom: 1.25rem;
	padding: 0.75rem 1rem;
	background-color: var(--hosuke-bg-soft);
	border-radius: 4px;
	border-left: 3px solid var(--hosuke-primary);
}

.hosuke-modal__item-name {
	font-weight: 600;
	color: var(--hosuke-text);
}

.hosuke-modal__sku-name {
	margin-top: 0.25rem;
	font-size: 0.9em;
	color: var(--hosuke-muted);
}

.hosuke-modal__sku-name:empty {
	display: none;
}

/* -----------------------------------------------------------------------
 * Form
 * ----------------------------------------------------------------------- */
.hosuke-form__field {
	margin-bottom: 1rem;
}

.hosuke-form__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.9em;
	font-weight: 600;
	color: #2d3748;
}

.hosuke-form__input {
	display: block;
	width: 100%;
	padding: 0.6em 0.75em;
	font-size: 1em;
	color: var(--hosuke-text);
	background-color: #fff;
	border: 1px solid #cbd5e0;
	border-radius: 4px;
	box-sizing: border-box;
}

.hosuke-form__input:focus {
	border-color: var(--hosuke-primary);
	outline: 2px solid rgba(255, 131, 0, 0.25);
	outline-offset: 0;
}

.hosuke-form__field--consent {
	margin-bottom: 1.25rem;
}

.hosuke-form__consent-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.9em;
	color: var(--hosuke-muted);
	cursor: pointer;
}

.hosuke-form__consent-label input[type="checkbox"] {
	margin-top: 0.25rem;
	flex-shrink: 0;
}

.hosuke-form__consent-label a {
	color: var(--hosuke-primary);
	text-decoration: underline;
}

.hosuke-form__actions {
	margin-bottom: 0.75rem;
}

.hosuke-form__submit {
	display: block;
	width: 100%;
	padding: 0.75em 1.5em;
	font-family: inherit;
	font-size: 1em;
	font-weight: bold;
	color: var(--hosuke-primary-fg);
	background-color: var(--hosuke-primary);
	border: 1px solid var(--hosuke-primary);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}

.hosuke-form__submit:hover,
.hosuke-form__submit:focus {
	background-color: var(--hosuke-primary-hover);
	border-color: var(--hosuke-primary-hover);
	outline: none;
}

.hosuke-form__submit:disabled {
	background-color: #a0aec0;
	border-color: #a0aec0;
	cursor: not-allowed;
}

/* -----------------------------------------------------------------------
 * Message area
 * ----------------------------------------------------------------------- */
.hosuke-form__message {
	margin-top: 0.75rem;
	padding: 0;
	font-size: 0.9em;
	line-height: 1.5;
	min-height: 1.5em;
}

.hosuke-form__message:empty {
	padding: 0;
	margin-top: 0;
}

.hosuke-form__message--success {
	padding: 0.6em 0.75em;
	color: #22543d;
	background-color: #f0fff4;
	border-left: 3px solid #38a169;
	border-radius: 3px;
}

.hosuke-form__message--error {
	padding: 0.6em 0.75em;
	color: #742a2a;
	background-color: #fff5f5;
	border-left: 3px solid #e53e3e;
	border-radius: 3px;
}

/* -----------------------------------------------------------------------
 * Unsubscribe page (解除ページ)
 * ----------------------------------------------------------------------- */
.hosuke-unsubscribe-wrap {
	max-width: 640px;
	margin: 48px auto;
	padding: 0 20px;
	font-family: inherit;
	color: var(--hosuke-text);
	line-height: 1.6;
}

.hosuke-unsubscribe__card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 40px 32px 32px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.hosuke-unsubscribe__status {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 28px;
}

.hosuke-unsubscribe__icon {
	width: 56px;
	height: 56px;
	margin-bottom: 12px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
}

.hosuke-unsubscribe__icon--success {
	background-color: #38a169;
}

.hosuke-unsubscribe__icon--info {
	background-color: #6b7280;
}

.hosuke-unsubscribe__icon--error {
	background-color: #e53e3e;
}

.hosuke-unsubscribe__icon svg {
	width: 32px;
	height: 32px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hosuke-unsubscribe__title {
	margin: 0 0 8px;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hosuke-text);
}

.hosuke-unsubscribe__lead {
	margin: 0;
	color: var(--hosuke-muted);
	font-size: 0.95em;
}

.hosuke-unsubscribe__details {
	margin: 0 0 28px;
	padding: 20px 24px;
	background-color: var(--hosuke-bg-soft);
	border-radius: 6px;
	border-left: 3px solid var(--hosuke-primary);
}

.hosuke-unsubscribe__details-heading {
	margin: 0 0 12px;
	font-size: 0.85em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hosuke-muted);
}

.hosuke-unsubscribe__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.hosuke-unsubscribe__row:last-child {
	border-bottom: none;
}

.hosuke-unsubscribe__row-label {
	flex: 0 0 96px;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--hosuke-muted);
}

.hosuke-unsubscribe__row-value {
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-word;
	color: var(--hosuke-text);
}

.hosuke-unsubscribe__row-value a {
	color: var(--hosuke-primary);
	text-decoration: underline;
}

.hosuke-unsubscribe__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
}

.hosuke-unsubscribe__button {
	display: inline-block;
	padding: 10px 24px;
	font-family: inherit;
	font-size: 0.95em;
	font-weight: bold;
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}

.hosuke-unsubscribe__button--primary {
	color: var(--hosuke-primary-fg);
	background-color: var(--hosuke-primary);
	border: 1px solid var(--hosuke-primary);
}

.hosuke-unsubscribe__button--primary:hover,
.hosuke-unsubscribe__button--primary:focus {
	color: var(--hosuke-primary-fg);
	background-color: var(--hosuke-primary-hover);
	border-color: var(--hosuke-primary-hover);
	text-decoration: none;
	outline: none;
}

.hosuke-unsubscribe__button--secondary {
	color: var(--hosuke-muted);
	background-color: #fff;
	border: 1px solid var(--hosuke-border);
}

.hosuke-unsubscribe__button--secondary:hover,
.hosuke-unsubscribe__button--secondary:focus {
	color: var(--hosuke-text);
	background-color: var(--hosuke-bg-soft);
	border-color: #9ca3af;
	text-decoration: none;
	outline: none;
}

.hosuke-unsubscribe__error {
	padding: 16px 20px;
	color: #742a2a;
	background-color: #fff5f5;
	border-left: 3px solid #e53e3e;
	border-radius: 4px;
	margin-bottom: 20px;
}

/* --- 会員モードの一覧テーブル --- */
.hosuke-my-notifications {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 0.95em;
}

.hosuke-my-notifications th,
.hosuke-my-notifications td {
	padding: 10px 12px;
	border: 1px solid #e5e7eb;
	text-align: left;
	vertical-align: middle;
}

.hosuke-my-notifications thead th {
	background-color: var(--hosuke-bg-soft);
	font-weight: 600;
	color: var(--hosuke-muted);
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.hosuke-my-notifications tbody tr:nth-child(even) {
	background-color: #fafbfc;
}

.hosuke-my-notifications a {
	color: var(--hosuke-primary);
	text-decoration: underline;
}

/* モバイル対応 */
@media (max-width: 480px) {
	.hosuke-unsubscribe-wrap {
		margin: 24px auto;
	}
	.hosuke-unsubscribe__card {
		padding: 28px 20px 24px;
	}
	.hosuke-unsubscribe__row {
		flex-direction: column;
		gap: 4px;
	}
	.hosuke-unsubscribe__row-label {
		flex: none;
	}
	.hosuke-unsubscribe__actions {
		flex-direction: column;
	}
	.hosuke-unsubscribe__button {
		width: 100%;
		box-sizing: border-box;
	}
}

/* -----------------------------------------------------------------------
 * Reduced motion
 * ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hosuke-notify-button,
	.hosuke-form__submit,
	.hosuke-unsubscribe__button {
		transition: none;
	}
}

/* -----------------------------------------------------------------------
 * My-notifications section (Welcart my-page 用の会員通知一覧)
 *
 * デザイン方針: Welcart Basic のカート (id="cart_table") と同一の
 * 実測スタイルにピクセル一致で合わせる。
 *   - table: border-collapse:collapse / border: 1px dotted #ccc
 *   - th   : background #efefef, color #262626, font 14px 700, padding 5px,
 *            border 1px solid #ccc, text-align center
 *   - td   : padding 5px, border 1px solid #ccc, font 14px, vertical-align middle
 *   - h3   : font 14px 700, border-bottom 1px solid #ccc, margin 30px 0 20px
 *
 * ステータスバッジ / 解除ボタンなど「Welcart カートには無いが Hosuke 独自」
 * の要素だけ hosuke-* 名前空間のクラスで追加スタイル。
 * ----------------------------------------------------------------------- */
.hosuke-my-notifications {
	margin: 32px 0;
}

.hosuke-my-notifications__title {
	/* Welcart Basic の h3 と同一値 */
	margin: 30px 0 20px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	border-bottom: 1px solid #cccccc;
	line-height: 1.6;
}

.hosuke-my-notifications__empty {
	margin: 0;
	padding: 12px;
	border: 1px solid #cccccc;
	color: #262626;
	font-size: 14px;
}

.hosuke-my-notifications__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border: 1px dotted #cccccc;
	background: transparent;
}

.hosuke-my-notifications__table thead th {
	padding: 5px;
	background: #efefef;
	color: #262626;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	border: 1px solid #cccccc;
	vertical-align: middle;
}

.hosuke-my-notifications__table tbody td {
	padding: 5px;
	font-size: 14px;
	border: 1px solid #cccccc;
	vertical-align: middle;
	color: #262626;
}

/* Welcart カートと同じ意味的セルクラス (num / thumbnail / productname / unitprice / stock / action) */
.hosuke-my-notifications__table .num {
	width: 40px;
	text-align: center;
}

.hosuke-my-notifications__table .thumbnail {
	width: 60px;
	text-align: center;
}

.hosuke-my-notifications__table .thumbnail img {
	max-width: 48px;
	height: auto;
	vertical-align: middle;
	border: none;
}

.hosuke-my-notifications__table .productname {
	text-align: left;
}

.hosuke-my-notifications__table td.productname a {
	color: #262626;
	text-decoration: none;
	font-weight: 400;
}

.hosuke-my-notifications__table td.productname a:hover {
	color: var(--hosuke-primary);
	text-decoration: underline;
}

.hosuke-my-notifications__table .unitprice {
	width: 90px;
	text-align: right;
	white-space: nowrap;
}

.hosuke-my-notifications__table .stock {
	width: 110px;
	text-align: center;
}

.hosuke-my-notifications__table .action {
	width: 90px;
	text-align: center;
}

.hosuke-my-notifications__table .aleft {
	text-align: left;
}

.hosuke-my-notifications__table .aright {
	text-align: right;
}

/* SKU 表示名・SKU コード (productname セル内の補足行) */
.hosuke-my-notifications__sku-name,
.hosuke-my-notifications__sku-code {
	display: inline-block;
	font-size: 0.85em;
	color: #718096;
	line-height: 1.4;
}

.hosuke-my-notifications__sku-code {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ステータスバッジ (Welcart カートには無い Hosuke 独自の視覚要素) */
.hosuke-my-notifications__status {
	display: inline-block;
	padding: 3px 10px;
	background: #edf2f7;
	border-radius: 3px;
	font-size: 0.85em;
	color: #4a5568;
	white-space: nowrap;
	line-height: 1.4;
}

.hosuke-my-notifications__status--notified {
	background: #c6f6d5;
	color: #22543d;
}

.hosuke-my-notifications__status--queued {
	background: #fef3c7;
	color: #92400e;
}

/* 解除ボタン (アウトライン → hover でソリッド反転) */
.hosuke-my-notifications__unsub {
	display: inline-block;
	padding: 4px 10px;
	font-size: 0.85em;
	color: var(--hosuke-primary);
	background: transparent;
	border: 1px solid var(--hosuke-primary);
	border-radius: 3px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hosuke-my-notifications__unsub:hover,
.hosuke-my-notifications__unsub:focus {
	color: #fff;
	background: var(--hosuke-primary);
	text-decoration: none;
}

/* モバイル (Welcart カートも同様の data-label ベースの縦積み) */
@media (max-width: 720px) {
	.hosuke-my-notifications__table,
	.hosuke-my-notifications__table thead,
	.hosuke-my-notifications__table tbody,
	.hosuke-my-notifications__table tr,
	.hosuke-my-notifications__table td,
	.hosuke-my-notifications__table th {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	.hosuke-my-notifications__table thead {
		display: none;
	}
	.hosuke-my-notifications__table tbody tr {
		border-top: 1px solid #cccccc;
		padding: 8px;
	}
	.hosuke-my-notifications__table tbody td {
		border: none;
		padding: 4px 0;
		text-align: left !important;
	}
	.hosuke-my-notifications__table td.num {
		display: none !important;
	}
	.hosuke-my-notifications__table td[data-label]::before {
		content: attr(data-label) " : ";
		font-weight: 700;
		margin-right: 8px;
	}
	.hosuke-my-notifications__table td.thumbnail::before,
	.hosuke-my-notifications__table td.action::before {
		content: "";
	}
	.hosuke-my-notifications__table .thumbnail {
		text-align: left !important;
	}
}