/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:10 Expected identifier but found whitespace
Line 18:10 Expected identifier but found whitespace
Line 18:19 Unexpected "/"
Line 20:1 Expected identifier but found "%"
Line 22:0 Unexpected "{"
Line 22:1 Expected identifier but found "%"
Line 49:0 Unexpected "<"
Line 50:7 Unexpected "{"
... and 133 more hidden warnings

**/
{%- comment -%}
  Section: Custom Trust + Payment
  Save as: sections/custom-trust-payment.liquid
  Then in Theme editor: Add section > "Trust & Payment"
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign wa = s.whatsapp_number | remove: ' ' | remove: '+' | remove: '-'
  if wa.size == 10
    assign wa = '91' | append: wa
  endif

  case s.color_scheme
    when 'cream'
      assign bg = '#f6f2ea'
      assign txt = '#222222'
      assign border = '#ddd8cf'
    when 'white'
      assign bg = '#ffffff'
      assign txt = '#222222'
      assign border = '#e5e5e5'
    when 'dark'
      assign bg = '#1f1f1f'
      assign txt = '#f2f2f2'
      assign border = '#444444'
    else
      assign bg = 'var(--color-background, #ffffff)'
      assign txt = 'var(--color-heading, #222222)'
      assign border = 'var(--color-border, #dddddd)'
  endcase
-%}

<style>
  #tp-{{ section.id }} {
    --tp-bg: {{ bg }};
    --tp-text: {{ txt }};
    --tp-border: {{ border }};
    --tp-accent: {{ s.accent_color }};
    --tp-btn: {{ s.button_bg }};
    --tp-btn-hover: {{ s.button_hover_bg }};
    margin: 0;
    padding: {{ s.padding_top }}px 0 {{ s.padding_bottom }}px;
    font-family: inherit;
    color: var(--tp-text);
  }
  #tp-{{ section.id }} .tp__inner { background: var(--tp-bg); padding: 16px; border-radius: 6px; }

  #tp-{{ section.id }} .tp__btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; box-sizing: border-box; padding: 16px 20px;
    background: var(--tp-btn); color: #fff !important; text-decoration: none !important;
    font-size: 15px; letter-spacing: .3px; transition: background .25s ease;
  }
  #tp-{{ section.id }} .tp__btn:hover { background: var(--tp-btn-hover); }
  #tp-{{ section.id }} .tp__btn svg { width: 24px; height: 24px; flex-shrink: 0; }

  #tp-{{ section.id }} .tp__dispatch {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 20px 0; font-size: 15px; letter-spacing: .5px; text-align: center;
  }
  #tp-{{ section.id }} .tp__dispatch svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

  #tp-{{ section.id }} .tp__badges {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--tp-border); border-radius: 6px; padding: 18px 0; margin-bottom: 20px;
  }
  #tp-{{ section.id }} .tp__badge {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 0 8px; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.3;
    border-right: 1px solid var(--tp-text);
  }
  #tp-{{ section.id }} .tp__badge:last-child { border-right: none; }
  #tp-{{ section.id }} .tp__badge svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

  #tp-{{ section.id }} .tp__pay { border: 1px solid var(--tp-border); border-radius: 6px; padding: 22px 16px 24px; text-align: center; }
  #tp-{{ section.id }} .tp__pay-title { margin: 0 0 18px; font-size: 20px; font-weight: 700; color: var(--tp-accent); line-height: 1.3; }
  #tp-{{ section.id }} .tp__icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  #tp-{{ section.id }} .tp__chip { display: flex; align-items: center; justify-content: center; width: 54px; height: 38px; background: #fff; border: 1px solid #eee; border-radius: 4px; overflow: hidden; }
  #tp-{{ section.id }} .tp__chip--wide { width: 62px; }
  #tp-{{ section.id }} .tp__chip svg { width: 44px; height: 28px; }

  @media (max-width: 600px) {
    #tp-{{ section.id }} .tp__badges { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
    #tp-{{ section.id }} .tp__badge:nth-child(2) { border-right: none; }
    #tp-{{ section.id }} .tp__badge { font-size: 13px; }
    #tp-{{ section.id }} .tp__btn { font-size: 14px; }
    #tp-{{ section.id }} .tp__pay-title { font-size: 17px; }
    #tp-{{ section.id }} .tp__icons { gap: 8px; }
    #tp-{{ section.id }} .tp__chip { width: 46px; height: 34px; }
    #tp-{{ section.id }} .tp__chip--wide { width: 54px; }
  }
</style>

