/*=============================
   Target Offers trigger button
  =============================*/

/* المربّع نفسه (span) – إلغاء البادينج اللي جاي من def_btn إلخ */
.target-offers-trigger-wrap {
	padding: 0 !important;
	background-color: #ddf7f0 !important; /* اللون اللي طلبته */
}

/* حجم مختلف لزر التارجت داخل الجريد فقط (woo_grid_compact) */
.woo_grid_compact .target-offers-trigger-wrap {
	width: 40px;          /* غيّر الرقم لو عايز حجم تاني */
	height: 40px;
	line-height: 36px;
	margin-left: .2rem;
	margin-right: .2rem!important;
}

/* زرار / أيقونة فتح الفورم */
.target-offers-button {
	/* الأيقونة جوّه الزر نفسه */
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
}

/* لما تكون صورة أيقونة */
.target-offers-button--img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;              /* بدون حواف داخلية */
	cursor: pointer;
	object-fit: contain;    /* لو عايزها تتملى حتى لو تتقص شوية استخدم cover بدل contain */
}

/* المودال */
.target-offers-modal {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* خلفية المودال */
.target-offers-modal__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
}

/* محتوى المودال */
.target-offers-modal__content {
	position: relative;
	width: 90vw;
	max-width: 900px;
	margin: 15vh auto;
	/*
	 * IMPORTANT:
	 * لأن المودال position:fixed، طول المحتوى لا يزيد طول الصفحة،
	 * فلو المحتوى (قائمة المنتجات) كَبُر مش هيظهر سكرول افتراضي.
	 * الحل: نحدد max-height للـ content على الديسكتوب علشان overflow-y:auto يشتغل.
	 */
	max-height: 70vh;
	background: #fff;
	border-radius: 4px;
	padding: 20px;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	box-sizing: border-box;
}

/* زرار إغلاق المودال */
.target-offers-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	border: none;
	background: transparent;
	font-size: 20px;
	cursor: pointer;
}

/* عنوان المودال */
.target-offers-modal__title {
	margin: 0 0 15px;
	font-size: 18px;
	font-weight: 600;
}

/* الفورم العام */
.target-offers-form p {
	margin-bottom: 12px;
}

.target-offers-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

/* الحقول النصية/الإيميل/الرقم/التكست إيريا (ما عدا حقل التليفون) */
.target-offers-form input[type="text"],
.target-offers-form input[type="email"],
.target-offers-form input[type="number"],
.target-offers-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #e6e8ea;
	border-radius: 4px;
	font: inherit;
	background: #fff;
}

/* حقل التليفون (واتساب) – نفس ستايل الحقول التانية */
.target-offers-form .iti__tel-input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border-radius: 4px;
	border: 1px solid #e6e8ea;
	font: inherit;
	background: #fff;
}

/* فوكس جميل على الحقول */
.target-offers-form input[type="text"]:focus,
.target-offers-form input[type="email"]:focus,
.target-offers-form input[type="number"]:focus,
.target-offers-form textarea:focus,
.target-offers-form .iti__tel-input:focus {
	outline: none;
	border-color: #00afe5;
	box-shadow: 0 0 0 2px rgba(0,175,229,0.12);
}

/* صفوف حقول بيانات العميل (اتنين في صف واحد) */
.target-offers-form .to-form-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -7.5px 12px;   /* تعويض البادينج بتاع الأعمدة */
}

/* كل عمود (p) جوّه الصف */
.target-offers-form .to-form-col {
	box-sizing: border-box;
	flex: 0 0 50%;          /* كل عمود نص العرض */
	max-width: 50%;
	padding: 0 7.5px;       /* مسافة بسيطة بين العمودين */
	margin: 0;              /* نلغي المارجن الافتراضي من p */
}

/* موبايل: نخلي كل حقل سطر لوحده */
@media (max-width: 600px) {
	.target-offers-form .to-form-row {
		margin: 0 0 12px;
	}

	.target-offers-form .to-form-col {
		flex: 0 0 100%;
		max-width: 100%;
		padding: 0;
		margin-bottom: 12px;
	}
}

/* رسالة الفيدباك (تستخدم للأخطاء فقط دلوقتي) */
.target-offers-form__feedback {
	margin-top: 10px;
	color: #dc2626;
	font-size: 14px;
}

/* أزرار الأكشن تحت الفورم */
.target-offers-form__actions {
	margin-top: 15px;
}

/* جدول My Targets */
.target-offers-my-targets-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
}

.target-offers-my-targets-table th,
.target-offers-my-targets-table td {
	border: 1px solid #ddd;
	padding: 8px;
	font-size: 14px;
}

.target-offers-my-targets-table th {
	background: #f9f9f9;
	font-weight: 600;
}

/* ===== حقل الموبايل (WhatsApp) مع intl-tel-input ===== */

.target-offers-phone-input {
	margin-bottom: 12px;
}

/* نخلي الكونتينر بتاع المكتبة ياخد عرض الحقل كله ونقدر نسبّت كود الدولة جوّه */
.target-offers-phone-input .iti {
	width: 100%;
	display: block;
	position: relative;
}

