/* wire3-shared — components/modal.css
   The shared MODAL shell: a centered dialog over a dimmed, blurred backdrop. The base
   primitive behind components/exit-offer.css and components/save-cart.css. Behaviour:
   js/modal.js → W3Modal.open(modalEl, opts) (focus-trap, scroll-lock, ESC, backdrop click).
   Token-themed (outward tokens). OPT-IN: <link> per page (not in layouts/outward.css).

   Markup contract:
     <div class="w3-modal" role="dialog" aria-modal="true" aria-labelledby="…" hidden>
       <div class="w3-modal-dialog">                  (add .is-split for the media+body layout)
         <button class="w3-modal-close" aria-label="Close">…×…</button>
         …content…
       </div>
     </div>
   JS removes [hidden] then adds .is-open one frame later to drive the transition. */

.w3-modal {
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(8,18,36,.52); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s var(--ease), visibility 0s linear .26s;
}
.w3-modal.is-open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .26s var(--ease); }

/* Body scroll-lock applied by W3Modal while any modal is open. */
.w3-modal-lock { overflow:hidden; }

/* ---- The dialog card ---- */
.w3-modal-dialog {
  position:relative; width:100%; max-width:460px; max-height:calc(100vh - 48px); overflow:auto;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:40px 36px 32px;
  transform:translateY(14px) scale(.98); opacity:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.w3-modal.is-open .w3-modal-dialog { transform:none; opacity:1; }

/* ---- Close (×) — quiet by default, darkens on hover ---- */
.w3-modal-close {
  position:absolute; top:14px; right:14px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:0; border-radius:50%; background:transparent; cursor:pointer;
  color:var(--grey-mid); transition:background .15s, color .15s;
}
.w3-modal-close:hover { background:var(--off-white); color:var(--navy); }
.w3-modal-close svg { width:20px; height:20px; }

/* ---- Split layout: media panel + content body (offer-style) ---- */
.w3-modal-dialog.is-split {
  max-width:760px; padding:0; overflow:hidden;
  display:grid; grid-template-columns:0.92fr 1fr;
}
.w3-modal-media { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  padding:34px 30px; background:var(--off-white); }
.w3-modal-body { padding:40px 40px 32px; }
.w3-modal-dialog.is-split .w3-modal-close { color:var(--grey-mid); }

/* Focus ring for keyboard users on any control inside a modal. */
.w3-modal :focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }

@media (max-width:680px){
  .w3-modal { padding:0; align-items:flex-end; }
  .w3-modal-dialog { max-width:none; border-radius:var(--radius) var(--radius) 0 0; max-height:92vh;
    transform:translateY(28px); }
  .w3-modal-dialog.is-split { grid-template-columns:1fr; }
  .w3-modal-media { padding:26px 24px; min-height:150px; }
  .w3-modal-body { padding:28px 26px 24px; }
}

@media (prefers-reduced-motion: reduce){
  .w3-modal, .w3-modal-dialog { transition:opacity .15s linear; }
  .w3-modal-dialog { transform:none; }
}