/* LatePoint Persian Companion — راست‌چین فرم رزرو مشتری + فونت فارسی (نسخه ۴، بازنویسی کامل)
   استراتژی این نسخه: به‌جای حدس‌زدن left/right برای تک‌تک عناصر (که با هر آپدیت LatePoint
   می‌شکنه)، عمدتاً از CSS logical properties استفاده می‌کنیم که با خودِ direction هماهنگ می‌مونن،
   به‌علاوه‌ی چند override دستی برای مواردی که واقعاً معلوم شده مشکل دارن.
   روی چند سطح دامنه (.latepoint-w و .latepoint-booking-form-element و .latepoint-shortcode-booking-form)
   همزمان اعمال می‌شه تا با هر ساختار embedding کار کنه. */

@font-face {
	font-family: 'IRANYekanWeb';
	src: url('fonts/iranyekanwebregularfanum.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IRANYekanWeb';
	src: url('fonts/iranyekanwebmediumfanum.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ============ فونت ============ */
.latepoint-w,
.latepoint-booking-form-element,
.latepoint-shortcode-booking-form,
.latepoint-w *:not(.latepoint-icon):not([class^="latepoint-icon-"]):not([class*=" latepoint-icon-"]),
.latepoint-booking-form-element *:not(.latepoint-icon):not([class^="latepoint-icon-"]):not([class*=" latepoint-icon-"]),
.latepoint-shortcode-booking-form *:not(.latepoint-icon):not([class^="latepoint-icon-"]):not([class*=" latepoint-icon-"]) {
	font-family: 'IRANYekanWeb', Tahoma, sans-serif !important;
}
.latepoint-w .latepoint-icon,
.latepoint-w [class^="latepoint-icon-"],
.latepoint-w [class*=" latepoint-icon-"],
.latepoint-booking-form-element .latepoint-icon,
.latepoint-booking-form-element [class^="latepoint-icon-"],
.latepoint-booking-form-element [class*=" latepoint-icon-"] {
	font-family: 'latepointIcons' !important;
}

/* ============ جهت پایه ============ */
.latepoint-w,
.latepoint-booking-form-element,
.latepoint-shortcode-booking-form,
.latepoint-lightbox-w .latepoint-booking-form-element {
	direction: rtl;
	text-align: right;
}

/* ============ متن‌های عمومی، لیبل‌ها، هدرها ============ */
.latepoint-w .os-step-header,
.latepoint-w .os-progress-bar-step,
.latepoint-w .latepoint-checkbox-w,
.latepoint-w .latepoint-radio-w,
.latepoint-w label,
.latepoint-w .os-form-group label,
.latepoint-w h1, .latepoint-w h2, .latepoint-w h3,
.latepoint-w h4, .latepoint-w h5, .latepoint-w h6,
.latepoint-w .latepoint-heading,
.latepoint-w .os-heading-text-library {
	text-align: right;
}
/* مورد ۳: توضیح مرحله و متن پاراگراف‌های عمومی باید وسط‌چین بمونن، نه راست‌چین
   (قانون قبلی این‌ها رو هم اشتباهی راست‌چین کرده بود) */
.latepoint-w .latepoint-step-desc,
.latepoint-w .latepoint-questions {
	text-align: center !important;
}

/* ============ فیلدهای فرم — با logical properties (خودکار با جهت هماهنگ می‌مونن) ============ */
.latepoint-w input,
.latepoint-w select,
.latepoint-w textarea,
.latepoint-w .os-form-control {
	text-align: right;
	direction: rtl;
}
/* شماره تلفن، ایمیل، ساعت بهتره چیدمان رقمی خودشون رو حفظ کنن ولی متن راست‌چین بمونه */
.latepoint-w input[type="tel"],
.latepoint-w input[type="email"],
.latepoint-w .os-time-slot,
.latepoint-w .iti input[type="tel"] {
	direction: ltr;
	text-align: right;
}

/* آیکون‌های داخل فیلد (مثل آیکون تقویم/ساعت) با logical inset به‌جای left/right ثابت */
.latepoint-w .os-form-icon,
.latepoint-w .os-input-icon {
	inset-inline-start: auto;
	inset-inline-end: 12px;
}

/* ============ دکمه‌های بعدی/قبلی فرم رزرو ============ */
.latepoint-w .latepoint-footer .latepoint-next-btn,
.latepoint-booking-form-element .latepoint-footer .latepoint-next-btn {
	margin-inline-end: auto !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}
.latepoint-w .latepoint-footer .latepoint-btn:hover.latepoint-next-btn i {
	transform: translateX(-3px) !important;
}
.latepoint-w .latepoint-footer .latepoint-btn:hover.latepoint-prev-btn i {
	transform: translateX(3px) !important;
}

/* آیکون‌های جهت‌دار (فلش/شورون) که خودشون گرافیک‌اند و باید آینه بشن */
.latepoint-w .latepoint-icon-arrow-left,
.latepoint-w .latepoint-icon-arrow-right,
.latepoint-w .latepoint-icon-chevron-left,
.latepoint-w .latepoint-icon-chevron-right,
.latepoint-w .latepoint-icon-arrow-right-circle,
.latepoint-w .latepoint-icon-arrow-left-circle {
	display: inline-block;
	transform: scaleX(-1);
}

/* ============ تقویم رزرو ============ */
.latepoint-w .os-weekdays,
.latepoint-w .os-monthly-calendar-days,
.latepoint-w .os-months {
	direction: rtl;
}

/* ============ progress bar / step indicator ============ */
.latepoint-w .latepoint-progress-bar-w,
.latepoint-w .os-progress-bar {
	direction: rtl;
}

/* ============ سبد خرید / خلاصهٔ رزرو ============ */
.latepoint-w .latepoint-cart-w,
.latepoint-w .summary-box-content,
.latepoint-w .os-cart-item,
.latepoint-w .sbc-highlighted-item {
	text-align: right;
	direction: rtl;
}
.latepoint-w .summary-box-booking-date-box {
	margin-inline-end: 12px;
	margin-inline-start: 0;
}

/* ============ جدول‌های فاکتور/صورت‌حساب (Pro Features) ============ */
.latepoint-w table th,
.latepoint-w table td,
.latepoint-w .invoice-heading,
.latepoint-w .invoice-info,
.latepoint-w .invoice-row {
	text-align: right;
}
.latepoint-w .invoice-row.id-label,
.latepoint-w .invoice-row .id-value {
	text-align: right;
}

/* ============ نوتیفیکیشن‌ها و پیام‌های خطا/موفقیت ============ */
.latepoint-w .os-notifications,
.latepoint-w .latepoint-message,
.latepoint-w .os-form-message-w {
	text-align: right;
	direction: rtl;
}

/* ============ پنل کاربری مشتری ============ */
.latepoint-w .latepoint-customer-app-w,
.latepoint-w .customer-booking,
.latepoint-w .customer-order {
	text-align: right;
	direction: rtl;
}
.latepoint-w .customer-booking-info-row,
.latepoint-w .customer-order-info-row {
	flex-direction: row;
}

/* ============ چک‌باکس/رادیو — علامت باید سمت راست متن باشه (چون خودِ فرم راست‌چینه) ============ */
.latepoint-w .latepoint-checkbox-w input,
.latepoint-w .latepoint-radio-w input {
	margin-inline-end: 8px;
	margin-inline-start: 0;
}

/* ============ پنجره‌های کشویی/پاپ‌آپ که ممکنه بیرون از latepoint-w رندر بشن ============ */
body .select2-dropdown.latepoint-select2-dropdown,
body .latepoint-tooltip,
body .latepoint-lightbox-w {
	direction: rtl;
	text-align: right;
	font-family: 'IRANYekanWeb', Tahoma, sans-serif;
}

/* =========================================================================
   بخش دقیق: تفاوت‌های واقعی استخراج‌شده از مقایسه‌ی خط‌به‌خط front.css فعلی
   (غیر راست‌چین) با front_old.css (نسخه‌ای که کاربر تأیید کرد راست‌چین درست
   کار می‌کنه). این ۱۴ مورد، نتیجه‌ی یک diff دقیق پراپرتی‌به‌پراپرتی هستن —
   نه حدس، بلکه دقیقاً همون چیزی که در نسخه‌ی کار‌کننده متفاوت بوده.
   ========================================================================= */

/* لیبل شناور بالای فیلدهای متنی (مثل نام، ایمیل) — قبلاً سمت چپ می‌چسبید */
.latepoint-w .os-form-group.os-form-textfield-group label {
	left: auto !important;
	right: 10px !important;
}

/* پنل کناری فرم رزرو (خلاصه‌ی سفارش) — خط جداکننده باید سمت چپش باشه، نه راست */
.latepoint-w .latepoint-booking-form-element .latepoint-side-panel {
	border-right: none !important;
	border-left: 1px solid rgba(0, 0, 0, .1) !important;
}

/* تیتر بالای فرم — دکمه‌ی کنارش (مثلاً تعویض زبان/بستن) باید به‌جای چپ به راست بچسبه */
.latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-heading-w .os-heading-text-library {
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* تأییدیه‌ی وضعیت رزرو */
.booking-status-info-wrapper .booking-confirmation {
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* خط جداکننده‌ی بین ستون‌های روزهای هفته در تقویم */
.latepoint-booking-form-element .os-weekdays .weekday {
	border-left: none !important;
	border-right: 1px solid #ddd !important;
	text-align: center !important;
}

/* فاصله‌ی کنار سال در هدر تقویم */
.latepoint-booking-form-element .os-current-month-label-w .os-current-month-label .current-year {
	margin-left: 0 !important;
	margin-right: 5px !important;
}

/* پاپ‌آپ جزئیات خدمت */
.latepoint-w .os-item-details-popup .os-item-details-popup-inner .item-details-popup-content {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/* خط جداکننده‌ی هدر خلاصه‌ی سبد خرید */
.summary-box-heading .sbh-line {
	margin-left: 0 !important;
	margin-right: 10px !important;
}

/* دکمه‌ی حذف آیتم از سبد خرید */
.summary-box .summary-box-content .os-remove-item-from-cart {
	right: auto !important;
	left: 0 !important;
}

/* فاصله‌ی محتوای داخل آیتم سبد خرید */
.summary-box .summary-box-content .sbc-content-i {
	margin-left: 0 !important;
	margin-right: 10px !important;
}

/* عنوان خدمت در کارت‌های پنل کاربری */
.customer-bookings-tiles h6.customer-booking-service-name {
	text-align: right !important;
}

/* محتوای اصلی هر مرحله از فرم رزرو — specificity بالاتر چون قانون قبلی override می‌شد */
.latepoint-w.latepoint-w .latepoint-booking-form-element.latepoint-booking-form-element .latepoint-step-content,
body .latepoint-booking-form-element .latepoint-step-content.latepoint-step-content {
	text-align: right !important;
}

/* =========================================================================
   بخش دوم: موارد دقیقی که با selector مشخص گزارش شد
   ========================================================================= */

/* مورد ۱: توضیح مرحله و سؤالات باید وسط‌چین بمونن (قانون کلی راست‌چین من قبلاً خرابش کرده بود) */
.latepoint-w .latepoint-step-desc,
.latepoint-w .latepoint-questions {
	text-align: center !important;
}

/* مورد ۲: عنوان‌های os-heading-text باید راست‌چین باشن */
.latepoint-w .os-heading-text {
	text-align: right !important;
}

/* مورد ۳: فاصله‌ی تصویر آیتم/سرویس — دقیقاً طبق مقداری که در نسخه‌ی درست بود */
.latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-img-w,
.latepoint-w .latepoint-transaction-payment-form .os-items .os-item .os-item-i .os-item-img-w {
	margin-left: 15px !important;
	margin-right: 0 !important;
}

/* مورد ۳ب (رفع باگ فاصله‌ی عجیب راست‌چین): در نسخه‌ی قبلی فقط margin تصویر (os-item-img-w)
   سواپ شده بود، اما margin-right:auto روی نام آیتم (os-item-name-w) دست‌نخورده مونده بود.
   در حالت LTR این margin-right:auto باعث می‌شد فضای اضافی بین نام و ستون قیمت/تعداد به سمت
   راست (یعنی سمت درست) کشیده بشه؛ ولی چون کل کانتینر با dir="rtl" چیده می‌شه، این فضای اضافی
   باید سمت چپ کشیده بشه (margin-left:auto)، وگرنه یک فاصله‌ی خالی بزرگ و نامتقارن بین متن و
   بقیه‌ی عناصر (تعداد زیرمجموعه/قیمت) ایجاد می‌شه که کل فرم رزرو رو به هم می‌ریزه.
   همین موضوع برای os-item-child-count و os-item-price-w هم صادقه: margin/border سمت چپ‌شون
   باید به راست منتقل بشه تا در کنار متن (که حالا سمت چپشون قرار داره) بچسبن. */
.latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-name-w,
.latepoint-w .latepoint-transaction-payment-form .os-items .os-item .os-item-i .os-item-name-w,
.latepoint-w .latepoint-booking-form-element .os-item-category-w .os-item-category-info .os-item-category-name,
.latepoint-w .latepoint-transaction-payment-form .os-item-category-w .os-item-category-info .os-item-category-name,
.latepoint-w .latepoint-booking-form-element .latepoint-step-content .os-services_ .os-item .os-item-i .service-name-w,
.latepoint-w .latepoint-transaction-payment-form .latepoint-step-content .os-services_ .os-item .os-item-i .service-name-w {
	margin-right: 0 !important;
	margin-left: auto !important;
}

.latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-child-count,
.latepoint-w .latepoint-transaction-payment-form .os-items .os-item .os-item-i .os-item-child-count {
	margin-left: 0 !important;
	margin-right: 15px !important;
}

.latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-price-w,
.latepoint-w .latepoint-transaction-payment-form .os-items .os-item .os-item-i .os-item-price-w,
.latepoint-w .latepoint-booking-form-element .latepoint-step-content .os-services_ .os-item .os-item-i .service-price-w,
.latepoint-w .latepoint-transaction-payment-form .latepoint-step-content .os-services_ .os-item .os-item-i .service-price-w {
	border-left: none !important;
	border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
	padding-left: 0 !important;
	padding-right: 15px !important;
	margin-left: 0 !important;
	margin-right: 10px !important;
}

.latepoint-w .latepoint-booking-form-element .os-item-category-w .os-item-category-info .os-item-category-img-w,
.latepoint-w .latepoint-transaction-payment-form .os-item-category-w .os-item-category-info .os-item-category-img-w,
.latepoint-w .latepoint-booking-form-element .latepoint-step-content .os-services_ .os-item .os-item-i .service-img-w,
.latepoint-w .latepoint-transaction-payment-form .latepoint-step-content .os-services_ .os-item .os-item-i .service-img-w {
	margin-right: 0 !important;
	margin-left: 15px !important;
}

/* مورد ۴: عنوان بالای فرم — دکمه‌ی کنارش باید به راست بچسبه، نه چپ */
.latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-heading-w .os-heading-text {
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* مورد ۶: لیبل تعداد نفرات باید وسط‌چین باشه */
.latepoint-w .select-total-attendees-label {
	text-align: center !important;
}

/* مورد ۷ (اصلاح‌شده): بررسی دقیق front_old نشون داد فوتر از row-reverse استفاده نمی‌کنه،
   فقط display:flex معمولی + justify-content:space-between (که پیش‌فرض خودشه) — پس row-reverse رو حذف کردم */
.latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-footer {
	display: flex !important;
	justify-content: space-between !important;
}

/* مورد ۸: گردی گوشه‌ی بازه‌های زمانی */
.latepoint-booking-form-element .dp-timeslot {
	border-radius: 5px !important;
}

/* مورد ۱۳: کادر os-customer-otp-notice زیر فیلد شماره تماس زشت دیده می‌شد — استایل تمیزتر */
.latepoint-w .os-customer-otp-notice {
	background: #f3f4f6 !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 10px !important;
	padding: 10px 14px !important;
	font-size: 12.5px !important;
	color: #6b7280 !important;
	text-align: center !important;
	margin-top: 8px !important;
}




.customer-order-bottom-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100% !important;
}

.customer-order-bottom-actions br {
  display: none !important;
}

.customer-order-bottom-actions p,
.customer-order-bottom-actions .load-booking-summary-btn-w {
  display: flex !important;
  flex: 1 !important;  /* کشیده شدن */
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.customer-order-bottom-actions a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;  /* متن وسط قرار گیرد */
  gap: 5px !important;
  padding: 8px 12px !important;
  white-space: nowrap !important;
  flex: 1 !important;  /* کشیده شدن دکمه‌ها */
  width: 100% !important;
  text-align: center !important;
}

.customer-order-bottom-actions > *:empty {
  display: none !important;
}





/* =========================================================================
   نجات‌بخش چت: حذف کامل فضای خالی و جلوگیری از نفوذ استایل‌های سراسری فرم به چت
   ========================================================================= */

/* جلوگیری از نفوذ text-align و سایر استایل‌های عمومی به هدرهای چت */
.latepoint-w .latepoint-chat-box-w,
.latepoint-w .latepoint-chat-box-w * {
	text-align: right;
}

/* اصلاح ساختار هدر چت برای حذف فضای خالی سفید بزرگ */
.latepoint-w .latepoint-chat-box-w .lc-heading {
	display: contents !important;
}
.latepoint-w .latepoint-chat-box-w .lc-conversations-header,
.latepoint-w .latepoint-chat-box-w .lc-contents-header {
	height: fit-content !important;
	align-self: start !important;
	margin: 0 !important;
	padding: 16px 18px !important;
	border-bottom: 1px solid var(--lp-border, rgba(0,0,0,0.08)) !important;
}

/* جلوگیری از کش آمدن کانتینر اصلی چت (حذف min-height اگر وجود دارد) */
.latepoint-w .latepoint-chat-box-w {
	min-height: 0 !important;
}

/* بستن دقیق ارتفاع ستون‌ها برای جلوگیری از ایجاد فضای خالی */
.latepoint-w .latepoint-chat-box-w .lc-conversations {
	height: auto !important;
	max-height: 100% !important;
	overflow-y: auto !important;
}
.latepoint-w .latepoint-chat-box-w .lcb-content {
	height: auto !important;
	max-height: 100% !important;
	overflow-y: auto !important;
}

/* جلوگیری از نفوذ استایل‌های عمومی h1, label و ... به عناصر چت */
.latepoint-w .latepoint-chat-box-w h1,
.latepoint-w .latepoint-chat-box-w h2,
.latepoint-w .latepoint-chat-box-w h3,
.latepoint-w .latepoint-chat-box-w h4,
.latepoint-w .latepoint-chat-box-w h5,
.latepoint-w .latepoint-chat-box-w h6,
.latepoint-w .latepoint-chat-box-w label {
	text-align: right !important;
}

/* جلوگیری از نفوذ استایل دکمه‌های فرم به دکمه ارسال پیام */
.latepoint-w .latepoint-chat-box-w .os-bm-send-btn {
	background: var(--lp-teal-gradient, #0B7D68) !important;
	padding: 10px 18px !important;
	border: none !important;
}

/* ===========================================================================
   ادغام‌شده از customer-dashboard-theme.css (بازطراحی پنل کاربری مشتری)
   =========================================================================== */

/* ====================================================================
   LatePoint Persian Companion — بازطراحی مدرن پنل کاربری مشتری (۲۰۲۶)
   الهام‌گرفته از داشبورد ارسالی کاربر: کارت‌های گرادیانت، ناوبری اپ‌مانند
   روی موبایل، و تم روشن/تاریک خودکار هم‌سو با تم گوشی.
   ==================================================================== */

.latepoint-customer-app-w {
	--lp-bg: #ffffff;
	--lp-card-bg: #ffffff;
	--lp-text: #1f222b;
	--lp-text-soft: #788291;
	--lp-border: rgba(31, 34, 43, 0.08);
	--lp-shadow: 0 8px 24px rgba(31, 34, 43, 0.06);
	--lp-radius: 20px;
	/* مورد ۹: رنگ‌بندی از خودِ برند سایت (فیروزه‌ای اصلی + طلایی دوم) */
	--lp-accent: #0B7D68;
	--lp-teal-gradient: linear-gradient(267deg, #0B7D68 0%, #31D79C 100%);
	--lp-gold-gradient: linear-gradient(135deg, #CD924E 0%, #FCD383 100%);

	background: var(--lp-bg);
	color: var(--lp-text);
	border-radius: var(--lp-radius);
	padding: 20px;
	max-width: 720px;
	margin: 0 auto;
	font-family: inherit;
	direction: rtl;
	text-align: right;
}

/* تم تاریک عمداً غیرفعال شده — فعلاً فقط تم روز پشتیبانی می‌شه (مقادیر بالا ثابت می‌مونن) */

/* ---------- هدر ---------- */
.lp-app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}
.lp-app-header-user { display: flex; align-items: center; gap: 12px; }
.lp-app-avatar {
	width: 46px; height: 46px; border-radius: 50%;
	background: linear-gradient(135deg, #fcd383 , #cd924e);
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.lp-app-greeting { font-size: 16px; color: var(--lp-text); }
.lp-app-logout {
	width: 40px; height: 40px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--lp-card-bg); box-shadow: var(--lp-shadow);
	color: var(--lp-text-soft); text-decoration: none; transition: transform .15s ease;
}
.lp-app-logout:hover { transform: scale(1.08); color: #e74c3c; }

/* ---------- کارت‌های آماری ---------- */
.lp-app-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 22px;
}
.lp-stat-card {
	border-radius: 18px;
	padding: 18px 16px;
	color: #fff;
	box-shadow: var(--lp-shadow);
	position: relative;
	overflow: hidden;
	min-height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.lp-stat-a { background: linear-gradient(135deg, #43cea2, #6bd79c); }
.lp-stat-b { background: linear-gradient(135deg, #fcd383, #cd924e); }
.lp-stat-c { background: linear-gradient(135deg, #ff8a65, #ff6f91); }
.lp-stat-d { background: linear-gradient(135deg, #4facfe, #38d3d3); }
.lp-stat-icon { font-size: 20px; opacity: .9; margin-bottom: 8px; }
.lp-stat-value { font-size: 28px; font-weight: 800; line-height: 1; }
.lp-stat-label { font-size: 13px; opacity: .92; margin-top: 4px; }

/* ---------- بدنه/ناوبری ---------- */
.lp-app-body { background: transparent; }
.lp-app-nav {
	display: flex;
	gap: 6px;
	background: var(--lp-card-bg);
	border-radius: 16px;
	padding: 6px;
	box-shadow: var(--lp-shadow);
	margin-bottom: 16px;
	overflow-x: auto;
}
.lp-app-nav .latepoint-tab-trigger {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 12px;
	color: var(--lp-text-soft);
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.lp-app-nav .latepoint-tab-trigger.active {
	background: var(--lp-accent);
	color: #fff;
}
.lp-app-nav .latepoint-tab-trigger i { font-size: 15px; }

.lp-app-content { padding-bottom: 8px; }

/* ---------- کارت‌های نوبت/سفارش ---------- */
.customer-bookings-tiles, .customer-orders-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}
.customer-booking, .customer-order {
	background: var(--lp-card-bg) !important;
	border: 1px solid var(--lp-border) !important;
	border-radius: 16px !important;
	box-shadow: var(--lp-shadow);
	padding: 16px !important;
	color: var(--lp-text);
}
.customer-booking-service-name { color: var(--lp-text) !important; }
.customer-booking-datetime, .customer-order-datetime { color: var(--lp-text-soft) !important; }

.new-booking-tile {
	border: 2px dashed var(--lp-border) !important;
	border-radius: 16px !important;
	color: var(--lp-accent) !important;
	display: flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 100px;
}

.latepoint-section-heading-w { margin: 18px 0 10px; }
.latepoint-section-heading { color: var(--lp-text); font-size: 15px; }
.heading-extra { color: var(--lp-text-soft); font-size: 12px; }

/* ---------- پیام «موردی یافت نشد» — تب پیام‌ها که کاربر گفت جالب نیست ---------- */
.latepoint-message-info.latepoint-message {
	background: var(--lp-card-bg);
	border: 1px dashed var(--lp-border);
	border-radius: 16px;
	padding: 32px 20px;
	text-align: center;
	color: var(--lp-text-soft);
	box-shadow: none;
}

/* ====================================================================
   حالت اپ‌مانند روی موبایل: تمام‌صفحه، ناوبری ثابت پایین با آیکون،
   بدون چیدمان کارتی روی هدر که جا نمی‌شه
   ==================================================================== */
@media (max-width: 640px) {
	.latepoint-customer-app-w {
		max-width: 100%;
		min-height: 100vh;
		border-radius: 0;
		padding: 16px 14px 84px;
		padding-bottom: calc(84px + env(safe-area-inset-bottom));
	}
	.lp-app-stats { grid-template-columns: repeat(2, 1fr); }
	.customer-bookings-tiles, .customer-orders-tiles { grid-template-columns: 1fr; }
	/* مورد ۸: حالت fixed-bottom قبلی حذف شد — به‌جاش استایل تب‌های طلایی/شیشه‌ای شما (پایین همین فایل) استفاده می‌شه */
}

/* =========================================================================
   مورد ۱۲: استایل تب‌های ارسالی کاربر — پس‌زمینه خاکستری با تب فعال گرادیانت طلایی
   ========================================================================= */

/* ===== دسکتاپ ===== */
@media only screen and (min-width: 769px) {
	.latepoint .customer-dashboard-tabs {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
		padding: 5px 10px !important;
		border-bottom: none !important;
		position: relative !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		white-space: nowrap !important;
		justify-content: space-between !important;
		background: transparent !important;
	}
	.latepoint .customer-dashboard-tabs::-webkit-scrollbar { display: none !important; }
	.latepoint .customer-dashboard-tabs .tab-item,
	.latepoint .customer-dashboard-tabs a {
		flex: 1 0 auto !important;
		height: 50px !important;
		padding: 6px 10px !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		border-radius: 10px !important;
		text-decoration: none !important;
		color: #4b5563 !important;
		transition: all 0.3s ease !important;
		margin: 0 !important;
		border: none !important;
		box-shadow: none !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		line-height: 1.2 !important;
		position: relative !important;
		background: #f3f4f6 !important;
	}
}

/* ===== موبایل - دو سطر کاملاً تراز ===== */
@media only screen and (max-width: 768px) {
	.latepoint .customer-dashboard-tabs {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		padding: 5px 10px !important;
		justify-content: center !important;
		border-bottom: none !important;
		position: relative !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		white-space: normal !important;
		background: transparent !important;
		width: 100% !important;
		max-width: 100% !important;
		align-items: stretch !important;
	}
	.latepoint .customer-dashboard-tabs::-webkit-scrollbar { display: none !important; }
	.latepoint .customer-dashboard-tabs .tab-item,
	.latepoint .customer-dashboard-tabs a {
		height: 48px !important;
		min-height: 48px !important;
		max-height: 48px !important;
		padding: 6px 10px !important;
		font-size: 12px !important;
		font-weight: 500 !important;
		border-radius: 10px !important;
		text-decoration: none !important;
		color: #4b5563 !important;
		transition: all 0.3s ease !important;
		margin: 0 !important;
		border: none !important;
		box-shadow: none !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		line-height: 1.2 !important;
		position: relative !important;
		background: #f3f4f6 !important;
		box-sizing: border-box !important;
		flex: 0 0 calc(33.33% - 6px) !important;
		max-width: calc(33.33% - 6px) !important;
	}
	.latepoint .customer-dashboard-tabs .tab-item:nth-child(4),
	.latepoint .customer-dashboard-tabs a:nth-child(4),
	.latepoint .customer-dashboard-tabs .tab-item:nth-child(5),
	.latepoint .customer-dashboard-tabs a:nth-child(5) {
		flex: 0 0 calc(50% - 6px) !important;
		max-width: calc(50% - 6px) !important;
	}
}

/* ===== هاور/اکتیو با گرادیانت طلایی برند ===== */
.latepoint .customer-dashboard-tabs .tab-item:hover,
.latepoint .customer-dashboard-tabs a:hover {
	background: #e5e7eb !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
.latepoint .customer-dashboard-tabs .active,
.latepoint .customer-dashboard-tabs a.active {
	background: var(--lp-gold-gradient) !important;
	color: #1a1a1a !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 20px rgba(205, 146, 78, 0.3) !important;
}
.latepoint .customer-dashboard-tabs .tab-item::after,
.latepoint .customer-dashboard-tabs a::after,
.latepoint .customer-dashboard-tabs .tab-item::before,
.latepoint .customer-dashboard-tabs a::before {
	display: none !important;
	content: none !important;
}





/* =========================================================================
   مورد ۱۱: بازطراحی کامل تب پیام‌ها (چت) — نمای مدرن مثل اپ‌های پیام‌رسان
   ========================================================================= */
.latepoint-chat-box-w {
	display: grid;
	grid-template-columns: 260px 1fr;
	background: var(--lp-card-bg);
	border-radius: var(--lp-radius);
	overflow: hidden;
	box-shadow: var(--lp-shadow);
	/* حذف min-height: 480px برای جلوگیری از ایجاد فضای خالی */
	border: 1px solid var(--lp-border);
}
.latepoint-chat-box-w .lc-heading { display: contents; }
.latepoint-chat-box-w .lc-conversations-header,
.latepoint-chat-box-w .lc-contents-header {
	padding: 16px 18px; font-weight: 700; font-size: 14px;
	border-bottom: 1px solid var(--lp-border); background: var(--lp-bg);
	height: fit-content !important;
}
.latepoint-chat-box-w .lc-contents { display: contents; }
.latepoint-chat-box-w .lc-conversations {
	border-inline-start: 1px solid var(--lp-border);
	overflow-y: auto; 
	/* height را به جای max-height ست کردیم تا دقیقاً هم‌قد محتوای چت باشد */
	height: 100%;
}
.latepoint-chat-box-w .lc-conversation {
	display: flex; align-items: center; gap: 10px; padding: 12px 14px;
	cursor: pointer; border-bottom: 1px solid var(--lp-border);
	transition: background .15s ease; position: relative;
}
.latepoint-chat-box-w .lc-conversation:hover { background: var(--lp-bg); }
.latepoint-chat-box-w .lc-conversation.lc-selected {
	background: color-mix(in srgb, var(--lp-accent) 10%, transparent);
	border-inline-start: 3px solid var(--lp-accent);
}
.latepoint-chat-box-w .lca-avatar {
	width: 42px; height: 42px; border-radius: 50%;
	background-size: cover; background-position: center;
	background-color: var(--lp-border); flex-shrink: 0;
}
.latepoint-chat-box-w .lc-info { flex: 1; min-width: 0; }
.latepoint-chat-box-w .lc-title {
	font-size: 13.5px; font-weight: 700; color: var(--lp-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.latepoint-chat-box-w .lc-meta {
	font-size: 11.5px; color: var(--lp-text-soft); margin-top: 2px;
}
.latepoint-chat-box-w .lc-unread {
	background: var(--lp-teal-gradient); color: #fff; font-size: 11px; font-weight: 700;
	min-width: 20px; height: 20px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center; padding: 0 6px;
}
.latepoint-chat-box-w .lc-conversation:not(.has-unread) .lc-unread { display: none; }

.latepoint-chat-box-w .lcb-content {
	display: flex; flex-direction: column; 
	/* height به جای max-height برای پر کردن دقیق فضای موجود */
	height: 100%;
}
.latepoint-chat-box-w .booking-messages-list {
	flex: 1; overflow-y: auto; padding: 18px;
	display: flex; flex-direction: column; gap: 10px;
	background: var(--lp-bg);
}

/* --- استایل‌های پایه حباب‌ها (یکپارچه شده) --- */
.latepoint-chat-box-w .os-booking-message-w {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
}
.latepoint-chat-box-w .os-booking-message-w .os-booking-message {
	max-width: 80% !important;
	padding: 10px 14px !important;
	border-radius: 16px !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	position: relative !important;
}

/* --- حباب پیام مشتری (سمت راست — رفع فضای خالی زرد) --- */
.latepoint-chat-box-w .os-booking-message-w.os-bm-customer {
	align-items: flex-end !important;
}
.latepoint-chat-box-w .os-booking-message-w.os-bm-customer .os-booking-message {
	background: var(--lp-teal-gradient) !important;
	color: #fff !important;
	border-bottom-right-radius: 4px !important;
	margin-left: auto !important; /* کلید اصلی: فضای خالی را در سمت چپ ایجاد می‌کند */
	margin-right: 0 !important;
	text-align: left !important;
}
.latepoint-chat-box-w .os-booking-message-w.os-bm-customer .os-bm-info-w {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* --- حباب پیام پرسنل/ادمین (سمت چپ) --- */
.latepoint-chat-box-w .os-booking-message-w.os-bm-agent,
.latepoint-chat-box-w .os-booking-message-w.os-bm-admin {
	align-items: flex-start !important;
}
.latepoint-chat-box-w .os-booking-message-w.os-bm-agent .os-booking-message,
.latepoint-chat-box-w .os-booking-message-w.os-bm-admin .os-booking-message {
	background: var(--lp-card-bg) !important;
	border: 1px solid var(--lp-border) !important;
	color: var(--lp-text) !important;
	border-bottom-left-radius: 4px !important;
	margin-right: auto !important; /* کلید اصلی: فضای خالی را در سمت راست ایجاد می‌کند */
	margin-left: 0 !important;
}
.latepoint-chat-box-w .os-booking-message-w.os-bm-agent .os-bm-info-w,
.latepoint-chat-box-w .os-booking-message-w.os-bm-admin .os-bm-info-w {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-right: auto !important;
	margin-left: 0 !important;
}



/* --- آواتار و تاریخ داخل چت (اصلاح نهایی برای RTL - سازگار با هر دو سمت) --- */

/* استایل پایه اطلاعات (آواتار + تاریخ) */
.latepoint-chat-box-w .booking-messages-list .os-bm-info-w {
    display: flex !important;
    flex-direction: row !important; /* افقی می‌ماند تا چیزی نیفتد */
    align-items: center !important; /* آواتار و تاریخ هم‌تراز باشند */
    gap: 5px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* استایل مشترک آواتار و تاریخ */
.latepoint-chat-box-w .booking-messages-list .os-bm-info-w .os-bm-avatar {
    width: 40px !important;
    height: 40px !important;
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 50% !important;
    box-shadow: 0px 0px 0px 2px var(--lp-card-bg) !important;
    background-color: var(--lp-border) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.latepoint-chat-box-w .booking-messages-list .os-bm-info-w .os-bm-date {
    margin: 0 !important;
    font-size: 11px !important;
    color: var(--lp-text-soft) !important;
    text-align: center !important;
}

/* --- مخصوص پیام مشتری (سمت راست) --- */
.latepoint-chat-box-w .os-booking-message-w.os-bm-customer .os-bm-info-w {
    flex-direction: row !important; 
}
/* آواتار در اینجا باید اول (سمت راست) باشد */
.latepoint-chat-box-w .os-booking-message-w.os-bm-customer .os-bm-info-w .os-bm-avatar {
    order: 1 !important; 
    margin-right: 0 !important;
}
/* تاریخ دوم (سمت چپ آواتار) باشد */
.latepoint-chat-box-w .os-booking-message-w.os-bm-customer .os-bm-info-w .os-bm-date {
    order: 2 !important; 
}

/* --- مخصوص پیام پرسنل/ادمین (سمت چپ) --- */
.latepoint-chat-box-w .os-booking-message-w.os-bm-agent .os-bm-info-w,
.latepoint-chat-box-w .os-booking-message-w.os-bm-admin .os-bm-info-w {
    flex-direction: row-reverse !important; /* ترتیب را برای سمت چپ برعکس می‌کند */
}
/* آواتار در اینجا باید اول (سمت چپ) باشد */
.latepoint-chat-box-w .os-booking-message-w.os-bm-agent .os-bm-info-w .os-bm-avatar,
.latepoint-chat-box-w .os-booking-message-w.os-bm-admin .os-bm-info-w .os-bm-avatar {
    order: 1 !important;
    margin-left: 0 !important;
}
/* تاریخ دوم (سمت راست آواتار) باشد */
.latepoint-chat-box-w .os-booking-message-w.os-bm-agent .os-bm-info-w .os-bm-date,
.latepoint-chat-box-w .os-booking-message-w.os-bm-admin .os-bm-info-w .os-bm-date {
    order: 2 !important;
}






/* --- ورودی و دکمه ارسال پیام --- */
.latepoint-chat-box-w .os-booking-messages-input-w {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 14px 16px !important;
	border-top: 1px solid var(--lp-border) !important;
	background: var(--lp-card-bg) !important;
}
.latepoint-chat-box-w .os-booking-messages-input {
	flex: 1 !important;
	border: 1px solid var(--lp-border) !important;
	border-radius: 999px !important;
	padding: 11px 18px !important;
	font-size: 13px !important;
	background: var(--lp-bg) !important;
	color: var(--lp-text) !important;
}
.latepoint-chat-box-w .os-booking-messages-input:focus {
	outline: none !important;
	border-color: var(--lp-accent) !important;
}
.latepoint-chat-box-w .os-bm-send-btn {
	border-radius: 999px !important;
	background: var(--lp-teal-gradient) !important;
	border: none !important;
	padding: 10px 18px !important;
	display: flex !important; align-items: center !important; gap: 6px !important;
	cursor: pointer !important;
	color: #fff !important;
	font-size: 13px !important; font-weight: 600 !important;
	white-space: nowrap !important;
}
.latepoint-chat-box-w .os-bm-send-btn:hover { opacity: .9 !important; }
.latepoint-btn i + span { margin-right: 6px !important; margin-left: 0 !important; }

/* --- عنوان‌ها و لیبل‌های فرم رزرو مشتری (وسط‌چین) --- */
.latepoint-w .os-step-header,
.latepoint-w .os-progress-bar-step,
.latepoint-w .latepoint-checkbox-w,
.latepoint-w .latepoint-radio-w,
.latepoint-w label,
.latepoint-w .os-form-group label,
.latepoint-w h1,
.latepoint-w h2,
.latepoint-w h3,
.latepoint-w h4,
.latepoint-w h5,
.latepoint-w h6,
.latepoint-w .latepoint-heading,
.latepoint-w .os-heading-text-library {
	text-align: center;
}

/* --- حالت موبایل چت --- */
@media (max-width: 680px) {
	.latepoint-chat-box-w {
		grid-template-columns: 1fr !important;
		min-height: unset !important;
	}
	.latepoint-chat-box-w .lc-conversations {
		border-inline-start: none !important;
		border-bottom: 1px solid var(--lp-border) !important;
		height: auto !important;
		max-height: 180px !important;
	}
	.latepoint-chat-box-w .lcb-content {
		height: auto !important;
		max-height: 420px !important;
	}
}

.latepoint-chat-box-w .os-booking-messages-input-w .os-bm-send-btn {
  position: absolute !important;
  top: 50%;
  left: 17px;
  right: auto;
  transform: translateY(-50%);
  cursor: pointer;
  display: none !important;
  animation: .3s cubic-bezier(0.05, 0.45, 0.1, 1) 0s messageButtonAnimation;
    animation-fill-mode: none;
  animation-fill-mode: both;
}

.latepoint-chat-box-w .lc-contents .lc-conversations .lc-conversation.lc-selected {
  background-color: #0f8c773b;
  color: #fff;
  border-radius: 20px 0px 0px 20px;
}

.latepoint-chat-box-w .lc-contents .lc-conversations .lc-conversation.lc-selected .lc-meta {
  color: hsla(0, 0%, 1.6%, 0.55);
}

.reschedule-calendar-wrapper .dp-timeslot
Specificity: (0,2,0)
 {
    border-radius: 5px;
}

.reschedule-calendar-wrapper .calendar-style-classic .os-monthly-calendar-days .os-day.selected .os-day-box
Specificity: (0,6,0)
 {
    border-radius: 10px;
 }    
 
 .reschedule-calendar-wrapper .calendar-style-classic .os-monthly-calendar-days .os-day.os-day-current .os-day-box
Specificity: (0,6,0)
 {
    border-radius: 10px;
}