body.warranty-modal-open { overflow: hidden; }

.warranty-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 28px;
  opacity: 0;
  transition: opacity .18s ease;
}

.warranty-modal[hidden] { display: none; }
.warranty-modal.is-open { opacity: 1; }
.warranty-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(9,10,12,.76); cursor: pointer; }
.warranty-modal-dialog { position: relative; z-index: 1; width: min(1120px,100%); max-height: calc(100vh - 56px); margin: 0; overflow-y: auto; box-shadow: 0 28px 80px rgba(0,0,0,.34); }
.warranty-modal-close { position: absolute; z-index: 2; top: 18px; right: 20px; width: 42px; height: 42px; border: 1px solid #d7d9de; background: #fff; color: #16181c; font-size: 28px; line-height: 1; cursor: pointer; }
.warranty-modal-close:hover { background: #16181c; color: #fff; }
.warranty-modal-dialog .service-form-copy { padding-right: 40px; }

@media (max-width: 700px) {
  .warranty-modal { align-items: start; padding: 12px; }
  .warranty-modal-dialog { max-height: calc(100vh - 24px); }
  .warranty-modal-close { position: sticky; float: right; top: 12px; right: 12px; margin-bottom: -42px; }
  .warranty-modal-dialog .service-form-copy { padding-right: 48px; }
}