/* wire3-shared — components/save-cart.css
   Content styling for the SAVE-CART / resume-later modal shown at predefined checkout points
   ("Need more time? Save your cart and pick up where you left off."). Sits on the
   components/modal.css shell (centred dialog); behaviour is js/save-cart.js → SaveCart.open().
   Token-themed (outward tokens). OPT-IN.

   This is a UI component: it captures an email-or-phone + an optional cart summary and fires
   onSave(contact, cart). Persistence / the resume link are wired by the consuming app.

   Markup: see blocks/save-cart.html. Pairs with .w3-modal / .w3-modal-dialog (no .is-split). */

.sc-badge { display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px;
  background:linear-gradient(150deg,var(--green) 0%,var(--green-dk) 100%); color:#fff;
  box-shadow:0 8px 22px rgba(125,196,0,.36); margin-bottom:18px; }
.sc-badge svg { width:26px; height:26px; }

.sc-title { color:var(--navy); font-family:var(--font-head); font-weight:800; font-size:1.42em; line-height:1.18;
  letter-spacing:-.02em; }
.sc-sub { color:var(--grey-dk); font-size:1em; line-height:1.5; margin-top:8px; }

/* Optional cart summary chip — grounds the prompt in what's being saved. */
.sc-cart { display:flex; align-items:center; gap:12px; margin-top:18px; padding:12px 14px;
  background:var(--off-white); border:1px solid var(--grey-lt); border-radius:var(--radius-sm); text-align:left; }
.sc-cart-ic { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:9px; background:#fff; border:1px solid var(--grey-lt); color:var(--navy-lite); }
.sc-cart-ic svg { width:18px; height:18px; }
.sc-cart-text { min-width:0; }
.sc-cart-text b { display:block; color:var(--navy); font-family:var(--font-head); font-weight:700; font-size:.96em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-cart-text span { display:block; color:var(--grey-dk); font-size:.84em; margin-top:1px; }

/* Field */
.sc-field { text-align:left; margin-top:20px; }
.sc-field label { display:block; color:var(--navy); font-family:var(--font-head); font-weight:700; font-size:.86em; margin-bottom:7px; }
.sc-input { width:100%; font:inherit; font-size:1em; color:var(--navy); background:var(--off-white);
  border:1.5px solid var(--grey-lt); border-radius:var(--radius-sm); padding:13px 15px; transition:border-color .15s, background .15s, box-shadow .15s; }
.sc-input::placeholder { color:var(--grey-mid); }
.sc-input:focus { outline:0; background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(46,144,224,.14); }
.sc-field.has-error .sc-input { border-color:var(--red); box-shadow:0 0 0 4px rgba(220,38,38,.12); }
.sc-error { display:none; color:var(--red); font-size:.82em; font-weight:600; margin-top:7px; }
.sc-field.has-error .sc-error { display:block; }

.sc-consent { color:var(--grey-mid); font-size:.74em; line-height:1.5; margin-top:14px; text-align:left; }
.sc-consent a { color:var(--grey-dk); text-decoration:underline; text-underline-offset:2px; }

.sc-actions { display:flex; align-items:center; gap:10px; margin-top:22px; }
.sc-actions .btn-green { flex:1; }
.sc-cancel { background:none; border:0; padding:12px 16px; cursor:pointer;
  color:var(--grey-dk); font-family:var(--font-head); font-weight:700; font-size:1em; border-radius:var(--radius-sm); }
.sc-cancel:hover { color:var(--navy); background:var(--off-white); }

/* Success confirmation swap (shown after a valid save). */
.sc-done { display:none; text-align:center; }
.w3-modal-dialog.is-saved .sc-form { display:none; }
.w3-modal-dialog.is-saved .sc-done { display:block; }
.sc-done .sc-badge { margin:0 auto 18px; }