/*
 * =========================================================
 * Jade Grove
 * 生体一覧 共通カラー + スマホレイアウト
 *
 * 正式ステータスカラー
 * =========================================================
 *
 * 販売中           #BFE7C6
 * 予約可能         #FFE08A
 * 商談中           #A9D7F7
 * ご家族様決定     #F7B7CF
 *
 * 背景アイボリー   #FFF7F0
 * ライン           #E6E1DA
 *
 * ※レイアウトは変更しない
 * =========================================================
 */


/* =========================================================
   COLOR TOKENS
   ========================================================= */

:root {

	--jg-sale:
		#BFE7C6;

	--jg-sale-text:
		#34824A;


	--jg-reservation:
		#FFE08A;

	--jg-reservation-text:
		#C77B00;


	--jg-negotiation:
		#A9D7F7;

	--jg-negotiation-text:
		#2379BA;


	--jg-family:
		#F7B7CF;

	--jg-family-text:
		#D45C7D;


	--jg-ivory:
		#FFF7F0;

	--jg-line:
		#E6E1DA;

}


/* =========================================================
   STATUS TABS
   既存の濃色・旧activeを完全上書き
   ========================================================= */

.jg-status-tabs {

	background:
		transparent !important;

	border:
		0 !important;

	box-shadow:
		none !important;

	overflow:
		visible !important;

}


/* ---------------------------------------------------------
   共通
   --------------------------------------------------------- */

.jg-status-tabs > a {

	position:
		relative !important;

	box-sizing:
		border-box !important;

	color:
		#292929 !important;

	text-decoration:
		none !important;

	border-radius:
		18px !important;

	box-shadow:
		0 3px 9px
		rgba(70, 60, 50, .045) !important;

	transition:
		transform .18s ease,
		box-shadow .18s ease !important;

}


/* =========================================================
   すべて
   白背景 + 4色フレーム
   ========================================================= */

.jg-status-tabs > a:first-child,
.jg-status-tabs > a[data-status-name="すべて"],
.jg-status-tabs > a:first-child.is-active,
.jg-status-tabs > a[data-status-name="すべて"].is-active {

	position:
		relative !important;

	background:
		#FFFFFF !important;

	color:
		#292929 !important;

	border:
		0 !important;

	border-radius:
		18px !important;

	overflow:
		visible !important;

}


/*
 * 4色フレーム
 *
 * 左上：GREEN
 * 右上：PINK
 * 左下：YELLOW
 * 右下：BLUE
 */

.jg-status-tabs > a:first-child::before,
.jg-status-tabs > a[data-status-name="すべて"]::before {

	content:
		"" !important;

	position:
		absolute !important;

	inset:
		0 !important;

	z-index:
		-1 !important;

	border-radius:
		18px !important;

	padding:
		3px !important;

	background:

		linear-gradient(
			to right,
			var(--jg-sale) 0%,
			var(--jg-sale) 50%,
			var(--jg-family) 50%,
			var(--jg-family) 100%
		)
		top / 100% 3px
		no-repeat,

		linear-gradient(
			to right,
			var(--jg-reservation) 0%,
			var(--jg-reservation) 50%,
			var(--jg-negotiation) 50%,
			var(--jg-negotiation) 100%
		)
		bottom / 100% 3px
		no-repeat,

		linear-gradient(
			to bottom,
			var(--jg-sale) 0%,
			var(--jg-sale) 50%,
			var(--jg-reservation) 50%,
			var(--jg-reservation) 100%
		)
		left / 3px 100%
		no-repeat,

		linear-gradient(
			to bottom,
			var(--jg-family) 0%,
			var(--jg-family) 50%,
			var(--jg-negotiation) 50%,
			var(--jg-negotiation) 100%
		)
		right / 3px 100%
		no-repeat !important;

}


/*
 * 内側を白で覆う
 */

.jg-status-tabs > a:first-child::after,
.jg-status-tabs > a[data-status-name="すべて"]::after {

	content:
		"" !important;

	position:
		absolute !important;

	inset:
		3px !important;

	z-index:
		-1 !important;

	border-radius:
		15px !important;

	background:
		#FFFFFF !important;

}


/* =========================================================
   販売中
   ========================================================= */

.jg-status-tabs > a:nth-child(2),
.jg-status-tabs > a[data-status-name="販売中"],
.jg-status-tabs > a:nth-child(2).is-active,
.jg-status-tabs > a[data-status-name="販売中"].is-active {

	background:
		var(--jg-sale) !important;

	border:
		2px solid
		var(--jg-sale) !important;

	color:
		var(--jg-sale-text) !important;

}


/* =========================================================
   予約可能
   ========================================================= */

