@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

/* =========================================================
   OTOM Professional Navigation System
   نسخة منظمة: الرئيسية / الحجز / المنتجات
   آمنة بدون إخفاء خطير وبدون شاشة فضية
========================================================= */

:root {
  --otom-blue: #0057d9;
  --otom-blue-dark: #063a8f;
  --otom-cyan: #05c7ff;
  --otom-ink: #06172f;
  --otom-text: #334155;
  --otom-muted: #64748b;
  --otom-soft: #f4f8ff;
  --otom-line: #dbeafe;
  --otom-card: #ffffff;
  --otom-shadow: 0 14px 36px rgba(6, 58, 143, 0.10);
}

html,
body,
body * {
  font-family: 'Tajawal', Arial, sans-serif !important;
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth !important;
}

body {
  color: var(--otom-text) !important;
  background:
    radial-gradient(circle at 15% 8%, rgba(0, 111, 255, 0.10) 0, rgba(0, 111, 255, 0.04) 26%, transparent 48%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 45%, #f4f9ff 100%) !important;
  overflow-x: hidden !important;
  padding-bottom: 82px !important;
}

/* لا نخفي الموقع الأصلي نهائياً حتى لا تظهر صفحة فضية */
main,
#app,
.app,
.store,
.page-wrapper,
.main-content,
body.index main,
body.index .main-content,
body.index .page-wrapper,
body.index .app-inner,
body.index .s-block {
  background: transparent !important;
}

/* =========================================================
   Header - تحسين عام بدون تخريب
========================================================= */

header {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid rgba(6, 58, 143, 0.12) !important;
  box-shadow: 0 6px 20px rgba(6, 23, 47, 0.045) !important;
  backdrop-filter: blur(10px) !important;
}

header img,
header [class*="logo"] img,
header [class*="brand"] img,
header a[href="/"] img {
  max-height: 43px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* إخفاء عناصر المتجر غير المناسبة في التجربة الحالية */
header .s-cart-summary-count,
header [class*="wishlist"],
header [class*="compare"] {
  display: none !important;
}

/* في الرئيسية فقط نخلي الهيدر خلف طبقة الهبوط */
body.index header,
body.index .store-header,
body.index .main-header,
body.index .main-nav-container,
body.index .top-navbar,
body.index .mobile-header {
  z-index: 1 !important;
}

/* =========================================================
   Fixed OTOM Navigation - ثابتة في جميع الصفحات
========================================================= */

.otom-global-nav {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 2147482500 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  padding: 8px !important;
  direction: rtl !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(0, 87, 217, 0.16) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 48px rgba(6, 58, 143, 0.18) !important;
  backdrop-filter: blur(14px) !important;
}

.otom-global-nav a {
  min-height: 48px !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  color: var(--otom-blue-dark) !important;
  background: #f4f8ff !important;
  border: 1px solid rgba(0, 87, 217, 0.10) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  padding: 0 8px !important;
  white-space: nowrap !important;
  -webkit-tap-highlight-color: transparent !important;
}

.otom-global-nav a.is-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--otom-blue), var(--otom-blue-dark)) !important;
  box-shadow: 0 10px 24px rgba(0, 87, 217, 0.24) !important;
}

.otom-global-nav a:active {
  transform: translateY(1px) !important;
}

/* =========================================================
   Home Landing Hub - الرئيسية كمركز
========================================================= */

#otom-home-hub {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482000 !important;
  display: none !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 0 !important;
  background: #f4f8ff !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  direction: rtl !important;
}

body.otom-home-landing-active #otom-home-hub {
  display: flex !important;
}

body.otom-booking-view-active #otom-home-hub {
  display: none !important;
}

.otom-home-hub-wrap {
  width: 100% !important;
  max-width: 520px !important;
  min-height: 100vh !important;
  position: relative !important;
  margin: 0 auto !important;
  background: #f4f8ff !important;
}

.otom-home-hub-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.otom-home-hit {
  position: absolute !important;
  z-index: 6 !important;
  display: block !important;
  border: 0 !important;
  outline: 0 !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0) !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
}

/*
  مناطق الضغط مبنية حسب الصورة الأخيرة:
  - بطاقة الغسيل في الوسط تقريباً
  - بطاقة المنتجات أسفلها
*/
.otom-home-booking-hit {
  left: 5% !important;
  right: 5% !important;
  top: 34% !important;
  height: 28% !important;
}

.otom-home-products-hit {
  left: 5% !important;
  right: 5% !important;
  top: 64% !important;
  height: 26% !important;
}

/* زر صغير اختياري للعودة للرئيسية من الحجز */
.otom-back-to-hub {
  display: none !important;
  width: calc(100% - 24px) !important;
  max-width: 520px !important;
  margin: 12px auto 4px !important;
  min-height: 44px !important;
  border-radius: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  background: #ffffff !important;
  color: var(--otom-blue-dark) !important;
  border: 1px solid #dbeafe !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 22px rgba(6, 58, 143, 0.07) !important;
}

body.index.otom-booking-view-active .otom-back-to-hub {
  display: flex !important;
}

/* =========================================================
   Booking Services Styling - صفحة الحجز
========================================================= */

.otom-quick {
  width: 100% !important;
  margin: 22px 0 18px !important;
  padding: 0 12px !important;
  direction: rtl !important;
}

.otom-quick-box {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 26px 15px 22px !important;
  border-radius: 30px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(5,199,255,0.13), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, #f6fbff 100%) !important;
  border: 1px solid rgba(0, 104, 220, 0.15) !important;
  box-shadow: var(--otom-shadow) !important;
}

