{# Ultra-Optimized Button Module - Mobile-first with desktop enhancements #}

{# Mobile: Ultra-minimal critical inline CSS (only alignment) #}
{% if module.styles.alignment.alignment.horizontal_align %}
<style>
.bw-{{ name|replace("-","") }}{text-align:{{ module.styles.alignment.alignment.horizontal_align }}}
</style>
{% endif %}

{# Link preparation #}
{% set href = module.link.url.href %}
{% if module.link.url.type == "EMAIL_ADDRESS" %}
  {% set href = "mailto:" ~ href %}
{% endif %}
{% set rel = [] %}
{% if module.link.no_follow %}
  {% do rel.append("nofollow") %}
{% endif %}
{% if module.link.open_in_new_tab %}
  {% do rel.append("noopener") %}
{% endif %}

{# Determine if custom styles are needed #}
{% set has_custom_bg = module.styles.background.color.color %}
{% set has_custom_border = module.styles.border.border.css %}
{% set has_custom_radius = module.styles.corner.radius is not none %}
{% set has_custom_font = module.styles.text.font.css %}
{% set has_custom_spacing = module.styles.spacing.spacing.css %}
{% set needs_custom = has_custom_bg or has_custom_border or has_custom_radius or has_custom_font or has_custom_spacing %}

{# Button HTML - uses theme .btn class by default #}
<div class="{% if module.styles.alignment.alignment.horizontal_align %}bw-{{ name|replace("-","") }}{% endif %}">
  <a class="btn{% if needs_custom %} btn-{{ name|replace("-","") }}{% endif %}"
     href="{{ href|escape_url }}"
     {% if module.link.open_in_new_tab %}target="_blank"{% endif %}
     {% if rel %}rel="{{ rel|join(" ")|escape_attr }}"{% endif %}>
    {{ module.button_text|escape_html }}
  </a>
</div>

{# Desktop: Enhanced styles loaded asynchronously (non-blocking) #}
{% if needs_custom %}
{% require_css %}
<style>
  /* Custom button styles — apply at ALL widths (these are what the editor
     configured; gating them to ≥768px meant mobile silently ignored them). */
  .btn-{{ name|replace("-","") }} {
    {% if has_custom_bg %}
      background: rgba({{ module.styles.background.color.color|convert_rgb }}, {{ module.styles.background.color.opacity / 100 }});
    {% endif %}
    {% if has_custom_border %}
      {{ module.styles.border.border.css }}
    {% endif %}
    {% if has_custom_radius %}
      border-radius: {{ module.styles.corner.radius }}px;
    {% endif %}
    {% if has_custom_font %}
      {{ module.styles.text.font.css }}
    {% endif %}
    {% if has_custom_spacing %}
      {{ module.styles.spacing.spacing.css }}
    {% endif %}
    transition: var(--transition, 300ms ease);
    position: relative;
    overflow: hidden;
  }

  {% if has_custom_bg %}
  .btn-{{ name|replace("-","") }}:hover {
    background: rgba({{ color_variant(module.styles.background.color.color, -80)|convert_rgb }}, {{ module.styles.background.color.opacity / 100 }});
    transform: translateY(-2px);
    box-shadow: var(--shadow, 0 4px 8px rgba(0,0,0,0.15));
  }

  .btn-{{ name|replace("-","") }}:active {
    background: rgba({{ color_variant(module.styles.background.color.color, 80)|convert_rgb }}, {{ module.styles.background.color.opacity / 100 }});
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.15));
  }
  {% endif %}

  /* Ripple — pointer devices only */
  @media (hover: hover) and (pointer: fine) {
    .btn-{{ name|replace("-","") }}::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
      transform: scale(0);
      opacity: 0;
      pointer-events: none;
    }

    .btn-{{ name|replace("-","") }}:active::after {
      animation: ripple 0.6s ease-out;
    }
  }

  @keyframes ripple {
    0% {
      transform: scale(0);
      opacity: 0.35;
    }
    to {
      transform: scale(2);
      opacity: 0;
    }
  }
</style>
{% end_require_css %}
{% endif %}