/* MATECH マイページ モーダルUI（ガラス） v1.0.0
   既存のモーダル（テーマ共通 .modal / 改善要望 .mv-modal / 保証登録完了 #modal-success）に
   半透明ガラス＋背面ぼかしの共通デザインを重ねます。プラグインを停止すれば元に戻ります。 */

/* ---------- 1. 背面（暗幕＋ぼかし） ---------- */
.modal-container,
#modal-info,
#modal-success,
.mv-modal {
	background: rgba(13, 15, 22, .38) !important;
	-webkit-backdrop-filter: blur(12px) saturate(112%) !important;
	backdrop-filter: blur(12px) saturate(112%) !important;
}

/* ---------- 2. パネル本体 ---------- */
.modal .modal-inner,
#modal-info .modal-inner,
#modal-success .modal-inner,
.mv-modal .mv-modal__sheet {
	border: 1px solid rgba(255, 255, 255, .85) !important;
	border-radius: 28px !important;
	background: linear-gradient(170deg, rgba(255, 255, 255, .90) 0%, rgba(255, 255, 255, .80) 100%) !important;
	-webkit-backdrop-filter: blur(30px) saturate(190%) !important;
	backdrop-filter: blur(30px) saturate(190%) !important;
	box-shadow:
		0 44px 90px -28px rgba(10, 12, 20, .55),
		0 2px 10px rgba(10, 12, 20, .10),
		inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

.modal .modal-inner {
	padding: 42px 46px 32px !important;
}

#modal-success .modal-inner {
	padding: 46px 52px 36px !important;
}

.mv-modal .mv-modal__sheet {
	padding: 38px 40px 32px !important;
}

/* ---------- 3. 見出し ---------- */
.modal .modal-title {
	margin-bottom: 26px !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	letter-spacing: -.01em;
	color: #101114;
}

.modal .modal-text {
	color: #3A3A42;
}

/* ---------- 4. 閉じるボタン ---------- */
.modal .modal-righttop {
	border: 1px solid rgba(16, 17, 20, .10) !important;
	background: rgba(255, 255, 255, .66) !important;
	box-shadow: none !important;
	color: #3A3A42 !important;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.modal .modal-righttop:hover,
.modal .modal-righttop:focus {
	background: #FFFFFF !important;
	color: #101114 !important;
}

.mv-modal .mv-close {
	border: 1px solid rgba(16, 17, 20, .10) !important;
	background: rgba(255, 255, 255, .62) !important;
	color: #3A3A42 !important;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.mv-modal .mv-close:hover {
	background: #FFFFFF !important;
}

/* ---------- 5. 下部ボタン ---------- */
.modal .modal-btn.rectangle-btn {
	border-radius: 999px !important;
}

/* ---------- 6. 改善要望モーダルの中身 ---------- */
.mv-modal .mvr {
	border: 1px solid rgba(16, 17, 20, .07) !important;
	border-radius: 18px !important;
	background: rgba(255, 255, 255, .72) !important;
}

.mv-modal .mv-empty {
	border: 1px solid rgba(16, 17, 20, .06);
	border-radius: 16px !important;
	background: rgba(255, 255, 255, .66) !important;
}

.mv-modal .mv-textarea {
	border: 1px solid rgba(16, 17, 20, .12) !important;
	border-radius: 16px !important;
	background: rgba(255, 255, 255, .92) !important;
}

/* ---------- 7. みんなの満足度（ドーナツゲージ） ---------- */
.mvr.is-mtcg .mvr__top,
.mvr.is-mtcg .mvr__bar,
.mvr.is-mtcg .mvr__legend,
.mvr.is-mtcg .mvr__note {
	display: none !important;
}

.mtcg-sat {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 12px;
}

.mtcg-sat__gauge {
	position: relative;
	flex: none;
	width: 126px;
	height: 126px;
	border-radius: 50%;
	box-shadow: 0 10px 22px -12px rgba(201, 130, 0, .6);
}

.mtcg-sat__hole {
	position: absolute;
	top: 13px;
	right: 13px;
	bottom: 13px;
	left: 13px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	border-radius: 50%;
	background: #FFFFFF;
}

.mtcg-sat__pct {
	font-size: 33px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: #101114;
}

.mtcg-sat__pct span {
	font-size: 16px;
	letter-spacing: 0;
}

.mtcg-sat__cap {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	color: #8A6A00;
}

.mtcg-sat__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mtcg-sat__lead {
	margin: 0 !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: -.01em;
	color: #101114;
}

.mtcg-sat__note {
	margin: 0 !important;
	font-size: 11px;
	line-height: 1.7;
	color: #5B5B63;
}

/* ---------- 8. スマホ ---------- */
@media (max-width: 600px) {
	.modal .modal-inner {
		padding: 30px 20px 24px !important;
		border-radius: 22px !important;
	}

	#modal-success .modal-inner {
		padding: 34px 22px 26px !important;
		border-radius: 22px !important;
	}

	.mv-modal .mv-modal__sheet {
		padding: 30px 20px 26px !important;
		border-radius: 22px !important;
	}

	.modal .modal-title {
		font-size: 21px !important;
		margin-bottom: 20px !important;
	}

	.mtcg-sat {
		flex-direction: column;
		gap: 14px;
		text-align: center;
	}

	.mtcg-sat__body {
		align-items: center;
	}

	.mtcg-sat__lead {
		font-size: 15px;
	}
}

/* ---------- 9. ぼかし非対応ブラウザ ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.modal-container,
	#modal-info,
	#modal-success,
	.mv-modal {
		background: rgba(13, 15, 22, .62) !important;
	}

	.modal .modal-inner,
	#modal-info .modal-inner,
	#modal-success .modal-inner,
	.mv-modal .mv-modal__sheet {
		background: #FFFFFF !important;
	}
}