/**
 * ==================================================
 * Theater Re write WEB SHOP
 * カート画面CSS
 *
 * ファイル：
 * assets/css/cart.css
 *
 * 【役割】
 * ・カート画面ヘッダー
 * ・カート明細
 * ・ステージギフト表示
 * ・削除ボタン
 * ・合計金額
 * ・追加ボタン
 * ・注文手続きボタン
 * ・空カート表示
 *
 * ==================================================
 */


/* ==================================================
 * 01. カート画面全体
 * ==================================================
 */

.trw-cart-main {
	min-width: 0;
}


/* ==================================================
 * 02. カートヘッダー
 * ==================================================
 */

.trw-cart-header {
	margin-bottom: 26px;

	padding:
		36px
		34px;

	background:
		linear-gradient(
			135deg,
			#2e2e2e 0%,
			#262626 100%
		);

	border: 1px solid #484848;

	border-radius: 10px;
}


.trw-cart-header .trw-shop-eyebrow {
	margin-bottom: 8px;
}


.trw-cart-header h1 {
	margin: 0;

	color: #f3f3f3 !important;

	font-size: 32px;

	font-weight: 600;

	letter-spacing: .04em;
}


.trw-cart-header > p:last-child {
	margin:
		9px
		0
		0;

	color: #a7a7a7 !important;

	font-size: 13px;

	line-height: 1.7;
}


/* ==================================================
 * 03. 通知
 * ==================================================
 */

.trw-cart-message {
	margin-bottom: 22px;

	padding:
		14px
		18px;

	border-radius: 7px;

	font-size: 13px;
}


.trw-cart-message-success {
	background: #26352f;

	border:
		1px solid
		#496a58;

	color: #dcece2 !important;
}


.trw-cart-message-error {
	background: #3a292b;

	border:
		1px solid
		#845057;

	color: #f0d7da !important;
}


/* ==================================================
 * 04. カート件数
 * ==================================================
 */

.trw-cart-summary-top {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 20px;

	margin-bottom: 14px;

	padding:
		12px
		4px;

	border-bottom:
		1px solid
		#4c4c4c;
}


.trw-cart-summary-top span {
	color: #999999 !important;

	font-size: 12px;
}


.trw-cart-summary-top strong {
	color: #eeeeee !important;

	font-size: 14px;

	font-weight: 700;
}


/* ==================================================
 * 05. 明細一覧
 * ==================================================
 */

.trw-cart-item-list {
	display: grid;

	gap: 14px;
}


/* ==================================================
 * 06. カート明細カード
 * ==================================================
 */

.trw-cart-item {
	overflow: hidden;

	background: #303030;

	border:
		1px solid
		#4a4a4a;

	border-radius: 9px;

	transition:
		border-color .15s ease,
		background .15s ease;
}


.trw-cart-item:hover {
	background: #323232;

	border-color: #5a5a5a;
}


/* ==================================================
 * 07. 明細ヘッダー
 * ==================================================
 */

.trw-cart-item-head {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 16px;

	padding:
		11px
		16px;

	background: #292929;

	border-bottom:
		1px solid
		#444444;
}


.trw-cart-item-type {
	display: inline-flex;

	align-items: center;

	min-height: 24px;

	padding:
		3px
		9px;

	background: #202020;

	border:
		1px solid
		#494949;

	border-radius: 999px;

	color: #a9a9a9 !important;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: .12em;
}


/* ==================================================
 * 08. 削除ボタン
 * ==================================================
 */

.trw-cart-remove-button {
	padding:
		5px
		9px;

	background: transparent;

	border:
		1px solid
		#5b4447;

	border-radius: 5px;

	color: #c98a91 !important;

	font-size: 10px;

	font-weight: 600;

	cursor: pointer;

	transition:
		background .15s ease,
		border-color .15s ease,
		color .15s ease;
}


.trw-cart-remove-button:hover {
	background: #4b2e32;

	border-color: #8d4c54;

	color: #ffffff !important;
}


/* ==================================================
 * 09. 明細本文
 * ==================================================
 */

.trw-cart-item-body {
	padding:
		20px
		20px
		18px;
}


.trw-cart-performance-name {
	margin:
		0
		0
		6px;

	color: #8f8f8f !important;

	font-size: 11px;

	line-height: 1.5;
}


.trw-cart-item-body h2 {
	margin: 0;

	color: #eeeeee !important;

	font-size: 17px;

	font-weight: 700;

	line-height: 1.55;
}


/* ==================================================
 * 10. 応援メッセージ
 * ==================================================
 */

.trw-cart-message-box {
	margin-top: 16px;

	padding:
		13px
		15px;

	background: #292929;

	border:
		1px solid
		#424242;

	border-radius: 6px;
}


.trw-cart-message-box > span {
	display: block;

	margin-bottom: 5px;

	color: #858585 !important;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: .05em;
}


.trw-cart-message-box p {
	margin: 0;

	color: #c4c4c4 !important;

	font-size: 12px;

	line-height: 1.75;

	overflow-wrap: anywhere;
}


/* ==================================================
 * 11. 明細金額
 * ==================================================
 */

