/* cart-bundle.css — DigiSave IL shared cart styles */
#cart-overlay {
  position: fixed; inset: 0; z-index: 99990;
  background: rgba(10,4,22,.72);
  backdrop-filter: blur(6px);
  display: none; align-items: flex-end; justify-content: center;
}
#cart-overlay.open { display: flex; }
@media (min-width: 600px) {
  #cart-overlay { align-items: center; padding: 24px; }
}
#cart-sheet {
  background: #fff;
  width: 100%; max-width: 540px;
  border-radius: 24px 24px 0 0;
  max-height: 92svh; max-height: 92vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  animation: sheet-up .32s cubic-bezier(.22,.68,0,1.2);
}
@media (min-width: 600px) { #cart-sheet { border-radius: 24px; } }
@keyframes sheet-up { from{transform:translateY(60px);opacity:0} to{transform:translateY(0);opacity:1} }

.cs-header {
  position: sticky; top: 0; z-index: 10;
  background: #fff; border-bottom: 1px solid #EAECF0;
  padding: 14px 16px 0;
}
.cs-header-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cs-title { font-size: 17px; font-weight: 900; color: #101828; }
.cs-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: #F7F8FC; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #667085; flex-shrink: 0; transition: background .15s;
}
.cs-close:hover { background: #EAECF0; color: #101828; }

.cs-progress {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 14px;
}
.cs-step {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
}
.cs-step-num {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; flex-shrink: 0;
}
.cs-step.done .cs-step-num { background: #7C3AED; color: #fff; }
.cs-step.done .cs-step-label { color: #7C3AED; }
.cs-step.next .cs-step-num { background: #EAECF0; color: #98A2B3; }
.cs-step.next .cs-step-label { color: #98A2B3; }
.cs-step-label { font-size: 11px; }
.cs-step-line { flex: 1; height: 2px; background: #EAECF0; margin: 0 8px; }
.cs-step-line.filled { background: #7C3AED; }

.cs-body { padding: 16px 16px 0; }

.cs-section-label {
  font-size: 11px; font-weight: 700; color: #667085;
  text-transform: uppercase; letter-spacing: .7px; margin-bottom: 9px;
}
.cs-main-card {
  background: #F7F8FC; border: 2px solid #7C3AED;
  border-radius: 16px; box-shadow: 0 0 0 4px rgba(124,58,237,.07);
  padding: 14px; margin-bottom: 4px;
  display: flex; align-items: center; gap: 12px;
}
.cs-prod-logo {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; flex-shrink: 0; overflow: hidden;
}
.cs-prod-logo svg { width: 28px; height: 28px; }
.cs-prod-info { flex: 1; min-width: 0; }
.cs-prod-name { font-size: 14px; font-weight: 800; line-height: 1.3; color: #101828; }
.cs-prod-sub  { font-size: 11.5px; color: #667085; margin-top: 2px; }
.cs-prod-prices { text-align: left; flex-shrink: 0; }
.cs-prod-retail { font-size: 11px; color: #98A2B3; text-decoration: line-through; }
.cs-prod-price  { font-size: 19px; font-weight: 900; color: #101828; }
.cs-prod-locked { font-size: 11px; color: #12B76A; font-weight: 700; margin-top: 2px; }

.cs-upsell-hd {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
}
.cs-upsell-avatar-row { display: flex; }
.cs-upsell-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg,#7C3AED,#FF2EA6);
  color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff;
}
.cs-upsell-avatar + .cs-upsell-avatar { margin-right: -7px; }
.cs-upsell-hd-text { font-size: 12px; font-weight: 700; color: #344054; }
.cs-upsell-hd-text strong { color: #101828; }

.cs-bump {
  display: flex; flex-direction: column;
  background: #fff; border: 1.5px solid #E4E7EC;
  border-radius: 14px; overflow: hidden;
  margin-bottom: 10px; cursor: pointer; user-select: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.cs-bump:hover { box-shadow: 0 4px 16px rgba(16,24,40,.11); border-color: #A78BFA; }
.cs-bump.active {
  border-color: #10B981; border-width: 2px;
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.cs-bump-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px;
  background: linear-gradient(90deg,#EDE9FE,#FDF2F8);
  border-bottom: 1px solid #DDD6FE;
  font-size: 11.5px; font-weight: 800; color: #6D28D9;
}
.cs-bump.active .cs-bump-banner {
  background: linear-gradient(90deg,#D1FAE5,#ECFDF5);
  border-bottom-color: #A7F3D0; color: #065F46;
}
.cs-bump-pct {
  background: #7C3AED; color: #fff;
  border-radius: 5px; padding: 2px 8px;
  font-size: 10.5px; font-weight: 900; white-space: nowrap;
}
.cs-bump.active .cs-bump-pct { background: #059669; }
.cs-bump-saving-tag {
  font-size: 11px; font-weight: 900; color: #059669;
  background: #D1FAE5; border-radius: 5px; padding: 2px 8px; white-space: nowrap;
}
.cs-bump.active .cs-bump-saving-tag { background: #A7F3D0; }
.cs-bump-body {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: #fff;
  transition: background .2s;
}
.cs-bump.active .cs-bump-body { background: #F0FDF4; }
.cs-bump-check {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #D1D5DB;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s, background .18s;
}
.cs-bump.active .cs-bump-check { background: #10B981; border-color: #10B981; }
.cs-bump-check svg { display: none; }
.cs-bump.active .cs-bump-check svg { display: block; }
.cs-bump-logo {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cs-bump-logo svg { width: 26px; height: 26px; }
.cs-bump-info { flex: 1; min-width: 0; }
.cs-bump-name { font-size: 13.5px; font-weight: 800; color: #101828; line-height: 1.3; }
.cs-bump-price {
  margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cs-bump-amount { font-size: 16px; font-weight: 900; color: #7C3AED; }
.cs-bump.active .cs-bump-amount { color: #059669; }
.cs-bump-site { font-size: 11.5px; color: #9CA3AF; text-decoration: line-through; font-weight: 600; }
.cs-bump-tag {
  font-size: 10px; color: #7C3AED; font-weight: 800;
  background: #EDE9FE; border-radius: 4px; padding: 2px 7px; white-space: nowrap;
}
.cs-bump.active .cs-bump-tag { background: #D1FAE5; color: #065F46; }
.cs-bump-retail-saving {
  font-size: 11px; font-weight: 700; color: #6B7280; margin-top: 4px;
}

.cs-upsell-section { margin-bottom: 16px; }

.cs-summary {
  background: #F7F8FC; border: 1.5px solid #EAECF0;
  border-radius: 16px; padding: 15px; margin-top: 16px; margin-bottom: 8px;
}
.cs-summary-title { font-size: 13px; font-weight: 800; margin-bottom: 11px; color: #101828; }
.cs-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: #1D2939; padding: 5px 0; border-bottom: 1px solid #EAECF0;
}
.cs-summary-row:last-of-type { border-bottom: none; }
.cs-summary-row.cs-total {
  font-size: 16px; font-weight: 900; color: #101828;
  padding-top: 10px; margin-top: 4px;
  border-top: 2px solid #EAECF0; border-bottom: none;
}
.cs-saving-text { font-size: 11px; color: #12B76A; font-weight: 700; }

.cs-footer {
  position: sticky; bottom: 0;
  background: #fff; border-top: 1px solid #EAECF0;
  box-shadow: 0 -4px 16px rgba(16,24,40,.06);
  padding: 13px 18px calc(13px + env(safe-area-inset-bottom, 0px));
  margin-top: auto; flex-shrink: 0;
}
.cs-footer-total {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px;
}
.cs-footer-label { font-size: 13px; color: #667085; font-weight: 600; }
.cs-footer-right { display: flex; align-items: baseline; gap: 6px; }
.cs-footer-saving { font-size: 11px; color: #12B76A; font-weight: 700; }
.cs-footer-amount { font-size: 22px; font-weight: 900; color: #101828; }
@keyframes pop-green { 0%,100%{color:#101828}50%{color:#12B76A} }
.cs-footer-amount.pop { animation: pop-green .4s ease; }

.cs-reassurance {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 9px;
}
.cs-reassure-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: #667085;
}
.cs-reassure-item svg { width: 11px; height: 11px; flex-shrink: 0; }

.cs-consent {
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 10px; cursor: pointer;
}
.cs-consent input[type="checkbox"] {
  width: 16px; height: 16px; min-width: 16px; margin-top: 2px;
  accent-color: #7C3AED; cursor: pointer;
}
.cs-consent-text {
  font-size: 12px; line-height: 1.55; color: #667085;
}
.cs-consent-text a {
  color: #7C3AED; text-decoration: underline;
}

.cs-btn-pay {
  width: 100%; padding: 15px; border: none; border-radius: 14px;
  background: linear-gradient(92deg,#7C3AED,#FF2EA6 48%,#FF8A3D);
  color: #fff; font-family: 'Heebo', sans-serif;
  font-size: 16px; font-weight: 900; cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 4px 18px rgba(124,58,237,.32);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.cs-btn-pay:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(124,58,237,.40); }
.cs-btn-pay:active { transform: translateY(0); }
.cs-btn-pay:disabled { opacity: .7; pointer-events: none; }
.cs-spinner {
  display: none; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: cs-spin .7s linear infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }
.cs-btn-pay.loading .cs-btn-label { display: none; }
.cs-btn-pay.loading .cs-spinner { display: block; }

.cs-wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 4px; margin-bottom: 16px; padding: 11px 14px;
  background: #ECFDF5; border: 1.5px solid #A7F3D0;
  border-radius: 12px; text-decoration: none;
  font-size: 13px; font-weight: 700; color: #065F46;
  transition: background .18s, border-color .18s;
}
.cs-wa-btn:hover { background: #D1FAE5; border-color: #6EE7B7; }
.cs-wa-btn svg { width: 18px; height: 18px; color: #25D366; flex-shrink: 0; }

.cs-trust {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px;
}
.cs-trust-item {
  display: flex; align-items: center; gap: 4px; font-size: 11px; color: #667085;
}
.cs-trust-item svg { width: 12px; height: 12px; }