/**
 * Minimal frontend styling for the Dimitra sample button.
 * Deliberately avoids fixed colors that would fight the Astra theme;
 * inherits WooCommerce button classes wherever possible.
 */

.dimitra-sample-block {
	margin: 1em 0;
	clear: both;
}

/**
 * Grid overlay host. Position only — do not change display/overflow/height,
 * or the Elementor loop image (width:100%; height:300px; object-fit:cover;
 * margin-top:-110px) collapses inside the padded card.
 */
.dimitra-sample-image,
.elementor-widget-theme-post-featured-image:has( .dimitra-sample-block--overlay ),
.astra-shop-thumbnail-wrap:has( .dimitra-sample-block--overlay ) {
	position: relative;
}

/**
 * Grid-card variant: small round button on the product image (bottom-right
 * so it does not collide with the typical top-left out-of-stock badge).
 */
.dimitra-sample-block--compact,
.dimitra-sample-block--overlay {
	position: absolute;
	right: 0.6em;
	bottom: 0.6em;
	z-index: 2;
	display: block;
	width: auto;
	margin: 0;
	clear: none;
	visibility: hidden;
}

.dimitra-sample-block--overlay .dimitra-sample-button-icon {
	display: flex;
	width: 20px;
	height: 20px;
}

.dimitra-sample-block--overlay .dimitra-sample-button-icon svg {
	width: 100%;
	height: 100%;
}

.dimitra-sample-block--overlay .dimitra-sample-message {
	position: absolute;
	right: 0;
	bottom: calc( 100% + 0.35em );
	left: auto;
	width: max-content;
	max-width: 12em;
	margin: 0;
	padding: 0.25em 0.5em;
	background: rgba( 255, 255, 255, 0.95 );
	border-radius: 4px;
	font-size: 0.75em;
	line-height: 1.3;
	text-align: right;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.12 );
}

.dimitra-sample-block--overlay .dimitra-sample-message:empty {
	display: none;
	padding: 0;
	box-shadow: none;
	background: none;
}

.dimitra-sample-image .dimitra-sample-block--overlay,
.elementor-widget-theme-post-featured-image .dimitra-sample-block--overlay,
.astra-shop-thumbnail-wrap .dimitra-sample-block--overlay {
	visibility: visible;
}

/* The staging container is emptied by the placement script; keep it inert
   even if a stylesheet somewhere overrides [hidden]. */
#dimitra-sample-staging {
	display: none !important;
}

.dimitra-sample-description {
	font-size: 0.9em;
	opacity: 0.85;
	margin-bottom: 0.5em;
}

/**
 * Match the site's own add-to-cart button (.sagor-cart-btn, rendered by the
 * theme's custom cart shortcode) so the sample button reads as part of the
 * same control group rather than falling back to the theme's default blue.
 *
 * Values mirror the theme's inline rule exactly: background #d39a1e,
 * hover #c88d12, white text, 4px radius. The custom properties below let a
 * site owner retheme both states without editing this file.
 */
.dimitra-sample-block {
	--dimitra-sample-bg: #d39a1e;
	--dimitra-sample-bg-hover: #c88d12;
	--dimitra-sample-fg: #fff;
}

.dimitra-sample-button {
	display: inline-block;
	cursor: pointer;
	line-height: 1.4;
}

/**
 * Astra styles generic `.button` elements via a long multi-selector chain
 * (`.woocommerce button.button.alt`, `[CLASS*="wc-block"] ...`) that sets
 * background-color from --ast-global-color-0 - the theme blue seen before
 * this rule existed. The doubled class below outranks it on specificity
 * without resorting to !important, so a site owner can still override this
 * from the Customizer or a child theme.
 */
.dimitra-sample-block .dimitra-sample-button.dimitra-sample-button {
	background: var( --dimitra-sample-bg );
	background-color: var( --dimitra-sample-bg );
	border: 0;
	border-radius: 4px;
	color: var( --dimitra-sample-fg );
}

.dimitra-sample-block .dimitra-sample-button.dimitra-sample-button:hover,
.dimitra-sample-block .dimitra-sample-button.dimitra-sample-button:focus {
	background: var( --dimitra-sample-bg-hover );
	background-color: var( --dimitra-sample-bg-hover );
	color: var( --dimitra-sample-fg );
}

.dimitra-sample-block--overlay .dimitra-sample-button.dimitra-sample-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	max-width: 40px;
	max-height: 40px;
	padding: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
	font-size: 0;
	line-height: 0;
}

.dimitra-sample-button:focus-visible,
.dimitra-sample-button:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dimitra-sample-button.loading {
	opacity: 0.6;
	pointer-events: none;
}

.dimitra-sample-message {
	display: block;
	margin-top: 0.5em;
	font-size: 0.9em;
}

.dimitra-sample-message.success {
	color: #2a7a2a;
}

.dimitra-sample-message.error {
	color: #c0392b;
}

.dimitra-shipping-progress {
	margin-bottom: 1em;
}

.dimitra-sample-footer-fallback {
	margin: 1em 0;
}

.dimitra-shipping-progress:empty {
	display: none;
	margin: 0;
}

/**
 * Keep loop images on one baseline without touching Elementor's photo
 * CSS (300px cover + -110px pull-up). The card packs to the bottom, so a
 * one-line title is shorter and the image drops. Reserve 3 title lines
 * (26px / 32px) so every card's stack is the same height.
 */
.elementor-widget-loop-grid .elementor-572 .elementor-element.elementor-element-63136b2f,
.elementor-widget-loop-grid .elementor-572 .elementor-element.elementor-element-63136b2f .elementor-heading-title {
	min-height: 96px;
}

@media ( max-width: 480px ) {
	.dimitra-sample-block:not( .dimitra-sample-block--overlay ) .dimitra-sample-button {
		width: 100%;
		text-align: center;
	}
}