.otom-quick-title {
  color: var(--otom-ink) !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  margin: 0 auto 10px !important;
}

.otom-quick-title strong {
  color: var(--otom-blue) !important;
}

.otom-quick-sub {
  color: var(--otom-text) !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 1.8 !important;
  margin: 0 auto 16px !important;
  max-width: 430px !important;
}

.otom-slots-counter {
  max-width: 390px !important;
  margin: 16px auto 8px !important;
  padding: 19px 13px 16px !important;
  border-radius: 25px !important;
  direction: rtl !important;
  text-align: center !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%) !important;
  border: 1px solid rgba(0, 104, 220, 0.16) !important;
  box-shadow: 0 16px 38px rgba(7, 26, 61, 0.08) !important;
}

.otom-slots-title,
.otom-slots-countdown-title {
  color: var(--otom-blue-dark) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  margin-bottom: 12px !important;
}

.otom-slots-main {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-width: 160px !important;
  padding: 11px 16px !important;
  margin: 0 auto 13px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--otom-cyan), var(--otom-blue), var(--otom-blue-dark)) !important;
  color: #ffffff !important;
}

.otom-slots-main span {
  color: #ffffff !important;
  font-size: 35px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.otom-slots-main small {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.otom-slots-time {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 11px 6px !important;
  border-radius: 20px !important;
  background: #f7fbff !important;
  border: 1px solid rgba(0, 104, 220, 0.10) !important;
}

.otom-slots-time div {
  width: 72px !important;
  min-width: 72px !important;
  min-height: 78px !important;
  padding: 10px 5px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 87, 217, 0.13) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
}

.otom-slots-time strong {
  color: var(--otom-blue) !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.otom-slots-time small {
  color: var(--otom-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.otom-slots-time > span {
  color: var(--otom-blue) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  align-self: center !important;
}

/* كروت الخدمات */
.s-product-card-entry {
  direction: rtl !important;
  background: #ffffff !important;
  border: 2px solid #d5e7ff !important;
  border-radius: 24px !important;
  padding: 10px !important;
  margin: 14px 10px 18px !important;
  box-shadow: 0 10px 26px rgba(0, 87, 217, 0.10) !important;
  overflow: hidden !important;
}

body.index .s-product-card-entry {
  border-color: #0057d9 !important;
}

.s-product-card-image {
  overflow: hidden !important;
  border-radius: 18px !important;
}

.s-product-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 18px !important;
}

.s-product-card-content-title,
.s-product-card-content-title a,
.s-product-card-content h3,
.s-product-card-content h3 a {
  color: var(--otom-ink) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-decoration: none !important;
}

.s-product-card-price,
.s-product-card-content .s-price {
  color: var(--otom-blue) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  text-align: center !important;
  justify-content: center !important;
}

.s-product-card-entry button,
.s-product-card-entry .s-button-element,
.s-product-card-content-footer button,
.s-product-card-content-footer .s-button-element {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, var(--otom-blue), var(--otom-blue-dark)) !important;
  color: #ffffff !important;
  border: 0 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 9px 20px rgba(0, 87, 217, 0.22) !important;
}

/* =========================================================
   Care Category Page - صفحة المنتجات
========================================================= */

body.otom-care-category-page .otom-care-header {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto 14px !important;
  padding: 0 10px !important;
  direction: rtl !important;
}

body.otom-care-category-page .otom-care-header img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 0 26px 26px !important;
}

body.otom-care-category-page .s-product-card-entry {
  margin: 12px 10px 16px !important;
  border-color: #dbeafe !important;
  background: #ffffff !important;
}

body.otom-care-category-page .s-product-card-entry button,
body.otom-care-category-page .s-product-card-entry .s-button-element {
  background: linear-gradient(135deg, var(--otom-blue), var(--otom-blue-dark)) !important;
}

.otom-care-final-booking {
  display: flex !important;
  width: calc(100% - 22px) !important;
  max-width: 520px !important;
  min-height: 52px !important;
  margin: 18px auto 22px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, var(--otom-blue), var(--otom-blue-dark)) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 28px rgba(0, 87, 217, 0.20) !important;
}

/* =========================================================
   Product Detail Page - لا نخرب صفحة المنتج
========================================================= */

body.otom-product-detail-page .otom-home-hub,
body.otom-product-detail-page #otom-home-hub,
body.otom-product-detail-page .otom-quick,
body.otom-product-detail-page .otom-slots-counter,
body.otom-product-detail-page .otom-back-to-hub {
  display: none !important;
}

