/* =========================================================
   VES VES — Coffee Menu
   ملف الأنماط الرئيسي
   ========================================================= */

/* ---------- 1) المتغيرات العامة (CSS Variables) ---------- */
:root{
  --color-orange:       #FF7A29;
  --color-orange-dark:  #E85F0D;
  --color-brown:        #8B5A3C;
  --color-beige:        #F9F7F3;
  --color-white:        #FFFFFF;
  --color-ink:          #3A2A20;

  --font-ar: 'Cairo', sans-serif;
  --font-en: 'Poppins', sans-serif;

  --page-max-width: 430px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- 2) إعادة ضبط أساسية ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:#ECEAE5;
  font-family:var(--font-ar);
  color:var(--color-ink);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

ul{ list-style:none; }

/* ---------- 3) إطار الصفحة (Mobile First / 430px) ---------- */
.page-frame{
  position:relative;
  width:100%;
  max-width:var(--page-max-width);
  min-height:100vh;
  background:var(--color-beige);
   border:2px dashed rgba(226,118,33,.45);
padding:18px;
  overflow:hidden;
  border-inline:1px dashed rgba(139,90,60,.35);
  isolation:isolate;
}
.page-frame::before{
    content:"";
    position:absolute;
    inset:14px;
    border:1.5px dashed rgba(226,118,33,.45);
    border-radius:18px;
    pointer-events:none;
}

.page-frame::after{
    content:"";
    position:absolute;
    inset:28px;
    border:1px solid rgba(226,118,33,.18);
    border-radius:12px;
    pointer-events:none;
}

@media (min-width:480px){
  body{ padding:32px 16px; }
  .page-frame{
    min-height:auto;
    border:1px dashed rgba(139,90,60,.4);
    border-radius:var(--radius-lg);
    box-shadow:0 30px 60px -20px rgba(139,90,60,.25);
    margin-block:0;
  }
}

/* ---------- 5) النجوم واللمعات ---------- */
.sparkle{
  position:absolute;
  color:var(--color-orange);
  font-size:22px;
  z-index:1;
  animation:sparkleTwinkle 3s ease-in-out infinite;
  pointer-events:none;
}
.sparkle--1{ top:10px; left:20px; font-size:18px; animation-delay:.2s; }
.sparkle--2{ top:16px; right:22px; font-size:13px; animation-delay:1s; }
.sparkle--3{ top:88px; right:36px; font-size:12px; color:var(--color-brown); animation-delay:1.6s; }

@keyframes sparkleTwinkle{
  0%,100%{ opacity:.35; transform:scale(.85) rotate(0deg); }
  50%{ opacity:1; transform:scale(1.15) rotate(15deg); }
}

/* ---------- 5.1) رسومات زخرفية متناثرة خلف المحتوى ---------- */
.bg-doodles{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.doodle{
  position:absolute;
  width:64px;
  height:auto;
  opacity:.16;
  filter:drop-shadow(0 2px 3px rgba(139,90,60,.08));
  transform:rotate(var(--r,0deg));
  animation:doodleFloat 7s ease-in-out infinite;
}

.d-1 { width:62px; top:1.5%;  left:4%;   --r:-11deg; animation-delay:0s;   }
.d-2 { width:54px; top:6%;    right:5%;  --r:14deg;  animation-delay:.6s;  }
.d-3 { width:50px; top:19%;   left:3%;   --r:-8deg;  animation-delay:1.2s; }
.d-4 { width:58px; top:27%;   right:4%;  --r:9deg;   animation-delay:1.8s; }
.d-5 { width:62px; top:36%;   left:3.5%; --r:6deg;   animation-delay:2.4s; }
.d-6 { width:54px; top:44%;   right:3%;  --r:-13deg; animation-delay:3s;   }
.d-7 { width:58px; top:53%;   left:4%;   --r:10deg;  animation-delay:.9s;  }
.d-8 { width:70px; top:61%;   right:3.5%;--r:-6deg;  animation-delay:1.5s; }
.d-9 { width:58px; top:70%;   left:3%;   --r:12deg;  animation-delay:2.1s; }
.d-10{ width:54px; top:79%;   right:4%;  --r:-9deg;  animation-delay:2.7s; }
.d-11{ width:46px; top:88%;   left:5%;   --r:18deg;  animation-delay:.3s;  }
.d-12{ width:50px; top:95%;   right:5%;  --r:-15deg; animation-delay:1.9s; }

@keyframes doodleFloat{
  0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); }
  50%{ transform:translateY(-6px) rotate(var(--r,0deg)); }
}

