<turbo-stream action="append" target="master_turbo"><template><div id="dialog" data-turbo-temporary="true" x-data="{ open: false }" x-init="setTimeout(() =&gt; open = true, 250)" @keydown.window.escape="open = false" x-show="open" class="fixed bottom-0 left-0 z-40 w-full sm:inset-0" style="display:none;">
  <div class="flex justify-center items-end min-h-screen text-center sm:block">
    <div
      x-on:click="open = false"
      x-show="open"
      x-description="Background overlay, show/hide based on modal state."
      x-transition:enter="ease-out duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="ease-in duration-200"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
      class="fixed inset-0 transition-opacity"
      aria-hidden="true">
      <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>

    <!-- This element is to trick the browser into centering the modal contents. -->
    <span class="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">​</span>

    <div
      x-show="open"
      x-description="Modal panel, show/hide based on modal state."
      x-transition:enter="ease-out duration-300"
      x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
      x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
      x-transition:leave="ease-in duration-200"
      x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
      x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-headline"
      class="inline-block overflow-hidden relative z-10 w-full text-left align-bottom bg-white rounded-t-xl shadow-xl transition-all transform sm:max-w-md sm:align-middle sm:rounded-xl pb-safe">
      <div class="overflow-y-auto px-4 pt-12 pb-8 max-h-[100vh]">
        <div class="absolute right-4 top-5">
          <button type="button" x-on:click="open = false" class="text-gray-500 focus:outline-none outline-transparent">
            <span class="sr-only">Ok, entendi</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 fill-current"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>
</button>        </div>

        <div>
          
  <div class="px-4 text-center">
    <h4 class="text-lg font-medium text-gray-900 mt-4 md:text-xl">Produto Indisponível</h4>
    <p class="mt-2 text-sm text-gray-500 md:text-base">Esse produto não está disponível para compra nesse momento.</p>
</div>
        </div>

        <div class="flex justify-center items-center mt-6">
          <button type="button" x-on:click="open = false" class="font-semibold text-dv-theme-600">Ok, entendi</button>
</div>      </div>
    </div>
  </div>
</div></template></turbo-stream>