/* ============================================================
   SHOPEE CART PAGE — MOBILE UI (CLEAN FINAL)
   ============================================================ */

/* ---------------- HEADER ---------------- */
.sp-cart-header {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    z-index: 99;
}

.sp-cart-back {
    font-size: 22px;
    margin-right: 12px;
    cursor: pointer;
}

.sp-cart-title {
    font-size: 18px;
    font-weight: 600;
}

/* ---------------- EMPTY CART ---------------- */
.sp-cart-empty {
    text-align: center;
    padding: 40px 0;
}

.sp-cart-btn-shop {
    display: inline-block;
    background: #ee4d2d;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

/* ---------------- WRAPPER PUSAT ---------------- */
.sp-container {
    max-width: 420px;
    margin: auto;
    padding: 12px;
}

.sp-cart-wrapper {
    padding-bottom: 60px;
}

/* ---------------- STORE HEADER ---------------- */
.sp-cart-store-header {
    background: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #eee;
}

.sp-cart-store-name {
    font-weight: 600;
    font-size: 15px;
    flex: 1;
}

.sp-cart-store-edit {
    font-size: 14px;
    color: #0088ff;
}

/* =======================================================
   PROMO CARD — SHOPEE STYLE
   ======================================================= */

.sp-promo-card {
    background: #fff;
    padding: 14px 16px;
    border-bottom: 8px solid #f5f5f5;
}

.sp-promo-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
}

.sp-promo-row:last-child {
    border-bottom: none;
}

.sp-promo-icon {
    width: 28px;
    height: 28px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
}

.sp-icon-truck  { background-image: url("https://cdn-icons-png.flaticon.com/512/869/869636.png"); }
.sp-icon-voucher{ background-image: url("https://cdn-icons-png.flaticon.com/512/891/891462.png"); }
.sp-icon-coin   { background-image: url("https://cdn-icons-png.flaticon.com/512/2769/2769493.png"); }

.sp-promo-title {
    font-size: 14px;
    font-weight: 600;
}

.sp-promo-desc {
    font-size: 12px;
    color: #777;
    margin-top: 2px;
}

.sp-promo-badge {
    margin-left: auto;
    background: #19b17a;
    padding: 3px 8px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
}

.sp-promo-click { cursor: pointer; }

/* Switch */
.sp-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin-left: auto;
}

.sp-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sp-slider-round {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: .3s;
}

.sp-slider-round:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .3s;
}

.sp-switch input:checked + .sp-slider-round {
    background-color: #ee4d2d;
}

.sp-switch input:checked + .sp-slider-round:before {
    transform: translateX(20px);
}

/* Arrow */
.sp-arrow {
    margin-left: auto;
    font-size: 18px;
    color: #999;
}

/* =======================================================
   CART ITEM CARD
   ======================================================= */

.sp-cart-item {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.sp-cart-check {
    display: flex;
    align-items: flex-start;
}

.sp-cart-thumb img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 6px;
}

.sp-cart-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-cart-name {
    font-size: 14px;
    font-weight: 500;
    color: #222;
    margin-bottom: 4px;
}

/* Variation */
.sp-cart-variation {
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fafafa;
    width: auto;
}

/* Price */
.sp-cart-price {
    font-size: 15px;
    font-weight: 700;
    color: #ee4d2d;
}

/* QTY */
.sp-cart-qty {
    display: flex;
    align-items: center;
    margin-top: 6px;
}

.sp-qty-minus,
.sp-qty-plus {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 20px;
    color: #444;
    text-decoration: none;
}

.sp-qty-input {
    width: 42px;
    text-align: center;
    font-size: 15px;
    margin: 0 6px;
    border: none;
    background: none;
}

/* =======================================================
   BOTTOM BAR (CLEAN & CENTERED)
   ======================================================= */

.sp-cart-bottom {
    position: fixed;
    bottom: 0;

    /* CENTER FIX */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 420px;

    background: #fff;
    height: 65px;
    display: flex;
    align-items: center;
    border-top: 1px solid #eee;
    padding: 0 16px;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    z-index: 999;
}

/* Left Side */
.sp-bottom-left {
    display: flex;
    align-items: left;
    gap: 15px;
    flex: 1;
	background: #fff;
}
.sp-bottom-left span {
    font-weight: 600;     /* lebih tebal */
    font-size: 14px;      /* sedikit lebih besar */
    margin-top: 1px;      /* sedikit turun biar pas */
}
.sp-bottom-left input[type="checkbox"] {
    width: 18px;
    height: 18px;
}
/* Total */
.sp-bottom-total {
    text-align: right;
    margin-right: 14px;
}

.sp-total-label {
    font-size: 12px;
    color: #888;
}

.sp-total-amount {
    font-size: 16px;
    font-weight: 700;
    color: #ee4d2d;
}

/* Checkout Button */
.sp-checkout-btn {
    background: #ee4d2d;
    padding: 12px 18px;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}


/* wrapper tombol hapus */
.sp-remove-icon-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
    padding-right: 4px; /* geser sedikit ke kanan */
}

/* Row sejajar antara QTY dan ikon hapus */
.sp-cart-qty-row {
    display: flex;
    align-items: center;         /* <-- INI YANG MENAIKKAN POSISI */
    justify-content: space-between;
    margin-top: 6px;
}

/* area qty tetap */
.sp-cart-qty {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ikon sampah */
.sp-remove-icon {
    padding: 6px;
    border-radius: 6px;
    background: #f1f1f1;   /* abu terang */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-remove-icon svg {
    width: 18px;
    height: 18px;
}

.sp-remove-icon:hover {
    background: #f75858;
}