<turbo-stream action="replace" target="notification_detail_modal"><template><div
  id="notification_detail_modal"
  class="tailwind-only fixed inset-0 z-50 flex items-center justify-center"
  data-notifications-target="modal"
>
  <div class="fixed inset-0 bg-black/50 pointer-events-auto" data-action="click->notifications#hide"></div>
  <div class="relative bg-white rounded-lg shadow-lg w-full max-w-md mx-4 z-10">
    <div class="pl-4 pr-5 py-3">
      <div class="text-black text-lg font-semibold">
        【重要】産地直送商品のお届け時間について（時間指定不可）
      </div>
      <button
        type="button"
        class="absolute top-4 right-4 w-6 h-6 flex items-center justify-center hover:bg-gray-100 rounded-full transition-colors"
        data-action="click->notifications#hide"
      >
        <img class="w-4 h-4 text-gray-600" src="/assets/icons/x-f2d3c01f0887434da8f69a406b1d5952686e22f81db7b98e2e7865f26e6f0387.svg" />
      </button>
    </div>
    <div class="px-4 py-2 max-h-[60vh] overflow-y-auto">
      <div class="text-black text-md mb-2 break-all">
        <p>産地直送商品につきましては、生産者より直接発送されるため、
<br />お届け時間のご指定を承ることができかねます。
<br />ご不便をおかけし誠に恐れ入りますが、あらかじめご了承のうえ、
<br />ご注文いただきますようお願いいたします。</p>
      </div>
    </div>

    <!-- ボタン部分 -->
    <div class="px-4 py-3 flex gap-2 border-t-2 border-border">
      <button
        type="button"
        class="flex-1 min-h-11 px-4 py-2.5 rounded-md border border-gray-200 text-gray-900 hover:bg-gray-200 transition-colors"
        data-action="click->notifications#hide"
      >
        閉じる
      </button>
    </div>
  </div>
</div>
</template></turbo-stream>