body.otom-product-detail-page img,
body.otom-product-detail-page [class*="price"],
body.otom-product-detail-page button,
body.otom-product-detail-page .s-button-element,
body.otom-product-detail-page salla-add-product-button {
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 768px) {
  body {
    padding-bottom: 84px !important;
  }

  .otom-global-nav {
    left: 9px !important;
    right: 9px !important;
    bottom: 9px !important;
    border-radius: 22px !important;
    gap: 6px !important;
    padding: 7px !important;
  }

  .otom-global-nav a {
    min-height: 46px !important;
    border-radius: 16px !important;
    font-size: 12.5px !important;
    padding: 0 6px !important;
  }

  .otom-home-hub-wrap {
    max-width: 100% !important;
  }

  .otom-home-booking-hit {
    left: 5% !important;
    right: 5% !important;
    top: 34% !important;
    height: 28% !important;
  }

  .otom-home-products-hit {
    left: 5% !important;
    right: 5% !important;
    top: 64% !important;
    height: 26% !important;
  }

  .otom-quick {
    margin-top: 14px !important;
  }

  .otom-quick-title {
    font-size: 22px !important;
  }

  .otom-quick-sub {
    font-size: 14px !important;
  }

  .s-product-card-entry {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 12px 10px 16px !important;
    padding: 10px !important;
    border-radius: 22px !important;
  }

  .s-product-card-image {
    width: 100% !important;
    min-width: 0 !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    border-radius: 18px !important;
  }

  .s-product-card-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 0 0 !important;
    text-align: center !important;
  }

  .s-product-card-content-title,
  .s-product-card-content-title a,
  .s-product-card-content h3,
  .s-product-card-content h3 a {
    font-size: 18.5px !important;
    text-align: center !important;
  }

  .s-product-card-price,
  .s-product-card-content .s-price {
    font-size: 21px !important;
  }
}

@media (max-width: 390px) {
  .otom-global-nav a {
    font-size: 11.5px !important;
  }

  .s-product-card-image {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
  }
}


/* =========================================================
   OTOM Products Category - Native All Products Safe Mode
   الهدف:
   - عدم إخفاء أي حاوية منتجات
   - تفعيل ظهور كل منتجات التصنيف التي يحملها مكوّن سلة
   - إخفاء الفرز بصرياً فقط بدون تعطيل القائمة
========================================================= */

body.otom-care-category-page {
  background:
    radial-gradient(circle at 12% 0%, rgba(5, 199, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f4f8ff 100%) !important;
}

/* لا نخفي أي parent قد يحتوي منتجات */
body.otom-care-category-page .otom-hide-recommendation-title {
  display: none !important;
}

/* إخفاء واجهة الفرز فقط، وليس بلوك المنتجات */
body.otom-care-category-page select {
  display: none !important;
}

body.otom-care-category-page .s-products-sort,
body.otom-care-category-page .s-product-list-sort,
body.otom-care-category-page .products-sort,
body.otom-care-category-page .sort-by {
  display: none !important;
}

/* إزالة هيدرات التجارب السابقة */
body.otom-care-category-page .otom-care-header {
  display: none !important;
}

/* هيدر مختصر */
body.otom-care-category-page .otom-care-catalog-hero {
  grid-column: 1 / -1 !important;
  width: calc(100% - 20px) !important;
  max-width: 760px !important;
  margin: 10px auto 10px !important;
  padding: 14px 13px 13px !important;
  direction: rtl !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(5, 199, 255, 0.16), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f1f8ff 100%) !important;
  border: 1px solid rgba(0, 87, 217, 0.14) !important;
  box-shadow: 0 10px 26px rgba(6, 58, 143, 0.08) !important;
}

body.otom-care-category-page .otom-care-catalog-badge {
  display: inline-flex !important;
  min-height: 27px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 11px !important;
  margin-bottom: 7px !important;
  border-radius: 999px !important;
  background: rgba(0, 87, 217, 0.07) !important;
  color: var(--otom-blue-dark) !important;
  border: 1px solid rgba(0, 87, 217, 0.12) !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
}

body.otom-care-category-page .otom-care-catalog-hero h1 {
  margin: 0 0 5px !important;
  color: var(--otom-ink) !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

body.otom-care-category-page .otom-care-catalog-hero p {
  max-width: 580px !important;
  margin: 0 auto 8px !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
}

body.otom-care-category-page .otom-care-catalog-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
}

body.otom-care-category-page .otom-care-catalog-tags span {
  display: inline-flex !important;
  min-height: 27px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--otom-blue-dark) !important;
  border: 1px solid #dbeafe !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
}

