{%- if section.settings.payment_enable -%}
  <div class="footer__payment">
    <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
    {% style %}
      .foysalahmed-payment-icons {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-top: 15px; 
        margin-bottom: 15px;
        flex-wrap: wrap;
        perspective: 1000px;
      }
      .foysalahmed-payment-icon-wrapper {
        width: 42px;
        height: 26.25px;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.4s ease-in-out, box-shadow 0.3s ease;
      }
      
      .foysalahmed-payment-icon {
        width: 100%;
        height: 100%;
        padding: 3px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
        background: linear-gradient(145deg, #ffffff, #f5f5f5);
        transform-style: preserve-3d;
        transition: all 0.3s ease-in-out;
        font-family: var(--font-body-family);
        font-weight: var(--font-body-weight);
      }
      {% comment %}
      <!-- Designed by foysalahmed YouTube Channel  -->
      {% endcomment %}
      
      .foysalahmed-payment-icon-wrapper:hover {
        transform: translateY(-4px) rotateX(10deg) rotateY(10deg) scale(1.1);
        z-index: 2;
      }
      
      .foysalahmed-payment-icon-wrapper:hover .foysalahmed-payment-icon {
        box-shadow: 0 10px 16px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
        background: linear-gradient(135deg, #ffffff, #f0f0f0);
      }
      
      .foysalahmed-payment-icon-wrapper:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
        border-radius: 6px;
        z-index: 2;
        transform: translateZ(0.1px);
      }
      
      .foysalahmed-payment-icon-wrapper:hover:before {
        opacity: 1;
      }
      
      .foysalahmed-payment-icon-wrapper:after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 5%;
        width: 90%;
        height: 6px;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, transparent 70%);
        filter: blur(3px);
        opacity: 0.6;
        transition: all 0.3s ease-in-out;
        pointer-events: none;
        z-index: -1;
      }
      
      .foysalahmed-payment-icon-wrapper:hover:after {
        opacity: 0.9;
        filter: blur(5px);
        bottom: -6px;
        width: 95%;
        height: 8px;
      }
      @media screen and (max-width: 750px) {
        .foysalahmed-payment-icons {
          gap: 8px;
          margin-top: 15px;
        }
        
        .foysalahmed-payment-icon-wrapper {
          width: 36px;
          height: 22.5px;
        }
        
        .foysalahmed-payment-icon {
          padding: 2px;
        }
      }
      {% comment %}
      <!-- Designed by foysalahmed YouTube Channel - -->
      {% endcomment %}
    {% endstyle %}
    
    <div class="foysalahmed-payment-icons">
      {%- for type in shop.enabled_payment_types -%}
        <div class="foysalahmed-payment-icon-wrapper">
          {{ type | payment_type_svg_tag: class: 'foysalahmed-payment-icon' }}
        </div>
      {%- endfor -%}
    </div>
  </div>
{%- endif -%}