@media (min-width:480px){
  .doodle{ width:56px; }
}

@media (prefers-reduced-motion: reduce){
  .doodle{ animation:none; }
}

/* ---------- 6) الهيدر الكامل ---------- */
.site-header{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 !important;
  margin: -18px -18px 0 -18px !important;
  width: calc(100% + 36px);
  line-height: 0; /* يمنع وجود أي فراغ ناتج عن أبعاد الصورة */
  font-size: 0;
}

.brand-logo{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  margin: 0 !important;
  border-radius: 0;
  animation: none;
}

/* ---------- 7) الأقسام ---------- */
main{ position:relative; z-index:2; }

.menu-section{
  position: relative;
  padding: 0 20px 4px; /* تقليل الحشو السفلي للقسم */
}

/* عنوان القسم الثابت أثناء التمرير */
.sticky-title{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:var(--color-beige);
  font-family:var(--font-en);
  font-weight:600;
  font-size:19px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--color-orange-dark);
  padding:8px 4px 6px;
  margin:0;
  width:100%;
}

.sticky-title::before,
.sticky-title::after{
  content:"";
  flex:1;
  height:1px;
  max-width:64px;
  background:linear-gradient(90deg, transparent, rgba(139,90,60,.4));
}

.sticky-title::after{
  background:linear-gradient(90deg, rgba(139,90,60,.4), transparent);
}

/* ---------- 8) عناصر القائمة ---------- */
.menu-list{
  margin-top: 0px; /* إزالة أي مسافة فوق القائمة */
}

.menu-item{
  display:flex;
  flex-direction:row-reverse; /* يضمن بقاء السعر في أقصى اليمين دائمًا */
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:7px 4px;
  border-bottom:1px dashed rgba(139,90,60,.3);
  transition:transform .3s var(--ease), background .3s var(--ease);
}

.menu-item:last-child{ border-bottom:none; }

.menu-item:hover{
  background:rgba(255,122,41,.06);
  transform:translateX(-4px);
  border-radius:var(--radius-sm);
}

.item-text{
  display:flex;
  flex-direction:column;
  gap:0;
}

.name-ar{
  font-family:var(--font-ar);
  font-weight:700;
  font-size:14.5px;
  color:var(--color-ink);
}

.name-en{
  font-family:var(--font-en);
  font-weight:500;
  font-size:10px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--color-brown);
}

.price{
  font-family:var(--font-en);
  font-weight:600;
  font-size:14.5px;
  color:var(--color-orange);
  white-space:nowrap;
}

.currency{
  font-family:var(--font-ar);
  font-size:10px;
  margin-inline-start:2px;
  color:var(--color-brown);
}

.price-dual{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}

.price-option{
  display:flex;
  align-items:baseline;
  gap:5px;
}

.price-label{
  font-family:var(--font-ar);
  font-size:10px;
  color:var(--color-brown);
  white-space:nowrap;
}

/* ---------- 9) رسمة القطة والقهوة الفاصلة ---------- */
.menu-illustration{
  display:flex;
  justify-content:center;
  margin:-6px 0 4px;
  perspective:900px;
}

.menu-illustration .pour-scene{
  position:relative;
  width:calc(100% + 36px);
  margin-inline:-18px;
  transform:rotateX(7deg) scale(1.015);
  transform-origin:center bottom;
}

.menu-illustration .pour-scene img{
  width:45%;
  height:auto;
  display:block;
  margin:0 auto;
  filter:
    drop-shadow(0 2px 3px rgba(139,90,60,.10))
    drop-shadow(0 18px 22px rgba(139,90,60,.20))
    drop-shadow(0 34px 26px rgba(139,90,60,.14));
}

/* بخار خفيف فوق الكوب اللي يتعبى، يوحي إن القهوة توّها انسكبت */
.menu-illustration .steam{
  position:absolute;
  bottom:34%;
  left:37%;
  width:6px;
  height:20px;
  background:linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,248,240,.9) 45%, rgba(255,255,255,0) 100%);
  border-radius:50%;
  filter:blur(1.5px);
  opacity:0;
  transform-origin:bottom center;
  pointer-events:none;
  animation:steamRise 3.2s ease-in-out infinite;
}

.menu-illustration .steam-2{
  left:44%;
  height:17px;
  animation-delay:.9s;
}

.menu-illustration .steam-3{
  left:31%;
  height:15px;
  animation-delay:1.8s;
}