/* Placeholder لون خفيف */
.target-offers-phone-input .iti__tel-input::placeholder {
	color: #babfc5;
}

/* نضمن إن قائمة الدول تظهر فوق المودال لو حصل تضارب */
.target-offers-phone-input .iti__country-list {
	z-index: 10000;
}

/* ==== تعديل شكل اختيار الدولة: كود الدولة فقط بدون أعلام ==== */

/* إخفاء الأعلام داخل حقل الواتساب فقط */
.target-offers-phone-input .iti__flag {
	display: none !important;
	background: none !important;
	box-shadow: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
}

/* إخفاء اسم الدولة وترك كود الدولة فقط */
.target-offers-phone-input .iti__country-name {
	display: none !important;
}

/* إبراز كود الدولة في الليستة والاختيار */
.target-offers-phone-input .iti__dial-code {
	font-weight: 600;
}

/* نحول بلوك كود الدولة لصندوق صغير على الشمال داخل الحقل */
.target-offers-phone-input .iti__flag-container {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	padding: 0 10px;
	border-right: 1px solid #e6e8ea;
	background: #f9f9f9;
	z-index: 1;
}

/* ما نديش padding زيادة هنا، البلوك الخارجي هو اللي واخد الحشو */
.target-offers-phone-input .iti__selected-country {
	padding: 0 !important;
}

/* نسيب مساحة كافية بعد بلوك كود الدولة علشان الرقم مايتداخلش */
.target-offers-phone-input .iti .iti__tel-input {
	padding-left: 80px !important;
}

/* موبايل وتابلت: المودال تقريباً فل سكرين */
@media (max-width: 768px) {
	.target-offers-modal__content {
		width: 98vw;
		max-height: 84vh;
		margin: 6vh auto;
		padding: 16px;
	}
}

/* ==============================
   Multi-products rows layout
   ============================== */

.to-products-wrapper {
	margin-bottom: 20px;
}

/*
 * Embedded form داخل صفحة:
 * لما يزيد عدد المنتجات، ما نخليش الصفحة كلها تطول (Stretch).
 * نخلي قائمة المنتجات نفسها Scroll داخلي.
 */
.target-offers-form--embedded .to-products-wrapper {
	max-height: 25vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (max-width: 600px) {
	.target-offers-form--embedded .to-products-wrapper {
		max-height: 55vh;
	}
}

.to-products-wrapper-title {
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 15px;
}

.to-product-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	margin-bottom: 10px;
}

.to-product-row .to-field {
	flex: 1 1 0;
	min-width: 140px;
}

.to-field--qty,
.to-field--price {
	max-width: 140px;
}

.to-product-row__add,
.to-product-row__remove {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 10px;
	min-width: 36px;
	min-height: 36px;
	text-align: center;
	font-size: 18px;
	line-height: 1;
	background: #f7f7f7;
	cursor: pointer;
}

/*
 * موبايل: نضبط ترتيب الحقول زي الديسكتوب
 * - Product يكون لوحده في سطر
 * - Quantity جنب Target price
 * - زر + / - بنفس ارتفاع حقل الإدخال (مش بيتمدد لطول السطر)
 */
@media (max-width: 600px) {
	.to-product-row {
		display: grid;
		grid-template-columns: 1fr 1fr 36px;
		grid-template-areas:
			"part part part"
			"qty price action";
		gap: 10px;
		align-items: end;
	}

	/* نسمح للحقول إنها تصغر على الموبايل بدل ما تكسر التنسيق */
	.to-product-row .to-field {
		min-width: 0;
	}

	.to-product-row .to-field--part {
		grid-area: part;
	}

	.to-product-row .to-field--qty {
		grid-area: qty;
		max-width: none;
	}

	.to-product-row .to-field--price {
		grid-area: price;
		max-width: none;
	}

	.to-product-row__add,
	.to-product-row__remove {
		grid-area: action;
		min-width: 36px;
		min-height: 36px;
		padding: 0;
		height: 36px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: end;
		justify-self: end;
	}
}

.to-field--part {
	position: relative;
}

/* قائمة نتائج السيرش */
.to-search-results {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 9999;
	max-height: 220px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #ddd;
	border-top: none;
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
}

.to-search-results__item {
	padding: 6px 10px;
	cursor: pointer;
}

.to-search-results__item:hover {
	background: #f0f0f0;
}

/* ==========================
   Success popup after submit
   ========================== */

.target-offers-success-popup {
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
}

.target-offers-success-popup__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.45);
}

.target-offers-success-popup__box {
	position: relative;
	max-width: 420px;
	margin: 20vh auto 0;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
	padding: 20px 22px;
	text-align: center;
}

.target-offers-success-popup__message {
	margin: 0 0 16px;
	font-size: 15px;
}

.target-offers-success-popup__ok {
	display: inline-block;
	min-width: 120px;
	padding: 8px 18px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	background: #0a875a;
	color: #fff;
}

.target-offers-success-popup__ok:hover {
	opacity: 0.92;
}