body.otom-care-category-page .otom-care-products-heading {
  grid-column: 1 / -1 !important;
  width: calc(100% - 20px) !important;
  max-width: 760px !important;
  margin: 2px auto 8px !important;
  padding: 0 2px !important;
  direction: rtl !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

body.otom-care-category-page .otom-care-products-heading h2 {
  margin: 0 !important;
  color: var(--otom-ink) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

body.otom-care-category-page .otom-care-products-heading span {
  color: var(--otom-muted) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* لا تخفِ أي مكوّن منتجات */
body.otom-care-category-page salla-products-list,
body.otom-care-category-page .s-products-list,
body.otom-care-category-page .products-list,
body.otom-care-category-page [class*="products-list"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* إظهار كل كروت المنتجات الموجودة أو المحملة */
body.otom-care-category-page .s-product-card-entry,
body.otom-care-category-page salla-product-card,
body.otom-care-category-page .product-entry,
body.otom-care-category-page [class*="product-card"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* كرت المنتج */
body.otom-care-category-page .s-product-card-entry {
  width: auto !important;
  max-width: 100% !important;
  margin: 10px 10px 14px !important;
  padding: 10px !important;
  direction: rtl !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid #dbeafe !important;
  box-shadow: 0 8px 22px rgba(6, 58, 143, 0.07) !important;
  overflow: hidden !important;
}

body.otom-care-category-page .s-product-card-image {
  width: 100% !important;
  min-width: 0 !important;
  height: 185px !important;
  min-height: 185px !important;
  max-height: 185px !important;
  border-radius: 17px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #edf4ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.otom-care-category-page .s-product-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
  border-radius: 17px !important;
  background: #ffffff !important;
}

body.otom-care-category-page .s-product-card-content {
  width: 100% !important;
  padding: 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

body.otom-care-category-page .s-product-card-content-title,
body.otom-care-category-page .s-product-card-content-title a,
body.otom-care-category-page .s-product-card-content h3,
body.otom-care-category-page .s-product-card-content h3 a {
  width: 100% !important;
  color: var(--otom-ink) !important;
  font-size: 16.5px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  text-decoration: none !important;
  margin: 2px 0 6px !important;
}

body.otom-care-category-page .s-product-card-price,
body.otom-care-category-page .s-product-card-content .s-price {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--otom-blue) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  margin: 4px auto 8px !important;
}

body.otom-care-category-page .s-product-card-entry button,
body.otom-care-category-page .s-product-card-entry .s-button-element,
body.otom-care-category-page .s-product-card-content-footer button,
body.otom-care-category-page .s-product-card-content-footer .s-button-element {
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, var(--otom-blue), var(--otom-blue-dark)) !important;
  color: #ffffff !important;
  border: 0 !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 20px rgba(0, 87, 217, 0.20) !important;
}

body.otom-care-category-page .otom-care-final-booking {
  width: calc(100% - 22px) !important;
  max-width: 520px !important;
  min-height: 52px !important;
  margin: 16px auto 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, var(--otom-blue), var(--otom-blue-dark)) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 24px rgba(0, 87, 217, 0.20) !important;
}

@media (min-width: 769px) {
  body.otom-care-category-page .s-product-card-entry {
    max-width: 340px !important;
  }

  body.otom-care-category-page .s-product-card-image {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }
}

@media (max-width: 390px) {
  body.otom-care-category-page .s-product-card-image {
    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;
  }
}


/* =========================================================
   OTOM Premium Navigation Integrated
========================================================= */


/* =========================================================
   OTOM Premium Global Navigation Add-on
   يعيد تصميم القائمة الثابتة: الرئيسية / خدمات الحجز / منتجاتنا
   أضفه بعد الأكواد الحالية
========================================================= */

:root{
  --otom-nav-blue-1:#0b63f6;
  --otom-nav-blue-2:#063a8f;
  --otom-nav-cyan:#19c3ff;
  --otom-nav-bg:rgba(255,255,255,.94);
  --otom-nav-border:rgba(11,99,246,.15);
  --otom-nav-shadow:0 16px 40px rgba(6,58,143,.18);
  --otom-nav-text:#12325f;
  --otom-nav-muted:#6b7c93;
}

body{
  padding-bottom: 104px !important;
}

/* الحاوية الثابتة */
.otom-global-nav{
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 2147483000 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  padding: 9px !important;
  direction: rtl !important;
  background: var(--otom-nav-bg) !important;
  border: 1px solid var(--otom-nav-border) !important;
  border-radius: 26px !important;
  box-shadow: var(--otom-nav-shadow) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  overflow: hidden !important;
}

.otom-global-nav::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at top right, rgba(25,195,255,.16), transparent 35%),
    radial-gradient(circle at bottom left, rgba(11,99,246,.10), transparent 42%);
  pointer-events:none !important;
}

/* الروابط */
.otom-global-nav a{
  position: relative !important;
  z-index: 2 !important;
  min-height: 56px !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
  text-decoration: none !important;
  color: var(--otom-nav-text) !important;
  background: rgba(244,248,255,.96) !important;
  border: 1px solid rgba(11,99,246,.08) !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  padding: 7px 6px !important;
  white-space: nowrap !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.otom-global-nav a::before{
  display:block !important;
  font-size: 18px !important;
  line-height: 1 !important;
  margin-bottom: 1px !important;
}

.otom-global-nav a[data-otom-nav="home"]::before{
  content:"⌂" !important;
}

.otom-global-nav a[data-otom-nav="booking"]::before{
  content:"◔" !important;
}

.otom-global-nav a[data-otom-nav="products"]::before{
  content:"▣" !important;
}

.otom-global-nav a:hover{
  transform: translateY(-1px) !important;
}

.otom-global-nav a.is-active{
  color:#ffffff !important;
  background:
    linear-gradient(135deg, var(--otom-nav-cyan) 0%, var(--otom-nav-blue-1) 45%, var(--otom-nav-blue-2) 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(11,99,246,.28) !important;
}

.otom-global-nav a.is-active::after{
  content:"" !important;
  position:absolute !important;
  top:7px !important;
  left:16px !important;
  right:16px !important;
  height:3px !important;
  border-radius:999px !important;
  background: rgba(255,255,255,.78) !important;
}

.otom-global-nav a.is-active::before{
  color:#ffffff !important;
}

.otom-global-nav a:not(.is-active) span{
  color: var(--otom-nav-text) !important;
}

/* تنسيق النص على سطرين إذا لزم */
.otom-global-nav a .otom-nav-label{
  display:block !important;
  font-size:12.5px !important;
  font-weight:900 !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
}

/* في الشاشات الصغيرة جداً */
@media (max-width: 430px){
  body{
    padding-bottom: 98px !important;
  }

  .otom-global-nav{
    left: 9px !important;
    right: 9px !important;
    bottom: 9px !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 22px !important;
  }

  .otom-global-nav a{
    min-height: 52px !important;
    border-radius: 16px !important;
    font-size: 11.5px !important;
    padding: 6px 4px !important;
  }

  .otom-global-nav a::before{
    font-size: 17px !important;
  }

  .otom-global-nav a .otom-nav-label{
    font-size: 11.5px !important;
  }
}




/* =========================================================
   OTOM Products Same Booking Card Style
   تصميم منتجات العناية بنفس قالب كروت الحجز
========================================================= */

/* صفحة المنتجات */
body.otom-care-category-page {
  background:
    radial-gradient(circle at 16% 4%, rgba(5, 199, 255, 0.11), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(0, 87, 217, 0.09), transparent 32%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f4f8ff 100%) !important;
}

/* هيدر صفحة المنتجات مختصر وفخم */
body.otom-care-category-page .otom-care-catalog-hero {
  width: calc(100% - 20px) !important;
  max-width: 760px !important;
  margin: 12px auto 12px !important;
  padding: 18px 14px 16px !important;
  direction: rtl !important;
  text-align: center !important;
  border-radius: 28px !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(5, 199, 255, 0.16), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(0, 87, 217, 0.08), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%) !important;
  border: 1px solid rgba(0, 87, 217, 0.15) !important;
  box-shadow: 0 14px 34px rgba(6, 58, 143, 0.09) !important;
}

body.otom-care-category-page .otom-care-catalog-hero::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 34px !important;
  left: 34px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, var(--otom-cyan), var(--otom-blue), var(--otom-blue-dark), transparent) !important;
}

