/* ============================================
   GLOBAL MOBILE RESPONSIVENESS FIX V2
   PairAhhDice UniVerse — Black/Gold Aesthetic
   ============================================ */

/* ============================================
   1. GLOBAL OVERFLOW PREVENTION
   ============================================ */
html,
body {
	overflow-x: hidden !important;
	max-width: 100vw !important;
}

body {
	min-width: 0 !important;
	width: 100% !important;
}

/* ============================================
   2. ALL ELEMENTOR CONTAINERS — FULL WIDTH
   ============================================ */
.elementor-section,
.elementor-section-wrap,
.elementor-top-section,
.elementor-inner-section,
.elementor-container,
.elementor-row,
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap,
.elementor-widget,
.elementor-element,
.e-con,
.e-con-inner,
.e-child {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* ============================================
   3. RESPONSIVE IMAGES — GLOBAL
   ============================================ */
img,
video,
iframe,
object,
embed,
svg {
	max-width: 100% !important;
	height: auto !important;
}

.elementor-image img,
.elementor-widget-image img,
.elementor-image-box-img img,
.elementor-widget img {
	max-width: 100% !important;
	height: auto !important;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================
   4. TABLET BREAKPOINT (1024px and below)
   ============================================ */
@media screen and (max-width: 1024px) {

	/* Force containers to full width */
	.elementor-section,
	.elementor-top-section,
	.elementor-inner-section,
	.elementor-container,
	.e-con,
	.e-con-inner {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow-x: hidden !important;
	}

	/* Remove fixed pixel widths on columns */
	.elementor-column,
	.elementor-col-100,
	.elementor-col-50,
	.elementor-col-33,
	.elementor-col-25,
	.elementor-col-20,
	.elementor-col-16,
	.e-child {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	/* Stack flex containers vertically */
	.elementor-container,
	.elementor-row,
	.e-con.e-flex {
		flex-direction: column !important;
		flex-wrap: wrap !important;
	}

	/* Grid layouts — single column on tablet */
	.e-con.e-grid {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
	}

	/* Standardize tablet padding */
	.elementor-section,
	.elementor-top-section,
	.e-con {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.elementor-inner-section,
	.e-con-inner,
	.e-child {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	/* Reset negative margins */
	.elementor-column-gap-default > .elementor-column > .elementor-element-populated,
	.elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
	.elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
	.elementor-column-gap-wide > .elementor-column > .elementor-element-populated,
	.elementor-column-gap-wider > .elementor-column > .elementor-element-populated {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Fix absolute positioned elements */
	.elementor-widget[style*="position: absolute"],
	.elementor-widget[style*="position:absolute"],
	.elementor-element[style*="position: absolute"],
	.elementor-element[style*="position:absolute"] {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		width: 100% !important;
	}

	/* Center section content */
	.elementor-section,
	.elementor-top-section,
	.e-con {
		justify-content: center !important;
		align-items: center !important;
	}

	.elementor-widget-wrap,
	.e-con-inner {
		justify-content: center !important;
		align-items: center !important;
	}
}

/* ============================================
   5. MOBILE BREAKPOINT (767px and below)
   ============================================ */
@media screen and (max-width: 767px) {

	/* Force all containers full width */
	.elementor-section,
	.elementor-top-section,
	.elementor-inner-section,
	.elementor-container,
	.elementor-row,
	.elementor-column,
	.elementor-column-wrap,
	.elementor-widget-wrap,
	.e-con,
	.e-con-inner,
	.e-child {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow-x: hidden !important;
	}

	/* Stack everything vertically */
	.elementor-container,
	.elementor-row,
	.e-con.e-flex,
	.e-con-inner {
		flex-direction: column !important;
		flex-wrap: wrap !important;
		align-items: center !important;
	}

	/* Grid — single column */
	.e-con.e-grid {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
		gap: 15px !important;
	}

	/* Mobile padding — clean and consistent */
	.elementor-section,
	.elementor-top-section,
	.e-con {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.elementor-inner-section,
	.e-con-inner,
	.e-child {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	/* Widgets full width */
	.elementor-widget {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Reset all negative margins */
	.elementor-element,
	.elementor-widget,
	.elementor-column {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Fix absolute positioning on mobile */
	.elementor-widget[style*="position: absolute"],
	.elementor-widget[style*="position:absolute"],
	.elementor-element[style*="position: absolute"],
	.elementor-element[style*="position:absolute"],
	[data-settings*="_position"] {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		width: 100% !important;
	}

	/* Center all major sections */
	.elementor-section,
	.elementor-top-section,
	.e-con {
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
	}

	.elementor-widget-wrap,
	.e-con-inner {
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
	}

	/* ============================================
	   6. HERO SECTIONS — MOBILE
	   ============================================ */
	.elementor-section[data-id] > .elementor-container {
		min-height: auto !important;
		height: auto !important;
	}

	/* ============================================
	   7. HEADINGS — RESPONSIVE TYPOGRAPHY
	   ============================================ */
	.elementor-heading-title {
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: auto !important;
		max-width: 100% !important;
	}

	h1.elementor-heading-title {
		font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
		line-height: 1.2 !important;
	}

	h2.elementor-heading-title {
		font-size: clamp(1.25rem, 5vw, 2rem) !important;
		line-height: 1.3 !important;
	}

	h3.elementor-heading-title {
		font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
		line-height: 1.3 !important;
	}

	/* ============================================
	   8. BUTTONS — MOBILE FRIENDLY
	   ============================================ */
	.elementor-button-wrapper {
		width: 100% !important;
		text-align: center !important;
	}

	.elementor-button {
		max-width: 100% !important;
		white-space: normal !important;
		word-wrap: break-word !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* ============================================
	   9. CARD LAYOUTS — STACK & CENTER
	   ============================================ */
	.elementor-posts-container,
	.elementor-portfolio,
	.elementor-grid {
		grid-template-columns: 1fr !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 20px !important;
	}

	.elementor-post,
	.elementor-portfolio-item,
	.elementor-grid-item {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* ============================================
	   10. ACCORDIONS & TOGGLES
	   ============================================ */
	.elementor-accordion,
	.elementor-toggle {
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor-accordion-item,
	.elementor-toggle-item {
		width: 100% !important;
	}

	.elementor-accordion-title,
	.elementor-toggle-title {
		font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
		padding: 12px 15px !important;
	}

	.elementor-accordion-content,
	.elementor-toggle-content {
		padding: 10px 15px !important;
	}

	/* ============================================
	   11. ICON BOXES & IMAGE BOXES
	   ============================================ */
	.elementor-icon-box-wrapper,
	.elementor-image-box-wrapper {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
	}

	.elementor-icon-box-icon,
	.elementor-image-box-img {
		margin-bottom: 10px !important;
		margin-right: 0 !important;
	}

	/* ============================================
	   12. TABS — STACK ON MOBILE
	   ============================================ */
	.elementor-tabs-wrapper {
		flex-direction: column !important;
	}

	.elementor-tab-title {
		width: 100% !important;
	}

	.elementor-tab-content {
		padding: 15px 10px !important;
	}

	/* ============================================
	   13. SPACERS — REDUCE ON MOBILE
	   ============================================ */
	.elementor-widget-spacer .elementor-spacer-inner {
		height: 20px !important;
	}

	/* ============================================
	   14. DIVIDERS — RESPONSIVE
	   ============================================ */
	.elementor-divider {
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* ============================================
	   15. TEXT EDITOR WIDGET
	   ============================================ */
	.elementor-text-editor {
		max-width: 100% !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}

	.elementor-text-editor p,
	.elementor-text-editor li {
		font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
		line-height: 1.6 !important;
	}

	/* ============================================
	   16. NAVIGATION / MENU — MOBILE
	   ============================================ */
	.elementor-nav-menu--layout-horizontal .elementor-nav-menu {
		flex-direction: column !important;
	}

	/* ============================================
	   17. FORMS — MOBILE FRIENDLY
	   ============================================ */
	.elementor-form .elementor-field-group {
		width: 100% !important;
		flex-basis: 100% !important;
	}

	.elementor-form .elementor-field {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* ============================================
	   18. SLIDERS & CAROUSELS
	   ============================================ */
	.elementor-slides,
	.elementor-image-carousel,
	.swiper-container,
	.swiper {
		max-width: 100% !important;
		overflow: hidden !important;
	}

	/* ============================================
	   19. VIDEO WIDGETS
	   ============================================ */
	.elementor-widget-video,
	.elementor-video {
		max-width: 100% !important;
	}

	.elementor-video iframe {
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
	}

	/* ============================================
	   20. TABLES — HORIZONTAL SCROLL CONTAINED
	   ============================================ */
	table {
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
		overflow-x: auto !important;
	}

	/* ============================================
	   21. BACKGROUND OVERLAYS — PREVENT OVERFLOW
	   ============================================ */
	.elementor-background-overlay {
		max-width: 100% !important;
		overflow: hidden !important;
	}

	/* ============================================
	   22. CONSISTENT VERTICAL SPACING
	   ============================================ */
	.elementor-top-section + .elementor-top-section,
	.e-con + .e-con {
		margin-top: 20px !important;
	}

	/* ============================================
	   23. ELEMENTOR POPUP FIX
	   ============================================ */
	.elementor-popup-modal .dialog-widget-content {
		max-width: 95vw !important;
		width: 95vw !important;
	}

	/* ============================================
	   24. WOOCOMMERCE PRODUCT GRIDS
	   ============================================ */
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}

	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* ============================================
	   25. SOCIAL ICONS — CENTER
	   ============================================ */
	.elementor-social-icons-wrapper {
		justify-content: center !important;
		flex-wrap: wrap !important;
	}

	/* ============================================
	   26. COUNTER & PROGRESS WIDGETS
	   ============================================ */
	.elementor-counter,
	.elementor-progress-wrapper {
		max-width: 100% !important;
	}

	/* ============================================
	   27. CUSTOM FONT OVERFLOW PREVENTION
	   ============================================ */
	* {
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}

	/* ============================================
	   28. ELEMENTOR INNER SECTION LEGACY FIX
	   ============================================ */
	.elementor-inner-section .elementor-container {
		flex-direction: column !important;
		width: 100% !important;
	}

	.elementor-inner-section .elementor-column {
		width: 100% !important;
	}
}

/* ============================================
   29. SMALL MOBILE (480px and below)
   ============================================ */
@media screen and (max-width: 480px) {

	.elementor-section,
	.elementor-top-section,
	.e-con {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.elementor-inner-section,
	.e-con-inner,
	.e-child {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	h1.elementor-heading-title {
		font-size: clamp(1.3rem, 7vw, 2rem) !important;
	}

	h2.elementor-heading-title {
		font-size: clamp(1.1rem, 5.5vw, 1.5rem) !important;
	}

	.elementor-button {
		padding-left: 15px !important;
		padding-right: 15px !important;
		font-size: 0.9rem !important;
	}
}