/**
 * ACS Content for WooCommerce — フロントエンド
 *
 * 方針（再設計案 §3-4）:
 *   - テーマに寄り添う。色・角丸・フォントはテーマの CSS 変数を継承し、
 *     無い場合だけフォールバック値を使う。
 *   - v2 の固定紫グラデーション（#667eea → #764ba2）は廃止。
 *     Paywall と投げ銭は同じ視覚言語にそろえる。
 *   - 絵文字は使わない。装飾が必要ならインライン SVG（現状は不要）。
 *   - このファイルはブロックのあるページにしか読み込まれない
 *     （v2 は Paywall の無い記事にも <style> を出していた）。
 *
 * 変数はブロックのルートで定義する。:root に置くとテーマの
 * デザイントークンと衝突する可能性があるため、必ずスコープを切る。
 */

.acscw-paywall,
.acscw-tip,
.acscw-notice,
.acscw-order-return,
.acscw-modal {
	--acscw-fg: var( --wp--preset--color--contrast, #1d2327 );
	--acscw-bg: var( --wp--preset--color--base, #ffffff );
	--acscw-muted: color-mix( in srgb, var( --acscw-fg ) 62%, transparent );
	--acscw-border: color-mix( in srgb, var( --acscw-fg ) 18%, transparent );
	--acscw-accent: var( --wp--preset--color--primary, var( --wp--preset--color--contrast, #1d2327 ) );
	--acscw-accent-fg: var( --wp--preset--color--base, #ffffff );
	--acscw-radius: 12px;
	--acscw-gap: 1rem;

	box-sizing: border-box;
	color: var( --acscw-fg );
	font-family: inherit;
}

/* color-mix() を解釈しないブラウザ向けのフォールバック。 */
@supports not ( color: color-mix( in srgb, #000 50%, transparent ) ) {

	.acscw-paywall,
	.acscw-tip,
	.acscw-notice,
	.acscw-order-return,
	.acscw-modal {
		--acscw-muted: #646970;
		--acscw-border: #dcdcde;
	}
}

.acscw-paywall *,
.acscw-tip *,
.acscw-modal * {
	box-sizing: inherit;
}

/* --------------------------------------------------------------------------
 * Paywall
 * -------------------------------------------------------------------------- */

.acscw-paywall {
	margin: 0 0 2rem;
}

/**
 * 本文の末尾を自然にフェードさせる（壁で断ち切らない）。
 * 負の margin で直前の無料本文へ重ねる。
 *
 * position は必須。指定が無いと、負の margin で位置だけ重なっても
 * CSS のペイント順で直前の段落のインラインテキストが常に上に描かれ、
 * フェードがまったく見えない（実環境で確認）。
 */
.acscw-paywall__fade {
	position: relative;
	height: 6rem;
	margin-top: -6rem;
	margin-bottom: 1.5rem;
	pointer-events: none;
	background: linear-gradient( to bottom, transparent 0%, var( --acscw-bg ) 88% );
}

.acscw-paywall__box {
	padding: 1.75rem 1.5rem;
	border: 1px solid var( --acscw-border );
	border-radius: var( --acscw-radius );
	text-align: center;
}

.acscw-paywall__eyebrow {
	margin: 0;
	font-size: 0.6875rem;
	line-height: 1;
}

.acscw-paywall__eyebrow span {
	display: inline-block;
	padding: 0.35em 0.85em;
	border: 1px solid var( --acscw-border );
	border-radius: 99px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var( --acscw-muted );
}

.acscw-paywall__headline {
	margin: 0.875rem 0 0.375rem;
	font-size: 1.25rem;
	line-height: 1.4;
	font-weight: 700;
}

.acscw-paywall__lede {
	margin: 0 auto 1.25rem;
	max-width: 34em;
	font-size: 0.875rem;
	line-height: 1.9;
	color: var( --acscw-muted );
}

.acscw-paywall__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0.5rem 0 1.25rem;
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.acscw-paywall__price-note {
	font-size: 0.75rem;
	font-weight: 400;
	color: var( --acscw-muted );
}

.acscw-paywall__action {
	margin: 0;
}

/**
 * 読者が押せるものはこれ1つだけ（柱2）。
 * テーマのボタンスタイルが .wp-element-button 前提のことがあるため、
 * こちらでも最低限の見た目を保証する。
 */
.acscw-paywall__cta {
	display: block;
	width: 100%;
	padding: 0.9375rem 1.25rem;
	border: 1px solid var( --acscw-accent );
	border-radius: calc( var( --acscw-radius ) - 4px );
	background: var( --acscw-accent );
	color: var( --acscw-accent-fg );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.acscw-paywall__cta:hover,
.acscw-paywall__cta:focus {
	color: var( --acscw-accent-fg );
	text-decoration: none;
	opacity: 0.88;
}

.acscw-paywall__cta:focus-visible {
	outline: 2px solid var( --acscw-accent );
	outline-offset: 2px;
}

.acscw-paywall__meta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	font-size: 0.6875rem;
	color: var( --acscw-muted );
}

.acscw-paywall__unavailable {
	margin: 0;
	font-size: 0.875rem;
	color: var( --acscw-muted );
}

/* 復旧導線。購入ボタンと張り合わない大きさに抑える。 */
.acscw-paywall__restore {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var( --acscw-border );
	font-size: 0.75rem;
	color: var( --acscw-muted );
}

.acscw-paywall__restore-link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.acscw-paywall__restore-link:hover {
	opacity: 0.75;
}

.acscw-paywall__restore-note {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	color: var( --acscw-muted );
}

/* --------------------------------------------------------------------------
 * 投げ銭
 * -------------------------------------------------------------------------- */

.acscw-tip {
	margin: 2rem 0;
	padding: 1.5rem;
	border: 1px solid var( --acscw-border );
	border-radius: var( --acscw-radius );
	text-align: center;
}

.acscw-tip__title {
	margin: 0 0 0.25rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.acscw-tip__lede {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	color: var( --acscw-muted );
}

.acscw-tip__amounts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 6rem, 1fr ) );
	gap: 0.625rem;
}

.acscw-tip__amount {
	display: block;
	padding: 0.875rem 0.5rem;
	border: 1px solid var( --acscw-border );
	border-radius: calc( var( --acscw-radius ) - 4px );
	color: var( --acscw-fg );
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.acscw-tip__amount:hover,
.acscw-tip__amount:focus {
	border-color: var( --acscw-accent );
	color: var( --acscw-fg );
	text-decoration: none;
}

.acscw-tip__amount.is-busy {
	background: var( --acscw-accent );
	border-color: var( --acscw-accent );
	color: var( --acscw-accent-fg );
	pointer-events: none;
}

.acscw-tip__note {
	margin: 0.875rem 0 0;
	font-size: 0.75rem;
	color: var( --acscw-muted );
}

/* --------------------------------------------------------------------------
 * 通知（acscw_notice = unavailable / cart_failed / link_expired）
 * -------------------------------------------------------------------------- */

.acscw-notice {
	margin: 0 0 1.5rem;
	padding: 0.875rem 1rem;
	border: 1px solid var( --acscw-border );
	border-left-width: 4px;
	border-radius: 4px;
	font-size: 0.875rem;
	line-height: 1.7;
}

.acscw-notice--error {
	border-left-color: #d63638;
}

.acscw-notice--warning {
	border-left-color: #dba617;
}

.acscw-notice--success {
	border-left-color: #00a32a;
}

/* --------------------------------------------------------------------------
 * 注文完了ページの「記事へ戻る」（ACSCW_Orders が出力）
 * -------------------------------------------------------------------------- */

.acscw-order-return {
	margin: 1.5rem 0;
}

.acscw-order-return__item {
	margin: 0 0 0.75rem;
}

.acscw-order-return__link {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	border-radius: calc( var( --acscw-radius ) - 4px );
	font-weight: 700;
	text-decoration: none;
}

/* 注文メールの本文にも同じクラスが出る（メールでは inline 化されるため最小限）。 */
.acscw-email-access {
	margin: 1rem 0;
	line-height: 1.7;
}

.acscw-email-access small {
	color: #646970;
	font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
 * アクセス復旧モーダル（frontend.js が生成する）
 * -------------------------------------------------------------------------- */

.acscw-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba( 0, 0, 0, 0.45 );
}

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

.acscw-modal__dialog {
	width: 100%;
	max-width: 26rem;
	max-height: 90vh;
	overflow-y: auto;
	padding: 1.5rem;
	border-radius: var( --acscw-radius );
	background: var( --acscw-bg );
	color: var( --acscw-fg );
	text-align: left;
}

.acscw-modal__title {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.acscw-modal__lede {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var( --acscw-muted );
}

.acscw-modal__label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.75rem;
	font-weight: 700;
}

.acscw-modal__input {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var( --acscw-border );
	border-radius: 6px;
	background: var( --acscw-bg );
	color: var( --acscw-fg );
	font: inherit;
	font-size: 1rem;
}

.acscw-modal__actions {
	display: flex;
	gap: 0.625rem;
	margin-top: 1rem;
}

.acscw-modal__submit,
.acscw-modal__close {
	padding: 0.6875rem 1rem;
	border-radius: 6px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.acscw-modal__submit {
	flex: 1 1 auto;
	border: 1px solid var( --acscw-accent );
	background: var( --acscw-accent );
	color: var( --acscw-accent-fg );
}

.acscw-modal__submit[disabled] {
	cursor: default;
	opacity: 0.6;
}

.acscw-modal__close {
	flex: 0 0 auto;
	border: 1px solid var( --acscw-border );
	background: none;
	color: var( --acscw-fg );
}

.acscw-modal__message {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.8;
}

.acscw-modal__message:empty {
	display: none;
}

.acscw-modal__message.is-error {
	color: #b32d2e;
}

@media ( prefers-reduced-motion: reduce ) {

	.acscw-modal,
	.acscw-paywall__cta,
	.acscw-tip__amount {
		transition: none;
	}
}