body.otom-care-category-page .otom-care-catalog-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 13px !important;
  margin-bottom: 8px !important;
  border-radius: 999px !important;
  color: var(--otom-blue-dark) !important;
  background: rgba(0, 87, 217, 0.07) !important;
  border: 1px solid rgba(0, 87, 217, 0.12) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.otom-care-category-page .otom-care-catalog-hero h1 {
  margin: 0 0 7px !important;
  color: var(--otom-ink) !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.3px !important;
}

body.otom-care-category-page .otom-care-catalog-hero p {
  max-width: 580px !important;
  margin: 0 auto 10px !important;
  color: #475569 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
}

body.otom-care-category-page .otom-care-catalog-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
}

body.otom-care-category-page .otom-care-catalog-tags span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--otom-blue-dark) !important;
  border: 1px solid #dbeafe !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  box-shadow: 0 5px 12px rgba(6, 58, 143, 0.04) !important;
}

/* عنوان كل المنتجات */
body.otom-care-category-page .otom-care-products-heading {
  width: calc(100% - 22px) !important;
  max-width: 760px !important;
  margin: 4px auto 9px !important;
  padding: 0 2px !important;
  direction: rtl !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.otom-care-category-page .otom-care-products-heading h2 {
  margin: 0 !important;
  color: var(--otom-ink) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body.otom-care-category-page .otom-care-products-heading span {
  color: var(--otom-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* كرت المنتج بنفس قالب الحجز */
body.otom-care-category-page .s-product-card-entry {
  direction: rtl !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 13px 10px 18px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(5, 199, 255, 0.14), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(0, 87, 217, 0.07), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%) !important;
  border: 2px solid #0057d9 !important;
  box-shadow: 0 12px 30px rgba(0, 87, 217, 0.12) !important;
}

body.otom-care-category-page .s-product-card-entry::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 22px !important;
  left: 22px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, var(--otom-cyan), var(--otom-blue), transparent) !important;
  z-index: 1 !important;
}

body.otom-care-category-page .s-product-card-entry:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 38px rgba(0, 87, 217, 0.16) !important;
}

/* صورة المنتج مثل كرت الخدمة لكن بدون قص */
body.otom-care-category-page .s-product-card-image {
  width: 100% !important;
  min-width: 0 !important;
  height: 205px !important;
  min-height: 205px !important;
  max-height: 205px !important;
  border-radius: 19px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(5,199,255,.07), transparent 38%),
    #ffffff !important;
  border: 1px solid #dbeafe !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body.otom-care-category-page .s-product-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 10px !important;
  border-radius: 19px !important;
  background: transparent !important;
}

/* محتوى المنتج */
body.otom-care-category-page .s-product-card-content {
  width: 100% !important;
  padding: 2px 2px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: center !important;
}

/* عنوان المنتج */
body.otom-care-category-page .s-product-card-content-title,
body.otom-care-category-page .s-product-card-content-title a,
body.otom-care-category-page .s-product-card-content h3,
body.otom-care-category-page .s-product-card-content h3 a {
  width: 100% !important;
  color: var(--otom-ink) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  text-decoration: none !important;
  margin: 2px 0 7px !important;
  letter-spacing: -0.2px !important;
}

/* وصف مختصر إن وجد */
body.otom-care-category-page .s-product-card-content p,
body.otom-care-category-page .s-product-card-content-description,
body.otom-care-category-page .s-product-card-content-subtitle {
  width: 100% !important;
  color: #64748b !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.65 !important;
  text-align: center !important;
  margin: 0 0 8px !important;
}

/* صندوق سعر مشابه لروح الحجز */
body.otom-care-category-page .s-product-card-price,
body.otom-care-category-page .s-product-card-content .s-price {
  width: fit-content !important;
  min-width: 118px !important;
  max-width: 100% !important;
  min-height: 40px !important;
  margin: 6px auto 10px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--otom-blue) !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  background: #ffffff !important;
  border: 1px solid #dbeafe !important;
  box-shadow: 0 8px 18px rgba(6, 58, 143, 0.07) !important;
}

body.otom-care-category-page .s-product-card-price *,
body.otom-care-category-page .s-product-card-content .s-price * {
  color: var(--otom-blue) !important;
  font-weight: 900 !important;
}

