/**
 * OM Product Page Essentials - Frontend Styles
 */

/* ==========================================================================
   Payment Logos
   ========================================================================== */

.om-ppe-payment-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--om-ppe-logos-gap, 10px);
	margin: var(--om-ppe-logos-margin, 15px 0);
}

.om-ppe-payment-logos img {
	max-width: var(--om-ppe-logos-width, 50px);
	height: auto;
	border-radius: var(--om-ppe-logos-border-radius, 4px);
}

.om-ppe-payment-logos-title {
	width: 100%;
	margin: 0 0 10px 0;
	font-size: 14px;
	font-weight: 600;
	color: inherit;
}

/* ==========================================================================
   Product Labels
   ========================================================================== */

.om-ppe-product-label {
	position: absolute;
	z-index: 9;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--om-ppe-label-padding, 5px 10px);
	font-size: var(--om-ppe-label-font-size, 12px);
	font-weight: var(--om-ppe-label-font-weight, 600);
	line-height: 1.2;
	color: var(--om-ppe-label-text-color, #ffffff);
	background-color: var(--om-ppe-label-bg-color, #e74c3c);
	border-radius: var(--om-ppe-label-border-radius, 3px);
}

/* Label positions */
.om-ppe-product-label.position-top-left {
	top: 10px;
	left: 10px;
}

.om-ppe-product-label.position-top-right {
	top: 10px;
	right: 10px;
}

.om-ppe-product-label.position-bottom-left {
	bottom: 10px;
	left: 10px;
}

.om-ppe-product-label.position-bottom-right {
	bottom: 10px;
	right: 10px;
}

/* Label shapes */
.om-ppe-product-label.shape-circle {
	width: var(--om-ppe-label-circle-size, 50px);
	height: var(--om-ppe-label-circle-size, 50px);
	padding: 5px;
	text-align: center;
	border-radius: 50%;
}

.om-ppe-product-label.shape-rounded {
	border-radius: var(--om-ppe-label-border-radius, 20px);
}

/* Label types */
.om-ppe-product-label.label-sale {
	background-color: var(--om-ppe-label-sale-bg, #e74c3c);
}

.om-ppe-product-label.label-new {
	background-color: var(--om-ppe-label-new-bg, #27ae60);
}

.om-ppe-product-label.label-hot {
	background-color: var(--om-ppe-label-hot-bg, #e67e22);
}

.om-ppe-product-label.label-out-of-stock {
	background-color: var(--om-ppe-label-oos-bg, #7f8c8d);
}

/* Ensure product image container is relative */
.woocommerce ul.products li.product .om-ppe-product-image-wrapper,
.woocommerce-page ul.products li.product .om-ppe-product-image-wrapper,
.single-product .woocommerce-product-gallery {
	position: relative;
}

/* ==========================================================================
   Animated Add to Cart
   ========================================================================== */

/* Animation Keyframes - Applied via inline styles to specific buttons only */
@keyframes om-ppe-flash {
	0%, 50%, 100% { opacity: 1; }
	25%, 75% { opacity: 0.5; }
}

@keyframes om-ppe-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-10px); }
	60% { transform: translateY(-5px); }
}

@keyframes om-ppe-zoom-in {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

@keyframes om-ppe-shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
	20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes om-ppe-pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4); }
	70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

@keyframes om-ppe-jello-shake {
	0%, 11.1%, 100% { transform: none; }
	22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
	33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
	44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
	55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
	66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
	77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
	88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

@keyframes om-ppe-wobble {
	0%, 100% { transform: translateX(0); }
	15% { transform: translateX(-15px) rotate(-5deg); }
	30% { transform: translateX(10px) rotate(3deg); }
	45% { transform: translateX(-10px) rotate(-3deg); }
	60% { transform: translateX(5px) rotate(2deg); }
	75% { transform: translateX(-5px) rotate(-1deg); }
}

@keyframes om-ppe-vibrate {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
	20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes om-ppe-swing {
	20% { transform: rotate(15deg); }
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }
	80% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

@keyframes om-ppe-tada {
	0%, 100% { transform: scale(1) rotate(0); }
	10%, 20% { transform: scale(0.9) rotate(-3deg); }
	30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
	40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

/* ==========================================================================
   Wait List
   ========================================================================== */

.om-ppe-wait-list-container {
	position: relative;
	margin: 20px 0;
	padding: 20px;
	background-color: var(--om-ppe-waitlist-bg, #f8f9fa);
	border: 1px solid var(--om-ppe-waitlist-border, #e9ecef);
	border-radius: var(--om-ppe-waitlist-border-radius, 8px);
}

.om-ppe-wait-list-title {
	margin: 0 0 15px 0;
	font-size: var(--om-ppe-waitlist-title-size, 16px);
	font-weight: 600;
	color: var(--om-ppe-waitlist-title-color, #333);
}

.om-ppe-wait-list-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.om-ppe-wait-list-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.om-ppe-wait-list-field label {
	font-size: 14px;
	font-weight: 500;
	color: #555;
}

.om-ppe-wait-list-field label .required {
	color: #e74c3c;
}

.om-ppe-wait-list-field input[type="email"] {
	width: 100%;
	padding: 12px 15px;
	font-size: 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	transition: border-color 0.3s ease;
}

.om-ppe-wait-list-field input[type="email"]:focus {
	border-color: var(--om-ppe-waitlist-button-bg, #0073aa);
	outline: none;
}

.om-ppe-wait-list-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 25px;
	font-size: var(--om-ppe-waitlist-button-size, 14px);
	font-weight: 600;
	color: var(--om-ppe-waitlist-button-text, #ffffff);
	background-color: var(--om-ppe-waitlist-button-bg, #0073aa);
	border: none;
	border-radius: var(--om-ppe-waitlist-button-radius, 4px);
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.om-ppe-wait-list-submit:hover {
	background-color: var(--om-ppe-waitlist-button-hover, #005a87);
	transform: translateY(-1px);
}

.om-ppe-wait-list-submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

/* Loading state */
.om-ppe-wait-list-container.loading .om-ppe-wait-list-form {
	opacity: 0.5;
	pointer-events: none;
}

.om-ppe-wait-list-loader {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.om-ppe-wait-list-container.loading .om-ppe-wait-list-loader {
	display: block;
}

.om-ppe-wait-list-loader svg {
	width: 40px;
	height: 40px;
	animation: om-ppe-spin 1s linear infinite;
}

@keyframes om-ppe-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Messages */
.om-ppe-wait-list-message {
	padding: 15px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.om-ppe-wait-list-message.success {
	background-color: #d4edda;
	border: 1px solid #c3e6cb;
	color: #155724;
}

.om-ppe-wait-list-message.error {
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	color: #721c24;
}

/* ==========================================================================
   Product Brand
   ========================================================================== */

.om-ppe-product-brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--om-ppe-pb-align, flex-start);
	gap: 8px;
	margin-top: var(--om-ppe-pb-margin-top, 10px);
	margin-bottom: var(--om-ppe-pb-margin-bottom, 10px);
}

.om-ppe-product-brand-label {
	font-size: 14px;
	font-weight: 400;
	color: var(--om-ppe-pb-label-color, #666666);
}

.om-ppe-product-brand-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s ease;
}

.om-ppe-product-brand-link:hover {
	opacity: 0.8;
}

.om-ppe-product-brand-link:hover .om-ppe-product-brand-name {
	text-decoration: underline;
}

.om-ppe-product-brand-logo {
	max-height: var(--om-ppe-pb-logo-max-height, 40px);
	max-width: var(--om-ppe-pb-logo-max-width, 120px);
	width: auto;
	height: auto;
	object-fit: contain;
}

.om-ppe-product-brand-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--om-ppe-pb-text-color, #d5427e);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ==========================================================================
   Product Needs
   ========================================================================== */

.om-ppe-product-needs {
	display: flex;
	flex-direction: column;
	align-items: var(--om-ppe-pn-align, flex-start);
	margin-top: var(--om-ppe-pn-margin-top, 20px);
	margin-bottom: var(--om-ppe-pn-margin-bottom, 20px);
	padding: 15px 20px;
	background-color: var(--om-ppe-pn-bg-color, #f8f9fa);
	border: 1px solid var(--om-ppe-pn-border-color, #e9ecef);
	border-radius: 8px;
}

.om-ppe-product-needs-title {
	margin: 0 0 12px 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--om-ppe-pn-text-color, #333333);
}

.om-ppe-product-needs-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.om-ppe-product-needs-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--om-ppe-pn-text-color, #333333);
	cursor: default;
}

.om-ppe-product-needs-item[title] {
	cursor: help;
}

.om-ppe-product-needs-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--om-ppe-pn-icon-color, #27ae60);
}

.om-ppe-product-needs-icon svg {
	width: 16px;
	height: 16px;
}

.om-ppe-product-needs-text {
	color: var(--om-ppe-pn-text-color, #333333);
}

.om-ppe-product-needs-link {
	color: var(--om-ppe-pn-link-color, #0073aa);
	text-decoration: none;
	transition: color 0.2s ease;
}

.om-ppe-product-needs-link:hover {
	color: var(--om-ppe-pn-text-color, #333333);
	text-decoration: underline;
}

/* Alignment variations */
.om-ppe-product-needs[style*="--om-ppe-pn-align: center"] .om-ppe-product-needs-list,
.om-ppe-product-needs[style*="--om-ppe-pn-align:center"] .om-ppe-product-needs-list {
	align-items: center;
}

.om-ppe-product-needs[style*="--om-ppe-pn-align: flex-end"] .om-ppe-product-needs-list,
.om-ppe-product-needs[style*="--om-ppe-pn-align:flex-end"] .om-ppe-product-needs-list {
	align-items: flex-end;
}

/* Tab variant - simpler styling without box */
.om-ppe-product-needs--tab {
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 0;
}

.om-ppe-product-needs--tab .om-ppe-product-needs-list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px 15px;
}

.om-ppe-product-needs--tab .om-ppe-product-needs-item {
	gap: 6px;
}

/* ==========================================================================
   Product Meta (SKU/Barcode)
   ========================================================================== */

.om-ppe-product-meta {
	display: grid;
	gap: 6px;
	margin-top: 15px;
}

.om-ppe-meta-row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	line-height: 1.5;
	font-size: 14px;
}

.om-ppe-meta-label {
	font-weight: 600;
	color: var(--om-ppe-pm-label-color, #333333);
}

.om-ppe-meta-codes {
	color: var(--om-ppe-pm-text-color, #666666);
}

.om-ppe-meta-more {
	display: inline-block;
	margin-left: 4px;
	color: var(--om-ppe-pm-text-color, #666666);
	cursor: pointer;
	text-decoration: underline dotted;
	transition: color 0.2s ease;
}

.om-ppe-meta-more:hover {
	color: var(--om-ppe-pm-label-color, #333333);
}

.om-ppe-meta-tooltip {
	position: absolute;
	z-index: 50;
	display: none;
	max-width: 420px;
	padding: 10px 14px;
	margin-top: 6px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #222;
	word-break: break-word;
}

.om-ppe-meta-tooltip.visible {
	display: block;
}

/* ==========================================================================
   Product Categories
   ========================================================================== */

.om-ppe-product-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 15px;
	margin-top: 15px;
	font-size: 14px;
	line-height: 1.5;
}

.om-ppe-product-categories--list {
	flex-direction: column;
	gap: 8px;
}

.om-ppe-categories-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px;
}

.om-ppe-categories-label {
	font-weight: 600;
	color: var(--om-ppe-cat-label-color, #333333);
}

.om-ppe-categories-links {
	color: var(--om-ppe-cat-link-color, #666666);
}

.om-ppe-categories-links a {
	color: var(--om-ppe-cat-link-color, inherit);
	text-decoration: none;
	transition: color 0.2s ease;
}

.om-ppe-categories-links a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Variations Gallery
   ========================================================================== */

/* Hidden gallery state - used when switching between variations */
.woocommerce-product-gallery.om-ppe-gallery-hidden {
	display: none !important;
}

/* Video thumbnail indicator in gallery */
.om-ppe-video-thumb {
	position: relative;
}

.om-ppe-video-thumb::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
	pointer-events: none;
	z-index: 5;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
	.om-ppe-payment-logos {
		justify-content: center;
	}

	.om-ppe-wait-list-container {
		padding: 15px;
	}

	.om-ppe-wait-list-submit {
		width: 100%;
	}

	.om-ppe-product-brand {
		justify-content: center;
	}

	.om-ppe-product-brand-logo {
		max-height: 30px;
	}

	.om-ppe-product-needs {
		padding: 12px 15px;
	}

	.om-ppe-product-needs-item {
		gap: 8px;
		font-size: 13px;
	}
}