/* =========================================================
   GRM Coupon CSS
   ※ このファイルから抽出して作成
   ※ 以前は青系の単色ベタ塗り＋中央寄せ＋角丸16px＋巨大な
     丸ボタンという、やや古い印象の「クーポン券」風デザイン
     だったため、店舗詳細ページ全体の白ベース・フラットな
     デザインに合わせて全面的に見直した（白背景＋左に細い
     アクセントライン＋左寄せテキスト。ボタンは丸型のまま）
========================================================= */

/* =========================================================
   クーポン：共通状態
========================================================= */

/* 使用済みボタン（クリック不可状態） */
.grm-btn.is-used{
	background:#999 !important;
	border-color:#999 !important;
	color:#fff !important;
	cursor:not-allowed;
}

/* クーポンボタン（管理画面プレビュー等の初期状態） */
.grm-btn.grm-coupon-btn{
	background:#7b8b9a;
	color:#fff;
	padding:6px 10px;
	border-radius:999px;
	font-size:12px;
	display:inline-block;
}


/* =========================================================
   クーポン：single専用UI
========================================================= */

.grm-single-coupon-list{
	display:flex;
	flex-direction:column;
	gap:16px;
}

/* クーポンカード全体
   ※ 単色ベタ塗りをやめ、白背景＋左のアクセントラインのみに変更 */
.grm-single-coupon-item{
	background:#fff;
	border:1px solid #ececec;
	border-left:3px solid #b67674;
	border-radius:0;
	padding:24px;
	text-align:left;
	color:#222;
}

.grm-single-coupon-item.grm-coupon-used{
	border-left-color:#ccc;
}

/* クーポンヘッダー（小さいアイコン＋ラベル） */
.grm-coupon-header{
	display:flex;
	align-items:center;
	gap:6px;
	margin-bottom:10px;
}

.grm-coupon-icon svg{
	width:14px;
	height:14px;
	fill:#b67674;
}

.grm-coupon-header .grm-coupon-label{
	font-size:12px;
	font-weight:700;
	letter-spacing:0.12em;
	color:#b67674;
}

/* クーポンタイトル */
.grm-single-coupon-title{
	font-size:20px;
	font-weight:700;
	color:#222;
	margin:0 0 10px;
}

/* クーポン説明文 */
.grm-single-coupon-content{
	font-size:14px;
	line-height:1.8;
	color:#555;
	margin-bottom:16px;
}

/* クーポン制限表示（回数・期限など）：小さなタグ表示 */
.grm-single-coupon-stamps{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:18px;
}

.grm-single-coupon-stamps .grm-coupon-stamp{
	display:inline-block;
	font-size:12px;
	color:#777;
	background:#f7f7f7;
	border-radius:999px;
	padding:4px 12px;
}


/* =========================================================
   クーポン：ボタンUI（丸型のまま／幅とサイズを調整）
========================================================= */

/* 使用可能ボタン */
.grm-btn.grm-coupon-btn {
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:auto;
	min-width:220px;
	margin:0;
	padding:0 28px;
	background:#7b8b9a;
	color:#fff !important;
	border-radius:999px;
	height:48px;
	border:none;
	font-size:14px;
	font-weight:700;
	cursor:pointer;
	transition:opacity .2s ease;
}

.grm-btn.grm-coupon-btn:hover{
	opacity:.85;
}

/* ボタン内テキスト */
.grm-btn.grm-coupon-btn p {
	font-size:14px;
	font-weight:700;
	margin:0;
}

/* 使用済みボタン（丸型のまま・グレーに） */
.grm-coupon-used-stamp {
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:auto;
	min-width:220px;
	margin:0;
	padding:0 28px;
	background:#999;
	color:#fff !important;
	border-radius:999px;
	height:48px;
	border:none;
	font-size:14px;
	font-weight:700;
}

/* 使用済みテキスト */
.grm-coupon-used-stamp p {
	font-size:14px;
	font-weight:700;
	margin:0;
}

/* 使用アイコン */
.grm-coupon-use-icon svg{
	width:18px;
	height:18px;
	fill:#fff;
	margin-right:6px;
}

/* =========================
   期限切れ
========================= */
.grm-coupon-expired-badge{
	display:inline-block;
	margin-left:8px;
	padding:3px 8px;
	font-size:11px;
	font-weight:bold;
	background:#d63638;
	color:#fff;
	border-radius:999px;
	vertical-align:middle;
}