/* زر المنتج مثل زر الحجز */
body.otom-care-category-page .s-product-card-entry button,
body.otom-care-category-page .s-product-card-entry .s-button-element,
body.otom-care-category-page .s-product-card-content-footer button,
body.otom-care-category-page .s-product-card-content-footer .s-button-element {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, var(--otom-blue) 0%, var(--otom-blue-dark) 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 24px rgba(0, 87, 217, 0.23) !important;
}

/* إخفاء عناصر مشتتة */
body.otom-care-category-page .s-product-card-entry [class*="wishlist"],
body.otom-care-category-page .s-product-card-entry [class*="favorite"],
body.otom-care-category-page .s-product-card-entry [class*="heart"],
body.otom-care-category-page .s-product-card-entry [class*="rating"] {
  display: none !important;
}

/* زر حجز خدمة الغسيل في النهاية بنفس الهوية */
body.otom-care-category-page .otom-care-final-booking {
  width: calc(100% - 22px) !important;
  max-width: 520px !important;
  min-height: 54px !important;
  margin: 18px auto 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 19px !important;
  background: linear-gradient(135deg, var(--otom-cyan) 0%, var(--otom-blue) 48%, var(--otom-blue-dark) 100%) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 30px rgba(0, 87, 217, 0.23) !important;
}

/* تحسين على الجوال */
@media (max-width: 430px) {
  body.otom-care-category-page .otom-care-catalog-hero {
    width: calc(100% - 18px) !important;
    padding: 16px 12px 14px !important;
    border-radius: 24px !important;
  }

  body.otom-care-category-page .otom-care-catalog-hero h1 {
    font-size: 21px !important;
  }

  body.otom-care-category-page .otom-care-catalog-hero p {
    font-size: 13px !important;
  }

  body.otom-care-category-page .s-product-card-entry {
    margin: 12px 10px 17px !important;
    padding: 10px !important;
    border-radius: 23px !important;
  }

  body.otom-care-category-page .s-product-card-image {
    height: 195px !important;
    min-height: 195px !important;
    max-height: 195px !important;
  }

  body.otom-care-category-page .s-product-card-content-title,
  body.otom-care-category-page .s-product-card-content-title a,
  body.otom-care-category-page .s-product-card-content h3,
  body.otom-care-category-page .s-product-card-content h3 a {
    font-size: 17.5px !important;
  }

  body.otom-care-category-page .s-product-card-price,
  body.otom-care-category-page .s-product-card-content .s-price {
    font-size: 20px !important;
    min-height: 38px !important;
  }
}




/* =========================================================
   OTOM Product Cards Refinement
   ضبط حجم الصور والوصف داخل صفحة منتجات العناية
========================================================= */

/* كرت المنتج: مساحات متوازنة */
body.otom-care-category-page .s-product-card-entry {
  padding: 11px !important;
  gap: 9px !important;
  border-radius: 23px !important;
}

/* حجم صورة المنتج متناسق وغير مبالغ */
body.otom-care-category-page .s-product-card-image {
  width: 100% !important;
  height: 168px !important;
  min-height: 168px !important;
  max-height: 168px !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(5,199,255,.055), transparent 40%),
    #ffffff !important;
  border: 1px solid #e2efff !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* الصورة لا تكبر زيادة ولا تنقص بشكل مزعج */
body.otom-care-category-page .s-product-card-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 92% !important;
  max-height: 92% !important;
  object-fit: contain !important;
  padding: 6px !important;
  margin: auto !important;
  display: block !important;
  border-radius: 14px !important;
  background: transparent !important;
}

/* محتوى الكرت */
body.otom-care-category-page .s-product-card-content {
  padding: 2px 2px 0 !important;
  gap: 0 !important;
}

/* عنوان المنتج متناسق وواضح */
body.otom-care-category-page .s-product-card-content-title,
body.otom-care-category-page .s-product-card-content-title a,
body.otom-care-category-page .s-product-card-content h3,
body.otom-care-category-page .s-product-card-content h3 a {
  font-size: 16.5px !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
  color: var(--otom-ink) !important;
  margin: 2px 0 6px !important;
  text-align: center !important;
  letter-spacing: -0.1px !important;
}

/* إظهار الوصف بوضوح */
body.otom-care-category-page .s-product-card-content p,
body.otom-care-category-page .s-product-card-content-description,
body.otom-care-category-page .s-product-card-content-subtitle,
body.otom-care-category-page .s-product-card-content [class*="description"],
body.otom-care-category-page .s-product-card-content [class*="subtitle"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 auto 8px !important;
  max-width: 96% !important;
  overflow: visible !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
}

/* في حال سلة تخفي الوصف داخل عنصر عام */
body.otom-care-category-page .s-product-card-entry .hidden,
body.otom-care-category-page .s-product-card-entry [hidden] {
  display: revert !important;
}

/* لكن لا نظهر عناصر غير مرغوبة */
body.otom-care-category-page .s-product-card-entry [class*="wishlist"],
body.otom-care-category-page .s-product-card-entry [class*="favorite"],
body.otom-care-category-page .s-product-card-entry [class*="heart"],
body.otom-care-category-page .s-product-card-entry [class*="rating"] {
  display: none !important;
}

/* السعر بحجم مناسب لا يغطي الوصف */
body.otom-care-category-page .s-product-card-price,
body.otom-care-category-page .s-product-card-content .s-price {
  min-width: 104px !important;
  min-height: 36px !important;
  padding: 7px 14px !important;
  margin: 4px auto 9px !important;
  font-size: 19px !important;
  border-radius: 999px !important;
}

