/* ===== CART & SHOP ADDITIONS ===== */
.cart-fab{position:fixed;bottom:2rem;right:2rem;z-index:1200;background:#000;color:white;border:none;border-radius:50%;width:60px;height:60px;font-size:1.4rem;cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;transition:transform 0.2s,box-shadow 0.2s;}
.cart-fab:hover{transform:scale(1.08);box-shadow:0 12px 40px rgba(0,197,255,0.5);}
.cart-badge{position:absolute;top:-4px;right:-4px;background:#ff3b5c;color:white;border-radius:50%;width:22px;height:22px;font-size:0.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid white;}
.overlay-bg{display:none;position:fixed;inset:0;background:rgba(0,20,40,0.55);z-index:1300;backdrop-filter:blur(4px);}
.overlay-bg.open{display:block;}
.cart-drawer{position:fixed;right:-420px;top:0;bottom:0;width:420px;max-width:100vw;background:white;z-index:1400;box-shadow:-12px 0 48px rgba(0,0,0,0.15);transition:right 0.35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;}
.cart-drawer.open{right:0;}
.cart-drawer-head{padding:1.5rem;border-bottom:1px solid var(--accent-light);display:flex;align-items:center;justify-content:space-between;}
.cart-drawer-head h3{font-size:1.2rem;font-weight:800;}
.cart-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-muted);}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.5rem;}
.cart-item{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--gray-light);align-items:center;}
.cart-item-img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--off-white);}
.cart-item-info{flex:1;}
.cart-item-name{font-weight:700;font-size:0.9rem;margin-bottom:0.25rem;}
.cart-item-price{color:var(--accent);font-weight:700;font-size:0.85rem;}
.cart-item-qty{display:flex;align-items:center;gap:0.5rem;margin-top:0.4rem;}
.qty-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--accent-light);background:var(--off-white);cursor:pointer;font-weight:800;font-size:0.9rem;display:flex;align-items:center;justify-content:center;}
.qty-val{min-width:28px;text-align:center;font-weight:700;font-size:0.9rem;}
.remove-item{background:none;border:none;color:#ff3b5c;cursor:pointer;font-size:0.75rem;margin-left:auto;font-weight:700;}
.cart-footer{padding:1.5rem;border-top:1px solid var(--accent-light);}
.cart-total{display:flex;justify-content:space-between;margin-bottom:1rem;font-weight:700;font-size:1.1rem;}
.cart-total span:last-child{color:var(--accent);}
.btn-checkout{width:100%;padding:1rem;background:var(--accent);color:white;border:none;border-radius:10px;font-size:1rem;font-weight:800;cursor:pointer;transition:background 0.2s;}
.btn-checkout:hover{background:var(--accent-dark);}
.empty-cart{text-align:center;padding:3rem 1rem;color:var(--text-muted);}
.empty-cart .ec-icon{font-size:3rem;margin-bottom:1rem;}

/* MODAL */
.modal{display:none;position:fixed;inset:0;z-index:1500;align-items:center;justify-content:center;padding:1rem;}
.modal.open{display:flex;}
.modal-box{background:white;border-radius:20px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,0.2);animation:modalIn 0.3s ease;scrollbar-width:none;-ms-overflow-style:none;}
.modal-box::-webkit-scrollbar{display:none;}
@keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(0.97);}to{opacity:1;transform:none;}}
.modal-head{padding:1.5rem 2rem 1rem;border-bottom:1px solid var(--accent-light);display:flex;justify-content:space-between;align-items:center;}
.modal-head h3{font-size:1.25rem;font-weight:800;}
.modal-body{padding:2rem;}
.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-muted);}

