/* =========================================================
   قالب المطعم — restaurant1
   كل الأنماط محصورة داخل .restaurant-one فلا تؤثر على بقية القوالب.
   =========================================================

   ┌───────────────────────────────────────────────────────┐
   │  كيف تغيّر هوية القالب؟                                │
   │                                                       │
   │  الطريقة (أ) — لكل المطاعم دفعة واحدة:                 │
   │     انزل إلى قسم «اختيار النمط» أسفل مباشرة،           │
   │     وانقل علامة التعليق لتفعيل السطر الذي تريده.       │
   │     سطر واحد فقط = كل الألوان تتغير تلقائياً.          │
   │                                                       │
   │  الطريقة (ب) — لكل بطاقة نمط مختلف:                    │
   │     أضف صنفاً واحداً في حقل «CSS مخصص» أو في الـ blade  │
   │     مثال:  rest-italian                               │
   │     الأصناف الجاهزة في نهاية الملف.                    │
   └───────────────────────────────────────────────────────┘

   الأنماط المتاحة: eastern (الافتراضي) · italian · cafe ·
   seafood · healthy · dessert · fastfood · luxury
   ========================================================= */


/* =========================================================
   ★ اختيار النمط — فعّل سطراً واحداً فقط
   احذف الشرطتين المائلتين من أمام النمط المطلوب،
   وأعد التعليق على النمط السابق.
   ========================================================= */

.restaurant-one {
  /* شرقي / أردني — مفعّل */
  --rest-primary: #b5651d;  --rest-dark: #2b2118;  --rest-soft: #fdf6ee;

  /* إيطالي / بيتزا */
  /* --rest-primary: #7a1f1f;  --rest-dark: #241412;  --rest-soft: #fbf1ea; */

  /* مقهى / كوفي شوب */
  /* --rest-primary: #4e342e;  --rest-dark: #241a16;  --rest-soft: #f7f1ea; */

  /* مأكولات بحرية */
  /* --rest-primary: #1f5f7a;  --rest-dark: #12242b;  --rest-soft: #eef5f8; */

  /* صحي / نباتي */
  /* --rest-primary: #4a7c2f;  --rest-dark: #1e2b14;  --rest-soft: #f2f7ec; */

  /* حلويات / آيس كريم */
  /* --rest-primary: #c2185b;  --rest-dark: #3a1022;  --rest-soft: #fdf0f4; */

  /* وجبات سريعة */
  /* --rest-primary: #d84315;  --rest-dark: #331409;  --rest-soft: #fff3ec; */

  /* فاخر / ستيك هاوس */
  /* --rest-primary: #8d6e2f;  --rest-dark: #1c1a14;  --rest-soft: #f8f4ea; */
}


/* =========================================================
   القياسات — تُشتق تلقائياً ونادراً ما تحتاج تعديلها
   ========================================================= */

.restaurant-one {
  /* لون الإطار حول صورة البروفايل */
  --rest-frame: #ffffff;

  /* عرض وارتفاع صورة الشعار */
  --rest-avatar-w: 190px;
  --rest-avatar-h: 140px;
  /* سماكة الإطار */
  --rest-frame-width: 5px;
  /* الهامش بين الإطار والصورة */
  --rest-frame-gap: 6px;
  /* استدارة الحواف */
  --rest-avatar-radius: 26px;
  /* الفراغ بين الهيرو واسم المطعم */
  --rest-hero-gap: 32px;

  /* شفافية أيقونات الخلفية */
  --rest-pattern-opacity: 0.05;
  /* حجم بلاطة النقش */
  --rest-pattern-size: 260px;
}

/* =========================================================
   ١) خلفية بأيقونات مأكولات شفافة
   النقش مضمّن كـ SVG داخل الملف — لا يحتاج أي صور خارجية.
   ========================================================= */

.restaurant-one {
  background-color: var(--rest-soft);
  position: relative;
}