/* الزر */
body.otom-care-category-page .s-product-card-entry button,
body.otom-care-category-page .s-product-card-entry .s-button-element,
body.otom-care-category-page .s-product-card-content-footer button,
body.otom-care-category-page .s-product-card-content-footer .s-button-element {
  min-height: 47px !important;
  border-radius: 16px !important;
  font-size: 14.5px !important;
}

/* للجوال الصغير */
@media (max-width: 430px) {
  body.otom-care-category-page .s-product-card-image {
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;
  }

  body.otom-care-category-page .s-product-card-content-title,
  body.otom-care-category-page .s-product-card-content-title a,
  body.otom-care-category-page .s-product-card-content h3,
  body.otom-care-category-page .s-product-card-content h3 a {
    font-size: 16px !important;
  }

  body.otom-care-category-page .s-product-card-content p,
  body.otom-care-category-page .s-product-card-content-description,
  body.otom-care-category-page .s-product-card-content-subtitle,
  body.otom-care-category-page .s-product-card-content [class*="description"],
  body.otom-care-category-page .s-product-card-content [class*="subtitle"] {
    font-size: 12.8px !important;
    line-height: 1.65 !important;
  }
}

/* للشاشات المتوسطة والكبيرة */
@media (min-width: 769px) {
  body.otom-care-category-page .s-product-card-image {
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
  }
}




/* =========================================================
   OTOM Booking Services Tables Restore
   استرجاع جداول تفاصيل خدمات الغسيل
   مهم: يعمل على صفحة الحجز فقط ولا يؤثر على صفحة المنتجات
========================================================= */

body.index .s-product-card-entry .otom-features {
  width: 100% !important;
  margin: 8px 0 10px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(0, 87, 217, 0.14) !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
}

body.index .s-product-card-entry .otom-feature-row {
  display: grid !important;
  grid-template-columns: 62px 1fr !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid #e5f0ff !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

body.index .s-product-card-entry .otom-feature-row:last-child {
  border-bottom: none !important;
}

body.index .s-product-card-entry .otom-feature-label {
  color: var(--otom-blue-dark) !important;
  font-weight: 900 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

body.index .s-product-card-entry .otom-feature-value {
  color: #2d3748 !important;
  font-weight: 800 !important;
  text-align: right !important;
}

/* السعر الثابت للخدمات فقط */
body.index .s-product-card-entry .otom-fixed-price-box {
  width: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 8px auto 12px !important;
  direction: rtl !important;
}

body.index .s-product-card-entry .otom-fixed-price-box strong {
  color: var(--otom-blue) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.index .s-product-card-entry .otom-fixed-price-box span {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  margin-bottom: 2px !important;
}

/* منع ظهور جداول الحجز داخل صفحة المنتجات */
body.otom-care-category-page .otom-features,
body.otom-care-category-page .otom-fixed-price-box {
  display: none !important;
}




/* =========================================================
   OTOM Care Products Image Fit Only
   إظهار صور منتجات العناية كاملة بدون قص
   لا يؤثر إطلاقاً على خدمات الحجز
========================================================= */

/* يعمل فقط داخل صفحة منتجات العناية */
body.otom-care-category-page .s-product-card-entry .s-product-card-image {
  width: 100% !important;
  height: 210px !important;
  min-height: 210px !important;
  max-height: 210px !important;
  padding: 10px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #e2efff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* الصورة كاملة داخل الإطار بدون اجتزاء */
body.otom-care-category-page .s-product-card-entry .s-product-card-image img,
body.otom-care-category-page .s-product-card-entry img.s-product-card-image,
body.otom-care-category-page .s-product-card-entry picture img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: auto !important;
  display: block !important;
  border-radius: 14px !important;
  background: transparent !important;
}

/* منع أي transform أو cover من قالب سلة داخل المنتجات فقط */
body.otom-care-category-page .s-product-card-entry .s-product-card-image *,
body.otom-care-category-page .s-product-card-entry picture,
body.otom-care-category-page .s-product-card-entry figure {
  object-fit: contain !important;
  object-position: center center !important;
}

/* تحسين مساحة الكرت بعد تكبير مساحة الصورة */
body.otom-care-category-page .s-product-card-entry {
  gap: 10px !important;
}

/* الجوال */
@media (max-width: 430px) {
  body.otom-care-category-page .s-product-card-entry .s-product-card-image {
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
    padding: 9px !important;
  }
}

/* الجوال الصغير جداً */
@media (max-width: 380px) {
  body.otom-care-category-page .s-product-card-entry .s-product-card-image {
    height: 195px !important;
    min-height: 195px !important;
    max-height: 195px !important;
    padding: 8px !important;
  }
}

/* الشاشات الأكبر */
@media (min-width: 769px) {
  body.otom-care-category-page .s-product-card-entry .s-product-card-image {
    height: 225px !important;
    min-height: 225px !important;
    max-height: 225px !important;
  }
}




/* =========================================================
   OTOM Manual Care Products Catalog - Final
   يعرض كل منتجات العناية السبعة من الروابط المخصصة
   معزول عن خدمات الحجز بالكامل
========================================================= */

body.otom-care-category-page .otom-care-products-heading,
body.otom-care-category-page .otom-care-final-booking {
  display: none !important;
}

body.otom-care-category-page .otom-manual-care-catalog {
  width: calc(100% - 20px) !important;
  max-width: 760px !important;
  margin: 10px auto 22px !important;
  padding: 0 !important;
  direction: rtl !important;
  font-family: 'Tajawal', Arial, sans-serif !important;
  box-sizing: border-box !important;
}

body.otom-care-category-page .otom-manual-care-catalog * {
  box-sizing: border-box !important;
  font-family: 'Tajawal', Arial, sans-serif !important;
}

body.otom-care-category-page .otom-manual-care-hero {
  margin: 10px auto 13px !important;
  padding: 18px 14px 15px !important;
  border-radius: 26px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(5,199,255,.16), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(0,87,217,.08), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%) !important;
  border: 1px solid rgba(0,87,217,.15) !important;
  box-shadow: 0 14px 34px rgba(6,58,143,.09) !important;
}

body.otom-care-category-page .otom-manual-care-hero::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 34px !important;
  left: 34px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, var(--otom-cyan), var(--otom-blue), var(--otom-blue-dark), transparent) !important;
}

