.cafe-container{max-width:1200px;width:100%;margin:0 auto}.cafe-cat{background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 15px rgb(0 0 0 / .05);display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth}.cafe-cat::-webkit-scrollbar{height:6px}.cafe-cat::-webkit-scrollbar-track{background:#f5f5f5;border-radius:10px}.cafe-cat::-webkit-scrollbar-thumb{background:#d3d3d3;border-radius:10px}.cafe-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:110px;padding:16px 12px;background:#fafafa;border:1px solid #e6e6e6;border-radius:12px;cursor:pointer;transition:all 0.25s ease;user-select:none}.cafe-btn:hover{background:#fff;border-color:#cfcfff;box-shadow:0 3px 10px rgb(0 0 0 / .07)}.cafe-btn.active{background:#f0f2ff;border:1.5px solid #5a67d8;box-shadow:0 3px 10px rgb(102 126 234 / .15);transform:translateY(-2px)}.cafe-btn.active .category-icon{transform:scale(1.05);filter:brightness(1.1)}.cafe-btn.active .category-name{color:#3949ab;font-weight:600}.cafe-btn img{width:42px;height:42px;object-fit:contain;transition:all 0.3s ease}.cafe-btn:hover .category-icon{transform:scale(1.05)}.category-name{font-size:14px;font-weight:500;color:#555;text-align:center;white-space:nowrap;transition:color 0.3s ease}.cafe-btn:active{transform:scale(.97)}@media (max-width:768px){.cafe-cat{padding:5px 10px;gap:10px}.cafe-btn{min-width:90px;padding:12px 8px}.cafe-btn img{width:60px;height:30px}.category-name{font-size:12px}}.variant-container{display:flex;gap:12px;overflow-x:auto;padding-bottom:5px;scroll-behavior:smooth}.variant-container::-webkit-scrollbar{height:6px}.variant-container::-webkit-scrollbar-track{background:#f5f5f5;border-radius:10px}.variant-container::-webkit-scrollbar-thumb{background:#d3d3d3;border-radius:10px}.variant-item{flex:0 0 auto;width:100px;background:#fafafa;border:1.5px solid #e6e6e6;border-radius:12px;padding:10px 8px;cursor:pointer;text-align:center;transition:all 0.25s ease;display:flex;flex-direction:column;align-items:center;justify-content:center}.variant-item img{width:50px;height:50px;object-fit:cover;border-radius:8px;margin-bottom:6px;transition:transform 0.2s ease}.variant-item:hover{background:#fff;border-color:#cfcfff;box-shadow:0 3px 8px rgb(0 0 0 / .07);transform:translateY(-2px)}.variant-item.selected{border-color:#5a67d8;background-color:#f0f2ff;box-shadow:0 3px 10px rgb(102 126 234 / .15)}.variant-item p{font-size:13px;font-weight:500;margin:0;color:#333;line-height:1.2}@media (max-width:768px){.variant-item{width:90px;padding:8px 6px}.variant-item img{width:40px;height:40px}.variant-item p{font-size:12px}}.addon-popup-backdrop{display:none;position:fixed;inset:0;background:rgb(0 0 0 / .4);backdrop-filter:blur(3px);z-index:9998}.addon-popup{display:none;position:fixed;bottom:0;left:0;width:100%;background:#fff;box-shadow:0 -6px 20px rgb(0 0 0 / .25);border-radius:16px 16px 0 0;z-index:9999;max-height:75vh;overflow-y:auto;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}.addon-popup-content{padding:50px 20px 70px;position:relative}.addon-category-heading{margin:15px 0 8px;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd;padding-bottom:5px;transition:color 0.3s}.addon-category-heading:hover{color:#28a745}.addon-category-heading .arrow{display:inline-block;transition:transform 0.3s ease}.addon-category-container{padding-left:0;max-height:0;overflow:hidden;transition:max-height 0.4s ease;display:flex;flex-direction:column;gap:10px}.addon-item{display:flex;align-items:center;justify-content:space-between;background:#f9f9f9;border-radius:12px;padding:12px 15px;transition:background 0.2s,transform 0.2s;cursor:pointer}.addon-item:hover{background:#e6f7ee;transform:translateY(-2px)}.addon-item-left{display:flex;align-items:center;gap:12px}.addon-item-left img{width:50px;height:50px;border-radius:8px;object-fit:cover;flex-shrink:0}.addon-item-left p{font-size:15px;font-weight:500;margin:0}.addon-checkbox{width:20px;height:20px;accent-color:#28a745;cursor:pointer}.confirm-btn{position:sticky;bottom:10px;width:calc(100% - 40px);margin:0 auto;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;background:linear-gradient(90deg,#ff9f00,#e68a00);color:#fff;box-shadow:0 4px 12px rgb(0 0 0 / .15);transition:all 0.3s;z-index:10;display:block}.close-btn{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:#fff;width:42px;height:42px;border-radius:50%;font-size:22px;font-weight:700;color:#333;border:none;cursor:pointer;box-shadow:0 4px 14px rgb(0 0 0 / .3);display:flex;align-items:center;justify-content:center;z-index:20;transition:all 0.25s ease}.close-btn:hover{background:#f0f0f0;transform:translateX(-50%) scale(1.15);box-shadow:0 6px 18px rgb(0 0 0 / .35)}.addon-popup-header{text-align:center;margin-bottom:20px}.addon-popup-header h3{font-size:20px;font-weight:700;color:#28a745;margin:0}.addon-popup-header .addon-popup-subtitle{font-size:14px;color:#555;margin-top:5px;font-weight:500}