.restaurant-one::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--rest-pattern-opacity);
  background-repeat: repeat;
  background-size: var(--rest-pattern-size) var(--rest-pattern-size);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='none' stroke='%232b2118' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M30 24v34M30 24c-6 0-9 5-9 11s3 11 9 11M30 24c6 0 9 5 9 11s-3 11-9 11'/><path d='M24 58h12v14a6 6 0 0 1-12 0z'/><path d='M96 30c10 0 18 8 18 18H78c0-10 8-18 18-18zM74 54h44'/><circle cx='96' cy='24' r='3'/><path d='M170 22v26M164 22v14M176 22v14M170 48v18'/><path d='M206 22c8 4 12 12 12 22 0 8-4 12-8 12v10'/><path d='M40 128a22 22 0 0 1 44 0z'/><path d='M34 134h56M40 146h44'/><circle cx='130' cy='134' r='22'/><path d='M130 112v44M108 134h44'/><path d='M186 116l16 28h-32z'/><path d='M186 144v18'/><path d='M28 210c0-12 10-22 22-22s22 10 22 22z'/><path d='M22 210h56'/><path d='M112 190h36l-6 40h-24z'/><path d='M116 202h28'/><path d='M188 188c12 0 20 9 20 20s-8 20-20 20-20-9-20-20 8-20 20-20z'/><path d='M180 200l16 16M196 200l-16 16'/></g></svg>");
}

/* إبقاء المحتوى فوق النقش */
.restaurant-one > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   ٢) الشعار: مستطيل بحواف مدورة، نصفه داخل الهيرو ونصفه خارجه
   ========================================================= */

.restaurant-one .vcard-one__profile {
  /* ارتفاع كافٍ للنصف السفلي البارز من الشعار */
  min-height: calc(var(--rest-avatar-h) / 2);
}

.restaurant-one .vcard-one__profile .avatar {
  width: var(--rest-avatar-w) !important;
  height: var(--rest-avatar-h) !important;
  /* top:0 + translate-middle الموروثة تضع مركز الشعار
     تماماً على حد الهيرو، أي نصفه فوق ونصفه تحت */
}

.restaurant-one .vcard-one__profile .avatar img,
.restaurant-one .avatar img[alt='profile-img'] {
  width: var(--rest-avatar-w) !important;
  height: var(--rest-avatar-h) !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: var(--rest-avatar-radius) !important;
  border: var(--rest-frame-width) solid var(--rest-frame) !important;
  padding: var(--rest-frame-gap);
  background: var(--rest-frame);
  box-shadow:
    0 0 0 2px var(--rest-primary),
    0 10px 26px rgba(43, 33, 24, 0.22);
}

/* =========================================================
   ٣) فراغ بين الهيرو واسم المطعم
   ========================================================= */

.restaurant-one .vcard-one__profile-details {
  padding-top: calc(var(--rest-hero-gap) + var(--rest-avatar-h) / 2) !important;
}

.restaurant-one .profile-name {
  margin-top: 0;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--rest-dark);
  letter-spacing: 0.4px;
}

.restaurant-one.rtl .profile-name,
.restaurant-one.rtl .vcard-one-heading {
  font-family: inherit;
}

/* =========================================================
   ٤) عناوين الأقسام بنمط قائمة طعام
   ========================================================= */

.restaurant-one .vcard-one-heading {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--rest-dark);
  letter-spacing: 0.5px;
}

.restaurant-one .vcard-one-heading::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 10px auto 0;
  background: var(--rest-primary);
}

/* =========================================================
   ٥) بطاقات الأصناف والأطباق
   ========================================================= */

.restaurant-one .product-card,
.restaurant-one .service-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.restaurant-one .product-card:hover,
.restaurant-one .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(43, 33, 24, 0.14);
}

.restaurant-one .product-profile img {
  object-fit: cover;
  height: 208px;
}

.restaurant-one .service-new-image {
  object-fit: cover;
  height: 180px;
}

/* السعر */
.restaurant-one .product-details span {
  font-weight: 700;
  color: var(--rest-primary) !important;
}

/* زر عرض المزيد */
.restaurant-one .view-more {
  color: var(--rest-primary);
  border-bottom: 1px solid var(--rest-primary);
  text-decoration: none;
}

/* =========================================================
   ٦) شاشات صغيرة
   ========================================================= */

@media (max-width: 575.98px) {
  .restaurant-one {
    --rest-avatar-w: 160px;
    --rest-avatar-h: 120px;
    --rest-hero-gap: 26px;
    --rest-pattern-size: 200px;
  }
}

/* =========================================================
   ٧) أصناف الأنماط الجاهزة (اختياري)
   استخدمها إذا أردت لكل بطاقة نمطاً مختلفاً دون تعديل الملف.
   أضف الصنف على وسم <body> أو على العنصر .restaurant-one
   مثال:  class="vcard-one restaurant-one rest-italian ..."
   ========================================================= */

.rest-eastern {
  --rest-primary: #b5651d;
  --rest-dark: #2b2118;
  --rest-soft: #fdf6ee;
}

