/* Shared styles extracted from menu.html */
:root{--primary:#ff6ec7;--secondary:#ff9ed8;--accent:#ff85db;--light-bg:#ffeef8}
body{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;width:100%;height:100%;overflow-x:hidden}
html{height:100%}*{box-sizing:border-box}
.app-wrapper{width:100%;min-height:100%;background:linear-gradient(135deg,#ffeef8 0%,#ffe4f3 50%,#ffd4eb 100%);position:relative}
.header{
  padding:12px 16px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(12px);
  border-bottom:2px solid rgba(255,182,223,0.4);
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.header-left{display:flex;align-items:center;gap:10px;flex:1;}
.cafe-logo{width:40px;height:40px;border-radius:8px;object-fit:cover;box-shadow:0 2px 8px rgba(255,110,199,0.2)}
.cafe-title-group{text-align:left}
.cafe-name{font-size:18px;font-weight:700;margin:0;background:linear-gradient(45deg,#ff6ec7,#ff9ed8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.5px}
.cafe-slogan{font-size:11px;color:var(--primary);margin:2px 0 0 0;font-style:italic;font-weight:500}
.header-right{display:flex;align-items:center;gap:10px}
.table-info{padding:6px 12px;background:linear-gradient(135deg,rgba(255,110,199,0.1),rgba(255,158,216,0.1));border:1.5px solid rgba(255,182,223,0.5);border-radius:20px;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--primary);font-weight:600;white-space:nowrap}
.header-cart-btn{
  background:linear-gradient(135deg,rgba(255,110,199,0.1),rgba(255,158,216,0.1));
  border:1.5px solid rgba(255,182,223,0.5);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 2px 6px rgba(255,110,199,0.08);
}
.header-cart-btn:hover{
  background:linear-gradient(135deg,rgba(255,110,199,0.15),rgba(255,158,216,0.15));
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(255,110,199,0.15);
}
.header-cart-badge{background:var(--primary);color:white;border-radius:50%;padding:2px 5px;font-size:10px;position:absolute;top:-5px;right:-5px;min-width:16px;text-align:center;font-weight:700}
.search-container{padding:10px 0;margin:8px 0 0 0}
.search-container input{box-shadow:0 2px 8px rgba(255,110,199,0.1);font-weight:500}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);display:flex;justify-content:space-around;padding:10px 0;border-top:2px solid rgba(255,182,223,0.3);z-index:100}
.nav-btn{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:8px 16px;border-radius:12px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);color:#aaa;font-size:12px;font-weight:500;position:relative}
.nav-btn.active{background:linear-gradient(135deg,var(--primary),var(--secondary));color:white;transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,110,199,0.25)}
.nav-btn:hover{transform:translateY(-2px);color:var(--primary)}
.nav-icon{font-size:20px}
.cart-badge{position:absolute;top:4px;right:4px;background:#ff4d94;color:white;border-radius:50%;width:18px;height:18px;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:bold;box-shadow:0 2px 5px rgba(255,110,199,0.3)}
.page{display:none;padding:12px 14px 100px 14px;animation:fadeIn 0.4s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.category-tabs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:12px 0;
  margin:8px 0 16px 0;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.category-tabs::-webkit-scrollbar{display:none}
.category-tab{
  padding:10px 18px;
  background:white;
  border:2px solid #ffb6df;
  border-radius:25px;
  cursor:pointer;
  white-space:nowrap;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size:13px;
  color:#ff6ec7;
  font-weight:600;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(255,110,199,0.08);
}
.category-tab:hover{background:#fff5f9;border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,110,199,0.15)}
.category-tab.active{background:linear-gradient(135deg,#ff6ec7,#ff9ed8);color:white;border-color:transparent;box-shadow:0 6px 16px rgba(255,110,199,0.35);font-weight:700;transform:scale(1.05)}
.menu-grid{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:20px;
  padding:8px 0;
  justify-content:center;
}
@media(min-width:600px){.menu-grid{justify-content:flex-start;gap:16px}}
@media(min-width:900px){.menu-grid{gap:18px}}
.menu-item{
  background:white;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 2px 10px rgba(255,110,199,0.1);
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,182,223,0.2);
  position:relative;
  height:auto;
  max-width:160px;
  margin:0 auto;
}
.menu-item:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(255,110,199,0.2);
  border-color:rgba(255,110,199,0.4);
}
.menu-item::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,#ff6ec7,#ff9ed8);
  opacity:0;
  transition:opacity 0.3s ease;
  z-index:1;
}
.menu-item:hover::before{opacity:1}
.menu-item-image{
  width:100%;
  height:140px;
  background:linear-gradient(135deg,#ffd4eb,#ffe4f3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
  border-radius:14px 14px 0 0;
}
.menu-item-image img{width:100%;height:100%;object-fit:cover;display:block}
.menu-item-info{
  padding:12px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  text-align:center;
}
.menu-item-name{font-size:12px;font-weight:700;color:#2d2c2e;margin:0;line-height:1.3;letter-spacing:-0.3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.menu-item-category{font-size:9px;color:#999;margin:0;font-weight:600;text-transform:uppercase;letter-spacing:0.3px}
.menu-item-price{font-size:14px;font-weight:700;color:var(--primary);margin:0;text-shadow:0 1px 2px rgba(0,0,0,0.05)}
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:200;animation:fadeIn 0.3s ease}
.modal.active{display:flex;align-items:center;justify-content:center;padding:20px}
.modal-content{background:white;border-radius:20px;max-width:500px;width:100%;max-height:90%;overflow-y:auto;animation:slideUp 0.3s ease;position:relative}
@keyframes slideUp{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-close{position:absolute;top:12px;right:12px;background:rgba(255,110,199,0.1);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:18px;color:#ff6ec7;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;z-index:1;font-weight:bold}
.modal-close:hover{background:#ff6ec7;color:white;transform:rotate(90deg)}
.modal-image{width:100%;height:200px;background:linear-gradient(135deg,#ffd4eb,#ffe4f3);display:flex;align-items:center;justify-content:center;font-size:80px;border-radius:20px 20px 0 0;overflow:hidden;position:relative}
.modal-image img{width:100%;height:100%;object-fit:cover}
.modal-body{padding:20px}
.modal-title{font-size:22px;font-weight:700;color:#2d2c2e;margin:0 0 8px 0;letter-spacing:-0.3px}
.modal-price{font-size:18px;font-weight:700;color:var(--primary);margin:0 0 12px 0}
.modal-description{font-size:13px;color:#666;line-height:1.6;margin:0 0 16px 0}
.addons-section{margin:16px 0}
.addons-title{font-size:14px;font-weight:700;color:#2d2c2e;margin:0 0 10px 0}
.addon-item{display:flex;align-items:center;gap:10px;padding:10px;background:linear-gradient(135deg,rgba(255,182,223,0.1),rgba(255,158,216,0.05));border-radius:10px;margin-bottom:8px;border:1px solid rgba(255,182,223,0.2);transition:all 0.2s ease}
.addon-item:hover{background:linear-gradient(135deg,rgba(255,182,223,0.15),rgba(255,158,216,0.1));border-color:rgba(255,110,199,0.3)}
.addon-checkbox{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}
.addon-label{flex:1;font-size:13px;color:#333;cursor:pointer;font-weight:500}
.addon-price{font-size:13px;font-weight:700;color:var(--primary)}
.add-to-cart-btn{
  width:100%;
  padding:14px;
  background:linear-gradient(135deg,#ff6ec7,#ff9ed8);
  color:white;
  border:none;
  border-radius:12px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top:16px;
  box-shadow:0 4px 15px rgba(255,110,199,0.25);
}
.add-to-cart-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,110,199,0.35)}
.add-to-cart-btn:active{transform:scale(0.98)}
.cart-items{margin-bottom:20px}
.cart-item{background:white;border-radius:12px;padding:14px;margin-bottom:12px;display:flex;gap:12px;box-shadow:0 2px 10px rgba(255,110,199,0.1);animation:slideIn 0.3s ease;border:1px solid rgba(255,182,223,0.2)}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
.cart-item-image{width:70px;height:70px;background:linear-gradient(135deg,#ffd4eb,#ffe4f3);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0;overflow:hidden}
.cart-item-image img{width:100%;height:100%;object-fit:cover}
.cart-item-details{flex:1}
.cart-item-name{font-size:14px;font-weight:700;color:#2d2c2e;margin:0 0 4px 0}
.cart-item-addons{font-size:11px;color:#999;margin:0 0 8px 0}
.quantity-controls{display:flex;align-items:center;gap:8px}
.qty-btn{width:28px;height:28px;background:linear-gradient(135deg,rgba(255,110,199,0.1),rgba(255,158,216,0.05));border:1px solid rgba(255,182,223,0.3);border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;color:var(--primary);display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}
.qty-btn:hover{background:var(--primary);color:white;border-color:var(--primary)}
.qty-display{font-size:14px;font-weight:700;color:#2d2c2e;min-width:28px;text-align:center}
.cart-item-price{font-size:15px;font-weight:700;color:var(--primary);text-align:right}
.cart-summary{background:white;border-radius:12px;padding:16px;margin-bottom:20px;box-shadow:0 2px 10px rgba(255,110,199,0.1);border:1px solid rgba(255,182,223,0.2)}
.summary-row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:14px}
.summary-label{color:#666;font-weight:500}
.summary-value{font-weight:700;color:#2d2c2e}
.summary-total{border-top:2px solid rgba(255,110,199,0.2);padding-top:10px;margin-top:10px;font-size:18px;font-weight:700;color:var(--primary)}
.checkout-btn{
  width:100%;
  padding:16px;
  background:linear-gradient(135deg,#ff6ec7,#ff9ed8);
  color:white;
  border:none;
  border-radius:12px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation:pulse-glow 2s ease-in-out infinite;
  position:relative;
  box-shadow:0 4px 15px rgba(255,110,199,0.25);
}
@keyframes pulse-glow{0%,100%{box-shadow:0 4px 15px rgba(255,110,199,0.25)}50%{box-shadow:0 6px 25px rgba(255,110,199,0.4)}}
.checkout-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(255,110,199,0.35)}
.checkout-btn::before{content:'🛒';position:absolute;left:16px;font-size:18px;animation:cartBounce 1.5s ease-in-out infinite}
@keyframes cartBounce{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.empty-state{text-align:center;padding:60px 20px}
.empty-icon{font-size:80px;margin-bottom:20px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.empty-text{font-size:16px;color:#999;margin:0}
.empty-cart-icon{display:inline-block;animation:float 3s ease-in-out infinite,cartEmptyShake 1s ease-in-out infinite}
@keyframes cartEmptyShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.payment-form{background:white;border-radius:12px;padding:16px;margin-bottom:20px;box-shadow:0 2px 10px rgba(255,110,199,0.1);animation:slideIn 0.5s ease;border:1px solid rgba(255,182,223,0.2)}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;font-weight:700;color:#2d2c2e;margin-bottom:8px}
.form-input{width:100%;padding:10px 12px;border:2px solid #ffb6df;border-radius:8px;font-size:14px;transition:all 0.3s ease;background:white;color:#2d2c2e}
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,110,199,0.1)}
.payment-methods{display:grid;gap:10px}
.payment-method{padding:12px;background:white;border:2px solid #ffb6df;border-radius:10px;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:10px;font-weight:500}
.payment-method:hover{border-color:var(--primary);transform:translateX(4px);box-shadow:0 2px 8px rgba(255,110,199,0.1)}
.payment-method.selected{background:linear-gradient(135deg,rgba(255,110,199,0.24),rgba(255,158,216,0.18));border-color:#d63292;color:#7a174f;box-shadow:0 6px 16px rgba(255,110,199,0.28)}
.payment-icon{font-size:20px}
.payment-name{font-size:14px;font-weight:600;color:#333}
.tracking-container{background:white;border-radius:12px;padding:24px 16px;margin-bottom:20px;box-shadow:0 2px 10px rgba(255,110,199,0.1);border:1px solid rgba(255,182,223,0.2)}
.tracking-steps{position:relative;display:flex;flex-direction:column;gap:32px}
.tracking-step{display:flex;align-items:center;gap:16px;position:relative}
.step-icon{width:50px;height:50px;background:linear-gradient(135deg,rgba(255,182,223,0.2),rgba(255,158,216,0.1));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;transition:all 0.5s ease;position:relative;z-index:2;border:2px solid rgba(255,182,223,0.3)}
.tracking-step.active .step-icon{background:linear-gradient(135deg,#ff6ec7,#ff9ed8);animation:pulse 2s ease-in-out infinite;box-shadow:0 0 16px rgba(255,110,199,0.5);border-color:transparent}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.tracking-step.completed .step-icon{background:linear-gradient(135deg,#ff6ec7,#ff9ed8);border-color:transparent}
.step-info{flex:1}
.step-title{font-size:14px;font-weight:700;color:#2d2c2e;margin:0 0 4px 0}
.step-time{font-size:11px;color:#999;margin:0}
.tracking-step.active .step-title{color:var(--primary)}
.step-connector{position:absolute;left:24px;top:50px;width:2px;height:32px;background:rgba(255,182,223,0.3);z-index:1}
.tracking-step.completed .step-connector{background:linear-gradient(180deg,#ff6ec7,#ff9ed8)}
.tracking-step:last-child .step-connector{display:none}
.estimated-time{text-align:center;margin-top:24px;padding:12px;background:linear-gradient(135deg,rgba(255,182,223,0.1),rgba(255,158,216,0.05));border-radius:10px;border:1px solid rgba(255,182,223,0.2)}
.time-label{font-size:12px;color:#666;margin:0 0 4px 0;font-weight:500}
.time-value{font-size:22px;font-weight:700;color:var(--primary);margin:0}
.flying-item{position:fixed;pointer-events:none;z-index:300;font-size:36px;animation:flyToCart 0.8s ease-in-out forwards}
@keyframes flyToCart{0%{opacity:1;transform:translate(0,0) scale(1)}50%{opacity:0.8;transform:translate(var(--tx),var(--ty)) scale(0.5)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0.1)}}
.loading{opacity:0.6;pointer-events:none}
.spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,0.3);border-radius:50%;border-top-color:white;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#ff6ec7,#ff9ed8);color:white;padding:12px 24px;border-radius:20px;box-shadow:0 6px 20px rgba(255,110,199,0.3);z-index:300;animation:toastSlide 0.5s ease;display:none;font-weight:600;font-size:14px}
.toast.show{display:block}
@keyframes toastSlide{from{transform:translate(-50%,-100px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.welcome-text{text-align:center;color:var(--primary);font-size:16px;margin:0 0 16px 0;font-weight:600}
/* ===== INPUT FIELD STYLING ===== */
input[type="text"],input[type="password"],input[type="email"],input[type="number"],input[type="date"],input[type="time"],input[type="url"],input[type="tel"],textarea,select{width:100%!important;padding:0.75rem 0.875rem!important;border:2px solid #ffb6df!important;border-radius:0.5rem!important;font-size:0.95rem!important;background-color:#fafafa!important;transition:all 0.3s ease!important;box-sizing:border-box!important;font-family:inherit!important}
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="date"]:focus,input[type="time"]:focus,input[type="url"]:focus,input[type="tel"]:focus,textarea:focus,select:focus{border-color:var(--primary)!important;background-color:#fff!important;outline:none!important;box-shadow:0 0 0 3px rgba(255,110,199,0.1)!important}
input[type="text"]::placeholder,input[type="password"]::placeholder,input[type="email"]::placeholder,input[type="number"]::placeholder,input[type="date"]::placeholder,input[type="time"]::placeholder,input[type="url"]::placeholder,input[type="tel"]::placeholder,textarea::placeholder{color:#d1d5db!important}
input[type="checkbox"],input[type="radio"]{width:18px!important;height:18px!important;cursor:pointer!important;accent-color:var(--primary)!important}
input[type="file"]{padding:0.5rem!important;border:2px dashed #ffb6df!important;border-radius:0.5rem!important;cursor:pointer!important;background-color:#fafafa!important}
textarea{resize:vertical!important;min-height:120px!important;line-height:1.5!important}
label{display:block!important;margin-bottom:0.5rem!important;color:#333!important;font-weight:500!important}.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:200;animation:fadeIn .3s ease}.modal.active{display:flex;align-items:center;justify-content:center;padding:20px}.modal-content{background:white;border-radius:25px;max-width:500px;width:100%;max-height:90%;overflow-y:auto;animation:slideUp .3s ease;position:relative}@keyframes slideUp{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close{position:absolute;top:15px;right:15px;background:rgba(255,110,199,.1);border:none;width:35px;height:35px;border-radius:50%;cursor:pointer;font-size:20px;color:#ff6ec7;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:1}.modal-close:hover{background:#ff6ec7;color:white;transform:rotate(90deg)}.modal-image{width:100%;height:200px;background:linear-gradient(135deg,#ffd4eb,#ffe4f3);display:flex;align-items:center;justify-content:center;font-size:80px;border-radius:25px 25px 0 0}.modal-body{padding:20px}.modal-title{font-size:24px;font-weight:bold;color:#333;margin:0 0 10px 0}.modal-price{font-size:20px;font-weight:bold;color:#ff6ec7;margin:0 0 15px 0}.modal-description{font-size:14px;color:#666;line-height:1.6;margin:0 0 20px 0}.addons-section{margin:20px 0}.addons-title{font-size:16px;font-weight:600;color:#333;margin:0 0 12px 0}.addon-item{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(255,182,223,.1);border-radius:12px;margin-bottom:8px}.addon-checkbox{width:20px;height:20px;accent-color:#ff6ec7;cursor:pointer}.addon-label{flex:1;font-size:14px;color:#333;cursor:pointer}.addon-price{font-size:14px;font-weight:600;color:#ff6ec7}.add-to-cart-btn{width:100%;padding:15px;background:linear-gradient(135deg,#ff6ec7,#ff9ed8);color:white;border:none;border-radius:15px;font-size:16px;font-weight:bold;cursor:pointer;transition:all .3s ease;margin-top:20px}.add-to-cart-btn:hover{transform:scale(1.02);box-shadow:0 8px 20px rgba(255,110,199,.3)}.cart-items{margin-bottom:20px}.cart-item{background:white;border-radius:15px;padding:15px;margin-bottom:12px;display:flex;gap:15px;box-shadow:0 2px 10px rgba(255,110,199,.1);animation:slideIn .3s ease}@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.cart-item-image{width:80px;height:80px;background:linear-gradient(135deg,#ffd4eb,#ffe4f3);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:36px;flex-shrink:0}.cart-item-details{flex:1}.cart-item-name{font-size:16px;font-weight:600;color:#333;margin:0 0 5px 0}.cart-item-addons{font-size:12px;color:#999;margin:0 0 10px 0}.quantity-controls{display:flex;align-items:center;gap:10px}.qty-btn{width:30px;height:30px;background:rgba(255,110,199,.1);border:none;border-radius:8px;cursor:pointer;font-size:16px;color:#ff6ec7;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.qty-btn:hover{background:#ff6ec7;color:white}.qty-display{font-size:16px;font-weight:600;color:#333;min-width:30px;text-align:center}.cart-item-price{font-size:16px;font-weight:bold;color:#ff6ec7;text-align:right}.cart-summary{background:white;border-radius:15px;padding:20px;margin-bottom:20px;box-shadow:0 4px 15px rgba(255,110,199,.1)}.summary-row{display:flex;justify-content:space-between;margin-bottom:12px;font-size:16px}.summary-label{color:#666}.summary-value{font-weight:600;color:#333}.summary-total{border-top:2px solid rgba(255,110,199,.2);padding-top:12px;margin-top:12px;font-size:20px;font-weight:bold;color:#ff6ec7}.checkout-btn{width:100%;padding:18px;background:linear-gradient(135deg,#ff6ec7,#ff9ed8);color:white;border:none;border-radius:15px;font-size:18px;font-weight:bold;cursor:pointer;transition:all .3s.ease;animation:glow 2s.ease-in-out infinite;position:relative}@keyframes glow{0%,100%{box-shadow:0 4px 20px rgba(255,110,199,.3)}50%{box-shadow:0 4px 30px rgba(255,110,199,.5)}}.checkout-btn:hover{transform:scale(1.02)}.checkout-btn::before{content:'🛒';position:absolute;left:20px;font-size:20px;animation:cartMove 1.5s ease-in-out infinite}@keyframes cartMove{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}.empty-state{text-align:center;padding:60px 20px}.empty-icon{font-size:80px;margin-bottom:20px;animation:float 3s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.empty-text{font-size:18px;color:#999;margin:0}.payment-form{background:white;border-radius:15px;padding:20px;margin-bottom:20px;box-shadow:0 4px 15px rgba(255,110,199,.1);animation:slideIn .5s ease}.form-group{margin-bottom:20px}.form-label{display:block;font-size:14px;font-weight:600;color:#333;margin-bottom:8px}.form-input{width:100%;padding:12px;border:2px solid #ffb6df;border-radius:12px;font-size:14px;transition:all .3s.ease}.form-input:focus{outline:none;border-color:#ff6ec7;box-shadow:0 0 0 4px rgba(255,110,199,.1)}.payment-methods{display:grid;gap:12px}.payment-method{padding:15px;background:white;border:2px solid #ffb6df;border-radius:12px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:12px}.payment-method:hover{border-color:#ff6ec7;transform:translateX(5px)}.payment-method.selected{background:linear-gradient(135deg,rgba(255,110,199,.1),rgba(255,158,216,.1));border-color:#ff6ec7;box-shadow:0 4px 15px rgba(255,110,199,.2)}.payment-icon{font-size:24px}.payment-name{font-size:16px;font-weight:600;color:#333}.tracking-container{background:white;border-radius:15px;padding:30px 20px;margin-bottom:20px;box-shadow:0 4px 15px rgba(255,110,199,.1)}.tracking-steps{position:relative;display:flex;flex-direction:column;gap:40px}.tracking-step{display:flex;align-items:center;gap:20px;position:relative}.step-icon{width:60px;height:60px;background:rgba(255,182,223,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;transition:all .5s ease;position:relative;z-index:2}.tracking-step.active .step-icon{background:linear-gradient(135deg,#ff6ec7,#ff9ed8);animation:pulse 2s.ease-in-out infinite;box-shadow:0 0 20px rgba(255,110,199,.5)}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}.tracking-step.completed .step-icon{background:linear-gradient(135deg,#ff6ec7,#ff9ed8)}.step-info{flex:1}.step-title{font-size:16px;font-weight:600;color:#333;margin:0 0 5px 0}.step-time{font-size:12px;color:#999;margin:0}.tracking-step.active .step-title{color:#ff6ec7}.step-connector{position:absolute;left:30px;top:60px;width:3px;height:40px;background:rgba(255,182,223,.3);z-index:1}.tracking-step.completed .step-connector{background:linear-gradient(180deg,#ff6ec7,#ff9ed8)}.tracking-step:last-child .step-connector{display:none}.estimated-time{text-align:center;margin-top:30px;padding:15px;background:rgba(255,182,223,.1);border-radius:12px}.time-label{font-size:14px;color:#666;margin:0 0 5px 0}.time-value{font-size:24px;font-weight:bold;color:#ff6ec7;margin:0}.flying-item{position:fixed;pointer-events:none;z-index:300;font-size:40px;animation:flyToCart .8s ease-in-out forwards}@keyframes flyToCart{0%{opacity:1;transform:translate(0,0) scale(1)}50%{opacity:.8;transform:translate(var(--tx),var(--ty)) scale(.5)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.1)}}.loading{opacity:.6;pointer-events:none}.spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:white;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#ff6ec7,#ff9ed8);color:white;padding:15px 30px;border-radius:25px;box-shadow:0 8px 25px rgba(255,110,199,.3);z-index:300;animation:toastSlide .5s ease;display:none}.toast.show{display:block}@keyframes toastSlide{from{transform:translate(-50%,-100px);opacity:0}to{transform:translate(-50%,0);opacity:1}}.welcome-text{text-align:center;color:#ff6ec7;font-size:18px;margin:0 0 20px 0}
/* ===== INPUT FIELD STYLING ===== */
input[type="text"],input[type="password"],input[type="email"],input[type="number"],input[type="date"],input[type="time"],input[type="url"],input[type="tel"],textarea,select{width:100%!important;padding:0.75rem 0.875rem!important;border:2px solid #ffb6df!important;border-radius:0.5rem!important;font-size:0.95rem!important;background-color:#fafafa!important;transition:all 0.3s ease!important;box-sizing:border-box!important;font-family:inherit!important}input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="date"]:focus,input[type="time"]:focus,input[type="url"]:focus,input[type="tel"]:focus,textarea:focus,select:focus{border-color:#ff6ec7!important;background-color:#fff!important;outline:none!important;box-shadow:0 0 0 3px rgba(255,110,199,0.1)!important}input[type="text"]::placeholder,input[type="password"]::placeholder,input[type="email"]::placeholder,input[type="number"]::placeholder,input[type="date"]::placeholder,input[type="time"]::placeholder,input[type="url"]::placeholder,input[type="tel"]::placeholder,textarea::placeholder{color:#d1d5db!important}input[type="checkbox"],input[type="radio"]{width:18px!important;height:18px!important;cursor:pointer!important;accent-color:#ff6ec7!important}input[type="file"]{padding:0.5rem!important;border:2px dashed #ffb6df!important;border-radius:0.5rem!important;cursor:pointer!important;background-color:#fafafa!important}textarea{resize:vertical!important;min-height:120px!important;line-height:1.5!important}label{display:block!important;margin-bottom:0.5rem!important;color:#333!important;font-weight:500!important}