/* smart-add-to-cart.css ======================== Styles for the Smart Add-to-Cart button / stepper / modal. Import this file in your main stylesheet or . */ /* ── Wrapper ─────────────────────────────────────────────── */ .smart-atc-wrapper { display: flex; flex-direction: column; align-items: stretch; } /* ── Inline borderless stepper ───────────────────────────── */ .satc-inline-stepper { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: #f7f7f7; border-radius: 25px; } .satc-btn-minus, .satc-btn-plus { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none !important; background: transparent !important; color: #555; cursor: pointer; transition: color .15s; } .satc-btn-minus:hover, .satc-btn-plus:hover { color: #0d6efd; } .smart-atc-wrapper .satc-inline-stepper { display: flex; align-items: center; } .smart-atc-wrapper .satc-btn-minus, .smart-atc-wrapper .satc-btn-plus { display: flex; align-items: center; justify-content: center; } /* Quantity input — no border, transparent background */ .satc-qty-input { width: 38px !important; border: none !important; border-bottom: 2px solid #0d6efd !important; border-radius: 0 !important; background: transparent !important; text-align: center; font-weight: 700; font-size: 15px; padding: 0 !important; box-shadow: none !important; cursor: pointer; -moz-appearance: textfield; /* Firefox: hide spinner */ } .satc-qty-input::-webkit-outer-spin-button, .satc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ── Quantity Popup Modal ─────────────────────────────────── */ #satcQtyModal .modal-content { border-radius: 18px; overflow: hidden; } #satcQtyModal .modal-header { padding: 20px 20px 8px; } #satcQtyModal .modal-title { font-size: 13px; letter-spacing: 1.5px; } #satcQtyModal #satcModalQty { width: 80px; border: none; border-bottom: 2px solid #0d6efd; border-radius: 0; font-size: 2rem; font-weight: 700; text-align: center; padding: 0; outline: none; -moz-appearance: textfield; } #satcQtyModal #satcModalQty::-webkit-outer-spin-button, #satcQtyModal #satcModalQty::-webkit-inner-spin-button { -webkit-appearance: none; } #satcModalMinus, #satcModalPlus { width: 44px; height: 44px; border-radius: 50%; background: #f0f0f0; border: none; font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; } #satcModalMinus:hover, #satcModalPlus:hover { background: #e0e0e0; } #satcModalUpdate { border-radius: 10px; padding: 12px; font-size: 15px; font-weight: 600; background: #2d5be3; border: none; } #satcModalUpdate:hover { background: #1e44c7; }