/**
 * NexaShop Elementor Full Fidelity Layout & Content Width Engine
 * Ensures 100% pixel-perfect fidelity between Elementor Editor settings and Frontend display
 * Prevents theme wrapper clamping, RTL horizontal scrolling, and styling conflicts
 *
 * @package NexaShop
 */

/* ==========================================================================
   1. UNCONSTRAIN PARENT WRAPPERS ON ELEMENTOR PAGES & TEMPLATES
   ========================================================================== */

/**
 * When a page, post, or template is edited or rendered with Elementor:
 * Outer wrappers (.site-main, .page-content, #content) must NEVER restrict,
 * clamp, or add unwanted horizontal padding to the Elementor canvas.
 */
body.elementor-page .site-main,
body.elementor-editor-active .site-main,
body.elementor-template-full-width .site-main,
body.elementor-default .site-main,
body[class*="elementor-page-"] .site-main,
.site-main.nexashop-elementor-active-page,
.site-main:has(.elementor),
body.elementor-page .page-content,
body.elementor-editor-active .page-content,
body.elementor-template-full-width .page-content,
.nexashop-elementor-page-content,
.page-content:has(.elementor) {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-inline-start: 0 !important;
	padding-inline-end: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-inline-start: auto !important;
	margin-inline-end: auto !important;
	box-sizing: border-box !important;
	border: none !important;
	box-shadow: none !important;
}

/* Also ensure #content is 100% full width */
#content.site-main.nexashop-elementor-active-page,
body.elementor-page #content.site-main,
body.elementor-editor-active #content.site-main {
	width: 100% !important;
	max-width: 100% !important;
}

/* ==========================================================================
   2. ELEMENTOR CLASSIC SECTIONS & BOXED CONTAINERS
   ========================================================================== */

/**
 * Boxed sections must center themselves smoothly via margin-inline: auto
 * and strictly respect the exact user-configured width (whether 1140, 1200, 1320, 1369, 1400, etc.)
 */
.elementor-section.elementor-section-boxed > .elementor-container {
	margin-left: auto !important;
	margin-right: auto !important;
	margin-inline: auto !important;
}

/**
 * Full-width sections must span 100% of the viewport width without restriction
 */
.elementor-section.elementor-section-full_width {
	width: 100% !important;
	max-width: 100% !important;
}

.elementor-section.elementor-section-full_width > .elementor-container {
	max-width: 100% !important;
	width: 100% !important;
}

/* ==========================================================================
   3. MODERN ELEMENTOR FLEXBOX CONTAINERS (e-con)
   ========================================================================== */

/**
 * Flexbox boxed containers: center and obey user-configured --container-max-width / --content-width
 */
.elementor .e-con--boxed {
	margin-inline: auto !important;
}

/**
 * Flexbox full-width containers: strictly 100% width
 */
.elementor .e-con--full {
	width: 100% !important;
	max-width: 100% !important;
}

/* ==========================================================================
   4. RTL STRETCHED SECTION HORIZONTAL STABILITY
   ========================================================================== */

/**
 * Elementor's JS stretch section (elementor-section-stretched) in RTL calculates offsets.
 * To avoid any horizontal scrollbar appearing or jumping on RTL pages:
 */
html,
body {
	overflow-x: clip;
}

@supports not (overflow-x: clip) {
	html,
	body {
		overflow-x: hidden;
	}
}

/* ==========================================================================
   5. PREVENT THEME LINK UNDERLINE INVASION IN ELEMENTOR
   ========================================================================== */

/**
 * In theme.css, .page-content a { text-decoration: underline } causes
 * buttons, cards, headings, and nav links in Elementor to get an ugly underline.
 * We reset it cleanly for all Elementor contents.
 */
.elementor a,
.nexashop-elementor-page-content a,
.page-content .elementor a,
.page-content .elementor-widget a {
	text-decoration: none;
}

/* ==========================================================================
   6. ELEMENTOR EDITOR IFRAME HARMONIZATION
   ========================================================================== */

/**
 * Inside the Elementor editor canvas, ensure the preview matches the exact frontend layout
 */
body.elementor-editor-active #content,
body.elementor-editor-active .site-main,
body.elementor-editor-active .page-content {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 auto !important;
}

/* ==========================================================================
   7. UNIFIED PRODUCT PRICING & STOCK BADGE STYLES
   ========================================================================== */

.nexashop-price-out-of-stock,
.nexashop-card-out-of-stock,
.nexashop-plc-out-of-stock,
.stock.out-of-stock {
	display: inline-block;
	color: #ef4444 !important;
	font-weight: 700;
	font-size: 0.95em;
	letter-spacing: normal;
}

.nexashop-price-call-for-price,
.nexashop-card-call-for-price,
.nexashop-plc-call-for-price {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #0284c7 !important;
	font-weight: 700;
	font-size: 0.95em;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.nexashop-price-call-for-price:hover,
.nexashop-card-call-for-price a:hover,
.nexashop-plc-call-tel-link:hover {
	color: #0369a1 !important;
}

.nexashop-call-tel-link,
.nexashop-plc-call-tel-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #0284c7 !important;
	text-decoration: none !important;
	font-weight: 700;
}

.nexashop-price-free,
.nexashop-card-free-price,
.nexashop-plc-free-price {
	display: inline-block;
	color: #10b981 !important;
	font-weight: 700;
	font-size: 0.95em;
}

.nexashop-btn-card-action.nexashop-btn-call,
.nexashop-deal-btn-cart.is-call,
.nexashop-plc-action-btn.is-call {
	color: #0284c7 !important;
	background: #f0f9ff !important;
	border-color: #bae6fd !important;
}

.nexashop-btn-card-action.nexashop-btn-call:hover,
.nexashop-deal-btn-cart.is-call:hover,
.nexashop-plc-action-btn.is-call:hover {
	background: #e0f2fe !important;
}

.nexashop-deal-btn-cart.is-disabled,
.nexashop-plc-action-btn.is-disabled {
	opacity: 0.75;
	cursor: pointer;
}