@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//aradwa.com/wp-content/themes/woodmart/fonts/woodmart-font-2-700.woff2?v=8.2.7") format("woff2");
	font-display:swap;
}

:root {
	--wd-text-font: "Cairo", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(51,51,51);
	--wd-text-font-size: 16px;
	--wd-title-font: "Cairo", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: rgb(34,34,34);
	--wd-entities-title-font: "Cairo", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: #F048C2;
	--wd-entities-title-color-hover: rgb(136, 0, 188);
	--wd-alternative-font: "Cairo", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Cairo", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: capitalize;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Cairo", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 16px;
	--wd-primary-color: rgb(136,0,188);
	--wd-alternative-color: rgb(240,72,194);
	--wd-link-color: rgb(136,0,188);
	--wd-link-color-hover: rgb(240,72,194);
	--btn-default-font-family: "Cairo", Arial, Helvetica, sans-serif;
	--btn-default-font-weight: 500;
	--btn-default-bgcolor: rgb(136,0,188);
	--btn-default-bgcolor-hover: rgb(240,72,194);
	--btn-accented-font-family: "Cairo", Arial, Helvetica, sans-serif;
	--btn-accented-font-weight: 700;
	--btn-accented-bgcolor: rgb(240,72,194);
	--btn-accented-bgcolor-hover: rgb(136,0,188);
	--btn-transform: capitalize;
	--wd-form-brd-width: 2px;
	--notices-success-bg: rgb(209,250,229);
	--notices-success-color: rgb(6,95,70);
	--notices-warning-bg: rgb(254,243,199);
	--notices-warning-color: rgb(146,64,14);
	--wd-sticky-btn-height: 95px;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	--wd-popup-width: 580px;
	--wd-popup-padding: 0px;
}
:is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) {
	--wd-prod-bg:rgb(255,255,255);
	--wd-bordered-bg:rgb(255,255,255);
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title {
	background-color: #f5f5f5;
	background-image: none;
	background-size: cover;
	background-position: center center;
}
.wd-footer {
	background-color: #ffffff;
	background-image: none;
}
html .wd-nav-mobile > li > a {
	font-family: "Cairo", Arial, Helvetica, sans-serif;
	font-weight: 400;
	text-transform: capitalize;
}
html .post.wd-post:not(.blog-design-small) .wd-entities-title {
	font-size: 18px;
}
.page .wd-page-content {
	background-color: rgb(249,249,251);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) .wd-page-content {
	background-color: rgb(255,255,255);
	background-image: none;
}
.single-product .wd-page-content {
	background-color: rgb(255,255,255);
	background-image: none;
}
.woodmart-archive-blog .wd-page-content {
	background-color: rgb(250,250,250);
	background-image: none;
}
.single-post .wd-page-content {
	background-color: rgb(250,250,250);
	background-image: none;
}
.woodmart-archive-portfolio .wd-page-content {
	background-color: rgb(249,249,251);
	background-image: none;
}
.single-portfolio .wd-page-content {
	background-color: rgb(255,255,255);
	background-image: none;
}
html .wd-buy-now-btn {
	background: rgb(107,163,49);
}
html .wd-buy-now-btn:hover {
	background: rgb(95,158,44);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-color: rgb(17,24,39);
	--wd-form-placeholder-color: rgb(153,153,153);
	--wd-form-brd-color: rgb(204,204,204);
	--wd-form-brd-color-focus: rgb(240,72,194);
	--wd-form-bg: FFFFFF ;
}
.wd-nav-arrows.wd-pos-together:not(:where(.wd-custom-style)) {
	--wd-arrow-size: 36px;
	--wd-arrow-icon-size: 16px;
	--wd-arrow-offset-h: 0px;
	--wd-arrow-offset-v: 0px;
}
.product-labels .product-label.onsale {
	background-color: rgb(240,72,194);
	color: rgb(255,255,255);
}
.product-labels .product-label.new {
	background-color: rgb(136,0,188);
	color: rgb(255,255,255);
}
.product-labels .product-label.featured {
	background-color: rgb(255,215,0);
	color: rgb(0,0,0);
}
.product-labels .product-label.out-of-stock {
	background-color: rgb(156,163,175);
	color: rgb(255,255,255);
}
.product-labels .product-label.attribute-label:not(.label-with-img) {
	background-color: rgb(224,231,255);
	color: rgb(17,24,39);
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	:root {
		--wd-sticky-btn-height: 95px;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-sticky-btn-height: 42px;
	}

}
:root{
--wd-container-w: 1400px;
--wd-form-brd-radius: 5px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 12px;
}

@media (min-width: 1400px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


html[lang="en"] {
  direction: ltr !important;
}

.wd-carousel {
    position: relative;
    overflow: var(--wd-carousel-overflow, hidden);
    padding: 0px 0px 34px 0 !important;
    margin-inline: calc(var(--wd-gap) / -2);
    touch-action: pan-y;

}

.wpml-ls-statics-footer.wpml-ls-legacy-list-horizontal {
    margin-bottom: 0;
    padding: 10px 15px;
    display: none !important;
}

.wd-copyrights {
    --wd-tags-mb: 10px;
    padding-block: 20px;
    display: none !important;
    border-top: 1px solid var(--brdcolor-gray-300);
}

.slide-text-content .btn {
    margin-top: 0rem !important;
    display: inline-block;
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    text-align: center;
    background: linear-gradient(to left, #ec4899, #8b5cf6);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}






/* CSS مخصص لتحسين مظهر صناديق المعلومات في الفوتر
  يمكنك نسخ هذا الكود ولصقه في ملف الـ CSS الخاص بموقعك 
  أو إضافته في قسم "CSS إضافي" في أداة تخصيص ووردبريس.
*/

/* استهداف الحاوية الرئيسية لكل صندوق معلومات */
.elementor-element .wd-info-box {
    background-color: #ffffff; /* تغيير لون الخلفية إلى الأبيض النقي */
    border-radius: 12px; /* إضافة حواف دائرية أنيقة */
    padding: 20px; /* إضافة مساحة داخلية للمحتوى */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* إضافة ظل ناعم لإعطاء عمق */
    transition: all 0.3s ease-in-out; /* إضافة تأثير انتقال سلس للحركة */
    border: 1px solid #e5e7eb; /* إضافة حدود رمادية فاتحة */
    display: flex;
    align-items: center;
    text-align: right; /* محاذاة النص إلى اليمين */
    height: 100%; /* جعل كل الصناديق بنفس الارتفاع */
}

/* تأثير عند مرور الماوس فوق الصندوق */
.elementor-element .wd-info-box:hover {
    transform: translateY(-5px); /* رفع الصندوق قليلاً للأعلى */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* زيادة كثافة الظل */
}

/* تنسيق حاوية الأيقونة */
.wd-info-box .box-icon-wrapper {
    margin-left: 15px; /* إضافة هامش على يسار الأيقونة لفصلها عن النص */
    margin-right: 0;
}

/* تنسيق الأيقونة نفسها (الصورة) */
.wd-info-box .info-box-icon img {
    max-width: 45px; /* تحديد عرض أقصى للأيقونة */
    height: auto;
    border-radius: 8px; /* يمكن إضافة حواف دائرية للأيقونة إذا أردت */
}

/* تنسيق محتوى النص داخل الصندوق */
.wd-info-box .info-box-content {
    flex-grow: 1; /* جعل النص يأخذ المساحة المتبقية */
}

/* تنسيق العناوين (h4) داخل الصندوق */
.wd-info-box .info-box-inner h4 {
    font-family: 'Cairo', sans-serif; /* تأكد من استخدام خط مناسب */
    font-size: 16px; /* حجم خط مناسب للعنوان */
    font-weight: 700; /* وزن الخط (عريض) */
    color: #1f2937; /* لون خط داكن */
    margin: 0;
}

/* تنسيق النصوص العادية (p) داخل الصندوق */
.wd-info-box .info-box-inner p {
    font-family: 'Cairo', sans-serif; /* تأكد من استخدام خط مناسب */
    font-size: 15px; /* حجم خط مناسب للنص */
    color: #4b5563; /* لون خط رمادي داكن */
    margin: 0;
}

/* إزالة أي هوامش سفلية إضافية قد تأتي من الثيم */
.reset-last-child > *:last-child {
    margin-bottom: 0;
}


.whb-header-bottom {
    background-color: #F5F7FA !important;  /* لون أزرق غامق أنيق */
    
}
.elementor-128 .elementor-element.elementor-element-1d615da3:not(.elementor-motion-effects-element-type-background), .elementor-128 .elementor-element.elementor-element-1d615da3 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #F7F7F7;
    margin-top: -20px;
}

@media (max-width: 767px) {
  .chaty-widget.right-position {
    bottom: 80px !important; /* عدل الرقم حسب المسافة اللي تحبها */
  }
}



@media (max-width: 768px) {
  .product-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .product-element-top {
    flex-shrink: 0;
  }

  .product-element-bottom {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .wrap-price {
    margin-top: auto;
  }

  .wd-add-btn a {
    white-space: normal !important; /* تسمح للسطر يلف */
    line-height: 1.4;
    padding: 10px 12px;
    font-size: 14px;
    display: inline-block;
  }

  .wd-add-btn {
    margin-top: 10px;
  }
}




/* * Advanced & Professional CSS for Checkout Progress Bar 
 * By Gemini - v2.4 (Mobile Line Update)
 * * Features: 
 * - Simplified design focusing on step markers. 
 * - Modern, clean, and flat design. 
 * - Uses CSS Variables for easy theme customization. 
 * - Embedded SVG checkmark for crisp display on all screens. 
 * - Pulsating animation for the active step to draw attention. 
 * - Fully responsive design that adapts to mobile screens. 
 * - Smooth transitions for a premium user experience. 
 * * NOTE: This version applies step circles directly to the <span> element. 
 * The connecting progress lines have been removed as per the request for desktop
 * and added back specifically for mobile view.
 */ 

 /* Import a professional-looking font that supports Arabic */ 
 @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap'); 

 /* Define color variables for easy customization */ 
 :root { 
 	--primary-color: #8800BC; 
 	/* Purple for active state (User Specified) */ 
 	--success-color: #28a745; 
 	/* Green for completed state */ 
 	--border-color: #dee2e6; 
 	/* Light grey for inactive state */ 
 	--text-color-dark: #343a40; 
 	--text-color-light: #6c757d; 
 } 

 /* Main container for the steps */ 
 .wd-checkout-steps { 
 	display: flex; 
 	justify-content: space-between; 
 	align-items: flex-start; 
 	list-style: none; 
 	padding: 0; 
 	margin: 50px 0; 
 	font-family: 'Cairo', sans-serif; 
 	position: relative; 
 	counter-reset: 0; 
 } 

 /* Individual step item */ 
 .wd-checkout-steps li { 
 	flex: 1; 
 	/* Each step takes equal width */ 
 	position: relative; 
 	text-align: center; 
 } 

 /* The circle marker for each step, now applied only to the SPAN */ 
 .wd-checkout-steps li span::before { 
 	counter-increment: step-counter; 
 	content: counter(step-counter); 
 	width: 40px; 
 	height: 40px; 
 	line-height: 36px; 
 	/* Adjust for border */ 
 	border-radius: 50%; 
 	font-size: 16px; 
 	font-weight: 700; 
 	display: block; 
 	margin: 0 auto 10px auto; 
 	background-color: white; 
 	border: 2px solid var(--border-color); 
 	color: var(--text-color-light); 
 	transition: all 0.4s ease; 
 	position: relative; 
 	z-index: 3; 
 } 

 /* Style for the text label of each step */ 
 .wd-checkout-steps li a, 
 .wd-checkout-steps li span { 
 	text-decoration: none; 
 	color: var(--text-color-light); 
 	font-weight: bold; 
 	font-size: 15px; 
 	transition: color 0.4s ease; 
 	display: inline-block; 
 	/* Helps with alignment */ 
 	white-space: nowrap; 
 	/* Prevents text from wrapping to a new line */ 
 } 

 /* --- STATE STYLING --- */ 

 /* 1. Style for COMPLETED steps */ 
 .wd-checkout-steps li.step-completed span::before { 
 	/* Embedded SVG for a high-quality checkmark */ 
 	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 
 	line-height: 42px; 
 	/* Vertically center the SVG icon */ 
 	background-color: var(--success-color);  
 	border-color: var(--success-color); 
 	color: white; 
 } 

 .wd-checkout-steps li.step-completed a, 
 .wd-checkout-steps li.step-completed span { 
 	color: var(--text-color-dark); 
 } 

 /* 2. Style for the ACTIVE step */ 
 .wd-checkout-steps li.step-active span::before { 
 	background-color: var(--primary-color); 
 	border-color: var(--primary-color); 
 	color: white; 
 	animation: pulse 1.5s infinite; 
 } 

 .wd-checkout-steps li.step-active a, 
 .wd-checkout-steps li.step-active span { 
 	color: var(--primary-color); 
 } 

 /* Pulsating animation for the active step */ 
 @keyframes pulse { 
 	0% { 
 		box-shadow: 0 0 0 0 rgba(136, 0, 188, 0.7); 
 	} 

 	70% { 
 		box-shadow: 0 0 0 10px rgba(136, 0, 188, 0); 
 	} 

 	100% { 
 		box-shadow: 0 0 0 0 rgba(136, 0, 188, 0); 
 	} 
 } 

 /* --- RESPONSIVE DESIGN --- */ 
 @media (max-width: 600px) { 

    /* ================================================================== */
    /* START: CODE ADDED AS PER YOUR REQUEST */
    /* ================================================================== */

    /* This ::after pseudo-element creates the connecting line between steps */
    .wd-checkout-steps li::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px; /* Line thickness */
        background-color: var(--border-color);
        /* Vertically center the line with the 40px circle */
        top: 20px; 
        /* Start the line from the center of the previous item */
        left: -50%;
        /* Place the line behind the step circles */
        z-index: 2; 
        transition: background-color 0.4s ease;
    }

    /* The very first step should not have a line coming into it */
    .wd-checkout-steps li:first-child::after {
        content: none;
    }

    /* When a step is completed, color the line originating from it green */
    .wd-checkout-steps li.step-completed::after {
        background-color: var(--success-color);
    }
    
    /* ================================================================== */
    /* END: CODE ADDED AS PER YOUR REQUEST */
    /* ================================================================== */


    /* NOTE: The following code was duplicated in your original request. */
    /* It is kept here as requested, but is not strictly necessary. */

 	/* Main container for the steps */ 
 	.wd-checkout-steps { 
 		display: flex; 
 		justify-content: space-between; 
 		align-items: flex-start; 
 		list-style: none; 
 		padding: 0; 
 		margin: 50px 0; 
 		font-family: 'Cairo', sans-serif; 
 		position: relative; 
 /*		counter-reset: step-counter; */
		counter-reset: 0; 
 	} 

 	/* Individual step item */ 
 	.wd-checkout-steps li { 
 		flex: 1; 
 		/* Each step takes equal width */ 
 		position: relative; 
 		text-align: center; 
 	} 

 	/* The circle marker for each step, now applied only to the SPAN */ 
 	.wd-checkout-steps li span::before { 
 		counter-increment: step-counter; 
 		content: counter(step-counter); 
 		width: 40px; 
 		height: 40px; 
 		line-height: 36px; 
 		/* Adjust for border */ 
 		border-radius: 50%; 
 		font-size: 16px; 
 		font-weight: 700; 
 		display: block; 
 		margin: 0 auto 10px auto; 
 		background-color: white; 
 		border: 2px solid var(--border-color); 
 		color: var(--text-color-light); 
 		transition: all 0.4s ease; 
 		position: relative; 
 		z-index: 3; 
 	} 

 	/* Style for the text label of each step */ 
 	.wd-checkout-steps li a, 
 	.wd-checkout-steps li span { 
 		text-decoration: none; 
 		color: var(--text-color-light); 
 		font-weight: bold; 
 		font-size: 15px; 
 		transition: color 0.4s ease; 
 		display: inline-block; 
 		/* Helps with alignment */ 
 		white-space: nowrap; 
 		/* Prevents text from wrapping to a new line */ 
 	} 

 	/* --- STATE STYLING --- */ 

 	/* 1. Style for COMPLETED steps */ 
 	.wd-checkout-steps li.step-completed span::before { 
 		/* Embedded SVG for a high-quality checkmark */ 
 		content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 
 		line-height: 42px; 
 		/* Vertically center the SVG icon */ 
 		background-color: var(--success-color); 
 		border-color: var(--success-color); 
 		color: white; 
 	} 

 	.wd-checkout-steps li.step-completed a, 
 	.wd-checkout-steps li.step-completed span { 
 		color: var(--text-color-dark); 
 	} 

 	/* 2. Style for the ACTIVE step */ 
 	.wd-checkout-steps li.step-active span::before { 
 		background-color: var(--primary-color); 
 		border-color: var(--primary-color); 
 		color: white; 
 		animation: pulse 1.5s infinite; 
 	} 

 	.wd-checkout-steps li.step-active a, 
 	.wd-checkout-steps li.step-active span { 
 		color: var(--primary-color); 
 	} 

 	/* Pulsating animation for the active step */ 
 	@keyframes pulse { 
 		0% { 
 			box-shadow: 0 0 0 0 rgba(136, 0, 188, 0.7); 
 		} 

 		70% { 
 			box-shadow: 0 0 0 10px rgba(136, 0, 188, 0); 
 		} 

 		100% { 
 			box-shadow: 0 0 0 0 rgba(136, 0, 188, 0); 
 		} 
 	} 
 }


.wd-page-title-el .wd-page-title {
    padding: 25px;
}

.text-center table.variations tbody, .text-center table.variations tr, .text-left table.variations tbody, .text-left table.variations tr {
    TEXT-ALIGN: RIGHT;
}

@media (max-width: 767px) {
    .text-center table.variations tbody,
    .text-center table.variations tr,
    .text-left table.variations tbody,
    .text-left table.variations tr {
        text-align: right;
    }
}



@media (max-width: 767px) {
    .wd-reset-var a.reset_variations {
        display: inline-block;
        visibility: visible !important;
        margin-top: -110px;
        padding: 10px 20px;
        background-image: linear-gradient(to right, #ef4444, #dc2626);
        color: white !important;
        text-decoration: none;
        border-radius: 8px;
        font-weight: bold;
        font-size: 14px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        margin-left: 20px;
    }
}




/*
 * Custom CSS for WooCommerce Product Page Enhancement
 * 1. Adds a border and shadow to the selected color swatch.
 * 2. Greatly improves the style of the "Remove" variations button.
 * 3.f Restyles the delivery and payment information into clean cards with enhanced styling.
 * - NOTE: This requires changing the HTML structure for the info section.
 */

/* --- Custom CSS starts here --- */



/* 2. Big improvement for the "Remove" (إزالة) button */
.wd-reset-var a.reset_variations {
    display: inline-block;
    visibility: visible !important; /* Ensure it's always visible when active */
    margin-top: 15px;
    padding: 10px 20px;
    background-image: linear-gradient(to right, #ef4444, #dc2626); /* Red gradient */
    color: white !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
}

.wd-reset-var a.reset_variations:hover {
    transform: translateY(-3px); /* Lifts the button on hover */
    box-shadow: 0 7px 14px rgba(239, 68, 68, 0.3); /* Enhance shadow on hover */
}


/* 3. Styling for the information section (Delivery & Payment) */

/* Hide the original, messy text block containers */
.elementor-element-a65f047, .elementor-element-fdd270c {
    display: none;
}

/* You will need to create a new HTML structure for these styles to apply.
  Wrap your delivery and payment info in a div with the class "info-section-container".
  Each item should be in its own "info-card" div like in the full HTML example.
*/
.info-section-container {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px; /* Space between the cards */
}

.info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(136, 0, 188, 0.1); /* Enhanced purple shadow */
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
}

.info-card:hover {
    transform: translateY(-5px); /* Lifts the card on hover */
    box-shadow: 0 12px 30px rgba(136, 0, 188, 0.15); /* Deeper shadow on hover */
}

.info-card .icon {
    font-size: 2.5rem; /* Larger icon */
}

.info-card .text-content p {
    margin: 0;
    color: #4b5563; /* Dark gray for text */
    font-size: 1rem;
    line-height: 1.6;
}

.info-card .text-content p strong {
    color: #111827; /* Black for the highlighted part */
    font-weight: 700;
}

/* --- End of Custom CSS --- */
/*
 * Custom CSS for WooCommerce Product Page Enhancement
 * 1. Adds a border and shadow to the selected color swatch.
 * 2. Greatly improves the style of the "Remove" variations button.
 * 3. Restyles the delivery and payment information into clean cards with enhanced styling.
 */

/* --- Custom CSS starts here --- */

/* 1. Style for the selected variation swatch */
.variations .wd-swatch.wd-active,
.variations .wd-swatch:hover {
    transform: scale(1.15); /* Make it slightly larger */
    box-shadow: 0 6px 12px rgba(136, 0, 188, 0.4); /* Add a prominent purple shadow */
    border: 2px solid #8800BC; /* Add a solid purple border */
}

.variations .wd-swatch {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition for all effects */
    border: 2px solid transparent; /* Add transparent border to prevent layout shift */
    border-radius: 50%; /* Ensure it's a perfect circle */
}

.wd-swatch-bg {
     border-radius: 50%;
}

/* 2. Big improvement for the "Remove" (إزالة) button */
.wd-reset-var a.reset_variations {
    display: inline-block;
    visibility: visible !important; /* Ensure it's always visible when active */
    margin-top: 15px;
    padding: 10px 20px;
    background-image: linear-gradient(to right, #ef4444, #dc2626); /* Red gradient */
    color: white !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
}

.wd-reset-var a.reset_variations:hover {
    transform: translateY(-3px); /* Lifts the button on hover */
    box-shadow: 0 7px 14px rgba(239, 68, 68, 0.3); /* Enhance shadow on hover */
}


/* 3. Styling for the information section (Delivery & Payment) */

/* Hide the duplicate and unnecessary text block containers */
.elementor-element-a65f047, .elementor-element-fdd270c {
    display: none;
}

/* Ensure the parent containers are full-width */
.elementor-element-9cb2b2f,
.elementor-element-c5bcc7b {
    width: 100% !important;
}

/* Style the primary text blocks as info cards */
.elementor-element-f74c9a6 .wd-text-block,
.elementor-element-c5bcc7b .wd-text-block {
    position: relative; /* Needed for icon positioning */
    background-color: #ffffff;
    padding: 20px 75px 20px 20px; /* Adjust padding for the icon on the right */
    margin-top: 16px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(136, 0, 188, 0.1); /* Enhanced purple shadow */
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover */
}

.elementor-element-f74c9a6 .wd-text-block:hover,
.elementor-element-c5bcc7b .wd-text-block:hover {
    transform: translateY(-5px); /* Lifts the card on hover */
    box-shadow: 0 12px 30px rgba(136, 0, 188, 0.15); /* Deeper shadow on hover */
}

/* Add icons using ::before pseudo-element */
.elementor-element-f74c9a6 .wd-text-block::before,
.elementor-element-c5bcc7b .wd-text-block::before {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    line-height: 1;
}

/* Specific icon for delivery */
.elementor-element-f74c9a6 .wd-text-block::before {
    content: '🚚';
}

/* Specific icon for payment */
.elementor-element-c5bcc7b .wd-text-block::before {
    content: '💳';
}

/* Adjust text styling inside the cards */
.elementor-element-f74c9a6 .wd-text-block p,
.elementor-element-c5bcc7b .wd-text-block p {
    margin: 0;
    color: #4b5563; /* Dark gray for text */
    font-size: 1rem;
    line-height: 1.6;
}

.elementor-element-f74c9a6 .wd-text-block p strong,
.elementor-element-c5bcc7b .wd-text-block p strong {
    color: #111827; /* Black for the highlighted part */
    font-weight: 700;
}

/* --- End of Custom CSS --- */

/*
 * Custom CSS for WooCommerce Product Page Enhancement
 * 1. Adds a border and shadow to the selected color swatch.
 * 2. Greatly improves the style of the "Remove" variations button.
 * 3. Restyles the delivery and payment information into clean cards with enhanced styling.
 * 4. Adds responsive styles for better mobile display.
 */

/* --- Custom CSS starts here --- */

/* 1. Style for the selected variation swatch */
.variations .wd-swatch.wd-active,
.variations .wd-swatch:hover {
    transform: scale(1.15); /* Make it slightly larger */
    box-shadow: 0 6px 12px rgba(136, 0, 188, 0.4); /* Add a prominent purple shadow */
    border: 2px solid #8800BC; /* Add a solid purple border */
}

.variations .wd-swatch {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition for all effects */
    border: 2px solid transparent; /* Add transparent border to prevent layout shift */
    border-radius: 50%; /* Ensure it's a perfect circle */
}

.wd-swatch-bg {
     border-radius: 50%;
}

/* 2. Big improvement for the "Remove" (إزالة) button */
.wd-reset-var a.reset_variations {
    display: inline-block;
    visibility: visible !important; /* Ensure it's always visible when active */
    margin-top: 15px;
    padding: 10px 20px;
    background-image: linear-gradient(to right, #ef4444, #dc2626); /* Red gradient */
    color: white !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
}

.wd-reset-var a.reset_variations:hover {
    transform: translateY(-3px); /* Lifts the button on hover */
    box-shadow: 0 7px 14px rgba(239, 68, 68, 0.3); /* Enhance shadow on hover */
}


/* 3. Styling for the information section (Delivery & Payment) */

/* Hide the duplicate and unnecessary text block containers */
.elementor-element-a65f047, .elementor-element-fdd270c {
    display: none;
}

/* Ensure the parent containers are full-width */
.elementor-element-9cb2b2f,
.elementor-element-c5bcc7b {
    width: 100% !important;
}

/* Style the primary text blocks as info cards */
.elementor-element-f74c9a6 .wd-text-block,
.elementor-element-c5bcc7b .wd-text-block {
    position: relative; /* Needed for icon positioning */
    background-color: #ffffff;
    padding: 20px 75px 20px 20px; /* Adjust padding for the icon on the right */
    margin-top: 16px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(136, 0, 188, 0.1); /* Enhanced purple shadow */
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover */
}

.elementor-element-f74c9a6 .wd-text-block:hover,
.elementor-element-c5bcc7b .wd-text-block:hover {
    transform: translateY(-5px); /* Lifts the card on hover */
    box-shadow: 0 12px 30px rgba(136, 0, 188, 0.15); /* Deeper shadow on hover */
}

/* Add icons using ::before pseudo-element */
.elementor-element-f74c9a6 .wd-text-block::before,
.elementor-element-c5bcc7b .wd-text-block::before {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    line-height: 1;
}

/* Specific icon for delivery */
.elementor-element-f74c9a6 .wd-text-block::before {
    content: '🚚';
}

/* Specific icon for payment */
.elementor-element-c5bcc7b .wd-text-block::before {
    content: '💳';
}

/* Adjust text styling inside the cards */
.elementor-element-f74c9a6 .wd-text-block p,
.elementor-element-c5bcc7b .wd-text-block p {
    margin: 0;
    color: #4b5563; /* Dark gray for text */
    font-size: 1rem;
    line-height: 1.6;
}

.elementor-element-f74c9a6 .wd-text-block p strong,
.elementor-element-c5bcc7b .wd-text-block p strong {
    color: #111827; /* Black for the highlighted part */
    font-weight: 700;
}

/* 4. Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    /* Stack table elements vertically for better mobile view */
    .variations tr,
    .variations th.label,
    .variations td.value {
        display: block;
        width: 100%;
        text-align: right; /* Align text to the right for RTL */
    }

    .variations th.label {
        padding-bottom: 8px; /* Add some space below the label */
    }
    
    .variations td.value {
        padding-right: 0; /* Remove padding that might exist from table layout */
        padding-bottom: 15px;
    }

    /* Adjust swatch container for better alignment */
    .wd-swatches-product {
        justify-content: flex-start; /* Align swatches to the start (right in RTL) */
        flex-wrap: wrap; /* Allow swatches to wrap if there are many */
    }
    
    /* Center the remove button */
    .wd-reset-var {
        text-align: center;
        margin-top: 20px;
    }

    /* Adjust padding on info cards for smaller screens */
    .elementor-element-f74c9a6 .wd-text-block,
    .elementor-element-c5bcc7b .wd-text-block {
        padding: 15px 60px 15px 15px; /* Reduce padding slightly */
    }

    .elementor-element-f74c9a6 .wd-text-block::before,
    .elementor-element-c5bcc7b .wd-text-block::before {
        right: 15px;
        font-size: 2rem; /* Slightly smaller icon */
    }
}


/* --- End of Custom CSS --- */