/**
 * WooCommerce Product Page Styling Overrides
 *
 * Version: 1.3.0
 * Purpose: Custom styling for WooCommerce product pages
 * Theme: eRide v1.1.6
 *
 * Targets:
 * - Success notices (.woocommerce-notice--success)
 * - Order confirmation status banners (.wc-block-order-confirmation-status)
 * - General messages (.woocommerce-message)
 * - Block-based notice banners (.wc-block-components-notice-banner.is-success)
 * - Product gallery (.woo-product-gallery-slider)
 *
 * Changes v1.3.0:
 * - Removed border completely (border: none)
 * - Removed display: inline-flex (keep default block display)
 *
 * Changes v1.2.0:
 * - Added desktop sticky product gallery (sticks until bottom of product summary)
 *
 * Changes v1.1.0:
 * - Removed border-inline-start (left accent line)
 * - Updated border-radius from 8px to 20px (pill style)
 * - Added inline-flex display for SVG icon alignment
 *
 * Changes v1.0.0:
 * - Removes green background from success notices
 * - Adds subtle gray border instead
 * - Updates text color for better readability
 * - Maintains accessibility while improving aesthetics
 */

/* ============================================================================
   Success Notices - Remove Green Background
   ========================================================================== */

.woocommerce-notice--success,
.wc-block-order-confirmation-status,
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	/* Remove green background */
	background-color: transparent !important;
	background: transparent !important;

	/* Remove border */
	border: none;

	/* Pill-style border radius */
	border-radius: 20px;

	/* Text color */
	color: var(--wp--preset--color--gray-100, #333);

	/* Maintain padding for breathing room */
	padding-block: clamp(0.75rem, 2.5vw, 1.25rem);
	padding-inline: clamp(1rem, 3vw, 1.5rem);

	/* SVG icon alignment */
	align-items: center;
	gap: 0.5rem;
}

/* ============================================================================
   Notice Banner Content
   ========================================================================== */

.wc-block-components-notice-banner__content {
	/* Ensure text color inheritance */
	color: inherit;
}

/* ============================================================================
   Links Within Notices
   ========================================================================== */

.woocommerce-notice--success a,
.wc-block-order-confirmation-status a,
.woocommerce-message a,
.wc-block-components-notice-banner.is-success a {
	/* Inherit color for consistency */
	color: inherit;

	/* Add underline for clarity */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.woocommerce-notice--success a:hover,
.wc-block-order-confirmation-status a:hover,
.woocommerce-message a:hover,
.wc-block-components-notice-banner.is-success a:hover {
	/* Slight opacity change on hover */
	opacity: 0.8;
}

/* ============================================================================
   Notice Icons (if present)
   ========================================================================== */

.woocommerce-notice--success::before,
.wc-block-components-notice-banner.is-success::before {
	/* Ensure icons use gray color instead of green */
	color: var(--wp--preset--color--gray-100, #333);
}

/* ============================================================================
   Dismissible Notices
   ========================================================================== */

.woocommerce-notice--success .woocommerce-notice-dismiss,
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__dismiss {
	/* Close button styling */
	color: var(--wp--preset--color--gray-100, #333);
	opacity: 0.6;
}

.woocommerce-notice--success .woocommerce-notice-dismiss:hover,
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__dismiss:hover {
	opacity: 1;
}

/* ============================================================================
   Desktop Sticky Product Gallery
   ========================================================================== */

/**
 * Sticky gallery on desktop - scrolls with user until bottom of product summary
 * Target: .woo-product-gallery-slider.woocommerce-product-gallery
 * Sticks until bottom of: woocommerce/product-summary block
 */
@media (min-width: 1025px) {
	.woo-product-gallery-slider.woocommerce-product-gallery.wpgs--with-images {
		position: sticky;
		top: 120px; /* Header height + spacing */
		align-self: flex-start; /* Critical for sticky in flexbox */
	}
}