.trw-cart-item-price {
	display: flex;

	justify-content: flex-end;

	margin-top: 18px;

	padding-top: 15px;

	border-top:
		1px solid
		#414141;
}


.trw-cart-item-price strong {
	color: #ffffff !important;

	font-size: 20px;

	font-weight: 700;

	letter-spacing: .02em;
}


/* ==================================================
 * 12. 合計カード
 * ==================================================
 */

.trw-cart-total-card {
	margin-top: 22px;

	padding:
		22px
		24px;

	background:
		linear-gradient(
			135deg,
			#333333 0%,
			#292929 100%
		);

	border:
		1px solid
		#585858;

	border-radius: 9px;
}


.trw-cart-total-card > div {
	display: flex;

	align-items: baseline;

	justify-content: space-between;

	gap: 20px;
}


.trw-cart-total-card > div > span {
	color: #b3b3b3 !important;

	font-size: 13px;

	font-weight: 600;
}


.trw-cart-total-card > div > strong {
	color: #ffffff !important;

	font-size: 28px;

	font-weight: 700;
}


.trw-cart-total-card small {
	display: block;

	margin-top: 9px;

	color: #858585 !important;

	font-size: 10px;

	line-height: 1.6;
}


/* ==================================================
 * 13. カート操作
 * ==================================================
 */

.trw-cart-actions {
	margin-top: 22px;

	padding:
		24px;

	background: #2b2b2b;

	border:
		1px solid
		#464646;

	border-radius: 9px;

	text-align: center;
}


/* ==================================================
 * 14. ステージギフト追加
 * ==================================================
 */

.trw-cart-add-button {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	min-height: 46px;

	margin-bottom: 12px;

	padding:
		11px
		18px;

	background: transparent;

	border:
		1px solid
		#5b5b5b;

	border-radius: 6px;

	color: #d1d1d1 !important;

	text-decoration: none;

	font-size: 12px;

	font-weight: 700;

	transition:
		background .15s ease,
		border-color .15s ease,
		color .15s ease;
}


.trw-cart-add-button:hover {
	background: #343434;

	border-color: #777777;

	color: #ffffff !important;
}


/* ==================================================
 * 15. 注文手続きボタン
 * ==================================================
 */

.trw-cart-checkout-button {
	width: 100%;

	min-height: 52px;

	padding:
		13px
		20px;

	background: #a82d35;

	border-color: #a82d35;

	border-radius: 6px;

	color: #ffffff !important;

	font-size: 14px;

	font-weight: 700;

	letter-spacing: .03em;

	cursor: pointer;
}


.trw-cart-checkout-button:hover {
	background: #bd3640;

	border-color: #bd3640;
}


.trw-cart-checkout-button:disabled {
	background: #454545;

	border-color: #454545;

	color: #888888 !important;

	cursor: not-allowed;
}


/* ==================================================
 * 16. 注文手続き補足
 * ==================================================
 */

.trw-cart-checkout-note {
	margin:
		10px
		0
		0;

	color: #7f7f7f !important;

	font-size: 9px;

	line-height: 1.5;
}


/* ==================================================
 * 17. 空カート
 * ==================================================
 */

.trw-cart-empty {
	padding:
		58px
		30px;

	background: #303030;

	border:
		1px solid
		#494949;

	border-radius: 10px;

	text-align: center;
}


.trw-cart-empty-icon {
	margin-bottom: 14px;

	font-size: 38px;

	line-height: 1;
}


.trw-cart-empty h2 {
	margin:
		0
		0
		9px;

	color: #eeeeee !important;

	font-size: 21px;

	font-weight: 700;
}


.trw-cart-empty p {
	margin:
		0
		0
		22px;

	color: #999999 !important;

	font-size: 12px;

	line-height: 1.7;
}


/* ==================================================
 * 18. スマートフォン
 * ==================================================
 */

@media (max-width: 700px) {

	.trw-cart-header {
		margin-bottom: 20px;

		padding:
			25px
			20px;

		border-radius: 8px;
	}


	.trw-cart-header h1 {
		font-size: 25px;
	}


	.trw-cart-header > p:last-child {
		font-size: 11px;
	}


	.trw-cart-item-list {
		gap: 11px;
	}


	.trw-cart-item {
		border-radius: 7px;
	}


	.trw-cart-item-head {
		padding:
			9px
			12px;
	}


	.trw-cart-item-body {
		padding:
			16px
			14px;
	}


	.trw-cart-item-body h2 {
		font-size: 15px;
	}


	.trw-cart-message-box {
		margin-top: 13px;

		padding:
			11px
			12px;
	}


	.trw-cart-item-price {
		margin-top: 14px;

		padding-top: 12px;
	}


	.trw-cart-item-price strong {
		font-size: 19px;
	}


	.trw-cart-total-card {
		padding:
			18px
			17px;
	}


	.trw-cart-total-card > div > strong {
		font-size: 25px;
	}


	.trw-cart-actions {
		padding:
			18px
			14px;

		border-radius: 7px;
	}


	.trw-cart-add-button {
		min-height: 45px;
	}


	.trw-cart-checkout-button {
		min-height: 52px;
	}


	.trw-cart-empty {
		padding:
			44px
			18px;
	}

}