.rest-italian {
  --rest-primary: #7a1f1f;
  --rest-dark: #241412;
  --rest-soft: #fbf1ea;
}

.rest-cafe {
  --rest-primary: #4e342e;
  --rest-dark: #241a16;
  --rest-soft: #f7f1ea;
}

.rest-seafood {
  --rest-primary: #1f5f7a;
  --rest-dark: #12242b;
  --rest-soft: #eef5f8;
}

.rest-healthy {
  --rest-primary: #4a7c2f;
  --rest-dark: #1e2b14;
  --rest-soft: #f2f7ec;
}

.rest-dessert {
  --rest-primary: #c2185b;
  --rest-dark: #3a1022;
  --rest-soft: #fdf0f4;
}

.rest-fastfood {
  --rest-primary: #d84315;
  --rest-dark: #331409;
  --rest-soft: #fff3ec;
}

.rest-luxury {
  --rest-primary: #8d6e2f;
  --rest-dark: #1c1a14;
  --rest-soft: #f8f4ea;
}

/* بلا نقش خلفي */
.rest-no-pattern {
  --rest-pattern-opacity: 0;
}

/* صورة بروفايل دائرية */
.rest-round-avatar {
  --rest-avatar-radius: 50%;
}

/* =========================================================
   ٨) الأزرار — تجاوز اللون الأزرق الموروث من vcard1.css
   يشمل: زر حفظ جهة الاتصال، الشريط السفلي اللاصق،
   زر المشاركة، الحجز، الاستفسار، وأزرار البوتستراب.
   ========================================================= */

.restaurant-one .vcard1-sticky-btn,
.restaurant-one .add-contact-btn,
.restaurant-one .bars-btn,
.restaurant-one .vcard1-btn-group,
.restaurant-one .contact-btn,
.restaurant-one .appoint-btn,
.restaurant-one .appointmentAdd,
.restaurant-one .pwa-install-button,
.restaurant-one .sub-btn,
.restaurant-one .btn-primary,
.restaurant-one .btn-dark,
.restaurant-one .copy-vcard-clipboard {
  background-color: var(--rest-primary) !important;
  border-color: var(--rest-primary) !important;
  color: #ffffff !important;
}

.restaurant-one .vcard1-sticky-btn:hover,
.restaurant-one .add-contact-btn:hover,
.restaurant-one .bars-btn:hover,
.restaurant-one .contact-btn:hover,
.restaurant-one .appoint-btn:hover,
.restaurant-one .pwa-install-button:hover,
.restaurant-one .btn-primary:hover,
.restaurant-one .btn-dark:hover {
  filter: brightness(0.9);
}

