/* ============================================================================
   SWEETALERT 1.1.0 · SADER SKIN
   ----------------------------------------------------------------------------
   The store's dialogs come from the SweetAlert 1.1.0 CDN bundle, which ships a
   2014 look: Open Sans, 5px radii, a pastel-blue button, a green tick. This
   file re-dresses that markup in the store's own tokens so a swal reads as the
   same object as .st-dialog — white ground, hairline rule, ink CTA, Fraunces /
   Almarai display face. Nothing here changes swal's DOM or behaviour; it is
   colour, type and box only.

   LOAD IT AFTER the CDN stylesheet. Both files use the same selectors, so
   order is what decides — a <link> placed before sweetalert.min.css does
   nothing at all.

   TWO PIECES OF SWEETALERT GEOMETRY YOU MUST NOT "TIDY":

   1. Centring is `left:50%` plus a NEGATIVE MARGIN, not a transform. The
      show/hide keyframes animate `transform: scale()` on .sweet-alert, so a
      translate(-50%,-50%) is wiped out mid-animation and the box flies off.
      That means margin-inline-start has to stay exactly half the box width by
      hand: swal's JS recalculates margin-TOP from the rendered height, but it
      never touches margin-left.

      (Upstream gets this wrong here: it declares width:478px + padding:17px
      with margin-left:-256px, i.e. correct only under content-box. base.css
      sets box-sizing:border-box on everything, so the CDN box is 478px wide
      against a 256px offset and every store dialog sits 17px left of centre.
      Fixed below by pinning the width to twice the margin.)

   2. The .sa-icon circles are 80px with 4px borders, and every tick/cross/dot
      inside them is absolutely positioned against those numbers. Resize the
      circle and the checkmark lands off it. Only the COLOURS are touched here.
      The success tick's mask (::before/::after and .sa-fix) must stay the same
      colour as the dialog ground or a white wedge shows through the ring.
   ========================================================================== */

/* ---- backdrop: matches .st-dialog::backdrop --------------------------- */
.sweet-overlay {
  background-color: rgba(14, 14, 14, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ---- the box: matches .st-dialog -------------------------------------- */
.sweet-alert {
  box-sizing: border-box;
  width: 512px;
  margin-left: -256px;          /* = -width/2 — see note 1 above */
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-luxe);
  text-align: center;
}

@media (max-width: 560px) {
  /* Same rule: the offset is half the box. calc keeps them in step without JS. */
  .sweet-alert {
    width: calc(100vw - 2rem);
    margin-left: calc(-50vw + 1rem);
    padding: var(--space-5);
  }
}

/* ---- type: title on the display face, copy in muted ink --------------- */
.sweet-alert h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: var(--space-5) 0 var(--space-3);
  padding: 0;
}

.sweet-alert p {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin: 0 auto;
  max-inline-size: 42ch;
}

/* ---- buttons: .st-btn (ink) and .st-btn--ghost (cancel) ---------------
   WHY THE !important HERE, AND ONLY HERE: sweetalert.min.js writes
   backgroundColor, borderLeftColor, borderRightColor and boxShadow onto
   button.confirm as INLINE styles, from its confirmButtonColor option — a pale
   blue by default, and every call site in this store leaves that default. An
   inline style outranks any stylesheet, so without !important on exactly those
   properties the CTA stays 2014 blue however the sheet is written. The
   alternative would be passing a confirmButtonColor to all ~20 swal() calls in
   the app; one rule here covers them and any call added later. -------------- */
.sweet-alert button,
.sweet-alert button.confirm {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: .01em;
  padding: var(--space-4) var(--space-7);
  margin: var(--space-6) var(--space-2) 0;
  background: var(--accent) !important;
  color: var(--on-accent);
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-xs);
  box-shadow: none !important;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.sweet-alert button:hover,
.sweet-alert button.confirm:hover {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff;
}

.sweet-alert button:active,
.sweet-alert button.confirm:active {
  background: #000 !important;
  transform: translateY(1px);
}

.sweet-alert button:focus,
.sweet-alert button.confirm:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, .18) !important;
}

.sweet-alert button.cancel {
  background: transparent !important;
  color: var(--text);
  border-color: var(--line-strong) !important;
}

.sweet-alert button.cancel:hover,
.sweet-alert button.cancel:active {
  background: var(--text) !important;
  color: var(--bg);
  border-color: var(--text) !important;
}

.sweet-alert button.cancel:focus {
  box-shadow: 0 0 0 3px rgba(17, 17, 17, .12) !important;
}

.sweet-alert button[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* ---- text input (swal's prompt variant) ------------------------------- */
.sweet-alert input {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  box-shadow: none;
  padding: var(--space-4);
}

.sweet-alert input:focus {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, .12);
}

.sweet-alert .sa-input-error::before,
.sweet-alert .sa-input-error::after,
.sweet-alert .sa-error-container .icon {
  background-color: var(--commerce);
}

.sweet-alert .sa-error-container {
  background: var(--surface);
  border-radius: var(--radius-xs);
}

.sweet-alert .sa-error-container p {
  color: var(--commerce-dark);
}

/* ---- icons: ink everywhere, the store red reserved for errors --------- */
/* success — ring, tick, and the two rotating masks that hide the ring */
.sweet-alert .sa-icon.sa-success {
  border-color: var(--accent);
}

.sweet-alert .sa-icon.sa-success .sa-line {
  background-color: var(--accent);
}

.sweet-alert .sa-icon.sa-success .sa-placeholder {
  border-color: rgba(17, 17, 17, .20);
}

.sweet-alert .sa-icon.sa-success::before,
.sweet-alert .sa-icon.sa-success::after,
.sweet-alert .sa-icon.sa-success .sa-fix {
  background: var(--bg);          /* must equal the dialog ground — see note 2 */
}

/* error */
.sweet-alert .sa-icon.sa-error {
  border-color: var(--commerce);
}

.sweet-alert .sa-icon.sa-error .sa-line {
  background-color: var(--commerce);
}

/* warning */
.sweet-alert .sa-icon.sa-warning {
  border-color: var(--accent);
}

.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot {
  background-color: var(--accent);
}

/* info */
.sweet-alert .sa-icon.sa-info {
  border-color: var(--text-muted);
}

.sweet-alert .sa-icon.sa-info::before,
.sweet-alert .sa-icon.sa-info::after {
  background-color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sweet-alert,
  .sweet-alert .sa-icon.sa-success.animate::after {
    animation: none !important;
  }
}