*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;background-color:#f60;background-image:url(https://i.ibb.co/qMNHmfjd/4dde2ac671d09e3b26215d07feda727f.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden;font-family:Cairo,system-ui,-apple-system,sans-serif;direction:rtl}#app{width:100%;height:100%;position:relative;display:flex;flex-direction:column}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:#ffffff1f;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border-bottom:1px solid rgba(255,255,255,.22);border-bottom-left-radius:24px;border-bottom-right-radius:24px;color:#fff;z-index:10;box-shadow:0 4px 30px #00000026}.welcome-text{margin:0;font-size:1.6rem;font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.35);letter-spacing:-.3px}.left-actions{display:flex;align-items:center;gap:14px}.icon-btn{background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:50%;width:46px;height:46px;display:flex;justify-content:center;align-items:center;cursor:pointer;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);outline:none}.icon-btn:hover{background:#ffffff47;transform:translateY(-2px);box-shadow:0 4px 12px #ffffff1a}.icon-btn:active{transform:translateY(0) scale(.95)}.icon{width:22px;height:22px}.cart-badge{position:absolute;top:-3px;right:-3px;background-color:#fc0;color:#1e1e24;font-size:.78rem;font-weight:800;border-radius:50%;width:20px;height:20px;display:flex;justify-content:center;align-items:center;border:1.5px solid #ffffff;box-shadow:0 2px 5px #00000040;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.cart-badge.pop{transform:scale(1.4)}.notification-dot{position:absolute;top:11px;right:11px;width:9px;height:9px;background-color:#ff3b30;border-radius:50%;border:1.5px solid #ffffff;box-shadow:0 0 4px #ff3b3099}.profile-container{width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid #ffffff;box-shadow:0 4px 12px #0003;transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer}.profile-container:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #0000004d}.profile-img{width:100%;height:100%;object-fit:cover}.scrollable-content{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:110px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.scrollable-content::-webkit-scrollbar{width:6px}.scrollable-content::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:10px}.categories-section{width:100%;padding:20px 0 10px;overflow:hidden}.categories-container{display:flex;gap:20px;padding:4px 24px 16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.categories-container::-webkit-scrollbar{display:none}.category-item{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;flex-shrink:0;scroll-snap-align:start;transition:transform .25s cubic-bezier(.4,0,.2,1)}.category-square{width:80px;height:80px;border-radius:20px;background:#ffffff1f;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.25);box-shadow:0 8px 32px #00000026;display:flex;justify-content:center;align-items:center;color:#fff;transition:all .25s cubic-bezier(.4,0,.2,1)}.category-icon{width:32px;height:32px;transition:transform .25s cubic-bezier(.4,0,.2,1)}.category-name{font-size:.95rem;font-weight:700;color:#fff;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.35);pointer-events:none;white-space:nowrap}.category-item:hover{transform:translateY(-4px)}.category-item:hover .category-square{background:#ffffff3d;border-color:#ffffff73;box-shadow:0 12px 40px #ffffff26,0 8px 24px #0003}.category-item:hover .category-icon{transform:scale(1.15)}.category-item:active{transform:scale(.95)}.products-section{padding:10px 24px}.section-title{margin:0 0 20px;font-size:1.45rem;font-weight:800;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.3)}.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.product-card{background:#ffffff1f;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,.22);border-radius:24px;overflow:hidden;position:relative;display:flex;flex-direction:column;box-shadow:0 10px 30px #00000026;transition:all .3s cubic-bezier(.4,0,.2,1)}.product-card:hover{transform:translateY(-6px);background:#ffffff29;border-color:#ffffff59;box-shadow:0 15px 40px #00000038}.product-badge{position:absolute;top:14px;right:14px;background:#ff6600e6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;padding:4px 14px;border-radius:12px;font-size:.85rem;font-weight:800;z-index:2;border:1px solid rgba(255,255,255,.3);box-shadow:0 4px 10px #00000026}.product-img-wrapper{width:calc(100% - 24px);margin:12px auto 0;aspect-ratio:1 / 1;overflow:hidden;position:relative;background:#0000000d;border-radius:20px;box-shadow:0 4px 15px #0000001a}.product-img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}.product-card:hover .product-img{transform:scale(1.06)}.product-info{padding:12px 14px 16px;display:flex;flex-direction:column;flex:1}.product-title{margin:0 0 10px;font-size:1rem;font-weight:800;color:#fff;line-height:1.4;text-shadow:0 1px 3px rgba(0,0,0,.2)}.product-meta{margin-top:auto;margin-bottom:0;display:flex;justify-content:space-between;align-items:center;width:100%}.product-price{font-size:1.15rem;font-weight:800;color:#fc0;text-shadow:0 1px 3px rgba(0,0,0,.3)}.product-actions{display:flex;gap:8px;align-items:center}.btn{border:none;font-family:inherit;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.4,0,.2,1);outline:none}.btn-add-cart{background:#fff;color:#f60;width:40px;height:40px;border-radius:50%!important;box-shadow:0 4px 15px #ffffff26;flex-shrink:0;padding:0}.btn-add-cart span{display:none}.btn-add-cart:hover{background:#ffebd6;transform:scale(1.08) translateY(-1px)}.btn-add-cart:active{transform:scale(.95)}.btn-share{background:#ffffff26;border:1px solid rgba(255,255,255,.22);color:#fff;width:40px;height:40px;border-radius:50%!important;flex-shrink:0;padding:0}.btn-share:hover{background:#ffffff4d;transform:scale(1.08) translateY(-1px)}.btn-share:active{transform:scale(.95)}.btn-icon{width:18px;height:18px}.sidebar{position:fixed;top:0;right:-320px;width:300px;height:100%;background:#fffffff5;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:-5px 0 30px #0003;transition:right .35s cubic-bezier(.4,0,.2,1);z-index:100;display:flex;flex-direction:column;color:#1e1e24}.sidebar.active{right:0}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid rgba(0,0,0,.08)}.sidebar-header h2{margin:0;font-size:1.35rem;font-weight:800;color:#f60}.close-btn{background:none;border:none;font-size:1.8rem;cursor:pointer;color:#555;line-height:1;padding:4px;transition:all .2s}.close-btn:hover{color:#f60;transform:scale(1.1)}.sidebar-content{padding:24px;font-size:1.05rem;line-height:1.7;color:#444}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000073;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:99}.sidebar-overlay.active{opacity:1;pointer-events:auto}.notification-panel{position:fixed;top:84px;left:-320px;width:300px;max-height:400px;background:#fffffff5;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:18px;box-shadow:0 10px 35px #0003;transition:left .35s cubic-bezier(.4,0,.2,1);z-index:100;display:flex;flex-direction:column;color:#1e1e24;border:1px solid rgba(255,255,255,.6)}.notification-panel.active{left:24px}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:18px;border-bottom:1px solid rgba(0,0,0,.08)}.panel-header h2{margin:0;font-size:1.15rem;font-weight:800;color:#f60}.panel-content{padding:18px;overflow-y:auto}.notification-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.06)}.notification-item:last-child{border-bottom:none}.item-dot{width:9px;height:9px;background-color:#f60;border-radius:50%;margin-top:8px;flex-shrink:0}.item-body{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-weight:700;font-size:1rem;color:#1e1e24}.item-desc{margin:0;font-size:.88rem;color:#555;line-height:1.5}.toast-container{position:fixed;bottom:96px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:10px;z-index:1000;pointer-events:none}.toast{background:#1e1e24f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);color:#fff;padding:12px 24px;border-radius:16px;font-weight:600;font-size:.95rem;box-shadow:0 10px 25px #00000040;display:flex;align-items:center;gap:10px;pointer-events:auto;animation:slideUpFadeIn .35s cubic-bezier(.175,.885,.32,1.275) forwards,fadeOut .3s ease 2.7s forwards}@keyframes slideUpFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:72px;background:#ffffff1f;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border-top:1px solid rgba(255,255,255,.22);border-left:none;border-right:none;border-bottom:none;border-radius:24px 24px 0 0;display:flex;justify-content:space-around;align-items:center;padding:0 10px;box-shadow:0 -8px 32px #00000040;z-index:95;direction:rtl;transition:transform .3s cubic-bezier(.4,0,.2,1)}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ffffffa6;text-decoration:none;font-size:.8rem;font-weight:700;gap:4px;transition:all .25s cubic-bezier(.4,0,.2,1);flex:1;height:100%;cursor:pointer;border-radius:12px;-webkit-tap-highlight-color:transparent}.bottom-nav-item:hover{color:#fff;transform:translateY(-2px)}.bottom-nav-item:active{transform:scale(.95)}.bottom-nav-item.active{color:#fc0}.bottom-nav-item.active .nav-icon{filter:drop-shadow(0 0 6px rgba(255,204,0,.7))}.nav-icon{width:24px;height:24px;stroke-width:2;transition:transform .2s cubic-bezier(.4,0,.2,1)}.nav-icon-container{position:relative;display:flex;align-items:center;justify-content:center}.nav-badge{position:absolute;top:-6px;right:-8px;background-color:#ff3b30;color:#fff;font-size:.7rem;font-weight:800;border-radius:50%;min-width:16px;height:16px;padding:0 4px;display:none;justify-content:center;align-items:center;border:1px solid #ffffff;box-shadow:0 2px 4px #0003}.nav-badge.active{display:flex;animation:popScale .35s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes popScale{0%{transform:scale(.5)}to{transform:scale(1)}}