/* ========================================
   Menu Page Specific Styles
   ======================================== */

body,
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.nav-link,
.btn {
     font-family: 'Cairo', 'Poppins', sans-serif !important;
}

/* Login Notice Banner - ألوان متناسقة مع الموقع */
.login-notice-banner {
     background: linear-gradient(135deg, #2a2a2a 0%, #3d3d3d 100%);
     border: 2px solid #F26722;
     border-radius: 30px;
     padding: 12px 20px;
     margin: 20px auto;
     max-width: 700px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.notice-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 15px;
     flex-wrap: wrap;
}

.notice-icon {
     background: #F26722;
     color: #000;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     font-weight: bold;
     flex-shrink: 0;
}

.notice-text {
     color: #fff;
     font-size: 13px;
     flex: 1;
     text-align: right;
     line-height: 1.5;
}

.notice-btn {
     background: #F26722;
     color: #000 !important;
     padding: 8px 20px;
     border-radius: 20px;
     text-decoration: none !important;
     font-size: 13px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: all 0.3s ease;
     white-space: nowrap;
     flex-shrink: 0;
}

.notice-btn:hover {
     background: #e0b050;
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(250, 197, 100, 0.4);
}

.notice-btn i {
     font-size: 14px;
}

/* Hide notice when logged in */
.login-notice-banner.hidden {
     display: none;
}

/* Mobile responsive for notice */
@media (max-width: 768px) {
     .login-notice-banner {
          padding: 10px 15px;
          margin: 15px 10px;
     }

     .notice-content {
          flex-direction: column;
          text-align: center;
          gap: 10px;
     }

     .notice-text {
          text-align: center;
          font-size: 12px;
     }

     .notice-btn {
          width: 100%;
          justify-content: center;
          padding: 10px 20px;
     }

     .notice-icon {
          display: none;
     }
}

/* Menu Product Cards - Clean Modern Style */
.menu-product-card {
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 12px;
     padding: 15px;
     margin-bottom: 12px;
     position: relative;
     /* For offer badge positioning */
}

/* Row 1: Image + Name */
.card-row-1 {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 8px;
}

.product-image-popup {
     display: block;
     text-decoration: none;
     order: 1;
}

.product-image-popup:hover .card-img {
     transform: scale(1.05);
     border-color: #fac564;
     box-shadow: 0 4px 15px rgba(250, 197, 100, 0.4);
}

.product-image-popup:hover .card-img::after {
     opacity: 0.9;
}

.card-img::after {
     content: '🔍';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 20px;
     opacity: 0;
     transition: opacity 0.3s ease;
     background: rgba(0, 0, 0, 0.6);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
}

.card-img {
     width: 75px;
     height: 75px;
     border-radius: 8px;
     background-size: cover;
     background-position: center;
     flex-shrink: 0;
     border: 2px solid #F26722;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
}

/* Magnific Popup Custom Styling */
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
     opacity: 0;
     transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
     opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
     opacity: 0.95;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
     opacity: 0;
}

.mfp-title {
     color: #fff;
     background: rgba(0, 0, 0, 0.7);
     padding: 10px;
     text-align: center;
     font-family: 'Cairo', sans-serif;
}

/* Mobile responsive for popup images */
@media (max-width: 768px) {
     .card-img::after {
          font-size: 16px;
     }
}

.card-title {
     text-align: left;
     order: 2;
     font-size: 17px;
     font-weight: 600;
     color: #fff;
     margin: 0;
}

/* Row 2: Description */
.card-desc {
     font-size: 13px;
     color: #aaa;
     margin: 0 0 8px 0;
     line-height: 1.4;
     text-align: right;
}

/* Row 3: Size Buttons */
.card-row-3 {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
     gap: 8px;
     flex-wrap: wrap;
}

.size-buttons {
     display: flex;
     gap: 3px;
     flex-wrap: wrap;
     width: 100%;
}

.size-btn {
     flex: 1;
     min-width: 45px;
     background: transparent;
     border: 1px solid #555;
     border-radius: 4px;
     color: #aaa;
     padding: 2px 2px;
     cursor: pointer;
     text-align: center;
     transition: all 0.2s;
     font-family: 'Cairo', sans-serif;
}

.size-btn .size-name {
     display: block;
     font-size: 13px;
     font-weight: 600;
}

.size-btn .size-price {
     display: block;
     font-size: 11px;
     margin-top: 0px;
}

.size-btn:hover {
     border-color: #F26722;
     color: #F26722;
}

.size-btn.active {
     background: rgba(250, 197, 100, 0.15);
     border-color: #F26722;
     color: #F26722;
}

/* Row 4: Qty + Add Button */
.card-row-4 {
     display: flex;
     align-items: center;
     gap: 10px;
}

.qty-group {
     display: flex;
     align-items: center;
     border: 1px solid #555;
     border-radius: 6px;
     overflow: hidden;
}

.qty-btn {
     width: 32px;
     height: 32px;
     border: none;
     background: rgba(255, 255, 255, 0.1);
     color: #fff;
     font-size: 16px;
     cursor: pointer;
     transition: background 0.2s;
}

.qty-btn:hover {
     background: #F26722;
     color: #000;
}

.qty-btn:active {
     background: #e0b050;
}

.qty-input {
     width: 40px;
     height: 32px;
     text-align: center;
     border: none;
     border-left: 1px solid #555;
     border-right: 1px solid #555;
     background: transparent;
     color: #fff;
     font-size: 14px;
     font-weight: bold;
}

.add-btn {
     flex: 1;
     background: linear-gradient(135deg, #F26722 0%, #e0a030 100%);
     color: #000;
     border: none;
     padding: 8px 16px;
     font-size: 13px;
     font-weight: bold;
     cursor: pointer;
     border-radius: 6px;
     transition: all 0.2s;
}

.add-btn:hover {
     background: linear-gradient(135deg, #ffe090 0%, #F26722 100%);
     transform: translateY(-1px);
}

.add-btn:active {
     transform: translateY(0);
}

/* Category Tabs */
#v-pills-tab .nav-link {
     margin: 4px;
     padding: 10px 18px;
     font-size: 14px;
     border-radius: 0px;
}

/* Mobile: تقليل المسافات على الهواتف */
@media (max-width: 768px) {

     /* تقليل المسافة بين slider والمحتوى */
     .ftco-section {
          padding-top: 1rem !important;
     }

     /* تقليل المسافة بين عنوان "قائمة الطعام" والعناصر الأخرى */
     .heading-section.mb-5 {
          margin-bottom: 1rem !important;
     }

     .heading-section.pb-3 {
          padding-bottom: 0.5rem !important;
     }

     /* تقليل المسافة فوق عنوان "قائمة الطعام" */
     .heading-section h2 {
          margin-bottom: 0.5rem !important;
     }

     /* تقليل المسافة فوق النص الوصفي */
     .heading-section .mt-5 {
          margin-top: 0.5rem !important;
     }

     /* تقليل المسافة فوق صور المنيو */
     .menu-gallery.mt-4 {
          margin-top: 1rem !important;
     }

     /* تقليل المسافة بين صور المنيو والفئات */
     .row.justify-content-center.mb-5 {
          margin-bottom: 1rem !important;
     }
}