/**
 * ==================================================
 * Theater Re write WEB SHOP
 * スマホ固定下メニュー CSS
 *
 * ファイル：
 * assets/css/shop-mobile-nav.css
 *
 * 【役割】
 * ・スマホ専用固定下メニュー
 * ・SVGアイコン
 * ・現在位置表示
 * ・カート件数バッジ
 * ・iPhoneセーフエリア対応
 *
 * ==================================================
 */


/* ==================================================
 * 01. 基本
 * ==================================================
 */

.trw-shop-mobile-nav {
	display: none;
}


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

@media (max-width: 700px) {

	.trw-shop-mobile-nav {
		position: fixed;

		left: 0;
		right: 0;
		bottom: 0;

		z-index: 9999;

		display: grid;

		grid-template-columns:
			repeat(
				5,
				1fr
			);

		min-height: 66px;

		padding-bottom:
			env(
				safe-area-inset-bottom
			);

		background:
			rgba(
				28,
				28,
				28,
				.97
			);

		border-top:
			1px solid #454545;

		box-shadow:
			0 -5px 20px
			rgba(
				0,
				0,
				0,
				.22
			);

		backdrop-filter:
			blur(
				10px
			);

		-webkit-backdrop-filter:
			blur(
				10px
			);
	}


	/* ==========================================
	 * 03. メニュー項目
	 * ========================================== */

	.trw-shop-mobile-nav-item {
		position: relative;

		min-width: 0;
		min-height: 66px;

		padding:
			9px
			2px
			7px;

		display: flex;

		flex-direction: column;

		align-items: center;

		justify-content: center;

		gap: 4px;

		color: #a5a5a5 !important;

		text-decoration: none !important;

		-webkit-tap-highlight-color:
			transparent;
	}


	.trw-shop-mobile-nav-item:hover,
	.trw-shop-mobile-nav-item:focus {
		color: #d7d7d7 !important;

		text-decoration: none !important;
	}


	/* ==========================================
	 * 04. 現在位置
	 * ========================================== */

	.trw-shop-mobile-nav-item.is-current {
		color: #56a9ff !important;
	}


	.trw-shop-mobile-nav-item.is-current::before {
		content: "";

		position: absolute;

		top: 0;
		left: 50%;

		width: 32px;
		height: 2px;

		background: currentColor;

		border-radius:
			0
			0
			3px
			3px;

		transform:
			translateX(
				-50%
			);
	}


	/* ==========================================
	 * 05. アイコン
	 * ========================================== */

	.trw-shop-mobile-nav-icon,
	.trw-shop-mobile-nav-icon-wrap {
		position: relative;

		width: 25px;
		height: 25px;

		display: flex;

		align-items: center;

		justify-content: center;

		flex: 0 0 25px;
	}


	.trw-shop-mobile-nav-icon svg {
		width: 23px;
		height: 23px;

		display: block;

		fill: none;

		stroke: currentColor;

		stroke-width: 1.7;

		stroke-linecap: round;

		stroke-linejoin: round;
	}


	/* ==========================================
	 * 06. 文字
	 * ========================================== */

	.trw-shop-mobile-nav-label {
		display: block;

		max-width: 100%;

		overflow: hidden;

		color: inherit !important;

		font-size: 9px;

		font-weight: 600;

		line-height: 1.2;

		letter-spacing: .01em;

		white-space: nowrap;

		text-overflow: ellipsis;
	}


	/* ==========================================
	 * 07. カート件数バッジ
	 * ========================================== */

	.trw-shop-mobile-nav-badge {
		position: absolute;

		top: -6px;
		right: -10px;

		min-width: 17px;
		height: 17px;

		padding:
			0
			4px;

		display: flex;

		align-items: center;

		justify-content: center;

		background: #e84d5b;

		border:
			2px solid
			#1c1c1c;

		border-radius: 20px;

		color: #ffffff !important;

		font-size: 9px;

		font-weight: 700;

		line-height: 1;
	}


	/* ==========================================
	 * 08. SHOP本文の下余白
	 *
	 * 固定メニューに本文が隠れないようにする
	 * ========================================== */

	body:has(.trw-shop-mobile-nav) {
		padding-bottom:
			calc(
				76px +
				env(
					safe-area-inset-bottom
				)
			);
	}

}


/* ==================================================
 * 09. 小さいスマートフォン
 * ==================================================
 */

@media (max-width: 380px) {

	.trw-shop-mobile-nav-item {
		padding-left: 1px;
		padding-right: 1px;
	}


	.trw-shop-mobile-nav-label {
		font-size: 8px;
	}


	.trw-shop-mobile-nav-icon,
	.trw-shop-mobile-nav-icon-wrap {
		width: 23px;
		height: 23px;

		flex-basis: 23px;
	}


	.trw-shop-mobile-nav-icon svg {
		width: 21px;
		height: 21px;
	}

}