.jg-status-tabs > a:nth-child(3),
.jg-status-tabs > a[data-status-name="予約可能"],
.jg-status-tabs > a:nth-child(3).is-active,
.jg-status-tabs > a[data-status-name="予約可能"].is-active {

	background:
		var(--jg-reservation) !important;

	border:
		2px solid
		var(--jg-reservation) !important;

	color:
		var(--jg-reservation-text) !important;

}


/* =========================================================
   商談中
   ========================================================= */

.jg-status-tabs > a:nth-child(4),
.jg-status-tabs > a[data-status-name="商談中"],
.jg-status-tabs > a:nth-child(4).is-active,
.jg-status-tabs > a[data-status-name="商談中"].is-active {

	background:
		var(--jg-negotiation) !important;

	border:
		2px solid
		var(--jg-negotiation) !important;

	color:
		var(--jg-negotiation-text) !important;

}


/* =========================================================
   ご家族様決定
   ========================================================= */

.jg-status-tabs > a:nth-child(5),
.jg-status-tabs > a[data-status-name="ご家族様決定"],
.jg-status-tabs > a:nth-child(5).is-active,
.jg-status-tabs > a[data-status-name="ご家族様決定"].is-active {

	background:
		var(--jg-family) !important;

	border:
		2px solid
		var(--jg-family) !important;

	color:
		var(--jg-family-text) !important;

}


/* =========================================================
   選択中
   色は変えない
   大きさ + 浮き上がりのみ
   ========================================================= */

.jg-status-tabs > a.is-active {

	z-index:
		5 !important;

	transform:
		translateY(-3px)
		scale(1.055) !important;

	box-shadow:
		0 12px 25px
		rgba(65, 55, 45, .14) !important;

	font-weight:
		800 !important;

}


/*
 * すべて選択時も絶対に濃い緑にしない
 */

.jg-status-tabs > a:first-child.is-active,
.jg-status-tabs > a[data-status-name="すべて"].is-active {

	background:
		#FFFFFF !important;

	color:
		#292929 !important;

}


/* =========================================================
   FILTER PANEL
   色のみ調整
   ========================================================= */

.jg-filter-panel {

	border-color:
		var(--jg-line) !important;

	background:
		rgba(
			255,
			247,
			240,
			.58
		) !important;

}


/* =========================================================
   PET CARD
   ステータス色
   ========================================================= */

.jg-pet-card[data-status="販売中"] {

	--jg-card-color:
		var(--jg-sale);

	--jg-card-text:
		var(--jg-sale-text);

}


.jg-pet-card[data-status="予約可能"] {

	--jg-card-color:
		var(--jg-reservation);

	--jg-card-text:
		var(--jg-reservation-text);

}


.jg-pet-card[data-status="商談中"] {

	--jg-card-color:
		var(--jg-negotiation);

	--jg-card-text:
		var(--jg-negotiation-text);

}


.jg-pet-card[data-status="ご家族様決定"] {

	--jg-card-color:
		var(--jg-family);

	--jg-card-text:
		var(--jg-family-text);

}


/* =========================================================
   PET CARD BORDER
   ========================================================= */

.jg-pet-card[data-status] {

	border-color:
		var(--jg-card-color) !important;

}


.jg-pet-card[data-status]
.jg-pet-card__frame {

	border-color:
		var(--jg-card-color) !important;

}


/* =========================================================
   CARD ORNAMENT
   ========================================================= */

.jg-pet-card[data-status]
.jg-card-ornament {

	color:
		var(--jg-card-text) !important;

	border-color:
		var(--jg-card-color) !important;

}


/* =========================================================
   CARD STATUS
   ========================================================= */

.jg-pet-card[data-status="販売中"]
.jg-pet-card__status {

	background:
		var(--jg-sale) !important;

	color:
		var(--jg-sale-text) !important;

	border-color:
		var(--jg-sale) !important;

}


.jg-pet-card[data-status="予約可能"]
.jg-pet-card__status {

	background:
		var(--jg-reservation) !important;

	color:
		var(--jg-reservation-text) !important;

	border-color:
		var(--jg-reservation) !important;

}


.jg-pet-card[data-status="商談中"]
.jg-pet-card__status {

	background:
		var(--jg-negotiation) !important;

	color:
		var(--jg-negotiation-text) !important;

	border-color:
		var(--jg-negotiation) !important;

}


.jg-pet-card[data-status="ご家族様決定"]
.jg-pet-card__status {

	background:
		var(--jg-family) !important;

	color:
		var(--jg-family-text) !important;

	border-color:
		var(--jg-family) !important;

}


/* =========================================================
   FAMILY / SOLD
   ========================================================= */

.jg-pet-card[data-status="ご家族様決定"]
.jg-card-ribbon {

	color:
		var(--jg-family-text) !important;

}