<div id="tp-{{ section.id }}" class="page-width">
  <div class="tp__inner">

    {%- if s.show_whatsapp -%}
      {%- capture wa_msg -%}Hi, I would like to customise / enquire about: {{ product.title }} - {{ shop.url }}{{ product.url }}{%- endcapture -%}
      {%- unless product -%}{%- assign wa_msg = 'Hi, I would like to enquire about your products.' -%}{%- endunless -%}
      <a class="tp__btn" href="https://wa.me/{{ wa }}?text={{ wa_msg | url_encode }}" target="_blank" rel="noopener">
        <svg viewBox="0 0 32 32" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M16 3.5C9.1 3.5 3.5 9.1 3.5 16c0 2.3.6 4.4 1.7 6.3L3.5 28.5l6.4-1.7c1.8 1 3.9 1.6 6.1 1.6 6.9 0 12.5-5.6 12.5-12.4S22.9 3.5 16 3.5z"/>
          <path d="M12 10.5c-.3.6-.9 1.6-.5 2.8.9 2.6 3.6 5.3 6.2 6.2 1.2.4 2.2-.2 2.8-.5.3-.2.4-.6.2-.9l-1-1.5c-.2-.3-.6-.4-.9-.2l-.9.5c-1.1-.5-2-1.4-2.5-2.5l.5-.9c.2-.3.1-.7-.2-.9l-1.5-1c-.3-.2-.8-.1-1 .3z"/>
        </svg>
        {{ s.button_label }}
      </a>
      <div class="tp__dispatch">
        <svg viewBox="0 0 24 24"><path d="M2 6h11v9H2z"/><path d="M13 9h4l3 3v3h-7z"/><circle cx="6" cy="17" r="1.8"/><circle cx="16" cy="17" r="1.8"/></svg>
        <span>{{ s.dispatch_text }}</span>
      </div>
    {%- endif -%}

    {%- if s.show_badges -%}
      <div class="tp__badges">
        <div class="tp__badge">
          <svg viewBox="0 0 32 32"><path d="M3 9h16v12H3z"/><path d="M19 13h5l4 4v4h-9z"/><circle cx="8" cy="23" r="2"/><circle cx="23" cy="23" r="2"/><path d="M6 13h6M8 17h4"/></svg>
          {{ s.badge_1 }}
        </div>
        <div class="tp__badge">
          <svg viewBox="0 0 32 32"><circle cx="16" cy="14" r="9"/><path d="M12 14l3 3 5-6"/><path d="M11 22l-2 7 7-3 7 3-2-7"/></svg>
          {{ s.badge_2 }}
        </div>
        <div class="tp__badge">
          <svg viewBox="0 0 32 32"><path d="M5 27l3-9L22 4l6 6-14 14z"/><path d="M19 7l6 6"/><path d="M8 18l6 6"/></svg>
          {{ s.badge_3 }}
        </div>
        <div class="tp__badge">
          <svg viewBox="0 0 32 32"><rect x="3" y="7" width="26" height="18" rx="2"/><path d="M3 12h26"/><path d="M20 19l2 2 4-4"/></svg>
          {{ s.badge_4 }}
        </div>
      </div>
    {%- endif -%}

    {%- if s.show_payment -%}
      <div class="tp__pay">
        <h3 class="tp__pay-title">{{ s.payment_heading }}</h3>
        <div class="tp__icons">
          <div class="tp__chip tp__chip--wide" title="UPI">
            <svg viewBox="0 0 60 28"><text x="2" y="20" font-family="Arial,sans-serif" font-size="17" font-style="italic" font-weight="700" fill="#555">UPI</text><polygon points="40,6 47,6 52,14 45,22 40,22 45,14" fill="#f58220"/><polygon points="47,6 53,6 58,14 51,22 45,22 52,14" fill="#0a8f3c"/></svg>
          </div>
          <div class="tp__chip" title="Visa">
            <svg viewBox="0 0 44 28"><text x="22" y="20" text-anchor="middle" font-family="Arial,sans-serif" font-size="15" font-style="italic" font-weight="900" fill="#1a1f71">VISA</text></svg>
          </div>
          <div class="tp__chip" title="American Express" style="background:#2e77bc;border-color:#2e77bc;">
            <svg viewBox="0 0 44 28"><text x="22" y="12" text-anchor="middle" font-family="Arial,sans-serif" font-size="8" font-weight="700" fill="#fff">AMERICAN</text><text x="22" y="22" text-anchor="middle" font-family="Arial,sans-serif" font-size="8" font-weight="700" fill="#fff">EXPRESS</text></svg>
          </div>
          <div class="tp__chip" title="Mastercard">
            <svg viewBox="0 0 44 28"><circle cx="17" cy="12" r="8" fill="#eb001b"/><circle cx="27" cy="12" r="8" fill="#f79e1b" fill-opacity=".9"/><text x="22" y="26" text-anchor="middle" font-family="Arial,sans-serif" font-size="5" fill="#333">mastercard</text></svg>
          </div>
          <div class="tp__chip" title="Amazon Pay">
            <svg viewBox="0 0 44 28"><text x="22" y="15" text-anchor="middle" font-family="Arial,sans-serif" font-size="12" fill="#222">pay</text><path d="M10 20Q22 26 34 20" stroke="#ff9900" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
          </div>
          <div class="tp__chip" title="Google Pay">
            <svg viewBox="0 0 44 28"><text x="4" y="19" font-family="Arial,sans-serif" font-size="11" font-weight="700" fill="#4285f4">G</text><text x="15" y="19" font-family="Arial,sans-serif" font-size="11" fill="#5f6368">Pay</text></svg>
          </div>
          <div class="tp__chip" title="PhonePe">
            <svg viewBox="0 0 44 28"><circle cx="22" cy="9" r="6" fill="#5f259f"/><text x="22" y="9" text-anchor="middle" dominant-baseline="central" font-family="Arial,sans-serif" font-size="8" font-weight="700" fill="#fff">पे</text><text x="22" y="24" text-anchor="middle" font-family="Arial,sans-serif" font-size="6.5" font-weight="700" fill="#5f259f">PhonePe</text></svg>
          </div>
          <div class="tp__chip" title="Diners Club">
            <svg viewBox="0 0 44 28"><circle cx="22" cy="14" r="11" fill="#0079be"/><circle cx="22" cy="14" r="8" fill="#fff"/><rect x="21" y="7" width="2" height="14" fill="#0079be"/><path d="M17 8Q13 14 17 20M27 8Q31 14 27 20" stroke="#0079be" stroke-width="2" fill="none"/></svg>
          </div>
        </div>
      </div>
    {%- endif -%}

  </div>
