/* ===============================
   MENU HERO
================================ */

.menu-page .hero{
  margin-bottom:6px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(15,27,45,.06);
}

.menu-page .hero-img{
  height:210px;
  object-fit:cover;
}

.menu-page .hero-body{
  padding:12px 16px 14px;
}

.menu-page .hero-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0;
}

.menu-page .title-text{
  font-size:20px;
  font-weight:900;
  color:#0F1B2D;
}

.menu-page .map-icon-inline{
  width:40px;
  height:40px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(15,27,45,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 16px rgba(15,27,45,.06);
  transition:.2s;
}

.menu-page .map-icon-inline img{
  width:22px;
  height:22px;
}

.menu-page .map-icon-inline:hover{
  transform:scale(1.05);
}

.menu-page .hero-rating{
  margin-top:6px;
  font-size:13px;
  font-weight:800;
  color:#64748b;
}
/* ===== Google Maps Button ===== */

.menu-page .maps-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f8fafc;
  border:1px solid rgba(15,27,45,.10);
  flex:0 0 36px;
}

.menu-page .maps-icon{
  width:18px;
  height:18px;
  object-fit:contain;
}
/* ===== Google Maps Button Bigger ===== */

.menu-page .maps-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  width:44px;      /* كان 36 */
  height:44px;     /* كان 36 */

  border-radius:50%;
  background:#f8fafc;
  border:1px solid rgba(15,27,45,.10);
  flex:0 0 44px;
}

.menu-page .maps-icon{
  width:24px;      /* كان 18 */
  height:24px;
  object-fit:contain;
}
.menu-page .maps-btn{
  width:50px;
  height:50px;
  flex:0 0 50px;
}

.menu-page .maps-icon{
  width:28px;
  height:28px;
}
/* ===== Get Price Button ===== */

.menu-page .get-price-wrapper{
  margin:18px 0 8px;
  text-align:center;
}

.menu-page .get-price-btn{
  display:inline-block;
  background:#E11D6A;
  color:#fff;
  padding:12px 26px;
  border-radius:999px;
  font-weight:900;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 10px 25px rgba(225,29,106,.25);
  transition:.2s ease;
}

.menu-page .get-price-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(225,29,106,.35);
}
/* ===============================
/* ===============================
   صندوق الاسم (ثابت تماماً)
================================ */

.menu-page .hero-title{
  position:relative;
  display:inline-block;
  padding:6px 18px;
  background:#C9A94B; /* ذهبي هادي */
  color:#111;
  font-weight:900;
  border-radius:4px;
  overflow:hidden; /* مهم عشان اللمعة ما تطلع برا */
}

/* ===============================
   اللمعة فقط تتحرك (3 ثواني)
================================ */

.menu-page .hero-title::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:40%;
  height:100%;

  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 100%
  );

  transform:skewX(-20deg);

  animation:shineMove 3s linear infinite;
}

@keyframes shineMove{
  0%   { left:-120%; }
  100% { left:120%; }
}


.menu-page .hero-title{
  position:relative;
  display:inline-block;
  padding:6px 18px;
  background:#C9A94B;
  color:#111;
  font-weight:900;
  border-radius:18px; /* 👈 كان 4px وخليته كيرف ناعم */
  overflow:hidden;
}
/* ===============================
   لمعة واقعية ناعمة (3 ثواني)
================================ */

.menu-page .hero-title::before{
  content:"";
  position:absolute;
  top:-20%;
  left:-150%;
  width:60%;
  height:140%;

  background:linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.15) 35%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.15) 65%,
    rgba(255,255,255,0) 100%
  );

  transform:skewX(-18deg);

  animation:shineMove 3s ease-in-out infinite;
}

@keyframes shineMove{
  0%   { left:-150%; }
  100% { left:150%; }
}
.menu-page .hero-title{
  position:relative;
  display:inline-block;
  padding:6px 18px;
  background:#C9A94B;
  color:#111;
  font-weight:900;
  border-radius:18px;
  overflow:hidden;
}
.menu-page .hero-title{
  position:relative;
  display:inline-block;
  padding:6px 18px;
  background:#C9A94B;
  color:#111;
  font-weight:900;
  border-radius:18px;
  overflow:hidden;

  /* 👇 تحديد داكن خفيف حول الحروف نفسها */
  text-shadow:
    0 0 1px rgba(0,0,0,.6),
    0 1px 1px rgba(0,0,0,.25);
}
.menu-page .hero-title{
  position:relative;
  display:inline-block;
  padding:6px 18px;
  background:#C9A94B;
  color:#111;
  font-weight:900;
  border-radius:18px;
  overflow:hidden;

  /* 👇 فريم داكن خارجي */
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
.menu-page .hero-title{
  position:relative;
  display:inline-block;
  padding:5px 14px;      /* كان 6px 18px */
  background:#C9A94B;
  color:#111;
  font-weight:900;
  font-size:16px;        /* 👈 صغّرناه */
  border-radius:18px;
  overflow:hidden;

  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}
/* ===============================
   HERO VIEW COUNTER (Elegant Small)
================================ */

.menu-page .hero{
  position:relative;
}

.menu-page .hero-views{
  position:absolute;
  top:12px;
  left:12px;
  z-index:10;

  display:flex;
  align-items:center;
  gap:4px;

  padding:4px 9px;
  border-radius:999px;

  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:11px;
  font-weight:700;

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  box-shadow:0 6
}
/* ===== Ripple Button ===== */

.ripple{
  position:relative;
  overflow:hidden;
}

.ripple span{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  animation:ripple-animation 600ms linear;
  background:rgba(255,255,255,.6);
}

@keyframes ripple-animation{
  to{
    transform:scale(4);
    opacity:0;
  }
}
/* خلفية المعرض - تركوازي غامق فاخر */
.vip-gallery {
  background: linear-gradient(135deg, #0f766e, #134e4a);
  padding: 20px;
  border-radius: 22px;
  margin-top: 20px;
}

/* تنسيق الصور */
.vip-thumbs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
}

.vip-thumb img,
.vip-thumb video {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 18px;
  cursor: pointer;
  transition: 0.3s ease;
}

/* تأثير عند الضغط */
.vip-thumb img:hover,
.vip-thumb video:hover {
  transform: scale(1.05);
}