.jg-pet-card[data-status="ご家族様決定"]
.jg-pet-card__sold {

	color:
		var(--jg-family-text) !important;

}


/* =========================================================
   CARD FOOTER
   ========================================================= */

.jg-pet-card__footer {

	border-color:
		var(--jg-line) !important;

}


/* =========================================================
   DETAIL PAGE
   STATUS COLOR
   ========================================================= */

.jg-pet-detail.is-sale {

	--jg-detail-color:
		var(--jg-sale);

	--jg-detail-text:
		var(--jg-sale-text);

}


.jg-pet-detail.is-reservation {

	--jg-detail-color:
		var(--jg-reservation);

	--jg-detail-text:
		var(--jg-reservation-text);

}


.jg-pet-detail.is-negotiation {

	--jg-detail-color:
		var(--jg-negotiation);

	--jg-detail-text:
		var(--jg-negotiation-text);

}


.jg-pet-detail.is-family {

	--jg-detail-color:
		var(--jg-family);

	--jg-detail-text:
		var(--jg-family-text);

}


/* =========================================================
   DETAIL SUMMARY BORDER
   ========================================================= */

.jg-pet-detail.is-sale
.jg-pet-detail__summary,

.jg-pet-detail.is-reservation
.jg-pet-detail__summary,

.jg-pet-detail.is-negotiation
.jg-pet-detail__summary,

.jg-pet-detail.is-family
.jg-pet-detail__summary {

	border-color:
		var(--jg-detail-color) !important;

}


/* =========================================================
   DETAIL STATUS
   ========================================================= */

.jg-pet-detail.is-sale
.jg-pet-detail__status,

.jg-pet-detail.is-reservation
.jg-pet-detail__status,

.jg-pet-detail.is-negotiation
.jg-pet-detail__status,

.jg-pet-detail.is-family
.jg-pet-detail__status {

	background:
		var(--jg-detail-color) !important;

	color:
		var(--jg-detail-text) !important;

	border-color:
		var(--jg-detail-color) !important;

}


/* =========================================================
   DETAIL SOLD
   ========================================================= */

.jg-pet-detail.is-family
.jg-pet-detail__price.is-sold strong {

	color:
		var(--jg-family-text) !important;

}


/* =========================================================
   DETAIL LINE COLORS
   ========================================================= */

.jg-pet-detail__facts,

.jg-pet-detail__fact,

.jg-pet-detail__support-card,

.jg-pet-detail__neighbor {

	border-color:
		var(--jg-line) !important;

}


/* =========================================================
   DETAIL CTA
   ========================================================= */

.jg-pet-detail__cta {

	border-color:
		var(--jg-line) !important;

	background:
		linear-gradient(
			135deg,
			rgba(191, 231, 198, .23),
			rgba(255, 247, 240, .75)
		) !important;

}


/* =========================================================
   MOBILE
   以下は既存レイアウト維持
   ========================================================= */