</div>

{% schema %}
{
  "name": "Trust & Payment",
  "tag": "section",
  "class": "section-trust-payment",
  "settings": [
    { "type": "header", "content": "Color scheme" },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "cream",
      "options": [
        { "value": "theme", "label": "Match theme" },
        { "value": "cream", "label": "Cream" },
        { "value": "white", "label": "White" },
        { "value": "dark", "label": "Dark" }
      ]
    },
    { "type": "color", "id": "accent_color", "label": "Heading / accent color", "default": "#b5400f" },
    { "type": "color", "id": "button_bg", "label": "WhatsApp button color", "default": "#2b2b2b" },
    { "type": "color", "id": "button_hover_bg", "label": "WhatsApp button hover color", "default": "#25D366" },

    { "type": "header", "content": "WhatsApp button" },
    { "type": "checkbox", "id": "show_whatsapp", "label": "Show WhatsApp button", "default": true },
    { "type": "text", "id": "whatsapp_number", "label": "WhatsApp number", "default": "6377283718", "info": "10-digit Indian numbers get +91 added automatically." },
    { "type": "text", "id": "button_label", "label": "Button text", "default": "Get it Customised / Inquire via WhatsApp" },
    { "type": "text", "id": "dispatch_text", "label": "Dispatch text", "default": "Made-to-Order | Dispatch within 35-40 days" },

    { "type": "header", "content": "Trust badges" },
    { "type": "checkbox", "id": "show_badges", "label": "Show trust badges", "default": true },
    { "type": "text", "id": "badge_1", "label": "Badge 1", "default": "Free Shipping" },
    { "type": "text", "id": "badge_2", "label": "Badge 2", "default": "6-months Warranty" },
    { "type": "text", "id": "badge_3", "label": "Badge 3", "default": "Customisation" },
    { "type": "text", "id": "badge_4", "label": "Badge 4", "default": "Flexible Payment Modes" },

    { "type": "header", "content": "Payment options" },
    { "type": "checkbox", "id": "show_payment", "label": "Show payment options", "default": true },
    { "type": "text", "id": "payment_heading", "label": "Heading", "default": "Multiple secure payment options available" },

    { "type": "header", "content": "Spacing" },
    { "type": "range", "id": "padding_top", "label": "Top padding", "min": 0, "max": 60, "step": 4, "unit": "px", "default": 16 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding", "min": 0, "max": 60, "step": 4, "unit": "px", "default": 16 }
  ],
  "presets": [
    { "name": "Trust & Payment" }
  ]
}
{% endschema %}