body.otom-care-category-page .otom-manual-care-badge {
  display: inline-flex !important;
  min-height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 13px !important;
  margin-bottom: 8px !important;
  border-radius: 999px !important;
  color: var(--otom-blue-dark) !important;
  background: rgba(0,87,217,.07) !important;
  border: 1px solid rgba(0,87,217,.12) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.otom-care-category-page .otom-manual-care-hero h1 {
  margin: 0 0 7px !important;
  color: var(--otom-ink) !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

body.otom-care-category-page .otom-manual-care-hero p {
  max-width: 560px !important;
  margin: 0 auto !important;
  color: #475569 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
}

body.otom-care-category-page .otom-manual-care-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 6px 0 10px !important;
}

body.otom-care-category-page .otom-manual-care-head h2 {
  margin: 0 !important;
  color: var(--otom-ink) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

body.otom-care-category-page .otom-manual-care-head span {
  display: inline-flex !important;
  min-height: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: #eef7ff !important;
  color: var(--otom-blue-dark) !important;
  border: 1px solid #dbeafe !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.otom-care-category-page .otom-manual-products-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  width: 100% !important;
}

body.otom-care-category-page .otom-manual-product-card {
  direction: rtl !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 11px !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(5,199,255,.14), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(0,87,217,.07), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%) !important;
  border: 2px solid #0057d9 !important;
  box-shadow: 0 12px 30px rgba(0,87,217,.12) !important;
  text-decoration: none !important;
  color: inherit !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.otom-care-category-page .otom-manual-product-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 22px !important;
  left: 22px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, var(--otom-cyan), var(--otom-blue), transparent) !important;
}

body.otom-care-category-page .otom-manual-product-img {
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #e2efff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
}

body.otom-care-category-page .otom-manual-product-img img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: auto !important;
}

body.otom-care-category-page .otom-manual-product-body {
  text-align: center !important;
  padding: 0 2px !important;
}

body.otom-care-category-page .otom-manual-product-tag {
  display: inline-flex !important;
  min-height: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 11px !important;
  margin-bottom: 7px !important;
  border-radius: 999px !important;
  color: var(--otom-blue-dark) !important;
  background: #ffffff !important;
  border: 1px solid #dbeafe !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
}

body.otom-care-category-page .otom-manual-product-title {
  margin: 0 0 5px !important;
  color: var(--otom-ink) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

body.otom-care-category-page .otom-manual-product-subtitle {
  margin: 0 0 7px !important;
  color: var(--otom-blue-dark) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
}

body.otom-care-category-page .otom-manual-product-desc {
  margin: 0 auto 10px !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.75 !important;
  max-width: 96% !important;
}

body.otom-care-category-page .otom-manual-product-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

body.otom-care-category-page .otom-manual-product-price {
  min-width: 86px !important;
  min-height: 42px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid #dbeafe !important;
  color: var(--otom-blue) !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 18px rgba(6,58,143,.07) !important;
}

body.otom-care-category-page .otom-manual-product-price small {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 900 !important;
  margin-right: 4px !important;
}

body.otom-care-category-page .otom-manual-product-btn {
  flex: 1 !important;
  min-height: 46px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, var(--otom-blue), var(--otom-blue-dark)) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 24px rgba(0,87,217,.20) !important;
}

/* نخفي مكوّن سلة الأصلي داخل صفحة العناية فقط بعد بناء الكتالوج اليدوي */
body.otom-care-category-page.otom-manual-products-ready salla-products-list,
body.otom-care-category-page.otom-manual-products-ready .s-products-list,
body.otom-care-category-page.otom-manual-products-ready .products-list,
body.otom-care-category-page.otom-manual-products-ready .s-product-card-entry,
body.otom-care-category-page.otom-manual-products-ready salla-product-card {
  display: none !important;
}

/* لا تؤثر على خدمات الحجز */
body.index .otom-manual-care-catalog {
  display: none !important;
}

@media (min-width: 700px) {
  body.otom-care-category-page .otom-manual-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 430px) {
  body.otom-care-category-page .otom-manual-product-img {
    height: 210px !important;
    min-height: 210px !important;
  }

  body.otom-care-category-page .otom-manual-product-title {
    font-size: 17px !important;
  }

  body.otom-care-category-page .otom-manual-product-desc {
    font-size: 12.8px !important;
  }
}

@media (max-width: 380px) {
  body.otom-care-category-page .otom-manual-product-img {
    height: 200px !important;
    min-height: 200px !important;
  }

  body.otom-care-category-page .otom-manual-product-footer {
    flex-direction: column !important;
  }

  body.otom-care-category-page .otom-manual-product-price,
  body.otom-care-category-page .otom-manual-product-btn {
    width: 100% !important;
  }
}