/**
 * PersonalizeWP Product Collection Block Styles
 *
 * @package PersonalizeWP
 */

$pwp-primary: #874FB9;

@keyframes pwp-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.pwp-product-collection-block,
pwp-product-collection {
	margin: 0;
	text-align: center;

	.pwp-collection-title {
		margin: 0 0 1.5rem 0;
		padding: 0;
		font-size: 1.8rem;
		font-weight: 600;
		color: #333;
		text-align: center;

		@media (min-width: 768px) {
			font-size: 2.2rem;
		}
	}

	.pwp-loading-spinner {
		display: inline-block;
		width: 16px;
		height: 16px;
		border: 2px solid #ddd;
		border-top: 2px solid $pwp-primary;
		border-radius: 50%;
		animation: pwp-spin 1s linear infinite;
		margin-right: 8px;
		vertical-align: middle;
	}

	.pwp-loading-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	:where(.wp-block-woocommerce-product-collection) {
		text-align: center;

		.wc-block-components-notices {
			display: block;
			margin: 1.5em 0;

			&:first-child { margin-top: 0; }
			&:empty { margin: 0; }
		}

		:where(.wc-block-product-template) {
			list-style: none;
			margin: 0 auto;
			padding: 0;
			background: none;

			&.wc-block-product-template__responsive {
				grid-gap: 1.25em;
				display: grid;
				justify-content: center;

				> li { margin-block-start: 0; }
			}

			&.columns-1 { grid-template-columns: 1fr; }
			&.columns-2 { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(50% - 0.625em)), 1fr)); }
			&.columns-3 { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(33.33333% - 0.83333em)), 1fr)); }
			&.columns-4 { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(25% - 0.9375em)), 1fr)); }
			&.columns-5 { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(20% - 1em)), 1fr)); }
			&.columns-6 { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(16.66667% - 1.04167em)), 1fr)); }

			@media (max-width: 1024px) {
				&.columns-4, &.columns-5, &.columns-6 {
					grid-template-columns: repeat(3, 1fr);
				}
			}

			@media (max-width: 600px) {
				&.columns-3, &.columns-4, &.columns-5, &.columns-6 {
					grid-template-columns: repeat(2, 1fr);
				}
			}

			@media (max-width: 480px) {
				grid-template-columns: 1fr;
			}

			:where(.wc-block-product) {
				background: transparent;
				border: none;
				padding: 0;
				margin-block-start: 0;
				text-align: center;

				.wc-block-components-product-image {
					display: block;
					position: relative;
					text-decoration: none;
					margin: 0 0 12px;
					text-align: center;

					a {
						border: 0;
						border-radius: inherit;
						box-shadow: none;
						display: block;
						text-decoration: none;
					}

					img {
						border-radius: inherit;
						height: auto;
						vertical-align: middle;
						width: 100%;
					}

					.wc-block-components-product-sale-badge {
						background: #fff;
						border: 1px solid #43454b;
						border-radius: 4px;
						box-sizing: border-box;
						color: #43454b;
						display: inline-block;
						font-size: 0.875em;
						font-weight: 600;
						padding: 0.25em 0.75em;
						position: static;
						text-align: center;
						text-transform: uppercase;
						width: fit-content;
						z-index: 9;

						&--align-right {
							align-self: flex-end;
							left: auto;
							margin: 0;
							position: absolute;
							right: 4px;
							top: 4px;
						}

						span {
							background-color: inherit;
							color: inherit;
						}
					}
				}

				.wp-block-post-title {
					box-sizing: border-box;
					word-break: break-word;
					text-align: center;

					a {
						display: inline-block;
						font-family: inherit;
						font-size: inherit;
						font-style: inherit;
						font-weight: inherit;
						letter-spacing: inherit;
						line-height: inherit;
						text-decoration: inherit;
					}
				}

				.wc-block-components-product-rating {
					margin: 0.5rem 0;
					text-align: center;
					display: flex;
					justify-content: center;

					.wc-block-components-product-rating__stars {
						font-size: 1em;
						position: relative;
						width: 5.4em;
						height: 1em;
						line-height: 1;

						&::before {
							content: "★★★★★";
							opacity: 0.25;
							float: left;
							top: 0;
							left: 0;
							position: absolute;
							letter-spacing: 1px;
						}

						span {
							overflow: hidden;
							float: left;
							top: 0;
							left: 0;
							position: absolute;
							color: $pwp-primary;
							letter-spacing: 1px;

							&::before {
								content: "★★★★★";
								top: 0;
								position: absolute;
								left: 0;
								color: $pwp-primary;
								letter-spacing: 1px;
							}
						}

						strong, .rating {
							position: absolute;
							top: -9999em;
						}
					}
				}

				.wp-block-woocommerce-product-price {
					text-align: center;

					.wc-block-components-product-price {
						display: block;

						ins { text-decoration: none; }
						.woocommerce-Price-amount { white-space: nowrap; }
					}
				}

				.wp-block-button.wc-block-components-product-button {
					align-items: center;
					display: flex;
					flex-direction: column;
					gap: 12px;
					justify-content: center;
					white-space: normal;
					word-break: break-word;
					text-align: center;

					.wp-block-button__link {
						display: inline-flex;
						font-size: 1em;
						justify-content: center;
						text-align: center;
						white-space: normal;
						width: auto;
						word-break: break-word;
					}

					.wc-block-components-product-button__button {
						align-items: center;
						border-style: none;
						display: inline-flex;
						justify-content: center;
						line-height: inherit;
						overflow: hidden;
						white-space: normal;
						word-break: break-word;

						&.loading {
							background-color: #ccc;
							color: #666;
							cursor: not-allowed;

							&::after {
								content: '';
								display: inline-block;
								width: 12px;
								height: 12px;
								border: 2px solid #666;
								border-top: 2px solid transparent;
								border-radius: 50%;
								animation: pwp-spin 1s linear infinite;
								margin-left: 8px;
								vertical-align: middle;
							}
						}

						&.added {
							background-color: #28a745;
							border-color: #28a745;
							color: #fff;
						}

						&.error {
							background-color: #dc3545;
							border-color: #dc3545;
							color: #fff;
						}

						&:disabled {
							opacity: 0.7;
							cursor: not-allowed;
						}
					}

					.added_to_cart {
						display: block;
						margin-top: 1em;
					}
				}

				> :not(:last-child) {
					margin-bottom: 0.75rem;
					margin-top: 0;
				}
			}
		}

		&.pwp-layout-list {
			text-align: center;

			:where(.wc-block-product-template) {
				grid-template-columns: 1fr;
				gap: 2rem;
				text-align: center;

				:where(.wc-block-product.pwp-list-item) {
					display: block;
					text-align: center;
					padding: 1.5rem;
					border: 1px solid #e0e0e0;
					border-radius: 8px;
					background: #fff;

					.wc-block-components-product-image {
						width: 100%;
						margin-bottom: 1rem;
						text-align: center;

						img {
							width: 100%;
							height: auto;
							max-height: 300px;
							object-fit: cover;
						}
					}

					.wc-block-components-product-content {
						display: block;

						.wp-block-post-title {
							margin-bottom: 0.75rem;
							font-size: 1.2rem;
							line-height: 1.4;
							text-align: center;
						}

						.wc-block-components-product-rating {
							margin: 0.5rem 0;
							text-align: center;
							justify-content: center;
						}

						.wp-block-woocommerce-product-price {
							margin: 0.75rem 0;
							text-align: center;

							.wc-block-components-product-price {
								font-size: 1.2rem;
								font-weight: 600;
							}
						}

						.wp-block-button.wc-block-components-product-button {
							margin-top: 1rem;
							text-align: center;

							.wp-block-button__link {
								width: 100%;
								font-size: 1rem;
								padding: 0.8rem 1.5rem;
							}
						}
					}
				}
			}
		}

		&.pwp-layout-grid {
			:where(.wc-block-product-template) {
				:where(.wc-block-product) {
					display: block;
					text-align: center;

					.wc-block-components-product-content > * {
						display: block;
					}
				}
			}
		}

		.woocommerce-info,
		.woocommerce-error,
		.woocommerce-message {
			padding: 1rem 1.5rem;
			margin: 1rem 0;
			border-radius: 4px;
			border-left: 4px solid;
			background: #f8f9fa;

			&.woocommerce-info {
				border-left-color: $pwp-primary;
				color: #333;
			}
		}
	}
}

