/**
 * JSG TablePress Cart
 *
 * Styles for TablePress cart buttons, status messages, loading states,
 * and duplicate-CD confirmations.
 */

/* --------------------------------------------------------------
   Cart status messages
-------------------------------------------------------------- */

.jsg-tablepress-cart-status {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-weight: 600;
}

.jsg-tablepress-cart-status[hidden] {
	display: none;
}

.jsg-tablepress-cart-status.is-loading {
	background: #f5f5f5;
	color: #333;
}

.jsg-tablepress-cart-status.is-success {
	background: #edf7ed;
	color: #1e5f24;
}

.jsg-tablepress-cart-status.is-error {
	background: #fbeaea;
	color: #8a1f1f;
}


/* --------------------------------------------------------------
   Product buttons
-------------------------------------------------------------- */

#tablepress-5 .jgcrtbtns {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-width: 75px;
	padding: 0.45rem 0.65rem;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	line-height: 1.2;
	text-align: center;
}

#tablepress-5 .jgcrtbtns:hover,
#tablepress-5 .jgcrtbtns:focus {
	opacity: 0.85;
}

#tablepress-5 .jgcrtbtns:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

#tablepress-5 .jgcrtbtns:disabled {
	cursor: wait;
	opacity: 0.65;
}

#tablepress-5 .jgcrtbtns .media-labels,
#tablepress-5 .jgcrtbtns .price-labels {
	font-style: normal;
}

#tablepress-5 .jgcrtbtns .dashicons {
	width: auto;
	height: auto;
	font-size: inherit;
	line-height: inherit;
}


/* --------------------------------------------------------------
   Button loading state
-------------------------------------------------------------- */

#tablepress-5 .jgcrtbtns.is-loading {
	position: relative;
}

.jsg-cart-button-loading {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.jsg-cart-button-loading::before {
	width: 0.85rem;
	height: 0.85rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	content: "";
	animation: jsg-cart-button-spin 0.75s linear infinite;
}

@keyframes jsg-cart-button-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jsg-cart-button-loading::before {
		animation: none;
	}
}


/* --------------------------------------------------------------
   Duplicate-CD confirmation
-------------------------------------------------------------- */

#tablepress-5 tr.has-cd-confirmation td {
	background-color: #fff4d6;
}

#tablepress-5 .jsg-cd-confirmation {
	margin-top: 0.75rem;
	padding: 0.75rem;
	border: 1px solid #8a6500;
	border-radius: 4px;
	background: #fff;
	color: #222;
	font-size: 0.9rem;
	line-height: 1.4;
}

#tablepress-5 .jsg-cd-confirmation p {
	margin: 0 0 0.75rem;
}

#tablepress-5 .jsg-cd-confirmation button {
	margin: 0 0.5rem 0 0;
	padding: 0.4rem 0.8rem;
	border: 1px solid currentColor;
	border-radius: 3px;
	cursor: pointer;
	font-weight: 600;
}

#tablepress-5 .jsg-cd-confirmation button:hover,
#tablepress-5 .jsg-cd-confirmation button:focus {
	opacity: 0.8;
}

#tablepress-5 .jsg-cd-confirmation button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}


/* --------------------------------------------------------------
   TablePress alignment
-------------------------------------------------------------- */

#tablepress-5 tr th {
	background-color: #1774c0!important;
	border: 1px solid #fff!important;
	text-align: center!important;
	color: #fff !important;
	border-collapse: collapse !important;
	padding: 10px 8px!important;
}
#tablepress-5 tr th div,
#tablepress-5 tr th span {
	color: #fff!important;
	font-weight: bold!important;
}

#tablepress-5 tr th[data-dt-column="1"] .dt-column-header {
	width: 280px;
	min-width: 280px;
}

#tablepress-5 tr {
	background: #fff!important;
}

#tablepress-5 tr:nth-child(even) {
	background: #bad5eb!important;
}

#tablepress-5 tr td {
	vertical-align: middle!important;
	color: #000!important;
	border: 1px solid #1774c0!important;
	text-align: center!important;
	font-weight: 500!important;
	background-color: transparent!important;
}
#tablepress-5 tr td p {
	margin: 0!important;
}

#tablepress-5 th:nth-child(n + 3),
#tablepress-5 td:nth-child(n + 3) {
	text-align: center;
}


/* --------------------------------------------------------------
   Small screens
-------------------------------------------------------------- */

@media screen and (max-width: 767px) {
	#tablepress-5 .jgcrtbtns {
		min-width: 68px;
		padding: 0.4rem 0.5rem;
	}

	#tablepress-5 .jsg-cd-confirmation button {
		display: block;
		width: 100%;
		margin: 0.5rem 0 0;
	}
}