@media screen and (max-width: 767px) {


	.jg-pet-grid {

		display:
			grid !important;

		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			) !important;

		gap:
			16px 10px !important;

		align-items:
			stretch !important;

		width:
			100% !important;

	}


	.jg-pet-card {

		display:
			flex !important;

		flex-direction:
			column !important;

		min-width:
			0 !important;

		width:
			100% !important;

		height:
			100% !important;

		overflow:
			hidden !important;

	}


	.jg-pet-card__body {

		display:
			flex !important;

		flex-direction:
			column !important;

		flex:
			1 1 auto !important;

		min-width:
			0 !important;

		padding:
			14px 12px 12px !important;

	}


	.jg-pet-card__image {

		position:
			relative !important;

		width:
			100% !important;

		aspect-ratio:
			1.25 / 1 !important;

		overflow:
			hidden !important;

	}


	.jg-pet-card__image-link {

		display:
			block !important;

		width:
			100% !important;

		height:
			100% !important;

	}


	.jg-pet-card__image img {

		display:
			block !important;

		width:
			100% !important;

		height:
			100% !important;

		object-fit:
			cover !important;

		margin:
			0 !important;

	}


	.jg-pet-card__status {

		top:
			10px !important;

		left:
			9px !important;

		max-width:
			calc(
				100% - 62px
			) !important;

		padding:
			6px 10px !important;

		font-size:
			11px !important;

		line-height:
			1.15 !important;

		white-space:
			nowrap !important;

	}


	.jg-favorite-button {

		top:
			8px !important;

		right:
			8px !important;

		width:
			44px !important;

		height:
			44px !important;

		min-width:
			44px !important;

		min-height:
			44px !important;

	}


	.jg-favorite-button__heart {

		font-size:
			26px !important;

		line-height:
			1 !important;

	}


	.jg-pet-card__id {

		min-height:
			20px !important;

		margin:
			0 0 9px !important;

		font-size:
			13px !important;

		line-height:
			1.25 !important;

	}


	.jg-pet-chip--type {

		display:
			flex !important;

		align-items:
			center !important;

		justify-content:
			center !important;

		width:
			100% !important;

		min-height:
			39px !important;

		margin:
			0 !important;

		padding:
			7px 8px !important;

		border-radius:
			999px !important;

		font-size:
			clamp(
				12px,
				3.15vw,
				15px
			) !important;

		font-weight:
			700 !important;

		line-height:
			1.15 !important;

		white-space:
			nowrap !important;

		overflow:
			hidden !important;

		text-overflow:
			ellipsis !important;

	}


	.jg-pet-card__morph-slot {

		min-height:
			20px !important;

		margin:
			4px 0 0 !important;

		padding:
			0 !important;

		font-size:
			11px !important;

		line-height:
			1.3 !important;

	}


	.jg-pet-card__morph-slot:empty {

		min-height:
			10px !important;

		height:
			10px !important;

	}


	.jg-pet-card__info-row {

		display:
			grid !important;

		grid-template-columns:
			minmax(0, 1fr)
			auto !important;

		align-items:
			center !important;

		gap:
			7px !important;

		min-height:
			58px !important;

		margin:
			5px 0 9px !important;

	}


	.jg-pet-chip--sex {

		justify-self:
			start !important;

		max-width:
			100% !important;

		min-height:
			31px !important;

		padding:
			5px 10px !important;

		font-size:
			11px !important;

		line-height:
			1.1 !important;

		white-space:
			nowrap !important;

	}


	.jg-pet-card__note {

		display:
			none !important;

	}


	.jg-pet-card__birthday {

		display:
			flex !important;

		flex-direction:
			column !important;

		align-items:
			flex-end !important;

		justify-content:
			center !important;

		min-width:
			58px !important;

		margin:
			0 !important;

		text-align:
			right !important;

	}


	.jg-pet-card__birthday-year {

		display:
			block !important;

		font-size:
			10px !important;

		line-height:
			1.25 !important;

		white-space:
			nowrap !important;

	}


	.jg-pet-card__birthday-date {

		display:
			block !important;

		margin-top:
			4px !important;

		font-size:
			10px !important;

		line-height:
			1.25 !important;

		white-space:
			nowrap !important;

	}


	.jg-pet-card__footer {

		display:
			grid !important;

		grid-template-columns:
			minmax(0, 1fr)
			auto !important;

		align-items:
			center !important;

		gap:
			5px !important;

		width:
			100% !important;

		min-width:
			0 !important;

		margin-top:
			auto !important;

		padding-top:
			12px !important;

		border-top:
			1px solid
			var(--jg-line) !important;

	}


	.jg-pet-card__price-area {

		display:
			flex !important;

		align-items:
			center !important;

		min-width:
			0 !important;

		overflow:
			hidden !important;

	}


	.jg-pet-card__price,
	.jg-pet-card__sold {

		display:
			block !important;

		min-width:
			0 !important;

		max-width:
			100% !important;

		margin:
			0 !important;

		font-size:
			clamp(
				15px,
				4vw,
				20px
			) !important;

		line-height:
			1 !important;

		font-weight:
			800 !important;

		letter-spacing:
			-.04em !important;

		white-space:
			nowrap !important;

	}


	.jg-pet-card__detail {

		display:
			inline-flex !important;

		align-items:
			center !important;

		justify-content:
			center !important;

		flex:
			0 0 auto !important;

		min-width:
			0 !important;

		min-height:
			37px !important;

		margin:
			0 !important;

		padding:
			6px 8px !important;

		border-radius:
			12px !important;

		font-size:
			9.5px !important;

		font-weight:
			700 !important;

		line-height:
			1.05 !important;

		white-space:
			nowrap !important;

		letter-spacing:
			-.02em !important;

	}


	.jg-pet-card__detail span {

		margin-left:
			3px !important;

		font-size:
			12px !important;

	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 390px) {

	.jg-pet-grid {

		gap:
			14px 8px !important;

	}


	.jg-pet-card__body {

		padding:
			12px 9px 10px !important;

	}


	.jg-pet-card__price,
	.jg-pet-card__sold {

		font-size:
			14px !important;

	}


	.jg-pet-card__detail {

		min-height:
			35px !important;

		padding:
			5px 6px !important;

		font-size:
			8.5px !important;

	}


	.jg-pet-chip--type {

		font-size:
			11.5px !important;

	}


	.jg-pet-chip--sex {

		padding:
			5px 7px !important;

		font-size:
			10px !important;

	}


	.jg-pet-card__birthday-year,
	.jg-pet-card__birthday-date {

		font-size:
			9px !important;

	}

}