{% set c = module.content %}
{% set s = module.style %}
{% set a = module.advanced %}

{# Mobile-first pricing card with theme integration #}
<article class="p-card{{ c.popular ? ' p-card--popular' : '' }}{{ a.class_name ? ' ' ~ a.class_name : '' }}"
  {% if a.custom_id %}id="{{ a.custom_id }}"{% endif %}
  style="
    --p-pad: {{ s.mobile_optimize ? 'clamp(1rem, 4vw, ' ~ s.padding ~ ')' : s.padding }};
    --p-r: {{ s.radius == '0' ? '0' : 'var(--radius, ' ~ s.radius ~ ')' }};
    --p-bw: {{ s.border_width }};
    {% if s.border_color.color %}--p-bc: rgba({{ s.border_color.color|convert_rgb }}, {{ s.border_color.opacity / 100 }});{% endif %}
    {% if s.bg_color.color %}--p-bg: rgba({{ s.bg_color.color|convert_rgb }}, {{ s.bg_color.opacity / 100 }});{% endif %}
    {% if s.fg_color.color %}--p-fg: rgba({{ s.fg_color.color|convert_rgb }}, {{ s.fg_color.opacity / 100 }});{% endif %}
    {% if s.accent_color.color %}--p-accent: rgba({{ s.accent_color.color|convert_rgb }}, {{ s.accent_color.opacity / 100 }});{% endif %}
    --p-minh: {{ s.min_height }};
    --p-gap: {{ s.mobile_optimize ? 'clamp(0.75rem, 3vw, ' ~ s.gap ~ ')' : s.gap }};
  "
  aria-label="{{ c.plan_name|escape }} pricing plan"
  role="article"
>
  {# Popular badge/ribbon #}
  {% if c.popular %}
    <div class="card-flag" aria-label="Recommended plan" style="--label-bg: {% if s.label_color.color %}rgba({{ s.label_color.color|convert_rgb }}, {{ s.label_color.opacity / 100 }}){% else %}{{ theme.core.colors.primary.color or '#007bff' }}{% endif %};">
      <span>{{ c.popular_text|default('Most Popular')|escape }}</span>
    </div>
  {% endif %}

  {# Card header with pricing #}
  <header class="p-card__head" style="text-align: {{ s.align }};">
    <h3 class="p-card__name">{{ c.plan_name|escape }}</h3>

    <div class="p-card__price p-card__price--{{ s.price_size }}" aria-label="Price: {{ c.price_value|escape }} {{ c.price_suffix|escape }}">
      <span class="p-card__price-value">{{ c.price_value|escape }}</span>
      {% if c.price_suffix %}
        <span class="p-card__price-suffix">{{ c.price_suffix|escape }}</span>
      {% endif %}
    </div>

    {% if c.description %}
      <div class="p-card__desc">
        {{ c.description|sanitize_html }}
      </div>
    {% endif %}
  </header>

  {# Features list #}
  {% if c.features|length %}
    <ul class="p-card__features" role="list" aria-label="Plan features">
      {% for f in c.features %}
        {% if s.feature_style != 'hide' or f.included %}
          <li class="p-feature {{ f.included ? 'is-in' : 'is-out' }}"
              {% if f.tooltip %}title="{{ f.tooltip|escape }}"{% endif %}>
            {% if s.feature_icon != 'none' %}
              <span class="p-feature__icon p-feature__icon--{{ s.feature_icon }}"
                    aria-hidden="true"></span>
            {% endif %}
            <span class="p-feature__label">
              {{ f.feature_label|escape }}
              {% if not f.included %}
                <span class="sr-only">(not included)</span>
              {% endif %}
            </span>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  {% endif %}

  {# CTA buttons with proper touch targets #}
  <div class="p-card__ctas p-card__ctas--{{ s.cta_layout }}">
    {% if c.cta_primary_text and c.cta_primary_url %}
      {% set target_attrs = c.new_tab ? 'target="_blank" rel="noopener noreferrer"' : '' %}
      {% set aria_label = c.cta_primary_aria|default(c.cta_primary_text ~ ' for ' ~ c.plan_name) %}

      <a class="p-btn p-btn--primary"
         href="{{ c.cta_primary_url.href }}"
         {{ target_attrs }}
         aria-label="{{ aria_label|escape }}"
         role="button">
        <span>{{ c.cta_primary_text|escape }}</span>
      </a>
    {% endif %}

    {% if c.cta_secondary_text and c.cta_secondary_url %}
      {% set target_attrs = c.new_tab ? 'target="_blank" rel="noopener noreferrer"' : '' %}
      {% set aria_label = c.cta_secondary_aria|default(c.cta_secondary_text ~ ' for ' ~ c.plan_name) %}

      <a class="p-btn p-btn--ghost"
         href="{{ c.cta_secondary_url.href }}"
         {{ target_attrs }}
         aria-label="{{ aria_label|escape }}">
        <span>{{ c.cta_secondary_text|escape }}</span>
      </a>
    {% endif %}
  </div>

  {# Disclaimer/fine print #}
  {% if c.disclaimer %}
    <small class="p-card__fine">{{ c.disclaimer|escape }}</small>
  {% endif %}
</article>

{# Structured data for SEO if enabled #}
{% if a.structured_data %}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "{{ c.plan_name|escape_json }}",
    {% if c.description %}"description": "{{ c.description|striptags|escape_json }}",{% endif %}
    "offers": {
      "@type": "Offer",
      "price": "{{ c.price_value|regex_replace('[^0-9.]', '')|default('0') }}",
      "priceCurrency": "{{ a.currency|default('USD') }}",
      {% if c.cta_primary_url %}"url": "{{ c.cta_primary_url.href|absolute_url }}",{% endif %}
      "availability": "https://schema.org/InStock"
    }
  }
  </script>
{% endif %}

{# Critical inline CSS for above-fold - mobile-first #}
<style>
  /* Critical styles only - inline for fastest render */
  .p-card {
    position: relative;
    display: grid;
    gap: var(--p-gap);
    align-content: start;
    background: var(--p-bg, var(--color-bg, #ffffff));
    color: var(--p-fg, var(--color-text, #111827));
    border: var(--p-bw) solid var(--p-bc, var(--color-border, #e5e7eb));
    border-radius: var(--p-r);
    padding: var(--p-pad);
    min-height: var(--p-minh);
    /* `paint` containment + content-visibility clipped the "Most Popular" ribbon,
       which sits at top:-12px outside the card box. Keep layout/style containment. */
    contain: layout style;
  }

  .p-card__name {
    margin: 0 0 0.5rem;
    font-size: clamp(1.125rem, 3vw, 1.25rem);
    font-weight: 700;
  }

  .p-card__price {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    color: var(--p-accent, var(--color-primary, #007bff));
  }

  .p-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
  }

  .p-btn--primary {
    background: var(--p-accent, var(--color-primary, #007bff));
    color: var(--color-primary-contrast, white);
  }

  /* Mobile-specific critical optimizations */
  @media (max-width: 640px) {
    .p-card {
      /* Reduce render complexity on mobile */
      will-change: auto;
      backface-visibility: hidden;
    }
  }
</style>

{# Non-critical CSS loaded async #}
{% require_css %}
<style>
  /* Non-critical styles - loaded after initial paint */
  {# Removed a stray unclosed `:where(.p-card) {` here — under CSS Nesting it turned
     every rule below into a `:where(.p-card) <rule>` descendant, killing the Card
     Shadow field and the entire "Most Popular" variant styling. #}

  /* Shadow variations using theme variables */
  {% if s.shadow == 'none' %}
    :where(.p-card) { box-shadow: none; }
  {% elif s.shadow == 'sm' %}
    :where(.p-card) { box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06)); }
  {% elif s.shadow == 'md' %}
    :where(.p-card) { box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.12)); }
  {% elif s.shadow == 'lg' %}
    :where(.p-card) { box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.15)); }
  {% endif %}

  /* Popular variant */
  :where(.p-card--popular) {
    border-color: var(--p-accent, var(--color-primary, #007bff));
    {% if s.shadow != 'none' %}
    box-shadow: 0 0 0 1px var(--p-accent, var(--color-primary, #007bff)), var(--shadow-md, 0 4px 12px rgba(0,0,0,0.12));
    {% endif %}
  }

  {% include "../../includes/card-flag.css.html" %}

  /* Header section */
  :where(.p-card__name) {
    margin: 0 0 0.5rem;
    font-size: clamp(1.125rem, 3vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  /* Price display - mobile optimized sizes */
  :where(.p-card__price) {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    color: var(--p-accent, var(--color-primary, #007bff));
    margin: 0.25rem 0 0.75rem;
  }

  :where(.p-card__price--sm .p-card__price-value) {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    line-height: 1;
    font-weight: 700;
  }

  :where(.p-card__price--md .p-card__price-value) {
    font-size: clamp(1.5rem, 5vw, 1.75rem);
    line-height: 1;
    font-weight: 700;
  }

  :where(.p-card__price--lg .p-card__price-value) {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    line-height: 1;
    font-weight: 700;
  }

  :where(.p-card__price--xl .p-card__price-value) {
    font-size: clamp(2rem, 7vw, 2.75rem);
    line-height: 1;
    font-weight: 700;
  }

  :where(.p-card__price-suffix) {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    opacity: 0.7;
  }

  :where(.p-card__desc) {
    font-size: clamp(0.875rem, 2.5vw, 0.9375rem);
    line-height: 1.5;
    opacity: 0.85;
  }

  /* Features list */
  :where(.p-card__features) {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.625rem;
  }

  :where(.p-feature) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.625rem;
    font-size: clamp(0.875rem, 2.5vw, 0.9375rem);
    line-height: 1.4;
  }

  /* Feature icons */
  :where(.p-feature__icon) {
    width: 18px;
    height: 18px;
    margin-top: 0.125rem;
    flex-shrink: 0;
  }

  :where(.p-feature.is-in .p-feature__icon--check) {
    background: var(--p-accent, var(--color-primary, #007bff));
    border-radius: 50%;
    position: relative;
  }

  :where(.p-feature.is-in .p-feature__icon--check::after) {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 12px;
  }

  :where(.p-feature.is-in .p-feature__icon--dot) {
    background: var(--p-accent, var(--color-primary, #007bff));
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin-top: 0.375rem;
  }

  :where(.p-feature.is-in .p-feature__icon--arrow::before) {
    content: "→";
    color: var(--p-accent, var(--color-primary, #007bff));
    font-weight: 700;
  }

  :where(.p-feature.is-out .p-feature__icon) {
    opacity: 0.3;
    background: currentColor;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin-top: 0.375rem;
  }

  /* Feature not included styles */
  {% if s.feature_style == 'muted' %}
    :where(.p-feature.is-out) {
      opacity: 0.5;
    }
  {% elif s.feature_style == 'strike' %}
    :where(.p-feature.is-out .p-feature__label) {
      text-decoration: line-through;
      opacity: 0.6;
    }
  {% endif %}

  /* CTA buttons - mobile optimized with 48px touch targets */
  :where(.p-card__ctas) {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
  }

  :where(.p-card__ctas--stack) {
    flex-direction: column;
    align-items: stretch;
  }

  :where(.p-card__ctas--inline) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  :where(.p-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px; /* Mobile touch target */
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    border: 2px solid transparent;
    text-align: center;
    transition: var(--transition, all 0.15s ease);
  }

  :where(.p-btn--primary) {
    background: var(--p-accent, var(--color-primary, #007bff));
    color: var(--color-primary-contrast, white);
  }

  :where(.p-btn--primary:hover) {
    opacity: 0.9;
  }

  :where(.p-btn--ghost) {
    background: transparent;
    color: var(--p-accent, var(--color-primary, #007bff));
    border-color: var(--p-accent, var(--color-primary, #007bff));
  }

  :where(.p-btn--ghost:hover) {
    background: var(--p-accent, var(--color-primary, #007bff));
    color: var(--color-primary-contrast, white);
  }

  /* Focus states for accessibility */
  :where(.p-btn:focus-visible) {
    outline: 2px solid var(--p-accent, var(--color-primary, #007bff));
    outline-offset: 2px;
  }

  /* Disclaimer text */
  :where(.p-card__fine) {
    font-size: clamp(0.6875rem, 2vw, 0.75rem);
    opacity: 0.6;
    line-height: 1.4;
  }

  /* Screen reader only */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Hover effects for devices with hover capability */
  {% if s.hover_raise or s.hover_shadow %}
  @media (hover: hover) and (pointer: fine) {
    :where(.p-card) {
      transition: var(--transition, transform 0.15s ease, box-shadow 0.15s ease);
    }

    :where(.p-card:hover) {
      {% if s.hover_raise %}transform: translateY(-2px) scale(1.01);{% endif %}
      {% if s.hover_shadow %}box-shadow: var(--shadow-lg, 0 12px 28px rgba(0,0,0,0.18));{% endif %}
    }
  }
  {% endif %}

  /* Tablet and up adjustments */
  @media (min-width: 641px) {
    :where(.p-card) {
      padding: var(--p-pad);
      gap: var(--p-gap);
    }

    :where(.p-card__ctas--inline) {
      flex-wrap: nowrap;
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    :where(.p-card),
    :where(.p-btn) {
      transition: none !important;
    }
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    :where(.p-card) {
      border-width: 2px;
    }

    :where(.p-btn) {
      border-width: 2px;
    }
  }

  /* Mobile-specific optimizations */
  {% if s.mobile_optimize %}
  @media (max-width: 640px) {
    :where(.p-card) {
      /* Reduce visual complexity on mobile */
      {% if s.shadow != 'none' %}
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      {% endif %}
    }

    /* Ensure buttons are full width on small screens */
    @media (max-width: 400px) {
      :where(.p-card__ctas--inline) {
        flex-direction: column;
      }

      :where(.p-btn) {
        width: 100%;
      }
    }
  }
  {% endif %}
</style>

{% end_require_css %}
{# Dark mode handled automatically via theme's semantic color variables (--color-bg, --color-text, --color-primary) #}