/* الأيقونات داخل الأزرار */
.restaurant-one .vcard1-sticky-btn i,
.restaurant-one .vcard1-sticky-btn svg,
.restaurant-one .add-contact-btn i,
.restaurant-one .contact-btn i {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* الروابط والأيقونات الاجتماعية والعناصر النشطة */
.restaurant-one a:not(.btn):not(.vcard1-sticky-btn):hover,
.restaurant-one .link-text:hover {
  color: var(--rest-primary) !important;
}

/* شريط التنقل السفلي / القائمة الجانبية */
.restaurant-one .vcard-bars-btn,
.restaurant-one .share-wp-btn-div,
.restaurant-one .sub-btn-div {
  background-color: var(--rest-primary) !important;
}

/* الشريط اللاصق والخلفيات الزرقاء العامة */
.restaurant-one .sticky-bar,
.restaurant-one .vcard-one__sticky,
.restaurant-one .bg-primary {
  background-color: var(--rest-primary) !important;
}

/* حدود ونصوص أساسية */
.restaurant-one .text-primary {
  color: var(--rest-primary) !important;
}

.restaurant-one .border-primary {
  border-color: var(--rest-primary) !important;
}

/* حقول الإدخال عند التركيز */
.restaurant-one .form-control:focus,
.restaurant-one .form-select:focus {
  border-color: var(--rest-primary);
  box-shadow: 0 0 0 0.15rem rgba(181, 101, 29, 0.2);
}

/* مؤشرات السلايدر */
.restaurant-one .slick-dots li.slick-active button:before {
  color: var(--rest-primary) !important;
}

/* =========================================================
   ٩) زر اللغة والقائمة المنسدلة
   ========================================================= */

.restaurant-one .lang-head,
.restaurant-one .lang-head:hover,
.restaurant-one .language a,
.restaurant-one .lang-list > a,
.restaurant-one .dropdown-toggle {
  color: var(--rest-primary) !important;
}

.restaurant-one .lang-hover-list li.active > a,
.restaurant-one .lang-hover-list a:hover {
  background-color: var(--rest-primary) !important;
  color: #ffffff !important;
}

/* =========================================================
   ١٠) تلوين أيقونات الصور (PNG الزرقاء)
   الأيقونات صور جاهزة بلون أزرق، لذا نُخفي الصورة الأصلية
   ونعيد رسمها كقناع mask ملوّن بلون النمط.
   يعمل على كل المتصفحات الحديثة.
   ========================================================= */

.restaurant-one .event-icon img,
.restaurant-one .bars-btn img,
.restaurant-one .vcard1-share img,
.restaurant-one .vcard1-sticky-btn img,
.restaurant-one .contact-icon img,
.restaurant-one img[src*='/vcard1/'] {
  /* نُخفي بكسلات الصورة ونستخدم شكلها فقط */
  background-color: var(--rest-primary);
  -webkit-mask-image: var(--rest-icon-src);
  mask-image: var(--rest-icon-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ربط كل أيقونة بمصدرها */
.restaurant-one img[src$='vcard1-phone.png'] {
  --rest-icon-src: url('/assets/img/vcard1/vcard1-phone.png');
}

.restaurant-one img[src$='vcard1-email.png'] {
  --rest-icon-src: url('/assets/img/vcard1/vcard1-email.png');
}

.restaurant-one img[src$='vcard1-location.png'] {
  --rest-icon-src: url('/assets/img/vcard1/vcard1-location.png');
}

.restaurant-one img[src$='vcard1-birthday.png'] {
  --rest-icon-src: url('/assets/img/vcard1/vcard1-birthday.png');
}

.restaurant-one img[src$='vcard1-alter-phone(4).png'] {
  --rest-icon-src: url('/assets/img/vcard1/vcard1-alter-phone%284%29.png');
}

.restaurant-one img[src$='Vectors.png'] {
  --rest-icon-src: url('/assets/img/vcard1/Vectors.png');
}

/* أيقونة الشريط السفلي — تبقى بيضاء فوق خلفية ملوّنة */
.restaurant-one .bars-btn img,
.restaurant-one .vcard1-share img {
  background-color: #ffffff;
  --rest-icon-src: url('/assets/img/vcard1/sticky.png');
}

/* خلفية دائرة الأيقونة في بطاقات التواصل */
.restaurant-one .event-card {
  background: #ffffff;
  border-radius: 14px;
}

.restaurant-one .event-name {
  color: var(--rest-dark) !important;
}

.restaurant-one .event-name:hover {
  color: var(--rest-primary) !important;
}

/* =========================================================
   ٩) العناصر المتبقية ذات اللون الأزرق
   ========================================================= */

/* زر اللغة أعلى الغلاف */
.restaurant-one .lang-head,
.restaurant-one .lang-head:hover,
.restaurant-one .language a,
.restaurant-one .lang-list > a {
  color: var(--rest-primary) !important;
}

.restaurant-one .lang-hover-list li.active > a,
.restaurant-one .lang-hover-list a:hover {
  background-color: var(--rest-soft) !important;
  color: var(--rest-dark) !important;
}

/* الشريط السفلي اللاصق وأزراره */
.restaurant-one .bars-btn,
.restaurant-one .vcard1-share,
.restaurant-one a.vcard1-sticky-btn {
  background-color: var(--rest-primary) !important;
  border-color: var(--rest-primary) !important;
}

/* أيقونة القائمة داخل الزر اللاصق (صورة PNG بيضاء) */
.restaurant-one .bars-btn img,
.restaurant-one .vcard1-share img {
  filter: brightness(0) invert(1);
}

/* تسميات الحقول */
.restaurant-one .form-label,
.restaurant-one label {
  color: var(--rest-dark) !important;
}

/* أسهم السلايدر */
.restaurant-one .slide-arrow,
.restaurant-one .slick-arrow,
.restaurant-one .prev-arrow,
.restaurant-one .next-arrow {
  background-color: var(--rest-primary) !important;
  border-color: var(--rest-primary) !important;
  color: #ffffff !important;
}

.restaurant-one .slick-arrow::before,
.restaurant-one .slide-arrow::before {
  color: #ffffff !important;
}

.restaurant-one .slick-arrow img,
.restaurant-one .slide-arrow img {
  filter: brightness(0) invert(1);
}

/* =========================================================
   ١٠) أيقونات بطاقات التواصل (هاتف، موقع، بريد، تاريخ...)
   الأيقونات صور PNG، لذا نستخدم mask لتلوينها بلون القالب.
   ========================================================= */

.restaurant-one .event-card {
  background: #ffffff !important;
  border-radius: 14px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.restaurant-one .event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(43, 33, 24, 0.12);
}

/* دائرة خلف الأيقونة */
.restaurant-one .event-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--rest-soft);
  border: 1px solid var(--rest-primary);
  align-items: center;
}

/* تلوين صورة الأيقونة بلون القالب عبر القناع */
.restaurant-one .event-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  /* نُخفي البكسلات الأصلية ونرسم اللون عبر القناع */
  background-color: var(--rest-primary);
  -webkit-mask-image: var(--icon-src);
  mask-image: var(--icon-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ربط كل أيقونة بمصدرها */
.restaurant-one .event-icon img[src*='vcard1-phone'] {
  --icon-src: url('/assets/img/vcard1/vcard1-phone.png');
}

.restaurant-one .event-icon img[src*='vcard1-location'] {
  --icon-src: url('/assets/img/vcard1/vcard1-location.png');
}

.restaurant-one .event-icon img[src*='vcard1-email'] {
  --icon-src: url('/assets/img/vcard1/vcard1-email.png');
}

.restaurant-one .event-icon img[src*='vcard1-birthday'] {
  --icon-src: url('/assets/img/vcard1/vcard1-birthday.png');
}

.restaurant-one .event-icon img[src*='alter-phone'] {
  --icon-src: url('/assets/img/vcard1/vcard1-alter-phone(4).png');
}

/* نص البطاقة */
.restaurant-one .event-name {
  color: var(--rest-dark) !important;
  font-weight: 500;
}

.restaurant-one a.event-name:hover {
  color: var(--rest-primary) !important;
}

/* =========================================================
   ١١) أيقونات التواصل الاجتماعي — الأصناف الفعلية: .social-icons > a > i.icon
   ========================================================= */

.restaurant-one .social-icons {
  gap: 10px;
}

.restaurant-one .social-icons > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #ffffff;
  border: 1.5px solid var(--rest-primary);
  box-shadow: 0 3px 10px rgba(43, 33, 24, 0.12);
  text-decoration: none;
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.restaurant-one .social-icons > a:hover {
  transform: translateY(-5px) rotate(-5deg);
  background: var(--rest-primary);
  box-shadow: 0 8px 18px rgba(43, 33, 24, 0.25);
}

/* الأيقونة نفسها — نلغي fa-2x ونثبّت الحجم واللون */
.restaurant-one .social-icons > a > i,
.restaurant-one .social-icons > a > i.icon {
  font-size: 22px !important;
  line-height: 1 !important;
  color: var(--rest-primary) !important;
  transition: color 0.22s ease;
}

.restaurant-one .social-icons > a:hover > i {
  color: #ffffff !important;
}

/* صور SVG إن وُجدت بدل الأيقونات */
.restaurant-one .social-icons > a > img,
.restaurant-one .social-icons > a > svg {
  width: 24px !important;
  height: 24px !important;
}

.restaurant-one .social-icons > a:hover > img,
.restaurant-one .social-icons > a:hover > svg {
  filter: brightness(0) invert(1);
}


/* =========================================================
   ١٢) تجاوزات نهائية عالية الأولوية
   تأتي في آخر الملف لتتغلب على vcard1.css
   ========================================================= */

/* ---- أ) موضع الشعار: نصفه داخل الهيرو ونصفه خارجه ---- */

body .restaurant-one .vcard-one__profile {
  min-height: calc(var(--rest-avatar-h) / 2) !important;
  overflow: visible !important;
}

body .restaurant-one .vcard-one__profile .avatar.position-absolute {
  top: 0 !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  margin: 0 !important;
  /* المركز يقع تماماً على حد الهيرو */
  transform: translate(-50%, -50%) !important;
}

/* ---- ب) زر اللغة: إزالة الخلفية الزرقاء ---- */

body .restaurant-one .language-btn,
body .restaurant-one .language,
body .restaurant-one .lang-list {
  background: transparent !important;
}

body .restaurant-one .lang-head,
body .restaurant-one a.lang-head,
body .restaurant-one .lang-list > a.dropdown-toggle {
  background: var(--rest-primary) !important;
  background-color: var(--rest-primary) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 6px 14px !important;
  box-shadow: 0 3px 10px rgba(43, 33, 24, 0.25);
}

body .restaurant-one .lang-head::after {
  color: #ffffff !important;
}

/* ---- ج) الزر العائم للمشاركة والقائمة ---- */

body .restaurant-one .vcard-bars-btn a.vcard1-sticky-btn,
body .restaurant-one a.vcard1-sticky-btn.bars-btn,
body .restaurant-one .vcard1-btn-group button.vcard1-share,
body .restaurant-one .vcard1-btn-group a.vcard1-sticky-btn,
body .restaurant-one button.vcard1-sticky-btn,
body .restaurant-one a.add-contact-btn {
  background: var(--rest-primary) !important;
  background-color: var(--rest-primary) !important;
  background-image: none !important;
  border-color: var(--rest-primary) !important;
  color: #ffffff !important;
}

/* الأيقونات داخلها (بما فيها زر الكيو ار الذي لونه مثبّت inline) */
body .restaurant-one .vcard1-sticky-btn i,
body .restaurant-one .vcard1-share i,
body .restaurant-one a.add-contact-btn i,
body .restaurant-one #qr-code-btn i {
  color: #ffffff !important;
}

/* صورة sticky.png داخل الزر العائم */
body .restaurant-one .bars-btn img {
  filter: brightness(0) invert(1) !important;
}

/* =========================================================
   ١٣) بوكس الكيو ار وبوكس استفسارات الزبائن
   ========================================================= */

/* ---- بوكس الكيو ار ---- */

body .restaurant-one .vcard-one__qr-code {
  background: var(--rest-soft) !important;
  border-radius: 18px;
  margin: 0 12px;
}

body .restaurant-one .vcard-one__qr-code .qr-code.card {
  background: #ffffff !important;
  border: 1.5px solid var(--rest-primary) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(43, 33, 24, 0.12) !important;
}

/* صورة البروفايل الصغيرة فوق الكيو ار */
body .restaurant-one .qr-code-profile img {
  border: 3px solid var(--rest-primary) !important;
  padding: 2px;
  background: #ffffff;
}

/* خلفية مربع الكيو ار نفسه */
body .restaurant-one .qr-code-image svg rect {
  fill: #ffffff;
}

/* ---- بوكس استفسارات الزبائن ---- */

body .restaurant-one .vcard-one__contact {
  background: var(--rest-soft) !important;
  border-radius: 18px;
  margin: 12px !important;
  padding-bottom: 24px !important;
}

body .restaurant-one .vcard-one__contact .contact-form {
  background: #ffffff !important;
  border: 1px solid rgba(181, 101, 29, 0.25);
  border-radius: 16px;
  padding: 20px 16px !important;
  box-shadow: 0 6px 18px rgba(43, 33, 24, 0.08);
}

/* حقول النموذج */
body .restaurant-one .vcard-one__contact .form-control,
body .restaurant-one .vcard-one__contact .input-group-text {
  background: var(--rest-soft) !important;
  border-color: rgba(181, 101, 29, 0.3) !important;
  color: var(--rest-dark) !important;
}

body .restaurant-one .vcard-one__contact .form-control:focus {
  background: #ffffff !important;
  border-color: var(--rest-primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(181, 101, 29, 0.18) !important;
}

body .restaurant-one .vcard-one__contact .input-group-text i {
  color: var(--rest-primary) !important;
}

/* صندوق رفع الملف */
body .restaurant-one .wrapper-file-input .input-box {
  background: var(--rest-soft) !important;
  border: 1.5px dashed var(--rest-primary) !important;
  border-radius: 12px !important;
  color: var(--rest-dark) !important;
}

body .restaurant-one .wrapper-file-input .input-box h4,
body .restaurant-one .wrapper-file-input .input-box i {
  color: var(--rest-primary) !important;
}

/* زر الإرسال */
body .restaurant-one button.contact-btn {
  background: var(--rest-primary) !important;
  background-color: var(--rest-primary) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 34px !important;
  color: #ffffff !important;
}

body .restaurant-one button.contact-btn:hover {
  filter: brightness(0.9);
}

/* =========================================================
   ١٤) تصحيحات نهائية — موضع الشعار، الفراغ، الزر العائم
   هذا القسم آخر الملف فله الأولوية القصوى.
   ========================================================= */

/* ---- أ) موضع الشعار بطريقة حتمية ----
   لا نعتمد على translate-middle الموروثة إطلاقاً:
   نرفع الشعار بمقدار نصف ارتفاعه فوق حد الهيرو. */

body .restaurant-one .vcard-one__profile {
  position: relative !important;
  min-height: calc(var(--rest-avatar-h) / 2) !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .restaurant-one .vcard-one__profile > .avatar {
  position: absolute !important;
  top: calc(var(--rest-avatar-h) / -2) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  /* إزاحة أفقية فقط — لا إزاحة رأسية */
  transform: translateX(-50%) !important;
  width: var(--rest-avatar-w) !important;
  height: var(--rest-avatar-h) !important;
  z-index: 5 !important;
}

/* ---- ب) الفراغ تحت الشعار ----
   الحاوية أعلاه تحجز النصف السفلي من الشعار،
   فلا نضيف هنا إلا الفراغ المطلوب فقط. */

body .restaurant-one .vcard-one__profile-details {
  padding-top: var(--rest-hero-gap) !important;
  margin-top: 0 !important;
}

body .restaurant-one .vcard-one__profile-details .profile-name {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ---- ج) الزر العائم: تلوين شامل للحاوية وكل ما بداخلها ---- */

body .restaurant-one .vcard-bars-btn a,
body .restaurant-one .vcard-bars-btn button,
body .restaurant-one .sub-btn-div a,
body .restaurant-one .sub-btn-div button,
body .restaurant-one .sticky-vcard-div a,
body .restaurant-one [class*='vcard1-sticky-btn'],
body .restaurant-one [class*='bars-btn'] {
  background: var(--rest-primary) !important;
  background-color: var(--rest-primary) !important;
  background-image: none !important;
  border-color: var(--rest-primary) !important;
  color: #ffffff !important;
}

/* الحاوية نفسها بلا خلفية */
body .restaurant-one .vcard-bars-btn,
body .restaurant-one .sub-btn,
body .restaurant-one .sticky-vcard-div {
  background: transparent !important;
}

/* كل الأيقونات والصور داخل الأزرار العائمة بيضاء */
body .restaurant-one .vcard-bars-btn i,
body .restaurant-one .vcard-bars-btn svg,
body .restaurant-one .sub-btn-div i,
body .restaurant-one .sticky-vcard-div i {
  color: #ffffff !important;
  fill: #ffffff !important;
}

body .restaurant-one .vcard-bars-btn img,
body .restaurant-one .sub-btn-div img {
  filter: brightness(0) invert(1) !important;
}

/* =========================================================
   ١٥) تحكم دقيق بمقدار انسحاب الشعار لأسفل الهيرو
   ---------------------------------------------------------
   --rest-avatar-inside = نسبة الشعار الباقية داخل الهيرو
   (رقم بلا وحدة بين 0 و 1)
     0.5  = نصف ونصف
     0.3  = ثلثه داخل الهيرو وثلثاه بارزان لأسفل  ← الافتراضي
     0.15 = يكاد يخرج كلياً لأسفل
     0.7  = معظمه داخل الهيرو
   ========================================================= */

.restaurant-one {
  --rest-avatar-inside: 0.3;
}

body .restaurant-one .vcard-one__profile {
  min-height: calc(var(--rest-avatar-h) * (1 - var(--rest-avatar-inside))) !important;
}

body .restaurant-one .vcard-one__profile > .avatar {
  position: absolute !important;
  top: calc(-1 * var(--rest-avatar-h) * var(--rest-avatar-inside)) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

/* =========================================================
   ١٦) ضبط أبعاد الأزرار العائمة
   القسم ١٤ لوّنها لكنه جعل زر المشاركة يمتد بعرض الشاشة.
   هنا نعيده إلى مربع مضغوط.
   ========================================================= */

body .restaurant-one .vcard-bars-btn a.bars-btn,
body .restaurant-one .vcard1-btn-group > button.vcard1-share,
body .restaurant-one .vcard1-btn-group > a#qr-code-btn,
body .restaurant-one .sub-btn-div button.vcard1-sticky-btn,
body .restaurant-one .sub-btn-div a.vcard1-sticky-btn {
  width: 52px !important;
  max-width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  border-radius: 16px !important;
  flex: 0 0 auto !important;
}

/* الحاويات لا تمتد بعرض الشاشة */
body .restaurant-one .vcard-bars-btn,
body .restaurant-one .sub-btn,
body .restaurant-one .sub-btn-div,
body .restaurant-one .vcard1-btn-group {
  width: auto !important;
  max-width: max-content !important;
  background: transparent !important;
}

/* أيقونات بحجم معقول */
body .restaurant-one .vcard-bars-btn i,
body .restaurant-one .sub-btn-div i {
  font-size: 20px !important;
  line-height: 1 !important;
}

body .restaurant-one .bars-btn img {
  width: 24px !important;
  height: 24px !important;
  filter: brightness(0) invert(1) !important;
}

/* زر إضافة جهة الاتصال يبقى عريضاً */
body .restaurant-one a.add-contact-btn {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 10px 24px !important;
  border-radius: 12px !important;
}

/* =========================================================
   ١٧) الأزرار العائمة — يسار عمود البطاقة
   ---------------------------------------------------------
   الحاوية تبقى position:fixed كما في الأصل، لكن نحصر
   عرضها بعرض عمود البطاقة ونوسّطها، ثم نحاذي لليسار.
   ---------------------------------------------------------
   ★ إن لم تنطبق المحاذاة تماماً، عدّل --rest-card-width
     ليساوي عرض عمود البطاقة عندك بالبكسل.
     لمعرفته: فحص العنصر <div class="vcard-one restaurant-one ...">
     وانظر العرض في تبويب Computed.
   ========================================================= */

.restaurant-one {
  --rest-card-width: 465px;
  --rest-float-gap: 12px;
}

body .restaurant-one > .position-fixed {
  position: fixed !important;
  top: 45vh !important;
  bottom: auto !important;
  /* بلا transform — وجوده يكسر تثبيت الأبناء position:fixed */
  left: calc(50% - (var(--rest-card-width) / 2)) !important;
  right: auto !important;
  transform: none !important;
  width: var(--rest-card-width) !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 0 0 var(--rest-float-gap) !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  z-index: 9999 !important;
}

/* إلغاء الهوامش الموروثة التي تزيح الزر */
body .restaurant-one .vcard-bars-btn {
  margin: 0 !important;
}

body .restaurant-one .vcard-bars-btn a.bars-btn {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* =========================================================
   ١٨) زر «إضافة إلى جهات الاتصال» — ثابت أسفل الشاشة
   ---------------------------------------------------------
   ملاحظة: العنصر نُقل في ملف القالب restaurant1.blade.php
   إلى خارج الحاوية العائمة، وإلا بقي محبوساً داخلها.
   ---------------------------------------------------------
   --rest-bottom-gap  المسافة من أسفل الشاشة
   ========================================================= */

.restaurant-one {
  --rest-bottom-gap: 16px;
}

body .restaurant-one .sticky-vcard-div {
  position: fixed !important;
  bottom: var(--rest-bottom-gap) !important;
  top: auto !important;
  left: calc(50% - (var(--rest-card-width) / 2)) !important;
  right: auto !important;
  transform: none !important;
  width: var(--rest-card-width) !important;
  max-width: 100% !important;
  padding: 0 12px !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 9998 !important;
  pointer-events: none;
}

body .restaurant-one .sticky-vcard-div > * {
  pointer-events: auto;
}

body .restaurant-one .sticky-vcard-div a.add-contact-btn {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 12px 28px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(43, 33, 24, 0.3) !important;
  white-space: nowrap;
}

/* فراغ في نهاية الصفحة حتى لا يحجب الزر آخر المحتوى */
body .restaurant-one {
  padding-bottom: 90px !important;
}

/* =========================================================
   ١٩) منع تراكب مربع «تثبيت كتطبيق» مع زر جهات الاتصال
   ---------------------------------------------------------
   نرفع مربع التثبيت فوق الزر بمقدار ارتفاع الزر + فراغ.
   ========================================================= */

.restaurant-one {
  /* الارتفاع المحجوز للزر الثابت أسفل الشاشة */
  --rest-cta-height: 52px;
}

/* مربع التثبيت يرتفع فوق الزر */
body #pwa-modal.pwa-support,
body .pwa-support {
  bottom: calc(var(--rest-bottom-gap, 16px) + var(--rest-cta-height, 52px) + 14px) !important;
  top: auto !important;
}

/* زر جهات الاتصال يبقى في الأسفل وفوق كل شيء */
body .restaurant-one .sticky-vcard-div {
  z-index: 10000 !important;
}

/* عند ظهور مربع التثبيت نضيف ظلاً يفصل بصرياً */
body #pwa-modal.pwa-support {
  box-shadow: 0 -6px 24px rgba(43, 33, 24, 0.16) !important;
}