.king-addons-floating-cart { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .king-addons-floating-cart--left { right: auto; left: 18px; align-items: flex-start; } .king-addons-floating-cart__button { display: inline-flex; align-items: center; gap: 10px; background-color: #111827; color: #ffffff; border: 1px solid #111827; border-radius: 14px; padding: 12px 16px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18); transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; position: relative; } .king-addons-floating-cart__button:hover { background-color: #0f172a; border-color: #0f172a; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.24); } .king-addons-floating-cart__button.is-empty { opacity: 0.9; } .king-addons-floating-cart__icon { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } .king-addons-floating-cart__label { display: inline-flex; align-items: center; line-height: 1.2; } .king-addons-floating-cart__badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #ffffff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; position: absolute; top: -6px; right: -6px; box-shadow: 0 8px 18px rgba(239, 68, 68, 0.3); } .king-addons-floating-cart__panel { width: 280px; max-width: 86vw; background: #ffffff; color: #0f172a; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 14px; box-shadow: 0 20px 38px rgba(15, 23, 42, 0.24); padding: 14px; opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; display: none; } .king-addons-floating-cart.is-open .king-addons-floating-cart__panel { display: block; opacity: 1; transform: translateY(0); } .king-addons-floating-cart__panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; } .king-addons-floating-cart__panel-title { font-weight: 700; font-size: 15px; } .king-addons-floating-cart__count { font-size: 13px; color: #6b7280; } .king-addons-floating-cart__panel-body { display: flex; flex-direction: column; gap: 8px; } .king-addons-floating-cart__empty { margin: 0; color: #6b7280; } .king-addons-floating-cart__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .king-addons-floating-cart__item { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; align-items: center; } .king-addons-floating-cart__item-thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: 0 0 44px; border: 1px solid rgba(15, 23, 42, 0.08); } .king-addons-floating-cart__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .king-addons-floating-cart__item-meta { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; } .king-addons-floating-cart__item-name { font-weight: 600; } .king-addons-floating-cart__item-qty { color: #6b7280; } .king-addons-floating-cart__remove { color: #ef4444; text-decoration: none; font-size: 20px; line-height: 1; padding: 4px; border-radius: 6px; transition: background-color 0.15s ease, color 0.15s ease; } .king-addons-floating-cart__remove:hover { background: rgba(239, 68, 68, 0.08); color: #b91c1c; } .king-addons-floating-cart__more { margin: 0; color: #6b7280; font-size: 13px; } .king-addons-floating-cart__panel-footer { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .king-addons-floating-cart__subtotal { display: flex; justify-content: space-between; align-items: center; font-weight: 700; } .king-addons-floating-cart__subtotal-label { color: #6b7280; font-weight: 600; } .king-addons-floating-cart__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .king-addons-floating-cart__link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; text-decoration: none; font-weight: 700; border-radius: 10px; border: 1px solid #0f172a; color: #0f172a; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .king-addons-floating-cart__link--checkout { background: #0f172a; color: #ffffff; } .king-addons-floating-cart__link:hover { border-color: #111827; background: #111827; color: #ffffff; } .king-addons-floating-cart__link--checkout:hover { background: #0b1220; border-color: #0b1220; } .king-addons-floating-cart__panel--drawer { width: 340px; max-width: 92vw; } @media (max-width: 767px) { .king-addons-floating-cart__button { padding: 12px; } .king-addons-floating-cart__label { display: none; } }