/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;background:#EAEDED;color:#0F1111;}

/* ===== HEADER ===== */
#header{background:#131921;display:flex;align-items:center;padding:8px 12px;gap:10px;position:sticky;top:0;z-index:100;}
.logo{color:#fff;text-decoration:none;display:flex;flex-direction:column;padding:4px 8px;border:1px solid transparent;}
.logo:hover{border-color:#FF9900;border-radius:2px;}
.logo-text{font-size:26px;font-weight:700;letter-spacing:-1px;}
.logo-text span{color:#FF9900;}
.logo-sub{font-size:9px;color:#ccc;letter-spacing:0.5px;}
.deliver{color:#ccc;font-size:11px;padding:4px 8px;border:1px solid transparent;cursor:pointer;white-space:nowrap;}
.deliver:hover{border-color:#FF9900;border-radius:2px;}
.deliver strong{display:block;color:#fff;font-size:13px;}
.search-bar{flex:1;display:flex;height:40px;}
.search-select{background:#F3F3F3;border:none;padding:0 8px;font-size:12px;color:#555;border-radius:4px 0 0 4px;cursor:pointer;height:100%;}
.search-input{flex:1;border:none;padding:0 10px;font-size:16px;outline:none;height:100%;}
.search-btn{background:#FF9900;border:none;padding:0 14px;border-radius:0 4px 4px 0;cursor:pointer;height:100%;}
.search-btn:hover{background:#FA8900;}
.header-link{color:#fff;text-decoration:none;font-size:12px;padding:4px 8px;border:1px solid transparent;white-space:nowrap;}
.header-link:hover{border-color:#FF9900;border-radius:2px;}
.header-link strong{display:block;font-size:14px;}
.cart-link{color:#fff;text-decoration:none;display:flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid transparent;font-weight:700;font-size:14px;}
.cart-link:hover{border-color:#FF9900;border-radius:2px;}
.cart-count{background:#FF9900;color:#0F1111;font-weight:700;font-size:13px;padding:0 5px;border-radius:2px;}

/* ===== NAVBAR ===== */
#navbar{background:#232F3E;display:flex;align-items:center;padding:0 12px;overflow-x:auto;}
.nav-link{color:#fff;text-decoration:none;font-size:13px;padding:9px 10px;white-space:nowrap;border:1px solid transparent;}
.nav-link:hover{border-color:#fff;border-radius:2px;}
.nav-link.active{background:#131921;}

/* ===== TOAST ===== */
.cart-toast{position:fixed;bottom:20px;right:20px;background:#131921;color:#fff;padding:12px 20px;border-radius:4px;z-index:999;display:none;border-left:4px solid #FF9900;animation:slideIn 0.3s ease;}
@keyframes slideIn{from{transform:translateX(100px);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* ===== CONFETTI ===== */
.confetti-piece{position:fixed;width:8px;height:8px;top:-10px;z-index:9999;border-radius:2px;animation:confettiFall 1.5s ease-in forwards;}
@keyframes confettiFall{to{transform:translateY(110vh) rotate(720deg);opacity:0;}}

/* ===== MOBILE HEADER ===== */
@media(max-width:640px){
  #header{flex-wrap:wrap;padding:6px 10px;gap:6px;}
  .logo{order:1;}
  .search-bar{order:3;flex:1 1 100%;height:38px;}
  .search-select{display:none;}
  .cart-link{order:2;margin-left:auto;}
  .deliver{display:none;}
  .header-link{display:none;}
}

/* ===== SPINNER ===== */
.spinner{display:inline-block;width:18px;height:18px;border:2px solid #ddd;border-top-color:#FF9900;border-radius:50%;animation:spin 0.8s linear infinite;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== MODAL ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;align-items:center;justify-content:center;}
.modal-overlay.active{display:flex;}
.modal{background:#fff;border-radius:4px;padding:25px;max-width:460px;width:90%;position:relative;max-height:90vh;overflow-y:auto;}
.modal-close{position:absolute;top:10px;right:14px;font-size:24px;cursor:pointer;border:none;background:none;color:#555;}

/* ===== FORMS ===== */
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:13px;font-weight:700;margin-bottom:4px;}
.form-group input,.form-group select,.form-group textarea{width:100%;border:1px solid #aaa;border-radius:4px;padding:8px;font-size:14px;outline:none;font-family:Arial,sans-serif;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#FF9900;box-shadow:0 0 0 2px rgba(255,153,0,0.3);}
.form-submit{width:100%;background:#FFD814;border:1px solid #FCD200;border-radius:4px;padding:10px;font-size:15px;font-weight:500;cursor:pointer;margin-top:8px;}
.form-submit:hover{background:#F7CA00;}
.form-submit:disabled{opacity:0.6;cursor:not-allowed;}