<turbo-stream action="update" target="remote_modal"><template>
  <turbo-frame id="remote_modal">
  <div class="modal fade" data-controller="modal"
       data-action="turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#closeBackground">
    <div class="modal-dialog modal-xl">
      <div class="modal-content rounded-0 border shadow-sm position-relative" style="border-width: 10px !important; border-color: #C0C0C0 !important;">
        <button type="button" class="btn-close btn-sm position-absolute top-0 end-0 m-2" data-bs-dismiss="modal" aria-label="Close" style="z-index: 1050;"></button>
        <div class="modal-body remote_modal_body " id="remote_modal_body">
          
    <div class="bg-light p-4">
  <!-- Header Section -->
  <div class="row mb-2">
    <div class="col-12 col-md-6 mb-4 mb-md-0">
      <h1 class="fw-semibold mb-3">FIND YOUR RING SIZE</h1>
      <p class="fs-5 text-muted fst-italic">From the Comfort of Your Home</p>
    </div>
    <div class="col-12 col-md-6 text-center">
      <img alt="How to measure your ring size" class="img-fluid" src="/assets/fyrs/hm003-48275c28.jpg" />
    </div>
  </div>

  <!-- Method Selection Label -->
  <div class="row mb-2">
    <div class="col-12">
      <p class="fs-6 fw-semibold mb-3">Choose Your Method:</p>
    </div>
  </div>

  <!-- Option Cards - Row 1 -->
  <div class="row g-3 mb-3">
    <!-- Option 1: Use A Ring That Fits -->
    <div class="col-12 col-md-6">
      <a data-turbo-frame="remote_modal" data-turbo-prefetch="false" class="text-decoration-none" href="/store/fyrs/option1.turbo_stream">
        <div class="card border hover-shadow h-100 rounded-3 transition-all">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-8">
                <div class="fs-5 card-title fw-semibold mb-2">Use A Ring That Fits <i class="bi bi-chevron-right small"></i></div>
                <p class="card-text text-muted small mb-0">Measure Your Current Ring</p>
              </div>
              <div class="col-4 text-center">
                <img alt="Measure your current ring" class="img-fluid" src="/assets/fyrs/Icon-Ring-Measure-150x150-848071c2.jpg" width="80" height="80" />
              </div>
            </div>
          </div>
        </div>
</a>    </div>

    <!-- Option 2: Request Free Ring Sizer -->
    <div class="col-12 col-md-6">
      <a data-turbo-frame="remote_modal" data-turbo-prefetch="false" class="text-decoration-none" href="/store/ring_sizer/new.turbo_stream">
        <div class="card border hover-shadow h-100 rounded-3 transition-all">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-8">
                <div class="fs-5 card-title fw-semibold mb-2">Request A Free Ring Sizer <i class="bi bi-chevron-right small"></i></div>
                <p class="card-text text-muted small mb-0">Mail Me A Ring Sizer</p>
              </div>
              <div class="col-4 text-center">
                <img alt="Free ring sizer by mail" class="img-fluid" src="/assets/fyrs/Icon-Free-Sizer-150x150-211382b9.jpg" width="80" height="80" />
              </div>
            </div>
          </div>
        </div>
</a>    </div>
  </div>

  <!-- Option Cards - Row 2 -->
  <div class="row g-3">
    <!-- Option 3: Measure Your Finger -->
    <div class="col-12 col-md-6">
      <a data-turbo-frame="remote_modal" data-turbo-prefetch="false" class="text-decoration-none" href="/store/fyrs/option3.turbo_stream">
        <div class="card border hover-shadow h-100 rounded-3 transition-all">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-8">
                <div class="fs-5 card-title fw-semibold mb-2">Measure Your Finger <i class="bi bi-chevron-right small"></i></div>
                <p class="card-text text-muted small mb-0">Find My Ring Size</p>
              </div>
              <div class="col-4 text-center">
                <img alt="Measure your finger size" class="img-fluid" src="/assets/fyrs/Icon-Finger-Measure-150x150-1de49902.jpg" width="80" height="80" />
              </div>
            </div>
          </div>
        </div>
</a>    </div>

    <!-- Option 4: Convert From Other Units -->
    <div class="col-12 col-md-6">
      <a data-turbo-frame="remote_modal" data-turbo-prefetch="false" class="text-decoration-none" href="/store/fyrs/option4.turbo_stream?sel=3">
        <div class="card border hover-shadow h-100 rounded-3 transition-all">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-8">
                <div class="fs-5 card-title fw-semibold mb-2">Convert From Other Units <i class="bi bi-chevron-right small"></i></div>
                <p class="card-text text-muted small mb-0">Find Your US Finger Size</p>
              </div>
              <div class="col-4 text-center">
                <img alt="Ring size converter" class="img-fluid" src="/assets/fyrs/Icon-Converter-150x150-69447e7a.jpg" width="90" height="90" />
              </div>
            </div>
          </div>
        </div>
</a>    </div>
  </div>
</div>

<style>
  .hover-shadow {
    transition: all 0.3s ease;
  }
  
  .hover-shadow:hover {
    background-color: #f8f9fa;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px);
  }
  
  .transition-all {
    transition: all 0.3s ease;
  }
</style>

        </div>
      </div>
    </div>
  </div>
</turbo-frame></template></turbo-stream>