/* Animations */
@keyframes slideUp {
	from { transform: translateY(50px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* زر السلة العائم */
#floating-cart-btn {
	position: fixed;
	left: 24px;
	bottom: 32px;
	z-index: 9999;
}
#floating-cart-btn button {
	background: #fff;
	border: none;
	box-shadow: 0 2px 12px rgba(0,0,0,0.12);
	border-radius: 50%;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: box-shadow 0.2s;
}
#floating-cart-btn button:hover {
	box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
#floating-cart-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: #e53935;
	color: #fff;
	border-radius: 50%;
	min-width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 0 1px 4px rgba(0,0,0,0.10);
	padding: 0 6px;
}
*{box-sizing:border-box;font-family: 'Segoe UI', Tahoma, Arial, sans-serif}
body{margin:0;background:#f8f9fa;color:#222;direction:rtl}
.site-header{background:linear-gradient(90deg,#f94144,#f3722c);color:#fff;padding:12px;position:sticky;top:0;z-index:1000;min-height:64px;margin-left:300px}
.nav-actions{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;gap:8px;align-items:center}
.brand{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;gap:10px;align-items:center;text-align:right}
.brand img{max-height:48px;max-width:200px;object-fit:contain}
.brand h1{margin:0;font-size:18px}
.slogan{margin:0;font-size:12px;opacity:0.95}
main{padding:12px;margin-left:320px;transition:margin-left 0.3s ease}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;transition:grid-template-columns 0.3s ease}
body.cart-hidden .grid{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;padding:10px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);display:flex;gap:10px;align-items:center;position:relative;transition:all .3s ease;animation:fadeInUp .4s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.12)}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes slideDown{0%{opacity:0;transform:translate(-50%, -20px)}100%{opacity:1;transform:translate(-50%, 0)}}
@keyframes slideUp{0%{opacity:1;transform:translate(-50%, 0)}100%{opacity:0;transform:translate(-50%, -20px)}}
.card img{width:96px;height:72px;object-fit:cover;border-radius:6px}
.card .info{flex:1}
.price{font-weight:700}
.old-price{text-decoration:line-through;color:#999;margin-left:6px}
.badge{position:absolute;top:8px;right:8px;display:inline-block;background:#2b9348;color:#fff;padding:6px 8px;border-radius:6px;font-size:12px}
.badge{z-index:2}
.unavailable{background:#6c757d}
.card .actions{display:flex;flex-direction:column;gap:6px}
button.add{background:#007bff;color:#fff;border:none;padding:8px 10px;border-radius:6px}
.promo-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:10px 0 16px}
.promo-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;border:1px solid rgba(0,0,0,0.05);box-shadow:0 6px 14px rgba(0,0,0,0.08);background:linear-gradient(135deg,#fff,#fdf7e3)}
.promo-card .promo-left{display:flex;align-items:center;gap:10px}
.promo-card .badge{position:static;background:#111;color:#fff;font-size:12px;padding:4px 10px;border-radius:999px}
.promo-card h4{margin:0;font-size:16px}
.promo-card p{margin:4px 0 0;color:#555;font-size:13px}
.promo-card .promo-cta{margin-left:auto;background:#111;color:#fff;border:none;padding:10px 14px;border-radius:10px;font-weight:700;white-space:nowrap}
.promo-card .promo-code{background:rgba(0,0,0,0.06);padding:6px 10px;border-radius:10px;font-weight:700;font-size:13px;color:#111}
#cart{position:fixed;left:0;top:0;width:300px;background:#fff;border-right:1px solid #eee;padding:12px;padding-bottom:0;display:flex;flex-direction:column;height:100vh;box-shadow:0 6px 18px rgba(0,0,0,.06);z-index:900;transition:left 0.3s ease-in-out}
#cart.hidden{left:-300px}
#cart-scrollable{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:8px;margin-bottom:8px}
#cart .cart-actions{position:sticky;bottom:0;background:#fff;padding:8px 0;border-top:1px solid #eee;margin-top:auto}
#cart #delivery-status{padding:4px 0}
#cart h2{margin-top:0;display:flex;justify-content:space-between;align-items:center}
#cart-close-btn{background:transparent;border:none;color:#999;font-size:28px;cursor:pointer;padding:0;width:32px;height:32px;display:none;line-height:1;transition:color 0.3s}
#cart-close-btn:hover{color:#333}
.cart-row{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.total{font-size:16px}
#order-note{width:100%;height:60px}
.cart-actions{display:flex;gap:8px}
.cart-actions button{flex:1;padding:10px;border-radius:6px;border:none;position:relative;font-weight:600;transition:all 0.3s ease}
#clear-cart{background:#f8f9fa;color:#333}
#clear-cart:hover{background:#e9ecef}
#send-whatsapp{background:#6c757d;color:#fff;transition:background 0.3s ease}
#send-whatsapp.ready{background:#28a745 !important}
#send-whatsapp:disabled{opacity:0.6;cursor:not-allowed}
#whatsapp-fab{position:fixed;left:16px;bottom:16px;background:#25D366;color:#fff;border:none;padding:12px 16px;border-radius:999px;font-weight:700}
.muted{color:#666;font-size:13px;margin-top:8px}
/* Navbar action buttons (mobile) */
.nav-actions{display:none;gap:8px;align-items:center}
.icon-btn{background:transparent;border:none;color:#fff;font-size:18px;padding:6px;border-radius:6px;position:relative}
.nav-actions .icon-btn svg{display:block;filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
.mobile-search{display:none}
.mobile-search form{display:flex;gap:8px;padding:10px;background:rgba(255,255,255,0.98);align-items:center;box-shadow:0 8px 28px rgba(0,0,0,0.12);border-radius:8px}
.mobile-search input{flex:1;padding:8px;border:1px solid #ddd;border-radius:6px}
.mobile-search button{padding:8px 10px;border-radius:6px;border:none}
.cart-badge{position:absolute;top:-6px;left:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:12px;background:#e53935;color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,0.14)}
.cart-badge.hidden{display:none}

/* badge pulse animation */
.cart-badge.pulse{animation:cart-pulse .6s ease-in-out}
@keyframes cart-pulse{
	0%{transform:scale(1)}
	40%{transform:scale(1.28)}
	70%{transform:scale(0.96)}
	100%{transform:scale(1)}
}

/* Controls (search + categories) */
#controls{display:flex;flex-direction:column;gap:10px;margin-top:12px;margin-left:300px}
#controls .search-row{display:flex;align-items:center;gap:8px}
#controls #search-input{flex:1;padding:10px;border-radius:8px;border:1px solid #e6e6e6}
#categories{display:flex;gap:8px;overflow:auto;padding:6px 2px}
#categories button{white-space:nowrap;padding:8px 12px;border-radius:999px;border:none;background:#fff;color:#222;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
#categories button.active{background:#f94144;color:#fff}

.category-title{margin-top:8px;font-weight:700;font-size:16px;color:#333}

/* disabled add button (out of stock) */
button.add[disabled]{background:#d9534f;color:#fff;opacity:0.95}
button.add{white-space:nowrap}
button.buy, .qty-controls{display:inline-flex;align-items:center;gap:6px}
.qty-controls button{background:#007bff;color:#fff;border:none;padding:6px 8px;border-radius:6px}
.qty-count{min-width:28px;text-align:center;font-weight:700}
.qty-controls .qty-minus{background:#e0e0e0;color:#222}
.qty-controls .qty-plus{background:#007bff}
.qty-controls button:disabled{opacity:0.6}

/* Button polish */
button, .icon-btn{transition:all .18s ease;border-radius:8px}
button{padding:8px 12px;border:1px solid transparent;background:#fff;color:#222}
button:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.buy{background:linear-gradient(90deg,#ff7a59,#ff5252);color:#fff;border:none;padding:8px 12px;border-radius:8px}
.buy:disabled{background:#f5c6c5;color:#fff;opacity:0.9}
.icon-btn{background:transparent;border:none;color:#fff;padding:8px}

/* Flying image animation */
.flying-img{position:fixed;z-index:1200;pointer-events:none;border-radius:6px;will-change:transform,opacity;transition:transform .7s cubic-bezier(.18,.85,.35,1),opacity .6s}

/* Load More button */
.load-more-btn{display:block;width:100%;max-width:400px;margin:20px auto;padding:12px 24px;background:linear-gradient(90deg,#007bff,#0056b3);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}
.load-more-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,123,255,0.3)}

/* Skeleton loaders */
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite}
@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-card{height:130px;border-radius:8px}
.skeleton-text{height:14px;border-radius:4px;margin:8px 0}
.skeleton-title{height:18px;width:70%;border-radius:4px;margin:8px 0}

/* Image placeholder */
.card img{background:#f5f5f5;position:relative}
.card img[src=""]:before,.card img:not([src]):before{content:'';display:block;width:100%;height:100%;background:#f5f5f5 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ccc"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>') center/50% no-repeat}

/* Responsive tweaks for mobile */
@media (max-width:900px){
	/* Make main content full width on tablets and below */
	main{margin:0;padding:10px}
	.grid{grid-template-columns:repeat(2,1fr)}
	.site-header{margin-left:0}
	#controls{margin-left:0}
}

@media (max-width:480px){
	/* Make main content full width on small screens */
	main{margin:0;padding:10px}

	/* Keep categories bar pinned under header on mobile */
	#controls{
		position:sticky;
		top:64px;
		z-index:1050;
		background:#f8f9fa;
		padding:8px 10px 6px;
		margin:0;
	}
	#categories{
		padding:4px 2px;
		background:#f8f9fa;
		border-bottom:1px solid #eee;
	}
	#category-title{display:none}

	/* Keep two products per row on small screens; stack card internals vertically so they fit */
	.grid{grid-template-columns:repeat(2,1fr);gap:8px}

	/* Show mobile floating cart button */
	#mobile-floating-cart-btn{display:block !important}
	
	/* Hide desktop floating cart on mobile */
	#floating-cart-btn{display:none !important}

	/* Stack card internals to reduce horizontal width and make cards fit side-by-side */
	.card{padding:8px;flex-direction:column;align-items:flex-start}
	.card img{width:100%;height:110px;object-fit:cover;border-radius:6px;margin-bottom:8px}
	.card .actions{width:100%;display:flex;justify-content:space-between}
	button.add{width:48%}

	/* Offers cards: golden gradient frame with soft shadow */
	.offers-card{
		border:2px solid transparent;
		border-image:linear-gradient(135deg,#ffd700,#ffa500) 1;
		box-shadow:0 8px 18px rgba(0,0,0,0.08);
		border-radius:12px;
		background:#fff;
	}

	/* Cart becomes full screen on mobile */
	#cart{position:fixed;left:0;right:0;bottom:0;top:0;width:100%;height:100vh;border-left:none;border-top:none;border-radius:0;padding:10px;padding-bottom:0;box-shadow:none;background:#fff;transform:translateY(0);z-index:1100}
	#cart.closed{transform:translateY(100%)}
	#cart.open{transform:translateY(0)}
	#cart{transition:transform .28s ease-in-out}
	#cart h2{font-size:16px}
	.cart-row{margin:6px 0}
	
	/* إظهار زر الإغلاق على الموبايل */
	#cart-close-btn{display:block !important}
	
	/* زر إنهاء الطلب ثابت فوق النافبار السفلي */
	#cart .cart-actions{position:fixed;bottom:65px;left:0;right:0;background:#fff;padding:12px;border-top:2px solid #eee;box-shadow:0 -4px 12px rgba(0,0,0,0.08);z-index:10}
	#send-whatsapp{font-size:16px;padding:14px !important;font-weight:700}
	#send-whatsapp.ready{background:#28a745 !important;box-shadow:0 4px 12px rgba(40,167,69,0.3)}
	
	/* إبقاء النافبار السفلي ثابتاً عند فتح السلة */
	#mobile-bottom-nav{z-index:1200 !important}

	/* Make fab and cart buttons reachable */
	#whatsapp-fab{left:auto;right:16px}

	/* Show navbar actions and hide inline search on mobile */
	.nav-actions{display:flex}
	
	/* إخفاء زر حسابي من النافبار العلوي على الجوال */
	.account-btn-header{display:none !important}
	#controls #search-input{display:none}
	.mobile-search{display:none}
	.mobile-search.open{display:block;position:fixed;left:8px;right:8px;top:64px;z-index:1100;border-radius:8px}

	/* Improve spacing of actions */
	.card .actions{flex-direction:row}
	button.add{padding:8px 10px}
	
	footer{margin-right:0 !important;margin-left:0 !important}
}

/* Delivery schedule styling */
#delivery-schedule-section{margin:12px 0;padding:10px;background:#f8f9fa;border-radius:8px}
#delivery-date, #delivery-time{width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;background:#fff;color:#222}
#calendar-popup{font-family:'Segoe UI',Tahoma,Arial,sans-serif}
#calendar-popup > div:last-child > div:hover:not(.disabled){background:#f0f0f0}

/* Min order warning */
#min-order-warning{background:#fff3cd;color:#856404;padding:8px;border-radius:6px;margin:8px 0;font-size:13px;border:1px solid #ffeaa7;display:none}

/* Very small devices: use single column under 360px */
@media (max-width:360px){
  .grid{grid-template-columns:1fr}
  .card{flex-direction:column}
  .card img{height:120px}
}

/* Mobile Bottom Navigation Bar */
#mobile-bottom-nav {
  height: 65px;
  border-top: 1px solid #eee;
}

#mobile-bottom-nav button {
  transition: color 0.2s ease;
}

#mobile-bottom-nav button:active {
  color: #d32f2f;
  transform: scale(0.95);
}

#mobile-bottom-nav button svg {
  transition: stroke 0.2s ease;
}

#mobile-bottom-nav button:active svg {
  stroke: #d32f2f;
}

/* Offers button special styling */
#offers-tab-btn svg {
  filter: drop-shadow(0 2px 4px rgba(255,215,0,0.5));
  animation: pulse-gold 2s ease-in-out infinite;
}

@keyframes pulse-gold {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

#offers-tab-btn:active svg {
  stroke: #FFA500 !important;
}

#mobile-bottom-nav.hidden {
  transform: translateY(100%);
}

#mobile-bottom-nav {
  transition: transform 0.3s ease-in-out;
}

/* Add padding to body when bottom nav is visible */
@media (max-width: 480px) {
  body {
    padding-bottom: 70px;
  }
  
  #mobile-bottom-nav {
    display: block !important;
  }
  
  /* Hide floating buttons on mobile */
  #suggestions-widget-btn,
  #mobile-floating-cart-btn,
  #whatsapp-fab {
    display: none !important;
  }
}