.pwp-product-collection-block {
	:where(.wc-block-product-template) {
		text-align: center;
	}

	.wc-block-components-notices:not(:empty) {
		margin: 1.5em 0;
	}
}

.pwp-text-center { text-align: center; }
.pwp-text-left { text-align: left; }
.pwp-mt-auto { margin-top: auto; }
.pwp-mb-0 { margin-bottom: 0; }
.pwp-gap-1 { gap: 0.5rem; }
.pwp-gap-2 { gap: 1rem; }
.pwp-gap-3 { gap: 1.5rem; }

.pwp-add-to-cart-button {
	position: relative;

	.added_to_cart {
		margin-left: 0.5rem;
		font-size: 0.9em;

		a {
			color: #059669;
			text-decoration: underline;

			&:hover {
				color: #047857;
				text-decoration: none;
			}
		}
	}
}

.wp-block-personalizewp-pro-product-collection {
	position: relative;

	&.is-loading {
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20px;
			height: 20px;
			margin: -10px 0 0 -10px;
			border: 2px solid #ccc;
			border-top-color: $pwp-primary;
			border-radius: 50%;
			animation: pwp-spin 1s linear infinite;
			z-index: 10;
		}
	}
}

@media (max-width: 768px) {
	.pwp-hide-mobile { display: none; }
	.pwp-text-center-mobile { text-align: center; }
}

@media (min-width: 769px) {
	.pwp-hide-desktop { display: none; }
}