/* QTY MODAL */
.qty-modal-img{width:100%;height:180px;object-fit:cover;border-radius:12px;margin-bottom:1.25rem;}
.qty-modal-name{font-size:1.3rem;font-weight:800;margin-bottom:0.25rem;}
.qty-modal-price{color:var(--accent);font-weight:700;font-size:1rem;margin-bottom:1.5rem;}
.qty-modal-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;}
.qty-modal-row label{font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);width:80px;}
.qty-modal-controls{display:flex;align-items:center;gap:0.75rem;}
.qm-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--accent-light);background:var(--off-white);cursor:pointer;font-size:1rem;font-weight:800;}
.qm-input{width:80px;text-align:center;border:1px solid var(--gray-light);border-radius:8px;padding:0.5rem;font-family:DM Sans,sans-serif;font-weight:700;font-size:0.95rem;}
.qty-unit-tabs{display:flex;gap:0.5rem;}
.unit-tab{padding:0.4rem 0.9rem;border:1px solid var(--accent-light);border-radius:6px;background:transparent;cursor:pointer;font-size:0.8rem;font-weight:700;color:var(--text-muted);transition:all 0.2s;}
.unit-tab.active{background:var(--accent);color:white;border-color:var(--accent);}
.qty-total-box{background:var(--off-white);border-radius:10px;padding:1rem;margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:center;}
.qty-total-label{font-size:0.8rem;color:var(--text-muted);font-weight:600;}
.qty-total-val{font-size:1.4rem;font-weight:800;color:var(--accent);}
.qty-modal-btns{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.btn-atc{padding:0.875rem;border:2px solid var(--accent);border-radius:10px;background:transparent;color:var(--accent);font-weight:800;font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.2s;}
.btn-atc:hover{background:var(--accent);color:white;}
.btn-buynow{padding:0.875rem;border:none;border-radius:10px;background:var(--accent);color:white;font-weight:800;font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.2s;}
.btn-buynow:hover{background:var(--accent-dark);}

/* USER DROPDOWN UI */
.user-dropdown { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; background: var(--accent-pale); color: var(--accent-dark); border: 1px solid var(--accent-light); border-radius: 30px; font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 0.9rem; cursor: pointer; transition: all 0.2s; }
.user-dropdown:hover { background: var(--accent); color: white; }
.user-dropdown svg { transition: transform 0.2s; }
.user-dropdown:hover svg { transform: rotate(180deg); }
.ud-menu { position: absolute; top: calc(100% + 10px); right: 0; background: white; border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.12); width: 160px; overflow: hidden; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; z-index: 2000; border: 1px solid var(--gray-light); }
.ud-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.ud-menu a { padding: 0.8rem 1rem; color: var(--text-dark); text-decoration: none; font-weight: 700; font-size: 0.85rem; border-bottom: 1px solid var(--gray-light); transition: background 0.2s; }
.ud-menu a:last-child { border-bottom: none; color: #ff3b5c; }
.ud-menu a:hover { background: var(--off-white); }

/* PRODUCT CARD BUTTON OVERRIDES */
.product-card .btn-atc { border-color: #000; color: #000; }
.product-card .btn-atc:hover { background: #000; color: white; }
.product-card .btn-buynow { background: #000; color: white; }
.product-card .btn-buynow:hover { background: #333; }

/* CHECKOUT STEPS */
.steps-bar{display:flex;gap:0;margin-bottom:2rem;}
.step-dot{flex:1;text-align:center;position:relative;}
.step-dot::after{content:'';position:absolute;top:14px;left:50%;right:-50%;height:2px;background:var(--gray-light);z-index:0;}
.step-dot:last-child::after{display:none;}
.step-dot .sd{width:30px;height:30px;border-radius:50%;background:var(--gray-light);color:var(--text-muted);font-size:0.8rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:all 0.3s;}
.step-dot.active .sd{background:var(--accent);color:white;}
.step-dot.done .sd{background:var(--accent-dark);color:white;}
.step-dot .sl{font-size:0.65rem;font-weight:700;color:var(--text-muted);margin-top:4px;display:block;}
.checkout-section{display:none;}
.checkout-section.active{display:block;}
.field-group{display:flex;flex-direction:column;gap:0.4rem;margin-bottom:1rem;}
.field-group label{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);}
.field-group input,.field-group textarea,.field-group select{border:1px solid var(--gray-light);border-radius:8px;padding:0.75rem 1rem;font-family:DM Sans,sans-serif;font-size:0.875rem;color:var(--text-dark);outline:none;transition:border-color 0.2s;width:100%;}
.field-group input:focus,.field-group textarea:focus,.field-group select:focus{border-color:var(--accent);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.pay-options{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.25rem 0;}
.pay-opt{border:2px solid var(--gray-light);border-radius:12px;padding:1.25rem;cursor:pointer;text-align:center;transition:all 0.2s;}
.pay-opt:hover{border-color:var(--accent);}
.pay-opt.selected{border-color:var(--accent);background:var(--accent-pale);}
.pay-opt .po-icon{font-size:2rem;margin-bottom:0.5rem;}
.pay-opt .po-name{font-weight:800;font-size:0.95rem;}
.pay-opt .po-sub{font-size:0.75rem;color:var(--text-muted);margin-top:0.25rem;}
.qr-box{background:var(--off-white);border:1px solid var(--accent-light);border-radius:14px;padding:1.5rem;text-align:center;margin:1rem 0;}
.qr-img{width:180px;height:180px;margin:0 auto 1rem;background:#f0f0f0;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gray-light);overflow:hidden;}
.qr-img svg{width:140px;height:140px;}
.qr-note{font-size:0.8rem;color:var(--text-muted);margin-bottom:1rem;}
.upload-area{border:2px dashed var(--accent-light);border-radius:10px;padding:1.5rem;text-align:center;cursor:pointer;transition:border-color 0.2s;margin-bottom:1rem;}
.upload-area:hover{border-color:var(--accent);}
.upload-area input{display:none;}
.upload-area .ua-icon{font-size:2rem;margin-bottom:0.5rem;}
.upload-area .ua-text{font-size:0.85rem;color:var(--text-muted);font-weight:600;}
.cod-info{background:var(--off-white);border:1px solid var(--accent-light);border-radius:12px;padding:1.25rem;margin:1rem 0;}
.cod-info p{font-size:0.85rem;color:var(--text-muted);line-height:1.7;}
.success-box{text-align:center;padding:2rem 1rem;}
.success-icon{font-size:4rem;margin-bottom:1rem;}
.success-box h3{font-size:1.5rem;font-weight:800;margin-bottom:0.75rem;color:var(--text-dark);}
.success-box p{color:var(--text-muted);font-size:0.9rem;line-height:1.7;margin-bottom:0.5rem;}
.order-id{background:var(--accent-pale);border:1px solid var(--accent-light);border-radius:8px;padding:0.75rem 1.25rem;display:inline-block;font-weight:800;color:var(--accent);margin:1rem 0;font-size:1rem;}
.btn-next{width:100%;padding:0.9rem;background:var(--accent);color:white;border:none;border-radius:10px;font-size:0.95rem;font-weight:800;cursor:pointer;margin-top:0.5rem;transition:background 0.2s;}
.btn-next:hover{background:var(--accent-dark);}
.btn-back{width:100%;padding:0.9rem;background:transparent;color:var(--text-muted);border:1px solid var(--gray-light);border-radius:10px;font-size:0.95rem;font-weight:700;cursor:pointer;margin-top:0.75rem;}
.order-summary-mini{background:var(--off-white);border-radius:10px;padding:1rem;margin-bottom:1.5rem;}
.osm-row{display:flex;justify-content:space-between;font-size:0.82rem;margin-bottom:0.4rem;}
.osm-row.total{font-weight:800;font-size:1rem;border-top:1px solid var(--gray-light);padding-top:0.5rem;margin-top:0.5rem;}