/**
 * クーポン連動価格の表示
 *
 * 仕様: features/blocks/coupon/COUPON_LINKED_PRICE_SPEC.md 5.5
 *
 * クーポン価格の行は通常価格と同じ要素・同じクラス
 * （p.food_price / .food-block__price / .drink-block__price）で出力されるため、
 * 右寄せ・税込表記の改行・文字色などは各テンプレートのスタイルをそのまま引き継ぐ。
 * ここではバッジと期間注記の見た目だけを定義し、行のレイアウトには手を入れない。
 *
 * 色は Arkhe のメインカラー（--ark-color--main。カスタマイザー →「色」で店舗ごとに設定）に追随する。
 * 店舗ごとに変えたい場合は、CSS Editor で次の変数を上書きする（テーマ本体の変更は不要）。
 *   :root { --coupon-price-label-bg: #c8390e; --coupon-price-label-color: #fff; }
 */

:root {
	--coupon-price-label-bg: var(--ark-color--main, #2c1810);
	--coupon-price-label-color: #fff;
}

/* ---- バッジ共通（通常価格ラベル／クーポンラベル） ---- */
.regular-price__label,
.coupon-price__label {
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
	padding: 0.15em 0.6em;
	border-radius: 3px;
	font-size: 0.72em;
	font-weight: normal;
	line-height: 1.5;
	letter-spacing: 0.02em;
	/* 長いラベルは折り返す（行の揃いを崩さないため、nowrap にはしない） */
	white-space: normal;
	overflow-wrap: anywhere;
}

/* 通常価格：枠線のみの控えめなラベル */
.regular-price__label {
	border: 1px solid currentColor;
	opacity: 0.65;
}

/* クーポン価格（適用中）：塗りつぶしのラベル */
.coupon-price__label {
	background-color: var(--coupon-price-label-bg);
	border: 1px solid var(--coupon-price-label-bg);
	color: var(--coupon-price-label-color);
}

/* 適用期間「（9/01〜9/30まで）」。バッジ内に置き、途中で改行させない */
.coupon-price__period {
	font-weight: normal;
	opacity: 0.85;
	white-space: nowrap;
}

/*
 * 開始日前（予告）も適用中と同じ見た目にする。
 * バッジの色で状態を出し分けると、同じ「キャンペーン価格」が2色で並んで統一感がなくなるため。
 * 予告であることは期間表記に開始日が入る（「（9/01〜10/31まで）」）ことで伝わる。
 * 判定用に is-upcoming クラスは出力しているので、店舗側で区別したい場合はCSSで上書きできる。
 */

/* default パターンの通常価格は p.food_price に margin がないため、行間だけ少し空ける */
p.food_price.coupon-price {
	margin-top: 0.35em;
}