<!-- Smooth Accordion -->
<div x-data="{ isOpen: true }" class="border-b-2 mb-2 border-gray-500 overflow-hidden transition-all duration-500 ease-in-out rounded-lg">

  <!-- Accordion Button -->
  <button
    @click="isOpen = !isOpen"
    class="relative bg-gray-300 w-full flex justify-between items-center px-3 md:px-5 py-[15px] text-sm md:text-base lg:text-lg font-medium text-gray-900 hover:bg-gray-200 transition"
    :aria-expanded="isOpen.toString()"
    :aria-controls="'accordion-panel-' + ('{{title}}')"
    id="accordion-button- + ('{{title}}')"
  >
    <span>{{ title }}</span>

    <!-- Plus / Minus Icon -->
    <span
      class="text-2xl font-bold text-gray-800 transition-transform duration-300 ease-in-out"
      x-text="isOpen ? '–' : '+'"
    ></span>
  </button>

  <!-- Accordion Content -->
  <div
    x-ref="panel"
    x-bind:style="isOpen ? 'max-height:' + $refs.panel.scrollHeight + 'px; opacity:1;' : 'max-height:0; opacity:0;'"
    class="overflow-hidden transition-all duration-700 ease-in-out bg-gray-100"
    :id="'accordion-panel-' + ('{{title}}')"
    role="region"
    :aria-labelledby="'accordion-button-' + ('{{title}}')"
  >
    <div class="px-3 md:pl-5 md:pr-9 py-3 text-gray-800 text-xs md:text-sm lg:text-base leading-relaxed">
      {{ description }}
    </div>
  </div>

</div>
