/**
 * マイページ - サブスクリプションセクション
 *
 * @package IIHCart_Pro
 */

/* =========================================================================
   サブスクリプションカード
   ========================================================================= */

.iihcart-pro-subscription-card {
	border: 1px solid #ddd;
	padding: 16px;
	margin-bottom: 16px;
}

.iihcart-pro-sub-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.iihcart-pro-sub-product-name {
	font-size: 16px;
	font-weight: bold;
	color: var(--iihcart-color-text, var(--color-text, #111));
}

/* =========================================================================
   ステータスバッジ
   ========================================================================= */

.iihcart-pro-sub-status {
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	padding: 2px 10px;
	white-space: nowrap;
}

.iihcart-pro-sub-status--active {
	background-color: #e8f5e9;
	color: #2e7d32;
}

.iihcart-pro-sub-status--cancel-scheduled {
	background-color: #fff3e0;
	color: #e65100;
}

.iihcart-pro-sub-status--on-hold {
	background-color: #fce4ec;
	color: #c62828;
}

.iihcart-pro-sub-status--ended {
	background-color: #f5f5f5;
	color: #757575;
}

/* =========================================================================
   詳細情報
   ========================================================================= */

.iihcart-pro-sub-details {
	margin-bottom: 12px;
}

.iihcart-pro-sub-detail-row {
	display: flex;
	gap: 8px;
	padding: 4px 0;
	font-size: 14px;
	color: var(--iihcart-color-text, var(--color-text, #111));
}

.iihcart-pro-sub-detail-label {
	min-width: 80px;
	color: #666;
}

.iihcart-pro-sub-detail-value {
	font-weight: 500;
}

/* 補足テキスト */
.iihcart-pro-sub-notice {
	font-size: 13px;
	color: #e65100;
	margin: 8px 0 0;
}

.iihcart-pro-sub-warning {
	font-size: 13px;
	color: #c62828;
	margin: 8px 0 0;
}

.iihcart-pro-sub-warning a {
	color: var(--iihcart-color-link, var(--color-link, #006db2));
	margin-left: 4px;
}

.iihcart-pro-sub-warning a:hover {
	opacity: 0.7;
}

/* =========================================================================
   アクションボタン
   ========================================================================= */

/*
 * アクティブテーマ内レンダリングモード（親プラグイン 1.3.0+）ではマイページが
 * `.iihcart-scope` で包まれ、親の active-theme.css のミニリセット
 * `.iihcart-scope.iihcart-scope :where(button)`（詳細度 0-2-0）がボタンの
 * 背景・枠・余白を打ち消す。同じ二重スコープを付けた 0-3-0 のセレクタを
 * 並べ、読み込み順に関係なくリセットに勝たせる（専用テーマでは従来の
 * 単独クラスのセレクタが効く）。
 */

.iihcart-pro-sub-actions {
	padding-top: 12px;
	border-top: 1px solid #eee;
}

.iihcart-pro-btn,
.iihcart-scope.iihcart-scope .iihcart-pro-btn {
	display: inline-block;
	font-size: 14px;
	padding: 8px 20px;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s;
}

.iihcart-pro-btn:hover,
.iihcart-scope.iihcart-scope .iihcart-pro-btn:hover {
	opacity: 0.7;
}

.iihcart-pro-btn:disabled,
.iihcart-scope.iihcart-scope .iihcart-pro-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.iihcart-pro-btn--cancel-schedule,
.iihcart-scope.iihcart-scope .iihcart-pro-btn--cancel-schedule {
	background-color: #f5f5f5;
	color: #333;
	border: 1px solid #ccc;
}

.iihcart-pro-btn--undo-cancel,
.iihcart-scope.iihcart-scope .iihcart-pro-btn--undo-cancel {
	background-color: var(--iihcart-color-primary, var(--color-primary, #b38a12));
	color: #fff;
}

.iihcart-pro-btn--reactivate,
.iihcart-scope.iihcart-scope .iihcart-pro-btn--reactivate {
	background-color: var(--iihcart-color-primary, var(--color-primary, #b38a12));
	color: #fff;
}

/* =========================================================================
   過去の定期購入（展開式）
   ========================================================================= */

.iihcart-pro-past-subscriptions {
	margin-top: 16px;
	margin-bottom: 32px;
}

.iihcart-pro-toggle-past-btn,
.iihcart-scope.iihcart-scope .iihcart-pro-toggle-past-btn {
	background: none;
	border: none;
	color: var(--iihcart-color-link, var(--color-link, #006db2));
	font-size: 14px;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

/* 専用テーマは狭幅でコンテンツが画面端まで広がるため、見出しの文字位置（左 16px、768px 以下は 20px）に揃える。
   アクティブテーマ内モード（.iihcart-scope）は上の padding: 0 が詳細度で勝つ（狭幅では見出しの文字も左端に揃う） */
.iihcart-pro-toggle-past-btn {
	padding-left: 16px;
}

@media (max-width: 768px) {
	.iihcart-pro-toggle-past-btn {
		padding-left: 20px;
	}
}

.iihcart-pro-toggle-past-btn:hover,
.iihcart-scope.iihcart-scope .iihcart-pro-toggle-past-btn:hover {
	opacity: 0.7;
}

.iihcart-pro-past-list {
	margin-top: 12px;
}

/* =========================================================================
   通知メッセージ（成功/エラー）
   ========================================================================= */

.iihcart-pro-subscription-message {
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 14px;
}

.iihcart-pro-subscription-message.success {
	background-color: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #a5d6a7;
}

.iihcart-pro-subscription-message.error {
	background-color: #fce4ec;
	color: #c62828;
	border: 1px solid #ef9a9a;
}