@keyframes steamRise{
  0%   { transform:translateY(0) scale(1) rotate(0deg);    opacity:0;   }
  15%  { opacity:.55; }
  50%  { transform:translateY(-22px) scale(1.15) rotate(4deg);  opacity:.35;  }
  100% { transform:translateY(-46px) scale(1.3) rotate(-4deg); opacity:0;   }
}

@media (prefers-reduced-motion: reduce){
  .menu-illustration .steam{
    animation:none;
    opacity:0;
  }
}

/* ---------- 11) الزر العائم ---------- */
.float-btn{
  position:fixed;
  bottom:26px;
  right:calc(50% - min(430px,100vw)/2 + 20px);
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:var(--color-orange);
  box-shadow:0 10px 24px -6px rgba(255,122,41,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:20;
  transition:transform .35s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

.float-btn:hover{
  transform:translateY(-3px) scale(1.05);
  background:var(--color-orange-dark);
}
/* ================= سعرات الحلا ================= */

.calories {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.5;
  opacity: 0.65;
  font-weight: 500;
  direction: rtl;
  white-space: nowrap;
}

.float-btn:active{ transform:scale(.94); }

.float-btn svg{ transition:transform .4s var(--ease); }

.float-btn.is-up svg{ transform:rotate(180deg); }

/* ---------- 12) حركة الظهور التدريجي (Scroll Reveal) ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- 13) تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- 14) تجاوب إضافي لشاشات صغيرة جدًا ---------- */
@media (max-width:360px){
  .brand-logo{ max-width:85%; }
}

/* ================= قسم التواصل المحدث ================= */

.contact-section {
  width: 100%;
  max-width: 390px;
  margin: 25px auto 15px;
  padding: 10px 18px 20px;
  text-align: center;
}

.contact-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
  font-family: "Cairo", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-brown);
}

.contact-line {
  width: 38px;
  height: 1px;
  opacity: 0.35;
  background: var(--color-brown);
}

/* حاوية الأيقونات لتكون بجانب بعضها في المنتصف */
.social-icons-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

/* تنسيق الأيقونة الفردية (حجم صغير ودائري/مربع ناعم متناسق) */
.social-icon-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  text-decoration: none;
  background: var(--color-white);
  border: 1.5px solid rgba(139, 90, 60, 0.2);
  color: var(--color-brown);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: 0 4px 10px rgba(139, 90, 60, 0.06);
}

.social-icon-btn svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: block;
}
/* تأثير التفاعل عند مرور الماوس أو اللمس (تتخذ لون البرتقالي الخاص بالمنيو) */
.social-icon-btn:hover {
  transform: translateY(-3px) scale(1.05);
  background: var(--color-orange);
  color: var(--color-white);
  border-color: var(--color-orange);
  box-shadow: 0 6px 15px rgba(255, 122, 41, 0.3);
}

.contact-footer {
  margin: 15px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  font-style: italic;
  color: var(--color-brown);
  opacity: 0.7;
}
/* ---------- مسببات الحساسية ---------- */
.allergy-notice {
  text-align: center;
  padding: 25px 15px;
  margin: 10px 0;
}
.allergy-notice p {
  font-family: var(--font-ar);
  font-size: 12px;
  color: var(--color-orange-dark);
  line-height: 1.8;
  margin: 0;
  letter-spacing: 0.3px;
}
.allergy-notice span {
  display: block;
  font-weight: 700;
  color: var(--color-orange);
  margin-bottom: 4px;
  font-size: 13px;
}
.brand-logo {
  width: 90% !important;        /* <--- ارفعي النسبة هنا لتكبر الصورة بالنسبة التي ترغبين بها */
  max-width: 350px !important;  /* <--- ارفعي الحد الأقصى للعرض لكي تسمح بالتكبير */
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}
/* ================= تغيير لون مسببات الحساسية بدون خلفية ================= */
.allergy-notice {
  background: transparent !important; /* إلغاء أي خلفية ليكون مدموجاً تماماً */
  box-shadow: none !important;
}

.allergy-notice span {
  color: var(--color-orange-dark) !important; /* لون برتقالي دافئ للعنوان */
}

.allergy-notice p {
  color: var(--color-brown) !important; /* لون بني دافئ ومريح للنص */
}
/* ================= تكبير صورة النهاية (القطة والقهوة) ================= */
.menu-illustration .pour-scene img {
  width: 75% !important; /* يمكنك زيادة هذه النسبة إذا أردتِ تكبيرها أكثر (مثلاً 85% أو 90%) */
  max-width: 320px !important; /* الحد الأقصى للعرض لكي تبقى متناسقة مع إطار الجوال */
  height: auto !important;
}